feat: add Carousel navigation icons and update Carousel component layout

app/components/ui/carousel.tsx

@@ -1,28 +1,57 @@
 import { twMerge } from 'tailwind-merge'
 
+import { CarouselNextIcon } from '~/components/icons/carousel-next'
+import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
 import type { TNews } from '~/types/news'
 
+import { Button } from './button'
+
 export const Carousel = (properties: TNews) => {
   const { title, description, items, type } = properties
   return (
     <div>
-      <div>
-        <h2>{title}</h2>
-        <p>{description}</p>
+      <div className="mb-[30px] flex items-center justify-between border-b border-black pb-[30px]">
+        <div className="grid">
+          <h2 className="text-4xl font-extrabold text-[#2E2F7C]">{title}</h2>
+          <p className="text-2xl font-light text-[#777777] italic">
+            {description}
+          </p>
+        </div>
+        <div className="flex gap-2.5">
+          <CarouselPreviousIcon
+            color="#DCDCDC"
+            className="cursor-pointer"
+          />
+          <CarouselNextIcon
+            color="#2E2F7C"
+            className="cursor-pointer"
+          />
+        </div>
       </div>
       <div
         className={twMerge(
-          type === 'hero' ? 'grid grid-cols-1' : 'grid grid-cols-3',
+          'grid gap-x-8',
+          type === 'hero' ? 'grid-cols-1' : 'grid-cols-3',
         )}
       >
         {items.map(({ image, title, content }, index) => (
-          <div key={index}>
+          <div
+            key={index}
+            className={twMerge(
+              'grid gap-x-8',
+              type === 'hero' ? 'grid-cols-3' : '',
+            )}
+          >
             <img
+              className={twMerge(type === 'hero' ? 'col-span-2' : '')}
               src={image}
               alt={title}
             />
-            <h3>{title}</h3>
-            <p>{content}</p>
+            <div>
+              <h3>{title}</h3>
+              <p>{content}</p>
+              <Button size="block">View More</Button>
+            </div>
           </div>
         ))}
       </div>