eletrotupi / tcc/ api/src/static/index.htmlb958ee0b77da944860fd0c6f1661987c2a28b239
22.1 KB | 405 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="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"
81
             href="/monografia">
82
            Monografia
83
          </a>
84

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

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

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

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

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

119
        <div class="flex-1 relative flex items-center justify-center">
120
          <div class="absolute -top-12 -left-12 w-64 h-64 bg-brand-green/10 rounded-full blur-3xl animate-pulse"></div>
121
          <div id="logo-container" class="relative z-10 w-64 h-64 md:w-80 md:h-80 cursor-pointer select-none">
122
            <img id="logo-img" alt="nexo" src="/images/logo.svg" class="w-full h-full" />
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
                      <svg class="w-6 h-6 text-indigo-600 morph-icon" viewBox="0 0 24 24" fill="currentColor">
142
                        <defs>
143
                          <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"/>
144
                          <path class="morph-alt" d="M12 1 L13 10 L22 7 L14 12 L22 17 L13 14 L12 23 L11 14 L2 17 L10 12 L2 7 L11 10 Z"/>
145
                          <path class="morph-shape" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
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-alt" d="M12 2 L15 8 L21 7 L17 12 L21 17 L15 16 L12 22 L9 16 L3 17 L7 12 L3 7 L9 8 Z"/>
169
                          <path class="morph-shape" d="M20 6h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM10 4h4v2h-4V4zm10 16H4V8h16v12z M13 10h-2v3H8v2h3v3h2v-3h3v-2h-3z"/>
170
                        </defs>
171
                        <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"/>
172
                      </svg>
173
                    </div>
174
                    <h3 class="font-headline-md text-xl mb-3">Gestão de Saúde</h3>
175
                    <p class="text-text-secondary font-body-md mb-6">
176
                      Controle medicação, consultas e exames em um cronograma
177
                      unificado com alertas inteligentes e lembretes
178
                      personalizáveis.
179
                    </p>
180
                    <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"/>
181
                  </div>
182
                </li>
183

184
                <li class="glide__slide">
185
                  <div class="bg-background-light p-8 rounded-xl border border-border-subtle h-full group hover:shadow-md transition-shadow">
186
                    <div class="w-12 h-12 bg-pill-blue rounded-lg flex items-center justify-center mb-6">
187
                      <svg class="w-6 h-6 text-blue-600 morph-icon" viewBox="0 0 24 24" fill="currentColor">
188
                        <defs>
189
                          <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"/>
190
                          <path class="morph-alt" d="M17 4 L14 11 L21 12 L14 13 L17 20 L12 14 L7 20 L10 13 L3 12 L10 11 L7 4 L12 10 Z"/>
191
                          <path class="morph-shape" d="M9.27 4.49c-1.63 7.54 3.75 12.41 7.66 13.8A7.993 7.993 0 0 1 12 20c-4.41 0-8-3.59-8-8 0-3.45 2.2-6.4 5.27-7.51m2.72-2.48C6.4 2.01 2 6.54 2 12c0 5.52 4.48 10 10 10 3.71 0 6.93-2.02 8.66-5.02-7.51-.25-12.09-8.43-8.32-14.97h-.35z"/>
192
                        </defs>
193
                        <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"/>
194
                      </svg>
195
                    </div>
196

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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