127 lines
4.4 KiB
Markdown
127 lines
4.4 KiB
Markdown
# 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)
|