feat: 여정 합류 PC

depromeet · Sep 19, 2023 · 0e11548 · 0e11548
1 parent 849d58c
commit 0e11548
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/public/images/main/passport-combination.png b/public/images/main/passport-combination.png
diff --git a/src/components/Journey/Journey.tsx b/src/components/Journey/Journey.tsx
@@ -1,9 +1,11 @@
 import Image from 'next/image';
 import { css, Theme } from '@emotion/react';
 
+import { commonLayoutCss } from '~/styles/layout';
+
 export function Journey() {
   return (
-    <section css={layoutCss}>
+    <section css={[commonLayoutCss, layoutCss]}>
       <h1 css={headingCss}>
         디자이너와 개발자를 만나
         <br />
@@ -17,6 +19,24 @@ export function Journey() {
           alt="passport combination"
         />
       </div>
+      <div css={infoContainerCss}>
+        <div>
+          <h3>누적 멤버 수</h3>
+          <p>850+</p>
+        </div>
+        <div>
+          <h3>탄생한지</h3>
+          <p>7 YEARS</p>
+        </div>
+        <div>
+          <h3>10-13기 론칭 성공률</h3>
+          <p>100%</p>
+        </div>
+        <div>
+          <h3>5-13기 론칭 서비스</h3>
+          <p>50+</p>
+        </div>
+      </div>
     </section>
   );
 }
@@ -35,3 +55,29 @@ const headingCss = (theme: Theme) => css`
   ${theme.typos.decimal.title2};
   text-align: center;
 `;
+
+const infoContainerCss = (theme: Theme) => css`
+  display: grid;
+  gap: 20px;
+  width: 100%;
+
+  grid-template-columns: repeat(4, 1fr);
+  & > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+
+    background-color: ${theme.colors.black400};
+    padding: 52px 0;
+  }
+
+  h3 {
+    ${theme.typos.pretendard.body1};
+    color: ${theme.colors.gray100};
+  }
+
+  p {
+    ${theme.typos.decimal.subTitle1};
+  }
+`;
diff --git a/src/components/TimerContainer/TimerContainer.tsx b/src/components/TimerContainer/TimerContainer.tsx
@@ -12,7 +12,7 @@ export function TimerContainer() {
   const time = useDiffDay(DEADLINE_DATE);
 
   return (
-    <div css={containerCss}>
+    <section css={containerCss}>
       <div css={bgImageCss}>
         <Image src="/images/main/main-bg.png" alt="main-bg" width={1300} height={768.857} />
       </div>