From 6d5f0edc0d329f6cc2e09ec7197bb8677077288f Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Tue, 4 Feb 2025 20:57:12 +0800
Subject: [PATCH] feat: enhance Carousel component layout and styling for
 improved presentation

---
 app/components/ui/carousel.tsx | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/components/ui/carousel.tsx b/app/components/ui/carousel.tsx
index 35d6256..56d58fc 100644
--- a/app/components/ui/carousel.tsx
+++ b/app/components/ui/carousel.tsx
@@ -43,13 +43,32 @@ export const Carousel = (properties: TNews) => {
             )}
           >
             <img
-              className={twMerge(type === 'hero' ? 'col-span-2' : '')}
+              className={twMerge(
+                'w-full object-cover',
+                type === 'hero'
+                  ? 'col-span-2 aspect-[174/100]'
+                  : 'aspect-[5/4]',
+              )}
               src={image}
               alt={title}
             />
-            <div>
-              <h3>{title}</h3>
-              <p>{content}</p>
+            <div
+              className={twMerge(
+                'flex flex-col justify-between',
+                type === 'hero' ? 'gap-7' : 'gap-4',
+              )}
+            >
+              <div>
+                <h3
+                  className={twMerge(
+                    'font-bold',
+                    type === 'hero' ? 'text-4xl' : 'text-2xl',
+                  )}
+                >
+                  {title}
+                </h3>
+                <p className="text-xl">{content}</p>
+              </div>
               <Button size="block">View More</Button>
             </div>
           </div>