first commit
commit
a6fad7ad04
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
[.ShellClassInfo]
|
||||||
|
LocalizedResourceName=@my-project,0
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="refresh" content="0; url=/src/home.html">
|
||||||
|
<title>SOUTOU | Elegant Jewelry</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Redirecting to <a href="/src/home.html">SOUTOU</a>...</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"name": "my-project",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"postcss": "^8.4.49",
|
||||||
|
"tailwindcss": "^3.4.17",
|
||||||
|
"vite": "^8.0.12"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 749 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
@ -0,0 +1,127 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>SOUTOU | About Us — Our Story</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<style>
|
||||||
|
@keyframes fadeInScale { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
|
||||||
|
@keyframes floatSoft { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
|
||||||
|
.animate-fade-scale { animation: fadeInScale 0.8s ease-out forwards; }
|
||||||
|
.animate-float { animation: floatSoft 5s ease-in-out infinite; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#f5e6d8]">
|
||||||
|
|
||||||
|
<nav class="fixed w-full z-50 backdrop-blur-md bg-[#f5e6d8]/95 shadow-sm">
|
||||||
|
<div class="max-w-7xl mx-auto px-5 md:px-8 py-4 flex justify-between items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i class="fas fa-gem text-xl text-[#b8926c]"></i>
|
||||||
|
<span class="text-xl font-semibold tracking-wide font-['Playfair_Display',serif] text-[#2c2418]">SOUTOU</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex space-x-8 text-[#4a3a2a] font-medium">
|
||||||
|
<a href="/src/home.html" class="hover:text-amber-800 transition">Home</a>
|
||||||
|
<a href="/src/collections.html" class="hover:text-amber-800 transition">Collections</a>
|
||||||
|
<a href="/src/about.html" class="text-amber-800 border-b-2 border-amber-600 pb-1">About Us</a>
|
||||||
|
<a href="/src/contact.html" class="hover:text-amber-800 transition">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<i class="far fa-heart text-xl cursor-pointer hover:text-amber-700 transition"></i>
|
||||||
|
<i class="far fa-user text-xl cursor-pointer hover:text-amber-700 transition"></i>
|
||||||
|
<i class="fas fa-shopping-bag text-xl cursor-pointer hover:text-amber-700 transition"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- hero -->
|
||||||
|
<section class="pt-32 pb-20 px-5 relative overflow-hidden">
|
||||||
|
<div class="absolute top-0 right-0 w-96 h-96 bg-amber-200/30 rounded-full blur-3xl"></div>
|
||||||
|
<div class="max-w-7xl mx-auto text-center relative z-10">
|
||||||
|
<i class="fas fa-gem text-6xl text-amber-600 mb-6 animate-float"></i>
|
||||||
|
<h1 class="font-['Playfair_Display',serif] text-5xl md:text-7xl font-light text-stone-800 mb-4">Our Story</h1>
|
||||||
|
<div class="w-24 h-0.5 bg-amber-500 mx-auto mb-6"></div>
|
||||||
|
<p class="text-stone-600 max-w-3xl mx-auto text-lg">Since 1989, SOUTOU has been crafting dreams into wearable art.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="py-20 px-5">
|
||||||
|
<div class="max-w-4xl mx-auto">
|
||||||
|
<div class="relative border-l-4 border-amber-500 ml-6 md:ml-0">
|
||||||
|
|
||||||
|
<div class="mb-12 ml-8 md:ml-12 relative">
|
||||||
|
<div class="absolute -left-12 w-8 h-8 bg-amber-600 rounded-full flex items-center justify-center shadow-lg">
|
||||||
|
<i class="fas fa-gem text-white text-sm"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-['Playfair_Display',serif] text-2xl font-bold text-stone-800">1989 — The Beginning</h3>
|
||||||
|
<p class="text-stone-600 mt-2">Founded in Paris by master jeweler Isabelle Moreau, SOUTOU began as a small atelier dedicated to preserving traditional craftsmanship.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-12 ml-8 md:ml-12 relative">
|
||||||
|
<div class="absolute -left-12 w-8 h-8 bg-amber-600 rounded-full flex items-center justify-center shadow-lg">
|
||||||
|
<i class="fas fa-ring text-white text-sm"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-['Playfair_Display',serif] text-2xl font-bold text-stone-800">2005 — Global Recognition</h3>
|
||||||
|
<p class="text-stone-600 mt-2">SOUTOU's celestial collection wins the International Jewelry Design Award, bringing our artistry to the world stage.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-12 ml-8 md:ml-12 relative">
|
||||||
|
<div class="absolute -left-12 w-8 h-8 bg-amber-600 rounded-full flex items-center justify-center shadow-lg">
|
||||||
|
<i class="fas fa-leaf text-white text-sm"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-['Playfair_Display',serif] text-2xl font-bold text-stone-800">2015 — Sustainable Luxury</h3>
|
||||||
|
<p class="text-stone-600 mt-2">We commit to using 100% recycled gold and ethically sourced gemstones, proving that luxury can be responsible.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ml-8 md:ml-12 relative">
|
||||||
|
<div class="absolute -left-12 w-8 h-8 bg-amber-600 rounded-full flex items-center justify-center shadow-lg">
|
||||||
|
<i class="fas fa-globe text-white text-sm"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-['Playfair_Display',serif] text-2xl font-bold text-stone-800">2024 — A New Era</h3>
|
||||||
|
<p class="text-stone-600 mt-2">Today, SOUTOU continues to create heirloom pieces for discerning souls worldwide, blending tradition with innovation.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="py-20 px-5 bg-gradient-to-br from-[#e8d5c0] to-[#f5e6d8]">
|
||||||
|
<div class="max-w-7xl mx-auto flex flex-col md:flex-row gap-12 items-center">
|
||||||
|
<div class="md:w-1/2">
|
||||||
|
<h2 class="font-['Playfair_Display',serif] text-3xl md:text-4xl font-light text-stone-800 mb-4">The Art of <span class="font-bold">Craftsmanship</span></h2>
|
||||||
|
<div class="w-20 h-0.5 bg-amber-500 mb-6"></div>
|
||||||
|
<p class="text-stone-600 leading-relaxed mb-4">Each SOUTOU piece takes over 40 hours to complete, from initial sketch to final polish. Our master artisans combine centuries-old techniques with modern innovation.</p>
|
||||||
|
<p class="text-stone-600 leading-relaxed">We believe that true beauty lies in the details — the way light dances on a carefully cut gemstone, the perfect weight of a gold chain, the smoothness of a perfectly polished surface.</p>
|
||||||
|
<div class="flex gap-4 mt-6">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-3xl font-bold text-amber-700">40+</div>
|
||||||
|
<div class="text-xs text-stone-500">Hours per piece</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-3xl font-bold text-amber-700">15+</div>
|
||||||
|
<div class="text-xs text-stone-500">Master Artisans</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-3xl font-bold text-amber-700">35+</div>
|
||||||
|
<div class="text-xs text-stone-500">Years of legacy</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2">
|
||||||
|
<img src="/story.jpg" class="rounded-2xl shadow-2xl w-full">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="bg-[#a67c52] text-white py-12 px-6 text-center">
|
||||||
|
<p>© 2025 SOUTOU — Timeless Radiance</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,253 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>SOUTOU | Collections — Timeless Treasures</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<style>
|
||||||
|
@keyframes fadeInScale { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
|
||||||
|
@keyframes floatSoft { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
|
||||||
|
@keyframes slideInLeft { 0% { opacity: 0; transform: translateX(-40px); } 100% { opacity: 1; transform: translateX(0); } }
|
||||||
|
@keyframes slideInRight { 0% { opacity: 0; transform: translateX(40px); } 100% { opacity: 1; transform: translateX(0); } }
|
||||||
|
.animate-fade-scale { animation: fadeInScale 0.8s ease-out forwards; }
|
||||||
|
.animate-float { animation: floatSoft 5s ease-in-out infinite; }
|
||||||
|
.category-card { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
|
||||||
|
.category-card:hover { transform: translateY(-8px); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#f5e6d8] overflow-x-hidden">
|
||||||
|
|
||||||
|
<nav class="fixed w-full z-50 backdrop-blur-md bg-[#f5e6d8]/95 shadow-sm">
|
||||||
|
<div class="max-w-7xl mx-auto px-5 md:px-8 py-4 flex justify-between items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i class="fas fa-gem text-xl text-[#b8926c]"></i>
|
||||||
|
<span class="text-xl font-semibold tracking-wide font-['Playfair_Display',serif] text-[#2c2418]">SOUTOU</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex space-x-8 text-[#4a3a2a] font-medium">
|
||||||
|
<a href="/src/home.html" class="hover:text-amber-800 transition">Home</a>
|
||||||
|
<a href="/src/collections.html" class="text-amber-800 border-b-2 border-amber-600 pb-1">Collections</a>
|
||||||
|
<a href="/src/about.html" class="hover:text-amber-800 transition">About Us</a>
|
||||||
|
<a href="/src/contact.html" class="hover:text-amber-800 transition">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<i class="far fa-heart text-xl cursor-pointer hover:text-amber-700 transition text-[#4a3a2a]"></i>
|
||||||
|
<i class="far fa-user text-xl cursor-pointer hover:text-amber-700 transition text-[#4a3a2a]"></i>
|
||||||
|
<i class="fas fa-shopping-bag text-xl cursor-pointer hover:text-amber-700 transition text-[#4a3a2a]"></i>
|
||||||
|
<button id="mobileMenuBtn" class="md:hidden text-2xl focus:outline-none text-[#4a3a2a]">☰</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="mobileMenu" class="md:hidden hidden bg-white/95 backdrop-blur-lg border-t border-amber-100 py-4 px-6 flex flex-col gap-3 text-[#3e2c24] font-medium shadow-lg">
|
||||||
|
<a href="/src/home.html" class="py-2 border-b border-amber-50">Home</a>
|
||||||
|
<a href="/src/collections.html" class="py-2 border-b border-amber-50">Collections</a>
|
||||||
|
<a href="/src/about.html" class="py-2 border-b border-amber-50">About Us</a>
|
||||||
|
<a href="/src/contact.html" class="py-2">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="pt-32 pb-20 px-5 bg-gradient-to-br from-[#f5e6d8] via-[#efe0d2] to-[#f5e6d8]">
|
||||||
|
<div class="max-w-7xl mx-auto text-center">
|
||||||
|
<span class="text-amber-700 tracking-[0.2em] text-sm uppercase font-semibold">Discover By Category</span>
|
||||||
|
<h1 class="font-['Playfair_Display',serif] text-5xl md:text-7xl font-light text-stone-800 mb-4 animate-fade-scale">Shop by Collection</h1>
|
||||||
|
<div class="w-24 h-0.5 bg-amber-500 mx-auto mb-6 rounded-full"></div>
|
||||||
|
<p class="text-stone-600 max-w-2xl mx-auto text-lg">Find the perfect piece that speaks to your soul, curated by category.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Category: NECKLACES - Split Layout Left -->
|
||||||
|
<section class="py-20 md:py-28 overflow-hidden bg-gradient-to-r from-[#f5e6d8] to-[#efe0d2]">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 md:px-8">
|
||||||
|
<div class="flex flex-col md:flex-row items-stretch gap-0 group">
|
||||||
|
<div class="md:w-1/2 relative group/image" style="animation: slideInLeft 0.8s ease-out forwards;">
|
||||||
|
<div class="relative w-full max-w-md mx-auto md:mr-auto md:ml-0">
|
||||||
|
<div class="relative overflow-hidden rounded-tr-[80px] rounded-bl-[80px] rounded-tl-2xl rounded-br-2xl shadow-2xl transition-all duration-500 group-hover/image:shadow-2xl group-hover/image:shadow-amber-900/30 group-hover/image:scale-[1.02]">
|
||||||
|
<img src="/necklace3.jpg" alt="Necklaces Collection" class="w-full h-auto object-cover aspect-[4/5] transition-all duration-700 ease-out group-hover/image:scale-110">
|
||||||
|
</div>
|
||||||
|
<div class="absolute -top-4 -left-4 w-20 h-20 border-t-2 border-l-2 border-amber-300/50 rounded-tl-2xl pointer-events-none transition-all duration-300 group-hover/image:border-amber-500/70 group-hover/image:w-24 group-hover/image:h-24"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 flex items-center justify-start pl-0 md:pl-12 lg:pl-16">
|
||||||
|
<div class="max-w-md py-8 md:py-12" style="animation: slideInRight 0.8s ease-out 0.2s forwards; opacity: 0;">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<i class="fas fa-gem text-2xl text-amber-600"></i>
|
||||||
|
<span class="text-amber-700 tracking-[0.2em] text-xs uppercase font-semibold">Elegance Defined</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="font-['Playfair_Display',serif] text-4xl md:text-5xl font-light text-stone-800 leading-tight mb-5">Necklaces <span class="font-bold text-amber-800/90">& Pendants</span></h2>
|
||||||
|
<p class="text-stone-600 text-base md:text-lg leading-relaxed font-light mb-6">Each necklace drapes like a whispered secret, cradling the light as if it were morning dew. From delicate chains to statement pieces, find your perfect layer of elegance.</p>
|
||||||
|
<div class="flex flex-wrap gap-3 mb-6">
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">18k Gold</span>
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Diamond</span>
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Pearl</span>
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Custom</span>
|
||||||
|
</div>
|
||||||
|
<a href="/src/necklaces.html" class="inline-flex items-center gap-2 bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-full font-semibold transition-all duration-300 hover:gap-3 hover:scale-105 shadow-md">
|
||||||
|
Explore Necklaces <i class="fas fa-arrow-right text-sm"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Category: RINGS - Split Layout Right (reversed) -->
|
||||||
|
<section class="py-20 md:py-28 overflow-hidden bg-gradient-to-l from-[#f5e6d8] to-[#efe0d2]">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 md:px-8">
|
||||||
|
<div class="flex flex-col md:flex-row-reverse items-stretch gap-0 group">
|
||||||
|
<div class="md:w-1/2 relative group/image" style="animation: slideInRight 0.8s ease-out forwards;">
|
||||||
|
<div class="relative w-full max-w-md mx-auto md:ml-auto md:mr-0">
|
||||||
|
<div class="relative overflow-hidden rounded-tl-[80px] rounded-br-[80px] rounded-tr-2xl rounded-bl-2xl shadow-2xl transition-all duration-500 group-hover/image:shadow-2xl group-hover/image:shadow-amber-900/30 group-hover/image:scale-[1.02]">
|
||||||
|
<img src="/ring3.jpg" alt="Rings Collection" class="w-full h-auto object-cover aspect-[4/5] transition-all duration-700 ease-out group-hover/image:scale-110">
|
||||||
|
</div>
|
||||||
|
<div class="absolute -top-4 -right-4 w-20 h-20 border-t-2 border-r-2 border-amber-300/50 rounded-tr-2xl pointer-events-none transition-all duration-300 group-hover/image:border-amber-500/70 group-hover/image:w-24 group-hover/image:h-24"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 flex items-center justify-end pr-0 md:pr-12 lg:pr-16">
|
||||||
|
<div class="max-w-md py-8 md:py-12 text-right" style="animation: slideInLeft 0.8s ease-out 0.2s forwards; opacity: 0;">
|
||||||
|
<div class="flex items-center gap-2 mb-4 justify-end">
|
||||||
|
<span class="text-amber-700 tracking-[0.2em] text-xs uppercase font-semibold">Symbol of Forever</span>
|
||||||
|
<i class="fas fa-ring text-2xl text-amber-600"></i>
|
||||||
|
</div>
|
||||||
|
<h2 class="font-['Playfair_Display',serif] text-4xl md:text-5xl font-light text-stone-800 leading-tight mb-5">Rings <span class="font-bold text-amber-800/90">& Bands</span></h2>
|
||||||
|
<p class="text-stone-600 text-base md:text-lg leading-relaxed font-light mb-6">Each ring cradles your story — from engagement brilliance to everyday elegance. Our master artisans shape precious metals into organic forms that feel like a second skin.</p>
|
||||||
|
<div class="flex flex-wrap gap-3 mb-6 justify-end">
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Platinum</span>
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Sapphire</span>
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Emerald</span>
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Rose Gold</span>
|
||||||
|
</div>
|
||||||
|
<a href="/src/rings.html" class="inline-flex items-center gap-2 bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-full font-semibold transition-all duration-300 hover:gap-3 hover:scale-105 shadow-md">
|
||||||
|
Explore Rings <i class="fas fa-arrow-right text-sm"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Category: EARRINGS - Split Layout Left -->
|
||||||
|
<section class="py-20 md:py-28 overflow-hidden bg-gradient-to-r from-[#f5e6d8] to-[#efe0d2]">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 md:px-8">
|
||||||
|
<div class="flex flex-col md:flex-row items-stretch gap-0 group">
|
||||||
|
<div class="md:w-1/2 relative group/image" style="animation: slideInLeft 0.8s ease-out forwards;">
|
||||||
|
<div class="relative w-full max-w-md mx-auto md:mr-auto md:ml-0">
|
||||||
|
<div class="relative overflow-hidden rounded-br-[80px] rounded-tl-[80px] rounded-tr-2xl rounded-bl-2xl shadow-2xl transition-all duration-500 group-hover/image:shadow-2xl group-hover/image:shadow-amber-900/30 group-hover/image:scale-[1.02]">
|
||||||
|
<img src="/earring2.jpg" alt="Earrings Collection" class="w-full h-auto object-cover aspect-[4/5] transition-all duration-700 ease-out group-hover/image:scale-110">
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -left-4 w-20 h-20 border-b-2 border-l-2 border-amber-300/50 rounded-bl-2xl pointer-events-none transition-all duration-300 group-hover/image:border-amber-500/70 group-hover/image:w-24 group-hover/image:h-24"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 flex items-center justify-start pl-0 md:pl-12 lg:pl-16">
|
||||||
|
<div class="max-w-md py-8 md:py-12" style="animation: slideInRight 0.8s ease-out 0.2s forwards; opacity: 0;">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<i class="fas fa-star-of-life text-2xl text-amber-600"></i>
|
||||||
|
<span class="text-amber-700 tracking-[0.2em] text-xs uppercase font-semibold">Framing Beauty</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="font-['Playfair_Display',serif] text-4xl md:text-5xl font-light text-stone-800 leading-tight mb-5">Earrings <span class="font-bold text-amber-800/90">& Drops</span></h2>
|
||||||
|
<p class="text-stone-600 text-base md:text-lg leading-relaxed font-light mb-6">From delicate studs to cascading chandeliers, our earrings frame your face with light and elegance. Each pair is designed to catch every glance and spark conversation.</p>
|
||||||
|
<div class="flex flex-wrap gap-3 mb-6">
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Diamond</span>
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Pearl</span>
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Hoops</span>
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Studs</span>
|
||||||
|
</div>
|
||||||
|
<a href="/src/earrings.html" class="inline-flex items-center gap-2 bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-full font-semibold transition-all duration-300 hover:gap-3 hover:scale-105 shadow-md">
|
||||||
|
Explore Earrings <i class="fas fa-arrow-right text-sm"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Category: BRACELETS - Split Layout Right (reversed) -->
|
||||||
|
<section class="py-20 md:py-28 overflow-hidden bg-gradient-to-l from-[#f5e6d8] to-[#efe0d2]">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 md:px-8">
|
||||||
|
<div class="flex flex-col md:flex-row-reverse items-stretch gap-0 group">
|
||||||
|
<div class="md:w-1/2 relative group/image" style="animation: slideInRight 0.8s ease-out forwards;">
|
||||||
|
<div class="relative w-full max-w-md mx-auto md:ml-auto md:mr-0">
|
||||||
|
<div class="relative overflow-hidden rounded-tl-[80px] rounded-br-[80px] rounded-tr-2xl rounded-bl-2xl shadow-2xl transition-all duration-500 group-hover/image:shadow-2xl group-hover/image:shadow-amber-900/30 group-hover/image:scale-[1.02]">
|
||||||
|
<img src="/bracelet1.webp" alt="Bracelets Collection" class="w-full h-auto object-cover aspect-[4/5] transition-all duration-700 ease-out group-hover/image:scale-110">
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 w-20 h-20 border-b-2 border-r-2 border-amber-300/50 rounded-br-2xl pointer-events-none transition-all duration-300 group-hover/image:border-amber-500/70 group-hover/image:w-24 group-hover/image:h-24"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 flex items-center justify-end pr-0 md:pr-12 lg:pr-16">
|
||||||
|
<div class="max-w-md py-8 md:py-12 text-right" style="animation: slideInLeft 0.8s ease-out 0.2s forwards; opacity: 0;">
|
||||||
|
<div class="flex items-center gap-2 mb-4 justify-end">
|
||||||
|
<span class="text-amber-700 tracking-[0.2em] text-xs uppercase font-semibold">Wrist Poetry</span>
|
||||||
|
<i class="fas fa-hand-peace text-2xl text-amber-600"></i>
|
||||||
|
</div>
|
||||||
|
<h2 class="font-['Playfair_Display',serif] text-4xl md:text-5xl font-light text-stone-800 leading-tight mb-5">Bracelets <span class="font-bold text-amber-800/90">& Bangles</span></h2>
|
||||||
|
<p class="text-stone-600 text-base md:text-lg leading-relaxed font-light mb-6">Adorn your wrist with timeless elegance. From delicate chains to bold cuffs, each bracelet is crafted to move with you — catching light with every gesture.</p>
|
||||||
|
<div class="flex flex-wrap gap-3 mb-6 justify-end">
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Gold</span>
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Silver</span>
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Tennis</span>
|
||||||
|
<span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-semibold">Charm</span>
|
||||||
|
</div>
|
||||||
|
<a href="/src/bracelets.html" class="inline-flex items-center gap-2 bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-full font-semibold transition-all duration-300 hover:gap-3 hover:scale-105 shadow-md">
|
||||||
|
Explore Bracelets <i class="fas fa-arrow-right text-sm"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<section id="contact" class="py-20 px-6 bg-[#a67c52] text-white relative overflow-hidden shadow-inner">
|
||||||
|
<div class="absolute top-0 right-0 w-80 h-80 bg-amber-100/50 rounded-full blur-3xl"></div>
|
||||||
|
<div class="absolute bottom-0 left-0 w-80 h-80 bg-amber-50/60 rounded-full blur-3xl"></div>
|
||||||
|
<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center relative z-10">
|
||||||
|
<div><h2 class="text-4xl font-bold font-['Playfair_Display',serif] text-white">Let Light Find You</h2><div class="w-20 h-0.5 bg-amber-500 my-5"></div><p class="text-white">Subscribe for exclusive previews, private sale access, and stories from the atelier.</p><div class="flex gap-5 mt-8"><i class="fab fa-instagram text-2xl text-stone-600 hover:text-amber-600 cursor-pointer transition"></i><i class="fab fa-pinterest text-2xl text-stone-600 hover:text-amber-600 cursor-pointer transition"></i><i class="fab fa-facebook-f text-2xl text-stone-600 hover:text-amber-600 cursor-pointer transition"></i></div></div>
|
||||||
|
<div class="bg-amber-50/80 backdrop-blur-sm rounded-2xl p-6 md:p-8 shadow-lg border border-amber-100"><h3 class="text-2xl font-['Playfair_Display',serif] text-stone-800 mb-4">Receive the Radiance</h3><form id="newsletterForm" class="space-y-4"><input type="email" placeholder="Email address" id="subEmail" required class="w-full px-5 py-3 rounded-full bg-white border border-amber-200 text-stone-800 focus:ring-2 focus:ring-amber-400 focus:outline-none placeholder:text-stone-400"><button type="submit" class="w-full bg-gradient-to-r from-amber-600 to-amber-500 rounded-full py-3 font-semibold text-white transition hover:scale-[1.02] shadow-md">Subscribe →</button><p id="formMsg" class="text-sm text-amber-700 text-center mt-2 hidden"></p></form></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="bg-[#a67c52] text-white py-12 px-6 border-t border-stone-200 text-center">© 2025 SOUTOU — Timeless Radiance</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Mobile menu toggle
|
||||||
|
const mobileBtn = document.getElementById('mobileMenuBtn');
|
||||||
|
const mobileMenu = document.getElementById('mobileMenu');
|
||||||
|
if(mobileBtn && mobileMenu) {
|
||||||
|
mobileBtn.addEventListener('click', () => mobileMenu.classList.toggle('hidden'));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navbar scroll effect
|
||||||
|
const navbar = document.getElementById('navbar');
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if(window.scrollY > 50) {
|
||||||
|
navbar?.classList.add('shadow-md');
|
||||||
|
} else {
|
||||||
|
navbar?.classList.remove('shadow-md');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const newsletterForm = document.getElementById('newsletterForm');
|
||||||
|
const msgBox = document.getElementById('formMsg');
|
||||||
|
if(newsletterForm) newsletterForm.addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const emailInput = document.getElementById('subEmail');
|
||||||
|
if(emailInput.value.trim() && emailInput.value.includes('@')) {
|
||||||
|
msgBox.classList.remove('hidden');
|
||||||
|
msgBox.innerText = '✨ Thank you! A radiant welcome awaits your inbox. ✨';
|
||||||
|
emailInput.value = '';
|
||||||
|
setTimeout(() => msgBox.classList.add('hidden'), 4000);
|
||||||
|
} else {
|
||||||
|
msgBox.classList.remove('hidden');
|
||||||
|
msgBox.innerText = 'Please enter a valid email address.';
|
||||||
|
setTimeout(() => msgBox.classList.add('hidden'), 3000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,184 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>SOUTOU | Contact — Let's Connect</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<style>
|
||||||
|
@keyframes fadeInScale { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
|
||||||
|
@keyframes floatSoft { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
|
||||||
|
.animate-fade-scale { animation: fadeInScale 0.8s ease-out forwards; }
|
||||||
|
.animate-float { animation: floatSoft 5s ease-in-out infinite; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#f5e6d8]">
|
||||||
|
|
||||||
|
<nav class="fixed w-full z-50 backdrop-blur-md bg-[#f5e6d8]/95 shadow-sm">
|
||||||
|
<div class="max-w-7xl mx-auto px-5 md:px-8 py-4 flex justify-between items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i class="fas fa-gem text-xl text-[#b8926c]"></i>
|
||||||
|
<span class="text-xl font-semibold tracking-wide font-['Playfair_Display',serif] text-[#2c2418]">SOUTOU</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex space-x-8 text-[#4a3a2a] font-medium">
|
||||||
|
<a href="/src/home.html" class="hover:text-amber-800 transition">Home</a>
|
||||||
|
<a href="/src/collections.html" class="hover:text-amber-800 transition">Collections</a>
|
||||||
|
<a href="/src/about.html" class="hover:text-amber-800 transition">About Us</a>
|
||||||
|
<a href="/src/contact.html" class="text-amber-800 border-b-2 border-amber-600 pb-1">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<i class="far fa-heart text-xl cursor-pointer hover:text-amber-700 transition"></i>
|
||||||
|
<i class="far fa-user text-xl cursor-pointer hover:text-amber-700 transition"></i>
|
||||||
|
<i class="fas fa-shopping-bag text-xl cursor-pointer hover:text-amber-700 transition"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- hero -->
|
||||||
|
<section class="pt-32 pb-20 px-5">
|
||||||
|
<div class="max-w-7xl mx-auto text-center">
|
||||||
|
<h1 class="font-['Playfair_Display',serif] text-5xl md:text-7xl font-light text-stone-800 mb-4 animate-fade-scale">Let's Connect</h1>
|
||||||
|
<div class="w-24 h-0.5 bg-amber-500 mx-auto mb-6"></div>
|
||||||
|
<p class="text-stone-600 max-w-2xl mx-auto text-lg">We'd love to hear from you. Whether you have a question about our collections or need assistance with an order.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- contact content -->
|
||||||
|
<section class="py-10 px-5">
|
||||||
|
<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12">
|
||||||
|
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 class="font-['Playfair_Display',serif] text-3xl text-stone-800 mb-6">Visit Our Atelier</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex gap-4 items-start">
|
||||||
|
<i class="fas fa-map-marker-alt text-2xl text-amber-600 mt-1"></i>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold text-stone-800">Address</h3>
|
||||||
|
<p class="text-stone-600">123 Rue de la Paix<br>75002 Paris, France</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-4 items-start">
|
||||||
|
<i class="fas fa-phone text-2xl text-amber-600 mt-1"></i>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold text-stone-800">Phone</h3>
|
||||||
|
<p class="text-stone-600">+33 (0)1 23 45 67 89</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-4 items-start">
|
||||||
|
<i class="fas fa-envelope text-2xl text-amber-600 mt-1"></i>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold text-stone-800">Email</h3>
|
||||||
|
<p class="text-stone-600">hello@soutou.com<br>concierge@soutou.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-4 items-start">
|
||||||
|
<i class="fas fa-clock text-2xl text-amber-600 mt-1"></i>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold text-stone-800">Hours</h3>
|
||||||
|
<p class="text-stone-600">Monday - Friday: 10am - 7pm<br>Saturday: 11am - 6pm<br>Sunday: Closed</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="mt-10">
|
||||||
|
<h3 class="font-semibold text-stone-800 mb-4">Follow Our Journey</h3>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<a href="#" class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center hover:bg-amber-200 transition">
|
||||||
|
<i class="fab fa-instagram text-xl text-amber-700"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center hover:bg-amber-200 transition">
|
||||||
|
<i class="fab fa-pinterest text-xl text-amber-700"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center hover:bg-amber-200 transition">
|
||||||
|
<i class="fab fa-facebook-f text-xl text-amber-700"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center hover:bg-amber-200 transition">
|
||||||
|
<i class="fab fa-youtube text-xl text-amber-700"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- contact form -->
|
||||||
|
<div class="bg-white rounded-2xl shadow-xl p-8">
|
||||||
|
<h2 class="font-['Playfair_Display',serif] text-2xl text-stone-800 mb-6">Send Us a Message</h2>
|
||||||
|
<form id="contactForm" class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-stone-700 text-sm mb-2">Name *</label>
|
||||||
|
<input type="text" id="contactName" required class="w-full px-4 py-2 border border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-400 focus:outline-none">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-stone-700 text-sm mb-2">Email *</label>
|
||||||
|
<input type="email" id="contactEmail" required class="w-full px-4 py-2 border border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-400 focus:outline-none">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-stone-700 text-sm mb-2">Subject</label>
|
||||||
|
<input type="text" id="contactSubject" class="w-full px-4 py-2 border border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-400 focus:outline-none">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-stone-700 text-sm mb-2">Message *</label>
|
||||||
|
<textarea id="contactMessage" rows="5" required class="w-full px-4 py-2 border border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-400 focus:outline-none"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="w-full bg-gradient-to-r from-amber-600 to-amber-500 text-white py-3 rounded-full font-semibold hover:scale-[1.02] transition shadow-md">
|
||||||
|
Send Message <i class="fas fa-paper-plane ml-2"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<p id="contactMsg" class="text-sm text-center mt-3 hidden"></p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="py-10 px-5">
|
||||||
|
<div class="max-w-6xl mx-auto">
|
||||||
|
<div class="rounded-2xl overflow-hidden shadow-xl h-96 bg-stone-300 flex items-center justify-center">
|
||||||
|
<p class="text-stone-500"><i class="fas fa-map"></i> Interactive Map Would Load Here</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="bg-[#a67c52] text-white py-12 px-6 text-center mt-10">
|
||||||
|
<p>© 2025 SOUTOU — Timeless Radiance</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const contactForm = document.getElementById('contactForm');
|
||||||
|
const contactMsg = document.getElementById('contactMsg');
|
||||||
|
|
||||||
|
if(contactForm) {
|
||||||
|
contactForm.addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const name = document.getElementById('contactName').value;
|
||||||
|
if(name && document.getElementById('contactEmail').value && document.getElementById('contactMessage').value) {
|
||||||
|
contactMsg.classList.remove('hidden');
|
||||||
|
contactMsg.classList.add('text-green-600');
|
||||||
|
contactMsg.innerText = '✨ Thank you ' + name + '! We\'ll reply within 24 hours. ✨';
|
||||||
|
contactForm.reset();
|
||||||
|
setTimeout(() => contactMsg.classList.add('hidden'), 5000);
|
||||||
|
} else {
|
||||||
|
contactMsg.classList.remove('hidden');
|
||||||
|
contactMsg.classList.add('text-red-600');
|
||||||
|
contactMsg.innerText = 'Please fill in all required fields.';
|
||||||
|
setTimeout(() => contactMsg.classList.add('hidden'), 3000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,427 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||||
|
<title>SOUTOU | Elegant Jewelry — Girl's Favorite</title>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
|
||||||
|
<base target="_blank">
|
||||||
|
</head>
|
||||||
|
<body class="antialiased overflow-x-hidden bg-[#f5e6d8] font-['Inter',sans-serif] scroll-smooth">
|
||||||
|
|
||||||
|
|
||||||
|
<nav id="navbar" class="fixed w-full z-50 transition-all duration-300 backdrop-blur-md bg-[#f5e6d8]/95 shadow-sm">
|
||||||
|
<div class="max-w-7xl mx-auto px-5 md:px-8 py-4 flex justify-between items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i class="fas fa-gem text-xl text-[#b8926c]"></i>
|
||||||
|
<span class="text-xl font-semibold tracking-wide font-['Playfair_Display',serif] text-[#2c2418]">SOUTOU</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex space-x-8 text-[#4a3a2a] font-medium">
|
||||||
|
<a href="/src/home.html" class="text-amber-800 border-b-2 border-amber-600 pb-1">Home</a>
|
||||||
|
<a href="/src/collections.html" class="hover:text-amber-800 transition">Collections</a>
|
||||||
|
<a href="/src/about.html" class="hover:text-amber-800 transition">About Us</a>
|
||||||
|
<a href="/src/contact.html" class="hover:text-amber-800 transition">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<i class="far fa-heart text-xl cursor-pointer hover:text-amber-700 transition text-[#4a3a2a]"></i>
|
||||||
|
<i class="far fa-user text-xl cursor-pointer hover:text-amber-700 transition text-[#4a3a2a]"></i>
|
||||||
|
<i class="fas fa-shopping-bag text-xl cursor-pointer hover:text-amber-700 transition text-[#4a3a2a]"></i>
|
||||||
|
<button id="mobileMenuBtn" class="md:hidden text-2xl focus:outline-none text-[#4a3a2a]">☰</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="mobileMenu" class="md:hidden hidden bg-white/95 backdrop-blur-lg border-t border-amber-100 py-4 px-6 flex flex-col gap-3 text-[#3e2c24] font-medium shadow-lg">
|
||||||
|
<a href="/src/home.html" class="py-2 border-b border-amber-50">Home</a>
|
||||||
|
<a href="/src/collections.html" class="py-2 border-b border-amber-50">Collections</a>
|
||||||
|
<a href="/src/about.html" class="py-2 border-b border-amber-50">About Us</a>
|
||||||
|
<a href="/src/contact.html" class="py-2">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- hero section -->
|
||||||
|
<section class="relative bg-[#f5e6d8]">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 min-h-screen">
|
||||||
|
<!-- left side -->
|
||||||
|
<div class="relative overflow-hidden min-h-[50vh] md:min-h-screen">
|
||||||
|
<div class="relative w-full h-full" id="heroCarousel">
|
||||||
|
<img src="/hero1.webp" alt="Hero model 1" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-700 ease-in-out opacity-100" data-carousel="0">
|
||||||
|
<img src="/hero5.jpg" alt="Hero model 2" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-700 ease-in-out opacity-0" data-carousel="1">
|
||||||
|
<img src="/hero4.jpg" alt="Hero model 3" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-700 ease-in-out opacity-0" data-carousel="2">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- right side -->
|
||||||
|
<div class="bg-[#a67c52] flex items-center justify-center p-8 md:p-12 min-h-[50vh] md:min-h-screen">
|
||||||
|
<div class="w-full max-w-md transition-all duration-500 hover:scale-[1.02]">
|
||||||
|
<div class="w-full rounded-2xl overflow-hidden shadow-2xl">
|
||||||
|
<img src="/hero2.jpg" alt="Model wearing Soutou jewelry" class="w-full h-auto block object-cover aspect-square">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="absolute inset-0 flex flex-col justify-center items-center text-center z-10 pointer-events-none">
|
||||||
|
<div style="animation: fadeInScale 0.8s ease-out forwards;">
|
||||||
|
<h1 class="font-['Playfair_Display',serif] text-4xl md:text-6xl lg:text-7xl font-normal leading-tight text-white drop-shadow-lg tracking-tight">
|
||||||
|
GIRL'S<br>FAVORITE
|
||||||
|
</h1>
|
||||||
|
<a href="#shop" class="inline-block font-['Inter',sans-serif] text-xs md:text-sm tracking-[0.15em] uppercase text-white border-b border-white pb-1.5 mt-5 pointer-events-auto transition-all duration-300 hover:opacity-70 hover:tracking-[0.2em] no-underline">
|
||||||
|
SHOP NOW →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- split section -->
|
||||||
|
<section class="py-20 md:py-28 bg-gradient-to-br from-[#f5e6d8] via-[#efe0d2] to-[#f5e6d8] overflow-hidden">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 md:px-8">
|
||||||
|
|
||||||
|
<!-- first row -->
|
||||||
|
<div class="flex flex-col md:flex-row items-stretch gap-0 mb-20 md:mb-28">
|
||||||
|
<div class="md:w-1/2 flex items-center justify-end pr-0 md:pr-8 lg:pr-12">
|
||||||
|
<div class="max-w-md py-8 md:py-12" style="animation: fadeInScale 0.6s ease-out forwards;">
|
||||||
|
<div class="flex items-center gap-2 mb-4"><div class="w-10 h-px bg-amber-400"></div><span class="text-amber-700 tracking-[0.2em] text-xs uppercase font-semibold">Artistry in Motion</span></div>
|
||||||
|
<h2 class="font-['Playfair_Display',serif] text-3xl md:text-4xl lg:text-5xl font-light text-stone-800 leading-tight mb-5">Where <span class="font-bold text-amber-800/90">Every Curve</span> Tells a Story</h2>
|
||||||
|
<p class="text-stone-600 text-base md:text-lg leading-relaxed font-light mb-5">Soutou jewelry is not merely ornament—it is a language of grace. Each necklace drapes like a whispered secret, each ring cradles the light as if it were morning dew. Our master artisans spend weeks shaping precious metals into organic forms that feel like a second skin.</p>
|
||||||
|
<div class="flex justify-end pt-2">
|
||||||
|
<a href="#shop" class="inline-flex items-center gap-1 text-amber-600 hover:text-amber-800 text-xs font-semibold tracking-wider uppercase transition-all duration-300 group">
|
||||||
|
<span class="border-b border-amber-400 pb-0.5">Shop Now</span>
|
||||||
|
<i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 relative mt-8 md:mt-0 group/image">
|
||||||
|
<div class="relative w-full max-w-md mx-auto md:ml-auto md:mr-0">
|
||||||
|
<div class="relative overflow-hidden rounded-tl-[80px] rounded-br-[80px] rounded-tr-2xl rounded-bl-2xl shadow-2xl transition-all duration-500 group-hover/image:shadow-2xl group-hover/image:shadow-amber-900/30 group-hover/image:scale-[1.04]">
|
||||||
|
<img src="/martiny.jpg" alt="Elegant necklace craftsmanship" class="w-full h-auto object-cover aspect-[4/5] transition-all duration-700 ease-out group-hover/image:scale-110">
|
||||||
|
</div>
|
||||||
|
<div class="absolute -top-4 -right-4 w-16 h-16 border-t-2 border-r-2 border-amber-300/50 rounded-tr-2xl pointer-events-none transition-all duration-300 group-hover/image:border-amber-500/70 group-hover/image:w-20 group-hover/image:h-20"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- second row -->
|
||||||
|
<div class="flex flex-col md:flex-row items-stretch gap-0">
|
||||||
|
<div class="md:w-1/2 relative mb-8 md:mb-0 group/image">
|
||||||
|
<div class="relative w-full max-w-md mx-auto md:mr-auto md:ml-0">
|
||||||
|
<div class="relative overflow-hidden rounded-br-[80px] rounded-tl-[80px] rounded-tr-2xl rounded-bl-2xl shadow-2xl transition-all duration-500 group-hover/image:shadow-2xl group-hover/image:shadow-amber-900/30 group-hover/image:scale-[1.04]">
|
||||||
|
<img src="/rosee.jpg" alt="Heirloom ring detail" class="w-full h-auto object-cover aspect-[4/5] transition-all duration-700 ease-out group-hover/image:scale-110">
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -left-4 w-16 h-16 border-b-2 border-l-2 border-amber-300/50 rounded-bl-2xl pointer-events-none transition-all duration-300 group-hover/image:border-amber-500/70 group-hover/image:w-20 group-hover/image:h-20"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 flex items-center justify-start pl-0 md:pl-8 lg:pl-12">
|
||||||
|
<div class="max-w-md py-8 md:py-12" style="animation: fadeInScale 0.6s ease-out 0.2s forwards; opacity: 0;">
|
||||||
|
<div class="flex items-center gap-2 mb-4 justify-end md:justify-start"><span class="text-amber-700 tracking-[0.2em] text-xs uppercase font-semibold">Heirloom Philosophy</span><div class="w-10 h-px bg-amber-400"></div></div>
|
||||||
|
<h2 class="font-['Playfair_Display',serif] text-3xl md:text-4xl lg:text-5xl font-light text-stone-800 leading-tight mb-5 text-right md:text-left">Designed for <span class="font-bold text-amber-800/90">Generations</span> to Come</h2>
|
||||||
|
<p class="text-stone-600 text-base md:text-lg leading-relaxed font-light mb-5 text-right md:text-left">We believe true luxury is sustainable. Every Soutou creation is crafted from 100% recycled gold and ethically sourced gemstones, ensuring that beauty never comes at the cost of our planet. Our signature pieces are timeless— meant to be passed from mother to daughter, gathering stories with each wear.</p>
|
||||||
|
<div class="flex justify-start pt-2">
|
||||||
|
<a href="#shop" class="inline-flex items-center gap-1 text-amber-600 hover:text-amber-800 text-xs font-semibold tracking-wider uppercase transition-all duration-300 group">
|
||||||
|
<i class="fas fa-arrow-left text-xs transition-transform group-hover:-translate-x-1"></i>
|
||||||
|
<span class="border-b border-amber-400 pb-0.5">Shop Now</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- product section -->
|
||||||
|
<section id="shop" class="py-20 px-5 bg-[#f5e6d8]">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<span class="text-amber-700 tracking-widest text-sm uppercase font-semibold">our curated edit</span>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold font-['Playfair_Display',serif] mt-2 text-stone-800">Bestselling Treasures</h2>
|
||||||
|
<div class="w-20 h-0.5 bg-amber-400 mx-auto mt-3 rounded-full"></div>
|
||||||
|
<p class="text-stone-500 text-sm mt-3">✨ Infinite circular rotation ✨</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative overflow-hidden px-4 py-6">
|
||||||
|
<div id="productCarouselTrack" class="flex gap-6 transition-all duration-700 ease-in-out"></div>
|
||||||
|
<button id="prevProductBtn" class="absolute left-0 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full w-10 h-10 flex items-center justify-center shadow-lg transition-all duration-300 hover:scale-110 z-10">
|
||||||
|
<i class="fas fa-chevron-left text-amber-700"></i>
|
||||||
|
</button>
|
||||||
|
<button id="nextProductBtn" class="absolute right-0 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full w-10 h-10 flex items-center justify-center shadow-lg transition-all duration-300 hover:scale-110 z-10">
|
||||||
|
<i class="fas fa-chevron-right text-amber-700"></i>
|
||||||
|
</button>
|
||||||
|
<div class="flex justify-center gap-2 mt-8" id="productDots"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center mt-8">
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-amber-700 font-semibold text-sm tracking-wider uppercase border-b border-amber-400 pb-1 hover:gap-3 transition-all duration-300">See All Products <i class="fas fa-arrow-right text-xs"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="w-full bg-black">
|
||||||
|
<video class="w-full h-auto max-h-[90vh] object-cover" autoplay muted loop playsinline>
|
||||||
|
<source src="/Save Fresh DIY gift ideas that make your next project look polished and expensive for ideas worth saving right now - Pin-979744093932394243.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- featured collections -->
|
||||||
|
<section id="collections" class="py-24 px-5 bg-[#f5e6d8]">
|
||||||
|
<div class="max-w-7xl mx-auto text-center mb-16">
|
||||||
|
<span class="text-amber-700 tracking-widest text-sm uppercase font-semibold">Timeless treasures</span>
|
||||||
|
<h2 class="text-4xl md:text-5xl font-bold font-['Playfair_Display',serif] mt-2 text-stone-800">Signature Collections</h2>
|
||||||
|
<div class="w-24 h-0.5 bg-amber-500 mx-auto mt-4 rounded-full"></div>
|
||||||
|
<p class="text-stone-600 max-w-2xl mx-auto mt-5">Each piece is a masterpiece of rare gemstones and delicate craftsmanship.</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
|
||||||
|
<div class="group rounded-2xl overflow-hidden shadow-md bg-white cursor-pointer transition-all duration-500 hover:shadow-2xl hover:-translate-y-3">
|
||||||
|
<div class="h-72 overflow-hidden relative"><img src="/necklace3.jpg" alt="Necklace" class="w-full h-full object-cover transition-all duration-700 ease-out group-hover:scale-110"><div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div></div>
|
||||||
|
<div class="p-6"><div class="flex justify-between items-start"><div><h3 class="text-2xl font-bold font-['Playfair_Display',serif]">Verdian Cascade</h3><p class="text-gray-500 text-sm mt-1">Diamond Necklace</p></div><span class="text-amber-700 font-semibold text-lg">$3,850</span></div><div class="flex mt-4 gap-2"><span class="text-xs bg-amber-50 px-3 py-1 rounded-full text-amber-700">18k Gold</span><span class="text-xs bg-amber-50 px-3 py-1 rounded-full text-amber-700">Lab Grown</span></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="group rounded-2xl overflow-hidden shadow-md bg-white cursor-pointer transition-all duration-500 hover:shadow-2xl hover:-translate-y-3">
|
||||||
|
<div class="h-72 overflow-hidden relative"><img src="/earring2.jpg" alt="Earrings" class="w-full h-full object-cover transition-all duration-700 ease-out group-hover:scale-110"><div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div></div>
|
||||||
|
<div class="p-6"><div class="flex justify-between items-start"><div><h3 class="text-2xl font-bold font-['Playfair_Display',serif]">Lunaria Drops</h3><p class="text-gray-500 text-sm mt-1">Emerald & Diamond Earring</p></div><span class="text-amber-700 font-semibold text-lg">$5,290</span></div><div class="flex mt-4 gap-2"><span class="text-xs bg-amber-50 px-3 py-1 rounded-full text-amber-700">Natural Emerald</span><span class="text-xs bg-amber-50 px-3 py-1 rounded-full text-amber-700">Platinum</span></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="group rounded-2xl overflow-hidden shadow-md bg-white cursor-pointer transition-all duration-500 hover:shadow-2xl hover:-translate-y-3">
|
||||||
|
<div class="h-72 overflow-hidden relative"><img src="/ring3.jpg" alt="Ring" class="w-full h-full object-cover transition-all duration-700 ease-out group-hover:scale-110"><div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div></div>
|
||||||
|
<div class="p-6"><div class="flex justify-between items-start"><div><h3 class="text-2xl font-bold font-['Playfair_Display',serif]">Celestial Halo</h3><p class="text-gray-500 text-sm mt-1">Diamond & Moonstone Ring</p></div><span class="text-amber-700 font-semibold text-lg">$2,975</span></div><div class="flex mt-4 gap-2"><span class="text-xs bg-amber-50 px-3 py-1 rounded-full text-amber-700">Akoya Pearls</span><span class="text-xs bg-amber-50 px-3 py-1 rounded-full text-amber-700">14k Gold</span></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- story -->
|
||||||
|
<section id="about" class="py-20 bg-[#f5e6d8]">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row gap-12 items-center">
|
||||||
|
<div class="md:w-1/2 relative group">
|
||||||
|
<div class="absolute -top-10 -left-10 w-40 h-40 bg-amber-200/40 rounded-full blur-2xl" style="animation: floatSoft 5s ease-in-out infinite;"></div>
|
||||||
|
<div class="relative rounded-3xl shadow-2xl overflow-hidden border-4 border-white transition-all duration-500 group-hover:shadow-amber-900/30">
|
||||||
|
<img src="/story.jpg" alt="Jeweler at work" class="object-cover w-full h-auto transition-all duration-700 ease-out group-hover:scale-105">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 space-y-6"><span class="text-amber-700 font-semibold tracking-wider text-sm">HANDCRAFTED LEGACY</span><h2 class="text-4xl md:text-5xl font-bold font-['Playfair_Display',serif] text-stone-800">Where Passion <br>Meets Precision</h2><div class="w-20 h-0.5 bg-amber-500"></div><p class="text-stone-600 leading-relaxed">Since 1989, SOUTOU has been the sanctuary for discerning souls who seek more than decoration — but an emotional connection. Each jewel is sculpted by master artisans in our atelier, using ethically sourced stones and recycled precious metals.</p><p class="text-stone-600 leading-relaxed">We believe jewelry is silent poetry worn close to the heart. Our designs echo nature's geometry, romantic eras, and the delicate balance between strength and grace.</p><button class="bg-gradient-to-r from-amber-600 to-amber-500 px-7 py-3 rounded-full text-white font-semibold shadow-md mt-3 flex items-center gap-2 w-fit transition-all hover:scale-105">Discover our story <i class="fas fa-feather-alt"></i></button></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="py-20 px-5 bg-[#f5e6d8]">
|
||||||
|
<div class="max-w-7xl mx-auto text-center">
|
||||||
|
<i class="fas fa-quote-left text-4xl text-amber-400 mb-4"></i>
|
||||||
|
<div class="relative overflow-hidden max-w-3xl mx-auto" id="testimonialSlider">
|
||||||
|
<div class="transition-all duration-500 flex" id="testimonialTrack">
|
||||||
|
<div class="min-w-full px-4"><p class="text-xl md:text-2xl font-medium text-stone-700 italic">"SOUTOU's ring captured the exact radiance of our love story — it feels like wearing a constellation."</p><div class="mt-6"><span class="font-bold text-stone-800">— Camille & Adrien</span><div class="flex justify-center gap-1 text-amber-500 mt-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></div>
|
||||||
|
<div class="min-w-full px-4"><p class="text-xl md:text-2xl font-medium text-stone-700 italic">"Exquisite craftsmanship — the necklace feels like an heirloom from another era, yet so modern."</p><div class="mt-6"><span class="font-bold text-stone-800">— Priya K.</span><div class="flex justify-center gap-1 text-amber-500 mt-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></div>
|
||||||
|
<div class="min-w-full px-4"><p class="text-xl md:text-2xl font-medium text-stone-700 italic">"I've never seen such ethereal sapphires. A true work of art — beyond my expectations."</p><div class="mt-6"><span class="font-bold text-stone-800">— Margaret Chen</span><div class="flex justify-center gap-1 text-amber-500 mt-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></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-center gap-3 mt-8"><button id="prevTesti" class="w-10 h-10 rounded-full bg-amber-100 text-amber-700 hover:bg-amber-200 transition"><i class="fas fa-chevron-left"></i></button><button id="nextTesti" class="w-10 h-10 rounded-full bg-amber-100 text-amber-700 hover:bg-amber-200 transition"><i class="fas fa-chevron-right"></i></button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- contact -->
|
||||||
|
<section id="contact" class="py-20 px-6 bg-[#a67c52] text-white relative overflow-hidden shadow-inner">
|
||||||
|
<div class="absolute top-0 right-0 w-80 h-80 bg-amber-100/50 rounded-full blur-3xl"></div>
|
||||||
|
<div class="absolute bottom-0 left-0 w-80 h-80 bg-amber-50/60 rounded-full blur-3xl"></div>
|
||||||
|
<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center relative z-10">
|
||||||
|
<div><h2 class="text-4xl font-bold font-['Playfair_Display',serif] text-white">Let Light Find You</h2><div class="w-20 h-0.5 bg-amber-500 my-5"></div><p class="text-white">Subscribe for exclusive previews, private sale access, and stories from the atelier.</p><div class="flex gap-5 mt-8"><i class="fab fa-instagram text-2xl text-stone-600 hover:text-amber-600 cursor-pointer transition"></i><i class="fab fa-pinterest text-2xl text-stone-600 hover:text-amber-600 cursor-pointer transition"></i><i class="fab fa-facebook-f text-2xl text-stone-600 hover:text-amber-600 cursor-pointer transition"></i></div></div>
|
||||||
|
<div class="bg-amber-50/80 backdrop-blur-sm rounded-2xl p-6 md:p-8 shadow-lg border border-amber-100"><h3 class="text-2xl font-['Playfair_Display',serif] text-stone-800 mb-4">Receive the Radiance</h3><form id="newsletterForm" class="space-y-4"><input type="email" placeholder="Email address" id="subEmail" required class="w-full px-5 py-3 rounded-full bg-white border border-amber-200 text-stone-800 focus:ring-2 focus:ring-amber-400 focus:outline-none placeholder:text-stone-400"><button type="submit" class="w-full bg-gradient-to-r from-amber-600 to-amber-500 rounded-full py-3 font-semibold text-white transition hover:scale-[1.02] shadow-md">Subscribe →</button><p id="formMsg" class="text-sm text-amber-700 text-center mt-2 hidden"></p></form></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="bg-[#a67c52] text-white py-12 px-6 border-t border-stone-200 text-center">© 2025 SOUTOU — Timeless Radiance</footer>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@keyframes fadeInScale { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
|
||||||
|
@keyframes floatSoft { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// mobile menu
|
||||||
|
const mobileBtn = document.getElementById('mobileMenuBtn');
|
||||||
|
const mobileMenu = document.getElementById('mobileMenu');
|
||||||
|
if(mobileBtn && mobileMenu) mobileBtn.addEventListener('click', () => mobileMenu.classList.toggle('hidden'));
|
||||||
|
|
||||||
|
// navbar scroll
|
||||||
|
const navbar = document.getElementById('navbar');
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if(window.scrollY > 50) {
|
||||||
|
navbar.classList.add('shadow-md');
|
||||||
|
navbar.style.backgroundColor = 'rgba(245, 230, 216, 0.98)';
|
||||||
|
} else {
|
||||||
|
navbar.classList.remove('shadow-md');
|
||||||
|
navbar.style.backgroundColor = 'rgba(245, 230, 216, 0.95)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// hero carousel - SLIGHTLY FASTER (4 seconds interval, 700ms transition)
|
||||||
|
const heroImages = document.querySelectorAll('#heroCarousel img');
|
||||||
|
let activeIndexHero = 0;
|
||||||
|
if(heroImages.length) setInterval(() => {
|
||||||
|
heroImages[activeIndexHero].classList.add('opacity-0');
|
||||||
|
heroImages[activeIndexHero].classList.remove('opacity-100');
|
||||||
|
activeIndexHero = (activeIndexHero + 1) % heroImages.length;
|
||||||
|
heroImages[activeIndexHero].classList.remove('opacity-0');
|
||||||
|
heroImages[activeIndexHero].classList.add('opacity-100');
|
||||||
|
}, 4000); // Changed from 5000 to 4000 (4 seconds)
|
||||||
|
|
||||||
|
const products = [
|
||||||
|
{ img: "/necklace2.webp", name: "Golden Orbit", type: "Necklace", price: "$245", oldPrice: "$320", badge: "New" },
|
||||||
|
{ img: "/earring1.avif", name: "Lunar Pearl", type: "Earrings", price: "$189", oldPrice: null, badge: "Best Seller" },
|
||||||
|
{ img: "/ring1.jpg", name: "Rose Petal", type: "Bracelet", price: "$159", oldPrice: null, badge: null },
|
||||||
|
{ img: "/bracelet1.webp", name: "Stardust", type: "Ring", price: "$299", oldPrice: null, badge: "Limited" },
|
||||||
|
{ img: "/ring2.webp", name: "Sunset Glow", type: "Pendant", price: "$275", oldPrice: null, badge: null },
|
||||||
|
{ img: "/bracelet2.jpg", name: "Midnight Pearl", type: "Necklace", price: "$345", oldPrice: "$420", badge: "Exclusive" }
|
||||||
|
];
|
||||||
|
|
||||||
|
let currentIndex = 0;
|
||||||
|
const track = document.getElementById('productCarouselTrack');
|
||||||
|
const dotsContainer = document.getElementById('productDots');
|
||||||
|
const prevBtn = document.getElementById('prevProductBtn');
|
||||||
|
const nextBtn = document.getElementById('nextProductBtn');
|
||||||
|
|
||||||
|
function createProductCard(product) {
|
||||||
|
return `
|
||||||
|
<div class="group w-[200px] sm:w-[220px] md:w-[230px] flex-shrink-0 bg-white rounded-xl overflow-hidden shadow-md transition-all duration-400 hover:shadow-2xl hover:-translate-y-3">
|
||||||
|
<div class="relative overflow-hidden h-52 bg-[#e8d9cc]">
|
||||||
|
<img src="${product.img}" alt="${product.name}" class="w-full h-full object-cover transition-all duration-700 ease-out group-hover:scale-110">
|
||||||
|
${product.badge ? `<div class="absolute top-2 right-2 bg-amber-100/90 backdrop-blur-sm rounded-full px-2 py-0.5 text-[10px] font-semibold text-amber-800">${product.badge}</div>` : ''}
|
||||||
|
</div>
|
||||||
|
<div class="p-3 text-center">
|
||||||
|
<h3 class="font-['Playfair_Display',serif] font-semibold text-stone-800 text-sm">${product.name}</h3>
|
||||||
|
<p class="text-stone-500 text-xs mt-0.5">${product.type}</p>
|
||||||
|
<div class="flex justify-center items-center gap-2 mt-1">
|
||||||
|
<span class="text-amber-700 font-bold text-sm">${product.price}</span>
|
||||||
|
${product.oldPrice ? `<span class="text-stone-400 text-xs line-through">${product.oldPrice}</span>` : ''}
|
||||||
|
</div>
|
||||||
|
<button class="mt-2 w-full py-1.5 rounded-full border border-amber-300 text-amber-700 text-xs font-semibold hover:bg-amber-100 transition">Quick Shop</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderCarousel() {
|
||||||
|
if (!track) return;
|
||||||
|
const allProducts = [...products, ...products, ...products];
|
||||||
|
track.innerHTML = allProducts.map(p => createProductCard(p)).join('');
|
||||||
|
const cardWidth = document.querySelector('.group')?.offsetWidth || 230;
|
||||||
|
const gap = 24;
|
||||||
|
const offset = products.length * (cardWidth + gap);
|
||||||
|
track.style.transform = `translateX(-${offset}px)`;
|
||||||
|
currentIndex = products.length;
|
||||||
|
updateDots();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateDots() {
|
||||||
|
if (!dotsContainer) return;
|
||||||
|
const activeDot = ((currentIndex % products.length) + products.length) % products.length;
|
||||||
|
dotsContainer.innerHTML = '';
|
||||||
|
for (let i = 0; i < products.length; i++) {
|
||||||
|
const dot = document.createElement('button');
|
||||||
|
dot.className = `w-2 h-2 rounded-full transition-all duration-300 ${i === activeDot ? 'bg-amber-600 w-6' : 'bg-amber-300 hover:bg-amber-400'}`;
|
||||||
|
dot.addEventListener('click', () => {
|
||||||
|
const cardWidth = document.querySelector('.group')?.offsetWidth || 230;
|
||||||
|
const gap = 24;
|
||||||
|
const targetOffset = ((currentIndex - (currentIndex % products.length)) + i) * (cardWidth + gap);
|
||||||
|
track.style.transform = `translateX(-${targetOffset}px)`;
|
||||||
|
currentIndex = (currentIndex - (currentIndex % products.length)) + i;
|
||||||
|
updateDots();
|
||||||
|
});
|
||||||
|
dotsContainer.appendChild(dot);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function slideNext() {
|
||||||
|
const cardWidth = document.querySelector('.group')?.offsetWidth || 230;
|
||||||
|
const gap = 24;
|
||||||
|
const step = cardWidth + gap;
|
||||||
|
const newIndex = currentIndex + 1;
|
||||||
|
track.style.transform = `translateX(-${newIndex * step}px)`;
|
||||||
|
currentIndex = newIndex;
|
||||||
|
updateDots();
|
||||||
|
setTimeout(() => {
|
||||||
|
if (currentIndex >= products.length * 2) {
|
||||||
|
track.style.transition = 'none';
|
||||||
|
const resetIndex = currentIndex - products.length;
|
||||||
|
track.style.transform = `translateX(-${resetIndex * step}px)`;
|
||||||
|
currentIndex = resetIndex;
|
||||||
|
updateDots();
|
||||||
|
track.offsetHeight;
|
||||||
|
track.style.transition = 'transform 0.7s ease-in-out';
|
||||||
|
}
|
||||||
|
}, 700);
|
||||||
|
}
|
||||||
|
|
||||||
|
function slidePrev() {
|
||||||
|
const cardWidth = document.querySelector('.group')?.offsetWidth || 230;
|
||||||
|
const gap = 24;
|
||||||
|
const step = cardWidth + gap;
|
||||||
|
const newIndex = currentIndex - 1;
|
||||||
|
track.style.transform = `translateX(-${newIndex * step}px)`;
|
||||||
|
currentIndex = newIndex;
|
||||||
|
updateDots();
|
||||||
|
setTimeout(() => {
|
||||||
|
if (currentIndex < products.length) {
|
||||||
|
track.style.transition = 'none';
|
||||||
|
const resetIndex = currentIndex + products.length;
|
||||||
|
track.style.transform = `translateX(-${resetIndex * step}px)`;
|
||||||
|
currentIndex = resetIndex;
|
||||||
|
updateDots();
|
||||||
|
track.offsetHeight;
|
||||||
|
track.style.transition = 'transform 0.7s ease-in-out';
|
||||||
|
}
|
||||||
|
}, 700);
|
||||||
|
}
|
||||||
|
|
||||||
|
let autoRotate = setInterval(slideNext, 1500);
|
||||||
|
function resetAutoRotate() { clearInterval(autoRotate); autoRotate = setInterval(slideNext, 4000); }
|
||||||
|
|
||||||
|
if (prevBtn && nextBtn && track) {
|
||||||
|
renderCarousel();
|
||||||
|
window.addEventListener('resize', () => { renderCarousel(); resetAutoRotate(); });
|
||||||
|
nextBtn.addEventListener('click', () => { slideNext(); resetAutoRotate(); });
|
||||||
|
prevBtn.addEventListener('click', () => { slidePrev(); resetAutoRotate(); });
|
||||||
|
track.addEventListener('mouseenter', () => clearInterval(autoRotate));
|
||||||
|
track.addEventListener('mouseleave', () => { autoRotate = setInterval(slideNext, 4000); });
|
||||||
|
}
|
||||||
|
|
||||||
|
const testiTrack = document.getElementById('testimonialTrack');
|
||||||
|
const prevTesti = document.getElementById('prevTesti');
|
||||||
|
const nextTesti = document.getElementById('nextTesti');
|
||||||
|
if(testiTrack && prevTesti && nextTesti) {
|
||||||
|
let testiIndex = 0;
|
||||||
|
const slides = document.querySelectorAll('#testimonialTrack > div');
|
||||||
|
const totalSlides = slides.length;
|
||||||
|
function updateTestiSlider() { testiTrack.style.transform = `translateX(-${testiIndex * 100}%)`; }
|
||||||
|
nextTesti.addEventListener('click', () => { testiIndex = (testiIndex + 1) % totalSlides; updateTestiSlider(); });
|
||||||
|
prevTesti.addEventListener('click', () => { testiIndex = (testiIndex - 1 + totalSlides) % totalSlides; updateTestiSlider(); });
|
||||||
|
let testiAuto = setInterval(() => { testiIndex = (testiIndex + 1) % totalSlides; updateTestiSlider(); }, 6000);
|
||||||
|
testiTrack.addEventListener('mouseenter', () => clearInterval(testiAuto));
|
||||||
|
testiTrack.addEventListener('mouseleave', () => { testiAuto = setInterval(() => { testiIndex = (testiIndex + 1) % totalSlides; updateTestiSlider(); }, 6000); });
|
||||||
|
}
|
||||||
|
|
||||||
|
// form
|
||||||
|
const newsletterForm = document.getElementById('newsletterForm');
|
||||||
|
const msgBox = document.getElementById('formMsg');
|
||||||
|
if(newsletterForm) newsletterForm.addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const emailInput = document.getElementById('subEmail');
|
||||||
|
if(emailInput.value.trim() && emailInput.value.includes('@')) {
|
||||||
|
msgBox.classList.remove('hidden');
|
||||||
|
msgBox.innerText = '✨ Thank you! A radiant welcome awaits your inbox. ✨';
|
||||||
|
emailInput.value = '';
|
||||||
|
setTimeout(() => msgBox.classList.add('hidden'), 4000);
|
||||||
|
} else {
|
||||||
|
msgBox.classList.remove('hidden');
|
||||||
|
msgBox.innerText = 'Please enter a valid email address.';
|
||||||
|
setTimeout(() => msgBox.classList.add('hidden'), 3000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply antialiased overflow-x-hidden bg-[#f5e6d8] font-['Inter',sans-serif];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.animate-fade-scale {
|
||||||
|
animation: fadeInScale 0.8s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-float {
|
||||||
|
animation: floatSoft 5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInScale {
|
||||||
|
0% { opacity: 0; transform: scale(0.95); }
|
||||||
|
100% { opacity: 1; transform: scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes floatSoft {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-8px); }
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
'playfair': ['Playfair Display', 'serif'],
|
||||||
|
'inter': ['Inter', 'sans-serif'],
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'fade-scale': 'fadeInScale 0.8s ease-out forwards',
|
||||||
|
'float': 'floatSoft 5s ease-in-out infinite',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
fadeInScale: {
|
||||||
|
'0%': { opacity: '0', transform: 'scale(0.95)' },
|
||||||
|
'100%': { opacity: '1', transform: 'scale(1)' },
|
||||||
|
},
|
||||||
|
floatSoft: {
|
||||||
|
'0%, 100%': { transform: 'translateY(0px)' },
|
||||||
|
'50%': { transform: 'translateY(-8px)' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue