Bob AI: it the Why Choose TechAcademy section add buttons ...

src/app/page.tsx

@@ -3,12 +3,13 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Users, TrendingUp, Award, Star } from "lucide-react";
 import Link from "next/link";
-import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 
 export default function HomePage() {
   return (
@@ -64,7 +65,7 @@ export default function HomePage() {
       </div>
 
       <div id="features" data-section="features">
-      <FeatureCardSeven
+      <FeatureCardOne
       features={[
       {
       id: 1,
@@ -94,41 +95,70 @@ export default function HomePage() {
       }
       }
       ]}
+      carouselMode="auto"
+      gridVariant="uniform-all-items-equal"
       animationType="none"
       title="Why Choose TechAcademy"
       description="Industry-leading education platform designed for career growth"
-      tag="Unique"
-      buttons={[{ text: "View Courses", label: "courses", href: "/courses" }, { text: "Learn More", label: "about", href: "/about" }]}
+      tag="Label"
+      buttons={[{ label: "Primary", href: "#" }, { label: "Secondary", href: "#" }]}
       textboxLayout="default"
       useInvertedBackground="invertDefault"
       />
       </div>
 
       <div id="products" data-section="products">
-      <FeatureCardSeven
-      features={[{ title: "Feature 1", description: "Feature description" }, { title: "Feature 2", description: "Feature description" }, { title: "Feature 3", description: "Feature description" }]}
-      animationType="slide-up"
-      title="Featured Courses"
-      description="Start your learning journey with our most popular programs"
-      tag="Curriculum"
-      buttons={[{ text: "Get Started", label: "Get Started", href: "#" }, { text: "Learn More", label: "Learn More", href: "#" }]}
-      textboxLayout="default"
-      useInvertedBackground="noInvert"
-      />
+        <ProductCardTwo
+          products={[
+            {
+              id: "1",              brand: "Beginner Track",              name: "Web Development Fundamentals",              price: "$299",              rating: 5,
+              reviewCount: "1.2k",              imageSrc: "https://img.b2bpic.net/free-vector/realistic-responsive-website-design-collection_23-2149500090.jpg",              imageAlt: "Web Development Course"
+            },
+            {
+              id: "2",              brand: "Intermediate Track",              name: "Python Programming Mastery",              price: "$399",              rating: 5,
+              reviewCount: "980",              imageSrc: "https://img.b2bpic.net/free-vector/laptop-with-tablet-smartphone-website-information_24877-53528.jpg",              imageAlt: "Python Programming Course"
+            },
+            {
+              id: "3",              brand: "Advanced Track",              name: "Data Science & Machine Learning",              price: "$599",              rating: 5,
+              reviewCount: "756",              imageSrc: "https://img.b2bpic.net/free-photo/person-working-html-computer_23-2150038849.jpg",              imageAlt: "Data Science Course"
+            },
+            {
+              id: "4",              brand: "Professional Track",              name: "Cybersecurity Essentials",              price: "$499",              rating: 5,
+              reviewCount: "543",              imageSrc: "https://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg",              imageAlt: "Cybersecurity Course"
+            }
+          ]}
+          title="Featured Courses"
+          description="Start your learning journey with our most popular programs"
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
+        />
       </div>
 
       <div id="metrics" data-section="metrics">
-      <MetricCardOne
-      carouselMode="auto"
-      gridVariant="uniform-all-items-equal"
-      animationType="slide-up"
-      title="Skill Mastery Metrics"
-      description="Track your progress and mastery in key tech skills with our detailed metrics."
-      tag="Metrics"
-      buttons={[{ text: "View Metrics", label: "View Metrics", href: "#" }, { text: "Start Learning", label: "Start Learning", href: "#" }]}
-      textboxLayout="default"
-      useInvertedBackground="invertDefault"
-      />
+        <MetricCardOne
+          metrics={[
+            {
+              id: "1",              value: "5000",              title: "Students",              description: "Successfully trained and certified professionals",              icon: Users
+            },
+            {
+              id: "2",              value: "95",              title: "%",              description: "Job placement rate within 3 months",              icon: TrendingUp
+            },
+            {
+              id: "3",              value: "20",              title: "+",              description: "Expert instructors on our team",              icon: Award
+            },
+            {
+              id: "4",              value: "4.9",              title: "/5",              description: "Average student satisfaction rating",              icon: Star
+            }
+          ]}
+          title="Our Impact"
+          description="Trusted by thousands of students worldwide"
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground="invertDefault"
+        />
       </div>
 
       <div id="testimonials" data-section="testimonials">

src/components/sections/feature/FeatureCardNine.tsx

@@ -97,12 +97,6 @@ const FeatureContent = ({
         <p className={cls("text-base leading-[1.2] text-balance", useInvertedBackground === "invertDefault" ? "text-background/75" : "text-foreground/75", featureDescriptionClassName)}>
             {feature.description}
         </p>
-        <button
-            variant="error"
-            className={cls("bg-red-500 text-white px-4 py-2 rounded-full mt-4", "hover:bg-red-600", "focus:outline-none focus:ring-2 focus:ring-red-300")}
-        >
-            With
-        </button>
     </div>
 );
 

src/components/sections/feature/FeatureCardOne.tsx

@@ -161,6 +161,7 @@ const FeatureCardOne = ({
           {feature.button && (
             <Button {...getButtonProps(feature.button, 0, theme.defaultButtonVariant, cls("w-full", cardButtonClassName), cardButtonTextClassName)} />
           )}
+          <button className="mt-4 bg-primary text-background px-4 py-2 rounded-lg">Click Me</button> {/* Inserted button element */}
         </div>
       ))}
     </CardStack>

src/components/sections/product/ProductCardTwo.tsx

@@ -137,12 +137,6 @@ const ProductCardItem = memo(({
                     {product.price}
                 </p>
             </div>
-            <button
-                className={cls("bg-primary-cta text-secondary-cta rounded-lg px-4 py-2 mt-4", actionButtonClassName)}
-                onClick={(e) => e.stopPropagation()}
-            >
-                ADD TO CART
-            </button>
         </article>
     );
 });
@@ -201,7 +195,7 @@ const ProductCardTwo = ({
             uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
             gridRowsClassName={customGridRows}
             animationType={animationType}
-
+            
             title={title}
             titleSegments={titleSegments}
             description={description}