Cámara de Comercio de Otavalo — Sitio Web Corporativo

Sitio web institucional oficial de la Cámara de Comercio de Otavalo, Capital Intercultural del Ecuador. Desarrollado por Socket Studio.

🌐 Demo en vivo

https://socket-studio.com/demo-aplicaciones/camara-comercio-otavalo/

---

📋 Descripción

Sitio web corporativo de una sola página (SPA) para la Cámara de Comercio de Otavalo — institución gremial fundada en 1975. El sitio incluye:

• Hero con parallax, foto ejecutiva y estadísticas animadas
• Servicios — 8 servicios gremiales con badges y categorías (teal / gold / terra)
• Nosotros — Historia, misión, visión, valores + foto corporativa
• Membresía — 3 planes (Básico $45 / Empresarial $85 / Premium $150)
• Eventos — Calendario 2025 con 50 aniversario destacado
• Testimoniales — Carousel con fotos reales de socios
• Directiva — 7 miembros con headshots profesionales
• FAQ — Accordion animado con AnimatePresence
• Contacto — Formulario → WhatsApp deep link
• Footer — Links institucionales y redes sociales

🚀 Stack Tecnológico

Tecnología	Versión	Uso
Next.js	14.2	Framework React + Static Export
TypeScript	5.x	Tipado estático
Tailwind CSS	3.4.6	Design system utilitario
Framer Motion	11.x	Animaciones con spring physics
Lucide React	latest	Iconografía

⚡ Setup Local

# Clonar repositorio
git clone https://github.com/SocketStudioec/camara-comercio-otavalo.git
cd camara-comercio-otavalo

# Instalar dependencias
npm install

# Servidor de desarrollo
npm run dev
# → http://localhost:3000

# Build de producción (export estático)
npm run build
# → genera carpeta out/

📁 Estructura del Proyecto

camara-comercio-otavalo/
├── app/
│   ├── globals.css        # Design system: tokens CSS, dark mode, animaciones
│   ├── layout.tsx         # Root layout, SEO metadata, JSON-LD schema
│   └── page.tsx           # Composición de secciones
├── components/
│   ├── Navbar.tsx         # Navegación fija con scroll behavior
│   ├── Hero.tsx           # Hero con parallax + foto ejecutiva + stats
│   ├── Services.tsx       # Grid de 8 servicios gremiales
│   ├── About.tsx          # Historia, misión/visión/valores + foto corporativa
│   ├── Membership.tsx     # 3 planes de afiliación con pricing
│   ├── Events.tsx         # Calendario de eventos 2025
│   ├── Testimonials.tsx   # Carousel con fotos reales de socios
│   ├── Team.tsx           # Directiva con headshots profesionales
│   ├── FAQ.tsx            # Accordion con AnimatePresence
│   ├── CTA.tsx            # Call-to-action 50 aniversario
│   ├── Contact.tsx        # Formulario → redirección WhatsApp
│   └── Footer.tsx         # Pie de página institucional
├── lib/
│   └── utils.ts           # Helpers: WhatsApp formatter, URLs, constantes
├── tailwind.config.ts     # Paleta teal/gold/terra, spring easing, sombras
└── next.config.js         # Static export + basePath Apache

🎨 Design System

Paleta de colores

• Teal — Color primario institucional (#177E7E base, escala completa)
• Gold — Acento y CTAs (#C9A227 base)
• Terra — Acento andino secundario (#B5451B base)

Características de diseño

• ☀️ Dark mode automático vía prefers-color-scheme (sin toggle)
• 🌊 Spring physics — cubic-bezier(0.34, 1.56, 0.64, 1) en todas las interacciones
• ♿ WCAG AAA — focus states visibles, contraste ≥ 7:1
• 📱 Responsive — 320px → 768px → 1024px → 1440px
• 🎞️ Reduced motion — prefers-reduced-motion respetado
• 🪟 CSS Custom Properties — sistema completo de tokens light/dark

🌍 Deploy

El proyecto genera HTML/CSS/JS estático con output: "export" de Next.js.

npm run build
# Copiar carpeta out/ al servidor Apache
# Destino: /var/www/html/socket-studio/demo-aplicaciones/camara-comercio-otavalo/

URL producción: https://socket-studio.com/demo-aplicaciones/camara-comercio-otavalo/

🤝 Contribuciones

1. Fork del repositorio
2. Crear rama: git checkout -b feature/mejora-nombre
3. Commit con mensaje descriptivo
4. Push y abrir Pull Request hacia main

---

📄 Licencia

Desarrollado por Socket Studio para la Cámara de Comercio de Otavalo. © 2025 Socket Studio · Todos los derechos reservados.

---

Desarrollado con ❤️ por Socket Studio — Agencia de desarrollo web en Ecuador