fix: 랜딩페이지 디자인 qa 반영

features/landing/components/home-career-section.tsx

@@ -111,7 +111,7 @@ export const HomeCareerSection = () => {
           <HomeSectionHeader
             badge="커리어의 완성"
             heading="하드 스킬과 소프트 스킬을 한번에!"
-            description="커리어를 위해 필요한 3가지 요소를 소스바에서 한 눈에 볼 수 있습니다."
+            description="커리어를 위해 필요한 3가지 요소를 소스바에서 한 눈에 파악할 수 있어요"
           />
         </HomeReveal>
 

features/landing/components/home-cta-section.tsx

@@ -42,10 +42,12 @@ export const HomeCtaSection = () => {
                 className="h-8 w-11 lg:h-12 lg:w-16"
               />
               <h2 className="text-text-basic-inverse text-heading-lg lg:text-heading-2xl font-bold">
-                협업 스킬, 보이지 않는 데이터를 시각화 후 증명하세요
+                협업 스킬, 보이지 않는 데이터를
+                <br className="lg:hidden" /> 시각화 후 증명하세요
               </h2>
               <p className="text-body-base lg:text-body-xl text-text-basic-inverse w-full max-w-107 font-normal">
-                프로필을 만들고 동료에게 첫 번째 후기를 요청해보세요
+                프로젝트를 만들고 동료에게
+                <br className="lg:hidden" /> 첫 번째 후기를 요청해보세요
               </p>
             </div>
 
@@ -55,7 +57,7 @@ export const HomeCtaSection = () => {
               size="large"
               className="mx-auto mt-8 w-full max-w-[350px] lg:mt-10 lg:w-auto lg:max-w-none"
             >
-              <ProtectedLink href="/mypage">프로젝트 생성하러 가기</ProtectedLink>
+              <ProtectedLink href="/projects">프로젝트 생성하기</ProtectedLink>
             </Button>
           </HomeReveal>
         </div>

features/landing/components/home-features-section.tsx

@@ -8,12 +8,12 @@ import { HomeSectionHeader } from './home-section-header';
 const FEATURES = [
   {
     title: '프로필 생성 및 관리',
-    description: '닉네임, 한 줄 소개 등 기본 프로필을 등록하고 받은 협업 후기와 태그를 한 눈에',
+    description: '프로필을 등록하고 받은 협업 후기와 소프트스킬 태그 및 데이터를 한 눈에 볼 수 있습니다.',
     imageSrc: '/home-features-search.svg',
   },
   {
-    title: '팩트 기반 피드백',
-    description: '좋았던 점 아쉬웠던 점을 균형있게 전달하는 후기 시스템입니다.',
+    title: '사실 기반 후기 작성',
+    description: '실제로 협업했던 동료들의 후기를 받아 신뢰성이 높습니다.',
     imageSrc: '/home-features-target.svg',
   },
   {
@@ -23,7 +23,7 @@ const FEATURES = [
   },
   {
     title: '프로필 외부 공유',
-    description: '프로필 공유 URL을 생성하여 이력서 및 포트폴리오 그리고 노션 등에 첨부가 가능합니다.',
+    description: '자체 URL을 생성하여 프로필을 쉽게 공유가 가능하고 커리어에 활용 할 수 있습니다.',
     imageSrc: '/home-features-share.svg',
   },
 ] as const;
@@ -42,8 +42,13 @@ export const HomeFeaturesSection = () => {
         <HomeReveal className="w-full">
           <HomeSectionHeader
             badge="주요 기능"
-            heading="보이지 않던 협업 역량을 투명한 데이터로!"
-            description="기술, 스펙, 스킬은 포트폴리오나 깃허브로 증명할 수 있지만 소통 방식과 책임감과 같은 소프트스킬은 어떻게 보여주시나요?"
+            heading={
+              <>
+                보이지 않던 협업 역량을
+                <br className="lg:hidden" /> 데이터로!
+              </>
+            }
+            description="스펙, 스킬은 포트폴리오나 깃허브로 증명할 수 있지만 소통 방식과 책임감과 같은 소프트스킬은 증명이 어려워 데이터로 시각화하고자 했어요."
           />
         </HomeReveal>
 

features/landing/components/home-hero-section.tsx

@@ -81,13 +81,13 @@ export const HomeHeroSection = () => {
       <div className="flex w-full flex-1 flex-col items-center gap-6 text-center lg:items-start lg:gap-10 lg:pr-6 lg:text-left">
         <HomeReveal className="flex w-full max-w-[544px] flex-col gap-4">
           <h1 className="text-display-sm lg:text-display-base text-text-basic leading-normal font-bold">
-            당신의 소프트스킬,
+            본인의 소프트스킬,
             <br />
             <span className="text-primary-500">&apos;데이터&apos;</span>로 본 적 있나요?
           </h1>
 
           <p className="text-body-base text-text-subtle leading-normal font-normal">
-            텍스트로 나열된 스펙으로만 당신이 얼마나 훌륭한 동료인지 보여줄 수 없습니다.{' '}
+            텍스트로 나열된 스펙으로만 본인이 얼마나 훌륭한 동료인지 보여줄 수 없습니다.{' '}
             <br className="hidden lg:inline" />
             소프트스킬을 증명하고 원하는 팀에 합류하세요.
           </p>
@@ -100,7 +100,7 @@ export const HomeHeroSection = () => {
             </Button>
             <Suspense
               fallback={
-                <Button variant="tertiary" size="large" disabled className="w-full sm:w-auto">
+                <Button variant="secondary" size="large" disabled className="w-full sm:w-auto">
                   내 프로필 보기
                 </Button>
               }

features/landing/components/home-how-it-works-section.tsx

@@ -8,7 +8,7 @@ const STEPS = [
   {
     step: 'STEP 1',
     title: '프로젝트 생성',
-    description: ['회원가입 이후 프로젝트 관리 페이지로 들어가', '프로젝트를 생성하세요.'],
+    description: ['회원가입 이후 프로젝트 관리 페이지로 이동하여', '프로젝트를 생성하세요.'],
     variant: 'step1',
   },
   {
@@ -20,10 +20,7 @@ const STEPS = [
   {
     step: 'STEP 3',
     title: '협업 프로필 확인',
-    description: [
-      "동료에게 받은 후기가 '내 소스' 페이지에 자동으로 반영됩니다.",
-      '해당 페이지에서 본인의 소프트 스킬을 확인 후 공유해보세요.',
-    ],
+    description: ["받은 후기가 '내 소스'에 반영됩니다.", '해당 페이지에서 본인의 소프트 스킬을 확인 후 공유해보세요.'],
     variant: 'step3',
   },
 ] as const;
@@ -38,16 +35,21 @@ export const HomeHowItWorksSection = () => {
 
         <div className="flex w-full max-w-[1200px] flex-col gap-12 lg:gap-20">
           {STEPS.map((step) => (
-            <HomeReveal key={step.step} className="flex w-full flex-col items-center gap-6 lg:flex-row" amount={0.4}>
-              <div className="gap-margin-m py-padding-m relative flex w-full flex-col lg:h-[260px] lg:flex-1">
+            <HomeReveal
+              key={step.step}
+              className="flex w-full flex-col items-center gap-6 lg:flex-row lg:items-center lg:gap-6"
+              amount={0.4}
+            >
+              {/* 모바일: 가운데 세로 / 데스크톱(Figma 5318:58953): 좌측 텍스트 + 구분선 */}
+              <div className="gap-margin-m py-padding-m relative flex w-full flex-col items-center text-center lg:h-[260px] lg:flex-1 lg:items-start lg:text-left">
                 <div
                   aria-hidden
                   className="bg-divider-1 pointer-events-none absolute top-11 right-0 left-[7.09%] hidden h-px lg:block"
                 />
                 <div className="bg-surface-white text-text-primary relative z-10 flex h-14 w-[112px] shrink-0 items-center justify-center rounded-full px-4 shadow-[0px_4px_12px_rgba(0,0,0,0.1)]">
                   <span className="text-heading-base font-bold whitespace-nowrap">{step.step}</span>
                 </div>
-                <div className="gap-margin-m flex flex-col pl-4">
+                <div className="gap-margin-m flex w-full max-w-[350px] flex-col items-center lg:max-w-none lg:items-start lg:pl-4">
                   <h3 className="text-text-basic text-heading-base font-bold">{step.title}</h3>
                   <div className="text-text-subtle text-body-base leading-[1.5]">
                     {step.description.map((line) => (

features/landing/components/home-profile-button.tsx

@@ -9,7 +9,7 @@ type HomeProfileButtonProps = {
 };
 
 export const HomeProfileButton = ({ className }: HomeProfileButtonProps) => (
-  <Button asChild variant="tertiary" size="large" className={className}>
+  <Button asChild variant="secondary" size="large" className={className}>
     <ProtectedLink href={ROUTES.MY_SOSS}>내 프로필 보기</ProtectedLink>
   </Button>
 );

features/landing/components/home-section-header.tsx

@@ -4,7 +4,7 @@ import { cn } from '@/shared/lib/cn';
 
 interface HomeSectionHeaderProps {
   badge: string;
-  heading: string;
+  heading: ReactNode;
   description?: ReactNode;
   className?: string;
 }