Con la marca incorporada primera versión
This commit is contained in:
markosbenitez
@@ -2,18 +2,27 @@
|
|||||||
|
|
||||||
/* ── Tokens ── */
|
/* ── Tokens ── */
|
||||||
:root {
|
:root {
|
||||||
|
/* ── Marca RE ── */
|
||||||
|
--color-re-teal: #43BBC8;
|
||||||
|
--color-re-dark: #494F4F;
|
||||||
|
--color-re-orange: #F8AD13;
|
||||||
|
--color-re-orange-intense: #EE761A;
|
||||||
|
--color-re-light: #E7E6E5;
|
||||||
|
--color-re-white: #FFFFFF;
|
||||||
|
|
||||||
|
/* ── Sistema (primario = teal RE) ── */
|
||||||
--color-bg: #f9fafb;
|
--color-bg: #f9fafb;
|
||||||
--color-surface: #ffffff;
|
--color-surface: #ffffff;
|
||||||
--color-text: #111827;
|
--color-text: #111827;
|
||||||
--color-text-muted: #6b7280;
|
--color-text-muted: #6b7280;
|
||||||
--color-primary: #1d4ed8;
|
--color-primary: #43BBC8;
|
||||||
--color-primary-hover: #1e40af;
|
--color-primary-hover: #3DAAB6;
|
||||||
--color-primary-light: #dbeafe;
|
--color-primary-light: #e8f8fa;
|
||||||
--color-accent: #2563eb;
|
--color-accent: #43BBC8;
|
||||||
--color-error: #b91c1c;
|
--color-error: #b91c1c;
|
||||||
--color-error-bg: #fef2f2;
|
--color-error-bg: #fef2f2;
|
||||||
--color-border: #d1d5db;
|
--color-border: #d1d5db;
|
||||||
--color-border-focus: #2563eb;
|
--color-border-focus: #43BBC8;
|
||||||
--color-sensitive: #fef3c7;
|
--color-sensitive: #fef3c7;
|
||||||
--color-sensitive-border: #f59e0b;
|
--color-sensitive-border: #f59e0b;
|
||||||
--radius: 8px;
|
--radius: 8px;
|
||||||
@@ -494,6 +503,46 @@ body {
|
|||||||
.btn { width: 100%; }
|
.btn { width: 100%; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Survey header (marca RE) ── */
|
||||||
|
.survey-header-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
.survey-header-logo { display: block; height: 48px; width: auto; flex-shrink: 0; }
|
||||||
|
.survey-header-title {
|
||||||
|
color: var(--color-re-white);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Survey footer ── */
|
||||||
|
.survey-footer-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 24px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
.survey-footer-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.survey-footer-label {
|
||||||
|
color: rgba(255,255,255,0.7);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.survey-footer-logo { height: 32px; width: auto; display: block; }
|
||||||
|
|
||||||
/* ── Reduced motion ── */
|
/* ── Reduced motion ── */
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
|
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
import type { Metadata, Viewport } from 'next'
|
import type { Metadata, Viewport } from 'next'
|
||||||
import './globals.css'
|
import './globals.css'
|
||||||
|
import { SurveyHeader } from '@/components/survey-header'
|
||||||
|
import { SurveyFooter } from '@/components/survey-footer'
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: 'Mapeo de Cuidadores',
|
title: 'Mapeo de Cuidadores',
|
||||||
@@ -17,7 +19,11 @@ export const viewport: Viewport = {
|
|||||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<html lang="es">
|
<html lang="es">
|
||||||
<body>{children}</body>
|
<body>
|
||||||
|
<SurveyHeader />
|
||||||
|
<div className="layout-content">{children}</div>
|
||||||
|
<SurveyFooter />
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
assets/.DS_Store
vendored
BIN
assets/.DS_Store
vendored
Binary file not shown.
BIN
assets/inq/MARCA FINAL 2023 AREA DE SEGURIDAD 1 BCO.png
Normal file
BIN
assets/inq/MARCA FINAL 2023 AREA DE SEGURIDAD 1 BCO.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
assets/inq/MARCA FINAL 2023 AREA DE SEGURIDAD 1 COLOR.png
Normal file
BIN
assets/inq/MARCA FINAL 2023 AREA DE SEGURIDAD 1 COLOR.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
1
assets/inq/inq-color-svg.svg
Normal file
1
assets/inq/inq-color-svg.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 62 KiB |
1
assets/re/RE - SVG.svg
Normal file
1
assets/re/RE - SVG.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 124 KiB |
27
components/survey-footer.tsx
Normal file
27
components/survey-footer.tsx
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
export function SurveyFooter() {
|
||||||
|
return (
|
||||||
|
<footer
|
||||||
|
style={{ background: 'var(--color-re-dark)' }}
|
||||||
|
className="survey-footer-bar"
|
||||||
|
>
|
||||||
|
<div className="survey-footer-group">
|
||||||
|
<span className="survey-footer-label">Un producto de</span>
|
||||||
|
<img
|
||||||
|
src="/logos/FS-ISO-SVG.svg"
|
||||||
|
alt="Fundación Solidaridad"
|
||||||
|
className="survey-footer-logo"
|
||||||
|
height={32}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="survey-footer-group">
|
||||||
|
<span className="survey-footer-label">Powered by</span>
|
||||||
|
<img
|
||||||
|
src="/logos/inq-white-svg.svg"
|
||||||
|
alt="InQuality"
|
||||||
|
className="survey-footer-logo"
|
||||||
|
height={32}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
17
components/survey-header.tsx
Normal file
17
components/survey-header.tsx
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
export function SurveyHeader() {
|
||||||
|
return (
|
||||||
|
<header
|
||||||
|
style={{ background: 'var(--color-re-teal)' }}
|
||||||
|
className="survey-header-bar"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/logos/re-mono-svg.svg"
|
||||||
|
alt="RE"
|
||||||
|
className="survey-header-logo"
|
||||||
|
width={48}
|
||||||
|
height={48}
|
||||||
|
/>
|
||||||
|
<span className="survey-header-title">DATOS PAÍS SOBRE EL CUIDADO</span>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
1
public/logos/FS-ISO-SVG.svg
Normal file
1
public/logos/FS-ISO-SVG.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 32 KiB |
1
public/logos/inq-white-svg.svg
Normal file
1
public/logos/inq-white-svg.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 37 KiB |
1
public/logos/re-mono-svg.svg
Normal file
1
public/logos/re-mono-svg.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 124 KiB |
123
sprints/sprint-2/ETAPA_2C_PROMPT.md
Normal file
123
sprints/sprint-2/ETAPA_2C_PROMPT.md
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
# ETAPA 2C — Branding RE: Header, Footer y Variables CSS
|
||||||
|
|
||||||
|
## 1. Objetivo
|
||||||
|
Implementar la identidad visual de la marca **RE** en el formulario de encuestas.
|
||||||
|
Color predominante: **#43BBC8** (teal). Logo RE en blanco sobre fondo teal en el header.
|
||||||
|
Footer con logos de Fundación Solidaridad e InQuality.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Contexto previo
|
||||||
|
- Etapa 2B completada: el formulario carga desde `?s=UUID`, tiene consentimiento,
|
||||||
|
geo dropdowns Paraguay, y persiste datos en Supabase.
|
||||||
|
- Stack: Next.js 15 (App Router), Tailwind CSS, Supabase Cloud.
|
||||||
|
- URL piloto: `http://economia-cuidado.inqualityhq.com?s=30000000-0000-0000-0000-000000000001`
|
||||||
|
- Los SVG de logos ya están en `public/logos/` del repo:
|
||||||
|
- `public/logos/re-mono-svg.svg` — logo RE monocromático blanco
|
||||||
|
- `public/logos/inq-white-svg.svg` — logo InQuality blanco
|
||||||
|
- `public/logos/FS-ISO-SVG.svg` — isotipo Fundación Solidaridad
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. DECISIONES YA TOMADAS (no consultar de nuevo)
|
||||||
|
- Color primario header: `#43BBC8` (teal RE)
|
||||||
|
- Color oscuro/texto: `#494F4F` (gris oscuro RE)
|
||||||
|
- Color acento naranja: `#F8AD13`
|
||||||
|
- Color naranja intenso: `#EE761A`
|
||||||
|
- Color fondo claro: `#E7E6E5`
|
||||||
|
- Logo RE en header: `public/logos/re-mono-svg.svg` sobre fondo `#43BBC8`
|
||||||
|
- Logo InQuality footer: `public/logos/inq-white-svg.svg` — "Powered by"
|
||||||
|
- Logo Fundación Solidaridad footer: `public/logos/FS-ISO-SVG.svg` — "Un producto de"
|
||||||
|
- Tipografía: Inter (ya en uso, coincide con manual FS)
|
||||||
|
- Jerarquía: RE es la marca predominante; FS e InQ son secundarios en footer
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Tareas
|
||||||
|
|
||||||
|
### 4.1 Variables CSS globales
|
||||||
|
En `app/globals.css` (o equivalente), agregar variables CSS:
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--color-re-teal: #43BBC8;
|
||||||
|
--color-re-dark: #494F4F;
|
||||||
|
--color-re-orange: #F8AD13;
|
||||||
|
--color-re-orange-intense: #EE761A;
|
||||||
|
--color-re-light: #E7E6E5;
|
||||||
|
--color-re-white: #FFFFFF;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4.2 Componente SurveyHeader
|
||||||
|
Crear `components/survey-header.tsx`:
|
||||||
|
- Fondo: `#43BBC8`
|
||||||
|
- Contenido en una fila, alineado verticalmente al centro, padding py-4 px-6
|
||||||
|
- Logo RE: `<img src="/logos/re-mono-svg.svg" alt="RE" />` altura ~48px
|
||||||
|
- Título a la derecha del logo: **"DATOS PAÍS SOBRE EL CUIDADO"**
|
||||||
|
- Inter bold, color blanco, ~1rem, tracking-wide (letter-spacing amplio)
|
||||||
|
|
||||||
|
### 4.3 Componente SurveyFooter
|
||||||
|
Crear `components/survey-footer.tsx`:
|
||||||
|
- Fondo: `#494F4F`
|
||||||
|
- Flex row, justify-between, padding py-3 px-6
|
||||||
|
- Izquierda: texto `"Un producto de"` (blanco, xs) + `<img src="/logos/FS-ISO-SVG.svg" alt="Fundación Solidaridad" />` ~32px alto
|
||||||
|
- Derecha: texto `"Powered by"` (blanco, xs) + `<img src="/logos/inq-white-svg.svg" alt="InQuality" />` ~32px alto
|
||||||
|
- Cada par texto+logo alineado verticalmente al centro (flex, items-center, gap-2)
|
||||||
|
|
||||||
|
### 4.4 Acentos de color en el formulario
|
||||||
|
Aplicar la paleta RE a los elementos existentes — **solo color, sin cambiar layout ni tamaños**:
|
||||||
|
- Botones primarios (Siguiente, Enviar): fondo `#43BBC8`, texto blanco, hover `#3DAAB6`
|
||||||
|
- Checkboxes/radios seleccionados: acento `#43BBC8`
|
||||||
|
- Bordes de inputs con foco: `#43BBC8`
|
||||||
|
- Barra de progreso (si existe): `#43BBC8`
|
||||||
|
- Links: `#43BBC8`
|
||||||
|
|
||||||
|
### 4.5 Layout principal
|
||||||
|
En `app/page.tsx` o el layout de la encuesta, componer:
|
||||||
|
```tsx
|
||||||
|
<SurveyHeader />
|
||||||
|
<main>
|
||||||
|
{/* formulario existente sin cambios estructurales */}
|
||||||
|
</main>
|
||||||
|
<SurveyFooter />
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Entregables (DoD)
|
||||||
|
|
||||||
|
- [ ] Variables CSS definidas en globals.css
|
||||||
|
- [ ] `SurveyHeader` renderiza: fondo teal, logo RE blanco ~48px, título blanco bold
|
||||||
|
- [ ] `SurveyFooter` renderiza: fondo oscuro, logos FS e InQ con labels
|
||||||
|
- [ ] Botones del formulario usan color `#43BBC8`
|
||||||
|
- [ ] Inputs con foco muestran borde `#43BBC8`
|
||||||
|
- [ ] Build sin errores (`next build`)
|
||||||
|
- [ ] `git diff --name-only HEAD` — solo archivos autorizados en el diff
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. Qué reportar
|
||||||
|
```
|
||||||
|
Verificado:
|
||||||
|
- build exitoso
|
||||||
|
- archivos en diff: [lista]
|
||||||
|
- SurveyHeader: [descripción visual]
|
||||||
|
- SurveyFooter: [descripción visual]
|
||||||
|
- Colores aplicados: [elementos modificados]
|
||||||
|
|
||||||
|
Asumido:
|
||||||
|
- [lo que no se pudo verificar visualmente]
|
||||||
|
|
||||||
|
Decisiones proactivas (Nivel 2 — validar/revertir si hay problema):
|
||||||
|
- [cambios fuera de scope si los hubo]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. Qué NO hacer
|
||||||
|
- ❌ No modificar estructura de preguntas, widgets o lógica de submit
|
||||||
|
- ❌ No tocar `lib/supabase.ts`, `app/actions/`, ni migraciones
|
||||||
|
- ❌ No cambiar tamaños de fuente ni layout de grilla
|
||||||
|
- ❌ No agregar nuevas dependencias npm
|
||||||
|
- ❌ No resolver ítems de TECH_DEBT.md o BACKLOG.md
|
||||||
|
- ❌ No modificar archivos fuera del scope (git diff lo detectará)
|
||||||
Reference in New Issue
Block a user