|
|
<!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> |
