|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Chromatic Canvas</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
100: '#f0f9ff', |
|
|
200: '#e0f2fe', |
|
|
300: '#bae6fd', |
|
|
400: '#7dd3fc', |
|
|
500: '#38bdf8', |
|
|
600: '#0ea5e9', |
|
|
700: '#0284c7', |
|
|
800: '#0369a1', |
|
|
900: '#075985', |
|
|
}, |
|
|
secondary: { |
|
|
100: '#f5f3ff', |
|
|
200: '#ede9fe', |
|
|
300: '#ddd6fe', |
|
|
400: '#c4b5fd', |
|
|
500: '#a78bfa', |
|
|
600: '#8b5cf6', |
|
|
700: '#7c3aed', |
|
|
800: '#6d28d9', |
|
|
900: '#5b21b6', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<style> |
|
|
.hero-section { |
|
|
background: linear-gradient(135deg, rgba(56,189,248,0.1) 0%, rgba(167,139,250,0.1) 100%); |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans antialiased"> |
|
|
<div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div> |
|
|
|
|
|
<nav class="relative z-10 bg-white/80 backdrop-blur-md shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16 items-center"> |
|
|
<div class="flex items-center"> |
|
|
<a href="index.html" class="text-primary-600 font-bold text-xl flex items-center"> |
|
|
<i data-feather="shopping-bag" class="mr-2"></i> Colorful Commerce |
|
|
</a> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="index.html" class="text-gray-700 hover:text-primary-600 transition">Accueil</a> |
|
|
<a href="shop.html" class="text-primary-600 font-medium">Boutique</a> |
|
|
<a href="#" class="text-gray-700 hover:text-primary-600 transition">Panier</a> |
|
|
<a href="#" class="text-gray-700 hover:text-primary-600 transition">Contact</a> |
|
|
</div> |
|
|
<button class="md:hidden text-gray-700"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<main class="relative z-10"> |
|
|
<section class="hero-section py-20"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-5xl font-bold text-gray-900 mb-6">Unleash Your <span class="text-primary-600">Creative</span> Potential</h1> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-10">Discover the perfect blend of colors and design to make your projects stand out from the crowd.</p> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button class="bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-lg font-medium transition shadow-lg">Get Started</button> |
|
|
<button class="border-2 border-primary-600 text-primary-600 hover:bg-primary-50 px-6 py-3 rounded-lg font-medium transition">Learn More</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="py-16"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Why Choose Us</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">We combine cutting-edge technology with artistic vision to deliver stunning results.</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md transition duration-300 card-hover"> |
|
|
<div class="w-14 h-14 bg-primary-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i data-feather="palette" class="text-primary-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Color Harmony</h3> |
|
|
<p class="text-gray-600">Expertly curated color palettes that work perfectly together.</p> |
|
|
</div> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md transition duration-300 card-hover"> |
|
|
<div class="w-14 h-14 bg-secondary-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i data-feather="sliders" class="text-secondary-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Custom Solutions</h3> |
|
|
<p class="text-gray-600">Tailored designs to match your unique style and requirements.</p> |
|
|
</div> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md transition duration-300 card-hover"> |
|
|
<div class="w-14 h-14 bg-primary-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i data-feather="zap" class="text-primary-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Fast Delivery</h3> |
|
|
<p class="text-gray-600">Quick turnaround without compromising on quality.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="py-16 bg-gradient-to-r from-primary-50 to-secondary-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Our Latest Work</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">See how we've transformed ideas into visual masterpieces.</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
<div class="rounded-xl overflow-hidden shadow-lg"> |
|
|
<img src="http://static.photos/abstract/640x360/1" alt="Abstract Design" class="w-full h-64 object-cover"> |
|
|
<div class="bg-white p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-2">Abstract Fusion</h3> |
|
|
<p class="text-gray-600">A vibrant exploration of form and color.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="rounded-xl overflow-hidden shadow-lg"> |
|
|
<img src="http://static.photos/minimal/640x360/2" alt="Minimal Design" class="w-full h-64 object-cover"> |
|
|
<div class="bg-white p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-2">Minimal Elegance</h3> |
|
|
<p class="text-gray-600">Less is more in this sophisticated composition.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="rounded-xl overflow-hidden shadow-lg"> |
|
|
<img src="http://static.photos/technology/640x360/3" alt="Tech Design" class="w-full h-64 object-cover"> |
|
|
<div class="bg-white p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-2">Digital Frontier</h3> |
|
|
<p class="text-gray-600">Bridging technology and aesthetics.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="py-16"> |
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="bg-white rounded-xl shadow-xl p-8 md:p-12"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-900 mb-8">Ready to Transform Your Vision?</h2> |
|
|
<form class="space-y-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Your Project Details</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-primary-600 hover:bg-primary-700 text-white py-3 px-6 rounded-lg font-medium transition shadow-md">Send Message</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<footer class="relative z-10 bg-gray-900 text-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Colorful Commerce Canvas</h3> |
|
|
<p class="text-gray-400">Votre destination pour des produits créatifs et uniques.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Quick Links</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="index.html" class="text-gray-400 hover:text-white transition">Accueil</a></li> |
|
|
<li><a href="shop.html" class="text-white font-medium">Boutique</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Livraison</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Services</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Web Design</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Branding</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">UI/UX</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Illustration</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Connect</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i data-feather="facebook"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i data-feather="linkedin"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400 text-sm"> |
|
|
<p>© 2023 Colorful Commerce Canvas. Tous droits réservés.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x38bdf8, |
|
|
backgroundColor: 0xf8fafc, |
|
|
size: 0.8 |
|
|
}); |
|
|
</script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
