Crie o design completo de uma landing page profissional e moderna para uma empresa chamada GRYFION.
bea785f verified | <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> |