TERROIR | Natural Wine Boutique

# TERROIR | Natural Wine Boutique

{
  "summary": "Design a luxury boutique landing page with a 'tasting room' aesthetic. Use a dark-mode palette (#121212), editorial typography with deep kerning, and a sophisticated grain texture. The layout should prioritize storytelling through generous whitespace, high-contrast photography, and subtle hover interactions that reveal product details.",
  "style": {
    "description": "The style is 'Dark Minimalist Editorial.' It uses a palette of #121212 (Black), #EDEAE4 (Cream), and earthy accents like #6B8E7F (Sage) and #8B5A3C (Sienna). Typography pairs an elegant serif for headings with a modern sans-serif for functional UI. Visuals are unified by a 5% opacity grain overlay and grayscale-to-color transitions.",
    "prompt": "Apply a base theme of #121212 background and #EDEAE4 text. Implement a global grain texture using an SVG filter (baseFrequency 0.65, 3 octaves) at 5% opacity to add tactile depth. Typography: Headings use 'Cormorant Garamond' (light/italic, tracking-wider), UI/Body use 'Manrope' (weight 200-400, tracking-widest for uppercase labels). Accents: Sage (#6B8E7F), Sienna (#8B5A3C), and Burgundy (#4A2C3E). Motion: Use 800ms ease-out transitions for section reveals with a 20px Y-axis translate. Borders should be minimal, using white at 5% or 10% opacity for hair-line separators."
  },
  "layout_and_structure": {
    "description": "An 8-section vertical scroll layout that balances conversion utility with brand storytelling. Includes a centered-logo header, asymmetrical hero, interactive grid, and a split-screen membership comparison.",
    "prompts": [
      {
        "part": "Header",
        "prompt": "Create a fixed header with a blur effect (backdrop-blur-md) and a 1px bottom border (white/5). Place a serif logo ('Terroir') in the absolute center. Navigation should be 4-5 uppercase tracking-widest links in 12px Manrope on the left. Right side includes 'Account' and a shopping bag icon with a sienna (#8B5A3C) dot indicator on hover."
      },
      {
        "part": "Editorial Hero",
        "prompt": "Large-scale typography section. Main H1 should be Cormorant Garamond, 72px-96px, with a leading of 0.9. Include an italicized sub-phrase indented by 24px. Below, create a 3-column grid separated by 1px top borders. Column 1: Short philosophy text. Column 2/3: Descriptive copy and a bouncing arrow icon (lucide:arrow-down) for scroll guidance."
      },
      {
        "part": "Interactive Flavor Wall",
        "prompt": "A 4-column grid of cards, each 600px tall. Default state: A solid color block (e.g., #2A1D21, #3A3528). Hover state: The color fades to reveal a high-contrast image (scale 105% to 100%) with a mix-blend-overlay. Text inside (No. 01, Flavor Name, Tasting Notes) should slide 8px horizontally on hover."
      },
      {
        "part": "Product Spotlight",
        "prompt": "A 50/50 split layout on a #262626 background. Left: A 3:4 aspect ratio image with a 'Staff Pick' badge (blurred black background, white border). Right: Detailed product specs using a 2x2 grid for tasting notes, method, and ritual. CTA should be a solid Cream (#EDEAE4) button with black text and uppercase 12px font."
      },
      {
        "part": "Case Builder Utility",
        "prompt": "A conversion tool featuring a progress bar (Sage #6B8E7F) indicating capacity (e.g., 4/6). Items are displayed in a 3-column grid of cards with #FFFFFF/05 background. Each card contains a 128px wine bottle image (grayscale/overlay) and circular -/+ buttons with 1px borders for quantity control."
      },
      {
        "part": "Membership Comparison",
        "prompt": "A minimalist table divided by a single vertical 1px line (white/10). Left: 'Guest' tier with reduced opacity (60%). Right: 'Member' tier with full opacity, highlighted by Sienna text accents. Include a simple 'Join the Club' button with a 1px border."
      },
      {
        "part": "How It's Made Grid",
        "prompt": "A 4-column process grid. Each step features a numeric label (01-04) in Sage, a grayscale photograph that turns to color on hover (700ms transition), and a short, matter-of-fact paragraph in 14px Manrope."
      },
      {
        "part": "Footer",
        "prompt": "Deep footer with 4 columns. Column 1: Serif logo and address. Columns 2-3: Simple link lists. Column 4: Newsletter signup with a single bottom-border input (white/20) and a Sienna 'Subscribe' text link. Bottom bar: Small 10px copyright and social links in all-caps."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Interactive Grid Card",
      "description": "A color-block card that reveals an image and text on hover.",
      "prompt": "Structure: Relative container, overflow-hidden. Layer 1: Color background (e.g., #2A1D21). Layer 2: Image with opacity-0, transition-700ms, scale-105, mix-blend-overlay. Layer 3: Flex-column padding-8. On group-hover: Layer 2 becomes opacity-40 and scale-100. Text elements should use 'transition-transform duration-500' to slide in from the left."
    },
    {
      "component": "Progress Capacity Indicator",
      "description": "A minimalist bar showing item selection progress.",
      "prompt": "128px wide, 4px tall container with background white/10. Inner bar should be Sage (#6B8E7F) with width controlled by a percentage. Pair with a monospaced font (e.g., '4/6') for a technical, precise feel."
    }
  ]
}