static: introduce a landing page
Pedro Lucas Porcellis porcellis@eletrotupi.com · 4 months ago
35cadba449de3927b9f1686ac98da77e40d02d65 Browse filesParents
d14a658Changed files
8
Additions
+519
Deletions
0
/dev/null → api/src/static/images/app.png
Binary file
/dev/null → api/src/static/images/mood.jpg
Binary file
/dev/null → api/src/static/images/pills.jpg
Binary file
/dev/null → api/src/static/images/sleep.jpg
Binary file
/dev/null → api/src/static/index.html
1 +
<!DOCTYPE html>
2 +
<html class="light" lang="pt-BR">
3 +
<head>
4 +
<meta charset="utf-8"/>
5 +
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6 +
<title>Nexo - Monitore suas emoções</title>
7 +
<!-- Tailwind & Plugins -->
8 +
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
9 +
<!-- Fonts -->
10 +
<link href="https://fonts.googleapis.com" rel="preconnect"/>
11 +
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
12 +
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
13 +
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
14 +
15 +
<link href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css" rel="stylesheet"/>
16 +
<link href="https://cdn.jsdelivr.net/npm/atropos/atropos.min.css" rel="stylesheet"/>
17 +
<script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>
18 +
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
19 +
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
20 +
<link href="/styles/main.css" rel="stylesheet" />
21 +
<script id="tailwind-config">
22 +
tailwind.config = {
23 +
darkMode: "class",
24 +
theme: {
25 +
extend: {
26 +
"colors": {
27 +
"background-light": "#f6f8f6",
28 +
"border-subtle": "#f1f5f9",
29 +
"surface-light": "#ffffff",
30 +
"pill-indigo": "#e0e7ff",
31 +
"pill-purple": "#f3e8ff",
32 +
"text-primary": "#0f172a",
33 +
"status-active-bg": "rgba(19, 236, 91, 0.1)",
34 +
"text-secondary": "#64748b",
35 +
"pill-blue": "#dbeafe",
36 +
"brand-green": "#13ec5b"
37 +
},
38 +
"borderRadius": {
39 +
"DEFAULT": "0.25rem",
40 +
"lg": "0.5rem",
41 +
"xl": "0.75rem",
42 +
"full": "9999px"
43 +
},
44 +
"spacing": {
45 +
"container-padding": "1rem",
46 +
"section-gap": "2rem",
47 +
"card-gap": "0.75rem",
48 +
"internal-padding": "1rem",
49 +
"inline-gap-sm": "0.5rem"
50 +
},
51 +
"fontFamily": {
52 +
"label-sm": ["Inter"],
53 +
"body-md": ["Inter"],
54 +
"body-lg": ["Inter"],
55 +
"headline-md": ["Inter"],
56 +
"headline-lg": ["Inter"]
57 +
},
58 +
"fontSize": {
59 +
"label-sm": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600" }],
60 +
"body-md": ["14px", { "lineHeight": "20px", "fontWeight": "500" }],
61 +
"body-lg": ["16px", { "lineHeight": "20px", "fontWeight": "700" }],
62 +
"headline-md": ["18px", { "lineHeight": "24px", "fontWeight": "700" }],
63 +
"headline-lg": ["20px", { "lineHeight": "28px", "letterSpacing": "-0.02em", "fontWeight": "700" }]
64 +
}
65 +
},
66 +
},
67 +
}
68 +
</script>
69 +
</head>
70 +
71 +
<body class="text-text-primary">
72 +
<header class="docked full-width top-0 sticky z-50 bg-surface-light/95 backdrop-blur-md border-b border-border-subtle shadow-sm">
73 +
<nav class="flex justify-between items-center w-full px-container-padding max-w-7xl mx-auto h-16">
74 +
<div class="text-headline-lg font-headline-lg text-text-primary">nexo</div>
75 +
<div class="hidden md:flex gap-8">
76 +
<a class="text-text-primary font-bold border-b-2 border-status-active-bg transition-colors duration-200" href="#">
77 +
Funcionalidades
78 +
</a>
79 +
80 +
<a class="text-text-secondary font-body-md hover:text-text-primary transition-colors duration-200" href="#">
81 +
Monografia
82 +
</a>
83 +
84 +
<a class="text-text-secondary font-body-md hover:text-text-primary transition-colors duration-200" href="#">
85 +
Sobre o projeto
86 +
</a>
87 +
</div>
88 +
89 +
<button class="bg-text-primary text-white px-6 py-2 rounded-lg font-body-lg btn-hover-effect">
90 +
Começe já!
91 +
</button>
92 +
</nav>
93 +
</header>
94 +
95 +
<main>
96 +
<section class="max-w-7xl mx-auto px-container-padding py-20 flex flex-col md:flex-row items-center gap-12">
97 +
<div class="flex-1 space-y-8">
98 +
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight leading-tight animate__animated animate__zoomIn">
99 +
Equilíbrio em cada <span class="text-brand-green">registro</span>
100 +
</h1>
101 +
<p class="text-text-secondary text-lg md:text-xl max-w-lg">
102 +
Monitore sua saúde mental e física com precisão clínica e interface intuitiva.
103 +
Organize sua rotina de bem-estar em um só lugar.
104 +
</p>
105 +
106 +
<div class="flex gap-4">
107 +
<button class="bg-brand-green text-text-primary px-8 py-4 rounded-xl font-body-lg shadow-lg shadow-brand-green/20 btn-hover-effect flex items-center gap-2">
108 +
<span class="material-symbols-outlined">download</span>
109 +
Baixar Agora
110 +
</button>
111 +
112 +
<button class="border border-border-subtle bg-surface-light px-8 py-4 rounded-xl font-body-lg btn-hover-effect">
113 +
Saiba mais
114 +
</button>
115 +
</div>
116 +
</div>
117 +
118 +
<div class="flex-1 relative">
119 +
<div class="absolute -top-12 -left-12 w-64 h-64 bg-brand-green/10 rounded-full blur-3xl animate-pulse"></div>
120 +
<div class="relative z-10 p-4 bg-white/50 backdrop-blur-xl rounded-[2.5rem] border border-white shadow-2xl">
121 +
<img alt="nexo App" class="rounded-[2rem] shadow-sm w-full h-auto object-cover"
122 +
src="/images/app.png" />
123 +
</div>
124 +
</div>
125 +
</section>
126 +
127 +
<section class="bg-surface-light py-20 border-y border-border-subtle">
128 +
<div class="max-w-7xl mx-auto px-container-padding">
129 +
<div class="mb-12 flex justify-between items-end">
130 +
<div>
131 +
<h2 class="text-headline-lg font-headline-lg text-3xl mb-2">Funcionalidades</h2>
132 +
<p class="text-text-secondary">Explore as ferramentas desenhadas para sua evolução.</p>
133 +
</div>
134 +
</div>
135 +
<div class="glide">
136 +
<div class="glide__track" data-glide-el="track">
137 +
<ul class="glide__slides">
138 +
<li class="glide__slide">
139 +
<div class="bg-background-light p-8 rounded-xl border border-border-subtle h-full group hover:shadow-md transition-shadow">
140 +
<div class="w-12 h-12 bg-pill-indigo rounded-lg flex items-center justify-center mb-6">
141 +
<span class="material-symbols-outlined text-indigo-600">mood</span>
142 +
</div>
143 +
<h3 class="font-headline-md text-xl mb-3">Monitoramento de Humor</h3>
144 +
<p class="text-text-secondary font-body-md mb-6">
145 +
Identifique padrões emocionais e gatilhos diários com nosso
146 +
sistema de tagging inteligente e análise de sentimentos.
147 +
</p>
148 +
149 +
<img alt="Mood tracking"
150 +
class="w-full h-48 object-cover rounded-lg"
151 +
src="/images/mood.jpg"/>
152 +
</div>
153 +
</li>
154 +
155 +
<li class="glide__slide">
156 +
<div class="bg-background-light p-8 rounded-xl border border-border-subtle h-full group hover:shadow-md transition-shadow">
157 +
<div class="w-12 h-12 bg-pill-purple rounded-lg flex items-center justify-center mb-6">
158 +
<span class="material-symbols-outlined text-purple-600">medical_services</span>
159 +
</div>
160 +
<h3 class="font-headline-md text-xl mb-3">Gestão de Saúde</h3>
161 +
<p class="text-text-secondary font-body-md mb-6">
162 +
Controle medicação, consultas e exames em um cronograma
163 +
unificado com alertas inteligentes e lembretes
164 +
personalizáveis.
165 +
</p>
166 +
<img alt="Health management" class="w-full h-48 object-cover rounded-lg" data-alt="Close up of a modern medical laboratory or clinic setting with clean white surfaces and high-tech equipment. Soft natural light flows through a window, highlighting the precision and cleanliness of the health environment. Professional and trustworthy atmosphere." src="/images/pills.jpg"/>
167 +
</div>
168 +
</li>
169 +
170 +
<!-- TODO: Check how to make this work with some morphing icons -->
171 +
<li class="glide__slide">
172 +
<div class="bg-background-light p-8 rounded-xl border border-border-subtle h-full group hover:shadow-md transition-shadow">
173 +
<div class="w-12 h-12 bg-pill-blue rounded-lg flex items-center justify-center mb-6">
174 +
<span class="material-symbols-outlined text-blue-600">sleep</span>
175 +
</div>
176 +
177 +
<h3 class="font-headline-md text-xl mb-3">Monitore seu sono</h3>
178 +
<p class="text-text-secondary font-body-md mb-6">
179 +
Controle também o seu sono, para conseguir antecipar flutuações no humor
180 +
e identificar padrões com mais qualidade
181 +
</p>
182 +
<img alt="Exercise routines"
183 +
class="w-full h-48 object-cover rounded-lg"
184 +
src="/images/sleep.jpg"/>
185 +
</div>
186 +
</li>
187 +
</ul>
188 +
</div>
189 +
<div class="glide__bullets mt-8 flex justify-center gap-2" data-glide-el="controls[nav]">
190 +
<button type="button"
191 +
class="glide__bullet w-3 h-3 rounded-full bg-border-subtle"
192 +
data-glide-dir="=0">
193 +
</button>
194 +
195 +
<button type="button"
196 +
class="glide__bullet w-3 h-3 rounded-full bg-border-subtle"
197 +
data-glide-dir="=1">
198 +
</button>
199 +
200 +
<button type="button"
201 +
class="glide__bullet w-3 h-3 rounded-full bg-border-subtle"
202 +
data-glide-dir="=2">
203 +
</button>
204 +
</div>
205 +
</div>
206 +
</div>
207 +
</section>
208 +
209 +
<section class="py-24 max-w-7xl mx-auto px-container-padding text-center">
210 +
<h2 class="text-headline-lg font-headline-lg text-4xl mb-16">Visualize padrões</h2>
211 +
<div class="flex justify-center">
212 +
<div class="atropos my-atropos w-full max-w-2xl">
213 +
<div class="atropos-scale">
214 +
<div class="atropos-rotate">
215 +
<div class="atropos-inner rounded-[2rem] bg-surface-light border border-border-subtle shadow-2xl p-10 text-left overflow-hidden">
216 +
<div class="flex justify-between items-start mb-8">
217 +
<div data-atropos-offset="5">
218 +
<span class="text-label-sm font-label-sm uppercase tracking-widest text-text-secondary">Energia</span>
219 +
<h3 class="text-5xl font-extrabold mt-2 text-brand-green">84%</h3>
220 +
</div>
221 +
222 +
<div class="bg-status-active-bg p-3 rounded-xl" data-atropos-offset="10">
223 +
<span class="material-symbols-outlined text-brand-green text-3xl">trending_up</span>
224 +
</div>
225 +
</div>
226 +
227 +
<div class="flex items-end gap-3 h-48 mb-8" data-atropos-offset="3">
228 +
<div class="flex-1 bg-border-subtle rounded-t-lg h-[60%] hover:bg-brand-green/20 transition-colors"></div>
229 +
<div class="flex-1 bg-border-subtle rounded-t-lg h-[45%] hover:bg-brand-green/20 transition-colors"></div>
230 +
<div class="flex-1 bg-brand-green rounded-t-lg h-[84%] relative">
231 +
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-text-primary text-white text-[10px] px-2 py-1 rounded">
232 +
Hoje
233 +
</div>
234 +
</div>
235 +
<div class="flex-1 bg-border-subtle rounded-t-lg h-[55%] transition-colors"></div>
236 +
<div class="flex-1 bg-border-subtle rounded-t-lg h-[70%] transition-colors"></div>
237 +
<div class="flex-1 bg-border-subtle rounded-t-lg h-[40%] transition-colors"></div>
238 +
<div class="flex-1 bg-border-subtle rounded-t-lg h-[65%] transition-colors"></div>
239 +
</div>
240 +
241 +
<div class="grid grid-cols-2 gap-4" data-atropos-offset="8">
242 +
<div class="p-4 bg-background-light rounded-xl">
243 +
<span class="text-xs text-text-secondary block">Humor</span>
244 +
<span class="font-bold">+12% mais ansioso nos últimos três dias</span>
245 +
</div>
246 +
<div class="p-4 bg-background-light rounded-xl">
247 +
<span class="text-xs text-text-secondary block">Sono</span>
248 +
<span class="font-bold">Você tem dormido melhor na última semana</span>
249 +
</div>
250 +
</div>
251 +
252 +
<div class="absolute -right-16 -bottom-16 w-64 h-64 bg-brand-green/5 rounded-full blur-3xl"
253 +
data-atropos-offset="-5"></div>
254 +
</div>
255 +
</div>
256 +
</div>
257 +
</div>
258 +
</div>
259 +
</section>
260 +
261 +
<section class="bg-background-light py-24">
262 +
<div class="max-w-7xl mx-auto px-container-padding">
263 +
<div class="text-center mb-16">
264 +
<h2 class="text-headline-lg font-headline-lg text-4xl mb-4">Por que o nexo?</h2>
265 +
<p class="text-text-secondary max-w-2xl mx-auto">
266 +
Tecnologia avançada focada no que realmente importa: seu bem-estar
267 +
diário e a segurança dos seus dados.
268 +
</p>
269 +
</div>
270 +
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
271 +
<div class="bg-surface-light p-10 rounded-2xl border border-border-subtle transition-all hover:-translate-y-2">
272 +
<div class="w-14 h-14 bg-status-active-bg rounded-2xl flex items-center justify-center mb-8">
273 +
<span class="material-symbols-outlined text-brand-green text-3xl">lock</span>
274 +
</div>
275 +
<h3 class="text-headline-md font-headline-md text-xl mb-4">Privacidade</h3>
276 +
<p class="text-text-secondary font-body-md leading-relaxed">
277 +
Seus dados de saúde são criptografados de ponta a ponta. Você tem
278 +
controle total sobre o que compartilha e com quem.
279 +
</p>
280 +
</div>
281 +
282 +
<div class="bg-surface-light p-10 rounded-2xl border border-border-subtle transition-all hover:-translate-y-2">
283 +
<div class="w-14 h-14 bg-pill-blue rounded-2xl flex items-center justify-center mb-8">
284 +
<span class="material-symbols-outlined text-blue-600 text-3xl">sync</span>
285 +
</div>
286 +
<h3 class="text-headline-md font-headline-md text-xl mb-4">Sincronização</h3>
287 +
<p class="text-text-secondary font-body-md leading-relaxed">
288 +
Acesse seu histórico de qualquer dispositivo. Utilize offline e o
289 +
app sincronizará.
290 +
</p>
291 +
</div>
292 +
293 +
<div class="bg-surface-light p-10 rounded-2xl border border-border-subtle transition-all hover:-translate-y-2">
294 +
<div class="w-14 h-14 bg-pill-purple rounded-2xl flex items-center justify-center mb-8">
295 +
<span class="material-symbols-outlined text-purple-600 text-3xl">analytics</span>
296 +
</div>
297 +
<h3 class="text-headline-md font-headline-md text-xl mb-4">Relatórios</h3>
298 +
<p class="text-text-secondary font-body-md leading-relaxed">
299 +
Gere PDFs detalhados para levar ao seu médico ou terapeuta,
300 +
facilitando o diagnóstico e acompanhamento clínico.
301 +
</p>
302 +
</div>
303 +
</div>
304 +
</div>
305 +
</section>
306 +
307 +
<section class="max-w-7xl mx-auto px-container-padding py-12">
308 +
<div class="bg-text-primary rounded-[2.5rem] p-12 md:p-20 text-center relative overflow-hidden">
309 +
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-green/10 rounded-full blur-[100px]"></div>
310 +
<div class="absolute -bottom-20 -left-20 w-80 h-80 bg-blue-500/10 rounded-full blur-[80px]"></div>
311 +
<div class="relative z-10 space-y-8">
312 +
<h2 class="text-white text-4xl md:text-6xl font-extrabold tracking-tight animated-text">
313 +
Pronto para começar sua jornada?
314 +
</h2>
315 +
<p class="text-slate-400 text-lg md:text-xl max-w-2xl mx-auto">
316 +
Explore o código-fonte, e baixe o aplicativo na Google Play. Exporte seus dados quando quiser
317 +
</p>
318 +
<div class="flex flex-col sm:flex-row justify-center gap-4 pt-4">
319 +
<button class="bg-brand-green text-text-primary px-10 py-5 rounded-xl font-bold text-lg shadow-xl shadow-brand-green/20 btn-hover-effect">
320 +
Começar Grátis agora
321 +
</button>
322 +
<a href="https://pira.dev/eletrotupi/tcc"
323 +
class="bg-white/10 backdrop-blur-md text-white border border-white/20 px-10 py-5 rounded-xl font-bold text-lg btn-hover-effect">
324 +
Visualizar código-fonte
325 +
</a>
326 +
</div>
327 +
</div>
328 +
</div>
329 +
</section>
330 +
</main>
331 +
332 +
<footer class="bg-background-light border-t border-border-subtle mt-20">
333 +
<div class="grid grid-cols-2 md:grid-cols-4 gap-section-gap px-container-padding py-16 max-w-7xl mx-auto">
334 +
<div class="col-span-2 md:col-span-1">
335 +
<div class="text-headline-md font-headline-md text-text-primary mb-6">nexo</div>
336 +
<p class="text-text-secondary font-body-md mb-6 max-w-xs">
337 +
Elevando o padrão de cuidado mental convergindo o que é necessário pra você.
338 +
</p>
339 +
</div>
340 +
341 +
<div>
342 +
<h4 class="font-bold text-text-primary mb-6">O app</h4>
343 +
<ul class="space-y-4">
344 +
<li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Funcionalidades</a></li>
345 +
<li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Monografia</a></li>
346 +
<li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Ajuda</a></li>
347 +
</ul>
348 +
</div>
349 +
350 +
<div>
351 +
<h4 class="font-bold text-text-primary mb-6">Sobre</h4>
352 +
<ul class="space-y-4">
353 +
<li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Fale conosco</a></li>
354 +
<li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Política de Privacidade</a></li>
355 +
</ul>
356 +
</div>
357 +
358 +
<!-- Legal -->
359 +
<div>
360 +
<h4 class="font-bold text-text-primary mb-6">Legal</h4>
361 +
<ul class="space-y-4">
362 +
<li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Termos de uso</a></li>
363 +
<li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Política de Cookies</a></li>
364 +
<li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Segurança</a></li>
365 +
</ul>
366 +
</div>
367 +
</div>
368 +
<div class="border-t border-border-subtle py-8 text-center text-label-sm font-label-sm text-text-secondary">
369 +
© 2025 <a href="https://cabotia.dev">cabotia</a>.
370 +
Todos os direitos reservados. Código-fonte e texto sob os termos das
371 +
respectivas licenças.
372 +
</div>
373 +
</footer>
374 +
375 +
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/glide.min.js"></script>
376 +
<script src="https://cdn.jsdelivr.net/npm/atropos/atropos.min.js"></script>
377 +
<script src="/js/app.js">
378 +
</script>
379 +
</body>
380 +
</html>
/dev/null → api/src/static/js/app.js
1 +
const { animate, utils, stagger, splitText } = anime;
2 +
3 +
document.addEventListener('DOMContentLoaded', function () {
4 +
const colors = [];
5 +
6 +
7 +
new Glide('.glide', {
8 +
type: 'carousel',
9 +
autoplay: 2000,
10 +
startAt: 0,
11 +
perView: 2.5,
12 +
gap: 32,
13 +
breakpoints: {
14 +
1024: {
15 +
perView: 2
16 +
},
17 +
768: {
18 +
perView: 1
19 +
}
20 +
}
21 +
}).mount();
22 +
23 +
// Initialize Atropos 3D Effect
24 +
const dash = Atropos({
25 +
el: '.my-atropos',
26 +
activeOffset: 40,
27 +
shadow: true,
28 +
shadowScale: 1.05,
29 +
onEnter() {
30 +
console.log('Atropos Enter');
31 +
},
32 +
onLeave() {
33 +
console.log('Atropos Leave');
34 +
},
35 +
onRotate(x, y) {
36 +
// Optional: add some dynamic lighting update logic here
37 +
}
38 +
});
39 +
40 +
41 +
// Anime js text bullshit
42 +
splitText('.animated-text', {
43 +
lines: true,
44 +
})
45 +
.addEffect(({ lines }) => animate(lines, {
46 +
y: ['20%', '-20%'],
47 +
loop: true,
48 +
alternate: true,
49 +
delay: stagger(15000),
50 +
ease: 'inOutQuad',
51 +
}))
52 +
.addEffect(split => {
53 +
split.words.forEach(($el, i) => {
54 +
const color = colors[i];
55 +
if (color) utils.set($el, { color });
56 +
$el.addEventListener('pointerenter', () => {
57 +
animate($el, {
58 +
color: utils.randomPick(['#FF4B4B', '#FFCC2A', '#B7FF54', '#57F695']),
59 +
duration: 250,
60 +
})
61 +
});
62 +
});
63 +
return () => {
64 +
/* Called between each split */
65 +
split.words.forEach((w, i) => colors[i] = utils.get(w, 'color'));
66 +
}
67 +
});
68 +
69 +
// Anime JS morph bullshit
70 +
});
/dev/null → api/src/static/js/tailwind.config.js
1 +
tailwind.config = {
2 +
darkMode: "class",
3 +
theme: {
4 +
extend: {
5 +
"colors": {
6 +
"background-light": "#f6f8f6",
7 +
"border-subtle": "#f1f5f9",
8 +
"surface-light": "#ffffff",
9 +
"pill-indigo": "#e0e7ff",
10 +
"pill-purple": "#f3e8ff",
11 +
"text-primary": "#0f172a",
12 +
"status-active-bg": "rgba(19, 236, 91, 0.1)",
13 +
"text-secondary": "#64748b",
14 +
"pill-blue": "#dbeafe",
15 +
"brand-green": "#13ec5b"
16 +
},
17 +
"borderRadius": {
18 +
"DEFAULT": "0.25rem",
19 +
"lg": "0.5rem",
20 +
"xl": "0.75rem",
21 +
"full": "9999px"
22 +
},
23 +
"spacing": {
24 +
"container-padding": "1rem",
25 +
"section-gap": "2rem",
26 +
"card-gap": "0.75rem",
27 +
"internal-padding": "1rem",
28 +
"inline-gap-sm": "0.5rem"
29 +
},
30 +
"fontFamily": {
31 +
"label-sm": ["Inter"],
32 +
"body-md": ["Inter"],
33 +
"body-lg": ["Inter"],
34 +
"headline-md": ["Inter"],
35 +
"headline-lg": ["Inter"]
36 +
},
37 +
"fontSize": {
38 +
"label-sm": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600" }],
39 +
"body-md": ["14px", { "lineHeight": "20px", "fontWeight": "500" }],
40 +
"body-lg": ["16px", { "lineHeight": "20px", "fontWeight": "700" }],
41 +
"headline-md": ["18px", { "lineHeight": "24px", "fontWeight": "700" }],
42 +
"headline-lg": ["20px", { "lineHeight": "28px", "letterSpacing": "-0.02em", "fontWeight": "700" }]
43 +
}
44 +
},
45 +
},
46 +
}
/dev/null → api/src/static/styles/main.css
1 +
body {
2 +
font-family: 'Inter', sans-serif; background-color: #f6f8f6;
3 +
}
4 +
5 +
.material-symbols-outlined {
6 +
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
7 +
}
8 +
9 +
.glass-header {
10 +
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
11 +
}
12 +
13 +
.glide__bullet--active {
14 +
background-color: #13ec5b !important;
15 +
}
16 +
17 +
.btn-hover-effect {
18 +
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
19 +
}
20 +
21 +
.btn-hover-effect:active {
22 +
transform: scale(0.95);
23 +
}