feat(landing): 랜딩 페이지 구현중 (#36)

src/app/landing/components/Badge.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@/utils';
+import { ComponentProps } from 'react';
+import { match } from 'ts-pattern';
+
+interface BadgeProps extends ComponentProps<'div'> {
+  variant?: 'A' | 'B';
+}
+
+export function Badge({ variant = 'A', className, ...restProps }: BadgeProps) {
+  const paddingClassName = match(variant)
+    .with('A', () => 'py-[12px] px-[20px]')
+    .with('B', () => 'py-[2px] px-[11px]')
+    .exhaustive();
+
+  return (
+    <div
+      className={cn(
+        className,
+        paddingClassName,
+        'rounded-[8px] bg-[#D1E8E0] text-[#186D50] text-[16px] font-[600] w-fit',
+      )}
+      {...restProps}
+    />
+  );
+}

src/app/landing/containers/FirstSection/FirstSection.tsx

@@ -0,0 +1,18 @@
+import { Spacing } from '@/system/utils/Spacing';
+import { DownArrow } from './components/DownArrow';
+
+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} />
+
+      <DownArrow />
+      <Spacing size={60} />
+    </div>
+  );
+}

src/app/landing/containers/FirstSection/components/DownArrow.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+export function DownArrow() {
+  return (
+    <motion.div
+      initial={{ y: 0 }}
+      animate={{ y: 10 }}
+      transition={{
+        repeat: Infinity,
+        repeatType: 'reverse',
+        duration: 0.5,
+      }}
+      className="flex flex-col items-center">
+      <span className="text-white text-heading1 font-bold">SCROLL</span>
+      <svg xmlns="http://www.w3.org/2000/svg" width="26" height="17" viewBox="0 0 26 17" fill="none">
+        <g opacity="0.82">
+          <path d="M4.25 3L13 8.8463L21.75 3" stroke="#CCCDD1" stroke-width="3" stroke-linecap="square" />
+          <path d="M4.25 9.1543L13 15.0006L21.75 9.1543" stroke="white" stroke-width="3" stroke-linecap="square" />
+        </g>
+      </svg>
+    </motion.div>
+  );
+}

src/app/landing/containers/Footer/Footer.tsx

@@ -0,0 +1,30 @@
+import { TouchButton } from '@/components/TouchButton';
+import { Spacing } from '@/system/utils/Spacing';
+import { NoteIcon } from './components/NoteIcon';
+import { PencilIcon } from './components/PencilIcon';
+import { CloverIcon } from './components/CloverIcon';
+import { TitleIcon } from './components/TitleIcon';
+
+export function Footer() {
+  return (
+    <footer className="flex flex-col items-center justify-center bg-neutral-95">
+      <Spacing size={120} />
+      <div className="flex items-center gap-[6px]">
+        <span className="text-title3 text-white">흩어져있는 내 경험들</span>
+        <NoteIcon />
+        <span className="text-title3 text-white">모아모아 취뽀까지</span>
+        <PencilIcon />
+      </div>
+      <Spacing size={32} />
+      <div className="flex items-center gap-[18px]">
+        <CloverIcon />
+        <TitleIcon />
+      </div>
+      <Spacing size={37} />
+      <TouchButton className="bg-mint-30 rounded-[6px] px-[20px] py-[13px] text-body2 text-neutral-95 font-semibold">
+        취뽀하러 가기
+      </TouchButton>
+      <Spacing size={180} />
+    </footer>
+  );
+}

src/app/landing/containers/Footer/components/CloverIcon.tsx

@@ -0,0 +1,37 @@
+export function CloverIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="112" height="111" viewBox="0 0 112 111" fill="none">
+      <path d="M19.1462 97.7634L32.731 73.2202L5.20006 80.7308L19.1462 97.7634Z" fill="#20E79D" />
+      <path
+        d="M51.7326 24.2702L49.752 12.8651L63.2953 0L84.9824 7.8467L94.3902 17.9225L88.8161 30.2584L100.402 29.6037L109.739 44.8824L106.294 66.99L92.7035 73.0062L79.9586 69.1137L76.2968 83.2777L64.8514 91.2408L41.8094 82.6713L41.796 65.5981L25.9051 61.9236L19.7344 49.2825L23.6965 23.8509L39.0454 18.5599L51.7326 24.2702Z"
+        fill="#20E79D"
+      />
+      <path
+        opacity="0.9"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M84.5041 57.4366L72.1562 51.8438L73.8116 47.0156L86.7633 50.2167L84.5041 57.4366Z"
+        fill="#007D4F"
+      />
+      <path
+        opacity="0.9"
+        d="M65.375 38.9712L67.6978 26.4434L74.9176 28.3563L70.2958 40.3265L65.375 38.9712Z"
+        fill="#007D4F"
+      />
+      <path
+        opacity="0.9"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M56.0012 47.4627L42.4691 45.2332L43.9172 39.1254L56.8653 42.8553L56.0012 47.4627Z"
+        fill="#007D4F"
+      />
+      <path
+        opacity="0.9"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M66.6703 54.2593L64.9401 66.384L58.1172 65.6953L61.6844 53.1675L66.6703 54.2593Z"
+        fill="#007D4F"
+      />
+    </svg>
+  );
+}

src/app/landing/containers/Footer/components/NoteIcon.tsx

@@ -0,0 +1,10 @@
+export function NoteIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <rect x="4.65625" y="2.06055" width="17.2862" height="17.2862" rx="0.960343" fill="#878A93" />
+      <rect x="2.0625" y="4.6543" width="17.2862" height="17.2862" rx="0.960343" fill="#CCCDD1" />
+      <rect x="4.78906" y="7.38477" width="11.5241" height="1.92069" rx="0.960343" fill="#878A93" />
+      <rect x="4.78906" y="11.2246" width="8.64309" height="1.92069" rx="0.960343" fill="#878A93" />
+    </svg>
+  );
+}

src/app/landing/containers/Footer/components/PencilIcon.tsx

@@ -0,0 +1,32 @@
+export function PencilIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
+      <path
+        d="M20.6441 19.616C20.8639 20.2556 20.2515 20.868 19.6119 20.6482L14.0782 18.7468C13.5102 18.5516 13.3431 17.8288 13.7678 17.4041L17.4 13.7719C17.8247 13.3472 18.5475 13.5143 18.7427 14.0823L20.6441 19.616Z"
+        fill="#F6F6F6"
+      />
+      <path
+        d="M2.875 8.04297L8.04475 2.87322L18.8446 13.6731C19.1618 13.9903 19.1618 14.5047 18.8446 14.8219L14.8237 18.8428C14.5064 19.1601 13.9921 19.1601 13.6748 18.8428L2.875 8.04297Z"
+        fill="#989BA2"
+      />
+      <rect
+        x="3.10156"
+        y="8.27539"
+        width="7.31113"
+        height="2.08843"
+        transform="rotate(-45 3.10156 8.27539)"
+        fill="#F6F6F6"
+      />
+      <path
+        d="M1.15254 6.31856C0.8353 6.00132 0.8353 5.48697 1.15254 5.16972L5.17346 1.14881C5.4907 0.831566 6.00505 0.831566 6.32229 1.14881L8.27912 3.10564L3.10937 8.27539L1.15254 6.31856Z"
+        fill="#CCCDD1"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.612 20.6461C20.2516 20.8659 20.864 20.2535 20.6442 19.6139L20.0098 17.7675L17.7656 20.0117L19.612 20.6461Z"
+        fill="#989BA2"
+      />
+    </svg>
+  );
+}

src/app/landing/containers/Footer/components/TitleIcon.tsx

@@ -0,0 +1,18 @@
+export function TitleIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="106" height="52" viewBox="0 0 106 52" fill="none">
+      <path
+        d="M55.8984 10.4157V1.2168H83.8197V10.4157L77.3684 29.6744L67.4271 26.679L72.715 10.4157H55.8984Z"
+        fill="white"
+      />
+      <path d="M99.6834 1.2168H89.9536V29.6744H99.6834V20.2601H105.5V10.4157H99.6834V1.2168Z" fill="white" />
+      <path d="M57.6973 41.2285V31.8141H99.6834V51.4987H89.9536V41.2285H57.6973Z" fill="white" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.57002 0.501465V32.1711H19.7932V39.5354H0.5V49.1939H48.9318V39.5354H29.7371V32.1711H46.9632V0.501465H37.2181V7.77158H29.7371V0.501465H19.7932V7.77158H12.4127V0.501465H2.57002ZM12.3476 16.7729V22.8526H19.7325V16.7729H12.3476ZM29.3958 16.7729V22.8526H36.8986V16.7729H29.3958Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

src/app/landing/containers/FourthSection/FourthSection.tsx

@@ -0,0 +1,22 @@
+import { Tag } from '@/system/components';
+import { Spacing } from '@/system/utils/Spacing';
+import { Badge } from '../../components/Badge';
+import Image from 'next/image';
+
+export function FourthSection() {
+  return (
+    <div className="py-[160px] bg-neutral-3 flex flex-col items-center">
+      <Badge>태그 검색</Badge>
+      <Spacing size={50} />
+      <span className="text-neutral-95 text-[42px] font-[600] text-center">
+        태그 검색으로 원하는 정보 탐색이 쉬워져요
+      </span>
+      <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>
+    </div>
+  );
+}

src/app/landing/containers/Header.tsx

@@ -0,0 +1,13 @@
+import { Logo } from '@/components/Logo';
+import { TouchButton } from '@/components/TouchButton';
+
+export function Header() {
+  return (
+    <header className="flex justify-between items-center px-[80px] py-[16px] bg-neutral-95 fixed top-0 right-0 w-full">
+      <Logo />
+      <TouchButton className="bg-mint-30 rounded-[6px] px-[16px] py-[8px] text-label1 text-neutral-95 font-semibold">
+        시작하기
+      </TouchButton>
+    </header>
+  );
+}

src/app/landing/containers/SecondSection/SecondSection.tsx

@@ -0,0 +1,36 @@
+import { Spacing } from '@/system/utils/Spacing';
+import { Badge } from '../../components/Badge';
+import Image from 'next/image';
+import { TitleIcon } from '@/app/landing/containers/SecondSection/components/TitleIcon';
+
+export function SecondSection() {
+  return (
+    <div className="bg-neutral-95">
+      <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="" />
+        </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>
+        <Spacing size={50} />
+        <span className="text-white text-[42px] font-[600] whitespace-pre text-center">{`마스터 자소서부터 필수 면접 답변까지\n공통적으로 쓰이는 내 정보를 따로 모아놔요`}</span>
+        <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>
+        <Spacing size={160} />
+      </div>
+    </div>
+  );
+}

src/app/landing/containers/SecondSection/components/TitleIcon.tsx

@@ -0,0 +1,18 @@
+export function TitleIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="106" height="52" viewBox="0 0 106 52" fill="none">
+      <path
+        d="M55.8984 10.4157V1.2168H83.8197V10.4157L77.3684 29.6744L67.4271 26.679L72.715 10.4157H55.8984Z"
+        fill="white"
+      />
+      <path d="M99.6834 1.2168H89.9536V29.6744H99.6834V20.2601H105.5V10.4157H99.6834V1.2168Z" fill="white" />
+      <path d="M57.6973 41.2285V31.8141H99.6834V51.4987H89.9536V41.2285H57.6973Z" fill="white" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.57002 0.501465V32.1711H19.7932V39.5354H0.5V49.1939H48.9318V39.5354H29.7371V32.1711H46.9632V0.501465H37.2181V7.77158H29.7371V0.501465H19.7932V7.77158H12.4127V0.501465H2.57002ZM12.3476 16.7729V22.8526H19.7325V16.7729H12.3476ZM29.3958 16.7729V22.8526H36.8986V16.7729H29.3958Z"
+        fill="white"
+      />
+    </svg>
+  );
+}