Kahani — Hero-First Immersive (Production-Ready)

# Kahani — Hero-First Immersive (Production-Ready)

{
  "summary": "A production-ready mobile interface for a high-end restaurant brand, focusing on an immersive full-width hero image, elegant serif typography, and a refined teal-and-cream color scheme. The design avoids playful elements in favor of a sophisticated, editorial aesthetic.",
  "style": {
    "description": "Sophisticated and elegant theme using a palette of Deep Teal (#1B4F5C), Teal Accent (#2D7A8E), Warm Wood (#8B6F47), and Cream (#F5F3F0). Typography features a high-contrast pairing of Zodiak (Serif) for headings and Satoshi (Sans-Serif) for body text. Animations are subtle, utilizing cubic-bezier(0.4, 0, 0.2, 1) for soft-rise entries and view transitions for page states.",
    "prompt": "Create a design with a 'Premium Editorial' aesthetic. Colors: Primary Deep Teal (#1B4F5C), Accent Teal (#2D7A8E), Warm Wood (#8B6F47), Background Cream (#F5F3F0), and Ink (#0F172A). Typography: Use 'Zodiak' (serif) for headings (font-size 48px-64px for hero) and 'Satoshi' (sans-serif) for body text and UI elements. Implement uppercase tracking of 0.18em-0.22em for small tag labels. UI elements should have a border-radius of 24px-32px. Use shadows like shadow-[0_10px_24px_-16px_rgba(15,23,42,0.35)] for depth. For floating elements, use backdrop-blur-md with white/80 opacity and a thin border of white/40. Micro-interactions must use a 520ms soft-rise animation (opacity 0 to 1, translate-y 8px to 0)."
  },
  "layout_and_structure": {
    "description": "Mobile-first layout (375px width focus) centered around a 50vh immersive hero. Below the fold, content is organized into logical sections with consistent padding (20px), utilizing horizontal scrolling for item discovery and high-contrast cards for primary actions.",
    "prompts": [
      {
        "part": "Floating Navigation",
        "prompt": "A floating nav bar located 16px from the top and sides. Background: white/80 with backdrop-blur-md. Border: 1px solid white/40. Height: approx 64px. Layout: Left-aligned logo (initial in a teal circle) and brand name (serif); Right-aligned icons for search, cart (with a wood-colored #8B6F47 badge), and profile."
      },
      {
        "part": "Immersive Hero Section",
        "prompt": "Height 45-50vh. Full-width high-resolution photo. Overlay: Linear gradient from black/35 at the top to #07161a/90 at the bottom. Typography: A small uppercase tag (tracking 0.22em) followed by a massive serif H1 (5xl, line-height 1.02) and a short descriptive paragraph in white/85 text."
      },
      {
        "part": "Featured Horizontal Scroll",
        "prompt": "Section title in serif font with a 'View all' link on the right. Content: Horizontal scroll container with cards (min-width 260px). Each card features a full-bleed image (height 176px) with a bottom-up dark gradient, serif title inside the image area, and a solid Teal (#1B4F5C) 'Add' button in the card footer."
      },
      {
        "part": "Quick Book Card",
        "prompt": "A high-contrast card using a photo background with a dark gradient overlay. Top-left contains an uppercase tag and a serif sub-header ('A calm seat in the teal room'). Top-right features a glassmorphism icon box. Bottom row includes a time-status tag and a prominent 'Reserve Now' button in Accent Teal (#2D7A8E) with a trailing arrow icon."
      },
      {
        "part": "Info/About Section",
        "prompt": "White card with 1px border black/5. Includes a serif 'About' header and body text. Below, two secondary cards (bg-slate-50) display operating hours and location with custom icon containers (bg-white, border-black/5)."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Floating Checkout Bar",
      "description": "A fixed-position bottom CTA for conversion.",
      "prompt": "Fixed 20px from bottom, centered. Width: 343px. Background: Teal (#1B4F5C). Padding: 16px 20px. Rounded: 16px. Content: Left side shows 'items count' (uppercase, small) over 'total price' (large, bold). Right side shows 'Checkout' text with a trailing arrow icon. Shadow: [0_18px_40px_-24px_rgba(15,23,42,0.55)]."
    }
  ],
  "special_notes": "Must-dos: Maintain high contrast between white text and dark gradients on images; ensure serif headings are at least 2xl for readability. Must-nots: Do not use gold, bright yellows, or playful rounded 'pill' shapes for main cards; do not use standard system sans-serif fonts—the editorial feel depends on the specific typeface pairing."
}