open-daycare/specs/01-feed-home.md

SPEC 01 — Home: feed de la guardería (plantilla feed.dc.html)

Estado: Implementada Depende de: — Fecha: 2026-10-19 Objetivo: Implementar la plantilla references/pantallas/feed.dc.html como página home (/) en Next.js, visualmente idéntica al original, sin autenticación ni base de datos.

Alcance

In:

• Página / (app/page.tsx) con: sidebar fijo de 248px (logo OpenDayCare · Sala Soles, botón "Nueva publicación", nav con Feed activo + Niños/Avisos/Mi cuenta, tarjeta de usuario "Caro Giménez" con logout), saludo ("GUARDERÍA · SALA SOLES" / "Buenas, Caro" / "12 niños · martes 17 jun"), caja "Compartí un momento…", separador "PUBLICADO HOY" y los 3 posts de la plantilla (logro, actividad con placeholder de foto, anuncio).
• Datos mock tipados en app/data/feed.ts con los 3 posts exactos de la plantilla.
• Componentes en app/components/: Sidebar.tsx, FeedHeader.tsx, ShareBox.tsx, PostCard.tsx.
• Cambio de fuentes en app/layout.tsx (Fredoka + Nunito vía next/font/google), lang="es" y metadata "OpenDayCare".
• Estilos base en app/globals.css (fondo #F6ECDF, texto #3F362E, scrollbar custom, tema claro fijo).
• Todos los links como <Link> a rutas futuras (/crear-publicacion, /ninos, /avisos, /mi-cuenta, /detalle-publicacion, /login).

Out of scope (para specs futuras):

• Las páginas destino del nav y sus funcionalidades (hoy darán 404 y está bien).
• Autenticación y logout funcional.
• Base de datos y persistencia.
• Interactividad real de likes, comentarios y editar (solo visual, contadores fijos).
• Responsive móvil.
• Dark mode.
• Foto real en el post de actividad (se mantiene el placeholder dashed de la plantilla).

Modelo de datos

// app/data/feed.ts
export type PostCategory = "logro" | "actividad" | "anuncio";

export interface Post {
  id: string;
  authorName: string;      // "Mateo" | "Anuncio general"
  authorInitial: string;   // "M" (solo posts de niño)
  authorColors: { bg: string; text: string }; // p.ej. { bg: "#A9D9E8", text: "#1F7A93" }
  timeLabel: string;       // "14:20"
  publishedBy: string;     // "publicado por vos"
  category: PostCategory;  // define badge y colores vía mapa en PostCard
  audience: string;        // "familia de Mateo" | "toda la sala"
  body: string;
  photoLabel?: string;     // "pintando con témperas" → placeholder dashed
  likes: number;
  comments: number;
}

export const posts: Post[] = [
  // Los 3 posts de la plantilla: logro (3/1), actividad con foto (5/2), anuncio (8/0)
];

Convenciones: los colores van como hex exactos de la plantilla; el mapa category → colores del badge vive en PostCard.tsx.

Plan de implementación

1. Fuentes y layout — app/layout.tsx: reemplazar Geist por Fredoka y Nunito como fuentes variables con next/font/google (variables --font-fredoka / --font-nunito), lang="es", title "OpenDayCare". Test manual: npm run dev sigue compilando.
2. Estilos globales — app/globals.css: body con background:#F6ECDF, color:#3F362E, font-family: var(--font-nunito), system-ui, sans-serif; scrollbar custom (thumb #E4D6C4); eliminar el bloque prefers-color-scheme y las variables Geist. Test manual: la app ya se ve crema.
3. Mock del feed — crear app/data/feed.ts con el tipo Post y los 3 posts de la plantilla.
4. Sidebar — crear app/components/Sidebar.tsx con logo, botón "Nueva publicación" (→ /crear-publicacion), nav (Feed activo, Niños, Avisos, Mi cuenta) y usuario + logout (→ /login).
5. Componentes del feed — crear FeedHeader.tsx, ShareBox.tsx y PostCard.tsx con utilities Tailwind de valores exactos.
6. Página home — reemplazar app/page.tsx: flex con Sidebar + <main> de scroll propio, contenido centrado max-width:760px, mapeando posts. Test manual: http://localhost:3000 muestra el feed completo.
7. Fidelidad visual — comparación lado a lado con references/pantallas/feed.dc.html a ancho ≥1280px; ajustar diferencias. Captura de verificación en .playwright-mcp/.

Criterios de aceptación

• npm run dev levanta sin errores y / muestra el feed completo: sidebar + saludo + caja + separador + 3 posts.
• npm run build completa sin errores.
• A ancho ≥1280px el layout coincide con la plantilla: sidebar 248px sticky, main con scroll propio y contenido centrado de 760px.
• Fredoka en logo, saludo y nombres de autor; Nunito (pesos 400–800) en el resto.
• Post 1: badge LOGRO (fondo #CFEBD8, texto #3E9B6C), ♥ 3, 💬 1, link "Editar".
• Post 2: badge ACTIVIDAD (fondo #C7E7F1, texto #2E89A6), placeholder dashed "Foto · pintando con témperas", ♥ 5, 💬 2.
• Post 3: avatar megáfono (fondo #CCD8F4), badge ANUNCIO, "Para: toda la sala", ♥ 8, 💬 0.
• Todos los links navegan con <Link>: /crear-publicacion (botón, caja y Editar), /ninos, /avisos, /mi-cuenta, /detalle-publicacion (íconos de comentarios), /login (logout).
• Colores base exactos: fondo #F6ECDF, tarjetas #FFFDF9 con borde #ECE0D0, sombras y radios según plantilla.
• Con el sistema en modo oscuro la página se mantiene en tema claro (sin dark mode).
• Los componentes nuevos no usan atributos style; todo está en utilities Tailwind con valores arbitrarios exactos.

Decisiones

• Sí: Tailwind 4 con valores arbitrarios exactos (bg-[#F6ECDF], shadow-[0_4px_16px_-12px_rgba(120,90,60,.5)]…) — consistente con el proyecto y pixel-perfect.
• No: estilos inline literales ni CSS Modules — divergen de la convención del repo.
• Sí: componentes separados en app/components/ — el sidebar se reutiliza en Niños, Avisos y Mi cuenta.
• Sí: mock tipado en app/data/feed.ts — deja el terreno listo para la BD futura.
• Sí: <Link> a rutas futuras aunque hoy den 404 — la navegación queda cableada desde el día uno.
• Sí: solo desktop, réplica exacta — el móvil merece decisiones de diseño propias (otra spec).
• Sí: next/font/google para Fredoka y Nunito como fuentes variables — misma familia y pesos que el <link> de la plantilla, self-hosted y sin FOUT.
• Sí: tema claro fijo, eliminando el dark mode automático de globals.css — la plantilla no define modo oscuro.
• No: autenticación, BD, likes/comentarios/editar funcionales ni foto real — excluidos explícitamente por el usuario.

Qué no está en esta spec

• Otras páginas (Niños, Avisos, Mi cuenta, crear/editar publicación, detalle, login) — cada una irá en su propia spec.
• Autenticación y base de datos.
• Likes, comentarios y edición funcionales.
• Responsive móvil y dark mode.