-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
742 lines (713 loc) · 54.1 KB
/
index.html
File metadata and controls
742 lines (713 loc) · 54.1 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Commit 451 — Expert Software Consultancy | Mobile, Web & AI Solutions</title>
<meta name="description" content="Commit 451 is a boutique software consultancy specializing in mobile, web, and AI-driven solutions. We turn vibecoded prototypes into production-ready apps. Expert Android, iOS, and full-stack development. It's a pleasure to build.">
<meta name="robots" content="index, follow">
<meta name="author" content="Commit 451 LLC">
<meta name="keywords" content="software consultancy, mobile development, Android, iOS, web development, AI solutions, full-stack, Commit 451, vibe coding, vibecoded app, fix vibecoded project, AI prototype to production, app store launch">
<link rel="canonical" href="https://commit451.com/">
<link rel="alternate" hreflang="en" href="https://commit451.com/">
<meta name="theme-color" content="#60d4c5">
<meta name="color-scheme" content="dark">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Commit 451 — Expert Software Consultancy | Vibecode to Production">
<meta property="og:description" content="Boutique software consultancy specializing in mobile, web, and AI-driven solutions. We rescue vibecoded projects and ship them to real audiences. It's a pleasure to build.">
<meta property="og:url" content="https://commit451.com/">
<meta property="og:image" content="https://commit451.com/images/avatar.png">
<meta property="og:site_name" content="Commit 451">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Commit451">
<meta name="twitter:title" content="Commit 451 — Expert Software Consultancy | Vibecode to Production">
<meta name="twitter:description" content="Boutique software consultancy. We rescue vibecoded projects and ship them to real audiences.">
<meta name="twitter:image" content="https://commit451.com/images/avatar.png">
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Fonts (preloaded for performance) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;500;600;700&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: { teal: '#60d4c5', red: '#e74c3c' },
dark: { 950: '#030712', 900: '#111827', 800: '#1f2937', 700: '#374151' }
},
fontFamily: {
fira: ['"Fira Code"', 'monospace'],
sans: ['Inter', 'system-ui', 'sans-serif']
}
}
}
}
</script>
<!-- Schema.org JSON-LD -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Commit 451",
"url": "https://commit451.com",
"logo": "https://commit451.com/images/avatar.png",
"description": "Boutique software consultancy specializing in mobile, web, and AI-driven solutions. We turn vibecoded prototypes into production-ready apps.",
"email": "hello@commit451.com",
"sameAs": [
"https://x.com/Commit451",
"https://github.com/Commit451",
"https://play.google.com/store/apps/dev?id=8992288925330781810"
],
"contactPoint": {
"@type": "ContactPoint",
"email": "hello@commit451.com",
"contactType": "customer service"
}
}
</script>
<!-- FAQ Schema for rich snippets -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What services does Commit 451 offer?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Commit 451 offers mobile app development (Android and iOS), web application development, AI and automation integration, vibecoded project rescue, and technical consulting including architecture reviews and code audits."
}
},
{
"@type": "Question",
"name": "What technologies does Commit 451 specialize in?",
"acceptedAnswer": {
"@type": "Answer",
"text": "We specialize in Kotlin, Jetpack Compose, Swift, React, TypeScript, Node.js, and AI/LLM integration. We have deep expertise in native Android development and modern full-stack web technologies."
}
},
{
"@type": "Question",
"name": "How can I contact Commit 451?",
"acceptedAnswer": {
"@type": "Answer",
"text": "You can reach us via email at hello@commit451.com. We're always open to hearing about new projects and interesting challenges."
}
},
{
"@type": "Question",
"name": "Can you fix my vibecoded app?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Absolutely. We specialize in taking AI-generated and vibecoded prototypes and turning them into production-ready applications. We audit the code, fix architectural issues, add proper error handling and testing, optimize performance, and prepare your app for launch on the App Store or Google Play."
}
},
{
"@type": "Question",
"name": "What is vibecode rescue?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Vibecode rescue is our service for founders and creators who have built an app prototype using AI coding tools like Cursor, Copilot, or Claude but need expert developers to make it production-ready. We handle code quality, security, scalability, app store compliance, and audience growth."
}
},
{
"@type": "Question",
"name": "How do I take my AI-built prototype to the App Store?",
"acceptedAnswer": {
"@type": "Answer",
"text": "We help you go from prototype to published app. Our process includes a code audit, architecture improvements, UI/UX polish, app store optimization (ASO), compliance review, and launch support. We've shipped apps with over 1 million combined users across Google Play and the App Store."
}
}
]
}
</script>
<!-- ProfessionalService Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfessionalService",
"name": "Commit 451",
"url": "https://commit451.com",
"logo": "https://commit451.com/images/avatar.png",
"description": "Expert software consultancy specializing in mobile, web, and AI-driven solutions. We rescue vibecoded projects and ship them to real audiences.",
"email": "hello@commit451.com",
"priceRange": "$$",
"knowsAbout": ["Android Development", "iOS Development", "Kotlin", "React", "TypeScript", "AI Integration", "Software Architecture", "Vibe Coding", "AI-Generated Code Rescue", "App Store Optimization"],
"hasOfferCatalog": {
"@type": "OfferCatalog",
"name": "Software Development Services",
"itemListElement": [
{"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Mobile App Development"}},
{"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Web Application Development"}},
{"@type": "Offer", "itemOffered": {"@type": "Service", "name": "AI & Automation Integration"}},
{"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Vibecode Rescue — AI Prototype to Production"}},
{"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Technical Consulting"}}
]
}
}
</script>
<style>
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.glow { box-shadow: 0 0 40px rgba(96, 212, 197, 0.08); }
.gradient-border { position: relative; }
.gradient-border::before {
content: ''; position: absolute; inset: -1px; border-radius: inherit;
background: linear-gradient(135deg, #60d4c5 0%, #e74c3c 100%); z-index: -1; opacity: 0.4;
}
</style>
</head>
<body class="bg-dark-950 text-gray-100 font-sans antialiased">
<!-- Background -->
<div class="fixed inset-0 -z-10">
<img src="/images/bg.png" alt="" class="h-full w-full object-cover opacity-[0.07]" aria-hidden="true">
<div class="absolute inset-0 bg-gradient-to-b from-dark-950/40 via-dark-950/90 to-dark-950"></div>
</div>
<!-- Navigation -->
<nav class="fixed top-0 left-0 right-0 z-50 border-b border-dark-700/50 bg-dark-950/80 backdrop-blur-md" aria-label="Main navigation">
<div class="mx-auto max-w-6xl px-6 py-4 flex items-center justify-between">
<a href="#hero" class="flex items-center gap-3 group">
<img src="/images/avatar.png" alt="Commit 451 logo" width="36" height="36" class="rounded-full border border-dark-700 group-hover:border-brand-teal transition-colors">
<span class="font-fira font-bold text-lg text-white group-hover:text-brand-teal transition-colors">Commit 451</span>
</a>
<div class="hidden sm:flex items-center gap-8 text-sm font-medium">
<a href="#work" class="text-gray-400 hover:text-brand-teal transition-colors">Work</a>
<a href="#about" class="text-gray-400 hover:text-brand-teal transition-colors">About</a>
<a href="#services" class="text-gray-400 hover:text-brand-teal transition-colors">Services</a>
<a href="/blog/" class="text-gray-400 hover:text-brand-teal transition-colors">Blog</a>
<a href="https://cal.com/commit451/15min" target="_blank" rel="noopener noreferrer" class="rounded-lg border border-brand-teal/60 px-4 py-2 text-brand-teal hover:bg-brand-teal/10 transition-all">Book a Call</a>
</div>
<!-- Mobile menu button -->
<button id="menu-toggle" class="sm:hidden text-gray-400 hover:text-white" aria-label="Toggle menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden sm:hidden border-t border-dark-700/50 bg-dark-950/95 backdrop-blur-md">
<div class="px-6 py-4 flex flex-col gap-4 text-sm font-medium">
<a href="#work" class="text-gray-400 hover:text-brand-teal transition-colors">Work</a>
<a href="#about" class="text-gray-400 hover:text-brand-teal transition-colors">About</a>
<a href="#services" class="text-gray-400 hover:text-brand-teal transition-colors">Services</a>
<a href="/blog/" class="text-gray-400 hover:text-brand-teal transition-colors">Blog</a>
<a href="#contact" class="text-brand-teal">Contact</a>
</div>
</div>
</nav>
<main>
<!-- Hero Section -->
<section id="hero" class="min-h-screen flex items-center justify-center px-6 pt-20">
<div class="max-w-3xl text-center reveal">
<div class="flex justify-center mb-8">
<div class="relative">
<div class="absolute -inset-2 rounded-full bg-gradient-to-br from-brand-teal to-brand-red opacity-50 blur-xl"></div>
<img src="/images/avatar.png" alt="Commit 451 company logo" width="140" height="140" class="relative rounded-full border-2 border-dark-700">
</div>
</div>
<h1 class="font-fira text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-white">
Commit <span class="text-brand-teal">451</span>
</h1>
<p class="mt-4 text-xl sm:text-2xl text-gray-400 font-light italic">It's a pleasure to build.</p>
<p class="mt-6 text-base sm:text-lg text-gray-300 leading-relaxed max-w-2xl mx-auto">
Expert software consultancy specializing in mobile, web, and AI-driven solutions.
We craft polished, performant applications with obsessive attention to detail — and we turn vibecoded prototypes into production-ready apps people actually use.
</p>
<div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
<a href="https://cal.com/commit451/15min" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center rounded-lg bg-brand-teal px-8 py-3.5 text-sm font-semibold text-dark-950 hover:bg-brand-teal/90 transition-all hover:scale-105 shadow-lg shadow-brand-teal/20">
Book a Free Assessment
</a>
<a href="#work" class="inline-flex items-center justify-center rounded-lg border border-dark-700 px-8 py-3.5 text-sm font-medium text-gray-300 hover:border-brand-teal hover:text-brand-teal transition-all">
View Our Work
</a>
</div>
<a href="#work" class="mt-16 inline-flex animate-bounce" aria-label="Scroll to Work section">
<svg class="w-6 h-6 mx-auto text-gray-500 hover:text-brand-teal transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
</a>
</div>
</section>
<!-- About Section -->
<section id="work" class="py-24 sm:py-32 px-6">
<div class="mx-auto max-w-6xl">
<div class="text-center reveal">
<p class="text-sm font-fira font-bold text-brand-teal uppercase tracking-widest">Portfolio</p>
<h2 class="mt-4 text-3xl sm:text-4xl font-bold tracking-tight text-white">Featured Work</h2>
<p class="mt-4 text-lg text-gray-400 max-w-2xl mx-auto">
A selection of projects that showcase our craft.
</p>
</div>
<!-- Carousel -->
<div class="mt-16 relative">
<div id="carousel" class="overflow-hidden">
<div id="carousel-track" class="flex transition-transform duration-500 ease-in-out">
<!-- Slide 1: Askarasu -->
<div class="w-full flex-shrink-0 px-4">
<div class="mx-auto max-w-4xl flex flex-col md:flex-row items-center gap-8 md:gap-12">
<div class="flex-shrink-0">
<div class="relative mx-auto w-[240px] rounded-[2rem] border-[3px] border-dark-700 bg-dark-900 p-2 shadow-2xl shadow-brand-teal/10">
<img src="/images/askarasu_screenshot.png" alt="Askarasu screenshot" class="rounded-[1.5rem] w-full" loading="lazy">
</div>
</div>
<div class="text-center md:text-left">
<img src="/images/askarasu_icon.png" alt="Askarasu icon" width="64" height="64" class="rounded-2xl mx-auto md:mx-0 mb-4 shadow-lg">
<h3 class="font-fira font-bold text-white text-2xl">Askarasu</h3>
<p class="mt-3 text-gray-400 leading-relaxed max-w-lg">You vs. the AI. Askarasu is a word trivia game with a twist — you're chatting with an AI that knows the answer, but won't just tell you. Ask yes/no questions, narrow down the possibilities, and guess the word before the day is over and the challenge expires. Think fast. Ask smart. Beat the AI.</p>
<div class="mt-5 flex flex-wrap gap-2 justify-center md:justify-start">
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Android</span>
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">iOS</span>
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">AI</span>
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Word Game</span>
</div>
<div class="mt-5 flex flex-wrap gap-4 justify-center md:justify-start">
<a href="https://play.google.com/store/apps/details?id=com.commit451.lalilulelo" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 text-sm text-brand-teal hover:text-brand-teal/80 transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.199l2.302 2.302-2.302 2.302-2.698-2.302 2.698-2.302zM5.864 3.458L16.8 9.79l-2.301 2.302-8.635-8.634z"/></svg>
Google Play
</a>
<a href="https://apps.apple.com/us/app/askarasu-word-trivia-game/id6757810632" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 text-sm text-brand-teal hover:text-brand-teal/80 transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
App Store
</a>
</div>
</div>
</div>
</div>
<!-- Slide 2: Salamander AI -->
<div class="w-full flex-shrink-0 px-4">
<div class="mx-auto max-w-4xl flex flex-col md:flex-row items-center gap-8 md:gap-12">
<div class="flex-shrink-0">
<div class="relative mx-auto w-[240px] rounded-[2rem] border-[3px] border-dark-700 bg-dark-900 p-2 shadow-2xl shadow-brand-teal/10">
<img src="/images/salamander_screenshot.png" alt="Salamander AI screenshot" class="rounded-[1.5rem] w-full" loading="lazy">
</div>
</div>
<div class="text-center md:text-left">
<img src="/images/salamander_icon.png" alt="Salamander AI icon" width="64" height="64" class="rounded-2xl mx-auto md:mx-0 mb-4 shadow-lg">
<h3 class="font-fira font-bold text-white text-2xl">Salamander AI</h3>
<p class="mt-3 text-gray-400 leading-relaxed max-w-lg">With the power of AI, you can always have a presence at your computer. Stay productive, even when you are away from keyboard. Connect your phone to your computer, create a runner, choose a directory, and start a conversation with your AI. While it does the work, you can be out doing something you love — and when it's done, you get a push notification, ready for the next task.</p>
<div class="mt-5 flex flex-wrap gap-2 justify-center md:justify-start">
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Android</span>
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">iOS</span>
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">AI</span>
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Developer Tools</span>
</div>
<div class="mt-5 flex flex-wrap gap-4 justify-center md:justify-start">
<a href="https://play.google.com/store/apps/details?id=com.commit451.salamander" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 text-sm text-brand-teal hover:text-brand-teal/80 transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.199l2.302 2.302-2.302 2.302-2.698-2.302 2.698-2.302zM5.864 3.458L16.8 9.79l-2.301 2.302-8.635-8.634z"/></svg>
Google Play
</a>
<a href="https://apps.apple.com/us/app/salamander-ai/id6752116173" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 text-sm text-brand-teal hover:text-brand-teal/80 transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
App Store
</a>
</div>
</div>
</div>
</div>
<!-- Slide 3: LabCoat -->
<div class="w-full flex-shrink-0 px-4">
<div class="mx-auto max-w-4xl flex flex-col md:flex-row items-center gap-8 md:gap-12">
<div class="flex-shrink-0">
<div class="relative mx-auto w-[240px] rounded-[2rem] border-[3px] border-dark-700 bg-dark-900 p-2 shadow-2xl shadow-brand-teal/10">
<img src="/images/labcoat_screenshot.png" alt="LabCoat for GitLab screenshot" class="rounded-[1.5rem] w-full" loading="lazy">
</div>
</div>
<div class="text-center md:text-left">
<img src="/images/labcoat_icon.png" alt="LabCoat icon" width="64" height="64" class="rounded-2xl mx-auto md:mx-0 mb-4 shadow-lg">
<h3 class="font-fira font-bold text-white text-2xl">LabCoat for GitLab</h3>
<p class="mt-3 text-gray-400 leading-relaxed max-w-lg">LabCoat is a native Android app built in Kotlin for connecting to and viewing projects hosted on a GitLab server. Currently the most starred Kotlin project on GitLab.com, it was created to give back to the GitLab community, with over 50,000 installs on the Play Store. Open source, of course.</p>
<div class="mt-5 flex flex-wrap gap-2 justify-center md:justify-start">
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Android</span>
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Kotlin</span>
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Open Source</span>
</div>
<a href="https://play.google.com/store/apps/details?id=com.commit451.gitlab" target="_blank" rel="noopener noreferrer" class="mt-5 inline-flex items-center gap-2 text-sm text-brand-teal hover:text-brand-teal/80 transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.199l2.302 2.302-2.302 2.302-2.698-2.302 2.698-2.302zM5.864 3.458L16.8 9.79l-2.301 2.302-8.635-8.634z"/></svg>
View on Google Play
</a>
</div>
</div>
</div>
<!-- Slide 4: 365 Journals -->
<div class="w-full flex-shrink-0 px-4">
<div class="mx-auto max-w-4xl flex flex-col md:flex-row items-center gap-8 md:gap-12">
<div class="flex-shrink-0">
<div class="relative mx-auto w-[240px] rounded-[2rem] border-[3px] border-dark-700 bg-dark-900 p-2 shadow-2xl shadow-brand-teal/10">
<img src="/images/365_screenshot.png" alt="365 Journals screenshot" class="rounded-[1.5rem] w-full" loading="lazy">
</div>
</div>
<div class="text-center md:text-left">
<img src="/images/365_icon.png" alt="365 Journals icon" width="64" height="64" class="rounded-2xl mx-auto md:mx-0 mb-4 shadow-lg">
<h3 class="font-fira font-bold text-white text-2xl">365 Journals</h3>
<p class="mt-3 text-gray-400 leading-relaxed max-w-lg">A daily journal app that prompts you with 366 different questions, one for each day. When you finish a year of entries, you return to the same questions and can compare what you wrote last year to this year. With over 90,000 installs, we love hearing how it has changed lives by giving people somewhere to focus their writing and feelings.</p>
<div class="mt-5 flex flex-wrap gap-2 justify-center md:justify-start">
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Android</span>
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Kotlin</span>
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Journaling</span>
</div>
<a href="https://play.google.com/store/apps/details?id=com.jawnnypoo.j365" target="_blank" rel="noopener noreferrer" class="mt-5 inline-flex items-center gap-2 text-sm text-brand-teal hover:text-brand-teal/80 transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.199l2.302 2.302-2.302 2.302-2.698-2.302 2.698-2.302zM5.864 3.458L16.8 9.79l-2.301 2.302-8.635-8.634z"/></svg>
View on Google Play
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Carousel Controls -->
<button id="carousel-prev" aria-label="Previous project" class="absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-12 w-12 items-center justify-center rounded-full border border-dark-700 bg-dark-900/90 text-gray-400 hover:border-brand-teal hover:text-brand-teal transition-all backdrop-blur-sm">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
</button>
<button id="carousel-next" aria-label="Next project" class="absolute right-0 top-1/2 -translate-y-1/2 z-10 flex h-12 w-12 items-center justify-center rounded-full border border-dark-700 bg-dark-900/90 text-gray-400 hover:border-brand-teal hover:text-brand-teal transition-all backdrop-blur-sm">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</button>
<!-- Dots -->
<div class="flex justify-center gap-3 mt-8">
<button class="carousel-dot w-2.5 h-2.5 rounded-full bg-brand-teal transition-all" data-index="0" aria-label="Go to slide 1"></button>
<button class="carousel-dot w-2.5 h-2.5 rounded-full bg-dark-700 hover:bg-gray-500 transition-all" data-index="1" aria-label="Go to slide 2"></button>
<button class="carousel-dot w-2.5 h-2.5 rounded-full bg-dark-700 hover:bg-gray-500 transition-all" data-index="2" aria-label="Go to slide 3"></button>
<button class="carousel-dot w-2.5 h-2.5 rounded-full bg-dark-700 hover:bg-gray-500 transition-all" data-index="3" aria-label="Go to slide 4"></button>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-24 sm:py-32 px-6">
<div class="mx-auto max-w-2xl text-center reveal">
<p class="text-sm font-fira font-bold text-brand-teal uppercase tracking-widest">Let's Talk</p>
<h2 class="mt-4 text-3xl sm:text-4xl font-bold tracking-tight text-white">Have a challenge?</h2>
<p class="mt-6 text-lg text-gray-400 leading-relaxed">
We're always open to hearing about interesting problems. Whether you need a mobile app,
a web platform, help turning your vibecoded prototype into something real, or technical guidance — let's build something great together.
</p>
<div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
<a href="https://cal.com/commit451/15min" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-teal px-8 py-4 text-base font-semibold text-dark-950 hover:bg-brand-teal/90 transition-all hover:scale-105 shadow-lg shadow-brand-teal/20">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
Quick Chat — 15 min
</a>
<a href="https://cal.com/commit451/30min" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center gap-2 rounded-lg border border-brand-teal/60 px-8 py-4 text-base font-semibold text-brand-teal hover:bg-brand-teal/10 transition-all hover:scale-105">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
Deep Dive — 30 min
</a>
</div>
<p class="mt-4 text-sm text-gray-500">Or email us at <a href="mailto:hello@commit451.com" class="text-brand-teal hover:text-brand-teal/80 transition-colors">hello@commit451.com</a></p>
<div class="mt-10 flex justify-center gap-5">
<a href="https://x.com/Commit451" target="_blank" rel="noopener noreferrer" aria-label="Follow Commit 451 on X (Twitter)" class="group flex h-12 w-12 items-center justify-center rounded-full border border-dark-700 bg-dark-800/50 text-gray-400 transition-all hover:border-brand-teal hover:bg-brand-teal/10 hover:text-brand-teal hover:scale-110">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="https://github.com/Commit451" target="_blank" rel="noopener noreferrer" aria-label="View Commit 451 on GitHub" class="group flex h-12 w-12 items-center justify-center rounded-full border border-dark-700 bg-dark-800/50 text-gray-400 transition-all hover:border-brand-teal hover:bg-brand-teal/10 hover:text-brand-teal hover:scale-110">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
</a>
<a href="https://play.google.com/store/apps/dev?id=8992288925330781810" target="_blank" rel="noopener noreferrer" aria-label="View Commit 451 apps on Google Play" class="group flex h-12 w-12 items-center justify-center rounded-full border border-dark-700 bg-dark-800/50 text-gray-400 transition-all hover:border-brand-teal hover:bg-brand-teal/10 hover:text-brand-teal hover:scale-110">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.199l2.302 2.302-2.302 2.302-2.698-2.302 2.698-2.302zM5.864 3.458L16.8 9.79l-2.301 2.302-8.635-8.634z"/></svg>
</a>
</div>
</div>
</section>
<section id="about" class="py-24 sm:py-32 px-6">
<div class="mx-auto max-w-4xl reveal">
<div class="text-center">
<p class="text-sm font-fira font-bold text-brand-teal uppercase tracking-widest">About Us</p>
<h2 class="mt-4 text-3xl sm:text-4xl font-bold tracking-tight text-white">Building expressive interfaces</h2>
<p class="mt-6 text-lg text-gray-400 leading-relaxed max-w-2xl mx-auto">
Commit 451 is a boutique software consultancy founded on the belief that great software
should be both powerful and delightful. We bring deep expertise across the entire
development lifecycle — from architecture and design through deployment and beyond.
</p>
</div>
<div class="mt-16 grid sm:grid-cols-3 gap-8 text-center">
<div class="reveal">
<p class="text-4xl font-fira font-bold text-brand-teal">10+</p>
<p class="mt-2 text-sm text-gray-400">Years of Experience</p>
</div>
<div class="reveal">
<p class="text-4xl font-fira font-bold text-brand-teal">50+</p>
<p class="mt-2 text-sm text-gray-400">Projects Delivered</p>
</div>
<div class="reveal">
<p class="text-4xl font-fira font-bold text-brand-teal">1M+</p>
<p class="mt-2 text-sm text-gray-400">Users Reached</p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-24 sm:py-32 px-6">
<div class="mx-auto max-w-6xl">
<div class="text-center reveal">
<p class="text-sm font-fira font-bold text-brand-teal uppercase tracking-widest">What We Do</p>
<h2 class="mt-4 text-3xl sm:text-4xl font-bold tracking-tight text-white">Services</h2>
<p class="mt-4 text-lg text-gray-400 max-w-2xl mx-auto">
Full-spectrum software expertise, from concept to production.
</p>
</div>
<div class="mt-16 grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Mobile Dev -->
<article class="reveal rounded-2xl border border-dark-700/60 bg-dark-900/70 backdrop-blur-sm p-8 hover:border-brand-teal/40 transition-all duration-300 glow group">
<div class="w-12 h-12 rounded-xl bg-brand-teal/10 flex items-center justify-center mb-6 group-hover:bg-brand-teal/20 transition-colors">
<svg class="w-6 h-6 text-brand-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
</div>
<h3 class="font-fira font-bold text-white text-lg">Mobile Development</h3>
<p class="mt-3 text-sm text-gray-400 leading-relaxed">Native Android and iOS applications built with modern toolkits. Kotlin, Jetpack Compose, Swift, and cross-platform solutions.</p>
</article>
<!-- Web -->
<article class="reveal rounded-2xl border border-dark-700/60 bg-dark-900/70 backdrop-blur-sm p-8 hover:border-brand-teal/40 transition-all duration-300 glow group">
<div class="w-12 h-12 rounded-xl bg-brand-teal/10 flex items-center justify-center mb-6 group-hover:bg-brand-teal/20 transition-colors">
<svg class="w-6 h-6 text-brand-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
</div>
<h3 class="font-fira font-bold text-white text-lg">Web Applications</h3>
<p class="mt-3 text-sm text-gray-400 leading-relaxed">Responsive, performant web experiences using React, TypeScript, and modern frameworks. From landing pages to complex SaaS platforms.</p>
</article>
<!-- AI -->
<article class="reveal rounded-2xl border border-dark-700/60 bg-dark-900/70 backdrop-blur-sm p-8 hover:border-brand-teal/40 transition-all duration-300 glow group">
<div class="w-12 h-12 rounded-xl bg-brand-teal/10 flex items-center justify-center mb-6 group-hover:bg-brand-teal/20 transition-colors">
<svg class="w-6 h-6 text-brand-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
</div>
<h3 class="font-fira font-bold text-white text-lg">AI & Automation</h3>
<p class="mt-3 text-sm text-gray-400 leading-relaxed">Intelligent automation, agent systems, and AI-driven workflows. Integrating LLMs and machine learning into production applications.</p>
</article>
<!-- Consulting -->
<article class="reveal rounded-2xl border border-dark-700/60 bg-dark-900/70 backdrop-blur-sm p-8 hover:border-brand-teal/40 transition-all duration-300 glow group">
<div class="w-12 h-12 rounded-xl bg-brand-teal/10 flex items-center justify-center mb-6 group-hover:bg-brand-teal/20 transition-colors">
<svg class="w-6 h-6 text-brand-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
</div>
<h3 class="font-fira font-bold text-white text-lg">Technical Consulting</h3>
<p class="mt-3 text-sm text-gray-400 leading-relaxed">Architecture reviews, code audits, and technical strategy. We help teams make confident decisions and ship better software.</p>
</article>
</div>
<!-- Vibecode Rescue — Featured -->
<div class="mt-10 reveal">
<article class="rounded-2xl border border-brand-teal/40 bg-gradient-to-br from-dark-900/90 to-dark-800/50 backdrop-blur-sm p-10 hover:border-brand-teal/60 transition-all duration-300 glow group relative overflow-hidden">
<div class="absolute top-4 right-4">
<span class="text-xs font-fira font-bold px-3 py-1 rounded-full bg-brand-teal/15 text-brand-teal border border-brand-teal/30 uppercase tracking-wider">New</span>
</div>
<div class="flex flex-col lg:flex-row gap-8 items-start">
<div class="flex-shrink-0">
<div class="w-16 h-16 rounded-2xl bg-brand-teal/10 flex items-center justify-center group-hover:bg-brand-teal/20 transition-colors">
<svg class="w-8 h-8 text-brand-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
</div>
</div>
<div class="flex-1">
<h3 class="font-fira font-bold text-white text-2xl">Vibecode Rescue</h3>
<p class="mt-1 text-brand-teal font-medium">Built it with AI? We'll make it real.</p>
<p class="mt-4 text-gray-400 leading-relaxed max-w-3xl">
You had the vision. AI helped you prototype it. Now you need it to actually work — at scale, in production, with real users.
We take vibecoded projects built with tools like Cursor, Copilot, and Claude and transform them into polished,
production-ready applications. Code audit, architecture fixes, security hardening, performance optimization,
app store compliance, and launch support. From prototype to published — we bridge the gap.
</p>
<div class="mt-6 flex flex-wrap gap-3">
<span class="text-xs px-3 py-1.5 rounded-full bg-dark-700/60 text-gray-300 border border-dark-700">Code Audit</span>
<span class="text-xs px-3 py-1.5 rounded-full bg-dark-700/60 text-gray-300 border border-dark-700">Architecture Fixes</span>
<span class="text-xs px-3 py-1.5 rounded-full bg-dark-700/60 text-gray-300 border border-dark-700">Security Review</span>
<span class="text-xs px-3 py-1.5 rounded-full bg-dark-700/60 text-gray-300 border border-dark-700">Performance Optimization</span>
<span class="text-xs px-3 py-1.5 rounded-full bg-dark-700/60 text-gray-300 border border-dark-700">App Store Launch</span>
<span class="text-xs px-3 py-1.5 rounded-full bg-dark-700/60 text-gray-300 border border-dark-700">Audience Growth</span>
</div>
<a href="https://cal.com/commit451/30min" target="_blank" rel="noopener noreferrer" class="mt-6 inline-flex items-center gap-2 rounded-lg bg-brand-teal px-6 py-3 text-sm font-semibold text-dark-950 hover:bg-brand-teal/90 transition-all hover:scale-105 shadow-lg shadow-brand-teal/20">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
Book a Free Project Assessment
</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- Why Section -->
<section id="why" class="py-24 sm:py-32 px-6 border-t border-dark-700/30">
<div class="mx-auto max-w-5xl">
<div class="text-center reveal">
<p class="text-sm font-fira font-bold text-brand-teal uppercase tracking-widest">Why Us</p>
<h2 class="mt-4 text-3xl sm:text-4xl font-bold tracking-tight text-white">Why Commit 451?</h2>
</div>
<div class="mt-16 grid sm:grid-cols-2 gap-x-12 gap-y-10">
<div class="reveal flex gap-4">
<div class="flex-shrink-0 mt-1">
<div class="w-8 h-8 rounded-lg bg-brand-teal/10 flex items-center justify-center">
<svg class="w-4 h-4 text-brand-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</div>
</div>
<div>
<h3 class="font-semibold text-white">Ship fast, ship right</h3>
<p class="mt-2 text-sm text-gray-400 leading-relaxed">We move quickly without cutting corners. Agile delivery with production-grade quality from day one.</p>
</div>
</div>
<div class="reveal flex gap-4">
<div class="flex-shrink-0 mt-1">
<div class="w-8 h-8 rounded-lg bg-brand-teal/10 flex items-center justify-center">
<svg class="w-4 h-4 text-brand-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg>
</div>
</div>
<div>
<h3 class="font-semibold text-white">Deep platform expertise</h3>
<p class="mt-2 text-sm text-gray-400 leading-relaxed">Over a decade of hands-on experience with Android, iOS, and web platforms. We know the ecosystems inside and out.</p>
</div>
</div>
<div class="reveal flex gap-4">
<div class="flex-shrink-0 mt-1">
<div class="w-8 h-8 rounded-lg bg-brand-teal/10 flex items-center justify-center">
<svg class="w-4 h-4 text-brand-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
</div>
</div>
<div>
<h3 class="font-semibold text-white">Open source DNA</h3>
<p class="mt-2 text-sm text-gray-400 leading-relaxed">Active contributors to the open source community. Our libraries are used by thousands of developers worldwide.</p>
</div>
</div>
<div class="reveal flex gap-4">
<div class="flex-shrink-0 mt-1">
<div class="w-8 h-8 rounded-lg bg-brand-teal/10 flex items-center justify-center">
<svg class="w-4 h-4 text-brand-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
</div>
<div>
<h3 class="font-semibold text-white">Embedded partnership</h3>
<p class="mt-2 text-sm text-gray-400 leading-relaxed">We don't just hand off code — we integrate with your team, your process, and your goals. Think of us as your engineering extension.</p>
</div>
</div>
<div class="reveal flex gap-4">
<div class="flex-shrink-0 mt-1">
<div class="w-8 h-8 rounded-lg bg-brand-teal/10 flex items-center justify-center">
<svg class="w-4 h-4 text-brand-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
</div>
</div>
<div>
<h3 class="font-semibold text-white">AI-native workflow</h3>
<p class="mt-2 text-sm text-gray-400 leading-relaxed">We use AI tools daily and understand their strengths and blind spots. We know exactly where vibecoded projects break down — and how to fix them.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Blog Section -->
<section id="blog" class="py-24 sm:py-32 px-6 border-t border-dark-700/30">
<div class="mx-auto max-w-4xl">
<div class="text-center reveal">
<p class="text-sm font-fira font-bold text-brand-teal uppercase tracking-widest">From the Blog</p>
<h2 class="mt-4 text-3xl sm:text-4xl font-bold tracking-tight text-white">Latest Insights</h2>
</div>
<div class="mt-12 space-y-6">
<a href="/blog/app-store-rejections-vibecoded/" class="block group rounded-2xl border border-dark-700/60 bg-dark-900/70 backdrop-blur-sm p-8 hover:border-brand-teal/40 transition-all duration-300 glow reveal">
<div class="flex flex-wrap gap-2 mb-3">
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">App Store</span>
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Vibe Coding</span>
</div>
<h3 class="font-fira text-xl sm:text-2xl font-bold text-white group-hover:text-brand-teal transition-colors">
We Got Rejected by Apple 9 Times — Here's What Every Vibecoder Needs to Know
</h3>
<p class="mt-3 text-gray-400 leading-relaxed">
9 rejections. 18 days lost. The App Store pitfalls AI coding tools won't warn you about — and the checklist that would have saved us.
</p>
<div class="mt-4 flex items-center gap-3 text-sm text-gray-500">
<time datetime="2026-03-12">March 12, 2026</time>
<span>·</span>
<span>10 min read</span>
<span class="ml-auto text-brand-teal group-hover:translate-x-1 transition-transform">Read →</span>
</div>
</a>
<a href="/blog/vibecoded-app-production-ready/" class="block group rounded-2xl border border-dark-700/60 bg-dark-900/70 backdrop-blur-sm p-8 hover:border-brand-teal/40 transition-all duration-300 glow reveal">
<div class="flex flex-wrap gap-2 mb-3">
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Vibe Coding</span>
<span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Production Readiness</span>
</div>
<h3 class="font-fira text-xl sm:text-2xl font-bold text-white group-hover:text-brand-teal transition-colors">
5 Things That Break When You Take a Vibecoded App to Production
</h3>
<p class="mt-3 text-gray-400 leading-relaxed">
Built an app with Cursor, Copilot, or Claude? It works on your machine. Here's what happens when real users find it — and how to fix the five most common issues before launch.
</p>
<div class="mt-4 flex items-center gap-3 text-sm text-gray-500">
<time datetime="2026-03-12">March 12, 2026</time>
<span>·</span>
<span>8 min read</span>
<span class="ml-auto text-brand-teal group-hover:translate-x-1 transition-transform">Read →</span>
</div>
</a>
</div>
<div class="mt-8 text-center reveal">
<a href="/blog/" class="inline-flex items-center gap-2 text-sm font-medium text-gray-400 hover:text-brand-teal transition-colors">
View all posts
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-dark-700/50 bg-dark-950/80 backdrop-blur-sm">
<div class="mx-auto max-w-6xl px-6 py-8">
<div class="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
<p class="text-sm text-gray-500">© 2026 Commit 451 LLC. All rights reserved.</p>
<nav class="flex gap-6 text-sm" aria-label="Footer navigation">
<a href="https://commit451.com/privacy" class="text-gray-500 hover:text-brand-teal transition-colors">Privacy</a>
<a href="https://commit451.com/terms" class="text-gray-500 hover:text-brand-teal transition-colors">Terms</a>
<a href="https://commit451.com/account-deletion" class="text-gray-500 hover:text-brand-teal transition-colors">Account Deletion</a>
</nav>
</div>
</div>
</footer>
<!-- Scroll reveal + mobile menu -->
<script>
// Reveal on scroll
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// Mobile menu toggle
const toggle = document.getElementById('menu-toggle');
const menu = document.getElementById('mobile-menu');
toggle.addEventListener('click', () => menu.classList.toggle('hidden'));
menu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => menu.classList.add('hidden'));
});
// Navbar background on scroll
const nav = document.querySelector('nav');
window.addEventListener('scroll', () => {
nav.classList.toggle('shadow-lg', window.scrollY > 20);
});
// Carousel
(() => {
const track = document.getElementById('carousel-track');
const prev = document.getElementById('carousel-prev');
const next = document.getElementById('carousel-next');
const dots = document.querySelectorAll('.carousel-dot');
const slides = track.children;
let current = 0;
const total = slides.length;
function goTo(i) {
current = ((i % total) + total) % total;
track.style.transform = `translateX(-${current * 100}%)`;
dots.forEach((d, idx) => {
d.classList.toggle('bg-brand-teal', idx === current);
d.classList.toggle('bg-dark-700', idx !== current);
});
}
prev.addEventListener('click', () => goTo(current - 1));
next.addEventListener('click', () => goTo(current + 1));
dots.forEach(d => d.addEventListener('click', () => goTo(parseInt(d.dataset.index))));
// Touch/swipe support
let startX = 0;
track.addEventListener('touchstart', e => { startX = e.touches[0].clientX; }, { passive: true });
track.addEventListener('touchend', e => {
const diff = startX - e.changedTouches[0].clientX;
if (Math.abs(diff) > 50) goTo(current + (diff > 0 ? 1 : -1));
});
// Auto-advance every 6s
let autoplay = setInterval(() => goTo(current + 1), 6000);
[prev, next, ...dots].forEach(el => {
el.addEventListener('click', () => { clearInterval(autoplay); autoplay = setInterval(() => goTo(current + 1), 6000); });
});
})();
</script>
</body>
</html>