diff --git a/public/images/16th/main/reason/reason_1.png b/public/images/16th/main/reason/reason_1.png new file mode 100644 index 00000000..cf23a304 Binary files /dev/null and b/public/images/16th/main/reason/reason_1.png differ diff --git a/public/images/16th/main/reason/reason_2.png b/public/images/16th/main/reason/reason_2.png new file mode 100644 index 00000000..3a00e5fc Binary files /dev/null and b/public/images/16th/main/reason/reason_2.png differ diff --git a/public/images/16th/main/reason/reason_3.png b/public/images/16th/main/reason/reason_3.png new file mode 100644 index 00000000..48714f9d Binary files /dev/null and b/public/images/16th/main/reason/reason_3.png differ diff --git a/public/images/16th/main/reason/reason_4.png b/public/images/16th/main/reason/reason_4.png new file mode 100644 index 00000000..d2af380a Binary files /dev/null and b/public/images/16th/main/reason/reason_4.png differ diff --git a/public/images/16th/main/reason/reason_5.png b/public/images/16th/main/reason/reason_5.png new file mode 100644 index 00000000..f98908dd Binary files /dev/null and b/public/images/16th/main/reason/reason_5.png differ diff --git a/src/constant/reason.ts b/src/constant/reason.ts new file mode 100644 index 00000000..cea7e381 --- /dev/null +++ b/src/constant/reason.ts @@ -0,0 +1,32 @@ +export const REASONS = [ + { + image: '/images/16th/main/reason/reason_1.png', + title: '프로덕트 릴리즈 100%,\n출시를 향하는 열정', + description: + '기획, 디자인, 개발의 전 과정을 거쳐 프로덕트를 완성해요.\n나의 아이디어가 완성된 프로덕트로 향하는 열정 가득한 과정을 경험해보세요.', + }, + { + image: '/images/16th/main/reason/reason_2.png', + title: '출시뿐만 아니라 검증까지,\n완성도 높은 프로덕트 ', + description: + 'UT부터 런칭 데이까지, 팀원들과 함께 실사용자 피드백을 반영하며 프로덕트를 완성해 나가는 전 과정을 경험해보세요.', + }, + { + image: '/images/16th/main/reason/reason_3.png', + title: '팀과 개인의 성장을 이루는\n몰입과 배움의 과정', + description: + '해커톤, 디프콘, 연사 초청 등의 다양한 세션을 진행합니다\n팀원들과 함께 몰입해서 깊이 있는 성장의 순간을 만들어보세요.', + }, + { + image: '/images/16th/main/reason/reason_4.png', + title: '현업에 준하는\n팀 프로젝트 경험', + description: + '팀의 목표를 위해 함께 노력하며 긴밀한 협업을 하게 됩니다.\n뛰어난 팀원들과 실제 프로젝트를 수행하며 기술적 성장을 이뤄보세요.', + }, + { + image: '/images/16th/main/reason/reason_5.png', + title: '열정적인 디퍼들을 위한\n다양한 네트워킹의 기회', + description: + '여러 분야의 사람들과 즐거운 친목의 기회를 가질 수 있어요.\n평소에는 꺼내지 못했던 열정과 고민들을 함께 나누며 진정한 동료를 얻어보세요.', + }, +] as const; diff --git a/src/features/Main/components/ReasonCard.tsx b/src/features/Main/components/ReasonCard.tsx new file mode 100644 index 00000000..5be7c8fe --- /dev/null +++ b/src/features/Main/components/ReasonCard.tsx @@ -0,0 +1,114 @@ +import Image from 'next/image'; +import { css } from '@emotion/react'; + +import { mediaQuery } from '~/styles/media'; +import { theme } from '~/styles/theme'; + +type Props = { + image: string; + title: string; + description: string; + isReverseDirection?: boolean; +}; +export const ReasonCard = ({ image, title, description, isReverseDirection }: Props) => { + return ( +
+
+ 디프만 참여 이유 +
+ +
+

{title}

+

{description}

+
+
+ ); +}; + +const containerCss = (isReverseDirection?: boolean) => css` + display: flex; + gap: 58px; + width: 1000px; + padding: 10px; + border-radius: 20px; + background-color: white; + + ${isReverseDirection && + css` + flex-direction: row-reverse; + `} + + ${mediaQuery('mobile')} { + padding: 12px 12px 40px; + width: 100%; + flex-direction: column; + gap: 24px; + } +`; + +const imageWrapperCss = css` + position: relative; + width: 476px; + height: 318px; + flex-shrink: 0; + border-radius: 20px; + overflow: hidden; + + ${mediaQuery('mobile')} { + width: 100%; + height: 100%; + aspect-ratio: 476/318; + } +`; + +const content = { + wrapperCss: (isReverseDirection?: boolean) => css` + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 26px 0; + margin-left: 0px; + margin-right: 36px; + + ${isReverseDirection && + css` + margin-left: 36px; + margin-right: 0px; + `} + + ${mediaQuery('mobile')} { + margin: 0; + padding: 0; + gap: 16px; + justify-content: center; + } + `, + + titleCss: css` + ${theme.typosV2.pretendard.bold32}; + line-height: 140%; + white-space: pre-wrap; + + ${mediaQuery('mobile')} { + ${theme.typosV2.pretendard.bold20}; + line-height: 140%; + } + `, + + descriptionCss: css` + ${theme.typosV2.pretendard.medium18}; + line-height: 160%; + + ${mediaQuery('mobile')} { + ${theme.typosV2.pretendard.medium15}; + line-height: 160%; + } + `, +}; diff --git a/src/features/Main/sections/MainReasonSection.tsx b/src/features/Main/sections/MainReasonSection.tsx index fc2dcd72..2a5ebba7 100644 --- a/src/features/Main/sections/MainReasonSection.tsx +++ b/src/features/Main/sections/MainReasonSection.tsx @@ -1,6 +1,68 @@ +import { css } from '@emotion/react'; + +import { REASONS } from '~/constant/reason'; +import { mediaQuery } from '~/styles/media'; +import { theme } from '~/styles/theme'; + +import { ReasonCard } from '../components/ReasonCard'; + /** * * Main 페이지 합류해야 하는 이유 section */ export const MainReasonSection = () => { - return
reason
; + return ( +
+
+

생각을 현실로, 열정을 성취로. 디프만.

+

디프만에 합류하는 매력적인 이유

+
+ + {REASONS.map((item, index) => ( + + ))} +
+ ); +}; + +const containerCss = css` + display: flex; + flex-direction: column; + align-items: center; + gap: 118px; + padding: 140px 0; + + ${mediaQuery('mobile')} { + padding: 80px 20px; + } +`; + +const text = { + wrapperCss: css` + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 12px; + color: white; + `, + + subCss: css` + ${theme.typosV2.pretendard.semibold24}; + line-height: 150%; + + ${mediaQuery('mobile')} { + ${theme.typosV2.pretendard.semibold18}; + line-height: 150%; + } + `, + + titleCss: css` + ${theme.typosV2.pretendard.bold44}; + line-height: 150%; + + ${mediaQuery('mobile')} { + ${theme.typosV2.pretendard.bold28}; + line-height: 150%; + } + `, };