Sitio corporativo premium de Socket Studio (Quito, Ecuador) — agencia de tecnología, soporte y tercerización de técnicos TI. Construido con dirección editorial moderna, fotografía real y tipografía serif.
🌐 Producción: https://socket-studio.com/demo-aplicaciones/tercializacion/
- React 18 + Vite 4
- Tailwind CSS 3 (paleta editorial custom)
- Framer Motion 12 (micro-animaciones discretas)
- Tipografía: Fraunces (display serif), Inter (sans), JetBrains Mono (mono)
- Dirección visual editorial: cream
#f6f3ee+ ink#1a1530+ coral#db4d4e - Fotografía real de personas y oficinas (Unsplash CDN)
- Layout asimétrico con numeración de capítulos, figcaptions y eyebrows mono
- Accesibilidad WCAG AA: focus-visible, prefers-reduced-motion, skip-link
- SEO: meta tags, OG, lang ES, fuentes preconnect
- 100% responsive (mobile-first)
- Code-splitting (react + framer-motion vendor chunks)
src/
├─ App.jsx Orquestador
├─ index.css Tipografía, tokens base, utilities
├─ data/site.js Fuente única de contenido
└─ components/
├─ Navbar.jsx
├─ Hero.jsx Headline serif + imagen real + stats
├─ Marquee.jsx Clientes en marquesina
├─ Services.jsx Lista numerada + preview sticky
├─ Outsourcing.jsx Sección dark con perfiles disponibles
├─ Methodology.jsx 5 etapas tipo timeline editorial
├─ Team.jsx Grid retratos con grayscale hover
├─ Testimonials.jsx Blockquote serif editorial
├─ FAQ.jsx Acordeón minimal sticky
├─ Contact.jsx Split light/dark con formulario WhatsApp
├─ Footer.jsx Mark grande + datos contacto
└─ Logo.jsx SVG marca oficial Socket Studio
npm install
npm run dev # http://localhost:5181
npm run build # build producción a dist/
npm run preview # preview del buildBuild estático con base path relativo configurable vía VITE_BASE:
VITE_BASE=/demo-aplicaciones/tercializacion/ npm run build| Métrica | Valor |
|---|---|
| CSS gzip | ~5.7 kB |
| JS app gzip | ~11 kB |
| JS vendors gzip | ~89 kB |
© Socket Studio · La constancia en el diseño.