static: introduce a landing page
Parents:
d14a6588 file(s) changed
- api/src/static/images/app.png +0 -0
- api/src/static/images/mood.jpg +0 -0
- api/src/static/images/pills.jpg +0 -0
- api/src/static/images/sleep.jpg +0 -0
- api/src/static/index.html +380 -0
- api/src/static/js/app.js +70 -0
- api/src/static/js/tailwind.config.js +46 -0
- api/src/static/styles/main.css +23 -0
api/src/static/images/app.png
Binary file brotha
api/src/static/images/mood.jpg
Binary file brotha
api/src/static/images/pills.jpg
Binary file brotha
api/src/static/images/sleep.jpg
Binary file brotha
api/src/static/index.html
@@ -0,0 +1,380 @@
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>
api/src/static/js/app.js
@@ -0,0 +1,70 @@
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 + });
api/src/static/js/tailwind.config.js
@@ -0,0 +1,46 @@
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 + }
api/src/static/styles/main.css
@@ -0,0 +1,23 @@
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 + }