Bob AI: i dont like Why Choose TechAcademy section replace...

src/app/page.tsx

@@ -9,7 +9,7 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Users, TrendingUp, Award, Star } from "lucide-react";
 import Link from "next/link";
-import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
 
 export default function HomePage() {
   return (
@@ -65,7 +65,7 @@ export default function HomePage() {
       </div>
 
       <div id="features" data-section="features">
-      <FeatureCardOne
+      <FeatureCardSeven
       features={[
       {
       id: 1,
@@ -95,13 +95,11 @@ 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="Label"
-      buttons={[{ label: "Primary", href: "#" }, { label: "Secondary", href: "#" }]}
+      tag="Unique"
+      buttons={[{ text: "View Courses", label: "courses", href: "/courses" }, { text: "Learn More", label: "about", href: "/about" }]}
       textboxLayout="default"
       useInvertedBackground="invertDefault"
       />

src/components/sections/feature/FeatureCardNine.tsx

@@ -97,6 +97,12 @@ 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,7 +161,6 @@ 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,6 +137,12 @@ 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>
     );
 });
@@ -195,7 +201,7 @@ const ProductCardTwo = ({
             uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
             gridRowsClassName={customGridRows}
             animationType={animationType}
-            
+
             title={title}
             titleSegments={titleSegments}
             description={description}