|
|
|
|
@@ -0,0 +1,220 @@
|
|
|
|
|
"use client";
|
|
|
|
|
|
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
|
import ReactLenis from "lenis/react";
|
|
|
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
|
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
|
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
|
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
|
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
|
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
|
|
|
import ButtonDirectionalHover from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';
|
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
|
import clsx from 'clsx';
|
|
|
|
|
import { CheckCircle } from 'lucide-react';
|
|
|
|
|
|
|
|
|
|
// Placeholder product data (in a real app, this would be fetched based on id)
|
|
|
|
|
const productData = {
|
|
|
|
|
id: "1", name: "Hoodie Elite Performance", price: "€69.99", description: "Eleva tu estilo y rendimiento con nuestra Hoodie Elite Performance. Confeccionada con tecnología de punta, esta sudadera ofrece una comodidad inigualable y durabilidad para tus entrenamientos y el día a día. Su diseño moderno y ajuste perfecto te mantendrán listo para cualquier desafío.", fullDetails: "Nuestra Hoodie Elite Performance está diseñada para los atletas que exigen lo mejor. Fabricada con una mezcla de algodón premium y poliéster técnico, proporciona una transpirabilidad superior y una resistencia excepcional. Las costuras reforzadas aseguran una larga vida útil, mientras que el interior suave al tacto garantiza el máximo confort. Ideal para capas o para usar sola, esta sudadera es un elemento esencial en cualquier guardarropa de alto rendimiento.", videoSrc: "http://img.b2bpic.net/free-photo/weight-training-workout-exercise-fitness-concept_53876-144313.jpg", imageSrc: "http://img.b2bpic.net/free-photo/portrait-adult-male-getting-ready-exercise_23-2148531045.jpg", gallery: [
|
|
|
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/side-view-female-boxer-practicing-ring-with-trainer_23-2148426215.jpg", imageAlt: "Detalle de costura"},
|
|
|
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/man-corner-box-ring_23-2148024339.jpg", imageAlt: "Modelo vistiendo hoodie"},
|
|
|
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/young-sporty-woman-orange-sport-suit_1303-31740.jpg", imageAlt: "Material en detalle"}
|
|
|
|
|
],
|
|
|
|
|
sizeGuide: "Consulta nuestra guía de tallas detallada para asegurar el ajuste perfecto. Disponible en S, M, L, XL, XXL. Te recomendamos medir tu pecho y longitud de brazo para una elección óptima. Las tallas son europeas estándar.", guarantee: "Tu satisfacción es nuestra prioridad. Ofrecemos una garantía de satisfacción de 30 días. Si no estás completamente feliz con tu compra, te devolvemos el dinero sin preguntas.", reviews: [
|
|
|
|
|
{ id: "rev-1", name: "Alex G.", role: "Cliente Verificado", company: "SAINTS DEN", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-training-gym-doing-push-ups_23-2147755601.jpg", imageAlt: "Alex G."},
|
|
|
|
|
{ id: "rev-2", name: "María P.", role: "Cliente Verificado", company: "SAINTS DEN", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-doing-warmup-exercise-before-training-gym_23-2147913380.jpg", imageAlt: "María P."},
|
|
|
|
|
{ id: "rev-3", name: "Juan L.", role: "Cliente Verificado", company: "SAINTS DEN", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/trans-man-working-out-gym_23-2149712788.jpg", imageAlt: "Juan L."}
|
|
|
|
|
],
|
|
|
|
|
relatedProducts: [
|
|
|
|
|
{ id: "rp-1", name: "Rashguard Apex Pro", price: "€49.99", variant: "Negro | Tallas S-XXL", imageSrc: "http://img.b2bpic.net/free-photo/woman-comfortable-sports-resting-leaned-against-wall-finished-workout-girl-gather-energy-concept_1153-4173.jpg", imageAlt: "Rashguard Apex Pro"},
|
|
|
|
|
{ id: "rp-2", name: "Camiseta Oversize Dominus", price: "€34.99", variant: "Blanco | Tallas S-XXL", imageSrc: "http://img.b2bpic.net/free-vector/damn-good-black-blue-retro-calligraphy_53876-99595.jpg", imageAlt: "Camiseta Oversize Dominus"},
|
|
|
|
|
{ id: "rp-3", name: "Fight Shorts Warrior", price: "€59.99", variant: "Gris Oscuro | Tallas S-XL", imageSrc: "http://img.b2bpic.net/free-photo/front-view-shirtless-male-boxer_23-2148615119.jpg", imageAlt: "Fight Shorts Warrior"}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const globalNavItems = [
|
|
|
|
|
{ name: "Inicio", target: "/" },
|
|
|
|
|
{ name: "Streetwear", target: "/#collections" },
|
|
|
|
|
{ name: "Fightwear", target: "/#collections" },
|
|
|
|
|
{ name: "Productos", target: "/product/1" },
|
|
|
|
|
{ name: "Comunidad", target: "/#community" },
|
|
|
|
|
{ name: "Contacto", target: "/#contact" }
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
export default function ProductDetailPage() {
|
|
|
|
|
const [showStickyButton, setShowStickyButton] = useState(false);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const handleScroll = () => {
|
|
|
|
|
const scrollThreshold = 300;
|
|
|
|
|
if (window.scrollY > scrollThreshold) {
|
|
|
|
|
setShowStickyButton(true);
|
|
|
|
|
} else {
|
|
|
|
|
setShowStickyButton(false);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
|
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<ThemeProvider
|
|
|
|
|
defaultButtonVariant="text-shift"
|
|
|
|
|
defaultTextAnimation="reveal-blur"
|
|
|
|
|
borderRadius="pill"
|
|
|
|
|
contentWidth="mediumSmall"
|
|
|
|
|
sizing="mediumSizeLargeTitles"
|
|
|
|
|
background="noiseDiagonalGradient"
|
|
|
|
|
cardStyle="gradient-mesh"
|
|
|
|
|
primaryButtonStyle="double-inset"
|
|
|
|
|
secondaryButtonStyle="layered"
|
|
|
|
|
headingFontWeight="bold"
|
|
|
|
|
>
|
|
|
|
|
<ReactLenis root>
|
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
|
<NavbarStyleFullscreen
|
|
|
|
|
navItems={globalNavItems.map(item => ({ name: item.name, id: item.target }))}
|
|
|
|
|
logoSrc="http://img.b2bpic.net/free-vector/minimalist-fashion-typography-logo-template_742173-7469.jpg"
|
|
|
|
|
logoAlt="SAINTS DEN logo"
|
|
|
|
|
brandName="SAINTS DEN"
|
|
|
|
|
bottomLeftText="Comunidad Global"
|
|
|
|
|
bottomRightText="contacto@saintsden.com"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="product-hero" data-section="product-hero">
|
|
|
|
|
<HeroSplitDualMedia
|
|
|
|
|
background={{ variant: "plain" }}
|
|
|
|
|
title={productData.name}
|
|
|
|
|
description={`${productData.price} | ${productData.description.split('.')[0]}.`}
|
|
|
|
|
tag="Producto SAINTS DEN"
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Añadir al Carrito", onClick: () => alert(`Añadido ${productData.name} al carrito!`), href: "#" },
|
|
|
|
|
{ text: "Ver Guía de Tallas", href: "#size-guide" }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
mediaItems={[
|
|
|
|
|
{ videoSrc: productData.videoSrc, imageSrc: productData.imageSrc, imageAlt: productData.name },
|
|
|
|
|
{ imageSrc: productData.gallery[0].imageSrc, imageAlt: productData.gallery[0].imageAlt }
|
|
|
|
|
]}
|
|
|
|
|
mediaAnimation="opacity"
|
|
|
|
|
rating={5}
|
|
|
|
|
ratingText="Más de 100 reseñas"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="product-details" data-section="product-details">
|
|
|
|
|
<TextAbout
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
tag="Detalles del Producto"
|
|
|
|
|
title="Información Completa"
|
|
|
|
|
buttons={[]}
|
|
|
|
|
/>
|
|
|
|
|
<p className="mt-4 text-base text-gray-600 dark:text-gray-300">{productData.fullDetails}</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="size-guide" data-section="size-guide">
|
|
|
|
|
<TextAbout
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
tag="Guía Esencial"
|
|
|
|
|
title="Encuentra Tu Talla Perfecta"
|
|
|
|
|
buttons={[]}
|
|
|
|
|
/>
|
|
|
|
|
<p className="mt-4 text-base text-gray-600 dark:text-gray-300">{productData.sizeGuide}</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="customer-reviews" data-section="customer-reviews">
|
|
|
|
|
<TestimonialCardSixteen
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
carouselMode="auto"
|
|
|
|
|
testimonials={productData.reviews}
|
|
|
|
|
kpiItems={[
|
|
|
|
|
{ value: "5/5", label: "Calificación" },
|
|
|
|
|
{ value: "+100", label: "Reseñas" },
|
|
|
|
|
{ value: "98%", label: "Recomiendan" }
|
|
|
|
|
]}
|
|
|
|
|
title="Lo Que Dicen Nuestros Clientes"
|
|
|
|
|
description="Opiniones verificadas de nuestra comunidad de atletas y entusiastas del streetwear."
|
|
|
|
|
tag="RESEÑAS REALES"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="related-products" data-section="related-products">
|
|
|
|
|
<ProductCardFour
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
gridVariant="three-columns-all-equal-width"
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
products={productData.relatedProducts}
|
|
|
|
|
title="Productos Relacionados"
|
|
|
|
|
description="Completa tu look o tu equipamiento con artículos seleccionados que te pueden interesar."
|
|
|
|
|
tag="MÁS PARA TI"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="satisfaction-guarantee" data-section="satisfaction-guarantee">
|
|
|
|
|
<TextAbout
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
tag="Nuestra Promesa"
|
|
|
|
|
title="Garantía de Satisfacción SAINTS DEN"
|
|
|
|
|
buttons={[]}
|
|
|
|
|
/>
|
|
|
|
|
<div className="mt-4 flex items-center gap-2 text-base text-gray-600 dark:text-gray-300">
|
|
|
|
|
<CheckCircle className="text-green-500 w-5 h-5" />
|
|
|
|
|
<p>{productData.guarantee}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
|
<FooterBaseReveal
|
|
|
|
|
logoSrc="http://img.b2bpic.net/free-vector/minimalist-fashion-typography-logo-template_742173-7469.jpg"
|
|
|
|
|
logoAlt="SAINTS DEN logo"
|
|
|
|
|
logoText="SAINTS DEN"
|
|
|
|
|
columns={[
|
|
|
|
|
{
|
|
|
|
|
title: "Compañía", items: [
|
|
|
|
|
{ label: "Sobre Nosotros", href: "/#brand-story" },
|
|
|
|
|
{ label: "Embajadores", href: "/#ambassadors" },
|
|
|
|
|
{ label: "Comunidad", href: "/#community" },
|
|
|
|
|
{ label: "Contacto", href: "/#contact" }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Soporte", items: [
|
|
|
|
|
{ label: "Preguntas Frecuentes", href: "#" },
|
|
|
|
|
{ label: "Política de Envíos", href: "#" },
|
|
|
|
|
{ label: "Cambios y Devoluciones", href: "#" },
|
|
|
|
|
{ label: "Privacidad", href: "#" }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Explorar", items: [
|
|
|
|
|
{ label: "Streetwear", href: "/#collections" },
|
|
|
|
|
{ label: "Fightwear", href: "/#collections" },
|
|
|
|
|
{ label: "Productos", href: "/product/1" },
|
|
|
|
|
{ label: "Nuevos Lanzamientos", href: "/#collections" }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
copyrightText="© 2024 SAINTS DEN. Todos los derechos reservados."
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Sticky Add to Cart for Mobile */}
|
|
|
|
|
<div className={clsx(
|
|
|
|
|
"fixed bottom-0 left-0 w-full bg-background/95 backdrop-blur-md p-4 border-t border-border z-50 transition-transform duration-300 ease-in-out", showStickyButton ? "translate-y-0" : "translate-y-full", "lg:hidden"
|
|
|
|
|
)}>
|
|
|
|
|
<ButtonDirectionalHover
|
|
|
|
|
text={`Añadir al Carrito - ${productData.price}`}
|
|
|
|
|
onClick={() => alert(`Añadido ${productData.name} al carrito!`)}
|
|
|
|
|
className="w-full"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</ReactLenis>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
);
|
|
|
|
|
}
|
