| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Menu | Neon Bean</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;700&family=Share+Tech+Mono&display=swap" rel="stylesheet"> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
| <style> |
| @keyframes neonPulse { |
| 0%, 100% { text-shadow: 0 0 5px #00f0ff, 0 0 10px #00f0ff; } |
| 50% { text-shadow: 0 0 20px #00f0ff, 0 0 30px #00f0ff; } |
| } |
| .neon-text { |
| animation: neonPulse 2s infinite alternate; |
| } |
| .cyber-border { |
| position: relative; |
| } |
| .cyber-border::after { |
| content: ''; |
| position: absolute; |
| bottom: -5px; |
| left: 0; |
| width: 100%; |
| height: 2px; |
| background: linear-gradient(90deg, transparent, #00f0ff, transparent); |
| } |
| .menu-category:hover .category-icon { |
| transform: rotate(10deg) scale(1.1); |
| } |
| #vanta-bg { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| opacity: 0.7; |
| } |
| </style> |
| </head> |
| <body class="bg-cyber-900 text-gray-200 font-sans min-h-screen overflow-x-hidden"> |
| <div id="vanta-bg"></div> |
| |
| <header class="container mx-auto px-4 py-6 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="coffee" class="text-neon-500 w-8 h-8"></i> |
| <h1 class="text-3xl font-bold text-neon-500 neon-text font-mono">NEON BEAN</h1> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="index.html" class="text-neon-400 hover:text-neon-500 font-medium cyber-border">HOME</a> |
| <a href="menu.html" class="text-neon-500 font-medium cyber-border">MENU</a> |
| <a href="#" class="text-neon-400 hover:text-neon-500 font-medium cyber-border">EVENTS</a> |
| <a href="#" class="text-neon-400 hover:text-neon-500 font-medium cyber-border">CONTACT</a> |
| </nav> |
| <button class="md:hidden text-neon-500" id="menu-toggle"> |
| <i data-feather="menu"></i> |
| </button> |
| </header> |
|
|
| <main class="container mx-auto px-4 py-12"> |
| <section class="mb-20 text-center"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-6 neon-text">DIGITAL <span class="text-neon-500">MENU</span></h2> |
| <p class="text-lg text-gray-300 max-w-2xl mx-auto"> |
| Our menu items are constantly evolving like the latest software update. Select any category to view our current offerings. |
| </p> |
| </section> |
|
|
| <section class="mb-20"> |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <a href="#coffees" class="menu-category bg-cyber-800 p-6 rounded-sm border border-neon-500 hover:border-neon-400 transition-all duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="category-icon bg-cyber-900 p-3 rounded-full mr-4 transition-transform duration-300"> |
| <i data-feather="coffee" class="text-neon-500 w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold text-neon-400">COFFEES</h3> |
| </div> |
| <p class="text-gray-300">From classic espresso to quantum-infused brews</p> |
| </a> |
|
|
| <a href="#teas" class="menu-category bg-cyber-800 p-6 rounded-sm border border-neon-500 hover:border-neon-400 transition-all duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="category-icon bg-cyber-900 p-3 rounded-full mr-4 transition-transform duration-300"> |
| <i data-feather="feather" class="text-neon-500 w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold text-neon-400">TEAS & MORE</h3> |
| </div> |
| <p class="text-gray-300">Traditional and cyber-enhanced tea experiences</p> |
| </a> |
|
|
| <a href="#food" class="menu-category bg-cyber-800 p-6 rounded-sm border border-neon-500 hover:border-neon-400 transition-all duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="category-icon bg-cyber-900 p-3 rounded-full mr-4 transition-transform duration-300"> |
| <i data-feather="cpu" class="text-neon-500 w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold text-neon-400">CYBER SNACKS</h3> |
| </div> |
| <p class="text-gray-300">Nutrient-packed bites for optimal performance</p> |
| </a> |
|
|
| <a href="#cocktails" class="menu-category bg-cyber-800 p-6 rounded-sm border border-neon-500 hover:border-neon-400 transition-all duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="category-icon bg-cyber-900 p-3 rounded-full mr-4 transition-transform duration-300"> |
| <i data-feather="droplet" class="text-neon-500 w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold text-neon-400">NIGHT MODE</h3> |
| </div> |
| <p class="text-gray-300">After-dark cocktails with glowing enhancements</p> |
| </a> |
|
|
| <a href="#specials" class="menu-category bg-cyber-800 p-6 rounded-sm border border-neon-500 hover:border-neon-400 transition-all duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="category-icon bg-cyber-900 p-3 rounded-full mr-4 transition-transform duration-300"> |
| <i data-feather="zap" class="text-neon-500 w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold text-neon-400">SPECIALS</h3> |
| </div> |
| <p class="text-gray-300">Limited-time experimental brews</p> |
| </a> |
|
|
| <a href="#merch" class="menu-category bg-cyber-800 p-6 rounded-sm border border-neon-500 hover:border-neon-400 transition-all duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="category-icon bg-cyber-900 p-3 rounded-full mr-4 transition-transform duration-300"> |
| <i data-feather="shopping-bag" class="text-neon-500 w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold text-neon-400">CYBER MERCH</h3> |
| </div> |
| <p class="text-gray-300">Wearable tech and collectibles</p> |
| </a> |
| </div> |
| </section> |
|
|
| <section id="coffees" class="mb-20"> |
| <h3 class="text-3xl font-bold mb-8 cyber-border inline-block pb-2"> |
| <i data-feather="coffee" class="inline mr-2"></i> COFFEE SELECTION |
| </h3> |
| |
| <div class="grid md:grid-cols-2 gap-6"> |
| |
| <div class="bg-cyber-800 p-6 rounded-sm border-l-4 border-neon-500"> |
| <h4 class="text-xl font-bold text-neon-400 mb-6 flex items-center"> |
| <i data-feather="thermometer" class="mr-2"></i> HOT COFFEES |
| </h4> |
| <div class="space-y-6"> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">NEURAL JOLT</h5> |
| <p class="text-sm text-gray-400">Triple espresso with smart-drug enhancers</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽350</span> |
| </div> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">CYBER LATTE</h5> |
| <p class="text-sm text-gray-400">Steamed milk with espresso and LED syrup art</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽300</span> |
| </div> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">HOLO-MOCHA</h5> |
| <p class="text-sm text-gray-400">Chocolate-hologram powder with espresso</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽380</span> |
| </div> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h5 class="font-bold">QUANTUM AMERICANO</h5> |
| <p class="text-sm text-gray-400">Espresso with hot water that changes flavor as it cools</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽320</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-cyber-800 p-6 rounded-sm border-l-4 border-neon-500"> |
| <h4 class="text-xl font-bold text-neon-400 mb-6 flex items-center"> |
| <i data-feather="wind" class="mr-2"></i> COLD BREWS |
| </h4> |
| <div class="space-y-6"> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">HACKER'S HAZE</h5> |
| <p class="text-sm text-gray-400">Cold brew with glowing cyber-mint and nootropics</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽400</span> |
| </div> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">NITRO OVERDRIVE</h5> |
| <p class="text-sm text-gray-400">Nitrogen-infused cold brew with edible glitter</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽450</span> |
| </div> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">DATA DROP</h5> |
| <p class="text-sm text-gray-400">Cold brew with coconut data-chips and lavender</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽420</span> |
| </div> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h5 class="font-bold">GLITCH SHAKE</h5> |
| <p class="text-sm text-gray-400">Iced coffee milkshake that changes flavor randomly</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽480</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="teas" class="mb-20"> |
| <h3 class="text-3xl font-bold mb-8 cyber-border inline-block pb-2"> |
| <i data-feather="feather" class="inline mr-2"></i> TEAS & MORE |
| </h3> |
| |
| <div class="grid md:grid-cols-2 gap-6"> |
| |
| <div class="bg-cyber-800 p-6 rounded-sm border-l-4 border-neon-500"> |
| <h4 class="text-xl font-bold text-neon-400 mb-6 flex items-center"> |
| <i data-feather="cloud-rain" class="mr-2"></i> TEA SELECTION |
| </h4> |
| <div class="space-y-6"> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">BINARY BUBBLE</h5> |
| <p class="text-sm text-gray-400">Matcha latte with quantum foam and holographic flakes</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽450</span> |
| </div> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">CHAI OS</h5> |
| <p class="text-sm text-gray-400">Spiced chai with customizable spice levels (mild to kernel panic)</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽380</span> |
| </div> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">ERROR 418</h5> |
| <p class="text-sm text-gray-400">I'm a teapot - hibiscus brew with glowing ice cubes</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽400</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-cyber-800 p-6 rounded-sm border-l-4 border-neon-500"> |
| <h4 class="text-xl font-bold text-neon-400 mb-6 flex items-center"> |
| <i data-feather="activity" class="mr-2"></i> ENHANCEMENTS |
| </h4> |
| <div class="space-y-6"> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">MEMORY LEAK</h5> |
| <p class="text-sm text-gray-400">Lemonade with recall-enhancing herbs and glow dust</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽350</span> |
| </div> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">SYNAPSE SPRITZ</h5> |
| <p class="text-sm text-gray-400">Sparkling water with neural-boosting compounds</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽320</span> |
| </div> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h5 class="font-bold">ROOT ACCESS</h5> |
| <p class="text-sm text-gray-400">Kombucha with adaptogenic mushrooms and neon roots</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽420</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="food" class="mb-20"> |
| <h3 class="text-3xl font-bold mb-8 cyber-border inline-block pb-2"> |
| <i data-feather="cpu" class="inline mr-2"></i> CYBER SNACKS |
| </h3> |
| |
| <div class="grid md:grid-cols-2 gap-6"> |
| |
| <div class="bg-cyber-800 p-6 rounded-sm border-l-4 border-neon-500"> |
| <h4 class="text-xl font-bold text-neon-400 mb-6 flex items-center"> |
| <i data-feather="heart" class="mr-2"></i> SWEET BYTES |
| </h4> |
| <div class="space-y-6"> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">COOKIE.CACHE</h5> |
| <p class="text-sm text-gray-400">Warm cookies with encrypted chocolate chips</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽280</span> |
| </div> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">NANOBREAD</h5> |
| <p class="text-sm text-gray-400">Mini pastries that expand when dipped in liquid</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽320</span> |
| </div> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h5 class="font-bold">HONEYPOT DONUT</h5> |
| <p class="text-sm text-gray-400">Glazed donut with cybersecurity-themed sprinkles</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽250</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-cyber-800 p-6 rounded-sm border-l-4 border-neon-500"> |
| <h4 class="text-xl font-bold text-neon-400 mb-6 flex items-center"> |
| <i data-feather="zap" class="mr-2"></i> SAVORY SNACKS |
| </h4> |
| <div class="space-y-6"> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">RAM CHIPS</h5> |
| <p class="text-sm text-gray-400">Upgradeable chips with dip modules (salsa, queso, guac)</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽350</span> |
| </div> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">CYBER SANDWICH</h5> |
| <p class="text-sm text-gray-400">Modular sandwich with protein, veggie and sauce options</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽420</span> |
| </div> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h5 class="font-bold">HOTFIX WRAP</h5> |
| <p class="text-sm text-gray-400">Emergency nutrition wrap with quick-release carbs</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽380</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="cocktails" class="mb-20"> |
| <h3 class="text-3xl font-bold mb-8 cyber-border inline-block pb-2"> |
| <i data-feather="moon" class="inline mr-2"></i> NIGHT MODE |
| </h3> |
| <p class="text-lg text-gray-300 mb-8">Available after 8PM - IDs required for alcohol service</p> |
| |
| <div class="grid md:grid-cols-2 gap-6"> |
| |
| <div class="bg-cyber-800 p-6 rounded-sm border-l-4 border-neon-500"> |
| <h4 class="text-xl font-bold text-neon-400 mb-6 flex items-center"> |
| <i data-feather="droplet" class="mr-2"></i> CYBER COCKTAILS |
| </h4> |
| <div class="space-y-6"> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">BLUE SCREEN</h5> |
| <p class="text-sm text-gray-400">Vodka, blue curaçao, lime, and emergency reboot bitters</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽550</span> |
| </div> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">KERNEL PANIC</h5> |
| <p class="text-sm text-gray-400">Tequila, chili, grapefruit, and glowing smoke</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽600</span> |
| </div> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">SEGFAULT</h5> |
| <p class="text-sm text-gray-400">Layered cocktail that changes color when disturbed</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽580</span> |
| </div> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h5 class="font-bold">404 NOT FOUND</h5> |
| <p class="text-sm text-gray-400">Mystery cocktail - different each time</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽500</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-cyber-800 p-6 rounded-sm border-l-4 border-neon-500"> |
| <h4 class="text-xl font-bold text-neon-400 mb-6 flex items-center"> |
| <i data-feather="code" class="mr-2"></i> ZERO-PROOF |
| </h4> |
| <div class="space-y-6"> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">SYNTAX HIGHLIGHT</h5> |
| <p class="text-sm text-gray-400">Layered fruit juices with glowing ice core</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽450</span> |
| </div> |
| <div class="flex justify-between items-start border-b border-cyber-700 pb-4"> |
| <div> |
| <h5 class="font-bold">VIRTUAL MARTINI</h5> |
| <p class="text-sm text-gray-400">Botanical infusion with olive foam and LED stirrer</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽480</span> |
| </div> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h5 class="font-bold">CLOUD COLADA</h5> |
| <p class="text-sm text-gray-400">Foamy pineapple-coconut with dry ice vapor</p> |
| </div> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽420</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="specials" class="mb-20"> |
| <h3 class="text-3xl font-bold mb-8 cyber-border inline-block pb-2"> |
| <i data-feather="zap" class="inline mr-2"></i> SPECIALS |
| </h3> |
| <p class="text-lg text-gray-300 mb-8">Experimental or limited-time offerings - availability varies</p> |
| |
| <div class="grid md:grid-cols-2 gap-6"> |
| <div class="bg-cyber-800 p-6 rounded-sm border border-neon-500"> |
| <div class="flex justify-between items-start mb-4"> |
| <h4 class="text-xl font-bold text-neon-400">TODAY'S ALGORITHM</h4> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽VARIES</span> |
| </div> |
| <p class="text-gray-300 mb-4">Our AI barista creates a custom drink based on your preferences, the weather, and trending flavors.</p> |
| <div class="flex items-center text-sm text-neon-400"> |
| <i data-feather="alert-circle" class="mr-2 w-4 h-4"></i> |
| <span>Requires biometric scan for personalization</span> |
| </div> |
| </div> |
|
|
| <div class="bg-cyber-800 p-6 rounded-sm border border-neon-500"> |
| <div class="flex justify-between items-start mb-4"> |
| <h4 class="text-xl font-bold text-neon-400">NEURAL NETWORK</h4> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽650</span> |
| </div> |
| <p class="text-gray-300 mb-4">Shared drink experience for 2-4 people with interactive flavor development.</p> |
| <div class="flex items-center text-sm text-neon-400"> |
| <i data-feather="users" class="mr-2 w-4 h-4"></i> |
| <span>Recommended for groups</span> |
| </div> |
| </div> |
|
|
| <div class="bg-cyber-800 p-6 rounded-sm border border-neon-500"> |
| <div class="flex justify-between items-start mb-4"> |
| <h4 class="text-xl font-bold text-neon-400">HARDWARE UPGRADE</h4> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽750</span> |
| </div> |
| <p class="text-gray-300 mb-4">Premium coffee with rare beans, served with smart-drug enhancers and nutrient boosters.</p> |
| <div class="flex items-center text-sm text-neon-400"> |
| <i data-feather="star" class="mr-2 w-4 h-4"></i> |
| <span>Limited daily availability</span> |
| </div> |
| </div> |
|
|
| <div class="bg-cyber-800 p-6 rounded-sm border border-neon-500"> |
| <div class="flex justify-between items-start mb-4"> |
| <h4 class="text-xl font-bold text-neon-400">PATCH TUESDAY</h4> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽400</span> |
| </div> |
| <p class="text-gray-300 mb-4">Every Tuesday: discounted experimental brews with unexpected flavor combinations.</p> |
| <div class="flex items-center text-sm text-neon-400"> |
| <i data-feather="clock" class="mr-2 w-4 h-4"></i> |
| <span>Tuesdays only</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="merch" class="mb-20"> |
| <h3 class="text-3xl font-bold mb-8 cyber-border inline-block pb-2"> |
| <i data-feather="shopping-bag" class="inline mr-2"></i> CYBER MERCH |
| </h3> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-cyber-800 p-6 rounded-sm border border-neon-500 group overflow-hidden"> |
| <div class="h-48 bg-cyber-700 mb-4 flex items-center justify-center overflow-hidden"> |
| <img src="http://static.photos/technology/320x240/1" alt="Neon Mug" class="h-full w-full object-cover group-hover:scale-110 transition-transform duration-500"> |
| </div> |
| <h4 class="text-xl font-bold text-neon-400 mb-2">NEON MUG</h4> |
| <p class="text-gray-300 mb-4 text-sm">USB-rechargeable mug with temperature control and color-changing exterior.</p> |
| <div class="flex justify-between items-center"> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽1,200</span> |
| <button class="text-neon-400 hover:text-neon-300 text-sm font-bold flex items-center"> |
| ADD TO CART <i data-feather="shopping-cart" class="w-4 h-4 ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="bg-cyber-800 p-6 rounded-sm border border-neon-500 group overflow-hidden"> |
| <div class="h-48 bg-cyber-700 mb-4 flex items-center justify-center overflow-hidden"> |
| <img src="http://static.photos/technology/320x240/2" alt="Hoodie" class="h-full w-full object-cover group-hover:scale-110 transition-transform duration-500"> |
| </div> |
| <h4 class="text-xl font-bold text-neon-400 mb-2">CYBER HOODIE</h4> |
| <p class="text-gray-300 mb-4 text-sm">LED-lined hoodie with customizable light patterns via smartphone app.</p> |
| <div class="flex justify-between items-center"> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽3,500</span> |
| <button class="text-neon-400 hover:text-neon-300 text-sm font-bold flex items-center"> |
| ADD TO CART <i data-feather="shopping-cart" class="w-4 h-4 ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="bg-cyber-800 p-6 rounded-sm border border-neon-500 group overflow-hidden"> |
| <div class="h-48 bg-cyber-700 mb-4 flex items-center justify-center overflow-hidden"> |
| <img src="http://static.photos/technology/320x240/3" alt="Beans" class="h-full w-full object-cover group-hover:scale-110 transition-transform duration-500"> |
| </div> |
| <h4 class="text-xl font-bold text-neon-400 mb-2">SIGNATURE BEANS</h4> |
| <p class="text-gray-300 mb-4 text-sm">250g of our rare cyberpunk blend with smart packaging that tracks freshness.</p> |
| <div class="flex justify-between items-center"> |
| <span class="bg-neon-500 text-cyber-900 px-3 py-1 text-sm font-bold">₽900</span> |
| <button class="text-neon-400 hover:text-neon-300 text-sm font-bold flex items-center"> |
| ADD TO CART <i data-feather="shopping-cart" class="w-4 h-4 ml-2"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <footer class="bg-cyber-800 py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold text-neon-500 mb-4">NEON BEAN</h3> |
| <p class="text-gray-400">Where the future of coffee is being brewed today.</p> |
| <div class="flex space-x-4 mt-4"> |
| <a href="#" class="text-gray-400 hover:text-neon-500"><i data-feather="instagram"></i></a> |
| <a href="#" class="text-gray-400 hover:text-neon-500"><i data-feather="twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-neon-500"><i data-feather="youtube"></i></a> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-4 text-neon-400 cyber-border inline-block">HOURS</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li>Mon-Fri: 7AM - 2AM</li> |
| <li>Sat-Sun: 8AM - 4AM</li> |
| <li>24/7 VR Lounge Access</li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-4 text-neon-400 cyber-border inline-block">LOCATION</h4> |
| <address class="not-italic text-gray-400"> |
| Neon District, Level 3<br> |
| Cyber City 2077<br> |
| Near the Mainframe Hub |
| </address> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-4 text-neon-400 cyber-border inline-block">CONTACT</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li class="flex items-center"><i data-feather="mail" class="mr-2 w-4 h-4"></i> connect@neonbean.cyb</li> |
| <li class="flex items-center"><i data-feather="phone" class="mr-2 w-4 h-4"></i> +7 (905) 2077-1337</li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500"> |
| <p>© 2077 NEON BEAN | All systems operational</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| VANTA.NET({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x00c8ff, |
| backgroundColor: 0x0d0419, |
| points: 10.00, |
| maxDistance: 22.00, |
| spacing: 17.00 |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| |
| |
| document.getElementById('menu-toggle').addEventListener('click', function() { |
| const nav = document.querySelector('nav'); |
| nav.classList.toggle('hidden'); |
| nav.classList.toggle('flex'); |
| nav.classList.toggle('flex-col'); |
| nav.classList.toggle('absolute'); |
| nav.classList.toggle('top-20'); |
| nav.classList.toggle('right-4'); |
| nav.classList.toggle('bg-cyber-800'); |
| nav.classList.toggle('p-4'); |
| nav.classList.toggle('rounded-sm'); |
| nav.classList.toggle('border'); |
| nav.classList.toggle('border-neon-500'); |
| nav.classList.toggle('space-y-4'); |
| nav.classList.toggle('space-x-0'); |
| }); |
| |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
