Feature/CDP-178-LandingFeature2

src/app/(marketing)/page.tsx

@@ -1,3 +1,4 @@
+import { LandingFeaturesSection2 } from "@/components/landing/LandingFeatureSection2";
 import { LandingFeaturesSection1 } from "@/components/landing/LandingFeaturesSection1";
 import { LandingHeroSection } from "@/components/landing/LandingHeroSection";
 
@@ -8,6 +9,7 @@ export default function Home() {
     <>
       <LandingHeroSection />
       <LandingFeaturesSection1 />
+      <LandingFeaturesSection2 />
     </>
   );
 }

src/components/landing/LandingFeatureGrid.tsx

@@ -11,7 +11,7 @@ export function LandingFeatureGrid({ className }: LandingFeatureGridProps) {
   const setActiveFeature = useFeaturePreviewStore((state) => state.setActiveFeature);
 
   return (
-    <div className={cn("grid grid-cols-1 gap-3", "md:grid-cols-2 md:gap-8", className)}>
+    <div className={cn("grid grid-cols-1 gap-3", "md:grid-cols-2 md:gap-4", className)}>
       {FEATURES.map((feature) => (
         <FeatureButton
           key={feature.title}

src/components/landing/LandingFeatureSection2.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { LandingFeatureText } from "@/components/landing/LandingFeatureText";
+import { LandingLayoutPreview } from "@/components/landing/LandingLayoutPreview";
+import { cn } from "@/lib/utils";
+import type { LandingFeaturesSection2Props } from "@/types/landing";
+
+export function LandingFeaturesSection2({ className }: LandingFeaturesSection2Props) {
+  return (
+    <section
+      id="landing-features2"
+      aria-labelledby="landing-features2-title"
+      className={cn(
+        "grid gap-20",
+        "md:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] md:items-center md:gap-35",
+        className,
+      )}
+    >
+      <LandingFeatureText className="md:order-2" />
+      <LandingLayoutPreview className="md:order-1" />
+    </section>
+  );
+}

src/components/landing/LandingFeatureText.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { LandingFeatureTextProps } from "@/types/landing";
+
+export function LandingFeatureText({ className }: LandingFeatureTextProps) {
+  return (
+    <div className={cn("md:space-y-8", className)}>
+      <h2 id="landing-features2-title" className="t-30-b md:t-40-b text-[var(--color-gray-900)]">
+        모듈을
+        <br />
+        자유롭게 배치하세요
+      </h2>
+      <p className="t-12-m md:t-16-m text-[var(--color-gray-600)]">
+        드래그 앤 드롭으로 나만의 대시보드를 완성하세요.
+      </p>
+    </div>
+  );
+}

src/components/landing/LandingLayoutPreview.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { LandingLayoutPreviewProps } from "@/types/landing";
+import Image from "next/image";
+
+export function LandingLayoutPreview({ className }: LandingLayoutPreviewProps) {
+  return (
+    <div className={cn("relative", className)}>
+      <div className="relative mx-auto max-w-full rounded-[32px] bg-[var(--color-gray-50)] md:max-w-[54.225rem]">
+        <div className="relative aspect-[16/10] w-full overflow-hidden rounded-3xl bg-white shadow-[0_18px_60px_rgba(0,0,0,0.12)]">
+          <Image
+            src="/images/layout-dnd.png"
+            alt="여러 모듈을 자유롭게 배치한 대시보드 레이아웃 예시"
+            fill
+            className="object-cover"
+            sizes="(min-width: 1024px) 480px, 100vw"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/types/landing.ts

@@ -64,3 +64,13 @@ export interface FeatureItem {
   iconName: FeatureIconName;
   previewImageSrc: string;
 }
+
+/* -------------------------------------------------
+   기능 소개 섹션 2
+   ------------------------------------------------- */
+
+export type LandingFeaturesSection2Props = WithClassName;
+
+export type LandingLayoutPreviewProps = WithClassName;
+
+export type LandingFeatureTextProps = WithClassName;