170 lines
7.4 KiB
TypeScript
170 lines
7.4 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||
import { Eye, Star, Zap } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="shift-hover"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="rounded"
|
||
contentWidth="small"
|
||
sizing="mediumLarge"
|
||
background="noiseDiagonalGradient"
|
||
cardStyle="gradient-mesh"
|
||
primaryButtonStyle="primary-glow"
|
||
secondaryButtonStyle="radial-glow"
|
||
headingFontWeight="extrabold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleFullscreen
|
||
navItems={[
|
||
{
|
||
name: "Shop", id: "shop"},
|
||
{
|
||
name: "Story", id: "story"},
|
||
{
|
||
name: "Drop", id: "drop"},
|
||
]}
|
||
brandName="COVET"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardRotatedCarousel
|
||
background={{
|
||
variant: "gradient-bars"}}
|
||
title="COVET"
|
||
description="DESIRE WHAT OTHERS CAN’T HAVE"
|
||
buttons={[
|
||
{
|
||
text: "SHOP NOW", href: "#shop"},
|
||
]}
|
||
carouselItems={[
|
||
{
|
||
id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSZmdJiX7B9HrTMFWNboAOL0J3/luxury-charcoal-sweatpants-floating-in-a-1774999882360-0dbdc5c7.png?_wi=1", imageAlt: "Luxury charcoal sweatpants"},
|
||
{
|
||
id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSZmdJiX7B9HrTMFWNboAOL0J3/luxury-charcoal-sweatpants-floating-in-a-1774999882360-0dbdc5c7.png?_wi=2", imageAlt: "Luxury charcoal sweatpants"},
|
||
{
|
||
id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSZmdJiX7B9HrTMFWNboAOL0J3/luxury-charcoal-sweatpants-floating-in-a-1774999882360-0dbdc5c7.png?_wi=3", imageAlt: "Luxury charcoal sweatpants"},
|
||
{
|
||
id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSZmdJiX7B9HrTMFWNboAOL0J3/luxury-charcoal-sweatpants-floating-in-a-1774999882360-0dbdc5c7.png?_wi=4", imageAlt: "Luxury charcoal sweatpants"},
|
||
{
|
||
id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSZmdJiX7B9HrTMFWNboAOL0J3/luxury-charcoal-sweatpants-floating-in-a-1774999882360-0dbdc5c7.png?_wi=5", imageAlt: "Luxury charcoal sweatpants"},
|
||
{
|
||
id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSZmdJiX7B9HrTMFWNboAOL0J3/luxury-charcoal-sweatpants-floating-in-a-1774999882360-0dbdc5c7.png?_wi=6", imageAlt: "Luxury charcoal sweatpants"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="shop" data-section="shop">
|
||
<ProductCardThree
|
||
textboxLayout="split"
|
||
gridVariant="one-large-left-three-stacked-right"
|
||
animationType="blur-reveal"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "p1", name: "Serpent Jogger", price: "$295", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSZmdJiX7B9HrTMFWNboAOL0J3/detail-shot-of-luxury-sweatpants-with-go-1774999883115-b2645e64.png?_wi=1"},
|
||
{
|
||
id: "p2", name: "Limited Drop Base", price: "$185", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSZmdJiX7B9HrTMFWNboAOL0J3/detail-shot-of-luxury-sweatpants-with-go-1774999883115-b2645e64.png?_wi=2"},
|
||
{
|
||
id: "p3", name: "Gold Thread Hood", price: "$250", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSZmdJiX7B9HrTMFWNboAOL0J3/detail-shot-of-luxury-sweatpants-with-go-1774999883115-b2645e64.png?_wi=3"},
|
||
]}
|
||
title="SERPENT SWEATPANTS"
|
||
description="Engineered presence. Designed to be noticed."
|
||
/>
|
||
</div>
|
||
|
||
<div id="story" data-section="story">
|
||
<AboutMetric
|
||
useInvertedBackground={true}
|
||
title="COVET ISN'T FOR EVERYONE."
|
||
metrics={[
|
||
{
|
||
icon: Star,
|
||
label: "Exclusivity", value: "100%"},
|
||
{
|
||
icon: Eye,
|
||
label: "Attention", value: "Defined"},
|
||
{
|
||
icon: Zap,
|
||
label: "Design", value: "Raw"},
|
||
]}
|
||
metricsAnimation="blur-reveal"
|
||
/>
|
||
</div>
|
||
|
||
<div id="lifestyle" data-section="lifestyle">
|
||
<TestimonialCardTwelve
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "t1", name: "Vogue Street", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSZmdJiX7B9HrTMFWNboAOL0J3/moody-cinematic-shot-of-a-person-wearing-1774999884219-71292fb4.png?_wi=1"},
|
||
{
|
||
id: "t2", name: "Hypebeast", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSZmdJiX7B9HrTMFWNboAOL0J3/moody-cinematic-shot-of-a-person-wearing-1774999884219-71292fb4.png?_wi=2"},
|
||
{
|
||
id: "t3", name: "Client X", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSZmdJiX7B9HrTMFWNboAOL0J3/moody-cinematic-shot-of-a-person-wearing-1774999884219-71292fb4.png?_wi=3"},
|
||
{
|
||
id: "t4", name: "Client Y", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSZmdJiX7B9HrTMFWNboAOL0J3/moody-cinematic-shot-of-a-person-wearing-1774999884219-71292fb4.png?_wi=4"},
|
||
{
|
||
id: "t5", name: "Archive Collective", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSZmdJiX7B9HrTMFWNboAOL0J3/moody-cinematic-shot-of-a-person-wearing-1774999884219-71292fb4.png?_wi=5"},
|
||
]}
|
||
cardTitle="SEEN. NOT ANNOUNCED."
|
||
cardAnimation="blur-reveal"
|
||
cardTag="CULTURE"
|
||
/>
|
||
</div>
|
||
|
||
<div id="drop" data-section="drop">
|
||
<ContactCTA
|
||
useInvertedBackground={true}
|
||
background={{
|
||
variant: "radial-gradient"}}
|
||
tag="LIMITED RELEASE"
|
||
title="ENTER COVET"
|
||
description="Secure your place in the drop. Exclusive access for the chosen few."
|
||
buttons={[
|
||
{
|
||
text: "JOIN WAITLIST", href: "#"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterLogoEmphasis
|
||
columns={[
|
||
{
|
||
items: [
|
||
{
|
||
label: "Drop Calendar", href: "#"},
|
||
{
|
||
label: "Authentication", href: "#"},
|
||
],
|
||
},
|
||
{
|
||
items: [
|
||
{
|
||
label: "Privacy", href: "#"},
|
||
{
|
||
label: "Terms", href: "#"},
|
||
],
|
||
},
|
||
]}
|
||
logoText="COVET"
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
} |