Merge version_1 into main #2
358
src/app/page.tsx
358
src/app/page.tsx
@@ -10,7 +10,7 @@ import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarou
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Printer, ShieldCheck, Truck } from "lucide-react";
|
||||
import { Printer, ShieldCheck, Truck, ArrowRight } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -27,265 +27,117 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Shop",
|
||||
id: "shop",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="PrintYourDream"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="PrintYourDream"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Print Your Dream. Wear Your Story."
|
||||
description="High-quality, custom prints on premium apparel and goods, delivered to your door."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#shop",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-recoding-video_23-2148349471.jpg?_wi=1",
|
||||
imageAlt: "Hero visual",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-recoding-video_23-2148349471.jpg?_wi=2",
|
||||
imageAlt: "Hero visual 2",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-recoding-video_23-2148349471.jpg?_wi=3",
|
||||
imageAlt: "Hero visual 3",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-recoding-video_23-2148349471.jpg?_wi=4",
|
||||
imageAlt: "Hero visual 4",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-recoding-video_23-2148349471.jpg?_wi=5",
|
||||
imageAlt: "Hero visual 5",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-recoding-video_23-2148349471.jpg?_wi=6",
|
||||
imageAlt: "Hero visual 6",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Print Your Dream. Wear Your Story."
|
||||
description="High-quality, custom prints on premium apparel and goods, delivered to your door."
|
||||
buttons={[{ text: "Shop Now", href: "#shop" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-recoding-video_23-2148349471.jpg", imageAlt: "Hero visual" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-recoding-video_23-2148349471.jpg", imageAlt: "Hero visual 2" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-recoding-video_23-2148349471.jpg", imageAlt: "Hero visual 3" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-recoding-video_23-2148349471.jpg", imageAlt: "Hero visual 4" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-recoding-video_23-2148349471.jpg", imageAlt: "Hero visual 5" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-recoding-video_23-2148349471.jpg", imageAlt: "Hero visual 6" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "T-Shirts",
|
||||
description: "Premium cotton t-shirts with vibrant, long-lasting prints.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448762.jpg",
|
||||
buttonIcon: "ArrowRight",
|
||||
},
|
||||
{
|
||||
title: "Mugs",
|
||||
description: "Start your day with art on high-quality ceramic mugs.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/displeased-young-millennial-woman-bites-lips-focused-listens-something-with-attentive-gaze-upwards-poses-against-white-wall_273609-53498.jpg",
|
||||
buttonIcon: "ArrowRight",
|
||||
},
|
||||
{
|
||||
title: "Posters",
|
||||
description: "Museum-grade quality art posters to decorate your space.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-elegant-living-room-with-chimney_23-2148304969.jpg",
|
||||
buttonIcon: "ArrowRight",
|
||||
},
|
||||
{
|
||||
title: "Apparel",
|
||||
description: "Comfortable hoodies and accessories designed for you.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teenager-wearing-white-hoodie-portrait_23-2149359831.jpg?_wi=1",
|
||||
buttonIcon: "ArrowRight",
|
||||
},
|
||||
]}
|
||||
title="Our Categories"
|
||||
description="Explore our curated collections of print-on-demand items designed for every lifestyle."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "T-Shirts", description: "Premium cotton t-shirts with vibrant, long-lasting prints.", imageSrc: "http://img.b2bpic.net/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448762.jpg", buttonIcon: ArrowRight },
|
||||
{ title: "Mugs", description: "Start your day with art on high-quality ceramic mugs.", imageSrc: "http://img.b2bpic.net/free-photo/displeased-young-millennial-woman-bites-lips-focused-listens-something-with-attentive-gaze-upwards-poses-against-white-wall_273609-53498.jpg", buttonIcon: ArrowRight },
|
||||
{ title: "Posters", description: "Museum-grade quality art posters to decorate your space.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-elegant-living-room-with-chimney_23-2148304969.jpg", buttonIcon: ArrowRight },
|
||||
{ title: "Apparel", description: "Comfortable hoodies and accessories designed for you.", imageSrc: "http://img.b2bpic.net/free-photo/teenager-wearing-white-hoodie-portrait_23-2149359831.jpg", buttonIcon: ArrowRight },
|
||||
]}
|
||||
title="Our Categories"
|
||||
description="Explore our curated collections of print-on-demand items designed for every lifestyle."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shop" data-section="shop">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Urban Tee",
|
||||
price: "$29.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-choosing-hat-shop_1303-19835.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Morning Mug",
|
||||
price: "$15.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimal-modern-vases-assortment_23-2149681085.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Abstract Poster",
|
||||
price: "$19.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/home-entryway-with-modern-furnishing-design_23-2150791136.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Cozy Hoodie",
|
||||
price: "$49.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teenager-wearing-white-hoodie-portrait_23-2149359831.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Canvas Art",
|
||||
price: "$59.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-dadaism-concept_23-2151885770.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Minimalist Tote",
|
||||
price: "$24.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-posing-outdoors_23-2148884588.jpg",
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
name: "Phone Case",
|
||||
price: "$22.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-stationary-collection-arrangement_23-2149309650.jpg",
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
name: "Sticker Set",
|
||||
price: "$9.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-vertical-background_52683-129373.jpg",
|
||||
},
|
||||
]}
|
||||
title="Trending Now"
|
||||
description="Our most popular items this month, hand-picked by our community."
|
||||
/>
|
||||
</div>
|
||||
<div id="shop" data-section="shop">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Urban Tee", price: "$29.99", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-choosing-hat-shop_1303-19835.jpg" },
|
||||
{ id: "2", name: "Morning Mug", price: "$15.99", imageSrc: "http://img.b2bpic.net/free-photo/minimal-modern-vases-assortment_23-2149681085.jpg" },
|
||||
{ id: "3", name: "Abstract Poster", price: "$19.99", imageSrc: "http://img.b2bpic.net/free-photo/home-entryway-with-modern-furnishing-design_23-2150791136.jpg" },
|
||||
{ id: "4", name: "Cozy Hoodie", price: "$49.99", imageSrc: "http://img.b2bpic.net/free-photo/teenager-wearing-white-hoodie-portrait_23-2149359831.jpg" },
|
||||
{ id: "5", name: "Canvas Art", price: "$59.99", imageSrc: "http://img.b2bpic.net/free-photo/abstract-dadaism-concept_23-2151885770.jpg" },
|
||||
{ id: "6", name: "Minimalist Tote", price: "$24.99", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-posing-outdoors_23-2148884588.jpg" },
|
||||
{ id: "7", name: "Phone Case", price: "$22.99", imageSrc: "http://img.b2bpic.net/free-photo/modern-stationary-collection-arrangement_23-2149309650.jpg" },
|
||||
{ id: "8", name: "Sticker Set", price: "$9.99", imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-vertical-background_52683-129373.jpg" },
|
||||
]}
|
||||
title="Trending Now"
|
||||
description="Our most popular items this month, hand-picked by our community."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Why Choose Us?"
|
||||
metrics={[
|
||||
{
|
||||
icon: Printer,
|
||||
label: "Print Quality",
|
||||
value: "Premium",
|
||||
},
|
||||
{
|
||||
icon: Truck,
|
||||
label: "Shipping",
|
||||
value: "Fast",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
label: "Guarantee",
|
||||
value: "100%",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Why Choose Us?"
|
||||
metrics={[
|
||||
{ icon: Printer, label: "Print Quality", value: "Premium" },
|
||||
{ icon: Truck, label: "Shipping", value: "Fast" },
|
||||
{ icon: ShieldCheck, label: "Guarantee", value: "100%" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Great quality",
|
||||
quote: "The print quality is outstanding!",
|
||||
name: "Jane D.",
|
||||
role: "Designer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-albino-woman_23-2150520238.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Fast shipping",
|
||||
quote: "Got my order in just three days.",
|
||||
name: "John S.",
|
||||
role: "Customer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Love the design",
|
||||
quote: "The artwork is crisp and vibrant.",
|
||||
name: "Emily R.",
|
||||
role: "Artist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-holding-hat-black-white-wall_176420-8589.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Highly recommended",
|
||||
quote: "Best print store I've ever used.",
|
||||
name: "Mark L.",
|
||||
role: "Fan",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/adult-woman-with-inhale-life-motivation-word_53876-121428.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Perfect fit",
|
||||
quote: "The hoodie is so comfortable.",
|
||||
name: "Sarah P.",
|
||||
role: "Blogger",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-sensitive-man-posing-with-flower_23-2149486765.jpg",
|
||||
},
|
||||
]}
|
||||
title="Customer Stories"
|
||||
description="See why thousands trust PrintYourDream."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Great quality", quote: "The print quality is outstanding!", name: "Jane D.", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-albino-woman_23-2150520238.jpg" },
|
||||
{ id: "2", title: "Fast shipping", quote: "Got my order in just three days.", name: "John S.", role: "Customer", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg" },
|
||||
{ id: "3", title: "Love the design", quote: "The artwork is crisp and vibrant.", name: "Emily R.", role: "Artist", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-holding-hat-black-white-wall_176420-8589.jpg" },
|
||||
{ id: "4", title: "Highly recommended", quote: "Best print store I've ever used.", name: "Mark L.", role: "Fan", imageSrc: "http://img.b2bpic.net/free-photo/adult-woman-with-inhale-life-motivation-word_53876-121428.jpg" },
|
||||
{ id: "5", title: "Perfect fit", quote: "The hoodie is so comfortable.", name: "Sarah P.", role: "Blogger", imageSrc: "http://img.b2bpic.net/free-photo/side-view-sensitive-man-posing-with-flower_23-2149486765.jpg" },
|
||||
]}
|
||||
title="Customer Stories"
|
||||
description="See why thousands trust PrintYourDream."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Stay Updated"
|
||||
title="Join Our Newsletter"
|
||||
description="Get exclusive deals and creative updates delivered to your inbox."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Stay Updated"
|
||||
title="Join Our Newsletter"
|
||||
description="Get exclusive deals and creative updates delivered to your inbox."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="PrintYourDream"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="PrintYourDream"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user