Psicoweb es un sitio web profesional y moderno diseñado para psicólogos que desean establecer una presencia digital atractiva y funcional. El proyecto ofrece una experiencia de usuario optimizada tanto para dispositivos móviles como de escritorio, con un diseño elegante y contenido especializado en servicios psicológicos.
- Diseño adaptativo que se ajusta perfectamente a móviles, tablets y desktop
- Componentes específicos para móvil y desktop para optimizar la experiencia
- Navegación intuitiva con menús adaptados a cada dispositivo
- Psicoterapia Individual: Espacio seguro para trabajo emocional
- Capacitación Empresarial: Talleres para equipos y organizaciones
- Escuela para Padres: Herramientas para crianza efectiva
- Orientación Vocacional: Guía para decisiones profesionales
- Sesión Personalizada: $70.000 COP (45-50 minutos)
- Paquete Mensual: $250.000 COP (4 sesiones)
- Paquete Trimestral: $600.000 COP (10 sesiones con 10% descuento)
| Tecnología | Versión | Propósito |
|---|---|---|
| React | 19.1.0 | Framework principal |
| Vite | 7.0.0 | Build tool y dev server |
| Tailwind CSS | 4.1.11 | Framework de estilos |
| Material-UI | 7.2.0 | Componentes de UI |
| React Router | 7.6.3 | Navegación |
| EmailJS | 4.4.1 | Formularios de contacto |
| React Hook Form | 7.60.0 | Manejo de formularios |
- Node.js (versión 18 o superior)
- npm o yarn
- Clonar el repositorio
git clone https://github.com/SmallCakekoo/psicoweb
cd psicoweb- Instalar dependencias
npm install- Ejecutar en modo desarrollo
npm run dev- Abrir en el navegador
http://localhost:5173
psicoweb/
├── public/
│ ├── data/ # Datos JSON de servicios y paquetes
│ └── robots.txt
├── src/
│ ├── assets/
│ │ └── images/ # Imágenes y recursos visuales
│ ├── components/
│ │ ├── mobile/ # Componentes específicos para móvil
│ │ └── *.jsx # Componentes principales
│ ├── utils/ # Utilidades y helpers
│ ├── App.jsx # Componente principal
│ └── main.jsx # Punto de entrada
├── package.json
└── README.md
Navbar.jsx- Navegación principalHero.jsx- Sección de bienvenidaSobreMi.jsx- Información profesionalTrayectoria.jsx- Experiencia y formaciónServicios.jsx- Catálogo de serviciosPaquetes.jsx- Opciones de paquetesContacto.jsx- Formulario de contactoFooter.jsx- Pie de página
NavbarMobile.jsx- Navegación móvilHeroMobile.jsx- Hero adaptado para móvilTrayectoriaMobile.jsx- Timeline móvilServiciosMobile.jsx- Servicios en móvilPaquetesMobile.jsx- Paquetes en móvilContactoMobile.jsx- Contacto móvil
Los servicios y paquetes se cargan dinámicamente desde archivos JSON:
public/data/servicios.json- Configuración de serviciospublic/data/paquetes.json- Configuración de paquetespublic/data/timeline.json- Información de trayectoria
El proyecto utiliza Tailwind CSS para estilos. Puedes personalizar:
- Colores en
tailwind.config.js - Estilos globales en
src/index.css - Componentes específicos en sus respectivos archivos
- Móvil: < 768px (md:hidden)
- Desktop: ≥ 768px (hidden md:block)
- Imágenes adaptativas para diferentes dispositivos
- Navegación específica para cada tamaño de pantalla
- Contenido optimizado para mejor legibilidad
# Desarrollo
npm run dev
# Construcción para producción
npm run build
# Vista previa de producción
npm run preview
# Análisis del bundle
npm run build:analyze
# Linting
npm run lint- Formulario integrado con EmailJS
- Validación en tiempo real con React Hook Form
- Envío automático de mensajes
- Confirmación visual para el usuario
- Meta tags optimizados
- Imágenes optimizadas con formatos modernos
- Lazy loading para mejor rendimiento
- Estructura semántica HTML5
Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.
- React Team por el framework increíble
- Vite por la herramienta de build rápida
- Tailwind CSS por el framework de utilidades
- Daisy-UI por los componentes hermosos
Hecho con cariño para la psicología
⭐ Si te gusta este proyecto, dale una estrella!