tidal-cafe

byAryan jaiswara

Build a stunning, premium single-page website for "Social Sky Cafe" (सोशल स्काई कैफे) — a women-owned rooftop cafe rated 4.9★ in Gomti Nagar, Lucknow. The site must feel like a ₹50,000 custom build. === REAL PHOTO INTEGRATION === - All image slots use <img> tags with clear labels: id="hero-bg", id="about-img", id="food-1" through id="food-8", id="gallery-1" through id="gallery-12" - Add a comment above each: <!-- REPLACE WITH REAL PHOTO --> - Use elegant dark placeholder divs with camera icon + label as fallback - CSS class .cafe-photo on every image for easy batch replacement === TECH STACK (CDN only, no npm) === - GSAP 3 + ScrollTrigger (cdn.jsdelivr.net) - Vanilla Tilt.js - Particles.js - Three.js (r128) - Google Fonts: Playfair Display, Poppins, Dancing Script === DESIGN SYSTEM === Colors: --night: #0A0A1A (deep background) --gold: #F5A623 (coffee warmth, CTAs) --teal: #00D4AA (sky/rooftop accent) --rose: #E8A598 (women-owned warmth) --cream: #F8F5F0 (body text) Typography: Headings → Playfair Display Body → Poppins Accents → Dancing Script (Hindi phrases) === SECTIONS === ── 1. NAVBAR ────────────────────────────────────────── - Transparent on load → frosted glass on scroll - Logo left: "Social Sky Cafe" in Playfair + teal glow - Nav links: Home | Menu | About | Gallery | Reserve - Sticky, slide-down on scroll-up / hide on scroll-down - Mobile: hamburger menu with full-screen overlay ── 2. HERO ──────────────────────────────────────────── - Full-viewport height - id="hero-bg" as background image with dark overlay - Three.js canvas layer: floating 3D golden coffee cup rotating slowly above the text - Typewriter effect: "Where the Sky Meets Your Soul" - Subtext: "3rd Floor Rooftop · Gomti Nagar · Open till 11:30 PM" - Particles.js: floating warm golden dust particles - Two CTA buttons: [Reserve a Table] — gold, magnetic hover, ripple click [View Menu] — outline teal, same effects - Custom glowing cursor (gold dot + ring) throughout site - Scroll indicator: animated chevron bounce ── 3. ABOUT ─────────────────────────────────────────── - Split layout: left = stacked real photos (id="about-1", "about-2") with parallax depth offset; right = text + stats - Animated counters on scroll: 4.9★ | 29 Reviews | 3+ Years - Women-owned shimmer badge - Glassmorphism info card: address + hours + price range - Hindi pull-quote in Dancing Script: "आइए, बैठिए, और आसमान को छूइए" ── 4. MENU ──────────────────────────────────────────── - Tab switcher: All | Food | Drinks | Desserts - Animated filter transitions (fade + scale) - 3D Vanilla Tilt flip-cards for each item: Front: photo (id="food-N"), dish name, price Back: short description, "Add to Wishlist" heart - Featured badges: ⭐ Spring Rolls ⭐ Honey Chili Potato ⭐ Great Coffee ⭐ Rooftop Desserts - Price range note: ₹800–₹1,000 per person ── 5. ROOFTOP EXPERIENCE ────────────────────────────── - Dark parallax section with twinkling star canvas - Floating animated CSS clouds drifting left to right - Three staggered text reveals on scroll: "3rd Floor Magic" | "Desert Air Coolers" | "Open Till 11:30 PM" - Ambient city-glow gradient from bottom - Mood line: "Feel the breeze. Taste the sky." ── 6. SERVICES ──────────────────────────────────────── - 6-card grid, staggered GSAP entrance on scroll: 🍽 Dine-in 🚗 Drive-through 📦 Takeaway 🛵 Delivery 🥡 Kerbside Pickup 📵 No-contact Delivery - Neon border glow on hover, glassmorphism background - Highlights row below: Rooftop Seating | Free Wi-Fi | Kids Menu | Dogs Allowed | Free Parking | All Payments ── 7. GALLERY ───────────────────────────────────────── - Masonry grid, images id="gallery-1" through "gallery-12" - Filter buttons: All | Food & Drink | Vibe | Rooftop - Hover: zoom + teal overlay + caption slide-up - Click: lightbox with prev/next navigation - GSAP stagger entrance on first load ── 8. REVIEWS ───────────────────────────────────────── - 3D rotating carousel (perspective CSS + JS) - 3 real reviews: ★★★★★ Parwaiz Qamar — "Spring rolls and Honey Chili Potato are amazing. Rooftop terrace with cool desert air coolers. Best prices in town." ★★★★★ Rashi Singh — "Perfect hangout for friends and family. Great vibes. Highly recommend for get-togethers." ★★★★★ Abhishek Nishad — "Bahut badhiya cafe. Ghar jaisa feel. Khana aur view dono manmohak hain." - Stars animate (fill one by one) as card enters viewport - Google badge: "4.9 ★ · 29 Reviews on Google" with pulse ── 9. WHATSAPP BUTTON ───────────────────────────────── - Floating fixed bottom-right WhatsApp button - Number: [phone] - Link: https://wa.me/919651779889 - Pulse ring animation, tooltip on hover: "Chat with us!" - Green glow, bounces in after 3s delay - On mobile: slightly larger for easy tap ── 10. RESERVATION FORM ─────────────────────────────── - Full-width section with parallax background - Glassmorphism form panel, gold border glow - Fields: Full Name | Phone Number Date | Time (dropdown: 10AM–11PM) Party Size (1–20, stepper UI) Seating Preference: Indoor / Rooftop / No Preference Special Requests (textarea) - [Book My Table] button — gold, shimmer idle animation, loading spinner on click - On submit: success animation (confetti burst) + message: "Your table is reserved! We'll call you to confirm." - Below form: OR divider → WhatsApp booking alternative button ── 11. INFO & MAP ───────────────────────────────────── - Two-column: left = Google Maps embed (Gomti Nagar, Lucknow), right = animated info cards: 📍 3rd Floor, Sec-6, Malasia, Near Indian Oil Petrol Pump, Gomti Nagar, Mau, Lucknow 226010 📞 [phone] 🕐 Open Daily · Closes 11:30 PM 💰 ₹800–₹1,000 per person 🐕 Dogs allowed outside 🅿️ Free parking available - [Get Directions] button links to Google Maps - Cards slide in from right on scroll ── 12. FOOTER ───────────────────────────────────────── - Deep dark (#0A0A1A) with Particles.js star field - Logo + women-owned badge + rose gold shimmer - Quick links | Hours | Social media placeholder icons - Bottom bar: "© 2025 Social Sky Cafe · Made with ☕ in Lucknow" - Hindi sign-off: "फिर मिलेंगे ☁️" === GLOBAL ANIMATIONS === - Custom cursor: gold dot + expanding ring, color-shifts on links - Page load: cinematic black fade-out revealing hero - Every section heading: split-text char-by-char entrance - All cards: Vanilla Tilt (max 15°, glare enabled) - Buttons: magnetic pull toward cursor (±20px), ripple on click - Scroll progress bar at very top of page (gold) - Section transitions: smooth color temperature shifts === MOBILE RESPONSIVE === - Hamburger nav with full-screen dark overlay - Stacked layouts on < 768px - Touch-friendly tilt (disabled, replaced with tap glow) - WhatsApp button always visible + tappable === OUTPUT === Single HTML file. All CSS in <style>, all JS in <script>. No build tools. Open index.html and it works.