323 lines
9.9 KiB
TypeScript
323 lines
9.9 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import { Globe, ShoppingBag } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="aurora"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "/",
|
|
},
|
|
{
|
|
name: "Shop",
|
|
id: "/shop",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "/about",
|
|
},
|
|
]}
|
|
brandName="VICCIUM"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "radial-gradient",
|
|
}}
|
|
title="VICCIUM"
|
|
description="Defined by silence. Engineered for the streets. Premium essentials for the modern avant-garde."
|
|
testimonials={[
|
|
{
|
|
name: "Aria V.",
|
|
handle: "@aria_v",
|
|
testimonial: "The fabric quality is unmatched. Truly the new standard for street wear.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-man-smiling-camera_197531-33440.jpg",
|
|
imageAlt: "Happy man smiling at camera",
|
|
},
|
|
{
|
|
name: "Jax K.",
|
|
handle: "@jax_k",
|
|
testimonial: "Minimalist, perfect fit, and looks expensive without the logos.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-girl-white-oversized-tshirt-blue-jeans-posing-gray-background_89887-920.jpg",
|
|
imageAlt: "Beautiful blonde girl in a white oversized tshirt and blue jeans posing on a gray background",
|
|
},
|
|
{
|
|
name: "Mina S.",
|
|
handle: "@mina_s",
|
|
testimonial: "Everything I order from Viccium feels bespoke. Highly recommend.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-white-hoodie-blue-jeans-posing-white-background_89887-1133.jpg",
|
|
imageAlt: "Beautiful blonde woman in a white hoodie and blue jeans posing on a white background",
|
|
},
|
|
{
|
|
name: "Leo C.",
|
|
handle: "@leo_c",
|
|
testimonial: "Sleek, sharp, and effortless. My daily uniform.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-woman-bucket-hat-posing-outdoors-old-railway-station_181624-55447.jpg",
|
|
imageAlt: "A stylish hipster woman in a bucket hat posing outdoors in an old railway station",
|
|
},
|
|
{
|
|
name: "Zara P.",
|
|
handle: "@zara_p",
|
|
testimonial: "Finally, clothes that respect the aesthetic of the city.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478933.jpg",
|
|
imageAlt: "Beautiful blonde woman in blue light",
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Shop Now",
|
|
href: "/shop",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/man-with-tattoos-drinking-coffee-cafe_23-2149052885.jpg"
|
|
imageAlt="minimalist streetwear model studio"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/full-shot-man-posing_23-2149028760.jpg",
|
|
alt: "Full shot man posing",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-teenage-boy-sitting_23-2148478775.jpg",
|
|
alt: "Portrait teenage boy sitting",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/punk-female-with-sunglasses-urban-location_23-2149110968.jpg",
|
|
alt: "Punk female with sunglasses in urban location",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/fashionable-young-woman-shopping-street_23-2148148116.jpg",
|
|
alt: "Fashionable young woman shopping on street",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/full-shot-woman-sitting-outdoors_23-2148950600.jpg",
|
|
alt: "Full shot woman sitting outdoors",
|
|
},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "REFINED",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "MODERN",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "MINIMAL",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "ESSENTIAL",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "SILENT",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split-description"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Signature Hoodie",
|
|
price: "$240",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/spring-wardrobe-switch-high-angle_23-2150264194.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Cargo Tech Pants",
|
|
price: "$310",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pullover-camera-laid-near-coffee-pinecones_23-2147912476.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Essential Box Tee",
|
|
price: "$120",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/asian-man-holding-his-skateboard-while-walking-stairs_23-2149003798.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Urban Bomber",
|
|
price: "$480",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-african-american-man-posing-outdoors-paris-happy-smile-fashion-style_1321-3388.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "Signature Beanie",
|
|
price: "$60",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-skateboard_23-2148937848.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "Classic Denim",
|
|
price: "$290",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432336.jpg",
|
|
},
|
|
]}
|
|
title="Core Collection"
|
|
description="A refined selection of our most essential pieces."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about-section" data-section="about-section">
|
|
<TextAbout
|
|
useInvertedBackground={true}
|
|
title="Identity through reduction."
|
|
buttons={[
|
|
{
|
|
text: "Discover our craft",
|
|
href: "/about",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metric" data-section="metric">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
title="Impact by Numbers"
|
|
description="The scale of our minimalist footprint."
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "20+",
|
|
title: "Countries",
|
|
description: "Global reach for local aesthetics.",
|
|
icon: Globe,
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "1.2k",
|
|
title: "Pieces Sold",
|
|
description: "Each item a testament to quality.",
|
|
icon: ShoppingBag,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
title="Voices of the Community"
|
|
description="Hear what our patrons have to say about the Viccium experience."
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Sasha M.",
|
|
role: "Designer",
|
|
testimonial: "The attention to detail in the seams alone makes these worth every cent.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-with-his-bicycle-wall_23-2148828184.jpg",
|
|
imageAlt: "Man with his bicycle next to a wall",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Ben T.",
|
|
role: "Creative Director",
|
|
testimonial: "Subtle, understated, and incredibly durable. My go-to brand.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/afro-american-man-his-bike_23-2148828208.jpg",
|
|
imageAlt: "Afro american man and his bike",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "Shop",
|
|
href: "/shop",
|
|
},
|
|
{
|
|
label: "About",
|
|
href: "/about",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "/contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Privacy",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Terms",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Instagram",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Twitter",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
logoText="VICCIUM"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|