Files
21fc8400-92bf-4540-998f-bcc…/src/app/page.tsx
2026-06-10 22:27:50 +00:00

205 lines
9.9 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, Sparkles, ShieldCheck, MapPin } 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>
);
}