depromeet · qkrdmstlr3 · Aug 30, 2024 · Aug 30, 2024 · Aug 30, 2024
@@ -1,18 +1,23 @@
 import { Spacing } from '@/system/utils/Spacing';
 import { DownArrow } from './components/DownArrow';
+import Image from 'next/image';
 
 export function FirstSection() {
   return (
-    <div className="bg-neutral-95 h-[100vh] flex flex-col items-center justify-end pb-[30px]">
-      <span className="text-white font-[700] text-[48px]">아.. 그때 써놓은 자소서 항목 어딨더라?</span>
-      <Spacing size={24} />
-      <span className="text-neutral-30 font-[500] text-[24px] whitespace-pre text-center">
-        {`취준 중 모으는 수많은 정보들, 막상 필요할 때\n어디 있었는지 찾기 힘들었던 경험 있으셨나요?`}
-      </span>
-      <Spacing size={10} />
+    <div className="bg-neutral-95 h-[100vh] flex flex-col items-center justify-between pt-[88px] pb-[30px]">
+      <Image src="/landing/landing_scape.png" alt="" width={1440} height={900} className="z-[0] absolute top-0" />
+      <div className="flex flex-col items-center">
+        <span className="text-white font-[700] text-[48px]">아.. 그때 써놓은 자소서 항목 어딨더라?</span>
+        <Spacing size={24} />
+        <span className="text-neutral-30 font-[500] text-[24px] whitespace-pre text-center">
+          {`취준 중 모으는 수많은 정보들, 막상 필요할 때\n어디 있었는지 찾기 힘들었던 경험 있으셨나요?`}
+        </span>
+      </div>
 
-      <DownArrow />
-      <Spacing size={60} />
+      <div>
+        <DownArrow />
+        <Spacing size={60} />
+      </div>
     </div>
   );
 }
@@ -14,8 +14,8 @@ export function FourthSection() {
       <Spacing size={24} />
       <span className="text-neutral-50 text-title2 whitespace-pre text-center">{`취준 정보를 작성하는 순간부터 태그를 등록하여\n원하는 키워드의 정보를 빠르게 찾을 수 있어요`}</span>
       <Spacing size={100} />
-      <div className="rounded-[16px] border-neutral-95 border-[8px] overflow-hidden mx-[20px]">
-        <Image src="/landing/image156.png" alt="" width={1000} height={640} />
+      <div className="rounded-[30px] border-neutral-95 border-[8px] overflow-hidden mx-[20px]">
+        <Image src="/landing/image156_2.png" alt="" width={1000} height={640} />
       </div>
     </div>
   );

@@ -0,0 +1,29 @@
+'use client';
+
+import { TouchButton } from '@/components/TouchButton';
+import { LOGO } from './Logo';
+import { Text } from './Text';
+import { useRouter } from 'next/navigation';
+
+export function Header() {
+  const router = useRouter();
+
+  return (
+    <header
+      className="z-[10000] flex justify-between items-center px-[80px] py-[16px] fixed top-0 right-0 w-full"
+      style={{
+        backdropFilter: 'blur(5px)',
+      }}>
+      <div className="flex items-center gap-[6px]">
+        <LOGO />
+        <Text />
+      </div>
+
+      <TouchButton
+        className="bg-mint-30 rounded-[6px] px-[16px] py-[8px] text-label1 text-neutral-95 font-semibold"
+        onClick={() => router.push('/login')}>
+        시작하기
+      </TouchButton>
+    </header>
+  );
+}
@@ -0,0 +1,37 @@
+export function LOGO() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="38" height="37" viewBox="0 0 38 37" fill="none">
+      <path d="M6.87943 32.5878L11.4077 24.4067L2.23068 26.9103L6.87943 32.5878Z" fill="#20E79D" />
+      <path
+        d="M17.7443 8.09006L17.0841 4.28838L21.5985 0L28.8276 2.61557L31.9635 5.97417L30.1055 10.0861L33.9674 9.86789L37.0797 14.9608L35.9316 22.33L31.4013 24.3354L27.153 23.0379L25.9324 27.7592L22.1172 30.4136L14.4365 27.5571L14.432 21.866L9.13503 20.6412L7.07812 16.4275L8.39885 7.95031L13.5152 6.18663L17.7443 8.09006Z"
+        fill="#20E79D"
+      />
+      <path
+        opacity="0.9"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M28.6628 19.1455L24.5469 17.2813L25.0987 15.6719L29.4159 16.7389L28.6628 19.1455Z"
+        fill="#007D4F"
+      />
+      <path
+        opacity="0.9"
+        d="M22.2891 12.9904L23.0633 8.81445L25.47 9.45211L23.9293 13.4422L22.2891 12.9904Z"
+        fill="#007D4F"
+      />
+      <path
+        opacity="0.9"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19.1619 15.8209L14.6512 15.0777L15.1339 13.0418L19.4499 14.2851L19.1619 15.8209Z"
+        fill="#007D4F"
+      />
+      <path
+        opacity="0.9"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M22.726 18.0864L22.1493 22.128L19.875 21.8984L21.0641 17.7225L22.726 18.0864Z"
+        fill="#007D4F"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,18 @@
+export function Text() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="35" height="18" viewBox="0 0 35 18" fill="none">
+      <path
+        d="M18.4688 3.80537V0.739075H27.7759V3.80537L25.6254 10.225L22.3117 9.22646L24.0743 3.80537H18.4688Z"
+        fill="#20E79D"
+      />
+      <path d="M33.0638 0.739075H29.8206V10.225H33.0638V7.08683H35.0028V3.80537H33.0638V0.739075Z" fill="#20E79D" />
+      <path d="M19.0684 14.0763V10.9382H33.0638V17.4997H29.8206V14.0763H19.0684Z" fill="#20E79D" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0.690012 0.500366V11.0569H6.43109V13.5117H0V16.7312H16.144V13.5117H9.74577V11.0569H15.4878V0.500366H12.2395V2.92374H9.74577V0.500366H6.43109V2.92374H3.97091V0.500366H0.690012ZM3.94885 5.92362V7.95015H6.41052V5.92362H3.94885ZM9.63164 5.92362V7.95015H12.1326V5.92362H9.63164Z"
+        fill="#20E79D"
+      />
+    </svg>
+  );
+}
@@ -5,19 +5,32 @@ import { TitleIcon } from '@/app/landing/containers/SecondSection/components/Tit
 
 export function SecondSection() {
   return (
-    <div className="bg-neutral-95">
+    <div className="bg-neutral-95 relative">
       <div className="bg-neutral-95 flex flex-col items-center relative">
         <div className="absolute left-[50%] translate-x-[-50%] top-[70px]">
-          <Image src="/landing/image157.png" width={410} height={1355} alt="" />
+          <Image src="/landing/landing_03.png" width={410} height={1355} alt="" />
+        </div>
+        <div
+          className="flex flex-col items-center relative w-full"
+          style={{ background: 'linear-gradient(180deg, #1B1C1E 15%, rgba(27, 28, 30, 0.00) 100%)' }}>
+          <Spacing size={240} />
+          <div className="flex flex-col items-center relative w-full">
+            <Image
+              src="/landing/landing_effect.png"
+              alt=""
+              width={1227}
+              height={509}
+              className="z-[0] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]"
+            />
+            <span className="text-title3 text-white">여기저기 쌓여있는 내 취준 정보, 이젠 쉽게 정리해보세요! </span>
+            <Spacing size={20} />
+            <span className="font-[600] text-[52px] text-[white]">취준 데이터 관리 서비스</span>
+            <Spacing size={16} />
+            <TitleIcon />
+          </div>
+          <Spacing size={768} />
         </div>
-        <Spacing size={240} />
-        <span className="text-title3 text-white">여기저기 쌓여있는 내 취준 정보, 이젠 쉽게 정리해보세요! </span>
-        <Spacing size={20} />
-        <span className="font-[600] text-[52px] text-[white]">취준 데이터 관리 서비스</span>
-        <Spacing size={16} />
-        <TitleIcon />
       </div>
-      <Spacing size={768} />
       <div className="flex flex-col items-center bg-gradient-to-b to-[#81ECC5] from-[rgba(129,236,197,0)] ">
         <Spacing size={370} />
         <Badge>내 정보</Badge>
@@ -26,8 +39,8 @@ export function SecondSection() {
         <Spacing size={24} />
         <span className="text-title2 text-mint-10">자주쓰는 정보를 태그로 쉽게 분류할 수 있어요</span>
         <Spacing size={100} />
-        <div className="rounded-[16px] border-neutral-95 border-[8px] overflow-hidden mx-[20px]">
-          <Image src="/landing/image152.png" alt="" width={1010} height={640} />
+        <div className="rounded-[30px] border-neutral-95 border-[8px] overflow-hidden mx-[20px]">
+          <Image src="/landing/image152_2.png" alt="" width={1010} height={640} />
         </div>
         <Spacing size={160} />
       </div>

@@ -22,11 +22,11 @@ export function ThirdSection() {
 
           <Spacing size={100} direction="row" />
 
-          <div className="w-[1010px] rounded-[16px] border-neutral-95 border-[8px] overflow-hidden mx-[20px]">
-            <Image src="/landing/image153.png" alt="" width={1010} height={640} />
+          <div className="w-[1010px] rounded-[30px] border-neutral-95 border-[8px] overflow-hidden mx-[20px]">
+            <Image src="/landing/image153_2.png" alt="" width={1010} height={640} />
           </div>
           <div className="absolute bottom-[-180px] right-[47%]">
-            <Image src="/landing/image142.png" alt="" width={468} height={452} />
+            <Image src="/landing/image142_2.png" alt="" width={468} height={452} />
           </div>
         </div>
       </div>
@@ -35,8 +35,8 @@ export function ThirdSection() {
 
       <div className="relative h-[640px]">
         <div className="absolute flex top-[50%] left-[50%] gap-[12px] translate-x-[calc(-50%-100px)] -translate-y-1/2">
-          <div className="w-[1010px] rounded-[16px] border-neutral-95 border-[8px] overflow-hidden mx-[20px]">
-            <Image src="/landing/image154.png" alt="" width={1010} height={640} />
+          <div className="w-[1010px] rounded-[30px] border-neutral-95 border-[8px] overflow-hidden mx-[20px]">
+            <Image src="/landing/image154_2.png" alt="" width={1010} height={640} />
           </div>
 
           <Spacing size={70} direction="row" />
@@ -46,7 +46,13 @@ export function ThirdSection() {
             <div className="flex flex-col">
               <Badge variant="B">2</Badge>
               <Spacing size={20} />
-              <Image src="/landing/image155.png" alt="" width={323} height={48} />
+              <Image
+                src="/landing/image155_2.png"
+                alt=""
+                width={323}
+                height={48}
+                // className="border-[1px] border-neutral-20 rounded-[12px]"
+              />
               <Spacing size={16} />
               <span className="text-[24px] whitespace-pre">
                 {`미리 모아둔 내 정보들을 단계별로 분류해\n`}

@@ -1,7 +1,7 @@
 import { FirstSection } from './containers/FirstSection/FirstSection';
 import { Footer } from './containers/Footer/Footer';
 import { FourthSection } from './containers/FourthSection/FourthSection';
-import { Header } from './containers/Header';
+import { Header } from './containers/Header/Header';
 import { SecondSection } from './containers/SecondSection/SecondSection';
 import { ThirdSection } from './containers/ThirdSection/ThridSection';