Composant Composants de commerce électronique
Il s’agit d’un composant e-commerce complexe pour les sites Web de voyage/tourisme, avec des effets de néon/lueur, une palette de couleurs d’automne et une réactivité totale avec prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-orange-50 to-amber-200 dark:from-gray-950 dark:to-stone-900 p-4 sm:p-6 lg:p-8 font-sans text-gray-900 dark:text-gray-100 relative overflow-hidden">
<!-- Glow background effects -->
<div class="absolute -top-32 -left-32 w-96 h-96 bg-orange-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-amber-600"></div>
<div class="absolute -bottom-24 -right-24 w-72 h-72 bg-red-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-red-800"></div>
<div class="absolute top-1/4 left-1/2 w-64 h-64 bg-yellow-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-orange-600"></div>
<div class="container mx-auto relative z-10">
<!-- Header/Navigation Placeholder -->
<header class="mb-8 flex flex-col sm:flex-row justify-between items-center bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl p-4 shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700">
<h1 class="text-2xl sm:text-3xl font-extrabold text-orange-200 uppercase tracking-widest text-shadow-glow dark:text-amber-400 mb-4 sm:mb-0">
Wanderlust Expeditions
</h1>
<nav class="flex gap-4 sm:gap-6">
<a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
Destinations
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
</a>
<a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
Tours
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
</a>
<a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
About Us
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
</a>
</nav>
</header>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Left Sidebar - Filters -->
<aside class="lg:col-span-1 p-6 bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700">
<h2 class="text-xl font-bold mb-6 text-orange-200 text-shadow-glow dark:text-amber-400">Filter Your Adventure</h2>
<div class="mb-6">
<label for="destination" class="block text-orange-300 text-sm font-medium mb-2">Destination</label>
<select id="destination" class="w-full p-3 rounded-lg bg-orange-900 text-orange-100 border border-orange-700 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 shadow-inner glow-inset-orange">
<option>All Destinations</option>
<option>Sahara Desert</option>
<option>Himalayan Peaks</option>
<option>Amazon Rainforest</option>
<option>Nordic Fjords</option>
</select>
</div>
<div class="mb-6">
<label for="price-range" class="block text-orange-300 text-sm font-medium mb-2">Price Range</label>
<input type="range" id="price-range" min="100" max="5000" value="2500" class="w-full h-2 bg-orange-700 accent-amber-500 rounded-lg appearance-none cursor-pointer glow-inset-orange">
<div class="flex justify-between text-xs text-orange-200 mt-2">
<span>$100</span>
<span>$5000</span>
</div>
</div>
<div class="mb-6">
<label class="block text-orange-300 text-sm font-medium mb-2">Activities</label>
<div class="space-y-2">
<label class="flex items-center text-orange-200">
<input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
<span class="ml-2 text-glow">Hiking & Trekking</span>
</label>
<label class="flex items-center text-orange-200">
<input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
<span class="ml-2 text-glow">Cultural Immersion</span>
</label>
<label class="flex items-center text-orange-200">
<input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
<span class="ml-2 text-glow">Wildlife Safaris</span>
</label>
</div>
</div>
<button class="w-full py-3 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-lg hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
Apply Filters
</button>
</aside>
<!-- Main Product Grid -->
<section class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
<div class="card-inner">
<div class="card-front p-4">
<div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
<img src="https://picsum.photos/id/1015/400/300" alt="Desert Safari" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
<span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Popular</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Sahara Desert Trek</h3>
<p class="text-sm text-orange-300 mb-4 line-clamp-2">Experience the majestic dunes and endless skies of the Sahara on this unforgettable journey.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-extrabold text-amber-500 price-glow">$1200</span>
<div class="flex items-center text-orange-400">
<svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
4.8 <span class="text-xs ml-1">(240 reviews)</span>
</div>
</div>
<button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
View Details
</button>
</div>
<div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
<h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
<ul class="text-orange-300 text-sm space-y-2 mb-6">
<li>• Duration: 7 Days</li>
<li>• Difficulty: Moderate</li>
<li>• Group Size: Max 12</li>
<li>• Best Season: October - March</li>
</ul>
<button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
Book Now
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
<div class="card-inner">
<div class="card-front p-4">
<div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
<img src="https://picsum.photos/id/292/400/300" alt="Himalayan Peaks" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
<span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">New!</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Himalayan Basecamp</h3>
<p class="text-sm text-orange-300 mb-4 line-clamp-2">Conquer breathtaking peaks and witness stunning panoramic views in the Himalayas.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-extrabold text-amber-500 price-glow">$2500</span>
<div class="flex items-center text-orange-400">
<svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
4.9 <span class="text-xs ml-1">(180 reviews)</span>
</div>
</div>
<button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
View Details
</button>
</div>
<div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
<h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
<ul class="text-orange-300 text-sm space-y-2 mb-6">
<li>• Duration: 14 Days</li>
<li>• Difficulty: Advanced</li>
<li>• Group Size: Max 8</li>
<li>• Best Season: April - June</li>
</ul>
<button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
Book Now
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
<div class="card-inner">
<div class="card-front p-4">
<div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
<img src="https://picsum.photos/id/1077/400/300" alt="Amazon River" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
<span class="text-xs font-semibold text-orange-200 bg-orange-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Low Spots Remaining</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Amazon Wildlife Tour</h3>
<p class="text-sm text-orange-300 mb-4 line-clamp-2">Navigate the mighty Amazon river and encounter unique wildlife in their natural habitat.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-extrabold text-amber-500 price-glow">$1800</span>
<div class="flex items-center text-orange-400">
<svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
4.7 <span class="text-xs ml-1">(310 reviews)</span>
</div>
</div>
<button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
View Details
</button>
</div>
<div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
<h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
<ul class="text-orange-300 text-sm space-y-2 mb-6">
<li>• Duration: 10 Days</li>
<li>• Difficulty: Easy</li>
<li>• Group Size: Max 15</li>
<li>• Best Season: May - September</li>
</ul>
<button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
Book Now
</button>
</div>
</div>
</div>
<!-- Add more product cards here following the same structure -->
<!-- Product Card 4 -->
<div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
<div class="card-inner">
<div class="card-front p-4">
<div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
<img src="https://picsum.photos/id/1029/400/300" alt="Nordic Fjords" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
<span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Featured</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Nordic Fjords Cruise</h3>
<p class="text-sm text-orange-300 mb-4 line-clamp-2">Cruise through breathtaking fjords and explore charming Nordic villages.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-extrabold text-amber-500 price-glow">$2800</span>
<div class="flex items-center text-orange-400">
<svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
4.9 <span class="text-xs ml-1">(200 reviews)</span>
</div>
</div>
<button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
View Details
</button>
</div>
<div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
<h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
<ul class="text-orange-300 text-sm space-y-2 mb-6">
<li>• Duration: 8 Days</li>
<li>• Difficulty: Easy</li>
<li>• Group Size: Max 20</li>
<li>• Best Season: June - August</li>
</ul>
<button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
Book Now
</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
<div class="card-inner">
<div class="card-front p-4">
<div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
<img src="https://picsum.photos/id/1083/400/300" alt="Bali Beaches" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
<span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Relaxation</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Bali Beach Retreat</h3>
<p class="text-sm text-orange-300 mb-4 line-clamp-2">Unwind on pristine beaches and immerse yourself in the serene culture of Bali.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-extrabold text-amber-500 price-glow">$950</span>
<div class="flex items-center text-orange-400">
<svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
4.6 <span class="text-xs ml-1">(450 reviews)</span>
</div>
</div>
<button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
View Details
</button>
</div>
<div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
<h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
<ul class="text-orange-300 text-sm space-y-2 mb-6">
<li>• Duration: 5 Days</li>
<li>• Difficulty: Easy</li>
<li>• Group Size: Any</li>
<li>• Best Season: All Year</li>
</ul>
<button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
Book Now
</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
<div class="card-inner">
<div class="card-front p-4">
<div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
<img src="https://picsum.photos/id/1043/400/300" alt="Kyoto Temples" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
<span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Cultural</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Kyoto Cultural Journey</h3>
<p class="text-sm text-orange-300 mb-4 line-clamp-2">Explore ancient temples, traditional gardens, and vibrant history in Japan's cultural heart.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-extrabold text-amber-500 price-glow">$2100</span>
<div class="flex items-center text-orange-400">
<svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
4.8 <span class="text-xs ml-1">(290 reviews)</span>
</div>
</div>
<button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
View Details
</button>
</div>
<div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
<h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
<ul class="text-orange-300 text-sm space-y-2 mb-6">
<li>• Duration: 9 Days</li>
<li>• Difficulty: Easy</li>
<li>• Group Size: Max 10</li>
<li>• Best Season: March - May</li>
</ul>
<button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
Book Now
</button>
</div>
</div>
</div>
</section>
</div>
<!-- Testimonial/Call to Action Section -->
<section class="mt-12 p-8 bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl shadow-xl border border-orange-700 text-center dark:bg-stone-900 dark:border-stone-700">
<h2 class="text-3xl font-extrabold mb-4 text-orange-200 text-shadow-glow dark:text-amber-400">Ready for Your Next Adventure?</h2>
<p class="text-lg text-orange-300 mb-8">Join thousands of happy explorers who've crafted unforgettable memories with us.</p>
<div class="flex flex-wrap justify-center items-center gap-6 mb-8">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar" class="w-16 h-16 rounded-full border-2 border-amber-500 shadow-lg glow-avatar">
<p class="text-amber-400 text-sm mt-2 font-semibold">Jane D.</p>
</div>
<div class="text-orange-200 italic max-w-md">"My trip to the Himalayas was beyond words. The organization was flawless, and the guides were exceptional. Highly recommend!"</div>
</div>
<a href="#contact" class="inline-block py-4 px-8 bg-gradient-to-r from-amber-500 to-orange-600 text-brown-900 font-bold text-xl rounded-full shadow-2xl hover:from-amber-600 hover:to-orange-700 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-lg">
Contact Our Travel Experts
</a>
</section>
</div>
<!-- Custom Styles for Neon/Glow Effects and Card Flip -->
<style>
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
.animate-blob {
animation: blob 7s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
.text-shadow-glow {
text-shadow: 0 0 5px rgba(255, 165, 0, 0.8), 0 0 10px rgba(255, 140, 0, 0.6), 0 0 15px rgba(255, 69, 0, 0.4);
}
.glow-inset-orange:focus {
box-shadow: inset 0 0 8px rgba(255, 165, 0, 0.6), 0 0 10px rgba(255, 140, 0, 0.4);
}
.glow-orange-checkbox:checked {
box-shadow: 0 0 5px rgba(255, 165, 0, 0.8);
}
/* General Button Glow */
.button-glow {
box-shadow: 0 0 10px rgba(255, 165, 0, 0.6);
}
.button-glow:hover {
box-shadow: 0 0 15px rgba(255, 165, 0, 0.8), 0 0 20px rgba(255, 140, 0, 0.7);
}
.button-glow-sm {
box-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}
.button-glow-sm:hover {
box-shadow: 0 0 12px rgba(255, 215, 0, 0.9), 0 0 16px rgba(255, 190, 0, 0.8);
}
.button-glow-lg {
box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 25px rgba(255, 165, 0, 0.7);
}
.button-glow-lg:hover {
box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 165, 0, 0.9);
}
.card-image-glow {
box-shadow: 0 0 8px rgba(255, 165, 0, 0.7);
}
.group:hover .card-image-glow {
box-shadow: 0 0 15px rgba(255, 165, 0, 0.9);
}
.glow-tag {
box-shadow: 0 0 5px rgba(255, 69, 0, 0.7);
}
.price-glow {
text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}
.glow-avatar {
box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}
/* 3D Card Flip Effect */
.perspective-card {
perspective: 1000px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.group:hover .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
display: flex;
flex-direction: column;
}
.card-front {
background-color: transparent;
z-index: 2;
}
.card-back {
background-color: #5a2e00; /* Darker brown for back */
transform: rotateY(180deg);
justify-content: center;
align-items: center;
padding: 1.5rem;
}
/* Dark Mode Overrides */
.dark .text-shadow-glow {
text-shadow: 0 0 5px rgba(255, 215, 0, 0.9), 0 0 10px rgba(255, 190, 0, 0.7), 0 0 15px rgba(255, 160, 0, 0.5);
}
.dark .glow-inset-orange:focus {
box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.7), 0 0 10px rgba(255, 190, 0, 0.5);
}
.dark .glow-orange-checkbox:checked {
box-shadow: 0 0 5px rgba(255, 215, 0, 0.9);
}
.dark .button-glow {
box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}
.dark .button-glow:hover {
box-shadow: 0 0 15px rgba(255, 215, 0, 0.9), 0 0 20px rgba(255, 190, 0, 0.8);
}
.dark .price-glow {
text-shadow: 0 0 8px rgba(255, 255, 0, 0.9);
}
.dark .card-image-glow {
box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}
.dark .group:hover .card-image-glow {
box-shadow: 0 0 15px rgba(255, 215, 0, 1);
}
.dark .glow-tag {
box-shadow: 0 0 5px rgba(200, 0, 0, 0.9);
}
.dark .glow-avatar {
box-shadow: 0 0 8px rgba(255, 215, 0, 0.9);
}
</style>
</div>Composants associés
Composant Composants de commerce électronique
Un composant de commerce électronique réactif conçu pour le mode sombre avec une palette de couleurs triadiques, avec des listes de produits, une icône de panier d’achat et un avatar de l’utilisateur.
Composant Composants de commerce électronique
Un composant de commerce électronique réactif avec des micro-interactions, une palette de couleurs terre, une complexité modérée et une prise en charge du mode sombre.
Composant rétro de commerce électronique
Un composant de commerce électronique complexe conçu avec un style rétro/vintage, avec une palette de couleurs triadique et un design réactif, adapté aux sites Web d’entreprise/d’entreprise avec prise en charge du mode sombre.