Design a modern, dark-themed landing page for a social media app called TasteTrail, focused on sharing and discovering cooking recipes. The design should use a sleek dark UI with neon color accents (especially teal, magenta, or electric blue) for interactive elements and highlights. The landing page should include: A bold hero section with the tagline: “Follow the flavor.” An eye-catching call-to-action button like “Join the Trail” or “Share Your First Recipe” A section explaining core features: recipe feeds, likes, comments, following users, uploading photos A preview/mockup of the app interface (can be abstract or mobile screens) User testimonials or quotes from food creators A footer with links to About, Contact, Terms, and social media icons Use React components where possible and ensure the layout is responsive. Overall tone should be futuristic, appetizing, and community-driven. - Initial Deployment
d520ace verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TasteTrail - Follow the Flavor</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| teal: { | |
| 'neon': '#00F5FF', | |
| 'dark': '#00A8B5' | |
| }, | |
| magenta: { | |
| 'neon': '#FF00FF', | |
| 'dark': '#B500B5' | |
| }, | |
| blue: { | |
| 'neon': '#0066FF', | |
| 'dark': '#0044AA' | |
| } | |
| }, | |
| fontFamily: { | |
| 'sans': ['Inter', 'sans-serif'], | |
| 'display': ['Poppins', 'sans-serif'] | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 5s infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap'); | |
| body { | |
| background-color: #0a0a0a; | |
| color: #f5f5f5; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .neon-text-teal { | |
| text-shadow: 0 0 5px rgba(0, 245, 255, 0.5); | |
| } | |
| .neon-text-magenta { | |
| text-shadow: 0 0 5px rgba(255, 0, 255, 0.5); | |
| } | |
| .neon-glow-teal { | |
| box-shadow: 0 0 15px rgba(0, 245, 255, 0.5); | |
| } | |
| .neon-glow-magenta { | |
| box-shadow: 0 0 15px rgba(255, 0, 255, 0.5); | |
| } | |
| .neon-border-teal { | |
| border: 2px solid rgba(0, 245, 255, 0.5); | |
| box-shadow: 0 0 10px rgba(0, 245, 255, 0.3); | |
| } | |
| .app-screen { | |
| border-radius: 30px; | |
| background: linear-gradient(145deg, #1a1a1a, #0d0d0d); | |
| box-shadow: 20px 20px 60px #080808, -20px -20px 60px #1c1c1c; | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .testimonial-card { | |
| background: linear-gradient(145deg, #1a1a1a, #0d0d0d); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-black bg-opacity-80 backdrop-blur-md fixed w-full z-50 border-b border-gray-800"> | |
| <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"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="text-2xl font-display font-bold bg-gradient-to-r from-teal-neon to-blue-neon bg-clip-text text-transparent">TasteTrail</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="#features" class="text-gray-300 hover:text-teal-neon px-3 py-2 rounded-md text-sm font-medium transition-colors">Features</a> | |
| <a href="#community" class="text-gray-300 hover:text-magenta-neon px-3 py-2 rounded-md text-sm font-medium transition-colors">Community</a> | |
| <a href="#testimonials" class="text-gray-300 hover:text-blue-neon px-3 py-2 rounded-md text-sm font-medium transition-colors">Testimonials</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <button class="ml-8 px-6 py-2 rounded-full font-medium bg-gradient-to-r from-teal-neon to-blue-neon text-black hover:opacity-90 transition-opacity"> | |
| Join the Trail | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-5xl md:text-6xl lg:text-7xl font-display font-bold leading-tight mb-6"> | |
| <span class="neon-text-teal">Follow</span> | |
| <span class="neon-text-magenta">the</span> | |
| <span class="neon-text-teal">Flavor</span> | |
| </h1> | |
| <p class="text-xl text-gray-300 mb-8 max-w-lg"> | |
| Discover, create, and share culinary masterpieces with a global community of food enthusiasts. Your next favorite recipe is just a scroll away. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="px-8 py-4 rounded-full font-bold bg-gradient-to-r from-teal-neon to-blue-neon text-black hover:opacity-90 transition-opacity neon-glow-teal"> | |
| Share Your First Recipe | |
| </button> | |
| <button class="px-8 py-4 rounded-full font-bold border-2 border-teal-neon text-teal-neon hover:bg-teal-neon hover:bg-opacity-10 transition-colors"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="app-screen w-80 mx-auto relative z-10 animation-float"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-teal-neon to-blue-neon rounded-3xl opacity-50 blur"></div> | |
| <div class="relative bg-black rounded-3xl overflow-hidden h-full w-full"> | |
| <div class="h-8 flex items-center px-4 border-b border-gray-800"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-teal-neon to-blue-neon flex items-center justify-center"> | |
| <i class="fas fa-utensils text-black"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="font-bold">Chef_Maria</div> | |
| <div class="text-xs text-gray-400">2 hours ago</div> | |
| </div> | |
| </div> | |
| <div class="mb-3 text-sm"> | |
| Just made this amazing Thai Green Curry! Recipe in comments 👇 | |
| </div> | |
| <div class="rounded-xl overflow-hidden mb-3 h-48 bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center"> | |
| <i class="fas fa-image text-gray-600 text-4xl"></i> | |
| </div> | |
| <div class="flex justify-between text-gray-400 text-sm"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-heart text-magenta-neon mr-1"></i> | |
| <span>248</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comment text-blue-neon mr-1"></i> | |
| <span>42</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bookmark text-teal-neon mr-1"></i> | |
| <span>Save</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-10 -left-10 w-40 h-40 rounded-full bg-magenta-neon opacity-20 blur-3xl"></div> | |
| <div class="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-blue-neon opacity-20 blur-3xl"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-display font-bold mb-4"> | |
| <span class="neon-text-teal">Features</span> | |
| <span class="neon-text-magenta">That</span> | |
| <span class="neon-text-blue">Inspire</span> | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| TasteTrail is packed with features designed to help you discover, create, and share amazing recipes. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card bg-gray-900 rounded-2xl p-8 neon-border-teal"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-r from-teal-neon to-blue-neon flex items-center justify-center mb-6"> | |
| <i class="fas fa-compass text-black text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Discover Recipes</h3> | |
| <p class="text-gray-400"> | |
| Explore a constantly updated feed of recipes from chefs and home cooks around the world. Filter by cuisine, dietary needs, or cooking time. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card bg-gray-900 rounded-2xl p-8 neon-border-teal"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-r from-magenta-neon to-blue-neon flex items-center justify-center mb-6"> | |
| <i class="fas fa-camera text-black text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Share Your Creations</h3> | |
| <p class="text-gray-400"> | |
| Upload photos of your dishes with step-by-step instructions. Get feedback and appreciation from the community. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card bg-gray-900 rounded-2xl p-8 neon-border-teal"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-r from-blue-neon to-teal-neon flex items-center justify-center mb-6"> | |
| <i class="fas fa-users text-black text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Follow Food Creators</h3> | |
| <p class="text-gray-400"> | |
| Build your network by following chefs, food bloggers, and fellow cooking enthusiasts. Get notified when they post new recipes. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card bg-gray-900 rounded-2xl p-8 neon-border-teal"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-r from-teal-neon to-magenta-neon flex items-center justify-center mb-6"> | |
| <i class="fas fa-heart text-black text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Like & Comment</h3> | |
| <p class="text-gray-400"> | |
| Show appreciation for recipes you love and leave helpful comments. Start conversations about cooking techniques and variations. | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card bg-gray-900 rounded-2xl p-8 neon-border-teal"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-r from-blue-neon to-magenta-neon flex items-center justify-center mb-6"> | |
| <i class="fas fa-bookmark text-black text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Save Recipes</h3> | |
| <p class="text-gray-400"> | |
| Organize your favorite recipes into collections. Access them anytime, even offline, with our mobile app. | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card bg-gray-900 rounded-2xl p-8 neon-border-teal"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-r from-magenta-neon to-teal-neon flex items-center justify-center mb-6"> | |
| <i class="fas fa-shopping-basket text-black text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Shopping Lists</h3> | |
| <p class="text-gray-400"> | |
| Automatically generate shopping lists from recipes you want to try. Share lists with family members or sync with grocery delivery apps. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section id="community" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gradient-to-br from-gray-900 to-black rounded-3xl my-12"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-display font-bold mb-6"> | |
| <span class="neon-text-magenta">Join</span> | |
| <span class="neon-text-blue">Our</span> | |
| <span class="neon-text-teal">Community</span> | |
| </h2> | |
| <p class="text-xl text-gray-400 mb-8"> | |
| TasteTrail is more than an app—it's a global community of food lovers. Connect with people who share your passion for cooking. | |
| </p> | |
| <div class="flex flex-wrap gap-4 mb-8"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-teal-neon to-blue-neon flex items-center justify-center"> | |
| <i class="fas fa-check text-black text-xs"></i> | |
| </div> | |
| <span class="ml-2 font-medium">1M+ Recipes</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-magenta-neon to-blue-neon flex items-center justify-center"> | |
| <i class="fas fa-check text-black text-xs"></i> | |
| </div> | |
| <span class="ml-2 font-medium">500K+ Chefs</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-neon to-teal-neon flex items-center justify-center"> | |
| <i class="fas fa-check text-black text-xs"></i> | |
| </div> | |
| <span class="ml-2 font-medium">100+ Cuisines</span> | |
| </div> | |
| </div> | |
| <button class="px-8 py-3 rounded-full font-bold bg-gradient-to-r from-magenta-neon to-blue-neon text-black hover:opacity-90 transition-opacity neon-glow-magenta"> | |
| Join the Trail | |
| </button> | |
| </div> | |
| <div class="lg:w-1/2 grid grid-cols-2 gap-4"> | |
| <div class="rounded-xl overflow-hidden h-48 bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-pizza-slice text-teal-neon text-4xl"></i> | |
| </div> | |
| <div class="rounded-xl overflow-hidden h-48 bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-ice-cream text-magenta-neon text-4xl"></i> | |
| </div> | |
| <div class="rounded-xl overflow-hidden h-48 bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-drumstick-bite text-blue-neon text-4xl"></i> | |
| </div> | |
| <div class="rounded-xl overflow-hidden h-48 bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-leaf text-teal-neon text-4xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-display font-bold mb-4"> | |
| <span class="neon-text-blue">What</span> | |
| <span class="neon-text-magenta">Our</span> | |
| <span class="neon-text-teal">Community Says</span> | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Hear from food creators who've transformed their cooking journey with TasteTrail. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card rounded-2xl p-8 relative overflow-hidden"> | |
| <div class="absolute -top-10 -right-10 w-32 h-32 rounded-full bg-teal-neon opacity-10 blur-3xl"></div> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-teal-neon to-blue-neon flex items-center justify-center"> | |
| <i class="fas fa-user text-black"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Chef Marco</h4> | |
| <p class="text-sm text-gray-400">Professional Chef</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic"> | |
| "TasteTrail has revolutionized how I share my recipes. The engagement from the community is incredible—I've gained so many new followers who appreciate authentic Italian cuisine." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <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> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card rounded-2xl p-8 relative overflow-hidden"> | |
| <div class="absolute -top-10 -right-10 w-32 h-32 rounded-full bg-magenta-neon opacity-10 blur-3xl"></div> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-magenta-neon to-blue-neon flex items-center justify-center"> | |
| <i class="fas fa-user text-black"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Sarah K.</h4> | |
| <p class="text-sm text-gray-400">Home Cook</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic"> | |
| "As someone who just started cooking, TasteTrail has been a game-changer. The step-by-step photos and helpful comments make even complex recipes approachable." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <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> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card rounded-2xl p-8 relative overflow-hidden"> | |
| <div class="absolute -top-10 -right-10 w-32 h-32 rounded-full bg-blue-neon opacity-10 blur-3xl"></div> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-neon to-teal-neon flex items-center justify-center"> | |
| <i class="fas fa-user text-black"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Priya M.</h4> | |
| <p class="text-sm text-gray-400">Food Blogger</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic"> | |
| "My food blog traffic has doubled since I started cross-posting on TasteTrail. The algorithm really helps quality content get discovered by the right audience." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <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-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="bg-gradient-to-r from-gray-900 to-black rounded-3xl p-12 text-center relative overflow-hidden"> | |
| <div class="absolute -top-20 -left-20 w-64 h-64 rounded-full bg-teal-neon opacity-10 blur-3xl"></div> | |
| <div class="absolute -bottom-20 -right-20 w-64 h-64 rounded-full bg-magenta-neon opacity-10 blur-3xl"></div> | |
| <h2 class="text-3xl md:text-4xl font-display font-bold mb-6"> | |
| <span class="neon-text-teal">Ready</span> | |
| <span class="neon-text-magenta">to</span> | |
| <span class="neon-text-blue">Join?</span> | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-2xl mx-auto mb-8"> | |
| Download TasteTrail today and start your culinary journey with millions of food enthusiasts worldwide. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <button class="px-8 py-4 rounded-full font-bold bg-gradient-to-r from-teal-neon to-blue-neon text-black hover:opacity-90 transition-opacity neon-glow-teal flex items-center justify-center"> | |
| <i class="fab fa-apple mr-3"></i> | |
| <div> | |
| <div class="text-xs">Download on the</div> | |
| <div class="text-lg">App Store</div> | |
| </div> | |
| </button> | |
| <button class="px-8 py-4 rounded-full font-bold bg-gradient-to-r from-magenta-neon to-blue-neon text-black hover:opacity-90 transition-opacity neon-glow-magenta flex items-center justify-center"> | |
| <i class="fab fa-google-play mr-3"></i> | |
| <div> | |
| <div class="text-xs">Get it on</div> | |
| <div class="text-lg">Google Play</div> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black bg-opacity-50 py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div class="md:col-span-2"> | |
| <h3 class="text-2xl font-display font-bold mb-4 bg-gradient-to-r from-teal-neon to-blue-neon bg-clip-text text-transparent">TasteTrail</h3> | |
| <p class="text-gray-400 mb-6"> | |
| Follow the flavor with TasteTrail—the ultimate platform for discovering and sharing culinary creations. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-teal-neon hover:bg-teal-neon hover:text-black transition-colors"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-magenta-neon hover:bg-magenta-neon hover:text-black transition-colors"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-blue-neon hover:bg-blue-neon hover:text-black transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:bg-gray-700 hover:text-white transition-colors"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-gray-300">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-teal-neon transition-colors">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-magenta-neon transition-colors">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-neon transition-colors">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-teal-neon transition-colors">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-gray-300">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-magenta-neon transition-colors">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-neon transition-colors">Community</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-teal-neon transition-colors">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-magenta-neon transition-colors">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0"> | |
| © 2023 TasteTrail. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition-colors">Terms</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition-colors">Privacy</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition-colors">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple mobile menu toggle functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| const expanded = this.getAttribute('aria-expanded') === 'true'; | |
| this.setAttribute('aria-expanded', !expanded); | |
| // In a real implementation, you would toggle a mobile menu here | |
| alert('Mobile menu would open here in a full implementation.'); | |
| }); | |
| // Add animation to feature cards on scroll | |
| const featureCards = document.querySelectorAll('.feature-card'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| featureCards.forEach(card => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| card.style.transition = 'all 0.6s ease'; | |
| observer.observe(card); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=julius205/recipeapp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |