Crie o design completo de uma landing page profissional e moderna para uma empresa chamada GRYFION.

A GRYFION é uma plataforma de proteção veicular combinada com um sistema de rede (associados) onde os membros podem proteger seu veículo, construir uma rede de novos associados, acompanhar desempenho, pagar faturas, crescer profissionalmente dentro da empresa e visualizar saldos e progressões de carreira.

O objetivo da landing page é encantar leigos, transmitir seriedade e visão, e apresentar a GRYFION como um projeto ambicioso, sólido e inovador.

IDENTIDADE VISUAL

Paleta: Azul-escuro premium (#0A1B2A), Dourado elegante (#D5A74E), Branco (#FFFFFF), Cinza suave (#F2F2F2).

Estilo: Moderno, limpo, corporativo, sofisticado.

Tipografia: Montserrat, Inter ou Poppins.

Estética: Tecnologia + Elegância + Proteção + Comunidade.

Evitar poluição visual, priorizar impacto emocional.

SEÇÕES DA LANDING PAGE (CRIE TODAS)
1. HERO (seção inicial impactante)

Fundo com estética futurista premium (proteção, carro, luzes, rede digital).

Headline forte:
“GRYFION — Proteção inteligente. Crescimento compartilhado.”

Subheadline:
“A combinação perfeita entre proteção veicular e oportunidade de renda através de uma rede sólida e transparente.”

Botões:

Quero ser um Associado

Conhecer a Plataforma

Texto pequeno abaixo:
“Sua liberdade nunca esteve tão próxima.”

2. COMO FUNCIONA (explicação simples para leigos)

Três colunas explicativas:

1 — Proteja seu veículo
Cobertura completa com simplicidade e transparência.

2 — Construa sua rede
Indique novos associados e fortaleça sua cadeia de crescimento.

3 — Cresça com a Gryfion
Acompanhe saldo, desempenho, faturas e plano de carreira em um painel moderno.

3. A REDE GRYFION (visualizar o negócio)

Crie uma seção com um gráfico ilustrado de rede (A1, A2, A3 → A4, A5, A6).
Texto de destaque:
“Quando todos contribuem, todos crescem juntos.”

Explicar:

estrutura em níveis

progressão

construção de rede sustentável

4. ÁREA DO ASSOCIADO

Mockup estilizado de dashboard com:

saldo atual

rede/genealogia

faturas (pagas / em aberto)

desempenho

botão “Cadastrar um novo sócio”

Título:
“Um painel completo para gerenciar sua jornada.”
Subtexto:
“Organização, transparência e tecnologia em cada etapa do seu crescimento.”

5. PLANO DE CARREIRA

Criar uma seção com três pilares:

Associado → Executivo → Diretor

Texto:
“Progresso baseado em contribuição, transparência e resultados.”

6. BENEFÍCIOS DA GRYFION

Bullet points:

Proteção veicular moderna

Plataforma intuitiva

Renda através de indicações

Crescimento profissional em rede

Dashboard claro e completo

Comunidade unida e colaborativa

7. SOBRE A GRYFION

Seção institucional com tom de propósito:

“Somos mais do que uma plataforma.
Somos uma comunidade que acredita em oportunidades reais, proteção acessível e crescimento compartilhado.
A Gryfion nasceu para unir segurança, tecnologia e colaboração.”

8. CTA FINAL (FECHAMENTO)

Frase grande:
“Pronto para fazer parte da Gryfion?”

Botão:
Quero ser Associado Agora

Rodapé simples com:

Termos

Política

Contato

DIRETRIZES GERAIS

Tom inspirador, profissional, visionário.

Layout harmônico, equilibrado, sem excesso.

Priorizar UX simples para quem é leigo.

Não criar nada complicado: objetivo é transmitir SONHO e VISÃO.

Componentes com cantos levemente arredondados, sombras suaves e elegância premium.

Evitar poluição ou animações exageradas.

Paleta Azul + Dourado sempre presente nos elementos-chave.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Gryfion Shield Network
-emoji: 😻
-colorFrom: blue
-colorTo: blue
+title: Gryfion Shield Network 🛡️🚗✨
+colorFrom: pink
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,177 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    background-color: #0A1B2A;
+                    color: white;
+                    padding: 3rem 0;
+                }
+                
+                .footer-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 0 2rem;
+                }
+                
+                .footer-content {
+                    display: grid;
+                    grid-template-columns: repeat(1, 1fr);
+                    gap: 2rem;
+                }
+                
+                .footer-logo {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    margin-bottom: 1rem;
+                    display: flex;
+                    align-items: center;
+                }
+                
+                .footer-logo-icon {
+                    color: #D5A74E;
+                    margin-right: 0.5rem;
+                }
+                
+                .footer-description {
+                    color: rgba(255, 255, 255, 0.7);
+                    margin-bottom: 1.5rem;
+                    max-width: 300px;
+                }
+                
+                .footer-links h3 {
+                    font-size: 1.125rem;
+                    font-weight: 600;
+                    margin-bottom: 1.5rem;
+                    color: white;
+                }
+                
+                .footer-links ul {
+                    list-style: none;
+                    padding: 0;
+                }
+                
+                .footer-links li {
+                    margin-bottom: 0.75rem;
+                }
+                
+                .footer-links a {
+                    color: rgba(255, 255, 255, 0.7);
+                    text-decoration: none;
+                    transition: color 0.3s ease;
+                }
+                
+                .footer-links a:hover {
+                    color: #D5A74E;
+                }
+                
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                    margin-top: 1rem;
+                }
+                
+                .social-links a {
+                    color: rgba(255, 255, 255, 0.7);
+                    transition: color 0.3s ease;
+                }
+                
+                .social-links a:hover {
+                    color: #D5A74E;
+                }
+                
+                .footer-bottom {
+                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                    padding-top: 2rem;
+                    margin-top: 3rem;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    text-align: center;
+                    color: rgba(255, 255, 255, 0.5);
+                    font-size: 0.875rem;
+                }
+                
+                .footer-bottom-links {
+                    display: flex;
+                    gap: 1.5rem;
+                    margin-bottom: 1rem;
+                }
+                
+                .footer-bottom-links a {
+                    color: rgba(255, 255, 255, 0.7);
+                    text-decoration: none;
+                    transition: color 0.3s ease;
+                }
+                
+                .footer-bottom-links a:hover {
+                    color: #D5A74E;
+                }
+                
+                @media (min-width: 768px) {
+                    .footer-content {
+                        grid-template-columns: repeat(3, 1fr);
+                    }
+                }
+            </style>
+            
+            <div class="footer-container">
+                <div class="footer-content">
+                    <div class="footer-about">
+                        <div class="footer-logo">
+                            <i data-feather="shield" class="footer-logo-icon"></i>
+                            GRYFION
+                        </div>
+                        <p class="footer-description">
+                            Proteção inteligente. Crescimento compartilhado. Sua liberdade nunca esteve tão próxima.
+                        </p>
+                        <div class="social-links">
+                            <a href="#"><i data-feather="facebook"></i></a>
+                            <a href="#"><i data-feather="instagram"></i></a>
+                            <a href="#"><i data-feather="linkedin"></i></a>
+                            <a href="#"><i data-feather="youtube"></i></a>
+                        </div>
+                    </div>
+                    
+                    <div class="footer-links">
+                        <h3>Links Rápidos</h3>
+                        <ul>
+                            <li><a href="#como-funciona">Como Funciona</a></li>
+                            <li><a href="#rede">A Rede Gryfion</a></li>
+                            <li><a href="#plataforma">Área do Associado</a></li>
+                            <li><a href="#carreira">Plano de Carreira</a></li>
+                            <li><a href="#beneficios">Benefícios</a></li>
+                        </ul>
+                    </div>
+                    
+                    <div class="footer-links">
+                        <h3>Institucional</h3>
+                        <ul>
+                            <li><a href="#">Sobre Nós</a></li>
+                            <li><a href="#">Termos de Uso</a></li>
+                            <li><a href="#">Política de Privacidade</a></li>
+                            <li><a href="#">Trabalhe Conosco</a></li>
+                            <li><a href="#">Contato</a></li>
+                        </ul>
+                    </div>
+                </div>
+                
+                <div class="footer-bottom">
+                    <div class="footer-bottom-links">
+                        <a href="#">Termos de Serviço</a>
+                        <a href="#">Política de Privacidade</a>
+                        <a href="#">Cookies</a>
+                    </div>
+                    <p>&copy; ${new Date().getFullYear()} GRYFION. Todos os direitos reservados.</p>
+                </div>
+            </div>
+        `;
+        
+        // Replace feather icons
+        feather.replace();
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,196 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    z-index: 1000;
+                    background-color: rgba(10, 27, 42, 0.9);
+                    backdrop-filter: blur(10px);
+                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+                    transition: all 0.3s ease;
+                }
+                
+                .navbar-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 1rem 2rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    font-weight: 700;
+                    font-size: 1.5rem;
+                    color: white;
+                    text-decoration: none;
+                }
+                
+                .logo-icon {
+                    color: #D5A74E;
+                    margin-right: 0.5rem;
+                }
+                
+                .nav-links {
+                    display: none;
+                }
+                
+                .nav-links a {
+                    color: white;
+                    text-decoration: none;
+                    margin-left: 2rem;
+                    font-weight: 500;
+                    transition: color 0.3s ease;
+                    position: relative;
+                }
+                
+                .nav-links a:hover {
+                    color: #D5A74E;
+                }
+                
+                .nav-links a:hover::after {
+                    width: 100%;
+                }
+                
+                .nav-links a::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -5px;
+                    left: 0;
+                    width: 0;
+                    height: 2px;
+                    background-color: #D5A74E;
+                    transition: width 0.3s ease;
+                }
+                
+                .mobile-menu-btn {
+                    background: none;
+                    border: none;
+                    color: white;
+                    cursor: pointer;
+                    display: block;
+                }
+                
+                .mobile-menu {
+                    position: fixed;
+                    top: 80px;
+                    left: 0;
+                    right: 0;
+                    background-color: rgba(10, 27, 42, 0.98);
+                    padding: 2rem;
+                    transform: translateY(-150%);
+                    transition: transform 0.3s ease;
+                    z-index: 999;
+                }
+                
+                .mobile-menu.active {
+                    transform: translateY(0);
+                }
+                
+                .mobile-menu a {
+                    display: block;
+                    color: white;
+                    text-decoration: none;
+                    padding: 1rem 0;
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                }
+                
+                .mobile-menu a:hover {
+                    color: #D5A74E;
+                }
+                
+                .cta-button {
+                    background-color: #D5A74E;
+                    color: #0A1B2A;
+                    padding: 0.5rem 1.5rem;
+                    border-radius: 0.375rem;
+                    font-weight: 600;
+                    transition: all 0.3s ease;
+                    margin-left: 2rem;
+                }
+                
+                .cta-button:hover {
+                    background-color: #c2953e;
+                    transform: translateY(-2px);
+                }
+                
+                @media (min-width: 768px) {
+                    .nav-links {
+                        display: flex;
+                        align-items: center;
+                    }
+                    
+                    .mobile-menu-btn {
+                        display: none;
+                    }
+                }
+            </style>
+            
+            <div class="navbar-container">
+                <a href="/" class="logo">
+                    <i data-feather="shield" class="logo-icon"></i>
+                    GRYFION
+                </a>
+                
+                <button class="mobile-menu-btn" id="mobileMenuBtn">
+                    <i data-feather="menu"></i>
+                </button>
+                
+                <div class="nav-links">
+                    <a href="#como-funciona">Como Funciona</a>
+                    <a href="#rede">A Rede</a>
+                    <a href="#plataforma">Plataforma</a>
+                    <a href="#carreira">Carreira</a>
+                    <a href="#beneficios">Benefícios</a>
+                    <a href="#contato">Contato</a>
+                    <a href="#associado" class="cta-button">Seja um Associado</a>
+                </div>
+            </div>
+            
+            <div class="mobile-menu" id="mobileMenu">
+                <a href="#como-funciona">Como Funciona</a>
+                <a href="#rede">A Rede</a>
+                <a href="#plataforma">Plataforma</a>
+                <a href="#carreira">Carreira</a>
+                <a href="#beneficios">Benefícios</a>
+                <a href="#contato">Contato</a>
+                <a href="#associado" class="cta-button mt-4 inline-block">Seja um Associado</a>
+            </div>
+        `;
+        
+        // Initialize mobile menu
+        const mobileMenuBtn = this.shadowRoot.getElementById('mobileMenuBtn');
+        const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
+        
+        mobileMenuBtn.addEventListener('click', () => {
+            mobileMenu.classList.toggle('active');
+            const icon = mobileMenuBtn.querySelector('i');
+            if (mobileMenu.classList.contains('active')) {
+                feather.icons['x'].replace(icon);
+            } else {
+                feather.icons['menu'].replace(icon);
+            }
+        });
+        
+        // Close mobile menu when clicking a link
+        this.shadowRoot.querySelectorAll('#mobileMenu a').forEach(link => {
+            link.addEventListener('click', () => {
+                mobileMenu.classList.remove('active');
+                feather.icons['menu'].replace(mobileMenuBtn.querySelector('i'));
+            });
+        });
+        
+        // Replace feather icons
+        feather.replace();
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,369 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GRYFION - Proteção Inteligente. Crescimento Compartilhado.</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="stylesheet" href="style.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        gryfion: {
+                            dark: '#0A1B2A',
+                            gold: '#D5A74E',
+                            light: '#F2F2F2'
+                        }
+                    },
+                    fontFamily: {
+                        poppins: ['Poppins', 'sans-serif'],
+                    },
+                }
+            }
+        }
+    </script>
+</head>
+<body class="font-poppins bg-white text-gryfion-dark">
+    <custom-navbar></custom-navbar>
+    
+    <!-- Hero Section -->
+    <section class="relative bg-gryfion-dark text-white overflow-hidden">
+        <div class="absolute inset-0 bg-black opacity-50 z-0"></div>
+        <div class="absolute inset-0 bg-gradient-to-r from-gryfion-dark to-transparent z-0"></div>
+        <img src="http://static.photos/technology/1920x1080/42" alt="Fundo futurista" class="absolute inset-0 w-full h-full object-cover z-0">
+        
+        <div class="container mx-auto px-6 py-24 md:py-32 relative z-10">
+            <div class="max-w-2xl">
+                <h1 class="text-4xl md:text-6xl font-bold mb-4">GRYFION — <span class="text-gryfion-gold">Proteção inteligente.</span> <br>Crescimento compartilhado.</h1>
+                <p class="text-xl md:text-2xl mb-8">A combinação perfeita entre proteção veicular e oportunidade de renda através de uma rede sólida e transparente.</p>
+                <div class="flex flex-col sm:flex-row gap-4 mb-8">
+                    <a href="#associado" class="bg-gryfion-gold hover:bg-yellow-600 text-gryfion-dark font-semibold py-3 px-8 rounded-lg transition duration-300 text-center">Quero ser um Associado</a>
+                    <a href="#plataforma" class="border-2 border-white hover:bg-white hover:text-gryfion-dark font-semibold py-3 px-8 rounded-lg transition duration-300 text-center">Conhecer a Plataforma</a>
+                </div>
+                <p class="text-gryfion-gold italic">Sua liberdade nunca esteve tão próxima.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Como Funciona -->
+    <section class="py-20 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center mb-16">Como funciona a <span class="text-gryfion-gold">GRYFION</span></h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
+                    <div class="w-16 h-16 bg-gryfion-gold rounded-full flex items-center justify-center mb-6 mx-auto">
+                        <i data-feather="shield" class="text-white w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 text-center">Proteja seu veículo</h3>
+                    <p class="text-gray-600 text-center">Cobertura completa com simplicidade e transparência para sua tranquilidade.</p>
+                </div>
+                <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
+                    <div class="w-16 h-16 bg-gryfion-gold rounded-full flex items-center justify-center mb-6 mx-auto">
+                        <i data-feather="users" class="text-white w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 text-center">Construa sua rede</h3>
+                    <p class="text-gray-600 text-center">Indique novos associados e fortaleça sua cadeia de crescimento sustentável.</p>
+                </div>
+                <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
+                    <div class="w-16 h-16 bg-gryfion-gold rounded-full flex items-center justify-center mb-6 mx-auto">
+                        <i data-feather="trending-up" class="text-white w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 text-center">Cresça com a Gryfion</h3>
+                    <p class="text-gray-600 text-center">Acompanhe saldo, desempenho e plano de carreira em um painel moderno e intuitivo.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- A Rede Gryfion -->
+    <section class="py-20 bg-white">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-10 md:mb-0">
+                    <img src="http://static.photos/abstract/800x600/23" alt="Rede de conexões" class="rounded-lg shadow-xl w-full">
+                </div>
+                <div class="md:w-1/2 md:pl-12">
+                    <h2 class="text-3xl font-bold mb-6">A <span class="text-gryfion-gold">Rede Gryfion</span></h2>
+                    <p class="text-xl mb-8 text-gray-700">"Quando todos contribuem, todos crescem juntos."</p>
+                    <p class="mb-6 text-gray-600">Nossa estrutura em níveis proporciona uma progressão justa e transparente, onde cada associado tem a oportunidade de construir uma rede sustentável e lucrativa.</p>
+                    <ul class="space-y-3">
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                            <span class="text-gray-600">Estrutura organizada em múltiplos níveis</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                            <span class="text-gray-600">Progressão baseada em meritocracia</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                            <span class="text-gray-600">Construção de rede colaborativa</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Área do Associado -->
+    <section id="plataforma" class="py-20 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center mb-6">Um painel completo para gerenciar sua <span class="text-gryfion-gold">jornada</span></h2>
+            <p class="text-xl text-center mb-16 text-gray-600 max-w-3xl mx-auto">Organização, transparência e tecnologia em cada etapa do seu crescimento.</p>
+            
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto">
+                <div class="p-6 border-b border-gray-200 flex justify-between items-center bg-gryfion-dark text-white">
+                    <div class="flex items-center">
+                        <i data-feather="user" class="mr-2"></i>
+                        <span>Área do Associado</span>
+                    </div>
+                    <div class="flex space-x-2">
+                        <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                        <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                    </div>
+                </div>
+                <div class="p-8">
+                    <div class="grid md:grid-cols-2 gap-8">
+                        <div>
+                            <h3 class="text-xl font-semibold mb-4">Seu resumo</h3>
+                            <div class="bg-gray-100 p-4 rounded-lg mb-6">
+                                <div class="flex justify-between items-center mb-2">
+                                    <span class="text-gray-600">Saldo disponível</span>
+                                    <span class="font-bold text-gryfion-gold">R$ 2.845,00</span>
+                                </div>
+                                <div class="flex justify-between items-center">
+                                    <span class="text-gray-600">Próxima fatura</span>
+                                    <span class="font-bold">15/07/2023</span>
+                                </div>
+                            </div>
+                            <div class="mb-6">
+                                <h4 class="font-medium mb-2">Sua rede</h4>
+                                <div class="flex items-center">
+                                    <div class="w-12 h-12 rounded-full bg-gray-300 flex items-center justify-center mr-2">
+                                        <i data-feather="user" class="text-gray-600"></i>
+                                    </div>
+                                    <div class="ml-2">
+                                        <p class="font-medium">12 associados diretos</p>
+                                        <p class="text-sm text-gray-500">Total na rede: 87</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <button class="bg-gryfion-gold hover:bg-yellow-600 text-white font-semibold py-2 px-6 rounded-lg transition duration-300 flex items-center">
+                                <i data-feather="plus" class="mr-2 w-4 h-4"></i> Cadastrar novo sócio
+                            </button>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-semibold mb-4">Seu desempenho</h3>
+                            <div class="bg-gray-100 p-4 rounded-lg mb-6 h-40 flex items-center justify-center">
+                                <p class="text-gray-500">Gráfico de desempenho</p>
+                            </div>
+                            <div class="flex justify-between">
+                                <div>
+                                    <p class="text-sm text-gray-500">Nível atual</p>
+                                    <p class="font-bold">Executivo</p>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-500">Próximo nível</p>
+                                    <p class="font-bold">2.000 pontos</p>
+                                </div>
+                            </div>
+                            <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
+                                <div class="bg-gryfion-gold h-2.5 rounded-full" style="width: 65%"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Plano de Carreira -->
+    <section class="py-20 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center mb-16">Plano de <span class="text-gryfion-gold">Carreira</span></h2>
+            <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+                <div class="relative">
+                    <div class="bg-gray-100 p-8 rounded-xl h-full">
+                        <h3 class="text-xl font-semibold mb-4 text-center text-gryfion-dark">Associado</h3>
+                        <p class="text-gray-600 text-center mb-6">Primeiros passos na rede Gryfion</p>
+                        <ul class="space-y-3">
+                            <li class="flex items-start">
+                                <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                                <span class="text-gray-600">Proteção veicular completa</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                                <span class="text-gray-600">Rede inicial de até 5 associados</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                                <span class="text-gray-600">Acesso ao dashboard básico</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-gryfion-gold text-white px-4 py-1 rounded-full text-sm font-medium">Nível 1</div>
+                </div>
+                <div class="relative">
+                    <div class="bg-gryfion-dark text-white p-8 rounded-xl h-full">
+                        <h3 class="text-xl font-semibold mb-4 text-center text-gryfion-gold">Executivo</h3>
+                        <p class="text-gray-300 text-center mb-6">Crescimento e liderança</p>
+                        <ul class="space-y-3">
+                            <li class="flex items-start">
+                                <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                                <span class="text-gray-300">Todos benefícios do Associado</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                                <span class="text-gray-300">Rede expandida até 25 associados</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                                <span class="text-gray-300">Bônus de desempenho</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                                <span class="text-gray-300">Dashboard avançado</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-gryfion-gold text-white px-4 py-1 rounded-full text-sm font-medium">Nível 2</div>
+                </div>
+                <div class="relative">
+                    <div class="bg-gray-100 p-8 rounded-xl h-full">
+                        <h3 class="text-xl font-semibold mb-4 text-center text-gryfion-dark">Diretor</h3>
+                        <p class="text-gray-600 text-center mb-6">Liderança máxima</p>
+                        <ul class="space-y-3">
+                            <li class="flex items-start">
+                                <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                                <span class="text-gray-600">Todos benefícios do Executivo</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                                <span class="text-gray-600">Rede ilimitada</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                                <span class="text-gray-600">Bônus exclusivos</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                                <span class="text-gray-600">Viagens e premiações</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i data-feather="check-circle" class="text-gryfion-gold mr-2 mt-1"></i>
+                                <span class="text-gray-600">Dashboard completo</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-gryfion-gold text-white px-4 py-1 rounded-full text-sm font-medium">Nível 3</div>
+                </div>
+            </div>
+            <p class="text-center mt-12 text-xl text-gray-700 max-w-3xl mx-auto">"Progresso baseado em contribuição, transparência e resultados."</p>
+        </div>
+    </section>
+
+    <!-- Benefícios -->
+    <section class="py-20 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center mb-16">Benefícios da <span class="text-gryfion-gold">GRYFION</span></h2>
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
+                <div class="flex items-start">
+                    <div class="bg-gryfion-gold bg-opacity-10 p-3 rounded-full mr-4">
+                        <i data-feather="shield" class="text-gryfion-gold"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-semibold mb-2">Proteção veicular moderna</h3>
+                        <p class="text-gray-600">Coberturas abrangentes com processos simplificados e transparentes.</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-gryfion-gold bg-opacity-10 p-3 rounded-full mr-4">
+                        <i data-feather="smartphone" class="text-gryfion-gold"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-semibold mb-2">Plataforma intuitiva</h3>
+                        <p class="text-gray-600">Interface amigável e recursos completos para gerenciar tudo em um só lugar.</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-gryfion-gold bg-opacity-10 p-3 rounded-full mr-4">
+                        <i data-feather="dollar-sign" class="text-gryfion-gold"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-semibold mb-2">Renda através de indicações</h3>
+                        <p class="text-gray-600">Ganhe com cada novo associado que fizer parte da sua rede.</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-gryfion-gold bg-opacity-10 p-3 rounded-full mr-4">
+                        <i data-feather="award" class="text-gryfion-gold"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-semibold mb-2">Crescimento profissional</h3>
+                        <p class="text-gray-600">Plano de carreira claro com metas e recompensas tangíveis.</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-gryfion-gold bg-opacity-10 p-3 rounded-full mr-4">
+                        <i data-feather="pie-chart" class="text-gryfion-gold"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-semibold mb-2">Dashboard completo</h3>
+                        <p class="text-gray-600">Acompanhe todos os indicadores do seu negócio em tempo real.</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-gryfion-gold bg-opacity-10 p-3 rounded-full mr-4">
+                        <i data-feather="users" class="text-gryfion-gold"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-semibold mb-2">Comunidade unida</h3>
+                        <p class="text-gray-600">Faça parte de uma rede colaborativa com suporte e treinamentos constantes.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Sobre -->
+    <section class="py-20 bg-gryfion-dark text-white">
+        <div class="container mx-auto px-6">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl font-bold mb-8">Sobre a <span class="text-gryfion-gold">GRYFION</span></h2>
+                <p class="text-xl mb-8">"Somos mais do que uma plataforma. Somos uma comunidade que acredita em oportunidades reais, proteção acessível e crescimento compartilhado."</p>
+                <p class="text-gray-300 mb-8">A Gryfion nasceu para unir segurança, tecnologia e colaboração em um ecossistema onde cada associado tem a oportunidade de proteger seu patrimônio enquanto constrói uma rede lucrativa e sustentável.</p>
+                <p class="text-gray-300">Nossa missão é democratizar o acesso à proteção veicular de qualidade, combinada com um modelo de negócios justo e transparente que recompensa o esforço e a dedicação de cada membro da nossa rede.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Final -->
+    <section id="associado" class="py-20 bg-gradient-to-r from-gryfion-dark to-gryfion-gold">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-3xl md:text-4xl font-bold text-white mb-8">Pronto para fazer parte da <span class="text-gryfion-gold">Gryfion</span>?</h2>
+            <p class="text-xl text-white mb-8 max-w-2xl mx-auto">Sua jornada rumo à proteção inteligente e crescimento compartilhado começa aqui.</p>
+            <a href="#" class="inline-block bg-white hover:bg-gray-100 text-gryfion-dark font-bold py-4 px-12 rounded-lg transition duration-300 text-lg shadow-lg">
+                Quero ser Associado Agora
+            </a>
+        </div>
+    </section>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,36 @@
+// Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        
+        const targetId = this.getAttribute('href');
+        if (targetId === '#') return;
+        
+        const targetElement = document.querySelector(targetId);
+        if (targetElement) {
+            window.scrollTo({
+                top: targetElement.offsetTop - 100,
+                behavior: 'smooth'
+            });
+        }
+    });
+});
+
+// Animation on scroll
+const animateOnScroll = () => {
+    const elements = document.querySelectorAll('.animate-fade-in');
+    
+    elements.forEach(element => {
+        const elementPosition = element.getBoundingClientRect().top;
+        const screenPosition = window.innerHeight / 1.3;
+        
+        if (elementPosition < screenPosition) {
+            element.classList.add('opacity-100', 'translate-y-0');
+        }
+    });
+};
+
+window.addEventListener('scroll', animateOnScroll);
+window.addEventListener('load', animateOnScroll);
+
+// Mobile menu toggle (will be handled by navbar component)

style.css

@@ -1,28 +1,42 @@
+/* Custom styles that complement Tailwind */
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    scroll-behavior: smooth;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Hero section overlay */
+.hero-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to right, rgba(10, 27, 42, 0.9) 0%, rgba(10, 27, 42, 0.7) 50%, rgba(10, 27, 42, 0.3) 100%);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Custom shadow for cards */
+.custom-shadow {
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Animation for hover effects */
+.hover-scale {
+    transition: transform 0.3s ease;
+}
+.hover-scale:hover {
+    transform: translateY(-5px);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #D5A74E;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #c2953e;
+}