# GrillMaster Pro — Premium BBQ E-Commerce Website

## Design Guidelines

### Design References
- **Weber.com**: Premium grill showcase, clean product cards
- **Traeger.com**: Dark atmospheric hero sections, fire imagery
- **Style**: "Fire and Iron" — Dark, masculine, premium outdoor cooking

### Color Palette
- Primary Background: #1a1a1a (Deep Black)
- Secondary Background: #2b2b2b (Deep Charcoal)
- Card Background: #333333 (Dark Gray)
- Accent: #d35400 (Rust Orange — CTAs, highlights, hover)
- Accent Hover: #e67e22 (Lighter Orange)
- Text Primary: #FFFFFF (White)
- Text Secondary: #b0b0b0 (Light Gray)
- Text Muted: #888888 (Muted Gray)
- Star Rating: #f39c12 (Gold)
- Success/In Stock: #27ae60 (Green)

### Typography
- Headings: Playfair Display, serif — font-weight 700
- Subheadings/Nav/Buttons: Oswald, sans-serif — font-weight 500-700
- Body: Inter, sans-serif — font-weight 400
- H1: 56px, H2: 40px, H3: 28px, Body: 16px

### Key Component Styles
- **Buttons**: Rust Orange (#d35400) bg, white text, 4px rounded, hover: #e67e22
- **Cards**: #333333 bg, 1px border #444, 8px rounded, hover: lift 6px with orange glow
- **Navigation**: Sticky, #1a1a1a bg with slight transparency, backdrop-blur
- **Badges**: "In Stock" green, "Free Shipping" orange outline, star ratings gold

### Layout & Spacing
- Hero: Full viewport height, overlay gradient
- Section padding: 80px vertical, max-width 1400px
- Product grid: 3 columns desktop, 2 tablet, 1 mobile, 24px gap
- Category grid: 3x2 desktop, 2 tablet, 1 mobile

### Images to Generate
1. **hero-grill-fire.jpg** — Premium ceramic grill with glowing red coals and a perfectly seared steak, dramatic smoke rising, dark outdoor backyard setting at dusk, warm fire light (Style: photorealistic, cinematic)
2. **category-ceramic-grill.jpg** — Close-up of a premium green ceramic kamado grill on a patio, warm lighting (Style: photorealistic, product photography)
3. **category-gas-bbq.jpg** — Stainless steel gas BBQ grill with flames, outdoor setting, golden hour light (Style: photorealistic, lifestyle)
4. **category-smoker.jpg** — Offset smoker with thick white smoke billowing out, rustic wood background (Style: photorealistic, atmospheric)
5. **category-knives.jpg** — Set of premium BBQ knives on a dark wooden cutting board with herbs and spices (Style: photorealistic, overhead shot)
6. **category-cast-iron.jpg** — Cast iron skillet with sizzling steak on a campfire, sparks flying (Style: photorealistic, dramatic)
7. **blog-brisket.jpg** — Sliced smoked brisket with perfect smoke ring on a wooden board (Style: photorealistic, food photography)
8. **blog-charcoal-vs-gas.jpg** — Split image concept: charcoal grill with flames on one side, gas grill on the other (Style: photorealistic, editorial)

---

## Development Tasks

### Files to Create (8 files max)
1. **src/pages/Index.tsx** — Main homepage composing all sections
2. **src/components/Header.tsx** — Sticky header with logo, nav, search, cart
3. **src/components/HeroSection.tsx** — Full-viewport hero with H1 and CTA
4. **src/components/CategoryGrid.tsx** — 6 category cards with hover effects
5. **src/components/ProductCards.tsx** — "Top Rated Grills 2024" with ratings, prices, badges
6. **src/components/BlogSection.tsx** — BBQ Tips & Recipes blog previews
7. **src/components/TrustBanner.tsx** — Warranty, shipping, support badges
8. **src/components/Footer.tsx** — Full footer with policies, contact, links

### Implementation Order
1. Generate all images
2. Update tailwind config and index.css for "Fire and Iron" theme
3. Create Header component
4. Create HeroSection component
5. Create CategoryGrid component
6. Create ProductCards component
7. Create BlogSection component
8. Create TrustBanner component
9. Create Footer component
10. Compose all in Index.tsx
11. Lint, build, check