# Páginas web de Quov: instrucciones para agentes de IA Usa este archivo cuando construyas o edites una página web de Quov: el sitio de mercadeo en `quov.io` (Astro y Tailwind CSS 4) o cualquier otra página pública. Carga primero `quov-brand.es.md` (https://quov.io/design-system/quov-brand.es.md); este archivo aplica la marca a la pantalla y nunca la contradice. Los archivos del logo están listados en el archivo de marca y se sirven desde `https://quov.io/design-system/logo/` (`quov-mark-dark.svg`, `quov-mark-light.svg`, `quov-letters.svg`, además de PNG de 32 a 1024 px). Nunca vuelvas a dibujar el símbolo. ## Postura La página se lee como la ficha técnica de un proveedor serio: estructura con filetes, datos presentados como datos, afirmaciones llanas sobre lo que se entrega. Es una superficie de marca: comunica, no vende. Un visitante debe salir sabiendo quién es Quov, las cuatro formas en que atiende a una empresa y cómo iniciar una conversación. La idea distintiva: el símbolo son cuatro letras en una cuadrícula de 2×2, y Quov ofrece cuatro cosas, así que la portada lleva un índice de 2×2 con filetes de las cuatro líneas de negocio. La estructura del logo se vuelve la estructura de la página. Cada sección posterior se construye de forma distinta (un libro mayor, una secuencia, una lista de especificaciones), para que la página nunca se convierta en una cuadrícula de tarjetas. ## Tokens En el sitio de Quov cada token vive en `src/styles/globals.css`, con los mismos nombres que las aplicaciones de producto. Los componentes usan los nombres de Tailwind, nunca un color literal. Fuera del sitio, toma este bloque como punto de partida (Tailwind CSS 4): ```css @import 'tailwindcss'; @import '@fontsource/aoboshi-one/latin-400.css'; @import '@fontsource-variable/geist'; @import '@fontsource-variable/geist-mono'; /* The paper theme applies when carries data-theme="light". */ @custom-variant light (&:where([data-theme='light'], [data-theme='light'] *)); @theme inline { --font-heading: 'Aoboshi One', ui-serif, Georgia, serif; --font-sans: 'Geist Variable', 'Geist', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Geist Mono Variable', 'Geist Mono', ui-monospace, Menlo, monospace; --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-mark: var(--mark); } @theme { --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); } /* Dark (default): cold slate, hue 260. */ :root { color-scheme: dark; --radius: 0.375rem; --background: oklch(0.11 0.01 260); --foreground: oklch(0.93 0.01 260); --card: oklch(0.15 0.01 260); --card-foreground: oklch(0.93 0.01 260); --primary: oklch(0.93 0 0); --primary-foreground: oklch(0.13 0 0); --secondary: oklch(0.2 0.01 260); --secondary-foreground: oklch(0.85 0.01 260); --muted: oklch(0.2 0.01 260); --muted-foreground: oklch(0.64 0.01 260); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 12%); --ring: oklch(0.55 0.01 260); --mark: oklch(0.06 0.005 260); } /* Light: sugar-cane paper, hue 75. */ :root[data-theme='light'] { color-scheme: light; --background: oklch(0.95 0.02 75); --foreground: oklch(0.18 0.01 75); --card: oklch(0.98 0.015 75); --card-foreground: oklch(0.18 0.01 75); --primary: oklch(0.18 0 0); --primary-foreground: oklch(0.95 0.02 75); --secondary: oklch(0.91 0.02 75); --secondary-foreground: oklch(0.25 0.01 75); --muted: oklch(0.91 0.02 75); --muted-foreground: oklch(0.48 0.01 75); --border: oklch(0 0 0 / 10%); --input: oklch(0 0 0 / 8%); --ring: oklch(0.48 0.02 75); --mark: oklch(0.995 0.005 75); } @layer base { * { border-color: var(--color-border); } html { scroll-behavior: smooth; scroll-padding-top: 5rem; } body { background-color: var(--color-background); color: var(--color-foreground); font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.65; } [data-theme='light'] body { line-height: 1.6; } h1, h2 { font-family: var(--font-heading); font-weight: 400; text-wrap: balance; } :focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; } } ``` | Tailwind | Uso | | ------------------------------------ | ------------------------------------------------------------------------------------- | | `bg-background` | La página. El único fondo de página: las secciones no alternan franjas. | | `bg-card` | Un paso de elevación: el marco de una captura, código, un panel lateral abierto. | | `bg-secondary` | Rellenos sutiles: hover sobre un control discreto, una etiqueta. | | `text-foreground` | Texto, el elemento de navegación actual, las letras del símbolo. | | `text-muted-foreground` | Entradillas, leyendas, metadatos, navegación inactiva. | | `bg-primary text-primary-foreground` | El botón principal. Uno por vista. | | `border-border` | Cada filete, regla y marco. | | `font-heading` | Aoboshi One. `h1` y `h2` la reciben de la capa base. | | `font-sans` | Geist, la predeterminada. | | `font-mono` | Geist Mono, solo para datos. Agrega `tabular-nums` a las cifras. | | `rounded-lg` | `0.375rem`, controles y marcos. `rounded-md` y `rounded-sm` para piezas más pequeñas. | | `ease-out-quint` | La única curva de aceleración. | | `light:` | Variante para el tema de papel. | ## Escala tipográfica En `apps/website` los niveles fluidos son tamaños del tema de Tailwind definidos en `src/styles/globals.css`; cada uno trae su propio interlineado y espaciado. | Nivel | Clases | Valor | Dónde | | ---------- | ---------------------------------------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------- | | Display | `font-heading text-display` | `clamp(2.25rem, 1.2rem + 3.4vw, 4.5rem)`, 1.06, -0.015em | La afirmación de la portada, una vez por página | | Título | `font-heading text-title` (fuente por defecto de h2) | `clamp(1.75rem, 1.3rem + 1.8vw, 3rem)`, 1.1, -0.01em | Títulos de sección, el título de contacto | | Subtítulo | `font-heading text-subtitle` | `clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem)`, 1.25 | Nombres de producto, títulos de paso, el proyecto de referencia | | Entradilla | `text-lead` | `clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem)`, 1.6 | El párrafo bajo un título de sección | | Cuerpo | por defecto | `1.0625rem`, 1.65 sobre pizarra, 1.6 sobre papel, `max-w-[65ch]` | Texto corrido | | Etiqueta | `text-xs font-medium uppercase tracking-wider` | `0.75rem` | Celdas de encabezado de tabla, etiquetas pequeñas | | Dato | `font-mono text-[0.8125rem] tabular-nums` | `0.8125rem` | Índices, estados, dominios, el selector de idioma | Los niveles de título mantienen una razón de al menos 1.25 en todo ancho. El texto corrido nunca baja de 16 px. ## Maquetación - **Contenedor:** la utilidad `container-page`: `max-width: 76rem`, centrado, márgenes laterales de 1rem en teléfonos, 1.5rem desde 40rem de ancho, 2rem desde 64rem. - **Ritmo de secciones:** la utilidad `section-y`, `padding-block: clamp(4rem, 2.75rem + 5vw, 7.5rem)`. Las secciones descansan sobre el fondo de la página y se separan con un solo filete (`border-t border-border`). Espacio amplio entre secciones, agrupación apretada dentro de ellas. - **Encabezado de sección:** un índice monoespaciado (`01` a `04`) en `text-muted-foreground`, el título en Aoboshi One y luego una entradilla en `text-muted-foreground` de menos de 65 caracteres. - **Composición:** dos columnas asimétricas desde `lg` (el encabezado en el lado angosto, el contenido en el ancho), una sola columna en teléfonos. - **Profundidad:** solo bordes. Sin sombras, sin contenedores anidados. - **Anclas:** el encabezado es fijo, así que las secciones con ancla conservan `scroll-padding-top: 5rem`. ## Componentes Antes de construir algo nuevo, usa uno de estos. - **Encabezado:** fijo, sobre `bg-background`; un filete inferior aparece cuando la página se desplaza. A la izquierda, el símbolo y el logotipo "Quov", que enlazan al inicio. Luego cuatro enlaces de ancla (Productos, Software a la medida, Infraestructura, Dispositivos; en inglés: Products, Software, Infrastructure, Devices), el selector EN / ES en monoespaciada, el cambio de tema (un botón de ícono) y un botón principal, "Agendar una llamada" ("Schedule a call"). Por debajo de `lg`, las anclas, el selector y el cambio de tema pasan a un panel lateral que abre un botón de menú. - **Portada:** a la izquierda, la afirmación en Display ("De la primera línea de código al último dispositivo." / "From the first line of code to the last device."), una entradilla breve sobre lo que Quov es para una empresa (un solo proveedor que diseña, construye y mantiene en marcha la tecnología), nunca una lista de las cuatro líneas, que ya lleva el índice, y dos acciones: el botón principal "Agendar una llamada" y `contact@quov.io` como enlace mailto en monoespaciada. A la derecha (debajo en teléfonos), el índice de 2×2. - **Índice de 2×2:** una cuadrícula con filetes y esquinas rectas de cuatro celdas (`grid grid-cols-2 border-t border-l`, cada celda `border-r border-b`). Cada celda completa enlaza a su sección y contiene un índice monoespaciado (`01`) con una pequeña flecha hacia abajo a la derecha, el nombre de la línea en Aoboshi One y una línea corta en `text-muted-foreground`. Al pasar el cursor la celda se tiñe con `bg-card`. Las celdas entran una vez, escalonadas. - **Tabla tipo libro mayor:** para los productos. Columnas: nombre (Aoboshi One), qué hace, para quién es, estado (monoespaciada, por ejemplo "Por invitación" / "By invitation"), enlace (monoespaciada, con una flecha hacia arriba a la derecha). Celdas de encabezado en monoespaciada `text-xs text-muted-foreground` sobre un filete; filetes entre filas. En teléfonos cada fila se apila. Una fila sin enlace no muestra nada en esa celda, nunca un control que parezca deshabilitado. Puede ir una nota bajo la tabla en tamaño Pequeño. - **Lista de especificaciones:** una lista con filetes a dos columnas (término, descripción) para capacidades: `dl` con una fila por elemento, el término en `font-medium`, la descripción en `text-muted-foreground`. Nunca tarjetas. - **Secuencia numerada:** para pasos que ocurren en orden, y solo entonces. Cada paso: un índice monoespaciado, un título en Aoboshi One, una línea. Cuatro columnas desde `lg` bajo una sola regla; una lista con filetes en teléfonos. - **Captura enmarcada:** una página real, capturada a 1600 px de ancho, en escala de grises (`grayscale`), dentro de un marco `rounded-md border` cuya barra superior muestra el dominio en monoespaciada sobre un filete. El enlace va al lado en monoespaciada. El texto alternativo en cada idioma dice lo que muestra la imagen. Bajo la tabla de productos, una pantalla enmarcada por producto, tres en fila (apiladas en teléfonos), en el orden de la tabla y con el nombre del producto como leyenda. - **Proyecto de referencia:** trabajo entregado como prueba, ubicado bajo la línea de negocio que demuestra (un desarrollo a la medida bajo Software a la medida, una infraestructura bajo Infraestructura). Una etiqueta, el nombre del proyecto en Subtítulo, un resumen de una oración en Entradilla, un cuerpo breve, una lista de datos con filetes (Cliente, con el nombre oficial del cliente; Entregado; Sitio) y su captura enmarcada. Las referencias consecutivas alternan el lado de la captura. - **Bloque de contacto:** el título "Agenda una llamada" / "Schedule a call" en Aoboshi One, una entradilla breve que invita al visitante a decir qué necesita y aclara que la primera llamada define el alcance y los siguientes pasos, el enlace de agenda como acción principal y `contact@quov.io` como secundaria. - **Pie de página:** el símbolo y el logotipo, una línea sobre lo que hace Quov, las cuatro anclas, el selector de idioma, un enlace "Design system", `contact@quov.io` y `© Quov S.A.S.`. Ningún número de identificación. - **Botones y enlaces:** principal `rounded-md bg-primary font-medium text-primary-foreground hover:bg-primary/90`, `h-12 px-6 text-base` con una flecha al final en las secciones y `h-9 px-4 text-sm` en el encabezado; secundario `rounded-md border border-border font-medium hover:bg-secondary` en los mismos tamaños. Los enlaces de texto usan la utilidad `link-rule`: un subrayado de 1px al 40 % del color del texto, desplazado 0.25em, que se vuelve sólido en hover. Los enlaces que son datos (dominios, direcciones de correo) van en monoespaciada. Los enlaces externos agregan una pequeña flecha hacia arriba a la derecha (lucide `ArrowUpRight`). - **Íconos:** solo lucide, de 16 px, junto a una etiqueta. Nunca un ícono SVG dibujado a mano en línea, nunca una fila de íconos decorativos. Nunca construyas una cuadrícula de tarjetas idénticas con íconos, un bloque de métricas de portada, un muro de logos, un carrusel de testimonios ni una tabla de precios. ## Movimiento Discreto: dos momentos en todo el sitio. - **Entrada:** solo el índice de 2×2 de la portada. Cada celda aparece con un fundido y sube unos pocos píxeles, de forma escalonada, con `ease-out-quint`. Solo opacidad y transformación. - **Cambio de tema:** un fundido de 300 ms de `color`, `background-color` y `border-color`. - **Nunca:** revelaciones activadas por desplazamiento, parallax, elevaciones en hover, curvas con rebote o elásticas, propiedades de maquetación animadas. - `prefers-reduced-motion: reduce` convierte cada animación y transición en un cambio instantáneo. ## Idiomas - Inglés en `/`, español bajo `/es`. La misma página existe en ambos, completa. Todo texto nuevo sale en los dos idiomas a la vez. - `` y ``. `og:locale` `en_US` y `es_CO`, cada uno con el otro como `og:locale:alternate`. `` en ambas, y una URL canónica por idioma. - Las rutas, los segmentos de URL y los identificadores de ancla se mantienen en inglés en ambos idiomas: `#products`, `#software`, `#infrastructure`, `#devices`, `#contact`. - El selector EN / ES, en monoespaciada, enlaza a la misma página en el otro idioma y marca el actual con `aria-current`. - Los textos viven en un diccionario tipado por idioma; el diccionario en español se tipa a partir del inglés, así que una clave faltante hace fallar la compilación. - Registro: inglés sin contracciones; español con _tú_. - "Agendar una llamada" apunta a la página de agenda. Mientras no exista, cada uno de esos controles es un enlace `mailto:contact@quov.io` con un asunto en el idioma de la página. ## Temas - El oscuro es el predeterminado en toda primera visita. No se consulta la preferencia del sistema operativo. - Un botón de ícono en el encabezado cambia de tema. Su etiqueta accesible está en el idioma de la página y nombra el destino ("Cambiar a tema claro" / "Switch to light theme"), y lleva `aria-pressed`. - La elección se guarda en `localStorage` bajo `quov-theme`, con cada acceso dentro de `try/catch`. Sin almacenamiento, el sitio se queda en oscuro y sigue funcionando. - Sin destello: un pequeño script en línea en `` aplica el tema guardado antes del primer pintado. - `` lleva los fondos de ambos temas, y el cambio de tema lo actualiza. ```html ``` ## Accesibilidad - WCAG 2.2 AA en ambos temas, verificado con un cálculo de contraste, no supuesto. El archivo de marca lista las relaciones de cada par de tokens. - El foco siempre es visible: contorno de 2 px en `--ring`, separado 3 px. - El encabezado y el panel lateral se alcanzan y se operan con el teclado. - Un `h1` por página, `h2` por sección, `h3` para los elementos. Los SVG decorativos llevan `aria-hidden="true"`. ## Textos - Afirmaciones, no eslóganes. Las entradillas dicen lo que obtiene el visitante, en una o dos oraciones. - Sin rayas (em dash), sin superlativos, sin precios, sin nombres de competidores, sin cifras inventadas, sin personas. - Inglés sin contracciones, español con _tú_. ## Antes de terminar 1. Revisa la página a 375 px y a 1440 px de ancho, en ambos temas y en ambos idiomas. 2. Recarga después de cambiar a papel: el tema persiste sin destello, y la página sigue funcionando con el almacenamiento bloqueado. 3. Confirma que cada color es un token, que cada título está en Aoboshi One y que la monoespaciada aparece solo en datos. 4. Relee ambos idiomas buscando rayas, contracciones, _usted_, superlativos y cifras inventadas.