eletrotupi / tcc/ api/src/static/index.html6d8c0a74220b36e86fd53538617fd70ce2618f59
19.7 KB | 380 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" 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>