feat(fe): modify mainpage mainbanner and midbanner design

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

@@ -34,7 +34,7 @@ export function Carousel({ slides }: CarouselProps) {
   }
 
   return (
-    <div className="relative my-1 h-[640px] w-full max-w-[1380px] overflow-hidden rounded-[20px] md:max-w-[1860px]">
+    <div className="relative my-1 aspect-[1208/554] w-full max-w-[1208px] overflow-hidden rounded-[20px]">
       {slides.map((slide, index) => (
         <div
           key={slide.href + slide.topTitle}
@@ -51,15 +51,15 @@ export function Carousel({ slides }: CarouselProps) {
             unoptimized
             priority
           />
-          <div className="font-pretendard absolute left-[130px] top-[150px] z-10 flex h-[344px] w-[539px] flex-col gap-[96px] tracking-[-0.03em] text-white">
+          <div className="font-pretendard absolute left-[80px] top-[126px] z-10 flex h-[344px] w-[539px] flex-col gap-[90px] tracking-[-0.03em] text-white">
             <div className="flex flex-col">
-              <h1 className="text-[60px] font-medium leading-[110%] md:text-nowrap">
+              <h1 className="text-[48px] font-medium leading-[110%] md:text-nowrap">
                 {slide.topTitle}
               </h1>
-              <h2 className="text-[60px] font-medium leading-[110%] md:text-nowrap">
+              <h2 className="text-[48px] font-medium leading-[110%] md:text-nowrap">
                 {slide.bottomTitle}
               </h2>
-              <p className="mt-5 whitespace-pre-line text-[16px] font-normal leading-[150%] tracking-[-0.03em] text-[#E5E5E5]">
+              <p className="mt-3 whitespace-pre-line text-[16px] font-normal leading-[150%] tracking-[-0.03em] text-[#E5E5E5]">
                 {slide.sub}
               </p>
             </div>
@@ -81,7 +81,7 @@ export function Carousel({ slides }: CarouselProps) {
           </div>
         </div>
       ))}
-      <div className="absolute left-[20px] top-0 z-20 flex h-[640px] w-[80px] items-center justify-center">
+      <div className="absolute left-[30px] top-0 z-20 flex h-full items-center justify-center">
         <Button
           variant="ghost"
           className="h-10 p-0 hover:bg-transparent active:bg-transparent"
@@ -92,7 +92,7 @@ export function Carousel({ slides }: CarouselProps) {
           </div>
         </Button>
       </div>
-      <div className="absolute right-[20px] top-0 z-20 flex h-[640px] w-[80px] items-center justify-center">
+      <div className="absolute right-[30px] top-0 z-20 flex h-[554px] items-center justify-center">
         <Button
           variant="ghost"
           className="h-10 p-0 hover:bg-transparent active:bg-transparent"
@@ -103,7 +103,7 @@ export function Carousel({ slides }: CarouselProps) {
           </div>
         </Button>
       </div>
-      <div className="absolute right-[94px] top-[560px] z-20 flex h-[28px] w-[57px] items-center justify-center rounded-full bg-black/40 px-4 py-1 backdrop-blur-md">
+      <div className="absolute right-[115px] top-[483px] z-20 flex h-[28px] w-[57px] items-center justify-center rounded-full bg-black/40 px-4 py-1 backdrop-blur-md">
         <p className="font-pretendard flex items-center gap-1 text-sm font-medium leading-[140%] tracking-[-0.03em] text-white">
           <span>{facade + 1}</span>
           <span>/</span>

apps/frontend/app/(client)/(main)/_components/MiddleContestBanner.tsx

@@ -7,8 +7,8 @@ import type { JSX } from 'react'
 
 export function MiddleContestBanner() {
   return (
-    <div className="relative flex h-[578px] w-full max-w-[1860px]">
-      <TextBox className={'shirink-0 z-10 h-full min-w-[38%]'} />
+    <div className="relative flex h-[518px] w-full max-w-[1208px]">
+      <TextBox className={'z-10 h-full w-[609px] shrink-0'} />
       <ImageBox className={'h-full flex-1'} />
     </div>
   )
@@ -17,13 +17,13 @@ export function MiddleContestBanner() {
 function TextBox({ className }: { className: string }) {
   return (
     <div
-      className={`flex items-center rounded-l-[20px] bg-[#182E56] pe-[140px] ps-[86px] ${className}`}
+      className={`flex items-center rounded-l-[20px] bg-[#182E56] pe-[140px] ps-[60px] ${className}`}
     >
       {/* 글자 + 버튼 */}
       <div className="text-background flex h-full max-h-[264px] w-full max-w-[446px] flex-col justify-between">
         {/* 글자 부분 */}
         <div className="flex h-full max-h-[164px] flex-col justify-between">
-          <Text className="max-h-[96px] w-fit whitespace-nowrap text-[40px] font-semibold leading-[120%]">
+          <Text className="max-h-[96px] w-fit whitespace-nowrap text-4xl font-semibold leading-[120%]">
             <p>
               {' '}
               TAKE PART IN REAL-TIME
@@ -90,7 +90,7 @@ function ImageBox({ className }: { className: string }) {
     <div className={`relative ${className}`}>
       <ImageMask className="h-full max-h-[183px] w-full" />
       <Image
-        src={'/banners/mainpage_middle_banner.png'}
+        src={'/banners/middle_banner.png'}
         alt="middle_banner"
         fill
         style={{

apps/frontend/app/(client)/(main)/_components/ServiceCards.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 
 export function ServiceCards() {
   return (
-    <section className="font-pretendard flex w-full flex-col items-center gap-10">
+    <section className="font-pretendard mt-4 flex w-full flex-col items-center gap-10">
       <div className="flex w-full max-w-[1208px] flex-col items-start gap-10">
         <h2 className="text-[30px] font-semibold leading-9 tracking-[-0.9px] text-black">
           SERVICE WE PROVIDE

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

@@ -9,8 +9,8 @@ import { ServiceCards } from './_components/ServiceCards'
 const slides = [
   {
     type: 'codedang',
-    topTitle: 'Your Coding Journey',
-    bottomTitle: 'Starts Here',
+    topTitle: 'YOUR CODING JOURNEY',
+    bottomTitle: 'STARTS HERE',
     sub: "Practice real problems, compete with peers.\nGrow your skills on SKKU's coding platform.",
     img: '/banners/main_banner.png',
     imgAlt: 'Codedang',