From ffb417d46c869b5690cb17a0171b2d1f1412aafb Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 27 May 2026 04:02:40 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 211 +++++++++++------------------------------------
 1 file changed, 47 insertions(+), 164 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index a0024cc..be7d081 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -31,33 +31,19 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Home",
-          id: "#hero",
-        },
+          name: "Home",          id: "#hero"},
         {
-          name: "서비스 소개",
-          id: "#about",
-        },
+          name: "서비스 소개",          id: "#about"},
         {
-          name: "주요 기능",
-          id: "#features",
-        },
+          name: "주요 기능",          id: "#features"},
         {
-          name: "이용 방법",
-          id: "#how-it-works",
-        },
+          name: "이용 방법",          id: "#how-it-works"},
         {
-          name: "이용 후기",
-          id: "#testimonials",
-        },
+          name: "이용 후기",          id: "#testimonials"},
         {
-          name: "자주 묻는 질문",
-          id: "#faq",
-        },
+          name: "자주 묻는 질문",          id: "#faq"},
         {
-          name: "문의하기",
-          id: "#contact",
-        },
+          name: "문의하기",          id: "#contact"},
       ]}
       brandName="지하철자리"
       bottomLeftText="편안한 이동의 시작"
@@ -68,18 +54,14 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
       background={{
-        variant: "radial-gradient",
-      }}
+        variant: "radial-gradient"}}
       logoText="지하철자리"
       description="어느 역으로 가는지 앉아서 확인하고, 편안하게 목적지까지 이동하세요."
       buttons={[
         {
-          text: "지금 시작하기",
-        },
+          text: "지금 시작하기"},
         {
-          text: "서비스 자세히 보기",
-          href: "#about",
-        },
+          text: "서비스 자세히 보기",          href: "#about"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/interior-subway-train_23-2149353963.jpg"
       imageAlt="지하철 객실 빈 좌석 이미지"
@@ -95,17 +77,11 @@ export default function LandingPage() {
       description="혼잡한 지하철에서 빈자리를 찾는 스트레스는 이제 그만. 지하철자리는 실시간 데이터와 예측 분석으로 당신에게 가장 편안한 이동 경험을 선사합니다."
       bulletPoints={[
         {
-          title: "실시간 좌석 정보",
-          description: "현재 칸별, 위치별 빈 좌석 정보를 즉시 확인하세요.",
-        },
+          title: "실시간 좌석 정보",          description: "현재 칸별, 위치별 빈 좌석 정보를 즉시 확인하세요."},
         {
-          title: "스마트 경로 안내",
-          description: "가장 편하게 앉아갈 수 있는 칸과 하차할 역을 미리 알려드립니다.",
-        },
+          title: "스마트 경로 안내",          description: "가장 편하게 앉아갈 수 있는 칸과 하차할 역을 미리 알려드립니다."},
         {
-          title: "간편한 이용",
-          description: "몇 번의 터치만으로 당신의 자리를 찾고, 최적의 이동 계획을 세울 수 있습니다.",
-        },
+          title: "간편한 이용",          description: "몇 번의 터치만으로 당신의 자리를 찾고, 최적의 이동 계획을 세울 수 있습니다."},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-traveling-with-phone_23-2149155198.jpg"
       imageAlt="지하철에서 휴대폰을 보는 사람"
@@ -120,44 +96,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "feature-1",
-          title: "실시간 좌석 현황",
-          author: "지하철자리",
-          description: "어느 칸에 빈자리가 있는지 실시간으로 파악하여 혼잡도를 피할 수 있습니다.",
-          tags: [
-            "실시간",
-            "좌석",
-            "편리함",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/japanese-subway-train-system-passenger-information-display-screen_23-2148954800.jpg",
-          imageAlt: "지하철 노선도에 강조된 경로",
-        },
+          id: "feature-1",          title: "실시간 좌석 현황",          author: "지하철자리",          description: "어느 칸에 빈자리가 있는지 실시간으로 파악하여 혼잡도를 피할 수 있습니다.",          tags: [
+            "실시간",            "좌석",            "편리함"],
+          imageSrc: "http://img.b2bpic.net/free-photo/japanese-subway-train-system-passenger-information-display-screen_23-2148954800.jpg",          imageAlt: "지하철 노선도에 강조된 경로"},
         {
-          id: "feature-2",
-          title: "스마트 하차 알림",
-          author: "지하철자리",
-          description: "내릴 역에 맞춰 가장 빠르게 하차할 수 있는 위치를 미리 안내해 드립니다.",
-          tags: [
-            "하차",
-            "빠른 이동",
-            "알림",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-using-phone-empty-train-coronavirus-pandemic_53876-94739.jpg",
-          imageAlt: "실시간 좌석 정보를 보여주는 휴대폰 화면",
-        },
+          id: "feature-2",          title: "스마트 하차 알림",          author: "지하철자리",          description: "내릴 역에 맞춰 가장 빠르게 하차할 수 있는 위치를 미리 안내해 드립니다.",          tags: [
+            "하차",            "빠른 이동",            "알림"],
+          imageSrc: "http://img.b2bpic.net/free-photo/woman-using-phone-empty-train-coronavirus-pandemic_53876-94739.jpg",          imageAlt: "실시간 좌석 정보를 보여주는 휴대폰 화면"},
         {
-          id: "feature-3",
-          title: "개인화된 맞춤 추천",
-          author: "지하철자리",
-          description: "자주 이용하는 노선과 시간대를 분석하여 최적의 좌석 정보를 제공합니다.",
-          tags: [
-            "맞춤",
-            "개인화",
-            "최적화",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-traveling-by-train_52683-124704.jpg",
-          imageAlt: "지하철에서 미소 짓는 다양한 승객들",
-        },
+          id: "feature-3",          title: "개인화된 맞춤 추천",          author: "지하철자리",          description: "자주 이용하는 노선과 시간대를 분석하여 최적의 좌석 정보를 제공합니다.",          tags: [
+            "맞춤",            "개인화",            "최적화"],
+          imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-traveling-by-train_52683-124704.jpg",          imageAlt: "지하철에서 미소 짓는 다양한 승객들"},
       ]}
       title="주요 기능으로 더 스마트한 이동"
       description="지하철자리가 제공하는 혁신적인 기능들로 당신의 지하철 이용 경험을 한 단계 업그레이드하세요."
@@ -172,17 +121,11 @@ export default function LandingPage() {
       description="간단한 3단계로 지하철에서 편안한 자리를 찾아보세요."
       bulletPoints={[
         {
-          title: "앱 실행 및 목적지 입력",
-          description: "앱을 실행하고 하차할 역을 입력하면, 현재 탑승 중인 열차의 좌석 현황을 분석합니다.",
-        },
+          title: "앱 실행 및 목적지 입력",          description: "앱을 실행하고 하차할 역을 입력하면, 현재 탑승 중인 열차의 좌석 현황을 분석합니다."},
         {
-          title: "최적 좌석 추천",
-          description: "실시간 데이터와 AI 분석을 통해 가장 빈자리가 많을 것으로 예상되는 칸과 위치를 안내합니다.",
-        },
+          title: "최적 좌석 추천",          description: "실시간 데이터와 AI 분석을 통해 가장 빈자리가 많을 것으로 예상되는 칸과 위치를 안내합니다."},
         {
-          title: "편안하게 착석",
-          description: "추천된 위치로 이동하여 편안하게 앉아 목적지까지 이동하세요. 하차 알림도 놓치지 마세요!",
-        },
+          title: "편안하게 착석",          description: "추천된 위치로 이동하여 편안하게 앉아 목적지까지 이동하세요. 하차 알림도 놓치지 마세요!"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/young-woman-new-york-city-daytime_23-2149488521.jpg"
       imageAlt="지하철 앱 사용 흐름을 보여주는 이미지"
@@ -195,22 +138,14 @@ export default function LandingPage() {
       textboxLayout="default"
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
+      animationType="slide-up"
       metrics={[
         {
-          id: "metric-1",
-          value: "500K+",
-          description: "누적 사용자 수",
-        },
+          id: "metric-1",          value: "500K+",          description: "누적 사용자 수"},
         {
-          id: "metric-2",
-          value: "95%",
-          description: "자리 찾기 성공률",
-        },
+          id: "metric-2",          value: "95%",          description: "자리 찾기 성공률"},
         {
-          id: "metric-3",
-          value: "20%",
-          description: "평균 이동 시간 단축",
-        },
+          id: "metric-3",          value: "20%",          description: "평균 이동 시간 단축"},
       ]}
       title="숫자로 보는 지하철자리"
       description="수많은 이용자들이 지하철자리를 통해 더 나은 이동 경험을 하고 있습니다."
@@ -225,59 +160,23 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",
-          name: "김지영",
-          role: "직장인",
-          company: "서울",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/joyful-woman-black-jacket-liking-lip-posing-isolated-background-charming-lady-dark-suit-smiling-white-backdrop_197531-18516.jpg",
-          imageAlt: "김지영 아바타",
-        },
+          id: "t1",          name: "김지영",          role: "직장인",          company: "서울",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/joyful-woman-black-jacket-liking-lip-posing-isolated-background-charming-lady-dark-suit-smiling-white-backdrop_197531-18516.jpg",          imageAlt: "김지영 아바타"},
         {
-          id: "t2",
-          name: "박준영",
-          role: "대학생",
-          company: "경기",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-surprised-handsome-guy-with-beard-looking-amused-smiling-happy-camera-standing-blu_1258-153719.jpg",
-          imageAlt: "박준영 아바타",
-        },
+          id: "t2",          name: "박준영",          role: "대학생",          company: "경기",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-surprised-handsome-guy-with-beard-looking-amused-smiling-happy-camera-standing-blu_1258-153719.jpg",          imageAlt: "박준영 아바타"},
         {
-          id: "t3",
-          name: "이지수",
-          role: "프리랜서",
-          company: "인천",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-touching-her-chin-looking-camera_23-2148187415.jpg",
-          imageAlt: "이지수 아바타",
-        },
+          id: "t3",          name: "이지수",          role: "프리랜서",          company: "인천",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-touching-her-chin-looking-camera_23-2148187415.jpg",          imageAlt: "이지수 아바타"},
         {
-          id: "t4",
-          name: "최민준",
-          role: "자영업자",
-          company: "부산",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/attractive-man-sunglasses-is-standing-outdoors_197531-361.jpg",
-          imageAlt: "최민준 아바타",
-        },
+          id: "t4",          name: "최민준",          role: "자영업자",          company: "부산",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/attractive-man-sunglasses-is-standing-outdoors_197531-361.jpg",          imageAlt: "최민준 아바타"},
         {
-          id: "t5",
-          name: "정하늘",
-          role: "주부",
-          company: "대구",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/mother-kissing-her-daughter-while-beach_23-2148992147.jpg",
-          imageAlt: "정하늘 아바타",
-        },
+          id: "t5",          name: "정하늘",          role: "주부",          company: "대구",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/mother-kissing-her-daughter-while-beach_23-2148992147.jpg",          imageAlt: "정하늘 아바타"},
         {
-          id: "t6",
-          name: "강우진",
-          role: "여행객",
-          company: "광주",
-          rating: 4,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-surfer-snapback-looking-smiling-cheerfully-after-winning-sports-contest-surfers-holding-his-white-surfboard-his-arm_273609-1551.jpg",
-          imageAlt: "강우진 아바타",
-        },
+          id: "t6",          name: "강우진",          role: "여행객",          company: "광주",          rating: 4,
+          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-surfer-snapback-looking-smiling-cheerfully-after-winning-sports-contest-surfers-holding-his-white-surfboard-his-arm_273609-1551.jpg",          imageAlt: "강우진 아바타"},
       ]}
       title="이용자들의 솔직한 후기"
       description="지하철자리와 함께라면 매일의 이동이 달라집니다."
@@ -289,30 +188,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "q1",
-          title: "지하철자리는 어떤 원리로 좌석을 예측하나요?",
-          content: "실시간 지하철 운행 데이터, 승하차 인원 통계, 역사 혼잡도 등 다양한 데이터를 복합적으로 분석하여 좌석 여부를 예측합니다.",
-        },
+          id: "q1",          title: "지하철자리는 어떤 원리로 좌석을 예측하나요?",          content: "실시간 지하철 운행 데이터, 승하차 인원 통계, 역사 혼잡도 등 다양한 데이터를 복합적으로 분석하여 좌석 여부를 예측합니다."},
         {
-          id: "q2",
-          title: "모든 지하철 노선에서 이용 가능한가요?",
-          content: "현재 수도권 전 노선(1호선~9호선, 신분당선, 경의중앙선 등)을 지원하며, 전국 노선으로 확대 예정입니다.",
-        },
+          id: "q2",          title: "모든 지하철 노선에서 이용 가능한가요?",          content: "현재 수도권 전 노선(1호선~9호선, 신분당선, 경의중앙선 등)을 지원하며, 전국 노선으로 확대 예정입니다."},
         {
-          id: "q3",
-          title: "좌석 예측 정확도는 얼마나 되나요?",
-          content: "AI 학습을 통해 지속적으로 정확도를 높이고 있으며, 평균 90% 이상의 예측 정확도를 자랑합니다.",
-        },
+          id: "q3",          title: "좌석 예측 정확도는 얼마나 되나요?",          content: "AI 학습을 통해 지속적으로 정확도를 높이고 있으며, 평균 90% 이상의 예측 정확도를 자랑합니다."},
         {
-          id: "q4",
-          title: "앱 이용에 비용이 드나요?",
-          content: "기본 기능은 무료로 제공되며, 프리미엄 기능을 이용하시려면 유료 구독이 필요합니다.",
-        },
+          id: "q4",          title: "앱 이용에 비용이 드나요?",          content: "기본 기능은 무료로 제공되며, 프리미엄 기능을 이용하시려면 유료 구독이 필요합니다."},
         {
-          id: "q5",
-          title: "데이터 사용량이 많은가요?",
-          content: "최소한의 데이터 사용으로 최적화되어 있으므로, 데이터 걱정 없이 이용하실 수 있습니다.",
-        },
+          id: "q5",          title: "데이터 사용량이 많은가요?",          content: "최소한의 데이터 사용으로 최적화되어 있으므로, 데이터 걱정 없이 이용하실 수 있습니다."},
       ]}
       sideTitle="자주 묻는 질문"
       sideDescription="지하철자리에 대해 궁금한 점이 있으신가요? 이곳에서 궁금증을 해결해 보세요."
@@ -324,8 +208,7 @@ export default function LandingPage() {
       <ContactCenter
       useInvertedBackground={false}
       background={{
-        variant: "downward-rays-static",
-      }}
+        variant: "downward-rays-static"}}
       tag="문의하기"
       title="더 궁금한 점이 있으신가요?"
       description="지하철자리에 대한 문의사항이나 제안이 있으시면 언제든지 연락 주세요."