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
Interaktive Komponente für soziale Medien
Eine komplexe Social-Media-Komponente mit einer Wald-/Grün-Farbpalette mit Neon-/Leuchteffekten, die sich für interaktive Feeds mit mehreren Elementen eignet. Beinhaltet responsives Design und Unterstützung für den Dunkelmodus.
Komponente "Interaktive Komponenten"
Interaktive Komponentenkomponente mit 3D-Design, monochromatischem Farbschema und mittlerer Komplexität für E-Commerce, mit responsivem Design und Unterstützung für dunkle Themen.
Komponente "Interaktive Komponenten von Neumorphism"
Neumorphism Interactive Components Komponente für Business-/Unternehmenswebsites