Update src/app/page.tsx
This commit is contained in:
428
src/app/page.tsx
428
src/app/page.tsx
@@ -17,308 +17,154 @@ import { CheckCircle, Shield, Zap } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="FlowMaster Plumbing"
|
||||
button={{
|
||||
text: "Call Now",
|
||||
href: "tel:5550123",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="FlowMaster Plumbing"
|
||||
button={{ text: "Call Now", href: "tel:5550123" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Professional Plumbing Services You Can Trust"
|
||||
description="Fast, reliable, and affordable plumbing solutions for your home and business. From leak repairs to complete pipe installations, we have you covered."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book an Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/g21084a28db47548455637f40352ce4141d8c68d65ab6c393fd7146eddd96c0c47cc3a1258978956eab041fa6ebd72b3eb2a1146ae28cdd404ef236e6dd18082a_1280.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Professional Plumbing Services You Can Trust"
|
||||
description="Fast, reliable, and affordable plumbing solutions for your home and business. From leak repairs to complete pipe installations, we have you covered."
|
||||
buttons={[{ text: "Book an Appointment", href: "#contact" }]}
|
||||
imageSrc="https://pixabay.com/get/g21084a28db47548455637f40352ce4141d8c68d65ab6c393fd7146eddd96c0c47cc3a1258978956eab041fa6ebd72b3eb2a1146ae28cdd404ef236e6dd18082a_1280.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Expert Plumbing Excellence Since 2010"
|
||||
description="We are dedicated to providing high-quality plumbing services with integrity and transparency. Our certified technicians handle everything from minor repairs to major projects."
|
||||
metrics={[
|
||||
{
|
||||
value: "12+",
|
||||
title: "Years Experience",
|
||||
},
|
||||
{
|
||||
value: "5k+",
|
||||
title: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "24/7",
|
||||
title: "Emergency Ready",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
title: "Satisfaction",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/g3a4577521266873bca32dbd73d2a024adb2048a7f80dc2a3ec909fd6986a8b23a4fe7c57ab3ca3331c8aef0312af911abe96e5221a7d2d7bda372f78da37dfb2_1280.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Expert Plumbing Excellence Since 2010"
|
||||
description="We are dedicated to providing high-quality plumbing services with integrity and transparency. Our certified technicians handle everything from minor repairs to major projects."
|
||||
metrics={[
|
||||
{ value: "12+", title: "Years Experience" },
|
||||
{ value: "5k+", title: "Projects Completed" },
|
||||
{ value: "24/7", title: "Emergency Ready" },
|
||||
{ value: "100%", title: "Satisfaction" },
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/g3a4577521266873bca32dbd73d2a024adb2048a7f80dc2a3ec909fd6986a8b23a4fe7c57ab3ca3331c8aef0312af911abe96e5221a7d2d7bda372f78da37dfb2_1280.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features-1" data-section="features-1">
|
||||
<FeatureCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Leak Detection",
|
||||
description: "Accurate pinpointing and fixing of hidden leaks.",
|
||||
imageSrc: "https://pixabay.com/get/gefe81a8d4c8d4bb0ad69a2a3fe83f0ee2ea333671fc3283ecffbbeadbe28cd8aa7ce6e5fe3bd5fe2dd0641742409ba5c647c697a2b931c4fb2be902394ff04c8_1280.jpg?_wi=1",
|
||||
imageAlt: "Leak detection",
|
||||
},
|
||||
{
|
||||
title: "Drain Cleaning",
|
||||
description: "Advanced equipment to keep drains flowing freely.",
|
||||
imageSrc: "https://pixabay.com/get/g7e33d02687b3254b17c427f603769f9876891e6e530e2243a5e635fdca60d481a3eff33e0693526bfedad54ff295333052e7fbf1e9290722bc5ba5709c76a53b_1280.jpg?_wi=1",
|
||||
imageAlt: "Drain cleaning",
|
||||
},
|
||||
{
|
||||
title: "Emergency Repair",
|
||||
description: "Rapid response teams for any plumbing crisis.",
|
||||
imageSrc: "https://pixabay.com/get/gf93aac25e44e46783582c98a1cb3dd9d691d5476c708ee35c646458c70933c2af3609e31b435526439f69ff6021bb5bd0d35d70abf72437dc50c03c6e184e264_1280.jpg?_wi=1",
|
||||
imageAlt: "Emergency repair",
|
||||
},
|
||||
]}
|
||||
title="Core Services"
|
||||
description="Comprehensive plumbing maintenance and repair solutions tailored to your specific needs."
|
||||
/>
|
||||
</div>
|
||||
<div id="features-1" data-section="features-1">
|
||||
<FeatureCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Leak Detection", description: "Accurate pinpointing and fixing of hidden leaks.", imageSrc: "https://pixabay.com/get/gefe81a8d4c8d4bb0ad69a2a3fe83f0ee2ea333671fc3283ecffbbeadbe28cd8aa7ce6e5fe3bd5fe2dd0641742409ba5c647c697a2b931c4fb2be902394ff04c8_1280.jpg", imageAlt: "Leak detection" },
|
||||
{ title: "Drain Cleaning", description: "Advanced equipment to keep drains flowing freely.", imageSrc: "https://pixabay.com/get/g7e33d02687b3254b17c427f603769f9876891e6e530e2243a5e635fdca60d481a3eff33e0693526bfedad54ff295333052e7fbf1e9290722bc5ba5709c76a53b_1280.jpg", imageAlt: "Drain cleaning" },
|
||||
{ title: "Emergency Repair", description: "Rapid response teams for any plumbing crisis.", imageSrc: "https://pixabay.com/get/gf93aac25e44e46783582c98a1cb3dd9d691d5476c708ee35c646458c70933c2af3609e31b435526439f69ff6021bb5bd0d35d70abf72437dc50c03c6e184e264_1280.jpg", imageAlt: "Emergency repair" },
|
||||
]}
|
||||
title="Core Services"
|
||||
description="Comprehensive plumbing maintenance and repair solutions tailored to your specific needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features-2" data-section="features-2">
|
||||
<FeatureBorderGlow
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: CheckCircle,
|
||||
title: "Licensed & Insured",
|
||||
description: "Professional care for total peace of mind.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Fast Response",
|
||||
description: "On-time arrival for every scheduled service.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Guaranteed Work",
|
||||
description: "We stand behind all our repairs 100%.",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="Commitment to quality and customer satisfaction."
|
||||
/>
|
||||
</div>
|
||||
<div id="features-2" data-section="features-2">
|
||||
<FeatureBorderGlow
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{ icon: CheckCircle, title: "Licensed & Insured", description: "Professional care for total peace of mind." },
|
||||
{ icon: Zap, title: "Fast Response", description: "On-time arrival for every scheduled service." },
|
||||
{ icon: Shield, title: "Guaranteed Work", description: "We stand behind all our repairs 100%." },
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="Commitment to quality and customer satisfaction."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features-3" data-section="features-3">
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Book Online",
|
||||
description: "Schedule a service in minutes.",
|
||||
imageSrc: "https://pixabay.com/get/gefe81a8d4c8d4bb0ad69a2a3fe83f0ee2ea333671fc3283ecffbbeadbe28cd8aa7ce6e5fe3bd5fe2dd0641742409ba5c647c697a2b931c4fb2be902394ff04c8_1280.jpg?_wi=2",
|
||||
imageAlt: "Booking",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Expert Assessment",
|
||||
description: "Thorough inspection of plumbing issues.",
|
||||
imageSrc: "https://pixabay.com/get/g7e33d02687b3254b17c427f603769f9876891e6e530e2243a5e635fdca60d481a3eff33e0693526bfedad54ff295333052e7fbf1e9290722bc5ba5709c76a53b_1280.jpg?_wi=2",
|
||||
imageAlt: "Assessment",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Resolution",
|
||||
description: "Efficient repair and cleanup.",
|
||||
imageSrc: "https://pixabay.com/get/gf93aac25e44e46783582c98a1cb3dd9d691d5476c708ee35c646458c70933c2af3609e31b435526439f69ff6021bb5bd0d35d70abf72437dc50c03c6e184e264_1280.jpg?_wi=2",
|
||||
imageAlt: "Resolution",
|
||||
},
|
||||
]}
|
||||
title="The Process"
|
||||
description="Our simple 3-step service promise."
|
||||
/>
|
||||
</div>
|
||||
<div id="features-3" data-section="features-3">
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: 1, title: "Book Online", description: "Schedule a service in minutes.", imageSrc: "https://pixabay.com/get/gefe81a8d4c8d4bb0ad69a2a3fe83f0ee2ea333671fc3283ecffbbeadbe28cd8aa7ce6e5fe3bd5fe2dd0641742409ba5c647c697a2b931c4fb2be902394ff04c8_1280.jpg" },
|
||||
{ id: 2, title: "Expert Assessment", description: "Thorough inspection of plumbing issues.", imageSrc: "https://pixabay.com/get/g7e33d02687b3254b17c427f603769f9876891e6e530e2243a5e635fdca60d481a3eff33e0693526bfedad54ff295333052e7fbf1e9290722bc5ba5709c76a53b_1280.jpg" },
|
||||
{ id: 3, title: "Resolution", description: "Efficient repair and cleanup.", imageSrc: "https://pixabay.com/get/gf93aac25e44e46783582c98a1cb3dd9d691d5476c708ee35c646458c70933c2af3609e31b435526439f69ff6021bb5bd0d35d70abf72437dc50c03c6e184e264_1280.jpg" },
|
||||
]}
|
||||
title="The Process"
|
||||
description="Our simple 3-step service promise."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alice Johnson",
|
||||
handle: "@alice",
|
||||
testimonial: "Excellent service and very prompt response!",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/g6570e6af2eec811fe145553d8768c6b24a18d75f29880148a4906779324a3fed8a4a334c408b003f683f941b0afa7d9820d313573828548baba951939e54850d_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Bob Smith",
|
||||
handle: "@bob",
|
||||
testimonial: "Fixed my major leak in less than an hour.",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/g4b3c5385e8958518f03cf16516292b64f32cae2782609e4cbb0317c208dcb6d20e0eff5c58e80f5f37245d131baaed3b0789dc057ca06bd6cf1ec759d7df3c3e_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Carol White",
|
||||
handle: "@carol",
|
||||
testimonial: "Friendly technicians and fair pricing.",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/gfe9cb1d0af8760116c2ebd29c817774b78962642f58009645d2d163f3e5a18f40f2fdfb6c7d77a96a769cfd7fbd29e0c755e4e3143259f3cc8e9b22ab0aafbd2_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Brown",
|
||||
handle: "@david",
|
||||
testimonial: "Highly recommend for any plumbing repairs!",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/g1e5f442b2c47fdc8509f17d69de6e230a8cd337cab22a56a635f27581cb4bb067f763cc7c3ff96add5a598eaa53a6260db0f260edb730ea7e98cb7b0a094dc90_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Eve Davis",
|
||||
handle: "@eve",
|
||||
testimonial: "Saved the day during a holiday crisis.",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/ge1c15afc1b323db3cae9e3dc6e3d164e4cc43725e67eaca705332db3504a1cdc04917a81b0f3412d13f6aeaefeb2a1a4e9b1517e9b33ed7be2bc854b5f32987e_1280.jpg",
|
||||
},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Trusted by Local Homeowners"
|
||||
description="See why our neighbors rely on FlowMaster."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alice Johnson", handle: "@alice", testimonial: "Excellent service and very prompt response!", rating: 5, imageSrc: "https://pixabay.com/get/g6570e6af2eec811fe145553d8768c6b24a18d75f29880148a4906779324a3fed8a4a334c408b003f683f941b0afa7d9820d313573828548baba951939e54850d_1280.jpg" },
|
||||
{ id: "2", name: "Bob Smith", handle: "@bob", testimonial: "Fixed my major leak in less than an hour.", rating: 5, imageSrc: "https://pixabay.com/get/g4b3c5385e8958518f03cf16516292b64f32cae2782609e4cbb0317c208dcb6d20e0eff5c58e80f5f37245d131baaed3b0789dc057ca06bd6cf1ec759d7df3c3e_1280.jpg" },
|
||||
{ id: "3", name: "Carol White", handle: "@carol", testimonial: "Friendly technicians and fair pricing.", rating: 5, imageSrc: "https://pixabay.com/get/gfe9cb1d0af8760116c2ebd29c817774b78962642f58009645d2d163f3e5a18f40f2fdfb6c7d77a96a769cfd7fbd29e0c755e4e3143259f3cc8e9b22ab0aafbd2_1280.jpg" },
|
||||
{ id: "4", name: "David Brown", handle: "@david", testimonial: "Highly recommend for any plumbing repairs!", rating: 5, imageSrc: "https://pixabay.com/get/g1e5f442b2c47fdc8509f17d69de6e230a8cd337cab22a56a635f27581cb4bb067f763cc7c3ff96add5a598eaa53a6260db0f260edb730ea7e98cb7b0a094dc90_1280.jpg" },
|
||||
{ id: "5", name: "Eve Davis", handle: "@eve", testimonial: "Saved the day during a holiday crisis.", rating: 5, imageSrc: "https://pixabay.com/get/ge1c15afc1b323db3cae9e3dc6e3d164e4cc43725e67eaca705332db3504a1cdc04917a81b0f3412d13f6aeaefeb2a1a4e9b1517e9b33ed7be2bc854b5f32987e_1280.jpg" },
|
||||
]}
|
||||
showRating={true}
|
||||
title="Trusted by Local Homeowners"
|
||||
description="See why our neighbors rely on FlowMaster."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you offer emergency services?",
|
||||
content: "Yes, we are available 24/7 for emergency plumbing repairs.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Are you licensed and insured?",
|
||||
content: "Absolutely, all our technicians are fully licensed and insured.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "How can I book a service?",
|
||||
content: "You can book directly through our website or give us a call.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you offer emergency services?", content: "Yes, we are available 24/7 for emergency plumbing repairs." },
|
||||
{ id: "f2", title: "Are you licensed and insured?", content: "Absolutely, all our technicians are fully licensed and insured." },
|
||||
{ id: "f3", title: "How can I book a service?", content: "You can book directly through our website or give us a call." },
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Contact Us"
|
||||
title="Need a Reliable Plumber Today?"
|
||||
description="Get a free quote or schedule your repair now."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us Now",
|
||||
href: "mailto:hello@flowmaster.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Contact Us"
|
||||
title="Need a Reliable Plumber Today?"
|
||||
description="Get a free quote or schedule your repair now."
|
||||
buttons={[{ text: "Contact Us Now", href: "mailto:hello@flowmaster.com" }]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://pixabay.com/get/g279e269f74061453782bb2cd7d1301626964cb7b2ec471c599d73d3108b5694ac17796c5b3537cb8b323866ea41465dc9cf8e800e0e5375607724c9eddfd720f_1280.jpg"
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Repair",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Installation",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://pixabay.com/get/g279e269f74061453782bb2cd7d1301626964cb7b2ec471c599d73d3108b5694ac17796c5b3537cb8b323866ea41465dc9cf8e800e0e5375607724c9eddfd720f_1280.jpg"
|
||||
columns={[
|
||||
{ title: "Services", items: [{ label: "Repair", href: "#" }, { label: "Installation", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user