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

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>