👗 Landing Page Studio F

Landing page moderna y elegante construida con React 19, TypeScript y Tailwind CSS

🎥 Demo

Desktop View

Ver Demo en Vivo →

🚀 Instalación

Prerequisitos

• Node.js 18+
• npm o yarn

Instalación Local

# Clonar el repositorio
git clone https://github.com/baenat/landing-page-studio-f

# Navegar al directorio
cd landing-page-studio-f

# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
npm run dev

# Abrir en el navegador
# http://localhost:5173

---

📁 Estructura del Proyecto

landing-studio-f/
├── public/              # Archivos estáticos
├── src/
│   ├── components/      # Componentes React
│   │   ├── Alert/       # Sistema de notificaciones
│   │   ├── Gallery/     # Galería de imágenes
│   │   ├── Moments/     # Sección de momentos
│   │   ├── Navigation/  # Navegación principal
│   │   ├── Products/    # Catálogo de productos
│   │   └── Slider/      # Carrusel hero
│   ├── hooks/           # Custom hooks
│   │   ├── useAlerts.ts
│   │   ├── useAutoPlay.ts
│   │   └── useCarousel.ts
│   ├── types/           # Definiciones TypeScript
│   │   └── index.ts
│   ├── data/            # Datos y configuración
│   │   ├── categories.ts
│   │   ├── gallery.ts
│   │   ├── moments.ts
│   │   ├── products.ts
│   │   └── slides.ts
│   ├── App.tsx          # Componente principal
│   └── main.tsx         # Punto de entrada
├── .gitignore
├── package.json
├── tailwind.config.js
├── tsconfig.json
├── vite.config.ts
└── README.md

---

🛠️ Tecnologías

Core

• React 19 - Biblioteca UI
• TypeScript 5.5 - Tipado estático
• Vite 5.4 - Build tool

Styling

• Tailwind CSS - Framework CSS utility-first

Iconos

• Lucide React - Iconos modernos

Fonts

• Playfair Display - Fuente serif elegante

---

🏗️ Arquitectura

Principios de Diseño

Separación de Responsabilidades

Components → UI pura (presentación)
Hooks      → Lógica reutilizable
Types      → Contratos de datos
Data       → Configuración centralizada

Componentes Pequeños y Enfocados

// ✅ Bueno - Una responsabilidad
function ProductCard({ product }) { ... }

// ❌ Malo - Demasiadas responsabilidades
function ProductSection() { /* fetch, filter, render */ }

---

📚 Recursos Adicionales

• React Documentation
• TypeScript Handbook
• Tailwind CSS Docs
• Vite Guide
• Lucide Icons

---

📝 Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

📧 Contacto

Desarrollador: baenat

Repositorio: landing-page-studio-f

---

Hecho con ❤️ y React

_{Built with React • TypeScript • Tailwind CSS}