diff --git a/public/images/main/passport-combination.png b/public/images/main/passport-combination.png index df705375..8656468a 100644 Binary files a/public/images/main/passport-combination.png and b/public/images/main/passport-combination.png differ diff --git a/src/components/Journey/Journey.tsx b/src/components/Journey/Journey.tsx index 7aa22312..40ff69f1 100644 --- 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 ( -
+

디자이너와 개발자를 만나
@@ -17,6 +19,24 @@ export function Journey() { alt="passport combination" /> +
+
+

누적 멤버 수

+

850+

+
+
+

탄생한지

+

7 YEARS

+
+
+

10-13기 론칭 성공률

+

100%

+
+
+

5-13기 론칭 서비스

+

50+

+
+

); } @@ -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 index d243355a..e3bf9583 100644 --- 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 ( -
+
main-bg