Download index.html from lfdemo/zero: direct link, hf CLI and curl.
- Browser
- Download file 42.9 kB
-
https://huggingface.co/spaces/lfdemo/zero/resolve/main/index.html
- Command line
-
hf download hf://spaces/lfdemo/zero/index.html
-
curl -L -o index.html https://huggingface.co/spaces/lfdemo/zero/resolve/main/index.html
42.9 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Zero to Hero - Mission: Launch Your First App | Galaxies.dev</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .hero-bg { | |
| background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.15) 0%, rgba(15, 23, 42, 0) 70%); | |
| } | |
| .mission-card { | |
| background: linear-gradient(145deg, #1e293b, #0f172a); | |
| border: 1px solid rgba(100, 116, 139, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .mission-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2); | |
| } | |
| .testimonial-card { | |
| background: linear-gradient(145deg, #1e293b, #0f172a); | |
| border: 1px solid rgba(100, 116, 139, 0.2); | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); | |
| } | |
| .nav-link:hover { | |
| color: #3b82f6; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4); | |
| } | |
| .btn-secondary { | |
| background: linear-gradient(90deg, #1e293b, #334155); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-secondary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(100, 116, 139, 0.4); | |
| } | |
| .pricing-card { | |
| background: linear-gradient(145deg, #1e293b, #0f172a); | |
| border: 1px solid rgba(100, 116, 139, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .pricing-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2); | |
| } | |
| .feature-icon { | |
| background: linear-gradient(145deg, #1e293b, #0f172a); | |
| border: 1px solid rgba(100, 116, 139, 0.2); | |
| } | |
| .scroll-container { | |
| scrollbar-width: thin; | |
| scrollbar-color: #3b82f6 #1e293b; | |
| } | |
| .scroll-container::-webkit-scrollbar { | |
| height: 6px; | |
| } | |
| .scroll-container::-webkit-scrollbar-track { | |
| background: #1e293b; | |
| } | |
| .scroll-container::-webkit-scrollbar-thumb { | |
| background-color: #3b82f6; | |
| border-radius: 6px; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-slate-900 border-b border-slate-800 sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <a href="https://galaxies.dev/" class="flex items-center"> | |
| <img src="https://galaxies.dev/img/logos/logo--blue.png" alt="Galaxies.dev logo" class="h-8"> | |
| </a> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="nav-link text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Missions</a> | |
| <a href="#" class="nav-link text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Courses</a> | |
| <a href="#" class="nav-link text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Tutorials</a> | |
| <a href="#" class="nav-link text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Community</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <div class="relative mx-4"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-slate-400"></i> | |
| </div> | |
| <input type="text" placeholder="Ctrl K, ⌘ K" class="bg-slate-800 text-white text-sm rounded-md pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 w-48"> | |
| </div> | |
| <button class="text-slate-300 hover:text-white px-4 py-2 rounded-md text-sm font-medium">Log In</button> | |
| <button class="btn-primary text-white px-4 py-2 rounded-md text-sm font-medium ml-2">Try for free</button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-slate-400 hover:text-white hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-bg py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6"> | |
| <span class="gradient-text">Launch Your First Real Mobile App</span> in 30 Days | |
| </h1> | |
| <p class="text-xl text-slate-300 mb-8"> | |
| Build with real-world features like local storage, device access, polished UI, authentication, and app store deployment — all in one focused journey. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="btn-primary text-white px-8 py-3 rounded-md text-lg font-semibold">Start Building Your App Now</button> | |
| <button class="btn-secondary text-white px-8 py-3 rounded-md text-lg font-semibold">Learn More</button> | |
| </div> | |
| <p class="mt-4 text-slate-400 text-sm"> | |
| Included with Galaxies Lifetime Access. | |
| </p> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://galaxies.dev/img/missions/zero-to-hero-hero.webp" alt="Zero to Hero retro design" class="rounded-lg shadow-xl max-w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Supported By Section --> | |
| <section class="py-12 bg-slate-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-center text-slate-400 text-sm uppercase font-semibold tracking-wider mb-8">Supported by</h2> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <img src="https://galaxies.dev/img/logos/expo.svg" alt="Expo Logo" class="h-12"> | |
| <img src="https://galaxies.dev/img/logos/sentry.svg" alt="Sentry Logo" class="h-12"> | |
| <img src="https://galaxies.dev/img/logos/revcat.svg" alt="RevenueCat Logo" class="h-12"> | |
| <img src="https://galaxies.dev/img/logos/clerk.svg" alt="Clerk Logo" class="h-12"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- One Path Section --> | |
| <section class="py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">One path</h2> | |
| <p class="text-xl text-slate-300 max-w-3xl mx-auto">A single track to your published app</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/2"> | |
| <p class="text-lg text-slate-300 mb-6"> | |
| This is the first Mission in the Galaxies.dev universe. Not just a one-off course, a bootcamp-like experience at a fraction of the cost. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="mission-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="feature-icon w-12 h-12 rounded-lg flex items-center justify-center mr-4"> | |
| <i class="fas fa-mobile-alt text-blue-500 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Learn React Native</h3> | |
| </div> | |
| <p class="text-slate-400"> | |
| React Native recently released groundbreaking new architecture. We teach this new world so you have up-to-date skills. | |
| </p> | |
| </div> | |
| <div class="mission-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="feature-icon w-12 h-12 rounded-lg flex items-center justify-center mr-4"> | |
| <i class="fas fa-rocket text-purple-500 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Ship Your First App</h3> | |
| </div> | |
| <p class="text-slate-400"> | |
| Expo is the official recommended framework by Meta. We bring you vetted tutorials from the companies building the languages themselves. | |
| </p> | |
| </div> | |
| <div class="mission-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="feature-icon w-12 h-12 rounded-lg flex items-center justify-center mr-4"> | |
| <i class="fas fa-briefcase text-pink-500 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Beat the Curve on your CV</h3> | |
| </div> | |
| <p class="text-slate-400"> | |
| Be ready when more companies adopt React Native to ship apps and learn mobile development to land the job. | |
| </p> | |
| </div> | |
| <div class="mission-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="feature-icon w-12 h-12 rounded-lg flex items-center justify-center mr-4"> | |
| <i class="fas fa-gem text-blue-400 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Built to be Affordable</h3> | |
| </div> | |
| <p class="text-slate-400"> | |
| One small lifetime payment feels much more manageable than most bootcamps while giving you the same level of skills. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://galaxies.dev/img/missions/phone.webp" alt="React Native on iPhone" class="rounded-lg shadow-xl max-w-full h-auto"> | |
| <div class="absolute -bottom-6 -right-6 bg-slate-900 p-4 rounded-lg shadow-lg"> | |
| <p class="text-sm text-slate-300">Access all of Galaxies</p> | |
| <p class="text-xs text-slate-400">When you purchase Zero to Hero, you also get access to all of Galaxies fast-paced courses, practical projects, tutorials, and more.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mission Modules Section --> | |
| <section class="py-20 bg-slate-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">This is the way</h2> | |
| <p class="text-xl text-slate-300 max-w-3xl mx-auto">Your mission, if you choose to accept</p> | |
| <p class="text-slate-400 mt-4 max-w-3xl mx-auto">These mission modules will transform you from beginner to full-stack mobile developer, each step building on the previous as you go.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="mission-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-900 text-blue-400 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-4">1</div> | |
| <h3 class="text-lg font-semibold">React Native Fundamentals</h3> | |
| </div> | |
| <p class="text-slate-400"> | |
| Covers the core RN basics, from CLI to JSON and AsyncStorages | |
| </p> | |
| </div> | |
| <div class="mission-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-900 text-purple-400 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-4">2</div> | |
| <h3 class="text-lg font-semibold">Local Data & Device Integration</h3> | |
| </div> | |
| <p class="text-slate-400"> | |
| Focuses on storage, database, and device features like camera | |
| </p> | |
| </div> | |
| <div class="mission-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-pink-900 text-pink-400 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-4">3</div> | |
| <h3 class="text-lg font-semibold">Advanced UI & State Management</h3> | |
| </div> | |
| <p class="text-slate-400"> | |
| Deals with state management, debugging, animations, and navigation features | |
| </p> | |
| </div> | |
| <div class="mission-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-900 text-indigo-400 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-4">4</div> | |
| <h3 class="text-lg font-semibold">Application Security & UX</h3> | |
| </div> | |
| <p class="text-slate-400"> | |
| Covers authentication, forms, file handling, and user experience features | |
| </p> | |
| </div> | |
| <div class="mission-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-600 text-blue-200 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-4">5</div> | |
| <h3 class="text-lg font-semibold">Native Capabilities & Publishing</h3> | |
| </div> | |
| <p class="text-slate-400"> | |
| Focuses on native modules, push notifications, and publishing your app | |
| </p> | |
| </div> | |
| <div class="mission-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-600 text-purple-200 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-4">6</div> | |
| <h3 class="text-lg font-semibold">The Graduation Project</h3> | |
| </div> | |
| <p class="text-slate-400"> | |
| Build a full app based on the latest Expo Features and APIs | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <p class="text-slate-400">🪐 The Zero to Hero mission is based on Expo SDK 53.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section class="py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">Skill up</h2> | |
| <p class="text-xl text-slate-300 max-w-3xl mx-auto">XP you'll get on the way</p> | |
| <p class="text-slate-400 mt-4 max-w-3xl mx-auto">Learn these skills on this mission, and level up your mobile development, from core infrastructure to polished UI, while building your real application.</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-12"> | |
| <div class="bg-slate-800 rounded-lg p-4 text-center"> | |
| <p class="text-blue-400 font-medium">Expo Router</p> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 text-center"> | |
| <p class="text-blue-400 font-medium">Data Storage</p> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 text-center"> | |
| <p class="text-blue-400 font-medium">Animations & Gestures</p> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 text-center"> | |
| <p class="text-blue-400 font-medium">Styling & Themes</p> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 text-center"> | |
| <p class="text-blue-400 font-medium">Push Notifications</p> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 text-center"> | |
| <p class="text-blue-400 font-medium">Debugging</p> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 text-center"> | |
| <p class="text-blue-400 font-medium">Expo Prebuild & EAS</p> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 text-center"> | |
| <p class="text-blue-400 font-medium">Forms</p> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 text-center"> | |
| <p class="text-blue-400 font-medium">Tanstack Query</p> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 text-center"> | |
| <p class="text-blue-400 font-medium">Native Modules</p> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 text-center"> | |
| <p class="text-blue-400 font-medium">Camera & Media</p> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 text-center"> | |
| <p class="text-blue-400 font-medium">State Management</p> | |
| </div> | |
| </div> | |
| <div class="text-center mb-8"> | |
| <h3 class="text-xl font-semibold mb-4">Gain experience with these popular libraries</h3> | |
| </div> | |
| <div class="scroll-container overflow-x-auto pb-4"> | |
| <div class="flex space-x-8 min-w-max"> | |
| <img src="https://galaxies.dev/img/logos/libraries/expo-modules.svg" alt="Expo Modules" class="h-12"> | |
| <img src="https://galaxies.dev/img/logos/libraries/sqlite.svg" alt="SQLite" class="h-12"> | |
| <img src="https://galaxies.dev/img/logos/libraries/expo-router.svg" alt="Expo Router" class="h-12"> | |
| <img src="https://galaxies.dev/img/logos/libraries/flashlist.svg" alt="FlashList" class="h-12"> | |
| <img src="https://galaxies.dev/img/logos/libraries/gesture-handler.svg" alt="Gesture Handler" class="h-12"> | |
| <img src="https://galaxies.dev/img/logos/libraries/hook-form.svg" alt="React Hook Form" class="h-12"> | |
| <img src="https://galaxies.dev/img/logos/libraries/mmkv.svg" alt="MMKV" class="h-12"> | |
| <img src="https://galaxies.dev/img/logos/libraries/reanimated.svg" alt="Reanimated" class="h-12"> | |
| <img src="https://galaxies.dev/img/logos/libraries/tanstack.svg" alt="TanStack Query" class="h-12"> | |
| <img src="https://galaxies.dev/img/logos/libraries/zod.svg" alt="Zod" class="h-12"> | |
| <img src="https://galaxies.dev/img/logos/libraries/zustand.svg" alt="Zustand" class="h-12"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section class="py-20 bg-slate-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">Choose Your Path</h2> | |
| <p class="text-xl text-slate-300 max-w-3xl mx-auto">Start your journey to becoming a React Native hero</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto"> | |
| <div class="pricing-card p-8 rounded-xl"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2">Core Package</h3> | |
| <p class="text-blue-400 font-semibold">$399 <span class="text-slate-400 text-sm">Lifetime access</span></p> | |
| </div> | |
| <span class="bg-blue-900 text-blue-300 text-xs font-semibold px-3 py-1 rounded-full">POPULAR</span> | |
| </div> | |
| <p class="text-slate-300 mb-6">Perfect for self-starters who want the full roadmap and lifetime access.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Master React Native with the complete Zero to Hero mission</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Learn by doing with 15+ projects & real-world tutorials</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Download & explore source code from private GitHub repos</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Build & publish real apps with confidence</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>No subscriptions. One-time payment only</span> | |
| </li> | |
| </ul> | |
| <button class="btn-primary w-full py-3 rounded-lg font-semibold">Join Now – Lifetime Access</button> | |
| </div> | |
| <div class="pricing-card p-8 rounded-xl"> | |
| <div class="mb-6"> | |
| <h3 class="text-2xl font-bold mb-2">Galaxies Plus</h3> | |
| <p class="text-purple-400 font-semibold">$699 <span class="text-slate-400 text-sm">Lifetime access</span></p> | |
| <p class="text-sm text-slate-400 mt-1">Solo Team</p> | |
| </div> | |
| <p class="text-slate-300 mb-6">For serious devs who want expert guidance and support.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> | |
| <span>Join live coaching calls to get unstuck fast</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> | |
| <span>1-on-1 onboarding call with Simon</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> | |
| <span>Access private Discord channels with Simon and other devs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> | |
| <span>Everything from Core Package included</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> | |
| <span>Lifetime access. No subscriptions.</span> | |
| </li> | |
| </ul> | |
| <button class="btn-secondary w-full py-3 rounded-lg font-semibold">Get Coaching & Full Access</button> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <p class="text-slate-400">100% risk free. I know you'll love Galaxies.dev, so I provide a no hassle, 14-day money back guarantee.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Beyond the Mission Section --> | |
| <section class="py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">More & more</h2> | |
| <p class="text-xl text-slate-300 max-w-3xl mx-auto">Beyond the mission, dive into Galaxies</p> | |
| <p class="text-slate-400 mt-4 max-w-3xl mx-auto">By joining this mission, you'll also get access to all of the courses, projects & tutorials on Galaxies.dev, so you can learn what and how you like.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="mission-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-900 text-blue-400 w-12 h-12 rounded-lg flex items-center justify-center mr-4"> | |
| <i class="fas fa-book-open text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Learn with Tutorials</h3> | |
| </div> | |
| <p class="text-slate-400"> | |
| We have dozens of tutorials to help you build features for your app. These were designed around the areas where most developers get stuck. | |
| </p> | |
| </div> | |
| <div class="mission-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-900 text-purple-400 w-12 h-12 rounded-lg flex items-center justify-center mr-4"> | |
| <i class="fas fa-laptop-code text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Complete Projects</h3> | |
| </div> | |
| <p class="text-slate-400"> | |
| Apply your knowledge in real React Native apps with guidance or build your own projects from scratch. | |
| </p> | |
| </div> | |
| <div class="mission-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-pink-900 text-pink-400 w-12 h-12 rounded-lg flex items-center justify-center mr-4"> | |
| <i class="fas fa-graduation-cap text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Train with Courses</h3> | |
| </div> | |
| <p class="text-slate-400"> | |
| A collection of hands-on, in-depth React Native courses that walk you through specific topics like Testing, Tamagui basics, Animations, and other core skills. | |
| </p> | |
| </div> | |
| <div class="mission-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-900 text-indigo-400 w-12 h-12 rounded-lg flex items-center justify-center mr-4"> | |
| <i class="fas fa-comments text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Community Support</h3> | |
| </div> | |
| <p class="text-slate-400"> | |
| Lost in Space? Not with us. Join our Discord or Office Hours and get help when you get stuck. Our community would be thrilled to support you. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-slate-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">Success Stories</h2> | |
| <p class="text-xl text-slate-300 max-w-3xl mx-auto">Why Developers 💙 Galaxies</p> | |
| <p class="text-slate-400 mt-4 max-w-3xl mx-auto">You could be next. Start your journey today.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="testimonial-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://galaxies.dev/img/students/anna.webp" alt="Anna Cheng" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Anna Cheng</h4> | |
| <p class="text-slate-400 text-sm">Web Developer</p> | |
| </div> | |
| </div> | |
| <p class="text-slate-300 italic"> | |
| "I love it! Thanks for providing these quality courses. As a junior React web developer, here is a great place to start my React Native journey!" | |
| </p> | |
| </div> | |
| <div class="testimonial-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://galaxies.dev/img/students/jose.webp" alt="Jose Rodriguez" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Jose Rodriguez</h4> | |
| <p class="text-slate-400 text-sm">React Native Developer @ IBM</p> | |
| </div> | |
| </div> | |
| <p class="text-slate-300 italic"> | |
| "Simon and his courses have been invaluable in both learning and reinforcing my knowledge of React Native. Every topic he teaches is essential for working as a developer." | |
| </p> | |
| </div> | |
| <div class="testimonial-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://galaxies.dev/img/students/shawn.webp" alt="Shawn Fitzgerald" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Shawn Fitzgerald</h4> | |
| <p class="text-slate-400 text-sm">Mobile Architect</p> | |
| </div> | |
| </div> | |
| <p class="text-slate-300 italic"> | |
| "When Galaxies was announced with a React Native focus I knew I needed to join. Best decision ever. The materials, articles, and depth of coverage are stellar." | |
| </p> | |
| </div> | |
| <div class="testimonial-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://galaxies.dev/img/students/chadi.webp" alt="Chadi Osseiran" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Chadi Osseiran</h4> | |
| <p class="text-slate-400 text-sm">Developer</p> | |
| </div> | |
| </div> | |
| <p class="text-slate-300 italic"> | |
| "Simon you are one the most motivational, experienced, enthusiast person I have encountered while starting my career in development. You boosted my knowledge, gave me confidence." | |
| </p> | |
| </div> | |
| <div class="testimonial-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://galaxies.dev/img/students/leon.webp" alt="Leon Schirmer" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Leon Schirmer</h4> | |
| <p class="text-slate-400 text-sm">Fullstack Developer</p> | |
| </div> | |
| </div> | |
| <p class="text-slate-300 italic"> | |
| "Galaxies offers an exceptional learning experience! Simon is incredibly kind and takes the time to ensure everyone understands the material." | |
| </p> | |
| </div> | |
| <div class="testimonial-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://galaxies.dev/img/students/arif.webp" alt="Arif Ahmed" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Arif Ahmed</h4> | |
| <p class="text-slate-400 text-sm">Developer</p> | |
| </div> | |
| </div> | |
| <p class="text-slate-300 italic"> | |
| "The clarity with which everything is presented in Galaxies is phenomenal. Highly recommended to head here to learn something new and brush up old concepts in a better way." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Simon Section --> | |
| <section class="py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/3 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://galaxies.dev/img/authors/simong.webp" alt="Simon Grimm" class="rounded-lg shadow-xl max-w-full h-auto"> | |
| <img src="https://galaxies.dev/img/illustrations/home/signature.png" alt="Simon's signature" class="absolute -bottom-6 -right-6 h-16"> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <h2 class="text-3xl font-bold mb-6">Hi, I'm Simon 👋</h2> | |
| <p class="text-lg text-slate-300 mb-6"> | |
| I'm the creator behind the YouTube channel where over 100,000 developers have learned to build real apps with React Native. | |
| </p> | |
| <p class="text-lg text-slate-300 mb-6"> | |
| Whether you're just getting started or want to level up your skills, I'll guide you with practical lessons, proven tips, and real-world experience. | |
| </p> | |
| <p class="text-lg text-slate-300 mb-8"> | |
| Let's build apps together—apps you'll be proud to publish and share. You're in the right place to confidently <span class="font-semibold text-blue-400">create React Native apps</span> that work. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="btn-primary text-white px-8 py-3 rounded-md text-lg font-semibold">Start Learning Now</button> | |
| <button class="btn-secondary text-white px-8 py-3 rounded-md text-lg font-semibold">Watch Free Videos</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-br from-blue-900 to-purple-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Stop Googling around. Start learning React Native, today.</h2> | |
| <button class="btn-primary text-white px-8 py-3 rounded-md text-lg font-semibold mb-8">Try for FREE</button> | |
| <div class="flex justify-center"> | |
| <img src="https://galaxies.dev/img/meerkat_on_a_rocket.webp" alt="Meerkat astronaut on rocket" class="max-w-xs"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-slate-900 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <img src="https://galaxies.dev/img/logos/logo--blue.png" alt="Galaxies.dev logo" class="h-8 mb-4"> | |
| <p class="text-slate-400">React Native Tutorials for Mobile App Development</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Courses</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Tutorials</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Podcast</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-slate-400 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Terms & Conditions</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Refund Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-slate-400 mb-4 md:mb-0">© 2024 Galaxies.dev. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-slate-400 hover:text-white"><i class="fab fa-youtube text-xl"></i></a> | |
| <a href="#" class="text-slate-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a> | |
| <a href="#" class="text-slate-400 hover:text-white"><i class="fab fa-discord text-xl"></i></a> | |
| <a href="#" class="text-slate-400 hover:text-white"><i class="fab fa-github text-xl"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple script for mobile menu toggle (would need proper implementation) | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // This would be expanded for a real mobile menu toggle | |
| console.log('Galaxies.dev - Launch Your First App'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=lfdemo/zero" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |