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

src/app/page.tsx

@@ -3,13 +3,13 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
-import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
 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 FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 
 export default function HomePage() {
   return (
@@ -42,7 +42,7 @@ export default function HomePage() {
 
       <div id="hero" data-section="hero">
         <HeroCarouselLogo
-          logoText="TECHACADEMY"
+          logoText="STEP Academy"
           description="Master in-demand technology skills with our comprehensive IT courses. Learn from industry experts and launch your tech career."
           buttons={[
             { text: "Explore Courses", href: "/courses" },
@@ -65,7 +65,7 @@ export default function HomePage() {
       </div>
 
       <div id="features" data-section="features">
-        <FeatureCardNine
+      <FeatureCardOne
       features={[
       {
       id: 1,
@@ -95,9 +95,13 @@ export default function HomePage() {
       }
       }
       ]}
-          showStepNumbers={true}
+      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: "#" }]}
       textboxLayout="default"
       useInvertedBackground="invertDefault"
       />

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>