From 944066c42fa0d062c94d84d10adc05a68da7c222 Mon Sep 17 00:00:00 2001
From: JohannesOmsDev <johannesm@oms.africa>
Date: Wed, 28 May 2025 10:18:17 +0200
Subject: [PATCH] update contact phone number and button variant in
 CallToActionSection

---
 app/(website)/_components/CallToActionSection.tsx | 2 +-
 app/(website)/contact/page.tsx                    | 4 ++--
 components/Footer.tsx                             | 4 ++--
 components/ui/Button.tsx                          | 3 ++-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/(website)/_components/CallToActionSection.tsx b/app/(website)/_components/CallToActionSection.tsx
index 7f92b0f..b9b8991 100644
--- a/app/(website)/_components/CallToActionSection.tsx
+++ b/app/(website)/_components/CallToActionSection.tsx
@@ -30,7 +30,7 @@ const CallToActionSection: React.FC<CallToActionSectionProps> = ({
         </p>{" "}
         {/* Slightly less emphasis */}
         {/* Button needs contrast on primary bg. Use a secondary/outline/custom variant */}
-        <Button href={buttonHref} variant="secondary" size="lg">
+        <Button href={buttonHref} variant="black" size="lg" >
           {/* Example: Using 'secondary' which uses light/dark gray bg defined in globals */}
           {/* OR custom class: className="bg-background text-foreground hover:bg-background/90" */}
           {buttonText}
diff --git a/app/(website)/contact/page.tsx b/app/(website)/contact/page.tsx
index 67c5b9a..0fff339 100644
--- a/app/(website)/contact/page.tsx
+++ b/app/(website)/contact/page.tsx
@@ -130,10 +130,10 @@ export default function ContactPage() {
                     Phone
                   </h3>
                   <a
-                    href="tel:+27120513282"
+                    href="tel:+27684855721"
                     className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm font-poppins"
                   >
-                    (012) 051 3282
+                    +27 68 485 5721
                   </a>
                 </div>
               </div>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 1a0b3e1..09cffe9 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -114,8 +114,8 @@ const Footer = () => {
             </address>
             <p className="text-sm text-[var(--oms-white)]/80 mb-2">
               Phone:{" "}
-              <a href="tel:+27120513282" className="hover:text-primary">
-                (012) 051 3282
+              <a href="tel:+27684855721" className="hover:text-primary">
+                +27 68 485 5721
               </a>
             </p>
             <p className="text-sm text-[var(--oms-white)]/80 mb-2">
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index de0253c..7ff2045 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string;
-  variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive"; // Added more variants
+  variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | "black";
   size?: "sm" | "md" | "lg";
   children: React.ReactNode;
   className?: string;
@@ -34,6 +34,7 @@ const Button: React.FC<ButtonProps> = ({
       "bg-destructive text-destructive-foreground hover:bg-destructive/90",
       //linear-gradient(to right, #ead566, #e0be45) created using Tailwind's gradient utilities
       //i want that variant
+      black:"inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 dark:bg-gray-900 dark:hover:bg-black transition-colors duration-300 font-poppins",
   };
 
   const sizeStyles = {