feat: rediseño «El documento» en curso, contacto real y enlaces externos
Primitivas y contenido del rediseño (escala tipográfica, Revelar, MarcaSeccion, Seccion, Antetitulo, SimboloMarca, Resplandor, ClaridadHero, sección Proceso de ocho etapas, lib/content.ts reestructurado en seis secciones con alias para las viejas). Mecanismo y FormaTrabajar se retiran. Encima, lo de esta sesión: - recorrido: creeer vuelve a responder cada situación en vez de repetirla (el alias apuntaba respuesta a situacion); respuestas en plural. Créditos de las seis fotos de México. - contacto: WhatsApp, email (con mailto:) y LinkedIn reales; iconos de las redes en el cierre y el footer (IconoRed, trazos de Simple Icons, CC0). - enlaces: lo externo abre en otra pestaña con noopener y aviso para lectores de pantalla (lib/enlaces.ts); mailto y anclas se quedan. - Proceso: las ocho tarjetas no aparecían nunca en móvil (amount 0.3 sobre una lista de ~3000px); ahora cada una se revela sola. El ≡ de la 08 ya no tapa un entregable, título equilibrado, etiqueta a 12px, sin elevar al hover lo que no es clicable. - Disciplinas: la frase «No son la promesa — son los medios» gana peso y se agrupa con título e ilustración; sin cortes huérfanos en móvil. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
erikghandClaude Opus 5.5 committed
1 parent
3242a8bf71
commit
89e54a6e84
73 files changed
+5261
-592
No files matched your search
@@ -0,0 +1,218 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { Container } from '@/components/primitives/Container';
|
||||
import { Antetitulo } from '@/components/primitives/Antetitulo';
|
||||
import { FondoFoto } from '@/components/primitives/FondoFoto';
|
||||
import { PatronPuntos } from '@/components/primitives/PatronPuntos';
|
||||
import { SimboloMarca } from '@/components/primitives/SimboloMarca';
|
||||
import { TarjetaSpotlight } from '@/components/primitives/TarjetaSpotlight';
|
||||
import { Icono, type IconoNombre } from '@/components/primitives/Icono';
|
||||
import { proceso } from '@/lib/content';
|
||||
import { fadeInUp, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';
|
||||
|
||||
// The eight stages of the dueña's working lámina for a real client, rebuilt to
|
||||
// its own anatomy: eight blocks laid flat, each with its number in a circle,
|
||||
// its own icon, and a block labelled ENTREGABLES where every line carries its
|
||||
// own mark. Everything identifying that client is stripped out in
|
||||
// lib/content.ts.
|
||||
//
|
||||
// The three phases of deck slide 7 survive as a strip under the lead: the
|
||||
// framework is the dueña's and worth keeping, it just does not dictate the
|
||||
// layout — the lámina runs its eight blocks flat, and grouping them into three
|
||||
// banded sections split one grid into three.
|
||||
//
|
||||
// Stage 08 sits full width at the foot, where the lámina puts One Year Plan,
|
||||
// and goes navy — it is the payoff the other seven point at.
|
||||
|
||||
const ICONOS: Record<string, IconoNombre> = {
|
||||
'01': 'compania', // company analysis + FODA — the company from outside
|
||||
'02': 'inmersion', // internal analysis — dives through the layers
|
||||
'03': 'consumidor', // Consumer Knowledge — the insight inside the person
|
||||
'04': 'estrategia', // brand strategy — the path to the flag
|
||||
'05': 'comunicacion', // communication and branding — the bubbles
|
||||
'06': 'ventas', // marketing and sales — the rising bars
|
||||
'07': 'desafiar', // commercial innovation — the cracked assumption
|
||||
'08': 'plan', // One Year Plan — the checklist
|
||||
};
|
||||
|
||||
// One mark per deliverable, the way the lámina gives every line its own rather
|
||||
// than repeating a tick. Keyed by the copy itself, so a Proceso.test guard
|
||||
// checks every deliverable in lib/content.ts has an icon here — otherwise a
|
||||
// reworded line would silently render blank.
|
||||
const ICONOS_ENTREGABLE: Record<string, IconoNombre> = {
|
||||
// 01 · Análisis de compañía y FODA
|
||||
'FODA': 'matriz',
|
||||
'Diagnóstico ejecutivo': 'diagnostico',
|
||||
'Prioridades': 'prioridades',
|
||||
'Quick wins': 'rayo',
|
||||
// 02 · Análisis interno
|
||||
'Mapa de capacidades': 'mapa',
|
||||
'Restricciones del negocio': 'restriccion',
|
||||
'Oportunidades de crecimiento': 'brote',
|
||||
// 03 · Consumer Knowledge
|
||||
'Segmentación': 'segmentos',
|
||||
'Buyer persona': 'ficha',
|
||||
'Customer journey': 'recorrido',
|
||||
'Necesidades no cubiertas': 'hueco',
|
||||
// 04 · Estrategia de marca
|
||||
'Posicionamiento': 'diana',
|
||||
'Arquitectura de marcas': 'arquitectura',
|
||||
'Manual estratégico': 'libro',
|
||||
// 05 · Comunicación y branding
|
||||
'Plataforma de comunicación': 'megafono',
|
||||
'Campaña anual': 'calendario',
|
||||
'Estrategia de medios': 'ondas',
|
||||
'Plan de contenido': 'documento',
|
||||
// 06 · Marketing y ventas
|
||||
'Dashboard CEO': 'medidor',
|
||||
'Dashboard comercial': 'tablero',
|
||||
'Comité de crecimiento': 'comite',
|
||||
// 07 · Innovación comercial
|
||||
'Roadmap de innovación': 'hitos',
|
||||
'Go to market': 'cohete',
|
||||
'Prioridades de innovación': 'bombilla',
|
||||
// 08 · One Year Plan
|
||||
'Roadmap a 12 meses': 'anio',
|
||||
'Iniciativas prioritarias': 'prioridades',
|
||||
'Gobernanza del crecimiento': 'escudo',
|
||||
};
|
||||
|
||||
export function Proceso() {
|
||||
const reduced = usePrefersReducedMotion();
|
||||
|
||||
return (
|
||||
<section id="proceso" className="bg-gris-claro bg-hondo-claro scroll-mt-24 relative overflow-hidden">
|
||||
<Container className="relative py-16 md:py-24">
|
||||
{/* ── Header ── */}
|
||||
<Antetitulo as={motion.p} variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}>
|
||||
{proceso.eyebrow}
|
||||
</Antetitulo>
|
||||
<motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
||||
className="mt-4 font-sans font-black text-seccion text-azul-profundo max-w-4xl text-balance">{proceso.title}</motion.h2>
|
||||
<motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
||||
className="mt-5 text-azul-profundo/70 leading-relaxed max-w-2xl">{proceso.lead}</motion.p>
|
||||
|
||||
{/* ── The three approved phases, as a strip rather than as structure ── */}
|
||||
<motion.ol
|
||||
variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
||||
className="mt-8 flex flex-wrap items-center gap-x-3 gap-y-2 list-none p-0"
|
||||
>
|
||||
{proceso.fases.map((fase, i) => (
|
||||
<li key={fase} className="flex items-center gap-3">
|
||||
{i > 0 && <span aria-hidden="true" className="text-dorado/60">→</span>}
|
||||
<span className="text-xs tracking-[0.18em] uppercase font-black text-azul-profundo/70">{fase}</span>
|
||||
</li>
|
||||
))}
|
||||
</motion.ol>
|
||||
|
||||
{/* ── The eight blocks, flat. An <ol>, because the sequence is the
|
||||
point: it carries the order for assistive tech, which lets the
|
||||
drawn number stay decorative. ── */}
|
||||
{/* Each card reveals on its own. The list used to be one stagger
|
||||
container with viewportOnce's amount of 0.3 — on a phone the eight
|
||||
stacked cards run ~3000px against an ~850px screen, so 30% of the
|
||||
list is never on screen at once and nothing below the header ever
|
||||
appeared. */}
|
||||
<ol className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 list-none p-0">
|
||||
{proceso.etapas.map((etapa, i) => {
|
||||
const destacada = 'destacada' in etapa && etapa.destacada;
|
||||
return (
|
||||
<motion.li
|
||||
key={etapa.n}
|
||||
variants={fadeInUp}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
// The cards in one row still arrive one after another, the way
|
||||
// the stagger did, without depending on the whole list.
|
||||
transition={{ delay: (i % 3) * 0.08 }}
|
||||
{...motionProps(reduced)}
|
||||
// No hover lift: these cards are not links, and a card that
|
||||
// rises under the pointer promises a click that goes nowhere.
|
||||
className={destacada ? 'sm:col-span-2' : ''}
|
||||
>
|
||||
<TarjetaSpotlight
|
||||
className={`relative h-full rounded-2xl p-6 md:p-7 shadow-tarjeta ${
|
||||
destacada ? 'bg-azul-profundo bg-hondo-navy' : 'border border-azul-profundo/[0.07] bg-white'
|
||||
}`}
|
||||
>
|
||||
{destacada && (
|
||||
// In the foot of the card, which the grid's equal-height rows
|
||||
// leave empty — decoration that fills dead space instead of
|
||||
// crowding the deliverables.
|
||||
<PatronPuntos rows={3} cols={8} className="absolute -left-2 bottom-5 w-1/3 text-white/[0.08]" />
|
||||
)}
|
||||
|
||||
{/* ── Photo band, with the number and the icon riding on it.
|
||||
The duotone is what makes eight photographs by eight
|
||||
different people read as one set: FondoFoto throws away
|
||||
their colour with mix-blend-luminosity and relights them
|
||||
navy-to-gold. Every file here is CC0 and credited by path
|
||||
in `creditosFotos`, which a test enforces. ── */}
|
||||
<div className={`relative -mx-6 -mt-6 md:-mx-7 md:-mt-7 mb-6 overflow-hidden ${destacada ? 'h-40 md:h-52' : 'h-32'}`}>
|
||||
<FondoFoto
|
||||
src={`/images/proceso/${etapa.n}.jpg`}
|
||||
className="inset-0"
|
||||
wash={destacada ? 'bg-azul-profundo/55' : 'bg-azul-profundo/60'}
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 flex items-end justify-between p-4 md:p-5">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="grid place-items-center w-10 h-10 rounded-full bg-dorado bg-dorado-metal font-sans font-black text-sm text-azul-profundo shadow-[0_4px_12px_-2px_rgba(10,29,61,0.5)]"
|
||||
>
|
||||
{etapa.n}
|
||||
</span>
|
||||
<div className="grid place-items-center w-11 h-11 rounded-full bg-azul-profundo/80 backdrop-blur-sm">
|
||||
<Icono nombre={ICONOS[etapa.n]} className="w-6 h-6 text-dorado" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex items-center justify-between gap-4">
|
||||
<h3 className={`font-sans font-black leading-snug ${
|
||||
destacada ? 'text-2xl md:text-3xl text-white' : 'text-lg text-azul-profundo'
|
||||
}`}>
|
||||
{etapa.name}
|
||||
</h3>
|
||||
{/* Beside the title, not in the card's foot: pinned to the
|
||||
bottom-right corner it sat on top of the third
|
||||
deliverable once the three ran in a row. Gold needs
|
||||
real alpha on navy — at 25% it reads as a skeleton. */}
|
||||
{destacada && <SimboloMarca className="w-12 md:w-14 shrink-0 text-dorado/60" />}
|
||||
</div>
|
||||
|
||||
{/* ── ENTREGABLES ── */}
|
||||
<div className={`relative mt-5 border-t pt-4 ${destacada ? 'border-white/15' : 'border-azul-profundo/10'}`}>
|
||||
{/* La 08 va sobre navy y conserva el dorado del manual; las
|
||||
otras siete son tarjetas blancas y necesitan el tono
|
||||
legible. */}
|
||||
<p className={`text-xs tracking-[0.2em] uppercase font-black ${
|
||||
destacada ? 'text-dorado' : 'text-dorado-texto'
|
||||
}`}>
|
||||
{proceso.etiquetaEntregables}
|
||||
</p>
|
||||
<ul className={`mt-3 grid gap-2 list-none p-0 ${destacada ? 'sm:grid-cols-3' : ''}`}>
|
||||
{etapa.entregables.map((entregable) => (
|
||||
<li
|
||||
key={entregable}
|
||||
className={`flex items-start gap-2.5 text-sm ${destacada ? 'text-white' : 'text-azul-profundo/85'}`}
|
||||
>
|
||||
<Icono
|
||||
nombre={ICONOS_ENTREGABLE[entregable]}
|
||||
className="w-[18px] h-[18px] mt-px shrink-0 text-dorado"
|
||||
/>
|
||||
<span>{entregable}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</TarjetaSpotlight>
|
||||
</motion.li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</Container>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user