mercadodevida/work/artifacts/F-036/SPEC.md

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)