Imported from yrlanrteixeira/landcraft (.agents/skills/gastro-appetite/SKILL.md). Install upstream with npx skills add yrlanrteixeira/landcraft --skill gastro-appetite. Copyright stays with the author.

Protocol: Gastro-Appetite Landing Page Architect

1. Core Identity & Design Philosophy

The Sensory Mandate

The visual personality evokes walking into a buzzing restaurant — warm lighting, the smell of fresh food, the sound of sizzling pans. Every design decision must make the user HUNGRY. Food photography is the absolute hero of every page. Colors are warm and appetizing — ambers, deep reds, warm creams, charred blacks. Blue is BANNED (appetite suppressant research). Cool tones are banned. The design must feel WARM, INVITING, and SENSORY.

The Cardinal Rule

Food photography is the ABSOLUTE HERO of every page. The design exists to serve the food, not the other way around. Think Instagram food photography meets premium restaurant menu design. Every section should make the visitor crave the next dish. If a visitor does not feel hungry within three seconds, the page has failed.

The Scientific Principle

Warm colors (reds, oranges, golds, deep browns) stimulate appetite. Cool colors (blues, teals, cool grays) suppress it. This is neurologically proven and non-negotiable in every design decision. Every hex value, every shadow tint, every gradient stop must reinforce warmth.

Target Verticals

Restaurants, pizzerias, sushi bars, burger joints, bakeries, steakhouses, confeitarias, food trucks, breweries, wine bars, bistrots, padarias, sorveterias, cafeterias, churrascarias.

Brazilian Gastronomy Context

• iFood/Rappi integration links as primary delivery channels
• WhatsApp ordering as a mandatory direct communication channel
• "Horário de funcionamento" given maximum visibility
• All CTAs in Portuguese (Brazilian)
• Delivery-first mobile experience
• Real Brazilian city addresses, phone formats, and currency (R$)

2. Absolute Negative Constraints (The "Cold Plate" Directive)

If the generated code includes ANY of the following, the design instantly fails — the food goes cold.

Banned Colors

• Blue in any form — #0000FF range, #3B82F6, #6366F1, #0EA5E9, teal, cyan, cool indigo. Blue is a scientifically proven appetite suppressant. PERMANENTLY BANNED.
• Purple — #7C3AED, #8B5CF6, violet, lavender. Too cold, too tech.
• Neon green — #22C55E, #10B981, lime. Unnatural and unsettling near food.
• Cool grays — #F3F4F6, bg-gray-50, bg-slate-100, text-gray-400. These kill warmth. Use warm equivalents exclusively.
• Pure black #000000 — use Rich Charcoal #1A1A1A instead.
• Pure white #FFFFFF — use Warm Cream #FFF8F0 instead.

Banned Typography

• Inter, Roboto, Arial, Open Sans, Helvetica, system fonts — all banned. These are clinical fonts that destroy warmth.
• Geometric sans-serif for headlines — Poppins, Montserrat, Raleway for display use. Too cold and corporate.
• ALL-CAPS body text — uppercase is reserved for category labels (text-xs tracking-[0.15em] uppercase font-semibold) and dietary tag badges only.

Banned Visual Patterns

• Generic stock photography — food must look REAL and appetizing, not sterile white-marble arrangements.
• Clip art or cartoon food illustrations — unless explicitly artisan/hand-drawn style requested by the user.
• Small food photos — any food image below 240px in any dimension is banned. Food must be large, dominant, appetizing.
• Equal 3-column card grid for menu items — the generic three-cards-in-a-row layout is banned. Use asymmetric grids, editorial lists, or 2-column layouts.
• Desaturation or grayscale on food — NEVER apply grayscale, saturate(0.7), or any filter that makes food look less vibrant.
• Circular spinner loaders — use skeleton shimmer or warm-tinted loading states.
• Emojis anywhere — BANNED in code, markup, text, headings, alt text, and content. Zero exceptions.
• "Scroll to explore" text or scroll arrows — diners are hungry, not confused.
• Lorem ipsum or placeholder dish names — use realistic Brazilian dishes: "Picanha na Brasa", "Margherita Napolitana", "Temaki de Salmão".
• "John Doe" chef names — use realistic Brazilian names: "Chef Ricardo Moreira", "Chef Ana Beatriz Souza".
• Generic "Our Menu" headers — use creative names: "Do Forno a Mesa", "Nossos Sabores", "Destaques da Casa".

Banned Motion

• Clip-path reveals or hard geometric masks — too cold and mechanical for food context.
• Aggressive transforms or bouncy spring physics — food needs warmth and weight, not SaaS playfulness.
• Complex entry animations that delay menu viewing beyond 0.7s — food businesses lose conversions every second the menu is hidden.
• Parallax distortion on food photos — food must always appear stable and grounded on the plate. Subtle scale is acceptable.
• linear, bare ease, or ease-in-out easing — always use the custom cubic-bezier curve.

Banned Content

• AI copywriting cliches: "Elevate your dining experience", "A culinary journey", "Where flavors come alive", "Savor the moment", "Taste the difference" — all BANNED.
• Startup/tech brand names: "FoodFlow", "TasteNexus", "FlavorHub" — BANNED. Use names that sound like real restaurants.
• Missing operating hours — a restaurant LP without visible operating hours is BROKEN.
• Missing delivery options — if applicable, iFood/Rappi/WhatsApp links must be prominently placed, never buried in a footer sub-link.

3. Typographic Architecture

Typography in gastronomy design bridges two worlds: the personality of the restaurant name and the absolute clarity of the menu. Display fonts carry the brand soul. Body fonts serve readability at speed — diners scan menus, they do not read novels.

A. Font Stack Hierarchy

B. Typographic Scale

Hero Display:         text-5xl md:text-7xl  — tracking-[-0.02em] leading-[0.95] font-serif
Section Headers:      text-3xl md:text-5xl  — tracking-[-0.01em] leading-[1.05] font-serif
Menu Category:        text-2xl md:text-3xl  — tracking-normal leading-[1.1] font-serif
Menu Item Name:       text-lg font-semibold — tracking-normal leading-[1.3] font-sans
Menu Description:     text-sm              — tracking-normal leading-[1.65] max-w-[50ch] text-muted
Body Text:            text-base            — tracking-normal leading-[1.65] max-w-[60ch]
Price:                text-lg font-mono    — font-semibold font-variant-numeric: tabular-nums
Eyebrow/Category:     text-xs              — tracking-[0.15em] uppercase font-semibold + accent underline
Caption/Hours:        text-sm              — tracking-normal leading-[1.5]

C. Typographic Rules

• Personality in Headlines: The restaurant name and section headers carry the brand soul. Use Playfair Display at confident weight (700+) for upscale warmth. Use Fraunces for artisan/rustic character. Use DM Serif Display for refined elegance.
• Dish Name Italics: When calling out individual dish names within prose or hero sections, use Playfair Display Italic to give them a menu-card flourish.
• Menu Readability is Sacred: Menu item names are text-lg font-semibold — bold enough to scan quickly. Descriptions sit below in text-sm muted color. Prices right-aligned in monospace.
• Price Alignment: ALL prices in a menu list must align vertically. Use JetBrains Mono or Space Mono to guarantee identical character widths across all price values.
• Category Labels: Food category labels use uppercase with letter-spacing: 0.15em and an accent color underline — a thin border-bottom: 2px solid var(--accent) or w-12 h-0.5 bg-[--accent] bar below.
• No Orphans on Headlines: Use text-balance or manual <br /> to prevent single-word last lines.
• Banned Fonts: Inter, Roboto, Arial, Open Sans, Helvetica, system fonts, geometric sans for headlines. If any of these appear in the output, the typography has failed.
• Google Fonts Import: Load via the STYLES constant @import. Always include display=swap.

D. Google Fonts Import Block

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

Alternative for rustic contexts:

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;1,9..144,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

4. Color System

Color is the single most critical element of this skill. Every hue must stimulate appetite. Warm tones only. The entire blue-purple-cool spectrum is permanently banned.

A. Core Palette

B. Extended Palette

C. Shadow System (Warm-Tinted)

ALL box-shadows must be warm-tinted. Never use generic rgba(0,0,0,...).

--shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.04);
--shadow-md: 0 4px 16px rgba(26, 26, 26, 0.08);
--shadow-lg: 0 12px 40px rgba(26, 26, 26, 0.12);
--shadow-food: 0 8px 32px rgba(26, 26, 26, 0.15);
--shadow-hover: 0 16px 48px rgba(26, 26, 26, 0.18);

Card default shadow: rgba(26,26,26,0.08) — warm and diffused. Hover shadow expansion: transition from --shadow-md to --shadow-hover over 0.3s. Food photo cards: use --shadow-food for elevated, appetizing depth.

D. Color Rules

• Max 1 Primary Accent: Saffron Gold #D4920B is the default. Use Ember Red #C23B22 as secondary for urgency or specific verticals (pizzerias, steakhouses). Never introduce a third accent.
• NO Blue Anywhere: The entire blue spectrum is permanently banned. This includes link colors — use Saffron Gold or Rich Charcoal for links.
• NO Cool Grays: bg-gray-50, bg-slate-100, text-gray-400 — all banned. Use Warm Sand #F5E6D3, Warm Muted #8B7355, or opacity variants of Rich Charcoal.
• NO Pure Black or Pure White: Use Rich Charcoal #1A1A1A and Warm Cream #FFF8F0.
• BANNED Colors: Blue (#0000FF range), purple, neon green, cool grays.
• Food Photography Color Grade: Apply filter: saturate(1.05) contrast(1.03) sepia(0.03) to give food imagery a warm golden-hour boost. NEVER desaturate food.

5. Shape Language

Every shape must communicate warmth and approachability. Sharp edges feel clinical. Overly round feels childish. The sweet spot is generous radius with confident structure.

A. Border Radius System

B. Card System

• Surface: Warm Sand #F5E6D3 or Cream Light #FFF0E0
• Border-radius: 16px
• Shadow: rgba(26,26,26,0.08) — warm and diffused
• Padding: p-6 to p-8 — generous internal spacing
• Hover: shadow expansion to rgba(26,26,26,0.15) + subtle translateY(-2px) over 0.3s
• Border: optional 1px solid rgba(26,26,26,0.06) for extra definition on cream backgrounds

C. Image Treatment

• Hero images: full-bleed (edge-to-edge) or with border-radius: 24px rounded crops
• Menu item photos: border-radius: 16px with overflow-hidden on container for hover scale containment
• Gallery photos: mixed aspect ratios (aspect-[3/4], aspect-[4/3], aspect-square) with rounded-2xl
• All food photos: warm color grading via CSS filter. object-fit: cover with intentional object-position

D. Dividers & Separators

• Subtle warm-toned horizontal rules: border-bottom: 1px solid rgba(26,26,26,0.08)
• Menu item separators: dotted leaders border-bottom: 1px dotted rgba(26,26,26,0.12)
• Section dividers: optional ingredient-inspired SVG separators (wheat stalks, herb sprigs, flame icons) at low opacity
• Wave dividers between sections: SVG <path> with smooth cubic bezier curves in Warm Sand or Warm Cream

E. Buttons

Primary:    bg-[#D4920B] text-white rounded-full px-8 py-4 text-sm uppercase tracking-[0.1em] font-semibold
Secondary:  bg-transparent border-2 border-[#D4920B] text-[#D4920B] rounded-full px-8 py-4 text-sm uppercase tracking-[0.1em] font-semibold
Soft Rect:  bg-[#D4920B] text-white rounded-xl px-8 py-4 text-sm font-semibold
Ghost:      bg-transparent px-0 py-2 text-sm font-semibold text-[#D4920B] border-b-2 border-[#D4920B]/30 hover:border-[#D4920B]
WhatsApp:   bg-[#D4920B] text-white rounded-full px-6 py-3 text-sm font-semibold inline-flex items-center gap-2

All buttons: transition-all duration-300 cubic-bezier(0.25,0.46,0.45,0.94). Primary hover: brightness-110 active:translate-y-[1px] active:scale-[0.98]. Pill shape (rounded-full) is the default. Soft rectangle (rounded-xl) is the alternative.

6. Layout Architecture

A. Hero Section

• Full-bleed food photography at minimum 60% of the viewport height (min-h-[60vh])
• Text overlaid on a warm gradient scrim: bg-gradient-to-t from-[#1A1A1A]/80 via-[#1A1A1A]/40 to-transparent
• Restaurant name in serif display font (Playfair Display or Fraunces)
• Tagline in body font, 1-2 lines max, sensory description
• CTA pair: Primary "Reserve Sua Mesa" (WhatsApp) + Secondary "Veja o Cardápio" (scroll to menu)
• Operating hours badge in hero corner: bg-[#FFF8F0]/80 backdrop-blur-sm px-4 py-2 rounded-full text-sm
• Full-viewport variant uses min-h-[100dvh]. NEVER use h-screen (iOS Safari bug).
• Mobile: stack vertically, food photo takes full width, text below with warm background

B. Section Spacing & Containment

• Section vertical padding: py-20 md:py-28 — generous but not as extreme as premium tier
• Content container: max-w-7xl mx-auto or max-w-[1280px] mx-auto
• Mobile horizontal padding: px-5 md:px-8
• Alternating section backgrounds: Warm Cream #FFF8F0 and Warm Sand #F5E6D3

C. Menu Section Layout

• CSS Grid with 2-column layout for dish cards: grid-cols-1 md:grid-cols-2 gap-6
• Each dish card: image (top or left) + name + description + price
• Category headers: serif font with accent underline decoration
• Sticky category tab bar for navigation between menu sections
• Asymmetric featured item: one large card (col-span-2) for the chef's highlight
• NEVER equal 3-column grid for menu items — 2-column or asymmetric only

D. Gallery Layout

• Masonry or asymmetric grid for food photography
• Mixed aspect ratios: aspect-[3/4], aspect-[4/3], aspect-square, aspect-[16/9]
• NEVER equal 3-column grid — use CSS Grid with fractional units: grid-template-columns: 2fr 1fr 1fr or 1fr 1fr with spanning
• Gap: gap-4 md:gap-6
• Hover: slight scale 1.03 with warm shadow expansion
• Container: overflow-hidden rounded-2xl on each image wrapper

E. Responsive Rules

• All multi-column grids collapse to single column below md: breakpoint
• Food photos go full-width on mobile (w-full)
• Touch targets: minimum 44px height on all interactive elements
• No horizontal overflow at 320px minimum width
• Use CSS Grid over flexbox percentage math — NEVER use w-[calc(33%-1rem)]

7. Motion System

Motion in gastro-appetite design is warm, smooth, and focused. Every animation exists to draw attention to the food, never to distract from it.

A. Base Parameters

--ease-gastro: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--duration-reveal: 0.8s;
--duration-standard: 0.5s;
--duration-hover: 0.3s;
--duration-stagger: 0.08s;

B. Reveal Animation (Default)

The fade variant — opacity combined with translateY:

• Initial state: opacity: 0; transform: translateY(24px)
• Final state: opacity: 1; transform: translateY(0)
• Duration: 0.8s
• Easing: cubic-bezier(0.25, 0.46, 0.45, 0.94)
• Trigger: IntersectionObserver with threshold: 0.1 and rootMargin: "-50px"

C. Image Reveals

• Food photos: slight scale-up from scale(1.02) to scale(1.0) on viewport entry
• Combined with opacity fade: opacity: 0; transform: scale(1.02) to opacity: 1; transform: scale(1.0)
• Duration: 0.8s with the gastro easing curve
• Container must have overflow-hidden to clip any scale overflow

D. Hover Interactions

• Food cards: Gentle scale 1.03 with warm shadow expansion over 0.3s. Container clips with overflow-hidden.
• Menu items (list): Background highlights to rgba(245,230,211,0.5) over 0.2s.
• Buttons: Brightness increase brightness-110, tactile press translateY(1px) scale(0.98) on :active.
• Gallery images: Scale 1.03 with shadow-food token over 0.4s.

E. Staggered Animations

• Menu items: staggered fade-in with 0.08s delays between each item
• CSS approach: animation-delay: calc(var(--index) * 0.08s)
• Grid cards: 0.1s stagger between cards
• Implementation: style={{ transitionDelay: '${index * 0.08}s' }}

F. Page Load Sequence

Keep it fast — diners are hungry:

1. 0ms: Background color visible, navigation fades in (0.4s)
2. 100ms: Hero food image fades in with warm scale (0.8s)
3. 300ms: Restaurant name and tagline fade up (0.5s)
4. 500ms: CTAs and operating hours badge appear (0.4s)
5. Scroll content: Triggered only when scrolled into view via IntersectionObserver

G. Banned Motion Patterns

• NO clip-path reveals or hard geometric masks
• NO aggressive transforms or bouncy springs (type: "spring" with high stiffness)
• NO linear, bare ease, or ease-in-out easing
• NO parallax scrolljacking on food photos
• NO text scramble effects
• NO particle systems
• NO rubber-band elastic overshoot
• NO window.addEventListener('scroll') — use IntersectionObserver exclusively

H. Performance

• Animate exclusively via transform and opacity — never top, left, width, height
• backdrop-blur only on fixed/sticky elements (navigation, WhatsApp button)
• Apply will-change: transform sparingly, only on actively animating elements
• Decorative infinite animations must be isolated and memoized with React.memo

8. useReveal Hook (Inline Implementation)

The scroll-reveal hook must be implemented inline within every generated LP file. It is never imported from an external module.

function useReveal(options = {}) {
  const ref = React.useRef(null);
  const [isVisible, setIsVisible] = React.useState(false);

  React.useEffect(() => {
    const node = ref.current;
    if (!node) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(node);
        }
      },
      { threshold: 0.1, rootMargin: '-50px', ...options }
    );

    observer.observe(node);
    return () => observer.disconnect();
  }, []);

  return [ref, isVisible];
}

Reveal Component Pattern

function Reveal({ children, delay = 0, className = '' }) {
  const [ref, isVisible] = useReveal();

  return (
    <div
      ref={ref}
      className={className}
      style={{
        opacity: isVisible ? 1 : 0,
        transform: isVisible ? 'translateY(0)' : 'translateY(24px)',
        transition: `opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94) ${delay}s, transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94) ${delay}s`,
      }}
    >
      {children}
    </div>
  );
}

Image Reveal Variant

function ImageReveal({ children, delay = 0, className = '' }) {
  const [ref, isVisible] = useReveal();

  return (
    <div
      ref={ref}
      className={className}
      style={{
        opacity: isVisible ? 1 : 0,
        transform: isVisible ? 'scale(1)' : 'scale(1.02)',
        transition: `opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94) ${delay}s, transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94) ${delay}s`,
        overflow: 'hidden',
      }}
    >
      {children}
    </div>
  );
}

9. Landing Page Section Blueprints

Every gastro-appetite landing page must include these 8 sections in this order. Each section has specific structural and visual rules.

Section 1: Hero

• Purpose: Immediately trigger appetite. First impression is everything.
• Layout: Full-bleed food photography (min-h-[60vh]) with overlaid text on warm gradient scrim (bg-gradient-to-t from-[#1A1A1A]/80 via-[#1A1A1A]/40 to-transparent)
• Restaurant Name: Serif display font (Playfair Display or Fraunces), white or Warm Cream, text-5xl md:text-7xl
• Tagline: Body font, Warm Cream with slight opacity, 1-2 lines max. Sensory description, not marketing fluff. Example: "Massas artesanais feitas diariamente com ingredientes importados da Italia."
• CTA: Primary WhatsApp button "Reserve Sua Mesa" in Saffron Gold #D4920B. Secondary "Veja o Cardápio" button in outline style.
• Operating Hours Badge: Small pill in hero corner: "Aberto hoje: 11h - 23h" in bg-[#FFF8F0]/80 backdrop-blur-sm rounded-full
• NO: Centered text over generic darkened stock photo. No "Welcome to our restaurant." No multiple paragraphs. No auto-playing video backgrounds.

Section 2: About (Chef/Owner Story)

• Purpose: Build trust and personality. Connect the food to the people who make it.
• Layout: 60/40 split — warm narrative text on the wider column, chef portrait or kitchen-in-action photo on the narrower side
• Content: Chef profile or restaurant origin story with concrete details. Example: "Fundada em 2008 pelo Chef Ricardo Moreira, a Trattoria Nonna Rosa nasceu da receita de molho pomodoro que sua avó trouxe de Napoli em 1952."
• Photography: Chef in action (not posed corporate headshot), or the restaurant signature moment — wood-fired oven, sushi preparation, bread coming out of the oven. rounded-2xl with warm shadow.
• Tone: Personal, warm, sensory. Talk about ingredients, technique, tradition — not about "passion for excellence."
• Section Header: Creative name like "Nossa Historia" or "A Alma da Cozinha" in serif display.

Section 3: Menu Highlights

• Purpose: Showcase 6-8 signature dishes immediately to hook the visitor.
• Layout: CSS Grid 2-column asymmetric — one large featured dish (col-span-2 or col-span-1 row-span-2) flanked by smaller cards. On mobile, single column.
• Each Dish Card: Large food photo (top, aspect-[4/3], rounded-2xl), dish name (text-lg font-semibold), brief description (muted, 1-2 lines), price in monospace (JetBrains Mono or Space Mono), accent color.
• Featured Item: One "Destaque do Chef" or "Mais Pedido" item with accent border border-l-4 border-[#D4920B] and star/fire icon badge.
• Dietary Tags: Small pill badges (V, VG, GF, spicy levels) next to item names in appropriate colors.
• Price Display: Right-aligned, monospace, Saffron Gold color. Format: R$ 42,90, R$ 68,00, R$ 128,00.
• CTA: "Ver Cardápio Completo" button anchoring to full menu or WhatsApp.
• Section Header: Creative name like "Do Forno a Mesa" or "Nossos Sabores" in serif display with accent underline.

Section 4: Gallery (Food Photography)

• Purpose: Visual feast. Make the visitor salivate with a curated photography grid.
• Layout: Masonry or asymmetric grid — NEVER equal 3-column. Use CSS Grid with grid-template-columns: 2fr 1fr 1fr or similar fractional units. Mix aspect ratios.
• Photos: High-quality food photography, plated dishes, kitchen action, ingredient close-ups. All with warm color grading.
• Hover: Gentle scale 1.03 with warm shadow expansion. Container clips with overflow-hidden rounded-2xl.
• Treatment: filter: saturate(1.05) contrast(1.03) sepia(0.03) for golden warmth boost.
• NO: Lightbox popups. Equal grid. Stock photos. Desaturated images.
• Image Placeholders: Use picsum.photos/seed/{food-context}/{width}/{height} with descriptive food seeds.

Section 5: Testimonials (Reviews)

• Purpose: Social proof from real diners. Build trust and anticipation.
• Layout: Horizontal scroll carousel or 2-column grid of review cards.
• Source Display: Google Reviews style — show the platform name and star rating.
• Star Ratings: Filled star icons in Saffron Gold #D4920B. Show numeric rating alongside (4.8).
• Quote Style: Serif italic (Playfair Display Italic) for the testimonial text. Food-specific quotes: "Melhor carbonara que ja comi em São Paulo" over generic "Great atmosphere."
• Attribution: Reviewer name + source + date in sans-serif, muted color.
• Card Style: Warm Sand #F5E6D3 background, rounded-2xl, warm shadow. Reviewer photo optional as rounded-full 48px avatar.
• Placeholder Names: Realistic Brazilian: "Fernanda Almeida", "Carlos Eduardo Santos", "Patricia Menezes".

Section 6: Location & Hours

• Purpose: Answer the two most common questions: "Where is it?" and "Is it open now?"
• Layout: Split — map placeholder on one side, info stack on the other.
• Map: Google Maps embed placeholder with rounded-2xl overflow-hidden and warm shadow. Fallback: a styled static map image.
• Operating Hours Table: Clean, scannable grid layout:

  Segunda a Sexta    11h30 - 15h / 18h - 23h
  Sabado             12h - 23h30
  Domingo            12h - 22h
  Feriados           12h - 22h
  

  Use grid grid-cols-2 gap-y-2 with font-variant-numeric: tabular-nums for time alignment. Highlight today's row with bg-[#D4920B]/8.
• Address: Full address with neighborhood: "Rua Oscar Freire, 423 - Jardins, São Paulo - SP, 01426-001"
• Phone: Clickable tel: link. Format: "+55 11 3064-2891"
• Parking: Small note if applicable: "Estacionamento no local" or "Valet disponivel."

Section 7: Delivery & Reservation

• Purpose: Drive conversions — either delivery orders or table reservations.
• Layout: Two sub-sections or a combined layout.
• Delivery Platforms: iFood/Rappi badges as styled buttons. Use warm-neutral backgrounds with platform logos. Display in a flex row with gap-3, wrapping on mobile.
• WhatsApp Ordering: "Pedir pelo WhatsApp" or "Faça Seu Pedido" button prominently placed, Saffron Gold background, WhatsApp icon + text.
• Reservation Form (optional): Name, Phone (+55 prefix), Date, Party Size (1-12+), Special Requests. Maximum 5 fields. Labels above inputs. Warm styling with accent focus states. Submit: "Reservar Mesa".
• WhatsApp Alternative Below Form: "Prefere reservar pelo WhatsApp?" with direct link.
• Delivery Hours: If different from dine-in: "Delivery: 11h - 22h30"

Section 8: Footer

• Background: Warm Sand #F5E6D3 or a darker warm tone like Espresso Brown #2C1810 with Warm Cream text.
• Essential Info (ALL MANDATORY):
  • Operating hours (compact format — repeat from Section 6)
  • Full address
  • Phone number (clickable tel: link)
  • WhatsApp link
  • Social media: Instagram (MANDATORY for food businesses), Facebook, TikTok
  • Delivery platform links (iFood, Rappi)
• Layout: Multi-column on desktop (grid-cols-2 md:grid-cols-4), stacked on mobile.
• Divider: SVG wave or border-t border-[rgba(26,26,26,0.08)] separating footer from content.
• Copyright: Small, muted, dynamically generated year.
• NO: Newsletter signups. Mega footers. Sitemaps.

10. WhatsApp Integration (MANDATORY)

WhatsApp is the PRIMARY direct communication channel for Brazilian restaurants. It must be omnipresent without being obnoxious.

A. Floating Button

• Position: Fixed bottom-6 right-6, z-30
• Size: w-14 h-14 (56px). On mobile, slightly larger: w-16 h-16
• Color: Saffron Gold #D4920B — NOT default WhatsApp green. The button must match the brand palette.
• Shape: border-radius: 9999px (rounded-full)
• Shadow: Warm-tinted shadow-lg — 0 8px 32px rgba(26,26,26,0.15)
• Icon: Clean WhatsApp SVG icon, w-6 h-6, white fill
• Hover: scale-110 over 0.3s with increased shadow
• Visibility: Always visible after initial page load. Gentle fade-in on first scroll.

B. Link Format

https://wa.me/55XXXXXXXXXXX?text=Ola,%20gostaria%20de%20fazer%20uma%20reserva

Different contexts use different pre-filled messages:

• Reservation: ?text=Ola,%20gostaria%20de%20reservar%20uma%20mesa
• Ordering: ?text=Ola,%20gostaria%20de%20fazer%20um%20pedido
• Menu inquiry: ?text=Ola,%20gostaria%20de%20ver%20o%20cardápio
• General: ?text=Ola,%20gostaria%20de%20mais%20informações

C. CTA Labels (Portuguese)

• "Reserve Sua Mesa" — hero CTA, reservation context
• "Faça Seu Pedido" — ordering, delivery context
• "Veja o Cardápio" — menu viewing, hero secondary CTA
• "Pedir pelo WhatsApp" — delivery alternative to aggregator apps
• "Fale Conosco" — general contact fallback

D. Multiple Touchpoints (Minimum 4)

1. Hero Section: Primary CTA "Reserve Sua Mesa" linking to WhatsApp
2. After Menu Section: "Faça Seu Pedido" button at the bottom of menu highlights
3. Delivery Section: "Pedir pelo WhatsApp" as alternative to iFood/Rappi
4. Floating Button: Persistent on all scroll positions, always accessible

E. WhatsApp SVG Icon (Inline)

const WhatsAppIcon = ({ size = 24, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
  </svg>
);

11. Food Photography Treatment

Food photography is the dominant visual element. It must make the viewer salivate.

A. Composition & Sizing Rules

• Hero Images: Full-bleed, min-h-[60vh], object-fit: cover. Food must dominate at least 60% of the hero viewport.
• Menu Item Photos: Consistent aspect ratio per section — aspect-square for grid layouts, aspect-[4/3] for card layouts. Shot from overhead (flat lay) or 45-degree angle.
• Minimum Sizes: No food photo smaller than w-60 h-60 (240px). On mobile, food cards must be w-full.
• Object Position: Always specify deliberately. object-center for plated dishes, object-[center_40%] for drinks/tall items.

B. Color Treatment

• Default State: Full warm saturation. ALWAYS. Apply filter: saturate(1.05) contrast(1.03) sepia(0.03) for golden warmth.
• Hover State: Slight scale scale-[1.03] over 0.3s with increased warm shadow. NO desaturation. Food gets MORE prominent on hover.
• Text Overlay: Warm gradient, never generic black. bg-gradient-to-t from-[#1A1A1A]/80 via-[#1A1A1A]/40 to-transparent.

C. Image Placeholders (IMG Constant)

Never use Unsplash. Use https://picsum.photos/seed/{dish-name}/{width}/{height} with food-related descriptive seeds:

const IMG = {
  hero: 'https://picsum.photos/seed/grilled-steak-plate/1400/800',
  dish1: 'https://picsum.photos/seed/margherita-pizza/600/600',
  dish2: 'https://picsum.photos/seed/fresh-pasta-carbonara/600/600',
  dish3: 'https://picsum.photos/seed/sushi-platter-salmon/600/450',
  dish4: 'https://picsum.photos/seed/wagyu-steak/600/600',
  dish5: 'https://picsum.photos/seed/tiramisu-dessert/600/600',
  dish6: 'https://picsum.photos/seed/bruschetta-tomato/600/600',
  chef: 'https://picsum.photos/seed/head-chef-kitchen/600/800',
  interior: 'https://picsum.photos/seed/restaurant-interior-warm/800/600',
  kitchen: 'https://picsum.photos/seed/kitchen-fire-cooking/800/600',
  gallery1: 'https://picsum.photos/seed/food-plating-art/600/800',
  gallery2: 'https://picsum.photos/seed/wine-glass-dinner/800/600',
  gallery3: 'https://picsum.photos/seed/bread-oven-bakery/600/600',
  gallery4: 'https://picsum.photos/seed/cocktail-bar/600/800',
};

12. Content & Copy Guidelines

Placeholder content must make the reader hungry. Every word should carry flavor, texture, or aroma.

A. Headline Patterns

• Dish-Forward: "Carbonara Artesanal", "Pizza Napoletana", "Wagyu A5"
• Origin-Anchored: "Da Nossa Cozinha", "Direto do Forno", "Receita da Nonna"
• Sensory: "Fogo e Brasa", "Sabor da Terra", "Mar e Mesa", "Do Forno a Mesa"
• NEVER: Questions ("Hungry Yet?"), exclamations ("Welcome!"), generic statements ("The Best Food in Town")

B. Body Copy Tone

• Short, sensory descriptions (1-2 sentences max for menu items)
• Concrete ingredients and technique: "File mignon grelhado na brasa com manteiga de ervas, acompanhado de risoto de funghi porcini e redução de vinho tinto."
• Mention origin when relevant: "Queijo minas artesanal da Serra da Canastra", "Azeite extra virgem importado da Toscana."
• NO filler. Every word must contribute to appetite.

C. Placeholder Names & Data

• Restaurant Names: "Trattoria Nonna Rosa", "Emporio do Sabor", "Casa Fuego", "Padaria Sao Domingos", "Izakaya Tanaka", "Burger Republic", "Cervejaria Sao Bento", "Confeitaria Flor de Lis"
• Chef Names: "Chef Ricardo Moreira", "Chef Ana Beatriz Souza", "Chef Kenji Tanaka", "Chef Maria Fernanda Oliveira"
• Addresses: "Rua Oscar Freire, 423 - Jardins, São Paulo - SP", "Av. Atlântica, 1702 - Copacabana, Rio de Janeiro - RJ"
• Prices: "R$ 42,90", "R$ 68,00", "R$ 128,00", "R$ 15,90" — realistic, varied, Brazilian Real format
• Phone Numbers: "+55 11 3064-2891", "+55 21 2548-7632" — realistic format with area codes
• Operating Hours: "Seg-Sex: 11h30-15h / 18h-23h | Sab: 12h-23h30 | Dom: 12h-22h"

D. Realistic Brazilian Dishes

• Italiana: Carbonara Artesanal, Risoto de Funghi Porcini, Lasanha da Nonna, Ossobuco Milanese
• Pizzaria: Margherita Napolitana, Quatro Queijos, Calabresa Especial, Pizza de Burrata com Prosciutto
• Japonesa: Temaki de Salmão, Sashimi Misto, Uramaki Philadelphia, Tataki de Atum
• Hamburgueria: Smash Burger Classico, Burger Costela Defumada, Veggie Burger Artesanal
• Padaria/Confeitaria: Pao de Fermentação Natural, Croissant de Amêndoas, Bolo de Cenoura com Brigadeiro
• Churrascaria: Picanha na Brasa, Costela no Bafo, Maminha com Chimichurri, Linguica Artesanal

13. Navigation Component

A. Desktop

• Sticky with warm backdrop blur on scroll: py-4 px-6, backdrop-blur-xl bg-[#FFF8F0]/90
• Background applied after scrolling past 100px via scroll detection
• Logo: Restaurant name in display serif font, left-aligned
• Links: DM Sans, text-sm font-medium, gap-8. Hover: color shifts to Saffron Gold over 0.3s
• CTA in nav: "Reservar" button in Saffron Gold, right-aligned, pill shape
• Border on scroll: border-bottom: 1px solid rgba(26,26,26,0.06)

B. Mobile

• Hamburger menu icon, warm accent color
• Full-screen overlay: fixed inset-0 bg-[#FFF8F0]/98 backdrop-blur-2xl z-40
• Links centered vertically, staggered fade-in, generous spacing (gap-6)
• WhatsApp CTA prominent at the bottom of mobile menu
• Body scroll lock: overflow: hidden on <body> when menu is open

14. Self-Contained Architecture

Every generated LP must be a single JSX file with everything inline. No external dependencies beyond the allowed list.

A. Allowed Imports (ONLY THESE)

import React from 'react';
import { Link } from 'react-router-dom';
import { Phone, MapPin, Clock, Star, ChevronRight, Menu, X, Instagram, Facebook } from 'lucide-react';
import '../lp-shell.css';

B. STYLES Constant

Must include Google Fonts @import and CSS custom properties:

const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

  :root {
    --bg-primary: #FFF8F0;
    --bg-secondary: #F5E6D3;
    --bg-tertiary: #FFF0E0;
    --text-primary: #1A1A1A;
    --text-secondary: #2C1810;
    --text-muted: #8B7355;
    --accent: #D4920B;
    --accent-red: #C23B22;
    --accent-olive: #4A5D23;
    --border: rgba(26,26,26,0.08);
    --shadow-sm: 0 1px 3px rgba(26,26,26,0.04);
    --shadow-md: 0 4px 16px rgba(26,26,26,0.08);
    --shadow-lg: 0 12px 40px rgba(26,26,26,0.12);
    --shadow-food: 0 8px 32px rgba(26,26,26,0.15);
    --ease-gastro: cubic-bezier(0.25,0.46,0.45,0.94);
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
  }
`;

C. IMG Constant

All image URLs centralized, using picsum.photos with food-related seeds:

const IMG = {
  hero: 'https://picsum.photos/seed/grilled-steak-plate/1400/800',
  // ... all images with descriptive food seeds
};

D. Inline Hooks & Components

• useReveal hook with IntersectionObserver (threshold 0.1, rootMargin "-50px") — inline, never imported
• Reveal component for scroll-triggered fade animations
• ImageReveal variant for food photo scale reveals
• All state management via useState / useRef / useEffect
• Navigation scroll detection via useEffect with cleanup
• Mobile menu with body scroll lock

E. File Structure Pattern

// 1. Imports (react, react-router-dom, lucide-react, lp-shell.css)
// 2. STYLES constant (fonts + CSS variables)
// 3. IMG constant (all image URLs)
// 4. useReveal hook
// 5. Reveal component
// 6. WhatsAppIcon SVG component
// 7. Section components (Hero, About, MenuHighlights, Gallery, Testimonials, LocationHours, DeliveryReservation, Footer)
// 8. Navigation component
// 9. FloatingWhatsApp component
// 10. Main LP component (assembles all sections)
// 11. Export default

15. Tier System Integration

This gastro-appetite skill maps to the LP generator tier system as follows:

Tier-Specific Overrides (When Compatible)

AESTHETIC BASE: Acessível — This vertical skill inherits acessível tier defaults (easing, reveal, spacing). The general aesthetic skill for the acessível tier remains organic-warm.

• Warm Appetite Mode palette
• Playfair Display for headlines
• Card menu format with food photos
• CTA focus: "Veja o Cardápio" + "Reserve Sua Mesa"
• Motion duration: 0.6-0.8s
• Section spacing: py-20 md:py-28

Boutique (COMPATIBLE):

• Same Warm Appetite palette, slightly more refined
• Fraunces with optical sizing for headlines, or Playfair Display Italic
• List menu format (traditional dotted-leader style) for upscale feel
• More generous whitespace: py-24 md:py-32
• Easing Override: cubic-bezier(0.16,1,0.3,1) (boutique standard)
• Reveal Override: clip-up (boutique standard — clipPath polygon transition)
• CTA focus: "Fazer Reserva" primary
• Motion duration: 0.7-0.9s (slightly more deliberate)
• Elevated photography quality expectations

16. Responsive & Structural Rules

• Contain all sections: max-w-7xl mx-auto or max-w-[1280px] mx-auto
• Mobile padding: px-5 md:px-8 — generous for warm feel
• Section vertical spacing: py-20 md:py-28 minimum. Sections must breathe.
• NEVER use h-screen. Use min-h-[100dvh] for full-height hero sections.
• Grid fallback: all multi-column grids collapse to single column below md: breakpoint
• Use CSS Grid over flexbox percentage math. NEVER use w-[calc(33%-1rem)]
• Touch targets: minimum 44px height on all interactive elements for mobile
• Zero horizontal overflow at 320px minimum viewport width
• Hero image: loading="eager" and fetchpriority="high"
• All other images: loading="lazy"
• All images: width, height attributes specified for CLS prevention
• Font loading: font-display: swap on all custom fonts

17. Performance Guardrails

• GPU-Safe Animation: Animate exclusively via transform and opacity. Never animate top, left, width, height, margin, padding.
• Blur Constraints: backdrop-blur only on fixed/sticky elements (navigation, floating WhatsApp button). Never on scrolling containers.
• Image Optimization: Hero image loading="eager" + fetchpriority="high". All others loading="lazy". Specify width and height attributes.
• Scroll Listeners: NEVER use window.addEventListener('scroll'). Use IntersectionObserver exclusively.
• Client Component Isolation: Interactive elements (menu accordions, tab bars, scroll reveals, floating WhatsApp) must be isolated leaf components.
• Viewport Stability: min-h-[100dvh] for full-height sections. Never h-screen.
• Font Loading: font-display: swap for all custom fonts. Preload the primary display font.
• DOM Cost: If menu exceeds 30 items, implement category-based lazy loading or accordion collapse.

18. CSS Custom Properties Reference

:root {
  /* Backgrounds */
  --bg-primary: #FFF8F0;
  --bg-secondary: #F5E6D3;
  --bg-tertiary: #FFF0E0;

  /* Text */
  --text-primary: #1A1A1A;
  --text-secondary: #2C1810;
  --text-muted: #8B7355;

  /* Accents */
  --accent: #D4920B;
  --accent-red: #C23B22;
  --accent-olive: #4A5D23;

  /* Borders */
  --border: rgba(26, 26, 26, 0.08);
  --border-menu: rgba(26, 26, 26, 0.12);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 4px 16px rgba(26, 26, 26, 0.08);
  --shadow-lg: 0 12px 40px rgba(26, 26, 26, 0.12);
  --shadow-food: 0 8px 32px rgba(26, 26, 26, 0.15);
  --shadow-hover: 0 16px 48px rgba(26, 26, 26, 0.18);

  /* Motion */
  --ease-gastro: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-reveal: 0.8s;
  --duration-standard: 0.5s;
  --duration-hover: 0.3s;
  --duration-stagger: 0.08s;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Radii */
  --radius-card: 16px;
  --radius-image: 24px;
  --radius-button-pill: 9999px;
  --radius-button-soft: 12px;
  --radius-input: 12px;
  --radius-badge: 9999px;
}

19. Code Patterns & CSS Reference

Menu Item (Card Format)

<div style={{
  background: 'var(--bg-secondary)',
  borderRadius: 'var(--radius-card)',
  overflow: 'hidden',
  boxShadow: 'var(--shadow-md)',
  transition: 'box-shadow 0.3s var(--ease-gastro), transform 0.3s var(--ease-gastro)',
}}>
  <div style={{ overflow: 'hidden' }}>
    <img
      src={IMG.dish1}
      alt="Margherita Napolitana"
      style={{
        width: '100%',
        aspectRatio: '4/3',
        objectFit: 'cover',
        filter: 'saturate(1.05) contrast(1.03) sepia(0.03)',
        transition: 'transform 0.3s var(--ease-gastro)',
      }}
      loading="lazy"
    />
  </div>
  <div style={{ padding: '1.5rem' }}>
    <h3 style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: '1.125rem' }}>
      Margherita Napolitana
    </h3>
    <p style={{ fontFamily: 'var(--font-body)', color: 'var(--text-muted)', fontSize: '0.875rem', lineHeight: 1.65 }}>
      Molho San Marzano, mussarela de bufala, manjericao fresco e azeite extra virgem
    </p>
    <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, color: 'var(--accent)', fontSize: '1.125rem' }}>
      R$ 52,90
    </span>
  </div>
</div>

Menu Item (List Format — Upscale)

<div style={{
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'baseline',
  gap: '0.5rem',
  padding: '0.75rem 0',
  borderBottom: '1px dotted var(--border-menu)',
}}>
  <div>
    <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: '1.125rem', color: 'var(--text-primary)' }}>
      Risoto de Funghi Porcini
    </span>
    <p style={{ fontFamily: 'var(--font-body)', color: 'var(--text-muted)', fontSize: '0.875rem', marginTop: '0.25rem' }}>
      Arroz arborio, mix de cogumelos importados, parmesao 24 meses, manteiga trufada
    </p>
  </div>
  <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, color: 'var(--accent)', whiteSpace: 'nowrap' }}>
    R$ 78,00
  </span>
</div>

Floating WhatsApp Button

<a
  href="https://wa.me/5511306428910?text=Ola,%20gostaria%20de%20fazer%20uma%20reserva"
  target="_blank"
  rel="noopener noreferrer"
  style={{
    position: 'fixed',
    bottom: '1.5rem',
    right: '1.5rem',
    width: '56px',
    height: '56px',
    borderRadius: '9999px',
    background: '#D4920B',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    boxShadow: '0 8px 32px rgba(26,26,26,0.15)',
    zIndex: 30,
    transition: 'transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.3s cubic-bezier(0.25,0.46,0.45,0.94)',
  }}
>
  <WhatsAppIcon size={24} color="#FFFFFF" />
</a>

Section Wave Divider

<svg viewBox="0 0 1440 80" preserveAspectRatio="none" style={{ width: '100%', height: '60px', display: 'block' }}>
  <path d="M0,40 C360,80 1080,0 1440,50 L1440,80 L0,80 Z" fill="#F5E6D3" />
</svg>

Grain Texture Overlay (Subtle)

<div style={{ position: 'fixed', inset: 0, zIndex: 50, pointerEvents: 'none', opacity: 0.025 }}>
  <svg width="100%" height="100%">
    <filter id="grain">
      <feTurbulence baseFrequency="0.65" numOctaves="3" stitchTiles="stitch" />
    </filter>
    <rect width="100%" height="100%" filter="url(#grain)" />
  </svg>
</div>

20. Pre-Flight Checklist

Evaluate every output against this matrix before delivering. This is the final quality gate. A failed restaurant landing page means lost reservations and empty tables. Minimum 25 checks must pass.

Frontmatter & Architecture

• File is completely self-contained — all hooks, components, and styles inline
• Only allowed imports used: react, react-router-dom, lucide-react, ../lp-shell.css
• STYLES constant includes Google Fonts @import with display=swap
• STYLES constant includes CSS custom properties in :root
• IMG constant maps all image URLs with food-related picsum.photos seeds
• useReveal hook implemented inline with IntersectionObserver (threshold 0.1, rootMargin "-50px")

Typography

• Headlines use approved serif: Playfair Display, Fraunces, or DM Serif Display
• Body text uses DM Sans (400) or Plus Jakarta Sans (400) with line-height 1.65
• Menu prices use JetBrains Mono or Space Mono — monospace for numerical alignment
• No banned fonts present (Inter, Roboto, Arial, Open Sans, Helvetica, geometric sans for headlines)
• Food category labels use uppercase with letter-spacing: 0.15em and accent color underline
• Dish name callouts in Playfair Display Italic where contextually appropriate

Color System

• Primary background is Warm Cream #FFF8F0 — no cool whites, no pure white
• Primary text is Rich Charcoal #1A1A1A — no pure black #000000
• Primary accent is Saffron Gold #D4920B used consistently for CTAs and highlights
• NO blue anywhere in the design — backgrounds, accents, buttons, links, borders
• NO purple, neon green, or cool grays anywhere
• All shadows warm-tinted using rgba(26,26,26,...) — no rgba(0,0,0,...)
• Card backgrounds use Warm Sand #F5E6D3 or Cream Light #FFF0E0

Layout & Sections

• All 8 sections present: Hero, About, Menu Highlights, Gallery, Testimonials, Location/Hours, Delivery/Reservation, Footer
• Hero features full-bleed food photography at minimum 60% viewport height
• Hero uses warm gradient scrim for text overlay, not generic bg-black/50
• Menu section uses 2-column layout or asymmetric grid — NEVER equal 3-column
• Gallery uses masonry or asymmetric grid — NEVER equal 3-column
• Section spacing is py-20 md:py-28
• Content contained with max-w-7xl mx-auto

Motion

• All transitions use cubic-bezier(0.25,0.46,0.45,0.94) — no linear, ease, or ease-in-out
• Reveal animation: opacity + translateY(24px), duration 0.8s
• Image reveals: scale from 1.02 to 1.0 on viewport entry
• Food card hover: gentle scale 1.03 with warm shadow expansion
• Menu items: staggered fade-in with 0.08s delays
• No clip-path reveals, aggressive transforms, or bouncy springs
• No window.addEventListener('scroll') — IntersectionObserver only

WhatsApp Integration

• Floating WhatsApp button: fixed bottom-right, Saffron Gold #D4920B (NOT green), rounded-full
• WhatsApp link format correct: https://wa.me/55XXXXXXXXXXX?text=...
• CTA labels in Portuguese: "Reserve Sua Mesa", "Faça Seu Pedido", "Veja o Cardápio"
• WhatsApp touchpoints in minimum 4 locations: hero, menu, delivery, floating button
• Pre-filled WhatsApp messages are context-appropriate per section

Responsive & Performance

• Full-height sections use min-h-[100dvh], NEVER h-screen
• All grids collapse to single column below md: breakpoint
• Zero horizontal overflow at 320px minimum viewport
• Mobile padding is px-5 or px-6
• Touch targets minimum 44px height
• Hero image: loading="eager" + fetchpriority="high". All others: loading="lazy"
• Animations use only transform and opacity — no layout-triggering properties
• backdrop-blur only on fixed/sticky elements

Food Photography Quality

• All food photos use warm color treatment: saturate(1.05) contrast(1.03) sepia(0.03)
• No desaturation, no grayscale applied to any food image
• Food photos are large and dominant — no thumbnails below 240px
• Hover on food: scale-up with warm shadow increase, NEVER desaturation
• Text overlays on food use warm gradient scrim, not generic black overlay

Menu & Price Alignment

• All prices vertically aligned using monospace font or font-variant-numeric: tabular-nums
• Price format is Brazilian Real: "R$ XX,XX" with realistic values
• Menu item hierarchy clear: name (semibold) + description (muted) + price (accent mono)
• At least one featured/highlight item with accent badge

Brazilian Portuguese & Content

• All CTAs in Brazilian Portuguese
• Dish names are realistic Brazilian dishes, not lorem ipsum
• Chef/owner names are realistic Brazilian names, not "John Doe"
• Restaurant names sound like real Brazilian establishments
• Addresses use realistic Brazilian format with neighborhood and state
• Phone numbers use realistic Brazilian format: "+55 XX XXXX-XXXX"
• Operating hours visible in at least 2 locations (hero badge + dedicated section)
• Section headers use creative Portuguese names, not generic "Our Menu"

Anti-Patterns (Zero Tolerance)

• Zero emojis in entire output
• Zero AI copywriting cliches ("culinary journey", "elevate", "savor the moment")
• Zero clip art or cartoon food illustrations
• Zero circular spinner loaders
• Zero "Scroll to explore" text or scroll arrows
• Zero generic stock photography appearance
• Zero startup/tech brand names for restaurants