Update src/app/page.tsx
This commit is contained in:
420
src/app/page.tsx
420
src/app/page.tsx
@@ -28,303 +28,147 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "products",
|
||||
},
|
||||
]}
|
||||
brandName="Artisanal Paints"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Portfolio", id: "products" },
|
||||
]}
|
||||
brandName="Artisanal Paints"
|
||||
button={{ text: "Get Quote", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Bringing Your Vision to Life with Color"
|
||||
description="Professional painting services for homes and businesses. Quality, precision, and care in every stroke."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=b7okyg"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "asset://hero-avatar-1",
|
||||
alt: "Happy client smiling",
|
||||
},
|
||||
{
|
||||
src: "asset://hero-avatar-2",
|
||||
alt: "Professional painter on site",
|
||||
},
|
||||
{
|
||||
src: "asset://hero-avatar-3",
|
||||
alt: "Satisfied homeowner",
|
||||
},
|
||||
{
|
||||
src: "asset://hero-avatar-4",
|
||||
alt: "Residential project completion",
|
||||
},
|
||||
{
|
||||
src: "asset://hero-avatar-5",
|
||||
alt: "Happy commercial client",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by over 1,500 local homeowners."
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Bringing Your Vision to Life with Color"
|
||||
description="Professional painting services for homes and businesses. Quality, precision, and care in every stroke."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=b7okyg"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s7qvmq", alt: "Happy client smiling" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ihvb47", alt: "Professional painter on site" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l28amv", alt: "Satisfied homeowner" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u8oxvi", alt: "Residential project completion" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r8o2ov", alt: "Happy commercial client" }
|
||||
]}
|
||||
avatarText="Trusted by over 1,500 local homeowners."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Crafting beautiful spaces for over 20 years.",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hmrcsm",
|
||||
alt: "painter working on wall",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Crafting beautiful spaces for over 20 years." },
|
||||
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hmrcsm", alt: "painter working on wall" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
label: "Interior",
|
||||
title: "Precision Interior",
|
||||
items: [
|
||||
"Wall repair",
|
||||
"Detailed trim work",
|
||||
"Custom finishes",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
label: "Exterior",
|
||||
title: "Protective Exterior",
|
||||
items: [
|
||||
"Weather proofing",
|
||||
"Deck staining",
|
||||
"Full facade paint",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
label: "Commercial",
|
||||
title: "Corporate Makeover",
|
||||
items: [
|
||||
"Office spaces",
|
||||
"Retail environments",
|
||||
"Minimal downtime",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Our Painting Services"
|
||||
description="Comprehensive painting solutions tailored to your specific needs."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "f1", label: "Interior", title: "Precision Interior", items: ["Wall repair", "Detailed trim work", "Custom finishes"] },
|
||||
{ id: "f2", label: "Exterior", title: "Protective Exterior", items: ["Weather proofing", "Deck staining", "Full facade paint"] },
|
||||
{ id: "f3", label: "Commercial", title: "Corporate Makeover", items: ["Office spaces", "Retail environments", "Minimal downtime"] }
|
||||
]}
|
||||
title="Our Painting Services"
|
||||
description="Comprehensive painting solutions tailored to your specific needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Luxury Home Interior",
|
||||
price: "Custom",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yppi6i",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Kitchen Cabinet Refinish",
|
||||
price: "Custom",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5aq1a2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Historic Exterior Resto",
|
||||
price: "Custom",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6e6szj",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Modern Studio Spaces",
|
||||
price: "Custom",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x4bdex",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Corporate Office Finish",
|
||||
price: "Custom",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dbhzsu",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Dining Room Refresh",
|
||||
price: "Custom",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hxonw6",
|
||||
},
|
||||
]}
|
||||
title="Recent Projects"
|
||||
description="A glimpse into our recent craftsmanship."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Luxury Home Interior", price: "Custom", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yppi6i" },
|
||||
{ id: "2", name: "Kitchen Cabinet Refinish", price: "Custom", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5aq1a2" },
|
||||
{ id: "3", name: "Historic Exterior Resto", price: "Custom", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6e6szj" },
|
||||
{ id: "4", name: "Modern Studio Spaces", price: "Custom", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x4bdex" },
|
||||
{ id: "5", name: "Corporate Office Finish", price: "Custom", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dbhzsu" },
|
||||
{ id: "6", name: "Dining Room Refresh", price: "Custom", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hxonw6" }
|
||||
]}
|
||||
title="Recent Projects"
|
||||
description="A glimpse into our recent craftsmanship."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1500+",
|
||||
description: "Projects Completed",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "20",
|
||||
description: "Years Experience",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "98%",
|
||||
description: "Client Satisfaction",
|
||||
},
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Expertise you can trust."
|
||||
/>
|
||||
</div>
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "1500+", description: "Projects Completed" },
|
||||
{ id: "m2", value: "20", description: "Years Experience" },
|
||||
{ id: "m3", value: "98%", description: "Client Satisfaction" }
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Expertise you can trust."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alice M.",
|
||||
role: "Homeowner",
|
||||
company: "Private Residence",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s7qvmq",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Robert B.",
|
||||
role: "Homeowner",
|
||||
company: "Private Residence",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ihvb47",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Sarah J.",
|
||||
role: "Client",
|
||||
company: "Renovation Group",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l28amv",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David T.",
|
||||
role: "Manager",
|
||||
company: "Corp Office",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u8oxvi",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Elena V.",
|
||||
role: "Client",
|
||||
company: "Residential",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r8o2ov",
|
||||
},
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="What our clients say about our service."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alice M.", role: "Homeowner", company: "Private Residence", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s7qvmq" },
|
||||
{ id: "2", name: "Robert B.", role: "Homeowner", company: "Private Residence", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ihvb47" },
|
||||
{ id: "3", name: "Sarah J.", role: "Client", company: "Renovation Group", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l28amv" },
|
||||
{ id: "4", name: "David T.", role: "Manager", company: "Corp Office", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u8oxvi" },
|
||||
{ id: "5", name: "Elena V.", role: "Client", company: "Residential", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r8o2ov" }
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="What our clients say about our service."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do you provide estimates?",
|
||||
content: "Yes, we provide free on-site consultations and estimates.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Is the paint included?",
|
||||
content: "We can provide high-quality paint or use specific brands you prefer.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "How long does a job take?",
|
||||
content: "Timeline varies based on scale; we offer detailed schedules before starting.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Find answers to frequently asked questions."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do you provide estimates?", content: "Yes, we provide free on-site consultations and estimates." },
|
||||
{ id: "q2", title: "Is the paint included?", content: "We can provide high-quality paint or use specific brands you prefer." },
|
||||
{ id: "q3", title: "How long does a job take?", content: "Timeline varies based on scale; we offer detailed schedules before starting." }
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Find answers to frequently asked questions."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Get in touch"
|
||||
title="Ready for a refresh?"
|
||||
description="Start your painting project today with our experts."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Free Estimate",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get in touch"
|
||||
title="Ready for a refresh?"
|
||||
description="Start your painting project today with our experts."
|
||||
buttons={[{ text: "Get Free Estimate", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Artisanal Paints"
|
||||
copyrightText="© 2025 Artisanal Paints | All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Artisanal Paints"
|
||||
copyrightText="© 2025 Artisanal Paints | All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user