feat: 2회차 Banner 수정

components/first/Banner.tsx

@@ -4,8 +4,8 @@ import KeyboardDoubleArrowDownOutlinedIcon from '@mui/icons-material/KeyboardDou
 
 import TeoBI from '@/public/images/TeoBI.png'
 import TeoBI2 from '@/public/images/TeoBI2.png'
-import Mouse from '@/public/images/Mouse.svg'
-import Down from '@/public/images/Down.svg'
+import Mouse from '@/public/images/Mouse_1.svg'
+import Down from '@/public/images/Down_1.svg'
 
 const Banner = () => {
   return (

components/second/Banner.tsx

@@ -2,71 +2,57 @@ import Image from 'next/image'
 import React from 'react'
 import KeyboardDoubleArrowDownOutlinedIcon from '@mui/icons-material/KeyboardDoubleArrowDownOutlined'
 
-import TeoBI from '@/public/images/TeoBI.png'
-import TeoBI2 from '@/public/images/TeoBI2.png'
-import Mouse from '@/public/images/Mouse.svg'
-import Down from '@/public/images/Down.svg'
+import Mouse from '@/public/images/Mouse_2.svg'
+import Down from '@/public/images/Down_2.svg'
+import TabletBI1 from '@/public/images/TabletBI1_2.svg'
+import TabletBI2 from '@/public/images/TabletBI2_2.svg'
+import Yellow from '@/public/images/yellow_2.svg'
+import Red from '@/public/images/red_2.svg'
 
 const Banner = () => {
   return (
     <section
       id="banner"
-      className="content bg-black text-white h-[calc(100vh_-_3rem)] flex-center relative tablet:px-10"
+      className="content bg-[#F8F8F8] desktop:h-[calc(100vh_-_40.8rem)] tablet:h-[894px] h-[590px] desktop:bg-banner bg-center bg-no-repeat flex-center relative desktop:px-8 tablet:px-10"
     >
-      <div className="w-full h-full flex-center flex-col tablet:justify-between desktop:justify-around desktop:max-w-[1024px] desktop:mt-50 desktop-xl:max-w-[1360px]">
-        <div className="w-full tablet:pt-16 tablet:pl-16 desktop:hidden">
-          <Image
-            priority={true}
-            className="ml-[-48px] tablet:w-[192px] tablet:h-[192px] tablet:ml-0"
-            alt="TeoBI2"
-            src={TeoBI2}
-            width={126}
-            height={125}
-          />
-        </div>
-        <div className="hidden desktop:flex w-full justify-end">
-          <Image
-            priority={true}
-            alt="TeoBI"
-            src={TeoBI}
-            width={461}
-            height={281}
-          />
-        </div>
-        <div className="flex w-full flex-center tablet:flex-start tablet:items-end">
-          <div className="z-[1] mt-[-30px] tablet:mt-0 desktop:w-full desktop:flex desktop:flex-col desktop:items-start desktop:space-y-20">
-            <h1 className="font-Pretendard font-bold text-[3.75rem] tablet:text-[4.375rem] desktop:text-[5rem] leading-[56px] tracking-[-0.6%] text-center desktop:text-right">
+      <div className="w-full tablet:h-full flex-center flex-col tablet:justify-center desktop:relative desktop:max-w-[100%] desktop-xl:max-w-[1620px] px-20">
+        <div className="w-full desktop:absolute desktop:bottom-20 relative z-[1]">
+          <div className="z-[1] tablet:mt-0 desktop:w-full desktop:space-y-20">
+            <h1 className="font-AbhayaLibre font-bold desktop:hidden text-[60px] tablet:text-[4.375rem] desktop:text-[5rem] leading-[56px] tracking-[-0.6%] text-center desktop:text-right">
               TEOConf 2023
             </h1>
-            <div className="font-Pretendard font-semibold text-[1.375rem] tablet:text-[2.375rem] desktop:text-[3rem] space-y-2 tracking-[-0.6%] mt-7">
-              <div className="text-center desktop:text-left">
-                테오의 컨퍼런스
+            <div className="font-Pretendard space-y-2 tracking-[-0.6%] desktop:leading-14 flex flex-col desktop:gap-y-7 desktop:mt-0 tablet:mt-12 mt-[26px]">
+              <div className="text-center text-black desktop:font-extrabold font-semibold text-[1.375rem] tablet:text-[2.375rem] desktop:text-[3.75rem] desktop:text-left">
+                테오의 컨퍼런스 2기
               </div>
-              <div className="text-center desktop:text-left">
-                23.05.20 토요일, 사람인 카페
+              <div className="text-center text-black font-semibold text-[1.375rem] tablet:text-[2.375rem] tablet:mt-0 desktop:text-[3rem] desktop:text-left">
+                23.10.28 토요일, 사람인 본사
               </div>
             </div>
           </div>
-          <div className="hidden gap-2 desktop:block">
-            <Image alt="scroll down" src={Mouse} width={26} height={40} />
-            <Image
-              className="m-auto mt-2 desktop:animate-bounce"
-              alt="scroll down"
-              src={Down}
-              width={12}
-              height={12}
-            />
-          </div>
         </div>
-        <div className="absolute bottom-0 right-0 tablet:relative tablet:w-full tablet:flex tablet:justify-end tablet:mr-16 desktop:hidden">
+        <div className="hidden gap-2 desktop:block absolute left-1/2 desktop:bottom-20">
+          <Image alt="scroll down" src={Mouse} width={26} height={40} />
           <Image
-            priority={true}
-            width={302}
-            height={184}
-            alt="TeoBI"
-            src={TeoBI}
+            className="m-auto mt-2 desktop:animate-bounce"
+            alt="scroll down"
+            src={Down}
+            width={12}
+            height={12}
           />
         </div>
+        <div className="desktop:hidden tablet:block absolute tablet:top-0 tablet:left-10 top-[-30px] left-[-54px] tablet:w-auto w-96 h-80 z-[0]">
+          <Image alt="TabletBI1" src={TabletBI1} />
+        </div>
+        <div className="desktop:hidden tablet:block hidden absolute tablet:bottom-0 tablet:right-10 bottom-[-200px] z-[0]">
+          <Image alt="TabletBI2" src={TabletBI2} />
+        </div>
+        <div className="tablet:hidden block absolute tablet:bottom-0 tablet:right-10 bottom-0 right-2 z-[0]">
+          <Image alt="TabletBI2" src={Yellow} />
+        </div>
+        <div className="tablet:hidden block absolute tablet:bottom-0 tablet:right-10 bottom-0 right-0 z-[0]">
+          <Image alt="TabletBI2" src={Red} />
+        </div>
         <div className="w-full flex-center desktop:justify-end">
           <KeyboardDoubleArrowDownOutlinedIcon className="absolute bottom-20 animate-bounce tablet:hidden" />
         </div>

components/second/Introduce.tsx

@@ -95,8 +95,8 @@ const Introduce = () => {
           <p className="tablet:text-body1 text-mobile-body2 text-center mt-6 text-gray-900">
             테오의 컨퍼런스는{' '}
             <strong className="text-purple-main rounded-lg">
-              &quot;모두에게 열려있는 컨퍼런스&quot;
-            </strong>{' '}
+              모두에게 열려있는 컨퍼런스
+            </strong>
             라는 컨셉을 목표로 <br className="hidden tablet:block" />
             서로가 갖고 있는 다양한 경험과 지식을 공유하고{' '}
             <br className="hidden tablet:block" />