Sitio web responsive para Wintronic, empresa especializada en diseño 3D personalizado en Colombia.
- ✨ Diseño moderno y responsive
- 🎨 Integración con DatoCMS para gestión de contenido
- 📱 Botón flotante de WhatsApp
- ⚡ Next.js 14 con App Router
- 🎨 Tailwind CSS para estilos
- 📝 TypeScript para type safety
- 🖼️ Optimización de imágenes automática
- 🌐 SEO optimizado
- Framework: Next.js 14
- Lenguaje: TypeScript
- Estilos: Tailwind CSS
- CMS: DatoCMS
- Iconos: React Icons
- Fuentes: Google Fonts (Inter, Poppins)
win-web/
├── app/ # Next.js App Router
│ ├── layout.tsx # Layout principal
│ ├── page.tsx # Página de inicio
│ └── globals.css # Estilos globales
├── components/
│ ├── sections/ # Secciones de la página
│ │ ├── Hero.tsx
│ │ ├── Services.tsx
│ │ ├── Portfolio.tsx
│ │ ├── About.tsx
│ │ └── Contact.tsx
│ └── ui/ # Componentes de UI
│ ├── Navbar.tsx
│ ├── Footer.tsx
│ └── WhatsAppButton.tsx
├── lib/
│ ├── datocms.ts # Funciones de DatoCMS
│ └── types/
│ └── datocms.ts # Tipos de TypeScript
├── design-assets/ # Assets de diseño
│ ├── logos/
│ ├── colors/
│ ├── references/
│ └── fonts/
└── public/ # Archivos estáticos
├── images/
└── fonts/
- Node.js 18 o superior
- npm o yarn
- Clonar el repositorio
git clone [URL_DEL_REPO]
cd win-web- Instalar dependencias
npm install- Configurar variables de entorno
Crea un archivo .env.local en la raíz del proyecto:
# DatoCMS Configuration
NEXT_PUBLIC_DATOCMS_API_TOKEN=tu_token_aqui
# WhatsApp Configuration
NEXT_PUBLIC_WHATSAPP_NUMBER=573000000000
NEXT_PUBLIC_WHATSAPP_MESSAGE=Hola! Me interesa conocer más sobre los diseños 3D personalizados de Wintronic
# Site Configuration
NEXT_PUBLIC_SITE_URL=https://wintronic.com- Configurar DatoCMS
Sigue las instrucciones en DATOCMS_SETUP.md para configurar tu cuenta de DatoCMS.
- Ejecutar el proyecto en desarrollo
npm run devEl sitio estará disponible en http://localhost:3000
# Desarrollo
npm run dev # Inicia el servidor de desarrollo
# Producción
npm run build # Construye la aplicación para producción
npm start # Inicia el servidor de producción
# Utilidades
npm run lint # Ejecuta el linterLos colores se pueden personalizar en tailwind.config.ts. Por defecto, el sitio usa una paleta de azules y morados.
Una vez tengas tu paleta de colores de Wintronic:
- Añade los colores en
design-assets/colors/paleta-colores.md - Actualiza
tailwind.config.tscon los colores - Los componentes usarán automáticamente los nuevos colores
- Coloca el logo de Wintronic en
design-assets/logos/ - Actualiza las referencias en los componentes
- Añade imágenes de productos en
public/images/
El contenido dinámico se gestiona a través de DatoCMS:
- Portafolio: Añade/edita proyectos desde DatoCMS
- Servicios: Gestiona los servicios ofrecidos
- Información de la empresa: Actualiza datos de contacto y redes sociales
- Sube el proyecto a GitHub
- Importa el proyecto en Vercel
- Configura las variables de entorno
- Deploy automático
El proyecto es compatible con cualquier plataforma que soporte Next.js:
- Netlify
- AWS Amplify
- DigitalOcean App Platform
- Render
El sitio incluye varias optimizaciones:
- ✅ Imágenes optimizadas automáticamente con Next.js Image
- ✅ Lazy loading de componentes
- ✅ SEO meta tags optimizados
- ✅ Fuentes optimizadas con next/font
- ✅ Código minificado y comprimido
- ✅ ISR (Incremental Static Regeneration) con DatoCMS
- Chrome (últimas 2 versiones)
- Firefox (últimas 2 versiones)
- Safari (últimas 2 versiones)
- Edge (últimas 2 versiones)
- Móviles: iOS Safari, Chrome Mobile
- Añadir logos y colores de marca en
design-assets/ - Configurar DatoCMS
- Reemplazar imágenes placeholder con fotos reales
- Actualizar información de contacto
- Configurar analytics (Google Analytics, etc.)
- Añadir más páginas según sea necesario
- Configurar formulario de contacto con backend
- Implementar blog (opcional)
Para preguntas o soporte relacionado con el desarrollo del sitio, contacta al equipo de desarrollo.
Todos los derechos reservados © Wintronic 2025