From 732bebcbd0d94bcbeffd969fa9232cf3f91de23c Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 12 Mar 2026 14:21:18 +0000
Subject: [PATCH] Add src/app/services/page.tsx

---
 src/app/services/page.tsx | 367 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 367 insertions(+)
 create mode 100644 src/app/services/page.tsx

diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
new file mode 100644
index 0000000..3a9efad
--- /dev/null
+++ b/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",              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>
+  );
+}
\ No newline at end of file