| 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>
|