style: 랜딩페이지 스타일 변경

Author: moo1677

components/landing/FeatureList.tsx

@@ -34,15 +34,12 @@ const FEATURES = [
 const FeatureList = () => {
   return (
     <div className="flex h-full flex-col items-center justify-center space-y-3 text-center">
-      <p className="bg-surface-alt rounded-mg mt-16 rounded-lg p-1 px-4 text-xs">
-        ⚙️ 핵심 기능
-      </p>
       <h1 className="text-4xl font-bold">개발자 성장을 위한</h1>
       <h1 className="text-primary text-4xl font-bold">완벽한 도구</h1>
       <div className="text-xl font-light">
         <h2>체계적인 학습과 지속적인 성장을 돕는 강력한 기능들</h2>
       </div>
-      <div className="mt-15 grid grid-cols-1 gap-6 px-20 sm:grid-cols-2 lg:grid-cols-4">
+      <div className="mt-15 grid max-w-7xl grid-cols-1 gap-6 px-20 sm:grid-cols-2 lg:grid-cols-4">
         {FEATURES.map((feature) => (
           <FeatureCard key={feature.title} {...feature} />
         ))}

components/landing/HeroSection.tsx

@@ -1,9 +1,6 @@
 const HeroSection = () => {
   return (
     <div className="flex flex-col items-center justify-center space-y-3 pt-30 text-center">
-      <p className="bg-surface-alt rounded-mg mt-16 rounded-lg p-1 px-4 text-xs">
-        🚀 개발자를 위한 성장 플랫폼
-      </p>
       <h1 className="text-8xl font-bold">매일 성장하는</h1>
       <h1 className="text-primary text-8xl font-bold">개발자의 여정</h1>
       <div className="text-2xl font-light">

components/landing/LandingPreview.tsx

@@ -4,19 +4,16 @@ import FeatureContent from '@/components/landing/FeatureContent';
 const LandingPreview = () => {
   return (
     <div className="mt-30 flex h-full flex-col items-center justify-center space-y-3 pb-50 text-center">
-      <p className="bg-surface-alt rounded-mg mt-16 rounded-lg p-1 px-4 text-xs">
-        🤔 왜 DevFlow를 사용할까요?
-      </p>
       <h1 className="text-4xl font-bold">체계적인 학습으로</h1>
       <h1 className="text-primary text-4xl font-bold">더 빠른 성장</h1>
-      <div className="mt-10 flex gap-50">
+      <div className="mx-20 mt-10 flex flex-col items-center gap-10 lg:flex-row lg:items-start lg:gap-50">
         <FeatureContent />
         <Image
           src="/PreviewImage.png"
           alt="DevFlow 미리보기"
-          className="w-full object-cover"
-          width={430}
-          height={232}
+          width={720}
+          height={400}
+          className="w-full max-w-[480px] min-w-[360px] flex-shrink-0 object-contain md:max-w-[560px] lg:max-w-[640px] xl:max-w-[720px]"
         />
       </div>
     </div>