Merge version_2 into main

Merge version_2 into main
This commit was merged in pull request #4.
This commit is contained in:
2026-04-09 11:38:04 +00:00
6 changed files with 156 additions and 89 deletions

15
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,15 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
export default function AboutPage() {
return (
<ThemeProvider>
<div id="nav"><NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}, {name: "Policy", id: "/policy"}]} brandName="Tradesman Hardware" /></div>
<InlineImageSplitTextAbout heading={[{type: 'text', content: 'About Tradesman Hardware'}]} />
<FooterBaseCard logoText="Tradesman Hardware" columns={[{title: "Links", items: [{label: "Home", href: "/"}]}]} />
</ThemeProvider>
);
}

15
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,15 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
export default function ContactPage() {
return (
<ThemeProvider>
<div id="nav"><NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}, {name: "Policy", id: "/policy"}]} brandName="Tradesman Hardware" /></div>
<ContactCTA tag="Support" title="Get in Touch" description="Reach out for any hardware queries." buttons={[{text: "Email Us"}]} />
<FooterBaseCard logoText="Tradesman Hardware" columns={[{title: "Links", items: [{label: "Home", href: "/"}]}]} />
</ThemeProvider>
);
}

View File

@@ -4,9 +4,9 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
@@ -26,16 +26,12 @@ export default function LandingPage() {
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home", id: "#hero"},
{
name: "Shop", id: "#products"},
{
name: "About", id: "#about"},
{
name: "Contact", id: "#contact"},
{ name: "Home", id: "#hero" },
{ name: "Products", id: "#product" },
{ name: "Testimonials", id: "#testimonials" },
{ name: "Contact", id: "#contact" }
]}
brandName="Tradesman Hardware"
/>
@@ -43,29 +39,20 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroOverlay
title="Your Trusted Hardware Supplier in Cape Town"
description="Professional-grade tools, building materials, and reliable service at competitive prices. Get what you need, delivered straight to your site."
title="Building Cape Town, Together with Family"
description="Professional-grade tools, building materials, and reliable service at competitive prices. As a family-owned business, we treat your projects like our own."
buttons={[
{
text: "Shop Now", href: "#products"},
{
text: "WhatsApp Us", href: "https://wa.me/27870934417"},
{ text: "Browse Hardware", href: "#product" },
{ text: "WhatsApp Us", href: "https://wa.me/27870934417" },
]}
imageSrc="http://img.b2bpic.net/free-photo/top-view-different-types-tools_23-2148428273.jpg"
imageAlt="Tradesman Hardware Workshop"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/pleased-young-couple-construction-worker-uniform-cap-looking-each-other-girl-holding-pencil-clipboard-showing-thumb-up-isolated-purple-wall_141793-113913.jpg", alt: "Local Contractor"},
{
src: "http://img.b2bpic.net/free-photo/performing-housework-gentle-dreamy-atmosphere_23-2151469427.jpg", alt: "Happy Homeowner"},
{
src: "http://img.b2bpic.net/free-photo/happy-professional-architecture-holding-clipboard-construction-site_23-2148204025.jpg", alt: "Site Manager"},
{
src: "http://img.b2bpic.net/free-photo/men-working-cutting-mdf-board_23-2149384796.jpg", alt: "Professional Carpenter"},
{
src: "http://img.b2bpic.net/free-photo/young-cute-couple-repairs-room_1157-25159.jpg", alt: "Local Renovator"},
{ src: "http://img.b2bpic.net/free-photo/pleased-young-couple-construction-worker-uniform-cap-looking-each-other-girl-holding-pencil-clipboard-showing-thumb-up-isolated-purple-wall_141793-113913.jpg", alt: "Local Contractor" },
{ src: "http://img.b2bpic.net/free-photo/performing-housework-gentle-dreamy-atmosphere_23-2151469427.jpg", alt: "Happy Homeowner" },
{ src: "http://img.b2bpic.net/free-photo/happy-professional-architecture-holding-clipboard-construction-site_23-2148204025.jpg", alt: "Site Manager" },
]}
avatarText="Trusted by 500+ local professionals"
avatarText="Trusted by 500+ local families & professionals"
/>
</div>
@@ -75,15 +62,12 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: "f1", title: "Paints & Solvents", description: "Professional grade coatings for every surface.", tag: "Popular", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-painting-brushes-with-paint-cans_23-2148591316.jpg?_wi=1"},
{
id: "f2", title: "Power & Hand Tools", description: "Reliable equipment built for real work.", tag: "Top Pick", imageSrc: "http://img.b2bpic.net/free-photo/creative-man-working-wood-workshop_23-2148970802.jpg?_wi=1"},
{
id: "f3", title: "Electrical Materials", description: "Switches, plugs, and industrial wiring components.", tag: "Essentials", imageSrc: "http://img.b2bpic.net/free-photo/various-nozzles-ratchets_23-2148180527.jpg?_wi=1"},
{ id: "f1", title: "Paints & Finishes", description: "High-quality coatings for your home projects.", tag: "Family Choice", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-painting-brushes-with-paint-cans_23-2148591316.jpg?_wi=1" },
{ id: "f2", title: "Reliable Power Tools", description: "Built to last for every home renovation.", tag: "Professional Grade", imageSrc: "http://img.b2bpic.net/free-photo/creative-man-working-wood-workshop_23-2148970802.jpg?_wi=1" },
{ id: "f3", title: "Essential Hardware", description: "Fixes and fasteners for every small job.", tag: "Hardware Essential", imageSrc: "http://img.b2bpic.net/free-photo/various-nozzles-ratchets_23-2148180527.jpg?_wi=1" },
]}
title="Explore Our Categories"
description="Everything from heavy building materials to professional hand tools."
title="Hardware for Every Project"
description="From large construction sites to DIY family projects, we have it all."
/>
</div>
@@ -93,19 +77,12 @@ export default function LandingPage() {
useInvertedBackground={false}
animationType="slide-up"
testimonials={[
{
id: "t1", name: "Marcus V.", role: "Contractor", testimonial: "Best prices in the city and delivery is always on time.", imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-couple-construction-worker-uniform-cap-looking-each-other-girl-holding-pencil-clipboard-showing-thumb-up-isolated-purple-wall_141793-113913.jpg"},
{
id: "t2", name: "Sarah K.", role: "Homeowner", testimonial: "Friendly service and they always have exactly what I need for my renovations.", imageSrc: "http://img.b2bpic.net/free-photo/performing-housework-gentle-dreamy-atmosphere_23-2151469427.jpg"},
{
id: "t3", name: "David M.", role: "Site Manager", testimonial: "The WhatsApp ordering system is a lifesaver for our busy site.", imageSrc: "http://img.b2bpic.net/free-photo/happy-professional-architecture-holding-clipboard-construction-site_23-2148204025.jpg"},
{
id: "t4", name: "Jason L.", role: "Carpenter", testimonial: "Honest pricing and quality tools that last.", imageSrc: "http://img.b2bpic.net/free-photo/men-working-cutting-mdf-board_23-2149384796.jpg"},
{
id: "t5", name: "Anita R.", role: "Renovator", testimonial: "Love that they're local and care about their customers.", imageSrc: "http://img.b2bpic.net/free-photo/young-cute-couple-repairs-room_1157-25159.jpg"},
{ id: "t1", name: "Marcus V.", role: "Contractor", testimonial: "Best prices in the city and delivery is always on time.", imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-couple-construction-worker-uniform-cap-looking-each-other-girl-holding-pencil-clipboard-showing-thumb-up-isolated-purple-wall_141793-113913.jpg" },
{ id: "t2", name: "Sarah K.", role: "Homeowner", testimonial: "They feel like family. Always helpful and friendly advice.", imageSrc: "http://img.b2bpic.net/free-photo/performing-housework-gentle-dreamy-atmosphere_23-2151469427.jpg" },
{ id: "t3", name: "David M.", role: "Site Manager", testimonial: "The WhatsApp system is a lifesaver for our site speed.", imageSrc: "http://img.b2bpic.net/free-photo/happy-professional-architecture-holding-clipboard-construction-site_23-2148204025.jpg" },
]}
title="Trusted by Cape Town Tradesmen"
description="Hear what our local builders and homeowners say."
title="Part of the Community"
description="Our customers are part of the Tradesman family."
/>
</div>
@@ -115,16 +92,13 @@ export default function LandingPage() {
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
title="Top Selling Tools"
description="Our most popular professional gear, ready for dispatch."
tag="New Arrivals"
title="Professional Essentials"
description="Quality gear for your next hardware project."
tag="Hardware Store Picks"
products={[
{
id: "p1", name: "Pro Drill Set", price: "R 1,299", imageSrc: "http://img.b2bpic.net/free-photo/creative-man-working-wood-workshop_23-2148970802.jpg?_wi=2"},
{
id: "p2", name: "Industrial Paint Spray", price: "R 850", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-painting-brushes-with-paint-cans_23-2148591316.jpg?_wi=2"},
{
id: "p3", name: "Wire Terminal Kit", price: "R 450", imageSrc: "http://img.b2bpic.net/free-photo/various-nozzles-ratchets_23-2148180527.jpg?_wi=2"},
{ id: "p1", name: "Power Drill Kit", price: "R 1,299", imageSrc: "http://img.b2bpic.net/free-photo/creative-man-working-wood-workshop_23-2148970802.jpg?_wi=2" },
{ id: "p2", name: "Paint Sprayer", price: "R 850", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-painting-brushes-with-paint-cans_23-2148591316.jpg?_wi=2" },
{ id: "p3", name: "Tool Set", price: "R 450", imageSrc: "http://img.b2bpic.net/free-photo/various-nozzles-ratchets_23-2148180527.jpg?_wi=2" },
]}
/>
</div>
@@ -132,46 +106,26 @@ export default function LandingPage() {
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "plain"}}
tag="Get in Touch"
title="Need a Quote or Advice?"
description="Message us on WhatsApp or give us a call at 087 093 4417. We're here to help get your project moving."
background={{ variant: "plain" }}
tag="Let's Connect"
title="Need Expert Hardware Advice?"
description="As a local family business, we take pride in helping you succeed. Message our team on WhatsApp for professional support."
buttons={[
{
text: "WhatsApp Support", href: "https://wa.me/27870934417"},
{
text: "Call Now", href: "tel:0870934417"},
{ text: "Chat via WhatsApp", href: "https://wa.me/27870934417" },
{ text: "Give us a Call", href: "tel:0870934417" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Tradesman Hardware"
<FooterSimple
columns={[
{
title: "Store", items: [
{
label: "About Us", href: "#about"},
{
label: "Delivery Info", href: "#"},
{
label: "Returns Policy", href: "#"},
],
},
{
title: "Support", items: [
{
label: "Contact Us", href: "#contact"},
{
label: "WhatsApp", href: "https://wa.me/27870934417"},
{
label: "Terms & Conditions", href: "#"},
],
},
{ title: "Hardware Store", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }] },
{ title: "Support", items: [{ label: "Delivery Info", href: "#" }, { label: "Help Center", href: "#" }] },
{ title: "Legal", items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] }
]}
copyrightText="© 2025 Tradesman Hardware. All rights reserved."
bottomLeftText="© 2025 Tradesman Hardware - Family Owned Since 1995"
bottomRightText="Made with love in Cape Town"
/>
</div>
</ReactLenis>

15
src/app/policy/page.tsx Normal file
View File

@@ -0,0 +1,15 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import LegalSection from '@/components/legal/LegalSection';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
export default function PolicyPage() {
return (
<ThemeProvider>
<div id="nav"><NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}, {name: "Policy", id: "/policy"}]} brandName="Tradesman Hardware" /></div>
<LegalSection layout="page" title="Terms & Policy" sections={[{heading: "Policies", content: {type: 'paragraph', text: "Standard hardware store policies apply."}}]} />
<FooterBaseCard logoText="Tradesman Hardware" columns={[{title: "Links", items: [{label: "Home", href: "/"}]}]} />
</ThemeProvider>
);
}

View File

@@ -0,0 +1,29 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
export default function ProductDetailPage({ params }: { params: { id: string } }) {
return (
<ThemeProvider>
<ReactLenis root>
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "About", id: "/#about" },
{ name: "Contact", id: "/#contact" },
]}
brandName="Tradesman Hardware"
/>
<div className="pt-40 pb-20 px-8">
<h1 className="text-4xl font-bold mb-4">Product Detail: {params.id}</h1>
<p>Product description, price details, and specification list will be displayed here.</p>
</div>
<FooterBaseCard logoText="Tradesman Hardware" columns={[]} />
</ReactLenis>
</ThemeProvider>
);
}

39
src/app/shop/page.tsx Normal file
View File

@@ -0,0 +1,39 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
export default function ShopPage() {
return (
<ThemeProvider>
<ReactLenis root>
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "About", id: "/#about" },
{ name: "Contact", id: "/#contact" },
]}
brandName="Tradesman Hardware"
/>
<div className="pt-32 pb-20">
<ProductCardTwo
title="Our Product Catalog"
description="Browse our full selection of professional-grade hardware and tools."
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
products={[
{ id: "s1", brand: "ProSeries", name: "Heavy Duty Drill", price: "R 2,499", rating: 5, reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/creative-man-working-wood-workshop_23-2148970802.jpg" },
{ id: "s2", brand: "PaintMaster", name: "Industrial Sprayer", price: "R 1,850", rating: 4, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-painting-brushes-with-paint-cans_23-2148591316.jpg" },
]}
textboxLayout="default"
/>
</div>
<FooterBaseCard logoText="Tradesman Hardware" columns={[]} />
</ReactLenis>
</ThemeProvider>
);
}