feat(fe): replace banner and carousel icons

apps/frontend/app/(main)/_components/Carousel.tsx

@@ -3,6 +3,7 @@
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 import type { Route } from 'next'
+import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { FaAngleLeft, FaAngleRight } from 'react-icons/fa6'
@@ -13,14 +14,16 @@ interface Props {
     topTitle: string
     bottomTitle: string
     sub: string
+    img: string
+    imgAlt: string
     href: string
   }[]
 }
 
-const bgImage: { [key: string]: string } = {
-  codedang: 'bg-[url(/carousel1.svg)]',
-  github: 'bg-[url(/carousel2.svg)]',
-  skkuding: 'bg-[url(/carousel3.svg)]'
+const bgColors: { [key: string]: string } = {
+  codedang: 'bg-gradient-to-r from-[#3D63B8] to-[#0E1322]',
+  github: 'bg-gradient-to-b from-[#161429] to-[#704FC3]',
+  skkuding: 'bg-gradient-to-r from-[#41775D] to-[#123D29]'
 }
 
 export default function Carousel({ slides }: Props) {
@@ -38,24 +41,34 @@ export default function Carousel({ slides }: Props) {
   }
 
   return (
-    <div className="relative my-2 h-[350px] w-full overflow-hidden rounded-xl bg-gray-100 sm:h-[360px]">
+    <div className="relative my-5 h-[466px] w-full overflow-hidden rounded-lg bg-gray-100 sm:h-[360px]">
       {slides.map((slide, index) => (
         <Link
           href={slide.href as Route}
           key={slide.href + slide.topTitle}
           className={cn(
-            'absolute inset-0 z-10 flex flex-col-reverse items-center justify-between gap-5 p-8 py-14 text-white transition-opacity duration-1000 ease-in-out sm:flex-row md:px-14 md:py-0',
+            'absolute inset-0 z-10 flex flex-col-reverse items-center justify-between py-14 pl-6 text-white transition-opacity duration-1000 ease-in-out sm:flex-row md:pl-10',
             facade !== index && 'z-0 opacity-0',
-            bgImage[slide.type]
+            bgColors[slide.type]
           )}
         >
-          <div className="w-full whitespace-nowrap text-2xl font-bold md:text-4xl">
-            <p className="font-mono">{slide.topTitle}</p>
-            <p className="font-mono">{slide.bottomTitle}</p>
-            <p className="mt-4 text-base font-normal opacity-70 md:text-lg">
+          <div className="mb-10 w-full text-4xl font-bold">
+            <p className="font-mono md:text-nowrap">{slide.topTitle}</p>
+            <p className="font-mono md:text-nowrap">{slide.bottomTitle}</p>
+            <p className="mt-4 whitespace-nowrap text-base font-normal opacity-70 md:text-lg">
               {slide.sub}
             </p>
           </div>
+          <div>
+            <Image
+              src={slide.img}
+              alt={slide.imgAlt}
+              width={554}
+              height={554}
+              className="absolute -right-16 bottom-48 z-[-10] mr-5 size-[330px] object-contain sm:relative sm:bottom-0 sm:left-0 sm:size-[1024px] sm:pl-0"
+              priority
+            />
+          </div>
         </Link>
       ))}
       <div className="absolute bottom-4 left-0 right-0 z-20 flex justify-center">

apps/frontend/app/(main)/contest/layout.tsx

@@ -4,9 +4,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Cover title="CONTEST" description="Contests of CODEDANG" />
-      <div className="flex w-full max-w-5xl flex-col gap-5 p-5 py-8">
-        {children}
-      </div>
+      <div className="flex w-full max-w-5xl flex-col gap-5 p-5">{children}</div>
     </>
   )
 }

apps/frontend/app/(main)/notice/layout.tsx

@@ -7,9 +7,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         title="NOTICE"
         description="Events and announcements of CODEDANG"
       />
-      <div className="flex w-full max-w-5xl flex-col gap-5 p-5 py-8">
-        {children}
-      </div>
+      <div className="flex w-full max-w-5xl flex-col gap-5 p-5">{children}</div>
     </>
   )
 }

apps/frontend/app/(main)/page.tsx

@@ -17,20 +17,26 @@ const slides = [
     topTitle: 'Welcome to',
     bottomTitle: 'CODEDANG',
     sub: 'Online Judge Platform for SKKU',
+    img: '/codedang-carousel.png',
+    imgAlt: 'Codedang',
     href: '/problem'
   },
   {
     type: 'github',
     topTitle: 'Contribute to',
     bottomTitle: 'Codedang on GitHub',
     sub: 'Our project is open source',
+    img: '/github-carousel.png',
+    imgAlt: 'GitHub',
     href: 'https://github.com/skkuding/codedang'
   },
   {
     type: 'skkuding',
     topTitle: 'SKKUDING',
     bottomTitle: 'Beta Service',
     sub: "Feel free to contact us if there's any bug",
+    img: '/bug-carousel.png',
+    imgAlt: 'Bug',
     href: 'https://pf.kakao.com/_UKraK/chat'
   }
 ]

apps/frontend/app/(main)/problem/layout.tsx

@@ -4,9 +4,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Cover title="PROBLEM" description="All the problems of CODEDANG" />
-      <div className="flex w-full max-w-5xl flex-col gap-5 p-5 py-8">
-        {children}
-      </div>
+      <div className="flex w-full max-w-5xl flex-col gap-5 p-5">{children}</div>
     </>
   )
 }

apps/frontend/components/Cover.tsx

@@ -1,40 +1,61 @@
 import { cn } from '@/lib/utils'
+import Image from 'next/image'
 
 interface CoverProps {
   title: string
   description: string
 }
 
-const bgImage: { [key: string]: string } = {
-  problem: 'bg-[url(/problembanner.svg)]',
-  notice: 'bg-[url(/noticebanner.svg)]',
-  contest: 'bg-[url(/contestbanner.svg)]'
+const bgColors: { [key: string]: string } = {
+  contest: 'bg-gradient-to-b from-[#7BD9D3] to-[#A7A5A1]',
+  problem: 'bg-gradient-to-b from-[#5861B7] to-[#99978E]',
+  notice: 'bg-gradient-to-b from-[#2F4672] to-[#4671B3]'
+}
+
+const icons: { [key: string]: string } = {
+  problem: '/codedang-icon.png',
+  notice: '/notice-icon.png',
+  contest: '/contest-icon.png'
 }
 
 /**
  * @param title - title text
  * @param description - description text
- * @param bgColor - tailwindcss color class (e.g. "bg-gray-500")
+
  */
 export default function Cover({ title, description }: CoverProps) {
   return (
     <div className="flex-col">
-      <div className="absolute top-0 h-16 w-full bg-white" />
+      <div className="absolute top-0 z-[10] h-16 w-full bg-white" />
       <div
         className={cn(
-          bgImage[title.toLowerCase()],
-          'relative bottom-[55px] z-[-10] mb-[-55px] flex h-[285px] w-screen items-center justify-center bg-cover bg-center bg-no-repeat'
+          bgColors[title.toLowerCase()],
+          'z-[-10] flex h-[200px] w-screen items-center justify-center'
         )}
       >
-        <div className="w-full flex-col text-center">
+        <Image
+          src={icons[title.toLowerCase()]}
+          width={280}
+          height={280}
+          alt={title}
+        />
+        <div className="flex-col text-center md:px-20">
           <h2 className="py-5 font-mono text-4xl font-bold text-white md:text-[56px]">
             {title}
           </h2>
           <p className="whitespace-nowrap text-sm text-white/80 md:text-base">
             {description}
           </p>
         </div>
+        <Image
+          src={icons[title.toLowerCase()]}
+          width={280}
+          height={280}
+          alt={title}
+          className="rotate-180"
+        />
       </div>
+      <div className="h-16 w-full bg-white" />
     </div>
   )
 }