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 ( +
{description}
+생각을 현실로, 열정을 성취로. 디프만.
+