changes

components/sections/CtaBanner.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { Phone, ArrowRight } from "lucide-react";
 import { companyDetails } from "@/content/company";
 import { cn } from "@/lib/utils";
+import { buttonClasses } from "@/components/ui/Button";
 
 interface CtaBannerProps {
   title?: string;
@@ -56,26 +57,15 @@ export function CtaBanner({
             </p>
           </div>
           <div className="flex flex-col sm:flex-row items-center gap-4 mt-8 w-full sm:w-auto shrink-0 justify-center">
-            <Link href={ctaLink} className="w-fit sm:w-auto btn btn-primary font-bold text-white px-6">
-              <span>{ctaText}</span>
-              <ArrowRight className="size-5" />
+            <Link href={ctaLink} className={buttonClasses({ variant: 'primary', size: 'md', className: 'w-fit sm:w-auto' })}>
+              {ctaText} <ArrowRight className="size-4" />
             </Link>
 
             <a
               href={`tel:${companyDetails.phoneRaw}`}
-              className="w-fit sm:w-auto"
+              className={buttonClasses({ variant: isPrimary ? 'outline-light' : 'outline', size: 'md', className: 'w-fit sm:w-auto' })}
             >
-              <button
-                className={cn(
-                  "btn btn-outline btn-primary bg-white w-fit sm:w-auto font-bold flex items-center gap-2 px-6",
-                  isPrimary
-                    ? "text-white hover:bg-white/20 hover:text-white border-white/30"
-                    : "text-primary hover:bg-primary/10 border-primary/20"
-                )}
-              >
-                <Phone className="size-5" />
-                <span>{companyDetails.phone}</span>
-              </button>
+              <Phone className="size-4" /> {companyDetails.phone}
             </a>
           </div>
         </div>