305 lines
10 KiB
TypeScript
305 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import { Star } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "INICIO",
|
|
id: "#hero",
|
|
},
|
|
{
|
|
name: "PRODUCTOS",
|
|
id: "#products",
|
|
},
|
|
{
|
|
name: "OPINIONES",
|
|
id: "#testimonials",
|
|
},
|
|
{
|
|
name: "CONTACTO",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-photo/woman-wearing-sundress_23-2150388772.jpg"
|
|
logoAlt="Logo de Ukla Wear"
|
|
brandName="UKLA WEAR"
|
|
button={{
|
|
text: "WHATSAPP",
|
|
href: "https://wa.me/XXXXXXXXXXX",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
logoText="UKLA WEAR"
|
|
description="TU ESTILO. TU ACTITUD. LA CALLE ES TU PASARELA."
|
|
buttons={[
|
|
{
|
|
text: "COMPRAR AHORA",
|
|
href: "#products",
|
|
},
|
|
{
|
|
text: "ASISTENTE UKLA",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/brutal-young-man-sunglasses-hat-island-travel_1321-3839.jpg"
|
|
imageAlt="Modelo de streetwear de Ukla Wear"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySix
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "DISEÑO AUTÉNTICO",
|
|
description: "Con inspiración en la cultura urbana colombiana, nuestras piezas son únicas y expresan tu individualidad.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-serious-young-good-looking-hispanic-fashion-designer-black-suit-cutting-out-parts-jacket-winter-collection-with-concentrated-face-expression_176420-11840.jpg",
|
|
buttonIcon: "Sparkles",
|
|
},
|
|
{
|
|
title: "CONFECCIÓN PREMIUM",
|
|
description: "Utilizamos los mejores materiales para asegurar confort y resistencia. Ropa hecha para el día a día en la ciudad.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-flannel-shirt-detail_23-2149575391.jpg",
|
|
buttonIcon: "ShieldCheck",
|
|
},
|
|
{
|
|
title: "PRODUCCIÓN LOCAL",
|
|
description: "Apoyamos el talento y la economía colombiana, creando empleo y fomentando la industria textil nacional.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-home-with-dreams-vision-board_52683-104980.jpg",
|
|
buttonIcon: "MapPin",
|
|
},
|
|
]}
|
|
title="CALIDAD SIN COMPROMISO, ESTILO SIN LÍMITES."
|
|
description="Cada prenda de Ukla Wear es diseñada y fabricada en Colombia, garantizando durabilidad y un diseño que marca tendencia. Siente la diferencia."
|
|
tag="NUESTRA PROMESA"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "prod-hoodie-001",
|
|
name: "HOODIE NEGRO 'CITY VIBES'",
|
|
price: "COP 150.000",
|
|
variant: "S, M, L, XL",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/warming-up-beach_23-2148023812.jpg",
|
|
},
|
|
{
|
|
id: "prod-tee-002",
|
|
name: "CAMISETA 'UKLA LOGO' BLANCA",
|
|
price: "COP 80.000",
|
|
variant: "S, M, L, XL",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/view-depressed-man-laying-floor_23-2149699133.jpg",
|
|
},
|
|
{
|
|
id: "prod-cargo-003",
|
|
name: "PANTALÓN CARGO 'URBAN EXPLORER'",
|
|
price: "COP 180.000",
|
|
variant: "28, 30, 32, 34",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-jeans-holding-wrench_181624-30038.jpg",
|
|
},
|
|
{
|
|
id: "prod-cap-004",
|
|
name: "GORRA 'STREET ESSENTIAL' ROJA",
|
|
price: "COP 60.000",
|
|
variant: "Talla Única",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-beautiful-young-happy-woman-with-smile-looking-side-outdoors-brunette-woman-red-cap-red-blouse-sun-glasses-woman-spring-fashion-concept_291650-2568.jpg",
|
|
},
|
|
]}
|
|
title="NUESTRA COLECCIÓN"
|
|
description="Explora nuestros diseños exclusivos. Encuentra esa pieza que te hará destacar."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "test-1",
|
|
name: "Sofía G.",
|
|
handle: "@sofiag_style",
|
|
testimonial: "¡Increíble calidad! La camiseta 'Ukla Logo' es súper cómoda y el diseño se siente muy original. Definitivamente voy a comprar más.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-hispanic-woman-smiling-confident-looking-side-street_839833-20277.jpg",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "test-2",
|
|
name: "Mateo R.",
|
|
handle: "@mateor_urban",
|
|
testimonial: "Mi hoodie es la mejor compra. Perfecto para el frío bogotano y el estampado es un hit. Me encanta el vibe de la marca.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/african-men-friends-walking-outdoors_171337-7186.jpg",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "test-3",
|
|
name: "Valeria C.",
|
|
handle: "@valec_fashion",
|
|
testimonial: "Los pantalones cargo son todo lo que buscaba. Comodidad y estilo se fusionan. ¡Ukla Wear nunca decepciona!",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/outdoors-skater-girl-her-skateboard_23-2148787261.jpg",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "test-4",
|
|
name: "Juan P.",
|
|
handle: "@juanp_street",
|
|
testimonial: "Recibí mi pedido rapidísimo y la atención al cliente fue excelente. La gorra roja es el toque final para mis outfits.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-african-man-standing-near-bicycle_171337-12842.jpg",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "test-5",
|
|
name: "Camila D.",
|
|
handle: "@cami_urban",
|
|
testimonial: "Cada colección de Ukla Wear me sorprende. La calidad es constante y los diseños son frescos. ¡Orgullosa de vestir marcas colombianas!",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fashionable-blonde-woman-white-swimwear-exotic-place_197531-21167.jpg",
|
|
icon: Star,
|
|
},
|
|
]}
|
|
title="LA GENTE UKLA DICE"
|
|
description="Escucha lo que nuestros clientes opinan sobre su estilo y experiencia."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"URBAN FASHION WEEK",
|
|
"STREET STYLE MAGAZINE",
|
|
"COLOMBIAN DESIGN HUB",
|
|
"MODA LATINA BLOG",
|
|
"VOGUE COLOMBIA DIGITAL",
|
|
"TRENDYWEAR MAG",
|
|
"HIPSTER STREETS",
|
|
]}
|
|
title="APARECEMOS EN"
|
|
description="Reconocidos por la comunidad y medios especializados en moda urbana."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "sparkles-gradient",
|
|
}}
|
|
tag="ASISTENTE UKLA"
|
|
title="¿NECESITAS AYUDA CON TU TALLA O PEDIDO?"
|
|
description="Nuestro asistente de IA está disponible 24/7 para asesorarte, resolver tus dudas y ayudarte a finalizar tu compra de manera personalizada."
|
|
buttons={[
|
|
{
|
|
text: "HABLAR AHORA",
|
|
href: "https://wa.me/XXXXXXXXXXX",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="UKLA WEAR"
|
|
columns={[
|
|
{
|
|
title: "Categorías",
|
|
items: [
|
|
{
|
|
label: "Hoodies",
|
|
href: "#products",
|
|
},
|
|
{
|
|
label: "Camisetas",
|
|
href: "#products",
|
|
},
|
|
{
|
|
label: "Pantalones",
|
|
href: "#products",
|
|
},
|
|
{
|
|
label: "Accesorios",
|
|
href: "#products",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Ukla",
|
|
items: [
|
|
{
|
|
label: "Sobre Nosotros",
|
|
href: "#features",
|
|
},
|
|
{
|
|
label: "Testimonios",
|
|
href: "#testimonials",
|
|
},
|
|
{
|
|
label: "Contacto",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{
|
|
label: "Política de Privacidad",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Términos de Servicio",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 UKLA WEAR. Todos los derechos reservados."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|