sluggish-cafe

byMohamed

Build a complete, production-quality website for **Sluggish**, a specialty café in Kuwait. Reference: https://www.instagram.com/p/CxaKKDws_l_/ — match the café's real look, colors and mood from their Instagram. ## Brand & concept - Name: Sluggish. Theme: "slow down." The site celebrates taking your time, slow-brewed coffee and unhurried mornings. It should feel calm, warm, premium and a little playful (a sloth/snail-pace wink is fine, but keep it tasteful, not cartoony). - Palette: [pull from their Instagram — e.g., warm cream, espresso brown, muted sage]. Use CSS variables so it is easy to change. - Typography: one characterful display serif for headings + one clean sans for body. Arabic support with a matching Arabic font (e.g., IBM Plex Sans Arabic or Tajawal). - Bilingual: English + Arabic with a language toggle and full RTL layout for Arabic (mirrored layout, not just translated text). ## Pages / sections 1. **Hero**: full-bleed hero image or short muted looping video of coffee being poured, tagline "[e.g., Good things take time]", primary CTA "View Menu", secondary "Find Us". 2. **Our story**: short, warm copy about the slow-coffee philosophy, with an image. 3. **Menu**: filterable categories (Coffee, Cold Drinks, Tea, Desserts, Breakfast). Each item: name, short description, price in KWD (3 decimals, e.g., 1.750 KWD), optional photo, tags (iced, vegan, signature). Menu data lives in one JSON/array so it's easy to edit. Items: [paste their menu]. 4. **Signature drinks**: horizontal scroll or carousel of 4–6 hero items with large photography. 5. **Gallery**: Instagram-style masonry grid with a lightbox, plus a link to @[their handle]. 6. **Visit us**: address [area, block, street], embedded Google Map, opening hours [hours], with an "Open now / Closed" badge using Kuwait time (Asia/Kuwait). 7. **Contact**: WhatsApp click-to-chat button [number], phone, Instagram, and delivery links (Talabat / Deliveroo / Jahez: [links]). 8. **Footer**: logo, hours, socials, language toggle. ## Motion & smoothness (top priority) - Buttery smooth scrolling (Lenis or native smooth scroll), with scroll-triggered reveals: fade/slide-up, staggered menu items, subtle parallax on hero and gallery images. - Animate only `transform` and `opacity`. Never animate layout properties. Hold a steady 60fps, including on mid-range phones. - Micro-interactions: magnetic/hover-lift buttons, soft image zoom on hover, smooth menu-filter transitions (FLIP/layout animation), page-section transitions that feel slow and luxurious (ease-out, 400–800ms) but never block interaction. - A small, delightful touch tied to the brand (e.g., a slowly drifting steam animation over the hero cup, or a loader that "takes its time" but completes in under 1s). - Respect `prefers-reduced-motion`: disable parallax and large motion when it is set. ## Performance (must hit) - Lighthouse 95+ on Performance, Accessibility, Best Practices and SEO, on mobile. - LCP < 2.0s, CLS < 0.05, INP < 200ms. - Images: AVIF/WebP, responsive `srcset`, lazy-loaded below the fold, explicit width/height, blur-up placeholders. Preload the hero image. - Fonts: self-hosted, subset, `font-display: swap`, preload the display font. - Minimal JS. Code-split, no heavy libraries for things CSS can do. Static/SSG output. ## Quality - Mobile-first, fully responsive (360px → 1920px). Most visitors are on phones in Kuwait. - Accessible: semantic HTML, keyboard navigable, visible focus states, AA contrast, alt text on every image. - SEO: meta tags, Open Graph image, LocalBusiness / CafeOrCoffeeShop JSON-LD schema with address, hours and geo, sitemap, and EN/AR hreflang. - Sticky, minimal header that hides on scroll down and shows on scroll up; mobile slide-in menu. - Clean, organized, componentized code. Content (menu, hours, contact) kept in one editable data file. ## Tech [Let 8080 choose, or specify: e.g., Next.js / Astro + Tailwind + Framer Motion or GSAP + Lenis.] Deliver the full working site, not a mockup. Use high-quality placeholder coffee photography where I haven't supplied images, and clearly mark every placeholder so I can swap in real photos.