Merge version_1 into main #1

Merged
bender merged 1 commits from version_1 into main 2026-04-19 15:24:40 +00:00

View File

@@ -29,404 +29,155 @@ export default function LandingPage() {
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "About",
id: "about",
},
{
name: "Services",
id: "features",
},
{
name: "Products",
id: "products",
},
{
name: "Pricing",
id: "pricing",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="HUB Printing"
button={{
text: "Get Quote",
href: "#contact",
}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "About", id: "about" },
{ name: "Features", id: "features" },
{ name: "Products", id: "products" },
{ name: "Pricing", id: "pricing" },
{ name: "Contact", id: "contact" },
]}
brandName="HUB Printing"
button={{ text: "Get Quote", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{
variant: "radial-gradient",
}}
title="Printing Perfection, Delivered."
description="HUB Printing combines cutting-edge technology with artisanal quality to bring your projects to life. From business essentials to large-scale marketing, we handle it all with precision."
tag="Trusted Printing Partner"
buttons={[
{
text: "Start Project",
href: "#contact",
},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/designers-using-3d-printer_23-2151037155.jpg",
imageAlt: "professional printing services workshop",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/beige-texture_1253-168.jpg",
imageAlt: "high quality print paper texture",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/group-graphic-designers-interacting-color-chart_1170-768.jpg",
imageAlt: "Group of graphic designers interacting over color chart",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-designer-using-3d-printer_23-2151019902.jpg",
imageAlt: "Lifestyle of designer using a 3d printer",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/women-work-office-using-printer_23-2149456972.jpg",
imageAlt: "Women at work in the office using printer",
},
]}
mediaAnimation="blur-reveal"
rating={5}
ratingText="Rated 5/5 by 500+ happy clients"
tagIcon={Sparkles}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{ variant: "radial-gradient" }}
title="Printing Perfection, Delivered."
description="HUB Printing combines cutting-edge technology with artisanal quality to bring your projects to life. From business essentials to large-scale marketing, we handle it all with precision."
tag="Trusted Printing Partner"
buttons={[{ text: "Start Project", href: "#contact" }]}
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/designers-using-3d-printer_23-2151037155.jpg", imageAlt: "professional printing services workshop" },
{ imageSrc: "http://img.b2bpic.net/free-photo/beige-texture_1253-168.jpg", imageAlt: "high quality print paper texture" }
]}
mediaAnimation="blur-reveal"
rating={5}
ratingText="Rated 5/5 by 500+ happy clients"
tagIcon={Sparkles}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={true}
title="Decades of Print Mastery"
description="At HUB Printing, we believe every piece of paper tells a story. Our expert team ensures that your brand identity, marketing collateral, and personalized items are produced with unmatched attention to detail."
metrics={[
{
value: "15+",
title: "Years Experience",
},
{
value: "50k+",
title: "Projects Completed",
},
{
value: "100%",
title: "Quality Guaranteed",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/man-showing-results-laptop-female-colleagues_23-2148352797.jpg"
imageAlt="printing team meeting office"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={true}
title="Decades of Print Mastery"
description="At HUB Printing, we believe every piece of paper tells a story. Our expert team ensures that your brand identity, marketing collateral, and personalized items are produced with unmatched attention to detail."
metrics={[
{ value: "15+", title: "Years Experience" },
{ value: "50k+", title: "Projects Completed" },
{ value: "100%", title: "Quality Guaranteed" }
]}
imageSrc="http://img.b2bpic.net/free-photo/man-showing-results-laptop-female-colleagues_23-2148352797.jpg"
imageAlt="printing team meeting office"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyNine
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
features={[
{
title: "Fast Turnaround",
description: "Meet your deadlines with our lightning-fast production cycle.",
imageSrc: "http://img.b2bpic.net/free-photo/dynamic-light-painting-background_23-2149679076.jpg",
titleImageSrc: "http://img.b2bpic.net/free-photo/still-life-cmyk-toners-assortment_23-2149120696.jpg",
buttonText: "Learn More",
},
{
title: "Precision Cutting",
description: "Clean, sharp edges every single time with advanced finishing tools.",
imageSrc: "http://img.b2bpic.net/free-photo/man-working-printing-house-with-paper-paints_1303-26573.jpg",
titleImageSrc: "http://img.b2bpic.net/free-photo/man-working-printing-house-with-paper-paints_1303-26591.jpg",
buttonText: "Learn More",
},
{
title: "Premium Finishes",
description: "Elevate your brand with embossing, spot UV, and luxury textures.",
imageSrc: "http://img.b2bpic.net/free-photo/detail-blurred-fresh-peacock-feather-with-water-droplets_23-2148114630.jpg",
titleImageSrc: "http://img.b2bpic.net/free-photo/grunge-wall-background_1232-2526.jpg",
buttonText: "Learn More",
},
]}
title="Why Choose HUB?"
description="Experience superior service tailored to your needs."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyNine
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
features={[
{ title: "Fast Turnaround", description: "Meet your deadlines with our lightning-fast production cycle.", imageSrc: "http://img.b2bpic.net/free-photo/dynamic-light-painting-background_23-2149679076.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/still-life-cmyk-toners-assortment_23-2149120696.jpg", buttonText: "Learn More" },
{ title: "Precision Cutting", description: "Clean, sharp edges every single time with advanced finishing tools.", imageSrc: "http://img.b2bpic.net/free-photo/man-working-printing-house-with-paper-paints_1303-26573.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/man-working-printing-house-with-paper-paints_1303-26591.jpg", buttonText: "Learn More" },
{ title: "Premium Finishes", description: "Elevate your brand with embossing, spot UV, and luxury textures.", imageSrc: "http://img.b2bpic.net/free-photo/detail-blurred-fresh-peacock-feather-with-water-droplets_23-2148114630.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/grunge-wall-background_1232-2526.jpg", buttonText: "Learn More" }
]}
title="Why Choose HUB?"
description="Experience superior service tailored to your needs."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{
id: "p1",
name: "Business Cards",
price: "From $50",
imageSrc: "http://img.b2bpic.net/free-vector/modern-striped-business-card-design_1048-9284.jpg",
},
{
id: "p2",
name: "Brochures",
price: "From $120",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151273035.jpg",
},
{
id: "p3",
name: "Flyers",
price: "From $40",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-back-school-concept_23-2148586720.jpg",
},
{
id: "p4",
name: "Stationery",
price: "From $85",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-back-school-concept_23-2148586725.jpg",
},
{
id: "p5",
name: "Large Banners",
price: "From $150",
imageSrc: "http://img.b2bpic.net/free-vector/set-horizontal-web-banner-with-three-different-color-corporate-identity-advertising-printing-vector-illustration_587448-541.jpg",
},
{
id: "p6",
name: "Custom Posters",
price: "From $60",
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-paint-mixture-pink-background_23-2148292583.jpg",
},
]}
title="Our Print Catalog"
description="Premium solutions for every professional requirement."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{ id: "p1", name: "Business Cards", price: "From $50", imageSrc: "http://img.b2bpic.net/free-vector/modern-striped-business-card-design_1048-9284.jpg" },
{ id: "p2", name: "Brochures", price: "From $120", imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151273035.jpg" },
{ id: "p3", name: "Flyers", price: "From $40", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-back-school-concept_23-2148586720.jpg" }
]}
title="Our Print Catalog"
description="Premium solutions for every professional requirement."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardTwo
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
plans={[
{
id: "basic",
badge: "Essential",
price: "$199",
subtitle: "For small teams & individuals",
buttons: [
{
text: "Choose Basic",
href: "#contact",
},
],
features: [
"500 Business Cards",
"100 Flyers",
"Basic Paper Stock",
],
},
{
id: "pro",
badge: "Popular",
price: "$499",
subtitle: "For established growing brands",
buttons: [
{
text: "Choose Pro",
href: "#contact",
},
],
features: [
"1000 Business Cards",
"500 Brochures",
"Premium Paper Stock",
"Priority Turnaround",
],
},
{
id: "enterprise",
badge: "Custom",
price: "Quote",
subtitle: "Scale your brand effectively",
buttons: [
{
text: "Request Quote",
href: "#contact",
},
],
features: [
"Unlimited Printing",
"Dedicated Manager",
"Custom Finishes",
"Warehousing",
],
},
]}
title="Flexible Print Packages"
description="Transparent pricing for all business volumes."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardTwo
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
plans={[
{ id: "basic", badge: "Essential", price: "$199", subtitle: "For small teams & individuals", buttons: [{ text: "Choose Basic", href: "#contact" }], features: ["500 Business Cards", "100 Flyers", "Basic Paper Stock"] },
{ id: "pro", badge: "Popular", price: "$499", subtitle: "For established growing brands", buttons: [{ text: "Choose Pro", href: "#contact" }], features: ["1000 Business Cards", "500 Brochures", "Premium Paper Stock", "Priority Turnaround"] },
{ id: "enterprise", badge: "Custom", price: "Quote", subtitle: "Scale your brand effectively", buttons: [{ text: "Request Quote", href: "#contact" }], features: ["Unlimited Printing", "Dedicated Manager", "Custom Finishes", "Warehousing"] }
]}
title="Flexible Print Packages"
description="Transparent pricing for all business volumes."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
metrics={[
{
id: "m1",
icon: Zap,
title: "Avg turnaround",
value: "24h",
},
{
id: "m2",
icon: Award,
title: "Customer rating",
value: "4.9/5",
},
{
id: "m3",
icon: CheckCircle,
title: "Successful prints",
value: "1M+",
},
]}
title="HUB Printing by Numbers"
description="Our impact across the industry."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
metrics={[
{ id: "m1", icon: Zap, title: "Avg turnaround", value: "24h" },
{ id: "m2", icon: Award, title: "Customer rating", value: "4.9/5" },
{ id: "m3", icon: CheckCircle, title: "Successful prints", value: "1M+" }
]}
title="HUB Printing by Numbers"
description="Our impact across the industry."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah Miller",
handle: "CEO, TechFlow",
testimonial: "HUB Printing is my go-to. Their quality is simply unmatched and their turnaround is incredible.",
imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-red-bow-tie_1298-359.jpg",
},
{
id: "2",
name: "David Chen",
handle: "Marketing Director",
testimonial: "Excellent detail work on our brochures. Very impressed with the color fidelity.",
imageSrc: "http://img.b2bpic.net/free-photo/professional-woman-standing-with-coffee-busy-street-smiling-camera_1258-123421.jpg",
},
{
id: "3",
name: "Elena Rodriguez",
handle: "Founder, ArtSpace",
testimonial: "Stunning print quality. They helped us bring our artistic vision to reality.",
imageSrc: "http://img.b2bpic.net/free-photo/middle-age-man-using-computer-laptop-home-smiling-confident-pointing-with-fingers-different-directions-copy-space-advertisement_839833-25307.jpg",
},
{
id: "4",
name: "Mark Wilson",
handle: "Head of Operations",
testimonial: "Very professional and easy to work with. Highly recommend their corporate packages.",
imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2551.jpg",
},
{
id: "5",
name: "Jessica Lee",
handle: "Event Coordinator",
testimonial: "Saved us with a last minute banner print. True life savers!",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-travel-agency_23-2150433448.jpg",
},
]}
title="Client Success Stories"
description="See why brands trust us with their image."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Sarah Miller", handle: "CEO, TechFlow", testimonial: "HUB Printing is my go-to. Their quality is simply unmatched and their turnaround is incredible.", imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-red-bow-tie_1298-359.jpg" },
{ id: "2", name: "David Chen", handle: "Marketing Director", testimonial: "Excellent detail work on our brochures. Very impressed with the color fidelity.", imageSrc: "http://img.b2bpic.net/free-photo/professional-woman-standing-with-coffee-busy-street-smiling-camera_1258-123421.jpg" },
{ id: "3", name: "Elena Rodriguez", handle: "Founder, ArtSpace", testimonial: "Stunning print quality. They helped us bring our artistic vision to reality.", imageSrc: "http://img.b2bpic.net/free-photo/middle-age-man-using-computer-laptop-home-smiling-confident-pointing-with-fingers-different-directions-copy-space-advertisement_839833-25307.jpg" }
]}
title="Client Success Stories"
description="See why brands trust us with their image."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={true}
background={{
variant: "plain",
}}
tag="Contact Us"
title="Start Your Printing Project"
description="Ready to bring your ideas to life? Fill out the form and our team will get back to you within 24 hours."
imageSrc="http://img.b2bpic.net/free-photo/business-woman-explaining-project-colleague_329181-17094.jpg"
imageAlt="handing over print documents"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={true}
background={{ variant: "plain" }}
tag="Contact Us"
title="Start Your Printing Project"
description="Ready to bring your ideas to life? Fill out the form and our team will get back to you within 24 hours."
imageSrc="http://img.b2bpic.net/free-photo/business-woman-explaining-project-colleague_329181-17094.jpg"
imageAlt="handing over print documents"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "About",
items: [
{
label: "Company Story",
href: "#about",
},
{
label: "Careers",
href: "#",
},
{
label: "Blog",
href: "#",
},
],
},
{
title: "Services",
items: [
{
label: "Printing",
href: "#products",
},
{
label: "Design",
href: "#",
},
{
label: "Finishing",
href: "#features",
},
],
},
{
title: "Contact",
items: [
{
label: "Support",
href: "#contact",
},
{
label: "Get a Quote",
href: "#contact",
},
{
label: "Press",
href: "#",
},
],
},
]}
bottomLeftText="© 2024 HUB Printing. All rights reserved."
bottomRightText="Privacy Policy | Terms of Service"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "About", items: [{ label: "Company Story", href: "#about" }, { label: "Careers", href: "#" }, { label: "Blog", href: "#" }] },
{ title: "Services", items: [{ label: "Printing", href: "#products" }, { label: "Design", href: "#" }, { label: "Finishing", href: "#features" }] },
{ title: "Contact", items: [{ label: "Support", href: "#contact" }, { label: "Get a Quote", href: "#contact" }, { label: "Press", href: "#" }] }
]}
bottomLeftText="© 2024 HUB Printing. All rights reserved."
bottomRightText="Privacy Policy | Terms of Service"
/>
</div>
</ReactLenis>
</ThemeProvider>
);