Merge version_3 into main #4

Merged
bender merged 1 commits from version_3 into main 2026-03-10 23:58:46 +00:00

View File

@@ -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<HTMLDivElement>(null);
const mouseRef = useRef({ x: 0, y: 0 });
const canvasRef = useRef<HTMLCanvasElement>(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 (
<ThemeProvider
defaultButtonVariant="shift-hover"
@@ -39,12 +124,20 @@ export default function HomePage() {
{ name: "Contacto", id: "/contacto" },
]}
button={{
text: "Agendar Cita", href: "https://wa.me/573001234567"}}
text: "Agendar Cita", href: "https://wa.me/573001234567"
}}
/>
</div>
{/* Hero Section */}
<div id="hero" data-section="hero">
{/* Hero Section with Interactive 3D Model */}
<div id="hero" data-section="hero" className="relative">
<div className="absolute inset-0 w-full h-full" ref={containerRef}>
<canvas
ref={canvasRef}
className="w-full h-full"
style={{ display: 'block', maxHeight: '600px' }}
/>
</div>
<HeroSplitTestimonial
title="Amor a su medida"
description="Ropa personalizada y servicios premium para mascotas que merecen lo mejor. Cada pieza es diseñada con cuidado para tu compañero perfecto."
@@ -55,16 +148,20 @@ export default function HomePage() {
testimonials={[
{
name: "María Rodríguez", handle: "Propietaria, Bogotá", testimonial: "La calidad y atención al detalle es extraordinaria. Mi perro se ve impresionante.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-holding-dog-medium-shot_23-2149003353.jpg", imageAlt: "happy woman with cute puppy portrait"},
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-holding-dog-medium-shot_23-2149003353.jpg", imageAlt: "happy woman with cute puppy portrait"
},
{
name: "Carlos Mendez", handle: "CEO TechCorp", testimonial: "Servicio excelente. El ajuste perfecto para mi gatita Bella.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-man-black-shirt-holding-cute-grey-kitten-yellow-surface_140725-19434.jpg", imageAlt: "businessman with cat portrait professional"},
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-man-black-shirt-holding-cute-grey-kitten-yellow-surface_140725-19434.jpg", imageAlt: "businessman with cat portrait professional"
},
{
name: "Valentina López", handle: "Médica Veterinaria", testimonial: "Recomiendo Vestier Animal a todos mis clientes. Prendas seguras y elegantes.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/handsome-veterinarian-vet-clinic-examining-cute-black-pug-dog-pointing-finger-pet-check-up-with-stethoscope-white-background_1258-56361.jpg", imageAlt: "veterinary professional with dog portrait"},
imageSrc: "http://img.b2bpic.net/free-photo/handsome-veterinarian-vet-clinic-examining-cute-black-pug-dog-pointing-finger-pet-check-up-with-stethoscope-white-background_1258-56361.jpg", imageAlt: "veterinary professional with dog portrait"
},
{
name: "Diego Castillo", handle: "Dueño Boutique de Mascotas", testimonial: "Los mejores diseños premium para perros y gatos en la ciudad.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/team-cheerful-business-colleagues-with-dog-having-fun-while-taking-selfie-office_637285-2022.jpg", imageAlt: "entrepreneur man with multiple pets"},
imageSrc: "http://img.b2bpic.net/free-photo/team-cheerful-business-colleagues-with-dog-having-fun-while-taking-selfie-office_637285-2022.jpg", imageAlt: "entrepreneur man with multiple pets"
},
]}
testimonialRotationInterval={5000}
buttons={[
@@ -100,17 +197,23 @@ export default function HomePage() {
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Sofía Martínez", role: "Dueña de Doggy & Bella", testimonial: "Increíble. Las prendas son cómodas, elegantes y mi perro se ve como una estrella de cine. El ajuste es perfecto.", imageSrc: "http://img.b2bpic.net/free-photo/woman-brown-sweater-with-black-bulldog_1157-32253.jpg", imageAlt: "Sofía Martínez"},
id: "1", name: "Sofía Martínez", role: "Dueña de Doggy & Bella", testimonial: "Increíble. Las prendas son cómodas, elegantes y mi perro se ve como una estrella de cine. El ajuste es perfecto.", imageSrc: "http://img.b2bpic.net/free-photo/woman-brown-sweater-with-black-bulldog_1157-32253.jpg", imageAlt: "Sofía Martínez"
},
{
id: "2", name: "Juan Pérez", role: "Empresario, Chapinero", testimonial: "Excelente atención. Personalizaron cada detalle según mis especificaciones. Recomendado 100%.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-male-casual-outfit-playing-with-cute-dog-while-standing-near-lake-boy-wearing-blue-shirt-white-jeans-shorts_1157-50526.jpg", imageAlt: "Juan Pérez"},
id: "2", name: "Juan Pérez", role: "Empresario, Chapinero", testimonial: "Excelente atención. Personalizaron cada detalle según mis especificaciones. Recomendado 100%.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-male-casual-outfit-playing-with-cute-dog-while-standing-near-lake-boy-wearing-blue-shirt-white-jeans-shorts_1157-50526.jpg", imageAlt: "Juan Pérez"
},
{
id: "3", name: "Catalina Ruiz", role: "Médica Veterinaria", testimonial: "Como veterinaria, valoro que usen materiales seguros y transpirables. Vestier Animal es la mejor opción.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-with-cute-greyhound-dog_23-2150231870.jpg", imageAlt: "Catalina Ruiz"},
id: "3", name: "Catalina Ruiz", role: "Médica Veterinaria", testimonial: "Como veterinaria, valoro que usen materiales seguros y transpirables. Vestier Animal es la mejor opción.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-with-cute-greyhound-dog_23-2150231870.jpg", imageAlt: "Catalina Ruiz"
},
{
id: "4", name: "Ricardo Gómez", role: "Consultor de Moda", testimonial: "El nivel de detalle y calidad de construcción rivaliza con marcas internacionales. Impressionante trabajo.", imageSrc: "http://img.b2bpic.net/free-photo/young-pet-owner-with-serious-sullen-expression-wears-black-shirt-with-suspenders-spends-free-time-company-dog-pose-against-pink-wall-truthful-friendship-people-animals_273609-15868.jpg", imageAlt: "Ricardo Gómez"},
id: "4", name: "Ricardo Gómez", role: "Consultor de Moda", testimonial: "El nivel de detalle y calidad de construcción rivaliza con marcas internacionales. Impressionante trabajo.", imageSrc: "http://img.b2bpic.net/free-photo/young-pet-owner-with-serious-sullen-expression-wears-black-shirt-with-suspenders-spends-free-time-company-dog-pose-against-pink-wall-truthful-friendship-people-animals_273609-15868.jpg", imageAlt: "Ricardo Gómez"
},
{
id: "5", name: "Alejandra López", role: "Influencer Pet", testimonial: "Mis seguidores adoran ver a mis mascotas con prendas de Vestier Animal. Son piezas de arte.", imageSrc: "http://img.b2bpic.net/free-photo/female-influencer-home-holding-dog-bottle_23-2148738166.jpg", imageAlt: "Alejandra López"},
id: "5", name: "Alejandra López", role: "Influencer Pet", testimonial: "Mis seguidores adoran ver a mis mascotas con prendas de Vestier Animal. Son piezas de arte.", imageSrc: "http://img.b2bpic.net/free-photo/female-influencer-home-holding-dog-bottle_23-2148738166.jpg", imageAlt: "Alejandra López"
},
{
id: "6", name: "Miguel Ángel Díaz", role: "Dueño Hostal para Perros", testimonial: "Mis huéspedes caninos lucen impecables. Vestier Animal eleva completamente la experiencia.", imageSrc: "http://img.b2bpic.net/free-photo/old-person-with-their-pet-dog_23-2149429244.jpg", imageAlt: "Miguel Ángel Díaz"},
id: "6", name: "Miguel Ángel Díaz", role: "Dueño Hostal para Perros", testimonial: "Mis huéspedes caninos lucen impecables. Vestier Animal eleva completamente la experiencia.", imageSrc: "http://img.b2bpic.net/free-photo/old-person-with-their-pet-dog_23-2149429244.jpg", imageAlt: "Miguel Ángel Díaz"
},
]}
/>
</div>
@@ -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"
},
]}
/>
</div>
@@ -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"
},
]}
/>
</div>
@@ -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."
},
]}
/>
</div>
@@ -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"
},
]}
/>
</div>
</ThemeProvider>
);
}
}