feat: reason section 마크업

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;

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 (
+    <div css={containerCss(isReverseDirection)}>
+      <div css={imageWrapperCss}>
+        <Image
+          src={image}
+          alt="디프만 참여 이유"
+          fill
+          style={{
+            objectFit: 'cover',
+          }}
+        />
+      </div>
+
+      <div css={content.wrapperCss(isReverseDirection)}>
+        <h1 css={content.titleCss}>{title}</h1>
+        <p css={content.descriptionCss}>{description}</p>
+      </div>
+    </div>
+  );
+};
+
+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%;
+    }
+  `,
+};

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 <section>reason</section>;
+  return (
+    <section css={containerCss}>
+      <div css={text.wrapperCss}>
+        <p css={text.subCss}>생각을 현실로, 열정을 성취로. 디프만.</p>
+        <h1 css={text.titleCss}>디프만에 합류하는 매력적인 이유</h1>
+      </div>
+
+      {REASONS.map((item, index) => (
+        <ReasonCard {...item} isReverseDirection={index % 2 !== 0} key={item.title} />
+      ))}
+    </section>
+  );
+};
+
+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%;
+    }
+  `,
 };