synthlearn-project/index.html at main · ImNotThePsychotea/synthlearn-project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SynthLearn - Seu Caminho de Conhecimento, Desenhado por IA</title>

    <meta name="description" content="Plataforma de aprendizado personalizado que utiliza Inteligência Artificial para criar trilhas de estudo que se adaptam ao seu ritmo.">
    <meta name="keywords" content="IA, educação, aprendizado, cursos online, personalizado, machine learning, SynthLearn">

    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#007bff">

    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body data-theme="light">

    <header class="header">
        <div class="logo">SynthLearn</div>
        <nav class="nav">
            <a href="#ia">Inteligência Artificial</a>
            <a href="#recursos">Recursos</a>
            <a href="#faq">FAQ</a>
            <button class="theme-toggle" onclick="toggleTheme()" title="Alternar Modo Escuro">
                <i class="fas fa-moon"></i>
            </button>
            <a href="/login" class="btn-primary">Entrar</a>
        </nav>
    </header>

    <section class="hero container">
        <div class="hero-content">
            <h1 class="text-xxl">Seu Caminho de Conhecimento, Desenhado por IA.</h1>
            <p class="text-lg">Descubra o futuro do aprendizado. Nossa IA cria trilhas personalizadas que se adaptam ao seu ritmo e estilo.</p>
            <button class="btn-cta" onclick="startAssessment()">Começar Avaliação Gratuita (5 minutos)</button>
        </div>
        <div class="hero-image">
            </div>
    </section>

    <section id="ia" class="feature-section container bg-secondary">
        <h2 class="text-xl">Não é um curso. É <span class="text-primary-color">O SEU</span> curso.</h2>
        <div class="feature-grid">
            <div class="card">
                <i class="fas fa-brain icon-lg"></i>
                <h3>Motor de Recomendação Gemini</h3>
                <p>Análise de milhares de pontos de dados para sugerir o próximo tópico que maximizará sua retenção.</p>
            </div>
            <div class="card">
                <i class="fas fa-route icon-lg"></i>
                <h3>Trilhas Dinâmicas</h3>
                <p>O conteúdo se reorganiza em tempo real com base no seu desempenho. Se você domina, pulamos. Se precisa de ajuda, aprofundamos.</p>
            </div>
            <div class="card">
                <i class="fas fa-robot icon-lg"></i>
                <h3>Chatbot de Suporte Semântico</h3>
                <p>Tire dúvidas sobre o material do curso. O chatbot entende o contexto e cita fontes relevantes.</p>
            </div>
        </div>
    </section>

    <section id="recursos" class="resource-section container">
        <h2 class="text-xl">Uma Plataforma Construída para o Século XXI.</h2>
        <div class="resource-cards">
            <div class="card-resource">
                <h3><i class="fas fa-mobile-alt"></i> PWA & Offline</h3>
                <p>Instale o SynthLearn em sua área de trabalho/celular e acesse o material de estudo mesmo sem conexão à internet.</p>
            </div>
            <div class="card-resource">
                <h3><i class="fas fa-moon"></i> Design System Adaptativo</h3>
                <p>Modo Escuro (Dark Mode) nativo e responsividade total para todos os dispositivos.</p>
            </div>
        </div>
    </section>

    <section class="cta-banner">
        <div class="container">
            <h2 class="text-lg">Comece a Aprender de Verdade Hoje.</h2>
            <p>A personalização de IA está esperando por você.</p>
            <button class="btn-cta btn-lg">Criar Minha Conta Gratuita</button>
        </div>
    </section>

    <footer class="footer">
        <div class="container footer-content">
            <div class="footer-brand">
                <p class="logo">SynthLearn</p>
                <p class="text-sm">&copy; 2025 Todos os direitos reservados.</p>
            </div>
            <div class="footer-links">
                <h4>Links Úteis</h4>
                <a href="#">Carreiras</a>
                <a href="#">Termos de Uso</a>
                <a href="#">API Docs</a>
            </div>
        </div>
    </footer>

    <script src="app.js"></script>
</body>
</html>