diff --git a/src/app/page.tsx b/src/app/page.tsx index c9d3cce..2fdb17c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -12,8 +12,93 @@ import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia'; import ContactText from '@/components/sections/contact/ContactText'; import FooterCard from '@/components/sections/footer/FooterCard'; import { Heart, Droplet, Leaf, Wind, Scissors, Sparkles, Hand, Zap, Smile, Instagram, Facebook, MessageCircle } from 'lucide-react'; +import { useEffect, useRef } from 'react'; export default function HomePage() { + const containerRef = useRef(null); + const mouseRef = useRef({ x: 0, y: 0 }); + const canvasRef = useRef(null); + + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + + const scene = new (window as any).THREE.Scene(); + const camera = new (window as any).THREE.PerspectiveCamera( + 75, + canvas.clientWidth / canvas.clientHeight, + 0.1, + 1000 + ); + const renderer = new (window as any).THREE.WebGLRenderer({ canvas, alpha: true, antialias: true }); + renderer.setSize(canvas.clientWidth, canvas.clientHeight); + renderer.setClearColor(0x000000, 0); + + // Create 3D UI/UX model + const geometry = new (window as any).THREE.IcosahedronGeometry(2, 4); + const material = new (window as any).THREE.MeshPhongMaterial({ + color: 0x00d4ff, + emissive: 0x0099cc, + wireframe: false, + shininess: 100, + }); + const mesh = new (window as any).THREE.Mesh(geometry, material); + scene.add(mesh); + + // Add lighting + const light = new (window as any).THREE.DirectionalLight(0xffffff, 1); + light.position.set(5, 5, 5); + scene.add(light); + const ambientLight = new (window as any).THREE.AmbientLight(0xffffff, 0.5); + scene.add(ambientLight); + + camera.position.z = 5; + + const handleMouseMove = (e: MouseEvent) => { + const rect = canvas.getBoundingClientRect(); + mouseRef.current.x = ((e.clientX - rect.left) / rect.width) * 2 - 1; + mouseRef.current.y = -((e.clientY - rect.top) / rect.height) * 2 + 1; + }; + + window.addEventListener('mousemove', handleMouseMove); + + const animate = () => { + requestAnimationFrame(animate); + mesh.rotation.x += 0.003; + mesh.rotation.y += 0.005; + mesh.rotation.z += mouseRef.current.x * 0.01; + mesh.position.x = mouseRef.current.x * 0.5; + mesh.position.y = mouseRef.current.y * 0.5; + renderer.render(scene, camera); + }; + + animate(); + + const handleResize = () => { + if (!canvas) return; + const width = canvas.clientWidth; + const height = canvas.clientHeight; + camera.aspect = width / height; + camera.updateProjectionMatrix(); + renderer.setSize(width, height); + }; + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('mousemove', handleMouseMove); + window.removeEventListener('resize', handleResize); + renderer.dispose(); + }; + }, []); + + useEffect(() => { + const script = document.createElement('script'); + script.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'; + script.async = true; + document.head.appendChild(script); + }, []); + return ( - {/* Hero Section */} -
+ {/* Hero Section with Interactive 3D Model */} +
+
+ +
@@ -124,7 +227,8 @@ export default function HomePage() { textboxLayout="default" useInvertedBackground={false} names={[ - "Clínica Veterinaria Premier", "Petshop Premium Chapinero", "Fashion Pet Bogotá", "Wellness Mascotas", "Grooming Luxury", "Pet Nutrition Pro", "Vet Care Excellence", "Design Pets Colombia"]} + "Clínica Veterinaria Premier", "Petshop Premium Chapinero", "Fashion Pet Bogotá", "Wellness Mascotas", "Grooming Luxury", "Pet Nutrition Pro", "Vet Care Excellence", "Design Pets Colombia" + ]} speed={40} showCard={true} /> @@ -143,13 +247,16 @@ export default function HomePage() { products={[ { id: "1", brand: "Vestier Animal", name: "Ropa a Medida", price: "Desde $89.000", rating: 5, - reviewCount: "847", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-carrying-puppy-bag_23-2150565379.jpg?_wi=1", imageAlt: "Colección de ropa personalizada para mascotas"}, + reviewCount: "847", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-carrying-puppy-bag_23-2150565379.jpg?_wi=1", imageAlt: "Colección de ropa personalizada para mascotas" + }, { id: "2", brand: "Vestier Animal", name: "Accesorios Premium", price: "Desde $35.000", rating: 5, - reviewCount: "623", imageSrc: "http://img.b2bpic.net/free-photo/snapshot-labrador-red-collar-rejoicing-walk-park-with-his-master-mistress_197531-13792.jpg", imageAlt: "Accesorios y collares de diseño"}, + reviewCount: "623", imageSrc: "http://img.b2bpic.net/free-photo/snapshot-labrador-red-collar-rejoicing-walk-park-with-his-master-mistress_197531-13792.jpg", imageAlt: "Accesorios y collares de diseño" + }, { id: "3", brand: "Vestier Animal", name: "Servicios Spa", price: "Desde $125.000", rating: 5, - reviewCount: "512", imageSrc: "http://img.b2bpic.net/free-photo/happy-blonde-woman-dress-sitting-with-her-cute-pug-handmade-sofa-room-with-loft-interior_613910-18128.jpg?_wi=1", imageAlt: "Servicios de spa y bienestar para mascotas"}, + reviewCount: "512", imageSrc: "http://img.b2bpic.net/free-photo/happy-blonde-woman-dress-sitting-with-her-cute-pug-handmade-sofa-room-with-loft-interior_613910-18128.jpg?_wi=1", imageAlt: "Servicios de spa y bienestar para mascotas" + }, ]} />
@@ -167,13 +274,16 @@ export default function HomePage() { products={[ { id: "p1", brand: "Vestier Animal Premium", name: "Blazer Personalizado Ultimate", price: "$189.000", rating: 5, - reviewCount: "234", imageSrc: "http://img.b2bpic.net/free-photo/friends-having-fun-together_23-2149290184.jpg?_wi=1", imageAlt: "Blazer premium personalizado para perros"}, + reviewCount: "234", imageSrc: "http://img.b2bpic.net/free-photo/friends-having-fun-together_23-2149290184.jpg?_wi=1", imageAlt: "Blazer premium personalizado para perros" + }, { id: "p2", brand: "Vestier Animal Premium", name: "Collar Diamante Impressive", price: "$65.000", rating: 5, - reviewCount: "189", imageSrc: "http://img.b2bpic.net/free-photo/top-view-pet-accessories_23-2150930454.jpg?_wi=1", imageAlt: "Collar de diseño con detalles premium"}, + reviewCount: "189", imageSrc: "http://img.b2bpic.net/free-photo/top-view-pet-accessories_23-2150930454.jpg?_wi=1", imageAlt: "Collar de diseño con detalles premium" + }, { id: "p3", brand: "Vestier Animal Premium", name: "Suéter Cashmere Supercharged", price: "$245.000", rating: 5, - reviewCount: "156", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-handmade-jumper_23-2148827182.jpg?_wi=1", imageAlt: "Suéter de cashmere personalizado"}, + reviewCount: "156", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-handmade-jumper_23-2148827182.jpg?_wi=1", imageAlt: "Suéter de cashmere personalizado" + }, ]} /> @@ -190,7 +300,8 @@ export default function HomePage() { features={[ { id: "1", title: "Baño Premium con Productos Orgánicos", description: "Limpieza profunda con champús y acondicionadores 100% naturales. Hidratación intensiva y aroma relajante.", media: { - imageSrc: "http://img.b2bpic.net/free-photo/lovely-pet-portrait-isolated_23-2149192309.jpg?_wi=1"}, + imageSrc: "http://img.b2bpic.net/free-photo/lovely-pet-portrait-isolated_23-2149192309.jpg?_wi=1" + }, items: [ { icon: Droplet, text: "Agua filtrada temperada" }, { icon: Leaf, text: "Productos orgánicos certificados" }, @@ -200,7 +311,8 @@ export default function HomePage() { }, { id: "2", title: "Corte y Styling Profesional", description: "Grooming artístico con groomer certificado. Diseños personalizados que resaltan la belleza natural.", media: { - imageSrc: "http://img.b2bpic.net/free-photo/haircuting-process-small-dog-sits-table-dog-with-professional_1157-48819.jpg?_wi=1"}, + imageSrc: "http://img.b2bpic.net/free-photo/haircuting-process-small-dog-sits-table-dog-with-professional_1157-48819.jpg?_wi=1" + }, items: [ { icon: Scissors, text: "Técnicas profesionales" }, { icon: Sparkles, text: "Diseños personalizados" }, @@ -210,7 +322,8 @@ export default function HomePage() { }, { id: "3", title: "Masaje Relajante Terapéutico", description: "Sesiones de masaje para aliviar tensiones y mejorar circulación. Bienestar integral para tu mascota.", media: { - imageSrc: "http://img.b2bpic.net/free-photo/happy-mornings-beautiful-woman-enjoying-her-morning-sitting-sofa-eating-breakfast-playing_1258-195205.jpg?_wi=1"}, + imageSrc: "http://img.b2bpic.net/free-photo/happy-mornings-beautiful-woman-enjoying-her-morning-sitting-sofa-eating-breakfast-playing_1258-195205.jpg?_wi=1" + }, items: [ { icon: Hand, text: "Técnicas terapéuticas comprobadas" }, { icon: Zap, text: "Energía y vitalidad" }, @@ -234,19 +347,23 @@ export default function HomePage() { metrics={[ { id: "1", value: "2.500+", title: "Mascotas Felices Cuidadas", items: [ - "Perros y gatos satisfechos", "Tasa de recomendación 98%", "Clientes recurrentes 87%"], + "Perros y gatos satisfechos", "Tasa de recomendación 98%", "Clientes recurrentes 87%" + ], }, { id: "2", value: "8+", title: "Años de Experiencia Premium", items: [ - "Groomer certificados internacionales", "Veterinarios consultores", "Equipo dedicado 24/7"], + "Groomer certificados internacionales", "Veterinarios consultores", "Equipo dedicado 24/7" + ], }, { id: "3", value: "1.200+", title: "Prendas Personalizadas Creadas", items: [ - "Diseños exclusivos únicos", "Calidad artesanal garantizada", "Materiales premium importados"], + "Diseños exclusivos únicos", "Calidad artesanal garantizada", "Materiales premium importados" + ], }, { id: "4", value: "100%", title: "Satisfacción Garantizada", items: [ - "Productos seguros y certificados", "Servicio al cliente excepcional", "Garantía en todas las prendas"], + "Productos seguros y certificados", "Servicio al cliente excepcional", "Garantía en todas las prendas" + ], }, ]} /> @@ -267,17 +384,23 @@ export default function HomePage() { faqsAnimation="slide-up" faqs={[ { - id: "1", title: "¿Cómo funciona el proceso de personalización?", content: "Contáctanos vía WhatsApp o visita nuestras tiendas. Nuestros expertos tomarán medidas precisas, consultarán tus preferencias de diseño y crearán una pieza única. El proceso toma 7-10 días hábiles."}, + id: "1", title: "¿Cómo funciona el proceso de personalización?", content: "Contáctanos vía WhatsApp o visita nuestras tiendas. Nuestros expertos tomarán medidas precisas, consultarán tus preferencias de diseño y crearán una pieza única. El proceso toma 7-10 días hábiles." + }, { - id: "2", title: "¿Qué materiales utilizan?", content: "Utilizamos materiales premium importados: algodón orgánico, cashmere, lana merino y telas técnicas transpirables. Todos nuestros productos son hipoalergénicos y seguros para mascotas."}, + id: "2", title: "¿Qué materiales utilizan?", content: "Utilizamos materiales premium importados: algodón orgánico, cashmere, lana merino y telas técnicas transpirables. Todos nuestros productos son hipoalergénicos y seguros para mascotas." + }, { - id: "3", title: "¿Cuentan con servicios a domicilio?", content: "Sí. Ofrecemos servicio de grooming y consultoría a domicilio en Bogotá. Contáctanos para agendar. Se aplican gastos de desplazamiento según la zona."}, + id: "3", title: "¿Cuentan con servicios a domicilio?", content: "Sí. Ofrecemos servicio de grooming y consultoría a domicilio en Bogotá. Contáctanos para agendar. Se aplican gastos de desplazamiento según la zona." + }, { - id: "4", title: "¿Cuál es la garantía en las prendas?", content: "Todas nuestras prendas cuentan con garantía de 12 meses contra defectos de fabricación. Ofrecemos servicio de reparación y mantenimiento gratuito el primer año."}, + id: "4", title: "¿Cuál es la garantía en las prendas?", content: "Todas nuestras prendas cuentan con garantía de 12 meses contra defectos de fabricación. Ofrecemos servicio de reparación y mantenimiento gratuito el primer año." + }, { - id: "5", title: "¿Hacen envíos fuera de Bogotá?", content: "Sí. Enviamos a toda Colombia. El costo de envío varía según el destino. Los pedidos son empacados con cuidado especial y se entregan en 3-5 días hábiles."}, + id: "5", title: "¿Hacen envíos fuera de Bogotá?", content: "Sí. Enviamos a toda Colombia. El costo de envío varía según el destino. Los pedidos son empacados con cuidado especial y se entregan en 3-5 días hábiles." + }, { - id: "6", title: "¿Puedo ver muestras antes de comprar?", content: "Absolutamente. Visita nuestras tiendas o solicita un catálogo personalizado vía WhatsApp. Tenemos muestras de telas y diseños disponibles para consulta."}, + id: "6", title: "¿Puedo ver muestras antes de comprar?", content: "Absolutamente. Visita nuestras tiendas o solicita un catálogo personalizado vía WhatsApp. Tenemos muestras de telas y diseños disponibles para consulta." + }, ]} /> @@ -304,16 +427,19 @@ export default function HomePage() { socialLinks={[ { icon: Instagram, - href: "https://instagram.com/vestieranimal", ariaLabel: "Instagram Vestier Animal"}, + href: "https://instagram.com/vestieranimal", ariaLabel: "Instagram Vestier Animal" + }, { icon: Facebook, - href: "https://facebook.com/vestieranimal", ariaLabel: "Facebook Vestier Animal"}, + href: "https://facebook.com/vestieranimal", ariaLabel: "Facebook Vestier Animal" + }, { icon: MessageCircle, - href: "https://wa.me/573001234567", ariaLabel: "WhatsApp Vestier Animal"}, + href: "https://wa.me/573001234567", ariaLabel: "WhatsApp Vestier Animal" + }, ]} />
); -} +} \ No newline at end of file