Hugging Face's logo

Spaces:
lfdemo
/
zero
Running

App Files Community
zero
File size: 42,903 Bytes
ac8eb51
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
<!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>