Update src/app/page.tsx

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
@@ -260,7 +260,7 @@ export default function LandingPage() {
       <div id="pricing" data-section="pricing">
         <PricingCardThree
           title="Simple, Transparent Pricing"
-          description="Start free, scale as you grow. No hidden fees, cancel anytime."
+          description="Start free, scale as you grow—most agents upgrade within 30 days after seeing results"
           tag="Pricing Plans"
           tagIcon={DollarSign}
           textboxLayout="default"

src/components/sections/contact/ContactCTA.tsx

@@ -6,6 +6,7 @@ import { cls } from "@/lib/utils";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig } from "@/types/button";
 import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+import Button from "@/components/Button";
 
 type ContactCTABackgroundProps = Extract<
     HeroBackgroundVariantProps,
@@ -86,8 +87,8 @@ const ContactCTA = ({
                             descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
                             tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
                             buttonContainerClassName={cls("flex flex-wrap gap-4 mt-3", buttonContainerClassName)}
-                            buttonClassName={buttonClassName}
-                            buttonTextClassName={buttonTextClassName}
+                            buttonClassName={cls("bg-primary text-foreground hover:bg-primary-hover", buttonClassName)}
+                            buttonTextClassName={cls("text-sm font-medium", buttonTextClassName)}
                             center={true}
                         />
                     </div>

src/components/sections/hero/HeroBillboardDashboard.tsx

@@ -68,6 +68,7 @@ interface HeroBillboardDashboardProps {
   buttonClassName?: string;
   buttonTextClassName?: string;
   dashboardClassName?: string;
+  backgroundImage?: string;
 }
 
 const HeroBillboardDashboard = ({
@@ -89,11 +90,13 @@ const HeroBillboardDashboard = ({
   buttonClassName = "",
   buttonTextClassName = "",
   dashboardClassName = "",
+  backgroundImage,
 }: HeroBillboardDashboardProps) => {
   return (
     <section
       aria-label={ariaLabel}
       className={cls("relative w-full py-hero-page-padding", className)}
+      style={{ backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined }}
     >
       <HeroBackgrounds {...background} />
       <div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-15 relative z-10", containerClassName)}>

src/components/shared/AvatarGroup.tsx

@@ -88,3 +88,20 @@ const AvatarGroup = ({
 AvatarGroup.displayName = "AvatarGroup";
 
 export default memo(AvatarGroup);
+
+const avatars = [
+  { src: "/avatars/avatar1.png", alt: "Avatar 1" },
+  { src: "/avatars/avatar2.png", alt: "Avatar 2" },
+  { src: "/avatars/avatar3.png", alt: "Avatar 3" },
+  { src: "/avatars/avatar4.png", alt: "Avatar 4" },
+  { src: "/avatars/avatar5.png", alt: "Avatar 5" },
+  { src: "/avatars/avatar6.png", alt: "Avatar 6" },
+];
+
+const TeamSection = () => (
+  <AvatarGroup
+    avatars={avatars}
+    text="Our Team"
+    ariaLabel="Team avatars"
+  />
+);