forked from ChauhanSai/goldmanhack2026
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstitch_code.html
More file actions
308 lines (307 loc) · 20.4 KB
/
Copy pathstitch_code.html
File metadata and controls
308 lines (307 loc) · 20.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@700;800;900&family=Work+Sans:wght@400;500;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-tertiary-fixed-variant": "#773200",
"on-tertiary-fixed": "#331100",
"on-primary-container": "#ecf0ff",
"on-secondary-container": "#646464",
"secondary-container": "#e2e2e2",
"secondary": "#5e5e5e",
"surface-container-high": "#e7e8f1",
"error": "#ba1a1a",
"surface-tint": "#005bbf",
"tertiary": "#8e3d00",
"primary": "#0052ac",
"error-container": "#ffdad6",
"on-secondary-fixed": "#1b1b1b",
"on-surface": "#191c22",
"outline-variant": "#c2c6d5",
"surface-container-highest": "#e1e2eb",
"inverse-primary": "#acc7ff",
"on-secondary-fixed-variant": "#474747",
"surface-bright": "#f9f9ff",
"tertiary-fixed-dim": "#ffb68f",
"primary-fixed": "#d7e2ff",
"on-error": "#ffffff",
"inverse-surface": "#2e3037",
"on-surface-variant": "#424753",
"tertiary-fixed": "#ffdbca",
"surface-container-low": "#f2f3fc",
"on-primary-fixed-variant": "#004492",
"primary-container": "#196ad4",
"surface-variant": "#e1e2eb",
"on-secondary": "#ffffff",
"on-background": "#191c22",
"surface-container": "#ecedf7",
"surface": "#f9f9ff",
"tertiary-container": "#b44f00",
"on-tertiary-container": "#ffede5",
"inverse-on-surface": "#eff0fa",
"on-tertiary": "#ffffff",
"on-primary-fixed": "#001a40",
"secondary-fixed": "#e2e2e2",
"background": "#f9f9ff",
"primary-fixed-dim": "#acc7ff",
"surface-container-lowest": "#ffffff",
"secondary-fixed-dim": "#c6c6c6",
"outline": "#727784",
"surface-dim": "#d8d9e3",
"on-error-container": "#93000a",
"on-primary": "#ffffff"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"xl": "64px",
"base": "8px",
"md": "24px",
"gutter": "24px",
"lg": "48px",
"margin": "32px",
"sm": "12px",
"xs": "4px"
},
"fontFamily": {
"label-sm": ["Work Sans"],
"body-md": ["Work Sans"],
"body-lg": ["Work Sans"],
"headline-md": ["Epilogue"],
"headline-xl": ["Epilogue"],
"headline-lg": ["Epilogue"],
"label-bold": ["Work Sans"]
},
"fontSize": {
"label-sm": ["12px", {"lineHeight": "1.2", "fontWeight": "600"}],
"body-md": ["16px", {"lineHeight": "1.5", "fontWeight": "400"}],
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "500"}],
"headline-md": ["24px", {"lineHeight": "1.2", "fontWeight": "800"}],
"headline-xl": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.04em", "fontWeight": "900"}],
"headline-lg": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "800"}],
"label-bold": ["14px", {"lineHeight": "1.2", "fontWeight": "700"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.neobrutalist-card {
border: 3px solid black;
box-shadow: 6px 6px 0px 0px rgba(0,0,0,1);
transition: all 0.1s ease;
}
.neobrutalist-card:active {
box-shadow: 0px 0px 0px 0px rgba(0,0,0,1);
transform: translate(6px, 6px);
}
.neobrutalist-btn {
border: 4px solid black;
box-shadow: 4px 4px 0px 0px rgba(0,0,0,1);
transition: all 0.1s ease;
}
.neobrutalist-btn:active {
box-shadow: 0px 0px 0px 0px rgba(0,0,0,1);
transform: translate(4px, 4px);
}
.sketch-border {
border: 3px solid black;
position: relative;
}
.sketch-border::after {
content: '';
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
border: 1px solid black;
pointer-events: none;
opacity: 0.2;
}
.floating-voice {
position: fixed;
bottom: 32px;
right: 32px;
z-index: 100;
}
</style>
</head>
<body class="bg-background text-on-background font-body-md overflow-x-hidden">
<!-- TopAppBar -->
<header class="bg-stone-50 dark:bg-stone-900 border-b-4 border-black dark:border-white w-full shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] flex justify-between items-center px-6 py-4 sticky top-0 z-50">
<div class="text-2xl font-black text-black dark:text-white italic font-['Epilogue'] tracking-tighter uppercase">MOORE MONEY</div>
<nav class="hidden md:flex gap-8">
<a class="font-['Epilogue'] font-black uppercase tracking-tighter text-[#196ad4] underline decoration-4 underline-offset-4 hover:bg-[#196ad4] hover:text-white transition-all duration-75 active:translate-x-1 active:translate-y-1" href="#">Dashboard</a>
<a class="font-['Epilogue'] font-black uppercase tracking-tighter text-black dark:text-stone-300 hover:bg-[#196ad4] hover:text-white transition-all duration-75 active:translate-x-1 active:translate-y-1" href="#">Vault</a>
<a class="font-['Epilogue'] font-black uppercase tracking-tighter text-black dark:text-stone-300 hover:bg-[#196ad4] hover:text-white transition-all duration-75 active:translate-x-1 active:translate-y-1" href="#">Savings</a>
</nav>
<div class="flex items-center gap-4">
<button class="neobrutalist-btn bg-primary-container text-white font-['Epilogue'] font-black uppercase px-6 py-2 active:shadow-none">Join Herd</button>
<img alt="Mascot Profile" class="w-10 h-10 border-2 border-black rounded-full object-cover" data-alt="A close-up profile avatar of a friendly hand-drawn cow mascot with thick black ink outlines. The cow is wearing chunky black sunglasses and has a wide, happy smile. The background is a clean white, emphasizing the rebellious and energetic neobrutalist doodle aesthetic. Simple blue accents are used sparingly to highlight the cow's cheerful expression." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCun33cHS7CcHPhVkIxzkpS8aJm74TJPbDajRig2uqZ-6oIQ40q-fy36Eab27Ae_8WctYMEmogDjOF1peByGUq7pXG1ShurJ_fyH9kTR4rQRwY8olSUbYHQhYLLW2fQUJ0n2o-pzYKXK_cJMOZ6gT1QqQoGXA2iLdjl53lde2klSxX9uIFwMLq9qip-pEQaLszIIVdaeQIuB_MwXD0AO_lXJKlHi8efwFGbtjLbEfhfYTpFMRaGGZGxVBM-uYlcovtxgK17ufQTeno"/>
</div>
</header>
<main class="max-w-7xl mx-auto px-margin pt-xl pb-lg">
<!-- Hero Section -->
<section class="grid grid-cols-1 md:grid-cols-12 gap-gutter items-center mb-xl">
<div class="md:col-span-7">
<div class="inline-block bg-primary-container text-white border-2 border-black px-4 py-1 font-label-bold text-label-bold mb-4 rotate-[-1deg] shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
NO BULL FINANCIALS
</div>
<h1 class="font-headline-xl text-headline-xl text-on-background mb-md leading-[1.05]">
FINANCE SO EASY A <span class="text-primary-container italic underline decoration-8 decoration-black">COW</span> COULD DO IT.
</h1>
<p class="font-body-lg text-body-lg max-w-lg mb-lg">
Manage your moo-lah with rebellious tools that cut through the corporate noise. Portfolio mapping, automated bots, and a cow mascot that actually cares about your savings.
</p>
<div class="flex flex-wrap gap-md">
<button class="neobrutalist-btn bg-primary-container text-white px-8 py-4 text-headline-md font-headline-md uppercase">Start Milking Profits</button>
<button class="neobrutalist-btn bg-white text-black px-8 py-4 text-headline-md font-headline-md uppercase">View Ledger</button>
</div>
</div>
<div class="md:col-span-5 relative">
<div class="neobrutalist-card bg-white p-4 rotate-2">
<img alt="Main Mascot Hero" class="w-full h-auto" data-alt="A large, central hand-drawn doodle of Moore the Cow standing confidently and waving with one hoof while holding a gold coin in the other. The illustration features thick, intentionally uneven black lines that capture a high-energy, sketchbook feeling. The background is pure white with a few scattered doodle stars and squiggles in #196ad4 blue to add depth and playfulness." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCun33cHS7CcHPhVkIxzkpS8aJm74TJPbDajRig2uqZ-6oIQ40q-fy36Eab27Ae_8WctYMEmogDjOF1peByGUq7pXG1ShurJ_fyH9kTR4rQRwY8olSUbYHQhYLLW2fQUJ0n2o-pzYKXK_cJMOZ6gT1QqQoGXA2iLdjl53lde2klSxX9uIFwMLq9qip-pEQaLszIIVdaeQIuB_MwXD0AO_lXJKlHi8efwFGbtjLbEfhfYTpFMRaGGZGxVBM-uYlcovtxgK17ufQTeno"/>
</div>
<!-- Sketched Arrow Decor -->
<div class="absolute -bottom-10 -left-10 hidden lg:block">
<span class="material-symbols-outlined text-6xl text-black -rotate-45" style="font-variation-settings: 'FILL' 0, 'wght' 700;">arrow_downward</span>
</div>
</div>
</section>
<!-- Bento Grid Sections -->
<section class="grid grid-cols-1 md:grid-cols-3 gap-gutter mb-xl">
<!-- Portfolio Mapper -->
<div class="neobrutalist-card bg-[#e2e2e2] p-md md:col-span-2 relative overflow-hidden group">
<div class="flex justify-between items-start mb-lg">
<div>
<span class="material-symbols-outlined text-4xl mb-base" data-icon="map">map</span>
<h2 class="font-headline-lg text-headline-lg">Portfolio Mapper</h2>
<p class="font-body-md text-body-md max-w-md">Trace your assets across the global ecosystem. No hidden corners, just pure visibility.</p>
</div>
<img alt="Mascot peeking" class="w-24 h-24 object-contain translate-x-4 transition-transform group-hover:translate-x-0" data-alt="A minimalist doodle of a cow mascot peeking playfully from the right side of the frame. The style is neobrutalist with thick black ink lines and high contrast. The cow has a curious expression with large, simple eyes. The white background makes the black strokes pop, creating a modern and artistic financial interface element." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCun33cHS7CcHPhVkIxzkpS8aJm74TJPbDajRig2uqZ-6oIQ40q-fy36Eab27Ae_8WctYMEmogDjOF1peByGUq7pXG1ShurJ_fyH9kTR4rQRwY8olSUbYHQhYLLW2fQUJ0n2o-pzYKXK_cJMOZ6gT1QqQoGXA2iLdjl53lde2klSxX9uIFwMLq9qip-pEQaLszIIVdaeQIuB_MwXD0AO_lXJKlHi8efwFGbtjLbEfhfYTpFMRaGGZGxVBM-uYlcovtxgK17ufQTeno"/>
</div>
<div class="h-48 bg-white border-2 border-black flex items-center justify-center relative shadow-inner">
<span class="material-symbols-outlined text-6xl opacity-10" data-icon="route">route</span>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-3/4 h-1 bg-black rotate-12 relative">
<div class="absolute -top-4 left-0 w-8 h-8 bg-primary-container border-2 border-black rounded-full"></div>
<div class="absolute -bottom-4 right-0 w-8 h-8 bg-white border-2 border-black rounded-full"></div>
</div>
</div>
</div>
</div>
<!-- Bread Bot -->
<div class="neobrutalist-card bg-primary-container text-white p-md">
<span class="material-symbols-outlined text-4xl mb-base" data-icon="smart_toy">smart_toy</span>
<h2 class="font-headline-lg text-headline-lg mb-sm">Bread Bot</h2>
<p class="font-body-md mb-lg">The AI that churns your spare change into butter (and by butter, we mean compound interest).</p>
<div class="bg-black text-white p-4 font-mono text-sm border-2 border-white mb-base">
> STATUS: CHURNING...<br/>
> GAINS: +4.2% MOO
</div>
<button class="w-full py-2 bg-white text-black font-bold border-2 border-black hover:bg-stone-100">CONFIGURE BOT</button>
</div>
<!-- Financial Twin -->
<div class="neobrutalist-card bg-white p-md flex flex-col justify-between">
<div>
<span class="material-symbols-outlined text-4xl mb-base" data-icon="diversity_3">diversity_3</span>
<h2 class="font-headline-lg text-headline-lg mb-sm">Financial Twin</h2>
<p class="font-body-md">A digital shadow of your spending habits. See the "Future You" based on today's lattes.</p>
</div>
<div class="mt-lg border-t-2 border-black pt-md flex items-end gap-2">
<div class="w-full bg-stone-100 h-24 border-2 border-black relative">
<div class="absolute bottom-0 left-0 w-1/3 h-1/2 bg-primary-container border-r-2 border-black"></div>
<div class="absolute bottom-0 left-1/3 w-1/3 h-3/4 bg-on-tertiary-container border-r-2 border-black"></div>
<div class="absolute bottom-0 right-0 w-1/3 h-full bg-black"></div>
</div>
</div>
</div>
<!-- Goal Canvas -->
<div class="neobrutalist-card bg-on-tertiary-fixed text-white p-md md:col-span-2 relative">
<div class="grid grid-cols-1 md:grid-cols-2 gap-md">
<div>
<h2 class="font-headline-lg text-headline-lg mb-sm">Goal Canvas</h2>
<p class="font-body-md mb-md">Paint your future. Define targets, set milestones, and watch the cow guide you to the finish line.</p>
<ul class="space-y-2">
<li class="flex items-center gap-2"><span class="material-symbols-outlined text-primary-container" data-icon="check_circle">check_circle</span> New Pasture Fund</li>
<li class="flex items-center gap-2"><span class="material-symbols-outlined text-primary-container" data-icon="check_circle">check_circle</span> Golden Hoof Savings</li>
<li class="flex items-center gap-2"><span class="material-symbols-outlined text-primary-container opacity-30" data-icon="radio_button_unchecked">radio_button_unchecked</span> Bull Market Exit</li>
</ul>
</div>
<div class="border-4 border-dashed border-white/20 rounded-xl flex items-center justify-center p-md">
<img alt="Cow with chart" class="max-h-40" data-alt="A hand-drawn doodle of the cow mascot wearing professional-looking glasses and intently studying a large financial chart that shows an upward trend. The chart is drawn with simple, thick black lines on a white canvas. The overall mood is focused yet whimsical, reinforcing the brand's 'rebellious but reliable' financial philosophy in a high-contrast neobrutalist style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCun33cHS7CcHPhVkIxzkpS8aJm74TJPbDajRig2uqZ-6oIQ40q-fy36Eab27Ae_8WctYMEmogDjOF1peByGUq7pXG1ShurJ_fyH9kTR4rQRwY8olSUbYHQhYLLW2fQUJ0n2o-pzYKXK_cJMOZ6gT1QqQoGXA2iLdjl53lde2klSxX9uIFwMLq9qip-pEQaLszIIVdaeQIuB_MwXD0AO_lXJKlHi8efwFGbtjLbEfhfYTpFMRaGGZGxVBM-uYlcovtxgK17ufQTeno"/>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="neobrutalist-card bg-white p-lg text-center mb-xl relative">
<div class="absolute -top-12 left-1/2 -translate-x-1/2 w-24 h-24 bg-white border-4 border-black rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-4xl text-primary-container" data-icon="rocket_launch">rocket_launch</span>
</div>
<h2 class="font-headline-xl text-headline-xl mb-md">READY TO MOO-VE?</h2>
<p class="font-body-lg text-body-lg max-w-2xl mx-auto mb-lg">
Join 50,000+ others who are tired of boring banking. Get the tools, get the mascot, get the money. No bull, just gains.
</p>
<div class="flex flex-col md:flex-row justify-center gap-md">
<input class="neobrutalist-card px-6 py-4 font-body-md w-full md:w-80 focus:ring-0 focus:border-primary-container" placeholder="Enter your email" type="email"/>
<button class="neobrutalist-btn bg-black text-white px-10 py-4 font-headline-md uppercase">Claim Your Stake</button>
</div>
</section>
</main>
<!-- Floating Voice Assistant Mascot -->
<div class="floating-voice group">
<div class="relative">
<div class="absolute -top-20 right-0 bg-white border-2 border-black p-3 rounded-xl shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
<p class="font-label-bold">"Need a hoof, boss?"</p>
<div class="absolute bottom-[-10px] right-6 w-4 h-4 bg-white border-b-2 border-r-2 border-black rotate-45"></div>
</div>
<div class="w-20 h-20 bg-primary-container border-4 border-black rounded-full flex items-center justify-center shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:scale-110 transition-transform cursor-pointer">
<img alt="Voice Mascot" class="w-14 h-14 object-contain" data-alt="A small, circular doodle avatar of the cow mascot's head. The cow is wearing a small headset and has a playful, helpful expression. The style remains consistent with the neobrutalist doodle aesthetic: bold black lines, high contrast, and a charmingly hand-drawn feel. It sits atop a vibrant blue background, acting as a friendly digital assistant." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCun33cHS7CcHPhVkIxzkpS8aJm74TJPbDajRig2uqZ-6oIQ40q-fy36Eab27Ae_8WctYMEmogDjOF1peByGUq7pXG1ShurJ_fyH9kTR4rQRwY8olSUbYHQhYLLW2fQUJ0n2o-pzYKXK_cJMOZ6gT1QqQoGXA2iLdjl53lde2klSxX9uIFwMLq9qip-pEQaLszIIVdaeQIuB_MwXD0AO_lXJKlHi8efwFGbtjLbEfhfYTpFMRaGGZGxVBM-uYlcovtxgK17ufQTeno"/>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-stone-100 dark:bg-stone-950 border-t-4 border-black w-full flex flex-col md:flex-row justify-between items-center px-12 py-8 gap-4">
<div class="font-['Epilogue'] font-black text-lg text-black dark:text-white uppercase italic">MOORE MONEY</div>
<div class="flex gap-8">
<a class="font-['Epilogue'] font-medium text-sm text-stone-600 dark:text-stone-400 hover:underline decoration-2" href="#">Terms</a>
<a class="font-['Epilogue'] font-medium text-sm text-stone-600 dark:text-stone-400 hover:underline decoration-2" href="#">Privacy</a>
<a class="font-['Epilogue'] font-medium text-sm text-stone-600 dark:text-stone-400 hover:underline decoration-2" href="#">Doodle Guide</a>
</div>
<div class="font-['Epilogue'] font-medium text-sm text-stone-600 dark:text-stone-400">© 2024 MOORE MONEY - NO BULL.</div>
</footer>
<!-- BottomNavBar (Mobile) -->
<nav class="fixed bottom-0 w-full z-50 flex justify-around items-center h-20 bg-white px-2 pb-safe md:hidden border-t-4 border-black shadow-[0px_-4px_0px_0px_rgba(0,0,0,1)]">
<div class="flex flex-col items-center bg-[#196ad4] text-white rounded-none border-2 border-black -translate-y-2 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] p-2">
<span class="material-symbols-outlined" data-icon="home">home</span>
<span class="font-['Epilogue'] text-[10px] font-black uppercase">Home</span>
</div>
<div class="flex flex-col items-center text-black">
<span class="material-symbols-outlined" data-icon="grid_view">grid_view</span>
<span class="font-['Epilogue'] text-[10px] font-black uppercase">Feed</span>
</div>
<div class="flex flex-col items-center text-black">
<span class="material-symbols-outlined" data-icon="account_balance_wallet">account_balance_wallet</span>
<span class="font-['Epilogue'] text-[10px] font-black uppercase">Wallet</span>
</div>
<div class="flex flex-col items-center text-black">
<span class="material-symbols-outlined" data-icon="person">person</span>
<span class="font-['Epilogue'] text-[10px] font-black uppercase">Profile</span>
</div>
</nav>
</body></html>