#01 hero // entry_point: above_fold — first render

ENGINEERING WITH ATOMIC PRECISION

Same DNA.
Different Mass.

We build high-performance digital products using the same elite standards as global agencies—minus the bureaucratic bloat and overhead.

Start a Project Our Services

isotopic ~ deploy

#02 THE ISOTOPIC DIFFERENCE // diff(agency, isotopic) → output: clarity

Smarter Structure. Faster Delivery

Elite Engineering,
Stripped of the Bloat.

You shouldn't pay for an agency's fancy office or layers of middle management. We focus 100% of your budget on the code.

Isotopic

Stable

Direct communication with your lead engineer
Rapid prototyping and weekly builds
Fixed-price transparency with no surprises
Long-term stability and code ownership
Lean, high-velocity execution

Traditional Agency

Volatile

Project managers between you and engineers
Weeks of 'discovery' before seeing code
Expensive retainers for senior oversight
Frequent team rotations and handoffs
Hidden fees and scope-creep taxes

#03 CORE DISCIPLINES // exports: [Web, Mobile, Workflow, Prototyping]

Service Elements

High-Performance
Solutions.

Specialized engineering for brands that value speed, security, and scalability.

[We]

Web Engineering

Custom applications and e-commerce storefronts built for speed and conversion. We specialize in React, Next.js, and headless architecture.

Next.js React Shopify Performance

[Mo]

Mobile Development

Native-quality iOS and Android apps. From real-time communication tools (VoIP) to complex marketplace platforms.

Swift Kotlin React Native VoIP

[Wf]

Workflow Engineering

We build internal tools and automations that connect your existing apps, saving your team hundreds of hours of manual work.

Automation APIs Data Pipelines Internal Tools

[Rp]

Rapid Prototyping

Need to validate an idea fast? We build functional MVPs for startups and founders in weeks, not months.

MVPs Consulting Validation Product Strategy

Let's Discuss Your Project

Built with the tools you already trust

#04 ALL-IN-ONE WEB // bundle: web_presence — billing: flat_monthly

Stable & Predictable

The Turnkey Subscription.

High-end design and maintenance for a flat monthly fee. Perfect for boutiques and local businesses needing a premium presence without the upfront cost.

All-Inclusive Flat Monthly Price No Upfront Cost

Custom 10-page website design
Professional development & hosting
Unlimited content & image updates
Continuous performance monitoring
Dedicated engineering support
Annual full design refresh

Stable

Start Your Subscription

Plans start at $180/mo. Cancel anytime.

#05 CONTACT // new Thread({skipSalesReps: true, engineers: true})

Initiate Synthesis

Ready to build
something stable?

Reach out directly for a technical consultation. No sales reps, just engineers.

hello@isotopic.dev

1
<!DOCTYPE html>
2
<html lang="en" class="scroll-smooth">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6
<meta name="mobile-web-app-capable" content="yes">
7
<meta name="apple-mobile-web-app-capable" content="yes">
8
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
9
<title>Engineering with Atomic Precision — isotopic.dev</title>
10
<meta name="description" content="Premium web and mobile development. Agency-grade quality with boutique agility.">
11
<meta property="og:title" content="isotopic.dev">
12
<meta property="og:description" content="Premium web and mobile development. Agency-grade quality with boutique agility.">
13
<meta property="og:url" content="https://isotopic.dev">
14
<meta name="twitter:card" content="summary_large_image">
15
16
17
<link rel="preconnect" href="https://fonts.googleapis.com">
18
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
19
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
20
21
<link rel="stylesheet" href="/assets/styles/index.css">
22
23
24
<script>
25
(function () {
26
if (localStorage.getItem('isotopic-theme') === 'light') {
27
document.documentElement.classList.add('light');
28
}
29
})();
30
</script>
31
</head>
32
<body class="bg-brand-base text-brand-text font-sans antialiased">
33
34
<div class="bg-grid-overlay fixed inset-0 bg-grid opacity-[0.04] pointer-events-none z-0" aria-hidden="true"></div>
35
36
37
<div class="relative z-10">
38
<main class="relative">
39
40
41
42
<header class="sticky top-0 left-0 right-0 z-50 border-b border-brand-border bg-brand-base/80 backdrop-blur-xl">
43
<nav class="max-w-7xl mx-auto px-2 md:px-6 h-(--header-height) flex items-center justify-between">
44
45
46
<a href="/" class="flex items-center gap-0 group" aria-label="isotopic.dev home">
47
<span class="font-mono text-sm font-medium text-brand-text group-hover:text-brand-reactive transition-colors">
48
isotopic
49
</span>
50
<span class="font-mono text-sm text-brand-reactive">.dev</span>
51
</a>
52
53
<div class="flex items-center gap-8">
54
55
<ul class="hidden md:flex items-center gap-8">
56
57
<li>
58
<a href="#difference"
59
class="font-mono text-xs uppercase tracking-widest text-brand-muted hover:text-brand-text transition-colors">
60
The Difference
61
</a>
62
</li>
63
64
<li>
65
<a href="#services"
66
class="font-mono text-xs uppercase tracking-widest text-brand-muted hover:text-brand-text transition-colors">
67
Services
68
</a>
69
</li>
70
71
<li>
72
<a href="#subscription"
73
class="font-mono text-xs uppercase tracking-widest text-brand-muted hover:text-brand-text transition-colors">
74
Subscription
75
</a>
76
</li>
77
78
</ul>
79
80
81
<a href="#contact"
82
class="max-md:hidden btn-outline-sm">
83
Start a Project
84
</a>
85
86
87
<button id="mobile-menu-toggle"
88
class="md:hidden text-brand-muted hover:text-brand-text transition-colors p-1"
89
aria-label="Open menu"
90
aria-expanded="false"
91
aria-controls="mobile-menu">
92
93
<svg id="icon-hamburger" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
94
stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
95
<line x1="3" y1="6" x2="21" y2="6"/>
96
<line x1="3" y1="12" x2="21" y2="12"/>
97
<line x1="3" y1="18" x2="21" y2="18"/>
98
</svg>
99
100
<svg id="icon-close" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
101
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" class="hidden">
102
<line x1="18" y1="6" x2="6" y2="18"/>
103
<line x1="6" y1="6" x2="18" y2="18"/>
104
</svg>
105
</button>
106
</div>
107
108
</nav>
109
110
111
<div id="mobile-menu"
112
class="md:hidden hidden border-t border-brand-border">
113
<ul class="flex flex-col px-6 py-4 gap-1">
114
115
<li>
116
<a href="#difference"
117
class="block font-mono text-xs uppercase tracking-widest text-brand-muted hover:text-brand-text transition-colors py-3 border-b border-brand-border/50 last:border-0">
118
The Difference
119
</a>
120
</li>
121
122
<li>
123
<a href="#services"
124
class="block font-mono text-xs uppercase tracking-widest text-brand-muted hover:text-brand-text transition-colors py-3 border-b border-brand-border/50 last:border-0">
125
Services
126
</a>
127
</li>
128
129
<li>
130
<a href="#subscription"
131
class="block font-mono text-xs uppercase tracking-widest text-brand-muted hover:text-brand-text transition-colors py-3 border-b border-brand-border/50 last:border-0">
132
Subscription
133
</a>
134
</li>
135
136
</ul>
137
<div class="px-6 pb-5">
138
<a href="#contact" class="btn-outline-sm w-full justify-center">
139
Start a Project
140
</a>
141
</div>
142
</div>
143
</header>
144
145
<script>
146
(function () {
147
var toggle = document.getElementById('mobile-menu-toggle');
148
var menu = document.getElementById('mobile-menu');
149
var hamburger = document.getElementById('icon-hamburger');
150
var close = document.getElementById('icon-close');
151
152
toggle.addEventListener('click', function () {
153
var isOpen = !menu.classList.contains('hidden');
154
menu.classList.toggle('hidden', isOpen);
155
hamburger.classList.toggle('hidden', !isOpen);
156
close.classList.toggle('hidden', isOpen);
157
toggle.setAttribute('aria-expanded', String(!isOpen));
158
toggle.setAttribute('aria-label', isOpen ? 'Open menu' : 'Close menu');
159
});
160
161
// Close when a nav link is tapped
162
menu.querySelectorAll('a').forEach(function (a) {
163
a.addEventListener('click', function () {
164
menu.classList.add('hidden');
165
hamburger.classList.remove('hidden');
166
close.classList.add('hidden');
167
toggle.setAttribute('aria-expanded', 'false');
168
toggle.setAttribute('aria-label', 'Open menu');
169
});
170
});
171
})();
172
</script>
173
174
175
176
177
178
<section id="hero" class="relative border-t border-brand-border flex flex-row">
179
<div class="relative flex flex-1 flex-row">
180
181
182
<ul class="absolute inset-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
183
184
<li class="flex flex-row">
185
<span class="w-[30px] opacity-50">1</span>
186
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell with context %}</p>
187
</li>
188
189
<li class="flex flex-row">
190
<span class="w-[30px] opacity-50">2</span>
191
<p class="flex w-full overflow-hidden whitespace-pre"></p>
192
</li>
193
194
<li class="flex flex-row">
195
<span class="w-[30px] opacity-50">3</span>
196
<p class="flex w-full overflow-hidden whitespace-pre">{# HERO</p>
197
</li>
198
199
<li class="flex flex-row">
200
<span class="w-[30px] opacity-50">4</span>
201
<p class="flex w-full overflow-hidden whitespace-pre"> #}</p>
202
</li>
203
204
<li class="flex flex-row">
205
<span class="w-[30px] opacity-50">5</span>
206
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "hero", strings.hero.sectionLabel, strings.hero.sectionSublabel) %}</p>
207
</li>
208
209
<li class="flex flex-row">
210
<span class="w-[30px] opacity-50">6</span>
211
<p class="flex w-full overflow-hidden whitespace-pre"></p>
212
</li>
213
214
<li class="flex flex-row">
215
<span class="w-[30px] opacity-50">7</span>
216
<p class="flex w-full overflow-hidden whitespace-pre"> {# Gradient orbs — isolated overflow wrapper prevents mobile bleed</p>
217
</li>
218
219
<li class="flex flex-row">
220
<span class="w-[30px] opacity-50">8</span>
221
<p class="flex w-full overflow-hidden whitespace-pre"> without affecting sticky siblings in sectionShell #}</p>
222
</li>
223
224
<li class="flex flex-row">
225
<span class="w-[30px] opacity-50">9</span>
226
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true"></p>
227
</li>
228
229
<li class="flex flex-row">
230
<span class="w-[30px] opacity-50">10</span>
231
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="hero-orb w-[600px] h-[600px] bg-brand-reactive/8 top-[-150px] left-[-200px]"></div></p>
232
</li>
233
234
<li class="flex flex-row">
235
<span class="w-[30px] opacity-50">11</span>
236
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="hero-orb w-[400px] h-[400px] bg-brand-stable/8 bottom-[-100px] right-[-100px]"></div></p>
237
</li>
238
239
<li class="flex flex-row">
240
<span class="w-[30px] opacity-50">12</span>
241
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
242
</li>
243
244
<li class="flex flex-row">
245
<span class="w-[30px] opacity-50">13</span>
246
<p class="flex w-full overflow-hidden whitespace-pre"></p>
247
</li>
248
249
<li class="flex flex-row">
250
<span class="w-[30px] opacity-50">14</span>
251
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="max-w-7xl mx-auto w-full"></p>
252
</li>
253
254
<li class="flex flex-row">
255
<span class="w-[30px] opacity-50">15</span>
256
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid lg:grid-cols-2 gap-16 items-center"></p>
257
</li>
258
259
<li class="flex flex-row">
260
<span class="w-[30px] opacity-50">16</span>
261
<p class="flex w-full overflow-hidden whitespace-pre"></p>
262
</li>
263
264
<li class="flex flex-row">
265
<span class="w-[30px] opacity-50">17</span>
266
<p class="flex w-full overflow-hidden whitespace-pre"> {# Hero copy #}</p>
267
</li>
268
269
<li class="flex flex-row">
270
<span class="w-[30px] opacity-50">18</span>
271
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-8"></p>
272
</li>
273
274
<li class="flex flex-row">
275
<span class="w-[30px] opacity-50">19</span>
276
<p class="flex w-full overflow-hidden whitespace-pre"></p>
277
</li>
278
279
<li class="flex flex-row">
280
<span class="w-[30px] opacity-50">20</span>
281
<p class="flex w-full overflow-hidden whitespace-pre"> {# Eyebrow #}</p>
282
</li>
283
284
<li class="flex flex-row">
285
<span class="w-[30px] opacity-50">21</span>
286
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center gap-3"></p>
287
</li>
288
289
<li class="flex flex-row">
290
<span class="w-[30px] opacity-50">22</span>
291
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="block w-8 h-px bg-brand-reactive"></span></p>
292
</li>
293
294
<li class="flex flex-row">
295
<span class="w-[30px] opacity-50">23</span>
296
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive"></p>
297
</li>
298
299
<li class="flex flex-row">
300
<span class="w-[30px] opacity-50">24</span>
301
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.eyebrow }}</p>
302
</li>
303
304
<li class="flex flex-row">
305
<span class="w-[30px] opacity-50">25</span>
306
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
307
</li>
308
309
<li class="flex flex-row">
310
<span class="w-[30px] opacity-50">26</span>
311
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
312
</li>
313
314
<li class="flex flex-row">
315
<span class="w-[30px] opacity-50">27</span>
316
<p class="flex w-full overflow-hidden whitespace-pre"></p>
317
</li>
318
319
<li class="flex flex-row">
320
<span class="w-[30px] opacity-50">28</span>
321
<p class="flex w-full overflow-hidden whitespace-pre"> {# Headline #}</p>
322
</li>
323
324
<li class="flex flex-row">
325
<span class="w-[30px] opacity-50">29</span>
326
<p class="flex w-full overflow-hidden whitespace-pre"> <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.05]"></p>
327
</li>
328
329
<li class="flex flex-row">
330
<span class="w-[30px] opacity-50">30</span>
331
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-brand-text">{{ strings.hero.headline }}</span></p>
332
</li>
333
334
<li class="flex flex-row">
335
<span class="w-[30px] opacity-50">31</span>
336
<p class="flex w-full overflow-hidden whitespace-pre"> <br></p>
337
</li>
338
339
<li class="flex flex-row">
340
<span class="w-[30px] opacity-50">32</span>
341
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-brand-reactive">{{ strings.hero.headlineAccent }}</span></p>
342
</li>
343
344
<li class="flex flex-row">
345
<span class="w-[30px] opacity-50">33</span>
346
<p class="flex w-full overflow-hidden whitespace-pre"> </h1></p>
347
</li>
348
349
<li class="flex flex-row">
350
<span class="w-[30px] opacity-50">34</span>
351
<p class="flex w-full overflow-hidden whitespace-pre"></p>
352
</li>
353
354
<li class="flex flex-row">
355
<span class="w-[30px] opacity-50">35</span>
356
<p class="flex w-full overflow-hidden whitespace-pre"> {# Subtitle #}</p>
357
</li>
358
359
<li class="flex flex-row">
360
<span class="w-[30px] opacity-50">36</span>
361
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="text-lg text-brand-muted max-w-lg leading-relaxed"></p>
362
</li>
363
364
<li class="flex flex-row">
365
<span class="w-[30px] opacity-50">37</span>
366
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.subtitle }}</p>
367
</li>
368
369
<li class="flex flex-row">
370
<span class="w-[30px] opacity-50">38</span>
371
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
372
</li>
373
374
<li class="flex flex-row">
375
<span class="w-[30px] opacity-50">39</span>
376
<p class="flex w-full overflow-hidden whitespace-pre"></p>
377
</li>
378
379
<li class="flex flex-row">
380
<span class="w-[30px] opacity-50">40</span>
381
<p class="flex w-full overflow-hidden whitespace-pre"> {# CTAs #}</p>
382
</li>
383
384
<li class="flex flex-row">
385
<span class="w-[30px] opacity-50">41</span>
386
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex flex-wrap items-center gap-4 pt-2"></p>
387
</li>
388
389
<li class="flex flex-row">
390
<span class="w-[30px] opacity-50">42</span>
391
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.hero.ctaPrimary.href }}"</p>
392
</li>
393
394
<li class="flex flex-row">
395
<span class="w-[30px] opacity-50">43</span>
396
<p class="flex w-full overflow-hidden whitespace-pre"> class="btn-reactive-md"></p>
397
</li>
398
399
<li class="flex flex-row">
400
<span class="w-[30px] opacity-50">44</span>
401
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.ctaPrimary.label }}</p>
402
</li>
403
404
<li class="flex flex-row">
405
<span class="w-[30px] opacity-50">45</span>
406
<p class="flex w-full overflow-hidden whitespace-pre"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"</p>
407
</li>
408
409
<li class="flex flex-row">
410
<span class="w-[30px] opacity-50">46</span>
411
<p class="flex w-full overflow-hidden whitespace-pre"> fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></p>
412
</li>
413
414
<li class="flex flex-row">
415
<span class="w-[30px] opacity-50">47</span>
416
<p class="flex w-full overflow-hidden whitespace-pre"> <path d="M5 12h14M12 5l7 7-7 7"/></p>
417
</li>
418
419
<li class="flex flex-row">
420
<span class="w-[30px] opacity-50">48</span>
421
<p class="flex w-full overflow-hidden whitespace-pre"> </svg></p>
422
</li>
423
424
<li class="flex flex-row">
425
<span class="w-[30px] opacity-50">49</span>
426
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
427
</li>
428
429
<li class="flex flex-row">
430
<span class="w-[30px] opacity-50">50</span>
431
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.hero.ctaSecondary.href }}"</p>
432
</li>
433
434
<li class="flex flex-row">
435
<span class="w-[30px] opacity-50">51</span>
436
<p class="flex w-full overflow-hidden whitespace-pre"> class="btn-ghost-md"></p>
437
</li>
438
439
<li class="flex flex-row">
440
<span class="w-[30px] opacity-50">52</span>
441
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.ctaSecondary.label }}</p>
442
</li>
443
444
<li class="flex flex-row">
445
<span class="w-[30px] opacity-50">53</span>
446
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
447
</li>
448
449
<li class="flex flex-row">
450
<span class="w-[30px] opacity-50">54</span>
451
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
452
</li>
453
454
<li class="flex flex-row">
455
<span class="w-[30px] opacity-50">55</span>
456
<p class="flex w-full overflow-hidden whitespace-pre"></p>
457
</li>
458
459
<li class="flex flex-row">
460
<span class="w-[30px] opacity-50">56</span>
461
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
462
</li>
463
464
<li class="flex flex-row">
465
<span class="w-[30px] opacity-50">57</span>
466
<p class="flex w-full overflow-hidden whitespace-pre"></p>
467
</li>
468
469
<li class="flex flex-row">
470
<span class="w-[30px] opacity-50">58</span>
471
<p class="flex w-full overflow-hidden whitespace-pre"> {# Live Terminal #}</p>
472
</li>
473
474
<li class="flex flex-row">
475
<span class="w-[30px] opacity-50">59</span>
476
<p class="flex w-full overflow-hidden whitespace-pre"> {% include "components/terminal.njk" %}</p>
477
</li>
478
479
<li class="flex flex-row">
480
<span class="w-[30px] opacity-50">60</span>
481
<p class="flex w-full overflow-hidden whitespace-pre"></p>
482
</li>
483
484
<li class="flex flex-row">
485
<span class="w-[30px] opacity-50">61</span>
486
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
487
</li>
488
489
<li class="flex flex-row">
490
<span class="w-[30px] opacity-50">62</span>
491
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
492
</li>
493
494
<li class="flex flex-row">
495
<span class="w-[30px] opacity-50">63</span>
496
<p class="flex w-full overflow-hidden whitespace-pre"></p>
497
</li>
498
499
<li class="flex flex-row">
500
<span class="w-[30px] opacity-50">64</span>
501
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
502
</li>
503
504
<li class="flex flex-row">
505
<span class="w-[30px] opacity-50">65</span>
506
<p class="flex w-full overflow-hidden whitespace-pre"></p>
507
</li>
508
509
</ul>
510
511
512
<div class="absolute inset-0 bg-linear-to-l from-brand-base to-transparent"></div>
513
</div>
514
515
<div class="relative flex flex-row border-r bg-brand-base border-brand-border pb-1 pt-1 w-[33px] justify-end items-start">
516
517
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/80"><em class="text-brand-stable">#01</em> hero</span>
518
519
520
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/40 italic">// entry_point: above_fold — first render</span>
521
522
</div>
523
524
<div class="w-full max-w-7xl mx-auto px-2 md:px-6 py-24 md:py-32 z-40">
525
526
527
528
<div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
529
<div class="hero-orb w-[600px] h-[600px] bg-brand-reactive/8 top-[-150px] left-[-200px]"></div>
530
<div class="hero-orb w-[400px] h-[400px] bg-brand-stable/8 bottom-[-100px] right-[-100px]"></div>
531
</div>
532
533
<div class="max-w-7xl mx-auto w-full">
534
<div class="grid lg:grid-cols-2 gap-16 items-center">
535
536
537
<div class="space-y-8">
538
539
540
<div class="flex items-center gap-3">
541
<span class="block w-8 h-px bg-brand-reactive"></span>
542
<p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive">
543
ENGINEERING WITH ATOMIC PRECISION
544
</p>
545
</div>
546
547
548
<h1 class="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.05]">
549
<span class="text-brand-text">Same DNA.</span>
550
<br>
551
<span class="text-brand-reactive">Different Mass.</span>
552
</h1>
553
554
555
<p class="text-lg text-brand-muted max-w-lg leading-relaxed">
556
We build high-performance digital products using the same elite standards as global agencies—minus the bureaucratic bloat and overhead.
557
</p>
558
559
560
<div class="flex flex-wrap items-center gap-4 pt-2">
561
<a href="#contact"
562
class="btn-reactive-md">
563
Start a Project
564
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
565
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
566
<path d="M5 12h14M12 5l7 7-7 7"/>
567
</svg>
568
</a>
569
<a href="#services"
570
class="btn-ghost-md">
571
Our Services
572
</a>
573
</div>
574
575
</div>
576
577
578
579
<div class="relative h-full transition-all duration-300 ease-in-out flex flex-1 justify-center items-center">
580
<div class="rounded-lg border border-brand-border bg-brand-surface/60 backdrop-blur-sm overflow-hidden shadow-2xl flex flex-col flex-1 -translate-x-11">
581
582
583
<div class="flex items-center justify-between px-4 py-3 border-b border-brand-border bg-brand-elevated/50">
584
<div class="flex items-center gap-2">
585
<span class="w-2.5 h-2.5 rounded-full bg-brand-danger/70"></span>
586
<span class="w-2.5 h-2.5 rounded-full bg-brand-warn/70"></span>
587
<span class="w-2.5 h-2.5 rounded-full bg-brand-reactive/70"></span>
588
</div>
589
<span class="font-mono text-xs text-brand-faint cursor-default">isotopic ~ deploy</span>
590
<div class="w-14"></div>
591
</div>
592
593
594
<div id="terminal-body" class="px-4 py-4 overflow-hidden flex flex-col justify-start transition-[height] duration-300 ease-out">
595
<div id="terminal-output" class="space-y-1"></div>
596
<div id="terminal-cursor-row" class="flex items-center gap-2 mt-1">
597
<span class="font-mono text-xs leading-relaxed text-brand-reactive cursor-default">$</span>
598
<span id="terminal-cursor" class="cursor-blink leading-relaxed cursor-default"></span>
599
</div>
600
</div>
601
602
</div>
603
604
605
<div
606
id="browser-popup"
607
class="absolute top-5 left-5 right-0 bottom-0 z-20 flex flex-col rounded-lg border border-brand-border bg-brand-surface overflow-hidden browser-popup"
608
style="box-shadow: 0 12px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);"
609
aria-hidden="true"
610
>
611
612
613
<div class="flex items-center gap-3 px-4 py-2.5 border-b border-brand-border bg-brand-elevated/80 shrink-0">
614
615
616
<div class="flex items-center gap-1.5 shrink-0">
617
<span class="w-2.5 h-2.5 rounded-full bg-brand-danger/70"></span>
618
<span class="w-2.5 h-2.5 rounded-full bg-brand-warn/70"></span>
619
<span class="w-2.5 h-2.5 rounded-full bg-brand-reactive/70"></span>
620
</div>
621
622
623
<div class="flex items-center gap-0.5 text-brand-faint shrink-0">
624
<span class="p-1 cursor-default select-none">
625
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
626
</span>
627
<span class="p-1 cursor-default select-none opacity-35">
628
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
629
</span>
630
<span class="p-1 cursor-default select-none">
631
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
632
</span>
633
</div>
634
635
636
<div class="flex-1 flex items-center gap-1.5 px-3 py-1 rounded-md bg-brand-base/60 border border-brand-border min-w-0">
637
<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-brand-reactive shrink-0"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
638
<span id="browser-url" class="font-mono text-xs text-brand-muted truncate">cove.store</span>
639
</div>
640
641
</div>
642
643
644
<div id="browser-viewport" class="flex-1 flex flex-col bg-stone-50 relative overflow-hidden select-none">
645
646
647
<div class="shrink-0 bg-white border-b border-stone-200 flex items-center justify-between px-4 py-1.5">
648
<span class="text-[11px] font-bold tracking-[0.28em] uppercase text-stone-900 cursor-default">COVE</span>
649
<div class="hidden sm:flex items-center gap-3 text-[8px] uppercase tracking-widest text-stone-500 font-medium">
650
<span class="cursor-default">Collections</span>
651
<span class="cursor-default">New In</span>
652
<span class="cursor-default">Sale</span>
653
</div>
654
<div class="flex items-center gap-2 text-stone-400">
655
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cursor-default shrink-0"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
656
<div id="cart-icon" class="relative cursor-default">
657
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
658
<span id="cart-badge" class="absolute -top-1.5 -right-1.5 w-3.5 h-3.5 rounded-full bg-amber-500 text-white hidden items-center justify-center font-bold" style="font-size:6px;line-height:1">0</span>
659
</div>
660
</div>
661
</div>
662
663
664
<div id="page-container" class="flex-1 relative overflow-hidden">
665
666
667
<div id="page-home" class="absolute inset-0 flex overflow-hidden">
668
<div class="flex flex-col justify-center px-5 py-3 flex-1 min-w-0">
669
<span class="text-[7px] uppercase tracking-[0.22em] text-amber-600 font-semibold mb-1 cursor-default">New Arrivals</span>
670
<h2 class="text-xl font-bold text-stone-900 leading-[1.1] tracking-tight mb-1.5 cursor-default">The Summer<br>Edit.</h2>
671
<p class="text-[9px] text-stone-500 leading-relaxed mb-2.5 cursor-default">32 curated pieces for effortless living.</p>
672
<div class="flex items-center gap-2 flex-wrap">
673
<span id="btn-shop-now" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-sm bg-stone-900 text-white text-[9px] uppercase tracking-wide font-medium cursor-pointer">
674
Shop Now
675
<svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
676
</span>
677
<span class="text-[8px] text-stone-400 cursor-default">Free shipping over $75</span>
678
</div>
679
</div>
680
<div class="shrink-0 grid grid-cols-2 gap-1.5 p-3 content-center">
681
<div class="w-14 h-14 rounded bg-amber-100 relative overflow-hidden cursor-default"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/80"><span class="text-[6px] text-stone-700 font-semibold">$48</span></div></div>
682
<div class="w-14 h-14 rounded bg-stone-200 relative overflow-hidden cursor-default"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/80"><span class="text-[6px] text-stone-700 font-semibold">$62</span></div></div>
683
<div class="w-14 h-14 rounded bg-rose-100 relative overflow-hidden cursor-default"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/80"><span class="text-[6px] text-stone-700 font-semibold">$34</span></div></div>
684
<div class="w-14 h-14 rounded bg-emerald-50 border border-emerald-100 relative overflow-hidden cursor-default"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/80"><span class="text-[6px] text-stone-700 font-semibold">$89</span></div></div>
685
</div>
686
</div>
687
688
689
<div id="page-products" class="absolute inset-0 flex flex-col opacity-0 pointer-events-none">
690
<div class="shrink-0 px-3 py-1 border-b border-stone-100 bg-stone-50">
691
<span class="text-[7px] text-stone-400 cursor-default">Home / New Arrivals</span>
692
</div>
693
<div id="products-scroll" class="flex-1 overflow-hidden">
694
<div id="products-grid" class="p-2.5 grid grid-cols-3 gap-2" style="transition:transform 700ms cubic-bezier(0.25,0.46,0.45,0.94)">
695
<div class="flex flex-col gap-0.5">
696
<div class="rounded bg-amber-100 h-14 relative overflow-hidden"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/85 flex justify-between"><span class="text-[6px] text-stone-500 truncate">Linen Tote</span><span class="text-[6px] font-semibold text-stone-700">$48</span></div></div>
697
<button class="text-[7px] leading-none px-1.5 py-[3px] bg-stone-800 text-white rounded-sm font-medium">Add to cart</button>
698
</div>
699
<div class="flex flex-col gap-0.5">
700
<div class="rounded bg-stone-200 h-14 relative overflow-hidden"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/85 flex justify-between"><span class="text-[6px] text-stone-500 truncate">Woven Basket</span><span class="text-[6px] font-semibold text-stone-700">$62</span></div></div>
701
<button class="text-[7px] leading-none px-1.5 py-[3px] bg-stone-800 text-white rounded-sm font-medium">Add to cart</button>
702
</div>
703
<div class="flex flex-col gap-0.5">
704
<div class="rounded bg-rose-100 h-14 relative overflow-hidden"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/85 flex justify-between"><span class="text-[6px] text-stone-500 truncate">Cotton Pillow</span><span class="text-[6px] font-semibold text-stone-700">$34</span></div></div>
705
<button class="text-[7px] leading-none px-1.5 py-[3px] bg-stone-800 text-white rounded-sm font-medium">Add to cart</button>
706
</div>
707
<div class="flex flex-col gap-0.5">
708
<div class="rounded bg-emerald-50 border border-emerald-100 h-14 relative overflow-hidden"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/85 flex justify-between"><span class="text-[6px] text-stone-500 truncate">Marble Vase</span><span class="text-[6px] font-semibold text-stone-700">$89</span></div></div>
709
<button class="text-[7px] leading-none px-1.5 py-[3px] bg-stone-800 text-white rounded-sm font-medium">Add to cart</button>
710
</div>
711
<div class="flex flex-col gap-0.5">
712
<div class="rounded bg-yellow-100 h-14 relative overflow-hidden"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/85 flex justify-between"><span class="text-[6px] text-stone-500 truncate">Brass Candle</span><span class="text-[6px] font-semibold text-stone-700">$45</span></div></div>
713
<button id="btn-add-to-cart" class="text-[7px] leading-none px-1.5 py-[3px] bg-stone-800 text-white rounded-sm font-medium">Add to cart</button>
714
</div>
715
<div class="flex flex-col gap-0.5">
716
<div class="rounded bg-sky-50 border border-sky-100 h-14 relative overflow-hidden"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/85 flex justify-between"><span class="text-[6px] text-stone-500 truncate">Ceramic Mug</span><span class="text-[6px] font-semibold text-stone-700">$28</span></div></div>
717
<button class="text-[7px] leading-none px-1.5 py-[3px] bg-stone-800 text-white rounded-sm font-medium">Add to cart</button>
718
</div>
719
</div>
720
</div>
721
</div>
722
723
724
<div id="page-checkout" class="absolute inset-0 flex flex-col bg-white opacity-0 pointer-events-none">
725
<div class="p-2 flex flex-col gap-1">
726
<h3 class="text-[9px] font-bold text-stone-900 pb-1 border-b border-stone-100 shrink-0">Checkout</h3>
727
<div class="flex gap-1.5 shrink-0">
728
<div class="flex-1 flex items-center justify-center py-1 rounded bg-black cursor-default">
729
<span class="text-[8px] text-white font-semibold tracking-wide"> Pay</span>
730
</div>
731
<div class="flex-1 flex items-center justify-center py-1 rounded border border-stone-200 cursor-default">
732
<span class="text-[9px] font-black" style="color:#ff69b4">klarna</span>
733
</div>
734
</div>
735
<input id="field-email" type="text" class="w-full px-2 py-[3px] rounded border border-stone-200 text-[9px] text-stone-800 bg-white outline-none placeholder:text-stone-300 shrink-0" placeholder="Email address" readonly>
736
<input id="field-card" type="text" class="w-full px-2 py-[3px] rounded border border-stone-200 text-[9px] text-stone-800 bg-white outline-none placeholder:text-stone-300 shrink-0" placeholder="Card number" readonly>
737
<button id="btn-pay" class="w-full py-1.5 rounded bg-stone-900 text-white text-[9px] font-semibold uppercase tracking-wide shrink-0 cursor-pointer">Pay $45.00</button>
738
</div>
739
</div>
740
741
742
<div id="page-success" class="absolute inset-0 flex items-center justify-center bg-white opacity-0 pointer-events-none">
743
<div class="text-center px-3">
744
<div class="w-9 h-9 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-2">
745
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-600"><polyline points="20 6 9 17 4 12"/></svg>
746
</div>
747
<h3 class="text-[11px] font-bold text-stone-900 mb-1">Order Confirmed!</h3>
748
<p class="text-[9px] text-stone-500 mb-3 leading-relaxed">Thanks Alex. Order #4821 is on its way.</p>
749
<span class="px-3 py-1 rounded border border-stone-200 text-[8px] text-stone-600 cursor-default">Continue Shopping</span>
750
</div>
751
</div>
752
753
</div>
754
755
756
<div id="cart-popover" class="absolute top-8 right-1 z-30 w-[10.5rem] bg-white rounded-lg border border-stone-200" style="opacity:0;pointer-events:none;transition:opacity 180ms ease;box-shadow:0 4px 20px rgba(0,0,0,0.1)">
757
<div class="p-2.5">
758
<h4 class="text-[9px] font-bold text-stone-800 mb-2">Your Cart (1 item)</h4>
759
<div class="flex gap-2 mb-2">
760
<div class="w-7 h-7 rounded bg-yellow-100 shrink-0"></div>
761
<div>
762
<p class="text-[8px] text-stone-700 font-medium leading-tight">Brass Candle</p>
763
<p class="text-[7px] text-stone-400 mt-0.5">Qty: 1 · $45.00</p>
764
</div>
765
</div>
766
<div class="border-t border-stone-100 pt-1.5 mb-1.5 flex justify-between items-center">
767
<span class="text-[8px] text-stone-500">Total</span>
768
<span class="text-[9px] font-bold text-stone-900">$45.00</span>
769
</div>
770
<button id="btn-cart-checkout" class="w-full py-1 bg-stone-900 text-white text-[8px] uppercase tracking-wide rounded font-semibold cursor-pointer">Checkout →</button>
771
</div>
772
</div>
773
774
775
<div id="fake-cursor" class="absolute z-50 pointer-events-none" style="opacity:0;left:50%;top:60%">
776
<svg width="18" height="22" viewBox="0 0 18 22" fill="none">
777
<path d="M2 2L2 19L5.5 15L8.5 21.5L11 20.5L8 14L13.5 14L2 2Z" fill="white" stroke="#1c1917" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
778
</svg>
779
</div>
780
781
</div>
782
783
</div>
784
785
786
<div class="absolute -inset-4 bg-brand-reactive/5 rounded-2xl blur-2xl -z-10" aria-hidden="true"></div>
787
</div>
788
789
<script src="/assets/scripts/terminal.js" defer></script>
790
791
</div>
792
</div>
793
794
795
</div>
796
797
<div class="relative flex flex-1 flex-col items-start justify-start overflow-hidden z-0">
798
799
<ul class="absolute right-0 top-0 bottom-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
800
801
<li class="flex flex-row">
802
<span class="w-[30px] opacity-50">1</span>
803
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell with context %}</p>
804
</li>
805
806
<li class="flex flex-row">
807
<span class="w-[30px] opacity-50">2</span>
808
<p class="flex w-full overflow-hidden whitespace-pre"></p>
809
</li>
810
811
<li class="flex flex-row">
812
<span class="w-[30px] opacity-50">3</span>
813
<p class="flex w-full overflow-hidden whitespace-pre">{# HERO</p>
814
</li>
815
816
<li class="flex flex-row">
817
<span class="w-[30px] opacity-50">4</span>
818
<p class="flex w-full overflow-hidden whitespace-pre"> #}</p>
819
</li>
820
821
<li class="flex flex-row">
822
<span class="w-[30px] opacity-50">5</span>
823
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "hero", strings.hero.sectionLabel, strings.hero.sectionSublabel) %}</p>
824
</li>
825
826
<li class="flex flex-row">
827
<span class="w-[30px] opacity-50">6</span>
828
<p class="flex w-full overflow-hidden whitespace-pre"></p>
829
</li>
830
831
<li class="flex flex-row">
832
<span class="w-[30px] opacity-50">7</span>
833
<p class="flex w-full overflow-hidden whitespace-pre"> {# Gradient orbs — isolated overflow wrapper prevents mobile bleed</p>
834
</li>
835
836
<li class="flex flex-row">
837
<span class="w-[30px] opacity-50">8</span>
838
<p class="flex w-full overflow-hidden whitespace-pre"> without affecting sticky siblings in sectionShell #}</p>
839
</li>
840
841
<li class="flex flex-row">
842
<span class="w-[30px] opacity-50">9</span>
843
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true"></p>
844
</li>
845
846
<li class="flex flex-row">
847
<span class="w-[30px] opacity-50">10</span>
848
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="hero-orb w-[600px] h-[600px] bg-brand-reactive/8 top-[-150px] left-[-200px]"></div></p>
849
</li>
850
851
<li class="flex flex-row">
852
<span class="w-[30px] opacity-50">11</span>
853
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="hero-orb w-[400px] h-[400px] bg-brand-stable/8 bottom-[-100px] right-[-100px]"></div></p>
854
</li>
855
856
<li class="flex flex-row">
857
<span class="w-[30px] opacity-50">12</span>
858
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
859
</li>
860
861
<li class="flex flex-row">
862
<span class="w-[30px] opacity-50">13</span>
863
<p class="flex w-full overflow-hidden whitespace-pre"></p>
864
</li>
865
866
<li class="flex flex-row">
867
<span class="w-[30px] opacity-50">14</span>
868
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="max-w-7xl mx-auto w-full"></p>
869
</li>
870
871
<li class="flex flex-row">
872
<span class="w-[30px] opacity-50">15</span>
873
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid lg:grid-cols-2 gap-16 items-center"></p>
874
</li>
875
876
<li class="flex flex-row">
877
<span class="w-[30px] opacity-50">16</span>
878
<p class="flex w-full overflow-hidden whitespace-pre"></p>
879
</li>
880
881
<li class="flex flex-row">
882
<span class="w-[30px] opacity-50">17</span>
883
<p class="flex w-full overflow-hidden whitespace-pre"> {# Hero copy #}</p>
884
</li>
885
886
<li class="flex flex-row">
887
<span class="w-[30px] opacity-50">18</span>
888
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-8"></p>
889
</li>
890
891
<li class="flex flex-row">
892
<span class="w-[30px] opacity-50">19</span>
893
<p class="flex w-full overflow-hidden whitespace-pre"></p>
894
</li>
895
896
<li class="flex flex-row">
897
<span class="w-[30px] opacity-50">20</span>
898
<p class="flex w-full overflow-hidden whitespace-pre"> {# Eyebrow #}</p>
899
</li>
900
901
<li class="flex flex-row">
902
<span class="w-[30px] opacity-50">21</span>
903
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center gap-3"></p>
904
</li>
905
906
<li class="flex flex-row">
907
<span class="w-[30px] opacity-50">22</span>
908
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="block w-8 h-px bg-brand-reactive"></span></p>
909
</li>
910
911
<li class="flex flex-row">
912
<span class="w-[30px] opacity-50">23</span>
913
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive"></p>
914
</li>
915
916
<li class="flex flex-row">
917
<span class="w-[30px] opacity-50">24</span>
918
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.eyebrow }}</p>
919
</li>
920
921
<li class="flex flex-row">
922
<span class="w-[30px] opacity-50">25</span>
923
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
924
</li>
925
926
<li class="flex flex-row">
927
<span class="w-[30px] opacity-50">26</span>
928
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
929
</li>
930
931
<li class="flex flex-row">
932
<span class="w-[30px] opacity-50">27</span>
933
<p class="flex w-full overflow-hidden whitespace-pre"></p>
934
</li>
935
936
<li class="flex flex-row">
937
<span class="w-[30px] opacity-50">28</span>
938
<p class="flex w-full overflow-hidden whitespace-pre"> {# Headline #}</p>
939
</li>
940
941
<li class="flex flex-row">
942
<span class="w-[30px] opacity-50">29</span>
943
<p class="flex w-full overflow-hidden whitespace-pre"> <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.05]"></p>
944
</li>
945
946
<li class="flex flex-row">
947
<span class="w-[30px] opacity-50">30</span>
948
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-brand-text">{{ strings.hero.headline }}</span></p>
949
</li>
950
951
<li class="flex flex-row">
952
<span class="w-[30px] opacity-50">31</span>
953
<p class="flex w-full overflow-hidden whitespace-pre"> <br></p>
954
</li>
955
956
<li class="flex flex-row">
957
<span class="w-[30px] opacity-50">32</span>
958
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-brand-reactive">{{ strings.hero.headlineAccent }}</span></p>
959
</li>
960
961
<li class="flex flex-row">
962
<span class="w-[30px] opacity-50">33</span>
963
<p class="flex w-full overflow-hidden whitespace-pre"> </h1></p>
964
</li>
965
966
<li class="flex flex-row">
967
<span class="w-[30px] opacity-50">34</span>
968
<p class="flex w-full overflow-hidden whitespace-pre"></p>
969
</li>
970
971
<li class="flex flex-row">
972
<span class="w-[30px] opacity-50">35</span>
973
<p class="flex w-full overflow-hidden whitespace-pre"> {# Subtitle #}</p>
974
</li>
975
976
<li class="flex flex-row">
977
<span class="w-[30px] opacity-50">36</span>
978
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="text-lg text-brand-muted max-w-lg leading-relaxed"></p>
979
</li>
980
981
<li class="flex flex-row">
982
<span class="w-[30px] opacity-50">37</span>
983
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.subtitle }}</p>
984
</li>
985
986
<li class="flex flex-row">
987
<span class="w-[30px] opacity-50">38</span>
988
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
989
</li>
990
991
<li class="flex flex-row">
992
<span class="w-[30px] opacity-50">39</span>
993
<p class="flex w-full overflow-hidden whitespace-pre"></p>
994
</li>
995
996
<li class="flex flex-row">
997
<span class="w-[30px] opacity-50">40</span>
998
<p class="flex w-full overflow-hidden whitespace-pre"> {# CTAs #}</p>
999
</li>
1000
1001
<li class="flex flex-row">
1002
<span class="w-[30px] opacity-50">41</span>
1003
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex flex-wrap items-center gap-4 pt-2"></p>
1004
</li>
1005
1006
<li class="flex flex-row">
1007
<span class="w-[30px] opacity-50">42</span>
1008
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.hero.ctaPrimary.href }}"</p>
1009
</li>
1010
1011
<li class="flex flex-row">
1012
<span class="w-[30px] opacity-50">43</span>
1013
<p class="flex w-full overflow-hidden whitespace-pre"> class="btn-reactive-md"></p>
1014
</li>
1015
1016
<li class="flex flex-row">
1017
<span class="w-[30px] opacity-50">44</span>
1018
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.ctaPrimary.label }}</p>
1019
</li>
1020
1021
<li class="flex flex-row">
1022
<span class="w-[30px] opacity-50">45</span>
1023
<p class="flex w-full overflow-hidden whitespace-pre"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"</p>
1024
</li>
1025
1026
<li class="flex flex-row">
1027
<span class="w-[30px] opacity-50">46</span>
1028
<p class="flex w-full overflow-hidden whitespace-pre"> fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></p>
1029
</li>
1030
1031
<li class="flex flex-row">
1032
<span class="w-[30px] opacity-50">47</span>
1033
<p class="flex w-full overflow-hidden whitespace-pre"> <path d="M5 12h14M12 5l7 7-7 7"/></p>
1034
</li>
1035
1036
<li class="flex flex-row">
1037
<span class="w-[30px] opacity-50">48</span>
1038
<p class="flex w-full overflow-hidden whitespace-pre"> </svg></p>
1039
</li>
1040
1041
<li class="flex flex-row">
1042
<span class="w-[30px] opacity-50">49</span>
1043
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
1044
</li>
1045
1046
<li class="flex flex-row">
1047
<span class="w-[30px] opacity-50">50</span>
1048
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.hero.ctaSecondary.href }}"</p>
1049
</li>
1050
1051
<li class="flex flex-row">
1052
<span class="w-[30px] opacity-50">51</span>
1053
<p class="flex w-full overflow-hidden whitespace-pre"> class="btn-ghost-md"></p>
1054
</li>
1055
1056
<li class="flex flex-row">
1057
<span class="w-[30px] opacity-50">52</span>
1058
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.ctaSecondary.label }}</p>
1059
</li>
1060
1061
<li class="flex flex-row">
1062
<span class="w-[30px] opacity-50">53</span>
1063
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
1064
</li>
1065
1066
<li class="flex flex-row">
1067
<span class="w-[30px] opacity-50">54</span>
1068
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1069
</li>
1070
1071
<li class="flex flex-row">
1072
<span class="w-[30px] opacity-50">55</span>
1073
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1074
</li>
1075
1076
<li class="flex flex-row">
1077
<span class="w-[30px] opacity-50">56</span>
1078
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1079
</li>
1080
1081
<li class="flex flex-row">
1082
<span class="w-[30px] opacity-50">57</span>
1083
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1084
</li>
1085
1086
<li class="flex flex-row">
1087
<span class="w-[30px] opacity-50">58</span>
1088
<p class="flex w-full overflow-hidden whitespace-pre"> {# Live Terminal #}</p>
1089
</li>
1090
1091
<li class="flex flex-row">
1092
<span class="w-[30px] opacity-50">59</span>
1093
<p class="flex w-full overflow-hidden whitespace-pre"> {% include "components/terminal.njk" %}</p>
1094
</li>
1095
1096
<li class="flex flex-row">
1097
<span class="w-[30px] opacity-50">60</span>
1098
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1099
</li>
1100
1101
<li class="flex flex-row">
1102
<span class="w-[30px] opacity-50">61</span>
1103
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1104
</li>
1105
1106
<li class="flex flex-row">
1107
<span class="w-[30px] opacity-50">62</span>
1108
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1109
</li>
1110
1111
<li class="flex flex-row">
1112
<span class="w-[30px] opacity-50">63</span>
1113
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1114
</li>
1115
1116
<li class="flex flex-row">
1117
<span class="w-[30px] opacity-50">64</span>
1118
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
1119
</li>
1120
1121
<li class="flex flex-row">
1122
<span class="w-[30px] opacity-50">65</span>
1123
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1124
</li>
1125
1126
</ul>
1127
<div class="absolute inset-0 bg-linear-to-r from-brand-base to-transparent"></div>
1128
1129
</div>
1130
</section>
1131
1132
1133
1134
1135
1136
1137
<section id="difference" class="relative border-t border-brand-border flex flex-row">
1138
<div class="relative flex flex-1 flex-row">
1139
1140
1141
<ul class="absolute inset-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
1142
1143
<li class="flex flex-row">
1144
<span class="w-[30px] opacity-50">1</span>
1145
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell, sectionHeader with context %}</p>
1146
</li>
1147
1148
<li class="flex flex-row">
1149
<span class="w-[30px] opacity-50">2</span>
1150
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1151
</li>
1152
1153
<li class="flex flex-row">
1154
<span class="w-[30px] opacity-50">3</span>
1155
<p class="flex w-full overflow-hidden whitespace-pre">{# THE ISOTOPIC DIFFERENCE #}</p>
1156
</li>
1157
1158
<li class="flex flex-row">
1159
<span class="w-[30px] opacity-50">4</span>
1160
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "difference", strings.difference.sectionLabel, strings.difference.sectionSublabel) %}</p>
1161
</li>
1162
1163
<li class="flex flex-row">
1164
<span class="w-[30px] opacity-50">5</span>
1165
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1166
</li>
1167
1168
<li class="flex flex-row">
1169
<span class="w-[30px] opacity-50">6</span>
1170
<p class="flex w-full overflow-hidden whitespace-pre"> {{ sectionHeader("h" ~ (sectionNum + 1), strings.difference.eyebrow, strings.difference.headline, strings.difference.subtitle) }}</p>
1171
</li>
1172
1173
<li class="flex flex-row">
1174
<span class="w-[30px] opacity-50">7</span>
1175
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1176
</li>
1177
1178
<li class="flex flex-row">
1179
<span class="w-[30px] opacity-50">8</span>
1180
<p class="flex w-full overflow-hidden whitespace-pre"> {# Comparison grid #}</p>
1181
</li>
1182
1183
<li class="flex flex-row">
1184
<span class="w-[30px] opacity-50">9</span>
1185
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid md:grid-cols-2 gap-6"></p>
1186
</li>
1187
1188
<li class="flex flex-row">
1189
<span class="w-[30px] opacity-50">10</span>
1190
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1191
</li>
1192
1193
<li class="flex flex-row">
1194
<span class="w-[30px] opacity-50">11</span>
1195
<p class="flex w-full overflow-hidden whitespace-pre"> {# Isotopic column #}</p>
1196
</li>
1197
1198
<li class="flex flex-row">
1199
<span class="w-[30px] opacity-50">12</span>
1200
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="rounded-lg border border-brand-reactive/40 bg-brand-surface/40 p-8 space-y-6 relative overflow-hidden</p>
1201
</li>
1202
1203
<li class="flex flex-row">
1204
<span class="w-[30px] opacity-50">13</span>
1205
<p class="flex w-full overflow-hidden whitespace-pre"> shadow-[0_0_40px_-8px_rgba(45,212,191,0.15)]"></p>
1206
</li>
1207
1208
<li class="flex flex-row">
1209
<span class="w-[30px] opacity-50">14</span>
1210
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute top-0 right-0 w-32 h-32 bg-brand-reactive/5 rounded-bl-full" aria-hidden="true"></div></p>
1211
</li>
1212
1213
<li class="flex flex-row">
1214
<span class="w-[30px] opacity-50">15</span>
1215
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-between"></p>
1216
</li>
1217
1218
<li class="flex flex-row">
1219
<span class="w-[30px] opacity-50">16</span>
1220
<p class="flex w-full overflow-hidden whitespace-pre"> <h2 class="font-mono text-sm font-medium text-brand-text">{{ strings.difference.isotopic.title }}</h2></p>
1221
</li>
1222
1223
<li class="flex flex-row">
1224
<span class="w-[30px] opacity-50">17</span>
1225
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-2 py-0.5 rounded border border-brand-reactive/40 bg-brand-reactive/10 font-mono text-xs text-brand-reactive"></p>
1226
</li>
1227
1228
<li class="flex flex-row">
1229
<span class="w-[30px] opacity-50">18</span>
1230
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.difference.isotopic.badge }}</p>
1231
</li>
1232
1233
<li class="flex flex-row">
1234
<span class="w-[30px] opacity-50">19</span>
1235
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1236
</li>
1237
1238
<li class="flex flex-row">
1239
<span class="w-[30px] opacity-50">20</span>
1240
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1241
</li>
1242
1243
<li class="flex flex-row">
1244
<span class="w-[30px] opacity-50">21</span>
1245
<p class="flex w-full overflow-hidden whitespace-pre"> <ul class="space-y-4"></p>
1246
</li>
1247
1248
<li class="flex flex-row">
1249
<span class="w-[30px] opacity-50">22</span>
1250
<p class="flex w-full overflow-hidden whitespace-pre"> {% for item in strings.difference.isotopic.items %}</p>
1251
</li>
1252
1253
<li class="flex flex-row">
1254
<span class="w-[30px] opacity-50">23</span>
1255
<p class="flex w-full overflow-hidden whitespace-pre"> <li class="flex items-start gap-3"></p>
1256
</li>
1257
1258
<li class="flex flex-row">
1259
<span class="w-[30px] opacity-50">24</span>
1260
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-reactive/40 flex items-center justify-center"></p>
1261
</li>
1262
1263
<li class="flex flex-row">
1264
<span class="w-[30px] opacity-50">25</span>
1265
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="w-1.5 h-1.5 rounded-full bg-brand-reactive"></span></p>
1266
</li>
1267
1268
<li class="flex flex-row">
1269
<span class="w-[30px] opacity-50">26</span>
1270
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1271
</li>
1272
1273
<li class="flex flex-row">
1274
<span class="w-[30px] opacity-50">27</span>
1275
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-sm text-brand-text leading-relaxed">{{ item }}</span></p>
1276
</li>
1277
1278
<li class="flex flex-row">
1279
<span class="w-[30px] opacity-50">28</span>
1280
<p class="flex w-full overflow-hidden whitespace-pre"> </li></p>
1281
</li>
1282
1283
<li class="flex flex-row">
1284
<span class="w-[30px] opacity-50">29</span>
1285
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
1286
</li>
1287
1288
<li class="flex flex-row">
1289
<span class="w-[30px] opacity-50">30</span>
1290
<p class="flex w-full overflow-hidden whitespace-pre"> </ul></p>
1291
</li>
1292
1293
<li class="flex flex-row">
1294
<span class="w-[30px] opacity-50">31</span>
1295
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1296
</li>
1297
1298
<li class="flex flex-row">
1299
<span class="w-[30px] opacity-50">32</span>
1300
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1301
</li>
1302
1303
<li class="flex flex-row">
1304
<span class="w-[30px] opacity-50">33</span>
1305
<p class="flex w-full overflow-hidden whitespace-pre"> {# Traditional column #}</p>
1306
</li>
1307
1308
<li class="flex flex-row">
1309
<span class="w-[30px] opacity-50">34</span>
1310
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="rounded-lg border border-brand-border bg-brand-surface/40 p-8 space-y-6 opacity-70"></p>
1311
</li>
1312
1313
<li class="flex flex-row">
1314
<span class="w-[30px] opacity-50">35</span>
1315
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-between"></p>
1316
</li>
1317
1318
<li class="flex flex-row">
1319
<span class="w-[30px] opacity-50">36</span>
1320
<p class="flex w-full overflow-hidden whitespace-pre"> <h3 class="font-mono text-sm font-medium text-brand-muted">{{ strings.difference.traditional.title }}</h3></p>
1321
</li>
1322
1323
<li class="flex flex-row">
1324
<span class="w-[30px] opacity-50">37</span>
1325
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-2 py-0.5 rounded border border-brand-warn/30 bg-brand-warn/10 font-mono text-xs text-brand-warn"></p>
1326
</li>
1327
1328
<li class="flex flex-row">
1329
<span class="w-[30px] opacity-50">38</span>
1330
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.difference.traditional.badge }}</p>
1331
</li>
1332
1333
<li class="flex flex-row">
1334
<span class="w-[30px] opacity-50">39</span>
1335
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1336
</li>
1337
1338
<li class="flex flex-row">
1339
<span class="w-[30px] opacity-50">40</span>
1340
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1341
</li>
1342
1343
<li class="flex flex-row">
1344
<span class="w-[30px] opacity-50">41</span>
1345
<p class="flex w-full overflow-hidden whitespace-pre"> <ul class="space-y-4"></p>
1346
</li>
1347
1348
<li class="flex flex-row">
1349
<span class="w-[30px] opacity-50">42</span>
1350
<p class="flex w-full overflow-hidden whitespace-pre"> {% for item in strings.difference.traditional.items %}</p>
1351
</li>
1352
1353
<li class="flex flex-row">
1354
<span class="w-[30px] opacity-50">43</span>
1355
<p class="flex w-full overflow-hidden whitespace-pre"> <li class="flex items-start gap-3"></p>
1356
</li>
1357
1358
<li class="flex flex-row">
1359
<span class="w-[30px] opacity-50">44</span>
1360
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-warn/40 flex items-center justify-center"></p>
1361
</li>
1362
1363
<li class="flex flex-row">
1364
<span class="w-[30px] opacity-50">45</span>
1365
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="w-1.5 h-1.5 rounded-full bg-brand-warn/60"></span></p>
1366
</li>
1367
1368
<li class="flex flex-row">
1369
<span class="w-[30px] opacity-50">46</span>
1370
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1371
</li>
1372
1373
<li class="flex flex-row">
1374
<span class="w-[30px] opacity-50">47</span>
1375
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-sm text-brand-muted leading-relaxed">{{ item }}</span></p>
1376
</li>
1377
1378
<li class="flex flex-row">
1379
<span class="w-[30px] opacity-50">48</span>
1380
<p class="flex w-full overflow-hidden whitespace-pre"> </li></p>
1381
</li>
1382
1383
<li class="flex flex-row">
1384
<span class="w-[30px] opacity-50">49</span>
1385
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
1386
</li>
1387
1388
<li class="flex flex-row">
1389
<span class="w-[30px] opacity-50">50</span>
1390
<p class="flex w-full overflow-hidden whitespace-pre"> </ul></p>
1391
</li>
1392
1393
<li class="flex flex-row">
1394
<span class="w-[30px] opacity-50">51</span>
1395
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1396
</li>
1397
1398
<li class="flex flex-row">
1399
<span class="w-[30px] opacity-50">52</span>
1400
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1401
</li>
1402
1403
<li class="flex flex-row">
1404
<span class="w-[30px] opacity-50">53</span>
1405
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1406
</li>
1407
1408
<li class="flex flex-row">
1409
<span class="w-[30px] opacity-50">54</span>
1410
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1411
</li>
1412
1413
<li class="flex flex-row">
1414
<span class="w-[30px] opacity-50">55</span>
1415
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
1416
</li>
1417
1418
<li class="flex flex-row">
1419
<span class="w-[30px] opacity-50">56</span>
1420
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1421
</li>
1422
1423
</ul>
1424
1425
1426
<div class="absolute inset-0 bg-linear-to-l from-brand-base to-transparent"></div>
1427
</div>
1428
1429
<div class="relative flex flex-row border-r bg-brand-base border-brand-border pb-1 pt-1 w-[33px] justify-end items-start">
1430
1431
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/80"><em class="text-brand-stable">#02</em> THE ISOTOPIC DIFFERENCE</span>
1432
1433
1434
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/40 italic">// diff(agency, isotopic) → output: clarity</span>
1435
1436
</div>
1437
1438
<div class="w-full max-w-7xl mx-auto px-2 md:px-6 py-24 md:py-32 z-40">
1439
1440
1441
1442
<div class="mb-16 space-y-4 max-w-2xl">
1443
<div class="flex items-center gap-3">
1444
<span class="block w-6 h-px bg-brand-reactive"></span>
1445
<p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive">
1446
Smarter Structure. Faster Delivery
1447
</p>
1448
</div>
1449
<h3 class="text-3xl md:text-5xl font-bold tracking-tight text-brand-text leading-tight">
1450
Elite Engineering,<br>Stripped of the Bloat.
1451
</h3>
1452
<p class="text-lg text-brand-muted leading-relaxed">You shouldn't pay for an agency's fancy office or layers of middle management. We focus 100% of your budget on the code.</p>
1453
</div>
1454
1455
1456
1457
<div class="grid md:grid-cols-2 gap-6">
1458
1459
1460
<div class="rounded-lg border border-brand-reactive/40 bg-brand-surface/40 p-8 space-y-6 relative overflow-hidden
1461
shadow-[0_0_40px_-8px_rgba(45,212,191,0.15)]">
1462
<div class="absolute top-0 right-0 w-32 h-32 bg-brand-reactive/5 rounded-bl-full" aria-hidden="true"></div>
1463
<div class="flex items-center justify-between">
1464
<h2 class="font-mono text-sm font-medium text-brand-text">Isotopic</h2>
1465
<span class="px-2 py-0.5 rounded border border-brand-reactive/40 bg-brand-reactive/10 font-mono text-xs text-brand-reactive">
1466
Stable
1467
</span>
1468
</div>
1469
<ul class="space-y-4">
1470
1471
<li class="flex items-start gap-3">
1472
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-reactive/40 flex items-center justify-center">
1473
<span class="w-1.5 h-1.5 rounded-full bg-brand-reactive"></span>
1474
</span>
1475
<span class="text-sm text-brand-text leading-relaxed">Direct communication with your lead engineer</span>
1476
</li>
1477
1478
<li class="flex items-start gap-3">
1479
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-reactive/40 flex items-center justify-center">
1480
<span class="w-1.5 h-1.5 rounded-full bg-brand-reactive"></span>
1481
</span>
1482
<span class="text-sm text-brand-text leading-relaxed">Rapid prototyping and weekly builds</span>
1483
</li>
1484
1485
<li class="flex items-start gap-3">
1486
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-reactive/40 flex items-center justify-center">
1487
<span class="w-1.5 h-1.5 rounded-full bg-brand-reactive"></span>
1488
</span>
1489
<span class="text-sm text-brand-text leading-relaxed">Fixed-price transparency with no surprises</span>
1490
</li>
1491
1492
<li class="flex items-start gap-3">
1493
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-reactive/40 flex items-center justify-center">
1494
<span class="w-1.5 h-1.5 rounded-full bg-brand-reactive"></span>
1495
</span>
1496
<span class="text-sm text-brand-text leading-relaxed">Long-term stability and code ownership</span>
1497
</li>
1498
1499
<li class="flex items-start gap-3">
1500
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-reactive/40 flex items-center justify-center">
1501
<span class="w-1.5 h-1.5 rounded-full bg-brand-reactive"></span>
1502
</span>
1503
<span class="text-sm text-brand-text leading-relaxed">Lean, high-velocity execution</span>
1504
</li>
1505
1506
</ul>
1507
</div>
1508
1509
1510
<div class="rounded-lg border border-brand-border bg-brand-surface/40 p-8 space-y-6 opacity-70">
1511
<div class="flex items-center justify-between">
1512
<h3 class="font-mono text-sm font-medium text-brand-muted">Traditional Agency</h3>
1513
<span class="px-2 py-0.5 rounded border border-brand-warn/30 bg-brand-warn/10 font-mono text-xs text-brand-warn">
1514
Volatile
1515
</span>
1516
</div>
1517
<ul class="space-y-4">
1518
1519
<li class="flex items-start gap-3">
1520
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-warn/40 flex items-center justify-center">
1521
<span class="w-1.5 h-1.5 rounded-full bg-brand-warn/60"></span>
1522
</span>
1523
<span class="text-sm text-brand-muted leading-relaxed">Project managers between you and engineers</span>
1524
</li>
1525
1526
<li class="flex items-start gap-3">
1527
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-warn/40 flex items-center justify-center">
1528
<span class="w-1.5 h-1.5 rounded-full bg-brand-warn/60"></span>
1529
</span>
1530
<span class="text-sm text-brand-muted leading-relaxed">Weeks of 'discovery' before seeing code</span>
1531
</li>
1532
1533
<li class="flex items-start gap-3">
1534
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-warn/40 flex items-center justify-center">
1535
<span class="w-1.5 h-1.5 rounded-full bg-brand-warn/60"></span>
1536
</span>
1537
<span class="text-sm text-brand-muted leading-relaxed">Expensive retainers for senior oversight</span>
1538
</li>
1539
1540
<li class="flex items-start gap-3">
1541
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-warn/40 flex items-center justify-center">
1542
<span class="w-1.5 h-1.5 rounded-full bg-brand-warn/60"></span>
1543
</span>
1544
<span class="text-sm text-brand-muted leading-relaxed">Frequent team rotations and handoffs</span>
1545
</li>
1546
1547
<li class="flex items-start gap-3">
1548
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-warn/40 flex items-center justify-center">
1549
<span class="w-1.5 h-1.5 rounded-full bg-brand-warn/60"></span>
1550
</span>
1551
<span class="text-sm text-brand-muted leading-relaxed">Hidden fees and scope-creep taxes</span>
1552
</li>
1553
1554
</ul>
1555
</div>
1556
1557
</div>
1558
1559
1560
</div>
1561
1562
<div class="relative flex flex-1 flex-col items-start justify-start overflow-hidden z-0">
1563
1564
<ul class="absolute right-0 top-0 bottom-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
1565
1566
<li class="flex flex-row">
1567
<span class="w-[30px] opacity-50">1</span>
1568
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell, sectionHeader with context %}</p>
1569
</li>
1570
1571
<li class="flex flex-row">
1572
<span class="w-[30px] opacity-50">2</span>
1573
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1574
</li>
1575
1576
<li class="flex flex-row">
1577
<span class="w-[30px] opacity-50">3</span>
1578
<p class="flex w-full overflow-hidden whitespace-pre">{# THE ISOTOPIC DIFFERENCE #}</p>
1579
</li>
1580
1581
<li class="flex flex-row">
1582
<span class="w-[30px] opacity-50">4</span>
1583
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "difference", strings.difference.sectionLabel, strings.difference.sectionSublabel) %}</p>
1584
</li>
1585
1586
<li class="flex flex-row">
1587
<span class="w-[30px] opacity-50">5</span>
1588
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1589
</li>
1590
1591
<li class="flex flex-row">
1592
<span class="w-[30px] opacity-50">6</span>
1593
<p class="flex w-full overflow-hidden whitespace-pre"> {{ sectionHeader("h" ~ (sectionNum + 1), strings.difference.eyebrow, strings.difference.headline, strings.difference.subtitle) }}</p>
1594
</li>
1595
1596
<li class="flex flex-row">
1597
<span class="w-[30px] opacity-50">7</span>
1598
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1599
</li>
1600
1601
<li class="flex flex-row">
1602
<span class="w-[30px] opacity-50">8</span>
1603
<p class="flex w-full overflow-hidden whitespace-pre"> {# Comparison grid #}</p>
1604
</li>
1605
1606
<li class="flex flex-row">
1607
<span class="w-[30px] opacity-50">9</span>
1608
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid md:grid-cols-2 gap-6"></p>
1609
</li>
1610
1611
<li class="flex flex-row">
1612
<span class="w-[30px] opacity-50">10</span>
1613
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1614
</li>
1615
1616
<li class="flex flex-row">
1617
<span class="w-[30px] opacity-50">11</span>
1618
<p class="flex w-full overflow-hidden whitespace-pre"> {# Isotopic column #}</p>
1619
</li>
1620
1621
<li class="flex flex-row">
1622
<span class="w-[30px] opacity-50">12</span>
1623
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="rounded-lg border border-brand-reactive/40 bg-brand-surface/40 p-8 space-y-6 relative overflow-hidden</p>
1624
</li>
1625
1626
<li class="flex flex-row">
1627
<span class="w-[30px] opacity-50">13</span>
1628
<p class="flex w-full overflow-hidden whitespace-pre"> shadow-[0_0_40px_-8px_rgba(45,212,191,0.15)]"></p>
1629
</li>
1630
1631
<li class="flex flex-row">
1632
<span class="w-[30px] opacity-50">14</span>
1633
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute top-0 right-0 w-32 h-32 bg-brand-reactive/5 rounded-bl-full" aria-hidden="true"></div></p>
1634
</li>
1635
1636
<li class="flex flex-row">
1637
<span class="w-[30px] opacity-50">15</span>
1638
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-between"></p>
1639
</li>
1640
1641
<li class="flex flex-row">
1642
<span class="w-[30px] opacity-50">16</span>
1643
<p class="flex w-full overflow-hidden whitespace-pre"> <h2 class="font-mono text-sm font-medium text-brand-text">{{ strings.difference.isotopic.title }}</h2></p>
1644
</li>
1645
1646
<li class="flex flex-row">
1647
<span class="w-[30px] opacity-50">17</span>
1648
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-2 py-0.5 rounded border border-brand-reactive/40 bg-brand-reactive/10 font-mono text-xs text-brand-reactive"></p>
1649
</li>
1650
1651
<li class="flex flex-row">
1652
<span class="w-[30px] opacity-50">18</span>
1653
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.difference.isotopic.badge }}</p>
1654
</li>
1655
1656
<li class="flex flex-row">
1657
<span class="w-[30px] opacity-50">19</span>
1658
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1659
</li>
1660
1661
<li class="flex flex-row">
1662
<span class="w-[30px] opacity-50">20</span>
1663
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1664
</li>
1665
1666
<li class="flex flex-row">
1667
<span class="w-[30px] opacity-50">21</span>
1668
<p class="flex w-full overflow-hidden whitespace-pre"> <ul class="space-y-4"></p>
1669
</li>
1670
1671
<li class="flex flex-row">
1672
<span class="w-[30px] opacity-50">22</span>
1673
<p class="flex w-full overflow-hidden whitespace-pre"> {% for item in strings.difference.isotopic.items %}</p>
1674
</li>
1675
1676
<li class="flex flex-row">
1677
<span class="w-[30px] opacity-50">23</span>
1678
<p class="flex w-full overflow-hidden whitespace-pre"> <li class="flex items-start gap-3"></p>
1679
</li>
1680
1681
<li class="flex flex-row">
1682
<span class="w-[30px] opacity-50">24</span>
1683
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-reactive/40 flex items-center justify-center"></p>
1684
</li>
1685
1686
<li class="flex flex-row">
1687
<span class="w-[30px] opacity-50">25</span>
1688
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="w-1.5 h-1.5 rounded-full bg-brand-reactive"></span></p>
1689
</li>
1690
1691
<li class="flex flex-row">
1692
<span class="w-[30px] opacity-50">26</span>
1693
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1694
</li>
1695
1696
<li class="flex flex-row">
1697
<span class="w-[30px] opacity-50">27</span>
1698
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-sm text-brand-text leading-relaxed">{{ item }}</span></p>
1699
</li>
1700
1701
<li class="flex flex-row">
1702
<span class="w-[30px] opacity-50">28</span>
1703
<p class="flex w-full overflow-hidden whitespace-pre"> </li></p>
1704
</li>
1705
1706
<li class="flex flex-row">
1707
<span class="w-[30px] opacity-50">29</span>
1708
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
1709
</li>
1710
1711
<li class="flex flex-row">
1712
<span class="w-[30px] opacity-50">30</span>
1713
<p class="flex w-full overflow-hidden whitespace-pre"> </ul></p>
1714
</li>
1715
1716
<li class="flex flex-row">
1717
<span class="w-[30px] opacity-50">31</span>
1718
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1719
</li>
1720
1721
<li class="flex flex-row">
1722
<span class="w-[30px] opacity-50">32</span>
1723
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1724
</li>
1725
1726
<li class="flex flex-row">
1727
<span class="w-[30px] opacity-50">33</span>
1728
<p class="flex w-full overflow-hidden whitespace-pre"> {# Traditional column #}</p>
1729
</li>
1730
1731
<li class="flex flex-row">
1732
<span class="w-[30px] opacity-50">34</span>
1733
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="rounded-lg border border-brand-border bg-brand-surface/40 p-8 space-y-6 opacity-70"></p>
1734
</li>
1735
1736
<li class="flex flex-row">
1737
<span class="w-[30px] opacity-50">35</span>
1738
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-between"></p>
1739
</li>
1740
1741
<li class="flex flex-row">
1742
<span class="w-[30px] opacity-50">36</span>
1743
<p class="flex w-full overflow-hidden whitespace-pre"> <h3 class="font-mono text-sm font-medium text-brand-muted">{{ strings.difference.traditional.title }}</h3></p>
1744
</li>
1745
1746
<li class="flex flex-row">
1747
<span class="w-[30px] opacity-50">37</span>
1748
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-2 py-0.5 rounded border border-brand-warn/30 bg-brand-warn/10 font-mono text-xs text-brand-warn"></p>
1749
</li>
1750
1751
<li class="flex flex-row">
1752
<span class="w-[30px] opacity-50">38</span>
1753
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.difference.traditional.badge }}</p>
1754
</li>
1755
1756
<li class="flex flex-row">
1757
<span class="w-[30px] opacity-50">39</span>
1758
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1759
</li>
1760
1761
<li class="flex flex-row">
1762
<span class="w-[30px] opacity-50">40</span>
1763
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1764
</li>
1765
1766
<li class="flex flex-row">
1767
<span class="w-[30px] opacity-50">41</span>
1768
<p class="flex w-full overflow-hidden whitespace-pre"> <ul class="space-y-4"></p>
1769
</li>
1770
1771
<li class="flex flex-row">
1772
<span class="w-[30px] opacity-50">42</span>
1773
<p class="flex w-full overflow-hidden whitespace-pre"> {% for item in strings.difference.traditional.items %}</p>
1774
</li>
1775
1776
<li class="flex flex-row">
1777
<span class="w-[30px] opacity-50">43</span>
1778
<p class="flex w-full overflow-hidden whitespace-pre"> <li class="flex items-start gap-3"></p>
1779
</li>
1780
1781
<li class="flex flex-row">
1782
<span class="w-[30px] opacity-50">44</span>
1783
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-warn/40 flex items-center justify-center"></p>
1784
</li>
1785
1786
<li class="flex flex-row">
1787
<span class="w-[30px] opacity-50">45</span>
1788
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="w-1.5 h-1.5 rounded-full bg-brand-warn/60"></span></p>
1789
</li>
1790
1791
<li class="flex flex-row">
1792
<span class="w-[30px] opacity-50">46</span>
1793
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1794
</li>
1795
1796
<li class="flex flex-row">
1797
<span class="w-[30px] opacity-50">47</span>
1798
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-sm text-brand-muted leading-relaxed">{{ item }}</span></p>
1799
</li>
1800
1801
<li class="flex flex-row">
1802
<span class="w-[30px] opacity-50">48</span>
1803
<p class="flex w-full overflow-hidden whitespace-pre"> </li></p>
1804
</li>
1805
1806
<li class="flex flex-row">
1807
<span class="w-[30px] opacity-50">49</span>
1808
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
1809
</li>
1810
1811
<li class="flex flex-row">
1812
<span class="w-[30px] opacity-50">50</span>
1813
<p class="flex w-full overflow-hidden whitespace-pre"> </ul></p>
1814
</li>
1815
1816
<li class="flex flex-row">
1817
<span class="w-[30px] opacity-50">51</span>
1818
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1819
</li>
1820
1821
<li class="flex flex-row">
1822
<span class="w-[30px] opacity-50">52</span>
1823
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1824
</li>
1825
1826
<li class="flex flex-row">
1827
<span class="w-[30px] opacity-50">53</span>
1828
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1829
</li>
1830
1831
<li class="flex flex-row">
1832
<span class="w-[30px] opacity-50">54</span>
1833
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1834
</li>
1835
1836
<li class="flex flex-row">
1837
<span class="w-[30px] opacity-50">55</span>
1838
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
1839
</li>
1840
1841
<li class="flex flex-row">
1842
<span class="w-[30px] opacity-50">56</span>
1843
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1844
</li>
1845
1846
</ul>
1847
<div class="absolute inset-0 bg-linear-to-r from-brand-base to-transparent"></div>
1848
1849
</div>
1850
</section>
1851
1852
1853
1854
1855
1856
1857
<section id="services" class="relative border-t border-brand-border flex flex-row">
1858
<div class="relative flex flex-1 flex-row">
1859
1860
1861
<ul class="absolute inset-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
1862
1863
<li class="flex flex-row">
1864
<span class="w-[30px] opacity-50">1</span>
1865
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell, sectionHeader with context %}</p>
1866
</li>
1867
1868
<li class="flex flex-row">
1869
<span class="w-[30px] opacity-50">2</span>
1870
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1871
</li>
1872
1873
<li class="flex flex-row">
1874
<span class="w-[30px] opacity-50">3</span>
1875
<p class="flex w-full overflow-hidden whitespace-pre">{# SERVICES — BENTO GRID #}</p>
1876
</li>
1877
1878
<li class="flex flex-row">
1879
<span class="w-[30px] opacity-50">4</span>
1880
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "services", strings.services.sectionLabel, strings.services.sectionSublabel) %}</p>
1881
</li>
1882
1883
<li class="flex flex-row">
1884
<span class="w-[30px] opacity-50">5</span>
1885
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1886
</li>
1887
1888
<li class="flex flex-row">
1889
<span class="w-[30px] opacity-50">6</span>
1890
<p class="flex w-full overflow-hidden whitespace-pre"> {{ sectionHeader("h" ~ (sectionNum + 1), strings.services.eyebrow, strings.services.headline, strings.services.subtitle) }}</p>
1891
</li>
1892
1893
<li class="flex flex-row">
1894
<span class="w-[30px] opacity-50">7</span>
1895
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1896
</li>
1897
1898
<li class="flex flex-row">
1899
<span class="w-[30px] opacity-50">8</span>
1900
<p class="flex w-full overflow-hidden whitespace-pre"> {# Bento grid #}</p>
1901
</li>
1902
1903
<li class="flex flex-row">
1904
<span class="w-[30px] opacity-50">9</span>
1905
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-brand-border overflow-hidden relative"></p>
1906
</li>
1907
1908
<li class="flex flex-row">
1909
<span class="w-[30px] opacity-50">10</span>
1910
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1911
</li>
1912
1913
<li class="flex flex-row">
1914
<span class="w-[30px] opacity-50">11</span>
1915
<p class="flex w-full overflow-hidden whitespace-pre"> {% for service in strings.services.items %}</p>
1916
</li>
1917
1918
<li class="flex flex-row">
1919
<span class="w-[30px] opacity-50">12</span>
1920
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="cursor-default group relative z-10 bg-brand-base hover:bg-brand-surface/60 transition-colors duration-200 p-8 flex flex-col gap-6</p>
1921
</li>
1922
1923
<li class="flex flex-row">
1924
<span class="w-[30px] opacity-50">13</span>
1925
<p class="flex w-full overflow-hidden whitespace-pre"> {% if loop.index == 1 %}lg:col-span-2{% endif %}</p>
1926
</li>
1927
1928
<li class="flex flex-row">
1929
<span class="w-[30px] opacity-50">14</span>
1930
<p class="flex w-full overflow-hidden whitespace-pre"> {% if loop.index == 4 %}lg:col-span-2{% endif %}"></p>
1931
</li>
1932
1933
<li class="flex flex-row">
1934
<span class="w-[30px] opacity-50">15</span>
1935
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1936
</li>
1937
1938
<li class="flex flex-row">
1939
<span class="w-[30px] opacity-50">16</span>
1940
<p class="flex w-full overflow-hidden whitespace-pre"> {# Icon + element label #}</p>
1941
</li>
1942
1943
<li class="flex flex-row">
1944
<span class="w-[30px] opacity-50">17</span>
1945
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-start justify-between"></p>
1946
</li>
1947
1948
<li class="flex flex-row">
1949
<span class="w-[30px] opacity-50">18</span>
1950
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="w-10 h-10 text-brand-reactive group-hover:text-brand-text transition-colors"></p>
1951
</li>
1952
1953
<li class="flex flex-row">
1954
<span class="w-[30px] opacity-50">19</span>
1955
<p class="flex w-full overflow-hidden whitespace-pre"> {% svg service.icon, "w-10 h-10" %}</p>
1956
</li>
1957
1958
<li class="flex flex-row">
1959
<span class="w-[30px] opacity-50">20</span>
1960
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1961
</li>
1962
1963
<li class="flex flex-row">
1964
<span class="w-[30px] opacity-50">21</span>
1965
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="text-right"></p>
1966
</li>
1967
1968
<li class="flex flex-row">
1969
<span class="w-[30px] opacity-50">22</span>
1970
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-[10px] text-brand-faint cursor-default">{{ service.atomicNumber }}</div></p>
1971
</li>
1972
1973
<li class="flex flex-row">
1974
<span class="w-[30px] opacity-50">23</span>
1975
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-xs font-medium text-brand-reactive cursor-default">[{{ service.element }}]</div></p>
1976
</li>
1977
1978
<li class="flex flex-row">
1979
<span class="w-[30px] opacity-50">24</span>
1980
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1981
</li>
1982
1983
<li class="flex flex-row">
1984
<span class="w-[30px] opacity-50">25</span>
1985
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1986
</li>
1987
1988
<li class="flex flex-row">
1989
<span class="w-[30px] opacity-50">26</span>
1990
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1991
</li>
1992
1993
<li class="flex flex-row">
1994
<span class="w-[30px] opacity-50">27</span>
1995
<p class="flex w-full overflow-hidden whitespace-pre"> {# Content #}</p>
1996
</li>
1997
1998
<li class="flex flex-row">
1999
<span class="w-[30px] opacity-50">28</span>
2000
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex-1 space-y-3"></p>
2001
</li>
2002
2003
<li class="flex flex-row">
2004
<span class="w-[30px] opacity-50">29</span>
2005
<p class="flex w-full overflow-hidden whitespace-pre"> <h3 class="font-semibold text-brand-text text-base cursor-default">{{ service.title }}</h3></p>
2006
</li>
2007
2008
<li class="flex flex-row">
2009
<span class="w-[30px] opacity-50">30</span>
2010
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="text-sm text-brand-muted leading-relaxed cursor-default">{{ service.description }}</p></p>
2011
</li>
2012
2013
<li class="flex flex-row">
2014
<span class="w-[30px] opacity-50">31</span>
2015
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2016
</li>
2017
2018
<li class="flex flex-row">
2019
<span class="w-[30px] opacity-50">32</span>
2020
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2021
</li>
2022
2023
<li class="flex flex-row">
2024
<span class="w-[30px] opacity-50">33</span>
2025
<p class="flex w-full overflow-hidden whitespace-pre"> {# Tags #}</p>
2026
</li>
2027
2028
<li class="flex flex-row">
2029
<span class="w-[30px] opacity-50">34</span>
2030
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex flex-wrap gap-2"></p>
2031
</li>
2032
2033
<li class="flex flex-row">
2034
<span class="w-[30px] opacity-50">35</span>
2035
<p class="flex w-full overflow-hidden whitespace-pre"> {% for tag in service.tags %}</p>
2036
</li>
2037
2038
<li class="flex flex-row">
2039
<span class="w-[30px] opacity-50">36</span>
2040
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default</p>
2041
</li>
2042
2043
<li class="flex flex-row">
2044
<span class="w-[30px] opacity-50">37</span>
2045
<p class="flex w-full overflow-hidden whitespace-pre"> group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors"></p>
2046
</li>
2047
2048
<li class="flex flex-row">
2049
<span class="w-[30px] opacity-50">38</span>
2050
<p class="flex w-full overflow-hidden whitespace-pre"> {{ tag }}</p>
2051
</li>
2052
2053
<li class="flex flex-row">
2054
<span class="w-[30px] opacity-50">39</span>
2055
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
2056
</li>
2057
2058
<li class="flex flex-row">
2059
<span class="w-[30px] opacity-50">40</span>
2060
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
2061
</li>
2062
2063
<li class="flex flex-row">
2064
<span class="w-[30px] opacity-50">41</span>
2065
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2066
</li>
2067
2068
<li class="flex flex-row">
2069
<span class="w-[30px] opacity-50">42</span>
2070
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2071
</li>
2072
2073
<li class="flex flex-row">
2074
<span class="w-[30px] opacity-50">43</span>
2075
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2076
</li>
2077
2078
<li class="flex flex-row">
2079
<span class="w-[30px] opacity-50">44</span>
2080
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
2081
</li>
2082
2083
<li class="flex flex-row">
2084
<span class="w-[30px] opacity-50">45</span>
2085
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="cursor-default justify-center items-center group relative z-10 bg-brand-base transition-colors duration-200 p-8 flex flex-col gap-6 sm:col-span-2 lg:col-span-2"></p>
2086
</li>
2087
2088
<li class="flex flex-row">
2089
<span class="w-[30px] opacity-50">46</span>
2090
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.services.cta.href }}"</p>
2091
</li>
2092
2093
<li class="flex flex-row">
2094
<span class="w-[30px] opacity-50">47</span>
2095
<p class="flex w-full overflow-hidden whitespace-pre"> class="relative z-10 btn-reactive-lg justify-center"></p>
2096
</li>
2097
2098
<li class="flex flex-row">
2099
<span class="w-[30px] opacity-50">48</span>
2100
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.services.cta.label }}</p>
2101
</li>
2102
2103
<li class="flex flex-row">
2104
<span class="w-[30px] opacity-50">49</span>
2105
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
2106
</li>
2107
2108
<li class="flex flex-row">
2109
<span class="w-[30px] opacity-50">50</span>
2110
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="opacity-50 absolute inset-0 z-0">{% inlineSVG "assets/images/ansi.svg" %}</div></p>
2111
</li>
2112
2113
<li class="flex flex-row">
2114
<span class="w-[30px] opacity-50">51</span>
2115
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2116
</li>
2117
2118
<li class="flex flex-row">
2119
<span class="w-[30px] opacity-50">52</span>
2120
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2121
</li>
2122
2123
<li class="flex flex-row">
2124
<span class="w-[30px] opacity-50">53</span>
2125
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2126
</li>
2127
2128
<li class="flex flex-row">
2129
<span class="w-[30px] opacity-50">54</span>
2130
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2131
</li>
2132
2133
<li class="flex flex-row">
2134
<span class="w-[30px] opacity-50">55</span>
2135
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
2136
</li>
2137
2138
<li class="flex flex-row">
2139
<span class="w-[30px] opacity-50">56</span>
2140
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2141
</li>
2142
2143
</ul>
2144
2145
2146
<div class="absolute inset-0 bg-linear-to-l from-brand-base to-transparent"></div>
2147
</div>
2148
2149
<div class="relative flex flex-row border-r bg-brand-base border-brand-border pb-1 pt-1 w-[33px] justify-end items-start">
2150
2151
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/80"><em class="text-brand-stable">#03</em> CORE DISCIPLINES</span>
2152
2153
2154
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/40 italic">// exports: [Web, Mobile, Workflow, Prototyping]</span>
2155
2156
</div>
2157
2158
<div class="w-full max-w-7xl mx-auto px-2 md:px-6 py-24 md:py-32 z-40">
2159
2160
2161
2162
<div class="mb-16 space-y-4 max-w-2xl">
2163
<div class="flex items-center gap-3">
2164
<span class="block w-6 h-px bg-brand-reactive"></span>
2165
<p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive">
2166
Service Elements
2167
</p>
2168
</div>
2169
<h4 class="text-3xl md:text-5xl font-bold tracking-tight text-brand-text leading-tight">
2170
High-Performance<br>Solutions.
2171
</h4>
2172
<p class="text-lg text-brand-muted leading-relaxed">Specialized engineering for brands that value speed, security, and scalability.</p>
2173
</div>
2174
2175
2176
2177
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-brand-border overflow-hidden relative">
2178
2179
2180
<div class="cursor-default group relative z-10 bg-brand-base hover:bg-brand-surface/60 transition-colors duration-200 p-8 flex flex-col gap-6
2181
lg:col-span-2
2182
">
2183
2184
2185
<div class="flex items-start justify-between">
2186
<div class="w-10 h-10 text-brand-reactive group-hover:text-brand-text transition-colors">
2187
<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
2188
<style>
2189
.nucleus {
2190
animation: nucleus-pulse 2s ease-in-out infinite;
2191
transform-origin: 12px 12px;
2192
}
2193
@keyframes nucleus-pulse {
2194
0%, 100% { transform: scale(1); opacity: 1; }
2195
50% { transform: scale(1.5); opacity: 0.6; }
2196
}
2197
</style>
2198
2199
2200
<ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(0 12 12)" stroke-width="0.75" opacity="0.5"/>
2201
<ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(60 12 12)" stroke-width="0.75" opacity="0.5"/>
2202
<ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(120 12 12)" stroke-width="0.75" opacity="0.5"/>
2203
2204
2205
<circle class="nucleus" cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/>
2206
2207
2208
<g transform="rotate(0 12 12)">
2209
<circle r="1" fill="currentColor" stroke="none">
2210
<animateMotion dur="2s" repeatCount="indefinite"
2211
path="M 2,12 A 10,4 0 0,1 22,12 A 10,4 0 0,1 2,12"/>
2212
</circle>
2213
</g>
2214
2215
2216
<g transform="rotate(60 12 12)">
2217
<circle r="1" fill="currentColor" stroke="none">
2218
<animateMotion dur="3s" repeatCount="indefinite" begin="-1s"
2219
path="M 2,12 A 10,4 0 0,1 22,12 A 10,4 0 0,1 2,12"/>
2220
</circle>
2221
</g>
2222
2223
2224
<g transform="rotate(120 12 12)">
2225
<circle r="1" fill="currentColor" stroke="none">
2226
<animateMotion dur="1.7s" repeatCount="indefinite" begin="-0.8s"
2227
path="M 2,12 A 10,4 0 0,1 22,12 A 10,4 0 0,1 2,12"/>
2228
</circle>
2229
</g>
2230
</svg>
2231
2232
</div>
2233
<div class="text-right">
2234
<div class="font-mono text-[10px] text-brand-faint cursor-default">00</div>
2235
<div class="font-mono text-xs font-medium text-brand-reactive cursor-default">[We]</div>
2236
</div>
2237
</div>
2238
2239
2240
<div class="flex-1 space-y-3">
2241
<h3 class="font-semibold text-brand-text text-base cursor-default">Web Engineering</h3>
2242
<p class="text-sm text-brand-muted leading-relaxed cursor-default">Custom applications and e-commerce storefronts built for speed and conversion. We specialize in React, Next.js, and headless architecture.</p>
2243
</div>
2244
2245
2246
<div class="flex flex-wrap gap-2">
2247
2248
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2249
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2250
Next.js
2251
</span>
2252
2253
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2254
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2255
React
2256
</span>
2257
2258
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2259
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2260
Shopify
2261
</span>
2262
2263
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2264
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2265
Performance
2266
</span>
2267
2268
</div>
2269
2270
</div>
2271
2272
<div class="cursor-default group relative z-10 bg-brand-base hover:bg-brand-surface/60 transition-colors duration-200 p-8 flex flex-col gap-6
2273
2274
">
2275
2276
2277
<div class="flex items-start justify-between">
2278
<div class="w-10 h-10 text-brand-reactive group-hover:text-brand-text transition-colors">
2279
<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
2280
<style>
2281
.wave-sm {transform: translateX(-3.5px); animation: wave-emit 2s ease-out infinite 0s; }
2282
.wave-md {transform: translateX(-3.2px); animation: wave-emit 2s ease-out infinite 0.45s; }
2283
.wave-lg {transform: translateX(-2.7px); animation: wave-emit 2s ease-out infinite 0.9s; }
2284
@keyframes wave-emit {
2285
0% { opacity: 0; }
2286
25% { opacity: 1; }
2287
100% { opacity: 0; }
2288
}
2289
</style>
2290
<rect x="6" y="2" width="12" height="20" rx="2" ry="2"/>
2291
<line x1="10" y1="18.5" x2="14" y2="18.5"/>
2292
<line x1="10" y1="5" x2="14" y2="5"/>
2293
<path class="wave-sm" d="M15 10.5 a2 2 0 0 1 0 3" stroke-width="1"/>
2294
<path class="wave-md" d="M16 9.5 a3 3 0 0 1 0 5" stroke-width="1"/>
2295
<path class="wave-lg" d="M16.5 8.5 a4 4 0 0 1 0 7" stroke-width="1"/>
2296
</svg>
2297
2298
</div>
2299
<div class="text-right">
2300
<div class="font-mono text-[10px] text-brand-faint cursor-default">01</div>
2301
<div class="font-mono text-xs font-medium text-brand-reactive cursor-default">[Mo]</div>
2302
</div>
2303
</div>
2304
2305
2306
<div class="flex-1 space-y-3">
2307
<h3 class="font-semibold text-brand-text text-base cursor-default">Mobile Development</h3>
2308
<p class="text-sm text-brand-muted leading-relaxed cursor-default">Native-quality iOS and Android apps. From real-time communication tools (VoIP) to complex marketplace platforms.</p>
2309
</div>
2310
2311
2312
<div class="flex flex-wrap gap-2">
2313
2314
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2315
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2316
Swift
2317
</span>
2318
2319
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2320
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2321
Kotlin
2322
</span>
2323
2324
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2325
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2326
React Native
2327
</span>
2328
2329
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2330
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2331
VoIP
2332
</span>
2333
2334
</div>
2335
2336
</div>
2337
2338
<div class="cursor-default group relative z-10 bg-brand-base hover:bg-brand-surface/60 transition-colors duration-200 p-8 flex flex-col gap-6
2339
2340
">
2341
2342
2343
<div class="flex items-start justify-between">
2344
<div class="w-10 h-10 text-brand-reactive group-hover:text-brand-text transition-colors">
2345
<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
2346
<g>
2347
<animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="10s" repeatCount="indefinite"/>
2348
<circle cx="12" cy="12" r="3"/>
2349
<path d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42">
2350
<animate attributeName="stroke-width" values="1.5;2.4;1.5" dur="2s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/>
2351
<animate attributeName="stroke-opacity" values="1;0.6;1" dur="2s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/>
2352
</path>
2353
<circle cx="12" cy="12" r="7" stroke-dasharray="3 2"/>
2354
</g>
2355
</svg>
2356
2357
</div>
2358
<div class="text-right">
2359
<div class="font-mono text-[10px] text-brand-faint cursor-default">02</div>
2360
<div class="font-mono text-xs font-medium text-brand-reactive cursor-default">[Wf]</div>
2361
</div>
2362
</div>
2363
2364
2365
<div class="flex-1 space-y-3">
2366
<h3 class="font-semibold text-brand-text text-base cursor-default">Workflow Engineering</h3>
2367
<p class="text-sm text-brand-muted leading-relaxed cursor-default">We build internal tools and automations that connect your existing apps, saving your team hundreds of hours of manual work.</p>
2368
</div>
2369
2370
2371
<div class="flex flex-wrap gap-2">
2372
2373
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2374
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2375
Automation
2376
</span>
2377
2378
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2379
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2380
APIs
2381
</span>
2382
2383
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2384
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2385
Data Pipelines
2386
</span>
2387
2388
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2389
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2390
Internal Tools
2391
</span>
2392
2393
</div>
2394
2395
</div>
2396
2397
<div class="cursor-default group relative z-10 bg-brand-base hover:bg-brand-surface/60 transition-colors duration-200 p-8 flex flex-col gap-6
2398
2399
lg:col-span-2">
2400
2401
2402
<div class="flex items-start justify-between">
2403
<div class="w-10 h-10 text-brand-reactive group-hover:text-brand-text transition-colors">
2404
<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 30" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
2405
<style>
2406
@keyframes liftoff {
2407
0%, 100% { transform: translateY(0); }
2408
50% { transform: translateY(-2px); }
2409
}
2410
@keyframes exhaust-wave {
2411
0% { opacity: 0; }
2412
25% { opacity: 1; }
2413
100% { opacity: 0; }
2414
}
2415
.rocket-liftoff { animation: liftoff 2s ease-in-out infinite; transform-origin: center; }
2416
.exhaust-primary { animation: exhaust-wave 1.8s linear infinite 0s; }
2417
.exhaust-secondary { animation: exhaust-wave 1.8s linear infinite 0.45s; }
2418
.exhaust-tertiary { animation: exhaust-wave 1.8s linear infinite 0.9s; }
2419
</style>
2420
<g class="rocket-liftoff">
2421
<path d="M12 2C12 2 7 7 7 13v2l2 2h6l2-2v-2c0-6-5-11-5-11z"/>
2422
<circle cx="12" cy="10" r="1.5"/>
2423
<path d="M7 15 L4 18 L7 17"/>
2424
<path d="M17 15 L20 18 L17 17"/>
2425
</g>
2426
<path class="exhaust-primary" d="M10 19 Q12 23 14 19"/>
2427
<path class="exhaust-secondary" d="M10.5 21 Q12 25 13.5 21" stroke-width="1"/>
2428
<path class="exhaust-tertiary" d="M10 23 Q12 28 14 23" stroke-width="0.75"/>
2429
</svg>
2430
2431
</div>
2432
<div class="text-right">
2433
<div class="font-mono text-[10px] text-brand-faint cursor-default">03</div>
2434
<div class="font-mono text-xs font-medium text-brand-reactive cursor-default">[Rp]</div>
2435
</div>
2436
</div>
2437
2438
2439
<div class="flex-1 space-y-3">
2440
<h3 class="font-semibold text-brand-text text-base cursor-default">Rapid Prototyping</h3>
2441
<p class="text-sm text-brand-muted leading-relaxed cursor-default">Need to validate an idea fast? We build functional MVPs for startups and founders in weeks, not months.</p>
2442
</div>
2443
2444
2445
<div class="flex flex-wrap gap-2">
2446
2447
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2448
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2449
MVPs
2450
</span>
2451
2452
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2453
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2454
Consulting
2455
</span>
2456
2457
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2458
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2459
Validation
2460
</span>
2461
2462
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2463
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2464
Product Strategy
2465
</span>
2466
2467
</div>
2468
2469
</div>
2470
2471
<div class="cursor-default justify-center items-center group relative z-10 bg-brand-base transition-colors duration-200 p-8 flex flex-col gap-6 sm:col-span-2 lg:col-span-2">
2472
<a href="#contact"
2473
class="relative z-10 btn-reactive-lg justify-center">
2474
Let's Discuss Your Project
2475
</a>
2476
<div class="opacity-50 absolute inset-0 z-0"><svg class="h-full w-full" preserveAspectRatio="none"><defs><pattern id="knurl-pattern-1" x="0" y="0" width="14" height="28" patternUnits="userSpaceOnUse"><path class="fill-brand-border-bright" d="M12 3.6V2.4H13.2V3.6H12ZM0 25.2V24H1.2V25.2H0ZM0 20.4V19.2H1.2V20.4H0ZM0 15.6V14.4H1.2V15.6H0ZM0 10.8V9.6H1.2V10.8H0ZM0 6V4.8H1.2V6H0ZM0 1.2V0H1.2V1.2H0ZM2.4 27.6V26.4H3.6V27.6H2.4ZM2.4 22.8V21.6H3.6V22.8H2.4ZM2.4 18V16.8H3.6V18H2.4ZM2.4 13.2V12H3.6V13.2H2.4ZM2.4 8.4V7.2H3.6V8.4H2.4ZM2.4 3.6V2.4H3.6V3.6H2.4ZM4.8 25.2V24H6V25.2H4.8ZM4.8 20.4V19.2H6V20.4H4.8ZM4.8 15.6V14.4H6V15.6H4.8ZM4.8 10.8V9.6H6V10.8H4.8ZM4.8 6V4.8H6V6H4.8ZM4.8 1.2V0H6V1.2H4.8ZM7.2 27.6V26.4H8.4V27.6H7.2ZM7.2 22.8V21.6H8.4V22.8H7.2ZM7.2 18V16.8H8.4V18H7.2ZM7.2 13.2V12H8.4V13.2H7.2ZM7.2 8.4V7.2H8.4V8.4H7.2ZM7.2 3.6V2.4H8.4V3.6H7.2ZM9.6 25.2V24H10.8V25.2H9.6ZM9.6 20.4V19.2H10.8V20.4H9.6ZM9.6 15.6V14.4H10.8V15.6H9.6ZM9.6 10.8V9.6H10.8V10.8H9.6ZM9.6 6V4.8H10.8V6H9.6ZM9.6 1.2V0H10.8V1.2H9.6ZM12 27.6V26.4H13.2V27.6H12ZM12 22.8V21.6H13.2V22.8H12ZM12 18V16.8H13.2V18H12ZM12 13.2V12H13.2V13.2H12ZM12 8.4V7.2H13.2V8.4H12Z" opacity="1"></path></pattern></defs><rect width="100%" height="100%" fill="url(#knurl-pattern-1)"></rect></svg></div>
2477
</div>
2478
2479
</div>
2480
2481
2482
</div>
2483
2484
<div class="relative flex flex-1 flex-col items-start justify-start overflow-hidden z-0">
2485
2486
<ul class="absolute right-0 top-0 bottom-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
2487
2488
<li class="flex flex-row">
2489
<span class="w-[30px] opacity-50">1</span>
2490
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell, sectionHeader with context %}</p>
2491
</li>
2492
2493
<li class="flex flex-row">
2494
<span class="w-[30px] opacity-50">2</span>
2495
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2496
</li>
2497
2498
<li class="flex flex-row">
2499
<span class="w-[30px] opacity-50">3</span>
2500
<p class="flex w-full overflow-hidden whitespace-pre">{# SERVICES — BENTO GRID #}</p>
2501
</li>
2502
2503
<li class="flex flex-row">
2504
<span class="w-[30px] opacity-50">4</span>
2505
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "services", strings.services.sectionLabel, strings.services.sectionSublabel) %}</p>
2506
</li>
2507
2508
<li class="flex flex-row">
2509
<span class="w-[30px] opacity-50">5</span>
2510
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2511
</li>
2512
2513
<li class="flex flex-row">
2514
<span class="w-[30px] opacity-50">6</span>
2515
<p class="flex w-full overflow-hidden whitespace-pre"> {{ sectionHeader("h" ~ (sectionNum + 1), strings.services.eyebrow, strings.services.headline, strings.services.subtitle) }}</p>
2516
</li>
2517
2518
<li class="flex flex-row">
2519
<span class="w-[30px] opacity-50">7</span>
2520
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2521
</li>
2522
2523
<li class="flex flex-row">
2524
<span class="w-[30px] opacity-50">8</span>
2525
<p class="flex w-full overflow-hidden whitespace-pre"> {# Bento grid #}</p>
2526
</li>
2527
2528
<li class="flex flex-row">
2529
<span class="w-[30px] opacity-50">9</span>
2530
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-brand-border overflow-hidden relative"></p>
2531
</li>
2532
2533
<li class="flex flex-row">
2534
<span class="w-[30px] opacity-50">10</span>
2535
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2536
</li>
2537
2538
<li class="flex flex-row">
2539
<span class="w-[30px] opacity-50">11</span>
2540
<p class="flex w-full overflow-hidden whitespace-pre"> {% for service in strings.services.items %}</p>
2541
</li>
2542
2543
<li class="flex flex-row">
2544
<span class="w-[30px] opacity-50">12</span>
2545
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="cursor-default group relative z-10 bg-brand-base hover:bg-brand-surface/60 transition-colors duration-200 p-8 flex flex-col gap-6</p>
2546
</li>
2547
2548
<li class="flex flex-row">
2549
<span class="w-[30px] opacity-50">13</span>
2550
<p class="flex w-full overflow-hidden whitespace-pre"> {% if loop.index == 1 %}lg:col-span-2{% endif %}</p>
2551
</li>
2552
2553
<li class="flex flex-row">
2554
<span class="w-[30px] opacity-50">14</span>
2555
<p class="flex w-full overflow-hidden whitespace-pre"> {% if loop.index == 4 %}lg:col-span-2{% endif %}"></p>
2556
</li>
2557
2558
<li class="flex flex-row">
2559
<span class="w-[30px] opacity-50">15</span>
2560
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2561
</li>
2562
2563
<li class="flex flex-row">
2564
<span class="w-[30px] opacity-50">16</span>
2565
<p class="flex w-full overflow-hidden whitespace-pre"> {# Icon + element label #}</p>
2566
</li>
2567
2568
<li class="flex flex-row">
2569
<span class="w-[30px] opacity-50">17</span>
2570
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-start justify-between"></p>
2571
</li>
2572
2573
<li class="flex flex-row">
2574
<span class="w-[30px] opacity-50">18</span>
2575
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="w-10 h-10 text-brand-reactive group-hover:text-brand-text transition-colors"></p>
2576
</li>
2577
2578
<li class="flex flex-row">
2579
<span class="w-[30px] opacity-50">19</span>
2580
<p class="flex w-full overflow-hidden whitespace-pre"> {% svg service.icon, "w-10 h-10" %}</p>
2581
</li>
2582
2583
<li class="flex flex-row">
2584
<span class="w-[30px] opacity-50">20</span>
2585
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2586
</li>
2587
2588
<li class="flex flex-row">
2589
<span class="w-[30px] opacity-50">21</span>
2590
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="text-right"></p>
2591
</li>
2592
2593
<li class="flex flex-row">
2594
<span class="w-[30px] opacity-50">22</span>
2595
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-[10px] text-brand-faint cursor-default">{{ service.atomicNumber }}</div></p>
2596
</li>
2597
2598
<li class="flex flex-row">
2599
<span class="w-[30px] opacity-50">23</span>
2600
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-xs font-medium text-brand-reactive cursor-default">[{{ service.element }}]</div></p>
2601
</li>
2602
2603
<li class="flex flex-row">
2604
<span class="w-[30px] opacity-50">24</span>
2605
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2606
</li>
2607
2608
<li class="flex flex-row">
2609
<span class="w-[30px] opacity-50">25</span>
2610
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2611
</li>
2612
2613
<li class="flex flex-row">
2614
<span class="w-[30px] opacity-50">26</span>
2615
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2616
</li>
2617
2618
<li class="flex flex-row">
2619
<span class="w-[30px] opacity-50">27</span>
2620
<p class="flex w-full overflow-hidden whitespace-pre"> {# Content #}</p>
2621
</li>
2622
2623
<li class="flex flex-row">
2624
<span class="w-[30px] opacity-50">28</span>
2625
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex-1 space-y-3"></p>
2626
</li>
2627
2628
<li class="flex flex-row">
2629
<span class="w-[30px] opacity-50">29</span>
2630
<p class="flex w-full overflow-hidden whitespace-pre"> <h3 class="font-semibold text-brand-text text-base cursor-default">{{ service.title }}</h3></p>
2631
</li>
2632
2633
<li class="flex flex-row">
2634
<span class="w-[30px] opacity-50">30</span>
2635
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="text-sm text-brand-muted leading-relaxed cursor-default">{{ service.description }}</p></p>
2636
</li>
2637
2638
<li class="flex flex-row">
2639
<span class="w-[30px] opacity-50">31</span>
2640
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2641
</li>
2642
2643
<li class="flex flex-row">
2644
<span class="w-[30px] opacity-50">32</span>
2645
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2646
</li>
2647
2648
<li class="flex flex-row">
2649
<span class="w-[30px] opacity-50">33</span>
2650
<p class="flex w-full overflow-hidden whitespace-pre"> {# Tags #}</p>
2651
</li>
2652
2653
<li class="flex flex-row">
2654
<span class="w-[30px] opacity-50">34</span>
2655
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex flex-wrap gap-2"></p>
2656
</li>
2657
2658
<li class="flex flex-row">
2659
<span class="w-[30px] opacity-50">35</span>
2660
<p class="flex w-full overflow-hidden whitespace-pre"> {% for tag in service.tags %}</p>
2661
</li>
2662
2663
<li class="flex flex-row">
2664
<span class="w-[30px] opacity-50">36</span>
2665
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default</p>
2666
</li>
2667
2668
<li class="flex flex-row">
2669
<span class="w-[30px] opacity-50">37</span>
2670
<p class="flex w-full overflow-hidden whitespace-pre"> group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors"></p>
2671
</li>
2672
2673
<li class="flex flex-row">
2674
<span class="w-[30px] opacity-50">38</span>
2675
<p class="flex w-full overflow-hidden whitespace-pre"> {{ tag }}</p>
2676
</li>
2677
2678
<li class="flex flex-row">
2679
<span class="w-[30px] opacity-50">39</span>
2680
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
2681
</li>
2682
2683
<li class="flex flex-row">
2684
<span class="w-[30px] opacity-50">40</span>
2685
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
2686
</li>
2687
2688
<li class="flex flex-row">
2689
<span class="w-[30px] opacity-50">41</span>
2690
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2691
</li>
2692
2693
<li class="flex flex-row">
2694
<span class="w-[30px] opacity-50">42</span>
2695
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2696
</li>
2697
2698
<li class="flex flex-row">
2699
<span class="w-[30px] opacity-50">43</span>
2700
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2701
</li>
2702
2703
<li class="flex flex-row">
2704
<span class="w-[30px] opacity-50">44</span>
2705
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
2706
</li>
2707
2708
<li class="flex flex-row">
2709
<span class="w-[30px] opacity-50">45</span>
2710
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="cursor-default justify-center items-center group relative z-10 bg-brand-base transition-colors duration-200 p-8 flex flex-col gap-6 sm:col-span-2 lg:col-span-2"></p>
2711
</li>
2712
2713
<li class="flex flex-row">
2714
<span class="w-[30px] opacity-50">46</span>
2715
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.services.cta.href }}"</p>
2716
</li>
2717
2718
<li class="flex flex-row">
2719
<span class="w-[30px] opacity-50">47</span>
2720
<p class="flex w-full overflow-hidden whitespace-pre"> class="relative z-10 btn-reactive-lg justify-center"></p>
2721
</li>
2722
2723
<li class="flex flex-row">
2724
<span class="w-[30px] opacity-50">48</span>
2725
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.services.cta.label }}</p>
2726
</li>
2727
2728
<li class="flex flex-row">
2729
<span class="w-[30px] opacity-50">49</span>
2730
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
2731
</li>
2732
2733
<li class="flex flex-row">
2734
<span class="w-[30px] opacity-50">50</span>
2735
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="opacity-50 absolute inset-0 z-0">{% inlineSVG "assets/images/ansi.svg" %}</div></p>
2736
</li>
2737
2738
<li class="flex flex-row">
2739
<span class="w-[30px] opacity-50">51</span>
2740
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2741
</li>
2742
2743
<li class="flex flex-row">
2744
<span class="w-[30px] opacity-50">52</span>
2745
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2746
</li>
2747
2748
<li class="flex flex-row">
2749
<span class="w-[30px] opacity-50">53</span>
2750
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2751
</li>
2752
2753
<li class="flex flex-row">
2754
<span class="w-[30px] opacity-50">54</span>
2755
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2756
</li>
2757
2758
<li class="flex flex-row">
2759
<span class="w-[30px] opacity-50">55</span>
2760
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
2761
</li>
2762
2763
<li class="flex flex-row">
2764
<span class="w-[30px] opacity-50">56</span>
2765
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2766
</li>
2767
2768
</ul>
2769
<div class="absolute inset-0 bg-linear-to-r from-brand-base to-transparent"></div>
2770
2771
</div>
2772
</section>
2773
2774
2775
2776
2777
2778
2779
<section id="subscription" class="relative border-t border-brand-border flex flex-row">
2780
<div class="relative flex flex-1 flex-row">
2781
2782
2783
<ul class="absolute inset-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
2784
2785
<li class="flex flex-row">
2786
<span class="w-[30px] opacity-50">1</span>
2787
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell, sectionHeader with context %}</p>
2788
</li>
2789
2790
<li class="flex flex-row">
2791
<span class="w-[30px] opacity-50">2</span>
2792
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2793
</li>
2794
2795
<li class="flex flex-row">
2796
<span class="w-[30px] opacity-50">3</span>
2797
<p class="flex w-full overflow-hidden whitespace-pre">{# STABLE ISOTOPE — SUBSCRIPTION #}</p>
2798
</li>
2799
2800
<li class="flex flex-row">
2801
<span class="w-[30px] opacity-50">4</span>
2802
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "subscription", strings.subscription.sectionLabel, strings.subscription.sectionSublabel) %}</p>
2803
</li>
2804
2805
<li class="flex flex-row">
2806
<span class="w-[30px] opacity-50">5</span>
2807
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2808
</li>
2809
2810
<li class="flex flex-row">
2811
<span class="w-[30px] opacity-50">6</span>
2812
<p class="flex w-full overflow-hidden whitespace-pre"> {{ sectionHeader("h" ~ (sectionNum + 1), strings.subscription.eyebrow, strings.subscription.headline, strings.subscription.subtitle, accent="stable") }}</p>
2813
</li>
2814
2815
<li class="flex flex-row">
2816
<span class="w-[30px] opacity-50">7</span>
2817
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2818
</li>
2819
2820
<li class="flex flex-row">
2821
<span class="w-[30px] opacity-50">8</span>
2822
<p class="flex w-full overflow-hidden whitespace-pre"> {# Feature card #}</p>
2823
</li>
2824
2825
<li class="flex flex-row">
2826
<span class="w-[30px] opacity-50">9</span>
2827
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="rounded-xl border border-brand-stable/30 bg-brand-surface/50 relative overflow-hidden card-glow-stable"></p>
2828
</li>
2829
2830
<li class="flex flex-row">
2831
<span class="w-[30px] opacity-50">10</span>
2832
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2833
</li>
2834
2835
<li class="flex flex-row">
2836
<span class="w-[30px] opacity-50">11</span>
2837
<p class="flex w-full overflow-hidden whitespace-pre"> {# Background glow #}</p>
2838
</li>
2839
2840
<li class="flex flex-row">
2841
<span class="w-[30px] opacity-50">12</span>
2842
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 bg-gradient-to-br from-brand-stable/5 via-transparent to-brand-reactive/5 pointer-events-none" aria-hidden="true"></div></p>
2843
</li>
2844
2845
<li class="flex flex-row">
2846
<span class="w-[30px] opacity-50">13</span>
2847
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2848
</li>
2849
2850
<li class="flex flex-row">
2851
<span class="w-[30px] opacity-50">14</span>
2852
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="relative p-10 md:p-14"></p>
2853
</li>
2854
2855
<li class="flex flex-row">
2856
<span class="w-[30px] opacity-50">15</span>
2857
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid md:grid-cols-2 gap-12 items-center"></p>
2858
</li>
2859
2860
<li class="flex flex-row">
2861
<span class="w-[30px] opacity-50">16</span>
2862
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2863
</li>
2864
2865
<li class="flex flex-row">
2866
<span class="w-[30px] opacity-50">17</span>
2867
<p class="flex w-full overflow-hidden whitespace-pre"> {# Features list #}</p>
2868
</li>
2869
2870
<li class="flex flex-row">
2871
<span class="w-[30px] opacity-50">18</span>
2872
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-6"></p>
2873
</li>
2874
2875
<li class="flex flex-row">
2876
<span class="w-[30px] opacity-50">19</span>
2877
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center gap-3 flex-wrap"></p>
2878
</li>
2879
2880
<li class="flex flex-row">
2881
<span class="w-[30px] opacity-50">20</span>
2882
<p class="flex w-full overflow-hidden whitespace-pre"> {% for badge in strings.subscription.badges %} </p>
2883
</li>
2884
2885
<li class="flex flex-row">
2886
<span class="w-[30px] opacity-50">21</span>
2887
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-3 py-1 rounded-full border border-brand-stable/40 bg-brand-stable/10 font-mono text-xs text-brand-stable"></p>
2888
</li>
2889
2890
<li class="flex flex-row">
2891
<span class="w-[30px] opacity-50">22</span>
2892
<p class="flex w-full overflow-hidden whitespace-pre"> {{ badge }}</p>
2893
</li>
2894
2895
<li class="flex flex-row">
2896
<span class="w-[30px] opacity-50">23</span>
2897
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
2898
</li>
2899
2900
<li class="flex flex-row">
2901
<span class="w-[30px] opacity-50">24</span>
2902
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
2903
</li>
2904
2905
<li class="flex flex-row">
2906
<span class="w-[30px] opacity-50">25</span>
2907
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
2908
</li>
2909
2910
<li class="flex flex-row">
2911
<span class="w-[30px] opacity-50">26</span>
2912
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2913
</li>
2914
2915
<li class="flex flex-row">
2916
<span class="w-[30px] opacity-50">27</span>
2917
<p class="flex w-full overflow-hidden whitespace-pre"> <ul class="space-y-4"></p>
2918
</li>
2919
2920
<li class="flex flex-row">
2921
<span class="w-[30px] opacity-50">28</span>
2922
<p class="flex w-full overflow-hidden whitespace-pre"> {% for feature in strings.subscription.features %}</p>
2923
</li>
2924
2925
<li class="flex flex-row">
2926
<span class="w-[30px] opacity-50">29</span>
2927
<p class="flex w-full overflow-hidden whitespace-pre"> <li class="flex items-start gap-3"></p>
2928
</li>
2929
2930
<li class="flex flex-row">
2931
<span class="w-[30px] opacity-50">30</span>
2932
<p class="flex w-full overflow-hidden whitespace-pre"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"</p>
2933
</li>
2934
2935
<li class="flex flex-row">
2936
<span class="w-[30px] opacity-50">31</span>
2937
<p class="flex w-full overflow-hidden whitespace-pre"> fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"</p>
2938
</li>
2939
2940
<li class="flex flex-row">
2941
<span class="w-[30px] opacity-50">32</span>
2942
<p class="flex w-full overflow-hidden whitespace-pre"> class="shrink-0 mt-0.5 text-brand-stable"></p>
2943
</li>
2944
2945
<li class="flex flex-row">
2946
<span class="w-[30px] opacity-50">33</span>
2947
<p class="flex w-full overflow-hidden whitespace-pre"> <polyline points="20 6 9 17 4 12"/></p>
2948
</li>
2949
2950
<li class="flex flex-row">
2951
<span class="w-[30px] opacity-50">34</span>
2952
<p class="flex w-full overflow-hidden whitespace-pre"> </svg></p>
2953
</li>
2954
2955
<li class="flex flex-row">
2956
<span class="w-[30px] opacity-50">35</span>
2957
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-sm text-brand-text leading-relaxed">{{ feature }}</span></p>
2958
</li>
2959
2960
<li class="flex flex-row">
2961
<span class="w-[30px] opacity-50">36</span>
2962
<p class="flex w-full overflow-hidden whitespace-pre"> </li></p>
2963
</li>
2964
2965
<li class="flex flex-row">
2966
<span class="w-[30px] opacity-50">37</span>
2967
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
2968
</li>
2969
2970
<li class="flex flex-row">
2971
<span class="w-[30px] opacity-50">38</span>
2972
<p class="flex w-full overflow-hidden whitespace-pre"> </ul></p>
2973
</li>
2974
2975
<li class="flex flex-row">
2976
<span class="w-[30px] opacity-50">39</span>
2977
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2978
</li>
2979
2980
<li class="flex flex-row">
2981
<span class="w-[30px] opacity-50">40</span>
2982
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2983
</li>
2984
2985
<li class="flex flex-row">
2986
<span class="w-[30px] opacity-50">41</span>
2987
<p class="flex w-full overflow-hidden whitespace-pre"> {# CTA block #}</p>
2988
</li>
2989
2990
<li class="flex flex-row">
2991
<span class="w-[30px] opacity-50">42</span>
2992
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-8"></p>
2993
</li>
2994
2995
<li class="flex flex-row">
2996
<span class="w-[30px] opacity-50">43</span>
2997
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2998
</li>
2999
3000
<li class="flex flex-row">
3001
<span class="w-[30px] opacity-50">44</span>
3002
<p class="flex w-full overflow-hidden whitespace-pre"> {# Isotope visual element #}</p>
3003
</li>
3004
3005
<li class="flex flex-row">
3006
<span class="w-[30px] opacity-50">45</span>
3007
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-center"></p>
3008
</li>
3009
3010
<li class="flex flex-row">
3011
<span class="w-[30px] opacity-50">46</span>
3012
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="relative w-40 h-40"></p>
3013
</li>
3014
3015
<li class="flex flex-row">
3016
<span class="w-[30px] opacity-50">47</span>
3017
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 rounded-full border border-brand-stable/20 animate-[spin_20s_linear_infinite]"></div></p>
3018
</li>
3019
3020
<li class="flex flex-row">
3021
<span class="w-[30px] opacity-50">48</span>
3022
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-4 rounded-full border border-brand-stable/30 animate-[spin_14s_linear_infinite_reverse]"></div></p>
3023
</li>
3024
3025
<li class="flex flex-row">
3026
<span class="w-[30px] opacity-50">49</span>
3027
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-8 rounded-full border border-brand-stable/40"></div></p>
3028
</li>
3029
3030
<li class="flex flex-row">
3031
<span class="w-[30px] opacity-50">50</span>
3032
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 flex items-center justify-center"></p>
3033
</li>
3034
3035
<li class="flex flex-row">
3036
<span class="w-[30px] opacity-50">51</span>
3037
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="text-center"></p>
3038
</li>
3039
3040
<li class="flex flex-row">
3041
<span class="w-[30px] opacity-50">52</span>
3042
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-xs text-brand-faint">Si</div></p>
3043
</li>
3044
3045
<li class="flex flex-row">
3046
<span class="w-[30px] opacity-50">53</span>
3047
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-2xl font-bold text-brand-stable">14</div></p>
3048
</li>
3049
3050
<li class="flex flex-row">
3051
<span class="w-[30px] opacity-50">54</span>
3052
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-[9px] text-brand-faint uppercase tracking-widest">Stable</div></p>
3053
</li>
3054
3055
<li class="flex flex-row">
3056
<span class="w-[30px] opacity-50">55</span>
3057
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3058
</li>
3059
3060
<li class="flex flex-row">
3061
<span class="w-[30px] opacity-50">56</span>
3062
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3063
</li>
3064
3065
<li class="flex flex-row">
3066
<span class="w-[30px] opacity-50">57</span>
3067
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3068
</li>
3069
3070
<li class="flex flex-row">
3071
<span class="w-[30px] opacity-50">58</span>
3072
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3073
</li>
3074
3075
<li class="flex flex-row">
3076
<span class="w-[30px] opacity-50">59</span>
3077
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3078
</li>
3079
3080
<li class="flex flex-row">
3081
<span class="w-[30px] opacity-50">60</span>
3082
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-4 text-center"></p>
3083
</li>
3084
3085
<li class="flex flex-row">
3086
<span class="w-[30px] opacity-50">61</span>
3087
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.subscription.cta.href }}"</p>
3088
</li>
3089
3090
<li class="flex flex-row">
3091
<span class="w-[30px] opacity-50">62</span>
3092
<p class="flex w-full overflow-hidden whitespace-pre"> class="btn-stable-lg w-full justify-center"></p>
3093
</li>
3094
3095
<li class="flex flex-row">
3096
<span class="w-[30px] opacity-50">63</span>
3097
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.subscription.cta.label }}</p>
3098
</li>
3099
3100
<li class="flex flex-row">
3101
<span class="w-[30px] opacity-50">64</span>
3102
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
3103
</li>
3104
3105
<li class="flex flex-row">
3106
<span class="w-[30px] opacity-50">65</span>
3107
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="font-mono text-xs text-brand-faint">{{ strings.subscription.note }}</p></p>
3108
</li>
3109
3110
<li class="flex flex-row">
3111
<span class="w-[30px] opacity-50">66</span>
3112
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3113
</li>
3114
3115
<li class="flex flex-row">
3116
<span class="w-[30px] opacity-50">67</span>
3117
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3118
</li>
3119
3120
<li class="flex flex-row">
3121
<span class="w-[30px] opacity-50">68</span>
3122
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3123
</li>
3124
3125
<li class="flex flex-row">
3126
<span class="w-[30px] opacity-50">69</span>
3127
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3128
</li>
3129
3130
<li class="flex flex-row">
3131
<span class="w-[30px] opacity-50">70</span>
3132
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3133
</li>
3134
3135
<li class="flex flex-row">
3136
<span class="w-[30px] opacity-50">71</span>
3137
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3138
</li>
3139
3140
<li class="flex flex-row">
3141
<span class="w-[30px] opacity-50">72</span>
3142
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
3143
</li>
3144
3145
<li class="flex flex-row">
3146
<span class="w-[30px] opacity-50">73</span>
3147
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3148
</li>
3149
3150
</ul>
3151
3152
3153
<div class="absolute inset-0 bg-linear-to-l from-brand-base to-transparent"></div>
3154
</div>
3155
3156
<div class="relative flex flex-row border-r bg-brand-base border-brand-border pb-1 pt-1 w-[33px] justify-end items-start">
3157
3158
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/80"><em class="text-brand-stable">#04</em> ALL-IN-ONE WEB</span>
3159
3160
3161
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/40 italic">// bundle: web_presence — billing: flat_monthly</span>
3162
3163
</div>
3164
3165
<div class="w-full max-w-7xl mx-auto px-2 md:px-6 py-24 md:py-32 z-40">
3166
3167
3168
3169
<div class="mb-16 space-y-4 max-w-2xl">
3170
<div class="flex items-center gap-3">
3171
<span class="block w-6 h-px bg-brand-stable"></span>
3172
<p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-stable">
3173
Stable & Predictable
3174
</p>
3175
</div>
3176
<h5 class="text-3xl md:text-5xl font-bold tracking-tight text-brand-text leading-tight">
3177
The Turnkey Subscription.
3178
</h5>
3179
<p class="text-lg text-brand-muted leading-relaxed">High-end design and maintenance for a flat monthly fee. Perfect for boutiques and local businesses needing a premium presence without the upfront cost.</p>
3180
</div>
3181
3182
3183
3184
<div class="rounded-xl border border-brand-stable/30 bg-brand-surface/50 relative overflow-hidden card-glow-stable">
3185
3186
3187
<div class="absolute inset-0 bg-gradient-to-br from-brand-stable/5 via-transparent to-brand-reactive/5 pointer-events-none" aria-hidden="true"></div>
3188
3189
<div class="relative p-10 md:p-14">
3190
<div class="grid md:grid-cols-2 gap-12 items-center">
3191
3192
3193
<div class="space-y-6">
3194
<div class="flex items-center gap-3 flex-wrap">
3195
3196
<span class="px-3 py-1 rounded-full border border-brand-stable/40 bg-brand-stable/10 font-mono text-xs text-brand-stable">
3197
All-Inclusive
3198
</span>
3199
3200
<span class="px-3 py-1 rounded-full border border-brand-stable/40 bg-brand-stable/10 font-mono text-xs text-brand-stable">
3201
Flat Monthly Price
3202
</span>
3203
3204
<span class="px-3 py-1 rounded-full border border-brand-stable/40 bg-brand-stable/10 font-mono text-xs text-brand-stable">
3205
No Upfront Cost
3206
</span>
3207
3208
</span>
3209
</div>
3210
<ul class="space-y-4">
3211
3212
<li class="flex items-start gap-3">
3213
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
3214
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
3215
class="shrink-0 mt-0.5 text-brand-stable">
3216
<polyline points="20 6 9 17 4 12"/>
3217
</svg>
3218
<span class="text-sm text-brand-text leading-relaxed">Custom 10-page website design</span>
3219
</li>
3220
3221
<li class="flex items-start gap-3">
3222
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
3223
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
3224
class="shrink-0 mt-0.5 text-brand-stable">
3225
<polyline points="20 6 9 17 4 12"/>
3226
</svg>
3227
<span class="text-sm text-brand-text leading-relaxed">Professional development & hosting</span>
3228
</li>
3229
3230
<li class="flex items-start gap-3">
3231
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
3232
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
3233
class="shrink-0 mt-0.5 text-brand-stable">
3234
<polyline points="20 6 9 17 4 12"/>
3235
</svg>
3236
<span class="text-sm text-brand-text leading-relaxed">Unlimited content & image updates</span>
3237
</li>
3238
3239
<li class="flex items-start gap-3">
3240
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
3241
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
3242
class="shrink-0 mt-0.5 text-brand-stable">
3243
<polyline points="20 6 9 17 4 12"/>
3244
</svg>
3245
<span class="text-sm text-brand-text leading-relaxed">Continuous performance monitoring</span>
3246
</li>
3247
3248
<li class="flex items-start gap-3">
3249
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
3250
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
3251
class="shrink-0 mt-0.5 text-brand-stable">
3252
<polyline points="20 6 9 17 4 12"/>
3253
</svg>
3254
<span class="text-sm text-brand-text leading-relaxed">Dedicated engineering support</span>
3255
</li>
3256
3257
<li class="flex items-start gap-3">
3258
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
3259
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
3260
class="shrink-0 mt-0.5 text-brand-stable">
3261
<polyline points="20 6 9 17 4 12"/>
3262
</svg>
3263
<span class="text-sm text-brand-text leading-relaxed">Annual full design refresh</span>
3264
</li>
3265
3266
</ul>
3267
</div>
3268
3269
3270
<div class="space-y-8">
3271
3272
3273
<div class="flex items-center justify-center">
3274
<div class="relative w-40 h-40">
3275
<div class="absolute inset-0 rounded-full border border-brand-stable/20 animate-[spin_20s_linear_infinite]"></div>
3276
<div class="absolute inset-4 rounded-full border border-brand-stable/30 animate-[spin_14s_linear_infinite_reverse]"></div>
3277
<div class="absolute inset-8 rounded-full border border-brand-stable/40"></div>
3278
<div class="absolute inset-0 flex items-center justify-center">
3279
<div class="text-center">
3280
<div class="font-mono text-xs text-brand-faint">Si</div>
3281
<div class="font-mono text-2xl font-bold text-brand-stable">14</div>
3282
<div class="font-mono text-[9px] text-brand-faint uppercase tracking-widest">Stable</div>
3283
</div>
3284
</div>
3285
</div>
3286
</div>
3287
3288
<div class="space-y-4 text-center">
3289
<a href="#contact"
3290
class="btn-stable-lg w-full justify-center">
3291
Start Your Subscription
3292
</a>
3293
<p class="font-mono text-xs text-brand-faint">Plans start at $180/mo. Cancel anytime.</p>
3294
</div>
3295
3296
</div>
3297
</div>
3298
</div>
3299
</div>
3300
3301
</div>
3302
3303
<div class="relative flex flex-1 flex-col items-start justify-start overflow-hidden z-0">
3304
3305
<ul class="absolute right-0 top-0 bottom-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
3306
3307
<li class="flex flex-row">
3308
<span class="w-[30px] opacity-50">1</span>
3309
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell, sectionHeader with context %}</p>
3310
</li>
3311
3312
<li class="flex flex-row">
3313
<span class="w-[30px] opacity-50">2</span>
3314
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3315
</li>
3316
3317
<li class="flex flex-row">
3318
<span class="w-[30px] opacity-50">3</span>
3319
<p class="flex w-full overflow-hidden whitespace-pre">{# STABLE ISOTOPE — SUBSCRIPTION #}</p>
3320
</li>
3321
3322
<li class="flex flex-row">
3323
<span class="w-[30px] opacity-50">4</span>
3324
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "subscription", strings.subscription.sectionLabel, strings.subscription.sectionSublabel) %}</p>
3325
</li>
3326
3327
<li class="flex flex-row">
3328
<span class="w-[30px] opacity-50">5</span>
3329
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3330
</li>
3331
3332
<li class="flex flex-row">
3333
<span class="w-[30px] opacity-50">6</span>
3334
<p class="flex w-full overflow-hidden whitespace-pre"> {{ sectionHeader("h" ~ (sectionNum + 1), strings.subscription.eyebrow, strings.subscription.headline, strings.subscription.subtitle, accent="stable") }}</p>
3335
</li>
3336
3337
<li class="flex flex-row">
3338
<span class="w-[30px] opacity-50">7</span>
3339
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3340
</li>
3341
3342
<li class="flex flex-row">
3343
<span class="w-[30px] opacity-50">8</span>
3344
<p class="flex w-full overflow-hidden whitespace-pre"> {# Feature card #}</p>
3345
</li>
3346
3347
<li class="flex flex-row">
3348
<span class="w-[30px] opacity-50">9</span>
3349
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="rounded-xl border border-brand-stable/30 bg-brand-surface/50 relative overflow-hidden card-glow-stable"></p>
3350
</li>
3351
3352
<li class="flex flex-row">
3353
<span class="w-[30px] opacity-50">10</span>
3354
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3355
</li>
3356
3357
<li class="flex flex-row">
3358
<span class="w-[30px] opacity-50">11</span>
3359
<p class="flex w-full overflow-hidden whitespace-pre"> {# Background glow #}</p>
3360
</li>
3361
3362
<li class="flex flex-row">
3363
<span class="w-[30px] opacity-50">12</span>
3364
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 bg-gradient-to-br from-brand-stable/5 via-transparent to-brand-reactive/5 pointer-events-none" aria-hidden="true"></div></p>
3365
</li>
3366
3367
<li class="flex flex-row">
3368
<span class="w-[30px] opacity-50">13</span>
3369
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3370
</li>
3371
3372
<li class="flex flex-row">
3373
<span class="w-[30px] opacity-50">14</span>
3374
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="relative p-10 md:p-14"></p>
3375
</li>
3376
3377
<li class="flex flex-row">
3378
<span class="w-[30px] opacity-50">15</span>
3379
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid md:grid-cols-2 gap-12 items-center"></p>
3380
</li>
3381
3382
<li class="flex flex-row">
3383
<span class="w-[30px] opacity-50">16</span>
3384
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3385
</li>
3386
3387
<li class="flex flex-row">
3388
<span class="w-[30px] opacity-50">17</span>
3389
<p class="flex w-full overflow-hidden whitespace-pre"> {# Features list #}</p>
3390
</li>
3391
3392
<li class="flex flex-row">
3393
<span class="w-[30px] opacity-50">18</span>
3394
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-6"></p>
3395
</li>
3396
3397
<li class="flex flex-row">
3398
<span class="w-[30px] opacity-50">19</span>
3399
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center gap-3 flex-wrap"></p>
3400
</li>
3401
3402
<li class="flex flex-row">
3403
<span class="w-[30px] opacity-50">20</span>
3404
<p class="flex w-full overflow-hidden whitespace-pre"> {% for badge in strings.subscription.badges %} </p>
3405
</li>
3406
3407
<li class="flex flex-row">
3408
<span class="w-[30px] opacity-50">21</span>
3409
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-3 py-1 rounded-full border border-brand-stable/40 bg-brand-stable/10 font-mono text-xs text-brand-stable"></p>
3410
</li>
3411
3412
<li class="flex flex-row">
3413
<span class="w-[30px] opacity-50">22</span>
3414
<p class="flex w-full overflow-hidden whitespace-pre"> {{ badge }}</p>
3415
</li>
3416
3417
<li class="flex flex-row">
3418
<span class="w-[30px] opacity-50">23</span>
3419
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
3420
</li>
3421
3422
<li class="flex flex-row">
3423
<span class="w-[30px] opacity-50">24</span>
3424
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
3425
</li>
3426
3427
<li class="flex flex-row">
3428
<span class="w-[30px] opacity-50">25</span>
3429
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
3430
</li>
3431
3432
<li class="flex flex-row">
3433
<span class="w-[30px] opacity-50">26</span>
3434
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3435
</li>
3436
3437
<li class="flex flex-row">
3438
<span class="w-[30px] opacity-50">27</span>
3439
<p class="flex w-full overflow-hidden whitespace-pre"> <ul class="space-y-4"></p>
3440
</li>
3441
3442
<li class="flex flex-row">
3443
<span class="w-[30px] opacity-50">28</span>
3444
<p class="flex w-full overflow-hidden whitespace-pre"> {% for feature in strings.subscription.features %}</p>
3445
</li>
3446
3447
<li class="flex flex-row">
3448
<span class="w-[30px] opacity-50">29</span>
3449
<p class="flex w-full overflow-hidden whitespace-pre"> <li class="flex items-start gap-3"></p>
3450
</li>
3451
3452
<li class="flex flex-row">
3453
<span class="w-[30px] opacity-50">30</span>
3454
<p class="flex w-full overflow-hidden whitespace-pre"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"</p>
3455
</li>
3456
3457
<li class="flex flex-row">
3458
<span class="w-[30px] opacity-50">31</span>
3459
<p class="flex w-full overflow-hidden whitespace-pre"> fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"</p>
3460
</li>
3461
3462
<li class="flex flex-row">
3463
<span class="w-[30px] opacity-50">32</span>
3464
<p class="flex w-full overflow-hidden whitespace-pre"> class="shrink-0 mt-0.5 text-brand-stable"></p>
3465
</li>
3466
3467
<li class="flex flex-row">
3468
<span class="w-[30px] opacity-50">33</span>
3469
<p class="flex w-full overflow-hidden whitespace-pre"> <polyline points="20 6 9 17 4 12"/></p>
3470
</li>
3471
3472
<li class="flex flex-row">
3473
<span class="w-[30px] opacity-50">34</span>
3474
<p class="flex w-full overflow-hidden whitespace-pre"> </svg></p>
3475
</li>
3476
3477
<li class="flex flex-row">
3478
<span class="w-[30px] opacity-50">35</span>
3479
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-sm text-brand-text leading-relaxed">{{ feature }}</span></p>
3480
</li>
3481
3482
<li class="flex flex-row">
3483
<span class="w-[30px] opacity-50">36</span>
3484
<p class="flex w-full overflow-hidden whitespace-pre"> </li></p>
3485
</li>
3486
3487
<li class="flex flex-row">
3488
<span class="w-[30px] opacity-50">37</span>
3489
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
3490
</li>
3491
3492
<li class="flex flex-row">
3493
<span class="w-[30px] opacity-50">38</span>
3494
<p class="flex w-full overflow-hidden whitespace-pre"> </ul></p>
3495
</li>
3496
3497
<li class="flex flex-row">
3498
<span class="w-[30px] opacity-50">39</span>
3499
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3500
</li>
3501
3502
<li class="flex flex-row">
3503
<span class="w-[30px] opacity-50">40</span>
3504
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3505
</li>
3506
3507
<li class="flex flex-row">
3508
<span class="w-[30px] opacity-50">41</span>
3509
<p class="flex w-full overflow-hidden whitespace-pre"> {# CTA block #}</p>
3510
</li>
3511
3512
<li class="flex flex-row">
3513
<span class="w-[30px] opacity-50">42</span>
3514
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-8"></p>
3515
</li>
3516
3517
<li class="flex flex-row">
3518
<span class="w-[30px] opacity-50">43</span>
3519
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3520
</li>
3521
3522
<li class="flex flex-row">
3523
<span class="w-[30px] opacity-50">44</span>
3524
<p class="flex w-full overflow-hidden whitespace-pre"> {# Isotope visual element #}</p>
3525
</li>
3526
3527
<li class="flex flex-row">
3528
<span class="w-[30px] opacity-50">45</span>
3529
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-center"></p>
3530
</li>
3531
3532
<li class="flex flex-row">
3533
<span class="w-[30px] opacity-50">46</span>
3534
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="relative w-40 h-40"></p>
3535
</li>
3536
3537
<li class="flex flex-row">
3538
<span class="w-[30px] opacity-50">47</span>
3539
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 rounded-full border border-brand-stable/20 animate-[spin_20s_linear_infinite]"></div></p>
3540
</li>
3541
3542
<li class="flex flex-row">
3543
<span class="w-[30px] opacity-50">48</span>
3544
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-4 rounded-full border border-brand-stable/30 animate-[spin_14s_linear_infinite_reverse]"></div></p>
3545
</li>
3546
3547
<li class="flex flex-row">
3548
<span class="w-[30px] opacity-50">49</span>
3549
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-8 rounded-full border border-brand-stable/40"></div></p>
3550
</li>
3551
3552
<li class="flex flex-row">
3553
<span class="w-[30px] opacity-50">50</span>
3554
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 flex items-center justify-center"></p>
3555
</li>
3556
3557
<li class="flex flex-row">
3558
<span class="w-[30px] opacity-50">51</span>
3559
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="text-center"></p>
3560
</li>
3561
3562
<li class="flex flex-row">
3563
<span class="w-[30px] opacity-50">52</span>
3564
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-xs text-brand-faint">Si</div></p>
3565
</li>
3566
3567
<li class="flex flex-row">
3568
<span class="w-[30px] opacity-50">53</span>
3569
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-2xl font-bold text-brand-stable">14</div></p>
3570
</li>
3571
3572
<li class="flex flex-row">
3573
<span class="w-[30px] opacity-50">54</span>
3574
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-[9px] text-brand-faint uppercase tracking-widest">Stable</div></p>
3575
</li>
3576
3577
<li class="flex flex-row">
3578
<span class="w-[30px] opacity-50">55</span>
3579
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3580
</li>
3581
3582
<li class="flex flex-row">
3583
<span class="w-[30px] opacity-50">56</span>
3584
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3585
</li>
3586
3587
<li class="flex flex-row">
3588
<span class="w-[30px] opacity-50">57</span>
3589
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3590
</li>
3591
3592
<li class="flex flex-row">
3593
<span class="w-[30px] opacity-50">58</span>
3594
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3595
</li>
3596
3597
<li class="flex flex-row">
3598
<span class="w-[30px] opacity-50">59</span>
3599
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3600
</li>
3601
3602
<li class="flex flex-row">
3603
<span class="w-[30px] opacity-50">60</span>
3604
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-4 text-center"></p>
3605
</li>
3606
3607
<li class="flex flex-row">
3608
<span class="w-[30px] opacity-50">61</span>
3609
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.subscription.cta.href }}"</p>
3610
</li>
3611
3612
<li class="flex flex-row">
3613
<span class="w-[30px] opacity-50">62</span>
3614
<p class="flex w-full overflow-hidden whitespace-pre"> class="btn-stable-lg w-full justify-center"></p>
3615
</li>
3616
3617
<li class="flex flex-row">
3618
<span class="w-[30px] opacity-50">63</span>
3619
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.subscription.cta.label }}</p>
3620
</li>
3621
3622
<li class="flex flex-row">
3623
<span class="w-[30px] opacity-50">64</span>
3624
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
3625
</li>
3626
3627
<li class="flex flex-row">
3628
<span class="w-[30px] opacity-50">65</span>
3629
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="font-mono text-xs text-brand-faint">{{ strings.subscription.note }}</p></p>
3630
</li>
3631
3632
<li class="flex flex-row">
3633
<span class="w-[30px] opacity-50">66</span>
3634
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3635
</li>
3636
3637
<li class="flex flex-row">
3638
<span class="w-[30px] opacity-50">67</span>
3639
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3640
</li>
3641
3642
<li class="flex flex-row">
3643
<span class="w-[30px] opacity-50">68</span>
3644
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3645
</li>
3646
3647
<li class="flex flex-row">
3648
<span class="w-[30px] opacity-50">69</span>
3649
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3650
</li>
3651
3652
<li class="flex flex-row">
3653
<span class="w-[30px] opacity-50">70</span>
3654
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3655
</li>
3656
3657
<li class="flex flex-row">
3658
<span class="w-[30px] opacity-50">71</span>
3659
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3660
</li>
3661
3662
<li class="flex flex-row">
3663
<span class="w-[30px] opacity-50">72</span>
3664
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
3665
</li>
3666
3667
<li class="flex flex-row">
3668
<span class="w-[30px] opacity-50">73</span>
3669
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3670
</li>
3671
3672
</ul>
3673
<div class="absolute inset-0 bg-linear-to-r from-brand-base to-transparent"></div>
3674
3675
</div>
3676
</section>
3677
3678
3679
3680
3681
3682
3683
<section id="contact" class="relative border-t border-brand-border flex flex-row">
3684
<div class="relative flex flex-1 flex-row">
3685
3686
3687
<ul class="absolute inset-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
3688
3689
<li class="flex flex-row">
3690
<span class="w-[30px] opacity-50">1</span>
3691
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell with context %}</p>
3692
</li>
3693
3694
<li class="flex flex-row">
3695
<span class="w-[30px] opacity-50">2</span>
3696
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3697
</li>
3698
3699
<li class="flex flex-row">
3700
<span class="w-[30px] opacity-50">3</span>
3701
<p class="flex w-full overflow-hidden whitespace-pre">{# CONTACT #}</p>
3702
</li>
3703
3704
<li class="flex flex-row">
3705
<span class="w-[30px] opacity-50">4</span>
3706
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "contact", strings.contact.sectionLabel, strings.contact.sectionSublabel) %}</p>
3707
</li>
3708
3709
<li class="flex flex-row">
3710
<span class="w-[30px] opacity-50">5</span>
3711
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3712
</li>
3713
3714
<li class="flex flex-row">
3715
<span class="w-[30px] opacity-50">6</span>
3716
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="text-center space-y-8 max-w-3xl mx-auto"></p>
3717
</li>
3718
3719
<li class="flex flex-row">
3720
<span class="w-[30px] opacity-50">7</span>
3721
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3722
</li>
3723
3724
<li class="flex flex-row">
3725
<span class="w-[30px] opacity-50">8</span>
3726
<p class="flex w-full overflow-hidden whitespace-pre"> {# Eyebrow with lines on both sides (centred layout variant) #}</p>
3727
</li>
3728
3729
<li class="flex flex-row">
3730
<span class="w-[30px] opacity-50">9</span>
3731
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-center gap-3"></p>
3732
</li>
3733
3734
<li class="flex flex-row">
3735
<span class="w-[30px] opacity-50">10</span>
3736
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="block w-6 h-px bg-brand-reactive"></span></p>
3737
</li>
3738
3739
<li class="flex flex-row">
3740
<span class="w-[30px] opacity-50">11</span>
3741
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive"></p>
3742
</li>
3743
3744
<li class="flex flex-row">
3745
<span class="w-[30px] opacity-50">12</span>
3746
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.eyebrow }}</p>
3747
</li>
3748
3749
<li class="flex flex-row">
3750
<span class="w-[30px] opacity-50">13</span>
3751
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
3752
</li>
3753
3754
<li class="flex flex-row">
3755
<span class="w-[30px] opacity-50">14</span>
3756
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="block w-6 h-px bg-brand-reactive"></span></p>
3757
</li>
3758
3759
<li class="flex flex-row">
3760
<span class="w-[30px] opacity-50">15</span>
3761
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3762
</li>
3763
3764
<li class="flex flex-row">
3765
<span class="w-[30px] opacity-50">16</span>
3766
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3767
</li>
3768
3769
<li class="flex flex-row">
3770
<span class="w-[30px] opacity-50">17</span>
3771
<p class="flex w-full overflow-hidden whitespace-pre"> <h5 class="text-3xl md:text-5xl font-bold tracking-tight text-brand-text leading-tight"></p>
3772
</li>
3773
3774
<li class="flex flex-row">
3775
<span class="w-[30px] opacity-50">18</span>
3776
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.headline | replace("\n", "<br>") | safe }}</p>
3777
</li>
3778
3779
<li class="flex flex-row">
3780
<span class="w-[30px] opacity-50">19</span>
3781
<p class="flex w-full overflow-hidden whitespace-pre"> </h5></p>
3782
</li>
3783
3784
<li class="flex flex-row">
3785
<span class="w-[30px] opacity-50">20</span>
3786
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3787
</li>
3788
3789
<li class="flex flex-row">
3790
<span class="w-[30px] opacity-50">21</span>
3791
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="text-lg text-brand-muted leading-relaxed max-w-xl mx-auto"></p>
3792
</li>
3793
3794
<li class="flex flex-row">
3795
<span class="w-[30px] opacity-50">22</span>
3796
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.subtitle }}</p>
3797
</li>
3798
3799
<li class="flex flex-row">
3800
<span class="w-[30px] opacity-50">23</span>
3801
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
3802
</li>
3803
3804
<li class="flex flex-row">
3805
<span class="w-[30px] opacity-50">24</span>
3806
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3807
</li>
3808
3809
<li class="flex flex-row">
3810
<span class="w-[30px] opacity-50">25</span>
3811
<p class="flex w-full overflow-hidden whitespace-pre"> <div></p>
3812
</li>
3813
3814
<li class="flex flex-row">
3815
<span class="w-[30px] opacity-50">26</span>
3816
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.contact.cta.href }}"</p>
3817
</li>
3818
3819
<li class="flex flex-row">
3820
<span class="w-[30px] opacity-50">27</span>
3821
<p class="flex w-full overflow-hidden whitespace-pre"> class="group btn-outline-lg"></p>
3822
</li>
3823
3824
<li class="flex flex-row">
3825
<span class="w-[30px] opacity-50">28</span>
3826
<p class="flex w-full overflow-hidden whitespace-pre"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"</p>
3827
</li>
3828
3829
<li class="flex flex-row">
3830
<span class="w-[30px] opacity-50">29</span>
3831
<p class="flex w-full overflow-hidden whitespace-pre"> fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"</p>
3832
</li>
3833
3834
<li class="flex flex-row">
3835
<span class="w-[30px] opacity-50">30</span>
3836
<p class="flex w-full overflow-hidden whitespace-pre"> class="shrink-0"></p>
3837
</li>
3838
3839
<li class="flex flex-row">
3840
<span class="w-[30px] opacity-50">31</span>
3841
<p class="flex w-full overflow-hidden whitespace-pre"> <rect x="2" y="4" width="20" height="16" rx="2"/></p>
3842
</li>
3843
3844
<li class="flex flex-row">
3845
<span class="w-[30px] opacity-50">32</span>
3846
<p class="flex w-full overflow-hidden whitespace-pre"> <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></p>
3847
</li>
3848
3849
<li class="flex flex-row">
3850
<span class="w-[30px] opacity-50">33</span>
3851
<p class="flex w-full overflow-hidden whitespace-pre"> </svg></p>
3852
</li>
3853
3854
<li class="flex flex-row">
3855
<span class="w-[30px] opacity-50">34</span>
3856
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.cta.label }}</p>
3857
</li>
3858
3859
<li class="flex flex-row">
3860
<span class="w-[30px] opacity-50">35</span>
3861
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
3862
</li>
3863
3864
<li class="flex flex-row">
3865
<span class="w-[30px] opacity-50">36</span>
3866
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3867
</li>
3868
3869
<li class="flex flex-row">
3870
<span class="w-[30px] opacity-50">37</span>
3871
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3872
</li>
3873
3874
<li class="flex flex-row">
3875
<span class="w-[30px] opacity-50">38</span>
3876
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3877
</li>
3878
3879
<li class="flex flex-row">
3880
<span class="w-[30px] opacity-50">39</span>
3881
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3882
</li>
3883
3884
<li class="flex flex-row">
3885
<span class="w-[30px] opacity-50">40</span>
3886
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
3887
</li>
3888
3889
<li class="flex flex-row">
3890
<span class="w-[30px] opacity-50">41</span>
3891
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3892
</li>
3893
3894
</ul>
3895
3896
3897
<div class="absolute inset-0 bg-linear-to-l from-brand-base to-transparent"></div>
3898
</div>
3899
3900
<div class="relative flex flex-row border-r bg-brand-base border-brand-border pb-1 pt-1 w-[33px] justify-end items-start">
3901
3902
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/80"><em class="text-brand-stable">#05</em> CONTACT</span>
3903
3904
3905
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/40 italic">// new Thread({skipSalesReps: true, engineers: true})</span>
3906
3907
</div>
3908
3909
<div class="w-full max-w-7xl mx-auto px-2 md:px-6 py-24 md:py-32 z-40">
3910
3911
3912
<div class="text-center space-y-8 max-w-3xl mx-auto">
3913
3914
3915
<div class="flex items-center justify-center gap-3">
3916
<span class="block w-6 h-px bg-brand-reactive"></span>
3917
<p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive">
3918
Initiate Synthesis
3919
</p>
3920
<span class="block w-6 h-px bg-brand-reactive"></span>
3921
</div>
3922
3923
<h5 class="text-3xl md:text-5xl font-bold tracking-tight text-brand-text leading-tight">
3924
Ready to build<br>something stable?
3925
</h5>
3926
3927
<p class="text-lg text-brand-muted leading-relaxed max-w-xl mx-auto">
3928
Reach out directly for a technical consultation. No sales reps, just engineers.
3929
</p>
3930
3931
<div>
3932
<a href="mailto:hello@isotopic.dev"
3933
class="group btn-outline-lg">
3934
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
3935
fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
3936
class="shrink-0">
3937
<rect x="2" y="4" width="20" height="16" rx="2"/>
3938
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
3939
</svg>
3940
hello@isotopic.dev
3941
</a>
3942
</div>
3943
3944
</div>
3945
3946
3947
</div>
3948
3949
<div class="relative flex flex-1 flex-col items-start justify-start overflow-hidden z-0">
3950
3951
<ul class="absolute right-0 top-0 bottom-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
3952
3953
<li class="flex flex-row">
3954
<span class="w-[30px] opacity-50">1</span>
3955
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell with context %}</p>
3956
</li>
3957
3958
<li class="flex flex-row">
3959
<span class="w-[30px] opacity-50">2</span>
3960
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3961
</li>
3962
3963
<li class="flex flex-row">
3964
<span class="w-[30px] opacity-50">3</span>
3965
<p class="flex w-full overflow-hidden whitespace-pre">{# CONTACT #}</p>
3966
</li>
3967
3968
<li class="flex flex-row">
3969
<span class="w-[30px] opacity-50">4</span>
3970
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "contact", strings.contact.sectionLabel, strings.contact.sectionSublabel) %}</p>
3971
</li>
3972
3973
<li class="flex flex-row">
3974
<span class="w-[30px] opacity-50">5</span>
3975
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3976
</li>
3977
3978
<li class="flex flex-row">
3979
<span class="w-[30px] opacity-50">6</span>
3980
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="text-center space-y-8 max-w-3xl mx-auto"></p>
3981
</li>
3982
3983
<li class="flex flex-row">
3984
<span class="w-[30px] opacity-50">7</span>
3985
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3986
</li>
3987
3988
<li class="flex flex-row">
3989
<span class="w-[30px] opacity-50">8</span>
3990
<p class="flex w-full overflow-hidden whitespace-pre"> {# Eyebrow with lines on both sides (centred layout variant) #}</p>
3991
</li>
3992
3993
<li class="flex flex-row">
3994
<span class="w-[30px] opacity-50">9</span>
3995
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-center gap-3"></p>
3996
</li>
3997
3998
<li class="flex flex-row">
3999
<span class="w-[30px] opacity-50">10</span>
4000
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="block w-6 h-px bg-brand-reactive"></span></p>
4001
</li>
4002
4003
<li class="flex flex-row">
4004
<span class="w-[30px] opacity-50">11</span>
4005
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive"></p>
4006
</li>
4007
4008
<li class="flex flex-row">
4009
<span class="w-[30px] opacity-50">12</span>
4010
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.eyebrow }}</p>
4011
</li>
4012
4013
<li class="flex flex-row">
4014
<span class="w-[30px] opacity-50">13</span>
4015
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
4016
</li>
4017
4018
<li class="flex flex-row">
4019
<span class="w-[30px] opacity-50">14</span>
4020
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="block w-6 h-px bg-brand-reactive"></span></p>
4021
</li>
4022
4023
<li class="flex flex-row">
4024
<span class="w-[30px] opacity-50">15</span>
4025
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
4026
</li>
4027
4028
<li class="flex flex-row">
4029
<span class="w-[30px] opacity-50">16</span>
4030
<p class="flex w-full overflow-hidden whitespace-pre"></p>
4031
</li>
4032
4033
<li class="flex flex-row">
4034
<span class="w-[30px] opacity-50">17</span>
4035
<p class="flex w-full overflow-hidden whitespace-pre"> <h5 class="text-3xl md:text-5xl font-bold tracking-tight text-brand-text leading-tight"></p>
4036
</li>
4037
4038
<li class="flex flex-row">
4039
<span class="w-[30px] opacity-50">18</span>
4040
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.headline | replace("\n", "<br>") | safe }}</p>
4041
</li>
4042
4043
<li class="flex flex-row">
4044
<span class="w-[30px] opacity-50">19</span>
4045
<p class="flex w-full overflow-hidden whitespace-pre"> </h5></p>
4046
</li>
4047
4048
<li class="flex flex-row">
4049
<span class="w-[30px] opacity-50">20</span>
4050
<p class="flex w-full overflow-hidden whitespace-pre"></p>
4051
</li>
4052
4053
<li class="flex flex-row">
4054
<span class="w-[30px] opacity-50">21</span>
4055
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="text-lg text-brand-muted leading-relaxed max-w-xl mx-auto"></p>
4056
</li>
4057
4058
<li class="flex flex-row">
4059
<span class="w-[30px] opacity-50">22</span>
4060
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.subtitle }}</p>
4061
</li>
4062
4063
<li class="flex flex-row">
4064
<span class="w-[30px] opacity-50">23</span>
4065
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
4066
</li>
4067
4068
<li class="flex flex-row">
4069
<span class="w-[30px] opacity-50">24</span>
4070
<p class="flex w-full overflow-hidden whitespace-pre"></p>
4071
</li>
4072
4073
<li class="flex flex-row">
4074
<span class="w-[30px] opacity-50">25</span>
4075
<p class="flex w-full overflow-hidden whitespace-pre"> <div></p>
4076
</li>
4077
4078
<li class="flex flex-row">
4079
<span class="w-[30px] opacity-50">26</span>
4080
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.contact.cta.href }}"</p>
4081
</li>
4082
4083
<li class="flex flex-row">
4084
<span class="w-[30px] opacity-50">27</span>
4085
<p class="flex w-full overflow-hidden whitespace-pre"> class="group btn-outline-lg"></p>
4086
</li>
4087
4088
<li class="flex flex-row">
4089
<span class="w-[30px] opacity-50">28</span>
4090
<p class="flex w-full overflow-hidden whitespace-pre"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"</p>
4091
</li>
4092
4093
<li class="flex flex-row">
4094
<span class="w-[30px] opacity-50">29</span>
4095
<p class="flex w-full overflow-hidden whitespace-pre"> fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"</p>
4096
</li>
4097
4098
<li class="flex flex-row">
4099
<span class="w-[30px] opacity-50">30</span>
4100
<p class="flex w-full overflow-hidden whitespace-pre"> class="shrink-0"></p>
4101
</li>
4102
4103
<li class="flex flex-row">
4104
<span class="w-[30px] opacity-50">31</span>
4105
<p class="flex w-full overflow-hidden whitespace-pre"> <rect x="2" y="4" width="20" height="16" rx="2"/></p>
4106
</li>
4107
4108
<li class="flex flex-row">
4109
<span class="w-[30px] opacity-50">32</span>
4110
<p class="flex w-full overflow-hidden whitespace-pre"> <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></p>
4111
</li>
4112
4113
<li class="flex flex-row">
4114
<span class="w-[30px] opacity-50">33</span>
4115
<p class="flex w-full overflow-hidden whitespace-pre"> </svg></p>
4116
</li>
4117
4118
<li class="flex flex-row">
4119
<span class="w-[30px] opacity-50">34</span>
4120
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.cta.label }}</p>
4121
</li>
4122
4123
<li class="flex flex-row">
4124
<span class="w-[30px] opacity-50">35</span>
4125
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
4126
</li>
4127
4128
<li class="flex flex-row">
4129
<span class="w-[30px] opacity-50">36</span>
4130
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
4131
</li>
4132
4133
<li class="flex flex-row">
4134
<span class="w-[30px] opacity-50">37</span>
4135
<p class="flex w-full overflow-hidden whitespace-pre"></p>
4136
</li>
4137
4138
<li class="flex flex-row">
4139
<span class="w-[30px] opacity-50">38</span>
4140
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
4141
</li>
4142
4143
<li class="flex flex-row">
4144
<span class="w-[30px] opacity-50">39</span>
4145
<p class="flex w-full overflow-hidden whitespace-pre"></p>
4146
</li>
4147
4148
<li class="flex flex-row">
4149
<span class="w-[30px] opacity-50">40</span>
4150
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
4151
</li>
4152
4153
<li class="flex flex-row">
4154
<span class="w-[30px] opacity-50">41</span>
4155
<p class="flex w-full overflow-hidden whitespace-pre"></p>
4156
</li>
4157
4158
</ul>
4159
<div class="absolute inset-0 bg-linear-to-r from-brand-base to-transparent"></div>
4160
4161
</div>
4162
</section>
4163
4164
4165
4166
<footer class="border-t border-brand-border py-12">
4167
<div class="max-w-7xl mx-auto px-6">
4168
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
4169
4170
4171
<div class="flex items-center gap-4">
4172
<a href="/" class="flex items-center" aria-label="isotopic.dev home">
4173
<span class="font-mono text-sm font-medium text-brand-text">isotopic</span>
4174
<span class="font-mono text-sm text-brand-reactive">.dev</span>
4175
</a>
4176
<span class="hidden md:block w-px h-4 bg-brand-border" aria-hidden="true"></span>
4177
<span class="font-mono text-xs text-brand-faint">Agency-grade engineering. Boutique-level agility.</span>
4178
</div>
4179
4180
4181
<ul class="flex items-center gap-6">
4182
4183
<li>
4184
<a href="/privacy" class="font-mono text-xs text-brand-faint hover:text-brand-muted transition-colors">
4185
Privacy
4186
</a>
4187
</li>
4188
4189
<li>
4190
<a href="/terms" class="font-mono text-xs text-brand-faint hover:text-brand-muted transition-colors">
4191
Terms
4192
</a>
4193
</li>
4194
4195
</ul>
4196
4197
4198
<div class="flex items-center gap-4">
4199
<p class="font-mono text-xs text-brand-faint">
4201
</p>
4202
<button id="theme-toggle"
4203
class="text-brand-faint hover:text-brand-muted transition-colors p-1 rounded"
4204
aria-label="Switch to light mode">
4205
<svg class="theme-icon-sun" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
4206
fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
4207
<circle cx="12" cy="12" r="4"/>
4208
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
4209
</svg>
4210
<svg class="theme-icon-moon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
4211
fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
4212
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
4213
</svg>
4214
</button>
4215
</div>
4216
4217
</div>
4218
</div>
4219
</footer>
4220
4221
<script>
4222
document.getElementById('year').textContent = new Date().getFullYear();
4223
</script>
4224
4225
</main>
4226
4227
</div>
4228
4229
<script src="/assets/scripts/theme.js" defer></script>
4230
</body>
4231
</html>
4232

1
<!DOCTYPE html>
2
<html lang="en" class="scroll-smooth">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6
<meta name="mobile-web-app-capable" content="yes">
7
<meta name="apple-mobile-web-app-capable" content="yes">
8
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
9
<title>Engineering with Atomic Precision — isotopic.dev</title>
10
<meta name="description" content="Premium web and mobile development. Agency-grade quality with boutique agility.">
11
<meta property="og:title" content="isotopic.dev">
12
<meta property="og:description" content="Premium web and mobile development. Agency-grade quality with boutique agility.">
13
<meta property="og:url" content="https://isotopic.dev">
14
<meta name="twitter:card" content="summary_large_image">
15
16
17
<link rel="preconnect" href="https://fonts.googleapis.com">
18
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
19
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
20
21
<link rel="stylesheet" href="/assets/styles/index.css">
22
23
24
<script>
25
(function () {
26
if (localStorage.getItem('isotopic-theme') === 'light') {
27
document.documentElement.classList.add('light');
28
}
29
})();
30
</script>
31
</head>
32
<body class="bg-brand-base text-brand-text font-sans antialiased">
33
34
<div class="bg-grid-overlay fixed inset-0 bg-grid opacity-[0.04] pointer-events-none z-0" aria-hidden="true"></div>
35
36
37
<div class="relative z-10">
38
<main class="relative">
39
40
41
42
<header class="sticky top-0 left-0 right-0 z-50 border-b border-brand-border bg-brand-base/80 backdrop-blur-xl">
43
<nav class="max-w-7xl mx-auto px-2 md:px-6 h-(--header-height) flex items-center justify-between">
44
45
46
<a href="/" class="flex items-center gap-0 group" aria-label="isotopic.dev home">
47
<span class="font-mono text-sm font-medium text-brand-text group-hover:text-brand-reactive transition-colors">
48
isotopic
49
</span>
50
<span class="font-mono text-sm text-brand-reactive">.dev</span>
51
</a>
52
53
<div class="flex items-center gap-8">
54
55
<ul class="hidden md:flex items-center gap-8">
56
57
<li>
58
<a href="#difference"
59
class="font-mono text-xs uppercase tracking-widest text-brand-muted hover:text-brand-text transition-colors">
60
The Difference
61
</a>
62
</li>
63
64
<li>
65
<a href="#services"
66
class="font-mono text-xs uppercase tracking-widest text-brand-muted hover:text-brand-text transition-colors">
67
Services
68
</a>
69
</li>
70
71
<li>
72
<a href="#subscription"
73
class="font-mono text-xs uppercase tracking-widest text-brand-muted hover:text-brand-text transition-colors">
74
Subscription
75
</a>
76
</li>
77
78
</ul>
79
80
81
<a href="#contact"
82
class="max-md:hidden btn-outline-sm">
83
Start a Project
84
</a>
85
86
87
<button id="mobile-menu-toggle"
88
class="md:hidden text-brand-muted hover:text-brand-text transition-colors p-1"
89
aria-label="Open menu"
90
aria-expanded="false"
91
aria-controls="mobile-menu">
92
93
<svg id="icon-hamburger" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
94
stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
95
<line x1="3" y1="6" x2="21" y2="6"/>
96
<line x1="3" y1="12" x2="21" y2="12"/>
97
<line x1="3" y1="18" x2="21" y2="18"/>
98
</svg>
99
100
<svg id="icon-close" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
101
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" class="hidden">
102
<line x1="18" y1="6" x2="6" y2="18"/>
103
<line x1="6" y1="6" x2="18" y2="18"/>
104
</svg>
105
</button>
106
</div>
107
108
</nav>
109
110
111
<div id="mobile-menu"
112
class="md:hidden hidden border-t border-brand-border">
113
<ul class="flex flex-col px-6 py-4 gap-1">
114
115
<li>
116
<a href="#difference"
117
class="block font-mono text-xs uppercase tracking-widest text-brand-muted hover:text-brand-text transition-colors py-3 border-b border-brand-border/50 last:border-0">
118
The Difference
119
</a>
120
</li>
121
122
<li>
123
<a href="#services"
124
class="block font-mono text-xs uppercase tracking-widest text-brand-muted hover:text-brand-text transition-colors py-3 border-b border-brand-border/50 last:border-0">
125
Services
126
</a>
127
</li>
128
129
<li>
130
<a href="#subscription"
131
class="block font-mono text-xs uppercase tracking-widest text-brand-muted hover:text-brand-text transition-colors py-3 border-b border-brand-border/50 last:border-0">
132
Subscription
133
</a>
134
</li>
135
136
</ul>
137
<div class="px-6 pb-5">
138
<a href="#contact" class="btn-outline-sm w-full justify-center">
139
Start a Project
140
</a>
141
</div>
142
</div>
143
</header>
144
145
<script>
146
(function () {
147
var toggle = document.getElementById('mobile-menu-toggle');
148
var menu = document.getElementById('mobile-menu');
149
var hamburger = document.getElementById('icon-hamburger');
150
var close = document.getElementById('icon-close');
151
152
toggle.addEventListener('click', function () {
153
var isOpen = !menu.classList.contains('hidden');
154
menu.classList.toggle('hidden', isOpen);
155
hamburger.classList.toggle('hidden', !isOpen);
156
close.classList.toggle('hidden', isOpen);
157
toggle.setAttribute('aria-expanded', String(!isOpen));
158
toggle.setAttribute('aria-label', isOpen ? 'Open menu' : 'Close menu');
159
});
160
161
// Close when a nav link is tapped
162
menu.querySelectorAll('a').forEach(function (a) {
163
a.addEventListener('click', function () {
164
menu.classList.add('hidden');
165
hamburger.classList.remove('hidden');
166
close.classList.add('hidden');
167
toggle.setAttribute('aria-expanded', 'false');
168
toggle.setAttribute('aria-label', 'Open menu');
169
});
170
});
171
})();
172
</script>
173
174
175
176
177
178
<section id="hero" class="relative border-t border-brand-border flex flex-row">
179
<div class="relative flex flex-1 flex-row">
180
181
182
<ul class="absolute inset-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
183
184
<li class="flex flex-row">
185
<span class="w-[30px] opacity-50">1</span>
186
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell with context %}</p>
187
</li>
188
189
<li class="flex flex-row">
190
<span class="w-[30px] opacity-50">2</span>
191
<p class="flex w-full overflow-hidden whitespace-pre"></p>
192
</li>
193
194
<li class="flex flex-row">
195
<span class="w-[30px] opacity-50">3</span>
196
<p class="flex w-full overflow-hidden whitespace-pre">{# HERO</p>
197
</li>
198
199
<li class="flex flex-row">
200
<span class="w-[30px] opacity-50">4</span>
201
<p class="flex w-full overflow-hidden whitespace-pre"> #}</p>
202
</li>
203
204
<li class="flex flex-row">
205
<span class="w-[30px] opacity-50">5</span>
206
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "hero", strings.hero.sectionLabel, strings.hero.sectionSublabel) %}</p>
207
</li>
208
209
<li class="flex flex-row">
210
<span class="w-[30px] opacity-50">6</span>
211
<p class="flex w-full overflow-hidden whitespace-pre"></p>
212
</li>
213
214
<li class="flex flex-row">
215
<span class="w-[30px] opacity-50">7</span>
216
<p class="flex w-full overflow-hidden whitespace-pre"> {# Gradient orbs — isolated overflow wrapper prevents mobile bleed</p>
217
</li>
218
219
<li class="flex flex-row">
220
<span class="w-[30px] opacity-50">8</span>
221
<p class="flex w-full overflow-hidden whitespace-pre"> without affecting sticky siblings in sectionShell #}</p>
222
</li>
223
224
<li class="flex flex-row">
225
<span class="w-[30px] opacity-50">9</span>
226
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true"></p>
227
</li>
228
229
<li class="flex flex-row">
230
<span class="w-[30px] opacity-50">10</span>
231
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="hero-orb w-[600px] h-[600px] bg-brand-reactive/8 top-[-150px] left-[-200px]"></div></p>
232
</li>
233
234
<li class="flex flex-row">
235
<span class="w-[30px] opacity-50">11</span>
236
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="hero-orb w-[400px] h-[400px] bg-brand-stable/8 bottom-[-100px] right-[-100px]"></div></p>
237
</li>
238
239
<li class="flex flex-row">
240
<span class="w-[30px] opacity-50">12</span>
241
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
242
</li>
243
244
<li class="flex flex-row">
245
<span class="w-[30px] opacity-50">13</span>
246
<p class="flex w-full overflow-hidden whitespace-pre"></p>
247
</li>
248
249
<li class="flex flex-row">
250
<span class="w-[30px] opacity-50">14</span>
251
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="max-w-7xl mx-auto w-full"></p>
252
</li>
253
254
<li class="flex flex-row">
255
<span class="w-[30px] opacity-50">15</span>
256
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid lg:grid-cols-2 gap-16 items-center"></p>
257
</li>
258
259
<li class="flex flex-row">
260
<span class="w-[30px] opacity-50">16</span>
261
<p class="flex w-full overflow-hidden whitespace-pre"></p>
262
</li>
263
264
<li class="flex flex-row">
265
<span class="w-[30px] opacity-50">17</span>
266
<p class="flex w-full overflow-hidden whitespace-pre"> {# Hero copy #}</p>
267
</li>
268
269
<li class="flex flex-row">
270
<span class="w-[30px] opacity-50">18</span>
271
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-8"></p>
272
</li>
273
274
<li class="flex flex-row">
275
<span class="w-[30px] opacity-50">19</span>
276
<p class="flex w-full overflow-hidden whitespace-pre"></p>
277
</li>
278
279
<li class="flex flex-row">
280
<span class="w-[30px] opacity-50">20</span>
281
<p class="flex w-full overflow-hidden whitespace-pre"> {# Eyebrow #}</p>
282
</li>
283
284
<li class="flex flex-row">
285
<span class="w-[30px] opacity-50">21</span>
286
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center gap-3"></p>
287
</li>
288
289
<li class="flex flex-row">
290
<span class="w-[30px] opacity-50">22</span>
291
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="block w-8 h-px bg-brand-reactive"></span></p>
292
</li>
293
294
<li class="flex flex-row">
295
<span class="w-[30px] opacity-50">23</span>
296
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive"></p>
297
</li>
298
299
<li class="flex flex-row">
300
<span class="w-[30px] opacity-50">24</span>
301
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.eyebrow }}</p>
302
</li>
303
304
<li class="flex flex-row">
305
<span class="w-[30px] opacity-50">25</span>
306
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
307
</li>
308
309
<li class="flex flex-row">
310
<span class="w-[30px] opacity-50">26</span>
311
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
312
</li>
313
314
<li class="flex flex-row">
315
<span class="w-[30px] opacity-50">27</span>
316
<p class="flex w-full overflow-hidden whitespace-pre"></p>
317
</li>
318
319
<li class="flex flex-row">
320
<span class="w-[30px] opacity-50">28</span>
321
<p class="flex w-full overflow-hidden whitespace-pre"> {# Headline #}</p>
322
</li>
323
324
<li class="flex flex-row">
325
<span class="w-[30px] opacity-50">29</span>
326
<p class="flex w-full overflow-hidden whitespace-pre"> <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.05]"></p>
327
</li>
328
329
<li class="flex flex-row">
330
<span class="w-[30px] opacity-50">30</span>
331
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-brand-text">{{ strings.hero.headline }}</span></p>
332
</li>
333
334
<li class="flex flex-row">
335
<span class="w-[30px] opacity-50">31</span>
336
<p class="flex w-full overflow-hidden whitespace-pre"> <br></p>
337
</li>
338
339
<li class="flex flex-row">
340
<span class="w-[30px] opacity-50">32</span>
341
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-brand-reactive">{{ strings.hero.headlineAccent }}</span></p>
342
</li>
343
344
<li class="flex flex-row">
345
<span class="w-[30px] opacity-50">33</span>
346
<p class="flex w-full overflow-hidden whitespace-pre"> </h1></p>
347
</li>
348
349
<li class="flex flex-row">
350
<span class="w-[30px] opacity-50">34</span>
351
<p class="flex w-full overflow-hidden whitespace-pre"></p>
352
</li>
353
354
<li class="flex flex-row">
355
<span class="w-[30px] opacity-50">35</span>
356
<p class="flex w-full overflow-hidden whitespace-pre"> {# Subtitle #}</p>
357
</li>
358
359
<li class="flex flex-row">
360
<span class="w-[30px] opacity-50">36</span>
361
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="text-lg text-brand-muted max-w-lg leading-relaxed"></p>
362
</li>
363
364
<li class="flex flex-row">
365
<span class="w-[30px] opacity-50">37</span>
366
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.subtitle }}</p>
367
</li>
368
369
<li class="flex flex-row">
370
<span class="w-[30px] opacity-50">38</span>
371
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
372
</li>
373
374
<li class="flex flex-row">
375
<span class="w-[30px] opacity-50">39</span>
376
<p class="flex w-full overflow-hidden whitespace-pre"></p>
377
</li>
378
379
<li class="flex flex-row">
380
<span class="w-[30px] opacity-50">40</span>
381
<p class="flex w-full overflow-hidden whitespace-pre"> {# CTAs #}</p>
382
</li>
383
384
<li class="flex flex-row">
385
<span class="w-[30px] opacity-50">41</span>
386
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex flex-wrap items-center gap-4 pt-2"></p>
387
</li>
388
389
<li class="flex flex-row">
390
<span class="w-[30px] opacity-50">42</span>
391
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.hero.ctaPrimary.href }}"</p>
392
</li>
393
394
<li class="flex flex-row">
395
<span class="w-[30px] opacity-50">43</span>
396
<p class="flex w-full overflow-hidden whitespace-pre"> class="btn-reactive-md"></p>
397
</li>
398
399
<li class="flex flex-row">
400
<span class="w-[30px] opacity-50">44</span>
401
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.ctaPrimary.label }}</p>
402
</li>
403
404
<li class="flex flex-row">
405
<span class="w-[30px] opacity-50">45</span>
406
<p class="flex w-full overflow-hidden whitespace-pre"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"</p>
407
</li>
408
409
<li class="flex flex-row">
410
<span class="w-[30px] opacity-50">46</span>
411
<p class="flex w-full overflow-hidden whitespace-pre"> fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></p>
412
</li>
413
414
<li class="flex flex-row">
415
<span class="w-[30px] opacity-50">47</span>
416
<p class="flex w-full overflow-hidden whitespace-pre"> <path d="M5 12h14M12 5l7 7-7 7"/></p>
417
</li>
418
419
<li class="flex flex-row">
420
<span class="w-[30px] opacity-50">48</span>
421
<p class="flex w-full overflow-hidden whitespace-pre"> </svg></p>
422
</li>
423
424
<li class="flex flex-row">
425
<span class="w-[30px] opacity-50">49</span>
426
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
427
</li>
428
429
<li class="flex flex-row">
430
<span class="w-[30px] opacity-50">50</span>
431
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.hero.ctaSecondary.href }}"</p>
432
</li>
433
434
<li class="flex flex-row">
435
<span class="w-[30px] opacity-50">51</span>
436
<p class="flex w-full overflow-hidden whitespace-pre"> class="btn-ghost-md"></p>
437
</li>
438
439
<li class="flex flex-row">
440
<span class="w-[30px] opacity-50">52</span>
441
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.ctaSecondary.label }}</p>
442
</li>
443
444
<li class="flex flex-row">
445
<span class="w-[30px] opacity-50">53</span>
446
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
447
</li>
448
449
<li class="flex flex-row">
450
<span class="w-[30px] opacity-50">54</span>
451
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
452
</li>
453
454
<li class="flex flex-row">
455
<span class="w-[30px] opacity-50">55</span>
456
<p class="flex w-full overflow-hidden whitespace-pre"></p>
457
</li>
458
459
<li class="flex flex-row">
460
<span class="w-[30px] opacity-50">56</span>
461
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
462
</li>
463
464
<li class="flex flex-row">
465
<span class="w-[30px] opacity-50">57</span>
466
<p class="flex w-full overflow-hidden whitespace-pre"></p>
467
</li>
468
469
<li class="flex flex-row">
470
<span class="w-[30px] opacity-50">58</span>
471
<p class="flex w-full overflow-hidden whitespace-pre"> {# Live Terminal #}</p>
472
</li>
473
474
<li class="flex flex-row">
475
<span class="w-[30px] opacity-50">59</span>
476
<p class="flex w-full overflow-hidden whitespace-pre"> {% include "components/terminal.njk" %}</p>
477
</li>
478
479
<li class="flex flex-row">
480
<span class="w-[30px] opacity-50">60</span>
481
<p class="flex w-full overflow-hidden whitespace-pre"></p>
482
</li>
483
484
<li class="flex flex-row">
485
<span class="w-[30px] opacity-50">61</span>
486
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
487
</li>
488
489
<li class="flex flex-row">
490
<span class="w-[30px] opacity-50">62</span>
491
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
492
</li>
493
494
<li class="flex flex-row">
495
<span class="w-[30px] opacity-50">63</span>
496
<p class="flex w-full overflow-hidden whitespace-pre"></p>
497
</li>
498
499
<li class="flex flex-row">
500
<span class="w-[30px] opacity-50">64</span>
501
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
502
</li>
503
504
<li class="flex flex-row">
505
<span class="w-[30px] opacity-50">65</span>
506
<p class="flex w-full overflow-hidden whitespace-pre"></p>
507
</li>
508
509
</ul>
510
511
512
<div class="absolute inset-0 bg-linear-to-l from-brand-base to-transparent"></div>
513
</div>
514
515
<div class="relative flex flex-row border-r bg-brand-base border-brand-border pb-1 pt-1 w-[33px] justify-end items-start">
516
517
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/80"><em class="text-brand-stable">#01</em> hero</span>
518
519
520
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/40 italic">// entry_point: above_fold — first render</span>
521
522
</div>
523
524
<div class="w-full max-w-7xl mx-auto px-2 md:px-6 py-24 md:py-32 z-40">
525
526
527
528
<div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
529
<div class="hero-orb w-[600px] h-[600px] bg-brand-reactive/8 top-[-150px] left-[-200px]"></div>
530
<div class="hero-orb w-[400px] h-[400px] bg-brand-stable/8 bottom-[-100px] right-[-100px]"></div>
531
</div>
532
533
<div class="max-w-7xl mx-auto w-full">
534
<div class="grid lg:grid-cols-2 gap-16 items-center">
535
536
537
<div class="space-y-8">
538
539
540
<div class="flex items-center gap-3">
541
<span class="block w-8 h-px bg-brand-reactive"></span>
542
<p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive">
543
ENGINEERING WITH ATOMIC PRECISION
544
</p>
545
</div>
546
547
548
<h1 class="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.05]">
549
<span class="text-brand-text">Same DNA.</span>
550
<br>
551
<span class="text-brand-reactive">Different Mass.</span>
552
</h1>
553
554
555
<p class="text-lg text-brand-muted max-w-lg leading-relaxed">
556
We build high-performance digital products using the same elite standards as global agencies—minus the bureaucratic bloat and overhead.
557
</p>
558
559
560
<div class="flex flex-wrap items-center gap-4 pt-2">
561
<a href="#contact"
562
class="btn-reactive-md">
563
Start a Project
564
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
565
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
566
<path d="M5 12h14M12 5l7 7-7 7"/>
567
</svg>
568
</a>
569
<a href="#services"
570
class="btn-ghost-md">
571
Our Services
572
</a>
573
</div>
574
575
</div>
576
577
578
579
<div class="relative h-full transition-all duration-300 ease-in-out flex flex-1 justify-center items-center">
580
<div class="rounded-lg border border-brand-border bg-brand-surface/60 backdrop-blur-sm overflow-hidden shadow-2xl flex flex-col flex-1 -translate-x-11">
581
582
583
<div class="flex items-center justify-between px-4 py-3 border-b border-brand-border bg-brand-elevated/50">
584
<div class="flex items-center gap-2">
585
<span class="w-2.5 h-2.5 rounded-full bg-brand-danger/70"></span>
586
<span class="w-2.5 h-2.5 rounded-full bg-brand-warn/70"></span>
587
<span class="w-2.5 h-2.5 rounded-full bg-brand-reactive/70"></span>
588
</div>
589
<span class="font-mono text-xs text-brand-faint cursor-default">isotopic ~ deploy</span>
590
<div class="w-14"></div>
591
</div>
592
593
594
<div id="terminal-body" class="px-4 py-4 overflow-hidden flex flex-col justify-start transition-[height] duration-300 ease-out">
595
<div id="terminal-output" class="space-y-1"></div>
596
<div id="terminal-cursor-row" class="flex items-center gap-2 mt-1">
597
<span class="font-mono text-xs leading-relaxed text-brand-reactive cursor-default">$</span>
598
<span id="terminal-cursor" class="cursor-blink leading-relaxed cursor-default"></span>
599
</div>
600
</div>
601
602
</div>
603
604
605
<div
606
id="browser-popup"
607
class="absolute top-5 left-5 right-0 bottom-0 z-20 flex flex-col rounded-lg border border-brand-border bg-brand-surface overflow-hidden browser-popup"
608
style="box-shadow: 0 12px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);"
609
aria-hidden="true"
610
>
611
612
613
<div class="flex items-center gap-3 px-4 py-2.5 border-b border-brand-border bg-brand-elevated/80 shrink-0">
614
615
616
<div class="flex items-center gap-1.5 shrink-0">
617
<span class="w-2.5 h-2.5 rounded-full bg-brand-danger/70"></span>
618
<span class="w-2.5 h-2.5 rounded-full bg-brand-warn/70"></span>
619
<span class="w-2.5 h-2.5 rounded-full bg-brand-reactive/70"></span>
620
</div>
621
622
623
<div class="flex items-center gap-0.5 text-brand-faint shrink-0">
624
<span class="p-1 cursor-default select-none">
625
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
626
</span>
627
<span class="p-1 cursor-default select-none opacity-35">
628
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
629
</span>
630
<span class="p-1 cursor-default select-none">
631
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
632
</span>
633
</div>
634
635
636
<div class="flex-1 flex items-center gap-1.5 px-3 py-1 rounded-md bg-brand-base/60 border border-brand-border min-w-0">
637
<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-brand-reactive shrink-0"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
638
<span id="browser-url" class="font-mono text-xs text-brand-muted truncate">cove.store</span>
639
</div>
640
641
</div>
642
643
644
<div id="browser-viewport" class="flex-1 flex flex-col bg-stone-50 relative overflow-hidden select-none">
645
646
647
<div class="shrink-0 bg-white border-b border-stone-200 flex items-center justify-between px-4 py-1.5">
648
<span class="text-[11px] font-bold tracking-[0.28em] uppercase text-stone-900 cursor-default">COVE</span>
649
<div class="hidden sm:flex items-center gap-3 text-[8px] uppercase tracking-widest text-stone-500 font-medium">
650
<span class="cursor-default">Collections</span>
651
<span class="cursor-default">New In</span>
652
<span class="cursor-default">Sale</span>
653
</div>
654
<div class="flex items-center gap-2 text-stone-400">
655
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cursor-default shrink-0"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
656
<div id="cart-icon" class="relative cursor-default">
657
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
658
<span id="cart-badge" class="absolute -top-1.5 -right-1.5 w-3.5 h-3.5 rounded-full bg-amber-500 text-white hidden items-center justify-center font-bold" style="font-size:6px;line-height:1">0</span>
659
</div>
660
</div>
661
</div>
662
663
664
<div id="page-container" class="flex-1 relative overflow-hidden">
665
666
667
<div id="page-home" class="absolute inset-0 flex overflow-hidden">
668
<div class="flex flex-col justify-center px-5 py-3 flex-1 min-w-0">
669
<span class="text-[7px] uppercase tracking-[0.22em] text-amber-600 font-semibold mb-1 cursor-default">New Arrivals</span>
670
<h2 class="text-xl font-bold text-stone-900 leading-[1.1] tracking-tight mb-1.5 cursor-default">The Summer<br>Edit.</h2>
671
<p class="text-[9px] text-stone-500 leading-relaxed mb-2.5 cursor-default">32 curated pieces for effortless living.</p>
672
<div class="flex items-center gap-2 flex-wrap">
673
<span id="btn-shop-now" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-sm bg-stone-900 text-white text-[9px] uppercase tracking-wide font-medium cursor-pointer">
674
Shop Now
675
<svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
676
</span>
677
<span class="text-[8px] text-stone-400 cursor-default">Free shipping over $75</span>
678
</div>
679
</div>
680
<div class="shrink-0 grid grid-cols-2 gap-1.5 p-3 content-center">
681
<div class="w-14 h-14 rounded bg-amber-100 relative overflow-hidden cursor-default"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/80"><span class="text-[6px] text-stone-700 font-semibold">$48</span></div></div>
682
<div class="w-14 h-14 rounded bg-stone-200 relative overflow-hidden cursor-default"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/80"><span class="text-[6px] text-stone-700 font-semibold">$62</span></div></div>
683
<div class="w-14 h-14 rounded bg-rose-100 relative overflow-hidden cursor-default"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/80"><span class="text-[6px] text-stone-700 font-semibold">$34</span></div></div>
684
<div class="w-14 h-14 rounded bg-emerald-50 border border-emerald-100 relative overflow-hidden cursor-default"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/80"><span class="text-[6px] text-stone-700 font-semibold">$89</span></div></div>
685
</div>
686
</div>
687
688
689
<div id="page-products" class="absolute inset-0 flex flex-col opacity-0 pointer-events-none">
690
<div class="shrink-0 px-3 py-1 border-b border-stone-100 bg-stone-50">
691
<span class="text-[7px] text-stone-400 cursor-default">Home / New Arrivals</span>
692
</div>
693
<div id="products-scroll" class="flex-1 overflow-hidden">
694
<div id="products-grid" class="p-2.5 grid grid-cols-3 gap-2" style="transition:transform 700ms cubic-bezier(0.25,0.46,0.45,0.94)">
695
<div class="flex flex-col gap-0.5">
696
<div class="rounded bg-amber-100 h-14 relative overflow-hidden"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/85 flex justify-between"><span class="text-[6px] text-stone-500 truncate">Linen Tote</span><span class="text-[6px] font-semibold text-stone-700">$48</span></div></div>
697
<button class="text-[7px] leading-none px-1.5 py-[3px] bg-stone-800 text-white rounded-sm font-medium">Add to cart</button>
698
</div>
699
<div class="flex flex-col gap-0.5">
700
<div class="rounded bg-stone-200 h-14 relative overflow-hidden"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/85 flex justify-between"><span class="text-[6px] text-stone-500 truncate">Woven Basket</span><span class="text-[6px] font-semibold text-stone-700">$62</span></div></div>
701
<button class="text-[7px] leading-none px-1.5 py-[3px] bg-stone-800 text-white rounded-sm font-medium">Add to cart</button>
702
</div>
703
<div class="flex flex-col gap-0.5">
704
<div class="rounded bg-rose-100 h-14 relative overflow-hidden"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/85 flex justify-between"><span class="text-[6px] text-stone-500 truncate">Cotton Pillow</span><span class="text-[6px] font-semibold text-stone-700">$34</span></div></div>
705
<button class="text-[7px] leading-none px-1.5 py-[3px] bg-stone-800 text-white rounded-sm font-medium">Add to cart</button>
706
</div>
707
<div class="flex flex-col gap-0.5">
708
<div class="rounded bg-emerald-50 border border-emerald-100 h-14 relative overflow-hidden"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/85 flex justify-between"><span class="text-[6px] text-stone-500 truncate">Marble Vase</span><span class="text-[6px] font-semibold text-stone-700">$89</span></div></div>
709
<button class="text-[7px] leading-none px-1.5 py-[3px] bg-stone-800 text-white rounded-sm font-medium">Add to cart</button>
710
</div>
711
<div class="flex flex-col gap-0.5">
712
<div class="rounded bg-yellow-100 h-14 relative overflow-hidden"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/85 flex justify-between"><span class="text-[6px] text-stone-500 truncate">Brass Candle</span><span class="text-[6px] font-semibold text-stone-700">$45</span></div></div>
713
<button id="btn-add-to-cart" class="text-[7px] leading-none px-1.5 py-[3px] bg-stone-800 text-white rounded-sm font-medium">Add to cart</button>
714
</div>
715
<div class="flex flex-col gap-0.5">
716
<div class="rounded bg-sky-50 border border-sky-100 h-14 relative overflow-hidden"><div class="absolute inset-x-0 bottom-0 px-1 py-0.5 bg-white/85 flex justify-between"><span class="text-[6px] text-stone-500 truncate">Ceramic Mug</span><span class="text-[6px] font-semibold text-stone-700">$28</span></div></div>
717
<button class="text-[7px] leading-none px-1.5 py-[3px] bg-stone-800 text-white rounded-sm font-medium">Add to cart</button>
718
</div>
719
</div>
720
</div>
721
</div>
722
723
724
<div id="page-checkout" class="absolute inset-0 flex flex-col bg-white opacity-0 pointer-events-none">
725
<div class="p-2 flex flex-col gap-1">
726
<h3 class="text-[9px] font-bold text-stone-900 pb-1 border-b border-stone-100 shrink-0">Checkout</h3>
727
<div class="flex gap-1.5 shrink-0">
728
<div class="flex-1 flex items-center justify-center py-1 rounded bg-black cursor-default">
729
<span class="text-[8px] text-white font-semibold tracking-wide"> Pay</span>
730
</div>
731
<div class="flex-1 flex items-center justify-center py-1 rounded border border-stone-200 cursor-default">
732
<span class="text-[9px] font-black" style="color:#ff69b4">klarna</span>
733
</div>
734
</div>
735
<input id="field-email" type="text" class="w-full px-2 py-[3px] rounded border border-stone-200 text-[9px] text-stone-800 bg-white outline-none placeholder:text-stone-300 shrink-0" placeholder="Email address" readonly>
736
<input id="field-card" type="text" class="w-full px-2 py-[3px] rounded border border-stone-200 text-[9px] text-stone-800 bg-white outline-none placeholder:text-stone-300 shrink-0" placeholder="Card number" readonly>
737
<button id="btn-pay" class="w-full py-1.5 rounded bg-stone-900 text-white text-[9px] font-semibold uppercase tracking-wide shrink-0 cursor-pointer">Pay $45.00</button>
738
</div>
739
</div>
740
741
742
<div id="page-success" class="absolute inset-0 flex items-center justify-center bg-white opacity-0 pointer-events-none">
743
<div class="text-center px-3">
744
<div class="w-9 h-9 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-2">
745
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-600"><polyline points="20 6 9 17 4 12"/></svg>
746
</div>
747
<h3 class="text-[11px] font-bold text-stone-900 mb-1">Order Confirmed!</h3>
748
<p class="text-[9px] text-stone-500 mb-3 leading-relaxed">Thanks Alex. Order #4821 is on its way.</p>
749
<span class="px-3 py-1 rounded border border-stone-200 text-[8px] text-stone-600 cursor-default">Continue Shopping</span>
750
</div>
751
</div>
752
753
</div>
754
755
756
<div id="cart-popover" class="absolute top-8 right-1 z-30 w-[10.5rem] bg-white rounded-lg border border-stone-200" style="opacity:0;pointer-events:none;transition:opacity 180ms ease;box-shadow:0 4px 20px rgba(0,0,0,0.1)">
757
<div class="p-2.5">
758
<h4 class="text-[9px] font-bold text-stone-800 mb-2">Your Cart (1 item)</h4>
759
<div class="flex gap-2 mb-2">
760
<div class="w-7 h-7 rounded bg-yellow-100 shrink-0"></div>
761
<div>
762
<p class="text-[8px] text-stone-700 font-medium leading-tight">Brass Candle</p>
763
<p class="text-[7px] text-stone-400 mt-0.5">Qty: 1 · $45.00</p>
764
</div>
765
</div>
766
<div class="border-t border-stone-100 pt-1.5 mb-1.5 flex justify-between items-center">
767
<span class="text-[8px] text-stone-500">Total</span>
768
<span class="text-[9px] font-bold text-stone-900">$45.00</span>
769
</div>
770
<button id="btn-cart-checkout" class="w-full py-1 bg-stone-900 text-white text-[8px] uppercase tracking-wide rounded font-semibold cursor-pointer">Checkout →</button>
771
</div>
772
</div>
773
774
775
<div id="fake-cursor" class="absolute z-50 pointer-events-none" style="opacity:0;left:50%;top:60%">
776
<svg width="18" height="22" viewBox="0 0 18 22" fill="none">
777
<path d="M2 2L2 19L5.5 15L8.5 21.5L11 20.5L8 14L13.5 14L2 2Z" fill="white" stroke="#1c1917" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
778
</svg>
779
</div>
780
781
</div>
782
783
</div>
784
785
786
<div class="absolute -inset-4 bg-brand-reactive/5 rounded-2xl blur-2xl -z-10" aria-hidden="true"></div>
787
</div>
788
789
<script src="/assets/scripts/terminal.js" defer></script>
790
791
</div>
792
</div>
793
794
795
</div>
796
797
<div class="relative flex flex-1 flex-col items-start justify-start overflow-hidden z-0">
798
799
<ul class="absolute right-0 top-0 bottom-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
800
801
<li class="flex flex-row">
802
<span class="w-[30px] opacity-50">1</span>
803
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell with context %}</p>
804
</li>
805
806
<li class="flex flex-row">
807
<span class="w-[30px] opacity-50">2</span>
808
<p class="flex w-full overflow-hidden whitespace-pre"></p>
809
</li>
810
811
<li class="flex flex-row">
812
<span class="w-[30px] opacity-50">3</span>
813
<p class="flex w-full overflow-hidden whitespace-pre">{# HERO</p>
814
</li>
815
816
<li class="flex flex-row">
817
<span class="w-[30px] opacity-50">4</span>
818
<p class="flex w-full overflow-hidden whitespace-pre"> #}</p>
819
</li>
820
821
<li class="flex flex-row">
822
<span class="w-[30px] opacity-50">5</span>
823
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "hero", strings.hero.sectionLabel, strings.hero.sectionSublabel) %}</p>
824
</li>
825
826
<li class="flex flex-row">
827
<span class="w-[30px] opacity-50">6</span>
828
<p class="flex w-full overflow-hidden whitespace-pre"></p>
829
</li>
830
831
<li class="flex flex-row">
832
<span class="w-[30px] opacity-50">7</span>
833
<p class="flex w-full overflow-hidden whitespace-pre"> {# Gradient orbs — isolated overflow wrapper prevents mobile bleed</p>
834
</li>
835
836
<li class="flex flex-row">
837
<span class="w-[30px] opacity-50">8</span>
838
<p class="flex w-full overflow-hidden whitespace-pre"> without affecting sticky siblings in sectionShell #}</p>
839
</li>
840
841
<li class="flex flex-row">
842
<span class="w-[30px] opacity-50">9</span>
843
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true"></p>
844
</li>
845
846
<li class="flex flex-row">
847
<span class="w-[30px] opacity-50">10</span>
848
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="hero-orb w-[600px] h-[600px] bg-brand-reactive/8 top-[-150px] left-[-200px]"></div></p>
849
</li>
850
851
<li class="flex flex-row">
852
<span class="w-[30px] opacity-50">11</span>
853
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="hero-orb w-[400px] h-[400px] bg-brand-stable/8 bottom-[-100px] right-[-100px]"></div></p>
854
</li>
855
856
<li class="flex flex-row">
857
<span class="w-[30px] opacity-50">12</span>
858
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
859
</li>
860
861
<li class="flex flex-row">
862
<span class="w-[30px] opacity-50">13</span>
863
<p class="flex w-full overflow-hidden whitespace-pre"></p>
864
</li>
865
866
<li class="flex flex-row">
867
<span class="w-[30px] opacity-50">14</span>
868
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="max-w-7xl mx-auto w-full"></p>
869
</li>
870
871
<li class="flex flex-row">
872
<span class="w-[30px] opacity-50">15</span>
873
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid lg:grid-cols-2 gap-16 items-center"></p>
874
</li>
875
876
<li class="flex flex-row">
877
<span class="w-[30px] opacity-50">16</span>
878
<p class="flex w-full overflow-hidden whitespace-pre"></p>
879
</li>
880
881
<li class="flex flex-row">
882
<span class="w-[30px] opacity-50">17</span>
883
<p class="flex w-full overflow-hidden whitespace-pre"> {# Hero copy #}</p>
884
</li>
885
886
<li class="flex flex-row">
887
<span class="w-[30px] opacity-50">18</span>
888
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-8"></p>
889
</li>
890
891
<li class="flex flex-row">
892
<span class="w-[30px] opacity-50">19</span>
893
<p class="flex w-full overflow-hidden whitespace-pre"></p>
894
</li>
895
896
<li class="flex flex-row">
897
<span class="w-[30px] opacity-50">20</span>
898
<p class="flex w-full overflow-hidden whitespace-pre"> {# Eyebrow #}</p>
899
</li>
900
901
<li class="flex flex-row">
902
<span class="w-[30px] opacity-50">21</span>
903
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center gap-3"></p>
904
</li>
905
906
<li class="flex flex-row">
907
<span class="w-[30px] opacity-50">22</span>
908
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="block w-8 h-px bg-brand-reactive"></span></p>
909
</li>
910
911
<li class="flex flex-row">
912
<span class="w-[30px] opacity-50">23</span>
913
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive"></p>
914
</li>
915
916
<li class="flex flex-row">
917
<span class="w-[30px] opacity-50">24</span>
918
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.eyebrow }}</p>
919
</li>
920
921
<li class="flex flex-row">
922
<span class="w-[30px] opacity-50">25</span>
923
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
924
</li>
925
926
<li class="flex flex-row">
927
<span class="w-[30px] opacity-50">26</span>
928
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
929
</li>
930
931
<li class="flex flex-row">
932
<span class="w-[30px] opacity-50">27</span>
933
<p class="flex w-full overflow-hidden whitespace-pre"></p>
934
</li>
935
936
<li class="flex flex-row">
937
<span class="w-[30px] opacity-50">28</span>
938
<p class="flex w-full overflow-hidden whitespace-pre"> {# Headline #}</p>
939
</li>
940
941
<li class="flex flex-row">
942
<span class="w-[30px] opacity-50">29</span>
943
<p class="flex w-full overflow-hidden whitespace-pre"> <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.05]"></p>
944
</li>
945
946
<li class="flex flex-row">
947
<span class="w-[30px] opacity-50">30</span>
948
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-brand-text">{{ strings.hero.headline }}</span></p>
949
</li>
950
951
<li class="flex flex-row">
952
<span class="w-[30px] opacity-50">31</span>
953
<p class="flex w-full overflow-hidden whitespace-pre"> <br></p>
954
</li>
955
956
<li class="flex flex-row">
957
<span class="w-[30px] opacity-50">32</span>
958
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-brand-reactive">{{ strings.hero.headlineAccent }}</span></p>
959
</li>
960
961
<li class="flex flex-row">
962
<span class="w-[30px] opacity-50">33</span>
963
<p class="flex w-full overflow-hidden whitespace-pre"> </h1></p>
964
</li>
965
966
<li class="flex flex-row">
967
<span class="w-[30px] opacity-50">34</span>
968
<p class="flex w-full overflow-hidden whitespace-pre"></p>
969
</li>
970
971
<li class="flex flex-row">
972
<span class="w-[30px] opacity-50">35</span>
973
<p class="flex w-full overflow-hidden whitespace-pre"> {# Subtitle #}</p>
974
</li>
975
976
<li class="flex flex-row">
977
<span class="w-[30px] opacity-50">36</span>
978
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="text-lg text-brand-muted max-w-lg leading-relaxed"></p>
979
</li>
980
981
<li class="flex flex-row">
982
<span class="w-[30px] opacity-50">37</span>
983
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.subtitle }}</p>
984
</li>
985
986
<li class="flex flex-row">
987
<span class="w-[30px] opacity-50">38</span>
988
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
989
</li>
990
991
<li class="flex flex-row">
992
<span class="w-[30px] opacity-50">39</span>
993
<p class="flex w-full overflow-hidden whitespace-pre"></p>
994
</li>
995
996
<li class="flex flex-row">
997
<span class="w-[30px] opacity-50">40</span>
998
<p class="flex w-full overflow-hidden whitespace-pre"> {# CTAs #}</p>
999
</li>
1000
1001
<li class="flex flex-row">
1002
<span class="w-[30px] opacity-50">41</span>
1003
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex flex-wrap items-center gap-4 pt-2"></p>
1004
</li>
1005
1006
<li class="flex flex-row">
1007
<span class="w-[30px] opacity-50">42</span>
1008
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.hero.ctaPrimary.href }}"</p>
1009
</li>
1010
1011
<li class="flex flex-row">
1012
<span class="w-[30px] opacity-50">43</span>
1013
<p class="flex w-full overflow-hidden whitespace-pre"> class="btn-reactive-md"></p>
1014
</li>
1015
1016
<li class="flex flex-row">
1017
<span class="w-[30px] opacity-50">44</span>
1018
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.ctaPrimary.label }}</p>
1019
</li>
1020
1021
<li class="flex flex-row">
1022
<span class="w-[30px] opacity-50">45</span>
1023
<p class="flex w-full overflow-hidden whitespace-pre"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"</p>
1024
</li>
1025
1026
<li class="flex flex-row">
1027
<span class="w-[30px] opacity-50">46</span>
1028
<p class="flex w-full overflow-hidden whitespace-pre"> fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></p>
1029
</li>
1030
1031
<li class="flex flex-row">
1032
<span class="w-[30px] opacity-50">47</span>
1033
<p class="flex w-full overflow-hidden whitespace-pre"> <path d="M5 12h14M12 5l7 7-7 7"/></p>
1034
</li>
1035
1036
<li class="flex flex-row">
1037
<span class="w-[30px] opacity-50">48</span>
1038
<p class="flex w-full overflow-hidden whitespace-pre"> </svg></p>
1039
</li>
1040
1041
<li class="flex flex-row">
1042
<span class="w-[30px] opacity-50">49</span>
1043
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
1044
</li>
1045
1046
<li class="flex flex-row">
1047
<span class="w-[30px] opacity-50">50</span>
1048
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.hero.ctaSecondary.href }}"</p>
1049
</li>
1050
1051
<li class="flex flex-row">
1052
<span class="w-[30px] opacity-50">51</span>
1053
<p class="flex w-full overflow-hidden whitespace-pre"> class="btn-ghost-md"></p>
1054
</li>
1055
1056
<li class="flex flex-row">
1057
<span class="w-[30px] opacity-50">52</span>
1058
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.hero.ctaSecondary.label }}</p>
1059
</li>
1060
1061
<li class="flex flex-row">
1062
<span class="w-[30px] opacity-50">53</span>
1063
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
1064
</li>
1065
1066
<li class="flex flex-row">
1067
<span class="w-[30px] opacity-50">54</span>
1068
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1069
</li>
1070
1071
<li class="flex flex-row">
1072
<span class="w-[30px] opacity-50">55</span>
1073
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1074
</li>
1075
1076
<li class="flex flex-row">
1077
<span class="w-[30px] opacity-50">56</span>
1078
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1079
</li>
1080
1081
<li class="flex flex-row">
1082
<span class="w-[30px] opacity-50">57</span>
1083
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1084
</li>
1085
1086
<li class="flex flex-row">
1087
<span class="w-[30px] opacity-50">58</span>
1088
<p class="flex w-full overflow-hidden whitespace-pre"> {# Live Terminal #}</p>
1089
</li>
1090
1091
<li class="flex flex-row">
1092
<span class="w-[30px] opacity-50">59</span>
1093
<p class="flex w-full overflow-hidden whitespace-pre"> {% include "components/terminal.njk" %}</p>
1094
</li>
1095
1096
<li class="flex flex-row">
1097
<span class="w-[30px] opacity-50">60</span>
1098
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1099
</li>
1100
1101
<li class="flex flex-row">
1102
<span class="w-[30px] opacity-50">61</span>
1103
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1104
</li>
1105
1106
<li class="flex flex-row">
1107
<span class="w-[30px] opacity-50">62</span>
1108
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1109
</li>
1110
1111
<li class="flex flex-row">
1112
<span class="w-[30px] opacity-50">63</span>
1113
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1114
</li>
1115
1116
<li class="flex flex-row">
1117
<span class="w-[30px] opacity-50">64</span>
1118
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
1119
</li>
1120
1121
<li class="flex flex-row">
1122
<span class="w-[30px] opacity-50">65</span>
1123
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1124
</li>
1125
1126
</ul>
1127
<div class="absolute inset-0 bg-linear-to-r from-brand-base to-transparent"></div>
1128
1129
</div>
1130
</section>
1131
1132
1133
1134
1135
1136
1137
<section id="difference" class="relative border-t border-brand-border flex flex-row">
1138
<div class="relative flex flex-1 flex-row">
1139
1140
1141
<ul class="absolute inset-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
1142
1143
<li class="flex flex-row">
1144
<span class="w-[30px] opacity-50">1</span>
1145
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell, sectionHeader with context %}</p>
1146
</li>
1147
1148
<li class="flex flex-row">
1149
<span class="w-[30px] opacity-50">2</span>
1150
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1151
</li>
1152
1153
<li class="flex flex-row">
1154
<span class="w-[30px] opacity-50">3</span>
1155
<p class="flex w-full overflow-hidden whitespace-pre">{# THE ISOTOPIC DIFFERENCE #}</p>
1156
</li>
1157
1158
<li class="flex flex-row">
1159
<span class="w-[30px] opacity-50">4</span>
1160
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "difference", strings.difference.sectionLabel, strings.difference.sectionSublabel) %}</p>
1161
</li>
1162
1163
<li class="flex flex-row">
1164
<span class="w-[30px] opacity-50">5</span>
1165
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1166
</li>
1167
1168
<li class="flex flex-row">
1169
<span class="w-[30px] opacity-50">6</span>
1170
<p class="flex w-full overflow-hidden whitespace-pre"> {{ sectionHeader("h" ~ (sectionNum + 1), strings.difference.eyebrow, strings.difference.headline, strings.difference.subtitle) }}</p>
1171
</li>
1172
1173
<li class="flex flex-row">
1174
<span class="w-[30px] opacity-50">7</span>
1175
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1176
</li>
1177
1178
<li class="flex flex-row">
1179
<span class="w-[30px] opacity-50">8</span>
1180
<p class="flex w-full overflow-hidden whitespace-pre"> {# Comparison grid #}</p>
1181
</li>
1182
1183
<li class="flex flex-row">
1184
<span class="w-[30px] opacity-50">9</span>
1185
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid md:grid-cols-2 gap-6"></p>
1186
</li>
1187
1188
<li class="flex flex-row">
1189
<span class="w-[30px] opacity-50">10</span>
1190
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1191
</li>
1192
1193
<li class="flex flex-row">
1194
<span class="w-[30px] opacity-50">11</span>
1195
<p class="flex w-full overflow-hidden whitespace-pre"> {# Isotopic column #}</p>
1196
</li>
1197
1198
<li class="flex flex-row">
1199
<span class="w-[30px] opacity-50">12</span>
1200
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="rounded-lg border border-brand-reactive/40 bg-brand-surface/40 p-8 space-y-6 relative overflow-hidden</p>
1201
</li>
1202
1203
<li class="flex flex-row">
1204
<span class="w-[30px] opacity-50">13</span>
1205
<p class="flex w-full overflow-hidden whitespace-pre"> shadow-[0_0_40px_-8px_rgba(45,212,191,0.15)]"></p>
1206
</li>
1207
1208
<li class="flex flex-row">
1209
<span class="w-[30px] opacity-50">14</span>
1210
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute top-0 right-0 w-32 h-32 bg-brand-reactive/5 rounded-bl-full" aria-hidden="true"></div></p>
1211
</li>
1212
1213
<li class="flex flex-row">
1214
<span class="w-[30px] opacity-50">15</span>
1215
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-between"></p>
1216
</li>
1217
1218
<li class="flex flex-row">
1219
<span class="w-[30px] opacity-50">16</span>
1220
<p class="flex w-full overflow-hidden whitespace-pre"> <h2 class="font-mono text-sm font-medium text-brand-text">{{ strings.difference.isotopic.title }}</h2></p>
1221
</li>
1222
1223
<li class="flex flex-row">
1224
<span class="w-[30px] opacity-50">17</span>
1225
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-2 py-0.5 rounded border border-brand-reactive/40 bg-brand-reactive/10 font-mono text-xs text-brand-reactive"></p>
1226
</li>
1227
1228
<li class="flex flex-row">
1229
<span class="w-[30px] opacity-50">18</span>
1230
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.difference.isotopic.badge }}</p>
1231
</li>
1232
1233
<li class="flex flex-row">
1234
<span class="w-[30px] opacity-50">19</span>
1235
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1236
</li>
1237
1238
<li class="flex flex-row">
1239
<span class="w-[30px] opacity-50">20</span>
1240
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1241
</li>
1242
1243
<li class="flex flex-row">
1244
<span class="w-[30px] opacity-50">21</span>
1245
<p class="flex w-full overflow-hidden whitespace-pre"> <ul class="space-y-4"></p>
1246
</li>
1247
1248
<li class="flex flex-row">
1249
<span class="w-[30px] opacity-50">22</span>
1250
<p class="flex w-full overflow-hidden whitespace-pre"> {% for item in strings.difference.isotopic.items %}</p>
1251
</li>
1252
1253
<li class="flex flex-row">
1254
<span class="w-[30px] opacity-50">23</span>
1255
<p class="flex w-full overflow-hidden whitespace-pre"> <li class="flex items-start gap-3"></p>
1256
</li>
1257
1258
<li class="flex flex-row">
1259
<span class="w-[30px] opacity-50">24</span>
1260
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-reactive/40 flex items-center justify-center"></p>
1261
</li>
1262
1263
<li class="flex flex-row">
1264
<span class="w-[30px] opacity-50">25</span>
1265
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="w-1.5 h-1.5 rounded-full bg-brand-reactive"></span></p>
1266
</li>
1267
1268
<li class="flex flex-row">
1269
<span class="w-[30px] opacity-50">26</span>
1270
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1271
</li>
1272
1273
<li class="flex flex-row">
1274
<span class="w-[30px] opacity-50">27</span>
1275
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-sm text-brand-text leading-relaxed">{{ item }}</span></p>
1276
</li>
1277
1278
<li class="flex flex-row">
1279
<span class="w-[30px] opacity-50">28</span>
1280
<p class="flex w-full overflow-hidden whitespace-pre"> </li></p>
1281
</li>
1282
1283
<li class="flex flex-row">
1284
<span class="w-[30px] opacity-50">29</span>
1285
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
1286
</li>
1287
1288
<li class="flex flex-row">
1289
<span class="w-[30px] opacity-50">30</span>
1290
<p class="flex w-full overflow-hidden whitespace-pre"> </ul></p>
1291
</li>
1292
1293
<li class="flex flex-row">
1294
<span class="w-[30px] opacity-50">31</span>
1295
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1296
</li>
1297
1298
<li class="flex flex-row">
1299
<span class="w-[30px] opacity-50">32</span>
1300
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1301
</li>
1302
1303
<li class="flex flex-row">
1304
<span class="w-[30px] opacity-50">33</span>
1305
<p class="flex w-full overflow-hidden whitespace-pre"> {# Traditional column #}</p>
1306
</li>
1307
1308
<li class="flex flex-row">
1309
<span class="w-[30px] opacity-50">34</span>
1310
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="rounded-lg border border-brand-border bg-brand-surface/40 p-8 space-y-6 opacity-70"></p>
1311
</li>
1312
1313
<li class="flex flex-row">
1314
<span class="w-[30px] opacity-50">35</span>
1315
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-between"></p>
1316
</li>
1317
1318
<li class="flex flex-row">
1319
<span class="w-[30px] opacity-50">36</span>
1320
<p class="flex w-full overflow-hidden whitespace-pre"> <h3 class="font-mono text-sm font-medium text-brand-muted">{{ strings.difference.traditional.title }}</h3></p>
1321
</li>
1322
1323
<li class="flex flex-row">
1324
<span class="w-[30px] opacity-50">37</span>
1325
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-2 py-0.5 rounded border border-brand-warn/30 bg-brand-warn/10 font-mono text-xs text-brand-warn"></p>
1326
</li>
1327
1328
<li class="flex flex-row">
1329
<span class="w-[30px] opacity-50">38</span>
1330
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.difference.traditional.badge }}</p>
1331
</li>
1332
1333
<li class="flex flex-row">
1334
<span class="w-[30px] opacity-50">39</span>
1335
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1336
</li>
1337
1338
<li class="flex flex-row">
1339
<span class="w-[30px] opacity-50">40</span>
1340
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1341
</li>
1342
1343
<li class="flex flex-row">
1344
<span class="w-[30px] opacity-50">41</span>
1345
<p class="flex w-full overflow-hidden whitespace-pre"> <ul class="space-y-4"></p>
1346
</li>
1347
1348
<li class="flex flex-row">
1349
<span class="w-[30px] opacity-50">42</span>
1350
<p class="flex w-full overflow-hidden whitespace-pre"> {% for item in strings.difference.traditional.items %}</p>
1351
</li>
1352
1353
<li class="flex flex-row">
1354
<span class="w-[30px] opacity-50">43</span>
1355
<p class="flex w-full overflow-hidden whitespace-pre"> <li class="flex items-start gap-3"></p>
1356
</li>
1357
1358
<li class="flex flex-row">
1359
<span class="w-[30px] opacity-50">44</span>
1360
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-warn/40 flex items-center justify-center"></p>
1361
</li>
1362
1363
<li class="flex flex-row">
1364
<span class="w-[30px] opacity-50">45</span>
1365
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="w-1.5 h-1.5 rounded-full bg-brand-warn/60"></span></p>
1366
</li>
1367
1368
<li class="flex flex-row">
1369
<span class="w-[30px] opacity-50">46</span>
1370
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1371
</li>
1372
1373
<li class="flex flex-row">
1374
<span class="w-[30px] opacity-50">47</span>
1375
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-sm text-brand-muted leading-relaxed">{{ item }}</span></p>
1376
</li>
1377
1378
<li class="flex flex-row">
1379
<span class="w-[30px] opacity-50">48</span>
1380
<p class="flex w-full overflow-hidden whitespace-pre"> </li></p>
1381
</li>
1382
1383
<li class="flex flex-row">
1384
<span class="w-[30px] opacity-50">49</span>
1385
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
1386
</li>
1387
1388
<li class="flex flex-row">
1389
<span class="w-[30px] opacity-50">50</span>
1390
<p class="flex w-full overflow-hidden whitespace-pre"> </ul></p>
1391
</li>
1392
1393
<li class="flex flex-row">
1394
<span class="w-[30px] opacity-50">51</span>
1395
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1396
</li>
1397
1398
<li class="flex flex-row">
1399
<span class="w-[30px] opacity-50">52</span>
1400
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1401
</li>
1402
1403
<li class="flex flex-row">
1404
<span class="w-[30px] opacity-50">53</span>
1405
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1406
</li>
1407
1408
<li class="flex flex-row">
1409
<span class="w-[30px] opacity-50">54</span>
1410
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1411
</li>
1412
1413
<li class="flex flex-row">
1414
<span class="w-[30px] opacity-50">55</span>
1415
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
1416
</li>
1417
1418
<li class="flex flex-row">
1419
<span class="w-[30px] opacity-50">56</span>
1420
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1421
</li>
1422
1423
</ul>
1424
1425
1426
<div class="absolute inset-0 bg-linear-to-l from-brand-base to-transparent"></div>
1427
</div>
1428
1429
<div class="relative flex flex-row border-r bg-brand-base border-brand-border pb-1 pt-1 w-[33px] justify-end items-start">
1430
1431
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/80"><em class="text-brand-stable">#02</em> THE ISOTOPIC DIFFERENCE</span>
1432
1433
1434
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/40 italic">// diff(agency, isotopic) → output: clarity</span>
1435
1436
</div>
1437
1438
<div class="w-full max-w-7xl mx-auto px-2 md:px-6 py-24 md:py-32 z-40">
1439
1440
1441
1442
<div class="mb-16 space-y-4 max-w-2xl">
1443
<div class="flex items-center gap-3">
1444
<span class="block w-6 h-px bg-brand-reactive"></span>
1445
<p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive">
1446
Smarter Structure. Faster Delivery
1447
</p>
1448
</div>
1449
<h3 class="text-3xl md:text-5xl font-bold tracking-tight text-brand-text leading-tight">
1450
Elite Engineering,<br>Stripped of the Bloat.
1451
</h3>
1452
<p class="text-lg text-brand-muted leading-relaxed">You shouldn't pay for an agency's fancy office or layers of middle management. We focus 100% of your budget on the code.</p>
1453
</div>
1454
1455
1456
1457
<div class="grid md:grid-cols-2 gap-6">
1458
1459
1460
<div class="rounded-lg border border-brand-reactive/40 bg-brand-surface/40 p-8 space-y-6 relative overflow-hidden
1461
shadow-[0_0_40px_-8px_rgba(45,212,191,0.15)]">
1462
<div class="absolute top-0 right-0 w-32 h-32 bg-brand-reactive/5 rounded-bl-full" aria-hidden="true"></div>
1463
<div class="flex items-center justify-between">
1464
<h2 class="font-mono text-sm font-medium text-brand-text">Isotopic</h2>
1465
<span class="px-2 py-0.5 rounded border border-brand-reactive/40 bg-brand-reactive/10 font-mono text-xs text-brand-reactive">
1466
Stable
1467
</span>
1468
</div>
1469
<ul class="space-y-4">
1470
1471
<li class="flex items-start gap-3">
1472
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-reactive/40 flex items-center justify-center">
1473
<span class="w-1.5 h-1.5 rounded-full bg-brand-reactive"></span>
1474
</span>
1475
<span class="text-sm text-brand-text leading-relaxed">Direct communication with your lead engineer</span>
1476
</li>
1477
1478
<li class="flex items-start gap-3">
1479
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-reactive/40 flex items-center justify-center">
1480
<span class="w-1.5 h-1.5 rounded-full bg-brand-reactive"></span>
1481
</span>
1482
<span class="text-sm text-brand-text leading-relaxed">Rapid prototyping and weekly builds</span>
1483
</li>
1484
1485
<li class="flex items-start gap-3">
1486
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-reactive/40 flex items-center justify-center">
1487
<span class="w-1.5 h-1.5 rounded-full bg-brand-reactive"></span>
1488
</span>
1489
<span class="text-sm text-brand-text leading-relaxed">Fixed-price transparency with no surprises</span>
1490
</li>
1491
1492
<li class="flex items-start gap-3">
1493
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-reactive/40 flex items-center justify-center">
1494
<span class="w-1.5 h-1.5 rounded-full bg-brand-reactive"></span>
1495
</span>
1496
<span class="text-sm text-brand-text leading-relaxed">Long-term stability and code ownership</span>
1497
</li>
1498
1499
<li class="flex items-start gap-3">
1500
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-reactive/40 flex items-center justify-center">
1501
<span class="w-1.5 h-1.5 rounded-full bg-brand-reactive"></span>
1502
</span>
1503
<span class="text-sm text-brand-text leading-relaxed">Lean, high-velocity execution</span>
1504
</li>
1505
1506
</ul>
1507
</div>
1508
1509
1510
<div class="rounded-lg border border-brand-border bg-brand-surface/40 p-8 space-y-6 opacity-70">
1511
<div class="flex items-center justify-between">
1512
<h3 class="font-mono text-sm font-medium text-brand-muted">Traditional Agency</h3>
1513
<span class="px-2 py-0.5 rounded border border-brand-warn/30 bg-brand-warn/10 font-mono text-xs text-brand-warn">
1514
Volatile
1515
</span>
1516
</div>
1517
<ul class="space-y-4">
1518
1519
<li class="flex items-start gap-3">
1520
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-warn/40 flex items-center justify-center">
1521
<span class="w-1.5 h-1.5 rounded-full bg-brand-warn/60"></span>
1522
</span>
1523
<span class="text-sm text-brand-muted leading-relaxed">Project managers between you and engineers</span>
1524
</li>
1525
1526
<li class="flex items-start gap-3">
1527
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-warn/40 flex items-center justify-center">
1528
<span class="w-1.5 h-1.5 rounded-full bg-brand-warn/60"></span>
1529
</span>
1530
<span class="text-sm text-brand-muted leading-relaxed">Weeks of 'discovery' before seeing code</span>
1531
</li>
1532
1533
<li class="flex items-start gap-3">
1534
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-warn/40 flex items-center justify-center">
1535
<span class="w-1.5 h-1.5 rounded-full bg-brand-warn/60"></span>
1536
</span>
1537
<span class="text-sm text-brand-muted leading-relaxed">Expensive retainers for senior oversight</span>
1538
</li>
1539
1540
<li class="flex items-start gap-3">
1541
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-warn/40 flex items-center justify-center">
1542
<span class="w-1.5 h-1.5 rounded-full bg-brand-warn/60"></span>
1543
</span>
1544
<span class="text-sm text-brand-muted leading-relaxed">Frequent team rotations and handoffs</span>
1545
</li>
1546
1547
<li class="flex items-start gap-3">
1548
<span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-warn/40 flex items-center justify-center">
1549
<span class="w-1.5 h-1.5 rounded-full bg-brand-warn/60"></span>
1550
</span>
1551
<span class="text-sm text-brand-muted leading-relaxed">Hidden fees and scope-creep taxes</span>
1552
</li>
1553
1554
</ul>
1555
</div>
1556
1557
</div>
1558
1559
1560
</div>
1561
1562
<div class="relative flex flex-1 flex-col items-start justify-start overflow-hidden z-0">
1563
1564
<ul class="absolute right-0 top-0 bottom-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
1565
1566
<li class="flex flex-row">
1567
<span class="w-[30px] opacity-50">1</span>
1568
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell, sectionHeader with context %}</p>
1569
</li>
1570
1571
<li class="flex flex-row">
1572
<span class="w-[30px] opacity-50">2</span>
1573
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1574
</li>
1575
1576
<li class="flex flex-row">
1577
<span class="w-[30px] opacity-50">3</span>
1578
<p class="flex w-full overflow-hidden whitespace-pre">{# THE ISOTOPIC DIFFERENCE #}</p>
1579
</li>
1580
1581
<li class="flex flex-row">
1582
<span class="w-[30px] opacity-50">4</span>
1583
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "difference", strings.difference.sectionLabel, strings.difference.sectionSublabel) %}</p>
1584
</li>
1585
1586
<li class="flex flex-row">
1587
<span class="w-[30px] opacity-50">5</span>
1588
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1589
</li>
1590
1591
<li class="flex flex-row">
1592
<span class="w-[30px] opacity-50">6</span>
1593
<p class="flex w-full overflow-hidden whitespace-pre"> {{ sectionHeader("h" ~ (sectionNum + 1), strings.difference.eyebrow, strings.difference.headline, strings.difference.subtitle) }}</p>
1594
</li>
1595
1596
<li class="flex flex-row">
1597
<span class="w-[30px] opacity-50">7</span>
1598
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1599
</li>
1600
1601
<li class="flex flex-row">
1602
<span class="w-[30px] opacity-50">8</span>
1603
<p class="flex w-full overflow-hidden whitespace-pre"> {# Comparison grid #}</p>
1604
</li>
1605
1606
<li class="flex flex-row">
1607
<span class="w-[30px] opacity-50">9</span>
1608
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid md:grid-cols-2 gap-6"></p>
1609
</li>
1610
1611
<li class="flex flex-row">
1612
<span class="w-[30px] opacity-50">10</span>
1613
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1614
</li>
1615
1616
<li class="flex flex-row">
1617
<span class="w-[30px] opacity-50">11</span>
1618
<p class="flex w-full overflow-hidden whitespace-pre"> {# Isotopic column #}</p>
1619
</li>
1620
1621
<li class="flex flex-row">
1622
<span class="w-[30px] opacity-50">12</span>
1623
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="rounded-lg border border-brand-reactive/40 bg-brand-surface/40 p-8 space-y-6 relative overflow-hidden</p>
1624
</li>
1625
1626
<li class="flex flex-row">
1627
<span class="w-[30px] opacity-50">13</span>
1628
<p class="flex w-full overflow-hidden whitespace-pre"> shadow-[0_0_40px_-8px_rgba(45,212,191,0.15)]"></p>
1629
</li>
1630
1631
<li class="flex flex-row">
1632
<span class="w-[30px] opacity-50">14</span>
1633
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute top-0 right-0 w-32 h-32 bg-brand-reactive/5 rounded-bl-full" aria-hidden="true"></div></p>
1634
</li>
1635
1636
<li class="flex flex-row">
1637
<span class="w-[30px] opacity-50">15</span>
1638
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-between"></p>
1639
</li>
1640
1641
<li class="flex flex-row">
1642
<span class="w-[30px] opacity-50">16</span>
1643
<p class="flex w-full overflow-hidden whitespace-pre"> <h2 class="font-mono text-sm font-medium text-brand-text">{{ strings.difference.isotopic.title }}</h2></p>
1644
</li>
1645
1646
<li class="flex flex-row">
1647
<span class="w-[30px] opacity-50">17</span>
1648
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-2 py-0.5 rounded border border-brand-reactive/40 bg-brand-reactive/10 font-mono text-xs text-brand-reactive"></p>
1649
</li>
1650
1651
<li class="flex flex-row">
1652
<span class="w-[30px] opacity-50">18</span>
1653
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.difference.isotopic.badge }}</p>
1654
</li>
1655
1656
<li class="flex flex-row">
1657
<span class="w-[30px] opacity-50">19</span>
1658
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1659
</li>
1660
1661
<li class="flex flex-row">
1662
<span class="w-[30px] opacity-50">20</span>
1663
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1664
</li>
1665
1666
<li class="flex flex-row">
1667
<span class="w-[30px] opacity-50">21</span>
1668
<p class="flex w-full overflow-hidden whitespace-pre"> <ul class="space-y-4"></p>
1669
</li>
1670
1671
<li class="flex flex-row">
1672
<span class="w-[30px] opacity-50">22</span>
1673
<p class="flex w-full overflow-hidden whitespace-pre"> {% for item in strings.difference.isotopic.items %}</p>
1674
</li>
1675
1676
<li class="flex flex-row">
1677
<span class="w-[30px] opacity-50">23</span>
1678
<p class="flex w-full overflow-hidden whitespace-pre"> <li class="flex items-start gap-3"></p>
1679
</li>
1680
1681
<li class="flex flex-row">
1682
<span class="w-[30px] opacity-50">24</span>
1683
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-reactive/40 flex items-center justify-center"></p>
1684
</li>
1685
1686
<li class="flex flex-row">
1687
<span class="w-[30px] opacity-50">25</span>
1688
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="w-1.5 h-1.5 rounded-full bg-brand-reactive"></span></p>
1689
</li>
1690
1691
<li class="flex flex-row">
1692
<span class="w-[30px] opacity-50">26</span>
1693
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1694
</li>
1695
1696
<li class="flex flex-row">
1697
<span class="w-[30px] opacity-50">27</span>
1698
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-sm text-brand-text leading-relaxed">{{ item }}</span></p>
1699
</li>
1700
1701
<li class="flex flex-row">
1702
<span class="w-[30px] opacity-50">28</span>
1703
<p class="flex w-full overflow-hidden whitespace-pre"> </li></p>
1704
</li>
1705
1706
<li class="flex flex-row">
1707
<span class="w-[30px] opacity-50">29</span>
1708
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
1709
</li>
1710
1711
<li class="flex flex-row">
1712
<span class="w-[30px] opacity-50">30</span>
1713
<p class="flex w-full overflow-hidden whitespace-pre"> </ul></p>
1714
</li>
1715
1716
<li class="flex flex-row">
1717
<span class="w-[30px] opacity-50">31</span>
1718
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1719
</li>
1720
1721
<li class="flex flex-row">
1722
<span class="w-[30px] opacity-50">32</span>
1723
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1724
</li>
1725
1726
<li class="flex flex-row">
1727
<span class="w-[30px] opacity-50">33</span>
1728
<p class="flex w-full overflow-hidden whitespace-pre"> {# Traditional column #}</p>
1729
</li>
1730
1731
<li class="flex flex-row">
1732
<span class="w-[30px] opacity-50">34</span>
1733
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="rounded-lg border border-brand-border bg-brand-surface/40 p-8 space-y-6 opacity-70"></p>
1734
</li>
1735
1736
<li class="flex flex-row">
1737
<span class="w-[30px] opacity-50">35</span>
1738
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-between"></p>
1739
</li>
1740
1741
<li class="flex flex-row">
1742
<span class="w-[30px] opacity-50">36</span>
1743
<p class="flex w-full overflow-hidden whitespace-pre"> <h3 class="font-mono text-sm font-medium text-brand-muted">{{ strings.difference.traditional.title }}</h3></p>
1744
</li>
1745
1746
<li class="flex flex-row">
1747
<span class="w-[30px] opacity-50">37</span>
1748
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-2 py-0.5 rounded border border-brand-warn/30 bg-brand-warn/10 font-mono text-xs text-brand-warn"></p>
1749
</li>
1750
1751
<li class="flex flex-row">
1752
<span class="w-[30px] opacity-50">38</span>
1753
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.difference.traditional.badge }}</p>
1754
</li>
1755
1756
<li class="flex flex-row">
1757
<span class="w-[30px] opacity-50">39</span>
1758
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1759
</li>
1760
1761
<li class="flex flex-row">
1762
<span class="w-[30px] opacity-50">40</span>
1763
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1764
</li>
1765
1766
<li class="flex flex-row">
1767
<span class="w-[30px] opacity-50">41</span>
1768
<p class="flex w-full overflow-hidden whitespace-pre"> <ul class="space-y-4"></p>
1769
</li>
1770
1771
<li class="flex flex-row">
1772
<span class="w-[30px] opacity-50">42</span>
1773
<p class="flex w-full overflow-hidden whitespace-pre"> {% for item in strings.difference.traditional.items %}</p>
1774
</li>
1775
1776
<li class="flex flex-row">
1777
<span class="w-[30px] opacity-50">43</span>
1778
<p class="flex w-full overflow-hidden whitespace-pre"> <li class="flex items-start gap-3"></p>
1779
</li>
1780
1781
<li class="flex flex-row">
1782
<span class="w-[30px] opacity-50">44</span>
1783
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="mt-1 shrink-0 w-4 h-4 rounded-full border border-brand-warn/40 flex items-center justify-center"></p>
1784
</li>
1785
1786
<li class="flex flex-row">
1787
<span class="w-[30px] opacity-50">45</span>
1788
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="w-1.5 h-1.5 rounded-full bg-brand-warn/60"></span></p>
1789
</li>
1790
1791
<li class="flex flex-row">
1792
<span class="w-[30px] opacity-50">46</span>
1793
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
1794
</li>
1795
1796
<li class="flex flex-row">
1797
<span class="w-[30px] opacity-50">47</span>
1798
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-sm text-brand-muted leading-relaxed">{{ item }}</span></p>
1799
</li>
1800
1801
<li class="flex flex-row">
1802
<span class="w-[30px] opacity-50">48</span>
1803
<p class="flex w-full overflow-hidden whitespace-pre"> </li></p>
1804
</li>
1805
1806
<li class="flex flex-row">
1807
<span class="w-[30px] opacity-50">49</span>
1808
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
1809
</li>
1810
1811
<li class="flex flex-row">
1812
<span class="w-[30px] opacity-50">50</span>
1813
<p class="flex w-full overflow-hidden whitespace-pre"> </ul></p>
1814
</li>
1815
1816
<li class="flex flex-row">
1817
<span class="w-[30px] opacity-50">51</span>
1818
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1819
</li>
1820
1821
<li class="flex flex-row">
1822
<span class="w-[30px] opacity-50">52</span>
1823
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1824
</li>
1825
1826
<li class="flex flex-row">
1827
<span class="w-[30px] opacity-50">53</span>
1828
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1829
</li>
1830
1831
<li class="flex flex-row">
1832
<span class="w-[30px] opacity-50">54</span>
1833
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1834
</li>
1835
1836
<li class="flex flex-row">
1837
<span class="w-[30px] opacity-50">55</span>
1838
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
1839
</li>
1840
1841
<li class="flex flex-row">
1842
<span class="w-[30px] opacity-50">56</span>
1843
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1844
</li>
1845
1846
</ul>
1847
<div class="absolute inset-0 bg-linear-to-r from-brand-base to-transparent"></div>
1848
1849
</div>
1850
</section>
1851
1852
1853
1854
1855
1856
1857
<section id="services" class="relative border-t border-brand-border flex flex-row">
1858
<div class="relative flex flex-1 flex-row">
1859
1860
1861
<ul class="absolute inset-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
1862
1863
<li class="flex flex-row">
1864
<span class="w-[30px] opacity-50">1</span>
1865
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell, sectionHeader with context %}</p>
1866
</li>
1867
1868
<li class="flex flex-row">
1869
<span class="w-[30px] opacity-50">2</span>
1870
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1871
</li>
1872
1873
<li class="flex flex-row">
1874
<span class="w-[30px] opacity-50">3</span>
1875
<p class="flex w-full overflow-hidden whitespace-pre">{# SERVICES — BENTO GRID #}</p>
1876
</li>
1877
1878
<li class="flex flex-row">
1879
<span class="w-[30px] opacity-50">4</span>
1880
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "services", strings.services.sectionLabel, strings.services.sectionSublabel) %}</p>
1881
</li>
1882
1883
<li class="flex flex-row">
1884
<span class="w-[30px] opacity-50">5</span>
1885
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1886
</li>
1887
1888
<li class="flex flex-row">
1889
<span class="w-[30px] opacity-50">6</span>
1890
<p class="flex w-full overflow-hidden whitespace-pre"> {{ sectionHeader("h" ~ (sectionNum + 1), strings.services.eyebrow, strings.services.headline, strings.services.subtitle) }}</p>
1891
</li>
1892
1893
<li class="flex flex-row">
1894
<span class="w-[30px] opacity-50">7</span>
1895
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1896
</li>
1897
1898
<li class="flex flex-row">
1899
<span class="w-[30px] opacity-50">8</span>
1900
<p class="flex w-full overflow-hidden whitespace-pre"> {# Bento grid #}</p>
1901
</li>
1902
1903
<li class="flex flex-row">
1904
<span class="w-[30px] opacity-50">9</span>
1905
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-brand-border overflow-hidden relative"></p>
1906
</li>
1907
1908
<li class="flex flex-row">
1909
<span class="w-[30px] opacity-50">10</span>
1910
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1911
</li>
1912
1913
<li class="flex flex-row">
1914
<span class="w-[30px] opacity-50">11</span>
1915
<p class="flex w-full overflow-hidden whitespace-pre"> {% for service in strings.services.items %}</p>
1916
</li>
1917
1918
<li class="flex flex-row">
1919
<span class="w-[30px] opacity-50">12</span>
1920
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="cursor-default group relative z-10 bg-brand-base hover:bg-brand-surface/60 transition-colors duration-200 p-8 flex flex-col gap-6</p>
1921
</li>
1922
1923
<li class="flex flex-row">
1924
<span class="w-[30px] opacity-50">13</span>
1925
<p class="flex w-full overflow-hidden whitespace-pre"> {% if loop.index == 1 %}lg:col-span-2{% endif %}</p>
1926
</li>
1927
1928
<li class="flex flex-row">
1929
<span class="w-[30px] opacity-50">14</span>
1930
<p class="flex w-full overflow-hidden whitespace-pre"> {% if loop.index == 4 %}lg:col-span-2{% endif %}"></p>
1931
</li>
1932
1933
<li class="flex flex-row">
1934
<span class="w-[30px] opacity-50">15</span>
1935
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1936
</li>
1937
1938
<li class="flex flex-row">
1939
<span class="w-[30px] opacity-50">16</span>
1940
<p class="flex w-full overflow-hidden whitespace-pre"> {# Icon + element label #}</p>
1941
</li>
1942
1943
<li class="flex flex-row">
1944
<span class="w-[30px] opacity-50">17</span>
1945
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-start justify-between"></p>
1946
</li>
1947
1948
<li class="flex flex-row">
1949
<span class="w-[30px] opacity-50">18</span>
1950
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="w-10 h-10 text-brand-reactive group-hover:text-brand-text transition-colors"></p>
1951
</li>
1952
1953
<li class="flex flex-row">
1954
<span class="w-[30px] opacity-50">19</span>
1955
<p class="flex w-full overflow-hidden whitespace-pre"> {% svg service.icon, "w-10 h-10" %}</p>
1956
</li>
1957
1958
<li class="flex flex-row">
1959
<span class="w-[30px] opacity-50">20</span>
1960
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1961
</li>
1962
1963
<li class="flex flex-row">
1964
<span class="w-[30px] opacity-50">21</span>
1965
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="text-right"></p>
1966
</li>
1967
1968
<li class="flex flex-row">
1969
<span class="w-[30px] opacity-50">22</span>
1970
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-[10px] text-brand-faint cursor-default">{{ service.atomicNumber }}</div></p>
1971
</li>
1972
1973
<li class="flex flex-row">
1974
<span class="w-[30px] opacity-50">23</span>
1975
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-xs font-medium text-brand-reactive cursor-default">[{{ service.element }}]</div></p>
1976
</li>
1977
1978
<li class="flex flex-row">
1979
<span class="w-[30px] opacity-50">24</span>
1980
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1981
</li>
1982
1983
<li class="flex flex-row">
1984
<span class="w-[30px] opacity-50">25</span>
1985
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
1986
</li>
1987
1988
<li class="flex flex-row">
1989
<span class="w-[30px] opacity-50">26</span>
1990
<p class="flex w-full overflow-hidden whitespace-pre"></p>
1991
</li>
1992
1993
<li class="flex flex-row">
1994
<span class="w-[30px] opacity-50">27</span>
1995
<p class="flex w-full overflow-hidden whitespace-pre"> {# Content #}</p>
1996
</li>
1997
1998
<li class="flex flex-row">
1999
<span class="w-[30px] opacity-50">28</span>
2000
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex-1 space-y-3"></p>
2001
</li>
2002
2003
<li class="flex flex-row">
2004
<span class="w-[30px] opacity-50">29</span>
2005
<p class="flex w-full overflow-hidden whitespace-pre"> <h3 class="font-semibold text-brand-text text-base cursor-default">{{ service.title }}</h3></p>
2006
</li>
2007
2008
<li class="flex flex-row">
2009
<span class="w-[30px] opacity-50">30</span>
2010
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="text-sm text-brand-muted leading-relaxed cursor-default">{{ service.description }}</p></p>
2011
</li>
2012
2013
<li class="flex flex-row">
2014
<span class="w-[30px] opacity-50">31</span>
2015
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2016
</li>
2017
2018
<li class="flex flex-row">
2019
<span class="w-[30px] opacity-50">32</span>
2020
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2021
</li>
2022
2023
<li class="flex flex-row">
2024
<span class="w-[30px] opacity-50">33</span>
2025
<p class="flex w-full overflow-hidden whitespace-pre"> {# Tags #}</p>
2026
</li>
2027
2028
<li class="flex flex-row">
2029
<span class="w-[30px] opacity-50">34</span>
2030
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex flex-wrap gap-2"></p>
2031
</li>
2032
2033
<li class="flex flex-row">
2034
<span class="w-[30px] opacity-50">35</span>
2035
<p class="flex w-full overflow-hidden whitespace-pre"> {% for tag in service.tags %}</p>
2036
</li>
2037
2038
<li class="flex flex-row">
2039
<span class="w-[30px] opacity-50">36</span>
2040
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default</p>
2041
</li>
2042
2043
<li class="flex flex-row">
2044
<span class="w-[30px] opacity-50">37</span>
2045
<p class="flex w-full overflow-hidden whitespace-pre"> group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors"></p>
2046
</li>
2047
2048
<li class="flex flex-row">
2049
<span class="w-[30px] opacity-50">38</span>
2050
<p class="flex w-full overflow-hidden whitespace-pre"> {{ tag }}</p>
2051
</li>
2052
2053
<li class="flex flex-row">
2054
<span class="w-[30px] opacity-50">39</span>
2055
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
2056
</li>
2057
2058
<li class="flex flex-row">
2059
<span class="w-[30px] opacity-50">40</span>
2060
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
2061
</li>
2062
2063
<li class="flex flex-row">
2064
<span class="w-[30px] opacity-50">41</span>
2065
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2066
</li>
2067
2068
<li class="flex flex-row">
2069
<span class="w-[30px] opacity-50">42</span>
2070
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2071
</li>
2072
2073
<li class="flex flex-row">
2074
<span class="w-[30px] opacity-50">43</span>
2075
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2076
</li>
2077
2078
<li class="flex flex-row">
2079
<span class="w-[30px] opacity-50">44</span>
2080
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
2081
</li>
2082
2083
<li class="flex flex-row">
2084
<span class="w-[30px] opacity-50">45</span>
2085
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="cursor-default justify-center items-center group relative z-10 bg-brand-base transition-colors duration-200 p-8 flex flex-col gap-6 sm:col-span-2 lg:col-span-2"></p>
2086
</li>
2087
2088
<li class="flex flex-row">
2089
<span class="w-[30px] opacity-50">46</span>
2090
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.services.cta.href }}"</p>
2091
</li>
2092
2093
<li class="flex flex-row">
2094
<span class="w-[30px] opacity-50">47</span>
2095
<p class="flex w-full overflow-hidden whitespace-pre"> class="relative z-10 btn-reactive-lg justify-center"></p>
2096
</li>
2097
2098
<li class="flex flex-row">
2099
<span class="w-[30px] opacity-50">48</span>
2100
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.services.cta.label }}</p>
2101
</li>
2102
2103
<li class="flex flex-row">
2104
<span class="w-[30px] opacity-50">49</span>
2105
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
2106
</li>
2107
2108
<li class="flex flex-row">
2109
<span class="w-[30px] opacity-50">50</span>
2110
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="opacity-50 absolute inset-0 z-0">{% inlineSVG "assets/images/ansi.svg" %}</div></p>
2111
</li>
2112
2113
<li class="flex flex-row">
2114
<span class="w-[30px] opacity-50">51</span>
2115
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2116
</li>
2117
2118
<li class="flex flex-row">
2119
<span class="w-[30px] opacity-50">52</span>
2120
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2121
</li>
2122
2123
<li class="flex flex-row">
2124
<span class="w-[30px] opacity-50">53</span>
2125
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2126
</li>
2127
2128
<li class="flex flex-row">
2129
<span class="w-[30px] opacity-50">54</span>
2130
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2131
</li>
2132
2133
<li class="flex flex-row">
2134
<span class="w-[30px] opacity-50">55</span>
2135
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
2136
</li>
2137
2138
<li class="flex flex-row">
2139
<span class="w-[30px] opacity-50">56</span>
2140
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2141
</li>
2142
2143
</ul>
2144
2145
2146
<div class="absolute inset-0 bg-linear-to-l from-brand-base to-transparent"></div>
2147
</div>
2148
2149
<div class="relative flex flex-row border-r bg-brand-base border-brand-border pb-1 pt-1 w-[33px] justify-end items-start">
2150
2151
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/80"><em class="text-brand-stable">#03</em> CORE DISCIPLINES</span>
2152
2153
2154
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/40 italic">// exports: [Web, Mobile, Workflow, Prototyping]</span>
2155
2156
</div>
2157
2158
<div class="w-full max-w-7xl mx-auto px-2 md:px-6 py-24 md:py-32 z-40">
2159
2160
2161
2162
<div class="mb-16 space-y-4 max-w-2xl">
2163
<div class="flex items-center gap-3">
2164
<span class="block w-6 h-px bg-brand-reactive"></span>
2165
<p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive">
2166
Service Elements
2167
</p>
2168
</div>
2169
<h4 class="text-3xl md:text-5xl font-bold tracking-tight text-brand-text leading-tight">
2170
High-Performance<br>Solutions.
2171
</h4>
2172
<p class="text-lg text-brand-muted leading-relaxed">Specialized engineering for brands that value speed, security, and scalability.</p>
2173
</div>
2174
2175
2176
2177
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-brand-border overflow-hidden relative">
2178
2179
2180
<div class="cursor-default group relative z-10 bg-brand-base hover:bg-brand-surface/60 transition-colors duration-200 p-8 flex flex-col gap-6
2181
lg:col-span-2
2182
">
2183
2184
2185
<div class="flex items-start justify-between">
2186
<div class="w-10 h-10 text-brand-reactive group-hover:text-brand-text transition-colors">
2187
<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
2188
<style>
2189
.nucleus {
2190
animation: nucleus-pulse 2s ease-in-out infinite;
2191
transform-origin: 12px 12px;
2192
}
2193
@keyframes nucleus-pulse {
2194
0%, 100% { transform: scale(1); opacity: 1; }
2195
50% { transform: scale(1.5); opacity: 0.6; }
2196
}
2197
</style>
2198
2199
2200
<ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(0 12 12)" stroke-width="0.75" opacity="0.5"/>
2201
<ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(60 12 12)" stroke-width="0.75" opacity="0.5"/>
2202
<ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(120 12 12)" stroke-width="0.75" opacity="0.5"/>
2203
2204
2205
<circle class="nucleus" cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/>
2206
2207
2208
<g transform="rotate(0 12 12)">
2209
<circle r="1" fill="currentColor" stroke="none">
2210
<animateMotion dur="2s" repeatCount="indefinite"
2211
path="M 2,12 A 10,4 0 0,1 22,12 A 10,4 0 0,1 2,12"/>
2212
</circle>
2213
</g>
2214
2215
2216
<g transform="rotate(60 12 12)">
2217
<circle r="1" fill="currentColor" stroke="none">
2218
<animateMotion dur="3s" repeatCount="indefinite" begin="-1s"
2219
path="M 2,12 A 10,4 0 0,1 22,12 A 10,4 0 0,1 2,12"/>
2220
</circle>
2221
</g>
2222
2223
2224
<g transform="rotate(120 12 12)">
2225
<circle r="1" fill="currentColor" stroke="none">
2226
<animateMotion dur="1.7s" repeatCount="indefinite" begin="-0.8s"
2227
path="M 2,12 A 10,4 0 0,1 22,12 A 10,4 0 0,1 2,12"/>
2228
</circle>
2229
</g>
2230
</svg>
2231
2232
</div>
2233
<div class="text-right">
2234
<div class="font-mono text-[10px] text-brand-faint cursor-default">00</div>
2235
<div class="font-mono text-xs font-medium text-brand-reactive cursor-default">[We]</div>
2236
</div>
2237
</div>
2238
2239
2240
<div class="flex-1 space-y-3">
2241
<h3 class="font-semibold text-brand-text text-base cursor-default">Web Engineering</h3>
2242
<p class="text-sm text-brand-muted leading-relaxed cursor-default">Custom applications and e-commerce storefronts built for speed and conversion. We specialize in React, Next.js, and headless architecture.</p>
2243
</div>
2244
2245
2246
<div class="flex flex-wrap gap-2">
2247
2248
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2249
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2250
Next.js
2251
</span>
2252
2253
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2254
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2255
React
2256
</span>
2257
2258
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2259
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2260
Shopify
2261
</span>
2262
2263
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2264
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2265
Performance
2266
</span>
2267
2268
</div>
2269
2270
</div>
2271
2272
<div class="cursor-default group relative z-10 bg-brand-base hover:bg-brand-surface/60 transition-colors duration-200 p-8 flex flex-col gap-6
2273
2274
">
2275
2276
2277
<div class="flex items-start justify-between">
2278
<div class="w-10 h-10 text-brand-reactive group-hover:text-brand-text transition-colors">
2279
<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
2280
<style>
2281
.wave-sm {transform: translateX(-3.5px); animation: wave-emit 2s ease-out infinite 0s; }
2282
.wave-md {transform: translateX(-3.2px); animation: wave-emit 2s ease-out infinite 0.45s; }
2283
.wave-lg {transform: translateX(-2.7px); animation: wave-emit 2s ease-out infinite 0.9s; }
2284
@keyframes wave-emit {
2285
0% { opacity: 0; }
2286
25% { opacity: 1; }
2287
100% { opacity: 0; }
2288
}
2289
</style>
2290
<rect x="6" y="2" width="12" height="20" rx="2" ry="2"/>
2291
<line x1="10" y1="18.5" x2="14" y2="18.5"/>
2292
<line x1="10" y1="5" x2="14" y2="5"/>
2293
<path class="wave-sm" d="M15 10.5 a2 2 0 0 1 0 3" stroke-width="1"/>
2294
<path class="wave-md" d="M16 9.5 a3 3 0 0 1 0 5" stroke-width="1"/>
2295
<path class="wave-lg" d="M16.5 8.5 a4 4 0 0 1 0 7" stroke-width="1"/>
2296
</svg>
2297
2298
</div>
2299
<div class="text-right">
2300
<div class="font-mono text-[10px] text-brand-faint cursor-default">01</div>
2301
<div class="font-mono text-xs font-medium text-brand-reactive cursor-default">[Mo]</div>
2302
</div>
2303
</div>
2304
2305
2306
<div class="flex-1 space-y-3">
2307
<h3 class="font-semibold text-brand-text text-base cursor-default">Mobile Development</h3>
2308
<p class="text-sm text-brand-muted leading-relaxed cursor-default">Native-quality iOS and Android apps. From real-time communication tools (VoIP) to complex marketplace platforms.</p>
2309
</div>
2310
2311
2312
<div class="flex flex-wrap gap-2">
2313
2314
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2315
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2316
Swift
2317
</span>
2318
2319
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2320
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2321
Kotlin
2322
</span>
2323
2324
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2325
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2326
React Native
2327
</span>
2328
2329
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2330
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2331
VoIP
2332
</span>
2333
2334
</div>
2335
2336
</div>
2337
2338
<div class="cursor-default group relative z-10 bg-brand-base hover:bg-brand-surface/60 transition-colors duration-200 p-8 flex flex-col gap-6
2339
2340
">
2341
2342
2343
<div class="flex items-start justify-between">
2344
<div class="w-10 h-10 text-brand-reactive group-hover:text-brand-text transition-colors">
2345
<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
2346
<g>
2347
<animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="10s" repeatCount="indefinite"/>
2348
<circle cx="12" cy="12" r="3"/>
2349
<path d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42">
2350
<animate attributeName="stroke-width" values="1.5;2.4;1.5" dur="2s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/>
2351
<animate attributeName="stroke-opacity" values="1;0.6;1" dur="2s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/>
2352
</path>
2353
<circle cx="12" cy="12" r="7" stroke-dasharray="3 2"/>
2354
</g>
2355
</svg>
2356
2357
</div>
2358
<div class="text-right">
2359
<div class="font-mono text-[10px] text-brand-faint cursor-default">02</div>
2360
<div class="font-mono text-xs font-medium text-brand-reactive cursor-default">[Wf]</div>
2361
</div>
2362
</div>
2363
2364
2365
<div class="flex-1 space-y-3">
2366
<h3 class="font-semibold text-brand-text text-base cursor-default">Workflow Engineering</h3>
2367
<p class="text-sm text-brand-muted leading-relaxed cursor-default">We build internal tools and automations that connect your existing apps, saving your team hundreds of hours of manual work.</p>
2368
</div>
2369
2370
2371
<div class="flex flex-wrap gap-2">
2372
2373
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2374
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2375
Automation
2376
</span>
2377
2378
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2379
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2380
APIs
2381
</span>
2382
2383
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2384
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2385
Data Pipelines
2386
</span>
2387
2388
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2389
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2390
Internal Tools
2391
</span>
2392
2393
</div>
2394
2395
</div>
2396
2397
<div class="cursor-default group relative z-10 bg-brand-base hover:bg-brand-surface/60 transition-colors duration-200 p-8 flex flex-col gap-6
2398
2399
lg:col-span-2">
2400
2401
2402
<div class="flex items-start justify-between">
2403
<div class="w-10 h-10 text-brand-reactive group-hover:text-brand-text transition-colors">
2404
<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 30" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
2405
<style>
2406
@keyframes liftoff {
2407
0%, 100% { transform: translateY(0); }
2408
50% { transform: translateY(-2px); }
2409
}
2410
@keyframes exhaust-wave {
2411
0% { opacity: 0; }
2412
25% { opacity: 1; }
2413
100% { opacity: 0; }
2414
}
2415
.rocket-liftoff { animation: liftoff 2s ease-in-out infinite; transform-origin: center; }
2416
.exhaust-primary { animation: exhaust-wave 1.8s linear infinite 0s; }
2417
.exhaust-secondary { animation: exhaust-wave 1.8s linear infinite 0.45s; }
2418
.exhaust-tertiary { animation: exhaust-wave 1.8s linear infinite 0.9s; }
2419
</style>
2420
<g class="rocket-liftoff">
2421
<path d="M12 2C12 2 7 7 7 13v2l2 2h6l2-2v-2c0-6-5-11-5-11z"/>
2422
<circle cx="12" cy="10" r="1.5"/>
2423
<path d="M7 15 L4 18 L7 17"/>
2424
<path d="M17 15 L20 18 L17 17"/>
2425
</g>
2426
<path class="exhaust-primary" d="M10 19 Q12 23 14 19"/>
2427
<path class="exhaust-secondary" d="M10.5 21 Q12 25 13.5 21" stroke-width="1"/>
2428
<path class="exhaust-tertiary" d="M10 23 Q12 28 14 23" stroke-width="0.75"/>
2429
</svg>
2430
2431
</div>
2432
<div class="text-right">
2433
<div class="font-mono text-[10px] text-brand-faint cursor-default">03</div>
2434
<div class="font-mono text-xs font-medium text-brand-reactive cursor-default">[Rp]</div>
2435
</div>
2436
</div>
2437
2438
2439
<div class="flex-1 space-y-3">
2440
<h3 class="font-semibold text-brand-text text-base cursor-default">Rapid Prototyping</h3>
2441
<p class="text-sm text-brand-muted leading-relaxed cursor-default">Need to validate an idea fast? We build functional MVPs for startups and founders in weeks, not months.</p>
2442
</div>
2443
2444
2445
<div class="flex flex-wrap gap-2">
2446
2447
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2448
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2449
MVPs
2450
</span>
2451
2452
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2453
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2454
Consulting
2455
</span>
2456
2457
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2458
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2459
Validation
2460
</span>
2461
2462
<span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default
2463
group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors">
2464
Product Strategy
2465
</span>
2466
2467
</div>
2468
2469
</div>
2470
2471
<div class="cursor-default justify-center items-center group relative z-10 bg-brand-base transition-colors duration-200 p-8 flex flex-col gap-6 sm:col-span-2 lg:col-span-2">
2472
<a href="#contact"
2473
class="relative z-10 btn-reactive-lg justify-center">
2474
Let's Discuss Your Project
2475
</a>
2476
<div class="opacity-50 absolute inset-0 z-0"><svg class="h-full w-full" preserveAspectRatio="none"><defs><pattern id="knurl-pattern-1" x="0" y="0" width="14" height="28" patternUnits="userSpaceOnUse"><path class="fill-brand-border-bright" d="M12 3.6V2.4H13.2V3.6H12ZM0 25.2V24H1.2V25.2H0ZM0 20.4V19.2H1.2V20.4H0ZM0 15.6V14.4H1.2V15.6H0ZM0 10.8V9.6H1.2V10.8H0ZM0 6V4.8H1.2V6H0ZM0 1.2V0H1.2V1.2H0ZM2.4 27.6V26.4H3.6V27.6H2.4ZM2.4 22.8V21.6H3.6V22.8H2.4ZM2.4 18V16.8H3.6V18H2.4ZM2.4 13.2V12H3.6V13.2H2.4ZM2.4 8.4V7.2H3.6V8.4H2.4ZM2.4 3.6V2.4H3.6V3.6H2.4ZM4.8 25.2V24H6V25.2H4.8ZM4.8 20.4V19.2H6V20.4H4.8ZM4.8 15.6V14.4H6V15.6H4.8ZM4.8 10.8V9.6H6V10.8H4.8ZM4.8 6V4.8H6V6H4.8ZM4.8 1.2V0H6V1.2H4.8ZM7.2 27.6V26.4H8.4V27.6H7.2ZM7.2 22.8V21.6H8.4V22.8H7.2ZM7.2 18V16.8H8.4V18H7.2ZM7.2 13.2V12H8.4V13.2H7.2ZM7.2 8.4V7.2H8.4V8.4H7.2ZM7.2 3.6V2.4H8.4V3.6H7.2ZM9.6 25.2V24H10.8V25.2H9.6ZM9.6 20.4V19.2H10.8V20.4H9.6ZM9.6 15.6V14.4H10.8V15.6H9.6ZM9.6 10.8V9.6H10.8V10.8H9.6ZM9.6 6V4.8H10.8V6H9.6ZM9.6 1.2V0H10.8V1.2H9.6ZM12 27.6V26.4H13.2V27.6H12ZM12 22.8V21.6H13.2V22.8H12ZM12 18V16.8H13.2V18H12ZM12 13.2V12H13.2V13.2H12ZM12 8.4V7.2H13.2V8.4H12Z" opacity="1"></path></pattern></defs><rect width="100%" height="100%" fill="url(#knurl-pattern-1)"></rect></svg></div>
2477
</div>
2478
2479
</div>
2480
2481
2482
</div>
2483
2484
<div class="relative flex flex-1 flex-col items-start justify-start overflow-hidden z-0">
2485
2486
<ul class="absolute right-0 top-0 bottom-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
2487
2488
<li class="flex flex-row">
2489
<span class="w-[30px] opacity-50">1</span>
2490
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell, sectionHeader with context %}</p>
2491
</li>
2492
2493
<li class="flex flex-row">
2494
<span class="w-[30px] opacity-50">2</span>
2495
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2496
</li>
2497
2498
<li class="flex flex-row">
2499
<span class="w-[30px] opacity-50">3</span>
2500
<p class="flex w-full overflow-hidden whitespace-pre">{# SERVICES — BENTO GRID #}</p>
2501
</li>
2502
2503
<li class="flex flex-row">
2504
<span class="w-[30px] opacity-50">4</span>
2505
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "services", strings.services.sectionLabel, strings.services.sectionSublabel) %}</p>
2506
</li>
2507
2508
<li class="flex flex-row">
2509
<span class="w-[30px] opacity-50">5</span>
2510
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2511
</li>
2512
2513
<li class="flex flex-row">
2514
<span class="w-[30px] opacity-50">6</span>
2515
<p class="flex w-full overflow-hidden whitespace-pre"> {{ sectionHeader("h" ~ (sectionNum + 1), strings.services.eyebrow, strings.services.headline, strings.services.subtitle) }}</p>
2516
</li>
2517
2518
<li class="flex flex-row">
2519
<span class="w-[30px] opacity-50">7</span>
2520
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2521
</li>
2522
2523
<li class="flex flex-row">
2524
<span class="w-[30px] opacity-50">8</span>
2525
<p class="flex w-full overflow-hidden whitespace-pre"> {# Bento grid #}</p>
2526
</li>
2527
2528
<li class="flex flex-row">
2529
<span class="w-[30px] opacity-50">9</span>
2530
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-brand-border overflow-hidden relative"></p>
2531
</li>
2532
2533
<li class="flex flex-row">
2534
<span class="w-[30px] opacity-50">10</span>
2535
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2536
</li>
2537
2538
<li class="flex flex-row">
2539
<span class="w-[30px] opacity-50">11</span>
2540
<p class="flex w-full overflow-hidden whitespace-pre"> {% for service in strings.services.items %}</p>
2541
</li>
2542
2543
<li class="flex flex-row">
2544
<span class="w-[30px] opacity-50">12</span>
2545
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="cursor-default group relative z-10 bg-brand-base hover:bg-brand-surface/60 transition-colors duration-200 p-8 flex flex-col gap-6</p>
2546
</li>
2547
2548
<li class="flex flex-row">
2549
<span class="w-[30px] opacity-50">13</span>
2550
<p class="flex w-full overflow-hidden whitespace-pre"> {% if loop.index == 1 %}lg:col-span-2{% endif %}</p>
2551
</li>
2552
2553
<li class="flex flex-row">
2554
<span class="w-[30px] opacity-50">14</span>
2555
<p class="flex w-full overflow-hidden whitespace-pre"> {% if loop.index == 4 %}lg:col-span-2{% endif %}"></p>
2556
</li>
2557
2558
<li class="flex flex-row">
2559
<span class="w-[30px] opacity-50">15</span>
2560
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2561
</li>
2562
2563
<li class="flex flex-row">
2564
<span class="w-[30px] opacity-50">16</span>
2565
<p class="flex w-full overflow-hidden whitespace-pre"> {# Icon + element label #}</p>
2566
</li>
2567
2568
<li class="flex flex-row">
2569
<span class="w-[30px] opacity-50">17</span>
2570
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-start justify-between"></p>
2571
</li>
2572
2573
<li class="flex flex-row">
2574
<span class="w-[30px] opacity-50">18</span>
2575
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="w-10 h-10 text-brand-reactive group-hover:text-brand-text transition-colors"></p>
2576
</li>
2577
2578
<li class="flex flex-row">
2579
<span class="w-[30px] opacity-50">19</span>
2580
<p class="flex w-full overflow-hidden whitespace-pre"> {% svg service.icon, "w-10 h-10" %}</p>
2581
</li>
2582
2583
<li class="flex flex-row">
2584
<span class="w-[30px] opacity-50">20</span>
2585
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2586
</li>
2587
2588
<li class="flex flex-row">
2589
<span class="w-[30px] opacity-50">21</span>
2590
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="text-right"></p>
2591
</li>
2592
2593
<li class="flex flex-row">
2594
<span class="w-[30px] opacity-50">22</span>
2595
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-[10px] text-brand-faint cursor-default">{{ service.atomicNumber }}</div></p>
2596
</li>
2597
2598
<li class="flex flex-row">
2599
<span class="w-[30px] opacity-50">23</span>
2600
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-xs font-medium text-brand-reactive cursor-default">[{{ service.element }}]</div></p>
2601
</li>
2602
2603
<li class="flex flex-row">
2604
<span class="w-[30px] opacity-50">24</span>
2605
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2606
</li>
2607
2608
<li class="flex flex-row">
2609
<span class="w-[30px] opacity-50">25</span>
2610
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2611
</li>
2612
2613
<li class="flex flex-row">
2614
<span class="w-[30px] opacity-50">26</span>
2615
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2616
</li>
2617
2618
<li class="flex flex-row">
2619
<span class="w-[30px] opacity-50">27</span>
2620
<p class="flex w-full overflow-hidden whitespace-pre"> {# Content #}</p>
2621
</li>
2622
2623
<li class="flex flex-row">
2624
<span class="w-[30px] opacity-50">28</span>
2625
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex-1 space-y-3"></p>
2626
</li>
2627
2628
<li class="flex flex-row">
2629
<span class="w-[30px] opacity-50">29</span>
2630
<p class="flex w-full overflow-hidden whitespace-pre"> <h3 class="font-semibold text-brand-text text-base cursor-default">{{ service.title }}</h3></p>
2631
</li>
2632
2633
<li class="flex flex-row">
2634
<span class="w-[30px] opacity-50">30</span>
2635
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="text-sm text-brand-muted leading-relaxed cursor-default">{{ service.description }}</p></p>
2636
</li>
2637
2638
<li class="flex flex-row">
2639
<span class="w-[30px] opacity-50">31</span>
2640
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2641
</li>
2642
2643
<li class="flex flex-row">
2644
<span class="w-[30px] opacity-50">32</span>
2645
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2646
</li>
2647
2648
<li class="flex flex-row">
2649
<span class="w-[30px] opacity-50">33</span>
2650
<p class="flex w-full overflow-hidden whitespace-pre"> {# Tags #}</p>
2651
</li>
2652
2653
<li class="flex flex-row">
2654
<span class="w-[30px] opacity-50">34</span>
2655
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex flex-wrap gap-2"></p>
2656
</li>
2657
2658
<li class="flex flex-row">
2659
<span class="w-[30px] opacity-50">35</span>
2660
<p class="flex w-full overflow-hidden whitespace-pre"> {% for tag in service.tags %}</p>
2661
</li>
2662
2663
<li class="flex flex-row">
2664
<span class="w-[30px] opacity-50">36</span>
2665
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-2 py-0.5 rounded border border-brand-border font-mono text-[10px] text-brand-faint cursor-default</p>
2666
</li>
2667
2668
<li class="flex flex-row">
2669
<span class="w-[30px] opacity-50">37</span>
2670
<p class="flex w-full overflow-hidden whitespace-pre"> group-hover:border-brand-border-bright group-hover:text-brand-muted transition-colors"></p>
2671
</li>
2672
2673
<li class="flex flex-row">
2674
<span class="w-[30px] opacity-50">38</span>
2675
<p class="flex w-full overflow-hidden whitespace-pre"> {{ tag }}</p>
2676
</li>
2677
2678
<li class="flex flex-row">
2679
<span class="w-[30px] opacity-50">39</span>
2680
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
2681
</li>
2682
2683
<li class="flex flex-row">
2684
<span class="w-[30px] opacity-50">40</span>
2685
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
2686
</li>
2687
2688
<li class="flex flex-row">
2689
<span class="w-[30px] opacity-50">41</span>
2690
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2691
</li>
2692
2693
<li class="flex flex-row">
2694
<span class="w-[30px] opacity-50">42</span>
2695
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2696
</li>
2697
2698
<li class="flex flex-row">
2699
<span class="w-[30px] opacity-50">43</span>
2700
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2701
</li>
2702
2703
<li class="flex flex-row">
2704
<span class="w-[30px] opacity-50">44</span>
2705
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
2706
</li>
2707
2708
<li class="flex flex-row">
2709
<span class="w-[30px] opacity-50">45</span>
2710
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="cursor-default justify-center items-center group relative z-10 bg-brand-base transition-colors duration-200 p-8 flex flex-col gap-6 sm:col-span-2 lg:col-span-2"></p>
2711
</li>
2712
2713
<li class="flex flex-row">
2714
<span class="w-[30px] opacity-50">46</span>
2715
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.services.cta.href }}"</p>
2716
</li>
2717
2718
<li class="flex flex-row">
2719
<span class="w-[30px] opacity-50">47</span>
2720
<p class="flex w-full overflow-hidden whitespace-pre"> class="relative z-10 btn-reactive-lg justify-center"></p>
2721
</li>
2722
2723
<li class="flex flex-row">
2724
<span class="w-[30px] opacity-50">48</span>
2725
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.services.cta.label }}</p>
2726
</li>
2727
2728
<li class="flex flex-row">
2729
<span class="w-[30px] opacity-50">49</span>
2730
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
2731
</li>
2732
2733
<li class="flex flex-row">
2734
<span class="w-[30px] opacity-50">50</span>
2735
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="opacity-50 absolute inset-0 z-0">{% inlineSVG "assets/images/ansi.svg" %}</div></p>
2736
</li>
2737
2738
<li class="flex flex-row">
2739
<span class="w-[30px] opacity-50">51</span>
2740
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2741
</li>
2742
2743
<li class="flex flex-row">
2744
<span class="w-[30px] opacity-50">52</span>
2745
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2746
</li>
2747
2748
<li class="flex flex-row">
2749
<span class="w-[30px] opacity-50">53</span>
2750
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2751
</li>
2752
2753
<li class="flex flex-row">
2754
<span class="w-[30px] opacity-50">54</span>
2755
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2756
</li>
2757
2758
<li class="flex flex-row">
2759
<span class="w-[30px] opacity-50">55</span>
2760
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
2761
</li>
2762
2763
<li class="flex flex-row">
2764
<span class="w-[30px] opacity-50">56</span>
2765
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2766
</li>
2767
2768
</ul>
2769
<div class="absolute inset-0 bg-linear-to-r from-brand-base to-transparent"></div>
2770
2771
</div>
2772
</section>
2773
2774
2775
2776
2777
2778
2779
<section id="subscription" class="relative border-t border-brand-border flex flex-row">
2780
<div class="relative flex flex-1 flex-row">
2781
2782
2783
<ul class="absolute inset-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
2784
2785
<li class="flex flex-row">
2786
<span class="w-[30px] opacity-50">1</span>
2787
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell, sectionHeader with context %}</p>
2788
</li>
2789
2790
<li class="flex flex-row">
2791
<span class="w-[30px] opacity-50">2</span>
2792
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2793
</li>
2794
2795
<li class="flex flex-row">
2796
<span class="w-[30px] opacity-50">3</span>
2797
<p class="flex w-full overflow-hidden whitespace-pre">{# STABLE ISOTOPE — SUBSCRIPTION #}</p>
2798
</li>
2799
2800
<li class="flex flex-row">
2801
<span class="w-[30px] opacity-50">4</span>
2802
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "subscription", strings.subscription.sectionLabel, strings.subscription.sectionSublabel) %}</p>
2803
</li>
2804
2805
<li class="flex flex-row">
2806
<span class="w-[30px] opacity-50">5</span>
2807
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2808
</li>
2809
2810
<li class="flex flex-row">
2811
<span class="w-[30px] opacity-50">6</span>
2812
<p class="flex w-full overflow-hidden whitespace-pre"> {{ sectionHeader("h" ~ (sectionNum + 1), strings.subscription.eyebrow, strings.subscription.headline, strings.subscription.subtitle, accent="stable") }}</p>
2813
</li>
2814
2815
<li class="flex flex-row">
2816
<span class="w-[30px] opacity-50">7</span>
2817
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2818
</li>
2819
2820
<li class="flex flex-row">
2821
<span class="w-[30px] opacity-50">8</span>
2822
<p class="flex w-full overflow-hidden whitespace-pre"> {# Feature card #}</p>
2823
</li>
2824
2825
<li class="flex flex-row">
2826
<span class="w-[30px] opacity-50">9</span>
2827
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="rounded-xl border border-brand-stable/30 bg-brand-surface/50 relative overflow-hidden card-glow-stable"></p>
2828
</li>
2829
2830
<li class="flex flex-row">
2831
<span class="w-[30px] opacity-50">10</span>
2832
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2833
</li>
2834
2835
<li class="flex flex-row">
2836
<span class="w-[30px] opacity-50">11</span>
2837
<p class="flex w-full overflow-hidden whitespace-pre"> {# Background glow #}</p>
2838
</li>
2839
2840
<li class="flex flex-row">
2841
<span class="w-[30px] opacity-50">12</span>
2842
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 bg-gradient-to-br from-brand-stable/5 via-transparent to-brand-reactive/5 pointer-events-none" aria-hidden="true"></div></p>
2843
</li>
2844
2845
<li class="flex flex-row">
2846
<span class="w-[30px] opacity-50">13</span>
2847
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2848
</li>
2849
2850
<li class="flex flex-row">
2851
<span class="w-[30px] opacity-50">14</span>
2852
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="relative p-10 md:p-14"></p>
2853
</li>
2854
2855
<li class="flex flex-row">
2856
<span class="w-[30px] opacity-50">15</span>
2857
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid md:grid-cols-2 gap-12 items-center"></p>
2858
</li>
2859
2860
<li class="flex flex-row">
2861
<span class="w-[30px] opacity-50">16</span>
2862
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2863
</li>
2864
2865
<li class="flex flex-row">
2866
<span class="w-[30px] opacity-50">17</span>
2867
<p class="flex w-full overflow-hidden whitespace-pre"> {# Features list #}</p>
2868
</li>
2869
2870
<li class="flex flex-row">
2871
<span class="w-[30px] opacity-50">18</span>
2872
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-6"></p>
2873
</li>
2874
2875
<li class="flex flex-row">
2876
<span class="w-[30px] opacity-50">19</span>
2877
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center gap-3 flex-wrap"></p>
2878
</li>
2879
2880
<li class="flex flex-row">
2881
<span class="w-[30px] opacity-50">20</span>
2882
<p class="flex w-full overflow-hidden whitespace-pre"> {% for badge in strings.subscription.badges %} </p>
2883
</li>
2884
2885
<li class="flex flex-row">
2886
<span class="w-[30px] opacity-50">21</span>
2887
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-3 py-1 rounded-full border border-brand-stable/40 bg-brand-stable/10 font-mono text-xs text-brand-stable"></p>
2888
</li>
2889
2890
<li class="flex flex-row">
2891
<span class="w-[30px] opacity-50">22</span>
2892
<p class="flex w-full overflow-hidden whitespace-pre"> {{ badge }}</p>
2893
</li>
2894
2895
<li class="flex flex-row">
2896
<span class="w-[30px] opacity-50">23</span>
2897
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
2898
</li>
2899
2900
<li class="flex flex-row">
2901
<span class="w-[30px] opacity-50">24</span>
2902
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
2903
</li>
2904
2905
<li class="flex flex-row">
2906
<span class="w-[30px] opacity-50">25</span>
2907
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
2908
</li>
2909
2910
<li class="flex flex-row">
2911
<span class="w-[30px] opacity-50">26</span>
2912
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2913
</li>
2914
2915
<li class="flex flex-row">
2916
<span class="w-[30px] opacity-50">27</span>
2917
<p class="flex w-full overflow-hidden whitespace-pre"> <ul class="space-y-4"></p>
2918
</li>
2919
2920
<li class="flex flex-row">
2921
<span class="w-[30px] opacity-50">28</span>
2922
<p class="flex w-full overflow-hidden whitespace-pre"> {% for feature in strings.subscription.features %}</p>
2923
</li>
2924
2925
<li class="flex flex-row">
2926
<span class="w-[30px] opacity-50">29</span>
2927
<p class="flex w-full overflow-hidden whitespace-pre"> <li class="flex items-start gap-3"></p>
2928
</li>
2929
2930
<li class="flex flex-row">
2931
<span class="w-[30px] opacity-50">30</span>
2932
<p class="flex w-full overflow-hidden whitespace-pre"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"</p>
2933
</li>
2934
2935
<li class="flex flex-row">
2936
<span class="w-[30px] opacity-50">31</span>
2937
<p class="flex w-full overflow-hidden whitespace-pre"> fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"</p>
2938
</li>
2939
2940
<li class="flex flex-row">
2941
<span class="w-[30px] opacity-50">32</span>
2942
<p class="flex w-full overflow-hidden whitespace-pre"> class="shrink-0 mt-0.5 text-brand-stable"></p>
2943
</li>
2944
2945
<li class="flex flex-row">
2946
<span class="w-[30px] opacity-50">33</span>
2947
<p class="flex w-full overflow-hidden whitespace-pre"> <polyline points="20 6 9 17 4 12"/></p>
2948
</li>
2949
2950
<li class="flex flex-row">
2951
<span class="w-[30px] opacity-50">34</span>
2952
<p class="flex w-full overflow-hidden whitespace-pre"> </svg></p>
2953
</li>
2954
2955
<li class="flex flex-row">
2956
<span class="w-[30px] opacity-50">35</span>
2957
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-sm text-brand-text leading-relaxed">{{ feature }}</span></p>
2958
</li>
2959
2960
<li class="flex flex-row">
2961
<span class="w-[30px] opacity-50">36</span>
2962
<p class="flex w-full overflow-hidden whitespace-pre"> </li></p>
2963
</li>
2964
2965
<li class="flex flex-row">
2966
<span class="w-[30px] opacity-50">37</span>
2967
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
2968
</li>
2969
2970
<li class="flex flex-row">
2971
<span class="w-[30px] opacity-50">38</span>
2972
<p class="flex w-full overflow-hidden whitespace-pre"> </ul></p>
2973
</li>
2974
2975
<li class="flex flex-row">
2976
<span class="w-[30px] opacity-50">39</span>
2977
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
2978
</li>
2979
2980
<li class="flex flex-row">
2981
<span class="w-[30px] opacity-50">40</span>
2982
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2983
</li>
2984
2985
<li class="flex flex-row">
2986
<span class="w-[30px] opacity-50">41</span>
2987
<p class="flex w-full overflow-hidden whitespace-pre"> {# CTA block #}</p>
2988
</li>
2989
2990
<li class="flex flex-row">
2991
<span class="w-[30px] opacity-50">42</span>
2992
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-8"></p>
2993
</li>
2994
2995
<li class="flex flex-row">
2996
<span class="w-[30px] opacity-50">43</span>
2997
<p class="flex w-full overflow-hidden whitespace-pre"></p>
2998
</li>
2999
3000
<li class="flex flex-row">
3001
<span class="w-[30px] opacity-50">44</span>
3002
<p class="flex w-full overflow-hidden whitespace-pre"> {# Isotope visual element #}</p>
3003
</li>
3004
3005
<li class="flex flex-row">
3006
<span class="w-[30px] opacity-50">45</span>
3007
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-center"></p>
3008
</li>
3009
3010
<li class="flex flex-row">
3011
<span class="w-[30px] opacity-50">46</span>
3012
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="relative w-40 h-40"></p>
3013
</li>
3014
3015
<li class="flex flex-row">
3016
<span class="w-[30px] opacity-50">47</span>
3017
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 rounded-full border border-brand-stable/20 animate-[spin_20s_linear_infinite]"></div></p>
3018
</li>
3019
3020
<li class="flex flex-row">
3021
<span class="w-[30px] opacity-50">48</span>
3022
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-4 rounded-full border border-brand-stable/30 animate-[spin_14s_linear_infinite_reverse]"></div></p>
3023
</li>
3024
3025
<li class="flex flex-row">
3026
<span class="w-[30px] opacity-50">49</span>
3027
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-8 rounded-full border border-brand-stable/40"></div></p>
3028
</li>
3029
3030
<li class="flex flex-row">
3031
<span class="w-[30px] opacity-50">50</span>
3032
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 flex items-center justify-center"></p>
3033
</li>
3034
3035
<li class="flex flex-row">
3036
<span class="w-[30px] opacity-50">51</span>
3037
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="text-center"></p>
3038
</li>
3039
3040
<li class="flex flex-row">
3041
<span class="w-[30px] opacity-50">52</span>
3042
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-xs text-brand-faint">Si</div></p>
3043
</li>
3044
3045
<li class="flex flex-row">
3046
<span class="w-[30px] opacity-50">53</span>
3047
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-2xl font-bold text-brand-stable">14</div></p>
3048
</li>
3049
3050
<li class="flex flex-row">
3051
<span class="w-[30px] opacity-50">54</span>
3052
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-[9px] text-brand-faint uppercase tracking-widest">Stable</div></p>
3053
</li>
3054
3055
<li class="flex flex-row">
3056
<span class="w-[30px] opacity-50">55</span>
3057
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3058
</li>
3059
3060
<li class="flex flex-row">
3061
<span class="w-[30px] opacity-50">56</span>
3062
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3063
</li>
3064
3065
<li class="flex flex-row">
3066
<span class="w-[30px] opacity-50">57</span>
3067
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3068
</li>
3069
3070
<li class="flex flex-row">
3071
<span class="w-[30px] opacity-50">58</span>
3072
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3073
</li>
3074
3075
<li class="flex flex-row">
3076
<span class="w-[30px] opacity-50">59</span>
3077
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3078
</li>
3079
3080
<li class="flex flex-row">
3081
<span class="w-[30px] opacity-50">60</span>
3082
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-4 text-center"></p>
3083
</li>
3084
3085
<li class="flex flex-row">
3086
<span class="w-[30px] opacity-50">61</span>
3087
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.subscription.cta.href }}"</p>
3088
</li>
3089
3090
<li class="flex flex-row">
3091
<span class="w-[30px] opacity-50">62</span>
3092
<p class="flex w-full overflow-hidden whitespace-pre"> class="btn-stable-lg w-full justify-center"></p>
3093
</li>
3094
3095
<li class="flex flex-row">
3096
<span class="w-[30px] opacity-50">63</span>
3097
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.subscription.cta.label }}</p>
3098
</li>
3099
3100
<li class="flex flex-row">
3101
<span class="w-[30px] opacity-50">64</span>
3102
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
3103
</li>
3104
3105
<li class="flex flex-row">
3106
<span class="w-[30px] opacity-50">65</span>
3107
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="font-mono text-xs text-brand-faint">{{ strings.subscription.note }}</p></p>
3108
</li>
3109
3110
<li class="flex flex-row">
3111
<span class="w-[30px] opacity-50">66</span>
3112
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3113
</li>
3114
3115
<li class="flex flex-row">
3116
<span class="w-[30px] opacity-50">67</span>
3117
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3118
</li>
3119
3120
<li class="flex flex-row">
3121
<span class="w-[30px] opacity-50">68</span>
3122
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3123
</li>
3124
3125
<li class="flex flex-row">
3126
<span class="w-[30px] opacity-50">69</span>
3127
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3128
</li>
3129
3130
<li class="flex flex-row">
3131
<span class="w-[30px] opacity-50">70</span>
3132
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3133
</li>
3134
3135
<li class="flex flex-row">
3136
<span class="w-[30px] opacity-50">71</span>
3137
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3138
</li>
3139
3140
<li class="flex flex-row">
3141
<span class="w-[30px] opacity-50">72</span>
3142
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
3143
</li>
3144
3145
<li class="flex flex-row">
3146
<span class="w-[30px] opacity-50">73</span>
3147
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3148
</li>
3149
3150
</ul>
3151
3152
3153
<div class="absolute inset-0 bg-linear-to-l from-brand-base to-transparent"></div>
3154
</div>
3155
3156
<div class="relative flex flex-row border-r bg-brand-base border-brand-border pb-1 pt-1 w-[33px] justify-end items-start">
3157
3158
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/80"><em class="text-brand-stable">#04</em> ALL-IN-ONE WEB</span>
3159
3160
3161
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/40 italic">// bundle: web_presence — billing: flat_monthly</span>
3162
3163
</div>
3164
3165
<div class="w-full max-w-7xl mx-auto px-2 md:px-6 py-24 md:py-32 z-40">
3166
3167
3168
3169
<div class="mb-16 space-y-4 max-w-2xl">
3170
<div class="flex items-center gap-3">
3171
<span class="block w-6 h-px bg-brand-stable"></span>
3172
<p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-stable">
3173
Stable & Predictable
3174
</p>
3175
</div>
3176
<h5 class="text-3xl md:text-5xl font-bold tracking-tight text-brand-text leading-tight">
3177
The Turnkey Subscription.
3178
</h5>
3179
<p class="text-lg text-brand-muted leading-relaxed">High-end design and maintenance for a flat monthly fee. Perfect for boutiques and local businesses needing a premium presence without the upfront cost.</p>
3180
</div>
3181
3182
3183
3184
<div class="rounded-xl border border-brand-stable/30 bg-brand-surface/50 relative overflow-hidden card-glow-stable">
3185
3186
3187
<div class="absolute inset-0 bg-gradient-to-br from-brand-stable/5 via-transparent to-brand-reactive/5 pointer-events-none" aria-hidden="true"></div>
3188
3189
<div class="relative p-10 md:p-14">
3190
<div class="grid md:grid-cols-2 gap-12 items-center">
3191
3192
3193
<div class="space-y-6">
3194
<div class="flex items-center gap-3 flex-wrap">
3195
3196
<span class="px-3 py-1 rounded-full border border-brand-stable/40 bg-brand-stable/10 font-mono text-xs text-brand-stable">
3197
All-Inclusive
3198
</span>
3199
3200
<span class="px-3 py-1 rounded-full border border-brand-stable/40 bg-brand-stable/10 font-mono text-xs text-brand-stable">
3201
Flat Monthly Price
3202
</span>
3203
3204
<span class="px-3 py-1 rounded-full border border-brand-stable/40 bg-brand-stable/10 font-mono text-xs text-brand-stable">
3205
No Upfront Cost
3206
</span>
3207
3208
</span>
3209
</div>
3210
<ul class="space-y-4">
3211
3212
<li class="flex items-start gap-3">
3213
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
3214
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
3215
class="shrink-0 mt-0.5 text-brand-stable">
3216
<polyline points="20 6 9 17 4 12"/>
3217
</svg>
3218
<span class="text-sm text-brand-text leading-relaxed">Custom 10-page website design</span>
3219
</li>
3220
3221
<li class="flex items-start gap-3">
3222
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
3223
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
3224
class="shrink-0 mt-0.5 text-brand-stable">
3225
<polyline points="20 6 9 17 4 12"/>
3226
</svg>
3227
<span class="text-sm text-brand-text leading-relaxed">Professional development & hosting</span>
3228
</li>
3229
3230
<li class="flex items-start gap-3">
3231
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
3232
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
3233
class="shrink-0 mt-0.5 text-brand-stable">
3234
<polyline points="20 6 9 17 4 12"/>
3235
</svg>
3236
<span class="text-sm text-brand-text leading-relaxed">Unlimited content & image updates</span>
3237
</li>
3238
3239
<li class="flex items-start gap-3">
3240
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
3241
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
3242
class="shrink-0 mt-0.5 text-brand-stable">
3243
<polyline points="20 6 9 17 4 12"/>
3244
</svg>
3245
<span class="text-sm text-brand-text leading-relaxed">Continuous performance monitoring</span>
3246
</li>
3247
3248
<li class="flex items-start gap-3">
3249
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
3250
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
3251
class="shrink-0 mt-0.5 text-brand-stable">
3252
<polyline points="20 6 9 17 4 12"/>
3253
</svg>
3254
<span class="text-sm text-brand-text leading-relaxed">Dedicated engineering support</span>
3255
</li>
3256
3257
<li class="flex items-start gap-3">
3258
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
3259
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
3260
class="shrink-0 mt-0.5 text-brand-stable">
3261
<polyline points="20 6 9 17 4 12"/>
3262
</svg>
3263
<span class="text-sm text-brand-text leading-relaxed">Annual full design refresh</span>
3264
</li>
3265
3266
</ul>
3267
</div>
3268
3269
3270
<div class="space-y-8">
3271
3272
3273
<div class="flex items-center justify-center">
3274
<div class="relative w-40 h-40">
3275
<div class="absolute inset-0 rounded-full border border-brand-stable/20 animate-[spin_20s_linear_infinite]"></div>
3276
<div class="absolute inset-4 rounded-full border border-brand-stable/30 animate-[spin_14s_linear_infinite_reverse]"></div>
3277
<div class="absolute inset-8 rounded-full border border-brand-stable/40"></div>
3278
<div class="absolute inset-0 flex items-center justify-center">
3279
<div class="text-center">
3280
<div class="font-mono text-xs text-brand-faint">Si</div>
3281
<div class="font-mono text-2xl font-bold text-brand-stable">14</div>
3282
<div class="font-mono text-[9px] text-brand-faint uppercase tracking-widest">Stable</div>
3283
</div>
3284
</div>
3285
</div>
3286
</div>
3287
3288
<div class="space-y-4 text-center">
3289
<a href="#contact"
3290
class="btn-stable-lg w-full justify-center">
3291
Start Your Subscription
3292
</a>
3293
<p class="font-mono text-xs text-brand-faint">Plans start at $180/mo. Cancel anytime.</p>
3294
</div>
3295
3296
</div>
3297
</div>
3298
</div>
3299
</div>
3300
3301
</div>
3302
3303
<div class="relative flex flex-1 flex-col items-start justify-start overflow-hidden z-0">
3304
3305
<ul class="absolute right-0 top-0 bottom-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
3306
3307
<li class="flex flex-row">
3308
<span class="w-[30px] opacity-50">1</span>
3309
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell, sectionHeader with context %}</p>
3310
</li>
3311
3312
<li class="flex flex-row">
3313
<span class="w-[30px] opacity-50">2</span>
3314
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3315
</li>
3316
3317
<li class="flex flex-row">
3318
<span class="w-[30px] opacity-50">3</span>
3319
<p class="flex w-full overflow-hidden whitespace-pre">{# STABLE ISOTOPE — SUBSCRIPTION #}</p>
3320
</li>
3321
3322
<li class="flex flex-row">
3323
<span class="w-[30px] opacity-50">4</span>
3324
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "subscription", strings.subscription.sectionLabel, strings.subscription.sectionSublabel) %}</p>
3325
</li>
3326
3327
<li class="flex flex-row">
3328
<span class="w-[30px] opacity-50">5</span>
3329
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3330
</li>
3331
3332
<li class="flex flex-row">
3333
<span class="w-[30px] opacity-50">6</span>
3334
<p class="flex w-full overflow-hidden whitespace-pre"> {{ sectionHeader("h" ~ (sectionNum + 1), strings.subscription.eyebrow, strings.subscription.headline, strings.subscription.subtitle, accent="stable") }}</p>
3335
</li>
3336
3337
<li class="flex flex-row">
3338
<span class="w-[30px] opacity-50">7</span>
3339
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3340
</li>
3341
3342
<li class="flex flex-row">
3343
<span class="w-[30px] opacity-50">8</span>
3344
<p class="flex w-full overflow-hidden whitespace-pre"> {# Feature card #}</p>
3345
</li>
3346
3347
<li class="flex flex-row">
3348
<span class="w-[30px] opacity-50">9</span>
3349
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="rounded-xl border border-brand-stable/30 bg-brand-surface/50 relative overflow-hidden card-glow-stable"></p>
3350
</li>
3351
3352
<li class="flex flex-row">
3353
<span class="w-[30px] opacity-50">10</span>
3354
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3355
</li>
3356
3357
<li class="flex flex-row">
3358
<span class="w-[30px] opacity-50">11</span>
3359
<p class="flex w-full overflow-hidden whitespace-pre"> {# Background glow #}</p>
3360
</li>
3361
3362
<li class="flex flex-row">
3363
<span class="w-[30px] opacity-50">12</span>
3364
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 bg-gradient-to-br from-brand-stable/5 via-transparent to-brand-reactive/5 pointer-events-none" aria-hidden="true"></div></p>
3365
</li>
3366
3367
<li class="flex flex-row">
3368
<span class="w-[30px] opacity-50">13</span>
3369
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3370
</li>
3371
3372
<li class="flex flex-row">
3373
<span class="w-[30px] opacity-50">14</span>
3374
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="relative p-10 md:p-14"></p>
3375
</li>
3376
3377
<li class="flex flex-row">
3378
<span class="w-[30px] opacity-50">15</span>
3379
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="grid md:grid-cols-2 gap-12 items-center"></p>
3380
</li>
3381
3382
<li class="flex flex-row">
3383
<span class="w-[30px] opacity-50">16</span>
3384
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3385
</li>
3386
3387
<li class="flex flex-row">
3388
<span class="w-[30px] opacity-50">17</span>
3389
<p class="flex w-full overflow-hidden whitespace-pre"> {# Features list #}</p>
3390
</li>
3391
3392
<li class="flex flex-row">
3393
<span class="w-[30px] opacity-50">18</span>
3394
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-6"></p>
3395
</li>
3396
3397
<li class="flex flex-row">
3398
<span class="w-[30px] opacity-50">19</span>
3399
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center gap-3 flex-wrap"></p>
3400
</li>
3401
3402
<li class="flex flex-row">
3403
<span class="w-[30px] opacity-50">20</span>
3404
<p class="flex w-full overflow-hidden whitespace-pre"> {% for badge in strings.subscription.badges %} </p>
3405
</li>
3406
3407
<li class="flex flex-row">
3408
<span class="w-[30px] opacity-50">21</span>
3409
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="px-3 py-1 rounded-full border border-brand-stable/40 bg-brand-stable/10 font-mono text-xs text-brand-stable"></p>
3410
</li>
3411
3412
<li class="flex flex-row">
3413
<span class="w-[30px] opacity-50">22</span>
3414
<p class="flex w-full overflow-hidden whitespace-pre"> {{ badge }}</p>
3415
</li>
3416
3417
<li class="flex flex-row">
3418
<span class="w-[30px] opacity-50">23</span>
3419
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
3420
</li>
3421
3422
<li class="flex flex-row">
3423
<span class="w-[30px] opacity-50">24</span>
3424
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
3425
</li>
3426
3427
<li class="flex flex-row">
3428
<span class="w-[30px] opacity-50">25</span>
3429
<p class="flex w-full overflow-hidden whitespace-pre"> </span></p>
3430
</li>
3431
3432
<li class="flex flex-row">
3433
<span class="w-[30px] opacity-50">26</span>
3434
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3435
</li>
3436
3437
<li class="flex flex-row">
3438
<span class="w-[30px] opacity-50">27</span>
3439
<p class="flex w-full overflow-hidden whitespace-pre"> <ul class="space-y-4"></p>
3440
</li>
3441
3442
<li class="flex flex-row">
3443
<span class="w-[30px] opacity-50">28</span>
3444
<p class="flex w-full overflow-hidden whitespace-pre"> {% for feature in strings.subscription.features %}</p>
3445
</li>
3446
3447
<li class="flex flex-row">
3448
<span class="w-[30px] opacity-50">29</span>
3449
<p class="flex w-full overflow-hidden whitespace-pre"> <li class="flex items-start gap-3"></p>
3450
</li>
3451
3452
<li class="flex flex-row">
3453
<span class="w-[30px] opacity-50">30</span>
3454
<p class="flex w-full overflow-hidden whitespace-pre"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"</p>
3455
</li>
3456
3457
<li class="flex flex-row">
3458
<span class="w-[30px] opacity-50">31</span>
3459
<p class="flex w-full overflow-hidden whitespace-pre"> fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"</p>
3460
</li>
3461
3462
<li class="flex flex-row">
3463
<span class="w-[30px] opacity-50">32</span>
3464
<p class="flex w-full overflow-hidden whitespace-pre"> class="shrink-0 mt-0.5 text-brand-stable"></p>
3465
</li>
3466
3467
<li class="flex flex-row">
3468
<span class="w-[30px] opacity-50">33</span>
3469
<p class="flex w-full overflow-hidden whitespace-pre"> <polyline points="20 6 9 17 4 12"/></p>
3470
</li>
3471
3472
<li class="flex flex-row">
3473
<span class="w-[30px] opacity-50">34</span>
3474
<p class="flex w-full overflow-hidden whitespace-pre"> </svg></p>
3475
</li>
3476
3477
<li class="flex flex-row">
3478
<span class="w-[30px] opacity-50">35</span>
3479
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="text-sm text-brand-text leading-relaxed">{{ feature }}</span></p>
3480
</li>
3481
3482
<li class="flex flex-row">
3483
<span class="w-[30px] opacity-50">36</span>
3484
<p class="flex w-full overflow-hidden whitespace-pre"> </li></p>
3485
</li>
3486
3487
<li class="flex flex-row">
3488
<span class="w-[30px] opacity-50">37</span>
3489
<p class="flex w-full overflow-hidden whitespace-pre"> {% endfor %}</p>
3490
</li>
3491
3492
<li class="flex flex-row">
3493
<span class="w-[30px] opacity-50">38</span>
3494
<p class="flex w-full overflow-hidden whitespace-pre"> </ul></p>
3495
</li>
3496
3497
<li class="flex flex-row">
3498
<span class="w-[30px] opacity-50">39</span>
3499
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3500
</li>
3501
3502
<li class="flex flex-row">
3503
<span class="w-[30px] opacity-50">40</span>
3504
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3505
</li>
3506
3507
<li class="flex flex-row">
3508
<span class="w-[30px] opacity-50">41</span>
3509
<p class="flex w-full overflow-hidden whitespace-pre"> {# CTA block #}</p>
3510
</li>
3511
3512
<li class="flex flex-row">
3513
<span class="w-[30px] opacity-50">42</span>
3514
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-8"></p>
3515
</li>
3516
3517
<li class="flex flex-row">
3518
<span class="w-[30px] opacity-50">43</span>
3519
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3520
</li>
3521
3522
<li class="flex flex-row">
3523
<span class="w-[30px] opacity-50">44</span>
3524
<p class="flex w-full overflow-hidden whitespace-pre"> {# Isotope visual element #}</p>
3525
</li>
3526
3527
<li class="flex flex-row">
3528
<span class="w-[30px] opacity-50">45</span>
3529
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-center"></p>
3530
</li>
3531
3532
<li class="flex flex-row">
3533
<span class="w-[30px] opacity-50">46</span>
3534
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="relative w-40 h-40"></p>
3535
</li>
3536
3537
<li class="flex flex-row">
3538
<span class="w-[30px] opacity-50">47</span>
3539
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 rounded-full border border-brand-stable/20 animate-[spin_20s_linear_infinite]"></div></p>
3540
</li>
3541
3542
<li class="flex flex-row">
3543
<span class="w-[30px] opacity-50">48</span>
3544
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-4 rounded-full border border-brand-stable/30 animate-[spin_14s_linear_infinite_reverse]"></div></p>
3545
</li>
3546
3547
<li class="flex flex-row">
3548
<span class="w-[30px] opacity-50">49</span>
3549
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-8 rounded-full border border-brand-stable/40"></div></p>
3550
</li>
3551
3552
<li class="flex flex-row">
3553
<span class="w-[30px] opacity-50">50</span>
3554
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="absolute inset-0 flex items-center justify-center"></p>
3555
</li>
3556
3557
<li class="flex flex-row">
3558
<span class="w-[30px] opacity-50">51</span>
3559
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="text-center"></p>
3560
</li>
3561
3562
<li class="flex flex-row">
3563
<span class="w-[30px] opacity-50">52</span>
3564
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-xs text-brand-faint">Si</div></p>
3565
</li>
3566
3567
<li class="flex flex-row">
3568
<span class="w-[30px] opacity-50">53</span>
3569
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-2xl font-bold text-brand-stable">14</div></p>
3570
</li>
3571
3572
<li class="flex flex-row">
3573
<span class="w-[30px] opacity-50">54</span>
3574
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="font-mono text-[9px] text-brand-faint uppercase tracking-widest">Stable</div></p>
3575
</li>
3576
3577
<li class="flex flex-row">
3578
<span class="w-[30px] opacity-50">55</span>
3579
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3580
</li>
3581
3582
<li class="flex flex-row">
3583
<span class="w-[30px] opacity-50">56</span>
3584
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3585
</li>
3586
3587
<li class="flex flex-row">
3588
<span class="w-[30px] opacity-50">57</span>
3589
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3590
</li>
3591
3592
<li class="flex flex-row">
3593
<span class="w-[30px] opacity-50">58</span>
3594
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3595
</li>
3596
3597
<li class="flex flex-row">
3598
<span class="w-[30px] opacity-50">59</span>
3599
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3600
</li>
3601
3602
<li class="flex flex-row">
3603
<span class="w-[30px] opacity-50">60</span>
3604
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="space-y-4 text-center"></p>
3605
</li>
3606
3607
<li class="flex flex-row">
3608
<span class="w-[30px] opacity-50">61</span>
3609
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.subscription.cta.href }}"</p>
3610
</li>
3611
3612
<li class="flex flex-row">
3613
<span class="w-[30px] opacity-50">62</span>
3614
<p class="flex w-full overflow-hidden whitespace-pre"> class="btn-stable-lg w-full justify-center"></p>
3615
</li>
3616
3617
<li class="flex flex-row">
3618
<span class="w-[30px] opacity-50">63</span>
3619
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.subscription.cta.label }}</p>
3620
</li>
3621
3622
<li class="flex flex-row">
3623
<span class="w-[30px] opacity-50">64</span>
3624
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
3625
</li>
3626
3627
<li class="flex flex-row">
3628
<span class="w-[30px] opacity-50">65</span>
3629
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="font-mono text-xs text-brand-faint">{{ strings.subscription.note }}</p></p>
3630
</li>
3631
3632
<li class="flex flex-row">
3633
<span class="w-[30px] opacity-50">66</span>
3634
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3635
</li>
3636
3637
<li class="flex flex-row">
3638
<span class="w-[30px] opacity-50">67</span>
3639
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3640
</li>
3641
3642
<li class="flex flex-row">
3643
<span class="w-[30px] opacity-50">68</span>
3644
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3645
</li>
3646
3647
<li class="flex flex-row">
3648
<span class="w-[30px] opacity-50">69</span>
3649
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3650
</li>
3651
3652
<li class="flex flex-row">
3653
<span class="w-[30px] opacity-50">70</span>
3654
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3655
</li>
3656
3657
<li class="flex flex-row">
3658
<span class="w-[30px] opacity-50">71</span>
3659
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3660
</li>
3661
3662
<li class="flex flex-row">
3663
<span class="w-[30px] opacity-50">72</span>
3664
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
3665
</li>
3666
3667
<li class="flex flex-row">
3668
<span class="w-[30px] opacity-50">73</span>
3669
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3670
</li>
3671
3672
</ul>
3673
<div class="absolute inset-0 bg-linear-to-r from-brand-base to-transparent"></div>
3674
3675
</div>
3676
</section>
3677
3678
3679
3680
3681
3682
3683
<section id="contact" class="relative border-t border-brand-border flex flex-row">
3684
<div class="relative flex flex-1 flex-row">
3685
3686
3687
<ul class="absolute inset-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
3688
3689
<li class="flex flex-row">
3690
<span class="w-[30px] opacity-50">1</span>
3691
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell with context %}</p>
3692
</li>
3693
3694
<li class="flex flex-row">
3695
<span class="w-[30px] opacity-50">2</span>
3696
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3697
</li>
3698
3699
<li class="flex flex-row">
3700
<span class="w-[30px] opacity-50">3</span>
3701
<p class="flex w-full overflow-hidden whitespace-pre">{# CONTACT #}</p>
3702
</li>
3703
3704
<li class="flex flex-row">
3705
<span class="w-[30px] opacity-50">4</span>
3706
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "contact", strings.contact.sectionLabel, strings.contact.sectionSublabel) %}</p>
3707
</li>
3708
3709
<li class="flex flex-row">
3710
<span class="w-[30px] opacity-50">5</span>
3711
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3712
</li>
3713
3714
<li class="flex flex-row">
3715
<span class="w-[30px] opacity-50">6</span>
3716
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="text-center space-y-8 max-w-3xl mx-auto"></p>
3717
</li>
3718
3719
<li class="flex flex-row">
3720
<span class="w-[30px] opacity-50">7</span>
3721
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3722
</li>
3723
3724
<li class="flex flex-row">
3725
<span class="w-[30px] opacity-50">8</span>
3726
<p class="flex w-full overflow-hidden whitespace-pre"> {# Eyebrow with lines on both sides (centred layout variant) #}</p>
3727
</li>
3728
3729
<li class="flex flex-row">
3730
<span class="w-[30px] opacity-50">9</span>
3731
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-center gap-3"></p>
3732
</li>
3733
3734
<li class="flex flex-row">
3735
<span class="w-[30px] opacity-50">10</span>
3736
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="block w-6 h-px bg-brand-reactive"></span></p>
3737
</li>
3738
3739
<li class="flex flex-row">
3740
<span class="w-[30px] opacity-50">11</span>
3741
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive"></p>
3742
</li>
3743
3744
<li class="flex flex-row">
3745
<span class="w-[30px] opacity-50">12</span>
3746
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.eyebrow }}</p>
3747
</li>
3748
3749
<li class="flex flex-row">
3750
<span class="w-[30px] opacity-50">13</span>
3751
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
3752
</li>
3753
3754
<li class="flex flex-row">
3755
<span class="w-[30px] opacity-50">14</span>
3756
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="block w-6 h-px bg-brand-reactive"></span></p>
3757
</li>
3758
3759
<li class="flex flex-row">
3760
<span class="w-[30px] opacity-50">15</span>
3761
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3762
</li>
3763
3764
<li class="flex flex-row">
3765
<span class="w-[30px] opacity-50">16</span>
3766
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3767
</li>
3768
3769
<li class="flex flex-row">
3770
<span class="w-[30px] opacity-50">17</span>
3771
<p class="flex w-full overflow-hidden whitespace-pre"> <h5 class="text-3xl md:text-5xl font-bold tracking-tight text-brand-text leading-tight"></p>
3772
</li>
3773
3774
<li class="flex flex-row">
3775
<span class="w-[30px] opacity-50">18</span>
3776
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.headline | replace("\n", "<br>") | safe }}</p>
3777
</li>
3778
3779
<li class="flex flex-row">
3780
<span class="w-[30px] opacity-50">19</span>
3781
<p class="flex w-full overflow-hidden whitespace-pre"> </h5></p>
3782
</li>
3783
3784
<li class="flex flex-row">
3785
<span class="w-[30px] opacity-50">20</span>
3786
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3787
</li>
3788
3789
<li class="flex flex-row">
3790
<span class="w-[30px] opacity-50">21</span>
3791
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="text-lg text-brand-muted leading-relaxed max-w-xl mx-auto"></p>
3792
</li>
3793
3794
<li class="flex flex-row">
3795
<span class="w-[30px] opacity-50">22</span>
3796
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.subtitle }}</p>
3797
</li>
3798
3799
<li class="flex flex-row">
3800
<span class="w-[30px] opacity-50">23</span>
3801
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
3802
</li>
3803
3804
<li class="flex flex-row">
3805
<span class="w-[30px] opacity-50">24</span>
3806
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3807
</li>
3808
3809
<li class="flex flex-row">
3810
<span class="w-[30px] opacity-50">25</span>
3811
<p class="flex w-full overflow-hidden whitespace-pre"> <div></p>
3812
</li>
3813
3814
<li class="flex flex-row">
3815
<span class="w-[30px] opacity-50">26</span>
3816
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.contact.cta.href }}"</p>
3817
</li>
3818
3819
<li class="flex flex-row">
3820
<span class="w-[30px] opacity-50">27</span>
3821
<p class="flex w-full overflow-hidden whitespace-pre"> class="group btn-outline-lg"></p>
3822
</li>
3823
3824
<li class="flex flex-row">
3825
<span class="w-[30px] opacity-50">28</span>
3826
<p class="flex w-full overflow-hidden whitespace-pre"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"</p>
3827
</li>
3828
3829
<li class="flex flex-row">
3830
<span class="w-[30px] opacity-50">29</span>
3831
<p class="flex w-full overflow-hidden whitespace-pre"> fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"</p>
3832
</li>
3833
3834
<li class="flex flex-row">
3835
<span class="w-[30px] opacity-50">30</span>
3836
<p class="flex w-full overflow-hidden whitespace-pre"> class="shrink-0"></p>
3837
</li>
3838
3839
<li class="flex flex-row">
3840
<span class="w-[30px] opacity-50">31</span>
3841
<p class="flex w-full overflow-hidden whitespace-pre"> <rect x="2" y="4" width="20" height="16" rx="2"/></p>
3842
</li>
3843
3844
<li class="flex flex-row">
3845
<span class="w-[30px] opacity-50">32</span>
3846
<p class="flex w-full overflow-hidden whitespace-pre"> <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></p>
3847
</li>
3848
3849
<li class="flex flex-row">
3850
<span class="w-[30px] opacity-50">33</span>
3851
<p class="flex w-full overflow-hidden whitespace-pre"> </svg></p>
3852
</li>
3853
3854
<li class="flex flex-row">
3855
<span class="w-[30px] opacity-50">34</span>
3856
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.cta.label }}</p>
3857
</li>
3858
3859
<li class="flex flex-row">
3860
<span class="w-[30px] opacity-50">35</span>
3861
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
3862
</li>
3863
3864
<li class="flex flex-row">
3865
<span class="w-[30px] opacity-50">36</span>
3866
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3867
</li>
3868
3869
<li class="flex flex-row">
3870
<span class="w-[30px] opacity-50">37</span>
3871
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3872
</li>
3873
3874
<li class="flex flex-row">
3875
<span class="w-[30px] opacity-50">38</span>
3876
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
3877
</li>
3878
3879
<li class="flex flex-row">
3880
<span class="w-[30px] opacity-50">39</span>
3881
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3882
</li>
3883
3884
<li class="flex flex-row">
3885
<span class="w-[30px] opacity-50">40</span>
3886
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
3887
</li>
3888
3889
<li class="flex flex-row">
3890
<span class="w-[30px] opacity-50">41</span>
3891
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3892
</li>
3893
3894
</ul>
3895
3896
3897
<div class="absolute inset-0 bg-linear-to-l from-brand-base to-transparent"></div>
3898
</div>
3899
3900
<div class="relative flex flex-row border-r bg-brand-base border-brand-border pb-1 pt-1 w-[33px] justify-end items-start">
3901
3902
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/80"><em class="text-brand-stable">#05</em> CONTACT</span>
3903
3904
3905
<span class="block sticky top-[60px] section-label self-start right-0 text-brand-muted/40 italic">// new Thread({skipSalesReps: true, engineers: true})</span>
3906
3907
</div>
3908
3909
<div class="w-full max-w-7xl mx-auto px-2 md:px-6 py-24 md:py-32 z-40">
3910
3911
3912
<div class="text-center space-y-8 max-w-3xl mx-auto">
3913
3914
3915
<div class="flex items-center justify-center gap-3">
3916
<span class="block w-6 h-px bg-brand-reactive"></span>
3917
<p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive">
3918
Initiate Synthesis
3919
</p>
3920
<span class="block w-6 h-px bg-brand-reactive"></span>
3921
</div>
3922
3923
<h5 class="text-3xl md:text-5xl font-bold tracking-tight text-brand-text leading-tight">
3924
Ready to build<br>something stable?
3925
</h5>
3926
3927
<p class="text-lg text-brand-muted leading-relaxed max-w-xl mx-auto">
3928
Reach out directly for a technical consultation. No sales reps, just engineers.
3929
</p>
3930
3931
<div>
3932
<a href="mailto:hello@isotopic.dev"
3933
class="group btn-outline-lg">
3934
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
3935
fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
3936
class="shrink-0">
3937
<rect x="2" y="4" width="20" height="16" rx="2"/>
3938
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
3939
</svg>
3940
hello@isotopic.dev
3941
</a>
3942
</div>
3943
3944
</div>
3945
3946
3947
</div>
3948
3949
<div class="relative flex flex-1 flex-col items-start justify-start overflow-hidden z-0">
3950
3951
<ul class="absolute right-0 top-0 bottom-0 flex flex-col overflow-hidden text-xs font-mono text-brand-faint">
3952
3953
<li class="flex flex-row">
3954
<span class="w-[30px] opacity-50">1</span>
3955
<p class="flex w-full overflow-hidden whitespace-pre">{% from "macros/section.njk" import sectionShell with context %}</p>
3956
</li>
3957
3958
<li class="flex flex-row">
3959
<span class="w-[30px] opacity-50">2</span>
3960
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3961
</li>
3962
3963
<li class="flex flex-row">
3964
<span class="w-[30px] opacity-50">3</span>
3965
<p class="flex w-full overflow-hidden whitespace-pre">{# CONTACT #}</p>
3966
</li>
3967
3968
<li class="flex flex-row">
3969
<span class="w-[30px] opacity-50">4</span>
3970
<p class="flex w-full overflow-hidden whitespace-pre">{% call sectionShell(sectionNum, "contact", strings.contact.sectionLabel, strings.contact.sectionSublabel) %}</p>
3971
</li>
3972
3973
<li class="flex flex-row">
3974
<span class="w-[30px] opacity-50">5</span>
3975
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3976
</li>
3977
3978
<li class="flex flex-row">
3979
<span class="w-[30px] opacity-50">6</span>
3980
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="text-center space-y-8 max-w-3xl mx-auto"></p>
3981
</li>
3982
3983
<li class="flex flex-row">
3984
<span class="w-[30px] opacity-50">7</span>
3985
<p class="flex w-full overflow-hidden whitespace-pre"></p>
3986
</li>
3987
3988
<li class="flex flex-row">
3989
<span class="w-[30px] opacity-50">8</span>
3990
<p class="flex w-full overflow-hidden whitespace-pre"> {# Eyebrow with lines on both sides (centred layout variant) #}</p>
3991
</li>
3992
3993
<li class="flex flex-row">
3994
<span class="w-[30px] opacity-50">9</span>
3995
<p class="flex w-full overflow-hidden whitespace-pre"> <div class="flex items-center justify-center gap-3"></p>
3996
</li>
3997
3998
<li class="flex flex-row">
3999
<span class="w-[30px] opacity-50">10</span>
4000
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="block w-6 h-px bg-brand-reactive"></span></p>
4001
</li>
4002
4003
<li class="flex flex-row">
4004
<span class="w-[30px] opacity-50">11</span>
4005
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="font-mono text-xs uppercase tracking-[0.2em] text-brand-reactive"></p>
4006
</li>
4007
4008
<li class="flex flex-row">
4009
<span class="w-[30px] opacity-50">12</span>
4010
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.eyebrow }}</p>
4011
</li>
4012
4013
<li class="flex flex-row">
4014
<span class="w-[30px] opacity-50">13</span>
4015
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
4016
</li>
4017
4018
<li class="flex flex-row">
4019
<span class="w-[30px] opacity-50">14</span>
4020
<p class="flex w-full overflow-hidden whitespace-pre"> <span class="block w-6 h-px bg-brand-reactive"></span></p>
4021
</li>
4022
4023
<li class="flex flex-row">
4024
<span class="w-[30px] opacity-50">15</span>
4025
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
4026
</li>
4027
4028
<li class="flex flex-row">
4029
<span class="w-[30px] opacity-50">16</span>
4030
<p class="flex w-full overflow-hidden whitespace-pre"></p>
4031
</li>
4032
4033
<li class="flex flex-row">
4034
<span class="w-[30px] opacity-50">17</span>
4035
<p class="flex w-full overflow-hidden whitespace-pre"> <h5 class="text-3xl md:text-5xl font-bold tracking-tight text-brand-text leading-tight"></p>
4036
</li>
4037
4038
<li class="flex flex-row">
4039
<span class="w-[30px] opacity-50">18</span>
4040
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.headline | replace("\n", "<br>") | safe }}</p>
4041
</li>
4042
4043
<li class="flex flex-row">
4044
<span class="w-[30px] opacity-50">19</span>
4045
<p class="flex w-full overflow-hidden whitespace-pre"> </h5></p>
4046
</li>
4047
4048
<li class="flex flex-row">
4049
<span class="w-[30px] opacity-50">20</span>
4050
<p class="flex w-full overflow-hidden whitespace-pre"></p>
4051
</li>
4052
4053
<li class="flex flex-row">
4054
<span class="w-[30px] opacity-50">21</span>
4055
<p class="flex w-full overflow-hidden whitespace-pre"> <p class="text-lg text-brand-muted leading-relaxed max-w-xl mx-auto"></p>
4056
</li>
4057
4058
<li class="flex flex-row">
4059
<span class="w-[30px] opacity-50">22</span>
4060
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.subtitle }}</p>
4061
</li>
4062
4063
<li class="flex flex-row">
4064
<span class="w-[30px] opacity-50">23</span>
4065
<p class="flex w-full overflow-hidden whitespace-pre"> </p></p>
4066
</li>
4067
4068
<li class="flex flex-row">
4069
<span class="w-[30px] opacity-50">24</span>
4070
<p class="flex w-full overflow-hidden whitespace-pre"></p>
4071
</li>
4072
4073
<li class="flex flex-row">
4074
<span class="w-[30px] opacity-50">25</span>
4075
<p class="flex w-full overflow-hidden whitespace-pre"> <div></p>
4076
</li>
4077
4078
<li class="flex flex-row">
4079
<span class="w-[30px] opacity-50">26</span>
4080
<p class="flex w-full overflow-hidden whitespace-pre"> <a href="{{ strings.contact.cta.href }}"</p>
4081
</li>
4082
4083
<li class="flex flex-row">
4084
<span class="w-[30px] opacity-50">27</span>
4085
<p class="flex w-full overflow-hidden whitespace-pre"> class="group btn-outline-lg"></p>
4086
</li>
4087
4088
<li class="flex flex-row">
4089
<span class="w-[30px] opacity-50">28</span>
4090
<p class="flex w-full overflow-hidden whitespace-pre"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"</p>
4091
</li>
4092
4093
<li class="flex flex-row">
4094
<span class="w-[30px] opacity-50">29</span>
4095
<p class="flex w-full overflow-hidden whitespace-pre"> fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"</p>
4096
</li>
4097
4098
<li class="flex flex-row">
4099
<span class="w-[30px] opacity-50">30</span>
4100
<p class="flex w-full overflow-hidden whitespace-pre"> class="shrink-0"></p>
4101
</li>
4102
4103
<li class="flex flex-row">
4104
<span class="w-[30px] opacity-50">31</span>
4105
<p class="flex w-full overflow-hidden whitespace-pre"> <rect x="2" y="4" width="20" height="16" rx="2"/></p>
4106
</li>
4107
4108
<li class="flex flex-row">
4109
<span class="w-[30px] opacity-50">32</span>
4110
<p class="flex w-full overflow-hidden whitespace-pre"> <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></p>
4111
</li>
4112
4113
<li class="flex flex-row">
4114
<span class="w-[30px] opacity-50">33</span>
4115
<p class="flex w-full overflow-hidden whitespace-pre"> </svg></p>
4116
</li>
4117
4118
<li class="flex flex-row">
4119
<span class="w-[30px] opacity-50">34</span>
4120
<p class="flex w-full overflow-hidden whitespace-pre"> {{ strings.contact.cta.label }}</p>
4121
</li>
4122
4123
<li class="flex flex-row">
4124
<span class="w-[30px] opacity-50">35</span>
4125
<p class="flex w-full overflow-hidden whitespace-pre"> </a></p>
4126
</li>
4127
4128
<li class="flex flex-row">
4129
<span class="w-[30px] opacity-50">36</span>
4130
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
4131
</li>
4132
4133
<li class="flex flex-row">
4134
<span class="w-[30px] opacity-50">37</span>
4135
<p class="flex w-full overflow-hidden whitespace-pre"></p>
4136
</li>
4137
4138
<li class="flex flex-row">
4139
<span class="w-[30px] opacity-50">38</span>
4140
<p class="flex w-full overflow-hidden whitespace-pre"> </div></p>
4141
</li>
4142
4143
<li class="flex flex-row">
4144
<span class="w-[30px] opacity-50">39</span>
4145
<p class="flex w-full overflow-hidden whitespace-pre"></p>
4146
</li>
4147
4148
<li class="flex flex-row">
4149
<span class="w-[30px] opacity-50">40</span>
4150
<p class="flex w-full overflow-hidden whitespace-pre">{% endcall %}</p>
4151
</li>
4152
4153
<li class="flex flex-row">
4154
<span class="w-[30px] opacity-50">41</span>
4155
<p class="flex w-full overflow-hidden whitespace-pre"></p>
4156
</li>
4157
4158
</ul>
4159
<div class="absolute inset-0 bg-linear-to-r from-brand-base to-transparent"></div>
4160
4161
</div>
4162
</section>
4163
4164
4165
4166
<footer class="border-t border-brand-border py-12">
4167
<div class="max-w-7xl mx-auto px-6">
4168
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
4169
4170
4171
<div class="flex items-center gap-4">
4172
<a href="/" class="flex items-center" aria-label="isotopic.dev home">
4173
<span class="font-mono text-sm font-medium text-brand-text">isotopic</span>
4174
<span class="font-mono text-sm text-brand-reactive">.dev</span>
4175
</a>
4176
<span class="hidden md:block w-px h-4 bg-brand-border" aria-hidden="true"></span>
4177
<span class="font-mono text-xs text-brand-faint">Agency-grade engineering. Boutique-level agility.</span>
4178
</div>
4179
4180
4181
<ul class="flex items-center gap-6">
4182
4183
<li>
4184
<a href="/privacy" class="font-mono text-xs text-brand-faint hover:text-brand-muted transition-colors">
4185
Privacy
4186
</a>
4187
</li>
4188
4189
<li>
4190
<a href="/terms" class="font-mono text-xs text-brand-faint hover:text-brand-muted transition-colors">
4191
Terms
4192
</a>
4193
</li>
4194
4195
</ul>
4196
4197
4198
<div class="flex items-center gap-4">
4199
<p class="font-mono text-xs text-brand-faint">
4201
</p>
4202
<button id="theme-toggle"
4203
class="text-brand-faint hover:text-brand-muted transition-colors p-1 rounded"
4204
aria-label="Switch to light mode">
4205
<svg class="theme-icon-sun" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
4206
fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
4207
<circle cx="12" cy="12" r="4"/>
4208
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
4209
</svg>
4210
<svg class="theme-icon-moon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
4211
fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
4212
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
4213
</svg>
4214
</button>
4215
</div>
4216
4217
</div>
4218
</div>
4219
</footer>
4220
4221
<script>
4222
document.getElementById('year').textContent = new Date().getFullYear();
4223
</script>
4224
4225
</main>
4226
4227
</div>
4228
4229
<script src="/assets/scripts/theme.js" defer></script>
4230
</body>
4231
</html>
4232

Same DNA. Different Mass.

Elite Engineering,Stripped of the Bloat.