Update src/app/page.tsx
This commit is contained in:
237
src/app/page.tsx
237
src/app/page.tsx
@@ -2,14 +2,15 @@
|
||||
|
||||
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';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import { LayoutGrid, ShoppingBag, BookOpen, Mail, Star } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -26,132 +27,114 @@ export default function LandingPage() {
|
||||
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="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
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", 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", imageAlt: "Fashion shot" },
|
||||
{ id: "h3", imageSrc: "http://img.b2bpic.net/free-photo/close-up-texture-linen-fabric_23-2151914972.jpg", 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="hero" data-section="hero">
|
||||
<HeroBillboardDashboard
|
||||
title="Timeless Tailoring"
|
||||
description="Crafted for the modern gentleman, redefined by tradition."
|
||||
buttons={[{ text: "Shop Now", href: "#collections" }]}
|
||||
dashboard={{
|
||||
title: "Collection Stats", stats: [
|
||||
{ title: "Designs", values: [120, 0, 0], description: "Unique pieces" },
|
||||
{ title: "Materials", values: [45, 0, 0], description: "Premium fabrics" },
|
||||
{ title: "Experience", values: [15, 0, 0], description: "Years of craft" }
|
||||
],
|
||||
logoIcon: LayoutGrid,
|
||||
sidebarItems: [{ icon: LayoutGrid, active: true }],
|
||||
buttons: [{ text: "View Gallery" }],
|
||||
listItems: [{ icon: ShoppingBag, title: "New Arrivals", status: "Live" }],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-model-posing-street_1303-14427.jpg"
|
||||
}}
|
||||
/>
|
||||
</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="collections" data-section="collections">
|
||||
<ProductCardThree
|
||||
title="Curated Collections"
|
||||
description="Essential pieces for your wardrobe."
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Classic Wool Coat", price: "$890", imageSrc: "http://img.b2bpic.net/free-photo/man-jacket-outside_1303-5834.jpg" },
|
||||
{ id: "p2", name: "Oxford Cotton Shirt", price: "$180", 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" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="story" data-section="story">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="The <em>LOON</em> Legacy"
|
||||
buttons={[
|
||||
{ text: "Our Story", href: "#" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="story" data-section="story">
|
||||
<SplitAbout
|
||||
title="The LOON Legacy"
|
||||
description="Rooted in craft, designed for longevity."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
bulletPoints={[
|
||||
{ title: "Heritage", description: "Decades of expertise" },
|
||||
{ title: "Craft", description: "Detail-oriented tailoring" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-handsome-young-man-leaning-chair-room_23-2148130383.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
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" }
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
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" }
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
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" }
|
||||
},
|
||||
]}
|
||||
showStepNumbers={false}
|
||||
title="Why Choose LOON"
|
||||
description="Refined standards for quality."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
title="Why Choose LOON"
|
||||
description="Refined standards for excellence."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Sustainable Sourcing", description: "Ethical fabric selection", buttonIcon: BookOpen },
|
||||
{ title: "Global Shipping", description: "Secure door-to-door", buttonIcon: ShoppingBag }
|
||||
]}
|
||||
/>
|
||||
</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="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
title="Client Experiences"
|
||||
description="What our community says."
|
||||
showRating={true}
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "James R.", handle: "@jamesr", testimonial: "Exquisite craftsmanship.", rating: 5, icon: Star },
|
||||
{ id: "t2", name: "Marcus L.", handle: "@marcusl", testimonial: "Simply timeless design.", rating: 5, icon: Star }
|
||||
]}
|
||||
/>
|
||||
</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="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
title="Join the Inner Circle"
|
||||
description="Get exclusive early access to new collections."
|
||||
buttonText="Subscribe"
|
||||
tag="Newsletter"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="LOON"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Privacy", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user