raven-act

byKUNAL PATTANAIK

Act as a senior creative director, premium UI/UX designer, brand designer, motion designer and expert frontend developer. Build a stunning, highly professional, modern cafe landing page that feels custom-designed by a top digital agency. The result must be unique, memorable and significantly better than a typical cafe/restaurant website. MAIN GOAL Create a website that makes visitors immediately understand the cafe's personality, atmosphere and quality, while naturally encouraging them to: - Explore the menu - Reserve a table - Order - Visit the cafe - Get directions Do not create a generic restaurant template. --- DESIGN DIRECTION First create a strong visual concept and brand identity, then build the website around it. Use: - Premium editorial design - Strong typography - Large headlines - Cinematic photography - Asymmetric layouts - Sophisticated whitespace - Layered compositions - Elegant micro-interactions - Subtle textures - Carefully controlled animations - Warm, premium cafe-inspired colors Use a restrained palette such as cream, espresso brown, charcoal and one tasteful accent color. Use a beautiful display serif + modern sans-serif typography combination. Avoid excessive: - cards - rounded corners - gradients - glassmorphism - shadows - icons - repetitive grids - generic UI components Every section should have its own visual purpose. --- PAGE STRUCTURE Create these sections: 1. NAVBAR Minimal premium navigation with: Logo | Menu | Story | Experience | Visit | Reserve Make it sticky and transform subtly when scrolling. Mobile navigation should become a polished fullscreen menu. 2. HERO Make this the strongest part of the website. Do NOT use a standard centered hero. Create an immersive editorial composition using: - oversized headline - cinematic cafe/food image - asymmetric positioning - small location/opening information - primary CTA - scroll indicator Make typography and imagery interact visually. Add elegant entrance animations. 3. BRAND STATEMENT Create a large editorial statement communicating the cafe philosophy. Do not simply create an “About Us” section. Use large typography, whitespace and one supporting visual. 4. MENU Create an elegant interactive menu. Categories: Coffee / Breakfast / Brunch / Drinks / Desserts Do not use ordinary product cards. Use an editorial list. When hovering over an item, show/change its corresponding image and create a subtle interaction. Make the mobile version touch-friendly. 5. SIGNATURE ITEM Create one dramatic full-width showcase for the cafe's signature food or drink. Use large photography, typography and subtle scroll movement. Do not put it inside a conventional card. 6. EXPERIENCE Show the cafe lifestyle and atmosphere: Morning coffee / Brunch / Work / Conversations / Evening Use editorial storytelling with multiple images and unconventional composition. 7. GALLERY Create an asymmetric premium image gallery. Mix portrait, landscape, food, coffee, interior and lifestyle photography. Avoid a standard Instagram grid. Use subtle hover effects. 8. STORY Create a concise visual story/timeline about the cafe. Use placeholder content only where real information is unavailable. Never invent real claims, awards or facts. 9. TESTIMONIALS Use one or a few large editorial testimonials instead of repetitive cards. 10. LOCATION Create a visually attractive visit section containing: Address / Opening Hours / Phone / Directions / Reservation Make the CTA highly visible. 11. FINAL CTA End with a memorable full-screen visual section containing a strong statement and: View Menu / Reserve a Table 12. FOOTER Minimal premium footer with logo, contact, location, hours, social links and essential links. --- MOTION & INTERACTION Add subtle, premium motion, not flashy animation. Implement: - smooth page entrance - text reveal - image reveal - scroll animations - subtle parallax - image hover effects - menu hover interaction - refined button animations - sticky navbar transformation Add 2–3 memorable custom interactions that fit the brand. All animations must be fast, smooth and purposeful. Support "prefers-reduced-motion". --- RESPONSIVE DESIGN Design desktop, tablet and mobile intentionally. Do not simply shrink the desktop version. Mobile must have: - clean typography - proper spacing - optimized images - touch-friendly controls - simplified animations - no horizontal overflow The mobile experience should feel equally premium. --- QUALITY & DEVELOPMENT Build production-quality frontend code using: Next.js + React + TypeScript + Tailwind CSS + Framer Motion Use reusable components and clean architecture. Ensure: - semantic HTML - accessibility - keyboard navigation - proper focus states - responsive images - lazy loading - good performance - SEO metadata - Open Graph metadata - local business schema where appropriate All navigation and CTA buttons should work correctly. --- IMAGE DIRECTION Use premium, cinematic imagery with: - natural lighting - warm tones - food details - espresso preparation - cafe interiors - human moments - architectural details Avoid generic corporate stock-photo aesthetics. If actual images are unavailable, use appropriate high-quality placeholders that can easily be replaced later. --- CRITICAL DESIGN RULE Before finishing, critically review the entire website. If any part looks like a: generic cafe template, AI-generated website, Bootstrap layout, Webflow template or standard restaurant website redesign that part. The final result must have at least 3 recognizable visual signatures, such as: - editorial typography - asymmetric composition - interactive menu - cinematic transitions - unconventional gallery - typography overlapping imagery - horizontal storytelling - custom micro-interactions Do not add effects just for the sake of being different. The design should feel intentional, premium, original and commercially usable. Finally, polish every detail: typography, spacing, image crops, alignment, animations, hover states, responsive behavior and CTA hierarchy. Do not just describe the design. Build the complete working landing page.