feat: add pricing page with API integration and dynamic rendering

app/contact/page.tsx

@@ -1,41 +1,8 @@
 "use client";
 
 import { useState, useEffect, FormEvent } from "react";
-
-interface ContactCard {
-  type: string;
-  title: string;
-  content: string[];
-  iconType: string;
-}
-
-interface ContactData {
-  hero: {
-    title: string;
-    backgroundImage: string;
-  };
-  contactCards: ContactCard[];
-  map: {
-    embedUrl: string;
-  };
-  form: {
-    heading: string;
-    description: string;
-    fields: {
-      name: string;
-      label: string;
-      type: string;
-      placeholder: string;
-      required: boolean;
-      colClass: string;
-    }[];
-    submitButton: {
-      text: string;
-      icon: string;
-      buttonClass: string;
-    };
-  };
-}
+import { ContactData } from "./types";
+import Breadcrumb from "../components/Breadcrumb";
 
 export default function ContactPage() {
   const [contactData, setContactData] = useState<ContactData | null>(null);
@@ -150,28 +117,7 @@ export default function ContactPage() {
   return (
     <>
       {/* Breadcrumb-Wrapper Section Start */}
-      <section
-        className="breadcrumb-wrapper fix bg-cover"
-        style={{ backgroundImage: `url(${hero.backgroundImage || "/assets/img/inner-page/breadcrumb.jpg"})` }}
-      >
-        <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>Contact Us</li>
-            </ul>
-          </div>
-        </div>
-      </section>
+      <Breadcrumb title={hero.title} current={hero.title} />
 
       {/* Contact Icon Section Start */}
       <section className="contact-us-section-3 section-padding fix">

app/contact/types.ts

@@ -0,0 +1,44 @@
+export interface ContactCard {
+    type: string;
+    title: string;
+    content: string[];
+    iconType: string;
+}
+
+export interface ContactHero {
+    title: string;
+    backgroundImage: string;
+}
+
+export interface ContactMap {
+    embedUrl: string;
+}
+
+export interface ContactFormField {
+    name: string;
+    label: string;
+    type: string;
+    placeholder: string;
+    required: boolean;
+    colClass: string;
+}
+
+export interface ContactSubmitButton {
+    text: string;
+    icon: string;
+    buttonClass: string;
+}
+
+export interface ContactForm {
+    heading: string;
+    description: string;
+    fields: ContactFormField[];
+    submitButton: ContactSubmitButton;
+}
+
+export interface ContactData {
+    hero: ContactHero;
+    contactCards: ContactCard[];
+    map: ContactMap;
+    form: ContactForm;
+}