Perfume Decants

Tienda web de perfumes decant en estilo minimalista, con catalogo visual, detalle de producto y carrito de compra con persistencia local.

Descripcion breve

Perfume Decants es una aplicacion creada con Next.js para mostrar fragancias disponibles, revisar detalles por producto y generar solicitudes de compra por WhatsApp o correo de forma rapida.

Caracteristicas

• Catalogo de perfumes con diseno limpio y responsive.
• Vista de detalle por producto en ruta dinamica (/perfumes/[id]).
• Selector de presentacion (3ml, 5ml, 10ml) y cantidad.
• Carrito con estado global y persistencia en localStorage.
• Enlaces de contacto para cerrar compra por WhatsApp o email.
• Estilos modernos con Tailwind CSS v4.

Tecnologias

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS 4
• Lucide React (iconos)

Requisitos

• Node.js 20 o superior
• npm 10 o superior

Instalacion

1. Clona el repositorio:

git clone <URL_DEL_REPO>
cd perfume-store

2. Instala dependencias:

npm install

3. Inicia el entorno de desarrollo:

npm run dev

4. Abre en tu navegador:

http://localhost:3000

Scripts disponibles

• npm run dev: inicia la app en modo desarrollo.
• npm run build: genera el build de produccion.
• npm run start: ejecuta la app en modo produccion.
• npm run lint: ejecuta reglas de linting.

Estructura del proyecto

app/
	components/       # Header, Footer, ProductCard, Cart
	context/          # CartContext (estado global del carrito)
	data/             # Datos de perfumes y presentaciones
	perfumes/[id]/    # Pagina dinamica de detalle del producto
	globals.css       # Estilos globales y tipografia
	layout.tsx        # Layout principal
	page.tsx          # Home (catalogo, informacion y contacto)
public/
	perfumes/         # Imagenes de productos

Flujo principal

1. El usuario explora el catalogo en la pagina principal.
2. Abre un perfume para ver su detalle.
3. Selecciona presentacion y cantidad.
4. Agrega al carrito.
5. Finaliza solicitud por WhatsApp o correo.

Estado del carrito

El carrito se guarda en localStorage, por lo que los productos permanecen aunque se recargue la pagina.

Despliegue

Puedes desplegar en Vercel u otra plataforma compatible con Next.js.

Compilacion para produccion:

npm run build
npm run start

Licencia

Puedes definir aqui la licencia del proyecto (por ejemplo: MIT).