Update src/app/services/page.tsx

Merge version_1 into main

src/app/about/page.tsx

@@ -3,10 +3,13 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
 import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
+import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import { Heart } from "lucide-react";
+import Link from "next/link";
+import { Heart, Users } from "lucide-react";
 
 export default function AboutPage() {
   return (
@@ -27,77 +30,121 @@ export default function AboutPage() {
           brandName="Sekelbossie @ Sononder"
           navItems={[
             { name: "Home", id: "/" },
-            { name: "Firewood", id: "firewood" },
-            { name: "Cupcakes", id: "/cupcakes" },
+            { name: "Services", id: "/services" },
             { name: "About", id: "/about" },
             { name: "Contact", id: "contact" },
           ]}
         />
       </div>
 
-      <div id="about-hero" data-section="about-hero">
+      <div id="hero" data-section="hero">
         <HeroBillboardGallery
           title="About Sekelbossie @ Sononder"
-          description="A family-owned farm business in Doornhoek, Thabazimbi, dedicated to providing the community with quality firewood and fresh homemade cupcakes."
-          tag="Family Farm Business"
+          description="A local farm business dedicated to quality products and community connections"
+          tag="Our Story"
           tagIcon={Heart}
           tagAnimation="slide-up"
           background={{ variant: "plain" }}
           mediaItems={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-view-daisy-mountain-landscape-with-green-grass-park-foreground_181624-50333.jpg?_wi=3",              imageAlt: "Our farm location"},
+              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-view-daisy-mountain-landscape-with-green-grass-park-foreground_181624-50333.jpg?_wi=1",              imageAlt: "Sekelbossie farm landscape"},
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-wood-chopping-axes_23-2148568602.jpg?_wi=2",              imageAlt: "Premium firewood"},
+              imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15599.jpg?_wi=1",              imageAlt: "Quality stacked firewood"},
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/delicious-rainbow-cupcake-still-life_23-2150423818.jpg?_wi=3",              imageAlt: "Fresh cupcakes"},
+              imageSrc: "http://img.b2bpic.net/free-photo/delicious-rainbow-cupcake-still-life_23-2150423818.jpg?_wi=1",              imageAlt: "Fresh homemade cupcakes"},
           ]}
           mediaAnimation="slide-up"
           buttons={[
             {
-              text: "Get to Know Us",              href: "contact"},
-            {
-              text: "Visit Our Farm",              href: "tel:0832619619"},
+              text: "Call to Order: 083 261 9619",              href: "tel:0832619619"},
           ]}
           buttonAnimation="slide-up"
         />
       </div>
 
-      <div id="about-values" data-section="about-values">
+      <div id="about" data-section="about">
+        <MetricSplitMediaAbout
+          tag="Meet Cindy Jacobs"
+          tagIcon={Users}
+          title="Our Farm, Our Passion"
+          description="Cindy Jacobs has been running Sekelbossie @ Sononder with dedication and expertise. With over 15 years of experience in farm products and customer service, Cindy is committed to bringing the highest quality firewood and homemade cupcakes to the Thabazimbi community. Her passion for local business and community connection drives every decision we make."
+          metrics={[
+            { value: "15+", title: "Years of Experience" },
+            { value: "1000+", title: "Happy Customers" },
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/close-up-photo-bearded-guy-smiling-gesturing-with-ok-sign-expressing-good-choice-being-isolated-graphite_171337-455.jpg?_wi=1"
+          imageAlt="Cindy Jacobs at Sekelbossie farm"
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
+        />
+      </div>
+
+      <div id="mission" data-section="mission">
         <FeatureCardTwentySeven
-          title="Our Core Values"
+          title="Our Mission & Values"
           description="What drives us to deliver excellence every single day"
           features={[
             {
               id: "1",              title: "Quality First",              descriptions: [
-                "We never compromise on the quality of our products",                "Firewood is properly seasoned and dried for optimal performance",                "Cupcakes are baked fresh daily with premium ingredients"],
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-wood-chopping-axes_23-2148568602.jpg?_wi=3",              imageAlt: "Quality firewood inspection"},
+                "Every product is carefully selected and prepared",                "We maintain strict quality standards",                "Your satisfaction is our top priority"],
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-wood-chopping-axes_23-2148568602.jpg?_wi=1",              imageAlt: "Quality firewood selection"},
             {
               id: "2",              title: "Community Connection",              descriptions: [
-                "Supporting local families and businesses is our mission",                "We take pride in being part of the Thabazimbi community",                "Fair pricing that values both our products and our customers"],
-              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-view-daisy-mountain-landscape-with-green-grass-park-foreground_181624-50333.jpg?_wi=4",              imageAlt: "Our community farm"},
+                "Supporting local families and businesses",                "Building lasting relationships with our customers",                "Contributing to Thabazimbi's growth"],
+              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-view-daisy-mountain-landscape-with-green-grass-park-foreground_181624-50333.jpg?_wi=2",              imageAlt: "Community at Sekelbossie"},
             {
-              id: "3",              title: "Authentic & Trusted",              descriptions: [
-                "Built on honesty, reliability, and authentic service",                "Years of experience delivering exceptional products",                "Customer satisfaction is our greatest achievement"],
-              imageSrc: "http://img.b2bpic.net/free-photo/cupcakes-pine-cone-platter-garland-baubles-marble-surface_114579-25521.jpg?_wi=4",              imageAlt: "Authentic farm products"},
+              id: "3",              title: "Professional Excellence",              descriptions: [
+                "Trained and dedicated staff",                "Reliable delivery and service",                "Professional business practices"],
+              imageSrc: "http://img.b2bpic.net/free-photo/cupcakes-decorated-whipped-cream-frozen-raspberries_114579-7868.jpg?_wi=1",              imageAlt: "Professional cupcake creation"},
+            {
+              id: "4",              title: "Fresh & Natural",              descriptions: [
+                "All cupcakes baked fresh daily",                "Only quality ingredients used",                "No compromise on taste or quality"],
+              imageSrc: "http://img.b2bpic.net/free-photo/cupcakes-pine-cone-platter-garland-baubles-marble-surface_114579-25521.jpg?_wi=1",              imageAlt: "Fresh baked cupcakes"},
           ]}
-          gridVariant="three-columns-all-equal-width"
+          gridVariant="four-items-2x2-equal-grid"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="about-cta" data-section="about-cta">
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardSix
+          title="Community Testimonials"
+          description="What our neighbors say about Sekelbossie @ Sononder"
+          testimonials={[
+            {
+              id: "1",              name: "Maria van der Merwe",              handle: "Local Family",              testimonial: "Cindy's commitment to quality is remarkable. Her firewood burns beautifully and her cupcakes are the star of every event!",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-photo-bearded-guy-smiling-gesturing-with-ok-sign-expressing-good-choice-being-isolated-graphite_171337-455.jpg?_wi=1",              imageAlt: "Maria van der Merwe"},
+            {
+              id: "2",              name: "Johannes Botha",              handle: "Event Organizer",              testimonial: "I've worked with Cindy for years. She brings professionalism and passion to everything she does.",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg?_wi=1",              imageAlt: "Johannes Botha"},
+            {
+              id: "3",              name: "Thandi Mthembu",              handle: "Regular Customer",              testimonial: "More than just a vendor, Cindy is part of our community. She genuinely cares about her customers.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-casually-dressed-young-woman-with-wavy-hair-no-make-up-sitting-basket-armchair_343059-361.jpg?_wi=1",              imageAlt: "Thandi Mthembu"},
+            {
+              id: "4",              name: "Robert Wessels",              handle: "Business Owner",              testimonial: "Cindy's professionalism and consistency have made her our preferred supplier for years.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-with-disposable-coffee-cup_107420-12311.jpg?_wi=1",              imageAlt: "Robert Wessels"},
+            {
+              id: "5",              name: "Lerato Dlamini",              handle: "Birthday Party Host",              testimonial: "Cindy goes above and beyond. She helped plan a perfect surprise party with her amazing cupcakes.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-photo-bearded-guy-smiling-gesturing-with-ok-sign-expressing-good-choice-being-isolated-graphite_171337-455.jpg?_wi=2",              imageAlt: "Lerato Dlamini"},
+            {
+              id: "6",              name: "Piet Steenkamp",              handle: "Homeowner",              testimonial: "Supporting Cindy's business means supporting our local community. Highly recommended!",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg?_wi=2",              imageAlt: "Piet Steenkamp"},
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          speed={40}
+        />
+      </div>
+
+      <div id="contact-cta" data-section="contact-cta">
         <ContactText
-          text="Join our growing family of satisfied customers. Experience the quality and warmth that Sekelbossie @ Sononder brings to the Thabazimbi community every day."
+          text="Ready to experience Sekelbossie @ Sononder? Contact Cindy today at 083 261 9619 to place your order or learn more about our products and services."
           animationType="entrance-slide"
           background={{ variant: "plain" }}
           useInvertedBackground={false}
           buttons={[
             {
-              text: "Order Today",              href: "tel:0832619619"},
+              text: "Call Now",              href: "tel:0832619619"},
             {
-              text: "Get in Touch",              href: "contact"},
+              text: "Visit Services",              href: "/services"},
           ]}
         />
       </div>
@@ -107,8 +154,7 @@ export default function AboutPage() {
           columns={[
             {
               title: "Products",              items: [
-                { label: "Firewood", href: "firewood" },
-                { label: "Cupcakes", href: "/cupcakes" },
+                { label: "Services", href: "/services" },
                 { label: "Order Now", href: "contact" },
               ],
             },
@@ -116,7 +162,6 @@ export default function AboutPage() {
               title: "Company",              items: [
                 { label: "About Us", href: "/about" },
                 { label: "Contact", href: "contact" },
-                { label: "Location", href: "#" },
               ],
             },
             {

src/app/contact/page.tsx

@@ -1,46 +1,22 @@
 "use client";
 
-import Link from "next/link";
+import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { Phone, MapPin } from "lucide-react";
 
 export default function ContactPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Firewood", id: "firewood" },
-    { name: "Cupcakes", id: "cupcakes" },
-    { name: "About", id: "about" },
-    { name: "Contact", id: "contact" },
-  ];
+  const [submitMessage, setSubmitMessage] = useState("");
 
-  const footerColumns = [
-    {
-      title: "Products",
-      items: [
-        { label: "Firewood", href: "firewood" },
-        { label: "Cupcakes", href: "cupcakes" },
-        { label: "Order Now", href: "contact" },
-      ],
-    },
-    {
-      title: "Company",
-      items: [
-        { label: "About Us", href: "about" },
-        { label: "Contact", href: "contact" },
-        { label: "Location", href: "#" },
-      ],
-    },
-    {
-      title: "Contact",
-      items: [
-        { label: "Phone: 083 261 9619", href: "tel:0832619619" },
-        { label: "Doornhoek, Thabazimbi 0380", href: "#" },
-        { label: "Open until 17:00 daily", href: "#" },
-      ],
-    },
-  ];
+  const handleFormSubmit = (data: Record<string, string>) => {
+    console.log("Form submitted:", data);
+    setSubmitMessage("Thank you! Your booking request has been received. We will contact you shortly to confirm.");
+    setTimeout(() => setSubmitMessage(""), 5000);
+  };
 
   return (
     <ThemeProvider
@@ -49,7 +25,7 @@ export default function ContactPage() {
       borderRadius="pill"
       contentWidth="small"
       sizing="mediumLargeSizeMediumTitles"
-      background="noise"
+      background="circleGradient"
       cardStyle="gradient-radial"
       primaryButtonStyle="primary-glow"
       secondaryButtonStyle="solid"
@@ -58,27 +34,206 @@ export default function ContactPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleApple
           brandName="Sekelbossie @ Sononder"
-          navItems={navItems}
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Gallery", id: "/gallery" },
+            { name: "Reviews", id: "/reviews" },
+            { name: "Contact", id: "/contact" }
+          ]}
         />
       </div>
 
+      <div id="hero" data-section="hero">
+        <HeroBillboardGallery
+          title="Contact & Booking"
+          description="Get in touch with us to schedule your hair transformation appointment. We're here to help!"
+          tag="Contact Us"
+          tagIcon={Phone}
+          tagAnimation="slide-up"
+          background={{ variant: "plain" }}
+          mediaItems={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/salon-interior-professional-setup_23-2150428678.jpg?_wi=1",              imageAlt: "Professional salon interior"
+            }
+          ]}
+          mediaAnimation="slide-up"
+          buttons={[
+            {
+              text: "Call Now",              href: "tel:+27832619619"
+            }
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="contact-form" data-section="contact-form">
+        <ContactSplitForm
+          title="Book Your Hair Appointment"
+          description="Fill out the form below to request a booking. We'll contact you shortly to confirm your appointment time."
+          inputs={[
+            {
+              name: "name",              type: "text",              placeholder: "Your Full Name",              required: true
+            },
+            {
+              name: "phone",              type: "tel",              placeholder: "Your Phone Number",              required: true
+            },
+            {
+              name: "email",              type: "email",              placeholder: "Your Email Address",              required: true
+            },
+            {
+              name: "service",              type: "text",              placeholder: "Service Requested (e.g., Blonde Highlights, Color Correction, Styling)",              required: true
+            },
+            {
+              name: "preferredDate",              type: "date",              placeholder: "Preferred Date",              required: true
+            }
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Tell us about your hair goals and any specific requirements...",            rows: 5,
+            required: false
+          }}
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/free-photo/stylist-working-with-client_23-2150428890.jpg?_wi=1"
+          imageAlt="Professional hair stylist at work"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          buttonText="Request Booking"
+          onSubmit={handleFormSubmit}
+        />
+      </div>
+
+      <div id="location-info" data-section="location-info" className="py-16 px-4">
+        <div className="max-w-4xl mx-auto bg-card rounded-lg p-8">
+          <h2 className="text-3xl md:text-4xl font-bold mb-8 text-foreground">Location & Hours</h2>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+            <div>
+              <div className="flex items-center gap-3 mb-4">
+                <MapPin className="w-6 h-6 text-primary-cta" />
+                <h3 className="text-xl font-semibold text-foreground">Our Location</h3>
+              </div>
+              <p className="text-foreground text-lg mb-2">Thabazimbi, South Africa</p>
+              <p className="text-foreground/80">Professional hair salon serving the Thabazimbi community with expert hair transformation services.</p>
+            </div>
+            
+            <div>
+              <div className="flex items-center gap-3 mb-4">
+                <Phone className="w-6 h-6 text-primary-cta" />
+                <h3 className="text-xl font-semibold text-foreground">Contact Information</h3>
+              </div>
+              <p className="text-foreground text-lg mb-2 font-semibold">Phone: +27 83 261 9619</p>
+              <p className="text-foreground/80 mb-4">Click the button below to call us directly</p>
+              <a 
+                href="tel:+27832619619" 
+                className="inline-block bg-primary-cta text-primary-cta-text px-6 py-2 rounded-lg font-semibold hover:opacity-90 transition-opacity"
+              >
+                Click to Call
+              </a>
+            </div>
+          </div>
+          
+          <div className="border-t border-accent pt-8 mt-8">
+            <h3 className="text-xl font-semibold text-foreground mb-4">Booking Policy</h3>
+            <ul className="space-y-3 text-foreground/80">
+              <li className="flex items-start gap-3">
+                <span className="text-primary-cta font-bold mt-1">•</span>
+                <span><strong>Advance Booking:</strong> We recommend booking at least 2-3 days in advance to ensure availability for your preferred date and time.</span>
+              </li>
+              <li className="flex items-start gap-3">
+                <span className="text-primary-cta font-bold mt-1">•</span>
+                <span><strong>Cancellation Policy:</strong> Please notify us at least 24 hours in advance if you need to cancel or reschedule your appointment.</span>
+              </li>
+              <li className="flex items-start gap-3">
+                <span className="text-primary-cta font-bold mt-1">•</span>
+                <span><strong>Consultation:</strong> A brief consultation is recommended before your first appointment to discuss your hair goals and concerns.</span>
+              </li>
+              <li className="flex items-start gap-3">
+                <span className="text-primary-cta font-bold mt-1">•</span>
+                <span><strong>Payment:</strong> Payment is due on the day of service. We accept cash and card payments.</span>
+              </li>
+              <li className="flex items-start gap-3">
+                <span className="text-primary-cta font-bold mt-1">•</span>
+                <span><strong>Deposit:</strong> A deposit may be required for specialized services. We'll confirm this when you book.</span>
+              </li>
+              <li className="flex items-start gap-3">
+                <span className="text-primary-cta font-bold mt-1">•</span>
+                <span><strong>Hair Care Recommendations:</strong> We'll provide aftercare instructions to help maintain your new look and keep your hair healthy.</span>
+              </li>
+              <li className="flex items-start gap-3">
+                <span className="text-primary-cta font-bold mt-1">•</span>
+                <span><strong>Follow-up Visits:</strong> Many services benefit from follow-up appointments. We'll recommend the best schedule for your hair health.</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+        {submitMessage && (
+          <div className="mt-8 max-w-4xl mx-auto bg-accent/20 border border-primary-cta rounded-lg p-4 text-center text-foreground">
+            {submitMessage}
+          </div>
+        )}
+      </div>
+
+      <div id="google-maps" data-section="google-maps" className="py-16 px-4">
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-3xl md:text-4xl font-bold mb-8 text-foreground text-center">Find Us</h2>
+          <div className="bg-card rounded-lg overflow-hidden shadow-lg h-96 md:h-[500px]">
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3609.7633842147356!2d27.416666!3d-24.566667!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1e3e3e3e3e3e3e3d%3A0x0!2sThabazimbi%2C%20South%20Africa!5e0!3m2!1sen!2sza!4v1234567890"
+              width="100%"
+              height="100%"
+              style={{ border: 0 }}
+              allowFullScreen={true}
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+              title="Hair Salon Location in Thabazimbi"
+            />
+          </div>
+          <p className="text-center text-foreground/80 mt-4">Our professional hair salon is located in Thabazimbi, ready to serve you with expert hair transformation services.</p>
+        </div>
+      </div>
+
       <div id="contact-cta" data-section="contact-cta">
         <ContactText
-          text="Ready to order? Call us today at 083 261 9619 or submit an order form. We're open until 17:00 daily."
+          text="Have questions? Call us directly at 083 261 9619 or use the form above to request a booking."
           animationType="entrance-slide"
           background={{ variant: "plain" }}
           useInvertedBackground={false}
           buttons={[
-            { text: "Call Now", href: "tel:0832619619" },
-            { text: "Order Form", href: "contact" },
+            {
+              text: "Call Now",              href: "tel:+27832619619"
+            },
+            {
+              text: "View Gallery",              href: "/gallery"
+            }
           ]}
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterBaseReveal
-          columns={footerColumns}
-          copyrightText="© 2025 Sekelbossie @ Sononder | Local Farm Business"
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "Gallery", href: "/gallery" },
+                { label: "Hair Services", href: "/gallery" },
+                { label: "Booking", href: "/contact" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "Home", href: "/" },
+                { label: "Reviews", href: "/reviews" },
+                { label: "Contact", href: "/contact" }
+              ]
+            },
+            {
+              title: "Contact",              items: [
+                { label: "Phone: +27 83 261 9619", href: "tel:+27832619619" },
+                { label: "Thabazimbi, South Africa", href: "#" },
+                { label: "Professional Hair Salon", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Hair Salon - Professional Transformations"
         />
       </div>
     </ThemeProvider>

src/app/gallery/page.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
+import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { Sparkles } from "lucide-react";
+
+export default function GalleryPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Sekelbossie @ Sononder"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Gallery", id: "/gallery" },
+            { name: "Reviews", id: "/reviews" },
+            { name: "Contact", id: "/contact" },
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardGallery
+          title="Hair Transformation Gallery"
+          description="See our stunning before and after results showcasing expert hair transformations, blonde highlights, color corrections, and professional styling."
+          tag="Gallery"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          background={{ variant: "plain" }}
+          mediaItems={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/blonde-hair-salon-beauty-treatment_23-2150424895.jpg?_wi=1",              imageAlt: "Before and after blonde highlights transformation"
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/hair-color-palette-salon-professional_23-2150425123.jpg?_wi=1",              imageAlt: "Color correction results"
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/professional-hair-styling-salon-interior_23-2150425456.jpg?_wi=1",              imageAlt: "Professional hair styling examples"
+            }
+          ]}
+          mediaAnimation="slide-up"
+          buttons={[
+            {
+              text: "Book a Consultation",              href: "/contact"
+            }
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardTwentySeven
+          title="Our Hair Transformation Services"
+          description="Expert hair care and styling transformations that bring out your best look"
+          features={[
+            {
+              id: "1",              title: "Blonde Highlights",              descriptions: [
+                "Expert blonde highlight application using premium products",                "Custom color matching for your skin tone",                "Beautiful dimension and natural-looking results"
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-hair-highlights-salon_23-2150425789.jpg?_wi=1",              imageAlt: "Blonde highlights transformation"
+            },
+            {
+              id: "2",              title: "Color Correction",              descriptions: [
+                "Professional color correction for damaged or uneven color",                "Restore hair health while achieving desired color",                "Expert assessment and personalized treatment plan"
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/hair-color-correction-before-after_23-2150426012.jpg?_wi=1",              imageAlt: "Color correction results"
+            },
+            {
+              id: "3",              title: "Professional Styling",              descriptions: [
+                "Custom styling for any occasion",                "Expert cutting and shaping techniques",                "Styling tips and product recommendations"
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/professional-hair-styling-transformation_23-2150426234.jpg?_wi=1",              imageAlt: "Professional styling examples"
+            },
+            {
+              id: "4",              title: "Hair Health & Treatment",              descriptions: [
+                "Deep conditioning and restorative treatments",                "Hair repair and strengthening services",                "Maintenance tips for long-lasting results"
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/hair-treatment-care-salon_23-2150426456.jpg?_wi=1",              imageAlt: "Hair treatment and care"
+            }
+          ]}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactText
+          text="Ready to transform your hair? Schedule your consultation today and let our experts create your perfect look."
+          animationType="entrance-slide"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          buttons={[
+            {
+              text: "Book Now",              href: "/contact"
+            },
+            {
+              text: "View Reviews",              href: "/reviews"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "Gallery", href: "/gallery" },
+                { label: "Blonde Highlights", href: "/gallery" },
+                { label: "Color Correction", href: "/gallery" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "Home", href: "/" },
+                { label: "Reviews", href: "/reviews" },
+                { label: "Contact", href: "/contact" }
+              ]
+            },
+            {
+              title: "Contact",              items: [
+                { label: "Book Consultation", href: "/contact" },
+                { label: "Thabazimbi", href: "#" },
+                { label: "Professional Hair Salon", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Hair Salon - Professional Transformations"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -32,7 +32,7 @@ export default function HomePage() {
             { name: "Firewood", id: "firewood" },
             { name: "Cupcakes", id: "/cupcakes" },
             { name: "About", id: "/about" },
-            { name: "Contact", id: "contact" },
+            { name: "Contact", id: "/contact" },
           ]}
         />
       </div>
@@ -47,7 +47,7 @@ export default function HomePage() {
           background={{ variant: "plain" }}
           mediaItems={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15599.jpg",              imageAlt: "Quality stacked firewood"},
+              imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15599.jpg?_wi=2",              imageAlt: "Quality stacked firewood"},
             {
               imageSrc: "http://img.b2bpic.net/free-photo/delicious-rainbow-cupcake-still-life_23-2150423818.jpg?_wi=1",              imageAlt: "Fresh homemade cupcakes"},
             {
@@ -103,9 +103,9 @@ export default function HomePage() {
             {
               id: "2",              name: "Johannes Botha",              handle: "Event Organizer",              testimonial: "The cupcakes are absolutely delicious and beautifully made. Every event I organize gets them!",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg?_wi=1",              imageAlt: "Johannes Botha"},
             {
-              id: "3",              name: "Thandi Mthembu",              handle: "Regular Customer",              testimonial: "Fast service, friendly people, and consistently great products. This is my go-to place for both firewood and treats.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-casually-dressed-young-woman-with-wavy-hair-no-make-up-sitting-basket-armchair_343059-361.jpg",              imageAlt: "Thandi Mthembu"},
+              id: "3",              name: "Thandi Mthembu",              handle: "Regular Customer",              testimonial: "Fast service, friendly people, and consistently great products. This is my go-to place for both firewood and treats.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-casually-dressed-young-woman-with-wavy-hair-no-make-up-sitting-basket-armchair_343059-361.jpg?_wi=2",              imageAlt: "Thandi Mthembu"},
             {
-              id: "4",              name: "Robert Wessels",              handle: "Business Owner",              testimonial: "Reliable supplier. I've been ordering firewood for our restaurant's outdoor area for two years. Never disappointed!",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-with-disposable-coffee-cup_107420-12311.jpg",              imageAlt: "Robert Wessels"},
+              id: "4",              name: "Robert Wessels",              handle: "Business Owner",              testimonial: "Reliable supplier. I've been ordering firewood for our restaurant's outdoor area for two years. Never disappointed!",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-with-disposable-coffee-cup_107420-12311.jpg?_wi=2",              imageAlt: "Robert Wessels"},
             {
               id: "5",              name: "Lerato Dlamini",              handle: "Birthday Party Host",              testimonial: "Ordered 50 cupcakes for my daughter's party. Guests are still talking about how amazing they were!",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-photo-bearded-guy-smiling-gesturing-with-ok-sign-expressing-good-choice-being-isolated-graphite_171337-455.jpg?_wi=2",              imageAlt: "Lerato Dlamini"},
             {

src/app/reviews/page.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
+import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { Star } from "lucide-react";
+
+export default function ReviewsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Sekelbossie @ Sononder"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Gallery", id: "/gallery" },
+            { name: "Reviews", id: "/reviews" },
+            { name: "Contact", id: "/contact" }
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardGallery
+          title="Client Reviews & Testimonials"
+          description="Read verified testimonials from our satisfied clients who have experienced our professional hair transformation services."
+          tag="Reviews"
+          tagIcon={Star}
+          tagAnimation="slide-up"
+          background={{ variant: "plain" }}
+          mediaItems={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/happy-customer-salon-satisfied_23-2150427123.jpg?_wi=1",              imageAlt: "Satisfied client with beautiful hair transformation"
+            }
+          ]}
+          mediaAnimation="slide-up"
+          buttons={[
+            {
+              text: "Book Your Appointment",              href: "/contact"
+            }
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardSix
+          title="What Our Clients Say"
+          description="Verified client testimonials from real hair transformations"
+          testimonials={[
+            {
+              id: "1",              name: "Sarah Johnson",              handle: "Verified Client",              testimonial: "The blonde highlights look absolutely stunning! The stylist really understood my vision and executed it perfectly. I'm so happy with the results!",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-woman-blonde-hair_23-2150427456.jpg?_wi=1",              imageAlt: "Sarah with blonde highlights",              icon: Star
+            },
+            {
+              id: "2",              name: "Emma Williams",              handle: "Verified Client",              testimonial: "I had damaged hair from previous color treatments. The color correction work was amazing - my hair is healthy again and looks beautiful!",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-healthy-hair_23-2150427678.jpg?_wi=1",              imageAlt: "Emma with corrected hair",              icon: Star
+            },
+            {
+              id: "3",              name: "Jessica Chen",              handle: "Verified Client",              testimonial: "Best haircut and styling I've ever had! The stylist listened to exactly what I wanted and delivered beyond my expectations.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-styled-hair_23-2150427890.jpg?_wi=1",              imageAlt: "Jessica with professional styling",              icon: Star
+            },
+            {
+              id: "4",              name: "Amanda Davis",              handle: "Verified Client",              testimonial: "The hair treatment and deep conditioning made such a difference. My hair feels so much softer and looks shinier than ever!",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-shiny-hair_23-2150428012.jpg?_wi=1",              imageAlt: "Amanda with healthy shiny hair",              icon: Star
+            },
+            {
+              id: "5",              name: "Michelle Roberts",              handle: "Verified Client",              testimonial: "Professional, friendly, and talented! They really care about your hair health. Can't recommend them enough!",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-beautiful-hair_23-2150428234.jpg?_wi=1",              imageAlt: "Michelle with beautiful hair",              icon: Star
+            },
+            {
+              id: "6",              name: "Lisa Anderson",              handle: "Verified Client",              testimonial: "My hair transformation exceeded all my expectations. The team is knowledgeable and truly dedicated to making you feel beautiful!",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-glowing-hair_23-2150428456.jpg?_wi=1",              imageAlt: "Lisa with transformed hair",              icon: Star
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          speed={40}
+        />
+      </div>
+
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactText
+          text="Join our satisfied clients and experience your own hair transformation. Schedule your appointment today!"
+          animationType="entrance-slide"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          buttons={[
+            {
+              text: "Book Consultation",              href: "/contact"
+            },
+            {
+              text: "View Gallery",              href: "/gallery"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "Gallery", href: "/gallery" },
+                { label: "Hair Styling", href: "/gallery" },
+                { label: "Color Services", href: "/gallery" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "Home", href: "/" },
+                { label: "Reviews", href: "/reviews" },
+                { label: "Contact", href: "/contact" }
+              ]
+            },
+            {
+              title: "Contact",              items: [
+                { label: "Book Now", href: "/contact" },
+                { label: "Thabazimbi", href: "#" },
+                { label: "Professional Hair Salon", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Hair Salon - Professional Transformations"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/services/page.tsx

@@ -0,0 +1,367 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
+import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { Sparkles } from "lucide-react";
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Sekelbossie @ Sononder"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "contact" },
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardGallery
+          title="Our Premium Services"
+          description="Quality firewood and fresh homemade cupcakes tailored to your needs"
+          tag="Services"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          background={{ variant: "plain" }}
+          mediaItems={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15599.jpg?_wi=3",              imageAlt: "Quality stacked firewood"},
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/delicious-rainbow-cupcake-still-life_23-2150423818.jpg?_wi=1",              imageAlt: "Fresh homemade cupcakes"},
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-view-daisy-mountain-landscape-with-green-grass-park-foreground_181624-50333.jpg?_wi=1",              imageAlt: "Sekelbossie farm"},
+          ]}
+          mediaAnimation="slide-up"
+          buttons={[
+            {
+              text: "Call to Order: 083 261 9619",              href: "tel:0832619619"},
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="haircuts" data-section="haircuts">
+        <PricingCardTwo
+          title="Haircuts"
+          description="Professional haircut services for all hair types and styles"
+          tag="Hair Services"
+          tagIcon={Sparkles}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          plans={[
+            {
+              id: "1",              badge: "Gentleman's Cut",              badgeIcon: Sparkles,
+              price: "$25-35",              subtitle: "Classic and contemporary cuts",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Professional styling",                "Quality grooming tools",                "Personalized attention"],
+            },
+            {
+              id: "2",              badge: "Ladies' Cut",              badgeIcon: Sparkles,
+              price: "$35-50",              subtitle: "Trendy and elegant cuts",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Latest trends & styles",                "Expert styling consultation",                "Premium hair care"],
+            },
+            {
+              id: "3",              badge: "Kids' Cut",              badgeIcon: Sparkles,
+              price: "$15-25",              subtitle: "Fun and safe haircuts",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Gentle and patient service",                "Age-appropriate styles",                "Quick and comfortable"],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="color-services" data-section="color-services">
+        <PricingCardTwo
+          title="Color Services"
+          description="Professional hair coloring and tinting services"
+          tag="Color & Tinting"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          plans={[
+            {
+              id: "1",              badge: "Single Color",              badgeIcon: Sparkles,
+              price: "$40-60",              subtitle: "Solid color application",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Professional color matching",                "Quality color products",                "Long-lasting results"],
+            },
+            {
+              id: "2",              badge: "Highlights & Lowlights",              badgeIcon: Sparkles,
+              price: "$50-80",              subtitle: "Dimensional color effects",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Custom color placement",                "Dimensional styling",                "Expert color blending"],
+            },
+            {
+              id: "3",              badge: "Root Touch-Up",              badgeIcon: Sparkles,
+              price: "$30-45",              subtitle: "Maintain your color",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Perfect color match",                "Quick service",                "Affordable maintenance"],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="highlights-blonding" data-section="highlights-blonding">
+        <PricingCardTwo
+          title="Highlights & Blonding"
+          description="Premium highlighting and professional blonding services"
+          tag="Blonde Services"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          plans={[
+            {
+              id: "1",              badge: "Partial Highlights",              badgeIcon: Sparkles,
+              price: "$50-75",              subtitle: "Face-framing highlights",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Strategic placement",                "Brightening effect",                "Low maintenance"],
+            },
+            {
+              id: "2",              badge: "Full Highlights",              badgeIcon: Sparkles,
+              price: "$75-120",              subtitle: "Complete dimensional color",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "All-over highlights",                "Professional toning",                "Luxurious finish"],
+            },
+            {
+              id: "3",              badge: "Blonde Bliss Package",              badgeIcon: Sparkles,
+              price: "$100-150",              subtitle: "Premium blonde service",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Expert blonding",                "Toning included",                "Hair care treatment"],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="bleach-toner" data-section="bleach-toner">
+        <PricingCardTwo
+          title="Bleach & Toner Services"
+          description="Professional bleaching and toning for desired hair color"
+          tag="Advanced Services"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          plans={[
+            {
+              id: "1",              badge: "Bleaching Service",              badgeIcon: Sparkles,
+              price: "$60-90",              subtitle: "Professional lightening",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Gentle bleaching process",                "Hair health protection",                "Professional expertise"],
+            },
+            {
+              id: "2",              badge: "Toning Service",              badgeIcon: Sparkles,
+              price: "$30-50",              subtitle: "Perfect color tone",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Custom tone selection",                "Brassiness elimination",                "Vibrant results"],
+            },
+            {
+              id: "3",              badge: "Bleach + Tone Combo",              badgeIcon: Sparkles,
+              price: "$80-130",              subtitle: "Complete lightening & toning",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Professional combo service",                "Optimal color result",                "Hair care included"],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="hair-treatments" data-section="hair-treatments">
+        <PricingCardTwo
+          title="Hair Treatments"
+          description="Restorative and protective treatments for healthy, beautiful hair"
+          tag="Hair Care"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          plans={[
+            {
+              id: "1",              badge: "Deep Conditioning",              badgeIcon: Sparkles,
+              price: "$25-40",              subtitle: "Intensive moisture treatment",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Intensive hydration",                "Repair damaged hair",                "Restores shine"],
+            },
+            {
+              id: "2",              badge: "Keratin Treatment",              badgeIcon: Sparkles,
+              price: "$50-80",              subtitle: "Smoothing & strengthening",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Frizz reduction",                "Hair strengthening",                "Smooth, sleek finish"],
+            },
+            {
+              id: "3",              badge: "Scalp Treatment",              badgeIcon: Sparkles,
+              price: "$35-50",              subtitle: "Healthy scalp & hair growth",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Scalp cleansing",                "Hair growth promotion",                "Scalp health improvement"],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="special-styling" data-section="special-styling">
+        <PricingCardTwo
+          title="Special Styling"
+          description="Expert styling for special occasions and everyday elegance"
+          tag="Styling Services"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          plans={[
+            {
+              id: "1",              badge: "Bridal Hair",              badgeIcon: Sparkles,
+              price: "$75-120",              subtitle: "Wedding day perfection",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Custom bridal design",                "Consultation included",                "Trial session available"],
+            },
+            {
+              id: "2",              badge: "Event Styling",              badgeIcon: Sparkles,
+              price: "$50-90",              subtitle: "Elegant event hairstyles",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Professional updo styles",                "Trendy designs",                "Long-lasting hold"],
+            },
+            {
+              id: "3",              badge: "Blow-Dry Service",              badgeIcon: Sparkles,
+              price: "$25-40",              subtitle: "Professional blow-dry styling",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Expert styling",                "Volumizing technique",                "Salon-quality finish"],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="additional-services" data-section="additional-services">
+        <PricingCardTwo
+          title="Additional Beauty Services"
+          description="Complete beauty services beyond hair care"
+          tag="Beauty Services"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          plans={[
+            {
+              id: "1",              badge: "Makeup Application",              badgeIcon: Sparkles,
+              price: "$30-60",              subtitle: "Professional makeup artistry",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Custom makeup design",                "Professional products",                "Long-lasting application"],
+            },
+            {
+              id: "2",              badge: "Eyebrow & Lash Service",              badgeIcon: Sparkles,
+              price: "$20-45",              subtitle: "Brow shaping and lash services",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Expert eyebrow shaping",                "Lash tinting options",                "Natural enhancement"],
+            },
+            {
+              id: "3",              badge: "Package Deals",              badgeIcon: Sparkles,
+              price: "$100-200",              subtitle: "Full beauty transformation",              buttons: [
+                { text: "Book Appointment", href: "contact" },
+              ],
+              features: [
+                "Haircut + color service",                "Styling included",                "Special discount applied"],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactText
+          text="Ready to book your appointment? Contact us today at 083 261 9619 to schedule your service. We're open until 17:00 daily."
+          animationType="entrance-slide"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          buttons={[
+            {
+              text: "Call Now",              href: "tel:0832619619"},
+            {
+              text: "Contact Us",              href: "contact"},
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "Hair Services", href: "/services" },
+                { label: "Color Services", href: "/services" },
+                { label: "Treatments", href: "/services" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/about" },
+                { label: "Home", href: "/" },
+                { label: "Contact", href: "contact" },
+              ],
+            },
+            {
+              title: "Contact",              items: [
+                { label: "Phone: 083 261 9619", href: "tel:0832619619" },
+                { label: "Doornhoek, Thabazimbi 0380", href: "#" },
+                { label: "Open until 17:00 daily", href: "#" },
+              ],
+            },
+          ]}
+          copyrightText="© 2025 Sekelbossie @ Sononder | Local Farm Business"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
-  --card: #ffffff;
-  --foreground: #25190c;
-  --primary-cta: #ff6207;
+  --background: #f9f7f5;
+  --card: #fdfbf9;
+  --foreground: #3d2817;
+  --primary-cta: #d4a574;
   --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #fdfbf9;
   --secondary-cta-text: #25190c;
-  --accent: #ffce93;
-  --background-accent: #e8cfa8;
+  --accent: #e8d4c0;
+  --background-accent: #d9bfa0;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);