feat-fe: 랜딩 페이지 구현

frontend/.eslintrc.json

@@ -20,7 +20,7 @@
     "prettier/prettier": "error",
     "no-console": "warn",
     "no-nested-ternary": "off",
-    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".js", ".tsx", "ts"] }],
+    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".js", ".tsx", "ts", "jpg", "png", "webp"] }],
     "react/jsx-uses-react": "off",
     "react/jsx-uses-vars": "warn",
     "react-hooks/rules-of-hooks": "error",
@@ -39,7 +39,10 @@
         "ts": "never",
         "tsx": "never",
         "svg": "always",
-        "json": "always"
+        "json": "always",
+        "jpg": "always",
+        "png": "always",
+        "webp": "always"
       }
     ],
     "import/no-unresolved": "off",

frontend/src/components/common/IconButton/index.tsx

@@ -11,6 +11,7 @@ export default function IconButton({
   disabled,
   onClick,
   children,
+  ...props
 }: PropsWithChildren<IconButtonProps>) {
   return (
     <S.IconButton
@@ -20,6 +21,7 @@ export default function IconButton({
       type={type}
       disabled={disabled}
       onClick={onClick}
+      {...props}
     >
       {children}
     </S.IconButton>

frontend/src/pages/Landing/index.tsx

@@ -1,22 +1,207 @@
-import { useNavigate } from 'react-router-dom';
-import Logo from '@assets/images/logo.svg';
-import { useEffect } from 'react';
+import Button from '@components/common/Button';
+
 import { routes } from '@router/path';
+import { useNavigate } from 'react-router-dom';
+
+import DashboardWebp from '@assets/images/dashboard.webp';
+import ManStrugglingWebp from '@assets/images/manStruggling.webp';
+import MessageWebp from '@assets/images/message.webp';
+import Feature1Webp from '@assets/images/feature1.webp';
+import Feature2Webp from '@assets/images/feature2.webp';
+import Feature3Webp from '@assets/images/feature3.webp';
+import { HiChevronDown, HiChevronUp } from 'react-icons/hi2';
+
+import IconButton from '@components/common/IconButton';
 import S from './style';
 
 export default function Landing() {
   const navigate = useNavigate();
 
-  useEffect(() => {
-    setTimeout(() => navigate(routes.signIn()), 2000);
-  }, [navigate]);
+  const SPEECH_BUBBLE_TEXTS = [
+    '면접관 여러 명이 지원자 평가를 어떻게 남기고 공유할 수 있지?',
+    '지원자들에게 일일이 연락하는게 너무 번거로워..',
+    '지원자 정보랑 평가가 한눈에 안들어와...',
+    '여러 공고를 한 번에 관리하기가 힘드네..',
+  ];
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
 
   return (
     <S.Container>
-      <S.Logo
-        src={Logo}
-        alt="크루루 로고"
-      />
+      <IconButton
+        size="md"
+        shape="round"
+        outline={false}
+        onClick={scrollToTop}
+        style={{ position: 'fixed', bottom: '4.8rem', right: '4.8rem', zIndex: 10, padding: '0.8rem' }}
+      >
+        <HiChevronUp />
+      </IconButton>
+
+      <S.MainSection>
+        <S.Catchphrase>
+          복잡했던 리크루팅,
+          <br />
+          하루만에
+          <S.HightLight> 크루루.</S.HightLight>
+        </S.Catchphrase>
+        <S.Supporting>
+          번거로운 엑셀 작업은 이제 그만!
+          <br />
+          리크루팅의 모든 단계를 크루루와 함께 해결하세요.
+        </S.Supporting>
+
+        <S.MainImg
+          src={DashboardWebp}
+          alt="지원자 현황을 한 눈에 확인할 수 있는 대시보드 페이지"
+        />
+
+        <S.CtaButtons>
+          <Button
+            size="md"
+            onClick={() => navigate(routes.signIn())}
+            color="white"
+          >
+            로그인하기
+          </Button>
+          <Button
+            size="md"
+            onClick={() => navigate(routes.signUp())}
+            color="primary"
+          >
+            크루루 새로 시작하기
+          </Button>
+        </S.CtaButtons>
+
+        <S.ScrollDownArea>
+          <HiChevronDown />
+        </S.ScrollDownArea>
+      </S.MainSection>
+
+      <S.PainPointSection>
+        <S.MessageImg src={MessageWebp} />
+        <S.PersonImgWrapper>
+          <S.PersonImg
+            src={ManStrugglingWebp}
+            alt="복잡한 모집과정에 괴로워하는 유저의 모습"
+          />
+
+          <S.SpeechBubbleContainer>
+            {SPEECH_BUBBLE_TEXTS.map((text, index) => (
+              <S.SpeechBubble
+                // eslint-disable-next-line react/no-array-index-key
+                key={index}
+                index={index}
+              >
+                {text}
+              </S.SpeechBubble>
+            ))}
+          </S.SpeechBubbleContainer>
+        </S.PersonImgWrapper>
+      </S.PainPointSection>
+
+      <S.ProductIntroSection>
+        <S.IntroText>
+          번거로운 지원 관리
+          <br />
+          까다로운 공고 제작
+          <br />
+          불필요한 관리 업무
+        </S.IntroText>
+        <S.StrongIntroText>
+          {/* eslint-disable-next-line */}
+          <S.StrongIntroHighlightText>크루루</S.StrongIntroHighlightText>로 한 번에 해결하세요.
+        </S.StrongIntroText>
+      </S.ProductIntroSection>
+
+      <S.FeatureSection color="blue">
+        <div>
+          <S.FeatureSubtitle color="blue">원스톱 지원자 관리</S.FeatureSubtitle>
+          <S.FeatureTitle>
+            한눈에 파악하고
+            <br />
+            빠르게 결정하는 리크루팅
+          </S.FeatureTitle>
+          <S.FeatureDescription>
+            복잡한 엑셀 작업은 그만!
+            <br />
+            클릭 한 번으로 지원자의 정보를 손쉽게 살펴보세요.
+            <br />
+            크루루와 함께라면, 오직 우수한 지원자를
+            <br />
+            찾는 일에만 집중하실 수 있습니다.
+          </S.FeatureDescription>
+        </div>
+
+        <S.FeatureImg src={Feature1Webp} />
+      </S.FeatureSection>
+
+      <S.FeatureSection color="purple">
+        <div>
+          <S.FeatureSubtitle color="purple">맞춤형 공고 제작</S.FeatureSubtitle>
+          <S.FeatureTitle>
+            인재들이 선호하는
+            <br />
+            매력적인 공고 관리
+          </S.FeatureTitle>
+          <S.FeatureDescription>
+            답답한 폼 작업 이젠 안녕!
+            <br />
+            다양한 질문 유형이 포함된 지원서를
+            <br />
+            원하는 대로 만들 수 있습니다.
+            <br />
+            우리 팀에 꼭 필요한 지원자의 관심을 사로잡으세요.
+          </S.FeatureDescription>
+        </div>
+
+        <S.FeatureImg src={Feature2Webp} />
+      </S.FeatureSection>
+
+      <S.FeatureSection color="gray">
+        <div>
+          <S.FeatureSubtitle color="gray">심플한 지원 경험</S.FeatureSubtitle>
+          <S.FeatureTitle>
+            지원자를 사로잡는
+            <br />
+            스마트한 첫 만남
+          </S.FeatureTitle>
+          <S.FeatureDescription>
+            아직도 이메일로 지원서를 받고 계신가요?
+            <br />
+            간결하고 직관적인 지원 페이지로 변화를 만들어보세요.
+            <br />
+            심플한 지원 경험이 여러분의 팀 이미지를
+            <br />
+            한층 더 높여줄 것입니다.
+          </S.FeatureDescription>
+        </div>
+
+        <S.FeatureImg src={Feature3Webp} />
+
+        <S.StartButtonWrapper>
+          <Button
+            size="fillContainer"
+            onClick={() => navigate(routes.signUp())}
+            color="primary"
+          >
+            크루루 새로 시작하기
+          </Button>
+        </S.StartButtonWrapper>
+      </S.FeatureSection>
+
+      <S.Footer>
+        <p>Copyright © 2024 Cruru, All rights reserved.</p>
+
+        <p>
+          Illustration by&nbsp;
+          <a href="https://icons8.com/illustrations/author/zD2oqC8lLBBA">Icons 8</a>
+          &nbsp;from&nbsp;
+          <a href="https://icons8.com/illustrations">Ouch!</a>
+        </p>
+      </S.Footer>
     </S.Container>
   );
 }