feat: enhance Carousel component layout and styling for improved presentation

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>