| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Reviderm - Premium Skincare & Cosmetics</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"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| reviderm: { |
| primary: '#7A6A5F', |
| secondary: '#C4B8A9', |
| dark: '#2B2A25', |
| light: '#F5F3EF', |
| } |
| }, |
| animation: { |
| 'float': 'float 3s ease-in-out infinite', |
| 'fade-in': 'fadeIn 1s ease-in', |
| 'fadeInUp': 'fadeInUp 1s ease-out', |
| 'pulse-slow': 'pulse 5s infinite', |
| 'bounce': 'bounce 3s infinite', |
| }, |
| keyframes: { |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-10px)' }, |
| }, |
| fadeIn: { |
| '0%': { opacity: '0' }, |
| '100%': { opacity: '1' }, |
| }, |
| fadeInUp: { |
| '0%': { |
| opacity: '0', |
| transform: 'translateY(20px)' |
| }, |
| '100%': { |
| opacity: '1', |
| transform: 'translateY(0)' |
| }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #F8F5FF; |
| } |
| |
| .playfair { |
| font-family: 'Playfair Display', serif; |
| } |
| |
| .scrolling-banner { |
| animation: scroll 25s linear infinite; |
| white-space: nowrap; |
| } |
| |
| @keyframes scroll { |
| 0% { transform: translateX(0); } |
| 100% { transform: translateX(-50%); } |
| } |
| |
| .scrolling-banner:hover { |
| animation-play-state: paused; |
| } |
| |
| .product-card:hover .product-overlay { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| .product-overlay { |
| transition: all 0.3s ease; |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| |
| .newsletter-popup { |
| animation: fadeIn 0.5s ease-out; |
| } |
| |
| .gradient-text { |
| background: linear-gradient(45deg, #7A6A5F, #C4B8A9); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| </style> |
| </head> |
| <body class="bg-reviderm-light"> |
| |
| <div id="newsletterPopup" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden"> |
| <div class="newsletter-popup bg-white p-8 rounded-lg max-w-md w-full mx-4 relative"> |
| <button id="closePopup" class="absolute top-4 right-4 text-gray-500 hover:text-reviderm-primary"> |
| <i class="fas fa-times text-xl"></i> |
| </button> |
| <h3 class="text-2xl font-bold text-reviderm-dark mb-2 playfair">Join Our Beauty Community</h3> |
| <p class="text-gray-600 mb-6">Subscribe to receive exclusive offers, skincare tips, and 15% off your first order.</p> |
| <form class="space-y-4"> |
| <input type="email" placeholder="Your email address" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-reviderm-primary"> |
| <button type="submit" class="w-full bg-reviderm-primary text-white py-2 rounded hover:bg-opacity-90 transition duration-300">Subscribe</button> |
| </form> |
| <p class="text-xs text-gray-400 mt-4">We respect your privacy. Unsubscribe at any time.</p> |
| </div> |
| </div> |
|
|
| |
| <nav class="bg-white shadow-sm sticky top-0 z-40"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <a href="#" class="text-2xl font-bold text-reviderm-primary playfair">REVIDERM</a> |
| </div> |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition">Skincare</a> |
| <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition">Devices</a> |
| <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition">Cosmetics</a> |
| <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition">About</a> |
| <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition">Contact</a> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition"><i class="fas fa-search"></i></a> |
| <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition"><i class="fas fa-user"></i></a> |
| <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition"><i class="fas fa-shopping-bag"></i></a> |
| <button class="md:hidden text-reviderm-dark"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="relative overflow-hidden"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0 animate-fade-in"> |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-reviderm-dark mb-6 playfair leading-tight"> |
| <span class="gradient-text">Luxury Reimagined</span> in Every Drop |
| </h1> |
| <p class="text-lg text-gray-600 mb-8 max-w-lg tracking-wide"> |
| Experience the pinnacle of Swiss-formulated skincare, where science meets opulence for transformative results. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-reviderm-primary text-white px-6 py-3 rounded hover:bg-opacity-90 transition duration-300"> |
| Shop Now |
| </a> |
| <a href="#" class="border border-reviderm-primary text-reviderm-primary px-6 py-3 rounded hover:bg-reviderm-primary hover:text-white transition duration-300"> |
| Learn More |
| </a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative group"> |
| <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="Reviderm Skincare Products" |
| class="rounded-lg shadow-xl w-full max-w-md transform transition-all duration-1000 group-hover:scale-105 group-hover:shadow-2xl animate-[fadeIn_1.5s_ease-in-out]"> |
| <div class="absolute inset-0 bg-gradient-to-r from-reviderm-primary/10 to-reviderm-secondary/10 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div> |
| <div class="absolute -bottom-6 -right-6 bg-white p-3 rounded-full shadow-lg animate-[bounce_3s_infinite]"> |
| <span class="text-reviderm-primary text-sm font-bold">NEW</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="bg-reviderm-primary text-white py-3 overflow-hidden"> |
| <div class="scrolling-banner inline-block whitespace-nowrap"> |
| <span class="text-lg mx-8">✨ Complimentary Worldwide Shipping ✨</span> |
| <span class="text-lg mx-8">🌟 Exclusive Members-Only Benefits 🌟</span> |
| <span class="text-lg mx-8">💎 Private Client Consultations Available 💎</span> |
| <span class="text-lg mx-8">✨ Free Shipping on Orders Over $50 ✨</span> |
| <span class="text-lg mx-8">🌟 30-Day Money Back Guarantee 🌟</span> |
| <span class="text-lg mx-8">💖 Vegan & Cruelty-Free Formulas 💖</span> |
| </div> |
| </div> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-reviderm-dark mb-4 playfair tracking-tight">Editor's Selection</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto tracking-wide">Exclusive formulations favored by beauty connoisseurs worldwide</p> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all duration-500 relative group hover:-translate-y-2"> |
| <div class="relative overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1571781926291-c477ebfd024b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" |
| alt="Hydra Renew Serum" |
| class="w-full h-64 object-cover"> |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
| <button class="bg-white text-reviderm-primary px-6 py-2 rounded-full font-medium hover:bg-reviderm-primary hover:text-white transition"> |
| Quick View |
| </button> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-lg font-medium text-reviderm-dark">Hydra Renew Serum</h3> |
| <p class="text-gray-600 text-sm mb-2">Intense hydration & plumping</p> |
| <div class="flex items-center text-yellow-400 mb-2"> |
| <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> |
| <span class="text-gray-500 text-sm ml-2">(428)</span> |
| </div> |
| <p class="text-reviderm-primary font-bold">$68.00</p> |
| </div> |
| </div> |
| |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative"> |
| <div class="relative overflow-hidden"> |
| <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="Luminous Eye Cream" |
| class="w-full h-64 object-cover"> |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
| <button class="bg-white text-reviderm-primary px-6 py-2 rounded-full font-medium hover:bg-reviderm-primary hover:text-white transition"> |
| Quick View |
| </button> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-lg font-medium text-reviderm-dark">Luminous Eye Cream</h3> |
| <p class="text-gray-600 text-sm mb-2">Brightens & reduces dark circles</p> |
| <div class="flex items-center text-yellow-400 mb-2"> |
| <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> |
| <span class="text-gray-500 text-sm ml-2">(512)</span> |
| </div> |
| <p class="text-reviderm-primary font-bold">$58.00</p> |
| </div> |
| </div> |
| |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative"> |
| <div class="relative overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1625772452859-1c03d5bf1137?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Glow Facial Device" |
| class="w-full h-64 object-cover"> |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
| <button class="bg-white text-reviderm-primary px-6 py-2 rounded-full font-medium hover:bg-reviderm-primary hover:text-white transition"> |
| Quick View |
| </button> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-lg font-medium text-reviderm-dark">Glow Facial Device</h3> |
| <p class="text-gray-600 text-sm mb-2">Microcurrent & LED therapy</p> |
| <div class="flex items-center text-yellow-400 mb-2"> |
| <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="far fa-star"></i> |
| <span class="text-gray-500 text-sm ml-2">(387)</span> |
| </div> |
| <p class="text-reviderm-primary font-bold">$199.00</p> |
| </div> |
| </div> |
| |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative"> |
| <div class="relative overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1595341888016-a392ef81b7de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1479&q=80" |
| alt="Perfecting Foundation" |
| class="w-full h-64 object-cover"> |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
| <button class="bg-white text-reviderm-primary px-6 py-2 rounded-full font-medium hover:bg-reviderm-primary hover:text-white transition"> |
| Quick View |
| </button> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-lg font-medium text-reviderm-dark">Perfecting Foundation</h3> |
| <p class="text-gray-600 text-sm mb-2">Buildable coverage with SPF 30</p> |
| <div class="flex items-center text-yellow-400 mb-2"> |
| <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> |
| <span class="text-gray-500 text-sm ml-2">(672)</span> |
| </div> |
| <p class="text-reviderm-primary font-bold">$42.00</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#" class="inline-block border border-reviderm-primary text-reviderm-primary px-8 py-3 rounded hover:bg-reviderm-primary hover:text-white transition duration-300"> |
| View All Products |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gradient-to-r from-reviderm-light to-reviderm-secondary"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex flex-col lg:flex-row items-center"> |
| <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12"> |
| <span class="inline-block bg-reviderm-secondary text-white px-3 py-1 rounded-full text-xs uppercase tracking-widest mb-4">Limited Edition</span> |
| <h2 class="text-3xl font-bold text-reviderm-dark mb-6 playfair tracking-tight">Caviar Infused Retinol Elixir</h2> |
| <p class="text-gray-600 mb-6"> |
| Our dermatologist-developed retinol formula delivers visible results without irritation. |
| Wake up to smoother, brighter, and more youthful-looking skin. |
| </p> |
| <ul class="space-y-2 mb-8"> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-reviderm-primary mr-2"></i> |
| <span>0.5% encapsulated retinol for gradual release</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-reviderm-primary mr-2"></i> |
| <span>Hydrating hyaluronic acid and ceramides</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-reviderm-primary mr-2"></i> |
| <span>Fragrance-free and non-comedogenic</span> |
| </li> |
| </ul> |
| <div class="flex items-center mb-6"> |
| <p class="text-2xl font-bold text-reviderm-primary mr-4">$78.00</p> |
| <p class="text-gray-400 line-through">$92.00</p> |
| </div> |
| <button class="bg-reviderm-primary text-white px-8 py-3 rounded hover:bg-opacity-90 transition duration-300"> |
| Add to Cart |
| </button> |
| </div> |
| <div class="lg:w-1/2 relative"> |
| <img src="https://images.unsplash.com/photo-1556228578-8c2d37ba539d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Advanced Retinol Night Cream" |
| class="rounded-lg shadow-xl w-full max-w-md mx-auto animate-pulse-slow"> |
| <div class="absolute -bottom-6 -left-6 bg-reviderm-dark text-white px-4 py-2 rounded-lg shadow-lg"> |
| <p class="font-bold">15% OFF</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-reviderm-dark mb-4 playfair">What Our Customers Say</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Real results from real people</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-reviderm-light p-6 rounded-lg transform transition-all duration-500 hover:scale-[1.02] hover:shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="flex items-center text-yellow-400 mr-2"> |
| <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> |
| <span class="text-sm text-gray-500">2 weeks ago</span> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| "The Hydra Renew Serum transformed my dry, dull skin. I've never had so many compliments on my complexion!" |
| </p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <p class="font-medium">Sarah J.</p> |
| <p class="text-sm text-gray-500">Verified Buyer</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-reviderm-light p-6 rounded-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="flex items-center text-yellow-400 mr-2"> |
| <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> |
| <span class="text-sm text-gray-500">1 month ago</span> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| "After just 3 weeks using the Retinol Night Cream, my fine lines are visibly reduced. Worth every penny!" |
| </p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emily R." class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <p class="font-medium">Emily R.</p> |
| <p class="text-sm text-gray-500">Verified Buyer</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-reviderm-light p-6 rounded-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="flex items-center text-yellow-400 mr-2"> |
| <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> |
| <span class="text-sm text-gray-500">3 days ago</span> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| "The Glow Facial Device gives me salon-quality results at home. My skin has never looked better!" |
| </p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Jessica T." class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <p class="font-medium">Jessica T.</p> |
| <p class="text-sm text-gray-500">Verified Buyer</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gradient-to-r from-reviderm-dark to-reviderm-primary text-white animate-[fadeIn_1s_ease-in-out]"> |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h2 class="text-3xl font-bold mb-6 playfair tracking-tight">The Reviderm Circle</h2> |
| <p class="text-lg mb-8 max-w-2xl mx-auto tracking-wide"> |
| Gain access to private sales, VIP events, and limited-edition formulations reserved for our most discerning clients. |
| </p> |
| <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto"> |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded focus:outline-none text-gray-800"> |
| <button type="submit" class="bg-reviderm-dark text-white px-6 py-3 rounded hover:bg-opacity-90 transition duration-300 whitespace-nowrap"> |
| Subscribe |
| </button> |
| </form> |
| <p class="text-sm mt-4 opacity-70">We respect your privacy. Unsubscribe at any time.</p> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-reviderm-dark mb-4 playfair">Follow Us</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Join our community for skincare tips, tutorials, and exclusive content</p> |
| </div> |
| |
| <div class="flex justify-center space-x-6"> |
| <a href="#" class="w-12 h-12 rounded-full bg-reviderm-light flex items-center justify-center text-reviderm-primary hover:bg-reviderm-primary hover:text-white transition duration-300"> |
| <i class="fab fa-instagram text-xl"></i> |
| </a> |
| <a href="#" class="w-12 h-12 rounded-full bg-reviderm-light flex items-center justify-center text-reviderm-primary hover:bg-reviderm-primary hover:text-white transition duration-300"> |
| <i class="fab fa-facebook-f text-xl"></i> |
| </a> |
| <a href="#" class="w-12 h-12 rounded-full bg-reviderm-light flex items-center justify-center text-reviderm-primary hover:bg-reviderm-primary hover:text-white transition duration-300"> |
| <i class="fab fa-tiktok text-xl"></i> |
| </a> |
| <a href="#" class="w-12 h-12 rounded-full bg-reviderm-light flex items-center justify-center text-reviderm-primary hover:bg-reviderm-primary hover:text-white transition duration-300"> |
| <i class="fab fa-youtube text-xl"></i> |
| </a> |
| <a href="#" class="w-12 h-12 rounded-full bg-reviderm-light flex items-center justify-center text-reviderm-primary hover:bg-reviderm-primary hover:text-white transition duration-300"> |
| <i class="fab fa-pinterest-p text-xl"></i> |
| </a> |
| </div> |
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-12"> |
| <img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" |
| alt="Instagram post" |
| class="rounded-lg object-cover h-48 w-full hover:opacity-90 transition cursor-pointer"> |
| <img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Instagram post" |
| class="rounded-lg object-cover h-48 w-full hover:opacity-90 transition cursor-pointer"> |
| <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="Instagram post" |
| class="rounded-lg object-cover h-48 w-full hover:opacity-90 transition cursor-pointer"> |
| <img src="https://images.unsplash.com/photo-1571781926291-c477ebfd024b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" |
| alt="Instagram post" |
| class="rounded-lg object-cover h-48 w-full hover:opacity-90 transition cursor-pointer"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-reviderm-dark text-white py-12 animate-[fadeInUp_1s_ease-in-out]"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4 playfair">REVIDERM</h3> |
| <p class="text-gray-300 mb-4 tracking-wide"> |
| Swiss precision meets French luxury in our exclusive formulations, crafted for the most discerning clientele. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-300 hover:text-white transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-white transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-white transition"> |
| <i class="fab fa-tiktok"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-white transition"> |
| <i class="fab fa-pinterest-p"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="font-bold mb-4">Shop</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Skincare</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Devices</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Cosmetics</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Best Sellers</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">New Arrivals</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-bold mb-4">About</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Our Story</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Ingredients</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Sustainability</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Press</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Careers</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-bold mb-4">Help</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Contact Us</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">FAQs</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Shipping & Returns</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Privacy Policy</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Terms of Service</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 text-sm mb-4 md:mb-0"> |
| © 2023 Reviderm. All rights reserved. |
| </p> |
| <div class="flex space-x-6"> |
| <img src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/1a9d5426a9d6d3ba5d5a4a3d4d9b1b6.svg" alt="Visa" class="h-8"> |
| <img src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/3a4f3a7e8a6a9a9a9a9a9a9a9a9a9a9.svg" alt="Mastercard" class="h-8"> |
| <img src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/4a4a4a4a4a4a4a4a4a4a4a4a4a4a4a4.svg" alt="American Express" class="h-8"> |
| <img src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/5a5a5a5a5a5a5a5a5a5a5a5a5a5a5a5.svg" alt="PayPal" class="h-8"> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| setTimeout(function() { |
| document.getElementById('newsletterPopup').classList.remove('hidden'); |
| }, 3000); |
| |
| |
| document.getElementById('closePopup').addEventListener('click', function() { |
| document.getElementById('newsletterPopup').classList.add('hidden'); |
| }); |
| |
| |
| document.getElementById('newsletterPopup').addEventListener('click', function(e) { |
| if (e.target === this) { |
| this.classList.add('hidden'); |
| } |
| }); |
| }); |
| </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=yahma/reviderm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
