Merge version_23_1781527170477 into main

Merge version_23_1781527170477 into main

src/main.tsx

@@ -4,12 +4,14 @@ import { BrowserRouter } from 'react-router-dom'
 import './index.css'
 import App from './App.tsx'
 import { initVisualEdit } from '@/utils/visual-edit'
+import Tag from "@/components/tag/Tag";
 
 initVisualEdit()
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <BrowserRouter>
+      <Tag />
       <App />
     </BrowserRouter>
   </StrictMode>,

src/pages/HomePage.tsx

@@ -7,7 +7,6 @@ import React from 'react';
 import HeroSection from './HomePage/sections/Hero';
 import AboutSection from './HomePage/sections/About';
 import ProductsSection from './HomePage/sections/Products';
-import PricingSection from './HomePage/sections/Pricing';
 import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
@@ -20,7 +19,6 @@ export default function HomePage(): React.JSX.Element {
 
   <ProductsSection />
 
-  <PricingSection />
 
   <FaqSection />
 

src/pages/HomePage/sections/About.tsx

@@ -1,18 +1,64 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "about" section.
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
 
-import React from 'react';
-import AboutText from '@/components/sections/about/AboutText';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+interface AboutTextProps {
+  title: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+}
 
-export default function AboutSection(): React.JSX.Element {
+const AboutInline = () => {
   return (
-    <div id="about" data-section="about">
-        <SectionErrorBoundary name="about">
-              <AboutText
-          title="구월동의 명소, 복마중은 정직한 식재료와 장인의 손길로 고객님께 최상의 미식 경험을 제공합니다."
+    <section aria-label="About section" className="py-20">
+      <div className="w-content-width mx-auto flex flex-col gap-2 items-center">
+        <TextAnimation
+          text={"복어의 효능"}
+          variant="slide-up"
+          gradientText={false}
+          tag="h2"
+          className="text-xl md:text-2xl leading-relaxed font-medium text-center text-balance"
         />
-        </SectionErrorBoundary>
+
+        {(undefined || undefined) && (
+          <div className="flex flex-wrap gap-3 justify-center mt-2 md:mt-3">
+            {undefined && <Button text={undefined.text} href={undefined.href} variant="primary" />}
+            {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
+          </div>
+        )}
+        <ul className="mt-12 space-y-6 text-left max-w-2xl mx-auto">
+          <li className="flex gap-4">
+            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold">1</div>
+            <div>
+              <h4 className="text-lg font-semibold text-foreground">건강 회복 & 질병 예방</h4>
+              <p className="text-muted-foreground mt-1">수술 전후 회복, 당뇨·신장질환에 효과적이며 갱년기 완화, 혈전 노화 방지, 각종 암·종양·궤양 예방에 좋습니다.</p>
+            </div>
+          </li>
+          <li className="flex gap-4">
+            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold">2</div>
+            <div>
+              <h4 className="text-lg font-semibold text-foreground">다이어트 식품</h4>
+              <p className="text-muted-foreground mt-1">저칼로리·고단백·저지방에 각종 무기질과 비타민이 풍부해 다이어트 식품으로 좋습니다.</p>
+            </div>
+          </li>
+          <li className="flex gap-4">
+            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold">3</div>
+            <div>
+              <h4 className="text-lg font-semibold text-foreground">숙취 해소</h4>
+              <p className="text-muted-foreground mt-1">콜레스테롤을 낮추고 음주 후 숙취 해독 효과가 탁월한 것으로 증명되어 있습니다.</p>
+            </div>
+          </li>
+        </ul>
       </div>
+    </section>
+  );
+};
+
+export default function AboutSection() {
+  return (
+    <div data-webild-section="about" id="about">
+      <AboutInline />
+    </div>
   );
 }

src/pages/HomePage/sections/Contact.tsx

@@ -10,13 +10,12 @@ export default function ContactSection(): React.JSX.Element {
     <div id="contact" data-section="contact">
         <SectionErrorBoundary name="contact">
               <ContactCta
-          tag="예약 문의"
-          text="인천 남동구 구월동, 정성을 다하는 복마중에서 특별한 시간을 예약하세요."
-          primaryButton={{
-            text: "전화 예약 문의",        href: "tel:0100000000"}}
-          secondaryButton={{
+        tag="예약 문의"
+        text="032-427-8088"
+        primaryButton={{"text":"전화 예약 문의","href":"tel:032-427-8088"}}
+        secondaryButton={{
             text: "위치 확인",        href: "#"}}
-        />
+      />
         </SectionErrorBoundary>
       </div>
   );

src/pages/HomePage/sections/Hero.tsx

@@ -12,8 +12,8 @@ export default function HeroSection(): React.JSX.Element {
         <SectionErrorBoundary name="hero">
               <HeroOverlayMarquee
         tag="인천 구월동의 신선한 참복 요리 전문점"
-        title="복마중 (福磨中)"
-        description="깊은 바다의 품격, 정성으로 빚어낸 참복 요리의 진수를 경험해보세요."
+        title="복마중 "
+        description="맛 "
         primaryButton={{
             text: "메뉴 보기",        href: "#products"}}
         secondaryButton={{

src/pages/HomePage/sections/Pricing.tsx

@@ -1,40 +0,0 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "pricing" section.
-
-import React from 'react';
-import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
-
-export default function PricingSection(): React.JSX.Element {
-  return (
-    <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>
-  );
-}

src/pages/HomePage/sections/Products.tsx

@@ -1,21 +1,141 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "products" section.
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import { cls } from "@/lib/utils";
 
-import React from 'react';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+const items = [
+  {
+    title: "마중 코스 (minimum 2 people) — ₩50,000",
+    description: "참복사시미, 복어죽, 참치회, 문어숙회, 초밥, 복껍질무침, 복튀김, 새우튀김, 참복불고기, 장어구이, 참복지리 or 참복매운탕, 마끼",
+    href: "#"
+  },
+  {
+    title: "스페셜 코스 (minimum 2 people) — ₩60,000",
+    description: "참복사시미, 복어죽, 참치회, 문어숙회, 초밥, 랍스타, 복껍질무침, 복튀김, 새우튀김, 참복불고기, 장어구이, 참복지리 or 참복매운탕, 마끼",
+    href: "#"
+  },
+  {
+    title: "참복 스페셜 (live pufferfish, minimum 2 people) — ₩99,000",
+    description: "참복사시미, 복어죽, 참치회(혼마구로 배꼽살), 문어숙회, 초밥, 복껍질무침, 랍스타, 참복불고기, 장어구이, 참복지리 or 참복매운탕(살아있는 참복), 마끼",
+    href: "#"
+  },
+  {
+    title: "자연산 참복지리",
+    description: "진하고 깊은 자연산 참복 ₩25,000",
+    href: "#"
+  },
+  {
+    title: "참치초밥 10ps",
+    description: "부드러운 참치초밥 ₩15,000",
+    href: "#"
+  },
+  {
+    title: "새우초밥 10ps",
+    description: "탱글한 새우초밥 ₩12,000",
+    href: "#"
+  },
+  {
+    title: "참치회덮밥",
+    description: "든든한 참치회덮밥 ₩8,000",
+    href: "#"
+  }
+];
+
+type FeatureItem = {
+  title: string;
+  description: string;
+  href: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+interface FeaturesRevealCardsBentoProps {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  items: [FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem];
+}
+
+const ProductsInline = () => {
+  const gridClasses = [
+    "md:col-span-2",
+    "md:col-span-4",
+    "md:col-span-3",
+    "md:col-span-3",
+    "md:col-span-2",
+    "md:col-span-2",
+    "md:col-span-2",
+  ];
+
+  const staggerDelays = [
+    0,
+    0.1,
+    0,
+    0.1,
+    0,
+    0.1,
+    0.2,
+  ];
 
-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>
+    <section aria-label="Features reveal cards bento section" className="py-20">
+      <div className="flex flex-col gap-8 md:gap-10">
+        <div className="flex flex-col items-center w-content-width mx-auto gap-2">
+          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+            <p>{"메뉴 안내"}</p>
+          </div>
+
+          <TextAnimation
+            text={"식사메뉴 "}
+            variant="slide-up"
+            gradientText={true}
+            tag="h2"
+            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+          />
+
+          <TextAnimation
+            text={"다채로운 복어 요리와 신선한 횟감을 즐겨보세요!"}
+            variant="slide-up"
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+          />
+
+          {(undefined || undefined) && (
+            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {items.map((item, index) => (
+            <ScrollReveal key={item.title} variant="slide-up" delay={index * 0.1} className="col-span-1">
+              <div className="card rounded p-6 md:p-8 flex flex-col gap-4 h-full border border-border shadow-sm">
+                <h3 className="text-2xl font-semibold text-foreground">
+                  {item.title}
+                </h3>
+                <div className="w-full h-px bg-border my-1" />
+                <p className="text-base leading-relaxed text-muted-foreground break-keep">
+                  {item.description}
+                </p>
+              </div>
+            </ScrollReveal>
+          ))}
+        </div>
       </div>
+    </section>
+  );
+};
+
+export default function ProductsSection() {
+  return (
+    <div data-webild-section="products" id="products">
+      <ProductsInline />
+    </div>
   );
 }