eletrotupi / tcc/ api/src/static/index.html7742007861e4aba94c973d785c8801f8e822d1dc
19.8 KB | 386 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">
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 class="relative z-10 p-4 bg-white/50 backdrop-blur-xl rounded-[2.5rem] border border-white shadow-2xl">
122
            <img alt="nexo App" class="rounded-[2rem] shadow-sm w-full h-auto object-cover"
123
                 src="/images/app.png" />
124
          </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
                      <span class="material-symbols-outlined text-indigo-600">mood</span>
143
                    </div>
144
                    <h3 class="font-headline-md text-xl mb-3">Monitoramento de Humor</h3>
145
                    <p class="text-text-secondary font-body-md mb-6">
146
                      Identifique padrões emocionais e gatilhos diários com nosso
147
                      sistema de tagging inteligente e análise de sentimentos.
148
                    </p>
149

150
                    <img alt="Mood tracking"
151
                         class="w-full h-48 object-cover rounded-lg"
152
                         src="/images/mood.jpg"/>
153
                  </div>
154
                </li>
155

156
                <li class="glide__slide">
157
                  <div class="bg-background-light p-8 rounded-xl border border-border-subtle h-full group hover:shadow-md transition-shadow">
158
                    <div class="w-12 h-12 bg-pill-purple rounded-lg flex items-center justify-center mb-6">
159
                      <span class="material-symbols-outlined text-purple-600">medical_services</span>
160
                    </div>
161
                    <h3 class="font-headline-md text-xl mb-3">Gestão de Saúde</h3>
162
                    <p class="text-text-secondary font-body-md mb-6">
163
                      Controle medicação, consultas e exames em um cronograma
164
                      unificado com alertas inteligentes e lembretes
165
                      personalizáveis.
166
                    </p>
167
                    <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"/>
168
                  </div>
169
                </li>
170

171
                <!-- TODO: Check how to make this work with some morphing icons -->
172
                <li class="glide__slide">
173
                  <div class="bg-background-light p-8 rounded-xl border border-border-subtle h-full group hover:shadow-md transition-shadow">
174
                    <div class="w-12 h-12 bg-pill-blue rounded-lg flex items-center justify-center mb-6">
175
                      <span class="material-symbols-outlined text-blue-600">sleep</span>
176
                    </div>
177

178
                    <h3 class="font-headline-md text-xl mb-3">Monitore seu sono</h3>
179
                    <p class="text-text-secondary font-body-md mb-6">
180
                      Controle também o seu sono, para conseguir antecipar flutuações no humor
181
                      e identificar padrões com mais qualidade
182
                    </p>
183
                    <img alt="Exercise routines"
184
                         class="w-full h-48 object-cover rounded-lg"
185
                         src="/images/sleep.jpg"/>
186
                  </div>
187
                </li>
188
              </ul>
189
            </div>
190
            <div class="glide__bullets mt-8 flex justify-center gap-2" data-glide-el="controls[nav]">
191
              <button type="button"
192
                      class="glide__bullet w-3 h-3 rounded-full bg-border-subtle"
193
                      data-glide-dir="=0">
194
              </button>
195

196
              <button type="button"
197
                      class="glide__bullet w-3 h-3 rounded-full bg-border-subtle"
198
                      data-glide-dir="=1">
199
              </button>
200

201
              <button type="button"
202
                      class="glide__bullet w-3 h-3 rounded-full bg-border-subtle"
203
                      data-glide-dir="=2">
204
              </button>
205
            </div>
206
          </div>
207
        </div>
208
      </section>
209

210
      <section class="py-24 max-w-7xl mx-auto px-container-padding text-center">
211
        <h2 class="text-headline-lg font-headline-lg text-4xl mb-16">Visualize padrões</h2>
212
        <div class="flex justify-center">
213
          <div class="atropos my-atropos w-full max-w-2xl">
214
            <div class="atropos-scale">
215
              <div class="atropos-rotate">
216
                <div class="atropos-inner rounded-[2rem] bg-surface-light border border-border-subtle shadow-2xl p-10 text-left overflow-hidden">
217
                  <div class="flex justify-between items-start mb-8">
218
                    <div data-atropos-offset="5">
219
                      <span class="text-label-sm font-label-sm uppercase tracking-widest text-text-secondary">Energia</span>
220
                      <h3 class="text-5xl font-extrabold mt-2 text-brand-green">84%</h3>
221
                    </div>
222

223
                    <div class="bg-status-active-bg p-3 rounded-xl" data-atropos-offset="10">
224
                      <span class="material-symbols-outlined text-brand-green text-3xl">trending_up</span>
225
                    </div>
226
                  </div>
227

228
                  <div class="flex items-end gap-3 h-48 mb-8" data-atropos-offset="3">
229
                    <div class="flex-1 bg-border-subtle rounded-t-lg h-[60%] hover:bg-brand-green/20 transition-colors"></div>
230
                    <div class="flex-1 bg-border-subtle rounded-t-lg h-[45%] hover:bg-brand-green/20 transition-colors"></div>
231
                    <div class="flex-1 bg-brand-green rounded-t-lg h-[84%] relative">
232
                      <div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-text-primary text-white text-[10px] px-2 py-1 rounded">
233
                        Hoje
234
                      </div>
235
                    </div>
236
                    <div class="flex-1 bg-border-subtle rounded-t-lg h-[55%] transition-colors"></div>
237
                    <div class="flex-1 bg-border-subtle rounded-t-lg h-[70%] transition-colors"></div>
238
                    <div class="flex-1 bg-border-subtle rounded-t-lg h-[40%] transition-colors"></div>
239
                    <div class="flex-1 bg-border-subtle rounded-t-lg h-[65%] transition-colors"></div>
240
                  </div>
241

242
                  <div class="grid grid-cols-2 gap-4" data-atropos-offset="8">
243
                    <div class="p-4 bg-background-light rounded-xl">
244
                      <span class="text-xs text-text-secondary block">Humor</span>
245
                      <span class="font-bold">+12% mais ansioso nos últimos três dias</span>
246
                    </div>
247
                    <div class="p-4 bg-background-light rounded-xl">
248
                      <span class="text-xs text-text-secondary block">Sono</span>
249
                      <span class="font-bold">Você tem dormido melhor na última semana</span>
250
                    </div>
251
                  </div>
252

253
                  <div class="absolute -right-16 -bottom-16 w-64 h-64 bg-brand-green/5 rounded-full blur-3xl"
254
                       data-atropos-offset="-5"></div>
255
                </div>
256
              </div>
257
            </div>
258
          </div>
259
        </div>
260
      </section>
261

262
      <section class="bg-background-light py-24">
263
        <div class="max-w-7xl mx-auto px-container-padding">
264
          <div class="text-center mb-16">
265
            <h2 class="text-headline-lg font-headline-lg text-4xl mb-4">Por que o nexo?</h2>
266
            <p class="text-text-secondary max-w-2xl mx-auto">
267
              Tecnologia avançada focada no que realmente importa: seu bem-estar
268
              diário e a segurança dos seus dados.
269
            </p>
270
          </div>
271
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
272
            <div class="bg-surface-light p-10 rounded-2xl border border-border-subtle transition-all hover:-translate-y-2">
273
              <div class="w-14 h-14 bg-status-active-bg rounded-2xl flex items-center justify-center mb-8">
274
                <span class="material-symbols-outlined text-brand-green text-3xl">lock</span>
275
              </div>
276
              <h3 class="text-headline-md font-headline-md text-xl mb-4">Privacidade</h3>
277
              <p class="text-text-secondary font-body-md leading-relaxed">
278
                Seus dados de saúde são criptografados de ponta a ponta. Você tem
279
                controle total sobre o que compartilha e com quem.
280
              </p>
281
            </div>
282

283
            <div class="bg-surface-light p-10 rounded-2xl border border-border-subtle transition-all hover:-translate-y-2">
284
              <div class="w-14 h-14 bg-pill-blue rounded-2xl flex items-center justify-center mb-8">
285
                <span class="material-symbols-outlined text-blue-600 text-3xl">sync</span>
286
              </div>
287
              <h3 class="text-headline-md font-headline-md text-xl mb-4">Sincronização</h3>
288
              <p class="text-text-secondary font-body-md leading-relaxed">
289
                Acesse seu histórico de qualquer dispositivo. Utilize offline e o
290
                app sincronizará.
291
              </p>
292
            </div>
293

294
            <div class="bg-surface-light p-10 rounded-2xl border border-border-subtle transition-all hover:-translate-y-2">
295
              <div class="w-14 h-14 bg-pill-purple rounded-2xl flex items-center justify-center mb-8">
296
                <span class="material-symbols-outlined text-purple-600 text-3xl">analytics</span>
297
              </div>
298
              <h3 class="text-headline-md font-headline-md text-xl mb-4">Relatórios</h3>
299
              <p class="text-text-secondary font-body-md leading-relaxed">
300
                Gere PDFs detalhados para levar ao seu médico ou terapeuta,
301
                facilitando o diagnóstico e acompanhamento clínico.
302
              </p>
303
            </div>
304
          </div>
305
        </div>
306
      </section>
307

308
      <section class="max-w-7xl mx-auto px-container-padding py-12">
309
        <div class="bg-text-primary rounded-[2.5rem] p-12 md:p-20 text-center relative overflow-hidden">
310
          <div class="absolute top-0 right-0 w-96 h-96 bg-brand-green/10 rounded-full blur-[100px]"></div>
311
          <div class="absolute -bottom-20 -left-20 w-80 h-80 bg-blue-500/10 rounded-full blur-[80px]"></div>
312
          <div class="relative z-10 space-y-8">
313
            <h2 class="text-white text-4xl md:text-6xl font-extrabold tracking-tight animated-text">
314
              Pronto para começar sua jornada?
315
            </h2>
316
            <p class="text-slate-400 text-lg md:text-xl max-w-2xl mx-auto">
317
              Explore o código-fonte, e baixe o aplicativo na Google Play. Exporte seus dados quando quiser
318
            </p>
319
            <div class="flex flex-col sm:flex-row justify-center gap-4 pt-4">
320
              <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">
321
                Começar Grátis agora
322
              </button>
323
              <a href="https://pira.dev/eletrotupi/tcc"
324
                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">
325
                Visualizar código-fonte
326
              </a>
327
            </div>
328
          </div>
329
        </div>
330
      </section>
331
    </main>
332

333
    <footer class="bg-background-light border-t border-border-subtle mt-20">
334
      <div class="grid grid-cols-2 md:grid-cols-4 gap-section-gap px-container-padding py-16 max-w-7xl mx-auto">
335
        <div class="col-span-2 md:col-span-1">
336
          <div class="text-headline-md font-headline-md text-text-primary mb-6">nexo</div>
337
          <p class="text-text-secondary font-body-md mb-6 max-w-xs">
338
            Elevando o padrão de cuidado mental convergindo o que é necessário pra você.
339
          </p>
340
        </div>
341

342
        <div>
343
          <h4 class="font-bold text-text-primary mb-6">O app</h4>
344
          <ul class="space-y-4">
345
            <li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Funcionalidades</a></li>
346
            <li>
347
              <a class="text-text-secondary hover:text-text-primary transition-all"
348
                 href="/monografia">
349
                Monografia
350
              </a>
351
            </li>
352
            <li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Ajuda</a></li>
353
          </ul>
354
        </div>
355

356
        <div>
357
          <h4 class="font-bold text-text-primary mb-6">Sobre</h4>
358
          <ul class="space-y-4">
359
            <li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Fale conosco</a></li>
360
            <li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Política de Privacidade</a></li>
361
          </ul>
362
        </div>
363

364
        <!-- Legal -->
365
        <div>
366
          <h4 class="font-bold text-text-primary mb-6">Legal</h4>
367
          <ul class="space-y-4">
368
            <li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Termos de uso</a></li>
369
            <li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Política de Cookies</a></li>
370
            <li><a class="text-text-secondary hover:text-text-primary transition-all" href="#">Segurança</a></li>
371
          </ul>
372
        </div>
373
      </div>
374
      <div class="border-t border-border-subtle py-8 text-center text-label-sm font-label-sm text-text-secondary">
375
        © 2025 <a href="https://cabotia.dev">cabotia</a>.
376
        Todos os direitos reservados. Código-fonte e texto sob os termos das
377
        respectivas licenças.
378
      </div>
379
    </footer>
380

381
    <script src="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/glide.min.js"></script>
382
    <script src="https://cdn.jsdelivr.net/npm/atropos/atropos.min.js"></script>
383
    <script src="/js/app.js">
384
    </script>
385
  </body>
386
</html>