305 lines
10 KiB
TypeScript
305 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="fluid"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Collections",
|
|
id: "collections",
|
|
},
|
|
{
|
|
name: "Story",
|
|
id: "story",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="LOON"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
background={{
|
|
variant: "rotated-rays-animated",
|
|
}}
|
|
title="Timeless Tailoring"
|
|
description="Crafted for the modern gentleman, redefined by tradition."
|
|
buttons={[
|
|
{
|
|
text: "Shop Now",
|
|
href: "#collections",
|
|
},
|
|
]}
|
|
carouselItems={[
|
|
{
|
|
id: "h1",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-model-posing-street_1303-14427.jpg?_wi=1",
|
|
imageAlt: "Model in suit",
|
|
},
|
|
{
|
|
id: "h2",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-model-sexy-modern-man-dressed-elegant-beige-suit-fashion-male-posing-studio-near-blue-wall_158538-24020.jpg?_wi=1",
|
|
imageAlt: "Fashion shot",
|
|
},
|
|
{
|
|
id: "h3",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-texture-linen-fabric_23-2151914972.jpg?_wi=1",
|
|
imageAlt: "Detail shot",
|
|
},
|
|
{
|
|
id: "h4",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-businessman-model-dressed-elegant-brown-suit-sunglasses_158538-11345.jpg",
|
|
imageAlt: "Accessories",
|
|
},
|
|
{
|
|
id: "h5",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-fashion-male-model-man-dressed-elegant-suit-black-studio-lights-background_158538-9529.jpg",
|
|
imageAlt: "Close up",
|
|
},
|
|
{
|
|
id: "h6",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-stylish-businessman-dressed-elegant-suit-holds-smartphone-looking-away-while-standing-outdoors-against-skyscraper-background_613910-4092.jpg",
|
|
imageAlt: "Full look",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="collections" data-section="collections">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="asymmetric-60-wide-40-narrow"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Classic Wool Coat",
|
|
price: "$890",
|
|
variant: "Deep Forest",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-jacket-outside_1303-5834.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Oxford Cotton Shirt",
|
|
price: "$180",
|
|
variant: "Ivory",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-modelsexy-modern-man-dressed-white-shirt-trousers-fashion-male-posing-street-background-europe-city-sunset-sunglasses_158538-22378.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Tailored Chinos",
|
|
price: "$220",
|
|
variant: "Navy",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-leaning-chair-room_23-2148130383.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Leather Chelsea Boots",
|
|
price: "$350",
|
|
variant: "Mahogany",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/trendy-woman-light-pants-black-jacket-boots-sits-stairs-outside-short-haired-lady-glasses-writing-outdoors_197531-19324.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "Cashmere Sweater",
|
|
price: "$450",
|
|
variant: "Charcoal",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-gloomy-sad-caucasian-man-christmas-sweater-frowning-pouting-indecisive-having_1258-108509.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "Silk Pocket Square",
|
|
price: "$65",
|
|
variant: "Gold/Leaf",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=aoapei",
|
|
},
|
|
]}
|
|
title="Curated Collections"
|
|
description="Essential pieces for your wardrobe."
|
|
/>
|
|
</div>
|
|
|
|
<div id="story" data-section="story">
|
|
<TextAbout
|
|
useInvertedBackground={false}
|
|
title="The <em>LOON</em> Legacy"
|
|
buttons={[
|
|
{
|
|
text: "Our Story",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "f1",
|
|
title: "Sustainable Sourcing",
|
|
description: "Ethically curated natural fabrics.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-fabric-texture_23-2148952735.jpg",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-fabric-material_23-2148817519.jpg",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-model-posing-street_1303-14427.jpg?_wi=2",
|
|
imageAlt: "elegant men in suit fashion photography",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Artisanal Craft",
|
|
description: "Hand-stitched precision details.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fashion-designer-s-hand-taking-measurement-his-customer-s-chest-with-yellow-measuring-tape_23-2148180370.jpg",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-cutting-textile_23-2148966939.jpg",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-model-sexy-modern-man-dressed-elegant-beige-suit-fashion-male-posing-studio-near-blue-wall_158538-24020.jpg?_wi=2",
|
|
imageAlt: "sophisticated men model studio shot",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "Global Shipping",
|
|
description: "Delivered to your door safely.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-man-working-with-papers_1150-7679.jpg",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-packing-box-indoors_23-2148539790.jpg",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-texture-linen-fabric_23-2151914972.jpg?_wi=2",
|
|
imageAlt: "detailed tailoring shots luxury fabric",
|
|
},
|
|
]}
|
|
showStepNumbers={false}
|
|
title="Why Choose LOON"
|
|
description="Refined standards for quality."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="asymmetric-60-wide-40-narrow"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "James R.",
|
|
role: "Creative Director",
|
|
company: "Studio",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3830.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Marcus L.",
|
|
role: "Architect",
|
|
company: "DesignCo",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-flannel-suit-glasses-listening-music-room-with-loft-interior_613910-4423.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Thomas V.",
|
|
role: "Entrepreneur",
|
|
company: "Venture",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/successful-stylish-man-dressed-modern-elegant-clothes-sitting-table-outdoor-cafe-against-background-city-wharf_613910-3954.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "David S.",
|
|
role: "Editor",
|
|
company: "Journal",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-working-as-interior-designer_23-2150346466.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Paul C.",
|
|
role: "Designer",
|
|
company: "StyleHouse",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-african-american-man-posing-outdoors-paris-happy-smile-fashion-style_1321-3388.jpg",
|
|
},
|
|
]}
|
|
title="Client Experiences"
|
|
description="Hear from those who choose LOON."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
tag="Newsletter"
|
|
title="Join the Inner Circle"
|
|
description="Get early access to collections and exclusive updates."
|
|
imageSrc="http://img.b2bpic.net/free-photo/futuristic-store-with-abstract-concept-architecture_23-2150861918.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="LOON"
|
|
leftLink={{
|
|
text: "Privacy Policy",
|
|
href: "#",
|
|
}}
|
|
rightLink={{
|
|
text: "Terms of Service",
|
|
href: "#",
|
|
}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|