# SPEC.md — F-036 Homepage

## 1. Problem

MercadoDeVida needs a public homepage that showcases the brand, featured products, categories, and brand highlights. This is the entry point for all users and must communicate trust, product quality, and drive conversions.

## 2. Goal

A Server-Side Rendered (SSR) homepage that loads fast, is SEO-optimized, and converts visitors into shoppers.

## 3. Non-Goals

- Login/register (handled by separate routes)
- Cart/checkout (separate flows)
- User account
- Admin panel

## 4. User Story

As a visitor, I want to land on the homepage and immediately see:
- Who MercadoDeVida is and what they sell (hero)
- Featured/promoted products I can buy
- Browse by category
- Featured brands

So that I can discover products and start shopping.

## 5. Functional Requirements

### FR-1: Hero Section
- Headline: "Productos naturales y orgánicos para tu bienestar"
- Subheadline: "Envío a toda España · Calidad certificada · 100% natural"
- CTA button: "Ver productos" → navigates to products page
- Background: soft organic/nature aesthetic (CSS gradient or Unsplash)

### FR-2: Featured Products Section
- Title: "Productos destacados"
- Grid of 4-8 product cards
- Each card shows: image, name, brand, price
- Click → product detail page
- Data from backend: catalog + pricing modules

### FR-3: Categories Section
- Title: "Explora por categoría"
- Grid of category cards (icons or images)
- Each card: category name + image
- Click → category product listing
- Data from backend: categories module

### FR-4: Featured Brands Section
- Title: "Nuestras marcas"
- Horizontal scroll or grid of brand logos + names
- Click → brand page
- Data from backend: brands module

### FR-5: Footer
- Links: About, Contact, Shipping, Privacy, Terms
- Copyright: "© 2026 MercadoDeVida"
- Social links placeholder

## 6. Layout

```
┌─────────────────────────────────────────┐
│ HEADER: Logo | Nav links | Cart icon     │
├─────────────────────────────────────────┤
│ HERO: Full-width, gradient bg, headline  │
│       + subheadline + CTA button        │
├─────────────────────────────────────────┤
│ FEATURED PRODUCTS: 4-col grid of cards  │
├─────────────────────────────────────────┤
│ CATEGORIES: 3-4 col grid of cards       │
├─────────────────────────────────────────┤
│ BRANDS: horizontal scroll or grid        │
├─────────────────────────────────────────┤
│ FOOTER: links + copyright               │
└─────────────────────────────────────────┘
```

## 7. Data Sources

| Section | Source | Endpoint |
|---|---|---|
| Categories | Backend API | GET /categories |
| Products | Backend API | GET /products?featured=true (or filter in-page) |
| Brands | Backend API | GET /brands |
| Nav | Categories + static | — |

## 8. SEO

- Title: "MercadoDeVida — Productos naturales y orgánicos"
- Meta description: "Tienda online de productos naturales, orgánicos y saludables. Envío a toda España."
- Open Graph tags
- Semantic HTML: `<header>`, `<main>`, `<section>`, `<footer>`

## 9. Tech

- **Next.js 14 App Router** (Server Components)
- **TypeScript**
- **Tailwind CSS**
- **No JS on initial load** (pure SSR)
- Backend: existing Fastify REST API on port 3000

## 10. Acceptance Criteria

- [ ] Homepage renders at `/` with SSR
- [ ] Hero section visible with headline, subheadline, CTA
- [ ] Featured products grid loads from API
- [ ] Categories grid loads from API
- [ ] Brands section loads from API
- [ ] Footer with links and copyright
- [ ] Responsive on mobile/tablet/desktop
- [ ] SEO meta tags present
- [ ] No console errors
- [ ] Page loads in < 2s (with API response)

## 11. Dependencies

- Backend F-001 to F-030 (already done)
- CAVEMAN.md frontend structure

## 12. Security

- No user data on homepage (public)
- No sensitive data exposed
- HTTPS assumed (handled by deployment layer)