feat: add pricing page with API integration and dynamic rendering

app/appointment/page.tsx

@@ -1,38 +1,9 @@
 "use client";
 
 import { useState, useEffect, FormEvent } from "react";
+import { AppointmentData } from "./types";
+import Breadcrumb from "../components/Breadcrumb";
 
-// Types for appointment data from CMS
-interface AppointmentHero {
-  title: string;
-  backgroundImage: string;
-  subtitle: string;
-  heading: string;
-  description: string;
-}
-
-interface AppointmentForm {
-  heading: string;
-  fields: Array<{
-    name: string;
-    label: string;
-    type: string;
-    placeholder: string;
-    required: boolean;
-    colClass: string;
-  }>;
-  submitButton: {
-    text: string;
-    icon: string;
-    buttonClass: string;
-  };
-}
-
-interface AppointmentData {
-  hero: AppointmentHero;
-  visaOptions: string[];
-  form: AppointmentForm;
-}
 
 export default function AppointmentPage() {
   const [appointmentData, setAppointmentData] = useState<AppointmentData | null>(null);
@@ -256,28 +227,7 @@ export default function AppointmentPage() {
   return (
     <>
       {/* Breadcrumb-Wrapper Section Start */}
-      <section
-        className="breadcrumb-wrapper fix bg-cover"
-        style={{ backgroundImage: `url(${backgroundImage})` }}
-      >
-        <div className="shape">
-          <img src="/assets/img/inner-page/shape.png" alt="img" />
-        </div>
-        <div className="container">
-          <div className="page-heading">
-            <h1 className="breadcrumb-title">{hero.title}</h1>
-            <ul className="breadcrumb-list">
-              <li>
-                <a href="/">Home</a>
-              </li>
-              <li>
-                <i className="fa-solid fa-chevron-right"></i>
-              </li>
-              <li>{hero.title}</li>
-            </ul>
-          </div>
-        </div>
-      </section>
+      <Breadcrumb title={hero.title} current={hero.title} />
 
       {/* Appointment Section Start */}
       <section className="appointment-section section-padding fix">

app/appointment/types.ts

@@ -0,0 +1,30 @@
+export interface AppointmentHero {
+    title: string;
+    backgroundImage: string;
+    subtitle: string;
+    heading: string;
+    description: string;
+}
+
+export interface AppointmentForm {
+    heading: string;
+    fields: Array<{
+        name: string;
+        label: string;
+        type: string;
+        placeholder: string;
+        required: boolean;
+        colClass: string;
+    }>;
+    submitButton: {
+        text: string;
+        icon: string;
+        buttonClass: string;
+    };
+}
+
+export interface AppointmentData {
+    hero: AppointmentHero;
+    visaOptions: string[];
+    form: AppointmentForm;
+}