From 7336ad10c47653d8d269298c0a7171f19e917699 Mon Sep 17 00:00:00 2001
From: Tariq Jamal A <tariqjamal4267324@gmail.com>
Date: Thu, 5 Jun 2025 14:12:59 +0530
Subject: [PATCH] update ui

---
 components/sliders/SliderTwo.jsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/components/sliders/SliderTwo.jsx b/components/sliders/SliderTwo.jsx
index 89fedf5..cd9ed70 100644
--- a/components/sliders/SliderTwo.jsx
+++ b/components/sliders/SliderTwo.jsx
@@ -23,9 +23,13 @@ const EnhancedSlider = () => {
     category: cat,
     products: products
       ?.filter((product) => product.product_category?.id === cat.id)
-      .slice(0, 3),
+      .slice(0, 6),
   }));
 
+  const trimText = (text = "", max) =>
+  text.length > max ? text.slice(0, max) + "…" : text;
+
+
   return (
     <section className="bg-gradient-to-b from-background to-secondary/10 py-16 md:py-24">
       <div className="container mx-auto px-4">
@@ -69,9 +73,9 @@ const EnhancedSlider = () => {
                     <Link href={`/products/${product.id}`}>
                       <motion.div
                         whileHover={{ y: -5 }}
-                        className="group rounded-lg overflow-hidden bg-card shadow-lg transition-shadow hover:shadow-xl"
+                        className="group rounded-lg overflow-hidden bg-card shadow-lg transition-shadow hover:shadow-xl h-80"
                       >
-                        <div className="aspect-square relative overflow-hidden max-h-[50%]">
+                        <div className="aspect-square relative overflow-hidden max-h-[50%] w-full">
                           <Image
                             src={`${backendUrl}${
                               product.images[0]?.image || "/placeholder.jpg"
@@ -84,11 +88,14 @@ const EnhancedSlider = () => {
                         </div>
                         <div className="p-4">
                           <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
-                            {product.product_name}
+                                  {trimText(product.product_name, 30)}
                           </h3>
                           <p className="text-sm text-muted-foreground mt-2">
-                            {product.short_description ||
-                              "Discover more about this product"}
+                            {trimText(
+                              product.short_description ||
+                                "Discover more about this product",
+                              60
+                            )}
                           </p>
                         </div>
                       </motion.div>