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/sections/About.tsx

@@ -14,7 +14,7 @@ const AboutInline = () => {
     <section aria-label="About section" className="py-20">
       <div className="w-content-width mx-auto flex flex-col gap-2 items-center">
         <TextAnimation
-          text={"1. 건강 회복 & 질병 예방\n수술 전후 회복, 당뇨·신장질환에 효과적이며 갱년기 장애 완화, 혈전·노화 방지, 각종 암·종양·궤양 예방에 좋습니다.\n2. 다이어트 식품\n저칼로리·고단백·저지방에 각종 무기질과 비타민이 풍부해 다이어트 식품으로 최적입니다.\n3. 숙취 해소\n콜레스테롤을 낮추고 음주 후 숙취 해독 효과가 탁월한 것으로 증명되어 있습니다. "}
+          text={"복어의 효능"}
           variant="slide-up"
           gradientText={false}
           tag="h2"

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/Products.tsx

@@ -112,34 +112,18 @@ const ProductsInline = () => {
           )}
         </div>
 
-        <div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-6 gap-3">
+        <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={staggerDelays[index]} className={cls("col-span-1 group", gridClasses[index])}>
-              <a href={item.href} className="block relative overflow-hidden rounded">
-                <div className="h-80 xl:h-100 2xl:h-120 overflow-hidden bg-card">
-                  {item.imageSrc && (
-                    <ImageOrVideo
-                      imageSrc={item.imageSrc}
-                      videoSrc={item.videoSrc}
-                      className="rounded group-hover:scale-105 transition-transform duration-500"
-                    />
-                  )}
-                </div>
-                <div className="absolute -inset-x-px -bottom-px h-2/5 backdrop-blur-xl mask-fade-top-overlay" aria-hidden="true" />
-                <div className="absolute inset-x-3 bottom-3 2xl:inset-x-4 2xl:bottom-4 z-10">
-                  <div className="relative flex flex-col gap-1 md:gap-0 md:group-hover:gap-1 p-3 2xl:p-4 transition-all duration-400">
-                    <div className="absolute inset-0 -z-10 card rounded translate-y-0 opacity-100 md:translate-y-full md:opacity-0 transition-all duration-400 ease-out md:group-hover:translate-y-0 md:group-hover:opacity-100" />
-                    <h3 className="text-2xl font-semibold leading-snug text-foreground md:text-white transition-colors duration-400 md:group-hover:text-foreground">
-                      {item.title}
-                    </h3>
-                    <div className="grid grid-rows-[1fr] md:grid-rows-[0fr] transition-all duration-400 ease-out md:group-hover:grid-rows-[1fr]">
-                      <p className="overflow-hidden text-base leading-snug text-foreground opacity-100 md:opacity-0 transition-opacity duration-400 md:group-hover:opacity-100">
-                        {item.description}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </a>
+            <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>