src/components/sections/features/FeaturesArrowCards.tsx

@@ -8,6 +8,7 @@ import ScrollReveal from "@/components/ui/ScrollReveal";
 type FeatureItem = {
   title: string;
   tags: string[];
+  className?: string;
 } & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
 
 interface FeaturesArrowCardsProps {
@@ -52,7 +53,7 @@ const FeaturesArrowCards = ({
           {(primaryButton || secondaryButton) && (
             <div className="flex flex-wrap justify-center gap-3 mt-3">
               {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
-              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
+              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
             </div>
           )}
         </div>
@@ -64,7 +65,7 @@ const FeaturesArrowCards = ({
                 <div className="aspect-square rounded overflow-hidden">
                   <ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} className="transition-transform duration-500 ease-in-out group-hover:scale-105" />
                 </div>
-                <div className="flex flex-col justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 flex-1 card rounded">
+                <div className={`flex flex-col justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 flex-1 card rounded ${item.className || ""}`}>
                   <h3 className="text-xl md:text-2xl font-medium leading-tight">{item.title}</h3>
                   <div className="flex items-center justify-between gap-5">
                     <div className="flex flex-wrap items-center gap-2">
@@ -84,4 +85,4 @@ const FeaturesArrowCards = ({
   );
 };
 
-export default FeaturesArrowCards;
+export default FeaturesArrowCards;

src/pages/HomePage.tsx

@@ -59,6 +59,7 @@ export default function HomePage() {
             "Organic",
           ],
           imageSrc: "https://img.b2bpic.net/free-photo/redeyed-tree-frog-closeup-agalychnis-callidryas-red-eyes-closeup_488145-3176.jpg?id=26824352",
+          className: "!bg-yellow-500 !text-black",
         },
         {
           title: "Precision Roasting",
@@ -246,4 +247,4 @@ export default function HomePage() {
   </div>
     </>
   );
-}
+}