bender/5f4963d7-4452-47b1-bc89-3e27088cbb92
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-04-04 14:33:24 +00:00
parent 9bf64c43c6
commit bd80432ed5
1 changed files with 105 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

358
src/app/page.tsx
View File

@@ -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>
);