212 lines
17 KiB
TypeScript
212 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import { Box, Sparkles, Scale, Leaf, Shirt, Users, Frame, Lightbulb, Moon, Palette, HardHat, ZoomIn } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="largeSizeMediumTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="KAYSENCLUB"
|
|
navItems={[
|
|
{ name: "Colecciones", id: "#collections" },
|
|
{ name: "Productos", id: "#products" },
|
|
{ name: "Nosotros", id: "#story" },
|
|
{ name: "Reseñas", id: "#reviews" }
|
|
]}
|
|
button={{
|
|
text: "Comprar Ahora", href: "#products"
|
|
}}
|
|
/>
|
|
</div>
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="EVOLVED STREETWEAR KAYSENCLUB"
|
|
description="Ropa que no sigue tendencias. Las crea. Corte oversize unisex, tela french terry premium, con detalles reflectantes que brillan en la oscuridad."
|
|
background={{
|
|
variant: "sparkles-gradient"
|
|
}}
|
|
tag="Colección 2025 · French Terry Oversize"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="text-stagger"
|
|
buttons={[
|
|
{ text: "Ver Colecciones ↓", href: "#collections" },
|
|
{ text: "Nuestra Historia", href: "#story" }
|
|
]}
|
|
buttonAnimation="hover-magnetic"
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-pattern-blurred-textured-background-dark-backdrop_23-2148070957.jpg", imageAlt: "Futuristic abstract background with red glitch effects" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-perforated-fabric_23-2149894538.jpg", imageAlt: "Close-up of dark streetwear fabric with red reflective details" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/magician-performing-trick-with-magic-wand-against-black-background_23-2147880724.jpg", imageAlt: "Stylized KAYSENCLUB logo with red glowing lines" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/dystopian-scene-with-destroyed-landscape-apocalyptic-atmosphere_23-2150461594.jpg", imageAlt: "Overhead view of a dark, futuristic urban environment at night" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139396.jpg", imageAlt: "Person in KAYSENCLUB streetwear, motion blurred in neon light" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/artistic-background-wallpaper-with-color-halftone-effect_58702-9732.jpg", imageAlt: "Extreme close-up of dark high-tech material with red energy lines" }
|
|
]}
|
|
ariaLabel="Hero section showcasing KAYSENCLUB's evolved streetwear"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<div id="ticker" data-section="ticker">
|
|
<SocialProofOne
|
|
names={[
|
|
"EVOLVED COLLECTION", "DRIVE COLLECTION", "FRENCH TERRY PREMIUM", "OVERSIZE UNISEX", "DETALLES REFLECTANTES", "深海の恐怖", "KAYSENCLUB"
|
|
]}
|
|
title=""
|
|
description=""
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={30}
|
|
showCard={false}
|
|
ariaLabel="Announcement ticker with brand keywords and collections"
|
|
/>
|
|
</div>
|
|
<div id="collections" data-section="collections">
|
|
<ProductCardThree
|
|
title="Las Colecciones"
|
|
description="Dos universos distintos. Un solo código de identidad."
|
|
gridVariant="bento-grid"
|
|
animationType="slide-up"
|
|
products={[
|
|
{ id: "collection-evolved", name: "EVOLVED", price: "COL. 001", imageSrc: "/mnt/user-data/uploads/ChatGPT_Image_10_jun_2026__05_05_13_p_m_.png", imageAlt: "Evolved Collection T-shirt with deep creature design" },
|
|
{ id: "collection-drive", name: "DRIVE", price: "COL. 002", imageSrc: "/mnt/user-data/uploads/ChatGPT_Image_10_jun_2026__05_08_03_p_m_.png", imageAlt: "Drive Collection T-shirt with Audi R8 racing design" },
|
|
{ id: "collection-anime", name: "ANIME COLLECTION", price: "PRÓXIMA", imageSrc: "http://img.b2bpic.net/free-photo/fantasy-water-character_23-2151149317.jpg", imageAlt: "Placeholder for upcoming Anime Collection" },
|
|
{ id: "collection-techwear", name: "TECHWEAR", price: "PRÓXIMA", imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-315197.jpg", imageAlt: "Conceptual techwear collection" },
|
|
{ id: "collection-futuristic", name: "FUTURE WAVE", price: "PRÓXIMA", imageSrc: "http://img.b2bpic.net/free-photo/3d-low-poly-landscape-background-with-connecting-lines-dots_1048-10643.jpg", imageAlt: "Conceptual futuristic collection" },
|
|
{ id: "collection-shadow", name: "SHADOW REALM", price: "PRÓXIMA", imageSrc: "http://img.b2bpic.net/free-photo/glitter-texture-background_23-2148110671.jpg", imageAlt: "Conceptual shadow collection" }
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="KAYSENCLUB's current and upcoming collections"
|
|
/>
|
|
</div>
|
|
<div id="material" data-section="material">
|
|
<FeatureCardTen
|
|
title="Hecho para Destacar"
|
|
description="Cada pieza de KAYSENCLUB es una declaración. Materiales premium, cortes calculados y detalles que solo tú sabes que existen — hasta que la luz los delata."
|
|
features={[
|
|
{
|
|
title: "French Terry 100% Algodón", description: "Tela pesada de alta calidad. Suave por dentro, resistente por fuera. Hecha para durar.", media: { imageSrc: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133151.jpg", imageAlt: "Microscopic view of French Terry fabric" },
|
|
items: [{ icon: Box, text: "Premium Fabric" }, { icon: Scale, text: "Heavyweight" }, { icon: Leaf, text: "Breathable" }],
|
|
reverse: false
|
|
},
|
|
{
|
|
title: "Corte Oversize Unisex", description: "Silueta amplia y estructurada. Diseñada para todos los cuerpos sin comprometer la estética.", media: { imageSrc: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133151.jpg", imageAlt: "Microscopic view of French Terry fabric" },
|
|
items: [{ icon: Shirt, text: "Relaxed Fit" }, { icon: Users, text: "Gender Neutral" }, { icon: Frame, text: "Structured Silhouette" }],
|
|
reverse: true
|
|
},
|
|
{
|
|
title: "Detalles Reflectantes", description: "Elementos de serigrafía reflectante que cobran vida bajo la luz artificial. Diseñado para la noche.", media: { imageSrc: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133151.jpg", imageAlt: "Microscopic view of French Terry fabric" },
|
|
items: [{ icon: Lightbulb, text: "Night Visibility" }, { icon: Sparkles, text: "Unique Glow" }, { icon: Moon, text: "Urban Night Style" }],
|
|
reverse: false
|
|
},
|
|
{
|
|
title: "Impresión de Alta Definición", description: "Gráficos complejos con detalle milimétrico. Tintas que no se cuartean ni se decoloran.", media: { imageSrc: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133151.jpg", imageAlt: "Microscopic view of French Terry fabric" },
|
|
items: [{ icon: Palette, text: "Vibrant Colors" }, { icon: HardHat, text: "Durable Print" }, { icon: ZoomIn, text: "Fine Detail" }],
|
|
reverse: true
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Features of KAYSENCLUB's apparel materials and design"
|
|
/>
|
|
</div>
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
title="Todos los Drops"
|
|
description="Explora nuestras prendas exclusivas, diseñadas para los que marcan la pauta."
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
products={[
|
|
{ id: "product-evolved-tee", name: "Deep Creature Oversized Tee", price: "$699", imageSrc: "/mnt/user-data/uploads/ChatGPT_Image_10_jun_2026__05_05_13_p_m_.png", imageAlt: "Evolved Collection Deep Creature Oversized Tee" },
|
|
{ id: "product-drive-tee", name: "R8 Racing Oversized Tee", price: "$699", imageSrc: "/mnt/user-data/uploads/ChatGPT_Image_10_jun_2026__05_08_03_p_m_.png", imageAlt: "Drive Collection R8 Racing Oversized Tee" },
|
|
{ id: "product-anime-tee", name: "Next Anime Collection Tee", price: "$749", imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-k-pop-clothing-urban-scene_23-2149096948.jpg", imageAlt: "Anime Collection Oversized T-shirt with abstract warrior graphic" },
|
|
{ id: "product-hoodie-tech", name: "Circuit Board Reflective Hoodie", price: "$1299", imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-virtual-reality-goggles-indoors_23-2148815655.jpg", imageAlt: "Black oversized hoodie with circuit board reflective pattern" },
|
|
{ id: "product-joggers-dark", name: "Dark Techwear Joggers", price: "$999", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-man-airport-is-waiting-flight_146671-18183.jpg", imageAlt: "Dark grey techwear joggers with red stitching" },
|
|
{ id: "product-jacket-urban", name: "Urban Asymmetrical Jacket", price: "$1899", imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-brunette-girl-with-bob-hair-dressed-casual-wear-happily-dancing-camera-carefree-girl-isolated-white-background_574295-4482.jpg", imageAlt: "Black techwear jacket with asymmetrical zippers and reflective stripe" }
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="KAYSENCLUB's latest product drops"
|
|
/>
|
|
</div>
|
|
<div id="story" data-section="story">
|
|
<MediaAbout
|
|
title="No somos seguidores. Somos la señal."
|
|
description="KAYSENCLUB nació de una pregunta simple: ¿por qué conformarse con ropa que no dice nada? Diseñamos para quienes viven en el límite entre la calle y el futuro. French terry oversize en negro profundo. Gráficos que cuentan historias — desde criaturas del abismo hasta máquinas de velocidad. Y siempre, ese detalle reflectante que solo se revela en la oscuridad."
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-ouija-board-still-life_23-2149409513.jpg"
|
|
imageAlt="Collage of KAYSENCLUB streetwear elements and branding"
|
|
useInvertedBackground={false}
|
|
ariaLabel="The brand story of KAYSENCLUB"
|
|
/>
|
|
</div>
|
|
<div id="reviews" data-section="reviews">
|
|
<TestimonialCardTen
|
|
title="Lo que Dicen"
|
|
description="Cada prenda que sale de KAYSENCLUB lleva con ella una historia real."
|
|
testimonials={[
|
|
{ id: "1", title: "Calidad y Diseño Inigualables", quote: "La calidad del french terry es brutal. La tela pesa bien, no se deforma después de lavarla. Y el detalle reflectante de los laterales... cuando le pegó la luz del flash literalmente brilló. Todo mundo me preguntó dónde la conseguí.", name: "Miguel R.", role: "Cliente Verificado", imageSrc: "http://img.b2bpic.net/free-photo/cartoon-man-wearing-glasses_23-2151136831.jpg", imageAlt: "Avatar of Miguel R." },
|
|
{ id: "2", title: "Diseño Impresionante y Ajuste Perfecto", quote: "Compré la de la DRIVE collection — la del Audi R8. El diseño del volante y el carro están increíbles, muy detallado. El oversize queda perfecto, ni muy suelto ni muy pegado. La calidad supera lo que cuesta.", name: "Diego V.", role: "Entusiasta de la Velocidad", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-orange-background_23-2149019985.jpg", imageAlt: "Avatar of Diego V." },
|
|
{ id: "3", title: "Sorprendida por la Calidad Premium", quote: "Yo pensé que era solo otra marca más de streetwear, pero cuando la vi en persona me sorprendió mucho. La tela es súper premium, el corte es unisex y me queda increíble. Los kanji en la espalda le dan un toque muy único.", name: "Sofía K.", role: "Fashionista Urbana", imageSrc: "http://img.b2bpic.net/free-photo/woman-virtual-reality-glasses-smart-technology_53876-102977.jpg", imageAlt: "Avatar of Sofía K." },
|
|
{ id: "4", title: "Detalles que Hacen la Diferencia", quote: "Los detalles reflectantes son un game-changer. Le dan un toque de exclusividad que no encuentras en otras marcas. Además, el servicio al cliente fue excelente. ¡Recomendadísimo!", name: "Javier P.", role: "Comprador Frecuente", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man_23-2148884360.jpg", imageAlt: "Avatar of Javier P." },
|
|
{ id: "5", title: "Comodidad y Estilo Garantizados", quote: "Siempre busco ropa cómoda pero con estilo, y KAYSENCLUB lo logra a la perfección. El french terry es súper suave y el corte oversize es mi favorito. Perfecta para el día a día o para salir de noche.", name: "Andrea G.", role: "Experta en Streetwear", imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419464.jpg", imageAlt: "Avatar of Andrea G." },
|
|
{ id: "6", title: "Innovación en el Diseño Urbano", quote: "KAYSENCLUB está llevando el streetwear a otro nivel. La combinación de elementos oscuros, tecnológicos y detalles que reaccionan a la luz es genial. Cada pieza es una obra de arte.", name: "Carlos T.", role: "Crítico de Moda", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vrg7gn", imageAlt: "Avatar of Carlos T." }
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Customer testimonials about KAYSENCLUB products"
|
|
/>
|
|
</div>
|
|
<div id="newsletter" data-section="newsletter">
|
|
<ContactSplitForm
|
|
title="Sé el primero. Siempre."
|
|
description="Nuevos drops, preventa de colecciones y acceso anticipado. Solo para quienes están en la lista."
|
|
inputs={[
|
|
{ name: "email", type: "email", placeholder: "tu@email.com", required: true }
|
|
]}
|
|
buttonText="Entrar"
|
|
imageSrc="http://img.b2bpic.net/free-photo/glowing-blue-city-street-ignites-vibrant-motion-generated-by-ai_188544-27372.jpg"
|
|
imageAlt="Futuristic urban scene with red neon lights for newsletter signup"
|
|
mediaPosition="right"
|
|
mediaAnimation="none"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Newsletter subscription form for exclusive access"
|
|
/>
|
|
</div>
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="KAYSENCLUB"
|
|
columns={[
|
|
{ title: "Colecciones", items: [{ label: "Evolved — Original", href: "#products" }, { label: "Drive — Racing", href: "#products" }, { label: "Anime — Próxima", href: "#products" }, { label: "Ver Todo", href: "#collections" }] },
|
|
{ title: "Info", items: [{ label: "Nuestra Historia", href: "#story" }, { label: "Reseñas", href: "#reviews" }, { label: "Guía de Tallas", href: "#" }, { label: "Cuidado de la Prenda", href: "#" }] },
|
|
{ title: "Ayuda", items: [{ label: "Envíos y Devoluciones", href: "#" }, { label: "Preguntas Frecuentes", href: "#" }, { label: "Contacto", href: "#" }, { label: "Mayoreo", href: "#" }] }
|
|
]}
|
|
copyrightText="© 2025 KAYSENCLUB · Todos los derechos reservados"
|
|
ariaLabel="KAYSENCLUB Footer with navigation and legal information"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|