leadstocompany/rudarksh-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update ui

Browse Source
This commit is contained in:
Tariq Jamal A
2025-06-05 14:12:59 +05:30
parent 601fa681d0
commit 7336ad10c4
1 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/sliders/SliderTwo.jsx
View File

@@ -23,9 +23,13 @@ const EnhancedSlider = () => {
category: cat, category: cat,
products: products products: products
?.filter((product) => product.product_category?.id === cat.id) ?.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 ( return (
<section className="bg-gradient-to-b from-background to-secondary/10 py-16 md:py-24"> <section className="bg-gradient-to-b from-background to-secondary/10 py-16 md:py-24">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
@@ -69,9 +73,9 @@ const EnhancedSlider = () => {
<Link href={`/products/${product.id}`}> <Link href={`/products/${product.id}`}>
<motion.div <motion.div
whileHover={{ y: -5 }} 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 <Image
src={`${backendUrl}${ src={`${backendUrl}${
product.images[0]?.image || "/placeholder.jpg" product.images[0]?.image || "/placeholder.jpg"
@@ -84,11 +88,14 @@ const EnhancedSlider = () => {
</div> </div>
<div className="p-4"> <div className="p-4">
<h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors"> <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
{product.product_name} {trimText(product.product_name, 30)}
</h3> </h3>
<p className="text-sm text-muted-foreground mt-2"> <p className="text-sm text-muted-foreground mt-2">
{product.short_description || {trimText(
"Discover more about this product"} product.short_description ||
"Discover more about this product",
60
)}
</p> </p>
</div> </div>
</motion.div> </motion.div>