Update src/pages/HomePage/sections/Products.tsx

Merge version_9_1781525199888 into main

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
+  --background: #f5f5f5;
   --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
+  --foreground: #1c1c1c;
+  --primary-cta: #511f1f;
+  --primary-cta-text: #f5f5f5;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #8f3838;
+  --background-accent: #c9725c;
 
   /* @layout/border-radius/rounded */
   --radius: 1rem;

src/pages/HomePage.tsx

@@ -1,163 +1,28 @@
-import AboutText from '@/components/sections/about/AboutText';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
-import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
-import TestimonialMarqueeOverlayCards from '@/components/sections/testimonial/TestimonialMarqueeOverlayCards';
-import { Award, CheckCircle, Shield } from "lucide-react";
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import ProductsSection from './HomePage/sections/Products';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroOverlayMarquee
-      tag="인천 구월동의 신선한 참복 요리 전문점"
-      title="복마중 (福磨中)"
-      description="깊은 바다의 품격, 정성으로 빚어낸 참복 요리의 진수를 경험해보세요."
-      primaryButton={{
-        text: "메뉴 보기",        href: "#products"}}
-      secondaryButton={{
-        text: "예약하기",        href: "#contact"}}
-      items={[
-        {
-          text: "생생정보통 출연",          icon: CheckCircle,
-        },
-        {
-          text: "최고급 활복 사용",          icon: Award,
-        },
-        {
-          text: "개별 룸 완비",          icon: Shield,
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/dining-food-fish-pink-green_1203-4276.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutText
-      title="구월동의 명소, 복마중은 정직한 식재료와 장인의 손길로 고객님께 최상의 미식 경험을 제공합니다."
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="products" data-section="products">
-    <SectionErrorBoundary name="products">
-          <FeaturesRevealCardsBento
-      tag="메뉴 안내"
-      title="단품 메뉴 및 음료"
-      description="다채로운 복어 요리와 신선한 횟감을 만나보세요."
-      items={[
-        {
-          title: "복지리",          description: "맑고 개운한 복지리 ₩13,000",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/salmon-tuna-tartar_74190-5884.jpg"},
-        {
-          title: "자연산 참복지리",          description: "진하고 깊은 자연산 참복 ₩25,000",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/nigiri-sushi_74190-5926.jpg"},
-        {
-          title: "활복지리",          description: "살아있는 신선한 참복 ₩40,000",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/fish-salad-salmon-cucumber-apple-mashed-avocado-side-view_141793-3725.jpg"},
-        {
-          title: "복어초밥 12ps",          description: "정성 가득 복어초밥 ₩30,000",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/raw-fresh-salmon-tuna-other-sashimi-fish-meat_74190-909.jpg"},
-        {
-          title: "참치초밥 10ps",          description: "부드러운 참치초밥 ₩15,000",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/seafood-mussels-salad-with-galetta-white-plate_114579-2359.jpg"},
-        {
-          title: "새우초밥 10ps",          description: "탱글한 새우초밥 ₩12,000",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/sushi_74190-593.jpg"},
-        {
-          title: "참치회덮밥",          description: "든든한 참치회덮밥 ₩8,000",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-shrimp-salad-with-bell-peppers-arugula-plate-wood_141793-11674.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ProductsSection />
 
-  <div id="pricing" data-section="pricing">
-    <SectionErrorBoundary name="pricing">
-          <PricingCenteredCards
-      tag="코스 요리 안내"
-      title="마중 코스 요리 (2인 이상 주문)"
-      description="복마중의 품격이 담긴 코스 메뉴입니다."
-      plans={[
-        {
-          tag: "정식",          price: "₩20,000",          description: "마중 복정식",          features: [
-            "복껍질무침",            "참복회",            "복튀김",            "참복지리"],
-          primaryButton: {
-            text: "선택",            href: "#contact"},
-        },
-        {
-          tag: "코스",          price: "₩50,000",          description: "마중 스페셜 코스",          features: [
-            "참복사시미",            "참치회",            "랍스타",            "복불고기"],
-          primaryButton: {
-            text: "선택",            href: "#contact"},
-        },
-        {
-          tag: "활복",          price: "₩99,000",          description: "참복 활복 코스",          features: [
-            "참복사시미",            "혼마구로 배꼽살",            "살아있는 활복지리"],
-          primaryButton: {
-            text: "선택",            href: "#contact"},
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialMarqueeOverlayCards
-      tag="고객 후기"
-      title="소중한 고객님의 리뷰"
-      description="고객님들의 솔직한 후기를 만나보세요."
-      testimonials={[
-        {
-          name: "김영수",          role: "단골 고객",          company: "구월동 주민",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-talking-while-having-dessert-cafe_637285-9084.jpg"},
-        {
-          name: "박지혜",          role: "가족 모임",          company: "인천 거주",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/pretty-smiling-lady-shirt-jeans-sitting-bar-counter-cafe-with-fork-hand-cake-near-dreamily-looking-aside_574295-293.jpg"},
-        {
-          name: "최철민",          role: "회식",          company: "회사원",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-retro-vintage-50-s-cafe-sitting-table-drinking-milk-shake-cocktail-black-leather-jacket-wearing-pink-sunglasses_285396-10322.jpg"},
-        {
-          name: "이정아",          role: "데이트",          company: "블로거",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-eating-restaurant_23-2148006700.jpg"},
-        {
-          name: "강준호",          role: "단골",          company: "인천 직장인",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/couple-enjoying-food-restaurant_23-2149269175.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSimple
-      tag="도움말"
-      title="자주 묻는 질문"
-      description="궁금하신 점을 확인해보세요."
-      items={[
-        {
-          question: "예약은 어떻게 하나요?",          answer: "전화나 방문 예약을 통해 개별 룸을 예약하실 수 있습니다."},
-        {
-          question: "주차장이 있나요?",          answer: "인근 주차 시설 이용 가능합니다."},
-        {
-          question: "코스 메뉴 최소 주문은요?",          answer: "모든 코스 메뉴는 2인 이상부터 주문 가능합니다."},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="예약 문의"
-      text="인천 남동구 구월동, 정성을 다하는 복마중에서 특별한 시간을 예약하세요."
-      primaryButton={{
-        text: "전화 예약 문의",        href: "tel:0100000000"}}
-      secondaryButton={{
-        text: "위치 확인",        href: "#"}}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
-}
+}

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,23 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutText from '@/components/sections/about/AboutText';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutText
+          title="1. 건강 회복 & 질병 예방
+수술 전후 회복, 당뇨·신장질환에 효과적이며 갱년기 장애 완화, 혈전·노화 방지, 각종 암·종양·궤양 예방에 좋습니다.
+2. 다이어트 식품
+저칼로리·고단백·저지방에 각종 무기질과 비타민이 풍부해 다이어트 식품으로 최적입니다.
+3. 숙취 해소
+콜레스테롤을 낮추고 음주 후 숙취 해독 효과가 탁월한 것으로 증명되어 있습니다. "
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,23 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+          tag="예약 문의"
+          text=" "
+          primaryButton={{
+            text: "전화 예약 문의",        href: "tel:0100000000"}}
+          secondaryButton={{
+            text: "위치 확인",        href: "#"}}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,28 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqSimple from '@/components/sections/faq/FaqSimple';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqSimple
+          tag="도움말"
+          title="자주 묻는 질문"
+          description="궁금하신 점을 확인해보세요."
+          items={[
+            {
+              question: "예약은 어떻게 하나요?",          answer: "전화나 방문 예약을 통해 개별 룸을 예약하실 수 있습니다."},
+            {
+              question: "주차장이 있나요?",          answer: "인근 주차 시설 이용 가능합니다."},
+            {
+              question: "코스 메뉴 최소 주문은요?",          answer: "모든 코스 메뉴는 2인 이상부터 주문 가능합니다."},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
+import { Award, CheckCircle, Shield } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroOverlayMarquee
+        tag="인천 구월동의 신선한 참복 요리 전문점"
+        title="복마중 (福磨中)"
+        description="깊은 바다의 품격, 정성으로 빚어낸 참복 요리의 진수를 경험해보세요."
+        primaryButton={{
+            text: "메뉴 보기",        href: "#products"}}
+        secondaryButton={{
+            text: "예약하기",        href: "#contact"}}
+        items={[{"icon":"Award","text":"최고급 활복 사용"},{"icon":"Shield","text":"개별 룸 완비"}]}
+        imageSrc="https://storage.googleapis.com/webild/users/user_3F8MF5MZ5xbEtL0ujm80wUQyVf0/uploaded-1781524391799-ygn90a2z.png"
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Products.tsx

@@ -0,0 +1,21 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "products" section.
+
+import React from 'react';
+import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ProductsSection(): React.JSX.Element {
+  return (
+    <div id="products" data-section="products">
+        <SectionErrorBoundary name="products">
+              <FeaturesRevealCardsBento
+        tag="메뉴 안내"
+        title="식사메뉴 "
+        description="다채로운 복어 요리와 신선한 횟감을 만나보세요."
+        items={[{"title":"자연산 참복지리","imageSrc":"https://storage.googleapis.com/webild/users/user_3F8MF5MZ5xbEtL0ujm80wUQyVf0/uploaded-1781524473167-49t6u6h1.png","description":"진하고 깊은 자연산 참복 ₩25,000","href":"#"},{"href":"#","description":"부드러운 참치초밥 ₩15,000","title":"참치초밥 10ps","imageSrc":"http://img.b2bpic.net/free-photo/seafood-mussels-salad-with-galetta-white-plate_114579-2359.jpg"},{"href":"#","description":"탱글한 새우초밥 ₩12,000","title":"새우초밥 10ps","imageSrc":"http://img.b2bpic.net/free-photo/sushi_74190-593.jpg"},{"description":"든든한 참치회덮밥 ₩8,000","href":"#","imageSrc":"http://img.b2bpic.net/free-photo/top-view-shrimp-salad-with-bell-peppers-arugula-plate-wood_141793-11674.jpg","title":"참치회덮밥"}]}
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,37 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonials" section.
+
+import React from 'react';
+import TestimonialMarqueeOverlayCards from '@/components/sections/testimonial/TestimonialMarqueeOverlayCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialMarqueeOverlayCards
+          tag="고객 후기"
+          title="소중한 고객님의 리뷰"
+          description="고객님들의 솔직한 후기를 만나보세요."
+          testimonials={[
+            {
+              name: "김영수",          role: "단골 고객",          company: "구월동 주민",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-talking-while-having-dessert-cafe_637285-9084.jpg"},
+            {
+              name: "박지혜",          role: "가족 모임",          company: "인천 거주",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/pretty-smiling-lady-shirt-jeans-sitting-bar-counter-cafe-with-fork-hand-cake-near-dreamily-looking-aside_574295-293.jpg"},
+            {
+              name: "최철민",          role: "회식",          company: "회사원",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/woman-retro-vintage-50-s-cafe-sitting-table-drinking-milk-shake-cocktail-black-leather-jacket-wearing-pink-sunglasses_285396-10322.jpg"},
+            {
+              name: "이정아",          role: "데이트",          company: "블로거",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/woman-eating-restaurant_23-2148006700.jpg"},
+            {
+              name: "강준호",          role: "단골",          company: "인천 직장인",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/couple-enjoying-food-restaurant_23-2149269175.jpg"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}