CARRITO
import React, { useState } from 'react';
import { Eye, EyeOff, ShoppingCart, Heart, Search, User, Menu, Minus, Plus, X } from 'lucide-react';
const ChloeActiveEcommerce = () => {
const [currentPage, setCurrentPage] = useState('home');
const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const [cartItems, setCartItems] = useState([
{
id: 1,
name: 'Always Cut-Out Bralette',
price: 50000,
quantity: 1,
image: 'https://images.unsplash.com/photo-1544966503-7cc5ac882d5a?w=300&h=300&fit=crop',
size: 'M',
color: 'Vainilla Latte'
},
{
id: 2,
name: 'Thrive Leggings',
price: 120000,
quantity: 1,
image: 'https://images.unsplash.com/photo-1506629905607-66bf4d21aa65?w=300&h=300&fit=crop',
size: 'S',
color: 'Mocha Mousse'
}
]);
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: '',
password: '',
confirmPassword: ''
});
const updateQuantity = (id, newQuantity) => {
if (newQuantity === 0) {
setCartItems(cartItems.filter(item => item.id !== id));
} else {
setCartItems(cartItems.map(item =>
item.id === id ? { ...item, quantity: newQuantity } : item
));
}
};
const removeItem = (id) => {
setCartItems(cartItems.filter(item => item.id !== id));
};
const getCartTotal = () => {
return cartItems.reduce((total, item) => total + (item.price * item.quantity), 0);
};
const Header = () => (
);
const Footer = () => (
);
const HomePage = () => (
);
const LoginPage = () => (
);
const RegisterPage = () => (
);
const CartPage = () => (
)}
);
return (
ENVÍO GRATIS EN COMPRAS SUPERIORES A $200.000 COP
setCurrentPage('home')}> CHLOÉ ACTIVE
DEVOLUCIONES FÁCILES
setCurrentPage('cart')}>
Bienvenida a Chloé Active
Activewear premium para tu estilo de vida activo
LOG IN TO YOUR ACCOUNT
ALREADY HAVE A CHLOE ACTIVE ACCOUNT?
¿NUEVO EN CHLOÉ ACTIVE?
✓
Gestiona los detalles de tu cuenta
✓
Seguimiento e historial de pedidos
✓
Accede al Club VIP
•
Acumula puntos y obtén beneficios exclusivos
•
Descuentos exclusivos
•
Sube de nivel para obtener ventajas exclusivas
•
y mucho más...
CREAR UNA CUENTA
✓
Gestiona los detalles de tu cuenta
✓
Seguimiento e historial de pedidos
✓
Accede al Club VIP
•
Acumula puntos y obtén beneficios exclusivos
•
Descuentos exclusivos
•
Sube de nivel para obtener ventajas exclusivas
•
y mucho más...
setFormData({...formData, firstName: e.target.value})}
className="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:border-black"
/>
setFormData({...formData, lastName: e.target.value})}
className="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:border-black"
/>
setFormData({...formData, email: e.target.value})}
className="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:border-black"
/>
setFormData({...formData, password: e.target.value})}
className="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:border-black pr-12"
/>
setFormData({...formData, confirmPassword: e.target.value})}
className="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:border-black pr-12"
/>
* required
Already have a Chloe Active account?
MANTENTE CONECTADA
Sé la primera en conocer nuestros últimos lanzamientos,
nuevos productos y eventos exclusivos
CARRITO DE COMPRAS
{cartItems.length === 0 ? (Tu carrito está vacío
Agrega algunos productos para comenzar
{cartItems.map((item) => (
))}
{item.name}
Talla: {item.size} | Color: {item.color}
${item.price.toLocaleString('es-CO')} COP
{item.quantity}
RESUMEN DEL PEDIDO
Subtotal
${getCartTotal().toLocaleString('es-CO')} COP
Envío
GRATIS
IVA
${(getCartTotal() * 0.19).toLocaleString('es-CO')} COP
Total
${(getCartTotal() * 1.19).toLocaleString('es-CO')} COP
✓
Envío gratis en compras superiores a $200.000
✓
Devoluciones fáciles en 30 días
✓
Pago seguro