|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>GlamAI - AI-Powered Beauty Salon</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> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #f5d0fe 0%, #c4b5fd 50%, #a5b4fc 100%); |
|
|
} |
|
|
.service-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.ai-pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(165, 180, 252, 0.7); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(165, 180, 252, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(165, 180, 252, 0); } |
|
|
} |
|
|
.virtual-tryon { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 20px; |
|
|
} |
|
|
.hair-section { |
|
|
background: url('https://images.unsplash.com/photo-1605497788044-5a32c7078486?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80') no-repeat center center; |
|
|
background-size: cover; |
|
|
position: relative; |
|
|
} |
|
|
.hair-section::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: rgba(0, 0, 0, 0.6); |
|
|
} |
|
|
.color-section { |
|
|
background: url('https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80') no-repeat center center; |
|
|
background-size: cover; |
|
|
position: relative; |
|
|
} |
|
|
.color-section::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: rgba(99, 102, 241, 0.7); |
|
|
} |
|
|
.advanced-color-section { |
|
|
background: url('https://images.unsplash.com/photo-1559599101-0ae7b1ca6eaf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80') no-repeat center center; |
|
|
background-size: cover; |
|
|
position: relative; |
|
|
} |
|
|
.advanced-color-section::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: rgba(124, 58, 237, 0.7); |
|
|
} |
|
|
.cutting-section { |
|
|
background: url('https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80') no-repeat center center; |
|
|
background-size: cover; |
|
|
position: relative; |
|
|
} |
|
|
.cutting-section::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: rgba(16, 185, 129, 0.7); |
|
|
} |
|
|
.section-content { |
|
|
position: relative; |
|
|
z-index: 10; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans antialiased text-gray-800"> |
|
|
|
|
|
<header class="gradient-bg text-white sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-spa text-3xl"></i> |
|
|
<h1 class="text-2xl font-bold">Glam<span class="text-indigo-800">AI</span></h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="hover:text-indigo-800 font-medium">Home</a> |
|
|
<a href="#hairstyling" class="hover:text-indigo-800 font-medium">Hairstyling</a> |
|
|
<a href="#coloring" class="hover:text-indigo-800 font-medium">Coloring</a> |
|
|
<a href="#advanced-color" class="hover:text-indigo-800 font-medium">Advanced Color</a> |
|
|
<a href="#cutting" class="hover:text-indigo-800 font-medium">Hair Cutting</a> |
|
|
<a href="#ai" class="hover:text-indigo-800 font-medium">AI Features</a> |
|
|
<a href="#contact" class="hover:text-indigo-800 font-medium">Contact</a> |
|
|
</nav> |
|
|
<button class="md:hidden text-2xl" id="menu-toggle"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<div class="hidden md:block"> |
|
|
<button class="bg-indigo-800 hover:bg-indigo-900 text-white px-6 py-2 rounded-full font-medium transition duration-300"> |
|
|
Book Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:hidden hidden bg-white text-gray-800 py-4 px-4 absolute w-full" id="mobile-menu"> |
|
|
<a href="#home" class="block py-2 hover:text-indigo-800">Home</a> |
|
|
<a href="#hairstyling" class="block py-2 hover:text-indigo-800">Hairstyling</a> |
|
|
<a href="#coloring" class="block py-2 hover:text-indigo-800">Coloring</a> |
|
|
<a href="#advanced-color" class="block py-2 hover:text-indigo-800">Advanced Color</a> |
|
|
<a href="#cutting" class="block py-2 hover:text-indigo-800">Hair Cutting</a> |
|
|
<a href="#ai" class="block py-2 hover:text-indigo-800">AI Features</a> |
|
|
<a href="#contact" class="block py-2 hover:text-indigo-800">Contact</a> |
|
|
<button class="bg-indigo-800 hover:bg-indigo-900 text-white px-6 py-2 rounded-full font-medium mt-2 w-full"> |
|
|
Book Now |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section id="home" class="gradient-bg text-white py-20"> |
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6">Experience <span class="text-indigo-800">AI-Powered</span> Beauty</h1> |
|
|
<p class="text-xl mb-8">Our revolutionary AI technology analyzes your features to create personalized beauty treatments just for you.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-indigo-800 hover:bg-indigo-900 text-white px-8 py-3 rounded-full font-medium transition duration-300"> |
|
|
Try Virtual Makeover |
|
|
</button> |
|
|
<button class="bg-white hover:bg-gray-100 text-indigo-800 px-8 py-3 rounded-full font-medium transition duration-300"> |
|
|
Book Consultation |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" |
|
|
alt="AI Beauty Salon" |
|
|
class="rounded-3xl shadow-2xl w-full max-w-md mx-auto"> |
|
|
<div class="absolute -bottom-5 -right-5 bg-indigo-800 text-white p-4 rounded-full ai-pulse"> |
|
|
<i class="fas fa-robot text-3xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="hairstyling" class="hair-section py-20 text-white"> |
|
|
<div class="container mx-auto px-4 section-content"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">AI-Enhanced <span class="text-pink-300">Hairstyling</span></h2> |
|
|
<p class="text-xl max-w-3xl mx-auto">Our AI analyzes your face shape, hair texture, and lifestyle to recommend perfect styles</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-8 rounded-2xl border border-white border-opacity-20"> |
|
|
<div class="text-pink-300 text-4xl mb-4"> |
|
|
<i class="fas fa-wand-magic-sparkles"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Style Recommendations</h3> |
|
|
<p>Our AI suggests hairstyles that complement your face shape, hair type, and personal style preferences.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-8 rounded-2xl border border-white border-opacity-20"> |
|
|
<div class="text-pink-300 text-4xl mb-4"> |
|
|
<i class="fas fa-arrows-spin"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Virtual Styling</h3> |
|
|
<p>See how different styles will look on you before committing, with realistic 3D simulations.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-8 rounded-2xl border border-white border-opacity-20"> |
|
|
<div class="text-pink-300 text-4xl mb-4"> |
|
|
<i class="fas fa-clock-rotate-left"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Maintenance Planning</h3> |
|
|
<p>Get personalized advice on how to maintain your style between salon visits.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center"> |
|
|
<button class="bg-pink-300 hover:bg-pink-400 text-gray-900 px-8 py-3 rounded-full font-medium transition duration-300"> |
|
|
Book Hairstyling Consultation |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="coloring" class="color-section py-20 text-white"> |
|
|
<div class="container mx-auto px-4 section-content"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Precision <span class="text-indigo-200">Hair Coloring</span></h2> |
|
|
<p class="text-xl max-w-3xl mx-auto">AI-powered color matching for perfect shades every time</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold mb-6">Our Coloring Services</h3> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-200 text-indigo-800 p-2 rounded-full mr-4 mt-1"> |
|
|
<i class="fas fa-palette"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg">Single Process Color</h4> |
|
|
<p>Full coverage color with AI-selected shades that complement your skin tone.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-200 text-indigo-800 p-2 rounded-full mr-4 mt-1"> |
|
|
<i class="fas fa-sun"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg">Highlights & Lowlights</h4> |
|
|
<p>Dimension-enhancing techniques placed strategically based on your facial features.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-200 text-indigo-800 p-2 rounded-full mr-4 mt-1"> |
|
|
<i class="fas fa-spa"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg">Balayage & Ombré</h4> |
|
|
<p>Hand-painted color techniques with AI-guided placement for optimal results.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-8 rounded-2xl border border-white border-opacity-20"> |
|
|
<h3 class="text-xl font-bold mb-4">Try Our Virtual Color Studio</h3> |
|
|
<p class="mb-6">Upload your photo to experiment with different colors before your appointment.</p> |
|
|
<div class="bg-gray-200 bg-opacity-20 rounded-xl w-full h-40 flex items-center justify-center mb-6"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-camera text-2xl text-white mb-2"></i> |
|
|
<p class="text-white">Upload your photo</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="bg-indigo-200 hover:bg-indigo-300 text-indigo-800 px-6 py-2 rounded-full font-medium w-full"> |
|
|
Try Color Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="advanced-color" class="advanced-color-section py-20 text-white"> |
|
|
<div class="container mx-auto px-4 section-content"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Advanced <span class="text-purple-200">Color Techniques</span></h2> |
|
|
<p class="text-xl max-w-3xl mx-auto">Cutting-edge coloring methods enhanced by AI precision</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
<div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-6 rounded-2xl border border-white border-opacity-20"> |
|
|
<div class="text-purple-200 text-3xl mb-3"> |
|
|
<i class="fas fa-water"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold mb-2">Color Melting</h3> |
|
|
<p class="text-sm">Seamless blending of multiple shades for dimensional color.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-6 rounded-2xl border border-white border-opacity-20"> |
|
|
<div class="text-purple-200 text-3xl mb-3"> |
|
|
<i class="fas fa-fire"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold mb-2">Shadow Roots</h3> |
|
|
<p class="text-sm">Low-maintenance color with soft root transitions.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-6 rounded-2xl border border-white border-opacity-20"> |
|
|
<div class="text-purple-200 text-3xl mb-3"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold mb-2">Money Piece</h3> |
|
|
<p class="text-sm">Face-framing highlights for maximum impact.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-6 rounded-2xl border border-white border-opacity-20"> |
|
|
<div class="text-purple-200 text-3xl mb-3"> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold mb-2">Color Correction</h3> |
|
|
<p class="text-sm">AI analysis to fix and perfect existing color.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-8 rounded-2xl border border-white border-opacity-20 max-w-4xl mx-auto"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-2/3 mb-6 md:mb-0 md:pr-8"> |
|
|
<h3 class="text-xl font-bold mb-3">Color Consultation</h3> |
|
|
<p>Our AI system analyzes your skin tone, eye color, and natural hair color to recommend the perfect shades and techniques for you.</p> |
|
|
</div> |
|
|
<div class="md:w-1/3"> |
|
|
<button class="bg-purple-200 hover:bg-purple-300 text-purple-800 px-6 py-3 rounded-full font-medium w-full"> |
|
|
Book Consultation |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="cutting" class="cutting-section py-20 text-white"> |
|
|
<div class="container mx-auto px-4 section-content"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Precision <span class="text-emerald-200">Hair Cutting</span></h2> |
|
|
<p class="text-xl mb-8">Our AI analyzes your hair type, growth patterns, and facial structure to recommend the perfect cut for you.</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-emerald-200 text-emerald-800 p-2 rounded-full mr-4 mt-1"> |
|
|
<i class="fas fa-ruler-combined"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Customized Layers</h4> |
|
|
<p class="text-sm">Precisely placed layers based on your hair's natural movement.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-emerald-200 text-emerald-800 p-2 rounded-full mr-4 mt-1"> |
|
|
<i class="fas fa-scissors"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Texturizing</h4> |
|
|
<p class="text-sm">AI-guided texturizing for perfect volume and movement.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-emerald-200 text-emerald-800 p-2 rounded-full mr-4 mt-1"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Growth Planning</h4> |
|
|
<p class="text-sm">Predict how your cut will grow out with our growth simulator.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="mt-8 bg-emerald-200 hover:bg-emerald-300 text-emerald-800 px-8 py-3 rounded-full font-medium"> |
|
|
Book Cutting Service |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-8 rounded-2xl border border-white border-opacity-20"> |
|
|
<h3 class="text-xl font-bold mb-4">Virtual Cut Preview</h3> |
|
|
<p class="mb-6">See how different cuts will look on you before making the change.</p> |
|
|
|
|
|
<div class="grid grid-cols-3 gap-4 mb-6"> |
|
|
<div class="bg-gray-200 bg-opacity-20 rounded-lg h-24 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
</div> |
|
|
<div class="bg-gray-200 bg-opacity-20 rounded-lg h-24 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
</div> |
|
|
<div class="bg-gray-200 bg-opacity-20 rounded-lg h-24 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
</div> |
|
|
<div class="bg-gray-200 bg-opacity-20 rounded-lg h-24 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
</div> |
|
|
<div class="bg-gray-200 bg-opacity-20 rounded-lg h-24 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
</div> |
|
|
<div class="bg-gray-200 bg-opacity-20 rounded-lg h-24 flex items-center justify-center"> |
|
|
<i class="fas fa-plus text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between"> |
|
|
<button class="text-emerald-200 hover:text-emerald-300 font-medium"> |
|
|
<i class="fas fa-rotate-left mr-1"></i> Reset |
|
|
</button> |
|
|
<button class="text-emerald-200 hover:text-emerald-300 font-medium"> |
|
|
Save Look <i class="fas fa-save ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="ai" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-indigo-800">AI Technology</span></h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Revolutionizing beauty with artificial intelligence for personalized experiences</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-2xl transition duration-300 hover:shadow-xl"> |
|
|
<div class="bg-indigo-100 text-indigo-800 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-face-scan text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Facial Analysis</h3> |
|
|
<p class="text-gray-600">Our AI scans your facial features to recommend the perfect hairstyle, makeup, and treatments tailored to your unique face shape.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-2xl transition duration-300 hover:shadow-xl"> |
|
|
<div class="bg-indigo-100 text-indigo-800 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-magic text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Virtual Try-On</h3> |
|
|
<p class="text-gray-600">Experiment with different looks virtually before committing. See how hair colors, cuts, and makeup will look on you instantly.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-2xl transition duration-300 hover:shadow-xl"> |
|
|
<div class="bg-indigo-100 text-indigo-800 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-brain text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Skin Diagnosis</h3> |
|
|
<p class="text-gray-600">Advanced AI analyzes your skin condition to recommend personalized skincare routines and treatments for optimal results.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-20 virtual-tryon p-8 md:p-12"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0"> |
|
|
<h3 class="text-2xl font-bold mb-4">Try Our Virtual Makeover</h3> |
|
|
<p class="mb-6">Upload your photo and experiment with different looks powered by our AI technology.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="bg-indigo-800 hover:bg-indigo-900 text-white px-6 py-2 rounded-full font-medium transition duration-300"> |
|
|
Try Hair Color |
|
|
</button> |
|
|
<button class="bg-white hover:bg-gray-100 text-indigo-800 px-6 py-2 rounded-full font-medium transition duration-300 border border-indigo-800"> |
|
|
Try Makeup |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="bg-gray-200 rounded-xl w-full h-64 md:h-80 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-camera text-4xl text-gray-400 mb-2"></i> |
|
|
<p class="text-gray-500">Upload your photo to begin</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-4 -right-4 bg-white p-3 rounded-full shadow-lg"> |
|
|
<i class="fas fa-arrow-rotate-right text-indigo-800 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">What Our <span class="text-indigo-800">Clients Say</span></h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Hear from people who've experienced our AI-powered beauty services</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-2xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 text-xl 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> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">"The AI hair color recommendation was spot on! I've never received so many compliments. The virtual try-on made me confident in my choice before committing."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Sarah J.</h4> |
|
|
<p class="text-gray-500 text-sm">Regular Client</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-2xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 text-xl 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> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">"The skin analysis revealed issues I didn't even know I had. The personalized facial treatment made my skin glow like never before. Worth every penny!"</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Maria L." class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Maria L.</h4> |
|
|
<p class="text-gray-500 text-sm">First-Time Client</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-2xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 text-xl 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> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">"I was skeptical about AI in beauty, but the makeup recommendations perfectly matched my skin tone and features. The artist executed it beautifully."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Emily T." class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Emily T.</h4> |
|
|
<p class="text-gray-500 text-sm">Wedding Client</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Get In <span class="text-indigo-800">Touch</span></h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Book your AI-powered beauty experience today</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-8"> |
|
|
<h3 class="text-2xl font-bold mb-6">Contact Information</h3> |
|
|
|
|
|
<div class="flex items-start mb-6"> |
|
|
<div class="bg-indigo-100 text-indigo-800 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Location</h4> |
|
|
<p class="text-gray-600">123 Beauty Avenue, Tech District, CA 90210</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start mb-6"> |
|
|
<div class="bg-indigo-100 text-indigo-800 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-phone-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Phone</h4> |
|
|
<p class="text-gray-600">(555) 123-4567</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start mb-6"> |
|
|
<div class="bg-indigo-100 text-indigo-800 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Email</h4> |
|
|
<p class="text-gray-600">[email protected]</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-100 text-indigo-800 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-clock"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Hours</h4> |
|
|
<p class="text-gray-600">Monday - Friday: 9am - 8pm</p> |
|
|
<p class="text-gray-600">Saturday - Sunday: 10am - 6pm</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2"> |
|
|
<form class="bg-gray-50 p-8 rounded-2xl"> |
|
|
<h3 class="text-2xl font-bold mb-6">Book a Consultation</h3> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="name">Full Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="email">Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="phone">Phone</label> |
|
|
<input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="service">Service</label> |
|
|
<select id="service" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<option>Select a service</option> |
|
|
<option>AI Hair Styling</option> |
|
|
<option>Smart Facial Treatment</option> |
|
|
<option>Personalized Makeup</option> |
|
|
<option>Virtual Try-On Consultation</option> |
|
|
<option>Full AI Beauty Analysis</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2" for="message">Special Requests</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="bg-indigo-800 hover:bg-indigo-900 text-white px-8 py-3 rounded-full font-medium w-full transition duration-300"> |
|
|
Book Now |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-indigo-100"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-2xl md:text-3xl font-bold mb-4">Join Our <span class="text-indigo-800">Beauty AI</span> Newsletter</h2> |
|
|
<p class="text-gray-600 mb-8 max-w-2xl mx-auto">Get exclusive tips, offers, and early access to our new AI beauty features.</p> |
|
|
|
|
|
<div class="max-w-md mx-auto flex"> |
|
|
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-full focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<button class="bg-indigo-800 hover:bg-indigo-900 text-white px-6 py-3 rounded-r-full font-medium transition duration-300"> |
|
|
Subscribe |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i class="fas fa-spa text-3xl"></i> |
|
|
<h3 class="text-2xl font-bold">Glam<span class="text-indigo-400">AI</span></h3> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4">Revolutionizing beauty with artificial intelligence for personalized experiences.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl"> |
|
|
<i class="fab fa-tiktok"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl"> |
|
|
<i class="fab fa-pinterest-p"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Services</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">AI Hair Styling</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Smart Facials</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Personalized Makeup</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Skin Analysis</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Virtual Try-On</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Company</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Our Technology</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Press</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Support</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Accessibility</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 GlamAI. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white">Terms of Service</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white">Sitemap</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<button id="back-to-top" class="fixed bottom-8 right-8 bg-indigo-800 text-white p-3 rounded-full shadow-lg hidden"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('menu-toggle').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const backToTopButton = document.getElementById('back-to-top'); |
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopButton.classList.remove('hidden'); |
|
|
} else { |
|
|
backToTopButton.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTopButton.addEventListener('click', function() { |
|
|
window.scrollTo({ top: 0, behavior: 'smooth' }); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const observerOptions = { |
|
|
threshold: 0.1 |
|
|
}; |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('animate-fadeIn'); |
|
|
observer.unobserve(entry.target); |
|
|
} |
|
|
}); |
|
|
}, observerOptions); |
|
|
|
|
|
document.querySelectorAll('.service-card, .virtual-tryon, [class*="bg-indigo-100"]').forEach(el => { |
|
|
observer.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=Hairitics/glamai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
