feat: add Carousel navigation icons and update Carousel component layout

app/components/icons/carousel-next.tsx

@@ -0,0 +1,30 @@
+import type { JSX, SVGProps } from 'react'
+
+export const CarouselNextIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={56}
+      height={57}
+      viewBox="0 0 56 57"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        d="M28 53.5c13.807 0 25-11.193 25-25s-11.193-25-25-25-25 11.193-25 25 11.193 25 25 25z"
+        stroke="currentColor"
+        strokeWidth={6}
+        strokeLinejoin="round"
+      />
+      <path
+        d="M24.25 39.75L35.5 28.5 24.25 17.25"
+        stroke="currentColor"
+        strokeWidth={6}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

app/components/icons/carousel-previous.tsx

@@ -0,0 +1,30 @@
+import type { JSX, SVGProps } from 'react'
+
+export const CarouselPreviousIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={56}
+      height={57}
+      viewBox="0 0 56 57"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        d="M28 3.5c-13.807 0-25 11.193-25 25s11.193 25 25 25 25-11.193 25-25-11.193-25-25-25z"
+        stroke="currentColor"
+        strokeWidth={6}
+        strokeLinejoin="round"
+      />
+      <path
+        d="M31.75 17.25L20.5 28.5l11.25 11.25"
+        stroke="currentColor"
+        strokeWidth={6}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

app/components/icons/facebook.tsx

@@ -11,6 +11,7 @@ export const FacebookIcon = (
       width={100}
       height={100}
       viewBox="0 0 30 30"
+      fill="currentColor"
       {...properties}
     >
       <path d="M15 3C8.373 3 3 8.373 3 15c0 6.016 4.432 10.984 10.206 11.852V18.18h-2.969v-3.154h2.969v-2.099c0-3.475 1.693-5 4.581-5 1.383 0 2.115.103 2.461.149v2.753h-1.97c-1.226 0-1.654 1.163-1.654 2.473v1.724h3.593l-.487 3.154h-3.106v8.697C22.481 26.083 27 21.075 27 15c0-6.627-5.373-12-12-12z" />

app/components/icons/instagram.tsx

@@ -11,6 +11,7 @@ export const InstagramIcon = (
       width={100}
       height={100}
       viewBox="0 0 30 30"
+      fill="currentColor"
       {...properties}
     >
       <path d="M9.998 3C6.139 3 3 6.142 3 10.002v10C3 23.861 6.142 27 10.002 27h10C23.861 27 27 23.858 27 19.998v-10C27 6.139 23.858 3 19.998 3h-10zM22 7a1 1 0 110 2 1 1 0 010-2zm-7 2c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6zm0 2a4 4 0 00-4 4 4 4 0 004 4 4 4 0 004-4 4 4 0 00-4-4z" />

app/components/icons/linkedin.tsx

@@ -11,6 +11,7 @@ export const LinkedinIcon = (
       width={100}
       height={100}
       viewBox="0 0 30 30"
+      fill="currentColor"
       {...properties}
     >
       <path d="M24 4H6a2 2 0 00-2 2v18a2 2 0 002 2h18a2 2 0 002-2V6a2 2 0 00-2-2zM10.954 22h-2.95v-9.492h2.95V22zM9.449 11.151a1.72 1.72 0 110-3.44 1.72 1.72 0 010 3.44zM22.004 22h-2.948v-4.616c0-1.101-.02-2.517-1.533-2.517-1.535 0-1.771 1.199-1.771 2.437V22h-2.948v-9.492h2.83v1.297h.04c.394-.746 1.356-1.533 2.791-1.533 2.987 0 3.539 1.966 3.539 4.522V22z" />

app/components/icons/search.tsx

@@ -14,7 +14,7 @@ export const SearchIcon = (
     >
       <path
         d="M11.875 20c-2.27 0-4.192-.787-5.765-2.36-1.573-1.573-2.36-3.495-2.36-5.765 0-2.27.786-4.192 2.36-5.765 1.574-1.573 3.496-2.36 5.765-2.36 2.27 0 4.191.787 5.766 2.36 1.575 1.573 2.362 3.495 2.359 5.765a7.619 7.619 0 01-1.625 4.75l7 7c.23.23.344.52.344.875 0 .354-.115.646-.344.875-.23.23-.52.344-.875.344-.354 0-.646-.115-.875-.344l-7-7A7.618 7.618 0 0111.875 20zm0-2.5c1.563 0 2.89-.547 3.985-1.64 1.094-1.093 1.64-2.422 1.64-3.985 0-1.563-.547-2.891-1.64-3.984-1.092-1.092-2.42-1.64-3.985-1.641-1.564-.002-2.892.545-3.984 1.641C6.8 8.987 6.253 10.315 6.25 11.875c-.003 1.56.545 2.888 1.641 3.985 1.097 1.097 2.425 1.643 3.984 1.64z"
-        fill="#fff"
+        fill="currentColor"
       />
     </svg>
   )

app/components/icons/x.tsx

@@ -11,6 +11,7 @@ export const XIcon = (
       width={100}
       height={100}
       viewBox="0 0 30 30"
+      fill="currentColor"
       {...properties}
     >
       <path d="M6 4a2 2 0 00-2 2v18a2 2 0 002 2h18a2 2 0 002-2V6a2 2 0 00-2-2H6zm2.648 5h4.612l2.691 3.848L19.281 9h1.451l-4.128 4.781L21.654 21h-4.611l-2.986-4.27L10.369 21H8.895l4.505-5.205L8.648 9zm2.23 1.184l6.755 9.627h1.789l-6.756-9.627h-1.787z" />

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>
+      <div className="mb-[30px] flex items-center justify-between border-b border-black pb-[30px]">
-        <h2>{title}</h2>
+        <div className="grid">
-        <p>{description}</p>
+          <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}
             />
+            <div>
               <h3>{title}</h3>
               <p>{content}</p>
+              <Button size="block">View More</Button>
+            </div>
           </div>
         ))}
       </div>

app/layouts/footer-links.tsx

@@ -23,7 +23,7 @@ export const FooterLinks = () => {
                 >
                   {Icon && (
                     <Icon
-                      fill="white"
+                      color="white"
                       width={24}
                       height={24}
                     />