Kahani — Hero-First Immersive (Production-Ready)

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

{
  "summary": "A luxurious, production-ready mobile UI for a premium restaurant, featuring an immersive hero image, floating glassmorphism navigation, elegant serif headings, and a rich teal-based color story with horizontal scrolling featured items.",
  "style": {
    "description": "The style is sophisticated and refined, avoiding gold to maintain a modern editorial aesthetic. It uses a core palette of deep teal (#1B4F5C), accent teal (#2D7A8E), warm wood (#8B6F47), and off-white cream (#F5F3F0). Typography pairs the Zodiak serif for elegant headings with Satoshi sans-serif for clean body text. Visual depth is achieved through subtle drop shadows (0 10px 24px -16px), glassmorphism (backdrop-blur-md), and vertical gradients (black/35 to #07161a/90) over images for text legibility.",
    "prompt": "Create a high-end UI with a color palette of Deep Teal (#1B4F5C), Accent Teal (#2D7A8E), Wood (#8B6F47), Cream (#F5F3F0), and Ink (#0F172A). Typography: Use 'Zodiak' (Serif) for headings (font-size: 48px to 64px, leading: 1.02) and 'Satoshi' (Sans-serif) for body and metadata (font-size: 14px, tracking: 0.18em for uppercase). UI elements should feature 24px to 32px corner radii. Apply glassmorphism to floating navigation with 'backdrop-blur-md' and 'bg-white/80'. Use subtle animations: 'soft-in' fade-ups (translateY: 8px, 520ms, cubic-bezier(0.4, 0, 0.2, 1)). Borders should be minimal (black/5 or white/40). Shadows must be soft and deep (shadow-[0_18px_40px_-24px_rgba(15,23,42,0.55)])."
  },
  "layout_and_structure": {
    "description": "A vertical scroll layout dominated by a 50vh immersive hero section, followed by horizontally scrolling featured cards, high-contrast call-to-action blocks, and a persistent floating bottom checkout bar.",
    "prompts": [
      {
        "part": "Header & Hero Section",
        "prompt": "The hero section should occupy 45-50% of the viewport height (approx 360px-420px). Use a high-resolution background image with a dark gradient overlay (from black/35 to #07161a/90). Inside the hero, place a floating navigation bar (16px from top/sides) with 16px padding, 16px corner radius, and glassmorphism background. The hero copy includes a small uppercase tagline (tracking: 0.22em), a massive serif title (5xl), and a short descriptive paragraph (max-width: 34ch)."
      },
      {
        "part": "Horizontal Featured Cards",
        "prompt": "A horizontal scrolling section with cards (min-width: 260px). Each card features a 176px tall image with a bottom-to-top dark gradient. Title and price are overlayed on the image at the bottom. Below the image, include a full-width 'Add' button in deep teal (#1B4F5C) with 16px corner radius and 12px vertical padding."
      },
      {
        "part": "Quick Book Reservation Block",
        "prompt": "A full-width card with an image background and a high-contrast dark overlay. Layout features a header with an uppercase label, a large serif title, and a descriptive paragraph. A secondary icon box (44x44px) sits in the top-right corner. The bottom row contains time availability metadata and a 'Reserve Now' button in accent teal (#2D7A8E) with an arrow icon."
      },
      {
        "part": "Information & About Section",
        "prompt": "A white card with a 32px radius and light border. It contains a section title in serif and body text. Below, use a single-column grid of sub-cards (bg: #F5F5F5) containing 36x36px icon containers, bold labels, and descriptive text for business hours and location details."
      },
      {
        "part": "Floating Bottom CTA",
        "prompt": "A persistent floating bar at the bottom (20px from bottom, 343px width). Use deep teal (#1B4F5C) background with a heavy shadow. The bar is split: the left side displays item count (uppercase) and total price (large font-size); the right side displays 'Checkout' text with an arrow icon. Padding should be 16px horizontal and 20px vertical."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Glassmorphism Floating Nav",
      "description": "A semi-transparent sticky header with blur effects.",
      "prompt": "Construct a container with 'bg-white/80', 'backdrop-blur-md', and 'border-white/40'. Include a brand signature (circular icon with serif letter) on the left and a trio of functional icons (Search, Bag, User) on the right. Add a notification badge (16x16px) on the bag icon in 'wood' (#8B6F47)."
    },
    {
      "component": "Immersive Image Card",
      "description": "Rich imagery cards with integrated text and CTA.",
      "prompt": "Cards use 'overflow-hidden' and 'rounded-3xl'. The image has an absolute gradient overlay 'from-black/65 via-black/40 to-black/70'. Typography inside is exclusively white (#FFFFFF). Buttons within these cards use 'accent-teal' (#2D7A8E) to stand out against the dark imagery."
    }
  ],
  "special_notes": "DO NOT use gold or bright playful colors; maintain the sophisticated teal and wood palette. MUST use generous white space between sections (min 24px). MUST ensure text readability over hero images using gradients. Animation timing must be elegant (500ms+) rather than snappy. Cards must have a border-radius of at least 24px to feel premium and modern."
}