Bob AI: Can you add a section that display team members

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}
+                            buttonClassName={cls("bg-primary text-foreground hover:bg-primary-hover", buttonClassName)}
-                            buttonTextClassName={buttonTextClassName}
+                            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,113 @@ 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"
+  />
+);
+
+export const Pricing = () => (
+  <div className="space-y-12">
+    <div className="border-t border-b border-gray-200 px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
+      <div className="sm:col-span-3">
+        <h3 className="text-lg font-medium leading-6 text-gray-900">Pricing</h3>
+        <p className="mt-1 text-sm text-gray-500">
+          Choose a pricing plan that works for you.
+        </p>
+      </div>
+      <div className="mt-10 sm:col-span-2 sm:mt-0">
+        <div className="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6">
+          <div className="mt-6 flex items-center justify-between">
+            <p className="text-4xl font-bold text-gray-900">$20</p>
+            <p className="text-base font-medium text-gray-500">per month</p>
+          </div>
+          <ul role="list" className="mt-8 space-y-10">
+            <li className="flex gap-x-4 text-sm leading-6">
+              <svg
+                className="h-6 w-5 text-green-500"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <span>Unlimited projects</span>
+            </li>
+            <li className="flex gap-x-4 text-sm leading-6">
+              <svg
+                className="h-6 w-5 text-green-500"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <span>24/7 support</span>
+            </li>
+            <li className="flex gap-x-4 text-sm leading-6">
+              <svg
+                className="h-6 w-5 text-green-500"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <span>Custom domain</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export const Team = () => (
+  <div className="space-y-12">
+    <div className="border-t border-b border-gray-200 px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
+      <div className="sm:col-span-3">
+        <h3 className="text-lg font-medium leading-6 text-gray-900">Our Team</h3>
+        <p className="mt-1 text-sm text-gray-500">
+          Meet the team behind the scenes.
+        </p>
+      </div>
+      <div className="mt-10 sm:col-span-2 sm:mt-0">
+        <TeamSection />
+      </div>
+    </div>
+  </div>
+);