eletrotupi / tcc/ api/src/static/index.htmlc901c35af9c84b6a29e5185545ced1129f33b8f4
21.4 KB | 403 lines Raw
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&amp;display=swap" rel="stylesheet"/>
13
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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&amp;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="flex items-center gap-2">
75
          <img src="/images/logo.svg" alt="" class="w-6 h-6 spin-slow" />
76
          <span class="text-headline-lg font-headline-lg text-text-primary">nexo</span>
77
        </div>
78
        <div class="hidden md:flex gap-8">
79
          <a class="text-text-primary font-bold border-b-2 border-status-active-bg transition-colors duration-200" href="#">
80
            Funcionalidades
81
          </a>
82

83
          <a class="text-text-secondary font-body-md hover:text-text-primary transition-colors duration-200"
84
             href="/monografia">
85
            Monografia
86
          </a>
87

88
          <a class="text-text-secondary font-body-md hover:text-text-primary transition-colors duration-200" href="#">
89
            Sobre o projeto
90
          </a>
91
        </div>
92

93
        <button class="bg-text-primary text-white px-6 py-2 rounded-lg font-body-lg btn-hover-effect">
94
          Começe já!
95
        </button>
96
      </nav>
97
    </header>
98

99
    <main>
100
      <section class="max-w-7xl mx-auto px-container-padding py-20 flex flex-col md:flex-row items-center gap-12">
101
        <div class="flex-1 space-y-8">
102
          <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight leading-tight animate__animated animate__zoomIn">
103
            Equilíbrio em cada <span class="text-brand-green">registro</span>
104
          </h1>
105
          <p class="text-text-secondary text-lg md:text-xl max-w-lg">
106
            Monitore sua saúde mental e física com precisão clínica e interface intuitiva.
107
            Organize sua rotina de bem-estar em um só lugar.
108
          </p>
109

110
          <div class="flex gap-4">
111
            <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">
112
              <span class="material-symbols-outlined">download</span>
113
              Baixar Agora
114
            </button>
115

116
            <button class="border border-border-subtle bg-surface-light px-8 py-4 rounded-xl font-body-lg btn-hover-effect">
117
              Saiba mais
118
            </button>
119
          </div>
120
        </div>
121

122
        <div class="flex-1 relative flex items-center justify-center">
123
          <div class="absolute -top-12 -left-12 w-64 h-64 bg-brand-green/10 rounded-full blur-3xl animate-pulse"></div>
124
          <div id="logo-container" class="relative z-10 w-64 h-64 md:w-80 md:h-80 cursor-pointer select-none"></div>
125
        </div>
126
      </section>
127

128
      <section class="bg-surface-light py-20 border-y border-border-subtle">
129
        <div class="max-w-7xl mx-auto px-container-padding">
130
          <div class="mb-12 flex justify-between items-end">
131
            <div>
132
              <h2 class="text-headline-lg font-headline-lg text-3xl mb-2">Funcionalidades</h2>
133
              <p class="text-text-secondary">Explore as ferramentas desenhadas para sua evolução.</p>
134
            </div>
135
          </div>
136
          <div class="glide">
137
            <div class="glide__track" data-glide-el="track">
138
              <ul class="glide__slides">
139
                <li class="glide__slide">
140
                  <div class="bg-background-light p-8 rounded-xl border border-border-subtle h-full group hover:shadow-md transition-shadow">
141
                    <div class="w-12 h-12 bg-pill-indigo rounded-lg flex items-center justify-center mb-6">
142
                      <svg class="w-6 h-6 text-indigo-600 morph-icon" viewBox="0 0 24 24" fill="currentColor">
143
                        <defs>
144
                          <path class="morph-resting" d="M12 3 L13 10 L20 8 L14 12 L20 16 L13 14 L12 21 L11 14 L4 16 L10 12 L4 8 L11 10 Z"/>
145
                          <path class="morph-shape" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
146
                        </defs>
147
                        <path d="M12 3 L13 10 L20 8 L14 12 L20 16 L13 14 L12 21 L11 14 L4 16 L10 12 L4 8 L11 10 Z"/>
148
                      </svg>
149
                    </div>
150
                    <h3 class="font-headline-md text-xl mb-3">Monitoramento de Humor</h3>
151
                    <p class="text-text-secondary font-body-md mb-6">
152
                      Identifique padrões emocionais e gatilhos diários com nosso
153
                      sistema de tagging inteligente e análise de sentimentos.
154
                    </p>
155

156
                    <img alt="Mood tracking"
157
                         class="w-full h-48 object-cover rounded-lg"
158
                         src="/images/mood.jpg"/>
159
                  </div>
160
                </li>
161

162
                <li class="glide__slide">
163
                  <div class="bg-background-light p-8 rounded-xl border border-border-subtle h-full group hover:shadow-md transition-shadow">
164
                    <div class="w-12 h-12 bg-pill-purple rounded-lg flex items-center justify-center mb-6">
165
                      <svg class="w-6 h-6 text-purple-600 morph-icon" viewBox="0 0 24 24" fill="currentColor">
166
                        <defs>
167
                          <path class="morph-resting" d="M12 3 L13 10 L20 8 L14 12 L20 16 L13 14 L12 21 L11 14 L4 16 L10 12 L4 8 L11 10 Z"/>
168
                          <path class="morph-shape" d="M17 11h-4V7h-2v4H7v2h4v4h2v-4h4z"/>
169
                        </defs>
170
                        <path d="M12 3 L13 10 L20 8 L14 12 L20 16 L13 14 L12 21 L11 14 L4 16 L10 12 L4 8 L11 10 Z"/>
171
                      </svg>
172
                    </div>
173
                    <h3 class="font-headline-md text-xl mb-3">Gestão de Saúde</h3>
174
                    <p class="text-text-secondary font-body-md mb-6">
175
                      Controle medicação, consultas e exames em um cronograma
176
                      unificado com alertas inteligentes e lembretes
177
                      personalizáveis.
178
                    </p>
179
                    <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"/>
180
                  </div>
181
                </li>
182

183
                <li class="glide__slide">
184
                  <div class="bg-background-light p-8 rounded-xl border border-border-subtle h-full group hover:shadow-md transition-shadow">
185
                    <div class="w-12 h-12 bg-pill-blue rounded-lg flex items-center justify-center mb-6">
186
                      <svg class="w-6 h-6 text-blue-600 morph-icon" viewBox="0 0 24 24" fill="currentColor">
187
                        <defs>
188
                          <path class="morph-resting" d="M12 3 L13 10 L20 8 L14 12 L20 16 L13 14 L12 21 L11 14 L4 16 L10 12 L4 8 L11 10 Z"/>
189
                          <path class="morph-shape" d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
190
                        </defs>
191
                        <path d="M12 3 L13 10 L20 8 L14 12 L20 16 L13 14 L12 21 L11 14 L4 16 L10 12 L4 8 L11 10 Z"/>
192
                      </svg>
193
                    </div>
194

195
                    <h3 class="font-headline-md text-xl mb-3">Monitore seu sono</h3>
196
                    <p class="text-text-secondary font-body-md mb-6">
197
                      Controle também o seu sono, para conseguir antecipar flutuações no humor
198
                      e identificar padrões com mais qualidade
199
                    </p>
200
                    <img alt="Exercise routines"
201
                         class="w-full h-48 object-cover rounded-lg"
202
                         src="/images/sleep.jpg"/>
203
                  </div>
204
                </li>
205
              </ul>
206
            </div>
207
            <div class="glide__bullets mt-8 flex justify-center gap-2" data-glide-el="controls[nav]">
208
              <button type="button"
209
                      class="glide__bullet w-3 h-3 rounded-full bg-border-subtle"
210
                      data-glide-dir="=0">
211
              </button>
212

213
              <button type="button"
214
                      class="glide__bullet w-3 h-3 rounded-full bg-border-subtle"
215
                      data-glide-dir="=1">
216
              </button>
217

218
              <button type="button"
219
                      class="glide__bullet w-3 h-3 rounded-full bg-border-subtle"
220
                      data-glide-dir="=2">
221
              </button>
222
            </div>
223
          </div>
224
        </div>
225
      </section>
226

227
      <section class="py-24 max-w-7xl mx-auto px-container-padding text-center">
228
        <h2 class="text-headline-lg font-headline-lg text-4xl mb-16">Visualize padrões</h2>
229
        <div class="flex justify-center">
230
          <div class="atropos my-atropos w-full max-w-2xl">
231
            <div class="atropos-scale">
232
              <div class="atropos-rotate">
233
                <div class="atropos-inner rounded-[2rem] bg-surface-light border border-border-subtle shadow-2xl p-10 text-left overflow-hidden">
234
                  <div class="flex justify-between items-start mb-8">
235
                    <div data-atropos-offset="5">
236
                      <span class="text-label-sm font-label-sm uppercase tracking-widest text-text-secondary">Energia</span>
237
                      <h3 class="text-5xl font-extrabold mt-2 text-brand-green">84%</h3>
238
                    </div>
239

240
                    <div class="bg-status-active-bg p-3 rounded-xl" data-atropos-offset="10">
241
                      <span class="material-symbols-outlined text-brand-green text-3xl">trending_up</span>
242
                    </div>
243
                  </div>
244

245
                  <div class="flex items-end gap-3 h-48 mb-8" data-atropos-offset="3">
246
                    <div class="flex-1 bg-border-subtle rounded-t-lg h-[60%] hover:bg-brand-green/20 transition-colors"></div>
247
                    <div class="flex-1 bg-border-subtle rounded-t-lg h-[45%] hover:bg-brand-green/20 transition-colors"></div>
248
                    <div class="flex-1 bg-brand-green rounded-t-lg h-[84%] relative">
249
                      <div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-text-primary text-white text-[10px] px-2 py-1 rounded">
250
                        Hoje
251
                      </div>
252
                    </div>
253
                    <div class="flex-1 bg-border-subtle rounded-t-lg h-[55%] transition-colors"></div>
254
                    <div class="flex-1 bg-border-subtle rounded-t-lg h-[70%] transition-colors"></div>
255
                    <div class="flex-1 bg-border-subtle rounded-t-lg h-[40%] transition-colors"></div>
256
                    <div class="flex-1 bg-border-subtle rounded-t-lg h-[65%] transition-colors"></div>
257
                  </div>
258

259
                  <div class="grid grid-cols-2 gap-4" data-atropos-offset="8">
260
                    <div class="p-4 bg-background-light rounded-xl">
261
                      <span class="text-xs text-text-secondary block">Humor</span>
262
                      <span class="font-bold">+12% mais ansioso nos últimos três dias</span>
263
                    </div>
264
                    <div class="p-4 bg-background-light rounded-xl">
265
                      <span class="text-xs text-text-secondary block">Sono</span>
266
                      <span class="font-bold">Você tem dormido melhor na última semana</span>
267
                    </div>
268
                  </div>
269

270
                  <div class="absolute -right-16 -bottom-16 w-64 h-64 bg-brand-green/5 rounded-full blur-3xl"
271
                       data-atropos-offset="-5"></div>
272
                </div>
273
              </div>
274
            </div>
275
          </div>
276
        </div>
277
      </section>
278

279
      <section class="bg-background-light py-24">
280
        <div class="max-w-7xl mx-auto px-container-padding">
281
          <div class="text-center mb-16">
282
            <h2 class="text-headline-lg font-headline-lg text-4xl mb-4">Por que o nexo?</h2>
283
            <p class="text-text-secondary max-w-2xl mx-auto">
284
              Tecnologia avançada focada no que realmente importa: seu bem-estar
285
              diário e a segurança dos seus dados.
286
            </p>
287
          </div>
288
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
289
            <div class="bg-surface-light p-10 rounded-2xl border border-border-subtle transition-all hover:-translate-y-2">
290
              <div class="w-14 h-14 bg-status-active-bg rounded-2xl flex items-center justify-center mb-8">
291
                <span class="material-symbols-outlined text-brand-green text-3xl">lock</span>
292
              </div>
293
              <h3 class="text-headline-md font-headline-md text-xl mb-4">Privacidade</h3>
294
              <p class="text-text-secondary font-body-md leading-relaxed">
295
                Seus dados de saúde são criptografados de ponta a ponta. Você tem
296
                controle total sobre o que compartilha e com quem.
297
              </p>
298
            </div>
299

300
            <div class="bg-surface-light p-10 rounded-2xl border border-border-subtle transition-all hover:-translate-y-2">
301
              <div class="w-14 h-14 bg-pill-blue rounded-2xl flex items-center justify-center mb-8">
302
                <span class="material-symbols-outlined text-blue-600 text-3xl">sync</span>
303
              </div>
304
              <h3 class="text-headline-md font-headline-md text-xl mb-4">Sincronização</h3>
305
              <p class="text-text-secondary font-body-md leading-relaxed">
306
                Acesse seu histórico de qualquer dispositivo. Utilize offline e o
307
                app sincronizará.
308
              </p>
309
            </div>
310

311
            <div class="bg-surface-light p-10 rounded-2xl border border-border-subtle transition-all hover:-translate-y-2">
312
              <div class="w-14 h-14 bg-pill-purple rounded-2xl flex items-center justify-center mb-8">
313
                <span class="material-symbols-outlined text-purple-600 text-3xl">analytics</span>
314
              </div>
315
              <h3 class="text-headline-md font-headline-md text-xl mb-4">Relatórios</h3>
316
              <p class="text-text-secondary font-body-md leading-relaxed">
317
                Gere PDFs detalhados para levar ao seu médico ou terapeuta,
318
                facilitando o diagnóstico e acompanhamento clínico.
319
              </p>
320
            </div>
321
          </div>
322
        </div>
323
      </section>
324

325
      <section class="max-w-7xl mx-auto px-container-padding py-12">
326
        <div class="bg-text-primary rounded-[2.5rem] p-12 md:p-20 text-center relative overflow-hidden">
327
          <div class="absolute top-0 right-0 w-96 h-96 bg-brand-green/10 rounded-full blur-[100px]"></div>
328
          <div class="absolute -bottom-20 -left-20 w-80 h-80 bg-blue-500/10 rounded-full blur-[80px]"></div>
329
          <div class="relative z-10 space-y-8">
330
            <h2 class="text-white text-4xl md:text-6xl font-extrabold tracking-tight animated-text">
331
              Pronto para começar sua jornada?
332
            </h2>
333
            <p class="text-slate-400 text-lg md:text-xl max-w-2xl mx-auto">
334
              Explore o código-fonte, e baixe o aplicativo na Google Play. Exporte seus dados quando quiser
335
            </p>
336
            <div class="flex flex-col sm:flex-row justify-center gap-4 pt-4">
337
              <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">
338
                Começar Grátis agora
339
              </button>
340
              <a href="https://pira.dev/eletrotupi/tcc"
341
                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">
342
                Visualizar código-fonte
343
              </a>
344
            </div>
345
          </div>
346
        </div>
347
      </section>
348
    </main>
349

350
    <footer class="bg-background-light border-t border-border-subtle mt-20">
351
      <div class="grid grid-cols-2 md:grid-cols-4 gap-section-gap px-container-padding py-16 max-w-7xl mx-auto">
352
        <div class="col-span-2 md:col-span-1">
353
          <div class="text-headline-md font-headline-md text-text-primary mb-6">nexo</div>
354
          <p class="text-text-secondary font-body-md mb-6 max-w-xs">
355
            Elevando o padrão de cuidado mental convergindo o que é necessário pra você.
356
          </p>
357
        </div>
358

359
        <div>
360
          <h4 class="font-bold text-text-primary mb-6">O app</h4>
361
          <ul class="space-y-4">
362
            <li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Funcionalidades</a></li>
363
            <li>
364
              <a class="text-text-secondary hover:text-text-primary transition-all"
365
                 href="/monografia">
366
                Monografia
367
              </a>
368
            </li>
369
            <li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Ajuda</a></li>
370
          </ul>
371
        </div>
372

373
        <div>
374
          <h4 class="font-bold text-text-primary mb-6">Sobre</h4>
375
          <ul class="space-y-4">
376
            <li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Fale conosco</a></li>
377
            <li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Política de Privacidade</a></li>
378
          </ul>
379
        </div>
380

381
        <!-- Legal -->
382
        <div>
383
          <h4 class="font-bold text-text-primary mb-6">Legal</h4>
384
          <ul class="space-y-4">
385
            <li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Termos de uso</a></li>
386
            <li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Política de Cookies</a></li>
387
            <li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Segurança</a></li>
388
          </ul>
389
        </div>
390
      </div>
391
      <div class="border-t border-border-subtle py-8 text-center text-label-sm font-label-sm text-text-secondary">
392
        © 2025 <a href="https://cabotia.dev">cabotia</a>.
393
        Todos os direitos reservados. Código-fonte e texto sob os termos das
394
        respectivas licenças.
395
      </div>
396
    </footer>
397

398
    <script src="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/glide.min.js"></script>
399
    <script src="https://cdn.jsdelivr.net/npm/atropos/atropos.min.js"></script>
400
    <script src="/js/app.js">
401
    </script>
402
  </body>
403
</html>