Merge version_3 into main #5
22
src/app/about/page.tsx
Normal file
22
src/app/about/page.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarStyleCentered
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }, { name: "Login", id: "/login" }]}
|
||||
brandName="Elite Fence Pro"
|
||||
/>
|
||||
<div className="pt-32">
|
||||
<TextSplitAbout
|
||||
title="About Our Company"
|
||||
description={["Elite Fence Pro provides top-tier fencing services to residential and commercial clients across the nation. We believe in quality, reliability, and security."]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
34
src/app/cart/page.tsx
Normal file
34
src/app/cart/page.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ReactLenis from "lenis/react";
|
||||
|
||||
export default function CartPage() {
|
||||
const [cart, setCart] = useState([{ id: "p1", name: "Cedar Planks", price: "$45", quantity: 1, imageSrc: "" }]);
|
||||
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<ReactLenis root>
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Menu", id: "/menu" },
|
||||
{ name: "Cart", id: "/cart" }
|
||||
]}
|
||||
brandName="Elite Fence Pro"
|
||||
/>
|
||||
<div className="container mx-auto py-20 px-6">
|
||||
<h1 className="text-4xl font-bold mb-8">Your Cart</h1>
|
||||
{cart.map(item => (
|
||||
<div key={item.id} className="flex items-center justify-between p-6 border-b">
|
||||
<div>{item.name} - {item.price}</div>
|
||||
<div className="flex items-center gap-4">Qty: {item.quantity}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
24
src/app/contact/page.tsx
Normal file
24
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarStyleCentered
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }, { name: "Login", id: "/login" }]}
|
||||
brandName="Elite Fence Pro"
|
||||
/>
|
||||
<div className="pt-32">
|
||||
<ContactCTA
|
||||
tag="Contact Us"
|
||||
title="Get in Touch"
|
||||
description="We're ready to help you secure your property. Contact us today for a free assessment."
|
||||
buttons={[{ text: "Call (555) 012-3456", href: "tel:5550123456" }]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
18
src/app/login/page.tsx
Normal file
18
src/app/login/page.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
|
||||
export default function LoginPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarStyleCentered
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }, { name: "Login", id: "/login" }]}
|
||||
brandName="Elite Fence Pro"
|
||||
/>
|
||||
<div className="pt-32 flex justify-center items-center min-h-[50vh]">
|
||||
<h1 className="text-4xl font-bold">Login or Register</h1>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
44
src/app/menu/page.tsx
Normal file
44
src/app/menu/page.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ReactLenis from "lenis/react";
|
||||
|
||||
export default function MenuPage() {
|
||||
const [filter, setFilter] = useState("all");
|
||||
const categories = ["all", "wood", "metal", "vinyl"];
|
||||
const items = [
|
||||
{ id: 1, name: "Cedar Planks", category: "wood" },
|
||||
{ id: 2, name: "Wrought Iron", category: "metal" },
|
||||
{ id: 3, name: "Vinyl Panels", category: "vinyl" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<ReactLenis root>
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Menu", id: "/menu" },
|
||||
{ name: "Cart", id: "/cart" }
|
||||
]}
|
||||
brandName="Elite Fence Pro"
|
||||
/>
|
||||
<div className="container mx-auto py-20 px-6">
|
||||
<h1 className="text-4xl font-bold mb-8">Our Catalog</h1>
|
||||
<div className="flex gap-4 mb-8">
|
||||
{categories.map(cat => (
|
||||
<button key={cat} onClick={() => setFilter(cat)} className="px-4 py-2 bg-gray-100 rounded capitalize">{cat}</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{items.filter(i => filter === "all" || i.category === filter).map(item => (
|
||||
<div key={item.id} className="p-6 border rounded shadow">{item.name}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
177
src/app/page.tsx
177
src/app/page.tsx
@@ -31,16 +31,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Services", id: "features"},
|
||||
{
|
||||
name: "Products", id: "products"},
|
||||
{
|
||||
name: "Pricing", id: "pricing"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Login", id: "/login" }
|
||||
]}
|
||||
brandName="Elite Fence Pro"
|
||||
/>
|
||||
@@ -48,25 +43,14 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Secure Your Sanctuary with Elite Fencing"
|
||||
description="Professional residential and commercial fencing solutions built to last, providing security and beauty to every property."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Quote", href: "#contact"},
|
||||
]}
|
||||
buttons={[{ text: "Get a Quote", href: "/contact" }]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-gray-coat-with-sunglasses-handbag-walking-street-against-iron-fence_627829-8822.jpg?_wi=1", imageAlt: "Modern residential fence installation"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-female-tourist-carrying-camera-shoulder-looking-building-city_23-2148027183.jpg?_wi=1", imageAlt: "Wood picket fence backyard"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-japanese-garden_23-2149359734.jpg", imageAlt: "Ornamental metal fencing"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/architecture-resort-lifestyles-phangan-sunny_1253-673.jpg", imageAlt: "Beautiful sunny residential fence garden"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashion-bearded-hipster-posing-fence-style-diversity_482257-40662.jpg", imageAlt: "Modern home garden fencing style"},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/girl-gray-coat-with-sunglasses-handbag-walking-street-against-iron-fence_627829-8822.jpg?_wi=1", imageAlt: "Modern residential fence installation" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/young-female-tourist-carrying-camera-shoulder-looking-building-city_23-2148027183.jpg?_wi=1", imageAlt: "Wood picket fence backyard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-japanese-garden_23-2149359734.jpg", imageAlt: "Ornamental metal fencing" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
@@ -76,8 +60,7 @@ export default function LandingPage() {
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Craftsmanship You Can Trust"
|
||||
description={[
|
||||
"With over 20 years of experience, we specialize in high-quality fencing that combines durability with aesthetic appeal.", "Our team is dedicated to professional installation and top-tier customer service, ensuring your property is both secure and visually stunning."]}
|
||||
description={["With over 20 years of experience, we specialize in high-quality fencing that combines durability with aesthetic appeal.", "Our team is dedicated to professional installation and top-tier customer service, ensuring your property is both secure and visually stunning."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -86,146 +69,26 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Wood Fencing", description: "Classic and customizable wood fences for natural beauty.", imageSrc: "http://img.b2bpic.net/free-photo/white-wooden-fence_1122-2087.jpg?_wi=1", imageAlt: "Wood fence example"},
|
||||
{
|
||||
title: "Metal Fencing", description: "Strong, durable, and secure metal solutions.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-posed-outdoor-street-style-rap-singer_627829-2761.jpg", imageAlt: "Metal fence example"},
|
||||
{
|
||||
title: "Vinyl Fencing", description: "Low-maintenance and long-lasting vinyl designs.", imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-japanese-building-with-fence_23-2149301121.jpg", imageAlt: "Vinyl fence example"},
|
||||
{ title: "Wood Fencing", description: "Classic and customizable wood fences for natural beauty.", imageSrc: "http://img.b2bpic.net/free-photo/white-wooden-fence_1122-2087.jpg?_wi=1" },
|
||||
{ title: "Metal Fencing", description: "Strong, durable, and secure metal solutions.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-posed-outdoor-street-style-rap-singer_627829-2761.jpg" },
|
||||
{ title: "Vinyl Fencing", description: "Low-maintenance and long-lasting vinyl designs.", imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-japanese-building-with-fence_23-2149301121.jpg" }
|
||||
]}
|
||||
title="Our Fencing Solutions"
|
||||
description="We offer a diverse range of fencing options to meet every security and style need."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1", name: "Cedar Planks", price: "From $45", variant: "Premium Wood", imageSrc: "http://img.b2bpic.net/free-photo/close-up-detail-wood-texture_23-2151870253.jpg"},
|
||||
{
|
||||
id: "p2", name: "Wrought Iron Panels", price: "From $120", variant: "Ornamental", imageSrc: "http://img.b2bpic.net/free-photo/gridlike-fence-pattern-garden_346278-1300.jpg"},
|
||||
{
|
||||
id: "p3", name: "White Vinyl Panels", price: "From $85", variant: "Low Maintenance", imageSrc: "http://img.b2bpic.net/free-photo/content-woman-carrying-girlfriend-piggyback_23-2147762457.jpg"},
|
||||
{
|
||||
id: "p4", name: "Aluminum Posts", price: "From $55", variant: "Modern", imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283256.jpg"},
|
||||
{
|
||||
id: "p5", name: "Chain Link Rolls", price: "From $25", variant: "Industrial", imageSrc: "http://img.b2bpic.net/free-photo/basketball-court_1137-169.jpg"},
|
||||
{
|
||||
id: "p6", name: "Agricultural Wire", price: "From $30", variant: "Heavy Duty", imageSrc: "http://img.b2bpic.net/free-photo/welded-mesh-fence-night_53876-14864.jpg"},
|
||||
]}
|
||||
title="Explore Our Materials"
|
||||
description="Premium materials selected for their longevity and performance."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic", title: "Starter Package", price: "$1,500", period: "/ project", features: [
|
||||
"Consultation", "Site measurement", "Basic wood install"],
|
||||
button: {
|
||||
text: "Contact us", href: "#contact"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/carpenter-process-professional-tool-precision-drilling-wood_169016-52999.jpg", imageAlt: "fence contractors working in garden"},
|
||||
{
|
||||
id: "standard", title: "Professional Package", price: "$3,200", period: "/ project", features: [
|
||||
"Design consultation", "Custom metal/vinyl", "Professional install"],
|
||||
button: {
|
||||
text: "Contact us", href: "#contact"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-gray-coat-with-sunglasses-handbag-walking-street-against-iron-fence_627829-8822.jpg?_wi=2", imageAlt: "fence contractors working in garden"},
|
||||
{
|
||||
id: "premium", title: "Elite Package", price: "$5,500+", period: "/ project", features: [
|
||||
"Full design", "Premium materials", "Priority scheduling"],
|
||||
button: {
|
||||
text: "Contact us", href: "#contact"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-female-tourist-carrying-camera-shoulder-looking-building-city_23-2148027183.jpg?_wi=2", imageAlt: "fence contractors working in garden"},
|
||||
]}
|
||||
title="Installation Packages"
|
||||
description="Standard service packages tailored to your property size."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "John Doe", imageSrc: "http://img.b2bpic.net/free-photo/charming-student-girl-good-mood-relaxing-home_343059-139.jpg"},
|
||||
{
|
||||
id: "2", name: "Jane Smith", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-beautiful-blond-hair-gentle-smile-dressed-green-robe-with-belt-is-working-greenhouse_197531-12315.jpg"},
|
||||
{
|
||||
id: "3", name: "Robert Brown", imageSrc: "http://img.b2bpic.net/free-photo/attractive-blonde-girl-tulle-skirt-having-fun-stairs-she-is-smiling-down_197531-617.jpg"},
|
||||
{
|
||||
id: "4", name: "Alice Wilson", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-woman-enjoying-music_23-2148602721.jpg"},
|
||||
{
|
||||
id: "5", name: "Mark Davis", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-smiling-garden_23-2150771019.jpg"},
|
||||
]}
|
||||
cardTitle="Client Reviews"
|
||||
cardTag="Satisfied Customers"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1", title: "How long does installation take?", content: "Installation time depends on the project size, typically between 1-3 days."},
|
||||
{
|
||||
id: "q2", title: "Do you provide permits?", content: "Yes, we handle all necessary permitting processes for your peace of mind."},
|
||||
{
|
||||
id: "q3", title: "Do you offer a warranty?", content: "We offer a 5-year workmanship warranty on all our fence installations."},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about our fencing services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Contact Us"
|
||||
title="Let's Discuss Your Project"
|
||||
description="Request a free site assessment and installation quote from our fencing experts."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call (555) 012-3456", href: "tel:5550123456"
|
||||
}
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
logoText="Elite Fence Pro"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/white-wooden-fence_1122-2087.jpg?_wi=2"
|
||||
columns={[
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Wood Fencing", href: "#features" },
|
||||
{ label: "Metal Fencing", href: "#features" },
|
||||
{ label: "Vinyl Fencing", href: "#features" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Reviews", href: "#testimonials" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
],
|
||||
},
|
||||
{ title: "Services", items: [{ label: "Fencing", href: "/" }] },
|
||||
{ title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Login", href: "/login" }
|
||||
] }
|
||||
]}
|
||||
copyrightText="© 2025 Elite Fence Pro. All rights reserved."
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user