Eres un ingeniero front-end senior especializado en React e identidad de marca institucional.

modelo: https://evori.net/wp-content/evori/content_analisis_LLM.html

Eres un ingeniero front-end senior especializado en React e identidad de marca institucional.

Tu tarea es generar una APLICACIÓN REACT COMPLETA para el IDC —

Instituto de Diseño y Comunicación de Lima, Perú —

que presente la metodología de Análisis de Contenido Asistido por LLM.

## STACK

- React 18 + Vite

- CSS Modules (un archivo .module.css por componente)

- Lucide React (único paquete de iconos permitido)

- Framer Motion para animaciones de sección (opcional pero recomendado)

- Sin MUI, sin Chakra, sin Tailwind, sin Shadcn

## IDENTIDAD IDC (obligatorio en todo el proyecto)

Colores institucionales IDC en tokens.css:

  --color-primary:    #f3a100   /* Naranja IDC */

  --color-secondary:  #0072b9   /* Azul IDC */

  --color-neutral-1:  #555553   /* Gris oscuro */

  --color-neutral-2:  #868686   /* Gris medio */

  --color-white:      #ffffff

  

  /* Sistema derivado */

  --color-bg:              #ffffff

  --color-surface:         #fafaf9

  --color-surface-2:       #f5f4f0

  --color-text:            #555553

  --color-text-muted:      #868686

  --color-text-inverse:    #ffffff

  --color-primary-hover:   #d4880a

  --color-primary-highlight: #fef3dc

  --color-secondary-hover: #005fa0

  --color-secondary-highlight: #dceef9

  --color-border: rgba(85,85,83,0.12)

  /* Dark mode */

  --color-bg-dark:       #1a1a18

  --color-surface-dark:  #1f1f1d

  --color-text-dark:     #e8e7e3

  --color-primary-dark:  #f5b030

  --color-secondary-dark: #4fa3d4

Tipografía en tokens.css:

  --font-display: 'Playfair Display', Georgia, serif

  --font-body:    'DM Sans', system-ui, sans-serif

  (importar desde Google Fonts en index.html)

## CARRERAS IDC

Crear archivo src/data/carreras.js con:

[

  {

    id: "publicitario",

    nombre: "Diseño Publicitario",

    color: "#f3a100",

    icono: "Megaphone",           // Lucide icon name

    descripcion: "Análisis de campañas, mensajes visuales y comunicación de marca",

    corpus: "Piezas gráficas, copies, briefings, campañas",

    prompt_tipo: "Clasifica este texto publicitario según tono, target y objetivo"

  },

  {

    id: "modas",

    nombre: "Diseño de Modas",

    color: "#e8900a",

    icono: "Shirt",

    descripcion: "Análisis de tendencias, discursos de moda y branding de marca",

    corpus: "Reportes de tendencias, lookbooks, reseñas de colecciones",

    prompt_tipo: "Identifica los conceptos de tendencia y valores de marca presentes"

  },

  {

    id: "audiovisual",

    nombre: "Comunicación Audiovisual",

    color: "#0072b9",

    icono: "Video",

    descripcion: "Análisis de guiones, narrativas audiovisuales y mensajes mediáticos",

    corpus: "Guiones, transcripciones, sinopsis, críticas audiovisuales",

    prompt_tipo: "Extrae categorías narrativas, tono y estructura discursiva"

  },

  {

    id: "interiores",

    nombre: "Diseño de Interiores",

    color: "#005fa0",

    icono: "LayoutDashboard",

    descripcion: "Análisis de tendencias espaciales y discursos de diseño de ambiente",

    corpus: "Memorias descriptivas, revistas de diseño, propuestas de proyecto",

    prompt_tipo: "Clasifica estilos, referencias estéticas y conceptos espaciales"

  }

]

## ESTRUCTURA DE ARCHIVOS

src/

├── App.jsx

├── main.jsx

├── styles/

│   ├── tokens.css

│   ├── base.css

│   └── utilities.css

├── components/

│   ├── layout/

│   │   ├── Navbar.jsx + Navbar.module.css

│   │   └── Footer.jsx + Footer.module.css

│   ├── sections/

│   │   ├── Hero.jsx

│   │   ├── Problem.jsx

│   │   ├── Solution.jsx

│   │   ├── Methodology.jsx

│   │   ├── Carreras.jsx

│   │   ├── UseCases.jsx

│   │   ├── Outputs.jsx

│   │   ├── FAQ.jsx

│   │   └── CTAFinal.jsx

│   └── ui/

│       ├── LogoIDC.jsx       ← SVG logo institucional como componente

│       ├── Button.jsx

│       ├── Card.jsx

│       ├── Stepper.jsx

│       ├── Tabs.jsx

│       ├── Accordion.jsx

│       ├── Badge.jsx

│       └── ThemeToggle.jsx

├── hooks/

│   ├── useTheme.js

│   └── useScrollReveal.js

└── data/

    ├── carreras.js

    ├── methodology.js

    └── faq.js

## COMPONENTE LogoIDC.jsx (crítico)

Genera un componente SVG inline que reproduzca el estilo IDC:

- Letras minúsculas "idc" en var(--color-primary)

- Punto decorativo sobre la "i" en var(--color-primary)

- Texto "DISEÑO & COMUNICACIÓN" abajo en var(--color-secondary), 

  tamaño pequeño, espaciado de letras amplio

- Props: size (default "md": 120px ancho), darkMode (booleano)

- Incluir comentario con instrucciones para reemplazar por logo PNG real

## FUNCIONALIDADES

- ThemeToggle: alterna data-theme="dark"/"light" en document.html

- Stepper 5 pasos: clicable, expande descripción, círculos IDC naranja

- Tabs carreras: 4 pestañas con color de acento de cada carrera

- Accordion FAQ: una pregunta activa a la vez

- Pipeline Hero: 5 tarjetas animadas con flechas SVG entre ellas

- ScrollReveal: secciones con fade+translateY vía IntersectionObserver

- Navbar: sticky, oculta al bajar / reaparece al subir

## CALIDAD

- Componentes de responsabilidad única

- Props documentadas con JSDoc o PropTypes

- Sin console.log residuales

- Sin TODOs sin resolver

- Responsive: 375px / 768px / 1280px

## README.md (incluir al final)

## IDC — LLM-Assisted Content Analysis

### Instalación

npm create vite@latest idc-llm-content -- --template react

cd idc-llm-content

npm install lucide-react framer-motion

npm run dev

### Para reemplazar el logo

Reemplazar el componente LogoIDC.jsx con:

<img src="./assets/logo-idc.png" alt="IDC" width="120" />

Colocar el archivo PNG en public/assets/logo-idc.png

### Carreras

Los datos de cada programa están en src/data/carreras.js

Editar libremente sin tocar los componentes.

### Colores institucionales

Todos los tokens están en src/styles/tokens.css

## AUTOEVALUACIÓN FINAL (fuera del código)

Tabla: Claridad · Arquitectura · Coherencia IDC · UX · 

Accesibilidad · Responsive · Originalidad (cada uno /10)

+ 3 mejoras posibles

+ 1 variante de estilo alternativa manteniendo colores IDC