Merge version_3 into main #2
179
src/app/page.tsx
179
src/app/page.tsx
@@ -11,7 +11,8 @@ import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import { Award, CheckCircle, Shield } from "lucide-react";
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import { Award, CheckCircle, Shield, Star } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -28,19 +29,15 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<div id="nav" data-section="nav" style={{ backgroundColor: "#15479c", color: "#ffffff" }}>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "Gallery", id: "projects"},
|
||||
{
|
||||
name: "Reviews", id: "reviews"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Gallery", id: "projects" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Google Reviews", id: "google-reviews" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="North Dallas Fence"
|
||||
/>
|
||||
@@ -48,49 +45,24 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
background={{ variant: "plain" }}
|
||||
title="Expert Fencing Services for North Dallas Homes"
|
||||
description="North Dallas Fence delivers premium residential fencing solutions across the Metroplex. We combine expert craftsmanship with top-tier materials to secure your home in style."
|
||||
kpis={[
|
||||
{
|
||||
value: "20+", label: "Years Experience"},
|
||||
{
|
||||
value: "5000+", label: "Projects Completed"},
|
||||
{
|
||||
value: "100%", label: "Client Satisfaction"},
|
||||
{ value: "20+", label: "Years Experience" },
|
||||
{ value: "5000+", label: "Projects Completed" },
|
||||
{ value: "100%", label: "Client Satisfaction" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Your Free Quote", href: "#contact"},
|
||||
]}
|
||||
buttons={[{ text: "Get Your Free Quote", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/japanese-house-entrance-with-nature_23-2149301042.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/fashion-bearded-hipster-posing-fence-style-diversity_482257-40662.jpg", alt: "Fashion bearded hipster"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-having-video-call-with-her-husband-their-daughter-outdoors_23-2149120908.jpg", alt: "Woman video call"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/japanese-house-entrance-with-fence_23-2149301041.jpg", alt: "Japanese house entrance"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/fashion-bearded-hipster-posing-fence-style-diversity_482257-36988.jpg", alt: "Style and diversity"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/business-woman-posing-professionally-outdoors_23-2148603028.jpg", alt: "Business woman outdoors"},
|
||||
]}
|
||||
avatarText="Trusted by 5000+ happy homeowners"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text", text: "Residential Fencing"},
|
||||
{
|
||||
type: "text", text: "Custom Woodwork"},
|
||||
{
|
||||
type: "text", text: "Security Gates"},
|
||||
{
|
||||
type: "text", text: "Metal & Iron"},
|
||||
{
|
||||
type: "text", text: "Dallas Metroplex"},
|
||||
{ type: "text", text: "Residential Fencing" },
|
||||
{ type: "text", text: "Custom Woodwork" },
|
||||
{ type: "text", text: "Security Gates" },
|
||||
{ type: "text", text: "Metal & Iron" },
|
||||
{ type: "text", text: "Dallas Metroplex" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -100,15 +72,9 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="Serving Dallas with Integrity"
|
||||
metrics={[
|
||||
{
|
||||
icon: Award,
|
||||
label: "Expertise", value: "Master Craftsmanship"},
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Quality", value: "Premium Materials"},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
label: "Service", value: "Local Metroplex Experts"},
|
||||
{ icon: Award, label: "Expertise", value: "Master Craftsmanship" },
|
||||
{ icon: Shield, label: "Quality", value: "Premium Materials" },
|
||||
{ icon: CheckCircle, label: "Service", value: "Local Metroplex Experts" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -119,14 +85,8 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Free On-Site Estimates", "Professional Cleanup", "Licensed & Insured", "Detailed Project Planning"],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Custom Cedar Fences", "Privacy Wood Fences", "Ornamental Metal Fences", "Security Gate Installation"],
|
||||
}}
|
||||
negativeCard={{ items: ["Free On-Site Estimates", "Professional Cleanup", "Licensed & Insured", "Detailed Project Planning"] }}
|
||||
positiveCard={{ items: ["Custom Cedar Fences", "Privacy Wood Fences", "Ornamental Metal Fences", "Security Gate Installation"] }}
|
||||
title="Our Fence Solutions"
|
||||
description="We specialize in a variety of fencing styles tailored to your specific needs and aesthetic preferences."
|
||||
/>
|
||||
@@ -139,42 +99,38 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Cedar Privacy Fence", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/landscape-shot-brown-wooden-fence-mini-forest-with-clear-blue-sky_181624-17330.jpg"},
|
||||
{
|
||||
id: "2", name: "Wrought Iron Perimeter", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-elderly-man-taking-stroll_23-2150168177.jpg"},
|
||||
{
|
||||
id: "3", name: "Modern Horizontal Slat", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/big-fence-urban-park_53876-32203.jpg"},
|
||||
{
|
||||
id: "4", name: "Durable Picket Style", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/man-protective-gloves-is-painting-wooden-fence-bright-summer-day_613910-17104.jpg"},
|
||||
{
|
||||
id: "5", name: "Secure Gate Entry", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/abandoned-house-background-with-rusty-fence_23-2149454735.jpg"},
|
||||
{
|
||||
id: "6", name: "Standard Wood Panel", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/long-shot-friends-sitting-outdoors_23-2149085443.jpg"},
|
||||
{ id: "1", name: "Cedar Privacy Fence", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/landscape-shot-brown-wooden-fence-mini-forest-with-clear-blue-sky_181624-17330.jpg" },
|
||||
{ id: "2", name: "Wrought Iron Perimeter", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-elderly-man-taking-stroll_23-2150168177.jpg" },
|
||||
{ id: "3", name: "Modern Horizontal Slat", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/big-fence-urban-park_53876-32203.jpg" },
|
||||
]}
|
||||
title="Previous Jobs"
|
||||
description="Explore our portfolio of recent installations across North Dallas and the surrounding Metroplex."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="google-reviews" data-section="google-reviews">
|
||||
<TestimonialCardThirteen
|
||||
title="Google Business Reviews"
|
||||
description="See what our customers are saying on Google."
|
||||
testimonials={[
|
||||
{ id: "g1", name: "Local Homeowner", handle: "@dallaspro", testimonial: "Fantastic service! Quick, professional, and high quality work.", rating: 5, icon: Star },
|
||||
{ id: "g2", name: "Dallas Resident", handle: "@satisfied", testimonial: "The team was punctual and the craftsmanship is top-notch.", rating: 5, icon: Star }
|
||||
]}
|
||||
showRating={true}
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "John D.", role: "Homeowner", testimonial: "Excellent service and craftsmanship. My new fence looks amazing!", imageSrc: "http://img.b2bpic.net/free-photo/friends-enjoying-some-barbecue-outdoors_23-2148733601.jpg"},
|
||||
{
|
||||
id: "2", name: "Sarah W.", role: "Homeowner", testimonial: "North Dallas Fence is professional, fast, and very helpful.", imageSrc: "http://img.b2bpic.net/free-photo/happy-man-wearing-pajamas-while-working-late-home_637285-10821.jpg"},
|
||||
{
|
||||
id: "3", name: "Mike R.", role: "Homeowner", testimonial: "Truly the best fence company in the Metroplex area.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-smiling-woman-office_23-2148187253.jpg"},
|
||||
{
|
||||
id: "4", name: "Emily B.", role: "Homeowner", testimonial: "The quality of work is outstanding and they were so tidy.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-business-man-outdoor_23-2148479594.jpg"},
|
||||
{
|
||||
id: "5", name: "David L.", role: "Homeowner", testimonial: "So happy with the results, would highly recommend to anyone.", imageSrc: "http://img.b2bpic.net/free-photo/content-businessman-smiling_74855-3248.jpg"},
|
||||
{
|
||||
id: "6", name: "Jessica M.", role: "Homeowner", testimonial: "Fast installation and competitive pricing. Fantastic experience.", imageSrc: "http://img.b2bpic.net/free-photo/woman-walking-romantic-happy-holidays-holding-hand-boyfriend-following-her_1150-4660.jpg"},
|
||||
{ id: "1", name: "John D.", role: "Homeowner", testimonial: "Excellent service and craftsmanship. My new fence looks amazing!" },
|
||||
{ id: "2", name: "Sarah W.", role: "Homeowner", testimonial: "North Dallas Fence is professional, fast, and very helpful." },
|
||||
]}
|
||||
title="Customer Reviews"
|
||||
description="Don't just take our word for it—hear what our satisfied homeowners have to say."
|
||||
@@ -186,14 +142,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1", title: "Do you provide free estimates?", content: "Yes, we offer complimentary on-site consultations and detailed estimates for all projects."},
|
||||
{
|
||||
id: "f2", title: "How long does installation take?", content: "Most installations are completed within 2-4 days, depending on yard size and material complexity."},
|
||||
{
|
||||
id: "f3", title: "What service areas do you cover?", content: "We proudly serve the entire Dallas Metroplex region."},
|
||||
{
|
||||
id: "f4", title: "Do you offer warranties?", content: "Yes, all our work is backed by a comprehensive labor and material warranty."},
|
||||
{ id: "f1", title: "Do you provide free estimates?", content: "Yes, we offer complimentary on-site consultations." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions about our process? We have the answers."
|
||||
@@ -204,15 +153,11 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Contact Us"
|
||||
title="Request Your Quote Today"
|
||||
description="Get in touch with us to discuss your fencing needs and get a free, no-obligation estimate for your next project."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us", href: "#"},
|
||||
]}
|
||||
buttons={[{ text: "Contact Us", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -220,34 +165,8 @@ export default function LandingPage() {
|
||||
<FooterBaseReveal
|
||||
logoText="North Dallas Fence"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Services", href: "#services"},
|
||||
{
|
||||
label: "Projects", href: "#projects"},
|
||||
{
|
||||
label: "Reviews", href: "#reviews"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About Us", href: "#"},
|
||||
{
|
||||
label: "Contact", href: "#contact"},
|
||||
{
|
||||
label: "FAQ", href: "#faq"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Service", href: "#"},
|
||||
],
|
||||
},
|
||||
{ title: "Navigation", items: [{ label: "Services", href: "#services" }, { label: "Projects", href: "#projects" }] },
|
||||
{ title: "Company", items: [{ label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user