Bob AI: Can you add a button to each of the features so th...

Merge version_7 into main

src/app/page.tsx

@@ -10,6 +10,9 @@ import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import { Camera, CheckCircle, HelpCircle, Play, Sparkles, Star, TrendingUp, Zap, Flame, Users, MessageSquare, Lock } from "lucide-react";
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import TeamCardOne from '@/components/sections/team/TeamCardOne';
 
 export default function LandingPage() {
   return (
@@ -213,6 +216,109 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="ecommerce" data-section="ecommerce">
+        <ProductCatalog
+            layout="section"
+            products={[
+                {
+                    id: "1",
+                    name: "ClipVerse Pro",
+                    price: 29.99,
+                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                    imageAlt: "ClipVerse Pro",
+                    rating: 4.8,
+                    reviewCount: 120,
+                    category: "ClipVerse",
+                    onProductClick: () => {}
+                },
+                {
+                    id: "2",
+                    name: "ClipVerse Basic",
+                    price: 19.99,
+                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                    imageAlt: "ClipVerse Basic",
+                    rating: 4.5,
+                    reviewCount: 85,
+                    category: "ClipVerse",
+                    onProductClick: () => {}
+                },
+                {
+                    id: "3",
+                    name: "ClipVerse Elite",
+                    price: 39.99,
+                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                    imageAlt: "ClipVerse Elite",
+                    rating: 4.9,
+                    reviewCount: 150,
+                    category: "ClipVerse",
+                    onProductClick: () => {}
+                }
+            ]}
+            searchPlaceholder="Search ClipVerse products..."
+            emptyMessage="No ClipVerse products found"
+            className="mt-10"
+            gridClassName="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"
+            cardClassName="bg-white rounded-lg shadow-md overflow-hidden"
+            imageClassName="w-full h-48 object-cover"
+            searchClassName="mb-4"
+            filterClassName="mb-4"
+            toolbarClassName="mb-4"
+        />
+      </div>
+
+      <div id="metric" data-section="metric">
+        <MetricCardSeven
+            metrics={[
+                {
+                    id: "1",
+                    value: "500+",
+                    title: "Trusted by",
+                    items: [
+                        "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                        "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                        "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                        "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
+                    ]
+                }
+            ]}
+            carouselMode="auto"
+            animationType="slide"
+            title="ClipVerse"
+            description="Experience seamless video editing with ClipVerse. Trusted by over 500 satisfied clients."
+            textboxLayout="left"
+            useInvertedBackground="none"
+            textBoxTitleClassName="text-4xl font-bold"
+            textBoxDescriptionClassName="text-lg"
+            valueClassName="text-5xl font-extrabold"
+            metricTitleClassName="text-2xl font-semibold"
+            featureItemClassName="flex items-center gap-2"
+        />
+      </div>
+
+      <div id="team" data-section="team">
+        <TeamCardOne
+            members={[
+                { id: "1", name: "Alice Johnson", role: "Lead Designer", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Alice Johnson" },
+                { id: "2", name: "Bob Smith", role: "Frontend Developer", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Bob Smith" },
+                { id: "3", name: "Charlie Brown", role: "Backend Developer", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Charlie Brown" },
+                { id: "4", name: "Diana Prince", role: "Project Manager", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Diana Prince" }
+            ]}
+            carouselMode="buttons"
+            gridVariant="grid-cols-2"
+            animationType="slide-up"
+            title="Meet the Team"
+            description="Our team of experts is dedicated to bringing innovative solutions to your projects."
+            textboxLayout="left"
+            useInvertedBackground="none"
+            className="mb-10"
+            textBoxTitleClassName="text-3xl font-bold mb-4"
+            textBoxDescriptionClassName="text-lg mb-6"
+            imageClassName="rounded-theme-capped"
+            nameClassName="text-xl font-semibold mt-2"
+            roleClassName="text-gray-500"
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterLogoReveal
           logoText="ClipVerse"

src/components/sections/feature/FeatureBento.tsx

@@ -21,6 +21,7 @@ import BentoRevealIcon from "@/components/bento/BentoRevealIcon";
 import BentoTimeline, { type TimelineItem } from "@/components/bento/BentoTimeline";
 import BentoMediaStack, { type MediaStackItem } from "@/components/bento/BentoMediaStack";
 import type { LucideIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 export type { PhoneApp, PhoneApps8, ChatExchange, TimelineItem, MediaStackItem };
 import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment } from "@/components/cardStack/types";
@@ -184,6 +185,7 @@ const FeatureBento = ({
 }: FeatureBentoProps) => {
   const theme = useTheme();
   const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const router = useRouter();
 
   const getBentoComponent = (feature: FeatureCard) => {
     switch (feature.bentoComponent) {
@@ -283,6 +285,13 @@ const FeatureBento = ({
           {feature.button && (
             <Button {...getButtonProps(feature.button, 0, theme.defaultButtonVariant, cls("w-full", cardButtonClassName), cardButtonTextClassName)} />
           )}
+          <Button
+            onClick={() => router.push('/feature-details')}
+            className={cls("w-full", cardButtonClassName)}
+            textClassName={cardButtonTextClassName}
+          >
+            Learn More
+          </Button>
         </div>
       ))}
     </CardStack>

src/components/sections/hero/HeroBillboard.tsx

@@ -8,6 +8,7 @@ import { cls } from "@/lib/utils";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig } from "@/types/button";
 import type { Avatar } from "@/components/shared/AvatarGroup";
+import { User, CheckCircle } from "lucide-react";
 
 type HeroBillboardBackgroundProps = Extract<
   HeroBackgroundVariantProps,
@@ -151,6 +152,23 @@ const HeroBillboard = ({
             />
           )}
         </div>
+        <div data-webild-id="webild-1770429676776-pbdgcp6ud" className="text-center mt-6">
+          Trusted by over 500 clients
+          <div className="flex justify-center mt-4">
+            <div className="flex items-center mx-4">
+              <User className="w-6 h-6 mr-2" />
+              <CheckCircle className="w-4 h-4 text-green-500" />
+            </div>
+            <div className="flex items-center mx-4">
+              <User className="w-6 h-6 mr-2" />
+              <CheckCircle className="w-4 h-4 text-green-500" />
+            </div>
+            <div className="flex items-center mx-4">
+              <User className="w-6 h-6 mr-2" />
+              <CheckCircle className="w-4 h-4 text-green-500" />
+            </div>
+          </div>
+        </div>
       </div>
     </section>
   );