Interaktive Komponente für die Lieferung von Lebensmitteln
Eine komplexe, interaktive Komponente für Essenslieferungen und Restaurants mit Neonleuchten, leuchtenden Farben und mehreren interaktiven Elementen. Entwickelt für Reaktionsfähigkeit und Unterstützung des Dunkelmodus.
HTML-Code
<div class="font-sans bg-gray-950 text-gray-50 dark:bg-black p-4 sm:p-6 lg:p-8 relative overflow-hidden">
<!-- Glowing Background Elements -->
<div class="absolute top-0 -left-64 w-96 h-96 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-purple-600"></div>
<div class="absolute top-0 -right-64 w-96 h-96 bg-pink-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-rose-600"></div>
<div class="absolute -bottom-16 left-1/4 transform -translate-x-1/2 w-96 h-96 bg-green-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-lime-600"></div>
<div class="relative z-10 max-w-7xl mx-auto py-8 lg:py-12">
<div class="text-center mb-10 lg:mb-16">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-4 animate-text-glow-slow relative">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-pink-400 to-green-400 dark:from-sky-400 dark:via-fuchsia-400 dark:to-lime-400">Feast with the Glow!</span>
</h2>
<p class="text-lg sm:text-xl text-gray-300 dark:text-gray-400 mb-8 max-w-3xl mx-auto animate-fade-in animation-delay-500">
Discover exquisite flavors and glowing deals, delivered fresh to your door.
</p>
<!-- Search Bar with Neon Border -->
<div class="relative max-w-xl mx-auto">
<input type="text" placeholder="Search for restaurants or dishes..." class="w-full p-4 pl-12 rounded-xl bg-gray-800 dark:bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-4 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black transition-all duration-300
border-2 border-transparent focus:border-blue-500
shadow-neon-blue-sm hover:shadow-neon-blue
dark:shadow-neon-purple-sm dark:hover:shadow-neon-purple
focus:shadow-neon-blue-md dark:focus:shadow-neon-purple-md">
<svg class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 10m-7 0a7 7 0 1014 0a7 7 0 10-14 0"></path><path d="m21 21-6-6"></path></svg>
</div>
</div>
<!-- Category Grid -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
<!-- Category 1 -->
<div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300
bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
border-2 border-transparent
hover:border-blue-500 dark:hover:border-purple-500
shadow-neon-blue-sm hover:shadow-neon-blue-md
dark:shadow-neon-purple-sm dark:hover:shadow-neon-purple-md
cursor-pointer">
<img src="https://picsum.photos/id/1080/100/100" alt="Pizza" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-blue-500 dark:ring-purple-500 glow-on-hover-img">
<span class="font-semibold text-lg text-white group-hover:text-blue-300 dark:group-hover:text-purple-300 transition-colors duration-200 glow-on-text">Pizza</span>
</div>
<!-- Category 2 -->
<div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300
bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
border-2 border-transparent
hover:border-pink-500 dark:hover:border-rose-500
shadow-neon-pink-sm hover:shadow-neon-pink-md
dark:shadow-neon-rose-sm dark:hover:shadow-neon-rose-md
cursor-pointer">
<img src="https://picsum.photos/id/1050/100/100" alt="Burgers" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-pink-500 dark:ring-rose-500 glow-on-hover-img">
<span class="font-semibold text-lg text-white group-hover:text-pink-300 dark:group-hover:text-rose-300 transition-colors duration-200 glow-on-text">Burgers</span>
</div>
<!-- Category 3 -->
<div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300
bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
border-2 border-transparent
hover:border-green-500 dark:hover:border-lime-500
shadow-neon-green-sm hover:shadow-neon-green-md
dark:shadow-neon-lime-sm dark:hover:shadow-neon-lime-md
cursor-pointer">
<img src="https://picsum.photos/id/1005/100/100" alt="Sushi" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-green-500 dark:ring-lime-500 glow-on-hover-img">
<span class="font-semibold text-lg text-white group-hover:text-green-300 dark:group-hover:text-lime-300 transition-colors duration-200 glow-on-text">Sushi</span>
</div>
<!-- Category 4 -->
<div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300
bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
border-2 border-transparent
hover:border-yellow-500 dark:hover:border-yellow-500
shadow-neon-yellow-sm hover:shadow-neon-yellow-md
dark:shadow-neon-orange-sm dark:hover:shadow-neon-orange-md
cursor-pointer">
<img src="https://picsum.photos/id/200/100/100" alt="Desserts" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-yellow-500 dark:ring-orange-500 glow-on-hover-img">
<span class="font-semibold text-lg text-white group-hover:text-yellow-300 dark:group-hover:text-orange-300 transition-colors duration-200 glow-on-text">Desserts</span>
</div>
</div>
<!-- Featured Restaurants Section -->
<h3 class="text-3xl sm:text-4xl font-bold mb-8 text-center text-white relative animate-fade-in animation-delay-700">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-400 to-green-400 dark:from-fuchsia-400 dark:to-lime-400">Top Rated Establishments</span>
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Restaurant Card 1 -->
<div class="group relative p-6 rounded-xl overflow-hidden
bg-gray-800/70 hover:bg-gray-700/90 dark:bg-gray-900/70 dark:hover:bg-gray-800/90
border-2 border-transparent
hover:border-blue-500 dark:hover:border-purple-500
shadow-neon-blue-sm hover:shadow-neon-blue-md transition-all duration-300 cursor-pointer">
<img src="https://picsum.photos/id/1060/400/250" alt="Restaurant Image" class="w-full h-48 object-cover rounded-md mb-4 saturate-150 group-hover:saturate-200 transition-all duration-300 ">
<h4 class="text-xl font-bold mb-2 text-white group-hover:text-blue-300 dark:group-hover:text-purple-300 transition-colors duration-200">The Neon Bistro</h4>
<p class="text-gray-300 dark:text-gray-400 text-sm mb-3">Gourmet fusion with a modern twist.</p>
<div class="flex items-center text-yellow-400 mb-4">
<svg class="w-5 h-5 fill-current" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>
<span class="ml-1 font-semibold">4.9</span> <span class="text-gray-400">(1.5k reviews)</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-semibold text-green-400 glow-on-text">Open Now</span>
<button class="px-4 py-2 rounded-full text-white font-semibold transition-all duration-300
bg-gradient-to-r from-blue-600 to-pink-600
hover:from-blue-500 hover:to-pink-500
shadow-neon-blue-md hover:shadow-neon-blue-lg
dark:from-purple-600 dark:to-rose-600
dark:hover:from-purple-500 dark:hover:to-rose-500
dark:shadow-neon-purple-md dark:hover:shadow-neon-purple-lg">
Order Now
</button>
</div>
</div>
<!-- Restaurant Card 2 -->
<div class="group relative p-6 rounded-xl overflow-hidden
bg-gray-800/70 hover:bg-gray-700/90 dark:bg-gray-900/70 dark:hover:bg-gray-800/90
border-2 border-transparent
hover:border-pink-500 dark:hover:border-rose-500
shadow-neon-pink-sm hover:shadow-neon-pink-md transition-all duration-300 cursor-pointer">
<img src="https://picsum.photos/id/1069/400/250" alt="Restaurant Image" class="w-full h-48 object-cover rounded-md mb-4 saturate-150 group-hover:saturate-200 transition-all duration-300">
<h4 class="text-xl font-bold mb-2 text-white group-hover:text-pink-300 dark:group-hover:text-rose-300 transition-colors duration-200">Glow Grille & Bar</h4>
<p class="text-gray-300 dark:text-gray-400 text-sm mb-3">Classic comfort food with a lively atmosphere.</p>
<div class="flex items-center text-yellow-400 mb-4">
<svg class="w-5 h-5 fill-current" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>
<span class="ml-1 font-semibold">4.7</span> <span class="text-gray-400">(980 reviews)</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-semibold text-green-400 glow-on-text">Open Now</span>
<button class="px-4 py-2 rounded-full text-white font-semibold transition-all duration-300
bg-gradient-to-r from-pink-600 to-green-600
hover:from-pink-500 hover:to-green-500
shadow-neon-pink-md hover:shadow-neon-pink-lg
dark:from-rose-600 dark:to-lime-600
dark:hover:from-rose-500 dark:hover:to-lime-500
dark:shadow-neon-rose-md dark:hover:shadow-neon-rose-lg">
Order Now
</button>
</div>
</div>
<!-- Restaurant Card 3 -->
<div class="group relative p-6 rounded-xl overflow-hidden
bg-gray-800/70 hover:bg-gray-700/90 dark:bg-gray-900/70 dark:hover:bg-gray-800/90
border-2 border-transparent
hover:border-green-500 dark:hover:border-lime-500
shadow-neon-green-sm hover:shadow-neon-green-md transition-all duration-300 cursor-pointer">
<img src="https://picsum.photos/id/1084/400/250" alt="Restaurant Image" class="w-full h-48 object-cover rounded-md mb-4 saturate-150 group-hover:saturate-200 transition-all duration-300">
<h4 class="text-xl font-bold mb-2 text-white group-hover:text-green-300 dark:group-hover:text-lime-300 transition-colors duration-200">Electric Eats Diner</h4>
<p class="text-gray-300 dark:text-gray-400 text-sm mb-3">Modern diner fare, always electrifying.</p>
<div class="flex items-center text-yellow-400 mb-4">
<svg class="w-5 h-5 fill-current" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>
<span class="ml-1 font-semibold">4.8</span> <span class="text-gray-400">(1.2k reviews)</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-semibold text-red-400 glow-on-text">Closed</span>
<button class="px-4 py-2 rounded-full text-white font-semibold transition-all duration-300 opacity-70 cursor-not-allowed
bg-gray-600
shadow-neon-gray-sm
dark:bg-gray-700
dark:shadow-neon-gray-sm">
Closed
</button>
</div>
</div>
</div>
<!-- Testimonials Section -->
<h3 class="text-3xl sm:text-4xl font-bold mt-16 mb-8 text-center text-white relative animate-fade-in animation-delay-900">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-blue-400 dark:from-orange-400 dark:to-purple-400">What Our Patrons Say (Glowingly)</span>
</h3>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Testimonial 1 -->
<div class="relative p-6 rounded-xl
bg-gray-800/70 dark:bg-gray-900/70
border-2 border-transparent
shadow-neon-blue-sm dark:shadow-neon-purple-sm transition-all duration-300">
<p class="text-gray-300 dark:text-gray-400 text-lg mb-6 leading-relaxed">
"Absolutely mesmerizing! The app's interface is stunning with its vibrant neon glow, making ordering food a truly delightful experience. And the delivery speed? Electrifyingly fast!"
</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar" class="w-14 h-14 rounded-full mr-4 ring-2 ring-blue-500 dark:ring-purple-500 glow-on-hover-img">
<div>
<p class="font-bold text-white text-lg">Anya Sharma</p>
<p class="text-gray-400 text-sm">Food Enthusiast</p>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="relative p-6 rounded-xl
bg-gray-800/70 dark:bg-gray-900/70
border-2 border-transparent
shadow-neon-pink-sm dark:shadow-neon-rose-sm transition-all duration-300">
<p class="text-gray-300 dark:text-gray-400 text-lg mb-6 leading-relaxed">
"Never thought ordering takeout could be this cool! The UI feels futuristic and the glow effects are a fantastic touch. Found my new favorite burger joint through this platform. Highly recommend!"
</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar" class="w-14 h-14 rounded-full mr-4 ring-2 ring-pink-500 dark:ring-rose-500 glow-on-hover-img">
<div>
<p class="font-bold text-white text-lg">Michael Chen</p>
<p class="text-gray-400 text-sm">Tech Foodie</p>
</div>
</div>
</div>
</div>
</div>
<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); }
}
@keyframes text-glow-slow {
0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.2), 0 0 10px rgba(71, 185, 255, 0.4), 0 0 15px rgba(255, 0, 255, 0.4); }
50% { text-shadow: 0 0 10px rgba(255,255,255,0.4), 0 0 20px rgba(71, 185, 255, 0.6), 0 0 30px rgba(255, 0, 255, 0.6); }
}
.dark .animate-text-glow-slow {
animation-name: dark-text-glow-slow;
}
@keyframes dark-text-glow-slow {
0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.2), 0 0 10px rgba(128, 0, 128, 0.4), 0 0 15px rgba(0, 255, 0, 0.4); }
50% { text-shadow: 0 0 10px rgba(255,255,255,0.4), 0 0 20px rgba(128, 0, 128, 0.6), 0 0 30px rgba(0, 255, 0, 0.6); }
}
@keyframes fade-in {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
.animate-blob { animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
.animate-fade-in { animation: fade-in 1s ease-out forwards; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-700 { animation-delay: 0.7s; }
.animation-delay-900 { animation-delay: 0.9s; }
/* Tailwind Custom Shadows (approximate neon glow) */
.shadow-neon-blue-sm {
box-shadow: 0 0 5px rgba(0, 179, 255, 0.5);
}
.hover\:shadow-neon-blue,
.focus\:shadow-neon-blue-md {
box-shadow: 0 0 10px rgba(0, 179, 255, 0.7), 0 0 20px rgba(0, 179, 255, 0.5);
}
.shadow-neon-blue-md {
box-shadow: 0 0 10px rgba(0, 179, 255, 0.7), 0 0 20px rgba(0, 179, 255, 0.5);
}
.hover\:shadow-neon-blue-lg {
box-shadow: 0 0 15px rgba(0, 179, 255, 0.8), 0 0 30px rgba(0, 179, 255, 0.6);
}
.shadow-neon-pink-sm {
box-shadow: 0 0 5px rgba(255, 0, 179, 0.5);
}
.hover\:shadow-neon-pink-md {
box-shadow: 0 0 10px rgba(255, 0, 179, 0.7), 0 0 20px rgba(255, 0, 179, 0.5);
}
.hover\:shadow-neon-pink-lg {
box-shadow: 0 0 15px rgba(255, 0, 179, 0.8), 0 0 30px rgba(255, 0, 179, 0.6);
}
.shadow-neon-green-sm {
box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}
.hover\:shadow-neon-green-md {
box-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.5);
}
.hover\:shadow-neon-green-lg {
box-shadow: 0 0 15px rgba(0, 255, 0, 0.8), 0 0 30px rgba(0, 255, 0, 0.6);
}
.shadow-neon-yellow-sm {
box-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
}
.hover\:shadow-neon-yellow-md {
box-shadow: 0 0 10px rgba(255, 255, 0, 0.7), 0 0 20px rgba(255, 255, 0, 0.5);
}
.shadow-neon-gray-sm {
box-shadow: 0 0 5px rgba(128, 128, 128, 0.3);
}
/* Dark Mode specific shadows */
.dark .shadow-neon-purple-sm {
box-shadow: 0 0 5px rgba(128, 0, 128, 0.5);
}
.dark .hover\:shadow-neon-purple,
.dark .focus\:shadow-neon-purple-md {
box-shadow: 0 0 10px rgba(128, 0, 128, 0.7), 0 0 20px rgba(128, 0, 128, 0.5);
}
.dark .shadow-neon-purple-md {
box-shadow: 0 0 10px rgba(128, 0, 128, 0.7), 0 0 20px rgba(128, 0, 128, 0.5);
}
.dark .hover\:shadow-neon-purple-lg {
box-shadow: 0 0 15px rgba(128, 0, 128, 0.8), 0 0 30px rgba(128, 0, 128, 0.6);
}
.dark .shadow-neon-rose-sm {
box-shadow: 0 0 5px rgba(255, 0, 100, 0.5);
}
.dark .hover\:shadow-neon-rose-md {
box-shadow: 0 0 10px rgba(255, 0, 100, 0.7), 0 0 20px rgba(255, 0, 100, 0.5);
}
.dark .hover\:shadow-neon-rose-lg {
box-shadow: 0 0 15px rgba(255, 0, 100, 0.8), 0 0 30px rgba(255, 0, 100, 0.6);
}
.dark .shadow-neon-lime-sm {
box-shadow: 0 0 5px rgba(128, 255, 0, 0.5);
}
.dark .hover\:shadow-neon-lime-md {
box-shadow: 0 0 10px rgba(128, 255, 0, 0.7), 0 0 20px rgba(128, 255, 0, 0.5);
}
.dark .hover\:shadow-neon-lime-lg {
box-shadow: 0 0 15px rgba(128, 255, 0, 0.8), 0 0 30px rgba(128, 255, 0, 0.6);
}
.dark .shadow-neon-orange-sm {
box-shadow: 0 0 5px rgba(255, 128, 0, 0.5);
}
.dark .hover\:shadow-neon-orange-md {
box-shadow: 0 0 10px rgba(255, 128, 0, 0.7), 0 0 20px rgba(255, 128, 0, 0.5);
}
.dark .shadow-neon-gray-sm {
box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
}
/* Image and text glow on hover */
.glow-on-hover-img:hover {
filter: drop-shadow(0 0 8px currentColor);
}
.group:hover .glow-on-text {
filter: drop-shadow(0 0 5px currentColor);
}
</style>
</div>Verwandte Komponenten
Komponente "Interaktive Komponenten"
Interaktive 3D-Komponente mit responsiven Effekten und Unterstützung für dunkle Themen
Komponente "Interaktive Komponenten"
Interaktive Komponentenkomponente mit Materialdesign, triadischem Farbschema, komplexer Komplexität, für E-Commerce, mit responsivem Design und Unterstützung für dunkle Themen.
Komponente "Interaktive Komponenten"
Eine interaktive Komponente, die im Brutalismus-Stil gestaltet ist und sich für die Präsentation von Arbeiten oder Produkten mit Unterstützung dunkler Themen eignet.