Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vipotech - A Revolução no Cuidado com a Pele</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| color: #333333; | |
| background-color: #FFFFFF; | |
| } | |
| .hero-section { | |
| background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), | |
| url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .highlight-section { | |
| background-color: #564596; | |
| } | |
| .title-color { | |
| color: #e6007e; | |
| } | |
| .btn-primary { | |
| background-color: #ef7c19; | |
| color: white; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: #db6e12; | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |
| } | |
| .btn-secondary { | |
| background-color: #493d39; | |
| color: white; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-secondary:hover { | |
| background-color: #3a312e; | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |
| } | |
| .before-after { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .before-after img { | |
| width: 100%; | |
| display: block; | |
| } | |
| .before-after .before { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 50%; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background-color: #F2F2F2; | |
| margin: 0 auto; | |
| color: #564596; | |
| font-size: 24px; | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .product-image { | |
| transition: all 0.3s ease; | |
| } | |
| .product-image:hover { | |
| transform: scale(1.05); | |
| } | |
| .guarantee-badge { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Bloco 1: Headline Principal + Sub-headline --> | |
| <section class="hero-section py-20 px-4 md:px-8 lg:px-16"> | |
| <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h1 class="title-color text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">Sua Pele Pede Socorro <br><span class="text-3xl md:text-4xl lg:text-5xl">(Mas Foge de Irritação?)</span></h1> | |
| <p class="text-xl md:text-2xl mb-8">Descubra a revolução cosmética que une tecnologia de ponta e fórmulas 100% veganas para acalmar, purificar e iluminar sua pele como nunca antes... com zero agressão.</p> | |
| <a href="#offer" class="btn-primary inline-block px-8 py-4 rounded-full text-lg font-semibold">QUERO REVOLUCIONAR MINHA PELE</a> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Mulher com pele saudável" class="rounded-lg shadow-xl floating"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bloco 2: Conexão e Agitação do Problema --> | |
| <section class="py-16 px-4 md:px-8 lg:px-16 bg-gray-50"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center mb-16"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <div class="before-after h-64 md:h-80 rounded-lg overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1605497788044-5a32c7078486?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Pele irritada"> | |
| <div class="before"> | |
| <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Pele saudável"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="title-color text-3xl md:text-4xl font-bold mb-6">Você já se olhou no espelho desejando uma pele mais calma, equilibrada e luminosa?</h2> | |
| <p class="text-lg mb-6">Já gastou tempo e dinheiro em produtos que prometiam milagres, mas só entregaram mais vermelhidão, sensibilidade ou simplesmente... nada?</p> | |
| <p class="text-lg mb-6">É frustrante, não é? Buscar soluções eficazes que também sejam gentis, veganas e alinhadas aos seus valores parece uma missão impossível. Você cuida da alimentação, busca um estilo de vida saudável... por que sua pele não pode refletir isso?</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bloco 3: Apresentação da Solução - Vipotech --> | |
| <section class="highlight-section py-20 px-4 md:px-8 lg:px-16 text-white"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <div class="flex justify-center mb-10"> | |
| <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgMTAwIj48c3R5bGU+LmxvZ28tdGV4dHtmb250LWZhbWlseTpBcmlhbDtmb250LXdlaWdodDo3MDA7Zm9udC1zaXplOjQ4cHg7ZmlsbDojZTZmZmZmO30uc2NpZW5jZS1pY29ue2ZpbGw6I2U2ZmZmZjt9PC9zdHlsZT48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgY2xhc3M9ImxvZ28tdGV4dCI+VklQT1RFQ0g8L3RleHQ+PC9zdmc+" alt="Vipotech Logo" class="h-20"> | |
| </div> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">E se existisse uma forma de resetar sua pele?</h2> | |
| <p class="text-xl mb-8 max-w-4xl mx-auto">De oferecer a ela exatamente o que precisa para se defender, se purificar e se regenerar, usando a inteligência da ciência e o respeito da natureza?</p> | |
| <p class="text-2xl font-semibold">Chegou a hora de parar de lutar contra sua pele e começar a trabalhar com ela. Bem-vinda à Vipotech. A evolução do cuidado que sua pele esperava.</p> | |
| </div> | |
| </section> | |
| <!-- Bloco 4: A Ciência por Trás da Mágica --> | |
| <section class="py-20 px-4 md:px-8 lg:px-16"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="title-color text-3xl md:text-4xl font-bold mb-16 text-center">Nosso segredo não é mágica, é ciência inteligente inspirada na natureza</h2> | |
| <div class="flex flex-col md:flex-row items-center mb-16"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <div class="grid grid-cols-2 gap-8"> | |
| <div class="text-center"> | |
| <div class="feature-icon mb-4"> | |
| <i class="fas fa-dna"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">DNA da Ciência</h3> | |
| <p>Representado no "V" do nosso logo</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="feature-icon mb-4"> | |
| <i class="fas fa-tint"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Fluidez Pura</h3> | |
| <p>Representada no "P" do nosso logo</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="feature-icon mb-4"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Luminosidade</h3> | |
| <p>Representada no "O" do nosso logo</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="feature-icon mb-4"> | |
| <i class="fas fa-microchip"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Tecnologia</h3> | |
| <p>Representada no "TECH" do nosso logo</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-10"> | |
| <p class="text-lg mb-6">No coração da Vipotech está o Ácido Hipocloroso (HOCl) – uma molécula poderosa que o seu próprio corpo produz para se defender e regenerar.</p> | |
| <p class="text-lg mb-6">Com nossa tecnologia exclusiva ("TECH"), conseguimos estabilizar e potencializar o HOCl em fórmulas 100% veganas. É a ciência pura (representada no DNA do nosso V) agindo em perfeita harmonia.</p> | |
| <p class="text-lg">Imagine uma fluidez (como a gota em nosso P) que entrega ativos poderosos de forma ultra-suave, biocompatível, que sua pele reconhece instantaneamente. Sem parabenos, sem sulfatos, sem fragrâncias artificiais, sem crueldade. Apenas ciência limpa e eficaz.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bloco 5: Benefícios Claros e Tangíveis --> | |
| <section class="py-20 px-4 md:px-8 lg:px-16 bg-gray-50"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="title-color text-3xl md:text-4xl font-bold mb-16 text-center">Com Vipotech, você não precisa mais escolher entre gentileza e resultado</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Benefício 1 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="feature-icon mb-4"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="title-color text-xl font-bold mb-4">Alívio Imediato</h3> | |
| <p class="mb-4">Sinta a calma e o frescor em peles sensibilizadas e reativas. Adeus, vermelhidão!</p> | |
| <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Pele calma" class="rounded-lg h-40 w-full object-cover"> | |
| </div> | |
| <!-- Benefício 2 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="feature-icon mb-4"> | |
| <i class="fas fa-leaf"></i> | |
| </div> | |
| <h3 class="title-color text-xl font-bold mb-4">Pureza Renovada</h3> | |
| <p class="mb-4">Veja a redução de imperfeições, controle da oleosidade e poros visivelmente mais limpos.</p> | |
| <img src="https://images.unsplash.com/photo-1532635241-17ec8207c28c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Pele purificada" class="rounded-lg h-40 w-full object-cover"> | |
| </div> | |
| <!-- Benefício 3 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="feature-icon mb-4"> | |
| <i class="fas fa-feather"></i> | |
| </div> | |
| <h3 class="title-color text-xl font-bold mb-4">Suavidade Extrema</h3> | |
| <p class="mb-4">Toque sua pele e sinta a maciez e hidratação leve, sem pesar.</p> | |
| <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pele macia" class="rounded-lg h-40 w-full object-cover"> | |
| </div> | |
| <!-- Benefício 4 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="feature-icon mb-4"> | |
| <i class="fas fa-sun"></i> | |
| </div> | |
| <h3 class="title-color text-xl font-bold mb-4">Luminosidade Saudável</h3> | |
| <p class="mb-4">Conquiste aquele glow natural, sinal de uma pele equilibrada e feliz.</p> | |
| <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Pele luminosa" class="rounded-lg h-40 w-full object-cover"> | |
| </div> | |
| <!-- Benefício 5 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="feature-icon mb-4"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| <h3 class="title-color text-xl font-bold mb-4">Confiança Redescoberta</h3> | |
| <p class="mb-4">Ame sua pele, sabendo que está nutrindo-a com o melhor da ciência ética.</p> | |
| <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Mulher confiante" class="rounded-lg h-40 w-full object-cover"> | |
| </div> | |
| <!-- Benefício 6 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="feature-icon mb-4"> | |
| <i class="fas fa-certificate"></i> | |
| </div> | |
| <h3 class="title-color text-xl font-bold mb-4">100% Vegano</h3> | |
| <p class="mb-4">Tecnologia avançada aliada ao respeito pelos animais e meio ambiente.</p> | |
| <img src="https://images.unsplash.com/photo-1556909114-44e60c5ed2a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Produto vegano" class="rounded-lg h-40 w-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bloco 6: Prova Social --> | |
| <section class="py-20 px-4 md:px-8 lg:px-16"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="title-color text-3xl md:text-4xl font-bold mb-16 text-center">O que nossos clientes dizem</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Depoimento 1 --> | |
| <div class="testimonial-card bg-white p-8 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Joana S." class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h4 class="font-bold">Joana S.</h4> | |
| <p class="text-sm text-gray-600">34 anos</p> | |
| </div> | |
| </div> | |
| <p class="mb-4 italic">"Finalmente um produto que acalmou minha rosácea! Vipotech mudou minha pele. Recomendo demais!"</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Depoimento 2 --> | |
| <div class="testimonial-card bg-white p-8 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Rafael M." class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h4 class="font-bold">Rafael M.</h4> | |
| <p class="text-sm text-gray-600">29 anos</p> | |
| </div> | |
| </div> | |
| <p class="mb-4 italic">"Sou vegano e sempre procurei algo eficaz. A textura é leve, a pele fica incrível e a ciência por trás me deu confiança. Virou meu queridinho!"</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Depoimento 3 --> | |
| <div class="testimonial-card bg-white p-8 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Carla P." class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h4 class="font-bold">Carla P.</h4> | |
| <p class="text-sm text-gray-600">42 anos</p> | |
| </div> | |
| </div> | |
| <p class="mb-4 italic">"Notei minha pele mais luminosa e com menos cravinhos em poucos dias. Surpreendente!"</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bloco 7: Quebra de Objeções --> | |
| <section class="py-20 px-4 md:px-8 lg:px-16 bg-gray-50"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="title-color text-3xl md:text-4xl font-bold mb-16 text-center">Segurança e Credibilidade</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-16"> | |
| <div class="text-center"> | |
| <div class="feature-icon mb-4"> | |
| <i class="fas fa-flask"></i> | |
| </div> | |
| <h3 class="font-bold">Dermatologicamente Testado</h3> | |
| </div> | |
| <div class="text-center"> | |
| <div class="feature-icon mb-4"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <h3 class="font-bold">Aprovado ANVISA</h3> | |
| </div> | |
| <div class="text-center"> | |
| <div class="feature-icon mb-4"> | |
| <i class="fas fa-leaf"></i> | |
| </div> | |
| <h3 class="font-bold">100% Vegano</h3> | |
| </div> | |
| <div class="text-center"> | |
| <div class="feature-icon mb-4"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| <h3 class="font-bold">Cruelty-Free</h3> | |
| </div> | |
| </div> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="mb-8"> | |
| <h3 class="font-bold text-xl mb-4">"Ácido Hipocloroso? É seguro?"</h3> | |
| <p class="text-lg">Totalmente! É uma substância natural do nosso corpo, conhecida por sua ação antimicrobiana e anti-inflamatória gentil. É seguro para todos os tipos de pele, até as mais sensíveis.</p> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-xl mb-4">"Funciona mesmo sendo vegano?"</h3> | |
| <p class="text-lg">Sim! Acreditamos na potência da natureza aliada à tecnologia. Nossas fórmulas são dermatologicamente testadas e registradas na ANVISA, garantindo segurança e eficácia comprovadas, sem nenhum componente animal.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bloco 8: Apresentação da Oferta --> | |
| <section id="offer" class="py-20 px-4 md:px-8 lg:px-16"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="title-color text-3xl md:text-4xl font-bold mb-16 text-center">Experimente o poder transformador de Vipotech</h2> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <div class="grid grid-cols-2 gap-4 mb-8"> | |
| <div class="product-image"> | |
| <img src="https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Sérum Vipotech" class="rounded-lg shadow-md"> | |
| </div> | |
| <div class="product-image"> | |
| <img src="https://images.unsplash.com/photo-1556228578-44d595347736?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Sérum Vipotech em uso" class="rounded-lg shadow-md"> | |
| </div> | |
| <div class="product-image"> | |
| <img src="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Textura do sérum" class="rounded-lg shadow-md"> | |
| </div> | |
| <div class="product-image"> | |
| <img src="https://images.unsplash.com/photo-1556909114-44e60c5ed2a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Ambiente Vipotech" class="rounded-lg shadow-md"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="title-color text-2xl md:text-3xl font-bold mb-4">Sérum Revitalizante Multi-Ação Vipotech</h3> | |
| <p class="text-lg mb-6">Leve e potente, este sérum com Ácido Hipocloroso estabilizado hidrata, acalma a vermelhidão, uniformiza o tom e protege contra agressores externos. Perfeito para uso diário em todos os tipos de pele.</p> | |
| <div class="mb-8"> | |
| <p class="text-2xl font-bold mb-2">R$ 149,90</p> | |
| <p class="text-sm text-gray-600">ou 6x de R$ 24,98 sem juros</p> | |
| </div> | |
| <a href="#cta" class="btn-primary inline-block px-8 py-4 rounded-full text-lg font-semibold w-full text-center">COMPRAR AGORA</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bloco 9: Justificativa de Valor e Urgência/Bônus --> | |
| <section class="py-16 px-4 md:px-8 lg:px-16 bg-gray-800 text-white"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-2/3 mb-8 md:mb-0 md:pr-10"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-6">Sua pele merece um investimento inteligente</h2> | |
| <p class="text-lg mb-6">Pense em quanto já gastou em produtos que não entregaram o prometido. Vipotech é cuidado de alta tecnologia com resultados duradouros. É ciência, ética e beleza em um só frasco.</p> | |
| <div class="bg-gray-700 p-6 rounded-lg"> | |
| <h3 class="text-xl font-bold mb-4 text-center">OFERTA ESPECIAL DE LANÇAMENTO</h3> | |
| <p class="text-center mb-4">Peça seu Sérum Revitalizante Multi-Ação hoje e receba <span class="font-bold">Frete Grátis para todo o Brasil + Uma Miniatura Exclusiva!</span></p> | |
| <p class="text-center text-yellow-300 font-semibold">Esta oferta é válida apenas enquanto durarem nossos estoques iniciais.</p> | |
| </div> | |
| </div> | |
| <div class="md:w-1/3"> | |
| <div class="bg-white text-gray-800 p-6 rounded-lg shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-yellow-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-truck text-yellow-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Frete Grátis</h4> | |
| <p class="text-sm">Para todo o Brasil</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-gift text-purple-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Miniatura Exclusiva</h4> | |
| <p class="text-sm">15ml para você testar</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-percentage text-green-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">10% OFF</h4> | |
| <p class="text-sm">No Primeiro Pedido</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bloco 10: Chamada Para Ação Principal --> | |
| <section id="cta" class="py-20 px-4 md:px-8 lg:px-16 text-center"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="title-color text-3xl md:text-4xl font-bold mb-8">Pronta para transformar sua pele com Vipotech?</h2> | |
| <p class="text-xl mb-10">Clique no botão abaixo e aproveite nossa oferta especial de lançamento com frete grátis!</p> | |
| <a href="#" class="btn-primary inline-block px-12 py-5 rounded-full text-xl font-bold mx-auto">QUERO REVOLUCIONAR MINHA PELE COM VIPOTECH!</a> | |
| </div> | |
| </section> | |
| <!-- Bloco 11: Garantia Incondicional --> | |
| <section class="py-16 px-4 md:px-8 lg:px-16 bg-gray-50"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <div class="inline-block bg-white p-6 rounded-full shadow-lg mb-8 guarantee-badge"> | |
| <i class="fas fa-award text-4xl title-color"></i> | |
| </div> | |
| <h2 class="title-color text-3xl md:text-4xl font-bold mb-6">Risco Zero para Você</h2> | |
| <h3 class="text-2xl font-bold mb-6">Nossa Garantia Pele Feliz Vipotech!</h3> | |
| <p class="text-lg max-w-3xl mx-auto mb-8">Temos tanta confiança na transformação que Vipotech trará para sua pele que oferecemos: use o produto por 30 dias. Se você não amar os resultados, é só nos contatar que devolvemos 100% do seu dinheiro. Sem perguntas, sem burocracia.</p> | |
| </div> | |
| </section> | |
| <!-- Bloco 12: Chamada Para Ação Final --> | |
| <section class="py-20 px-4 md:px-8 lg:px-16 text-center bg-white"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="title-color text-3xl md:text-4xl font-bold mb-8">Não espere mais para ter a pele calma, pura e luminosa que você merece</h2> | |
| <p class="text-xl mb-10">Abrace a ciência gentil de Vipotech e descubra o que sua pele pode se tornar.</p> | |
| <a href="#" class="btn-secondary inline-block px-12 py-5 rounded-full text-xl font-bold mx-auto">SIM, QUERO EXPERIMENTAR VIPOTECH SEM RISCO!</a> | |
| </div> | |
| </section> | |
| <!-- Rodapé --> | |
| <footer class="py-12 px-4 md:px-8 lg:px-16 bg-gray-100"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex justify-center mb-8"> | |
| <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgMTAwIj48c3R5bGU+LmxvZ28tdGV4dHtmb250LWZhbWlseTpBcmlhbDtmb250LXdlaWdodDo3MDA7Zm9udC1zaXplOjQ4cHg7ZmlsbDojZTZmZmZmO30uc2NpZW5jZS1pY29ue2ZpbGw6I2U2ZmZmZjt9PC9zdHlsZT48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgY2xhc3M9ImxvZ28tdGV4dCI+VklQT1RFQ0g8L3RleHQ+PC9zdmc+" alt="Vipotech Logo" class="h-16"> | |
| </div> | |
| <div class="border-t border-gray-300 pt-8 mb-8"></div> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-600">© 2023 Vipotech. Todos os direitos reservados.</p> | |
| <p class="text-sm text-gray-600 mt-2">CNPJ: 00.000.000/0000-00 | Endereço: Rua Exemplo, 123 - São Paulo/SP</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for elements when they come into view | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, {threshold: 0.1}); | |
| document.querySelectorAll('.feature-icon, .testimonial-card, .product-image').forEach(el => { | |
| el.classList.add('opacity-0', 'transition-opacity', 'duration-500'); | |
| observer.observe(el); | |
| }); | |
| // Add animation class when element is in view | |
| const fadeInObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.remove('opacity-0'); | |
| } | |
| }); | |
| }, {threshold: 0.1}); | |
| document.querySelectorAll('.opacity-0').forEach(el => { | |
| fadeInObserver.observe(el); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=robertosousa/vipotech-lp-teste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |