랜딩 페이지 UI 수정

index.css

@@ -86,6 +86,7 @@
 }
 
 .landing-section {
+  background: var(--Color-teal-800, #002224);
   min-height: 100dvh;
   width: 100%;
 }
@@ -4248,6 +4249,7 @@
   align-items: center;
   z-index: 10;
   position: relative;
+  margin-top: 50px;
 }
 
 .hero-logo {
@@ -4313,8 +4315,9 @@
 
 /* Hero Form */
 .hero-form {
+  padding-top: 50px;
   width: 100%;
-  max-width: 400px;
+  max-width: 375px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -4344,17 +4347,14 @@
 }
 
 .hero-input-wrapper {
-  width: 100%;
-  background-color: #ffffff;
-  border-radius: 999px;
-  padding: 11px 24px;
   display: flex;
+  width: 100%;
+  height: 48px;
+  padding: 11px 24px;
   align-items: center;
   gap: 10px;
-  transition: box-shadow 0.2s ease;
-  box-sizing: border-box;
-  overflow: visible;
-  position: relative;
+  border-radius: 999px;
+  background: var(--Color-white, #FFF);
 }
 
 .hero-input-wrapper.focused {
@@ -4554,7 +4554,7 @@
   font-weight: 400;
   color: #CEE5E6;
   letter-spacing: -0.006em;
-  margin-bottom: 24px;
+  margin: 10px;
   white-space: pre-line;
 }
 
@@ -4565,6 +4565,12 @@
 }
 
 .hero-button {
+  display: flex;
+  height: 48px;
+  padding: 11px 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
   width: 100%;
   padding: 11px 16px;
   border-radius: 999px;
@@ -4701,7 +4707,7 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding: 4rem 1rem 6rem;
+  padding: 6rem 1rem 6rem;
   position: relative;
 }
 
@@ -4785,7 +4791,7 @@
 
 @media (min-width: 640px) {
   .feature-grid {
-    gap: 1.5rem;
+    gap: 1rem;
   }
 }
 
@@ -4794,7 +4800,7 @@
     flex-direction: row;
     gap: 24px;
     justify-content: center;
-    padding: 0 2rem;
+    padding: 0 1rem;
   }
 }
 
@@ -4810,7 +4816,7 @@
   position: relative;
   background-color: #01393B;
   border-radius: 40px;
-  padding: 24px 32px;
+  padding: 24px 24px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -4826,7 +4832,7 @@
     max-width: 280px;
     min-height: 340px;
     padding: 24px 24px;
-    gap: 20px;
+    gap: 16px;
   }
 }
 
@@ -4834,8 +4840,8 @@
   .feature-card {
     max-width: 500px;
     min-height: 440px;
-    padding: 24px 40px;
-    gap: 24px;
+    padding: 24px 24px;
+    gap: 16px;
   }
 }
 
@@ -5152,6 +5158,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding: 50px 16px 0 16px;
 }
 
 /* Display Frames Container */
@@ -5160,7 +5167,7 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  gap: 1rem;
+  gap: 2rem;
   margin-bottom: 2rem;
   width: 100%;
   max-width: 72rem;
@@ -5168,14 +5175,13 @@
 
 @media (min-width: 640px) {
   .display-frames {
-    gap: 1.5rem;
+    gap: 1rem;
   }
 }
 
 @media (min-width: 768px) {
   .display-frames {
-    gap: 2rem;
-    margin-bottom: 3rem;
+    gap: 1rem;
   }
 }
 
@@ -5188,32 +5194,22 @@
 /* Display Frame - 가로 크기는 feature-card와 일치, 세로는 9:16 비율 */
 .display-frame {
   display: flex;
-  width: 120px;
-  height: 213px;
+  aspect-ratio: 9 / 16;
   border-radius: 2.5rem;
   overflow: hidden;
   position: relative;
   transition: all var(--transition-normal);
 }
 
-@media (min-width: 640px) {
-  .display-frame {
-    width: 160px;
-    height: 284px;
-  }
-}
-
 @media (min-width: 768px) {
   .display-frame {
     width: 280px;
-    height: 498px;
   }
 }
 
 @media (min-width: 1024px) {
   .display-frame {
-    width: 340px;
-    height: 604px;
+    width: 360px;
   }
 }
 
@@ -5392,7 +5388,7 @@
   transition: all var(--transition-normal);
   border: none;
   cursor: pointer;
-  margin-bottom: 2rem;
+  margin-top: 30px;
 }
 
 @media (min-width: 768px) {
@@ -7217,7 +7213,7 @@
 /* Landing Footer */
 .landing-footer {
   width: 100%;
-  background-color: #002224;
+  background: var(--Color-teal-800, #002224);
   padding: 40px 1.5rem;
 }
 
@@ -7229,7 +7225,7 @@
 
 @media (min-width: 1024px) {
   .landing-footer {
-    padding: 60px 148px;
+    padding: 60px 100px;
   }
 }
 
@@ -7251,6 +7247,7 @@
 }
 
 .footer-left {
+  min-width: 262px;
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -7271,6 +7268,7 @@
 }
 
 .footer-right {
+  max-width: 600px;
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -7429,7 +7427,6 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding: 0 1rem;
 }
 
 

src/components/Tutorial/tutorialSteps.ts

@@ -77,7 +77,7 @@ export const tutorialSteps: TutorialStepDef[] = [
         titleKey: 'tutorial.landing.button.title',
         descriptionKey: 'tutorial.landing.button.desc',
         position: 'right',
-        clickToAdvance: false,
+        clickToAdvance: true,
         noSpotlight: true,
         variant: 'bubble',
       },

src/pages/Landing/DisplaySection.tsx

@@ -11,9 +11,9 @@ const DisplaySection: React.FC<DisplaySectionProps> = ({ onStartClick }) => {
   const { t } = useTranslation();
   // YouTube Shorts 영상 ID들
   const videos = [
-    { id: 1, videoId: 'OZJ8X4P82OA' },
-    { id: 2, videoId: 'hNzMO21O40c' },
-    { id: 3, videoId: 'dM8_d6Aud68' },
+    { id: 1, videoId: 'trnN0SQBTiI' },
+    { id: 2, videoId: '96HO497HsQI' },
+    { id: 3, videoId: 'XziImxVICIk' },
   ];
 
   return (

src/pages/Landing/HeroSection.tsx

@@ -155,10 +155,6 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, on
     setShowAutocomplete(false);
     setAutocompleteResults([]);
     setHighlightedIndex(-1);
-    // LANDING_NAME 튜토리얼 진행 중이면 다음 힌트로 이동
-    if (tutorial.isActive && tutorial.tutorialKey === TUTORIAL_KEYS.LANDING_NAME) {
-      tutorial.nextHint();
-    }
   };
 
   // 키보드 네비게이션 핸들러