diff --git a/src/pages/HomePage/sections/Products.tsx b/src/pages/HomePage/sections/Products.tsx
index 602c341..f4a1e87 100644
--- a/src/pages/HomePage/sections/Products.tsx
+++ b/src/pages/HomePage/sections/Products.tsx
@@ -112,34 +112,18 @@ const ProductsInline = () => {
           )}
         </div>
 
-        <div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-6 gap-3">
+        <div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {items.map((item, index) => (
-            <ScrollReveal key={item.title} variant="slide-up" delay={staggerDelays[index]} className={cls("col-span-1 group", gridClasses[index])}>
-              <a href={item.href} className="block relative overflow-hidden rounded">
-                <div className="h-80 xl:h-100 2xl:h-120 overflow-hidden bg-card">
-                  {item.imageSrc && (
-                    <ImageOrVideo
-                      imageSrc={item.imageSrc}
-                      videoSrc={item.videoSrc}
-                      className="rounded group-hover:scale-105 transition-transform duration-500"
-                    />
-                  )}
-                </div>
-                <div className="absolute -inset-x-px -bottom-px h-2/5 backdrop-blur-xl mask-fade-top-overlay" aria-hidden="true" />
-                <div className="absolute inset-x-3 bottom-3 2xl:inset-x-4 2xl:bottom-4 z-10">
-                  <div className="relative flex flex-col gap-1 md:gap-0 md:group-hover:gap-1 p-3 2xl:p-4 transition-all duration-400">
-                    <div className="absolute inset-0 -z-10 card rounded translate-y-0 opacity-100 md:translate-y-full md:opacity-0 transition-all duration-400 ease-out md:group-hover:translate-y-0 md:group-hover:opacity-100" />
-                    <h3 className="text-2xl font-semibold leading-snug text-foreground md:text-white transition-colors duration-400 md:group-hover:text-foreground">
-                      {item.title}
-                    </h3>
-                    <div className="grid grid-rows-[1fr] md:grid-rows-[0fr] transition-all duration-400 ease-out md:group-hover:grid-rows-[1fr]">
-                      <p className="overflow-hidden text-base leading-snug text-foreground opacity-100 md:opacity-0 transition-opacity duration-400 md:group-hover:opacity-100">
-                        {item.description}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </a>
+            <ScrollReveal key={item.title} variant="slide-up" delay={index * 0.1} className="col-span-1">
+              <div className="card rounded p-6 md:p-8 flex flex-col gap-4 h-full border border-border shadow-sm">
+                <h3 className="text-2xl font-semibold text-foreground">
+                  {item.title}
+                </h3>
+                <div className="w-full h-px bg-border my-1" />
+                <p className="text-base leading-relaxed text-muted-foreground break-keep">
+                  {item.description}
+                </p>
+              </div>
             </ScrollReveal>
           ))}
         </div>