Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 68a5703288 | |||
| e5b914cc4c | |||
| 9d1ce5c40f | |||
| ec822a0eaf | |||
| 79c91766e2 |
@@ -4,7 +4,6 @@ import { Inter } from "next/font/google";
|
|||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import "@/lib/gsap-setup";
|
import "@/lib/gsap-setup";
|
||||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||||
import Tag from "@/tag/Tag";
|
|
||||||
import { getVisualEditScript } from "@/utils/visual-edit-script";
|
import { getVisualEditScript } from "@/utils/visual-edit-script";
|
||||||
import { Mulish } from "next/font/google";
|
import { Mulish } from "next/font/google";
|
||||||
|
|
||||||
@@ -29,7 +28,7 @@ export default function RootLayout({
|
|||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en" suppressHydrationWarning>
|
||||||
<ServiceWrapper>
|
<ServiceWrapper>
|
||||||
<body className={`${mulish.variable} antialiased`}>
|
<body className={`${mulish.variable} antialiased`}>
|
||||||
<Tag />
|
|
||||||
{children}
|
{children}
|
||||||
<script
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
|
|||||||
182
src/app/page.tsx
182
src/app/page.tsx
@@ -15,35 +15,24 @@ export default function LandingPage() {
|
|||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="hover-magnetic"
|
defaultButtonVariant="hover-magnetic"
|
||||||
defaultTextAnimation="reveal-blur"
|
defaultTextAnimation="reveal-blur"
|
||||||
borderRadius="soft"
|
borderRadius="pill"
|
||||||
contentWidth="mediumSmall"
|
contentWidth="mediumSmall"
|
||||||
sizing="medium"
|
sizing="medium"
|
||||||
background="aurora"
|
background="none"
|
||||||
cardStyle="glass-depth"
|
cardStyle="solid"
|
||||||
primaryButtonStyle="flat"
|
primaryButtonStyle="flat"
|
||||||
secondaryButtonStyle="solid"
|
secondaryButtonStyle="solid"
|
||||||
headingFontWeight="bold"
|
headingFontWeight="medium"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleApple
|
<NavbarStyleApple
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{ name: "Home", id: "hero" },
|
||||||
name: "Home",
|
{ name: "About", id: "about" },
|
||||||
id: "hero",
|
{ name: "Services", id: "features" },
|
||||||
},
|
{ name: "Testimonials", id: "testimonials" },
|
||||||
{
|
{ name: "Contact", id: "contact" },
|
||||||
name: "About",
|
|
||||||
id: "about",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Services",
|
|
||||||
id: "features",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Contact",
|
|
||||||
id: "contact",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
brandName="Affordable Fence"
|
brandName="Affordable Fence"
|
||||||
/>
|
/>
|
||||||
@@ -52,46 +41,31 @@ export default function LandingPage() {
|
|||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroLogo
|
<HeroLogo
|
||||||
logoText="Affordable Fencing"
|
logoText="Affordable Fencing"
|
||||||
description="Quality fence installations for your home and garden. Reliable, durable, and budget-friendly solutions tailored for your property."
|
description="Elegant, clean, and durable fencing solutions. We combine professional craftsmanship with timeless design to enhance your property's value and security."
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{ text: "Get a Quote", href: "#contact" },
|
||||||
text: "Get a Free Quote",
|
{ text: "Our Services", href: "#features" },
|
||||||
href: "#contact",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "Our Services",
|
|
||||||
href: "#features",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
buttonAnimation="slide-up"
|
buttonAnimation="slide-up"
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/preparing-plants-planting-seedlings-square-black-boxes-with-cells-planting-spring-primrose-flowers-park-hello-spring-gardening-spring_166373-3538.jpg"
|
imageSrc="http://img.b2bpic.net/free-photo/exterior-modern-residential-building_637285-1921.jpg"
|
||||||
imageAlt="Quality residential fencing"
|
imageAlt="Modern residential fencing"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<SplitAbout
|
<SplitAbout
|
||||||
textboxLayout="split"
|
textboxLayout="split"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={true}
|
||||||
title="Built to Last, Priced to Please"
|
title="Crafted for Elegance"
|
||||||
description="We believe every home deserves quality security and privacy without breaking the bank. With years of local experience, we deliver durable fencing with precision and care."
|
description="We believe in simplicity and durability. Every project is handled with a minimalist approach, ensuring our fencing seamlessly integrates with your home's architecture."
|
||||||
bulletPoints={[
|
bulletPoints={[
|
||||||
{
|
{ title: "Minimalist Design", description: "Clean lines and sophisticated aesthetic." },
|
||||||
title: "Expert Craftsmanship",
|
{ title: "High-Grade Materials", description: "Long-lasting durability meets refined style." },
|
||||||
description: "Years of experience building lasting structures.",
|
{ title: "Expert Precision", description: "Meticulous attention to every detail." },
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Affordable Rates",
|
|
||||||
description: "Transparent pricing with no hidden costs.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Premium Materials",
|
|
||||||
description: "Only high-quality woods and metals used.",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/man-working-mdf-boards-warehouse_23-2149384856.jpg"
|
imageSrc="http://img.b2bpic.net/free-photo/man-working-mdf-boards-warehouse_23-2149384856.jpg"
|
||||||
imageAlt="Professional fence installation"
|
imageAlt="Precision fence installation"
|
||||||
mediaAnimation="blur-reveal"
|
mediaAnimation="opacity"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -102,123 +76,55 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
id: "1",
|
id: "1", title: "Modern Privacy", author: "Sleek Design", description: "Contemporary panels that offer complete privacy without sacrificing visual appeal.", tags: ["Residential", "Modern"],
|
||||||
title: "Classic Wood",
|
imageSrc: "http://img.b2bpic.net/free-photo/pieces-wood-each-other-forming-fence_181624-32752.jpg"},
|
||||||
author: "Natural Beauty",
|
|
||||||
description: "Beautiful cedar and pine wood fences for a timeless, warm look.",
|
|
||||||
tags: [
|
|
||||||
"Residential",
|
|
||||||
"Natural",
|
|
||||||
],
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-13035.jpg",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "2",
|
id: "2", title: "Classic Security", author: "Robust Defense", description: "Strong and reliable metal structures tailored for modern properties.", tags: ["Security", "Robust"],
|
||||||
title: "Metal Security",
|
imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-13035.jpg"},
|
||||||
author: "Robust Defense",
|
|
||||||
description: "Durable metal fencing that combines security with modern style.",
|
|
||||||
tags: [
|
|
||||||
"Security",
|
|
||||||
"Modern",
|
|
||||||
],
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/exterior-modern-residential-building_637285-1921.jpg",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "3",
|
id: "3", title: "Custom Enclosures", author: "Tailored Fit", description: "Bespoke designs perfectly fitted for unique garden layouts.", tags: ["Bespoke", "Design"],
|
||||||
title: "Vinyl Privacy",
|
imageSrc: "http://img.b2bpic.net/free-photo/preparing-plants-planting-seedlings-square-black-boxes-with-cells-planting-spring-primrose-flowers-park-hello-spring-gardening-spring_166373-3538.jpg"},
|
||||||
author: "Low Maintenance",
|
|
||||||
description: "Easy-to-clean vinyl solutions for total backyard privacy.",
|
|
||||||
tags: [
|
|
||||||
"Privacy",
|
|
||||||
"Durable",
|
|
||||||
],
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/pieces-wood-each-other-forming-fence_181624-32752.jpg",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="Our Fencing Solutions"
|
title="Refined Fencing Solutions"
|
||||||
description="We offer a wide range of fencing materials to suit your specific aesthetic and security needs."
|
description="Explore our curated selection of high-quality fencing designed for the discerning homeowner."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardTwo
|
<TestimonialCardTwo
|
||||||
animationType="scale-rotate"
|
animationType="opacity"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={true}
|
||||||
testimonials={[
|
testimonials={[
|
||||||
{
|
{
|
||||||
id: "1",
|
id: "1", name: "James & Clara", role: "Homeowners", testimonial: "The design is simple, clean, and elegant. Exactly what we wanted for our home.", imageSrc: "http://img.b2bpic.net/free-photo/male-friends-handshaking-outdoors_23-2149073970.jpg"},
|
||||||
name: "Sarah J.",
|
|
||||||
role: "Homeowner",
|
|
||||||
testimonial: "Excellent service and very affordable prices. Highly recommended!",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/male-friends-handshaking-outdoors_23-2149073970.jpg",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "2",
|
id: "2", name: "Robert H.", role: "Developer", testimonial: "Sophisticated craftsmanship and an incredibly professional team. Outstanding work.", imageSrc: "http://img.b2bpic.net/free-photo/young-female-tourist-carrying-camera-shoulder-looking-building-city_23-2148027183.jpg"},
|
||||||
name: "Mike R.",
|
|
||||||
role: "Homeowner",
|
|
||||||
testimonial: "Fast installation and great communication throughout the process.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/young-female-tourist-carrying-camera-shoulder-looking-building-city_23-2148027183.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
name: "Emily D.",
|
|
||||||
role: "Homeowner",
|
|
||||||
testimonial: "My new fence looks amazing and it was completed in just two days.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/tender-family-with-baby_1153-2634.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "4",
|
|
||||||
name: "John K.",
|
|
||||||
role: "Homeowner",
|
|
||||||
testimonial: "They provided the best quote and the quality of work is outstanding.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/performing-housework-gentle-dreamy-atmosphere_23-2151469427.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "5",
|
|
||||||
name: "Linda M.",
|
|
||||||
role: "Homeowner",
|
|
||||||
testimonial: "Professional, clean, and quick work. My backyard feels so private now.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/pensive-girl-posing-fence_1153-541.jpg",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="What Our Clients Say"
|
title="Timeless Quality"
|
||||||
description="Trusted by hundreds of local homeowners for their fencing needs."
|
description="Our clients appreciate the minimalist elegance and durability we bring to every installation."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactCTA
|
<ContactCTA
|
||||||
|
tag="Inquire"
|
||||||
|
title="Elevate your property"
|
||||||
|
description="Let's discuss how we can bring an elegant fencing solution to your home."
|
||||||
|
buttons={[{ text: "Get a Consultation", href: "mailto:hello@affordablefence.com" }]}
|
||||||
|
background={{ variant: "plain" }}
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
background={{
|
|
||||||
variant: "plain",
|
|
||||||
}}
|
|
||||||
tag="Get in touch"
|
|
||||||
title="Ready for a new fence?"
|
|
||||||
description="Reach out to us for a free estimate and start your property enhancement today."
|
|
||||||
buttons={[
|
|
||||||
{
|
|
||||||
text: "Contact Us Now",
|
|
||||||
href: "mailto:hello@affordablefence.com",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterLogoReveal
|
<FooterLogoReveal
|
||||||
logoText="Affordable Fencing"
|
logoText="Affordable Fencing"
|
||||||
leftLink={{
|
leftLink={{ text: "Privacy", href: "#" }}
|
||||||
text: "Privacy Policy",
|
rightLink={{ text: "Terms", href: "#" }}
|
||||||
href: "#",
|
|
||||||
}}
|
|
||||||
rightLink={{
|
|
||||||
text: "Terms of Service",
|
|
||||||
href: "#",
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -12,13 +12,13 @@
|
|||||||
|
|
||||||
--background: #ffffff;
|
--background: #ffffff;
|
||||||
--card: #f9f9f9;
|
--card: #f9f9f9;
|
||||||
--foreground: #000612e6;
|
--foreground: #1a1a1a;
|
||||||
--primary-cta: #15479c;
|
--primary-cta: #000000;
|
||||||
--primary-cta-text: #ffffff;
|
--primary-cta-text: #ffffff;
|
||||||
--secondary-cta: #f9f9f9;
|
--secondary-cta: #f0f0f0;
|
||||||
--secondary-cta-text: #000612e6;
|
--secondary-cta-text: #000612e6;
|
||||||
--accent: #e2e2e2;
|
--accent: #e0e0e0;
|
||||||
--background-accent: #c4c4c4;
|
--background-accent: #f9f9f9;
|
||||||
|
|
||||||
/* text sizing - set by ThemeProvider */
|
/* text sizing - set by ThemeProvider */
|
||||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||||
|
|||||||
Reference in New Issue
Block a user