205 lines
9.9 KiB
TypeScript
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>
|
|
);
|
|
}
|