-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
272 lines (270 loc) · 17 KB
/
Copy pathabout.html
File metadata and controls
272 lines (270 loc) · 17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Our Story | Spiked</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700;800&family=Be_Vietnam_Pro:wght@300;400;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-fixed-variant": "#512800",
"on-background": "#452800",
"secondary-container": "#ffc78a",
"surface-variant": "#ffd6ab",
"on-primary-fixed": "#180800",
"primary-fixed": "#fd8b00",
"on-tertiary-container": "#3a5f00",
"tertiary-fixed": "#b1fe4d",
"error-dim": "#b92902",
"on-tertiary-fixed-variant": "#416a00",
"tertiary": "#3f6600",
"on-primary-container": "#442100",
"secondary": "#835000",
"error-container": "#f95630",
"error": "#b02500",
"primary-container": "#fd8b00",
"on-secondary-container": "#683e00",
"tertiary-fixed-dim": "#a4ef3f",
"on-tertiary-fixed": "#2d4b00",
"primary-fixed-dim": "#ea8000",
"surface-tint": "#8c4a00",
"on-secondary-fixed-variant": "#744600",
"surface-container": "#ffe4c9",
"outline-variant": "#d4a46f",
"surface-container-low": "#ffeedf",
"on-error": "#ffefec",
"surface": "#fff5ed",
"on-surface": "#452800",
"on-secondary-fixed": "#4d2d00",
"surface-dim": "#ffcb93",
"surface-bright": "#fff5ed",
"inverse-surface": "#190b00",
"on-tertiary": "#daffa9",
"primary-dim": "#7b4000",
"surface-container-lowest": "#ffffff",
"on-primary": "#fff0e7",
"primary": "#8c4a00",
"tertiary-container": "#b1fe4d",
"secondary-fixed": "#ffc78a",
"inverse-on-surface": "#c29461",
"on-error-container": "#520c00",
"outline": "#986f3f",
"tertiary-dim": "#365900",
"on-surface-variant": "#7a5426",
"secondary-fixed-dim": "#ffb55c",
"inverse-primary": "#fd8b00",
"on-secondary": "#fff0e4",
"background": "#fff5ed",
"surface-container-high": "#ffddba",
"surface-container-highest": "#ffd6ab",
"secondary-dim": "#734500",
"darkMode": {
"background": "#0a0e14",
"surface": "#0f1419",
"surface-container-low": "#1a1f26",
"surface-container": "#2c3340",
"surface-container-high": "#37424e",
"on-background": "#e8e1d6",
"on-surface": "#e8e1d6",
"on-surface-variant": "#c9bfb0",
"primary": "#ffa726",
"secondary": "#744500",
"tertiary": "#5a8000",
"on-primary": "#261100",
"on-secondary": "#f5f1e8",
"on-tertiary": "#fff5e1"
}
},
"borderRadius": {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
"fontFamily": {
"headline": ["Plus Jakarta Sans"],
"body": ["Be Vietnam Pro"],
"label": ["Be Vietnam Pro"]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.glass-panel {
background: rgba(255, 245, 237, 0.7);
backdrop-filter: blur(12px);
}
</style>
</head>
<body class="bg-surface dark:bg-[#0a0e14] font-body text-on-surface dark:text-[#e8e1d6] selection:bg-tertiary-container selection:text-on-tertiary-container dark:selection:bg-[#37424e] dark:selection:text-[#ffa726]">
<script>
function toggleDarkMode() {
document.documentElement.classList.toggle('dark');
localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
}
// Apply saved preference on page load
if (localStorage.getItem('darkMode') === 'true') {
document.documentElement.classList.add('dark');
}
</script>
<nav class="sticky top-0 w-full z-50 bg-[#fff5ed]/80 dark:bg-stone-950/80 backdrop-blur-md shadow-[0_20px_50px_rgba(69,40,0,0.06)]">
<div class="flex justify-between items-center px-8 py-6 max-w-screen-2xl mx-auto">
<span class="text-3xl font-black text-[#452800] dark:text-[#fff5ed] tracking-tighter font-headline">Spiked</span>
<div class="hidden md:flex items-center space-x-8 font-headline font-bold tracking-tight">
<a class="text-[#452800]/60 dark:text-[#fff5ed]/60 hover:text-[#8c4a00] hover:scale-105 transition-transform duration-300 ease-out" href="/">Home</a>
<a class="text-[#452800]/60 dark:text-[#fff5ed]/60 hover:text-[#8c4a00] hover:scale-105 transition-transform duration-300 ease-out" href="/catalog/">Catalog</a>
<a class="text-[#8c4a00] dark:text-[#fd8b00] border-b-2 border-[#fd8b00] pb-1 hover:scale-105 transition-transform duration-300 ease-out" href="/about/">About</a>
</div>
<div class="flex items-center space-x-4">
<button class="text-[#8c4a00] dark:text-[#fd8b00] hover:scale-105 transition-transform duration-300 ease-out">
<span class="material-symbols-outlined" data-icon="shopping_cart">shopping_cart</span>
</button>
<button id="dark-mode-toggle" class="text-[#8c4a00] dark:text-[#fd8b00] hover:scale-105 transition-transform duration-300 ease-out active:scale-95" onclick="toggleDarkMode()">
<span class="material-symbols-outlined">dark_mode</span>
</button>
</div>
</div>
</nav>
<main class="relative overflow-hidden">
<section class="relative h-[921px] flex items-center px-8 md:px-20">
<div class="absolute inset-0 z-0">
<img alt="Sun-drenched citrus orchard with golden light filtering through vibrant orange trees" class="w-full h-full object-cover" data-alt="Sun-drenched citrus orchard with golden light filtering through vibrant orange trees at sunrise, high-end editorial photography style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAXqf720dMolZenG0YY-hS6xZkxFNcEjnL59PPyODpwPJ2_d7no-4NodY2EXZkNf6taPTOUaYHfTm8ZVkyD28nBj9Hmj_CjGe6ss5vlSPk75zRWklWmnuw2X73j-9uiT-2jxyTXFQVNzjG44mq51xduURgKR63Z8UY3u1fdc8dtwCVQ3nCKSHGhUad1mOenUBuG-LmpP-EXEDEnCmgsTir8OGSZRjYhZ6hdiWJBsQy1UiTzBP-hnKQ4Js3AED8F3NQ-fSc3c-_9alQ"/>
<div class="absolute inset-0 bg-gradient-to-r from-surface dark:from-[#0f1419] via-surface/40 dark:via-[#0f1419]/40 to-transparent"></div>
</div>
<div class="relative z-10 max-w-4xl">
<p class="font-label text-sm uppercase tracking-[0.2em] mb-4 text-primary font-bold">The Perfect Squeeze</p>
<h1 class="font-headline text-7xl md:text-9xl font-extrabold tracking-tighter leading-tight mb-8 text-on-surface dark:text-[#e8e1d6]">
Nature, <br/>
<span class="text-primary-fixed dark:text-[#ffa726] italic">Unfiltered.</span>
</h1>
<p class="font-body text-xl md:text-2xl text-on-surface-variant dark:text-[#c9bfb0] max-w-2xl leading-relaxed">
We didn't set out to make another juice. We set out to create the perfect squeeze.
</p>
</div>
</section>
<section class="py-32 px-8 md:px-20 bg-surface-container-low dark:bg-[#1a1f26]">
<div class="max-w-screen-2xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
<div class="md:col-span-5 relative">
<img alt="Founder sitting and smiling" class="rounded-xl shadow-2xl scale-110 -rotate-2 relative z-10" data-alt="Founder Mubaraq sitting and smiling in a modern office setting" src="../Founder Mubaraq.jpg"/>
<div class="absolute -bottom-10 -right-10 w-64 h-64 bg-tertiary-container dark:bg-[#5a8000] rounded-full blur-3xl opacity-30"></div>
</div>
<div class="md:col-span-7 pl-0 md:pl-20">
<h2 class="font-headline text-5xl font-extrabold mb-8 tracking-tight text-on-surface dark:text-[#e8e1d6]">One Chad, One Squeeze.</h2>
<div class="space-y-6 font-body text-lg text-on-surface/80 dark:text-[#c9bfb0] leading-loose">
<p>Founded in 2026, Spiked was born from a simple idea which crossed mubaraq's mind: Why did "fresh" juice taste like a science experiment? We missed the zing. We missed the mist. We missed the true essence of the grove.</p>
<p>We spent months sourcing from independent farmers who treat their soil like gold. No pesticides, no nonsense. Just pure, sun-drenched vibrancy bottled in its most potent state.</p>
</div>
</div>
</div>
</div>
</section>
<section class="py-32 px-8 md:px-20 dark:bg-[#0a0e14]">
<div class="max-w-screen-2xl mx-auto">
<div class="text-center mb-24">
<h2 class="font-headline text-6xl font-black mb-4 tracking-tighter uppercase text-on-background dark:text-[#e8e1d6]">The Spiked Method</h2>
<div class="h-1 w-24 bg-primary-fixed dark:bg-[#ffa726] mx-auto rounded-full"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-surface-container-highest dark:bg-[#37424e] p-10 rounded-xl hover:scale-[1.02] transition-transform duration-500">
<div class="w-16 h-16 bg-primary-fixed dark:bg-[#ffa726] flex items-center justify-center rounded-full mb-8">
<span class="material-symbols-outlined text-surface dark:text-[#261100] text-3xl" data-icon="ac_unit">ac_unit</span>
</div>
<h3 class="font-headline text-2xl font-bold mb-4 text-on-background dark:text-[#e8e1d6]">Hyper-Chilled Extraction</h3>
<p class="font-body text-on-surface-variant dark:text-[#c9bfb0]">We press our fruit at exactly 38°F. This preserves the delicate enzymes and volatile aromas that heat-pasteurized juices destroy.</p>
</div>
<div class="bg-tertiary-container dark:bg-[#5a8000] p-10 rounded-xl hover:scale-[1.02] transition-transform duration-500 text-on-tertiary-container dark:text-[#fff5e1]">
<div class="w-16 h-16 bg-tertiary dark:bg-[#5a8000] flex items-center justify-center rounded-full mb-8">
<span class="material-symbols-outlined text-on-tertiary dark:text-[#fff5e1] text-3xl" data-icon="compress">compress</span>
</div>
<h3 class="font-headline text-2xl font-bold mb-4">The Gentle Press</h3>
<p class="font-body opacity-90">No centrifugal heat. No blades. We use 10,000 lbs of hydraulic pressure to gently "squeeze" the nutrients out without bruising the flavor profile.</p>
</div>
<div class="bg-surface-container-highest dark:bg-[#37424e] p-10 rounded-xl hover:scale-[1.02] transition-transform duration-500">
<div class="w-16 h-16 bg-primary-fixed dark:bg-[#ffa726] flex items-center justify-center rounded-full mb-8">
<span class="material-symbols-outlined text-surface dark:text-[#261100] text-3xl" data-icon="timer">timer</span>
</div>
<h3 class="font-headline text-2xl font-bold mb-4 text-on-background dark:text-[#e8e1d6]">Zero-Day Bottling</h3>
<p class="font-body text-on-surface-variant dark:text-[#c9bfb0]">From the tree to the bottle in under 12 hours. We don't believe in storage. We believe in momentum.</p>
</div>
</div>
</div>
</section>
<section class="py-32 px-8 md:px-20 bg-inverse-surface dark:bg-[#0f1419] text-on-primary dark:text-[#e8e1d6]">
<div class="max-w-screen-2xl mx-auto flex flex-col md:flex-row items-center gap-16">
<div class="md:w-1/2">
<img alt="Eco-friendly glass bottles stacked in a cool environment" class="rounded-xl object-cover h-[600px] w-full shadow-inner" data-alt="Minimalist eco-friendly frosted glass bottles stacked artistically with soft green backlighting, emphasizing sustainable materials" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA0-IKJGNGTyxGcvJe1Vg54PfAOAyBKfsMCZEcQJaqSqYLwlv0_Ls552CsweucU1zRAZGkGSpp5DnK0R4B11sh8HHjPUKd5rGgQj7HnirHpQwMBa2XFsgUrxo-sQJdsvz8s46Kx-sOqBlo0yTVMnYmTYqx_sPvVVAvFv2UXC5FXH8kOqPb4JVWwYeMeXfVPnk6G53i6eVUNpZ6HRGJ1Llad_9Vt2Z1H-Eva8dPp6A_AMxvp1-ZZKVKjkHB_J6zJzTl6I4QAVIT_CVk"/>
</div>
<div class="md:w-1/2">
<p class="font-label text-tertiary-fixed dark:text-[#d4ff7a] font-bold tracking-widest mb-4">FOR THE PLANET</p>
<h2 class="font-headline text-5xl md:text-6xl font-extrabold mb-8 tracking-tight">Bottled for the next century.</h2>
<p class="font-body text-xl mb-10 leading-relaxed text-surface/80 dark:text-[#c9bfb0]">
Our bottles are crafted from 100% recycled infinite-use glass. No plastics. No microplastics. Even our labels are printed with soy-based vegetable inks. Because a great squeeze shouldn't leave a bitter footprint.
</p>
<div class="grid grid-cols-2 gap-8">
<div>
<span class="block font-headline text-4xl font-bold text-tertiary-fixed dark:text-[#d4ff7a] mb-2">98%</span>
<span class="font-body text-sm uppercase tracking-widest opacity-60">Plastic Free</span>
</div>
<div>
<span class="block font-headline text-4xl font-bold text-tertiary-fixed dark:text-[#d4ff7a] mb-2">100%</span>
<span class="font-body text-sm uppercase tracking-widest opacity-60">Solar Powered HQ</span>
</div>
</div>
</div>
</div>
</section>
<section class="py-40 px-8 md:px-20 text-center dark:bg-[#0a0e14]">
<h2 class="font-headline text-5xl md:text-7xl font-black mb-12 tracking-tighter text-on-background dark:text-[#e8e1d6]">Ready to feel the mist?</h2>
<a class="inline-block bg-gradient-to-r from-primary to-primary-container dark:from-[#ffa726] dark:to-[#ffb84d] text-on-primary dark:text-[#261100] px-12 py-6 rounded-full font-headline font-bold text-xl hover:scale-105 transition-all shadow-xl hover:shadow-primary-container/20" href="/catalog/">
Explore the Catalog
</a>
</section>
</main>
<footer class="w-full rounded-t-[3rem] mt-20 bg-[#ffeedf] dark:bg-[#0f1419]">
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 px-12 py-20 max-w-screen-2xl mx-auto">
<div class="flex flex-col">
<span class="text-4xl font-black text-[#452800] dark:text-[#e8e1d6] mb-4 font-headline tracking-tighter">Spiked</span>
<p class="text-[#452800]/80 dark:text-[#c9bfb0] font-body text-sm leading-relaxed">
Bringing the mub squeeze world of cold-pressed zest to your doorstep. Every bottle is a burst of life.
</p>
</div>
<div class="grid grid-cols-2 gap-8 font-['Be_Vietnam_Pro'] text-sm uppercase tracking-widest font-bold">
<div class="flex flex-col space-y-4">
<a class="text-[#452800]/80 dark:text-[#c9bfb0] hover:text-[#fd8b00] dark:hover:text-[#ffa726] hover:translate-x-1 transition-all" href="/catalog/">Shop All</a>
<a class="text-[#8c4a00] dark:text-[#ffa726] font-bold" href="/about/">Our Story</a>
<a class="text-[#452800]/80 dark:text-[#c9bfb0] hover:text-[#fd8b00] dark:hover:text-[#ffa726] hover:translate-x-1 transition-all" href="/about/">Sustainability</a>
</div>
<div class="flex flex-col space-y-4">
<a class="text-[#452800]/80 dark:text-[#c9bfb0] hover:text-[#fd8b00] dark:hover:text-[#ffa726] hover:translate-x-1 transition-all" href="#">Press</a>
<a class="text-[#452800]/80 dark:text-[#c9bfb0] hover:text-[#fd8b00] dark:hover:text-[#ffa726] hover:translate-x-1 transition-all" href="#">Instagram</a>
<a class="text-[#452800]/80 dark:text-[#c9bfb0] hover:text-[#fd8b00] dark:hover:text-[#ffa726] hover:translate-x-1 transition-all" href="#">TikTok</a>
</div>
</div>
<div class="flex flex-col md:items-end justify-between">
<div class="bg-surface-container-highest dark:bg-[#37424e] p-6 rounded-lg w-full max-w-xs">
<p class="font-headline font-bold text-primary dark:text-[#ffa726] mb-2">The Zest Newsletter</p>
<div class="flex">
<input class="bg-surface dark:bg-[#2c3340] border-none rounded-l-md w-full focus:ring-primary dark:focus:ring-[#ffa726] text-on-background dark:text-[#e8e1d6] placeholder:text-on-surface-variant dark:placeholder:text-[#c9bfb0]/40" placeholder="Email" type="email"/>
<button class="bg-primary dark:bg-[#ffa726] px-4 rounded-r-md text-on-primary dark:text-[#261100] hover:bg-primary-dim dark:hover:bg-[#ffb84d] transition-colors">
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
</button>
</div>
</div>
<p class="mt-8 md:mt-0 font-['Be_Vietnam_Pro'] text-[10px] uppercase tracking-widest text-[#452800]/60 dark:text-[#c9bfb0]/40">
© 2026 Spiked. The Mub Squeeze. All Rights Reserved.
</p>
</div>
</div>
</footer>
</body></html>