Bob AI: Modify the FeatureCardNineteen component to apply different

src/app/page.tsx

@@ -100,6 +100,133 @@ export default function LandingPage() {
         .fade-in {
           animation: fadeIn 0.8s ease-out forwards;
         }
+        @keyframes parallaxShift {
+          0%, 100% { transform: translateY(0px); }
+          50% { transform: translateY(-20px); }
+        }
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes slideInLeft {
+          from {
+            opacity: 0;
+            transform: translateX(-50px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+        @keyframes slideInRight {
+          from {
+            opacity: 0;
+            transform: translateX(50px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+        @keyframes scaleUp {
+          from {
+            opacity: 0;
+            transform: scale(0.95);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+        @keyframes shimmer {
+          0% { background-position: -1000px 0; }
+          100% { background-position: 1000px 0; }
+        }
+        @keyframes float {
+          0%, 100% { transform: translateY(0px); }
+          50% { transform: translateY(-10px); }
+        }
+        .features-section {
+          animation: fadeInUp 1s ease-out forwards;
+        }
+        .feature-card {
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          position: relative;
+          overflow: hidden;
+        }
+        .feature-card::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: -100%;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+          transition: left 0.5s ease;
+        }
+        .feature-card:hover {
+          transform: translateY(-8px) scale(1.02);
+          box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+        }
+        .feature-card:hover::before {
+          left: 100%;
+        }
+        .testimonial-card {
+          animation: fadeInUp 0.8s ease-out forwards;
+          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+          position: relative;
+          background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
+        }
+        .testimonial-card:hover {
+          transform: translateY(-12px) rotateX(5deg);
+          box-shadow: 0 25px 50px rgba(0,0,0,0.2);
+        }
+        .product-card {
+          animation: scaleUp 0.6s ease-out forwards;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          position: relative;
+          overflow: hidden;
+        }
+        .product-card::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,165,0,0.1));
+          opacity: 0;
+          transition: opacity 0.3s ease;
+        }
+        .product-card:hover {
+          transform: translateY(-10px) scale(1.03);
+          box-shadow: 0 30px 60px rgba(0,0,0,0.2);
+        }
+        .product-card:hover::after {
+          opacity: 1;
+        }
+        .gradient-overlay {
+          background: linear-gradient(135deg, rgba(139,69,19,0.7), rgba(210,180,140,0.7));
+          transition: all 0.4s ease;
+        }
+        .smooth-transition {
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .stagger-delay-1 { animation-delay: 0.1s; }
+        .stagger-delay-2 { animation-delay: 0.2s; }
+        .stagger-delay-3 { animation-delay: 0.3s; }
+        .stagger-delay-4 { animation-delay: 0.4s; }
+        .stagger-delay-5 { animation-delay: 0.5s; }
       `}</style>
       <div id="hero-section" data-section="hero-section" className="hero-parallax">
         <HeroOverlay
@@ -122,7 +249,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="about-section" data-section="about-section" className="fade-in-up" style={{ animation: 'fadeInUp 0.8s ease-out' }}>
+      <div id="about-section" data-section="about-section" className="fade-in-up testimonial-card" style={{ animation: 'fadeInUp 0.8s ease-out' }}>
         <TestimonialAboutCard
           tag="Our Story"
           tagIcon={Sparkles}

src/components/sections/feature/FeatureCardNineteen.tsx

@@ -119,12 +119,14 @@ const FeatureCardNineteen = ({
             titleImageClassName={titleImageClassName}
             ariaLabel={ariaLabel}
         >
-            {features.map((feature) => {
+            {features.map((feature, index) => {
                 const stepNumber = String(feature.id).padStart(2, "0");
+                const backgroundColors = ["bg-blue-100", "bg-pink-100", "bg-yellow-100", "bg-green-100", "bg-purple-100", "bg-orange-100"];
+                const bgColor = backgroundColors[index % backgroundColors.length];
                 return (
                     <div
                         key={feature.id}
-                        className={cls("relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row justify-between overflow-hidden", cardContentClassName)}
+                        className={cls("relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row justify-between overflow-hidden", bgColor, cardContentClassName)}
                     >
                         <div className="relative w-full md:w-1/2 md:h-full flex flex-col justify-between p-8 md:p-12">
                             <div className="flex flex-col gap-4 md:gap-6">