zero / index.html
lfdemo's picture
- Initial Deployment
ac8eb51 verified
Raw History Blame Contribute Delete
42.9 kB
<!DOCTYPE html>
<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>