Update src/app/contact/page.tsx

src/app/about/page.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import { Eye, Feather, Heart, HelpCircle, MessageSquare, Rss, Search } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="largeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "ホーム", id: "/" },
+              { name: "当院について", id: "/about" },
+              { name: "白内障手術", id: "/cataract-surgery" },
+              { name: "小児眼科", id: "/pediatric-ophthalmology" },
+              { name: "近視治療", id: "/myopia-treatment" },
+              { name: "患者様の声", id: "/#testimonials" },
+              { name: "お知らせ", id: "/#blog" },
+              { name: "お問い合わせ", id: "/#contact" },
+            ]}
+            brandName="馬場眼科医院"
+          />
+        </div>
+
+        <div id="about-content" data-section="about-content">
+          <TestimonialAboutCard
+            useInvertedBackground={false}
+            tag="当院の理念"
+            tagIcon={Eye}
+            tagAnimation="slide-up"
+            title="地域に寄り添い、未来の視力を守る"
+            description="馬場眼科医院は、群馬県太田市の皆様の目の健康を第一に考え、最新の医療技術と温かい心で質の高い眼科医療を提供しています。お子様からご高齢の方まで、安心してご相談いただけるかかりつけ医を目指しています."
+            subdescription="当院では、患者様一人ひとりのライフスタイルや目の状態に合わせた丁寧なカウンセリングと、的確な診断・治療計画を立案。常に最新の知見を取り入れ、皆様の「見える」喜びをサポートします."
+            icon={Heart}
+            imageSrc="http://img.b2bpic.net/free-photo/black-female-doctor-doing-her-job_52683-100396.jpg"
+            imageAlt="優しく微笑む眼科医"
+            mediaAnimation="opacity"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="馬場眼科医院"
+            columns={[
+              {
+                title: "診療案内",                items: [
+                  { label: "白内障手術", href: "/cataract-surgery" },
+                  { label: "小児眼科", href: "/pediatric-ophthalmology" },
+                  { label: "近視治療", href: "/myopia-treatment" },
+                  { label: "WEB予約", href: "/#contact" },
+                ],
+              },
+              {
+                title: "当院について",                items: [
+                  { label: "ホーム", href: "/" },
+                  { label: "当院について", href: "/about" },
+                  { label: "患者様の声", href: "/#testimonials" },
+                  { label: "よくある質問", href: "/#faq" },
+                ],
+              },
+              {
+                title: "アクセス",                items: [
+                  { label: "交通案内", href: "/#contact" },
+                  { label: "駐車場", href: "/#contact" },
+                ],
+              },
+            ]}
+            copyrightText="© 2024 馬場眼科医院 All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/cataract-surgery/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import { Eye, Feather, Heart, HelpCircle, MessageSquare, Rss, Search } from "lucide-react";
+
+export default function CataractSurgeryPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="largeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "ホーム", id: "/" },
+              { name: "当院について", id: "/about" },
+              { name: "白内障手術", id: "/cataract-surgery" },
+              { name: "小児眼科", id: "/pediatric-ophthalmology" },
+              { name: "近視治療", id: "/myopia-treatment" },
+              { name: "患者様の声", id: "/#testimonials" },
+              { name: "お知らせ", id: "/#blog" },
+              { name: "お問い合わせ", id: "/#contact" },
+            ]}
+            brandName="馬場眼科医院"
+          />
+        </div>
+
+        <div id="cataract-surgery-content" data-section="cataract-surgery-content">
+          <FeatureCardTwentyOne
+            useInvertedBackground={true}
+            title="太田市で実績豊富な白内障手術"
+            description="馬場眼科医院では、日帰りでの白内障手術に力を入れています。患者様の負担を最小限に抑え、安全かつ確実な手術を提供。最新の多焦点眼内レンズも取り扱い、術後のQOL向上に貢献します."
+            tag="専門治療"
+            tagIcon={Eye}
+            tagAnimation="slide-up"
+            accordionItems={[
+              {
+                id: "surgical-flow",                title: "手術の流れ",                content: "初診から手術、術後ケアまで、専門スタッフが丁寧にサポートいたします。安心して手術に臨んでいただけるよう、事前説明を徹底します."},
+              {
+                id: "lens-options",                title: "選べる眼内レンズ",                content: "単焦点レンズから多焦点レンズまで、患者様のニーズに合わせて最適な眼内レンズをご提案。見え方の質を最大限に高めます."},
+              {
+                id: "day-surgery-benefits",                title: "日帰り手術のメリット",                content: "入院の必要がなく、術後すぐに自宅に戻れるため、日常生活への復帰がスムーズです。ご家族のサポートも受けやすい環境です."},
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/high-angle-glasses-letters_23-2148429614.jpg"
+            imageAlt="白内障手術の説明イラスト"
+            mediaAnimation="opacity"
+            mediaPosition="right"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="馬場眼科医院"
+            columns={[
+              {
+                title: "診療案内",                items: [
+                  { label: "白内障手術", href: "/cataract-surgery" },
+                  { label: "小児眼科", href: "/pediatric-ophthalmology" },
+                  { label: "近視治療", href: "/myopia-treatment" },
+                  { label: "WEB予約", href: "/#contact" },
+                ],
+              },
+              {
+                title: "当院について",                items: [
+                  { label: "ホーム", href: "/" },
+                  { label: "当院について", href: "/about" },
+                  { label: "患者様の声", href: "/#testimonials" },
+                  { label: "よくある質問", href: "/#faq" },
+                ],
+              },
+              {
+                title: "アクセス",                items: [
+                  { label: "交通案内", href: "/#contact" },
+                  { label: "駐車場", href: "/#contact" },
+                ],
+              },
+            ]}
+            copyrightText="© 2024 馬場眼科医院 All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Eye, Feather, Heart, HelpCircle, MessageSquare, Rss, Search } from "lucide-react";
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="largeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleApple
+            navItems={[
+              {
+                name: "ホーム",                id: "#home"},
+              {
+                name: "当院について",                id: "#about"},
+              {
+                name: "白内障手術",                id: "#cataract-surgery"},
+              {
+                name: "小児眼科",                id: "#pediatric-ophthalmology"},
+              {
+                name: "近視治療",                id: "#myopia-treatment"},
+              {
+                name: "患者様の声",                id: "#testimonials"},
+              {
+                name: "お知らせ",                id: "#blog"},
+              {
+                name: "お問い合わせ",                id: "/contact"},
+            ]}
+            brandName="馬場眼科医院"
+          />
+        </div>
+
+        <div id="contact-page-content" data-section="contact-page-content">
+          <ContactSplitForm
+            useInvertedBackground={true}
+            title="お問い合わせ・アクセス"
+            description="目のことでお困りですか？お気軽にご相談ください。WEB予約もこちらから可能です。
+
+**馬場眼科医院**
+**住所:** 群馬県太田市〇〇町1-2-3
+**電話:** 0276-XX-XXXX
+**診療時間:**
+月～金: 9:00～12:00 / 14:30～18:00
+土: 9:00～13:00
+休診日: 日曜・祝日"
+            inputs={[
+              {
+                name: "name",                type: "text",                placeholder: "お名前",                required: true,
+              },
+              {
+                name: "email",                type: "email",                placeholder: "メールアドレス",                required: true,
+              },
+            ]}
+            multiSelect={{
+              name: "inquiry_type",              label: "お問い合わせ内容",              options: [
+                "WEB予約について",                "白内障手術について",                "小児眼科について",                "近視治療について",                "その他"],
+            }}
+            textarea={{
+              name: "message",              placeholder: "メッセージをどうぞ",              rows: 5,
+              required: true,
+            }}
+            imageSrc="http://img.b2bpic.net/free-photo/serious-young-blonde-lady-walking-outdoors-looking-aside_171337-19431.jpg"
+            imageAlt="清潔な眼科受付"
+            mediaAnimation="opacity"
+            mediaPosition="right"
+            buttonText="送信する"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterBaseCard
+            logoText="馬場眼科医院"
+            columns={[
+              {
+                title: "診療案内",                items: [
+                  {
+                    label: "白内障手術",                    href: "#cataract-surgery"},
+                  {
+                    label: "小児眼科",                    href: "#pediatric-ophthalmology"},
+                  {
+                    label: "近視治療",                    href: "#myopia-treatment"},
+                  {
+                    label: "WEB予約",                    href: "/contact"},
+                ],
+              },
+              {
+                title: "当院について",                items: [
+                  {
+                    label: "ホーム",                    href: "#home"},
+                  {
+                    label: "当院について",                    href: "#about"},
+                  {
+                    label: "患者様の声",                    href: "#testimonials"},
+                  {
+                    label: "よくある質問",                    href: "#faq"},
+                ],
+              },
+              {
+                title: "アクセス",                items: [
+                  {
+                    label: "交通案内",                    href: "#"},
+                  {
+                    label: "駐車場",                    href: "#"},
+                ],
+              },
+            ]}
+            copyrightText="© 2024 馬場眼科医院 All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -19,51 +19,35 @@ export default function LandingPage() {
     <ThemeProvider
         defaultButtonVariant="text-stagger"
         defaultTextAnimation="background-highlight"
-        borderRadius="rounded"
+        borderRadius="soft"
         contentWidth="smallMedium"
         sizing="largeSizeMediumTitles"
-        background="noiseDiagonalGradient"
+        background="none"
-        cardStyle="glass-elevated"
+        cardStyle="soft-shadow"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="flat"
-        secondaryButtonStyle="glass"
+        secondaryButtonStyle="solid"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
         {
-          name: "ホーム",
+          name: "ホーム",          id: "#home"},
-          id: "#home",
-        },
         {
-          name: "当院について",
+          name: "当院について",          id: "#about"},
-          id: "#about",
-        },
         {
-          name: "白内障手術",
+          name: "白内障手術",          id: "#cataract-surgery"},
-          id: "#cataract-surgery",
-        },
         {
-          name: "小児眼科",
+          name: "小児眼科",          id: "#pediatric-ophthalmology"},
-          id: "#pediatric-ophthalmology",
-        },
         {
-          name: "近視治療",
+          name: "近視治療",          id: "#myopia-treatment"},
-          id: "#myopia-treatment",
-        },
         {
-          name: "患者様の声",
+          name: "患者様の声",          id: "#testimonials"},
-          id: "#testimonials",
-        },
         {
-          name: "お知らせ",
+          name: "お知らせ",          id: "#blog"},
-          id: "#blog",
-        },
         {
-          name: "お問い合わせ",
+          name: "お問い合わせ",          id: "#contact"},
-          id: "#contact",
-        },
       ]}
       brandName="馬場眼科医院"
     />
@@ -72,42 +56,26 @@ export default function LandingPage() {
   <div id="home" data-section="home">
       <HeroCarouselLogo
       logoText="馬場眼科医院"
-      description="群馬県太田市で、地域に根差した最先端の眼科医療を提供しています。白内障手術、小児眼科、近視治療、日帰り手術まで、患者様一人ひとりに最適な視力ケアをお届けします。"
+      description="群馬県太田市で、地域に根差した最先端の眼科医療を提供しています。白内障手術、小児眼科、近視治療、日帰り手術まで、患者様一人ひとりに最適な視力ケアをお届けします."
       buttons={[
         {
-          text: "WEB予約はこちら",
+          text: "WEB予約はこちら",          href: "#contact"},
-          href: "#contact",
-        },
         {
-          text: "当院について",
+          text: "当院について",          href: "#about"},
-          href: "#about",
-        },
       ]}
       slides={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/doctor-performing-medical-research-lab_23-2149335730.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/doctor-performing-medical-research-lab_23-2149335730.jpg",          imageAlt: "明るく清潔な眼科待合室"},
-          imageAlt: "明るく清潔な眼科待合室",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/little-girl-checking-up-her-sight-ophthalmology-center_1303-27499.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/little-girl-checking-up-her-sight-ophthalmology-center_1303-27499.jpg",          imageAlt: "子供の眼科検査風景"},
-          imageAlt: "子供の眼科検査風景",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-doctor-wearing-equipment_273609-14438.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-doctor-wearing-equipment_273609-14438.jpg",          imageAlt: "最先端の白内障手術機器"},
-          imageAlt: "最先端の白内障手術機器",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-computer-with-information-files-healthcare_482257-27332.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-computer-with-information-files-healthcare_482257-27332.jpg",          imageAlt: "オンライン予約システムの画面"},
-          imageAlt: "オンライン予約システムの画面",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/old-woman-having-eye-sight-check-ophthalmology-clinic_23-2149082449.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/old-woman-having-eye-sight-check-ophthalmology-clinic_23-2149082449.jpg",          imageAlt: "診察室で笑顔の家族"},
-          imageAlt: "診察室で笑顔の家族",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/horizontal-shot-attractive-cheerful-middle-aged-female-medical-worker-wearing-white-coat-stethoscope-around-neck-having-fun-showing-positive-attitude-making-binoculars-with-fingers-smiling_343059-2274.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/horizontal-shot-attractive-cheerful-middle-aged-female-medical-worker-wearing-white-coat-stethoscope-around-neck-having-fun-showing-positive-attitude-making-binoculars-with-fingers-smiling_343059-2274.jpg",          imageAlt: "患者様の目のクローズアップ"},
-          imageAlt: "患者様の目のクローズアップ",
-        },
       ]}
       autoplayDelay={4000}
       showDimOverlay={true}
@@ -121,8 +89,8 @@ export default function LandingPage() {
       tagIcon={Eye}
       tagAnimation="slide-up"
       title="地域に寄り添い、未来の視力を守る"
-      description="馬場眼科医院は、群馬県太田市の皆様の目の健康を第一に考え、最新の医療技術と温かい心で質の高い眼科医療を提供しています。お子様からご高齢の方まで、安心してご相談いただけるかかりつけ医を目指しています。"
+      description="馬場眼科医院は、群馬県太田市の皆様の目の健康を第一に考え、最新の医療技術と温かい心で質の高い眼科医療を提供しています。お子様からご高齢の方まで、安心してご相談いただけるかかりつけ医を目指しています."
-      subdescription="当院では、患者様一人ひとりのライフスタイルや目の状態に合わせた丁寧なカウンセリングと、的確な診断・治療計画を立案。常に最新の知見を取り入れ、皆様の「見える」喜びをサポートします。"
+      subdescription="当院では、患者様一人ひとりのライフスタイルや目の状態に合わせた丁寧なカウンセリングと、的確な診断・治療計画を立案。常に最新の知見を取り入れ、皆様の「見える」喜びをサポートします."
       icon={Heart}
       imageSrc="http://img.b2bpic.net/free-photo/black-female-doctor-doing-her-job_52683-100396.jpg"
       imageAlt="優しく微笑む眼科医"
@@ -134,26 +102,17 @@ export default function LandingPage() {
       <FeatureCardTwentyOne
       useInvertedBackground={true}
       title="太田市で実績豊富な白内障手術"
-      description="馬場眼科医院では、日帰りでの白内障手術に力を入れています。患者様の負担を最小限に抑え、安全かつ確実な手術を提供。最新の多焦点眼内レンズも取り扱い、術後のQOL向上に貢献します。"
+      description="馬場眼科医院では、日帰りでの白内障手術に力を入れています。患者様の負担を最小限に抑え、安全かつ確実な手術を提供。最新の多焦点眼内レンズも取り扱い、術後のQOL向上に貢献します."
       tag="専門治療"
       tagIcon={Eye}
       tagAnimation="slide-up"
       accordionItems={[
         {
-          id: "surgical-flow",
+          id: "surgical-flow",          title: "手術の流れ",          content: "初診から手術、術後ケアまで、専門スタッフが丁寧にサポートいたします。安心して手術に臨んでいただけるよう、事前説明を徹底します."},
-          title: "手術の流れ",
-          content: "初診から手術、術後ケアまで、専門スタッフが丁寧にサポートいたします。安心して手術に臨んでいただけるよう、事前説明を徹底します。",
-        },
         {
-          id: "lens-options",
+          id: "lens-options",          title: "選べる眼内レンズ",          content: "単焦点レンズから多焦点レンズまで、患者様のニーズに合わせて最適な眼内レンズをご提案。見え方の質を最大限に高めます."},
-          title: "選べる眼内レンズ",
-          content: "単焦点レンズから多焦点レンズまで、患者様のニーズに合わせて最適な眼内レンズをご提案。見え方の質を最大限に高めます。",
-        },
         {
-          id: "day-surgery-benefits",
+          id: "day-surgery-benefits",          title: "日帰り手術のメリット",          content: "入院の必要がなく、術後すぐに自宅に戻れるため、日常生活への復帰がスムーズです。ご家族のサポートも受けやすい環境です."},
-          title: "日帰り手術のメリット",
-          content: "入院の必要がなく、術後すぐに自宅に戻れるため、日常生活への復帰がスムーズです。ご家族のサポートも受けやすい環境です。",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/high-angle-glasses-letters_23-2148429614.jpg"
       imageAlt="白内障手術の説明イラスト"
@@ -166,26 +125,17 @@ export default function LandingPage() {
       <FeatureCardTwentyOne
       useInvertedBackground={false}
       title="お子様の目の健康を守る小児眼科"
-      description="お子様の目の発達は一生の財産です。馬場眼科医院の小児眼科では、お子様が安心して検査・治療を受けられるよう、専門医とスタッフが優しくサポート。弱視、斜視、近視などの早期発見・早期治療に努めます。"
+      description="お子様の目の発達は一生の財産です。馬場眼科医院の小児眼科では、お子様が安心して検査・治療を受けられるよう、専門医とスタッフが優しくサポート。弱視、斜視、近視などの早期発見・早期治療に努めます."
       tag="大切なお子様の目"
       tagIcon={Feather}
       tagAnimation="slide-up"
       accordionItems={[
         {
-          id: "child-friendly-exam",
+          id: "child-friendly-exam",          title: "お子様に優しい検査",          content: "遊びを取り入れた検査や、痛みの少ない方法でお子様のストレスを軽減。初めての眼科受診でも安心です."},
-          title: "お子様に優しい検査",
-          content: "遊びを取り入れた検査や、痛みの少ない方法でお子様のストレスを軽減。初めての眼科受診でも安心です。",
-        },
         {
-          id: "early-detection",
+          id: "early-detection",          title: "早期発見・早期治療",          content: "弱視や斜視は早期発見が重要です。視力の発達を妨げないよう、定期的な検診をお勧めしています."},
-          title: "早期発見・早期治療",
-          content: "弱視や斜視は早期発見が重要です。視力の発達を妨げないよう、定期的な検診をお勧めしています。",
-        },
         {
-          id: "parent-consultation",
+          id: "parent-consultation",          title: "保護者様への丁寧な説明",          content: "お子様の目の状態や治療方針について、保護者様が納得されるまで詳しくご説明いたします。ご不安な点はお気軽にご質問ください."},
-          title: "保護者様への丁寧な説明",
-          content: "お子様の目の状態や治療方針について、保護者様が納得されるまで詳しくご説明いたします。ご不安な点はお気軽にご質問ください。",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/medium-shot-girl-getting-her-eyes-checked_23-2150801452.jpg"
       imageAlt="子供が楽しく眼科検査を受ける様子"
@@ -202,50 +152,20 @@ export default function LandingPage() {
       useInvertedBackground={true}
       products={[
         {
-          id: "myopia-treatment-1",
+          id: "myopia-treatment-1",          name: "オルソケラトロジー",          price: "要相談",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-person-holding-eye-contacts-with-copy-space_23-2148320329.jpg",          imageAlt: "オルソケラトロジーレンズ"},
-          name: "オルソケラトロジー",
-          price: "要相談",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-person-holding-eye-contacts-with-copy-space_23-2148320329.jpg",
-          imageAlt: "オルソケラトロジーレンズ",
-        },
         {
-          id: "myopia-treatment-2",
+          id: "myopia-treatment-2",          name: "リジュセア点眼液",          price: "要相談",          imageSrc: "http://img.b2bpic.net/free-photo/variety-medical-supplies-table_23-2148529799.jpg",          imageAlt: "リジュセア点眼液のボトル"},
-          name: "リジュセア点眼液",
-          price: "要相談",
-          imageSrc: "http://img.b2bpic.net/free-photo/variety-medical-supplies-table_23-2148529799.jpg",
-          imageAlt: "リジュセア点眼液のボトル",
-        },
         {
-          id: "myopia-treatment-3",
+          id: "myopia-treatment-3",          name: "低濃度アトロピン点眼",          price: "要相談",          imageSrc: "http://img.b2bpic.net/free-photo/board-surrounded-by-painting-material_23-2147961488.jpg",          imageAlt: "子供用眼鏡"},
-          name: "低濃度アトロピン点眼",
-          price: "要相談",
-          imageSrc: "http://img.b2bpic.net/free-photo/board-surrounded-by-painting-material_23-2147961488.jpg",
-          imageAlt: "子供用眼鏡",
-        },
         {
-          id: "myopia-treatment-4",
+          id: "myopia-treatment-4",          name: "レーザー近視矯正",          price: "要相談",          imageSrc: "http://img.b2bpic.net/free-photo/laboratory-doctor-experiencing-virtual-reality-using-vr-goggles-medical-neurological-research-lab_482257-2065.jpg",          imageAlt: "近視矯正レーザー機器"},
-          name: "レーザー近視矯正",
-          price: "要相談",
-          imageSrc: "http://img.b2bpic.net/free-photo/laboratory-doctor-experiencing-virtual-reality-using-vr-goggles-medical-neurological-research-lab_482257-2065.jpg",
-          imageAlt: "近視矯正レーザー機器",
-        },
         {
-          id: "myopia-treatment-5",
+          id: "myopia-treatment-5",          name: "栄養療法",          price: "要相談",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-brain-booster-pills-still-life_23-2150760057.jpg",          imageAlt: "目の健康サプリメント"},
-          name: "栄養療法",
-          price: "要相談",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-brain-booster-pills-still-life_23-2150760057.jpg",
-          imageAlt: "目の健康サプリメント",
-        },
         {
-          id: "myopia-treatment-6",
+          id: "myopia-treatment-6",          name: "生活習慣指導",          price: "要相談",          imageSrc: "http://img.b2bpic.net/free-photo/crazy-sports-man-funny-expression_1194-3393.jpg",          imageAlt: "PC画面と目のイラスト"},
-          name: "生活習慣指導",
-          price: "要相談",
-          imageSrc: "http://img.b2bpic.net/free-photo/crazy-sports-man-funny-expression_1194-3393.jpg",
-          imageAlt: "PC画面と目のイラスト",
-        },
       ]}
       title="太田市での近視治療・リジュセア"
-      description="お子様から大人まで、近視でお悩みの方へ。進行を抑制する治療から、ドライアイに効果的なリジュセアまで、様々な選択肢をご用意しています。あなたの目に最適な治療法を見つけましょう。"
+      description="お子様から大人まで、近視でお悩みの方へ。進行を抑制する治療から、ドライアイに効果的なリジュセアまで、様々な選択肢をご用意しています。あなたの目に最適な治療法を見つけましょう."
       tag="先進治療"
       tagIcon={Search}
       tagAnimation="slide-up"
@@ -259,54 +179,24 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
+          id: "1",          name: "田中 康介 様",          handle: "@k.tanaka",          testimonial: "白内障手術を受け、長年の悩みが解消されました。術後のケアも丁寧で、安心して任せられました.",          rating: 5,
-          name: "田中 康介 様",
+          imageSrc: "http://img.b2bpic.net/free-photo/woman-good-mood-looks-into-camera-with-smile-pink-background_197531-18060.jpg",          imageAlt: "田中 康介 様"},
-          handle: "@k.tanaka",
-          testimonial: "白内障手術を受け、長年の悩みが解消されました。術後のケアも丁寧で、安心して任せられました。",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-good-mood-looks-into-camera-with-smile-pink-background_197531-18060.jpg",
-          imageAlt: "田中 康介 様",
-        },
         {
-          id: "2",
+          id: "2",          name: "佐藤 由美 様",          handle: "@y.sato",          testimonial: "子供の弱視治療で通っています。先生もスタッフの方も優しく、子供も嫌がらずに通院できています.",          rating: 5,
-          name: "佐藤 由美 様",
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-love-partners_23-2149226773.jpg",          imageAlt: "佐藤 由美 様"},
-          handle: "@y.sato",
-          testimonial: "子供の弱視治療で通っています。先生もスタッフの方も優しく、子供も嫌がらずに通院できています。",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-love-partners_23-2149226773.jpg",
-          imageAlt: "佐藤 由美 様",
-        },
         {
-          id: "3",
+          id: "3",          name: "鈴木 健一 様",          handle: "@k.suzuki",          testimonial: "近視治療について相談しました。色々な選択肢を丁寧に教えていただき、自分に合った治療法を選べました.",          rating: 4,
-          name: "鈴木 健一 様",
+          imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing-studio_176474-27215.jpg",          imageAlt: "鈴木 健一 様"},
-          handle: "@k.suzuki",
-          testimonial: "近視治療について相談しました。色々な選択肢を丁寧に教えていただき、自分に合った治療法を選べました。",
-          rating: 4,
-          imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing-studio_176474-27215.jpg",
-          imageAlt: "鈴木 健一 様",
-        },
         {
-          id: "4",
+          id: "4",          name: "高橋 綾子 様",          handle: "@a.takahashi",          testimonial: "ドライアイで悩んでいましたが、リジュセアを試して症状がかなり改善しました。感謝しています.",          rating: 5,
-          name: "高橋 綾子 様",
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-doctor-checking-patient_23-2149103597.jpg",          imageAlt: "高橋 綾子 様"},
-          handle: "@a.takahashi",
-          testimonial: "ドライアイで悩んでいましたが、リジュセアを試して症状がかなり改善しました。感謝しています。",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-doctor-checking-patient_23-2149103597.jpg",
-          imageAlt: "高橋 綾子 様",
-        },
         {
-          id: "5",
+          id: "5",          name: "渡辺 雄大 様",          handle: "@y.watanabe",          testimonial: "日帰り手術は初めてで不安でしたが、手術もスムーズで痛みもなく、すぐに自宅に帰れて助かりました.",          rating: 5,
-          name: "渡辺 雄大 様",
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-blonde-sexy-fashion-woman-model-cap-all-black-with-bright-makeup_627829-1093.jpg",          imageAlt: "渡辺 雄大 様"},
-          handle: "@y.watanabe",
-          testimonial: "日帰り手術は初めてで不安でしたが、手術もスムーズで痛みもなく、すぐに自宅に帰れて助かりました。",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-blonde-sexy-fashion-woman-model-cap-all-black-with-bright-makeup_627829-1093.jpg",
-          imageAlt: "渡辺 雄大 様",
-        },
       ]}
       showRating={true}
       title="患者様の声"
-      description="当院で治療を受けられた患者様からの温かいお言葉を多数いただいております。皆様の笑顔が、私たちの最大の喜びです。"
+      description="当院で治療を受けられた患者様からの温かいお言葉を多数いただいております。皆様の笑顔が、私たちの最大の喜びです."
       tag="喜びの声"
       tagIcon={MessageSquare}
       tagAnimation="slide-up"
@@ -319,38 +209,20 @@ export default function LandingPage() {
       useInvertedBackground={true}
       faqs={[
         {
-          id: "q1",
+          id: "q1",          title: "WEB予約はできますか？",          content: "はい、当院では24時間受付可能なWEB予約システムを導入しております。当サイトの「WEB予約」ボタンからご利用いただけます."},
-          title: "WEB予約はできますか？",
-          content: "はい、当院では24時間受付可能なWEB予約システムを導入しております。当サイトの「WEB予約」ボタンからご利用いただけます。",
-        },
         {
-          id: "q2",
+          id: "q2",          title: "駐車場はありますか？",          content: "はい、クリニック敷地内に広々とした駐車場を完備しております。お車でお越しの方もご安心ください."},
-          title: "駐車場はありますか？",
-          content: "はい、クリニック敷地内に広々とした駐車場を完備しております。お車でお越しの方もご安心ください。",
-        },
         {
-          id: "q3",
+          id: "q3",          title: "小児眼科の診察は何歳から受けられますか？",          content: "生後間もないお子様から診察が可能です。目の異常を感じたら、お早めにご相談ください."},
-          title: "小児眼科の診察は何歳から受けられますか？",
-          content: "生後間もないお子様から診察が可能です。目の異常を感じたら、お早めにご相談ください。",
-        },
         {
-          id: "q4",
+          id: "q4",          title: "白内障手術は入院が必要ですか？",          content: "当院では日帰り白内障手術を基本としております。手術前後のケアについても詳しくご説明いたします."},
-          title: "白内障手術は入院が必要ですか？",
-          content: "当院では日帰り白内障手術を基本としております。手術前後のケアについても詳しくご説明いたします。",
-        },
         {
-          id: "q5",
+          id: "q5",          title: "保険証は必要ですか？",          content: "はい、初診時や月が変わって初めての受診の際は、必ず保険証をお持ちください."},
-          title: "保険証は必要ですか？",
-          content: "はい、初診時や月が変わって初めての受診の際は、必ず保険証をお持ちください。",
-        },
         {
-          id: "q6",
+          id: "q6",          title: "コンタクトレンズの処方はしてもらえますか？",          content: "はい、コンタクトレンズの処方も行っております。初めての方には装用指導もいたします."},
-          title: "コンタクトレンズの処方はしてもらえますか？",
-          content: "はい、コンタクトレンズの処方も行っております。初めての方には装用指導もいたします。",
-        },
       ]}
       title="よくある質問"
-      description="当院に寄せられるお問い合わせの中から、特に多いご質問をまとめました。ご不明な点がございましたら、まずはこちらをご覧ください。"
+      description="当院に寄せられるお問い合わせの中から、特に多いご質問をまとめました。ご不明な点がございましたら、まずはこちらをご覧ください."
       tag="疑問を解消"
       tagIcon={HelpCircle}
       tagAnimation="slide-up"
@@ -364,44 +236,17 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       title="お知らせ・眼科コラム"
-      description="目の健康に関する最新情報や、当院からのお知らせを発信しています。太田市、群馬県の皆様の目の健康に役立つ情報をお届けします。"
+      description="目の健康に関する最新情報や、当院からのお知らせを発信しています。太田市、群馬県の皆様の目の健康に役立つ情報をお届けします."
       tag="新着情報"
       tagIcon={Rss}
       tagAnimation="slide-up"
       blogs={[
         {
-          id: "blog-1",
+          id: "blog-1",          category: "お知らせ",          title: "WEB予約システム導入のお知らせ",          excerpt: "患者様からのご要望にお応えし、WEB予約システムを導入いたしました。24時間いつでもご予約いただけます.",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-doctor-taking-notes_23-2149551110.jpg",          imageAlt: "PCでブログ記事を読む女性",          authorName: "馬場眼科医院",          authorAvatar: "asset://avatar-1",          date: "2024年4月10日"},
-          category: "お知らせ",
-          title: "WEB予約システム導入のお知らせ",
-          excerpt: "患者様からのご要望にお応えし、WEB予約システムを導入いたしました。24時間いつでもご予約いただけます。",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-doctor-taking-notes_23-2149551110.jpg",
-          imageAlt: "PCでブログ記事を読む女性",
-          authorName: "馬場眼科医院",
-          authorAvatar: "asset://avatar-1",
-          date: "2024年4月10日",
-        },
         {
-          id: "blog-2",
+          id: "blog-2",          category: "コラム",          title: "太田市で増える子供の近視対策",          excerpt: "近年、お子様の近視が増加傾向にあります。早期発見と適切な治療、生活習慣の見直しについて解説します.",          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-mom-baby-watching-online-video-culinary-course-tablet-while-cooking-together-kitchen-child-care-cooking-home-concept_74855-7484.jpg",          imageAlt: "子供と目のイラスト",          authorName: "馬場眼科医院",          authorAvatar: "asset://avatar-2",          date: "2024年4月5日"},
-          category: "コラム",
-          title: "太田市で増える子供の近視対策",
-          excerpt: "近年、お子様の近視が増加傾向にあります。早期発見と適切な治療、生活習慣の見直しについて解説します。",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-mom-baby-watching-online-video-culinary-course-tablet-while-cooking-together-kitchen-child-care-cooking-home-concept_74855-7484.jpg",
-          imageAlt: "子供と目のイラスト",
-          authorName: "馬場眼科医院",
-          authorAvatar: "asset://avatar-2",
-          date: "2024年4月5日",
-        },
         {
-          id: "blog-3",
+          id: "blog-3",          category: "治療紹介",          title: "群馬県でリジュセア治療をお探しの方へ",          excerpt: "新しいドライアイ治療薬「リジュセア」について、その効果と安全性、適応症について詳しくご紹介します.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-ophthalmologist-s-tools_23-2150923343.jpg",          imageAlt: "リジュセア点眼液のパッケージ",          authorName: "馬場眼科医院",          authorAvatar: "asset://avatar-3",          date: "2024年3月28日"},
-          category: "治療紹介",
-          title: "群馬県でリジュセア治療をお探しの方へ",
-          excerpt: "新しいドライアイ治療薬「リジュセア」について、その効果と安全性、適応症について詳しくご紹介します。",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-ophthalmologist-s-tools_23-2150923343.jpg",
-          imageAlt: "リジュセア点眼液のパッケージ",
-          authorName: "馬場眼科医院",
-          authorAvatar: "asset://avatar-3",
-          date: "2024年3月28日",
-        },
       ]}
     />
   </div>
@@ -410,36 +255,21 @@ export default function LandingPage() {
       <ContactSplitForm
       useInvertedBackground={true}
       title="お問い合わせ・WEB予約"
-      description="目のことでお困りですか？お気軽にご相談ください。WEB予約もこちらから可能です。"
+      description="目のことでお困りですか？お気軽にご相談ください。WEB予約もこちらから可能です."
       inputs={[
         {
-          name: "name",
+          name: "name",          type: "text",          placeholder: "お名前",          required: true,
-          type: "text",
-          placeholder: "お名前",
-          required: true,
         },
         {
-          name: "email",
+          name: "email",          type: "email",          placeholder: "メールアドレス",          required: true,
-          type: "email",
-          placeholder: "メールアドレス",
-          required: true,
         },
       ]}
       multiSelect={{
-        name: "inquiry_type",
+        name: "inquiry_type",        label: "お問い合わせ内容",        options: [
-        label: "お問い合わせ内容",
+          "WEB予約について",          "白内障手術について",          "小児眼科について",          "近視治療について",          "その他"],
-        options: [
-          "WEB予約について",
-          "白内障手術について",
-          "小児眼科について",
-          "近視治療について",
-          "その他",
-        ],
       }}
       textarea={{
-        name: "message",
+        name: "message",        placeholder: "メッセージをどうぞ",        rows: 5,
-        placeholder: "メッセージをどうぞ",
-        rows: 5,
         required: true,
       }}
       imageSrc="http://img.b2bpic.net/free-photo/serious-young-blonde-lady-walking-outdoors-looking-aside_171337-19431.jpg"
@@ -455,58 +285,35 @@ export default function LandingPage() {
       logoText="馬場眼科医院"
       columns={[
         {
-          title: "診療案内",
+          title: "診療案内",          items: [
-          items: [
             {
-              label: "白内障手術",
+              label: "白内障手術",              href: "#cataract-surgery"},
-              href: "#cataract-surgery",
-            },
             {
-              label: "小児眼科",
+              label: "小児眼科",              href: "#pediatric-ophthalmology"},
-              href: "#pediatric-ophthalmology",
-            },
             {
-              label: "近視治療",
+              label: "近視治療",              href: "#myopia-treatment"},
-              href: "#myopia-treatment",
-            },
             {
-              label: "WEB予約",
+              label: "WEB予約",              href: "#contact"},
-              href: "#contact",
-            },
           ],
         },
         {
-          title: "当院について",
+          title: "当院について",          items: [
-          items: [
             {
-              label: "ホーム",
+              label: "ホーム",              href: "#home"},
-              href: "#home",
-            },
             {
-              label: "当院について",
+              label: "当院について",              href: "#about"},
-              href: "#about",
-            },
             {
-              label: "患者様の声",
+              label: "患者様の声",              href: "#testimonials"},
-              href: "#testimonials",
-            },
             {
-              label: "よくある質問",
+              label: "よくある質問",              href: "#faq"},
-              href: "#faq",
-            },
           ],
         },
         {
-          title: "アクセス",
+          title: "アクセス",          items: [
-          items: [
             {
-              label: "交通案内",
+              label: "交通案内",              href: "#"},
-              href: "#",
-            },
             {
-              label: "駐車場",
+              label: "駐車場",              href: "#"},
-              href: "#",
-            },
           ],
         },
       ]}
@@ -516,4 +323,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/pediatric-ophthalmology/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import { Eye, Feather, Heart, HelpCircle, MessageSquare, Rss, Search } from "lucide-react";
+
+export default function PediatricOphthalmologyPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="largeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "ホーム", id: "/" },
+              { name: "当院について", id: "/about" },
+              { name: "白内障手術", id: "/cataract-surgery" },
+              { name: "小児眼科", id: "/pediatric-ophthalmology" },
+              { name: "近視治療", id: "/myopia-treatment" },
+              { name: "患者様の声", id: "/#testimonials" },
+              { name: "お知らせ", id: "/#blog" },
+              { name: "お問い合わせ", id: "/#contact" },
+            ]}
+            brandName="馬場眼科医院"
+          />
+        </div>
+
+        <div id="pediatric-ophthalmology-content" data-section="pediatric-ophthalmology-content">
+          <FeatureCardTwentyOne
+            useInvertedBackground={false}
+            title="お子様の目の健康を守る小児眼科"
+            description="お子様の目の発達は一生の財産です。馬場眼科医院の小児眼科では、お子様が安心して検査・治療を受けられるよう、専門医とスタッフが優しくサポート。弱視、斜視、近視などの早期発見・早期治療に努めます."
+            tag="大切なお子様の目"
+            tagIcon={Feather}
+            tagAnimation="slide-up"
+            accordionItems={[
+              {
+                id: "child-friendly-exam",                title: "お子様に優しい検査",                content: "遊びを取り入れた検査や、痛みの少ない方法でお子様のストレスを軽減。初めての眼科受診でも安心です."},
+              {
+                id: "early-detection",                title: "早期発見・早期治療",                content: "弱視や斜視は早期発見が重要です。視力の発達を妨げないよう、定期的な検診をお勧めしています."},
+              {
+                id: "parent-consultation",                title: "保護者様への丁寧な説明",                content: "お子様の目の状態や治療方針について、保護者様が納得されるまで詳しくご説明いたします。ご不安な点はお気軽にご質問ください."},
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/medium-shot-girl-getting-her-eyes-checked_23-2150801452.jpg"
+            imageAlt="子供が楽しく眼科検査を受ける様子"
+            mediaAnimation="opacity"
+            mediaPosition="left"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="馬場眼科医院"
+            columns={[
+              {
+                title: "診療案内",                items: [
+                  { label: "白内障手術", href: "/cataract-surgery" },
+                  { label: "小児眼科", href: "/pediatric-ophthalmology" },
+                  { label: "近視治療", href: "/myopia-treatment" },
+                  { label: "WEB予約", href: "/#contact" },
+                ],
+              },
+              {
+                title: "当院について",                items: [
+                  { label: "ホーム", href: "/" },
+                  { label: "当院について", href: "/about" },
+                  { label: "患者様の声", href: "/#testimonials" },
+                  { label: "よくある質問", href: "/#faq" },
+                ],
+              },
+              {
+                title: "アクセス",                items: [
+                  { label: "交通案内", href: "/#contact" },
+                  { label: "駐車場", href: "/#contact" },
+                ],
+              },
+            ]}
+            copyrightText="© 2024 馬場眼科医院 All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #f5f4f0;
-  --card: #f9f9f9;
+  --card: #ffffff;
-  --foreground: #000612e6;
+  --foreground: #1a1a1a;
-  --primary-cta: #15479c;
+  --primary-cta: #2c2c2c;
-  --primary-cta-text: #ffffff;
+  --primary-cta-text: #f5f4f0;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #f5f4f0;
-  --secondary-cta-text: #000612e6;
+  --secondary-cta-text: #1a1a1a;
-  --accent: #e2e2e2;
+  --accent: #8a8a8a;
-  --background-accent: #c4c4c4;
+  --background-accent: #e8e6e1;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);