194 lines
11 KiB
TypeScript
194 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import { CreditCard, ShieldCheck, Truck } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Shop", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
brandName="OCCULTA"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
background={{ variant: "gradient-bars" }}
|
|
title="OCCULTA"
|
|
description="Ropa Hype,Stock o por Encargo "
|
|
buttons={[{ text: "Shop Now", href: "#products" }, { text: "Explorar Colección", href: "#brands" }]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/full-shot-woman-posing-with-sunglasses_23-2149267440.jpg?_wi=1"
|
|
mediaAnimation="blur-reveal"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/full-shot-punk-woman-posing_23-2149267435.jpg", alt: "Punk woman" },
|
|
{ src: "http://img.b2bpic.net/free-photo/pisces-portrait-beautiful-woman_23-2149275134.jpg", alt: "Beautiful woman" },
|
|
{ src: "http://img.b2bpic.net/free-photo/young-woman-with-longboard_158595-2444.jpg", alt: "Woman with longboard" },
|
|
{ src: "http://img.b2bpic.net/free-photo/pisces-portrait-beautiful-woman_23-2149275132.jpg", alt: "Portrait" },
|
|
{ src: "http://img.b2bpic.net/free-photo/you-can-see-photographer-reflection-glasses-young-beautiful-girl-warm-clothes-have-walk-city-her-weekends-time_146671-16854.jpg", alt: "Woman in city" }
|
|
]}
|
|
marqueeItems={[
|
|
{ type: "text", text: "LIMITED EDITION" },
|
|
{ type: "text", text: "PREMIUM FABRIC" },
|
|
{ type: "text", text: "GLOBAL SHIPPING" },
|
|
{ type: "text", text: "SECURE PAYMENT" },
|
|
{ type: "text", text: "URBAN AESTHETIC" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="brands" data-section="brands">
|
|
<FeatureCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ title: "Corteiz", description: "Urban luxury.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DSlnkocfuGprmmEcz9ZXHJwvfx/uploaded-1778306036449-s41kdwgs.png", imageAlt: "Corteiz" },
|
|
{ title: "Bape", description: "Street icon.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DSlnkocfuGprmmEcz9ZXHJwvfx/uploaded-1778306433579-hw0detfu.png", imageAlt: "Bape" },
|
|
{ title: "Supreme", description: "Hype culture.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DSlnkocfuGprmmEcz9ZXHJwvfx/uploaded-1778306305302-6z5v70s5.png", imageAlt: "Supreme" },
|
|
{ title: "Essentials", description: "Minimal fit.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DSlnkocfuGprmmEcz9ZXHJwvfx/uploaded-1778306661177-ro7mndr9.png", imageAlt: "Essentials" }
|
|
]}
|
|
title="Colecciones"
|
|
description="Marcas exclusivas seleccionadas."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "p1", brand: "Occulta", name: "Heavy Hoodie", price: "$85,000", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/young-man-portrait-with-flowers_23-2148830413.jpg" },
|
|
{ id: "p2", brand: "Occulta", name: "Zip Up Jacket", price: "$120,000", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/view-beige-tone-colored-pants_23-2150773383.jpg" },
|
|
{ id: "p3", brand: "Occulta", name: "Baggy Jeans", price: "$95,000", rating: 5, reviewCount: "20", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-white-hoodie-blue-jeans-posing-gray-background_89887-986.jpg" },
|
|
{ id: "p4", brand: "Occulta", name: "Minimal Cap", price: "$30,000", rating: 4, reviewCount: "5", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-autumn-cozy-accessories_23-2147869633.jpg" },
|
|
{ id: "p5", brand: "Occulta", name: "Urban Tee", price: "$45,000", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/top-view-vintage-suitcase-with-casual-clothes_23-2148610428.jpg" },
|
|
{ id: "p6", brand: "Occulta", name: "Cargo Pants", price: "$110,000", rating: 5, reviewCount: "10", imageSrc: "http://img.b2bpic.net/free-photo/collection-beige-tone-colored-pants_23-2150773386.jpg" }
|
|
]}
|
|
title="Destacados"
|
|
description="Lo último del street."
|
|
/>
|
|
</div>
|
|
|
|
<div id="drop" data-section="drop">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{ id: "d1", title: "Early Access", price: "LIVE", period: "drop", features: ["Limited Stock", "Priority Shipping"], button: { text: "Shop Drop" }, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-posing-studio_23-2149429028.jpg", imageAlt: "Medium shot smiley woman posing in studio" },
|
|
{ id: "d2", title: "Membership", price: "JOIN", period: "vip", features: ["First Access", "Private Sales"], button: { text: "Join Club" }, imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-posing-with-sunglasses_23-2149267440.jpg?_wi=2", imageAlt: "Medium shot smiley woman posing in studio" }
|
|
]}
|
|
title="NEW DROP"
|
|
description="Stock limitado disponible ahora."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
title="Sobre Occulta"
|
|
description="Occulta nace de la cultura streetwear, el diseño minimalista y la exclusividad. Cada drop está pensado para quienes buscan vestir diferente."
|
|
bulletPoints={[
|
|
{ title: "Calidad Premium", description: "Materiales de alta gama." },
|
|
{ title: "Diseño Exclusivo", description: "Drops limitados." },
|
|
{ title: "Voz Underground", description: "Inspiración urbana total." }
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
imageSrc="http://img.b2bpic.net/free-photo/woman-walking-white-blouse-terracotta-pants-minimalist-setting_24972-2967.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "t1", title: "Excelente", quote: "La calidad es una locura.", name: "Santi", role: "Hypebeast", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-portrait-with-stylish-blue-hair-pretty-face_158595-4339.jpg" },
|
|
{ id: "t2", title: "Fits", quote: "Los fits son increíbles.", name: "Lucia", role: "Fashionista", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-woman-street-look-camera-sunglasses_197531-33066.jpg" },
|
|
{ id: "t3", title: "Internacional", quote: "Parece una marca internacional.", name: "Mati", role: "Urban Pro", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-model-woman-dressed-warm-hipster-white-sweater-beanie-she-posing-street_158538-17177.jpg" },
|
|
{ id: "t4", title: "Packaging", quote: "Llegó rápido y el packaging 10/10.", name: "Valen", role: "Cliente", imageSrc: "http://img.b2bpic.net/free-photo/stylish-young-parisienne-with-brunette-wavy-hair-black-sunglasses-white-top-polka-dot-skirt-red-shirt-standing-city-stairs-looking-straight-early-warm-autumn-background_197531-28081.jpg" },
|
|
{ id: "t5", title: "Top", quote: "Marca increíble.", name: "Joaco", role: "Urban", imageSrc: "http://img.b2bpic.net/free-photo/girl-with-dyed-green-hair-poses-chair-smiles-gladfully-uses-smartphone-headphones-listen-favorite-music-dressed-fashionable-clothes-red_273609-54728.jpg" }
|
|
]}
|
|
title="Comunidad"
|
|
description="Lo que dicen de nosotros."
|
|
/>
|
|
</div>
|
|
|
|
<div id="shipping" data-section="shipping">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ id: "m1", value: "24h", title: "Envíos", description: "A toda Argentina.", icon: Truck },
|
|
{ id: "m2", value: "MP", title: "Pagos", description: "Mercado Pago seguro.", icon: CreditCard },
|
|
{ id: "m3", value: "Limited", title: "Stock", description: "Colecciones exclusivas.", icon: ShieldCheck }
|
|
]}
|
|
title="Envíos y Pagos"
|
|
description="Comprá con seguridad."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Contacto"
|
|
description="Estamos en WhatsApp e Instagram."
|
|
inputs={[
|
|
{ name: "nombre", type: "text", placeholder: "Nombre", required: true },
|
|
{ name: "email", type: "email", placeholder: "Email", required: true }
|
|
]}
|
|
buttonText="Enviar mensaje"
|
|
imageSrc="http://img.b2bpic.net/free-photo/golden-monstera-leaves-background-design-resource_53876-143098.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="OCCULTA"
|
|
columns={[
|
|
{ title: "Shop", items: [{ label: "Remeras", href: "#" }, { label: "Jeans", href: "#" }] },
|
|
{ title: "Legal", items: [{ label: "Privacidad", href: "#" }] }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|