commit 64af77101fac70e6611f4d7bda4c0c467349c283
Author: Husanjonazamov <azamovghusanboy08@gmail.com>
Date:   Tue Feb 24 12:52:49 2026 +0500

    classify web

diff --git a/.env b/.env
new file mode 100644
index 0000000..886ac39
--- /dev/null
+++ b/.env
@@ -0,0 +1,39 @@
+# Web Version (Do not Change)
+NEXT_PUBLIC_WEB_VERSION="2.10.1"
+
+
+# Admin panle url
+NEXT_PUBLIC_API_URL="https://eclassify.wrteam.me"
+
+
+# Website URL 
+NEXT_PUBLIC_WEB_URL="https://eclassifyweb.wrteam.me"
+
+# API ENDPOINT (Do not change)
+NEXT_PUBLIC_END_POINT="/api/"
+
+# Firebase config
+NEXT_PUBLIC_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+NEXT_PUBLIC_AUTH_DOMAIN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+NEXT_PUBLIC_PROJECT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+NEXT_PUBLIC_STORAGE_BUCKET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+NEXT_PUBLIC_MESSAGING_SENDER_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+NEXT_PUBLIC_APP_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+NEXT_PUBLIC_MEASUREMENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+
+# Vapid api key
+NEXT_PUBLIC_VAPID_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+
+# here you get default country list (https://developers.google.com/hotels/hotel-prices/dev-guide/country-codes)
+# enter in small case like (india :- in)
+#DEFAULT COUNTRY
+NEXT_PUBLIC_DEFAULT_COUNTRY=in
+NEXT_PUBLIC_SEO = true
+
+NEXT_PUBLIC_SEO_REVALIDATE_MINUTES = 60
+
+NEXT_PUBLIC_META_TITLE="eClassify - Buy & Sell Marketplace | Find Everything You Need"
+NEXT_PUBLIC_META_DESCRIPTION="Discover eClassify, your ultimate online marketplace for buying and selling a wide range of products. Enjoy a seamless shopping experience with diverse listings, secure transactions, and excellent customer support. Join eClassify today and start exploring!"
+NEXT_PUBLIC_META_kEYWORDS="buy and sell marketplace, online marketplace, eClassify, buy and sell online, online shopping, sell products online, buy products online, secure transactions, online listings, customer support, e-commerce, digital marketplace, shop online, sell online, online buying and selling"
+
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..be724ac
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+/public/sitemap.xml
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
\ No newline at end of file
diff --git a/.htaccess b/.htaccess
new file mode 100644
index 0000000..ecf77b7
--- /dev/null
+++ b/.htaccess
@@ -0,0 +1,15 @@
+<IfModule mod_rewrite.c>
+    RewriteEngine On
+    RewriteBase /
+    
+    RewriteRule ^/.well-known/acme-challenge/(.*) /.well-known/acme-challenge/$1 [L]
+
+    RewriteRule ^_next/(.*) /.next/$1 [L]
+     # Allow access to static files with specific extensions
+    RewriteCond %{REQUEST_URI} \.(js|css|svg|jpg|jpeg|png|gif|ico|woff2)$
+    RewriteRule ^ - [L]
+    
+    RewriteRule ^index.html http://127.0.0.1:8004/$1 [P]
+    RewriteRule ^index.php http://127.0.0.1:8004/$1 [P]
+    RewriteRule ^/?(.*)$ http://127.0.0.1:8004/$1 [P]
+</IfModule>
\ No newline at end of file
diff --git a/.well-known/apple-app-site-association b/.well-known/apple-app-site-association
new file mode 100644
index 0000000..43a771e
--- /dev/null
+++ b/.well-known/apple-app-site-association
@@ -0,0 +1,14 @@
+{
+  "applinks": {
+    "apps": [],
+    "details": [
+      {
+        "appID": "QA5UX5B4B6.com.eclassify.wrteam",
+        "paths": [
+          "/ad-details/*",
+      "/seller/*"
+        ]
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/.well-known/assetlinks.json b/.well-known/assetlinks.json
new file mode 100644
index 0000000..146c2a3
--- /dev/null
+++ b/.well-known/assetlinks.json
@@ -0,0 +1,26 @@
+[
+    {
+        "relation": [
+            "delegate_permission/common.handle_all_urls"
+        ],
+        "target": {
+            "namespace": "android_app",
+            "package_name": "com.eclassify.wrteam",
+            "sha256_cert_fingerprints": [
+                "B4:B3:AD:26:FA:94:07:B0:EA:CC:30:7E:65:B3:AB:14:B9:98:BB:AB:2F:2C:FF:81:73:9A:6C:22:DF:7C:8C:42"
+            ]
+        }
+    },
+    {
+        "relation": [
+            "delegate_permission/common.handle_all_urls"
+        ],
+        "target": {
+            "namespace": "android_app",
+            "package_name": "com.eclassify.wrteam",
+            "sha256_cert_fingerprints": [
+                "C8:7B:75:BD:A2:AF:6B:E2:93:50:AA:20:43:83:68:DE:AE:87:4B:1C:7A:B3:17:9E:CA:53:F9:BC:A7:9B:F2:39"
+            ]
+        }
+    }
+]
\ No newline at end of file
diff --git a/HOC/Checkauth.jsx b/HOC/Checkauth.jsx
new file mode 100644
index 0000000..5e250e4
--- /dev/null
+++ b/HOC/Checkauth.jsx
@@ -0,0 +1,59 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import Loader from "@/components/Common/Loader";
+import { usePathname } from "next/navigation";
+import { useNavigate } from "@/components/Common/useNavigate";
+
+const Checkauth = (WrappedComponent) => {
+  const Wrapper = (props) => {
+    const pathname = usePathname();
+    const { navigate } = useNavigate();
+    const user = useSelector((state) => state.UserSignup.data);
+    const [isAuthorized, setIsAuthorized] = useState(false);
+    const [authChecked, setAuthChecked] = useState(false);
+
+    useEffect(() => {
+      // List of routes that require authentication
+      const privateRoutes = [
+        "/profile",
+        "/ad-listing",
+        "/notifications",
+        "/chat",
+        "/user-subscription",
+        "/my-ads",
+        "/favorites",
+        "/transactions",
+        "/reviews",
+        "/edit-listing",
+        "/user-verification",
+        "/job-applications",
+      ];
+      const isPrivateRoute = privateRoutes.some(
+        (route) => pathname === route || pathname.startsWith(`${route}/`)
+      );
+
+      // If it's a private route and user is not authenticated
+      if (isPrivateRoute && !user) {
+        navigate("/");
+        return;
+      }
+
+      // If user is authenticated or it's not a private route
+      setIsAuthorized(true);
+      setAuthChecked(true);
+    }, [user, pathname]);
+
+    // Show loader until auth check completes
+    if (!authChecked) {
+      return <Loader />;
+    }
+
+    // Only render the component if user is authorized
+    return isAuthorized ? <WrappedComponent {...props} /> : null;
+  };
+
+  return Wrapper;
+};
+
+export default Checkauth;
diff --git a/api/AxiosInterceptors.jsx b/api/AxiosInterceptors.jsx
new file mode 100644
index 0000000..120d087
--- /dev/null
+++ b/api/AxiosInterceptors.jsx
@@ -0,0 +1,50 @@
+import { logoutSuccess } from "@/redux/reducer/authSlice";
+import { setIsUnauthorized } from "@/redux/reducer/globalStateSlice";
+import { store } from "@/redux/store";
+import axios from "axios";
+
+const Api = axios.create({
+  baseURL: `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}`,
+});
+
+let isUnauthorizedToastShown = false;
+
+Api.interceptors.request.use(function (config) {
+  let token = undefined;
+  let langCode = undefined;
+
+  if (typeof window !== "undefined") {
+    const state = store.getState();
+    token = state?.UserSignup?.data?.token;
+    langCode = state?.CurrentLanguage?.language?.code;
+  }
+
+  if (token) config.headers.authorization = `Bearer ${token}`;
+  if (langCode) config.headers["Content-Language"] = langCode;
+
+  return config;
+});
+
+// Add a response interceptor
+Api.interceptors.response.use(
+  function (response) {
+    return response;
+  },
+  function (error) {
+    if (error.response && error.response.status === 401) {
+      // Call the logout function if the status code is 401
+      logoutSuccess();
+      if (!isUnauthorizedToastShown) {
+        store.dispatch(setIsUnauthorized(true));
+        isUnauthorizedToastShown = true;
+        // Reset the flag after a certain period
+        setTimeout(() => {
+          isUnauthorizedToastShown = false;
+        }, 3000); // 3 seconds delay before allowing another toast
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default Api;
diff --git a/app/about-us/page.jsx b/app/about-us/page.jsx
new file mode 100644
index 0000000..b09f3d8
--- /dev/null
+++ b/app/about-us/page.jsx
@@ -0,0 +1,48 @@
+import AboutUs from "@/components/PagesComponent/StaticPages/AboutUs";
+import { SEO_REVALIDATE_SECONDS } from "@/lib/constants";
+
+export const dynamic = "force-dynamic";
+
+
+export const generateMetadata = async ({ searchParams }) => {
+  try {
+    if (process.env.NEXT_PUBLIC_SEO === "false") return;
+    const params = await searchParams;
+    const langCode = params?.lang || "en";
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}seo-settings?page=about-us`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+
+    const data = await res.json();
+    const aboutUs = data?.data?.[0];
+
+    return {
+      title: aboutUs?.translated_title || process.env.NEXT_PUBLIC_META_TITLE,
+      description:
+        aboutUs?.translated_description ||
+        process.env.NEXT_PUBLIC_META_DESCRIPTION,
+      openGraph: {
+        images: aboutUs?.image ? [aboutUs?.image] : [],
+      },
+      keywords:
+        aboutUs?.translated_keywords || process.env.NEXT_PUBLIC_META_kEYWORDS,
+    };
+  } catch (error) {
+    console.error("Error fetching MetaData:", error);
+    return null;
+  }
+};
+
+const AboutUsPage = () => {
+  return <AboutUs />;
+};
+
+export default AboutUsPage;
diff --git a/app/ad-details/[slug]/page.jsx b/app/ad-details/[slug]/page.jsx
new file mode 100644
index 0000000..f4b9b2e
--- /dev/null
+++ b/app/ad-details/[slug]/page.jsx
@@ -0,0 +1,104 @@
+import StructuredData from "@/components/Layout/StructuredData";
+import ProductDetail from "@/components/PagesComponent/ProductDetail/ProductDetails";
+import { SEO_REVALIDATE_SECONDS } from "@/lib/constants";
+import { generateKeywords } from "@/utils/generateKeywords";
+
+export const generateMetadata = async ({ params, searchParams }) => {
+  if (process.env.NEXT_PUBLIC_SEO === "false") return;
+  try {
+    const { slug } = await params;
+    const langCode = (await searchParams)?.lang || "en";
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}get-item?slug=${slug}`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+
+    const data = await res.json();
+    const item = data?.data?.data?.[0];
+    const title = item?.translated_item?.name;
+    const description = item?.translated_item?.description;
+    const keywords = generateKeywords(item?.translated_item?.description);
+    const image = item?.image;
+
+    return {
+      title: title || process.env.NEXT_PUBLIC_META_TITLE,
+      description: description || process.env.NEXT_PUBLIC_META_DESCRIPTION,
+      openGraph: {
+        images: image ? [image] : [],
+      },
+      keywords: keywords,
+    };
+  } catch (error) {
+    console.error("Error fetching MetaData:", error);
+    return null;
+  }
+};
+
+const getItemData = async (slug, langCode) => {
+  if (process.env.NEXT_PUBLIC_SEO === "false") return;
+  try {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}get-item?slug=${slug}`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+
+    const data = await res.json();
+    const item = data?.data?.data?.[0];
+    return item;
+  } catch (error) {
+    console.error("Error fetching item data:", error);
+    return null;
+  }
+};
+
+const ProductDetailPage = async ({ params, searchParams }) => {
+  const { slug } = await params;
+  const langCode = (await searchParams).lang || "en";
+  const product = await getItemData(slug, langCode);
+  const jsonLd = product
+    ? {
+        "@context": "https://schema.org",
+        "@type": "Product",
+        productID: product?.id,
+        name: product?.translated_item?.name,
+        description: product?.translated_item?.description,
+        image: product?.image,
+        url: `${process.env.NEXT_PUBLIC_WEB_URL}/ad-details/${product?.slug}`,
+        category: {
+          "@type": "Thing",
+          name: product?.category?.translated_name || "General Category", // Default category name
+        },
+        ...(product?.price && {
+          offers: {
+            "@type": "Offer",
+            price: product.price,
+            priceCurrency: "USD",
+          },
+        }),
+        countryOfOrigin: product?.translated_item?.country,
+      }
+    : null;
+
+  return (
+    <>
+      <StructuredData data={jsonLd} />
+      <ProductDetail slug={slug} />
+    </>
+  );
+};
+
+export default ProductDetailPage;
diff --git a/app/ad-listing/page.jsx b/app/ad-listing/page.jsx
new file mode 100644
index 0000000..d31b559
--- /dev/null
+++ b/app/ad-listing/page.jsx
@@ -0,0 +1,5 @@
+import AdsListing from "@/components/PagesComponent/AdsListing/AdsListing";
+const AdListingPage = () => {
+  return <AdsListing />;
+};
+export default AdListingPage;
diff --git a/app/ads/page.jsx b/app/ads/page.jsx
new file mode 100644
index 0000000..fb95673
--- /dev/null
+++ b/app/ads/page.jsx
@@ -0,0 +1,215 @@
+import StructuredData from "@/components/Layout/StructuredData";
+import Products from "@/components/PagesComponent/Ads/Ads";
+import { SEO_REVALIDATE_SECONDS } from "@/lib/constants";
+import { generateKeywords } from "@/utils/generateKeywords";
+
+export const dynamic = "force-dynamic";
+
+
+const buildIndexableParams = (searchParams) => {
+  const indexableFilters = [
+    "category",
+    "query",
+    "country",
+    "state",
+    "city",
+    "areaId",
+    "sortBy",
+    "min_price",
+    "max_price",
+    "date_posted",
+  ];
+
+  const params = new URLSearchParams();
+
+  const { country, state, city, areaId } = searchParams || {};
+
+  const locationPriority = areaId
+    ? "areaId"
+    : city
+      ? "city"
+      : state
+        ? "state"
+        : country
+          ? "country"
+          : null;
+
+  indexableFilters.forEach((key) => {
+    let value = searchParams[key];
+    if (value === undefined || value === "") return;
+
+    // 🧹 Skip non-selected location levels
+    if (["country", "state", "city", "areaId"].includes(key)) {
+      if (key !== locationPriority) return;
+    }
+
+    if (["areaId", "min_price", "max_price"].includes(key))
+      value = Number(value);
+    if (key === "category") params.append("category_slug", value);
+    else if (key === "query") params.append("search", value);
+    else if (key === "date_posted") params.append("posted_since", value);
+    else params.append(key, value);
+  });
+
+  return params.toString();
+};
+
+const buildCanonicalParams = (searchParams) => {
+  const params = new URLSearchParams();
+
+  const { category, query, lang } = searchParams || {};
+
+  if (category) params.append("category", category);
+  if (query) params.append("search", query);
+  // Add lang to canonical params for consistency with sitemap
+  if (lang) params.append("lang", lang);
+
+  return params.toString();
+};
+
+export const generateMetadata = async ({ searchParams }) => {
+  if (process.env.NEXT_PUBLIC_SEO === "false") return;
+
+  try {
+    const originalSearchParams = await searchParams;
+    const langCode = originalSearchParams?.lang || "en";
+    const slug = originalSearchParams?.category || ""; // change to your param name if needed
+
+    let title = process.env.NEXT_PUBLIC_META_TITLE;
+    let description = process.env.NEXT_PUBLIC_META_DESCRIPTION;
+    let keywords = process.env.NEXT_PUBLIC_META_kEYWORDS;
+    let image = "";
+
+    if (slug) {
+      // Fetch category-specific SEO
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}get-categories?slug=${slug}`,
+        {
+          headers: { "Content-Language": langCode || "en" },
+          next: {
+            revalidate: SEO_REVALIDATE_SECONDS,
+          },
+        }
+      );
+
+      const data = await response.json();
+      const selfCategory = data?.self_category;
+
+      title = selfCategory?.translated_name || title;
+      description = selfCategory?.translated_description || description;
+      keywords =
+        generateKeywords(selfCategory?.translated_description) || keywords;
+      image = selfCategory?.image || image;
+    } else {
+      // Fetch default ad listing SEO
+      const res = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}seo-settings?page=ad-listing`,
+        {
+          headers: { "Content-Language": langCode || "en" },
+          next: {
+            revalidate: SEO_REVALIDATE_SECONDS,
+          },
+        }
+      );
+      const data = await res.json();
+      const adListing = data?.data?.[0];
+
+      title = adListing?.translated_title || title;
+      description = adListing?.translated_description || description;
+      keywords = adListing?.translated_keywords || keywords;
+      image = adListing?.image || image;
+    }
+
+    const baseUrl = process.env.NEXT_PUBLIC_WEB_URL;
+    const paramsStr = buildCanonicalParams(originalSearchParams);
+    const canonicalUrl = `${baseUrl}/ads${paramsStr ? `?${paramsStr}` : ""}`;
+
+    return {
+      title,
+      description,
+      openGraph: {
+        images: image ? [image] : [],
+      },
+      keywords,
+      alternates: {
+        canonical: canonicalUrl,
+      },
+    };
+  } catch (error) {
+    console.error("Error fetching MetaData:", error);
+    return null;
+  }
+};
+
+const getAllItems = async (langCode, searchParams) => {
+  if (process.env.NEXT_PUBLIC_SEO === "false") return;
+
+  try {
+    const queryString = buildIndexableParams(searchParams)
+      ? buildIndexableParams(searchParams)
+      : "";
+    const url = `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT
+      }get-item?page=1${queryString ? `&${queryString}` : ""}`;
+
+    const res = await fetch(url, {
+      headers: {
+        "Content-Language": langCode || "en",
+      },
+      next: {
+        revalidate: SEO_REVALIDATE_SECONDS,
+      },
+    });
+
+    const data = await res.json();
+    return data?.data?.data || [];
+  } catch (error) {
+    console.error("Error fetching Product Items Data:", error);
+    return [];
+  }
+};
+
+const AdsPage = async ({ searchParams }) => {
+  const originalSearchParams = await searchParams;
+  const langCode = originalSearchParams?.lang || "en";
+  const AllItems = await getAllItems(langCode, originalSearchParams);
+
+  const jsonLd = AllItems
+    ? {
+      "@context": "https://schema.org",
+      "@type": "ItemList",
+      itemListElement: AllItems.map((product, index) => ({
+        "@type": "ListItem",
+        position: index + 1, // Position starts at 1
+        item: {
+          "@type": "Product",
+          productID: product?.id,
+          name: product?.translated_item?.name || "",
+          description: product?.translated_item?.description || "",
+          image: product?.image || "",
+          url: `${process.env.NEXT_PUBLIC_WEB_URL}/ad-details/${product?.slug}`,
+          category: {
+            "@type": "Thing",
+            name: product?.category?.translated_name || "",
+          },
+          offers: {
+            "@type": "Offer",
+            price: product.price || undefined,
+            priceCurrency: product?.price ? "USD" : undefined,
+            availability: product?.price
+              ? "https://schema.org/InStock"
+              : "https://schema.org/PreOrder",
+          },
+          countryOfOrigin: product?.translated_item?.country || "",
+        },
+      })),
+    }
+    : null;
+
+  return (
+    <>
+      <StructuredData data={jsonLd} />
+      <Products searchParams={originalSearchParams} />
+    </>
+  );
+};
+export default AdsPage;
diff --git a/app/blogs/[slug]/page.jsx b/app/blogs/[slug]/page.jsx
new file mode 100644
index 0000000..5e4a0ed
--- /dev/null
+++ b/app/blogs/[slug]/page.jsx
@@ -0,0 +1,119 @@
+import StructuredData from "@/components/Layout/StructuredData";
+import BlogDetailPage from "@/components/PagesComponent/BlogDetail/BlogDetailPage";
+import { SEO_REVALIDATE_SECONDS } from "@/lib/constants";
+
+const stripHtml = (html) => {
+  return html.replace(/<[^>]*>/g, ""); // Regular expression to remove HTML tags
+};
+
+// Function to format the date correctly (ISO 8601)
+const formatDate = (dateString) => {
+  // Remove microseconds and ensure it follows ISO 8601 format
+  const validDateString = dateString.slice(0, 19) + "Z"; // Remove microseconds and add 'Z' for UTC
+  return validDateString;
+};
+
+export const generateMetadata = async ({ params, searchParams }) => {
+  try {
+    if (process.env.NEXT_PUBLIC_SEO === "false") return;
+    const slugParams = await params;
+    const langParams = await searchParams;
+    const langCode = langParams?.lang || "en";
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}blogs?slug=${slugParams?.slug}`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch metadata");
+    }
+
+    const responseData = await response.json();
+    const data = responseData?.data?.data[0];
+
+    const plainTextDescription = data?.translated_description?.replace(
+      /<\/?[^>]+(>|$)/g,
+      ""
+    );
+
+    return {
+      title: data?.translated_title || process.env.NEXT_PUBLIC_META_TITLE,
+      description: plainTextDescription
+        ? plainTextDescription
+        : process.env.NEXT_PUBLIC_META_DESCRIPTION,
+      openGraph: {
+        images: data?.image ? [data?.image] : [],
+      },
+      keywords: data?.translated_tags || process.env.NEXT_PUBLIC_META_kEYWORDS,
+    };
+  } catch (error) {
+    console.error("Error fetching MetaData:", error);
+    return null;
+  }
+};
+
+const fetchSingleBlogItem = async (slug, langCode) => {
+  try {
+    if (process.env.NEXT_PUBLIC_SEO === "false") return;
+    const url = `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}blogs?slug=${slug}`;
+    const response = await fetch(url, {
+      headers: {
+        "Content-Language": langCode || "en",
+      },
+      next: {
+        revalidate: SEO_REVALIDATE_SECONDS,
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch blog data");
+    }
+
+    const responseData = await response.json();
+    return responseData?.data?.data[0] || [];
+  } catch (error) {
+    console.error("Error fetching Blog Items Data:", error);
+    return [];
+  }
+};
+
+const BlogPage = async ({ params, searchParams }) => {
+  const { slug } = await params;
+  const langCode = (await searchParams).lang || "en";
+  const singleBlog = await fetchSingleBlogItem(slug, langCode);
+
+  const jsonLd = singleBlog
+    ? {
+        "@context": "https://schema.org",
+        "@type": "BlogPosting",
+        headline: singleBlog?.translated_title,
+        description: singleBlog?.translated_description
+          ? stripHtml(singleBlog.translated_description)
+          : "No description available", // Strip HTML from description
+        url: `${process.env.NEXT_PUBLIC_WEB_URL}/blogs/${singleBlog?.slug}`,
+        image: singleBlog?.image,
+        datePublished: singleBlog?.created_at
+          ? formatDate(singleBlog.created_at)
+          : "", // Format date to ISO 8601
+        keywords: singleBlog?.translated_tags
+          ? singleBlog.translated_tags.join(", ")
+          : "", // Adding tags as keywords
+      }
+    : null;
+
+  return (
+    <>
+      <StructuredData data={jsonLd} />
+      <BlogDetailPage slug={slug} />
+    </>
+  );
+};
+
+export default BlogPage;
diff --git a/app/blogs/page.jsx b/app/blogs/page.jsx
new file mode 100644
index 0000000..7f582f3
--- /dev/null
+++ b/app/blogs/page.jsx
@@ -0,0 +1,123 @@
+import StructuredData from "@/components/Layout/StructuredData";
+import Blogs from "@/components/PagesComponent/Blogs/Blogs";
+import { SEO_REVALIDATE_SECONDS } from "@/lib/constants";
+
+export const dynamic = "force-dynamic";
+
+export const generateMetadata = async ({ searchParams }) => {
+  try {
+    if (process.env.NEXT_PUBLIC_SEO === "false") return;
+    const params = await searchParams;
+    const langCode = params?.lang || "en";
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}seo-settings?page=blogs`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch blogs metadata");
+    }
+    const data = await response.json();
+    const blogs = data?.data[0];
+    return {
+      title: blogs?.translated_title || process.env.NEXT_PUBLIC_META_TITLE,
+      description:
+        blogs?.translated_description ||
+        process.env.NEXT_PUBLIC_META_DESCRIPTION,
+      openGraph: {
+        images: blogs?.image ? [blogs?.image] : [],
+      },
+      keywords:
+        blogs?.translated_keywords || process.env.NEXT_PUBLIC_META_kEYWORDS,
+    };
+  } catch (error) {
+    console.error("Error fetching MetaData:", error);
+    return null;
+  }
+};
+
+const stripHtml = (html) => {
+  return html.replace(/<[^>]*>/g, ""); // Regular expression to remove HTML tags
+};
+
+// Function to format the date correctly (ISO 8601)
+const formatDate = (dateString) => {
+  // Remove microseconds and ensure it follows ISO 8601 format
+  const validDateString = dateString.slice(0, 19) + "Z"; // Remove microseconds and add 'Z' for UTC
+  return validDateString;
+};
+
+const fetchBlogItems = async (langCode, tag) => {
+  try {
+    if (process.env.NEXT_PUBLIC_SEO === "false") return;
+    let url = `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}blogs`;
+
+    if (tag) {
+      url += `?tag=${encodeURIComponent(tag)}`;
+    }
+
+    const response = await fetch(url, {
+      headers: {
+        "Content-Language": langCode || "en",
+      },
+      next: {
+        revalidate: SEO_REVALIDATE_SECONDS,
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch blogs json-ld data");
+    }
+    const data = await response.json();
+    return data?.data?.data || [];
+  } catch (error) {
+    console.error("Error fetching Blog Items Data:", error);
+    return [];
+  }
+};
+
+const BlogsPage = async ({ searchParams }) => {
+  const params = await searchParams;
+  const langCode = params?.lang || "en";
+  const tag = params?.tag || null;
+  const blogItems = await fetchBlogItems(langCode, tag);
+
+  const jsonLd = blogItems
+    ? {
+        "@context": "https://schema.org",
+        "@type": "ItemList",
+        itemListElement: blogItems.map((blog, index) => ({
+          "@type": "ListItem",
+          position: index + 1,
+          item: {
+            "@type": "BlogPosting",
+            headline: blog?.translated_title,
+            description: blog?.translated_description
+              ? stripHtml(blog.translated_description)
+              : "No description available", // Strip HTML from description
+            url: `${process.env.NEXT_PUBLIC_WEB_URL}/blogs/${blog?.slug}`,
+            image: blog?.image,
+            datePublished: blog?.created_at ? formatDate(blog.created_at) : "", // Format date to ISO 8601
+            keywords: blog?.translated_tags
+              ? blog.translated_tags.join(", ")
+              : "", // Adding tags as keywords
+          },
+        })),
+      }
+    : null;
+  return (
+    <>
+      <StructuredData data={jsonLd} />
+      <Blogs />
+    </>
+  );
+};
+
+export default BlogsPage;
diff --git a/app/chat/page.jsx b/app/chat/page.jsx
new file mode 100644
index 0000000..79fdca2
--- /dev/null
+++ b/app/chat/page.jsx
@@ -0,0 +1,7 @@
+import ProfileDashboard from "@/components/PagesComponent/ProfileDashboard/ProfileDashboard";
+
+const ChatPage = () => {
+  return <ProfileDashboard />;
+};
+
+export default ChatPage;
diff --git a/app/contact-us/page.jsx b/app/contact-us/page.jsx
new file mode 100644
index 0000000..53600f3
--- /dev/null
+++ b/app/contact-us/page.jsx
@@ -0,0 +1,46 @@
+import ContactUs from "@/components/PagesComponent/Contact/ContactUs";
+import { SEO_REVALIDATE_SECONDS } from "@/lib/constants";
+
+export const dynamic = "force-dynamic";
+
+
+export const generateMetadata = async ({ searchParams }) => {
+  try {
+    if (process.env.NEXT_PUBLIC_SEO === "false") return;
+    const params = await searchParams;
+    const langCode = params?.lang || "en";
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}seo-settings?page=contact-us`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+    const data = await res.json();
+    const contactUs = data?.data?.[0];
+    return {
+      title: contactUs?.translated_title || process.env.NEXT_PUBLIC_META_TITLE,
+      description:
+        contactUs?.translated_description ||
+        process.env.NEXT_PUBLIC_META_DESCRIPTION,
+      openGraph: {
+        images: contactUs?.image ? [contactUs?.image] : [],
+      },
+      keywords:
+        contactUs?.translated_keywords || process.env.NEXT_PUBLIC_META_kEYWORDS,
+    };
+  } catch (error) {
+    console.error("Error fetching MetaData:", error);
+    return null;
+  }
+};
+
+const ContactUsPage = () => {
+  return <ContactUs />;
+};
+
+export default ContactUsPage;
diff --git a/app/edit-listing/[id]/page.jsx b/app/edit-listing/[id]/page.jsx
new file mode 100644
index 0000000..f52c8a4
--- /dev/null
+++ b/app/edit-listing/[id]/page.jsx
@@ -0,0 +1,9 @@
+import EditListing from "@/components/PagesComponent/EditListing/EditListing";
+
+const EditListingPage = async (props) => {
+  const params = await props.params;
+  const id = await params.id;
+  return <EditListing id={id} />;
+};
+
+export default EditListingPage;
diff --git a/app/error.jsx b/app/error.jsx
new file mode 100644
index 0000000..166e4eb
--- /dev/null
+++ b/app/error.jsx
@@ -0,0 +1,37 @@
+"use client"; // Error components must be Client Components
+import { useEffect } from "react";
+import somthingWrong from "../public/assets/something_went_wrong.svg";
+import { t } from "@/utils";
+import { Button } from "@/components/ui/button";
+import CustomImage from "@/components/Common/CustomImage";
+import { useNavigate } from "@/components/Common/useNavigate";
+
+export default function Error({ error }) {
+  const { navigate } = useNavigate();
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+  const navigateHome = () => {
+    navigate("/");
+  };
+  return (
+    <div className="flex flex-col gap-4 items-center justify-center h-screen">
+      <CustomImage
+        src={somthingWrong}
+        alt="something went wrong"
+        width={200}
+        height={200}
+      />
+      <h3 className="text-2xl font-semibold text-primary text-center">
+        {t("somthingWentWrong")}
+      </h3>
+      <div className="flex flex-col gap-2">
+        <span>{t("tryLater")}</span>
+        <Button variant="outline" onClick={navigateHome}>
+          {t("home")}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/faqs/page.jsx b/app/faqs/page.jsx
new file mode 100644
index 0000000..8b8ae60
--- /dev/null
+++ b/app/faqs/page.jsx
@@ -0,0 +1,45 @@
+import FaqsPage from "@/components/PagesComponent/Faq/FaqsPage";
+import { SEO_REVALIDATE_SECONDS } from "@/lib/constants";
+
+export const dynamic = "force-dynamic";
+
+export const generateMetadata = async ({ searchParams }) => {
+  try {
+    if (process.env.NEXT_PUBLIC_SEO === "false") return;
+    const params = await searchParams;
+    const langCode = params?.lang || "en";
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}seo-settings?page=faqs`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+    const data = await response.json();
+    const faqs = data?.data?.[0];
+    return {
+      title: faqs?.translated_title || process.env.NEXT_PUBLIC_META_TITLE,
+      description:
+        faqs?.translated_description ||
+        process.env.NEXT_PUBLIC_META_DESCRIPTION,
+      openGraph: {
+        images: faqs?.image ? [faqs?.image] : [],
+      },
+      keywords:
+        faqs?.translated_keywords || process.env.NEXT_PUBLIC_META_kEYWORDS,
+    };
+  } catch (error) {
+    console.error("Error fetching MetaData:", error);
+    return null;
+  }
+};
+
+const page = () => {
+  return <FaqsPage />;
+};
+
+export default page;
diff --git a/app/favorites/page.jsx b/app/favorites/page.jsx
new file mode 100644
index 0000000..b57c863
--- /dev/null
+++ b/app/favorites/page.jsx
@@ -0,0 +1,9 @@
+import ProfileDashboard from "@/components/PagesComponent/ProfileDashboard/ProfileDashboard"
+
+export default function FavoritesPage() {
+    return (
+        <>
+            <ProfileDashboard />
+        </>
+    )
+}
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..2626168
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,274 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: #ffffff;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: #00b2ca;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: #f6f5fa;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: #dc3545;
+    --destructive-foreground: 0 0% 98%;
+    --border: #d3d3d3;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: #00b2ca;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --font-color: #ffffff;
+    --light-font-color: #595b6c;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-[background] text-foreground;
+  }
+}
+
+@layer utilities {
+
+
+  .landingSecHeader {
+    @apply text-center text-4xl lg:text-5xl font-light;
+  }
+
+  .outlinedSecHead {
+    @apply p-3 px-4 border border-primary text-primary rounded-md font-semibold text-center;
+  }
+
+  .storeIcons {
+    @apply max-w-max w-full sm:w-[170px] md:w-[215px] lg:w-[235px] h-auto;
+  }
+
+  .footerSocialLinks {
+    @apply flex items-center justify-center w-[40px] h-[40px] rounded-md p-2 transition-all duration-500 bg-white/15;
+  }
+
+  .footerContactIcons {
+    @apply flex items-center justify-center min-w-[48px] w-[48px] h-[48px] rounded-md p-[10px] transition-all duration-500 bg-white/15;
+  }
+
+
+  .footerSocialLinks:hover,
+  .footerContactIcons:hover {
+    background-color: var(--primary-color);
+    box-shadow: 0px 8px 28px 0px var(--primary-color);
+  }
+
+  .footerLabel {
+    @apply text-white opacity-65 text-sm transition-colors;
+  }
+
+  .footerLabel:hover {
+    color: var(--primary-color);
+  }
+
+  .space-between {
+    @apply flex items-center justify-between;
+  }
+
+  .labelInputCont {
+    @apply flex flex-col gap-2;
+  }
+
+  .requiredInputLabel {
+    @apply after:content-['*'] after:text-destructive;
+  }
+
+  .loader-container-otp {
+    @apply flex items-center justify-center h-7 py-1 px-2;
+  }
+
+  .loader-otp {
+    @apply border-4 border-t-[var(--primary-color)] border-[#f3f3f3] rounded-full w-5 h-5 animate-spin;
+  }
+
+  .profileActiveTab {
+    @apply py-2 px-4 bg-primary rounded-full text-white w-max
+  }
+
+  .sectionTitle {
+    @apply text-xl sm:text-2xl font-medium capitalize
+  }
+
+  .loader {
+    @apply w-full h-full relative flex items-center justify-center m-auto
+  }
+
+  .text_ellipsis {
+    @apply overflow-hidden text-ellipsis whitespace-nowrap
+  }
+
+  .scrollbar-none::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge, and Firefox */
+  .scrollbar-none {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+  }
+}
+
+/* .place_search div {
+  width: 100%;
+} */
+
+.formWrapper .react-tel-input .special-label {
+  display: none !important;
+}
+
+.react-tel-input .form-control {
+  width: 100% !important;
+  height: 40px !important;
+  border: 1px solid lightgray !important;
+  outline: none !important;
+  border-radius: 4px !important;
+}
+
+.react-tel-input .flag-dropdown {
+  background-color: transparent !important;
+}
+
+/* Update focus styles to match shadcn Input */
+.react-tel-input .form-control:focus,
+.react-tel-input .form-control:focus-visible {
+  outline: none !important;
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary) !important;
+  border-color: transparent !important;
+}
+
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+
+::-webkit-scrollbar {
+  width: 5px !important;
+  width: 5px !important;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  border-radius: 10px !important;
+  background-color: lightgray;
+  border-radius: 10px !important;
+  background-color: lightgray;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: var(--primary) !important;
+  border-radius: 10px !important;
+  background: var(--primary) !important;
+  border-radius: 10px !important;
+}
+
+
+/* RTL overrides for react-phone-input-2*/
+[dir='rtl'] .react-tel-input .form-control {
+  padding-left: inherit;
+  padding-right: 48px;
+}
+
+[dir='rtl'] .react-tel-input .selected-flag {
+  padding: 0 8px 0 0;
+}
+
+[dir='rtl'] .react-tel-input .selected-flag .arrow {
+  left: auto;
+  right: 20px;
+}
+
+[dir=rtl] input[type=tel i] {
+  direction: rtl;
+}
+
+.perspective-1000 {
+  perspective: 1000px;
+}
+
+.transform-style-preserve-3d {
+  transform-style: preserve-3d;
+}
+
+.backface-hidden {
+  backface-visibility: hidden;
+}
+
+.rotate-y-180 {
+  transform: rotateY(180deg);
+}
\ No newline at end of file
diff --git a/app/job-applications/page.jsx b/app/job-applications/page.jsx
new file mode 100644
index 0000000..c2fd759
--- /dev/null
+++ b/app/job-applications/page.jsx
@@ -0,0 +1,7 @@
+import ProfileDashboard from "@/components/PagesComponent/ProfileDashboard/ProfileDashboard";
+
+const JobApplicationsPage = () => {
+  return <ProfileDashboard />;
+};
+
+export default JobApplicationsPage;
diff --git a/app/landing/page.jsx b/app/landing/page.jsx
new file mode 100644
index 0000000..63f60ad
--- /dev/null
+++ b/app/landing/page.jsx
@@ -0,0 +1,57 @@
+import Layout from "@/components/Layout/Layout";
+import AnythingYouWant from "@/components/PagesComponent/LandingPage/AnythingYouWant";
+import OurBlogs from "@/components/PagesComponent/LandingPage/OurBlogs";
+import QuickAnswers from "@/components/PagesComponent/LandingPage/QuickAnswers";
+import WorkProcess from "@/components/PagesComponent/LandingPage/WorkProcess";
+import { SEO_REVALIDATE_SECONDS } from "@/lib/constants";
+
+export const dynamic = "force-dynamic";
+
+export const generateMetadata = async ({ searchParams }) => {
+  try {
+    if (process.env.NEXT_PUBLIC_SEO === "false") return;
+    const params = await searchParams;
+    const langCode = params?.lang || "en";
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}seo-settings?page=landing`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+    const data = await res.json();
+    const landing = data?.data?.[0];
+
+    return {
+      title: landing?.translated_title || process.env.NEXT_PUBLIC_META_TITLE,
+      description:
+        landing?.translated_description ||
+        process.env.NEXT_PUBLIC_META_DESCRIPTION,
+      openGraph: {
+        images: landing?.image ? [landing?.image] : [],
+      },
+      keywords:
+        landing?.translated_keywords || process.env.NEXT_PUBLIC_META_kEYWORDS,
+    };
+  } catch (error) {
+    console.error("Error fetching MetaData:", error);
+    return null;
+  }
+};
+
+const LandingPage = () => {
+  return (
+    <Layout>
+      <AnythingYouWant />
+      <WorkProcess />
+      <OurBlogs />
+      <QuickAnswers />
+    </Layout>
+  );
+};
+
+export default LandingPage;
diff --git a/app/layout.js b/app/layout.js
new file mode 100644
index 0000000..8d83ea7
--- /dev/null
+++ b/app/layout.js
@@ -0,0 +1,46 @@
+import { Manrope } from "next/font/google";
+import "./globals.css";
+import { Providers } from "@/redux/store/providers";
+import { Toaster } from "@/components/ui/sonner";
+// import Script from "next/script";
+
+const manrope = Manrope({
+  weight: ["200", "300", "400", "500", "600", "700", "800"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
+export const generateMetadata = () => {
+  return {
+    title: process.env.NEXT_PUBLIC_META_TITLE,
+    description: process.env.NEXT_PUBLIC_META_DESCRIPTION,
+    keywords: process.env.NEXT_PUBLIC_META_kEYWORDS,
+    openGraph: {
+      title: process.env.NEXT_PUBLIC_META_TITLE,
+      description: process.env.NEXT_PUBLIC_META_DESCRIPTION,
+      keywords: process.env.NEXT_PUBLIC_META_kEYWORDS,
+    },
+  };
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html
+      lang="en"
+      web-version={process.env.NEXT_PUBLIC_WEB_VERSION}
+      className="scroll-smooth"
+    >
+      <head>
+        {/* <Script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxx"
+          crossOrigin="anonymous" strategy="afterInteractive" /> */}
+      </head>
+      <body className={`${manrope.className} !pointer-events-auto`}>
+        <Providers>
+          {children}
+          <Toaster position="top-center" />
+        </Providers>
+        {/* <div id="recaptcha-container"></div> */}
+      </body>
+    </html>
+  );
+}
diff --git a/app/loading.jsx b/app/loading.jsx
new file mode 100644
index 0000000..be612f2
--- /dev/null
+++ b/app/loading.jsx
@@ -0,0 +1,10 @@
+import Loader from "@/components/Common/Loader"
+
+
+const Loading = () => {
+    return (
+        <Loader />
+    )
+}
+
+export default Loading
\ No newline at end of file
diff --git a/app/middleware.js b/app/middleware.js
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/app/middleware.js
@@ -0,0 +1 @@
+
diff --git a/app/my-ads/page.jsx b/app/my-ads/page.jsx
new file mode 100644
index 0000000..189f949
--- /dev/null
+++ b/app/my-ads/page.jsx
@@ -0,0 +1,5 @@
+import ProfileDashboard from "@/components/PagesComponent/ProfileDashboard/ProfileDashboard";
+const MyAdsPage = () => {
+  return <ProfileDashboard />;
+};
+export default MyAdsPage;
diff --git a/app/my-listing/[slug]/page.jsx b/app/my-listing/[slug]/page.jsx
new file mode 100644
index 0000000..326fbac
--- /dev/null
+++ b/app/my-listing/[slug]/page.jsx
@@ -0,0 +1,8 @@
+import ProductDetail from "@/components/PagesComponent/ProductDetail/ProductDetails";
+
+const MyListingPage = async ({ params }) => {
+  const { slug } = await params;
+  return <ProductDetail slug={slug} />;
+};
+
+export default MyListingPage;
diff --git a/app/not-found.jsx b/app/not-found.jsx
new file mode 100644
index 0000000..6b02a7e
--- /dev/null
+++ b/app/not-found.jsx
@@ -0,0 +1,22 @@
+"use client";
+import CustomImage from "@/components/Common/CustomImage";
+import notFoundImg from "@/public/assets/no_data_found_illustrator.svg";
+import { t } from "@/utils";
+import Link from "next/link";
+import { FaArrowLeft } from "react-icons/fa";
+
+const NotFound = () => {
+  return (
+    <div className="flex flex-col items-center justify-center h-screen gap-3">
+      <CustomImage src={notFoundImg} width={200} height={200} alt="not found" />
+      <h3 className="text-2xl font-semibold text-primary text-center">
+        {t("pageNotFound")}
+      </h3>
+      <Link href="/" className="flex items-center gap-2">
+        <FaArrowLeft /> {t("back")}
+      </Link>
+    </div>
+  );
+};
+
+export default NotFound;
diff --git a/app/notifications/page.jsx b/app/notifications/page.jsx
new file mode 100644
index 0000000..d1ca764
--- /dev/null
+++ b/app/notifications/page.jsx
@@ -0,0 +1,7 @@
+import ProfileDashboard from "@/components/PagesComponent/ProfileDashboard/ProfileDashboard";
+
+const NotificationsPage = () => {
+  return <ProfileDashboard />;
+};
+
+export default NotificationsPage;
diff --git a/app/page.js b/app/page.js
new file mode 100644
index 0000000..4594b2c
--- /dev/null
+++ b/app/page.js
@@ -0,0 +1,202 @@
+import Layout from "@/components/Layout/Layout";
+import StructuredData from "@/components/Layout/StructuredData";
+import Home from "@/components/PagesComponent/Home/Home";
+import { SEO_REVALIDATE_SECONDS } from "@/lib/constants";
+
+export const generateMetadata = async ({ searchParams }) => {
+  if (process.env.NEXT_PUBLIC_SEO === "false") return;
+  const langCode = (await searchParams)?.lang;
+
+  try {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}seo-settings?page=home`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+    const data = await res.json();
+    const home = data?.data?.[0];
+
+    return {
+      title: home?.translated_title || process.env.NEXT_PUBLIC_META_TITLE,
+      description:
+        home?.translated_description ||
+        process.env.NEXT_PUBLIC_META_DESCRIPTION,
+      openGraph: {
+        images: home?.image ? [home?.image] : [],
+      },
+      keywords:
+        home?.translated_keywords || process.env.NEXT_PUBLIC_META_kEYWORDS,
+    };
+  } catch (error) {
+    console.error("Error fetching MetaData:", error);
+    return null;
+  }
+};
+
+const fetchCategories = async (langCode) => {
+  if (process.env.NEXT_PUBLIC_SEO === "false") return [];
+  try {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}get-categories?page=1`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+    const data = await res.json();
+    return data?.data?.data || [];
+  } catch (error) {
+    console.error("Error fetching Categories Data:", error);
+    return [];
+  }
+};
+
+const fetchProductItems = async (langCode) => {
+  if (process.env.NEXT_PUBLIC_SEO === "false") return [];
+  try {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}get-item?page=1`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+    const data = await res.json();
+    return data?.data?.data || [];
+  } catch (error) {
+    console.error("Error fetching Product Items Data:", error);
+    return [];
+  }
+};
+
+const fetchFeaturedSections = async (langCode) => {
+  if (process.env.NEXT_PUBLIC_SEO === "false") return [];
+  try {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}get-featured-section`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+
+    const data = await res.json();
+    return data?.data || [];
+  } catch (error) {
+    console.error("Error fetching Featured sections Data:", error);
+    return [];
+  }
+};
+
+export default async function HomePage({ searchParams }) {
+  const langCode = (await searchParams)?.lang;
+  const [categoriesData, productItemsData, featuredSectionsData] =
+    await Promise.all([
+      fetchCategories(langCode),
+      fetchProductItems(langCode),
+      fetchFeaturedSections(langCode),
+    ]);
+
+  let jsonLd = null;
+
+  if (process.env.NEXT_PUBLIC_SEO !== "false") {
+    const existingSlugs = new Set(
+      productItemsData.map((product) => product.slug)
+    );
+
+    let featuredItems = [];
+    featuredSectionsData.forEach((section) => {
+      section.section_data.slice(0, 4).forEach((item) => {
+        if (!existingSlugs.has(item.slug)) {
+          featuredItems.push(item);
+          existingSlugs.add(item.slug); // Mark this item as included
+        }
+      });
+    });
+
+    jsonLd = {
+      "@context": "https://schema.org",
+      "@type": "ItemList",
+      itemListElement: [
+        ...categoriesData.map((category, index) => ({
+          "@type": "ListItem",
+          position: index + 1,
+          item: {
+            "@type": "Thing", // No "Category" type in Schema.org
+            name: category?.translated_name,
+            url: `${process.env.NEXT_PUBLIC_WEB_URL}/ads?category=${category?.slug}`,
+          },
+        })),
+        ...productItemsData.map((product, index) => ({
+          "@type": "ListItem",
+          position: categoriesData?.length + index + 1, // Ensure unique positions
+          item: {
+            "@type": "Product",
+            name: product?.translated_item?.name,
+            productID: product?.id,
+            description: product?.translated_item?.description,
+            image: product?.image,
+            url: `${process.env.NEXT_PUBLIC_WEB_URL}/ad-details/${product?.slug}`,
+            category: product?.category?.translated_name,
+            ...(product?.price && {
+              offers: {
+                "@type": "Offer",
+                price: product?.price,
+                priceCurrency: "USD",
+              },
+            }),
+            countryOfOrigin: product?.translated_item?.country,
+          },
+        })),
+        ...featuredItems.map((item, index) => ({
+          "@type": "ListItem",
+          position: categoriesData.length + productItemsData.length + index + 1, // Ensure unique positions
+          item: {
+            "@type": "Product", // Assuming items from featured sections are products
+            name: item?.translated_item?.name,
+            productID: item?.id,
+            description: item?.translated_item?.description,
+            image: item?.image,
+            url: `${process.env.NEXT_PUBLIC_WEB_URL}/ad-details/${item?.slug}`,
+            category: item?.category?.translated_name,
+            ...(item?.price && {
+              offers: {
+                "@type": "Offer",
+                price: item?.price,
+                priceCurrency: "USD",
+              },
+            }),
+            countryOfOrigin: item?.translated_item?.country,
+          },
+        })),
+      ],
+    };
+  }
+
+  return (
+    <>
+      {jsonLd && <StructuredData data={jsonLd} />}
+      <Layout>
+        <Home productItemsData={productItemsData} />
+      </Layout>
+    </>
+  );
+}
diff --git a/app/privacy-policy/page.jsx b/app/privacy-policy/page.jsx
new file mode 100644
index 0000000..a260f91
--- /dev/null
+++ b/app/privacy-policy/page.jsx
@@ -0,0 +1,47 @@
+import PrivacyPolicy from "@/components/PagesComponent/StaticPages/PrivacyPolicy";
+import { SEO_REVALIDATE_SECONDS } from "@/lib/constants";
+
+export const dynamic = "force-dynamic";
+
+export const generateMetadata = async ({ searchParams }) => {
+  try {
+    if (process.env.NEXT_PUBLIC_SEO === "false") return;
+    const params = await searchParams;
+    const langCode = params?.lang || "en";
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}seo-settings?page=privacy-policy`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+    const data = await res.json();
+    const privacyPolicy = data?.data?.[0];
+
+    return {
+      title:
+        privacyPolicy?.translated_title || process.env.NEXT_PUBLIC_META_TITLE,
+      description:
+        privacyPolicy?.translated_description ||
+        process.env.NEXT_PUBLIC_META_DESCRIPTION,
+      openGraph: {
+        images: privacyPolicy?.image ? [privacyPolicy?.image] : [],
+      },
+      keywords:
+        privacyPolicy?.translated_keywords ||
+        process.env.NEXT_PUBLIC_META_kEYWORDS,
+    };
+  } catch (error) {
+    console.error("Error fetching MetaData:", error);
+    return null;
+  }
+};
+
+const PrivacyPolicyPage = () => {
+  return <PrivacyPolicy />;
+};
+export default PrivacyPolicyPage;
diff --git a/app/profile/page.jsx b/app/profile/page.jsx
new file mode 100644
index 0000000..82e1298
--- /dev/null
+++ b/app/profile/page.jsx
@@ -0,0 +1,7 @@
+import ProfileDashboard from "@/components/PagesComponent/ProfileDashboard/ProfileDashboard";
+
+const ProfilePage = () => {
+  return <ProfileDashboard />;
+};
+
+export default ProfilePage;
diff --git a/app/refund-policy/page.jsx b/app/refund-policy/page.jsx
new file mode 100644
index 0000000..fa1df81
--- /dev/null
+++ b/app/refund-policy/page.jsx
@@ -0,0 +1,47 @@
+import RefundPolicy from "@/components/PagesComponent/StaticPages/RefundPolicy";
+import { SEO_REVALIDATE_SECONDS } from "@/lib/constants";
+
+export const dynamic = "force-dynamic";
+
+export const generateMetadata = async ({ searchParams }) => {
+  try {
+    if (process.env.NEXT_PUBLIC_SEO === "false") return;
+    const params = await searchParams;
+    const langCode = params?.lang || "en";
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}seo-settings?page=refund-policy`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+    const data = await res.json();
+    const privacyPolicy = data?.data?.[0];
+
+    return {
+      title:
+        privacyPolicy?.translated_title || process.env.NEXT_PUBLIC_META_TITLE,
+      description:
+        privacyPolicy?.translated_description ||
+        process.env.NEXT_PUBLIC_META_DESCRIPTION,
+      openGraph: {
+        images: privacyPolicy?.image ? [privacyPolicy?.image] : [],
+      },
+      keywords:
+        privacyPolicy?.translated_keywords ||
+        process.env.NEXT_PUBLIC_META_kEYWORDS,
+    };
+  } catch (error) {
+    console.error("Error fetching MetaData:", error);
+    return null;
+  }
+};
+
+const RefundPolicyPage = () => {
+  return <RefundPolicy />;
+};
+export default RefundPolicyPage;
diff --git a/app/reviews/page.jsx b/app/reviews/page.jsx
new file mode 100644
index 0000000..ff307c7
--- /dev/null
+++ b/app/reviews/page.jsx
@@ -0,0 +1,7 @@
+import ProfileDashboard from "@/components/PagesComponent/ProfileDashboard/ProfileDashboard";
+
+const ReviewsPage = () => {
+  return <ProfileDashboard />;
+};
+
+export default ReviewsPage;
diff --git a/app/seller/[id]/page.jsx b/app/seller/[id]/page.jsx
new file mode 100644
index 0000000..8bb4bc5
--- /dev/null
+++ b/app/seller/[id]/page.jsx
@@ -0,0 +1,98 @@
+import StructuredData from "@/components/Layout/StructuredData";
+import Seller from "@/components/PagesComponent/Seller/Seller";
+import { SEO_REVALIDATE_SECONDS } from "@/lib/constants";
+
+export const generateMetadata = async ({ params }) => {
+  try {
+    if (process.env.NEXT_PUBLIC_SEO === "false") return;
+    const { id } = await params;
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}get-seller?id=${id}`,
+      {
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+    const data = await res.json();
+    const seller = data?.data?.seller;
+    const title = seller?.name;
+    const image = seller?.profile;
+    return {
+      title: title ? title : process.env.NEXT_PUBLIC_META_TITLE,
+      description: process.env.NEXT_PUBLIC_META_DESCRIPTION,
+      openGraph: {
+        images: image ? [image] : [],
+      },
+      keywords: process.env.NEXT_PUBLIC_META_kEYWORDS,
+    };
+  } catch (error) {
+    console.error("Error fetching MetaData:", error);
+    return null;
+  }
+};
+const getSellerItems = async (id, langCode) => {
+  try {
+    if (process.env.NEXT_PUBLIC_SEO === "false") return;
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}get-item?page=1&user_id=${id}`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+    const data = await res.json();
+    return data?.data?.data || [];
+  } catch (error) {
+    console.error("Error fetching Product Items Data:", error);
+    return [];
+  }
+};
+
+const SellerPage = async ({ params, searchParams }) => {
+  const { id } = await params;
+  const originalSearchParams = await searchParams;
+  const langCode = originalSearchParams?.lang || "en";
+  const sellerItems = await getSellerItems(id, langCode);
+  const jsonLd = sellerItems
+    ? {
+        "@context": "https://schema.org",
+        "@type": "ItemList",
+        itemListElement: sellerItems?.map((product, index) => ({
+          "@type": "ListItem",
+          position: index + 1, // Position starts at 1
+          item: {
+            "@type": "Product",
+            productID: product?.id,
+            name: product?.translated_item?.name,
+            description: product?.translated_item?.description,
+            image: product?.image,
+            url: `${process.env.NEXT_PUBLIC_WEB_URL}/ad-details/${product?.slug}`,
+            category: {
+              "@type": "Thing",
+              name: product?.category?.translated_name,
+            },
+            offers: {
+              "@type": "Offer",
+              price: product?.price,
+              priceCurrency: "USD",
+            },
+            countryOfOrigin: product?.country,
+          },
+        })),
+      }
+    : null;
+
+  return (
+    <>
+      <StructuredData jsonLd={jsonLd} />
+      <Seller id={id} searchParams={originalSearchParams} />
+    </>
+  );
+};
+
+export default SellerPage;
diff --git a/app/sitemap.js b/app/sitemap.js
new file mode 100644
index 0000000..b3d6169
--- /dev/null
+++ b/app/sitemap.js
@@ -0,0 +1,223 @@
+import { SITEMAP_REVALIDATE_SECONDS } from "@/lib/constants";
+
+export default async function sitemap() {
+  // Check if SEO is enabled via environment variable
+  // If SEO is disabled, return empty array to prevent sitemap generation
+  const seoEnabled = process.env.NEXT_PUBLIC_SEO === "true";
+  if (!seoEnabled) {
+    // Return empty sitemap when SEO is disabled
+    return [];
+  }
+
+  const baseUrl = process.env.NEXT_PUBLIC_WEB_URL;
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+
+  let defaultLanguageCode = "en";
+  let languages = [];
+
+  try {
+    const res = await fetch(
+      `${apiUrl}${process.env.NEXT_PUBLIC_END_POINT}get-system-settings`,
+      { next: { revalidate: SITEMAP_REVALIDATE_SECONDS } } // Revalidate weekly
+    );
+
+    if (res.ok) {
+      const data = await res.json();
+      defaultLanguageCode = data?.data?.default_language || "en";
+      languages = data?.data?.languages || [];
+    }
+  } catch (error) {
+    console.error("Error fetching languages for sitemap:", error);
+    return [];
+  }
+
+  const publicRoutes = [
+    "about-us",
+    "ads",
+    "blogs",
+    "contact-us",
+    "faqs",
+    "landing",
+    "privacy-policy",
+    "refund-policy",
+    "subscription",
+    "terms-and-condition",
+  ];
+
+  // ✅ Escape XML entities
+  const escapeXml = (unsafe) =>
+    unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+  const buildHreflangLinks = (url) => {
+    const links = {};
+    const separator = url.includes("?") ? "&" : "?";
+    languages.forEach((lang) => {
+      links[lang.code] = escapeXml(`${url}${separator}lang=${lang.code}`);
+    });
+    // Add x-default
+    links["x-default"] = escapeXml(
+      `${url}${separator}lang=${defaultLanguageCode}`
+    );
+    return { languages: links };
+  };
+  // ✅ Add default lang param to main <loc> URLs
+  const withDefaultLang = (url) => {
+    const separator = url.includes("?") ? "&" : "?";
+    return escapeXml(`${url}${separator}lang=${defaultLanguageCode}`);
+  };
+
+  const staticSitemapEntries = publicRoutes.map((route) => {
+    const url = `${baseUrl}/${route}`;
+    return {
+      url: withDefaultLang(url),
+      lastModified: new Date(),
+      changeFrequency: "weekly",
+      priority: 0.9,
+      alternates: buildHreflangLinks(url),
+    };
+  });
+
+  // Add the base URL entry
+  const baseEntry = {
+    url: withDefaultLang(baseUrl),
+    lastModified: new Date(),
+    changeFrequency: "weekly",
+    priority: 1,
+    alternates: buildHreflangLinks(baseUrl),
+  };
+
+  let adEntries = [];
+  try {
+    const res = await fetch(
+      `${apiUrl}${process.env.NEXT_PUBLIC_END_POINT}get-item-slug`,
+      { next: { revalidate: SITEMAP_REVALIDATE_SECONDS } } // Revalidate weekly
+    );
+
+    if (res.ok) {
+      const json = await res.json();
+      const products = json?.data || [];
+      adEntries = products.map((product) => {
+        const url = `${baseUrl}/ad-details/${product?.slug}`;
+        return {
+          url: withDefaultLang(url),
+          lastModified: new Date(product?.updated_at),
+          changeFrequency: "weekly",
+          priority: 0.8,
+          alternates: buildHreflangLinks(url),
+        };
+      });
+    }
+  } catch (error) {
+    console.error("Error fetching products for sitemap:", error);
+  }
+
+  let categoryEntries = [];
+  try {
+    const res = await fetch(
+      `${apiUrl}${process.env.NEXT_PUBLIC_END_POINT}get-categories-slug`,
+      { next: { revalidate: SITEMAP_REVALIDATE_SECONDS } } // Revalidate weekly
+    );
+
+    if (res.ok) {
+      const json = await res.json();
+      const categories = json?.data || [];
+      categoryEntries = categories.map((category) => {
+        const url = `${baseUrl}/ads?category=${category?.slug}`;
+        return {
+          url: withDefaultLang(url),
+          lastModified: new Date(category?.updated_at),
+          changeFrequency: "weekly",
+          priority: 0.7,
+          alternates: buildHreflangLinks(url),
+        };
+      });
+    }
+  } catch (error) {
+    console.error("Error fetching categories for sitemap:", error);
+  }
+
+  let blogEntries = [];
+  try {
+    const res = await fetch(
+      `${apiUrl}${process.env.NEXT_PUBLIC_END_POINT}get-blogs-slug`,
+      { next: { revalidate: SITEMAP_REVALIDATE_SECONDS } } // Revalidate weekly
+    );
+
+    if (res.ok) {
+      const json = await res.json();
+      const blogs = json?.data || [];
+      blogEntries = blogs.map((blog) => {
+        const url = `${baseUrl}/blogs/${blog?.slug}`;
+        return {
+          url: withDefaultLang(url),
+          lastModified: new Date(blog?.updated_at),
+          changeFrequency: "weekly",
+          priority: 0.7,
+          alternates: buildHreflangLinks(url),
+        };
+      });
+    }
+  } catch (error) {
+    console.error("Error fetching blogs for sitemap:", error);
+  }
+
+  let featuredSectionEntries = [];
+  try {
+    const res = await fetch(
+      `${apiUrl}${process.env.NEXT_PUBLIC_END_POINT}get-featured-section-slug`,
+      { next: { revalidate: SITEMAP_REVALIDATE_SECONDS } } // Revalidate weekly
+    );
+
+    if (res.ok) {
+      const json = await res.json();
+      const featuredSections = json?.data || [];
+      featuredSectionEntries = featuredSections.map((featuredSection) => {
+        const url = `${baseUrl}/ads?featured_section=${featuredSection?.slug}`;
+        return {
+          url: withDefaultLang(url),
+          lastModified: new Date(featuredSection?.updated_at),
+          changeFrequency: "weekly",
+          priority: 0.7,
+          alternates: buildHreflangLinks(url),
+        };
+      });
+    }
+  } catch (error) {
+    console.error("Error fetching featured sections for sitemap:", error);
+  }
+
+  let sellerProfileEntries = [];
+  try {
+    const res = await fetch(
+      `${apiUrl}${process.env.NEXT_PUBLIC_END_POINT}get-seller-slug`,
+      { next: { revalidate: SITEMAP_REVALIDATE_SECONDS } } // Revalidate weekly
+    );
+
+    if (res.ok) {
+      const json = await res.json();
+      const sellers = json?.data || [];
+      sellerProfileEntries = sellers.map((seller) => {
+        const url = `${baseUrl}/seller/${seller?.id}`;
+        return {
+          url: withDefaultLang(url),
+          lastModified: new Date(seller?.updated_at),
+          changeFrequency: "weekly",
+          priority: 0.7,
+          alternates: buildHreflangLinks(url),
+        };
+      });
+    }
+  } catch (error) {
+    console.error("Error fetching featured sections for sitemap:", error);
+  }
+
+  return [
+    baseEntry,
+    ...staticSitemapEntries,
+    ...adEntries,
+    ...categoryEntries,
+    ...blogEntries,
+    ...featuredSectionEntries,
+    ...sellerProfileEntries,
+  ];
+}
diff --git a/app/subscription/page.jsx b/app/subscription/page.jsx
new file mode 100644
index 0000000..7c705d2
--- /dev/null
+++ b/app/subscription/page.jsx
@@ -0,0 +1,45 @@
+import Subscription from "@/components/PagesComponent/Subscription/Subscription";
+import { SEO_REVALIDATE_SECONDS } from "@/lib/constants";
+
+export const dynamic = "force-dynamic";
+
+export const generateMetadata = async ({ searchParams }) => {
+  try {
+    if (process.env.NEXT_PUBLIC_SEO === "false") return;
+    const params = await searchParams;
+    const langCode = params?.lang || "en";
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}seo-settings?page=subscription`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+    const data = await response.json();
+    const subscription = data?.data?.[0];
+    return {
+      title: subscription?.translated_title || process.env.NEXT_PUBLIC_META_TITLE,
+      description:
+        subscription?.translated_description ||
+        process.env.NEXT_PUBLIC_META_DESCRIPTION,
+      openGraph: {
+        images: subscription?.image ? [subscription?.image] : [],
+      },
+      keywords:
+        subscription?.translated_keywords || process.env.NEXT_PUBLIC_META_kEYWORDS,
+    };
+  } catch (error) {
+    console.error("Error fetching MetaData:", error);
+    return null;
+  }
+};
+
+const SubscriptionPage = () => {
+  return <Subscription />;
+};
+
+export default SubscriptionPage;
\ No newline at end of file
diff --git a/app/terms-and-condition/page.jsx b/app/terms-and-condition/page.jsx
new file mode 100644
index 0000000..0a92c75
--- /dev/null
+++ b/app/terms-and-condition/page.jsx
@@ -0,0 +1,50 @@
+import TermsAndCondition from "@/components/PagesComponent/StaticPages/TermsAndCondition";
+import { SEO_REVALIDATE_SECONDS } from "@/lib/constants";
+
+
+export const dynamic = "force-dynamic";
+
+
+export const generateMetadata = async ({ searchParams }) => {
+  try {
+    if (process.env.NEXT_PUBLIC_SEO === "false") return;
+    const params = await searchParams;
+    const langCode = params?.lang || "en";
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_END_POINT}seo-settings?page=terms-and-conditions`,
+      {
+        headers: {
+          "Content-Language": langCode || "en",
+        },
+        next: {
+          revalidate: SEO_REVALIDATE_SECONDS,
+        },
+      }
+    );
+    const data = await res.json();
+    const termsAndConditions = data?.data?.[0];
+
+    return {
+      title:
+        termsAndConditions?.translated_title ||
+        process.env.NEXT_PUBLIC_META_TITLE,
+      description:
+        termsAndConditions?.translated_description ||
+        process.env.NEXT_PUBLIC_META_DESCRIPTION,
+      openGraph: {
+        images: termsAndConditions?.image ? [termsAndConditions?.image] : [],
+      },
+      keywords:
+        termsAndConditions?.translated_keywords ||
+        process.env.NEXT_PUBLIC_META_kEYWORDS,
+    };
+  } catch (error) {
+    console.error("Error fetching MetaData:", error);
+    return null;
+  }
+};
+
+const TermsAndConditionPage = () => {
+  return <TermsAndCondition />;
+};
+export default TermsAndConditionPage;
diff --git a/app/transactions/page.jsx b/app/transactions/page.jsx
new file mode 100644
index 0000000..9d53d34
--- /dev/null
+++ b/app/transactions/page.jsx
@@ -0,0 +1,7 @@
+import ProfileDashboard from "@/components/PagesComponent/ProfileDashboard/ProfileDashboard";
+
+const TransactionsPage = () => {
+  return <ProfileDashboard />;
+};
+
+export default TransactionsPage;
diff --git a/app/user-subscription/page.jsx b/app/user-subscription/page.jsx
new file mode 100644
index 0000000..a78aa12
--- /dev/null
+++ b/app/user-subscription/page.jsx
@@ -0,0 +1,7 @@
+import ProfileDashboard from "@/components/PagesComponent/ProfileDashboard/ProfileDashboard";
+
+const UserSubscriptionPage = () => {
+  return <ProfileDashboard />;
+};
+
+export default UserSubscriptionPage;
diff --git a/app/user-verification/page.jsx b/app/user-verification/page.jsx
new file mode 100644
index 0000000..aebd764
--- /dev/null
+++ b/app/user-verification/page.jsx
@@ -0,0 +1,7 @@
+import UserVerification from "@/components/PagesComponent/UserVerification/UserVerification";
+
+const UserVerificationPage = () => {
+  return <UserVerification />;
+};
+
+export default UserVerificationPage;
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..801545c
--- /dev/null
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/components/Auth/DeleteAccountVerifyOtpModal.jsx b/components/Auth/DeleteAccountVerifyOtpModal.jsx
new file mode 100644
index 0000000..eb73518
--- /dev/null
+++ b/components/Auth/DeleteAccountVerifyOtpModal.jsx
@@ -0,0 +1,249 @@
+"use client";
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import "react-phone-input-2/lib/style.css";
+import { handleFirebaseAuthError, t } from "@/utils";
+import { useSelector } from "react-redux";
+import { logoutSuccess, userSignUpData } from "@/redux/reducer/authSlice";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import useAutoFocus from "../Common/useAutoFocus";
+import {
+  deleteUser,
+  getAuth,
+  RecaptchaVerifier,
+  signInWithPhoneNumber,
+} from "firebase/auth";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { deleteUserApi } from "@/utils/api";
+
+const DeleteAccountVerifyOtpModal = ({
+  isOpen,
+  setIsOpen,
+  pathname,
+  navigate,
+}) => {
+  const userData = useSelector(userSignUpData);
+  const auth = getAuth();
+
+  const countryCode = userData?.country_code;
+  const formattedNumber = userData?.mobile;
+
+  const otpInputRef = useAutoFocus();
+  const [showLoader, setShowLoader] = useState(false);
+  const [otp, setOtp] = useState("");
+  const [resendOtpLoader, setResendOtpLoader] = useState(false);
+  const [resendTimer, setResendTimer] = useState(0);
+  const [confirmationResult, setConfirmationResult] = useState(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      const timer = setTimeout(() => {
+        sendOTP();
+      }, 100);
+
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    let intervalId;
+    if (resendTimer > 0) {
+      intervalId = setInterval(() => {
+        setResendTimer((prevTimer) => prevTimer - 1);
+      }, 1000);
+    }
+
+    return () => {
+      if (intervalId) clearInterval(intervalId);
+    };
+  }, [resendTimer]);
+
+  const generateRecaptcha = async () => {
+    // Reuse existing verifier if it's still valid
+    if (window.recaptchaVerifier && !window.recaptchaVerifier.destroyed) {
+      return window.recaptchaVerifier;
+    }
+    const recaptchaContainer = document.getElementById("recaptcha-container");
+    if (!recaptchaContainer) {
+      console.error("Container element 'recaptcha-container' not found.");
+      return null;
+    }
+    // Clear container and reset reference
+    recaptchaContainer.innerHTML = "";
+    window.recaptchaVerifier = undefined;
+    try {
+      window.recaptchaVerifier = new RecaptchaVerifier(
+        auth,
+        recaptchaContainer,
+        { size: "invisible" }
+      );
+      return window.recaptchaVerifier;
+    } catch (error) {
+      console.error("Error initializing RecaptchaVerifier:", error.message);
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      recaptchaClear();
+    };
+  }, []);
+
+  const recaptchaClear = async () => {
+    if (window.recaptchaVerifier && !window.recaptchaVerifier.destroyed) {
+      try {
+        await window.recaptchaVerifier.clear();
+      } catch (error) {
+        // Ignore errors - verifier might already be cleared
+      }
+    }
+    window.recaptchaVerifier = undefined;
+    const recaptchaContainer = document.getElementById("recaptcha-container");
+    if (recaptchaContainer) {
+      recaptchaContainer.innerHTML = "";
+    }
+  };
+
+  const sendOTP = async () => {
+    try {
+      const PhoneNumber = `${countryCode}${formattedNumber}`;
+      setShowLoader(true);
+      const appVerifier = await generateRecaptcha();
+      const confirmation = await signInWithPhoneNumber(
+        auth,
+        PhoneNumber,
+        appVerifier
+      );
+      setConfirmationResult(confirmation);
+      toast.success(t("otpSentSuccess"));
+      setResendTimer(60);
+    } catch (error) {
+      console.log(error);
+      handleFirebaseAuthError(error.code);
+    } finally {
+      setShowLoader(false);
+    }
+  };
+
+  const verifyOTPWithFirebase = async (e) => {
+    e.preventDefault();
+    try {
+      setShowLoader(true);
+      const result = await confirmationResult.confirm(otp);
+      const user = result.user;
+      await deleteUser(user);
+      await deleteUserApi.deleteUser();
+      logoutSuccess();
+      toast.success(t("userDeleteSuccess"));
+      setIsOpen(false);
+      if (pathname !== "/") {
+        navigate("/");
+      }
+    } catch (error) {
+      console.log(error);
+      const errorCode = error?.code;
+      handleFirebaseAuthError(errorCode);
+    } finally {
+      setShowLoader(false);
+    }
+  };
+
+  const resendOtp = async () => {
+    try {
+      setResendOtpLoader(true);
+      const PhoneNumber = `${countryCode}${formattedNumber}`;
+      const appVerifier = await generateRecaptcha();
+      const confirmation = await signInWithPhoneNumber(
+        auth,
+        PhoneNumber,
+        appVerifier
+      );
+      setConfirmationResult(confirmation);
+      toast.success(t("otpSentSuccess"));
+    } catch (error) {
+      const errorCode = error.code;
+      handleFirebaseAuthError(errorCode);
+    } finally {
+      setResendOtpLoader(false);
+    }
+  };
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent
+          onInteractOutside={(e) => e.preventDefault()}
+          className="px-[40px] sm:py-[50px] sm:px-[90px]"
+        >
+          <DialogHeader>
+            <DialogTitle className="text-3xl sm:text-4xl font-light">
+              {t("verifyOtp")}
+            </DialogTitle>
+            <DialogDescription className="text-base text-black font-light">
+              {t("sentTo")} {`${countryCode} ${formattedNumber}`}
+            </DialogDescription>
+          </DialogHeader>
+          <form
+            className="flex flex-col gap-6"
+            onSubmit={verifyOTPWithFirebase}
+          >
+            <div className="labelInputCont">
+              <Label className="requiredInputLabel">{t("otp")}</Label>
+              <Input
+                type="text"
+                placeholder={t("enterOtp")}
+                id="otp"
+                name="otp"
+                value={otp}
+                maxLength={6}
+                onChange={(e) => setOtp(e.target.value)}
+                ref={otpInputRef}
+              />
+            </div>
+            <Button
+              type="submit"
+              disabled={showLoader}
+              className="text-xl text-white font-light px-4 py-2"
+              size="big"
+            >
+              {showLoader ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                t("verify")
+              )}
+            </Button>
+
+            <Button
+              type="button"
+              className="text-lg text-black font-light bg-transparent"
+              size="big"
+              onClick={resendOtp}
+              disabled={resendOtpLoader || showLoader || resendTimer > 0}
+            >
+              {resendOtpLoader ? (
+                <Loader2 className="size-6 animate-spin" />
+              ) : resendTimer > 0 ? (
+                `${t("resendOtp")} ${resendTimer}s`
+              ) : (
+                t("resendOtp")
+              )}
+            </Button>
+          </form>
+          <div id="recaptcha-container" style={{ display: "none" }}></div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default DeleteAccountVerifyOtpModal;
diff --git a/components/Auth/LoginModal.jsx b/components/Auth/LoginModal.jsx
new file mode 100644
index 0000000..1ff23a2
--- /dev/null
+++ b/components/Auth/LoginModal.jsx
@@ -0,0 +1,382 @@
+"use client";
+import { formatPhoneNumber, handleFirebaseAuthError, t } from "@/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import {
+  Fcmtoken,
+  getIsDemoMode,
+  getOtpServiceProvider,
+  settingsData,
+} from "@/redux/reducer/settingSlice";
+import "react-phone-input-2/lib/style.css";
+import { Button } from "../ui/button";
+import { FcGoogle } from "react-icons/fc";
+import { MdOutlineEmail, MdOutlineLocalPhone } from "react-icons/md";
+import {
+  getAuth,
+  GoogleAuthProvider,
+  RecaptchaVerifier,
+  signInWithPhoneNumber,
+  signInWithPopup,
+} from "firebase/auth";
+import { toast } from "sonner";
+import { getOtpApi, userSignUpApi } from "@/utils/api";
+import { loadUpdateData } from "@/redux/reducer/authSlice";
+import LoginWithEmailForm from "./LoginWithEmailForm";
+import LoginWithMobileForm from "./LoginWithMobileForm";
+import OtpScreen from "./OtpScreen";
+import TermsAndPrivacyLinks from "./TermsAndPrivacyLinks";
+import { setIsLoginOpen } from "@/redux/reducer/globalStateSlice";
+import ResetPasswordScreen from "./ResetPasswordScreen";
+
+const LoginModal = ({ IsLoginOpen, setIsRegisterModalOpen }) => {
+  const settings = useSelector(settingsData);
+  const auth = getAuth();
+  const fetchFCM = useSelector(Fcmtoken);
+  const isDemoMode = useSelector(getIsDemoMode);
+  const [IsOTPScreen, setIsOTPScreen] = useState(null);
+  const [resendTimer, setResendTimer] = useState(0);
+  const [loginStates, setLoginStates] = useState({
+    number: isDemoMode ? "919876598765" : "",
+    countryCode: isDemoMode ? "+91" : '',
+    showLoader: false,
+    regionCode: "",
+    password: isDemoMode ? "123456" : "",
+  });
+
+  const [confirmationResult, setConfirmationResult] = useState(null);
+  const [FirebaseId, setFirebaseId] = useState("");
+  const { number, countryCode } = loginStates;
+  const formattedNumber = formatPhoneNumber(number, countryCode);
+
+  const otp_service_provider = useSelector(getOtpServiceProvider);
+
+  // Active authentication methods
+  const mobile_authentication = Number(settings?.mobile_authentication);
+  const google_authentication = Number(settings?.google_authentication);
+  const email_authentication = Number(settings?.email_authentication);
+
+  const [IsLoginWithEmail, setIsLoginWithEmail] = useState(
+    mobile_authentication === 0 && email_authentication === 1 ? true : false
+  );
+
+  const IsShowOrSignIn =
+    !(
+      mobile_authentication === 0 &&
+      email_authentication === 0 &&
+      google_authentication === 1
+    ) && google_authentication === 1;
+
+  const OnHide = async () => {
+    setIsOTPScreen(null);
+    setIsLoginOpen(false);
+    setConfirmationResult(null);
+    setResendTimer(0);
+  };
+
+  const generateRecaptcha = async () => {
+    // Reuse existing verifier if it's still valid
+    if (window.recaptchaVerifier && !window.recaptchaVerifier.destroyed) {
+      return window.recaptchaVerifier;
+    }
+    const recaptchaContainer = document.getElementById("recaptcha-container");
+    if (!recaptchaContainer) {
+      console.error("Container element 'recaptcha-container' not found.");
+      return null;
+    }
+    // Clear container and reset reference
+    recaptchaContainer.innerHTML = "";
+    window.recaptchaVerifier = undefined;
+    try {
+      window.recaptchaVerifier = new RecaptchaVerifier(
+        auth,
+        recaptchaContainer,
+        { size: "invisible" }
+      );
+      return window.recaptchaVerifier;
+    } catch (error) {
+      console.error("Error initializing RecaptchaVerifier:", error.message);
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      recaptchaClear();
+    };
+  }, []);
+
+  const recaptchaClear = async () => {
+    if (window.recaptchaVerifier && !window.recaptchaVerifier.destroyed) {
+      try {
+        await window.recaptchaVerifier.clear();
+      } catch (error) {
+        // Ignore errors - verifier might already be cleared
+      }
+    }
+    window.recaptchaVerifier = undefined;
+    const recaptchaContainer = document.getElementById("recaptcha-container");
+    if (recaptchaContainer) {
+      recaptchaContainer.innerHTML = "";
+    }
+  };
+
+  const handleGoogleSignup = async () => {
+    const provider = new GoogleAuthProvider();
+    try {
+      const res = await signInWithPopup(auth, provider);
+      const user = res.user;
+      try {
+        const response = await userSignUpApi.userSignup({
+          name: user.displayName ? user.displayName : "",
+          email: user?.email,
+          firebase_id: user?.uid, // Accessing UID directly from the user object
+          fcm_id: fetchFCM ? fetchFCM : "",
+          type: "google",
+        });
+
+        const data = response.data;
+        if (data.error === true) {
+          toast.error(data.message);
+        } else {
+          loadUpdateData(data);
+          toast.success(data.message);
+        }
+        OnHide();
+      } catch (error) {
+        console.error("Error:", error);
+        toast.error("Failed to complete signup");
+      }
+    } catch (error) {
+      const errorCode = error.code;
+      handleFirebaseAuthError(errorCode);
+    }
+  };
+
+  const handleCreateAnAccount = () => {
+    OnHide();
+    setIsRegisterModalOpen(true);
+  };
+
+  // Handle forgot password - send OTP and show OTP screen
+  const handleForgotPassword = async () => {
+    const PhoneNumber = `${loginStates.countryCode}${formattedNumber}`;
+    if (otp_service_provider === "twilio") {
+      try {
+        const response = await getOtpApi.getOtp({ number: formattedNumber, country_code: countryCode });
+        if (response?.data?.error === false) {
+          toast.success(t("otpSentSuccess"));
+          setResendTimer(60);
+          setIsOTPScreen("otp");
+        } else {
+          toast.error(t("failedToSendOtp"));
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    } else {
+      try {
+        const appVerifier = await generateRecaptcha();
+        const confirmation = await signInWithPhoneNumber(
+          auth,
+          PhoneNumber,
+          appVerifier
+        );
+        setConfirmationResult(confirmation);
+        toast.success(t("otpSentSuccess"));
+        setResendTimer(60);
+        setIsOTPScreen("otp");
+      } catch (error) {
+
+        console.log(error)
+
+        handleFirebaseAuthError(error.code);
+      }
+    }
+  };
+
+  // Handle OTP verification success - move to reset password screen
+  const handleForgotPasswordOtpVerified = (firebase_id) => {
+    setFirebaseId(firebase_id);
+    setIsOTPScreen("reset");
+    toast.success(t("otpVerified"));
+  };
+
+  // Handle successful password reset - go back to login
+  const handleResetPasswordSuccess = () => {
+    setIsOTPScreen(null);
+    setConfirmationResult(null);
+    setResendTimer(0);
+  };
+
+  return (
+    <>
+      <Dialog open={IsLoginOpen} onOpenChange={setIsLoginOpen}>
+        <DialogContent
+          onInteractOutside={(e) => e.preventDefault()}
+          className="px-[40px] sm:py-[50px] sm:px-[90px]"
+        >
+          <DialogHeader>
+            <DialogTitle className="text-3xl sm:text-4xl font-light">
+              {IsOTPScreen === "otp" ? (
+                t("verifyOtp")
+              ) : IsOTPScreen === "reset" ? (
+                t("resetYourPassword")
+              ) : (
+                <>
+                  {t("loginTo")}{" "}
+                  <span className="text-primary">{settings?.company_name}</span>
+                </>
+              )}
+            </DialogTitle>
+            <DialogDescription className="text-base text-black font-light">
+              {IsOTPScreen === "otp" ? (
+                <>
+                  {t("sentTo")} {`${countryCode}${formattedNumber}`}{" "}
+                  <span
+                    onClick={() => setIsOTPScreen(false)}
+                    className="text-primary underline cursor-pointer"
+                  >
+                    {t("change")}
+                  </span>
+                </>
+              ) : IsOTPScreen === "reset" ? (
+                t("enterNewPassword")
+              ) : (
+                <>
+                  {t("newto")} {settings?.company_name}?{" "}
+                  <span
+                    className="text-primary cursor-pointer underline"
+                    onClick={handleCreateAnAccount}
+                  >
+                    {t("createAccount")}
+                  </span>
+                </>
+              )}
+            </DialogDescription>
+          </DialogHeader>
+
+          {IsOTPScreen === "otp" ? (
+            <OtpScreen
+              OnHide={OnHide}
+              generateRecaptcha={generateRecaptcha}
+              countryCode={countryCode}
+              formattedNumber={formattedNumber}
+              confirmationResult={confirmationResult}
+              setConfirmationResult={setConfirmationResult}
+              resendTimer={resendTimer}
+              setResendTimer={setResendTimer}
+              regionCode={loginStates.regionCode}
+              isDemoMode={isDemoMode}
+              onOtpVerified={handleForgotPasswordOtpVerified}
+              key="forgot-password-otp"
+            />
+          ) : IsOTPScreen === "reset" ? (
+            <ResetPasswordScreen
+              FirebaseId={FirebaseId}
+              formattedNumber={formattedNumber}
+              countryCode={loginStates.countryCode}
+              onSuccess={handleResetPasswordSuccess}
+              onCancel={() => setIsOTPScreen(null)}
+            />
+          ) : (
+            <div className="flex flex-col gap-[30px] mt-3.5">
+              {!(
+                mobile_authentication === 0 &&
+                email_authentication === 0 &&
+                google_authentication === 1
+              ) &&
+                mobile_authentication === 1 &&
+                email_authentication === 1 &&
+                (IsLoginWithEmail ? (
+                  <LoginWithEmailForm OnHide={OnHide} key={IsLoginWithEmail} />
+                ) : (
+                  <LoginWithMobileForm
+                    formattedNumber={formattedNumber}
+                    loginStates={loginStates}
+                    setLoginStates={setLoginStates}
+                    onForgotPassword={handleForgotPassword}
+                    OnHide={OnHide}
+                    key={IsLoginWithEmail}
+                  />
+                ))}
+
+              {email_authentication === 1 && mobile_authentication === 0 && (
+                <LoginWithEmailForm OnHide={OnHide} key={IsLoginWithEmail} />
+              )}
+
+              {mobile_authentication === 1 && email_authentication === 0 && (
+                <LoginWithMobileForm
+                  OnHide={OnHide}
+                  formattedNumber={formattedNumber}
+                  loginStates={loginStates}
+                  setLoginStates={setLoginStates}
+                  onForgotPassword={handleForgotPassword}
+                  key={IsLoginWithEmail}
+                />
+              )}
+
+              {IsShowOrSignIn && (
+                <div className="flex items-center gap-2">
+                  <hr className="w-full" />
+                  <p className="text-nowrap text-sm">{t("orSignInWith")}</p>
+                  <hr className="w-full" />
+                </div>
+              )}
+
+              <div className="flex flex-col gap-4">
+                {google_authentication === 1 && (
+                  <Button
+                    variant="outline"
+                    size="big"
+                    className="flex items-center justify-center py-4 text-base"
+                    onClick={handleGoogleSignup}
+                  >
+                    <FcGoogle className="!size-6" />
+                    <span>{t("continueWithGoogle")}</span>
+                  </Button>
+                )}
+
+                {IsLoginWithEmail && mobile_authentication === 1 ? (
+                  <Button
+                    variant="outline"
+                    size="big"
+                    className="flex items-center justify-center py-4 text-base h-auto"
+                    onClick={() => setIsLoginWithEmail(false)}
+                  >
+                    <MdOutlineLocalPhone className="!size-6" />
+                    {t("continueWithMobile")}
+                  </Button>
+                ) : (
+                  !IsLoginWithEmail &&
+                  email_authentication === 1 && (
+                    <Button
+                      variant="outline"
+                      size="big"
+                      className="flex items-center justify-center py-4 text-base h-auto"
+                      onClick={() => setIsLoginWithEmail(true)}
+                    >
+                      <MdOutlineEmail className="!size-6" />
+                      {t("continueWithEmail")}
+                    </Button>
+                  )
+                )}
+              </div>
+              <TermsAndPrivacyLinks t={t} settings={settings} OnHide={OnHide} />
+            </div>
+          )}
+          <div id="recaptcha-container" style={{ display: "none" }}></div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default LoginModal;
diff --git a/components/Auth/LoginWithEmailForm.jsx b/components/Auth/LoginWithEmailForm.jsx
new file mode 100644
index 0000000..00c5a11
--- /dev/null
+++ b/components/Auth/LoginWithEmailForm.jsx
@@ -0,0 +1,189 @@
+import { FaRegEye, FaRegEyeSlash } from "react-icons/fa";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import useAutoFocus from "../Common/useAutoFocus";
+import { toast } from "sonner";
+import { handleFirebaseAuthError, t } from "@/utils";
+import {
+  getAuth,
+  sendPasswordResetEmail,
+  signInWithEmailAndPassword,
+} from "firebase/auth";
+import { userSignUpApi } from "@/utils/api";
+import { useSelector } from "react-redux";
+import { Fcmtoken } from "@/redux/reducer/settingSlice";
+import { loadUpdateData } from "@/redux/reducer/authSlice";
+import { Loader2 } from "lucide-react";
+import { useState } from "react";
+
+const LoginWithEmailForm = ({ OnHide }) => {
+  const emailRef = useAutoFocus();
+  const auth = getAuth();
+  const fetchFCM = useSelector(Fcmtoken);
+  const [loginStates, setLoginStates] = useState({
+    email: "",
+    password: "",
+    IsPasswordVisible: false,
+    showLoader: false,
+  });
+
+  const { email, password, IsPasswordVisible, showLoader } = loginStates;
+
+  const signin = async (email, password) => {
+    try {
+      const userCredential = await signInWithEmailAndPassword(
+        auth,
+        email,
+        password
+      );
+      if (!userCredential?.user) {
+        toast.error(t("userNotFound"));
+        return null;
+      }
+      return userCredential;
+    } catch (error) {
+      console.error("Error signing in:", error);
+      throw error;
+    }
+  };
+
+  const Signin = async (e) => {
+    e.preventDefault();
+
+    if (!email) {
+      toast.error(t("emailRequired"));
+      return;
+    } else if (!/\S+@\S+\.\S+/.test(email)) {
+      toast.error(t("emailInvalid"));
+      return;
+    } else if (!password) {
+      toast.error(t("passwordRequired"));
+      return;
+    } else if (password.length < 6) {
+      toast.error(t("passwordTooShort"));
+      return;
+    }
+
+    try {
+      setLoginStates((prev) => ({ ...prev, showLoader: true }));
+      const userCredential = await signin(email, password);
+      const user = userCredential.user;
+      if (user.emailVerified) {
+        try {
+          const response = await userSignUpApi.userSignup({
+            name: user?.displayName || "",
+            email: user?.email,
+            firebase_id: user?.uid,
+            fcm_id: fetchFCM ? fetchFCM : "",
+            type: "email",
+            is_login: 1,
+          });
+          const data = response.data;
+          if (data.error === false) {
+            loadUpdateData(data);
+            toast.success(data.message);
+            OnHide();
+          } else {
+            toast.error(data.message);
+          }
+        } catch (error) {
+          console.error("Error:", error);
+        }
+        // Add your logic here for verified users
+      } else {
+        toast.error(t("verifyEmailFirst"));
+      }
+    } catch (error) {
+      const errorCode = error.code;
+      console.log("Error code:", errorCode);
+      handleFirebaseAuthError(errorCode);
+    } finally {
+      setLoginStates((prev) => ({ ...prev, showLoader: false }));
+    }
+  };
+
+  const handleForgotModal = async (e) => {
+    e.preventDefault();
+    await sendPasswordResetEmail(auth, email)
+      .then(() => {
+        toast.success(t("resetPassword"));
+      })
+      .catch((error) => {
+        console.log("error", error);
+        handleFirebaseAuthError(error?.code);
+      });
+  };
+
+  return (
+    <>
+      <form className="flex flex-col gap-6" onSubmit={Signin}>
+        <div className="labelInputCont">
+          <Label className="requiredInputLabel">{t("email")}</Label>
+          <Input
+            type="email"
+            placeholder={t("enterEmail")}
+            value={email}
+            onChange={(e) =>
+              setLoginStates((prev) => ({ ...prev, email: e.target.value }))
+            }
+            ref={emailRef}
+          />
+        </div>
+        <div className="labelInputCont">
+          <Label className="requiredInputLabel">{t("password")}</Label>
+          <div className="flex items-center relative">
+            <Input
+              type={IsPasswordVisible ? "text" : "password"}
+              placeholder={t("enterPassword")}
+              className="ltr:pr-9 rtl:pl-9"
+              value={password}
+              onChange={(e) =>
+                setLoginStates((prev) => ({
+                  ...prev,
+                  password: e.target.value,
+                }))
+              }
+            />
+            <button
+              type="button"
+              className="absolute ltr:right-3 rtl:left-3 cursor-pointer"
+              onClick={() =>
+                setLoginStates((prev) => ({
+                  ...prev,
+                  IsPasswordVisible: !prev.IsPasswordVisible,
+                }))
+              }
+            >
+              {IsPasswordVisible ? (
+                <FaRegEye size={20} />
+              ) : (
+                <FaRegEyeSlash size={20} />
+              )}
+            </button>
+          </div>
+          <button
+            className="text-right font-semibold text-primary"
+            onClick={handleForgotModal}
+            type="button"
+          >
+            {t("forgtPassword")}
+          </button>
+        </div>
+        <Button
+          className="text-xl text-white font-light px-4 py-2"
+          size="big"
+          disabled={showLoader}
+        >
+          {showLoader ? (
+            <Loader2 className="size-6 animate-spin" />
+          ) : (
+            t("signIn")
+          )}
+        </Button>
+      </form>
+    </>
+  );
+};
+
+export default LoginWithEmailForm;
diff --git a/components/Auth/LoginWithMobileForm.jsx b/components/Auth/LoginWithMobileForm.jsx
new file mode 100644
index 0000000..2973d02
--- /dev/null
+++ b/components/Auth/LoginWithMobileForm.jsx
@@ -0,0 +1,194 @@
+import PhoneInput from "react-phone-input-2";
+import { Label } from "../ui/label";
+import { Button } from "../ui/button";
+import useAutoFocus from "../Common/useAutoFocus";
+import { Loader2 } from "lucide-react";
+import { isValidPhoneNumber } from "libphonenumber-js/max";
+import { toast } from "sonner";
+import { t } from "@/utils";
+import { Input } from "../ui/input";
+import { useState } from "react";
+import { FaRegEye, FaRegEyeSlash } from "react-icons/fa";
+import { getUserExistsApi, userSignUpApi } from "@/utils/api";
+import { Fcmtoken } from "@/redux/reducer/settingSlice";
+import { useSelector } from "react-redux";
+import { loadUpdateData } from "@/redux/reducer/authSlice";
+
+const LoginWithMobileForm = ({
+  loginStates,
+  setLoginStates,
+  formattedNumber,
+  onForgotPassword,
+  OnHide,
+}) => {
+  const numberInputRef = useAutoFocus();
+  const { number, countryCode, showLoader } = loginStates;
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const fcm_id = useSelector(Fcmtoken);
+  const [forgotPasswordLoading, setForgotPasswordLoading] = useState(false);
+
+  const handleInputChange = (value, data) => {
+    setLoginStates((prev) => ({
+      ...prev,
+      number: value,
+      countryCode: "+" + (data?.dialCode || ""),
+      regionCode: data?.countryCode.toLowerCase() || "",
+    }));
+  };
+
+  const handleCountryChange = (code) => {
+    setLoginStates((prev) => ({
+      ...prev,
+      countryCode: code,
+    }));
+  };
+
+  const handleLoginWithMobile = async (e) => {
+    e.preventDefault();
+    try {
+      if (!isValidPhoneNumber(`${countryCode}${formattedNumber}`)) {
+        toast.error(t("invalidPhoneNumber"));
+        return;
+      }
+
+      setLoginStates((prev) => ({
+        ...prev,
+        showLoader: true,
+      }));
+      const params = {
+        mobile: formattedNumber,
+        password: loginStates.password,
+        country_code: countryCode,
+        type: "phone",
+        fcm_id: fcm_id ? fcm_id : "",
+        is_login: 1,
+      };
+      const response = await userSignUpApi.userSignup(params);
+      if (response?.data?.error === false) {
+        toast.success(response?.data?.message);
+        loadUpdateData(response?.data);
+        OnHide();
+      } else {
+        toast.error(response?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoginStates((prev) => ({
+        ...prev,
+        showLoader: false,
+      }));
+    }
+  };
+
+
+  const checkIfUserExistsOrNot = async () => {
+    try {
+      const res = await getUserExistsApi.getUserExists({
+        mobile: formattedNumber,
+        country_code: countryCode,
+        forgot_password: 1
+      })
+      if (res?.data?.error === false) {
+        return true
+      } else {
+        toast.error(res?.data?.message)
+        return false
+      }
+    } catch (error) {
+      console.log(error)
+      return false;
+    }
+  }
+
+  // NEW: Handle forgot password with loading state
+  const handleForgotPasswordClick = async () => {
+    if (!isValidPhoneNumber(`${countryCode}${formattedNumber}`)) {
+      toast.error(t("invalidPhoneNumber"));
+      return;
+    }
+    setForgotPasswordLoading(true);
+    const isUserExists = await checkIfUserExistsOrNot()
+    if (!isUserExists) {
+      setForgotPasswordLoading(false);
+      return;
+    }
+    await onForgotPassword();
+    setForgotPasswordLoading(false);
+  };
+
+  return (
+    <form className="flex flex-col gap-6" onSubmit={handleLoginWithMobile}>
+      <div className="labelInputCont">
+        <Label className="font-semibold after:content-['*'] after:text-red-500">
+          {t("mobileNumber")}
+        </Label>
+        <PhoneInput
+          country={process.env.NEXT_PUBLIC_DEFAULT_COUNTRY}
+          value={number}
+          onChange={(phone, data) => handleInputChange(phone, data)}
+          onCountryChange={handleCountryChange}
+          inputProps={{
+            name: "phone",
+            required: true,
+            ref: numberInputRef,
+          }}
+          enableLongNumbers
+        />
+      </div>
+      <div className="labelInputCont">
+        <Label className="requiredInputLabel">{t("password")}</Label>
+        <div className="flex items-center relative">
+          <Input
+            type={isPasswordVisible ? "text" : "password"}
+            placeholder={t("enterPassword")}
+            className="ltr:pr-9 rtl:pl-9"
+            value={loginStates.password}
+            onChange={(e) =>
+              setLoginStates((prev) => ({ ...prev, password: e.target.value }))
+            }
+            required
+          />
+          <button
+            type="button"
+            className="absolute ltr:right-3 rtl:left-3 cursor-pointer"
+            onClick={() => setIsPasswordVisible((prev) => !prev)}
+          >
+            {isPasswordVisible ? (
+              <FaRegEye size={20} />
+            ) : (
+              <FaRegEyeSlash size={20} />
+            )}
+          </button>
+        </div>
+        <button
+          className="text-right font-semibold text-primary w-fit self-end"
+          onClick={handleForgotPasswordClick}
+          type="button"
+          disabled={forgotPasswordLoading}
+        >
+          {forgotPasswordLoading ? (
+            <>
+              <span className="flex items-center gap-2 justify-end">
+                <Loader2 className="size-4 animate-spin" />
+                <span>{t("loading")}</span>
+              </span>
+            </>
+          ) : (
+            t("forgtPassword")
+          )}
+        </button>
+      </div>
+      <Button
+        type="submit"
+        disabled={showLoader}
+        className="text-xl text-white font-light px-4 py-2"
+        size="big"
+      >
+        {showLoader ? <Loader2 className="size-6 animate-spin" /> : t("login")}
+      </Button>
+    </form>
+  );
+};
+
+export default LoginWithMobileForm;
diff --git a/components/Auth/MailSentSuccessModal.jsx b/components/Auth/MailSentSuccessModal.jsx
new file mode 100644
index 0000000..45132b7
--- /dev/null
+++ b/components/Auth/MailSentSuccessModal.jsx
@@ -0,0 +1,36 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import mainSentImg from "../../public/assets/Mail Verification.svg";
+import { t } from "@/utils";
+import CustomImage from "../Common/CustomImage";
+
+const MailSentSuccessModal = ({ IsMailSentSuccess, setIsMailSentSuccess }) => {
+  return (
+    <Dialog open={IsMailSentSuccess} onOpenChange={setIsMailSentSuccess}>
+      <DialogContent onInteractOutside={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle className="sr-only"></DialogTitle>
+          <DialogDescription className="sr-only"></DialogDescription>
+          <div className="flex flex-col gap-3 items-center justify-center">
+            <CustomImage
+              src={mainSentImg}
+              alt="Verification Mail sent"
+              width={300}
+              height={195}
+              className="aspect-[300/195] object-contain"
+            />
+            <h1 className="text-2xl font-medium">{t("youveGotMail")}</h1>
+            <p className="opacity-65">{t("verifyAccount")}</p>
+          </div>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default MailSentSuccessModal;
diff --git a/components/Auth/OtpScreen.jsx b/components/Auth/OtpScreen.jsx
new file mode 100644
index 0000000..7cf68e0
--- /dev/null
+++ b/components/Auth/OtpScreen.jsx
@@ -0,0 +1,244 @@
+import { getAuth, signInWithPhoneNumber } from "firebase/auth";
+import useAutoFocus from "../Common/useAutoFocus";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { toast } from "sonner";
+import { handleFirebaseAuthError, t } from "@/utils";
+import { getOtpApi, userSignUpApi, verifyOtpApi } from "@/utils/api";
+import { loadUpdateData } from "@/redux/reducer/authSlice";
+import { useSelector } from "react-redux";
+import { Fcmtoken, getOtpServiceProvider } from "@/redux/reducer/settingSlice";
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useNavigate } from "../Common/useNavigate";
+
+const OtpScreen = ({
+  generateRecaptcha,
+  countryCode,
+  formattedNumber,
+  confirmationResult,
+  setConfirmationResult,
+  OnHide,
+  resendTimer,
+  setResendTimer,
+  regionCode,
+  isDemoMode,
+  isRegister = false,
+  onOtpVerified,
+  password
+}) => {
+  const { navigate } = useNavigate();
+  const otpInputRef = useAutoFocus();
+  const fetchFCM = useSelector(Fcmtoken);
+  const auth = getAuth();
+  const [resendOtpLoader, setResendOtpLoader] = useState(false);
+  const [showLoader, setShowLoader] = useState(false);
+  const [otp, setOtp] = useState(isDemoMode && !isRegister ? "123456" : "");
+  const otp_service_provider = useSelector(getOtpServiceProvider);
+
+  useEffect(() => {
+    let intervalId;
+    if (resendTimer > 0) {
+      intervalId = setInterval(() => {
+        setResendTimer((prevTimer) => prevTimer - 1);
+      }, 1000);
+    }
+
+    return () => {
+      if (intervalId) clearInterval(intervalId);
+    };
+  }, [resendTimer]);
+
+  const verifyOTPWithTwillio = async () => {
+    try {
+
+      const payload = {
+        number: formattedNumber,
+        country_code: countryCode,
+        otp: otp,
+      }
+
+      if (isRegister && password) {
+        payload.password = password;
+      }
+
+      const response = await verifyOtpApi.verifyOtp(payload);
+      if (response?.data?.error === false) {
+        // If callback provided, use it (for forgot password)
+        if (onOtpVerified) {
+          onOtpVerified();
+          return;
+        }
+        // Otherwise, do normal login
+        loadUpdateData(response?.data);
+        toast.success(response?.data?.message);
+        if (
+          response?.data?.data?.email === "" ||
+          response?.data?.data?.name === ""
+        ) {
+          navigate("/profile");
+        }
+        OnHide();
+      } else {
+        toast.error(response?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setShowLoader(false);
+    }
+  };
+
+  const verifyOTPWithFirebase = async () => {
+    try {
+      const result = await confirmationResult.confirm(otp);
+      // Access user information from the result
+      const user = result.user;
+
+      const firebase_id = user?.uid;
+
+      // If callback provided, use it (for forgot password)
+      if (onOtpVerified) {
+        onOtpVerified(firebase_id);
+        return;
+      }
+
+      const payload = {
+        mobile: formattedNumber,
+        firebase_id: user.uid, // Accessing UID directly from the user object
+        fcm_id: fetchFCM ? fetchFCM : "",
+        country_code: countryCode,
+        type: "phone",
+        region_code: regionCode?.toUpperCase() || "",
+      }
+
+      if (isRegister && password) {
+        payload.password = password;
+      }
+
+      // Otherwise, do normal login
+      const response = await userSignUpApi.userSignup(payload);
+      const data = response.data;
+      loadUpdateData(data);
+      toast.success(data.message);
+      OnHide();
+      if (data?.data?.email === "" || data?.data?.name === "") {
+        navigate("/profile");
+      }
+    } catch (error) {
+      console.log(error);
+      const errorCode = error?.code;
+      handleFirebaseAuthError(errorCode);
+    } finally {
+      setShowLoader(false);
+    }
+  };
+
+  const verifyOTP = async (e) => {
+    e.preventDefault();
+    if (otp === "") {
+      toast.error(t("otpmissing"));
+      return;
+    }
+    setShowLoader(true);
+    if (otp_service_provider === "twilio") {
+      await verifyOTPWithTwillio();
+    } else {
+      await verifyOTPWithFirebase();
+    }
+  };
+
+  const resendOtpWithTwillio = async () => {
+    try {
+      const response = await getOtpApi.getOtp({ number: formattedNumber, country_code: countryCode });
+      if (response?.data?.error === false) {
+        toast.success(t("otpSentSuccess"));
+        setResendTimer(60); // Start the 60-second timer
+      } else {
+        toast.error(t("failedToSendOtp"));
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setResendOtpLoader(false);
+    }
+  };
+
+  const resendOtpWithFirebase = async (PhoneNumber) => {
+    try {
+      const appVerifier = await generateRecaptcha();
+      const confirmation = await signInWithPhoneNumber(
+        auth,
+        PhoneNumber,
+        appVerifier
+      );
+      setConfirmationResult(confirmation);
+      toast.success(t("otpSentSuccess"));
+    } catch (error) {
+      const errorCode = error.code;
+      handleFirebaseAuthError(errorCode);
+    } finally {
+      setResendOtpLoader(false);
+    }
+  };
+
+  const resendOtp = async (e) => {
+    e.preventDefault();
+    setResendOtpLoader(true);
+    const PhoneNumber = `${countryCode}${formattedNumber}`;
+    if (otp_service_provider === "twilio") {
+      await resendOtpWithTwillio();
+    } else {
+      await resendOtpWithFirebase(PhoneNumber);
+    }
+  };
+
+  return (
+    <form className="flex flex-col gap-6" onSubmit={verifyOTP}>
+      <div className="labelInputCont">
+        <Label className="requiredInputLabel">{t("otp")}</Label>
+        <Input
+          type="text"
+          placeholder={t("enterOtp")}
+          id="otp"
+          name="otp"
+          value={otp}
+          maxLength={6}
+          onChange={(e) => setOtp(e.target.value)}
+          ref={otpInputRef}
+        />
+      </div>
+      <Button
+        type="submit"
+        disabled={showLoader}
+        className="text-xl text-white font-light px-4 py-2"
+        size="big"
+      >
+        {showLoader ? (
+          <Loader2 className="w-4 h-4 animate-spin" />
+        ) : (
+          t("verify")
+        )}
+      </Button>
+
+      <Button
+        type="button"
+        className="text-lg text-black font-light bg-transparent"
+        size="big"
+        onClick={resendOtp}
+        disabled={resendOtpLoader || showLoader || resendTimer > 0}
+      >
+        {resendOtpLoader ? (
+          <Loader2 className="size-6 animate-spin" />
+        ) : resendTimer > 0 ? (
+          `${t("resendOtp")} ${resendTimer}s`
+        ) : (
+          t("resendOtp")
+        )}
+      </Button>
+    </form>
+  );
+};
+
+export default OtpScreen;
diff --git a/components/Auth/RegisterModal.jsx b/components/Auth/RegisterModal.jsx
new file mode 100644
index 0000000..4d30bd9
--- /dev/null
+++ b/components/Auth/RegisterModal.jsx
@@ -0,0 +1,180 @@
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { t } from "@/utils";
+import { settingsData } from "@/redux/reducer/settingSlice";
+import { useSelector } from "react-redux";
+import TermsAndPrivacyLinks from "./TermsAndPrivacyLinks";
+import { setIsLoginOpen } from "@/redux/reducer/globalStateSlice";
+import { MdOutlineEmail, MdOutlineLocalPhone } from "react-icons/md";
+import RegisterWithEmailForm from "./RegisterWithEmailForm";
+import RegisterWithMobileForm from "./RegisterWithMobileForm";
+import { Button } from "../ui/button";
+
+const RegisterModal = ({
+  setIsMailSentSuccess,
+  IsRegisterModalOpen,
+  setIsRegisterModalOpen,
+}) => {
+  // Get Global data
+  const settings = useSelector(settingsData);
+  const [descriptionState, setDescriptionState] = useState({
+    type: "register", // "register" | "otp"
+    phoneNumber: "",
+  });
+  const [isOTPScreen, setIsOTPScreen] = useState(false);
+
+  // Active authentication methods
+  const mobile_authentication = Number(settings?.mobile_authentication);
+  const email_authentication = Number(settings?.email_authentication);
+
+  // Toggle between email and mobile registration
+  const [IsRegisterWithEmail, setIsRegisterWithEmail] = useState(
+    !mobile_authentication == 1
+  );
+
+  const OnHide = () => {
+    setIsRegisterModalOpen(false);
+  };
+
+  const handleLoginClick = () => {
+    OnHide();
+    setIsLoginOpen(true);
+  };
+
+  const handleChangeClick = () => {
+    setIsOTPScreen(false);
+    setDescriptionState({ type: "register", phoneNumber: "" });
+  };
+
+  // Show divider when alternative auth methods (email/mobile toggle) are available
+  const showOrSignInWith =
+    !isOTPScreen &&
+    ((IsRegisterWithEmail && mobile_authentication == 1) ||
+      (!IsRegisterWithEmail && email_authentication == 1));
+
+  return (
+    <>
+      <Dialog open={IsRegisterModalOpen} onOpenChange={setIsRegisterModalOpen}>
+        <DialogContent
+          onInteractOutside={(e) => e.preventDefault()}
+          className="px-[40px] sm:py-[50px] sm:px-[90px]"
+        >
+          <DialogHeader>
+            <DialogTitle className="text-3xl sm:text-4xl font-light">
+              {descriptionState.type === "otp" ? (
+                t("verifyOtp")
+              ) : (
+                <>
+                  {t("welcomeTo")}{" "}
+                  <span className="text-primary">{settings?.company_name}</span>
+                </>
+              )}
+            </DialogTitle>
+            <DialogDescription className="text-base text-black font-light">
+              {descriptionState.type === "otp" ? (
+                <>
+                  {t("sentTo")} {descriptionState.phoneNumber}{" "}
+                  <span
+                    className="text-primary cursor-pointer underline"
+                    onClick={handleChangeClick}
+                  >
+                    {t("change")}
+                  </span>
+                </>
+              ) : (
+                <>
+                  {t("haveAccount")}{" "}
+                  <span
+                    className="text-primary cursor-pointer underline"
+                    onClick={handleLoginClick}
+                  >
+                    {t("logIn")}
+                  </span>
+                </>
+              )}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex flex-col gap-[30px] mt-3.5">
+            {/* Show RegisterWithEmailForm when email auth is enabled */}
+            {email_authentication === 1 &&
+              (mobile_authentication == 0 || IsRegisterWithEmail) && (
+                <RegisterWithEmailForm
+                  OnHide={OnHide}
+                  setIsMailSentSuccess={setIsMailSentSuccess}
+                  key={IsRegisterWithEmail}
+                />
+              )}
+
+            {/* Show RegisterWithMobileForm when mobile auth is enabled */}
+            {mobile_authentication == 1 &&
+              (email_authentication == 0 || !IsRegisterWithEmail) && (
+                <RegisterWithMobileForm
+                  OnHide={OnHide}
+                  setDescriptionState={setDescriptionState}
+                  key={IsRegisterWithEmail}
+                  isOTPScreen={isOTPScreen}
+                  setIsOTPScreen={setIsOTPScreen}
+                />
+              )}
+
+            {/* Show divider when alternative auth methods are available */}
+            {showOrSignInWith && (
+              <div className="flex items-center gap-2">
+                <hr className="w-full" />
+                <p className="text-nowrap text-sm">{t("orSignUpWith")}</p>
+                <hr className="w-full" />
+              </div>
+            )}
+
+            {/* Toggle buttons for switching between email and mobile */}
+
+            {showOrSignInWith && (
+              <div className="flex flex-col gap-4">
+                {/* Show "Continue with Mobile" button when email is selected and mobile is enabled */}
+                {IsRegisterWithEmail && mobile_authentication == 1 && (
+                  <Button
+                    variant="outline"
+                    size="big"
+                    className="flex items-center justify-center py-4 text-base h-auto"
+                    onClick={() => setIsRegisterWithEmail(false)}
+                  >
+                    <MdOutlineLocalPhone className="!size-6" />
+                    {t("continueWithMobile")}
+                  </Button>
+                )}
+
+                {/* Show "Continue with Email" button when mobile is selected and email is enabled */}
+                {!IsRegisterWithEmail && email_authentication === 1 && (
+                  <Button
+                    variant="outline"
+                    size="big"
+                    className="flex items-center justify-center py-4 text-base h-auto"
+                    onClick={() => setIsRegisterWithEmail(true)}
+                  >
+                    <MdOutlineEmail className="!size-6" />
+                    {t("continueWithEmail")}
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {/* Terms and Privacy Links */}
+            {!isOTPScreen && (
+              <TermsAndPrivacyLinks t={t} settings={settings} OnHide={OnHide} />
+            )}
+          </div>
+          <div id="recaptcha-container" style={{ display: "none" }}></div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default RegisterModal;
diff --git a/components/Auth/RegisterWithEmailForm.jsx b/components/Auth/RegisterWithEmailForm.jsx
new file mode 100644
index 0000000..733a2f0
--- /dev/null
+++ b/components/Auth/RegisterWithEmailForm.jsx
@@ -0,0 +1,183 @@
+import { useState } from "react";
+import { FaRegEye, FaRegEyeSlash } from "react-icons/fa";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { handleFirebaseAuthError, t } from "@/utils";
+import {
+  createUserWithEmailAndPassword,
+  getAuth,
+  sendEmailVerification,
+} from "firebase/auth";
+import { userSignUpApi } from "@/utils/api";
+import useAutoFocus from "../Common/useAutoFocus";
+
+const RegisterWithEmailForm = ({ OnHide, setIsMailSentSuccess }) => {
+  const auth = getAuth();
+  const emailRef = useAutoFocus();
+
+  // Form state management
+  const [formData, setFormData] = useState({
+    email: "",
+    username: "",
+    password: "",
+    IsPasswordVisible: false,
+    showLoader: false,
+  });
+
+  const { email, username, password, IsPasswordVisible, showLoader } = formData;
+
+  // Handle input changes
+  const handleInputChange = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  // Toggle password visibility
+  const togglePasswordVisibility = () => {
+    setFormData((prev) => ({
+      ...prev,
+      IsPasswordVisible: !prev.IsPasswordVisible,
+    }));
+  };
+
+  // Handle form submission
+  const handleSignup = async (e) => {
+    e.preventDefault();
+
+    // Validate email
+    if (!email) {
+      toast.error(t("emailRequired"));
+      return;
+    } else if (!/\S+@\S+\.\S+/.test(email)) {
+      toast.error(t("emailInvalid"));
+      return;
+    }
+
+    // Validate username
+    if (username?.trim() === "") {
+      toast.error(t("usernameRequired"));
+      return;
+    }
+
+    // Validate password
+    if (!password) {
+      toast.error(t("passwordRequired"));
+      return;
+    } else if (password.length < 6) {
+      toast.error(t("passwordTooShort"));
+      return;
+    }
+
+    try {
+      setFormData((prev) => ({ ...prev, showLoader: true }));
+
+      // Create user with email and password
+      const userCredential = await createUserWithEmailAndPassword(
+        auth,
+        email,
+        password
+      );
+      const user = userCredential.user;
+
+      // Send email verification
+      await sendEmailVerification(user);
+
+      // Register user in backend
+      try {
+        const response = await userSignUpApi.userSignup({
+          name: username ? username : "",
+          email: email ? email : "",
+          firebase_id: user?.uid,
+          type: "email",
+          registration: true,
+        });
+
+        // Close modal and show success message
+        OnHide();
+        setIsMailSentSuccess(true);
+      } catch (error) {
+        console.log("error", error);
+        toast.error(t("registrationFailed"));
+      }
+    } catch (error) {
+      const errorCode = error.code;
+      console.log(error);
+      handleFirebaseAuthError(errorCode);
+    } finally {
+      setFormData((prev) => ({ ...prev, showLoader: false }));
+    }
+  };
+
+  return (
+    <form className="flex flex-col gap-6" onSubmit={handleSignup}>
+      {/* Email Input */}
+      <div className="labelInputCont">
+        <Label className="requiredInputLabel">{t("email")}</Label>
+        <Input
+          type="email"
+          placeholder={t("enterEmail")}
+          value={email}
+          onChange={(e) => handleInputChange("email", e.target.value)}
+          ref={emailRef}
+          required
+        />
+      </div>
+
+      {/* Username Input */}
+      <div className="labelInputCont">
+        <Label className="requiredInputLabel">{t("username")}</Label>
+        <Input
+          type="text"
+          placeholder={t("typeUsername")}
+          value={username}
+          onChange={(e) => handleInputChange("username", e.target.value)}
+          required
+        />
+      </div>
+
+      {/* Password Input */}
+      <div className="labelInputCont">
+        <Label className="requiredInputLabel">{t("password")}</Label>
+        <div className="flex items-center relative">
+          <Input
+            type={IsPasswordVisible ? "text" : "password"}
+            placeholder={t("enterPassword")}
+            className="ltr:pr-9 rtl:pl-9"
+            value={password}
+            onChange={(e) => handleInputChange("password", e.target.value)}
+            required
+          />
+          <button
+            type="button"
+            className="absolute ltr:right-3 rtl:left-3 cursor-pointer"
+            onClick={togglePasswordVisibility}
+          >
+            {IsPasswordVisible ? (
+              <FaRegEye size={20} />
+            ) : (
+              <FaRegEyeSlash size={20} />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Submit Button */}
+      <Button
+        type="submit"
+        disabled={showLoader}
+        className="text-xl text-white font-light px-4 py-2"
+        size="big"
+      >
+        {showLoader ? (
+          <Loader2 className="size-4 animate-spin" />
+        ) : (
+          t("verifyEmail")
+        )}
+      </Button>
+    </form>
+  );
+};
+
+export default RegisterWithEmailForm;
\ No newline at end of file
diff --git a/components/Auth/RegisterWithMobileForm.jsx b/components/Auth/RegisterWithMobileForm.jsx
new file mode 100644
index 0000000..6605d2b
--- /dev/null
+++ b/components/Auth/RegisterWithMobileForm.jsx
@@ -0,0 +1,310 @@
+import { useEffect, useState } from "react";
+import PhoneInput from "react-phone-input-2";
+import "react-phone-input-2/lib/style.css";
+import { Label } from "../ui/label";
+import { Button } from "../ui/button";
+import { Loader2 } from "lucide-react";
+import { isValidPhoneNumber } from "libphonenumber-js/max";
+import { toast } from "sonner";
+import { handleFirebaseAuthError, t } from "@/utils";
+import {
+  getAuth,
+  RecaptchaVerifier,
+  signInWithPhoneNumber,
+} from "firebase/auth";
+import { getOtpApi, getUserExistsApi } from "@/utils/api";
+import { useSelector } from "react-redux";
+import {
+  getOtpServiceProvider,
+  settingsData,
+} from "@/redux/reducer/settingSlice";
+import useAutoFocus from "../Common/useAutoFocus";
+import OtpScreen from "./OtpScreen";
+import { Input } from "../ui/input";
+import { FaRegEye, FaRegEyeSlash } from "react-icons/fa";
+
+const RegisterWithMobileForm = ({
+  OnHide,
+  setDescriptionState,
+  isOTPScreen,
+  setIsOTPScreen,
+}) => {
+  const auth = getAuth();
+  const settings = useSelector(settingsData);
+  const isDemoMode = settings?.demo_mode;
+  const otp_service_provider = useSelector(getOtpServiceProvider);
+  const phoneInputRef = useAutoFocus();
+
+  // Mobile registration states
+  const [number, setNumber] = useState(isDemoMode ? "919876598765" : "");
+  const [countryCode, setCountryCode] = useState("");
+  const [regionCode, setRegionCode] = useState("");
+  const [confirmationResult, setConfirmationResult] = useState(null);
+  const [showLoader, setShowLoader] = useState(false);
+  const [resendTimer, setResendTimer] = useState(0);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [password, setPassword] = useState("");
+
+  // Remove any non-digit characters from the country code
+  const countryCodeDigitsOnly = countryCode.replace(/\D/g, "");
+
+  // Check if the entered number starts with the selected country code
+  const startsWithCountryCode = number.startsWith(countryCodeDigitsOnly);
+
+  // If the number starts with the country code, remove it
+  const formattedNumber = startsWithCountryCode
+    ? number.substring(countryCodeDigitsOnly.length)
+    : number;
+
+  // Generate reCAPTCHA verifier
+  const generateRecaptcha = async () => {
+    // Reuse existing verifier if it's still valid
+    if (window.recaptchaVerifier && !window.recaptchaVerifier.destroyed) {
+      return window.recaptchaVerifier;
+    }
+    const recaptchaContainer = document.getElementById("recaptcha-container");
+    if (!recaptchaContainer) {
+      console.error("Container element 'recaptcha-container' not found.");
+      return null;
+    }
+    // Clear container and reset reference
+    recaptchaContainer.innerHTML = "";
+    window.recaptchaVerifier = undefined;
+    try {
+      window.recaptchaVerifier = new RecaptchaVerifier(
+        auth,
+        recaptchaContainer,
+        { size: "invisible" }
+      );
+      return window.recaptchaVerifier;
+    } catch (error) {
+      console.error("Error initializing RecaptchaVerifier:", error.message);
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      recaptchaClear();
+    };
+  }, []);
+
+  const recaptchaClear = async () => {
+    if (window.recaptchaVerifier && !window.recaptchaVerifier.destroyed) {
+      try {
+        await window.recaptchaVerifier.clear();
+      } catch (error) {
+        // Ignore errors - verifier might already be cleared
+      }
+    }
+    window.recaptchaVerifier = undefined;
+    const recaptchaContainer = document.getElementById("recaptcha-container");
+    if (recaptchaContainer) {
+      recaptchaContainer.innerHTML = "";
+    }
+  };
+
+  // Send OTP with Twilio
+  const sendOtpWithTwillio = async (PhoneNumber) => {
+    try {
+      const response = await getOtpApi.getOtp({
+        number: formattedNumber,
+        country_code: countryCode,
+      });
+      if (response?.data?.error === false) {
+        toast.success(t("otpSentSuccess"));
+        setIsOTPScreen(true);
+        setResendTimer(60);
+        setDescriptionState({
+          type: "otp",
+          phoneNumber: PhoneNumber,
+        });
+      } else {
+        toast.error(t("failedToSendOtp"));
+      }
+    } catch (error) {
+      console.error("error", error);
+    } finally {
+      setShowLoader(false);
+    }
+  };
+
+  // Send OTP with Firebase
+  const sendOtpWithFirebase = async (PhoneNumber) => {
+    try {
+      const appVerifier = await generateRecaptcha();
+      const confirmation = await signInWithPhoneNumber(
+        auth,
+        PhoneNumber,
+        appVerifier
+      );
+      setConfirmationResult(confirmation);
+      toast.success(t("otpSentSuccess"));
+      setIsOTPScreen(true);
+      setResendTimer(60);
+      setDescriptionState({
+        type: "otp",
+        phoneNumber: PhoneNumber,
+      });
+    } catch (error) {
+      console.log(error);
+      const errorCode = error.code;
+      handleFirebaseAuthError(errorCode);
+    } finally {
+      setShowLoader(false);
+    }
+  };
+
+  // Handle phone input change
+  const handleInputChange = (value, data) => {
+    setNumber(value);
+    setCountryCode("+" + (data?.dialCode || ""));
+    setRegionCode(data?.countryCode.toLowerCase() || "");
+  };
+
+  // Handle country change
+  const handleCountryChange = (code) => {
+    setCountryCode(code);
+  };
+
+  const checkIfUserExistsOrNot = async () => {
+    try {
+      const res = await getUserExistsApi.getUserExists({
+        mobile: formattedNumber,
+        country_code: countryCode,
+      });
+      if (res?.data?.error === false) {
+        toast.error(res?.data?.message);
+        return true;
+      } else {
+        return false;
+      }
+    } catch (error) {
+      console.log(error);
+      return false;
+    }
+  };
+
+  // Handle form submission
+  const handleMobileSubmit = async (e) => {
+    e.preventDefault();
+
+    // Validate phone number
+    const PhoneNumber = `${countryCode}${formattedNumber}`;
+
+    if (!isValidPhoneNumber(PhoneNumber)) {
+      toast.error(t("invalidPhoneNumber"));
+      return;
+    }
+
+    // Validate password
+    if (!password) {
+      toast.error(t("passwordRequired"));
+      return;
+    }
+    if (password.length < 6) {
+      toast.error(t("passwordTooShort"));
+      return;
+    }
+    // Send OTP
+    setShowLoader(true);
+    const isUserExists = await checkIfUserExistsOrNot();
+    if (isUserExists) {
+      setShowLoader(false);
+      return;
+    }
+    if (otp_service_provider === "twilio") {
+      await sendOtpWithTwillio(PhoneNumber);
+    } else {
+      await sendOtpWithFirebase(PhoneNumber);
+    }
+  };
+
+  // Toggle password visibility
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible((prev) => !prev);
+  };
+
+  // Show OTP screen if OTP was sent
+  if (isOTPScreen) {
+    return (
+      <OtpScreen
+        OnHide={OnHide}
+        generateRecaptcha={generateRecaptcha}
+        countryCode={countryCode}
+        formattedNumber={formattedNumber}
+        confirmationResult={confirmationResult}
+        setConfirmationResult={setConfirmationResult}
+        setResendTimer={setResendTimer}
+        resendTimer={resendTimer}
+        regionCode={regionCode}
+        password={password}
+        isDemoMode={isDemoMode}
+        isRegister={true}
+        key="register-otp"
+      />
+    );
+  }
+
+  // Show mobile registration form
+  return (
+    <form className="flex flex-col gap-6" onSubmit={handleMobileSubmit}>
+      <div className="labelInputCont">
+        <Label className="requiredInputLabel">{t("phoneNumber")}</Label>
+        <PhoneInput
+          country={process.env.NEXT_PUBLIC_DEFAULT_COUNTRY}
+          value={number}
+          onChange={(phone, data) => handleInputChange(phone, data)}
+          onCountryChange={handleCountryChange}
+          inputProps={{
+            name: "phone",
+            required: true,
+            ref: phoneInputRef,
+          }}
+          enableLongNumbers
+        />
+      </div>
+
+      {/* Password Input */}
+      <div className="labelInputCont">
+        <Label className="requiredInputLabel">{t("password")}</Label>
+        <div className="flex items-center relative">
+          <Input
+            type={isPasswordVisible ? "text" : "password"}
+            placeholder={t("enterPassword")}
+            className="ltr:pr-9 rtl:pl-9"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <button
+            type="button"
+            className="absolute ltr:right-3 rtl:left-3 cursor-pointer"
+            onClick={togglePasswordVisibility}
+          >
+            {isPasswordVisible ? (
+              <FaRegEye size={20} />
+            ) : (
+              <FaRegEyeSlash size={20} />
+            )}
+          </button>
+        </div>
+      </div>
+
+      <Button
+        type="submit"
+        disabled={showLoader}
+        className="text-xl text-white font-light px-4 py-2"
+        size="big"
+      >
+        {showLoader ? (
+          <Loader2 className="size-4 animate-spin" />
+        ) : (
+          t("continue")
+        )}
+      </Button>
+    </form>
+  );
+};
+
+export default RegisterWithMobileForm;
diff --git a/components/Auth/ResetPasswordScreen.jsx b/components/Auth/ResetPasswordScreen.jsx
new file mode 100644
index 0000000..cc5758d
--- /dev/null
+++ b/components/Auth/ResetPasswordScreen.jsx
@@ -0,0 +1,127 @@
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { Loader2 } from "lucide-react";
+import { FaRegEye, FaRegEyeSlash } from "react-icons/fa";
+import { toast } from "sonner";
+import { t } from "@/utils";
+import { resetPasswordApi, userSignUpApi } from "@/utils/api";
+import { useState } from "react";
+
+const ResetPasswordScreen = ({
+  formattedNumber,
+  countryCode,
+  onSuccess,
+  onCancel,
+  FirebaseId,
+}) => {
+  const [newPassword, setNewPassword] = useState("");
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [resetPasswordLoader, setResetPasswordLoader] = useState(false);
+
+  const handleResetPassword = async (e) => {
+    e.preventDefault();
+
+    if (!newPassword) {
+      toast.error(t("passwordRequired"));
+      return;
+    }
+
+    if (newPassword.length < 6) {
+      toast.error(t("passwordTooShort"));
+      return;
+    }
+
+    setResetPasswordLoader(true);
+    try {
+      // Step 1: Get token by calling userSignUpApi
+      const loginResponse = await userSignUpApi.userSignup({
+        mobile: formattedNumber,
+        country_code: countryCode,
+        type: "phone",
+        firebase_id: FirebaseId,
+      });
+
+      // Extract token from response
+      const token = loginResponse?.data?.token;
+
+      if (!token) {
+        toast.error(t("errorOccurred"));
+        return;
+      }
+
+      const response = await resetPasswordApi.resetPassword({
+        number: formattedNumber,
+        country_code: countryCode,
+        new_password: newPassword,
+        token: token,
+      });
+
+      if (response?.data?.error === false) {
+        toast.success(response?.data?.message);
+        onSuccess(); // Go back to login screen
+      } else {
+        toast.error(response?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error(t("errorOccurred"));
+    } finally {
+      setResetPasswordLoader(false);
+    }
+  };
+
+  return (
+    <form className="flex flex-col gap-6 mt-3.5" onSubmit={handleResetPassword}>
+      <div className="labelInputCont">
+        <Label className="requiredInputLabel">{t("newPassword")}</Label>
+        <div className="flex items-center relative">
+          <Input
+            type={isPasswordVisible ? "text" : "password"}
+            placeholder={t("enterNewPassword")}
+            className="ltr:pr-9 rtl:pl-9"
+            value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
+            required
+          />
+          <button
+            type="button"
+            className="absolute ltr:right-3 rtl:left-3 cursor-pointer"
+            onClick={() => setIsPasswordVisible(!isPasswordVisible)}
+          >
+            {isPasswordVisible ? (
+              <FaRegEye size={20} />
+            ) : (
+              <FaRegEyeSlash size={20} />
+            )}
+          </button>
+        </div>
+      </div>
+      <Button
+        type="submit"
+        disabled={resetPasswordLoader}
+        className="text-xl text-white font-light px-4 py-2"
+        size="big"
+      >
+        {resetPasswordLoader ? (
+          <Loader2 className="size-6 animate-spin" />
+        ) : (
+          t("submitResetPassword")
+        )}
+      </Button>
+      {onCancel && (
+        <Button
+          type="button"
+          variant="outline"
+          className="text-lg text-black font-light px-4 py-2"
+          size="big"
+          onClick={onCancel}
+        >
+          {t("cancel")}
+        </Button>
+      )}
+    </form>
+  );
+};
+
+export default ResetPasswordScreen;
diff --git a/components/Auth/TermsAndPrivacyLinks.jsx b/components/Auth/TermsAndPrivacyLinks.jsx
new file mode 100644
index 0000000..b9230d5
--- /dev/null
+++ b/components/Auth/TermsAndPrivacyLinks.jsx
@@ -0,0 +1,26 @@
+import CustomLink from "@/components/Common/CustomLink";
+
+const TermsAndPrivacyLinks = ({ t, settings, OnHide }) => {
+  return (
+    <div className="text-center">
+      {t("agreeSignIn")} {settings?.company_name} <br />
+      <CustomLink
+        href="/terms-and-condition"
+        className="text-primary underline"
+        onClick={OnHide}
+      >
+        {t("termsService")}
+      </CustomLink>{" "}
+      {t("and")}{" "}
+      <CustomLink
+        href="/privacy-policy"
+        className="text-primary underline"
+        onClick={OnHide}
+      >
+        {t("privacyPolicy")}
+      </CustomLink>
+    </div>
+  );
+};
+
+export default TermsAndPrivacyLinks;
diff --git a/components/Auth/UnauthorizedModal.jsx b/components/Auth/UnauthorizedModal.jsx
new file mode 100644
index 0000000..efcaa9b
--- /dev/null
+++ b/components/Auth/UnauthorizedModal.jsx
@@ -0,0 +1,39 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { getIsUnauthorized, setIsUnauthorized } from "@/redux/reducer/globalStateSlice";
+import { useDispatch, useSelector } from "react-redux";
+
+const UnauthorizedModal = () => {
+  const dispatch = useDispatch();
+  const open = useSelector(getIsUnauthorized);
+
+  const handleOk = () => {
+    dispatch(setIsUnauthorized(false));
+  };
+
+  return (
+    <AlertDialog open={open}>
+      <AlertDialogContent onInteractOutside={(e) => e.preventDefault()}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Unauthorized</AlertDialogTitle>
+          <AlertDialogDescription>
+            You do not have permission to access this resource. Please log in or
+            contact the administrator.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogAction onClick={handleOk}>OK</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default UnauthorizedModal;
diff --git a/components/BreadCrumb/BreadCrumb.jsx b/components/BreadCrumb/BreadCrumb.jsx
new file mode 100644
index 0000000..157823a
--- /dev/null
+++ b/components/BreadCrumb/BreadCrumb.jsx
@@ -0,0 +1,114 @@
+"use client";
+import { Fragment } from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { useSelector } from "react-redux";
+import { t } from "@/utils";
+import { useSearchParams } from "next/navigation";
+import CustomLink from "@/components/Common/CustomLink";
+import { getCurrentLangCode } from "@/redux/reducer/languageSlice";
+
+const BreadCrumb = ({ title2 }) => {
+  const langCode = useSelector(getCurrentLangCode);
+  const searchParams = useSearchParams();
+  const BreadcrumbPath = useSelector(
+    (state) => state.BreadcrumbPath.BreadcrumbPath
+  );
+
+  const items = [
+    {
+      title: t("home"),
+      key: "home",
+      href: "/",
+      isLink: true,
+    },
+    ...(title2
+      ? [
+          {
+            title: title2,
+            key: "custom",
+            isLink: false,
+          },
+        ]
+      : BreadcrumbPath && BreadcrumbPath.length > 0
+      ? BreadcrumbPath.map((crumb, index) => {
+          const isLast = index === BreadcrumbPath.length - 1;
+          return {
+            title: crumb.name,
+            key: index + 1,
+            href: crumb?.slug,
+            isLink: !isLast && !crumb.isCurrent,
+            onClick: (e) => {
+              e.preventDefault();
+              if (crumb.isAllCategories) {
+                // For "All Categories", preserve other URL parameters but remove category
+                const newSearchParams = new URLSearchParams(searchParams);
+                newSearchParams.delete("category");
+                newSearchParams.set("lang", langCode);
+                const newUrl = `/ads?${newSearchParams.toString()}`;
+                window.history.pushState(null, "", newUrl);
+              } else {
+                // ✅ ensure lang param is present
+                const newSearchParams = new URLSearchParams(searchParams);
+                newSearchParams.set("lang", langCode);
+
+                // if crumb.slug already has query params, merge them
+                let newUrl = crumb.slug.includes("?")
+                  ? `${crumb.slug}&lang=${langCode}`
+                  : `${crumb.slug}?lang=${langCode}`;
+
+                window.history.pushState(null, "", newUrl);
+              }
+            },
+          };
+        })
+      : []),
+  ];
+
+  return (
+    <div className="bg-muted">
+      <div className="container py-5">
+        <Breadcrumb>
+          <BreadcrumbList>
+            {items?.map((item, index) => {
+              return (
+                <Fragment key={index}>
+                  <BreadcrumbItem>
+                    {item.isLink && item.onClick ? (
+                      <BreadcrumbLink
+                        href="#"
+                        className="text-black"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          item.onClick(e);
+                        }}
+                      >
+                        {item.title}
+                      </BreadcrumbLink>
+                    ) : item.isLink ? (
+                      <CustomLink href={item?.href} passHref>
+                        <BreadcrumbLink asChild className="text-black">
+                          <span>{item.title}</span>
+                        </BreadcrumbLink>
+                      </CustomLink>
+                    ) : (
+                      <p className="text-black">{item.title}</p>
+                    )}
+                  </BreadcrumbItem>
+                  {index !== items?.length - 1 && <BreadcrumbSeparator />}
+                </Fragment>
+              );
+            })}
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+    </div>
+  );
+};
+
+export default BreadCrumb;
diff --git a/components/Common/CustomImage.jsx b/components/Common/CustomImage.jsx
new file mode 100644
index 0000000..85974b2
--- /dev/null
+++ b/components/Common/CustomImage.jsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { getPlaceholderImage } from "@/redux/reducer/settingSlice";
+import Image from "next/image";
+import { useState } from "react";
+import { useSelector } from "react-redux";
+
+const CustomImage = ({ src, alt, loading = "lazy", ...props }) => {
+  const placeholderImage = useSelector(getPlaceholderImage);
+  const fallback = "/assets/Transperant_Placeholder.png";
+  // Initial source can be string OR object (StaticImageData)
+  const initialSrc =
+    (src && (typeof src === "string" ? src.trim() : src)) ||
+    (placeholderImage && placeholderImage.trim?.()) ||
+    fallback;
+
+  const [imgSrc, setImgSrc] = useState(initialSrc);
+
+  const handleError = () => {
+    if (
+      imgSrc !== placeholderImage &&
+      typeof placeholderImage === "string" &&
+      placeholderImage.trim()
+    ) {
+      setImgSrc(placeholderImage);
+    } else if (imgSrc !== fallback) {
+      setImgSrc(fallback);
+    }
+  };
+
+  return (
+    <Image
+      src={imgSrc}
+      alt={alt}
+      onError={handleError}
+      loading={loading} // Dynamic loading: defaults to "lazy" if not provided
+      {...props} // width, height, className etc can still be passed
+    />
+  );
+};
+
+export default CustomImage;
diff --git a/components/Common/CustomLink.jsx b/components/Common/CustomLink.jsx
new file mode 100644
index 0000000..3e319de
--- /dev/null
+++ b/components/Common/CustomLink.jsx
@@ -0,0 +1,29 @@
+"use client";
+import { getCurrentLangCode } from "@/redux/reducer/languageSlice";
+import { getDefaultLanguageCode } from "@/redux/reducer/settingSlice";
+import Link from "next/link";
+import { useSelector } from "react-redux";
+
+const CustomLink = ({ href, children, ...props }) => {
+  const defaultLangCode = useSelector(getDefaultLanguageCode);
+  const currentLangCode = useSelector(getCurrentLangCode);
+
+  const langCode = currentLangCode || defaultLangCode;
+
+  // Split hash (#) safely from href
+  const [baseHref, hash = ""] = href.split("#");
+
+  // Append lang param safely
+  const separator = baseHref.includes("?") ? "&" : "?";
+  const newHref = `${baseHref}${separator}lang=${langCode}${
+    hash ? `#${hash}` : ""
+  }`;
+
+  return (
+    <Link href={newHref} {...props}>
+      {children}
+    </Link>
+  );
+};
+
+export default CustomLink;
diff --git a/components/Common/Header.jsx b/components/Common/Header.jsx
new file mode 100644
index 0000000..0f7e3d4
--- /dev/null
+++ b/components/Common/Header.jsx
@@ -0,0 +1,11 @@
+"use client";
+import { usePathname } from "next/navigation";
+import LandingHeader from "../PagesComponent/LandingPage/LandingHeader";
+import HomeHeader from "../PagesComponent/Home/HomeHeader";
+
+const Header = () => {
+  const pathname = usePathname();
+  return pathname === "/landing" ? <LandingHeader /> : <HomeHeader />;
+};
+
+export default Header;
diff --git a/components/Common/LanguageDropdown.jsx b/components/Common/LanguageDropdown.jsx
new file mode 100644
index 0000000..a25cce4
--- /dev/null
+++ b/components/Common/LanguageDropdown.jsx
@@ -0,0 +1,218 @@
+"use client";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  CurrentLanguageData,
+  setCurrentLanguage,
+} from "@/redux/reducer/languageSlice";
+import { getCityData, saveCity } from "@/redux/reducer/locationSlice";
+import { getIsPaidApi, settingsData } from "@/redux/reducer/settingSlice";
+import { isEmptyObject, updateStickyNoteTranslations } from "@/utils";
+import { getLanguageApi, getLocationApi } from "@/utils/api";
+import {
+  setHasFetchedCategories,
+  setHasFetchedSystemSettings,
+} from "@/utils/getFetcherStatus";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { toast } from "sonner";
+import CustomImage from "./CustomImage";
+
+const LanguageDropdown = () => {
+  const IsPaidApi = useSelector(getIsPaidApi);
+  const router = useRouter();
+  const dispatch = useDispatch();
+  const pathname = usePathname();
+  const location = useSelector(getCityData);
+  const settings = useSelector(settingsData);
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const currentLangCode = CurrentLanguage?.code;
+  const languages = settings && settings?.languages;
+  const isRTL = CurrentLanguage.rtl;
+
+  const searchParams = useSearchParams();
+  const langCode = searchParams?.get("lang");
+  const params = new URLSearchParams(searchParams.toString());
+
+  const setDefaultLanguage = async () => {
+    try {
+      params.set("lang", settings?.default_language.toLowerCase());
+      router.push(`${pathname}?${params.toString()}`, { scroll: false });
+      const language_code = settings?.default_language;
+      const res = await getLanguageApi.getLanguage({
+        language_code,
+        type: "web",
+      });
+      if (res?.data?.error === false) {
+        dispatch(setCurrentLanguage(res?.data?.data));
+        document.documentElement.lang =
+          res?.data?.data?.code?.toLowerCase() ||
+          settings?.default_language.toLowerCase();
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    // Check if Redux language is empty or invalid
+    if (isEmptyObject(CurrentLanguage)) {
+      setDefaultLanguage();
+      return;
+    }
+
+    // If URL has lang parameter and languages are loaded, check if valid and update if needed
+    if (langCode && languages.length > 0) {
+      const urlLang = languages.find(
+        (lang) => lang.code?.toUpperCase() === langCode.toUpperCase()
+      );
+      if (
+        urlLang &&
+        currentLangCode?.toUpperCase() !== urlLang.code.toUpperCase()
+      ) {
+        getLanguageData(urlLang.code);
+        return;
+      }
+    }
+
+    // Check if current language code is no longer valid (language was removed from settings)
+    if (languages && !languages.some((lang) => lang.code === currentLangCode)) {
+      setDefaultLanguage();
+      return;
+    }
+    if (!langCode) {
+      params.set("lang", currentLangCode);
+      router.push(`${pathname}?${params.toString()}`, { scroll: false });
+    }
+  }, [langCode]);
+
+  const getLanguageData = async (
+    language_code = settings?.default_language
+  ) => {
+    try {
+      const res = await getLanguageApi.getLanguage({
+        language_code,
+        type: "web",
+      });
+      if (res?.data?.error === false) {
+        dispatch(setCurrentLanguage(res?.data?.data));
+        getLocationAfterLanguageChange(language_code);
+        document.documentElement.lang =
+          res?.data?.data?.code?.toLowerCase() || "en";
+
+        setHasFetchedSystemSettings(false);
+        setHasFetchedCategories(false);
+        updateStickyNoteTranslations();
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const getLocationAfterLanguageChange = async (language_code) => {
+    if (IsPaidApi) {
+      return;
+    }
+
+    // If no country/state/city/area stored, skip API call
+    if (
+      !location?.country &&
+      !location?.state &&
+      !location?.city &&
+      !location?.area
+    ) {
+      return;
+    }
+
+    const response = await getLocationApi.getLocation({
+      lat: location?.lat,
+      lng: location?.long,
+      lang: language_code,
+    });
+
+    if (response?.data.error === false) {
+      const result = response?.data?.data;
+      const updatedLocation = {};
+
+      if (location?.country) updatedLocation.country = result?.country;
+      if (location?.state) updatedLocation.state = result?.state;
+      if (location?.city) updatedLocation.city = result?.city;
+      if (location?.area) {
+        updatedLocation.area = result?.area;
+        updatedLocation.areaId = result?.area_id;
+      }
+      updatedLocation.lat = location?.lat;
+      updatedLocation.long = location?.long;
+
+      // ✅ Dynamically build formattedAddress only with existing parts
+      const parts = [];
+      if (location?.area) parts.push(result?.area_translation);
+      if (location?.city) parts.push(result?.city_translation);
+      if (location?.state) parts.push(result?.state_translation);
+      if (location?.country) parts.push(result?.country_translation);
+      updatedLocation.address_translated = parts.filter(Boolean).join(", ");
+      saveCity(updatedLocation);
+    }
+  };
+
+  const handleLanguageSelect = (id) => {
+    const lang = languages?.find((item) => item.id === Number(id));
+    if (CurrentLanguage.id === lang.id) {
+      return;
+    }
+    params.set("lang", lang.code.toLowerCase()); // Store language code
+    // Push new URL with lang param
+    router.push(`${pathname}?${params.toString()}`, { scroll: false });
+    getLanguageData(lang?.code);
+  };
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="border rounded-full py-2 px-4">
+        <div className="flex items-center gap-1">
+          <CustomImage
+            key={CurrentLanguage?.id}
+            src={CurrentLanguage?.image}
+            alt={CurrentLanguage?.name || "language"}
+            width={20}
+            height={20}
+            className="rounded-full"
+          />
+          <span>{CurrentLanguage?.code}</span>
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="min-w-0 max-h-[250px] overflow-y-auto"
+        align={isRTL ? "start" : "end"}
+      >
+        {languages &&
+          languages.map((lang) => (
+            <DropdownMenuItem
+              key={lang?.id}
+              onClick={() => handleLanguageSelect(lang.id)}
+              className="cursor-pointer"
+            >
+              <CustomImage
+                src={lang?.image}
+                alt={lang.name || "english"}
+                width={20}
+                height={20}
+                className="rounded-full"
+              />
+              <span>{lang.code}</span>
+            </DropdownMenuItem>
+          ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default LanguageDropdown;
diff --git a/components/Common/Loader.jsx b/components/Common/Loader.jsx
new file mode 100644
index 0000000..08de329
--- /dev/null
+++ b/components/Common/Loader.jsx
@@ -0,0 +1,12 @@
+const Loader = () => {
+  return (
+    <div className="h-screen flex items-center justify-center">
+      <div className="relative w-12 h-12">
+        <div className="absolute w-12 h-12 bg-primary rounded-full animate-ping"></div>
+        <div className="absolute w-12 h-12 bg-primary rounded-full animate-ping delay-1000"></div>
+      </div>
+    </div>
+  );
+};
+
+export default Loader;
diff --git a/components/Common/MapComponent.jsx b/components/Common/MapComponent.jsx
new file mode 100644
index 0000000..9d8e426
--- /dev/null
+++ b/components/Common/MapComponent.jsx
@@ -0,0 +1,89 @@
+import { useSelector } from "react-redux";
+import {
+  getDefaultLatitude,
+  getDefaultLongitude,
+} from "@/redux/reducer/settingSlice";
+import { useEffect, useRef } from "react";
+import { MapContainer, Marker, TileLayer, useMapEvents } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import L from "leaflet";
+
+// Fix Leaflet default marker icon issue
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl:
+    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
+  iconUrl:
+    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
+  shadowUrl:
+    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
+});
+
+const MapClickHandler = ({ onMapClick }) => {
+  useMapEvents({
+    click: (e) => {
+      onMapClick(e.latlng);
+    },
+  });
+  return null;
+};
+
+const MapComponent = ({ getLocationWithMap, location }) => {
+  const latitude = useSelector(getDefaultLatitude);
+  const longitude = useSelector(getDefaultLongitude);
+
+  const mapRef = useRef();
+  const position = {
+    lat: Number(location?.lat) || latitude,
+    lng: Number(location?.long) || longitude,
+  };
+
+  useEffect(() => {
+    if (mapRef.current && position.lat && position.lng) {
+      mapRef.current.flyTo(
+        [position.lat, position.lng],
+        mapRef.current.getZoom()
+      );
+    }
+  }, [position?.lat, position?.lng]);
+
+  const containerStyle = {
+    width: "100%",
+    height: "400px",
+    zIndex: 0,
+  };
+
+  const handleMapClick = (latlng) => {
+    if (getLocationWithMap) {
+      getLocationWithMap({
+        lat: latlng.lat,
+        lng: latlng.lng,
+      });
+    }
+  };
+
+  return (
+    <>
+      <MapContainer
+        style={containerStyle}
+        center={[position?.lat, position?.lng]}
+        zoom={6}
+        ref={mapRef}
+        whenCreated={(mapInstance) => {
+          mapRef.current = mapInstance;
+        }}
+      >
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <MapClickHandler onMapClick={handleMapClick} />
+        {position?.lat && position?.lng && (
+          <Marker position={[position?.lat, position?.lng]}></Marker>
+        )}
+      </MapContainer>
+    </>
+  );
+};
+
+export default MapComponent;
diff --git a/components/Common/OpenInAppDrawer.jsx b/components/Common/OpenInAppDrawer.jsx
new file mode 100644
index 0000000..564e6a8
--- /dev/null
+++ b/components/Common/OpenInAppDrawer.jsx
@@ -0,0 +1,83 @@
+import { Button } from "@/components/ui/button"
+import {
+    Drawer,
+    DrawerContent,
+    DrawerDescription,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerTitle,
+} from "@/components/ui/drawer"
+import { settingsData } from "@/redux/reducer/settingSlice";
+import { t } from "@/utils"
+import { usePathname } from "next/navigation";
+import { useSelector } from "react-redux";
+import { toast } from "sonner";
+
+const OpenInAppDrawer = ({ isOpenInApp, setIsOpenInApp }) => {
+
+    const path = usePathname()
+    const settings = useSelector(settingsData);
+    const companyName = settings?.company_name;
+    const scheme = settings?.deep_link_scheme;
+    const playStoreLink = settings?.play_store_link;
+    const appStoreLink = settings?.app_store_link;
+
+
+    function handleOpenInApp() {
+
+        var appScheme = `${scheme}://${window.location.hostname}${path}`;
+        var userAgent = navigator.userAgent || navigator.vendor || window.opera;
+        var isAndroid = /android/i.test(userAgent);
+        var isIOS = /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;
+
+        let applicationLink;
+        if (isAndroid) {
+            applicationLink = playStoreLink;
+        } else if (isIOS) {
+            applicationLink = appStoreLink;
+        } else {
+            // Fallback for desktop or other platforms
+            applicationLink = playStoreLink || appStoreLink;
+        }
+
+        // Attempt to open the app
+        window.location.href = appScheme;
+        // Set a timeout to check if app opened
+        setTimeout(function () {
+            if (document.hidden || document.webkitHidden) {
+                // App opened successfully
+            } else {
+                // App is not installed, ask user if they want to go to app store
+                if (confirm(`${companyName} ${t('appIsNotInstalled')} ${isIOS ? t('appStore') : t('playStore')}?`)) {
+
+                    if (!applicationLink) {
+                        toast.error(`${companyName} ${isIOS ? t('appStore') : t('playStore')} ${t('linkNotAvailable')}`);
+                        return;
+                    }
+
+                    window.location.href = applicationLink;
+                }
+            }
+        }, 1000);
+    }
+
+    return (
+        <Drawer open={isOpenInApp} onOpenChange={setIsOpenInApp}>
+            <DrawerContent>
+                <DrawerHeader>
+                    <DrawerTitle>{`${t('viewIn')} ${companyName} ${t('app')}`}</DrawerTitle>
+                    <DrawerDescription>
+                        {t('getTheBestExperienceByOpeningThisInOurMobileApp')}
+                    </DrawerDescription>
+                </DrawerHeader>
+                <DrawerFooter>
+                    <Button onClick={handleOpenInApp}>
+                        {t('openInApp')}
+                    </Button>
+                </DrawerFooter>
+            </DrawerContent>
+        </Drawer>
+    )
+}
+
+export default OpenInAppDrawer 
\ No newline at end of file
diff --git a/components/Common/PageLoader.jsx b/components/Common/PageLoader.jsx
new file mode 100644
index 0000000..90ef798
--- /dev/null
+++ b/components/Common/PageLoader.jsx
@@ -0,0 +1,14 @@
+"use client"
+
+const PageLoader = () => {
+    return (
+        <div className="h-[calc(100vh-20vh)] flex items-center justify-center">
+            <div className="relative w-12 h-12">
+                <div className="absolute w-12 h-12 bg-primary rounded-full animate-ping"></div>
+                <div className="absolute w-12 h-12 bg-primary rounded-full animate-ping delay-1000"></div>
+            </div>
+        </div>
+    )
+}
+
+export default PageLoader
\ No newline at end of file
diff --git a/components/Common/Pagination.jsx b/components/Common/Pagination.jsx
new file mode 100644
index 0000000..cb6e902
--- /dev/null
+++ b/components/Common/Pagination.jsx
@@ -0,0 +1,113 @@
+"use client";
+import {
+  Pagination as PaginationContainer,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+
+const Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  className = "",
+}) => {
+  const handlePageChange = (page) => {
+    onPageChange(page);
+  };
+
+  const generatePaginationItems = () => {
+    const items = [];
+
+    if (totalPages <= 6) {
+      for (let i = 1; i <= totalPages; i++) {
+        items.push(i);
+      }
+    } else {
+      if (currentPage <= 3) {
+        for (let i = 1; i <= 4; i++) {
+          items.push(i);
+        }
+        items.push(null); // Ellipsis
+        items.push(totalPages);
+      } else if (currentPage >= totalPages - 2) {
+        items.push(1);
+        items.push(null); // Ellipsis
+        for (let i = totalPages - 3; i <= totalPages; i++) {
+          items.push(i);
+        }
+      } else {
+        items.push(1);
+        items.push(null); // Ellipsis
+        items.push(currentPage - 1);
+        items.push(currentPage);
+        items.push(currentPage + 1);
+        items.push(null); // Ellipsis
+        items.push(totalPages);
+      }
+    }
+
+    return items;
+  };
+
+  // Don't render if there's only 1 page or no pages
+  if (totalPages <= 1) return null;
+
+  return (
+    <PaginationContainer className={className}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious
+            href="#"
+            onClick={(e) => {
+              e.preventDefault();
+              if (currentPage > 1) handlePageChange(currentPage - 1);
+            }}
+            className={
+              currentPage === 1 ? "pointer-events-none opacity-50" : ""
+            }
+          />
+        </PaginationItem>
+
+        {generatePaginationItems().map((page, index) =>
+          page === null ? (
+            <PaginationItem key={`ellipsis-${index}`}>
+              <PaginationEllipsis />
+            </PaginationItem>
+          ) : (
+            <PaginationItem key={page}>
+              <PaginationLink
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  handlePageChange(page);
+                }}
+                isActive={page === currentPage}
+              >
+                {page}
+              </PaginationLink>
+            </PaginationItem>
+          )
+        )}
+
+        <PaginationItem>
+          <PaginationNext
+            href="#"
+            onClick={(e) => {
+              e.preventDefault();
+              if (currentPage < totalPages) handlePageChange(currentPage + 1);
+            }}
+            className={
+              currentPage === totalPages ? "pointer-events-none opacity-50" : ""
+            }
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </PaginationContainer>
+  );
+};
+
+export default Pagination;
diff --git a/components/Common/ProductCard.jsx b/components/Common/ProductCard.jsx
new file mode 100644
index 0000000..c806a20
--- /dev/null
+++ b/components/Common/ProductCard.jsx
@@ -0,0 +1,120 @@
+import { formatDate, t } from "@/utils";
+import { BiBadgeCheck } from "react-icons/bi";
+import { FaHeart, FaRegHeart } from "react-icons/fa";
+import { manageFavouriteApi } from "@/utils/api";
+import { useSelector } from "react-redux";
+import { userSignUpData } from "@/redux/reducer/authSlice";
+import CustomLink from "@/components/Common/CustomLink";
+import { toast } from "sonner";
+import { setIsLoginOpen } from "@/redux/reducer/globalStateSlice";
+import CustomImage from "./CustomImage";
+
+const ProductCard = ({ item, handleLike }) => {
+  const userData = useSelector(userSignUpData);
+  const isJobCategory = Number(item?.category?.is_job_category) === 1;
+  const translated_item = item.translated_item;
+
+  const isHidePrice = isJobCategory
+    ? !item?.formatted_salary_range
+    : !item?.formatted_price;
+
+  const price = isJobCategory
+    ? item?.formatted_salary_range
+    : item?.formatted_price;
+
+  const productLink =
+    userData?.id === item?.user_id
+      ? `/my-listing/${item?.slug}`
+      : `/ad-details/${item.slug}`;
+
+  const handleLikeItem = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      if (!userData) {
+        setIsLoginOpen(true);
+        return;
+      }
+      const response = await manageFavouriteApi.manageFavouriteApi({
+        item_id: item?.id,
+      });
+      if (response?.data?.error === false) {
+        toast.success(response?.data?.message);
+        handleLike(item?.id);
+      } else {
+        toast.error(t("failedToLike"));
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error(t("failedToLike"));
+    }
+  };
+
+  return (
+    <CustomLink
+      href={productLink}
+      className="border p-2 rounded-2xl flex flex-col gap-2 h-full"
+    >
+      <div className="relative">
+        <CustomImage
+          src={item?.image}
+          width={288}
+          height={249}
+          className="w-full aspect-square rounded object-cover"
+          alt="Product"
+        />
+        {item?.is_feature && (
+          <div className="flex items-center gap-1 ltr:rounded-tl rtl:rounded-tr py-0.5 px-1 bg-primary absolute top-0 ltr:left-0 rtl:right-0">
+            <BiBadgeCheck size={16} color="white" />
+            <p className="text-white text-xs sm:text-sm">{t("featured")}</p>
+          </div>
+        )}
+
+        <div
+          onClick={handleLikeItem}
+          className="absolute h-10 w-10 ltr:right-2 rtl:left-2 top-2 bg-white p-2 rounded-full flex items-center justify-center text-primary"
+        >
+          {item?.is_liked ? (
+            <button>
+              <FaHeart size={24} className="like_icon" />
+            </button>
+          ) : (
+            <button>
+              <FaRegHeart size={24} className="like_icon" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="space-between gap-2">
+        {isHidePrice ? (
+          <p className="text-sm sm:text-base font-medium line-clamp-1">
+            {translated_item?.name || item?.name}
+          </p>
+        ) : (
+          <p
+            className="text-sm sm:text-lg font-bold break-all text-balance line-clamp-2"
+            title={price}
+          >
+            {price}
+          </p>
+        )}
+
+        <p className="text-xs sm:text-sm opacity-65 whitespace-nowrap">
+          {formatDate(item?.created_at)}&lrm;
+        </p>
+      </div>
+
+      {!isHidePrice && (
+        <p className="text-sm sm:text-base font-medium line-clamp-1">
+          {translated_item?.name || item?.name}
+        </p>
+      )}
+      <p className="text-xs sm:text-sm opacity-65 line-clamp-1">
+        {item?.translated_address}
+      </p>
+    </CustomLink>
+  );
+};
+
+export default ProductCard;
diff --git a/components/Common/ProductCardSkeleton.jsx b/components/Common/ProductCardSkeleton.jsx
new file mode 100644
index 0000000..e0d7844
--- /dev/null
+++ b/components/Common/ProductCardSkeleton.jsx
@@ -0,0 +1,17 @@
+import { Skeleton } from "../ui/skeleton";
+
+const ProductCardSkeleton = () => {
+  return (
+    <div className="border p-2 rounded-2xl flex flex-col gap-2">
+      <Skeleton className="w-full aspect-square" />
+      <div className="space-between">
+        <Skeleton className="w-1/4 h-4" />
+        <Skeleton className="w-1/4 h-4" />
+      </div>
+      <Skeleton className="w-3/4 h-4" />
+      <Skeleton className="w-2/3 h-4" />
+    </div>
+  );
+};
+
+export default ProductCardSkeleton;
diff --git a/components/Common/ProductHorizontalCard.jsx b/components/Common/ProductHorizontalCard.jsx
new file mode 100644
index 0000000..0f9649c
--- /dev/null
+++ b/components/Common/ProductHorizontalCard.jsx
@@ -0,0 +1,116 @@
+import { formatDate, t } from "@/utils";
+import { BiBadgeCheck } from "react-icons/bi";
+import { FaHeart, FaRegHeart } from "react-icons/fa";
+import { manageFavouriteApi } from "@/utils/api";
+import { useSelector } from "react-redux";
+import { userSignUpData } from "@/redux/reducer/authSlice";
+import { toast } from "sonner";
+import CustomLink from "@/components/Common/CustomLink";
+import { setIsLoginOpen } from "@/redux/reducer/globalStateSlice";
+import CustomImage from "./CustomImage";
+
+const ProductHorizontalCard = ({ item, handleLike }) => {
+  const userData = useSelector(userSignUpData);
+  const translated_item = item.translated_item;
+
+  const productLink =
+    userData?.id === item?.user_id
+      ? `/my-listing/${item?.slug}`
+      : `/ad-details/${item.slug}`;
+  const isJobCategory = Number(item?.category?.is_job_category) === 1;
+
+  const isHidePrice = isJobCategory
+    ? !item?.formatted_salary_range
+    : !item?.formatted_price;
+
+  const price = isJobCategory
+    ? item?.formatted_salary_range
+    : item?.formatted_price;
+
+  const handleLikeItem = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      if (!userData) {
+        setIsLoginOpen(true);
+        return;
+      }
+      const response = await manageFavouriteApi.manageFavouriteApi({
+        item_id: item?.id,
+      });
+      if (response?.data?.error === false) {
+        toast.success(response?.data?.message);
+        handleLike(item?.id);
+      } else {
+        toast.error(t("failedToLike"));
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error(t("failedToLike"));
+    }
+  };
+
+  return (
+    <CustomLink
+      href={productLink}
+      className="border p-2 rounded-md flex items-center gap-2 sm:gap-4 w-full relative"
+    >
+      <CustomImage
+        src={item?.image}
+        width={219}
+        height={190}
+        alt="Product"
+        className="w-[100px] sm:w-[219px] h-auto aspect-square sm:aspect-[219/190] rounded object-cover"
+      />
+
+      <div
+        onClick={handleLikeItem}
+        className="absolute h-8 w-8 ltr:right-2 rtl:left-2 top-2 bg-white p-1.5 rounded-full flex items-center justify-center text-primary z-10"
+      >
+        {item?.is_liked ? (
+          <button>
+            <FaHeart size={20} className="like_icon" />
+          </button>
+        ) : (
+          <button>
+            <FaRegHeart size={20} className="like_icon" />
+          </button>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-1 sm:gap-2 flex-1 relative min-w-0">
+        {item?.is_feature && (
+          <div className="flex items-center gap-1 rounded-md py-0.5 px-1 bg-primary w-fit mb-1">
+            <BiBadgeCheck size={16} color="white" />
+            <p className="text-white text-xs sm:text-sm">{t("featured")}</p>
+          </div>
+        )}
+
+        {!isHidePrice && (
+          <p className="text-sm sm:text-lg font-bold truncate" title={price}>
+            {price}
+          </p>
+        )}
+
+        <p
+          className="text-xs sm:text-base font-medium line-clamp-1"
+          title={translated_item?.name || item?.name}
+        >
+          {translated_item?.name || item?.name}
+        </p>
+
+        <p className="text-xs sm:text-sm opacity-65 line-clamp-1">
+          {item?.translated_address}
+        </p>
+
+        <div className="flex justify-end mt-auto">
+          <p className="text-xs sm:text-sm opacity-65 whitespace-nowrap">
+            {formatDate(item?.created_at)}&lrm;
+          </p>
+        </div>
+      </div>
+    </CustomLink>
+  );
+};
+
+export default ProductHorizontalCard;
diff --git a/components/Common/ProductHorizontalCardSkeleton.jsx b/components/Common/ProductHorizontalCardSkeleton.jsx
new file mode 100644
index 0000000..2bb2caa
--- /dev/null
+++ b/components/Common/ProductHorizontalCardSkeleton.jsx
@@ -0,0 +1,34 @@
+import { Skeleton } from "../ui/skeleton";
+
+const ProductHorizontalCardSkeleton = () => {
+    return (
+        <div className="border p-2 rounded-md flex gap-2 sm:gap-4 w-full relative">
+            {/* Product image skeleton */}
+            <Skeleton className="w-[100px] sm:w-[219px] h-auto aspect-square sm:aspect-[219/190] rounded" />
+
+            {/* Like button skeleton */}
+            <Skeleton className="absolute h-8 w-8 ltr:right-2 rtl:left-2 top-2 rounded-full" />
+
+            <div className="flex flex-col gap-1 sm:gap-2 flex-1">
+                {/* Featured badge skeleton */}
+                <Skeleton className="h-6 w-24 rounded-md mb-1" />
+
+                {/* Price skeleton */}
+                <Skeleton className="h-5 sm:h-6 w-24 rounded" />
+
+                {/* Name skeleton */}
+                <Skeleton className="h-4 sm:h-5 w-3/4 rounded" />
+
+                {/* Location skeleton */}
+                <Skeleton className="h-3 sm:h-4 w-1/2 rounded" />
+
+                {/* Date skeleton */}
+                <div className="flex justify-end mt-auto">
+                    <Skeleton className="h-3 sm:h-4 w-24 rounded" />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductHorizontalCardSkeleton; 
\ No newline at end of file
diff --git a/components/Common/ReusableAlertDialog.jsx b/components/Common/ReusableAlertDialog.jsx
new file mode 100644
index 0000000..c45da14
--- /dev/null
+++ b/components/Common/ReusableAlertDialog.jsx
@@ -0,0 +1,46 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { t } from "@/utils";
+import { Loader2 } from "lucide-react";
+
+const ReusableAlertDialog = ({
+  open,
+  onCancel,
+  onConfirm,
+  title,
+  description,
+  cancelText = t("cancel"),
+  confirmText = t("confirm"),
+  confirmDisabled = false,
+}) => {
+  return (
+    <AlertDialog open={open}>
+      <AlertDialogContent onInteractOutside={(e) => e.preventDefault()}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description && (
+            <AlertDialogDescription asChild={typeof description !== "string"}>
+              {typeof description === "string" ? description : description}
+            </AlertDialogDescription>
+          )}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onCancel}>{cancelText}</AlertDialogCancel>
+          <AlertDialogAction disabled={confirmDisabled} onClick={onConfirm}>
+            {confirmDisabled ? <Loader2 className="w-4 h-4 animate-spin" /> : confirmText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default ReusableAlertDialog;
diff --git a/components/Common/ShareDropdown.jsx b/components/Common/ShareDropdown.jsx
new file mode 100644
index 0000000..729f358
--- /dev/null
+++ b/components/Common/ShareDropdown.jsx
@@ -0,0 +1,107 @@
+"use client";
+import {
+  FacebookIcon,
+  FacebookShareButton,
+  TwitterShareButton,
+  WhatsappIcon,
+  WhatsappShareButton,
+  XIcon,
+} from "react-share";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { IoShareSocialOutline } from "react-icons/io5";
+import { CiLink } from "react-icons/ci";
+import { toast } from "sonner";
+import { t } from "@/utils/index";
+import { useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { getIsRtl } from "@/redux/reducer/languageSlice";
+import { useSelector } from "react-redux";
+
+const ShareDropdown = ({ url, title, headline, companyName, className }) => {
+  const [open, setOpen] = useState(false);
+  const searchParams = useSearchParams();
+  const langCode = searchParams.get("lang");
+  const isRTL = useSelector(getIsRtl);
+
+  const handleCopyUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(url + "?share=true&lang=" + langCode);
+      toast.success(t("copyToClipboard"));
+      setOpen(false);
+    } catch (error) {
+      console.error("Error copying to clipboard:", error);
+    }
+  };
+
+  const handleShare = () => {
+    setOpen(false);
+  };
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <button className={className}>
+          <IoShareSocialOutline size={20} />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={isRTL ? "start" : "end"}>
+        <DropdownMenuItem>
+          <FacebookShareButton
+            className="w-full"
+            url={url}
+            hashtag={title}
+            onClick={handleShare}
+          >
+            <div className="flex items-center gap-2">
+              <FacebookIcon className="!size-6" round />
+              <span>{t("facebook")}</span>
+            </div>
+          </FacebookShareButton>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <TwitterShareButton
+            className="w-full"
+            url={url}
+            title={headline}
+            onClick={handleShare}
+          >
+            <div className="flex items-center gap-2">
+              <XIcon className="!size-6" round />
+              <span>X</span>
+            </div>
+          </TwitterShareButton>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <WhatsappShareButton
+            className="w-100"
+            url={url}
+            title={headline}
+            hashtag={companyName}
+            onClick={handleShare}
+          >
+            <div className="flex items-center gap-2">
+              <WhatsappIcon className="!size-6" round />
+              <span>{t("whatsapp")}</span>
+            </div>
+          </WhatsappShareButton>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <button
+            className="flex items-center gap-2 w-full"
+            onClick={handleCopyUrl}
+          >
+            <CiLink className="!size-6" />
+            <span>{t("copyLink")}</span>
+          </button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default ShareDropdown;
diff --git a/components/Common/useAutoFocus.jsx b/components/Common/useAutoFocus.jsx
new file mode 100644
index 0000000..91bcc7e
--- /dev/null
+++ b/components/Common/useAutoFocus.jsx
@@ -0,0 +1,17 @@
+import { useRef, useEffect } from "react";
+
+const useAutoFocus = () => {
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, 500);
+  }, []);
+
+  return inputRef;
+};
+
+export default useAutoFocus;
diff --git a/components/Common/useNavigate.jsx b/components/Common/useNavigate.jsx
new file mode 100644
index 0000000..7e03494
--- /dev/null
+++ b/components/Common/useNavigate.jsx
@@ -0,0 +1,27 @@
+"use client";
+import { getCurrentLangCode } from "@/redux/reducer/languageSlice";
+import { getDefaultLanguageCode } from "@/redux/reducer/settingSlice";
+import { useRouter } from "next/navigation";
+import { useSelector } from "react-redux";
+
+export const useNavigate = () => {
+  const router = useRouter();
+  const currentLangCode = useSelector(getCurrentLangCode);
+  const defaultLangCode = useSelector(getDefaultLanguageCode);
+
+  const langCode = currentLangCode || defaultLangCode;
+
+  const navigate = (path, options = {}) => {
+    if (path.includes("?")) {
+      // Path already has query parameters, add lang parameter
+      const langParam = langCode ? `&lang=${langCode}` : "";
+      router.push(`${path}${langParam}`, options);
+    } else {
+      // Path has no query parameters, add lang parameter with ?
+      const langParam = langCode ? `?lang=${langCode}` : "";
+      router.push(`${path}${langParam}`, options);
+    }
+  };
+
+  return { navigate };
+};
diff --git a/components/EmptyStates/NoData.jsx b/components/EmptyStates/NoData.jsx
new file mode 100644
index 0000000..3bfb8f1
--- /dev/null
+++ b/components/EmptyStates/NoData.jsx
@@ -0,0 +1,21 @@
+import NoDataFound from "../../public/assets/no_data_found_illustrator.svg";
+import { t } from "@/utils";
+import CustomImage from "../Common/CustomImage";
+
+const NoData = ({ name }) => {
+  return (
+    <div className="text-center flex flex-col items-center justify-center gap-2 h-[50vh]">
+      <div>
+        <CustomImage src={NoDataFound} alt="no_img" width={200} height={200} />
+      </div>
+      <div className="flex flex-col gap-1">
+        <h3 className="text-2xl font-medium text-primary">
+          {t("no")} {name} {t("found")}
+        </h3>
+        <p>{t("sorryTryAnotherWay")}</p>
+      </div>
+    </div>
+  );
+};
+
+export default NoData;
diff --git a/components/Filter/AreaNode.jsx b/components/Filter/AreaNode.jsx
new file mode 100644
index 0000000..bdb888e
--- /dev/null
+++ b/components/Filter/AreaNode.jsx
@@ -0,0 +1,51 @@
+import { cn } from "@/lib/utils";
+import { setSelectedLocation } from "@/redux/reducer/globalStateSlice";
+import { useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+
+const AreaNode = ({ area, city, state, country }) => {
+  const dispatch = useDispatch();
+  const searchParams = useSearchParams();
+
+  const selectedAreaId = searchParams.get("areaId") || "";
+
+  const isSelected = Number(selectedAreaId) === Number(area.id);
+
+  useEffect(() => {
+    if (isSelected) {
+      dispatch(setSelectedLocation(area));
+    }
+  }, [isSelected, area]);
+
+  const handleClick = () => {
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set("areaId", area?.id?.toString());
+    newSearchParams.set("area", area?.name);
+    newSearchParams.set("lat", area?.latitude?.toString());
+    newSearchParams.set("lng", area?.longitude?.toString());
+    newSearchParams.set("country", country?.name);
+    newSearchParams.set("state", state?.name);
+    newSearchParams.set("city", city?.name);
+
+    window.history.pushState(null, '', `/ads?${newSearchParams.toString()}`);
+  };
+
+  return (
+    <li>
+      <div className="rounded">
+        <button
+          onClick={handleClick}
+          className={cn(
+            "flex-1 ltr:text-left rtl:text-right py-1 px-2 rounded-sm",
+            isSelected && "border bg-muted"
+          )}
+        >
+          {area.translated_name || area?.name}
+        </button>
+      </div>
+    </li>
+  );
+};
+
+export default AreaNode;
diff --git a/components/Filter/BudgetFilter.jsx b/components/Filter/BudgetFilter.jsx
new file mode 100644
index 0000000..dcfe2ba
--- /dev/null
+++ b/components/Filter/BudgetFilter.jsx
@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { t } from "@/utils";
+import { useSearchParams } from "next/navigation";
+
+const BudgetFilter = () => {
+  const searchParams = useSearchParams();
+  const [budget, setBudget] = useState({
+    minPrice: searchParams.get("min_price") || "",
+    maxPrice: searchParams.get("max_price") || "",
+  });
+
+  const { minPrice, maxPrice } = budget;
+
+  const handleMinMaxPrice = () => {
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set("min_price", minPrice);
+    newSearchParams.set("max_price", maxPrice);
+    window.history.pushState(null, "", `/ads?${newSearchParams.toString()}`);
+  };
+
+
+  return (
+    <div className="flex flex-col gap-4 mt-4">
+      <form className="flex gap-4">
+        <Input
+          type="number"
+          placeholder={t("from")}
+          min={0}
+          onChange={(e) =>
+            setBudget((prev) => ({ ...prev, minPrice: Number(e.target.value) }))
+          }
+          value={minPrice}
+        />
+        <Input
+          type="number"
+          placeholder={t("to")}
+          min={0}
+          onChange={(e) =>
+            setBudget((prev) => ({ ...prev, maxPrice: Number(e.target.value) }))
+          }
+          value={maxPrice}
+        />
+      </form>
+      <Button
+        type="submit"
+        className="hover:bg-primary hover:text-white"
+        variant="outline"
+        disabled={minPrice == null || maxPrice == null || minPrice >= maxPrice}
+        onClick={handleMinMaxPrice}
+      >
+        {t("apply")}
+      </Button>
+    </div>
+  );
+};
+
+export default BudgetFilter;
diff --git a/components/Filter/CategoryNode.jsx b/components/Filter/CategoryNode.jsx
new file mode 100644
index 0000000..990fdca
--- /dev/null
+++ b/components/Filter/CategoryNode.jsx
@@ -0,0 +1,145 @@
+import { cn } from "@/lib/utils";
+import { BreadcrumbPathData } from "@/redux/reducer/breadCrumbSlice";
+import { t } from "@/utils";
+import { categoryApi } from "@/utils/api";
+import { Loader2, Minus, Plus } from "lucide-react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { useSelector } from "react-redux";
+import { useNavigate } from "../Common/useNavigate";
+
+const CategoryNode = ({ category, extraDetails, setExtraDetails }) => {
+  const { navigate } = useNavigate();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [expanded, setExpanded] = useState(false);
+  const [subcategories, setSubcategories] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(false);
+  const breadcrumbPath = useSelector(BreadcrumbPathData);
+
+  const selectedSlug = searchParams.get("category") || "";
+  const isSelected = category.slug === selectedSlug;
+
+  const shouldExpand = useMemo(() => {
+    if (!Array.isArray(breadcrumbPath) || breadcrumbPath.length <= 2)
+      return false;
+    // Skip the first (All Categories) and last (leaf node)
+    const keysToCheck = breadcrumbPath.slice(1, -1).map((crumb) => crumb.key);
+    return keysToCheck.includes(category.slug);
+  }, []);
+
+  // 📦 Auto-expand if it's in the path
+  useEffect(() => {
+    if (shouldExpand && !expanded) {
+      // If not already expanded and part of the path, expand and load children
+      setExpanded(true);
+      fetchSubcategories();
+    }
+  }, [shouldExpand]);
+  const fetchSubcategories = async (page = 1, append = false) => {
+    setIsLoading(true);
+    try {
+      const response = await categoryApi.getCategory({
+        category_id: category.id,
+        page,
+      });
+      const data = response.data.data.data;
+      const hasMore =
+        response.data.data.last_page > response.data.data.current_page;
+      setSubcategories((prev) => (append ? [...prev, ...data] : data));
+      setHasMore(hasMore);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleToggleExpand = async () => {
+    if (!expanded && subcategories.length === 0) {
+      await fetchSubcategories();
+    }
+    setExpanded((prev) => !prev);
+  };
+
+  const handleClick = () => {
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set("category", category.slug);
+    Object.keys(extraDetails || {}).forEach((key) => {
+      newSearchParams.delete(key);
+    });
+
+    setExtraDetails({})
+
+    if (pathname.startsWith("/ads")) {
+      window.history.pushState(null, "", `/ads?${newSearchParams.toString()}`);
+    } else {
+      navigate(`/ads?${newSearchParams.toString()}`);
+    }
+  };
+
+  const loadMore = async () => {
+    const nextPage = page + 1;
+    setPage(nextPage);
+    await fetchSubcategories(nextPage, true);
+  };
+
+  return (
+    <li>
+      <div className="flex items-center rounded text-sm">
+        {category.subcategories_count > 0 &&
+          (isLoading ? (
+            <div className="p-1">
+              <Loader2 className="size-[14px] animate-spin text-muted-foreground" />
+            </div>
+          ) : (
+            <button
+              className="text-sm p-1 hover:bg-muted rounded-sm"
+              onClick={handleToggleExpand}
+            >
+              {expanded ? <Minus size={14} /> : <Plus size={14} />}
+            </button>
+          ))}
+
+        <button
+          onClick={handleClick}
+          className={cn(
+            "flex-1 ltr:text-left rtl:text-right py-1 px-2 rounded-sm flex items-center justify-between gap-2",
+            isSelected && "border bg-muted"
+          )}
+        >
+          <span className="break-all">{category.translated_name}</span>
+          <span>({category.all_items_count})</span>
+        </button>
+      </div>
+
+      {expanded && (
+        <ul className="ltr:ml-3 rtl:mr-3 ltr:border-l rtl:border-r ltr:pl-2 rtl:pr-2 space-y-1">
+          {subcategories.map((sub) => (
+            <CategoryNode
+              key={sub.id + "filter-tree"}
+              category={sub}
+              selectedSlug={selectedSlug}
+              searchParams={searchParams}
+              extraDetails={extraDetails}
+              setExtraDetails={setExtraDetails}
+            />
+          ))}
+
+          {hasMore && (
+            <button
+              onClick={loadMore}
+              className="text-primary text-center text-sm py-1 px-2"
+            >
+              {t("loadMore")}
+            </button>
+          )}
+        </ul>
+      )}
+    </li>
+  );
+};
+
+export default CategoryNode;
diff --git a/components/Filter/CityNode.jsx b/components/Filter/CityNode.jsx
new file mode 100644
index 0000000..90315b3
--- /dev/null
+++ b/components/Filter/CityNode.jsx
@@ -0,0 +1,158 @@
+import { Loader2, Minus, Plus } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import AreaNode from "./AreaNode";
+import { cn } from "@/lib/utils";
+import { getAreasApi } from "@/utils/api";
+import { t } from "@/utils";
+import { useDispatch } from "react-redux";
+import { setSelectedLocation } from "@/redux/reducer/globalStateSlice";
+
+const CityNode = ({ city, country, state }) => {
+  const dispatch = useDispatch();
+  const searchParams = useSearchParams();
+  const [areas, setAreas] = useState({
+    data: [],
+    currentPage: 1,
+    hasMore: false,
+    isLoading: false,
+    isLoadMore: false,
+    expanded: false,
+  });
+
+  const lat = searchParams.get("lat") || "";
+  const lng = searchParams.get("lng") || "";
+  const selectedCity = searchParams.get("city") || "";
+  const selectedArea = searchParams.get("area") || "";
+
+  const isSelected = useMemo(() => {
+    return city?.latitude === lat && city?.longitude === lng && !selectedArea;
+  }, [lat, lng]);
+
+  const shouldExpand = selectedCity === city?.name && selectedArea;
+
+  useEffect(() => {
+    if (isSelected) {
+      dispatch(setSelectedLocation(city));
+    }
+  }, [isSelected, city]);
+
+  useEffect(() => {
+    if (shouldExpand && !areas.expanded) {
+      fetchAreas();
+    }
+  }, []);
+
+  const fetchAreas = async (page = 1) => {
+    try {
+      page > 1
+        ? setAreas((prev) => ({ ...prev, isLoadMore: true }))
+        : setAreas((prev) => ({ ...prev, isLoading: true }));
+
+      const response = await getAreasApi.getAreas({
+        city_id: city.id,
+        page,
+      });
+      const newData = response?.data?.data?.data ?? [];
+      const currentPage = response?.data?.data?.current_page;
+      const lastPage = response?.data?.data?.last_page;
+
+      setAreas((prev) => ({
+        ...prev,
+        data: page > 1 ? [...prev.data, ...newData] : newData,
+        currentPage,
+        hasMore: lastPage > currentPage,
+        expanded: true,
+      }));
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setAreas((prev) => ({
+        ...prev,
+        isLoading: false,
+        isLoadMore: false,
+      }));
+    }
+  };
+
+  const handleToggleExpand = async () => {
+    if (!areas.expanded && areas.data.length === 0) {
+      await fetchAreas();
+    } else {
+      setAreas((prev) => ({ ...prev, expanded: !prev.expanded }));
+    }
+  };
+
+  const handleClick = () => {
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set("country", country?.name);
+    newSearchParams.set("state", state?.name);
+    newSearchParams.set("city", city?.name);
+    newSearchParams.set("lat", city.latitude);
+    newSearchParams.set("lng", city.longitude);
+    // Always remove unrelated location filters to avoid redundancy
+    newSearchParams.delete("area");
+    newSearchParams.delete("areaId");
+    newSearchParams.delete("km_range");
+    window.history.pushState(null, '', `/ads?${newSearchParams.toString()}`);
+  };
+
+  const loadMore = async () => {
+    await fetchAreas(areas.currentPage + 1);
+  };
+
+  return (
+    <li>
+      <div className="flex items-center rounded">
+        {areas?.isLoading ? (
+          <Loader2 className="size-[14px] animate-spin text-muted-foreground" />
+        ) : (
+          city.areas_count > 0 && (
+            <button
+              className="text-sm p-1 hover:bg-muted rounded-sm"
+              onClick={handleToggleExpand}
+            >
+              {areas.expanded ? <Minus size={14} /> : <Plus size={14} />}
+            </button>
+          )
+        )}
+
+        <button
+          onClick={handleClick}
+          className={cn(
+            "flex-1 ltr:text-left rtl:text-right py-1 px-2 rounded-sm break-all",
+            isSelected && "border bg-muted"
+          )}
+        >
+          {city.translated_name || city?.name}
+        </button>
+      </div>
+
+      {areas.expanded && (
+        <ul className="ltr:ml-3 rtl:mr-3 ltr:border-l rtl:border-r ltr:pl-2 rtl:pr-2 space-y-1">
+          {areas.data.map((area) => (
+            <AreaNode
+              key={area.id}
+              area={area}
+              city={city}
+              state={state}
+              country={country}
+            />
+          ))}
+
+          {areas.hasMore && (
+            <button
+              onClick={loadMore}
+              className="text-primary text-center text-sm py-1 px-2"
+              disabled={areas.isLoadMore}
+            >
+              {areas.isLoadMore ? t("loading") : t("loadMore")}
+            </button>
+          )}
+        </ul>
+      )}
+    </li>
+  );
+};
+
+export default CityNode;
diff --git a/components/Filter/CountryNode.jsx b/components/Filter/CountryNode.jsx
new file mode 100644
index 0000000..cee998a
--- /dev/null
+++ b/components/Filter/CountryNode.jsx
@@ -0,0 +1,160 @@
+import { cn } from "@/lib/utils";
+import { getStatesApi } from "@/utils/api";
+import { Loader2, Minus, Plus } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import StateNode from "./StateNode";
+import { t } from "@/utils";
+import { setSelectedLocation } from "@/redux/reducer/globalStateSlice";
+import { useDispatch } from "react-redux";
+
+const CountryNode = ({ country }) => {
+  const dispatch = useDispatch();
+  const searchParams = useSearchParams();
+  const [states, setStates] = useState({
+    data: [],
+    currentPage: 1,
+    hasMore: false,
+    isLoading: false,
+    isLoadMore: false,
+    expanded: false,
+  });
+
+  const lat = searchParams.get("lat") || "";
+  const lng = searchParams.get("lng") || "";
+
+  const selectedState = searchParams.get("state") || "";
+  const selectedCity = searchParams.get("city") || "";
+  const selectedArea = searchParams.get("area") || "";
+  const selectedCountry = searchParams.get("country") || "";
+
+  const isSelected = useMemo(() => {
+    return (
+      country?.latitude === lat &&
+      country?.longitude === lng &&
+      !selectedState &&
+      !selectedCity &&
+      !selectedArea
+    );
+  }, [lat, lng]);
+
+  const shouldExpand = selectedCountry === country?.name && selectedState;
+
+  useEffect(() => {
+    if (shouldExpand && !states.expanded) {
+      fetchStates();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isSelected) {
+      dispatch(setSelectedLocation(country));
+    }
+  }, [isSelected, country]);
+
+  const fetchStates = async (page = 1) => {
+    try {
+      page > 1
+        ? setStates((prev) => ({ ...prev, isLoadMore: true }))
+        : setStates((prev) => ({ ...prev, isLoading: true }));
+
+      const response = await getStatesApi.getStates({
+        country_id: country.id,
+        page,
+      });
+      const newData = response?.data?.data?.data ?? [];
+      const currentPage = response?.data?.data?.current_page;
+      const lastPage = response?.data?.data?.last_page;
+
+      setStates((prev) => ({
+        ...prev,
+        data: page > 1 ? [...prev.data, ...newData] : newData,
+        currentPage,
+        hasMore: lastPage > currentPage,
+        expanded: true,
+      }));
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setStates((prev) => ({
+        ...prev,
+        isLoading: false,
+        isLoadMore: false,
+      }));
+    }
+  };
+
+  const handleToggleExpand = async () => {
+    if (!states.expanded && states.data.length === 0) {
+      await fetchStates();
+    } else {
+      setStates((prev) => ({ ...prev, expanded: !prev.expanded }));
+    }
+  };
+
+  const handleClick = () => {
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set("country", country?.name);
+    newSearchParams.set("lat", country.latitude);
+    newSearchParams.set("lng", country.longitude);
+    newSearchParams.delete("state");
+    newSearchParams.delete("city");
+    newSearchParams.delete("area");
+    newSearchParams.delete("areaId");
+    newSearchParams.delete("km_range");
+    window.history.pushState(null, '', `/ads?${newSearchParams.toString()}`);
+  };
+
+  const loadMore = async () => {
+    await fetchStates(states.currentPage + 1);
+  };
+
+  return (
+    <li>
+      <div className="flex items-center rounded">
+        {states?.isLoading ? (
+          <Loader2 className="size-[14px] animate-spin text-muted-foreground" />
+        ) : (
+          country.states_count > 0 && (
+            <button
+              className="text-sm p-1 hover:bg-muted rounded-sm"
+              onClick={handleToggleExpand}
+            >
+              {states.expanded ? <Minus size={14} /> : <Plus size={14} />}
+            </button>
+          )
+        )}
+
+        <button
+          onClick={handleClick}
+          className={cn(
+            "flex-1 ltr:text-left rtl:text-right py-1 px-2 rounded-sm",
+            isSelected && "border bg-muted"
+          )}
+        >
+          {country?.translated_name || country?.name}
+        </button>
+      </div>
+
+      {states.expanded && (
+        <ul className="ltr:ml-3 rtl:mr-3 ltr:border-l rtl:border-r ltr:pl-2 rtl:pr-2 space-y-1">
+          {states.data.map((state) => (
+            <StateNode key={state.id} state={state} country={country} />
+          ))}
+
+          {states.hasMore && (
+            <button
+              onClick={loadMore}
+              className="text-primary text-center text-sm py-1 px-2"
+              disabled={states.isLoadMore}
+            >
+              {states.isLoadMore ? t("loading") : t("loadMore")}
+            </button>
+          )}
+        </ul>
+      )}
+    </li>
+  );
+};
+
+export default CountryNode;
diff --git a/components/Filter/DatePostedFilter.jsx b/components/Filter/DatePostedFilter.jsx
new file mode 100644
index 0000000..8f8cedc
--- /dev/null
+++ b/components/Filter/DatePostedFilter.jsx
@@ -0,0 +1,63 @@
+import { useSearchParams } from "next/navigation";
+import { Checkbox } from "../ui/checkbox";
+import { t } from "@/utils";
+
+const DatePostedFilter = () => {
+  const searchParams = useSearchParams();
+  const value = searchParams.get("date_posted") || "";
+
+  const datesPostedOptions = [
+    {
+      label: "allTime",
+      value: "all-time",
+    },
+    {
+      label: "today",
+      value: "today",
+    },
+    {
+      label: "within1Week",
+      value: "within-1-week",
+    },
+    {
+      label: "within2Weeks",
+      value: "within-2-week",
+    },
+    {
+      label: "within1Month",
+      value: "within-1-month",
+    },
+    {
+      label: "within3Months",
+      value: "within-3-month",
+    },
+  ];
+
+  const handleCheckboxChange = (optionValue) => {
+    const newSearchParams = new URLSearchParams(searchParams);
+    if (value === optionValue) {
+      // Uncheck: remove the filter
+      newSearchParams.delete("date_posted");
+    } else {
+      // Check: set the filter
+      newSearchParams.set("date_posted", optionValue);
+    }
+    window.history.pushState(null, '', `/ads?${newSearchParams.toString()}`);
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      {datesPostedOptions.map((option) => (
+        <div className="flex items-center gap-2" key={option.value}>
+          <Checkbox
+            checked={value === option.value}
+            onCheckedChange={() => handleCheckboxChange(option.value)}
+          />
+          <label>{t(option.label)}</label>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DatePostedFilter;
diff --git a/components/Filter/ExtraDetailsFilter.jsx b/components/Filter/ExtraDetailsFilter.jsx
new file mode 100644
index 0000000..7a2650f
--- /dev/null
+++ b/components/Filter/ExtraDetailsFilter.jsx
@@ -0,0 +1,155 @@
+import { Fragment } from "react";
+import { Checkbox } from "../ui/checkbox";
+import { Label } from "../ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { t } from "@/utils";
+import { Button } from "../ui/button";
+
+const ExtraDetailsFilter = ({
+  customFields,
+  extraDetails,
+  setExtraDetails,
+  newSearchParams,
+}) => {
+
+  const isApplyDisabled = () => {
+    return !Object.values(extraDetails).some(
+      (val) => (Array.isArray(val) && val.length > 0) || (!!val && val !== "")
+    );
+  };
+
+  const handleCheckboxChange = (id, value, checked) => {
+    setExtraDetails((prev) => {
+      const existing = prev[id] || [];
+      const updated = checked
+        ? [...existing, value]
+        : existing.filter((v) => v !== value);
+      return { ...prev, [id]: updated.length ? updated : "" };
+    });
+  };
+
+  const handleInputChange = (fieldId, value) => {
+    setExtraDetails((prev) => ({
+      ...prev,
+      [fieldId]: value,
+    }));
+  };
+
+  const handleApply = () => {
+    Object.entries(extraDetails).forEach(([key, val]) => {
+      if (Array.isArray(val) && val.length) {
+        newSearchParams.set(key, val.join(","));
+      } else if (val) {
+        newSearchParams.set(key, val);
+      } else {
+        newSearchParams.delete(key);
+      }
+    });
+    window.history.pushState(null, '', `/ads?${newSearchParams.toString()}`);
+  };
+
+  return (
+    <div className="flex gap-4 flex-col">
+      {customFields.map((field) => (
+        <Fragment key={field.id}>
+          {/* Checkbox */}
+          {field.type === "checkbox" && (
+            <div className="flex flex-col gap-2">
+              <Label className="font-semibold" htmlFor={field.id}>
+                {field.translated_name || field.name}
+              </Label>
+              {field.values.map((option, index) => (
+                <div key={option} className="flex items-center gap-2">
+                  <Checkbox
+                    id={`${field.id}-${option}`}
+                    checked={(extraDetails[field.id] || []).includes(option)}
+                    onCheckedChange={(checked) =>
+                      handleCheckboxChange(field.id, option, checked)
+                    }
+                  />
+                  <label
+                    htmlFor={`${field.id}-${option}`}
+                    className="text-sm cursor-pointer"
+                  >
+                    {field?.translated_value[index] || option}
+                  </label>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Radio */}
+          {field.type === "radio" && (
+            <div className="flex flex-col gap-2">
+              <Label className="font-semibold" htmlFor={field.id}>
+                {field.translated_name || field.name}
+              </Label>
+              <div className="flex gap-2 flex-wrap">
+                {field.values.map((option, index) => (
+                  <button
+                    key={option}
+                    type="button"
+                    className={`py-2 px-4 w-fit rounded-md border transition-colors ${
+                      extraDetails[field.id] === option
+                        ? "bg-primary text-white"
+                        : ""
+                    }`}
+                    onClick={() => handleInputChange(field.id, option)}
+                    aria-pressed={extraDetails[field.id] === option}
+                  >
+                    {field?.translated_value[index] || option}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Dropdown */}
+          {field.type === "dropdown" && (
+            <div className="w-full flex flex-col gap-2">
+              <Label className="font-semibold capitalize" htmlFor={field.id}>
+                {field.translated_name || field.name}
+              </Label>
+              <Select
+                value={extraDetails[field.id] || ""}
+                onValueChange={(val) => handleInputChange(field.id, val)}
+              >
+                <SelectTrigger>
+                  <SelectValue
+                    placeholder={`${t("select")} ${
+                      field.translated_name || field.name
+                    }`}
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {field.values.map((option, index) => (
+                    <SelectItem key={option} value={option}>
+                      {field?.translated_value[index] || option}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+        </Fragment>
+      ))}
+
+      <Button
+        variant="outline"
+        className="hover:bg-primary hover:text-white"
+        onClick={handleApply}
+        disabled={isApplyDisabled()}
+      >
+        {t("apply")}
+      </Button>
+    </div>
+  );
+};
+
+export default ExtraDetailsFilter;
diff --git a/components/Filter/Filter.jsx b/components/Filter/Filter.jsx
new file mode 100644
index 0000000..c700070
--- /dev/null
+++ b/components/Filter/Filter.jsx
@@ -0,0 +1,118 @@
+import FilterTree from "./FilterTree";
+import { t } from "@/utils";
+import { useSelector } from "react-redux";
+import { getCurrentLangCode } from "@/redux/reducer/languageSlice";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import LocationTree from "./LocationTree";
+import BudgetFilter from "./BudgetFilter";
+import DatePostedFilter from "./DatePostedFilter";
+import RangeFilter from "./RangeFilter";
+import ExtraDetailsFilter from "./ExtraDetailsFilter";
+
+const Filter = ({
+  customFields,
+  extraDetails,
+  setExtraDetails,
+  newSearchParams,
+  country,
+  state,
+  city,
+  area,
+}) => {
+  const langId = useSelector(getCurrentLangCode);
+  const isShowCustomfieldFilter =
+    customFields &&
+    customFields.length > 0 &&
+    customFields.some(
+      (field) =>
+        field.type === "checkbox" ||
+        field.type === "radio" ||
+        field.type === "dropdown"
+    );
+
+  const isLocationSelected = country || state || city || area;
+
+  return (
+    <div className="w-full border rounded-lg overflow-hidden">
+      <div className="px-4 py-2 font-semibold border-b text-xl">
+        {t("filters")}
+      </div>
+      <div className=" flex flex-col ">
+        <Accordion
+          type="multiple"
+          defaultValue={
+            isLocationSelected ? ["location", "category"] : ["category"]
+          }
+          className="w-full"
+        >
+          <AccordionItem value="category" className="border-b">
+            <AccordionTrigger className="p-4">
+              <span className="font-semibold text-base">{t("category")}</span>
+            </AccordionTrigger>
+            <AccordionContent className="px-4 pb-4">
+              <FilterTree key={langId} extraDetails={extraDetails} setExtraDetails={setExtraDetails} />
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="location" className="border-b">
+            <AccordionTrigger className="p-4">
+              <span className="font-semibold text-base">{t("location")}</span>
+            </AccordionTrigger>
+            <AccordionContent className="px-4 pb-4">
+              <LocationTree />
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="budget" className="border-b">
+            <AccordionTrigger className="p-4">
+              <span className="font-semibold text-base">{t("budget")}</span>
+            </AccordionTrigger>
+            <AccordionContent className="px-4 pb-4">
+              <BudgetFilter />
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="date-posted" className="border-b">
+            <AccordionTrigger className="p-4">
+              <span className="font-semibold text-base">{t("datePosted")}</span>
+            </AccordionTrigger>
+            <AccordionContent className="px-4 pb-4">
+              <DatePostedFilter />
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="nearby-range" className="border-b">
+            <AccordionTrigger className="p-4">
+              <span className="font-semibold text-base">
+                {t("nearByKmRange")}
+              </span>
+            </AccordionTrigger>
+            <AccordionContent className="px-4 pb-4">
+              <RangeFilter />
+            </AccordionContent>
+          </AccordionItem>
+          {isShowCustomfieldFilter && (
+            <AccordionItem value="extra-details">
+              <AccordionTrigger className="p-4">
+                <span className="font-semibold text-base">
+                  {t("extradetails")}
+                </span>
+              </AccordionTrigger>
+              <AccordionContent className="px-4 pb-4">
+                <ExtraDetailsFilter
+                  customFields={customFields}
+                  extraDetails={extraDetails}
+                  setExtraDetails={setExtraDetails}
+                  newSearchParams={newSearchParams}
+                />
+              </AccordionContent>
+            </AccordionItem>
+          )}
+        </Accordion>
+      </div>
+    </div>
+  );
+};
+
+export default Filter;
diff --git a/components/Filter/FilterTree.jsx b/components/Filter/FilterTree.jsx
new file mode 100644
index 0000000..f7424b0
--- /dev/null
+++ b/components/Filter/FilterTree.jsx
@@ -0,0 +1,104 @@
+import { cn } from "@/lib/utils";
+import { Loader2, Minus, Plus } from "lucide-react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { t } from "@/utils";
+import CategoryNode from "./CategoryNode";
+import { useState } from "react";
+import { useNavigate } from "../Common/useNavigate";
+import useGetCategories from "../Layout/useGetCategories";
+
+const FilterTree = ({ extraDetails, setExtraDetails }) => {
+  const { navigate } = useNavigate();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  const {
+    getCategories,
+    cateData,
+    isCatLoading,
+    isCatLoadMore,
+    catCurrentPage,
+    catLastPage,
+  } = useGetCategories();
+  const hasMore = catCurrentPage < catLastPage;
+
+  const selectedSlug = searchParams.get("category") || "";
+  const isSelected = !selectedSlug; // "All" category is selected when no category is selected
+
+  const [expanded, setExpanded] = useState(true);
+
+  const handleToggleExpand = () => {
+    setExpanded((prev) => !prev);
+  };
+
+  const handleClick = () => {
+    const params = new URLSearchParams(searchParams);
+    params.delete("category");
+    Object.keys(extraDetails || {})?.forEach((key) => {
+      params.delete(key);
+    });
+
+    setExtraDetails({})
+
+    if (pathname.startsWith("/ads")) {
+      window.history.pushState(null, "", `/ads?${params.toString()}`);
+    } else {
+      navigate(`/ads?${params.toString()}`);
+    }
+  };
+
+  return (
+    <ul>
+      <li>
+        <div className="flex items-center rounded text-sm">
+          {isCatLoading ? (
+            <div className="p-1">
+              <Loader2 className="size-[14px] animate-spin text-muted-foreground" />
+            </div>
+          ) : (
+            <button
+              className="text-sm p-1 hover:bg-muted rounded-sm"
+              onClick={handleToggleExpand}
+            >
+              {expanded ? <Minus size={14} /> : <Plus size={14} />}
+            </button>
+          )}
+
+          <button
+            onClick={handleClick}
+            className={cn(
+              "flex-1 ltr:text-left rtl:text-right py-1 px-2 rounded-sm",
+              isSelected && "border bg-muted"
+            )}
+          >
+            {t("allCategories")}
+          </button>
+        </div>
+        {expanded && cateData.length > 0 && (
+          <ul className="ltr:ml-3 rtl:mr-3 ltr:border-l rtl:border-r ltr:pl-2 rtl:pr-2 space-y-1">
+            {cateData.map((category) => (
+              <CategoryNode
+                key={category.id + "filter-tree"}
+                category={category}
+                extraDetails={extraDetails}
+                setExtraDetails={setExtraDetails}
+              />
+            ))}
+
+            {hasMore && (
+              <button
+                onClick={() => getCategories(catCurrentPage + 1)}
+                className="text-primary text-center text-sm py-1 px-2"
+                disabled={isCatLoadMore}
+              >
+                {isCatLoadMore ? t("loading") : t("loadMore")}
+              </button>
+            )}
+          </ul>
+        )}
+      </li>
+    </ul>
+  );
+};
+
+export default FilterTree;
diff --git a/components/Filter/LocationTree.jsx b/components/Filter/LocationTree.jsx
new file mode 100644
index 0000000..4e2c260
--- /dev/null
+++ b/components/Filter/LocationTree.jsx
@@ -0,0 +1,130 @@
+import { cn } from "@/lib/utils";
+import { getCoutriesApi } from "@/utils/api";
+import { Loader2, Minus, Plus } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { t } from "@/utils";
+import CountryNode from "./CountryNode";
+
+const LocationTree = () => {
+  const searchParams = useSearchParams();
+  const langCode = searchParams.get("lang");
+
+  const selectedCountry = searchParams.get("country") || "";
+  const selectedState = searchParams.get("state") || "";
+  const selectedCity = searchParams.get("city") || "";
+  const selectedArea = searchParams.get("area") || "";
+  const isAllSelected =
+    !selectedCountry && !selectedState && !selectedCity && !selectedArea;
+
+  const [countries, setCountries] = useState({
+    data: [],
+    currentPage: 1,
+    hasMore: false,
+    isLoading: false,
+    isLoadMore: false,
+    expanded: false,
+  });
+
+  useEffect(() => {
+    fetchCountries();
+  }, [langCode]);
+
+  const fetchCountries = async (page = 1) => {
+    try {
+      page > 1
+        ? setCountries((prev) => ({ ...prev, isLoadMore: true }))
+        : setCountries((prev) => ({ ...prev, isLoading: true }));
+
+      const response = await getCoutriesApi.getCoutries({ page });
+      const newData = response?.data?.data?.data ?? [];
+      const currentPage = response?.data?.data?.current_page;
+      const lastPage = response?.data?.data?.last_page;
+
+      setCountries((prev) => ({
+        ...prev,
+        data: page > 1 ? [...prev.data, ...newData] : newData,
+        currentPage,
+        hasMore: lastPage > currentPage,
+        expanded: true,
+      }));
+
+
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setCountries((prev) => ({
+        ...prev,
+        isLoading: false,
+        isLoadMore: false,
+      }));
+    }
+  };
+
+  const handleToggleExpand = () => {
+    setCountries((prev) => ({ ...prev, expanded: !prev.expanded }));
+  };
+
+  const handleAllLocationsClick = () => {
+    // Clear all location parameters
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.delete("country");
+    newSearchParams.delete("state");
+    newSearchParams.delete("city");
+    newSearchParams.delete("area");
+    newSearchParams.delete("lat");
+    newSearchParams.delete("lng");
+    newSearchParams.delete("km_range");
+
+    window.history.pushState(null, '', `/ads?${newSearchParams.toString()}`);
+
+  };
+
+  return (
+    <ul>
+      <li>
+        <div className="flex items-center rounded">
+          {countries?.isLoading ? (
+            <Loader2 className="size-[14px] animate-spin text-muted-foreground" />
+          ) : (
+            <button
+              className="text-sm p-1 hover:bg-muted rounded-sm"
+              onClick={handleToggleExpand}
+            >
+              {countries.expanded ? <Minus size={14} /> : <Plus size={14} />}
+            </button>
+          )}
+
+          <button
+            onClick={handleAllLocationsClick}
+            className={cn(
+              "flex-1 ltr:text-left rtl:text-right py-1 px-2 rounded-sm",
+              isAllSelected && "border bg-muted"
+            )}
+          >
+            {t("allCountries")}
+          </button>
+        </div>
+        {countries.expanded && countries.data.length > 0 && (
+          <ul className="ltr:ml-3 rtl:mr-3 ltr:border-l rtl:border-r ltr:pl-2 rtl:pr-2 space-y-1">
+            {countries.data.map((country) => (
+              <CountryNode key={country.id + langCode} country={country} />
+            ))}
+
+            {countries.hasMore && (
+              <button
+                onClick={() => fetchCountries(countries.currentPage + 1)}
+                className="text-primary text-center text-sm py-1 px-2"
+                disabled={countries.isLoadMore}
+              >
+                {countries.isLoadMore ? t("loading") : t("loadMore")}
+              </button>
+            )}
+          </ul>
+        )}
+      </li>
+    </ul>
+  );
+};
+
+export default LocationTree;
diff --git a/components/Filter/RangeFilter.jsx b/components/Filter/RangeFilter.jsx
new file mode 100644
index 0000000..fb76ff9
--- /dev/null
+++ b/components/Filter/RangeFilter.jsx
@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { Slider } from "../ui/slider";
+import { useSelector } from "react-redux";
+import { getMaxRange, getMinRange } from "@/redux/reducer/settingSlice";
+import { t } from "@/utils";
+import { Button } from "../ui/button";
+import { useSearchParams } from "next/navigation";
+import { getIsRtl } from "@/redux/reducer/languageSlice";
+
+const RangeFilter = () => {
+  const searchParams = useSearchParams();
+  const isRTL = useSelector(getIsRtl);
+
+  const kmRange = searchParams.get("km_range");
+  const areaId = searchParams.get("areaId");
+  const lat = searchParams.get("lat");
+  const lng = searchParams.get("lng");
+
+  const min = useSelector(getMinRange);
+  const max = useSelector(getMaxRange);
+
+  const [value, setValue] = useState([kmRange || min]);
+  const [error, setError] = useState("");
+
+  const handleRangeApply = () => {
+    if (!areaId) {
+      setError(t("pleaseSelectArea"));
+      return;
+    }
+
+    const isInvalidCoord = (value) =>
+      value === null ||
+      value === undefined ||
+      value === "" ||
+      isNaN(Number(value));
+
+    if (isInvalidCoord(lat) || isInvalidCoord(lng)) {
+      setError(t("InvalidLatOrLng"));
+      return;
+    }
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set("km_range", value);
+    window.history.pushState(null, '', `/ads?${newSearchParams.toString()}`);
+    setError("");
+  };
+
+  return (
+    <>
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-2 justify-between">
+          <span>{t("rangeLabel")}</span>
+          <span>{value} KM</span>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Slider
+            value={value}
+            onValueChange={setValue}
+            max={max}
+            min={min}
+            step={1}
+            dir={isRTL ? "rtl" : "ltr"}
+          />
+          {error && <span className="text-sm text-destructive">{error}</span>}
+        </div>
+        <Button
+          className="hover:bg-primary hover:text-white w-full"
+          variant="outline"
+          onClick={handleRangeApply}
+          disabled={value[0] <= 0}
+        >
+          {t("apply")}
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default RangeFilter;
diff --git a/components/Filter/StateNode.jsx b/components/Filter/StateNode.jsx
new file mode 100644
index 0000000..1d0e5ba
--- /dev/null
+++ b/components/Filter/StateNode.jsx
@@ -0,0 +1,162 @@
+import { Loader2, Minus, Plus } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import CityNode from "./CityNode";
+import { cn } from "@/lib/utils";
+import { getCitiesApi } from "@/utils/api";
+import { t } from "@/utils";
+import { useDispatch } from "react-redux";
+import { setSelectedLocation } from "@/redux/reducer/globalStateSlice";
+
+const StateNode = ({ state, country }) => {
+  const dispatch = useDispatch();
+  const searchParams = useSearchParams();
+  const [cities, setCities] = useState({
+    data: [],
+    currentPage: 1,
+    hasMore: false,
+    isLoading: false,
+    isLoadMore: false,
+    expanded: false,
+  });
+
+  const selectedCity = searchParams.get("city") || "";
+  const selectedArea = searchParams.get("area") || "";
+  const selectedState = searchParams.get("state") || "";
+  const lat = searchParams.get("lat") || "";
+  const lng = searchParams.get("lng") || "";
+
+  const isSelected = useMemo(() => {
+    return (
+      state?.latitude === lat &&
+      state?.longitude === lng &&
+      !selectedCity &&
+      !selectedArea
+    );
+  }, [lat, lng]);
+
+  const shouldExpand = selectedState === state?.name && selectedCity;
+
+  useEffect(() => {
+    if (shouldExpand && !cities.expanded) {
+      fetchCities();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isSelected) {
+      dispatch(setSelectedLocation(state));
+    }
+  }, [isSelected, state]);
+
+  const fetchCities = async (page = 1) => {
+    try {
+      page > 1
+        ? setCities((prev) => ({ ...prev, isLoadMore: true }))
+        : setCities((prev) => ({ ...prev, isLoading: true }));
+
+      const response = await getCitiesApi.getCities({
+        state_id: state.id,
+        page,
+      });
+      const newData = response?.data?.data?.data ?? [];
+      const currentPage = response?.data?.data?.current_page;
+      const lastPage = response?.data?.data?.last_page;
+
+      setCities((prev) => ({
+        ...prev,
+        data: page > 1 ? [...prev.data, ...newData] : newData,
+        currentPage,
+        hasMore: lastPage > currentPage,
+        expanded: true,
+      }));
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setCities((prev) => ({
+        ...prev,
+        isLoading: false,
+        isLoadMore: false,
+      }));
+    }
+  };
+
+  const handleToggleExpand = async () => {
+    if (!cities.expanded && cities.data.length === 0) {
+      await fetchCities();
+    } else {
+      setCities((prev) => ({ ...prev, expanded: !prev.expanded }));
+    }
+  };
+
+  const handleClick = () => {
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set("country", country?.name);
+    newSearchParams.set("state", state?.name);
+    newSearchParams.set("lat", state.latitude);
+    newSearchParams.set("lng", state.longitude);
+    newSearchParams.delete("city");
+    newSearchParams.delete("area");
+    newSearchParams.delete("areaId");
+    newSearchParams.delete("km_range");
+    window.history.pushState(null, '', `/ads?${newSearchParams.toString()}`);
+  };
+
+  const loadMore = async () => {
+    await fetchCities(cities.currentPage + 1);
+  };
+
+  return (
+    <li>
+      <div className="flex items-center rounded">
+        {cities?.isLoading ? (
+          <Loader2 className="size-[14px] animate-spin text-muted-foreground" />
+        ) : (
+          state.cities_count > 0 && (
+            <button
+              className="text-sm p-1 hover:bg-muted rounded-sm"
+              onClick={handleToggleExpand}
+            >
+              {cities.expanded ? <Minus size={14} /> : <Plus size={14} />}
+            </button>
+          )
+        )}
+
+        <button
+          onClick={handleClick}
+          className={cn(
+            "flex-1 ltr:text-left rtl:text-right py-1 px-2 rounded-sm",
+            isSelected && "border bg-muted"
+          )}
+        >
+          {state?.translated_name || state?.name}
+        </button>
+      </div>
+
+      {cities.expanded && (
+        <ul className="ltr:ml-3 rtl:mr-3 ltr:border-l rtl:border-r ltr:pl-2 rtl:pr-2 space-y-1">
+          {cities.data.map((city) => (
+            <CityNode
+              key={city.id}
+              city={city}
+              country={country}
+              state={state}
+            />
+          ))}
+
+          {cities.hasMore && (
+            <button
+              onClick={loadMore}
+              className="text-primary text-center text-sm py-1 px-2"
+              disabled={cities.isLoadMore}
+            >
+              {cities.isLoadMore ? t("loading") : t("loadMore")}
+            </button>
+          )}
+        </ul>
+      )}
+    </li>
+  );
+};
+
+export default StateNode;
diff --git a/components/Footer/Footer.jsx b/components/Footer/Footer.jsx
new file mode 100644
index 0000000..8bf9b51
--- /dev/null
+++ b/components/Footer/Footer.jsx
@@ -0,0 +1,251 @@
+"use client";
+import CustomLink from "@/components/Common/CustomLink";
+import { FaFacebook, FaLinkedin, FaPinterest } from "react-icons/fa";
+import { FaInstagram, FaSquareXTwitter } from "react-icons/fa6";
+import { SlLocationPin } from "react-icons/sl";
+import { RiMailSendFill } from "react-icons/ri";
+import { BiPhoneCall } from "react-icons/bi";
+import { t } from "@/utils";
+import { quickLinks } from "@/utils/constants";
+import { useSelector } from "react-redux";
+import { settingsData } from "@/redux/reducer/settingSlice";
+import googleDownload from "../../public/assets/Google Download.png";
+import appleDownload from "../../public/assets/iOS Download.png";
+import { usePathname } from "next/navigation";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import CustomImage from "../Common/CustomImage";
+import Link from "next/link";
+
+export default function Footer() {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const settings = useSelector(settingsData);
+  const currentYear = new Date().getFullYear();
+  const showGetInTouchSection =
+    settings?.company_address ||
+    settings?.company_email ||
+    settings?.company_tel1 ||
+    settings?.company_tel2;
+
+  const showDownloadLinks =
+    settings?.play_store_link && settings?.app_store_link;
+
+  const marginTop = showDownloadLinks ? "mt-[150px]" : "mt-48";
+
+  return (
+    <footer className={`bg-[#1a1a1a] text-white ${marginTop}`}>
+      <div className="container py-12 relative">
+        {showDownloadLinks && (
+          <div className="relative bg-[#FF7F50] top-[-140px] lg:top-[-125px] xl:top-[-150px] p-6 xl:p-12 rounded-md flex flex-col lg:flex-row items-center justify-between">
+            <h2 className="text-3xl md:text-4xl xl:text-5xl text-center lg:text-left text-balance font-light mb-4 md:mb-0 w-full">
+              {t("experienceTheMagic")} {settings?.company_name} {t("app")}
+            </h2>
+            <div className="flex flex-row lg:flex-row items-center">
+              {settings?.app_store_link && (
+                <Link href={settings?.play_store_link}>
+                  <CustomImage
+                    src={googleDownload}
+                    alt="google"
+                    className="storeIcons"
+                    width={235}
+                    height={85}
+                  />
+                </Link>
+              )}
+              {settings?.app_store_link && (
+                <Link href={settings?.app_store_link}>
+                  <CustomImage
+                    src={appleDownload}
+                    alt="apple"
+                    className="storeIcons"
+                    width={235}
+                    height={85}
+                  />
+                </Link>
+              )}
+            </div>
+          </div>
+        )}
+
+        <div
+          className={`grid grid-1 sm:grid-cols-12 gap-12 ${
+            showDownloadLinks && "mt-[-70px] lg:mt-[-64px] xl:mt-[-75px]"
+          }`}
+        >
+          {/* Company Info */}
+          <div className="space-y-6 sm:col-span-12 lg:col-span-4">
+            <CustomLink href="/">
+              <CustomImage
+                src={settings?.footer_logo}
+                alt="eClassify"
+                width={195}
+                height={52}
+                className="w-full h-[52px] object-contain ltr:object-left rtl:object-right max-w-[195px]"
+              />
+            </CustomLink>
+            <p className="text-gray-300 text-sm max-w-md">
+              {settings?.footer_description}
+            </p>
+            <div className="flex items-center flex-wrap gap-6">
+              {settings?.facebook_link && (
+                <CustomLink
+                  href={settings?.facebook_link}
+                  target="_blank"
+                  className="footerSocialLinks"
+                  rel="noopener noreferrer"
+                >
+                  <FaFacebook size={22} />
+                </CustomLink>
+              )}
+
+              {settings?.instagram_link && (
+                <Link
+                  href={settings?.instagram_link}
+                  target="_blank"
+                  className="footerSocialLinks"
+                  rel="noopener noreferrer"
+                >
+                  <FaInstagram size={22} />
+                </Link>
+              )}
+
+              {settings?.x_link && (
+                <Link
+                  href={settings?.x_link}
+                  target="_blank"
+                  className="footerSocialLinks"
+                  rel="noopener noreferrer"
+                >
+                  <FaSquareXTwitter size={22} />
+                </Link>
+              )}
+
+              {settings?.linkedin_link && (
+                <Link
+                  href={settings?.linkedin_link}
+                  target="_blank"
+                  className="footerSocialLinks"
+                  rel="noopener noreferrer"
+                >
+                  <FaLinkedin size={22} />
+                </Link>
+              )}
+
+              {settings?.pinterest_link && (
+                <Link
+                  href={settings?.pinterest_link}
+                  target="_blank"
+                  className="footerSocialLinks"
+                  rel="noopener noreferrer"
+                >
+                  <FaPinterest size={22} />
+                </Link>
+              )}
+            </div>
+          </div>
+
+          <div className="sm:col-span-12 lg:hidden border-t-2 border-dashed border-gray-500 w-full"></div>
+
+          {/* Quick Links */}
+          <div className="ltr:lg:border-l-2 rtl:lg:border-r-2 lg:border-dashed lg:border-gray-500 ltr:lg:pl-6 rtl:lg:pr-6 sm:col-span-6 lg:col-span-4">
+            <h3 className="text-xl font-semibold mb-6">{t("quickLinks")}</h3>
+            <nav className="space-y-4">
+              {quickLinks.map((link) => (
+                <CustomLink
+                  key={link.id}
+                  href={link.href}
+                  className="group block hover:text-[var(--primary-color)] transition-colors"
+                >
+                  <span className="relative flex items-center">
+                    <span className="absolute left-0 top-1/2 transform -translate-y-1/2 h-[10px] w-[10px] bg-[var(--primary-color)] rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500"></span>
+                    <span className="opacity-65 group-hover:text-[var(--primary-color)] group-hover:opacity-100 group-hover:ml-4 transition-all duration-500">
+                      {t(link.labelKey)}
+                    </span>
+                  </span>
+                </CustomLink>
+              ))}
+            </nav>
+          </div>
+
+          {/* Contact Information */}
+
+          {showGetInTouchSection && (
+            <div className="ltr:lg:border-l-2 rtl:lg:border-r-2 lg:border-dashed lg:border-gray-500 ltr:lg:pl-6 rtl:lg:pr-6 sm:col-span-6 lg:col-span-4">
+              <h3 className="text-xl font-semibold mb-6">{t("getInTouch")}</h3>
+              <div className="space-y-6">
+                {settings?.company_address && (
+                  <div className="flex items-center gap-3">
+                    <div className="footerContactIcons">
+                      <SlLocationPin size={22} />
+                    </div>
+                    <p className="footerLabel">{settings?.company_address}</p>
+                  </div>
+                )}
+
+                {settings?.company_email && (
+                  <div className="flex items-center gap-3">
+                    <div className="footerContactIcons">
+                      <RiMailSendFill size={22} />
+                    </div>
+                    <CustomLink
+                      href={`mailto:${settings?.company_email}`}
+                      className="footerLabel"
+                    >
+                      {settings?.company_email}
+                    </CustomLink>
+                  </div>
+                )}
+
+                {(settings?.company_tel1 || settings?.company_tel2) && (
+                  <div className="flex items-center gap-3">
+                    <div className="footerContactIcons">
+                      <BiPhoneCall size={22} />
+                    </div>
+                    <div className="flex flex-col gap-1">
+                      {settings?.company_tel1 && (
+                        <CustomLink
+                          href={`tel:${settings?.company_tel1}`}
+                          className="footerLabel"
+                        >
+                          {settings?.company_tel1}
+                        </CustomLink>
+                      )}
+                      {settings?.company_tel2 && (
+                        <CustomLink
+                          href={`tel:${settings?.company_tel2}`}
+                          className="footerLabel"
+                        >
+                          {settings?.company_tel2}
+                        </CustomLink>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Copyright */}
+      <div className="container">
+        <div className="py-4 flex flex-wrap gap-3 justify-between items-center border-t-2 border-dashed border-gray-500">
+          <p className="footerLabel">
+            {t("copyright")} © {settings?.company_name} {currentYear}.{" "}
+            {t("allRightsReserved")}
+          </p>
+          <div className="flex flex-wrap gap-4 whitespace-nowrap">
+            <CustomLink href="/privacy-policy" className="footerLabel">
+              {t("privacyPolicy")}
+            </CustomLink>
+            <CustomLink href="/terms-and-condition" className="footerLabel">
+              {t("termsConditions")}
+            </CustomLink>
+            <CustomLink href="/refund-policy" className="footerLabel">
+              {t("refundPolicy")}
+            </CustomLink>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/Layout/Layout.jsx b/components/Layout/Layout.jsx
new file mode 100644
index 0000000..70af1a6
--- /dev/null
+++ b/components/Layout/Layout.jsx
@@ -0,0 +1,48 @@
+"use client";
+import Header from "../Common/Header";
+import Footer from "../Footer/Footer";
+import PushNotificationLayout from "./PushNotificationLayout";
+import Loading from "@/app/loading";
+import UnderMaintenance from "../../public/assets/something_went_wrong.svg";
+import { t } from "@/utils";
+import { useClientLayoutLogic } from "./useClientLayoutLogic";
+import CustomImage from "../Common/CustomImage";
+import ScrollToTopButton from "./ScrollToTopButton";
+
+export default function Layout({ children }) {
+  const { isLoading, isMaintenanceMode, isRedirectToLanding } =
+    useClientLayoutLogic();
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  if (isRedirectToLanding) {
+    return null;
+  }
+
+  if (isMaintenanceMode) {
+    return (
+      <div className="flex flex-col items-center justify-center h-screen gap-2">
+        <CustomImage
+          src={UnderMaintenance}
+          alt="Maintenance Mode"
+          height={255}
+          width={255}
+        />
+        <p className="text-center max-w-[40%]">{t("underMaintenance")}</p>
+      </div>
+    );
+  }
+
+  return (
+    <PushNotificationLayout>
+      <div className="flex flex-col min-h-screen">
+        <Header />
+        <div className="flex-1">{children}</div>
+        <ScrollToTopButton />
+        <Footer />
+      </div>
+    </PushNotificationLayout>
+  );
+}
\ No newline at end of file
diff --git a/components/Layout/PushNotificationLayout.jsx b/components/Layout/PushNotificationLayout.jsx
new file mode 100644
index 0000000..09f3382
--- /dev/null
+++ b/components/Layout/PushNotificationLayout.jsx
@@ -0,0 +1,101 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import "firebase/messaging";
+import FirebaseData from "../../utils/Firebase";
+import { useDispatch, useSelector } from "react-redux";
+import { setNotification } from "@/redux/reducer/globalStateSlice";
+import { useNavigate } from "../Common/useNavigate";
+import { getIsLoggedIn } from "@/redux/reducer/authSlice";
+
+const PushNotificationLayout = ({ children }) => {
+  const dispatch = useDispatch();
+  const [fcmToken, setFcmToken] = useState("");
+  const { fetchToken, onMessageListener } = FirebaseData();
+  const { navigate } = useNavigate();
+  const isLoggedIn = useSelector(getIsLoggedIn);
+  const unsubscribeRef = useRef(null);
+
+  const handleFetchToken = async () => {
+    await fetchToken(setFcmToken);
+  };
+
+  // Fetch token when user logs in
+  useEffect(() => {
+    handleFetchToken();
+  }, []);
+
+  // Set up message listener when logged in, clean up when logged out
+  useEffect(() => {
+    if (!isLoggedIn) {
+      // Clean up listener when user logs out
+      if (unsubscribeRef.current) {
+        unsubscribeRef.current();
+        unsubscribeRef.current = null;
+      }
+      return;
+    }
+
+    // Set up listener when user logs in
+    const setupListener = async () => {
+      try {
+        unsubscribeRef.current = await onMessageListener((payload) => {
+          if (payload && payload.data) {
+            dispatch(setNotification(payload.data));
+            if (Notification.permission === "granted") {
+              const notif = new Notification(payload.notification.title, {
+                body: payload.notification.body,
+              });
+              const tab =
+                payload.data?.user_type === "Seller" ? "buying" : "selling";
+
+              notif.onclick = () => {
+                if (
+                  payload.data.type === "chat" ||
+                  payload.data.type === "offer"
+                ) {
+                  navigate(
+                    `/chat?activeTab=${tab}&chatid=${payload.data?.item_offer_id}`
+                  );
+                }
+              };
+            }
+          }
+        });
+      } catch (err) {
+        console.error("Error handling foreground notification:", err);
+      }
+    };
+
+    setupListener();
+
+    // Cleanup on unmount or logout
+    return () => {
+      if (unsubscribeRef.current) {
+        unsubscribeRef.current();
+        unsubscribeRef.current = null;
+      }
+    };
+  }, [isLoggedIn, dispatch, navigate, onMessageListener]);
+
+  useEffect(() => {
+    if (fcmToken) {
+      if ("serviceWorker" in navigator) {
+        navigator.serviceWorker
+          .register("/firebase-messaging-sw.js")
+          .then((registration) => {
+            console.log(
+              "Service Worker registration successful with scope: ",
+              registration.scope
+            );
+          })
+          .catch((err) => {
+            console.log("Service Worker registration failed: ", err);
+          });
+      }
+    }
+  }, [fcmToken]);
+
+  return children;
+};
+
+export default PushNotificationLayout;
diff --git a/components/Layout/ScrollToTopButton.jsx b/components/Layout/ScrollToTopButton.jsx
new file mode 100644
index 0000000..a751875
--- /dev/null
+++ b/components/Layout/ScrollToTopButton.jsx
@@ -0,0 +1,41 @@
+import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+import { IoIosArrowUp } from "react-icons/io";
+
+const ScrollToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.pageYOffset > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+    window.addEventListener("scroll", toggleVisibility);
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+    };
+  }, []);
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className={cn(
+        "fixed bottom-7 right-7 bg-primary text-white rounded z-[1000] p-2 flex items-center justify-center size-12",
+        isVisible ? "flex" : "hidden"
+      )}
+    >
+      <IoIosArrowUp size={22} />
+    </button>
+  );
+};
+
+export default ScrollToTopButton;
diff --git a/components/Layout/StructuredData.jsx b/components/Layout/StructuredData.jsx
new file mode 100644
index 0000000..7d5bb4f
--- /dev/null
+++ b/components/Layout/StructuredData.jsx
@@ -0,0 +1,14 @@
+const StructuredData = ({ data }) => {
+  if (!data) return null;
+
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify(data).replace(/</g, "\\u003c"),
+      }}
+    />
+  );
+};
+
+export default StructuredData;
diff --git a/components/Layout/useClientLayoutLogic.jsx b/components/Layout/useClientLayoutLogic.jsx
new file mode 100644
index 0000000..3188131
--- /dev/null
+++ b/components/Layout/useClientLayoutLogic.jsx
@@ -0,0 +1,100 @@
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { settingsApi } from "@/utils/api";
+import {
+  settingsSucess,
+  getIsMaintenanceMode,
+} from "@/redux/reducer/settingSlice";
+import {
+  getKilometerRange,
+  setKilometerRange,
+  setIsBrowserSupported,
+} from "@/redux/reducer/locationSlice";
+import { getIsVisitedLandingPage } from "@/redux/reducer/globalStateSlice";
+import { getCurrentLangCode, getIsRtl } from "@/redux/reducer/languageSlice";
+import {
+  getHasFetchedSystemSettings,
+  setHasFetchedSystemSettings,
+} from "@/utils/getFetcherStatus";
+import { useNavigate } from "../Common/useNavigate";
+
+export function useClientLayoutLogic() {
+  const dispatch = useDispatch();
+  const { navigate } = useNavigate();
+  const [isLoading, setIsLoading] = useState(true);
+  const currentLangCode = useSelector(getCurrentLangCode);
+  const isMaintenanceMode = useSelector(getIsMaintenanceMode);
+  const isRtl = useSelector(getIsRtl);
+  const appliedRange = useSelector(getKilometerRange);
+  const isVisitedLandingPage = useSelector(getIsVisitedLandingPage);
+  const [isRedirectToLanding, setIsRedirectToLanding] = useState(false);
+
+
+  useEffect(() => {
+    const getSystemSettings = async () => {
+      if (getHasFetchedSystemSettings()) {
+        setIsLoading(false);
+        return;
+      }
+      try {
+        // Get settings from API
+        const response = await settingsApi.getSettings();
+        const data = response?.data;
+        dispatch(settingsSucess({ data }));
+
+        // Set kilometer range from settings API
+        const min = Number(data?.data?.min_length);
+        const max = Number(data?.data?.max_length);
+        if (appliedRange < min) dispatch(setKilometerRange(min));
+        else if (appliedRange > max) dispatch(setKilometerRange(max));
+
+        // Set primary color from settings API
+        document.documentElement.style.setProperty(
+          "--primary",
+          data?.data?.web_theme_color
+        );
+
+        // Set favicon from settings API
+        if (data?.data?.favicon_icon) {
+          const favicon =
+            document.querySelector('link[rel="icon"]') ||
+            document.createElement("link");
+          favicon.rel = "icon";
+          favicon.href = data.data.favicon_icon;
+          if (!document.querySelector('link[rel="icon"]')) {
+            document.head.appendChild(favicon);
+          }
+        }
+
+        setHasFetchedSystemSettings(true);
+        // Check if landing page is enabled and redirect to landing page if not visited
+        const showLandingPage = Number(data?.data?.show_landing_page) === 1;
+        if (showLandingPage && !isVisitedLandingPage) {
+          setIsRedirectToLanding(true);
+          navigate("/landing");
+          return;
+        }
+      } catch (error) {
+        console.error("Error fetching settings:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    getSystemSettings();
+
+    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    if (isSafari) dispatch(setIsBrowserSupported(false));
+  }, [currentLangCode]);
+
+  // Set direction of the document
+  useEffect(() => {
+    document.documentElement.dir = isRtl ? "rtl" : "ltr";
+  }, [isRtl]);
+
+  return {
+    isLoading,
+    isMaintenanceMode,
+    isRedirectToLanding,
+  };
+}
diff --git a/components/Layout/useGetCategories.jsx b/components/Layout/useGetCategories.jsx
new file mode 100644
index 0000000..fbc3227
--- /dev/null
+++ b/components/Layout/useGetCategories.jsx
@@ -0,0 +1,72 @@
+import { useDispatch, useSelector } from "react-redux";
+import {
+  CategoryData,
+  getCatCurrentPage,
+  getCatLastPage,
+  getIsCatLoading,
+  getIsCatLoadMore,
+  setCatCurrentPage,
+  setCateData,
+  setCatLastPage,
+  setIsCatLoading,
+  setIsCatLoadMore,
+} from "@/redux/reducer/categorySlice";
+import { categoryApi } from "@/utils/api"; // assume you have this
+import { useCallback } from "react";
+import {
+  getHasFetchedCategories,
+  setHasFetchedCategories,
+} from "@/utils/getFetcherStatus";
+
+const useGetCategories = () => {
+  const dispatch = useDispatch();
+  const cateData = useSelector(CategoryData);
+  const isCatLoading = useSelector(getIsCatLoading);
+  const isCatLoadMore = useSelector(getIsCatLoadMore);
+  const catLastPage = useSelector(getCatLastPage);
+  const catCurrentPage = useSelector(getCatCurrentPage);
+
+  const getCategories = useCallback(
+    async (page = 1) => {
+      if (page === 1 && getHasFetchedCategories()) {
+        return;
+      }
+      if (page === 1) {
+        dispatch(setIsCatLoading(true));
+      } else {
+        dispatch(setIsCatLoadMore(true));
+      }
+      try {
+        const res = await categoryApi.getCategory({ page });
+        if (res?.data?.error === false) {
+          const data = res?.data?.data?.data;
+          if (page === 1) {
+            dispatch(setCateData(data));
+          } else {
+            dispatch(setCateData([...cateData, ...data]));
+          }
+          dispatch(setCatCurrentPage(res?.data?.data?.current_page));
+          dispatch(setCatLastPage(res?.data?.data?.last_page));
+          setHasFetchedCategories(true);
+        }
+      } catch (error) {
+        console.log(error);
+      } finally {
+        dispatch(setIsCatLoading(false));
+        dispatch(setIsCatLoadMore(false));
+      }
+    },
+    [cateData, dispatch]
+  );
+
+  return {
+    getCategories,
+    isCatLoading,
+    cateData,
+    isCatLoadMore,
+    catLastPage,
+    catCurrentPage,
+  };
+};
+
+export default useGetCategories;
diff --git a/components/Layout/useGetLocation.jsx b/components/Layout/useGetLocation.jsx
new file mode 100644
index 0000000..236c9d4
--- /dev/null
+++ b/components/Layout/useGetLocation.jsx
@@ -0,0 +1,87 @@
+import { getCurrentLangCode } from "@/redux/reducer/languageSlice";
+import { getIsPaidApi } from "@/redux/reducer/settingSlice";
+import { getLocationApi } from "@/utils/api";
+import { useSelector } from "react-redux";
+
+const useGetLocation = () => {
+  const IsPaidApi = useSelector(getIsPaidApi);
+  const currentLangCode = useSelector(getCurrentLangCode);
+
+  const fetchLocationData = async (pos) => {
+    const { lat, lng } = pos;
+
+    const response = await getLocationApi.getLocation({
+      lat,
+      lng,
+      lang: IsPaidApi ? "en" : currentLangCode,
+    });
+
+    if (response?.data?.error !== false) {
+      throw new Error("Location fetch failed");
+    }
+
+    /* ================= GOOGLE PLACES (PAID API) ================= */
+    if (IsPaidApi) {
+      let city = "";
+      let state = "";
+      let country = "";
+
+      const results = response?.data?.data?.results || [];
+
+      results.forEach((result) => {
+        const getComponent = (type) =>
+          result.address_components.find((c) => c.types.includes(type))
+            ?.long_name || "";
+
+        if (!city) city = getComponent("locality");
+        if (!state) state = getComponent("administrative_area_level_1");
+        if (!country) country = getComponent("country");
+      });
+
+      return {
+        lat,
+        long: lng,
+        city,
+        state,
+        country,
+        formattedAddress: [city, state, country].filter(Boolean).join(", "),
+      };
+    }
+
+    /* ================= INTERNAL LOCATION API ================= */
+    const r = response?.data?.data;
+
+    const formattedAddress = [r?.area, r?.city, r?.state, r?.country]
+      .filter(Boolean)
+      .join(", ");
+
+    const address_translated = [
+      r?.area_translation,
+      r?.city_translation,
+      r?.state_translation,
+      r?.country_translation,
+    ]
+      .filter(Boolean)
+      .join(", ");
+
+    return {
+      lat: r?.latitude,
+      long: r?.longitude,
+      city: r?.city || "",
+      state: r?.state || "",
+      country: r?.country || "",
+      area: r?.area || "",
+      areaId: r?.area_id || "",
+
+      // English (API / backend)
+      formattedAddress,
+
+      // Translated (UI)
+      address_translated,
+    };
+  };
+
+  return { fetchLocationData };
+};
+
+export default useGetLocation;
diff --git a/components/Location/GetLocationWithMap.jsx b/components/Location/GetLocationWithMap.jsx
new file mode 100644
index 0000000..e6ef969
--- /dev/null
+++ b/components/Location/GetLocationWithMap.jsx
@@ -0,0 +1,117 @@
+import { useSelector } from "react-redux";
+import {
+  getDefaultLatitude,
+  getDefaultLongitude,
+} from "@/redux/reducer/settingSlice";
+import { getCityData } from "@/redux/reducer/locationSlice";
+import { useEffect, useRef } from "react";
+import {
+  Circle,
+  MapContainer,
+  Marker,
+  TileLayer,
+  useMapEvents,
+} from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import L from "leaflet";
+
+// Fix Leaflet default marker icon issue
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl:
+    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
+  iconUrl:
+    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
+  shadowUrl:
+    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
+});
+
+const MapClickHandler = ({ onMapClick }) => {
+  useMapEvents({
+    click: (e) => {
+      onMapClick(e.latlng);
+    },
+  });
+  return null;
+};
+
+const GetLocationWithMap = ({ position, getLocationWithMap, KmRange }) => {
+  const latitude = useSelector(getDefaultLatitude);
+  const longitude = useSelector(getDefaultLongitude);
+  const globalPos = useSelector(getCityData);
+  const mapRef = useRef();
+
+  const placeHolderPos = {
+    lat: globalPos?.lat,
+    lng: globalPos?.long,
+  };
+
+  const markerLatLong =
+    position?.lat && position?.lng ? position : placeHolderPos;
+
+  useEffect(() => {
+    if (mapRef.current && markerLatLong.lat && markerLatLong.lng) {
+      mapRef.current.flyTo(
+        [markerLatLong.lat, markerLatLong.lng],
+        mapRef.current.getZoom()
+      );
+    }
+  }, [markerLatLong?.lat, markerLatLong?.lng]);
+
+  const containerStyle = {
+    width: "100%",
+    height: "300px",
+    borderRadius: "4px",
+  };
+
+  const handleMapClick = (latlng) => {
+    if (getLocationWithMap) {
+      getLocationWithMap({
+        lat: latlng.lat,
+        lng: latlng.lng,
+      });
+    }
+  };
+
+  return (
+    <MapContainer
+      style={containerStyle}
+      center={[markerLatLong?.lat || latitude, markerLatLong?.lng || longitude]}
+      zoom={6}
+      ref={mapRef}
+      whenCreated={(mapInstance) => {
+        mapRef.current = mapInstance;
+      }}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      <MapClickHandler onMapClick={handleMapClick} />
+      <Marker
+        position={[
+          markerLatLong?.lat || latitude,
+          markerLatLong?.lng || longitude,
+        ]}
+      ></Marker>
+      <Circle
+        center={[
+          markerLatLong?.lat || latitude,
+          markerLatLong?.lng || longitude,
+        ]}
+        radius={KmRange * 1000} // radius in meters
+        pathOptions={{
+          color: getComputedStyle(document.documentElement)
+            .getPropertyValue("--primary-color")
+            .trim(),
+          fillColor: getComputedStyle(document.documentElement)
+            .getPropertyValue("--primary-color")
+            .trim(),
+          fillOpacity: 0.2,
+        }}
+      />
+    </MapContainer>
+  );
+};
+
+export default GetLocationWithMap;
diff --git a/components/Location/LandingAdEditSearchAutocomplete.jsx b/components/Location/LandingAdEditSearchAutocomplete.jsx
new file mode 100644
index 0000000..7a84ac8
--- /dev/null
+++ b/components/Location/LandingAdEditSearchAutocomplete.jsx
@@ -0,0 +1,251 @@
+import { saveCity } from "@/redux/reducer/locationSlice";
+import { getIsPaidApi } from "@/redux/reducer/settingSlice";
+import { t } from "@/utils";
+import { getLocationApi } from "@/utils/api";
+import { usePathname } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { useSelector } from "react-redux";
+import { useDebounce } from "use-debounce";
+import { useNavigate } from "../Common/useNavigate";
+import { MapPin } from "lucide-react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+
+const LandingAdEditSearchAutocomplete = ({
+  saveOnSuggestionClick,
+  OnHide,
+  setSelectedLocation,
+}) => {
+  const isSuggestionClick = useRef(false);
+  const IsPaidApi = useSelector(getIsPaidApi);
+  const { navigate } = useNavigate();
+  const pathname = usePathname();
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebounce(search, 500);
+  const [autoState, setAutoState] = useState({
+    suggestions: [],
+    loading: false,
+    show: false,
+  });
+  const sessionTokenRef = useRef(null);
+
+  // Generate a new session token (UUID v4)
+  const generateSessionToken = () => {
+    // Use crypto.randomUUID() if available (modern browsers)
+    // Fallback to a simple UUID generator
+    if (typeof crypto !== "undefined" && crypto.randomUUID) {
+      return crypto.randomUUID();
+    }
+    // Fallback UUID generator
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+      /[xy]/g,
+      function (c) {
+        const r = (Math.random() * 16) | 0;
+        const v = c === "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      }
+    );
+  };
+
+  // Fetch suggestions
+  useEffect(() => {
+    const fetchSuggestions = async () => {
+      if (isSuggestionClick.current) {
+        isSuggestionClick.current = false;
+        return;
+      }
+      if (debouncedSearch && debouncedSearch.length > 1) {
+        setAutoState((prev) => ({ ...prev, loading: true, show: true }));
+        try {
+          // Generate new session token for new search session
+          // Only generate if we don't have one or if search changed significantly
+          if (!sessionTokenRef.current) {
+            sessionTokenRef.current = generateSessionToken();
+          }
+          const response = await getLocationApi.getLocation({
+            search: debouncedSearch,
+            lang: "en",
+            // Only include sessiontoken for Google Places API (IsPaidApi)
+            ...(IsPaidApi && { session_id: sessionTokenRef.current }),
+          });
+
+          if (IsPaidApi) {
+            const results = response?.data?.data?.predictions || [];
+            setAutoState({ suggestions: results, loading: false, show: true });
+          } else {
+            const results = response?.data?.data || [];
+            const formattedResults = results.map((result) => ({
+              description: [
+                result?.area_translation,
+                result?.city_translation,
+                result?.state_translation,
+                result?.country_translation,
+              ]
+                .filter(Boolean)
+                .join(", "),
+              original: result,
+            }));
+            setAutoState({
+              suggestions: formattedResults,
+              loading: false,
+              show: true,
+            });
+          }
+        } catch (error) {
+          console.log("error", error);
+          setAutoState({ suggestions: [], loading: false, show: true });
+        }
+      } else {
+        // Reset session token when search is cleared
+        sessionTokenRef.current = null;
+        setAutoState({ suggestions: [], loading: false, show: false });
+      }
+    };
+
+    fetchSuggestions();
+  }, [debouncedSearch, IsPaidApi]);
+
+
+  const handleSuggestionClick = async (suggestion) => {
+    isSuggestionClick.current = true;
+
+    if (IsPaidApi) {
+      // Use the same session token from autocomplete request
+      // This groups autocomplete + place details into one billing session
+      const response = await getLocationApi.getLocation({
+        place_id: suggestion.place_id,
+        lang: "en",
+        // Use the same session token from autocomplete (only if it exists)
+        ...(sessionTokenRef.current && {
+          session_id: sessionTokenRef.current,
+        }),
+      });
+
+      const result = response?.data?.data?.results?.[0];
+      const addressComponents = result.address_components || [];
+
+      const getAddressComponent = (type) => {
+        const component = addressComponents.find((comp) =>
+          comp.types.includes(type)
+        );
+        return component?.long_name || "";
+      };
+
+      const city = getAddressComponent("locality");
+      const state = getAddressComponent("administrative_area_level_1");
+      const country = getAddressComponent("country");
+      const data = {
+        lat: result?.geometry?.location?.lat,
+        long: result?.geometry?.location?.lng,
+        city,
+        state,
+        country,
+        formattedAddress: suggestion?.description,
+      };
+      setSearch(suggestion?.description || "");
+      setAutoState({ suggestions: [], loading: false, show: false });
+
+      // Reset session token after place details request (session complete)
+      sessionTokenRef.current = null;
+
+      if (saveOnSuggestionClick) {
+        saveCity(data);
+        OnHide?.();
+        // avoid redirect if already on home page otherwise router.push triggering server side api calls
+        if (pathname !== "/") {
+          navigate("/");
+        }
+      } else {
+        setSelectedLocation(data);
+      }
+    } else {
+      const original = suggestion.original;
+      const data = {
+        lat: original?.latitude,
+        long: original?.longitude,
+        city: original?.city || "",
+        state: original?.state || "",
+        country: original?.country || "",
+        formattedAddress: suggestion.description || "",
+        area: original?.area || "",
+        areaId: original?.area_id || "",
+      };
+      setSearch(suggestion?.description || "");
+      setAutoState({ suggestions: [], loading: false, show: false });
+      if (saveOnSuggestionClick) {
+        saveCity(data);
+        OnHide?.();
+        // avoid redirect if already on home page otherwise router.push triggering server side api calls
+        if (pathname !== "/") {
+          navigate("/");
+        }
+      } else {
+        setSelectedLocation(data);
+      }
+    }
+  };
+
+  return (
+    <>
+      <div className="relative w-full">
+        <Command
+          shouldFilter={false} // VERY IMPORTANT
+        >
+          <CommandInput
+            placeholder={t("selectLocation")}
+            value={search}
+            onValueChange={(value) => {
+              setSearch(value);
+
+              if (!sessionTokenRef.current) {
+                sessionTokenRef.current = generateSessionToken();
+              }
+            }}
+            onFocus={() => {
+              if (autoState.suggestions.length > 0) {
+                setAutoState((p) => ({ ...p, show: true }));
+              }
+            }}
+            className="h-0"
+            wrapperClassName="border-b-0"
+          />
+
+          {autoState.show &&
+            (autoState.suggestions.length > 0 || autoState.loading) && (
+              <CommandList className="absolute top-full left-0 right-0 z-[1500] max-h-[220px] mt-4 overflow-y-auto rounded-lg border bg-white shadow-lg w-full">
+                {autoState.loading && (
+                  <CommandEmpty>{t("loading")}</CommandEmpty>
+                )}
+                <CommandGroup>
+                  {autoState.suggestions.map((s, idx) => (
+                    <CommandItem
+                      key={idx}
+                      value={s.description}
+                      onSelect={() => {
+                        handleSuggestionClick(s);
+                        setAutoState((p) => ({ ...p, show: false }));
+                      }}
+                      className="ltr:text-left rtl:text-right"
+                    >
+                      <MapPin size={16} className="flex-shrink-0" />
+                      <span className="text-sm">
+                        {s.description || "Unknown"}
+                      </span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            )}
+        </Command>
+      </div>
+    </>
+  );
+};
+
+export default LandingAdEditSearchAutocomplete;
diff --git a/components/Location/LocationModal.jsx b/components/Location/LocationModal.jsx
new file mode 100644
index 0000000..215614b
--- /dev/null
+++ b/components/Location/LocationModal.jsx
@@ -0,0 +1,43 @@
+"use client";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { getCityData } from "@/redux/reducer/locationSlice";
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import LocationSelector from "./LocationSelector";
+import MapLocation from "./MapLocation";
+import { getIsPaidApi } from "@/redux/reducer/settingSlice";
+
+const LocationModal = ({ IsLocationModalOpen, setIsLocationModalOpen }) => {
+  const IsPaidApi = useSelector(getIsPaidApi);
+  const [IsMapLocation, setIsMapLocation] = useState(IsPaidApi);
+  const cityData = useSelector(getCityData);
+  const [selectedCity, setSelectedCity] = useState(cityData || "");
+
+  return (
+    <Dialog open={IsLocationModalOpen} onOpenChange={setIsLocationModalOpen}>
+      <DialogContent
+        onInteractOutside={(e) => e.preventDefault()}
+        className="!gap-6"
+      >
+        {IsMapLocation ? (
+          <MapLocation
+            OnHide={() => setIsLocationModalOpen(false)}
+            selectedCity={selectedCity}
+            setSelectedCity={setSelectedCity}
+            setIsMapLocation={setIsMapLocation}
+            IsPaidApi={IsPaidApi}
+          />
+        ) : (
+          <LocationSelector
+            OnHide={() => setIsLocationModalOpen(false)}
+            setSelectedCity={setSelectedCity}
+            IsMapLocation={IsMapLocation}
+            setIsMapLocation={setIsMapLocation}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default LocationModal;
diff --git a/components/Location/LocationSelector.jsx b/components/Location/LocationSelector.jsx
new file mode 100644
index 0000000..03a722c
--- /dev/null
+++ b/components/Location/LocationSelector.jsx
@@ -0,0 +1,578 @@
+import { useEffect, useRef, useState } from "react";
+import { IoSearch } from "react-icons/io5";
+import { t } from "@/utils";
+import { MdArrowBack, MdOutlineKeyboardArrowRight } from "react-icons/md";
+import { BiCurrentLocation } from "react-icons/bi";
+import { DialogHeader, DialogTitle } from "../ui/dialog";
+import { cn } from "@/lib/utils";
+import { Skeleton } from "../ui/skeleton";
+import NoData from "../EmptyStates/NoData";
+import { Loader2, SearchIcon } from "lucide-react";
+import { useInView } from "react-intersection-observer";
+import {
+  getAreasApi,
+  getCitiesApi,
+  getCoutriesApi,
+  getStatesApi,
+} from "@/utils/api";
+import {
+  getIsBrowserSupported,
+  resetCityData,
+  saveCity,
+  setKilometerRange,
+} from "@/redux/reducer/locationSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { getMinRange } from "@/redux/reducer/settingSlice";
+import { usePathname } from "next/navigation";
+import { useDebounce } from "use-debounce";
+import SearchAutocomplete from "./SearchAutocomplete";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import { useNavigate } from "../Common/useNavigate";
+import useGetLocation from "../Layout/useGetLocation";
+
+const LocationSelector = ({ OnHide, setSelectedCity, setIsMapLocation }) => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const dispatch = useDispatch();
+  const { navigate } = useNavigate();
+  const pathname = usePathname();
+  const minLength = useSelector(getMinRange);
+  const { ref, inView } = useInView();
+  const IsBrowserSupported = useSelector(getIsBrowserSupported);
+
+  const viewHistory = useRef([]);
+  const skipNextSearchEffect = useRef(false);
+
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebounce(search, 500);
+  const [locationStatus, setLocationStatus] = useState(null);
+  const [currentView, setCurrentView] = useState("countries");
+  const [selectedLocation, setSelectedLocation] = useState({
+    country: null,
+    state: null,
+    city: null,
+    area: null,
+  });
+  const [locationData, setLocationData] = useState({
+    items: [],
+    currentPage: 1,
+    hasMore: false,
+    isLoading: false,
+    isLoadMore: true,
+  });
+
+  const { fetchLocationData } = useGetLocation();
+
+  useEffect(() => {
+    if (skipNextSearchEffect.current) {
+      skipNextSearchEffect.current = false;
+      return;
+    }
+    fetchData(debouncedSearch);
+  }, [debouncedSearch]);
+
+  useEffect(() => {
+    if (inView && locationData?.hasMore && !locationData?.isLoading) {
+      fetchData(debouncedSearch, locationData?.currentPage + 1);
+    }
+  }, [inView]);
+
+  const handleSubmitLocation = () => {
+    minLength > 0
+      ? dispatch(setKilometerRange(minLength))
+      : dispatch(setKilometerRange(0));
+    // avoid redirect if already on home page otherwise router.push triggering server side api calls
+    if (pathname !== "/") {
+      navigate("/");
+    }
+  };
+
+  const fetchData = async (
+    search = "",
+    page = 1,
+    view = currentView,
+    location = selectedLocation
+  ) => {
+    try {
+      setLocationData((prev) => ({
+        ...prev,
+        isLoading: page === 1,
+        isLoadMore: page > 1,
+      }));
+
+      let response;
+
+      const params = { page };
+      if (search) {
+        params.search = search;
+      }
+
+      switch (view) {
+        case "countries":
+          response = await getCoutriesApi.getCoutries(params);
+          break;
+        case "states":
+          response = await getStatesApi.getStates({
+            ...params,
+            country_id: location.country.id,
+          });
+          break;
+        case "cities":
+          response = await getCitiesApi.getCities({
+            ...params,
+            state_id: location.state.id,
+          });
+          break;
+        case "areas":
+          response = await getAreasApi.getAreas({
+            ...params,
+            city_id: location.city.id,
+          });
+          break;
+      }
+
+      if (response.data.error === false) {
+        const items = response.data.data.data;
+
+        // MOD: if no results and not on countries, auto-save & close
+        if (items.length === 0 && view !== "countries" && !search) {
+          switch (view) {
+            case "states":
+              saveCity({
+                city: "",
+                state: "",
+                country: location.country.name,
+                lat: location.country.latitude,
+                long: location.country.longitude,
+                formattedAddress: location.country.translated_name,
+              });
+              break;
+            case "cities":
+              saveCity({
+                city: "",
+                state: location.state.name,
+                country: location.country.name,
+                lat: location.state.latitude,
+                long: location.state.longitude,
+                formattedAddress: [
+                  location?.state.translated_name,
+                  location?.country.translated_name,
+                ]
+                  .filter(Boolean)
+                  .join(", "),
+              });
+              break;
+            case "areas":
+              saveCity({
+                city: location.city.name,
+                state: location.state.name,
+                country: location.country.name,
+                lat: location.city.latitude,
+                long: location.city.longitude,
+                formattedAddress: [
+                  location?.city.translated_name,
+                  location?.state.translated_name,
+                  location?.country.translated_name,
+                ]
+                  .filter(Boolean)
+                  .join(", "),
+              });
+              break;
+          }
+
+          handleSubmitLocation();
+          OnHide();
+          return; // stop further processing
+        }
+        setLocationData((prev) => ({
+          ...prev,
+          items:
+            page > 1
+              ? [...prev.items, ...response.data.data.data]
+              : response.data.data.data,
+          hasMore:
+            response.data.data.current_page < response.data.data.last_page,
+          currentPage: response.data.data.current_page,
+        }));
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLocationData((prev) => ({
+        ...prev,
+        isLoading: false,
+        isLoadMore: false,
+      }));
+    }
+  };
+
+  const handleItemSelect = async (item) => {
+    // MOD: push current state onto history
+    viewHistory.current.push({
+      view: currentView,
+      location: selectedLocation,
+      dataState: locationData,
+      search: search,
+    });
+
+    let nextView = "";
+    let newLocation = {};
+
+    switch (currentView) {
+      case "countries":
+        newLocation = {
+          ...selectedLocation,
+          country: item,
+          state: null,
+          city: null,
+          area: null,
+        };
+        nextView = "states";
+        break;
+      case "states":
+        newLocation = {
+          ...selectedLocation,
+          state: item,
+          city: null,
+          area: null,
+        };
+        nextView = "cities";
+        break;
+      case "cities":
+        newLocation = {
+          ...selectedLocation,
+          city: item,
+          area: null,
+        };
+        nextView = "areas";
+        break;
+      case "areas":
+        saveCity({
+          country: selectedLocation?.country?.name,
+          state: selectedLocation?.state?.name,
+          city: selectedLocation?.city?.name,
+          area: item?.name,
+          areaId: item?.id,
+          lat: item?.latitude,
+          long: item?.longitude,
+          formattedAddress: [
+            item?.translated_name,
+            selectedLocation?.city?.translated_name,
+            selectedLocation?.state?.translated_name,
+            selectedLocation?.country?.translated_name,
+          ]
+            .filter(Boolean)
+            .join(", "),
+        });
+        handleSubmitLocation();
+        OnHide();
+        return;
+    }
+    setSelectedLocation(newLocation);
+    setCurrentView(nextView);
+    await fetchData("", 1, nextView, newLocation);
+    if (search) {
+      skipNextSearchEffect.current = true;
+      setSearch("");
+    }
+  };
+
+  const getPlaceholderText = () => {
+    switch (currentView) {
+      case "countries":
+        return `${t("search")} ${t("country")}`;
+      case "states":
+        return `${t("search")} ${t("state")}`;
+      case "cities":
+        return `${t("search")} ${t("city")}`;
+      case "areas":
+        return `${t("search")} ${t("area")}`;
+      default:
+        return `${t("search")} ${t("location")}`;
+    }
+  };
+
+  const getFormattedLocation = () => {
+    if (!selectedLocation) return t("location");
+    const parts = [];
+    if (selectedLocation.area?.translated_name)
+      parts.push(selectedLocation.area.translated_name);
+    if (selectedLocation.city?.translated_name)
+      parts.push(selectedLocation.city.translated_name);
+    if (selectedLocation.state?.translated_name)
+      parts.push(selectedLocation.state.translated_name);
+    if (selectedLocation.country?.translated_name)
+      parts.push(selectedLocation.country.translated_name);
+
+    return parts.length > 0 ? parts.join(", ") : t("location");
+  };
+
+  const handleBack = async () => {
+    const prev = viewHistory.current.pop();
+    if (!prev) return;
+
+    setCurrentView(prev.view);
+    setSelectedLocation(prev.location);
+
+    if (search !== prev.search) {
+      skipNextSearchEffect.current = true;
+      setSearch(prev.search);
+    }
+    if (prev.dataState) {
+      setLocationData(prev.dataState);
+    } else {
+      await fetchData(prev.search ?? "", 1, prev.view, prev.location);
+    }
+  };
+
+  const getTitle = () => {
+    switch (currentView) {
+      case "countries":
+        return t("country");
+      case "states":
+        return t("state");
+      case "cities":
+        return t("city");
+      case "areas":
+        return t("area");
+    }
+  };
+
+  const handleAllSelect = () => {
+    switch (currentView) {
+      case "countries":
+        resetCityData();
+        handleSubmitLocation();
+        OnHide();
+        break;
+      case "states":
+        saveCity({
+          city: "",
+          state: "",
+          country: selectedLocation?.country?.name,
+          lat: selectedLocation?.country?.latitude,
+          long: selectedLocation?.country?.longitude,
+          formattedAddress: selectedLocation?.country?.translated_name,
+        });
+        handleSubmitLocation();
+        OnHide();
+        break;
+      case "cities":
+        saveCity({
+          city: "",
+          state: selectedLocation?.state?.name,
+          country: selectedLocation?.country?.name,
+          lat: selectedLocation?.state?.latitude,
+          long: selectedLocation?.state?.longitude,
+          formattedAddress: [
+            selectedLocation?.state?.translated_name,
+            selectedLocation?.country?.translated_name,
+          ]
+            .filter(Boolean)
+            .join(", "),
+        });
+        handleSubmitLocation();
+        OnHide();
+        break;
+      case "areas":
+        saveCity({
+          city: selectedLocation?.city?.name,
+          state: selectedLocation?.state?.name,
+          country: selectedLocation?.country?.name,
+          lat: selectedLocation?.city?.latitude,
+          long: selectedLocation?.city?.longitude,
+          formattedAddress: [
+            selectedLocation?.city?.translated_name,
+            selectedLocation?.state?.translated_name,
+            selectedLocation?.country?.translated_name,
+          ]
+            .filter(Boolean)
+            .join(", "),
+        });
+        handleSubmitLocation();
+        OnHide();
+        break;
+    }
+  };
+
+  const getAllButtonTitle = () => {
+    switch (currentView) {
+      case "countries":
+        return t("allCountries");
+      case "states":
+        return `${t("allIn")} ${selectedLocation.country?.translated_name}`;
+      case "cities":
+        return `${t("allIn")} ${selectedLocation.state?.translated_name}`;
+      case "areas":
+        return `${t("allIn")} ${selectedLocation.city?.translated_name}`;
+    }
+  };
+
+  const getCurrentLocationUsingFreeApi = async (latitude, longitude) => {
+    try {
+      const data = await fetchLocationData({ lat: latitude, lng: longitude });
+      setSelectedCity(data);
+      setIsMapLocation(true);
+      setLocationStatus(null);
+    } catch (error) {
+      console.log(error);
+      setLocationStatus("error");
+    }
+  };
+
+  const getCurrentLocation = () => {
+    if (navigator.geolocation) {
+      setLocationStatus("fetching");
+      navigator.geolocation.getCurrentPosition(
+        async (position) => {
+          const { latitude, longitude } = position.coords;
+          await getCurrentLocationUsingFreeApi(latitude, longitude);
+        },
+        (error) => {
+          console.error("Geolocation error:", error);
+          if (error.code === error.PERMISSION_DENIED) {
+            setLocationStatus("denied");
+          } else {
+            setLocationStatus("error");
+          }
+        }
+      );
+    } else {
+      toast.error(t("geoLocationNotSupported"));
+    }
+  };
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle className="flex items-center gap-2 text-xl ltr:text-left rtl:text-right">
+          {currentView !== "countries" && (
+            <button onClick={handleBack}>
+              <MdArrowBack size={20} className="rtl:scale-x-[-1]" />
+            </button>
+          )}
+          {getFormattedLocation()}
+        </DialogTitle>
+      </DialogHeader>
+
+
+      {currentView === "countries" ? (
+        <div className="flex items-center gap-2 border rounded-sm relative">
+          <SearchAutocomplete saveOnSuggestionClick={true} OnHide={OnHide} />
+        </div>
+      ) : (
+        <div className="flex items-center gap-2 border rounded-sm relative p-3 ltr:pl-9 rtl:pr-9">
+          <SearchIcon className="size-4 shrink-0 absolute left-3 text-muted-foreground" />
+          <input
+            type="text"
+            className="w-full outline-none text-sm"
+            placeholder={getPlaceholderText()}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+        </div >
+      )}
+
+      {/* Current Location Wrapper */}
+
+      {
+        IsBrowserSupported && (
+          <div className="flex items-center gap-2 border rounded p-2 px-4">
+            <BiCurrentLocation className="text-primary size-5 shrink-0" />
+            <button
+              className="flex flex-col items-start ltr:text-left rtl:text-right"
+              disabled={false}
+              onClick={getCurrentLocation}
+            >
+              <p className="text-sm font-medium text-primary">
+                {t("useCurrentLocation")}
+              </p>
+              <p className="text-xs font-normal m-0 text-gray-500">
+                {locationStatus === "fetching"
+                  ? t("gettingLocation")
+                  : locationStatus === "denied"
+                    ? t("locationPermissionDenied")
+                    : locationStatus === "error"
+                      ? t("error")
+                      : t("automaticallyDetectLocation")}
+              </p>
+            </button>
+          </div>
+        )
+      }
+      <div className="border border-sm rounded-sm">
+        <button
+          className="flex items-center gap-1 p-3 text-sm font-medium justify-between w-full border-b ltr:text-left rtl:text-right"
+          onClick={handleAllSelect}
+        >
+          <span>{getAllButtonTitle()}</span>
+          <div className="bg-muted rounded-sm">
+            <MdOutlineKeyboardArrowRight
+              size={20}
+              className="rtl:scale-x-[-1]"
+            />
+          </div>
+        </button>
+        <div className="overflow-y-auto h-[300px]">
+          {locationData.isLoading ? (
+            <PlacesSkeleton />
+          ) : (
+            <>
+              {locationData.items.length > 0 ? (
+                locationData.items.map((item, index) => (
+                  <button
+                    className={cn(
+                      "flex items-center ltr:text-left rtl:text-right gap-1 p-3 text-sm font-medium justify-between w-full",
+                      index !== locationData.length - 1 && "border-b"
+                    )}
+                    onClick={() => handleItemSelect(item)}
+                    key={item?.id}
+                    ref={
+                      index === locationData.items.length - 1 &&
+                        locationData.hasMore
+                        ? ref
+                        : null
+                    }
+                  >
+                    <span>{item?.translated_name || item?.name}</span>
+                    <div className="bg-muted rounded-sm">
+                      <MdOutlineKeyboardArrowRight
+                        size={20}
+                        className="rtl:scale-x-[-1]"
+                      />
+                    </div>
+                  </button>
+                ))
+              ) : (
+                <NoData name={getTitle()} />
+              )}
+              {locationData.isLoadMore && (
+                <div className="p-4 flex justify-center">
+                  <Loader2 className="size-4 animate-spin" />
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default LocationSelector;
+
+const PlacesSkeleton = () => {
+  return (
+    <div className="space-y-2">
+      {Array.from({ length: 8 }).map((_, index) => (
+        <div key={index} className="flex items-center gap-3 p-3">
+          <Skeleton className="h-4 w-4 rounded-full" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-4 w-[85%]" />
+            <Skeleton className="h-3 w-[60%]" />
+          </div>
+          <Skeleton className="h-5 w-5 rounded-sm" />
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/components/Location/Map.jsx b/components/Location/Map.jsx
new file mode 100644
index 0000000..8b3f2c0
--- /dev/null
+++ b/components/Location/Map.jsx
@@ -0,0 +1,61 @@
+"use client";
+import { useEffect } from "react";
+import L from "leaflet";
+import { MapContainer, Marker, TileLayer } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+
+// Fix Leaflet default marker icon issue
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl:
+    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
+  iconUrl:
+    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
+  shadowUrl:
+    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
+});
+
+const Map = ({ latitude, longitude }) => {
+  const containerStyle = {
+    width: "100%",
+    height: "200px",
+    zIndex: 0,
+  };
+
+  // Validate latitude and longitude
+  const lat = parseFloat(latitude);
+  const lng = parseFloat(longitude);
+
+  // Check if coordinates are valid numbers and within valid ranges
+  const isValidLat = !isNaN(lat) && lat >= -90 && lat <= 90;
+  const isValidLng = !isNaN(lng) && lng >= -180 && lng <= 180;
+
+  // Use default coordinates if invalid (you can change these to your preferred default location)
+  const center = [isValidLat ? lat : 0, isValidLng ? lng : 0];
+
+  // Don't render marker if coordinates are invalid
+  const shouldShowMarker = isValidLat && isValidLng;
+
+  useEffect(() => {}, [shouldShowMarker]);
+
+  return (
+    shouldShowMarker && (
+      <MapContainer
+        style={containerStyle}
+        center={center}
+        zoom={10}
+        scrollWheelZoom={false}
+        zoomControl={false}
+        attributionControl={false}
+      >
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <Marker position={center} />
+      </MapContainer>
+    )
+  );
+};
+
+export default Map;
diff --git a/components/Location/MapLocation.jsx b/components/Location/MapLocation.jsx
new file mode 100644
index 0000000..0e9de37
--- /dev/null
+++ b/components/Location/MapLocation.jsx
@@ -0,0 +1,193 @@
+import { DialogTitle } from "@radix-ui/react-dialog";
+import { DialogFooter, DialogHeader } from "../ui/dialog";
+import { t } from "@/utils";
+import { MdArrowBack } from "react-icons/md";
+import SearchAutocomplete from "./SearchAutocomplete";
+import { BiCurrentLocation } from "react-icons/bi";
+import { useState } from "react";
+import { getMaxRange, getMinRange } from "@/redux/reducer/settingSlice";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  getIsBrowserSupported,
+  getKilometerRange,
+  resetCityData,
+  saveCity,
+  setKilometerRange,
+} from "@/redux/reducer/locationSlice";
+import { Slider } from "../ui/slider";
+import dynamic from "next/dynamic";
+import { Button } from "../ui/button";
+import { toast } from "sonner";
+import { usePathname } from "next/navigation";
+import { CurrentLanguageData, getIsRtl } from "@/redux/reducer/languageSlice";
+import { useNavigate } from "../Common/useNavigate";
+import useGetLocation from "../Layout/useGetLocation";
+
+const GetLocationWithMap = dynamic(() => import("./GetLocationWithMap"), {
+  ssr: false,
+  loading: () => <div className="w-full h-[300px] bg-gray-100 rounded-lg" />,
+});
+
+const MapLocation = ({
+  OnHide,
+  selectedCity,
+  setSelectedCity,
+  setIsMapLocation,
+  IsPaidApi,
+}) => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const dispatch = useDispatch();
+  const { navigate } = useNavigate();
+  const pathname = usePathname();
+  const radius = useSelector(getKilometerRange);
+  const [KmRange, setKmRange] = useState(radius || 0);
+  const [IsFetchingLocation, setIsFetchingLocation] = useState(false);
+  const min_range = useSelector(getMinRange);
+  const max_range = useSelector(getMaxRange);
+  const IsBrowserSupported = useSelector(getIsBrowserSupported);
+  const isRTL = useSelector(getIsRtl);
+  const { fetchLocationData } = useGetLocation();
+
+  const getCurrentLocation = async () => {
+    if (navigator.geolocation) {
+      setIsFetchingLocation(true);
+      navigator.geolocation.getCurrentPosition(
+        async (position) => {
+          try {
+            const { latitude, longitude } = position.coords;
+            const data = await fetchLocationData({ lat: latitude, lng: longitude });
+            setSelectedCity(data);
+          } catch (error) {
+            console.error("Error fetching location data:", error);
+            toast.error(t("errorOccurred"));
+          } finally {
+            setIsFetchingLocation(false);
+          }
+        },
+        (error) => {
+          console.log(error);
+          toast.error(t("locationNotGranted"));
+          setIsFetchingLocation(false);
+        }
+      );
+    } else {
+      toast.error(t("geoLocationNotSupported"));
+    }
+  };
+
+  const getLocationWithMap = async (pos) => {
+    try {
+      const data = await fetchLocationData(pos);
+      setSelectedCity(data);
+    } catch (error) {
+      console.error("Error fetching location data:", error);
+    }
+  };
+
+  const handleSave = () => {
+    const isInvalidLocation = !selectedCity?.lat || !selectedCity?.long;
+    if (isInvalidLocation) {
+      toast.error(t("pleaseSelectLocation"));
+      return;
+    }
+    dispatch(setKilometerRange(KmRange));
+    saveCity(selectedCity);
+    toast.success(t("locationSaved"));
+    OnHide();
+    // avoid redirect if already on home page otherwise router.push triggering server side api calls
+    if (pathname !== "/") {
+      navigate("/");
+    }
+  };
+
+  const handleReset = () => {
+    resetCityData();
+    min_range > 0
+      ? dispatch(setKilometerRange(min_range))
+      : dispatch(setKilometerRange(0));
+    OnHide();
+    // avoid redirect if already on home page otherwise router.push triggering server side api calls
+    if (pathname !== "/") {
+      navigate("/");
+    }
+  };
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle className="flex items-center gap-2 font-semibold text-xl">
+          {!IsPaidApi && (
+            <button onClick={() => setIsMapLocation(false)}>
+              <MdArrowBack size={20} className="rtl:scale-x-[-1]" />
+            </button>
+          )}
+
+          {selectedCity?.address_translated ||
+          selectedCity?.formattedAddress ? (
+            <p>
+              {selectedCity?.address_translated ||
+                selectedCity?.formattedAddress}
+            </p>
+          ) : (
+            t("addYourAddress")
+          )}
+        </DialogTitle>
+      </DialogHeader>
+      <div className="flex items-center border rounded-md">
+        <div className="flex-[3] sm:flex-[2]">
+          <SearchAutocomplete
+            saveOnSuggestionClick={false}
+            OnHide={OnHide}
+            setSelectedLocation={setSelectedCity}
+          />
+        </div>
+
+        {IsBrowserSupported && (
+          <>
+            <div className="border-r h-full" />
+            <button
+              className="flex-1 flex items-center justify-center"
+              onClick={getCurrentLocation}
+            >
+              <div className="flex items-center gap-2 py-2 px-4">
+                <BiCurrentLocation className="size-5 shrink-0" />
+                <span className="text-sm text-balance hidden sm:inline">
+                  {IsFetchingLocation
+                    ? t("gettingLocation")
+                    : t("currentLocation")}
+                </span>
+              </div>
+            </button>
+          </>
+        )}
+      </div>
+      <GetLocationWithMap
+        KmRange={KmRange}
+        position={{ lat: selectedCity?.lat, lng: selectedCity?.long }}
+        getLocationWithMap={getLocationWithMap}
+      />
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-2 justify-between">
+          <span>{t("rangeLabel")}</span>
+          <span>{KmRange} KM</span>
+        </div>
+        <Slider
+          value={[KmRange]}
+          onValueChange={(value) => setKmRange(value[0])}
+          max={max_range}
+          min={min_range}
+          step={1}
+          dir={isRTL ? "rtl" : "ltr"}
+        />
+      </div>
+      <DialogFooter>
+        <Button variant="outline" onClick={handleReset}>
+          {t("reset")}
+        </Button>
+        <Button onClick={handleSave}>{t("save")}</Button>
+      </DialogFooter>
+    </>
+  );
+};
+
+export default MapLocation;
diff --git a/components/Location/SearchAutocomplete.jsx b/components/Location/SearchAutocomplete.jsx
new file mode 100644
index 0000000..bf52e7e
--- /dev/null
+++ b/components/Location/SearchAutocomplete.jsx
@@ -0,0 +1,248 @@
+import { saveCity } from "@/redux/reducer/locationSlice";
+import { getIsPaidApi } from "@/redux/reducer/settingSlice";
+import { t } from "@/utils";
+import { getLocationApi } from "@/utils/api";
+import { usePathname } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { useSelector } from "react-redux";
+import { useDebounce } from "use-debounce";
+import { useNavigate } from "../Common/useNavigate";
+import { MapPin } from "lucide-react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+
+const SearchAutocomplete = ({
+  saveOnSuggestionClick,
+  OnHide,
+  setSelectedLocation,
+}) => {
+  const isSuggestionClick = useRef(false);
+  const IsPaidApi = useSelector(getIsPaidApi);
+  const { navigate } = useNavigate();
+  const pathname = usePathname();
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebounce(search, 500);
+  const [autoState, setAutoState] = useState({
+    suggestions: [],
+    loading: false,
+    show: false,
+  });
+  const sessionTokenRef = useRef(null);
+
+  // Generate a new session token (UUID v4)
+  const generateSessionToken = () => {
+    // Use crypto.randomUUID() if available (modern browsers)
+    // Fallback to a simple UUID generator
+    if (typeof crypto !== "undefined" && crypto.randomUUID) {
+      return crypto.randomUUID();
+    }
+    // Fallback UUID generator
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+      /[xy]/g,
+      function (c) {
+        const r = (Math.random() * 16) | 0;
+        const v = c === "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      }
+    );
+  };
+
+  // Fetch suggestions
+  useEffect(() => {
+    const fetchSuggestions = async () => {
+      if (isSuggestionClick.current) {
+        isSuggestionClick.current = false;
+        return;
+      }
+      if (debouncedSearch && debouncedSearch.length > 1) {
+        setAutoState((prev) => ({ ...prev, loading: true, show: true }));
+        try {
+          // Generate new session token for new search session
+          // Only generate if we don't have one or if search changed significantly
+          if (!sessionTokenRef.current) {
+            sessionTokenRef.current = generateSessionToken();
+          }
+          const response = await getLocationApi.getLocation({
+            search: debouncedSearch,
+            lang: "en",
+            // Only include sessiontoken for Google Places API (IsPaidApi)
+            ...(IsPaidApi && { session_id: sessionTokenRef.current }),
+          });
+
+          if (IsPaidApi) {
+            const results = response?.data?.data?.predictions || [];
+            setAutoState({ suggestions: results, loading: false, show: true });
+          } else {
+            const results = response?.data?.data || [];
+            const formattedResults = results.map((result) => ({
+              description: [
+                result?.area_translation,
+                result?.city_translation,
+                result?.state_translation,
+                result?.country_translation,
+              ]
+                .filter(Boolean)
+                .join(", "),
+              original: result,
+            }));
+            setAutoState({
+              suggestions: formattedResults,
+              loading: false,
+              show: true,
+            });
+          }
+        } catch (error) {
+          console.log("error", error);
+          setAutoState({ suggestions: [], loading: false, show: true });
+        }
+      } else {
+        // Reset session token when search is cleared
+        sessionTokenRef.current = null;
+        setAutoState({ suggestions: [], loading: false, show: false });
+      }
+    };
+
+    fetchSuggestions();
+  }, [debouncedSearch, IsPaidApi]);
+
+  const handleSuggestionClick = async (suggestion) => {
+    isSuggestionClick.current = true;
+
+    if (IsPaidApi) {
+      // Use the same session token from autocomplete request
+      // This groups autocomplete + place details into one billing session
+      const response = await getLocationApi.getLocation({
+        place_id: suggestion.place_id,
+        lang: "en",
+        // Use the same session token from autocomplete (only if it exists)
+        ...(sessionTokenRef.current && {
+          session_id: sessionTokenRef.current,
+        }),
+      });
+
+      const result = response?.data?.data?.results?.[0];
+      const addressComponents = result.address_components || [];
+
+      const getAddressComponent = (type) => {
+        const component = addressComponents.find((comp) =>
+          comp.types.includes(type)
+        );
+        return component?.long_name || "";
+      };
+
+      const city = getAddressComponent("locality");
+      const state = getAddressComponent("administrative_area_level_1");
+      const country = getAddressComponent("country");
+      const data = {
+        lat: result?.geometry?.location?.lat,
+        long: result?.geometry?.location?.lng,
+        city,
+        state,
+        country,
+        formattedAddress: suggestion?.description,
+      };
+      setSearch(suggestion?.description || "");
+      setAutoState({ suggestions: [], loading: false, show: false });
+
+      // Reset session token after place details request (session complete)
+      sessionTokenRef.current = null;
+
+      if (saveOnSuggestionClick) {
+        saveCity(data);
+        OnHide?.();
+        // avoid redirect if already on home page otherwise router.push triggering server side api calls
+        if (pathname !== "/") {
+          navigate("/");
+        }
+      } else {
+        setSelectedLocation(data);
+      }
+    } else {
+      const original = suggestion.original;
+      const data = {
+        lat: original?.latitude,
+        long: original?.longitude,
+        city: original?.city || "",
+        state: original?.state || "",
+        country: original?.country || "",
+        formattedAddress: suggestion.description || "",
+        area: original?.area || "",
+        areaId: original?.area_id || "",
+      };
+      setSearch(suggestion?.description || "");
+      setAutoState({ suggestions: [], loading: false, show: false });
+      if (saveOnSuggestionClick) {
+        saveCity(data);
+        OnHide?.();
+        // avoid redirect if already on home page otherwise router.push triggering server side api calls
+        if (pathname !== "/") {
+          navigate("/");
+        }
+      } else {
+        setSelectedLocation(data);
+      }
+    }
+  };
+
+  return (
+    <>
+      <div className="relative w-full">
+        <Command
+          shouldFilter={false} // VERY IMPORTANT
+        >
+          <CommandInput
+            placeholder={t("selectLocation")}
+            value={search}
+            onValueChange={(value) => {
+              setSearch(value);
+
+              if (!sessionTokenRef.current) {
+                sessionTokenRef.current = generateSessionToken();
+              }
+            }}
+            onFocus={() => {
+              if (autoState.suggestions.length > 0) {
+                setAutoState((p) => ({ ...p, show: true }));
+              }
+            }}
+            wrapperClassName="border-b-0"
+          />
+
+          {autoState.show &&
+            (autoState.suggestions.length > 0 || autoState.loading) && (
+              <CommandList className="absolute top-full left-0 right-0 z-[1500] max-h-[220px] overflow-y-auto rounded-lg border bg-white shadow-lg">
+                {autoState.loading && (
+                  <CommandEmpty>{t("loading")}</CommandEmpty>
+                )}
+                <CommandGroup>
+                  {autoState.suggestions.map((s, idx) => (
+                    <CommandItem
+                      key={idx}
+                      value={s.description}
+                      onSelect={() => {
+                        handleSuggestionClick(s);
+                        setAutoState((p) => ({ ...p, show: false }));
+                      }}
+                    >
+                      <MapPin size={16} className="flex-shrink-0" />
+                      <span className="text-sm">
+                        {s.description || "Unknown"}
+                      </span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            )}
+        </Command>
+      </div>
+    </>
+  );
+};
+
+export default SearchAutocomplete;
diff --git a/components/PagesComponent/Ads/Ads.jsx b/components/PagesComponent/Ads/Ads.jsx
new file mode 100644
index 0000000..b0305c7
--- /dev/null
+++ b/components/PagesComponent/Ads/Ads.jsx
@@ -0,0 +1,817 @@
+"use client";
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import Filter from "../../Filter/Filter";
+import {
+  allItemApi,
+  FeaturedSectionApi,
+  getCustomFieldsApi,
+  getParentCategoriesApi,
+  getSeoSettingsApi,
+} from "@/utils/api";
+import ProductCard from "@/components/Common/ProductCard";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { TbTransferVertical } from "react-icons/tb";
+import ProductHorizontalCard from "@/components/Common/ProductHorizontalCard";
+import ProductCardSkeleton from "@/components/Common/ProductCardSkeleton";
+import ProductHorizontalCardSkeleton from "@/components/Common/ProductHorizontalCardSkeleton";
+import NoData from "@/components/EmptyStates/NoData";
+import { IoGrid } from "react-icons/io5";
+import { CiGrid2H } from "react-icons/ci";
+import { Badge } from "@/components/ui/badge";
+import { IoIosCloseCircle } from "react-icons/io";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import Layout from "@/components/Layout/Layout";
+import { Button } from "@/components/ui/button";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  BreadcrumbPathData,
+  setBreadcrumbPath,
+} from "@/redux/reducer/breadCrumbSlice";
+import { seoData, t } from "@/utils";
+import { getSelectedLocation } from "@/redux/reducer/globalStateSlice";
+import { generateKeywords } from "@/utils/generateKeywords";
+
+const Ads = () => {
+  const dispatch = useDispatch();
+  const searchParams = useSearchParams();
+  const newSearchParams = new URLSearchParams(searchParams);
+  const BreadcrumbPath = useSelector(BreadcrumbPathData);
+
+  const [view, setView] = useState("grid");
+  const [advertisements, setAdvertisements] = useState({
+    data: [],
+    currentPage: 1,
+    hasMore: false,
+    isLoading: false,
+    isLoadMore: false,
+  });
+  const [featuredTitle, setFeaturedTitle] = useState("");
+
+  const selectedLocation = useSelector(getSelectedLocation);
+
+  const query = searchParams.get("query") || "";
+  const slug = searchParams.get("category") || "";
+  const country = searchParams.get("country") || "";
+  const state = searchParams.get("state") || "";
+  const city = searchParams.get("city") || "";
+  const area = searchParams.get("area") || "";
+  const areaId = Number(searchParams.get("areaId")) || "";
+  const lat = Number(searchParams.get("lat"));
+  const lng = Number(searchParams.get("lng"));
+  const min_price = searchParams.get("min_price")
+    ? Number(searchParams.get("min_price"))
+    : "";
+  const max_price = searchParams.get("max_price")
+    ? Number(searchParams.get("max_price"))
+    : "";
+  const date_posted = searchParams.get("date_posted") || "";
+  const km_range = searchParams.get("km_range") || "";
+  const sortBy = searchParams.get("sort_by") || "new-to-old";
+  const langCode = searchParams.get("lang");
+  const featured_section = searchParams.get("featured_section") || "";
+
+  const isMinPrice =
+    min_price !== "" &&
+    min_price !== null &&
+    min_price !== undefined &&
+    min_price >= 0;
+
+  const knownParams = [
+    "country",
+    "state",
+    "city",
+    "area",
+    "areaId",
+    "lat",
+    "lng",
+    "min_price",
+    "max_price",
+    "date_posted",
+    "km_range",
+    "sort_by",
+    "category",
+    "query",
+    "lang",
+    "featured_section",
+  ];
+
+  const title = useMemo(() => {
+    if (BreadcrumbPath.length === 2) {
+      return BreadcrumbPath[1]?.name;
+    }
+
+    if (BreadcrumbPath.length > 2) {
+      const last = BreadcrumbPath[BreadcrumbPath.length - 1]?.name;
+      const secondLast = BreadcrumbPath[BreadcrumbPath.length - 2]?.name;
+      return `${last} ${t("in")} ${secondLast}`;
+    }
+
+    return t("ads");
+  }, [BreadcrumbPath, t]);
+
+  const category =
+    BreadcrumbPath.length > 1 &&
+    BreadcrumbPath[BreadcrumbPath.length - 1]?.name;
+
+  const [customFields, setCustomFields] = useState([]);
+
+  const initialExtraDetails = useMemo(() => {
+    const temprorayExtraDet = {};
+    Array.from(searchParams.entries() || []).forEach(([key, value]) => {
+      if (!knownParams?.includes(key)) {
+        temprorayExtraDet[key] = value?.includes(",")
+          ? value?.split(",")
+          : value;
+      }
+    });
+    return temprorayExtraDet;
+  }, [
+    JSON.stringify(
+      Array.from(searchParams.entries()).filter(
+        ([key]) => !knownParams.includes(key)
+      )
+    ),
+  ]);
+
+  const [extraDetails, setExtraDetails] = useState(initialExtraDetails);
+
+  // Count active filters
+  const getActiveFilterCount = () => {
+    let count = 0;
+
+    // Location filter
+    if (country || state || city || areaId) count++;
+
+    // KM Range filter
+    if (km_range) count++;
+
+    if (category) count++;
+
+    if (featured_section) count++;
+
+    // Query filter
+    if (query) count++;
+
+    // Date Posted filter
+    if (date_posted) count++;
+
+    // Price Range filter
+    if (isMinPrice && max_price) count++;
+
+    // Extra Details filters
+    if (initialExtraDetails && Object.keys(initialExtraDetails).length > 0) {
+      count += Object.keys(initialExtraDetails).length;
+    }
+
+    return count;
+  };
+
+  const activeFilterCount = getActiveFilterCount();
+
+  useEffect(() => {
+    const fetchFeaturedSectionData = async () => {
+      try {
+        const response = await FeaturedSectionApi.getFeaturedSections({
+          slug: featured_section,
+        });
+
+        if (response?.data?.error === false) {
+          setFeaturedTitle(
+            response?.data?.data?.[0]?.translated_name ||
+            response?.data?.data?.[0]?.title
+          );
+        } else {
+          console.error(response?.data?.message);
+        }
+      } catch (error) {
+        console.error("Error:", error);
+      }
+    };
+    if (featured_section) {
+      fetchFeaturedSectionData();
+    }
+  }, [langCode, featured_section]);
+
+  useEffect(() => {
+    if (slug) {
+      constructBreadcrumbPath();
+    } else {
+      dispatch(
+        setBreadcrumbPath([
+          {
+            name: t("allCategories"),
+            key: "all-categories",
+            slug: "/ads",
+            isAllCategories: true,
+          },
+        ])
+      );
+      setCustomFields([]);
+      setExtraDetails({});
+      const fetchSeoSettings = async () => {
+        const res = await getSeoSettingsApi.getSeoSettings({
+          page: "ad-listing",
+        });
+        const data = res.data.data[0];
+        const title =
+          data?.translated_title ||
+          data?.title ||
+          process.env.NEXT_PUBLIC_META_TITLE;
+        const description =
+          data?.translated_description ||
+          process.env.NEXT_PUBLIC_META_DESCRIPTION;
+        const keywords =
+          data?.translated_keywords || process.env.NEXT_PUBLIC_META_kEYWORDS;
+        const image = data?.image || "";
+        const canonicalUrl = process.env.NEXT_PUBLIC_WEB_URL;
+        seoData({ title, description, keywords, image, canonicalUrl });
+      };
+      fetchSeoSettings();
+    }
+  }, [slug, langCode]);
+
+  const getCustomFieldsData = async (categoryIds) => {
+    try {
+      const res = await getCustomFieldsApi.getCustomFields({
+        category_ids: categoryIds,
+        filter: true,
+      });
+      const data = res?.data?.data;
+      setCustomFields(data);
+      const isShowCustomfieldFilter =
+        data.length > 0 &&
+        data.some(
+          (field) =>
+            field.type === "checkbox" ||
+            field.type === "radio" ||
+            field.type === "dropdown"
+        );
+
+      if (isShowCustomfieldFilter) {
+        const initialExtraDetails = {};
+        data.forEach((field) => {
+          const value = searchParams.get(field.id);
+          if (value) {
+            initialExtraDetails[field.id] =
+              field.type === "checkbox" ? value.split(",") : value;
+          }
+        });
+        setExtraDetails(initialExtraDetails);
+      } else {
+        setExtraDetails({});
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const constructBreadcrumbPath = async () => {
+    try {
+      const res = await getParentCategoriesApi.getPaymentCategories({
+        slug,
+        tree: 0,
+      });
+      const data = res?.data?.data || [];
+      const selectedCategory = data?.at(-1);
+      if (selectedCategory) {
+        seoData({
+          title:
+            selectedCategory?.translated_name || process.env.NEXT_PUBLIC_META_TITLE,
+          description:
+            selectedCategory?.translated_description ||
+            process.env.NEXT_PUBLIC_META_DESCRIPTION,
+          keywords:
+            generateKeywords(selectedCategory?.translated_description) ||
+            process.env.NEXT_PUBLIC_META_kEYWORDS,
+          image: selectedCategory?.image,
+          canonicalUrl: `${process.env.NEXT_PUBLIC_WEB_URL}?category=${selectedCategory?.slug}&lang=${langCode}`,
+        });
+      }
+      const breadcrumbArray = [
+        {
+          name: t("allCategories"),
+          key: "all-categories",
+          slug: "/ads",
+          isAllCategories: true,
+        },
+        ...data.map((item) => ({
+          name: item.translated_name,
+          key: item.slug,
+          slug: `/ads?category=${item.slug}`,
+        })),
+      ];
+      dispatch(setBreadcrumbPath(breadcrumbArray));
+      const categoryIds = data.map((category) => category.id).join(",");
+      await getCustomFieldsData(categoryIds);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    getSingleCatItem(1);
+  }, [
+    lat,
+    lng,
+    areaId,
+    city,
+    state,
+    country,
+    min_price,
+    max_price,
+    date_posted,
+    km_range,
+    sortBy,
+    initialExtraDetails,
+    slug,
+    query,
+    langCode,
+    featured_section,
+  ]);
+
+  const getSingleCatItem = async (page) => {
+    try {
+      const parameters = { page, limit: 12 };
+      if (sortBy) parameters.sort_by = sortBy;
+      if (isMinPrice) parameters.min_price = min_price;
+      if (max_price) parameters.max_price = max_price;
+      if (date_posted) parameters.posted_since = date_posted;
+      if (slug) parameters.category_slug = slug;
+      if (extraDetails) parameters.custom_fields = extraDetails;
+      if (featured_section) parameters.featured_section_slug = featured_section;
+
+      if (Number(km_range) > 0) {
+        parameters.latitude = lat;
+        parameters.longitude = lng;
+        parameters.radius = km_range;
+      } else {
+        if (areaId) {
+          parameters.area_id = areaId;
+        } else if (city) {
+          parameters.city = city;
+        } else if (state) {
+          parameters.state = state;
+        } else if (country) {
+          parameters.country = country;
+        }
+      }
+      if (query) {
+        parameters.search = query;
+      }
+      page === 1
+        ? setAdvertisements((prev) => ({ ...prev, isLoading: true }))
+        : setAdvertisements((prev) => ({ ...prev, isLoadMore: true }));
+
+      const res = await allItemApi.getItems(parameters);
+      const data = res?.data;
+
+      if (data.error === false) {
+        page > 1
+          ? setAdvertisements((prev) => ({
+            ...prev,
+            data: [...prev.data, ...data?.data?.data],
+            currentPage: data?.data?.current_page,
+            hasMore: data?.data?.last_page > data?.data?.current_page,
+          }))
+          : setAdvertisements((prev) => ({
+            ...prev,
+            data: data?.data?.data,
+            currentPage: data?.data?.current_page,
+            hasMore: data?.data?.last_page > data?.data?.current_page,
+          }));
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setAdvertisements((prev) => ({
+        ...prev,
+        isLoading: false,
+        isLoadMore: false,
+      }));
+    }
+  };
+
+  const handleProdLoadMore = async () => {
+    setAdvertisements((prev) => ({ ...prev, isLoadMore: true }));
+    await getSingleCatItem(advertisements.currentPage + 1);
+  };
+
+  const handleSortBy = (value) => {
+    newSearchParams.set("sort_by", value);
+    window.history.pushState(null, "", `/ads?${newSearchParams.toString()}`);
+  };
+
+  const handleLike = (id) => {
+    const updatedItems = advertisements.data.map((item) => {
+      if (item.id === id) {
+        return { ...item, is_liked: !item.is_liked };
+      }
+      return item;
+    });
+    setAdvertisements((prev) => ({ ...prev, data: updatedItems }));
+  };
+
+  const handleClearLocation = () => {
+    newSearchParams.delete("country");
+    newSearchParams.delete("state");
+    newSearchParams.delete("city");
+    newSearchParams.delete("area");
+    newSearchParams.delete("areaId");
+    newSearchParams.delete("lat");
+    newSearchParams.delete("lng");
+    newSearchParams.delete("km_range");
+    window.history.pushState(null, "", `/ads?${newSearchParams.toString()}`);
+  };
+
+  const handleClearRange = () => {
+    newSearchParams.delete("km_range");
+    window.history.pushState(null, "", `/ads?${newSearchParams.toString()}`);
+  };
+
+  const handleClearDatePosted = () => {
+    newSearchParams.delete("date_posted");
+    window.history.pushState(null, "", `/ads?${newSearchParams.toString()}`);
+  };
+
+  const handleClearBudget = () => {
+    newSearchParams.delete("min_price");
+    newSearchParams.delete("max_price");
+    window.history.pushState(null, "", `/ads?${newSearchParams.toString()}`);
+  };
+
+  const handleClearFeaturedSection = () => {
+    newSearchParams.delete("featured_section");
+    window.history.pushState(null, "", `/ads?${newSearchParams.toString()}`);
+  };
+
+  const handleClearCategory = () => {
+    newSearchParams.delete("category");
+    Object.keys(extraDetails || {})?.forEach((key) => {
+      newSearchParams.delete(key);
+    });
+    window.history.pushState(null, "", `/ads?${newSearchParams.toString()}`);
+  };
+
+  const handleClearExtraDetail = (keyToRemove) => {
+    const updatedExtraDetails = { ...extraDetails };
+    delete updatedExtraDetails[keyToRemove];
+    setExtraDetails(updatedExtraDetails);
+
+    newSearchParams.delete(keyToRemove);
+    window.history.pushState(null, "", `/ads?${newSearchParams.toString()}`);
+  };
+
+  const handleClearAll = () => {
+    newSearchParams.delete("country");
+    newSearchParams.delete("state");
+    newSearchParams.delete("city");
+    newSearchParams.delete("area");
+    newSearchParams.delete("areaId");
+    newSearchParams.delete("lat");
+    newSearchParams.delete("lng");
+    newSearchParams.delete("km_range");
+    newSearchParams.delete("date_posted");
+    newSearchParams.delete("min_price");
+    newSearchParams.delete("max_price");
+    newSearchParams.delete("category");
+    newSearchParams.delete("query");
+    newSearchParams.delete("featured_section");
+    Object.keys(initialExtraDetails || {})?.forEach((key) => {
+      newSearchParams.delete(key);
+    });
+    setExtraDetails({});
+    window.history.pushState(null, "", `/ads?${newSearchParams.toString()}`);
+  };
+
+  const handleClearQuery = () => {
+    newSearchParams.delete("query");
+    window.history.pushState(null, "", `/ads?${newSearchParams.toString()}`);
+  };
+
+  const postedSince =
+    date_posted === "all-time"
+      ? t("allTime")
+      : date_posted === "today"
+        ? t("today")
+        : date_posted === "within-1-week"
+          ? t("within1Week")
+          : date_posted === "within-2-week"
+            ? t("within2Weeks")
+            : date_posted === "within-1-month"
+              ? t("within1Month")
+              : date_posted === "within-3-month"
+                ? t("within3Months")
+                : "";
+
+  return (
+    <Layout>
+      <BreadCrumb />
+      <div className="container mt-8">
+        <div className="flex flex-col">
+          <h1 className="text-2xl font-semibold mb-6">{title}</h1>
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+            <div className="xl:col-span-3 lg:col-span-4 col-span-1">
+              <Filter
+                customFields={customFields}
+                extraDetails={extraDetails}
+                setExtraDetails={setExtraDetails}
+                newSearchParams={newSearchParams}
+                country={country}
+                state={state}
+                city={city}
+                area={area}
+              />
+            </div>
+            <div className="xl:col-span-9 lg:col-span-8 col-span-1 flex flex-col gap-5">
+              <div className="flex justify-between items-center">
+                <div>
+                  <div className="flex flex-col md:flex-row  items-start md:items-center gap-2">
+                    <div className="flex gap-2 items-center whitespace-nowrap">
+                      <TbTransferVertical />
+                      {t("sortBy")}
+                    </div>
+                    <Select value={sortBy} onValueChange={handleSortBy}>
+                      <SelectTrigger className="max-w-[180px] font-semibold">
+                        <SelectValue
+                          placeholder={t("sortBy")}
+                          className="font-semibold"
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup className="font-semibold">
+                          <SelectItem value="new-to-old">
+                            {t("newestToOldest")}
+                          </SelectItem>
+                          <SelectItem value="old-to-new">
+                            {t("oldestToNewest")}
+                          </SelectItem>
+                          <SelectItem value="price-high-to-low">
+                            {t("priceHighToLow")}
+                          </SelectItem>
+                          <SelectItem value="price-low-to-high">
+                            {t("priceLowToHigh")}
+                          </SelectItem>
+                          <SelectItem value="popular_items">
+                            {t("popular")}
+                          </SelectItem>
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-1">
+                  <button
+                    onClick={() => setView("list")}
+                    className={`text-muted-foreground p-3 rounded-full ${view === "list" ? "bg-primary text-white" : ""
+                      }`}
+                  >
+                    <CiGrid2H size={22} />
+                  </button>
+                  <button
+                    onClick={() => setView("grid")}
+                    className={` text-muted-foreground  p-3 rounded-full  ${view === "grid" ? "bg-primary text-white" : ""
+                      }`}
+                  >
+                    <IoGrid size={22} />
+                  </button>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between gap-2">
+                <div className="flex gap-2 flex-wrap">
+                  {category && (
+                    <Badge
+                      variant="outline"
+                      className="px-4 text-base font-normal py-2 rounded-full flex items-center gap-2 bg-muted"
+                    >
+                      <span>
+                        {t("category")}: {category}
+                      </span>
+                      <IoIosCloseCircle
+                        size={22}
+                        className="cursor-pointer "
+                        onClick={handleClearCategory}
+                      />
+                    </Badge>
+                  )}
+
+                  {query && (
+                    <Badge
+                      variant="outline"
+                      className="px-4 text-base font-normal py-2 rounded-full flex items-center gap-2 bg-muted"
+                    >
+                      <span>
+                        {t("search")}: {query}
+                      </span>
+                      <IoIosCloseCircle
+                        size={22}
+                        className="cursor-pointer "
+                        onClick={handleClearQuery}
+                      />
+                    </Badge>
+                  )}
+
+                  {(country || state || city || area) && (
+                    <Badge
+                      variant="outline"
+                      className="px-4 text-base font-normal py-2 rounded-full flex items-center gap-2 bg-muted"
+                    >
+                      <span>
+                        {t("location")}:{" "}
+                        {selectedLocation?.translated_name ||
+                          selectedLocation?.name}
+                      </span>
+                      <IoIosCloseCircle
+                        size={22}
+                        className="cursor-pointer "
+                        onClick={handleClearLocation}
+                      />
+                    </Badge>
+                  )}
+                  {Number(km_range) > 0 && (
+                    <Badge
+                      variant="outline"
+                      className="px-4 text-base font-normal py-2 rounded-full flex items-center gap-2 bg-muted"
+                    >
+                      <span>
+                        {t("nearByRange")}: {km_range} KM
+                      </span>
+                      <IoIosCloseCircle
+                        size={22}
+                        className="cursor-pointer "
+                        onClick={handleClearRange}
+                      />
+                    </Badge>
+                  )}
+
+                  {date_posted && (
+                    <Badge
+                      variant="outline"
+                      className="px-4 text-base font-normal py-2 rounded-full flex items-center gap-2 bg-muted"
+                    >
+                      <span>
+                        {t("datePosted")}: {postedSince}
+                      </span>
+                      <IoIosCloseCircle
+                        size={22}
+                        className="cursor-pointer "
+                        onClick={handleClearDatePosted}
+                      />
+                    </Badge>
+                  )}
+
+                  {isMinPrice && max_price && (
+                    <Badge
+                      variant="outline"
+                      className="px-4 text-base font-normal py-2 rounded-full flex items-center gap-2 bg-muted"
+                    >
+                      <span>
+                        {t("budget")}: {min_price}-{max_price}
+                      </span>
+                      <IoIosCloseCircle
+                        size={22}
+                        className="cursor-pointer "
+                        onClick={handleClearBudget}
+                      />
+                    </Badge>
+                  )}
+
+                  {featured_section && (
+                    <Badge
+                      variant="outline"
+                      className="px-4 text-base font-normal py-2 rounded-full flex items-center gap-2 bg-muted"
+                    >
+                      <span>
+                        {t("featuredSection")}: {featuredTitle}
+                      </span>
+                      <IoIosCloseCircle
+                        size={22}
+                        className="cursor-pointer "
+                        onClick={handleClearFeaturedSection}
+                      />
+                    </Badge>
+                  )}
+                  {initialExtraDetails &&
+                    Object.entries(initialExtraDetails || {}).map(
+                      ([key, value]) => {
+                        const field = customFields.find(
+                          (f) => f.id.toString() === key.toString()
+                        );
+
+                        const fieldName = field?.translated_name || field?.name;
+
+                        // Function to get translated value
+                        const getTranslatedValue = (val) => {
+                          if (!field?.values || !field?.translated_value)
+                            return val;
+                          const idx = field.values.indexOf(val);
+                          return idx !== -1 ? field.translated_value[idx] : val;
+                        };
+
+                        const displayValue = Array.isArray(value)
+                          ? value.map((v) => getTranslatedValue(v)).join(", ")
+                          : getTranslatedValue(value);
+
+                        return (
+                          <Badge
+                            key={key}
+                            variant="outline"
+                            className="px-4 text-base font-normal py-2 rounded-full flex items-center gap-2 bg-muted"
+                          >
+                            <span>
+                              {fieldName}: {displayValue}
+                            </span>
+                            <IoIosCloseCircle
+                              size={22}
+                              className="cursor-pointer"
+                              onClick={() => handleClearExtraDetail(key)}
+                            />
+                          </Badge>
+                        );
+                      }
+                    )}
+                </div>
+                {activeFilterCount > 1 && (
+                  <button
+                    className="text-primary whitespace-nowrap"
+                    onClick={handleClearAll}
+                  >
+                    {t("clearAll")}
+                  </button>
+                )}
+              </div>
+
+              <div className="grid grid-cols-12 gap-4">
+                {advertisements?.isLoading ? (
+                  Array.from({ length: 12 }).map((_, index) =>
+                    view === "list" ? (
+                      <div className="col-span-12" key={index}>
+                        <ProductHorizontalCardSkeleton />
+                      </div>
+                    ) : (
+                      <div
+                        key={index}
+                        className="col-span-12 sm:col-span-6 xl:col-span-4"
+                      >
+                        <ProductCardSkeleton />
+                      </div>
+                    )
+                  )
+                ) : advertisements.data && advertisements.data.length > 0 ? (
+                  advertisements.data?.map((item, index) =>
+                    view === "list" ? (
+                      <div className="col-span-12" key={index}>
+                        <ProductHorizontalCard
+                          item={item}
+                          handleLike={handleLike}
+                        />
+                      </div>
+                    ) : (
+                      <div
+                        className="col-span-12 sm:col-span-6 xl:col-span-4"
+                        key={index}
+                      >
+                        <ProductCard item={item} handleLike={handleLike} />
+                      </div>
+                    )
+                  )
+                ) : (
+                  <div className="col-span-12">
+                    <NoData name={t("ads")} />
+                  </div>
+                )}
+              </div>
+              {advertisements.data &&
+                advertisements.data.length > 0 &&
+                advertisements.hasMore && (
+                  <div className="text-center mt-6">
+                    <Button
+                      variant="outline"
+                      className="text-sm sm:text-base text-primary w-[256px]"
+                      disabled={
+                        advertisements.isLoading || advertisements.isLoadMore
+                      }
+                      onClick={handleProdLoadMore}
+                    >
+                      {advertisements.isLoadMore ? t("loading") : t("loadMore")}
+                    </Button>
+                  </div>
+                )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Ads;
diff --git a/components/PagesComponent/AdsListing/AdLanguageSelector.jsx b/components/PagesComponent/AdsListing/AdLanguageSelector.jsx
new file mode 100644
index 0000000..f0bd8e3
--- /dev/null
+++ b/components/PagesComponent/AdsListing/AdLanguageSelector.jsx
@@ -0,0 +1,54 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { getIsRtl } from "@/redux/reducer/languageSlice";
+import { t } from "@/utils";
+import { useSelector } from "react-redux";
+
+const AdLanguageSelector = ({
+  langId,
+  setLangId,
+  languages,
+  setTranslations,
+}) => {
+  const isRTL = useSelector(getIsRtl);
+
+  const handleLangChange = (newId) => {
+    setLangId(newId);
+    setTranslations((t) => ({
+      ...t,
+      [newId]: t[newId] || {},
+    }));
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <p className="whitespace-nowrap text-sm font-medium hidden lg:block">
+        {t("selectLanguage")}
+      </p>
+      <Select value={langId} onValueChange={handleLangChange}>
+        <SelectTrigger className="gap-2">
+          <SelectValue placeholder="Select language" />
+        </SelectTrigger>
+        <SelectContent align={isRTL ? "start" : "end"}>
+          <SelectGroup>
+            {languages &&
+              languages.length > 0 &&
+              languages.map((lang) => (
+                <SelectItem key={lang.id} value={lang.id}>
+                  {lang.name}
+                </SelectItem>
+              ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
+
+export default AdLanguageSelector;
diff --git a/components/PagesComponent/AdsListing/AdSuccessModal.jsx b/components/PagesComponent/AdsListing/AdSuccessModal.jsx
new file mode 100644
index 0000000..d5aeba2
--- /dev/null
+++ b/components/PagesComponent/AdsListing/AdSuccessModal.jsx
@@ -0,0 +1,55 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import trueGif from "../../../public/assets/true.gif";
+import CustomLink from "@/components/Common/CustomLink";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+
+const AdSuccessModal = ({
+  openSuccessModal,
+  setOpenSuccessModal,
+  createdAdSlug,
+}) => {
+  const closeSuccessModal = () => {
+    setOpenSuccessModal(false);
+  };
+
+  return (
+    <Dialog open={openSuccessModal} onOpenChange={closeSuccessModal}>
+      <DialogContent
+        className="[&>button]:hidden !max-w-[520px] py-[50px] px-[30px] sm:px-[80px]"
+        onInteractOutside={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <DialogHeader className="flex flex-col gap-4 items-center">
+          <CustomImage
+            src={trueGif}
+            alt="success"
+            height={176}
+            width={176}
+            className="h-44 w-44"
+          />
+          <DialogTitle className="text-3xl font-semibold text-center !p-0 mt-0">
+            {t("adPostedSuccess")}
+          </DialogTitle>
+          <CustomLink
+            href={`/my-listing/${createdAdSlug}`}
+            className="py-3 px-6 bg-primary text-white rounded-md"
+          >
+            {t("viewAd")}
+          </CustomLink>
+          <CustomLink href="/" className="">
+            {t("backToHome")}
+          </CustomLink>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AdSuccessModal;
diff --git a/components/PagesComponent/AdsListing/AdsListing.jsx b/components/PagesComponent/AdsListing/AdsListing.jsx
new file mode 100644
index 0000000..5c11008
--- /dev/null
+++ b/components/PagesComponent/AdsListing/AdsListing.jsx
@@ -0,0 +1,753 @@
+"use client";
+import { useEffect, useState } from "react";
+import ComponentOne from "./ComponentOne";
+import {
+  addItemApi,
+  categoryApi,
+  getCurrenciesApi,
+  getCustomFieldsApi,
+  getParentCategoriesApi,
+} from "@/utils/api";
+import ComponentTwo from "./ComponentTwo";
+import {
+  filterNonDefaultTranslations,
+  getDefaultCountryCode,
+  isValidURL,
+  prepareCustomFieldFiles,
+  prepareCustomFieldTranslations,
+  t,
+  validateExtraDetails,
+} from "@/utils";
+import { toast } from "sonner";
+import ComponentThree from "./ComponentThree";
+import ComponentFour from "./ComponentFour";
+import ComponentFive from "./ComponentFive";
+import { useSelector } from "react-redux";
+import AdSuccessModal from "./AdSuccessModal";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import Layout from "@/components/Layout/Layout";
+import Checkauth from "@/HOC/Checkauth";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import AdLanguageSelector from "./AdLanguageSelector";
+import {
+  getDefaultLanguageCode,
+  getLanguages,
+} from "@/redux/reducer/settingSlice";
+import { userSignUpData } from "@/redux/reducer/authSlice";
+import { isValidPhoneNumber } from "libphonenumber-js/max";
+import { getCurrentCountry } from "@/redux/reducer/locationSlice";
+
+const AdsListing = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const currentCountry = useSelector(getCurrentCountry);
+  const [step, setStep] = useState(1);
+  const [categories, setCategories] = useState();
+  const [categoriesLoading, setCategoriesLoading] = useState(false);
+  const [isLoadMoreCat, setIsLoadMoreCat] = useState(false);
+  const [categoryPath, setCategoryPath] = useState([]);
+  const [currentPage, setCurrentPage] = useState();
+  const [lastPage, setLastPage] = useState();
+  const [disabledTab, setDisabledTab] = useState({
+    categoryTab: false,
+    detailTab: true,
+    extraDetailTabl: true,
+    images: true,
+    location: true,
+  });
+  const [customFields, setCustomFields] = useState([]);
+  const [filePreviews, setFilePreviews] = useState({});
+  const [uploadedImages, setUploadedImages] = useState([]);
+  const [otherImages, setOtherImages] = useState([]);
+  const [location, setLocation] = useState({});
+  const [currencies, setCurrencies] = useState([]);
+  const [isAdPlaced, setIsAdPlaced] = useState(false);
+  const [openSuccessModal, setOpenSuccessModal] = useState(false);
+  const [createdAdSlug, setCreatedAdSlug] = useState("");
+  const userData = useSelector(userSignUpData);
+
+  const languages = useSelector(getLanguages);
+  const defaultLanguageCode = useSelector(getDefaultLanguageCode);
+  const defaultLangId = languages?.find(
+    (lang) => lang.code === defaultLanguageCode
+  )?.id;
+
+  const [extraDetails, setExtraDetails] = useState({
+    [defaultLangId]: {},
+  });
+  const [langId, setLangId] = useState(defaultLangId);
+
+  const countryCode =
+    userData?.country_code?.replace("+", "") || getDefaultCountryCode();
+  const mobile = userData?.mobile || "";
+  const regionCode =
+    userData?.region_code?.toLowerCase() ||
+    process.env.NEXT_PUBLIC_DEFAULT_COUNTRY?.toLowerCase() ||
+    "in";
+
+  const [translations, setTranslations] = useState({
+    [langId]: {
+      contact: mobile,
+      country_code: countryCode,
+      region_code: regionCode,
+    },
+  });
+  const hasTextbox = customFields.some((field) => field.type === "textbox");
+
+  const defaultDetails = translations[defaultLangId] || {};
+  const currentDetails = translations[langId] || {};
+  const currentExtraDetails = extraDetails[langId] || {};
+
+  const is_job_category =
+    Number(categoryPath[categoryPath.length - 1]?.is_job_category) === 1;
+  const isPriceOptional =
+    Number(categoryPath[categoryPath.length - 1]?.price_optional) === 1;
+
+  const allCategoryIdsString = categoryPath
+    .map((category) => category.id)
+    .join(",");
+  let lastItemId = categoryPath[categoryPath.length - 1]?.id;
+
+  useEffect(() => {
+    if (step === 1) {
+      handleFetchCategories();
+    }
+  }, [CurrentLanguage.id]);
+
+  useEffect(() => {
+    if (step !== 1 && allCategoryIdsString) {
+      getCustomFieldsData();
+    }
+  }, [allCategoryIdsString, CurrentLanguage.id]);
+
+  useEffect(() => {
+    // Update category path translations when language changes
+    if (categoryPath.length > 0) {
+      const lastCategoryId = categoryPath[categoryPath.length - 1]?.id;
+      if (lastCategoryId) {
+        getParentCategoriesApi
+          .getPaymentCategories({
+            child_category_id: lastCategoryId,
+          })
+          .then((res) => {
+            const updatedPath = res?.data?.data;
+            if (updatedPath?.length > 0) {
+              setCategoryPath(updatedPath);
+            }
+          })
+          .catch((err) => {
+            console.log("Error updating category path:", err);
+          });
+      }
+    }
+  }, [CurrentLanguage.id]);
+
+  useEffect(() => {
+    getCurrencies();
+  }, [countryCode]);
+
+  const getCurrencies = async () => {
+    try {
+      let params = {};
+
+      if (currentCountry) {
+        params.country = currentCountry;
+      }
+      const res = await getCurrenciesApi.getCurrencies(params);
+      const currenciesData = res?.data?.data || [];
+      setCurrencies(currenciesData);
+      // 🚫 IMPORTANT: If no currencies, REMOVE currency_id
+      if (currenciesData.length === 0) {
+        setTranslations((prev) => {
+          const updated = { ...prev };
+
+          if (updated[langId]?.currency_id) {
+            delete updated[langId].currency_id;
+          }
+
+          return updated;
+        });
+        return;
+      }
+      // ✅ Normal case: set default currency
+      const defaultCurrency =
+        currenciesData.find((c) => c.selected == 1) || currenciesData[0];
+
+      if (defaultCurrency && !translations[langId]?.currency_id) {
+        setTranslations((prev) => ({
+          ...prev,
+          [langId]: {
+            ...prev[langId],
+            currency_id: defaultCurrency.id,
+          },
+        }));
+      }
+    } catch (error) {
+      console.log("error", error);
+    }
+  };
+
+  const handleFetchCategories = async (
+    category,
+    isWaitForApiResToUpdatePath = false
+  ) => {
+    setCategoriesLoading(true);
+    try {
+      const categoryId = category ? category?.id : null;
+
+      const res = await categoryApi.getCategory({
+        category_id: categoryId,
+        listing: 1,
+      });
+      if (res?.data?.error === false) {
+        const data = res?.data?.data?.data;
+        setCategories(data);
+        setCurrentPage(res?.data?.data?.current_page);
+        setLastPage(res?.data?.data?.last_page);
+        if (isWaitForApiResToUpdatePath) {
+          setCategoryPath((prevPath) => [...prevPath, category]);
+          if (category.subcategories_count == 0) {
+            setStep(2);
+            setDisabledTab({
+              categoryTab: true,
+              detailTab: false,
+              extraDetailTabl: false,
+              images: false,
+              location: false,
+            });
+          }
+        } else {
+          const index = categoryPath.findIndex(
+            (item) => item.id === category?.id
+          );
+          setCategoryPath((prevPath) => prevPath.slice(0, index + 1));
+        }
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log("error", error);
+    } finally {
+      setCategoriesLoading(false);
+    }
+  };
+
+  const getCustomFieldsData = async () => {
+    try {
+      const res = await getCustomFieldsApi.getCustomFields({
+        category_ids: allCategoryIdsString,
+      });
+      const data = res?.data?.data;
+      setCustomFields(data);
+
+      const initializedDetails = {};
+
+      languages.forEach((lang) => {
+        const langFields = {};
+
+        data.forEach((item) => {
+          if (lang.id !== defaultLangId && item.type !== "textbox") return;
+
+          let initialValue = "";
+          switch (item.type) {
+            case "checkbox":
+            case "radio":
+              initialValue = [];
+              break;
+            case "fileinput":
+              initialValue = null;
+              break;
+            case "dropdown":
+            case "textbox":
+            case "number":
+            case "text":
+              initialValue = "";
+              break;
+            default:
+              break;
+          }
+          langFields[item.id] = initialValue;
+        });
+        initializedDetails[lang.id] = langFields;
+      });
+      setExtraDetails(initializedDetails);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleCategoryTabClick = async (category) => {
+    await handleFetchCategories(category, true);
+  };
+
+  const handleSelectedTabClick = (id) => {
+    setCustomFields([]);
+    setLangId(defaultLangId);
+    setTranslations({
+      [defaultLangId]: {
+        contact: mobile,
+        country_code: countryCode,
+        region_code: regionCode,
+      },
+    });
+    setExtraDetails({
+      [defaultLangId]: {},
+    });
+    if (step !== 1) {
+      setStep(1);
+      setDisabledTab({
+        categoryTab: false,
+        detailTab: true,
+        extraDetailTabl: true,
+        images: true,
+        location: true,
+      });
+    }
+    // ✅ SINGLE CATEGORY EDGE CASE
+
+    const index = categoryPath.findIndex((item) => item.id === id);
+
+    if (index === 0) {
+      setCategoryPath([]);
+      // Fetch root / all categories
+      handleFetchCategories(null);
+      return;
+    }
+
+    // ✅ NORMAL BACK-NAVIGATION FLOW
+    const secondLast = categoryPath[index - 1];
+
+    if (secondLast) {
+      handleFetchCategories(secondLast);
+    }
+  };
+
+  const handleDetailsSubmit = () => {
+    if (customFields?.length === 0) {
+      setStep(4);
+    } else {
+      setStep(3);
+    }
+  };
+  const SLUG_RE = /^[a-z0-9-]+$/i;
+  const isEmpty = (x) => !x || !x.toString().trim();
+  const isNegative = (n) => Number(n) < 0;
+
+  const handleFullSubmission = () => {
+    const {
+      name,
+      description,
+      price,
+      slug,
+      contact,
+      video_link,
+      min_salary,
+      max_salary,
+      country_code,
+    } = defaultDetails;
+
+    // Step 1: Must pick a category
+    const catId = categoryPath.at(-1)?.id;
+
+    if (!catId) {
+      toast.error(t("selectCategory"));
+      return setStep(1);
+    }
+    // Step 2: Get data for default (selected) language
+    if (isEmpty(name) || isEmpty(description)) {
+      toast.error(t("completeDetails")); // Title, desc, phone required
+      return setStep(2);
+    }
+
+    // ✅ Validate phone number ONLY if user entered one as it is optional
+    if (Boolean(contact) && !isValidPhoneNumber(`+${country_code}${contact}`)) {
+      toast.error(t("invalidPhoneNumber"));
+      return setStep(2);
+    }
+
+    // Step 3: Validate job or price fields
+    if (is_job_category) {
+      const min = min_salary ? Number(min_salary) : null;
+      const max = max_salary ? Number(max_salary) : null;
+
+      if (min !== null && min < 0) {
+        toast.error(t("enterValidSalaryMin"));
+        return setStep(2);
+      }
+      if (max !== null && max < 0) {
+        toast.error(t("enterValidSalaryMax"));
+        return setStep(2);
+      }
+      if (min !== null && max !== null) {
+        if (min === max) {
+          toast.error(t("salaryMinCannotBeEqualMax"));
+          return setStep(2);
+        }
+        if (min > max) {
+          toast.error(t("salaryMinCannotBeGreaterThanMax"));
+          return setStep(2);
+        }
+      }
+    } else {
+      if (!isPriceOptional && isEmpty(price)) {
+        toast.error(t("completeDetails")); // Price is required
+        return setStep(2);
+      }
+      if (!isEmpty(price) && isNegative(price)) {
+        toast.error(t("enterValidPrice"));
+        return setStep(2);
+      }
+    }
+
+    // Step 4: Video URL check
+    if (!isEmpty(video_link) && !isValidURL(video_link)) {
+      toast.error(t("enterValidUrl"));
+      return setStep(2);
+    }
+
+    // Step 5: Slug validation
+    if (!isEmpty(slug) && !SLUG_RE.test(slug.trim())) {
+      toast.error(t("addValidSlug"));
+      return setStep(2);
+    }
+
+    if (
+      customFields.length !== 0 &&
+      !validateExtraDetails({
+        languages,
+        defaultLangId,
+        extraDetails,
+        customFields,
+        filePreviews,
+      })
+    ) {
+      return setStep(3);
+    }
+    if (uploadedImages.length === 0) {
+      toast.error(t("uploadMainPicture"));
+      setStep(4);
+      return;
+    }
+
+    if (
+      !location?.country ||
+      !location?.state ||
+      !location?.city ||
+      !location?.formattedAddress
+    ) {
+      toast.error(t("pleaseSelectCity"));
+      return;
+    }
+    postAd();
+  };
+
+  const postAd = async () => {
+    const catId = categoryPath.at(-1)?.id;
+    const customFieldTranslations =
+      prepareCustomFieldTranslations(extraDetails);
+
+    const customFieldFiles = prepareCustomFieldFiles(
+      extraDetails,
+      defaultLangId
+    );
+    const nonDefaultTranslations = filterNonDefaultTranslations(
+      translations,
+      defaultLangId
+    );
+
+    const allData = {
+      name: defaultDetails.name,
+      slug: defaultDetails.slug.trim(),
+      description: defaultDetails?.description,
+      category_id: catId,
+      all_category_ids: allCategoryIdsString,
+      price: defaultDetails.price,
+      contact: defaultDetails.contact,
+      video_link: defaultDetails?.video_link,
+      // custom_fields: transformedCustomFields,
+      image: uploadedImages[0],
+      gallery_images: otherImages,
+      address: location?.formattedAddress,
+      latitude: location?.lat,
+      longitude: location?.long,
+      custom_field_files: customFieldFiles,
+      country: location?.country,
+      state: location?.state,
+      city: location?.city,
+      ...(location?.area_id ? { area_id: Number(location?.area_id) } : {}),
+      ...(Object.keys(nonDefaultTranslations).length > 0 && {
+        translations: nonDefaultTranslations,
+      }),
+      ...(Object.keys(customFieldTranslations).length > 0 && {
+        custom_field_translations: customFieldTranslations,
+      }),
+      ...(defaultDetails?.currency_id && {
+        currency_id: defaultDetails?.currency_id,
+      }),
+      region_code: defaultDetails?.region_code?.toUpperCase() || "",
+    };
+    if (is_job_category) {
+      // Only add salary fields if they're provided
+      if (defaultDetails.min_salary) {
+        allData.min_salary = defaultDetails.min_salary;
+      }
+      if (defaultDetails.max_salary) {
+        allData.max_salary = defaultDetails.max_salary;
+      }
+    } else {
+      allData.price = defaultDetails.price;
+    }
+
+    try {
+      setIsAdPlaced(true);
+      const res = await addItemApi.addItem(allData);
+      if (res?.data?.error === false) {
+        setOpenSuccessModal(true);
+        setCreatedAdSlug(res?.data?.data[0]?.slug);
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsAdPlaced(false);
+    }
+  };
+
+  const handleGoBack = () => {
+    setStep((prev) => {
+      if (customFields.length === 0 && step === 4) {
+        return prev - 2;
+      } else {
+        return prev - 1;
+      }
+    });
+  };
+
+  const fetchMoreCategory = async () => {
+    setIsLoadMoreCat(true);
+    try {
+      const response = await categoryApi.getCategory({
+        page: `${currentPage + 1}`,
+        category_id: lastItemId,
+        listing: 1,
+      });
+      const { data } = response.data;
+      setCategories((prev) => [...prev, ...data.data]);
+      setCurrentPage(data?.current_page); // Update the current page
+      setLastPage(data?.last_page); // Update the current page
+    } catch (error) {
+      console.error("Error:", error);
+    } finally {
+      setIsLoadMoreCat(false);
+    }
+  };
+
+  const handleTabClick = (tab) => {
+    if (tab === 1 && !disabledTab.categoryTab) {
+      setStep(1);
+    } else if (tab === 2 && !disabledTab.detailTab) {
+      setStep(2);
+    } else if (tab === 3 && !disabledTab.extraDetailTabl) {
+      setStep(3);
+    } else if (tab === 4 && !disabledTab.images) {
+      setStep(4);
+    } else if (tab === 5 && !disabledTab.location) {
+      setStep(5);
+    }
+  };
+
+  const handleDeatilsBack = () => {
+    setCustomFields([]);
+    setLangId(defaultLangId);
+    setTranslations({
+      [defaultLangId]: {
+        contact: mobile,
+        country_code: countryCode,
+        region_code: regionCode,
+      },
+    });
+    setExtraDetails({
+      [defaultLangId]: {},
+    });
+
+    if (step !== 1) {
+      setStep(1);
+      setDisabledTab({
+        selectCategory: false,
+        details: true,
+        extraDet: true,
+        img: true,
+        loc: true,
+      });
+    }
+    const secondLast = categoryPath.at(-2);
+    if (secondLast) {
+      handleFetchCategories(secondLast);
+    }
+  };
+
+  return (
+    <Layout>
+      <BreadCrumb title2={t("adListing")} />
+      <div className="container">
+        <div className="flex flex-col gap-8 mt-8">
+          <h1 className="text-2xl font-medium">{t("adListing")}</h1>
+          <div className="flex flex-col gap-6 border rounded-md p-4">
+            <div className="flex items-center gap-3 justify-between bg-muted px-4 py-2 rounded-md flex-wrap">
+              <div className="flex items-center gap-3 flex-wrap">
+                <div
+                  className={`transition-all duration-300 p-2 cursor-pointer ${step === 1 ? "bg-primary text-white" : ""
+                    } rounded-md ${disabledTab?.categoryTab == true ? "opacity-60" : " "
+                    }`}
+                  onClick={() => handleTabClick(1)}
+                >
+                  {t("selectedCategory")}
+                </div>
+                <div
+                  className={`transition-all duration-300 p-2 cursor-pointer ${step === 2 ? "bg-primary text-white" : ""
+                    } rounded-md ${disabledTab?.detailTab == true ? "opacity-60" : " "
+                    }`}
+                  onClick={() => handleTabClick(2)}
+                >
+                  {t("details")}
+                </div>
+
+                {customFields?.length > 0 && (
+                  <div
+                    className={`transition-all duration-300 p-2 cursor-pointer ${step === 3 ? "bg-primary text-white" : ""
+                      } rounded-md ${disabledTab?.extraDetailTabl == true ? "opacity-60" : " "
+                      }`}
+                    onClick={() => handleTabClick(3)}
+                  >
+                    {t("extraDetails")}
+                  </div>
+                )}
+
+                <div
+                  className={`transition-all duration-300 p-2 cursor-pointer ${step === 4 ? "bg-primary text-white" : ""
+                    } rounded-md  ${disabledTab?.images == true ? "opacity-60" : " "
+                    }`}
+                  onClick={() => handleTabClick(4)}
+                >
+                  {t("images")}
+                </div>
+
+                <div
+                  className={`transition-all duration-300 p-2 cursor-pointer ${step === 5 ? "bg-primary text-white" : ""
+                    } rounded-md ${disabledTab?.location == true ? "opacity-60" : " "
+                    }`}
+                  onClick={() => handleTabClick(5)}
+                >
+                  {t("location")}
+                </div>
+              </div>
+
+              {(step == 2 || (step === 3 && hasTextbox)) && (
+                <AdLanguageSelector
+                  langId={langId}
+                  setLangId={setLangId}
+                  languages={languages}
+                  setTranslations={setTranslations}
+                />
+              )}
+            </div>
+
+            {(step == 1 || step == 2) && categoryPath?.length > 0 && (
+              <div className="flex flex-col gap-2">
+                <p className="font-medium text-xl">{t("selectedCategory")}</p>
+                <div className="flex">
+                  {categoryPath?.map((item, index) => {
+                    const shouldShowComma =
+                      categoryPath.length > 1 &&
+                      index !== categoryPath.length - 1;
+                    return (
+                      <button
+                        key={item.id}
+                        className="text-primary ltr:text-left rtl:text-right"
+                        onClick={() => handleSelectedTabClick(item?.id)}
+                        disabled={categoriesLoading}
+                      >
+                        {item.translated_name || item.name}
+                        {shouldShowComma && ", "}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+            <div>
+              {step == 1 && (
+                <ComponentOne
+                  categories={categories}
+                  setCategoryPath={setCategoryPath}
+                  fetchMoreCategory={fetchMoreCategory}
+                  lastPage={lastPage}
+                  currentPage={currentPage}
+                  isLoadMoreCat={isLoadMoreCat}
+                  handleCategoryTabClick={handleCategoryTabClick}
+                  categoriesLoading={categoriesLoading}
+                />
+              )}
+
+              {step == 2 && (
+                <ComponentTwo
+                  currencies={currencies}
+                  setTranslations={setTranslations}
+                  current={currentDetails}
+                  langId={langId}
+                  defaultLangId={defaultLangId}
+                  handleDetailsSubmit={handleDetailsSubmit}
+                  handleDeatilsBack={handleDeatilsBack}
+                  is_job_category={is_job_category}
+                  isPriceOptional={isPriceOptional}
+                />
+              )}
+
+              {step == 3 && (
+                <ComponentThree
+                  customFields={customFields}
+                  setExtraDetails={setExtraDetails}
+                  filePreviews={filePreviews}
+                  setFilePreviews={setFilePreviews}
+                  setStep={setStep}
+                  handleGoBack={handleGoBack}
+                  currentExtraDetails={currentExtraDetails}
+                  langId={langId}
+                  defaultLangId={defaultLangId}
+                />
+              )}
+
+              {step == 4 && (
+                <ComponentFour
+                  uploadedImages={uploadedImages}
+                  setUploadedImages={setUploadedImages}
+                  otherImages={otherImages}
+                  setOtherImages={setOtherImages}
+                  setStep={setStep}
+                  handleGoBack={handleGoBack}
+                />
+              )}
+
+              {step == 5 && (
+                <ComponentFive
+                  location={location}
+                  setLocation={setLocation}
+                  handleFullSubmission={handleFullSubmission}
+                  isAdPlaced={isAdPlaced}
+                  handleGoBack={handleGoBack}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+        <AdSuccessModal
+          openSuccessModal={openSuccessModal}
+          setOpenSuccessModal={setOpenSuccessModal}
+          createdAdSlug={createdAdSlug}
+        />
+      </div>
+    </Layout>
+  );
+};
+
+export default Checkauth(AdsListing);
diff --git a/components/PagesComponent/AdsListing/ComponentFive.jsx b/components/PagesComponent/AdsListing/ComponentFive.jsx
new file mode 100644
index 0000000..177ce7f
--- /dev/null
+++ b/components/PagesComponent/AdsListing/ComponentFive.jsx
@@ -0,0 +1,173 @@
+import { useState } from "react";
+import { FaLocationCrosshairs } from "react-icons/fa6";
+import dynamic from "next/dynamic";
+import { BiMapPin } from "react-icons/bi";
+import { IoLocationOutline } from "react-icons/io5";
+import { toast } from "sonner";
+import { useSelector } from "react-redux";
+import ManualAddress from "./ManualAddress";
+import { getIsBrowserSupported } from "@/redux/reducer/locationSlice";
+import { getIsPaidApi } from "@/redux/reducer/settingSlice";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import { t } from "@/utils";
+import LandingAdEditSearchAutocomplete from "@/components/Location/LandingAdEditSearchAutocomplete";
+import { Loader2 } from "lucide-react";
+import useGetLocation from "@/components/Layout/useGetLocation";
+
+const MapComponent = dynamic(() => import("@/components/Common/MapComponent"), {
+  ssr: false,
+  loading: () => <div className="w-full h-[400px] bg-gray-100 rounded-lg" />,
+});
+
+const ComponentFive = ({
+  location,
+  setLocation,
+  handleFullSubmission,
+  isAdPlaced,
+  handleGoBack,
+}) => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [showManualAddress, setShowManualAddress] = useState(false);
+  const isBrowserSupported = useSelector(getIsBrowserSupported);
+  const [IsGettingCurrentLocation, setIsGettingCurrentLocation] =
+    useState(false);
+  const IsPaidApi = useSelector(getIsPaidApi);
+  const { fetchLocationData } = useGetLocation();
+
+  const getLocationWithMap = async (pos) => {
+    try {
+      const data = await fetchLocationData(pos);
+      setLocation(data);
+    } catch (error) {
+      console.error("Error fetching location data:", error);
+      toast.error(t("errorOccurred"));
+    }
+  };
+
+  const getCurrentLocation = async () => {
+    if (navigator.geolocation) {
+      setIsGettingCurrentLocation(true);
+      navigator.geolocation.getCurrentPosition(
+        async (position) => {
+          try {
+            const { latitude, longitude } = position.coords;
+            const data = await fetchLocationData({ lat: latitude, lng: longitude });
+            setLocation(data);
+          } catch (error) {
+            console.error("Error fetching location data:", error);
+            toast.error(t("errorOccurred"));
+          } finally {
+            setIsGettingCurrentLocation(false);
+          }
+        },
+        (error) => {
+          toast.error(t("locationNotGranted"));
+          setIsGettingCurrentLocation(false);
+        }
+      );
+    } else {
+      toast.error(t("geoLocationNotSupported"));
+    }
+  };
+
+  return (
+    <>
+      <div className="flex flex-col gap-8">
+        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-3">
+          <h5 className="text-xl font-medium">{t("addLocation")}</h5>
+          <div className="flex items-center gap-2 border rounded-md w-full md:w-96 min-h-[42px]">
+            <LandingAdEditSearchAutocomplete
+              saveOnSuggestionClick={false}
+              setSelectedLocation={setLocation}
+            />
+            {isBrowserSupported && (
+              <button
+                onClick={getCurrentLocation}
+                disabled={IsGettingCurrentLocation}
+                className="bg-primary p-2 text-white gap-2 flex items-center rounded-md h-10"
+              >
+                <span>
+                  {IsGettingCurrentLocation ? (
+                    <Loader2 className="size-3.5 animate-spin" />
+                  ) : (
+                    <FaLocationCrosshairs size={16} />
+                  )}
+                </span>
+                <span className="whitespace-nowrap hidden md:inline">
+                  {IsGettingCurrentLocation ? t("loading") : t("locateMe")}
+                </span>
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="flex gap-8 flex-col">
+          <MapComponent
+            location={location}
+            getLocationWithMap={getLocationWithMap}
+          />
+          <div className="flex items-center gap-3 bg-muted rounded-lg p-4  ">
+            <div className="p-5 rounded-md bg-white">
+              <BiMapPin className="text-primary" size={32} />
+            </div>
+            <span className="flex flex-col gap-1">
+              <h6 className="font-medium">{t("address")}</h6>
+              {location?.address_translated || location?.formattedAddress ? (
+                <p>
+                  {location?.address_translated || location?.formattedAddress}
+                </p>
+              ) : (
+                t("addYourAddress")
+              )}
+            </span>
+          </div>
+        </div>
+        {!IsPaidApi && (
+          <>
+            <div className="relative flex items-center justify-center">
+              <div className="absolute top-1/2 left-0 right-0 h-px bg-[#d3d3d3]"></div>
+              <div className="relative bg-muted text-black text-base font-medium rounded-full w-12 h-12 flex items-center justify-center uppercase">
+                {t("or")}
+              </div>
+            </div>
+            <div className="flex flex-col gap-3 items-center justify-center">
+              <p className="text-xl font-semibold">
+                {t("whatLocAdYouSelling")}
+              </p>
+              <button
+                className="p-2 flex items-center gap-2 border rounded-md font-medium"
+                onClick={() => setShowManualAddress(true)}
+              >
+                <IoLocationOutline size={20} />
+                {t("addLocation")}
+              </button>
+            </div>
+          </>
+        )}
+        <div className="flex justify-end gap-3">
+          <button
+            className="bg-black text-white px-4 py-2 rounded-md text-xl font-light"
+            onClick={handleGoBack}
+          >
+            {t("back")}
+          </button>
+          <button
+            className="bg-primary text-white px-4 py-2 rounded-md text-xl font-light disabled:bg-muted-foreground"
+            disabled={isAdPlaced}
+            onClick={handleFullSubmission}
+          >
+            {isAdPlaced ? t("posting") : t("postNow")}
+          </button>
+        </div>
+      </div>
+      <ManualAddress
+        key={showManualAddress}
+        showManualAddress={showManualAddress}
+        setShowManualAddress={setShowManualAddress}
+        setLocation={setLocation}
+      />
+    </>
+  );
+};
+
+export default ComponentFive;
diff --git a/components/PagesComponent/AdsListing/ComponentFour.jsx b/components/PagesComponent/AdsListing/ComponentFour.jsx
new file mode 100644
index 0000000..984d636
--- /dev/null
+++ b/components/PagesComponent/AdsListing/ComponentFour.jsx
@@ -0,0 +1,233 @@
+import { IoInformationCircleOutline } from "react-icons/io5";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useDropzone } from "react-dropzone";
+import { HiOutlineUpload } from "react-icons/hi";
+import { MdClose } from "react-icons/md";
+import { toast } from "sonner";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+
+const ComponentFour = ({
+  uploadedImages,
+  setUploadedImages,
+  otherImages,
+  setOtherImages,
+  setStep,
+  handleGoBack,
+}) => {
+  const onDrop = (acceptedFiles) => {
+    if (acceptedFiles.length == 0) {
+      toast.error(t("wrongFile"));
+    } else {
+      setUploadedImages(acceptedFiles);
+    }
+  };
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      "image/jpeg": [".jpeg", ".jpg"],
+      "image/png": [".png"],
+    },
+    multiple: false,
+  });
+
+  const files = () =>
+    uploadedImages?.map((file, index) => (
+      <div key={index} className="relative">
+        <CustomImage
+          width={591}
+          height={350}
+          className="rounded-2xl object-cover aspect-[591/350]"
+          src={URL.createObjectURL(file)}
+          alt={file.name}
+        />
+        <div className="absolute top-2 left-2 flex gap-2 items-center">
+          <button
+            className="bg-white p-1 rounded-full"
+            onClick={() => removeImage(index)}
+          >
+            <MdClose size={14} color="black" />
+          </button>
+          <div className="text-white text-xs flex flex-col">
+            <span>{file.name}</span>
+            <span>{Math.round(file.size / 1024)} KB</span>
+          </div>
+        </div>
+      </div>
+    ));
+
+  const removeImage = (index) => {
+    setUploadedImages((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  const onOtherDrop = (acceptedFiles) => {
+    const currentFilesCount = otherImages.length; // Number of files already uploaded
+    const remainingSlots = 5 - currentFilesCount; // How many more files can be uploaded
+
+    if (remainingSlots === 0) {
+      // Show error if the limit has been reached
+      toast.error(t("imageLimitExceeded"));
+      return;
+    }
+
+    if (acceptedFiles.length > remainingSlots) {
+      // Show error if the number of new files exceeds the remaining slots
+      toast.error(
+        t("youCanUpload") + " " + remainingSlots + " " + t("moreImages")
+      );
+      return;
+    }
+    // Add the new files to the state
+    setOtherImages((prevImages) => [...prevImages, ...acceptedFiles]);
+  };
+
+  const {
+    getRootProps: getRootOtheProps,
+    getInputProps: getInputOtherProps,
+    isDragActive: isDragOtherActive,
+  } = useDropzone({
+    onDrop: onOtherDrop,
+    accept: {
+      "image/jpeg": [".jpeg", ".jpg"],
+      "image/png": [".png"],
+    },
+    multiple: true,
+  });
+
+  const removeOtherImage = (index) => {
+    setOtherImages((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  const filesOther = () =>
+    otherImages &&
+    otherImages?.map((file, index) => (
+      <div key={`${file.name}-${file.size}`} className="relative">
+        <CustomImage
+          width={591}
+          height={350}
+          className="rounded-2xl object-cover aspect-[591/350]"
+          src={URL.createObjectURL(file)}
+          alt={file.name}
+        />
+        <div className="absolute top-2 left-2 flex gap-2 items-center">
+          <button
+            className="bg-white p-1 rounded-full"
+            onClick={() => removeOtherImage(index)}
+          >
+            <MdClose size={22} color="black" />
+          </button>
+          <div className="text-white text-xs flex flex-col">
+            <span>{file.name}</span>
+            <span>{Math.round(file.size / 1024)} KB</span>
+          </div>
+        </div>
+      </div>
+    ));
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="grid grid-col-1 md:grid-cols-2 gap-4">
+        <div className="flex flex-col gap-3">
+          <span className="requiredInputLabel text-sm font-semibold">
+            {t("mainPicture")}
+          </span>
+          <div className="border-2 border-dashed rounded-lg p-2">
+            <div
+              {...getRootProps()}
+              className="flex flex-col min-h-[175px] items-center justify-center cursor-pointer"
+              style={{ display: uploadedImages.length > 0 ? "none" : "" }}
+            >
+              <input {...getInputProps()} />
+              {isDragActive ? (
+                <span className="text-primary font-medium">
+                  {t("dropFiles")}
+                </span>
+              ) : (
+                <div className="flex flex-col gap-2 items-center text-center">
+                  <span className="text-muted-foreground">
+                    {t("dragFiles")}
+                  </span>
+                  <span className="text-muted-foreground">{t("or")}</span>
+                  <div className="flex items-center text-primary">
+                    <HiOutlineUpload size={24} />
+                    <span className="font-medium">{t("upload")}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+            <div>{files()}</div>
+          </div>
+        </div>
+        <div className="flex flex-col gap-3">
+          <span className="flex items-center gap-1 font-semibold text-sm">
+            {t("otherPicture")}
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex">
+                    <IoInformationCircleOutline size={22} />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="top"
+                  align="center"
+                  className="font-normal"
+                >
+                  <p>{t("maxOtherImages")}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </span>
+          <div className="border-2 border-dashed rounded-lg p-2">
+            <div
+              {...getRootOtheProps()}
+              className="flex flex-col items-center justify-center min-h-[175px] cursor-pointer"
+              style={{ display: otherImages.length >= 5 ? "none" : "" }}
+            >
+              <input {...getInputOtherProps()} />
+              {isDragOtherActive ? (
+                <span className="text-primary font-medium">
+                  {t("dropFiles")}
+                </span>
+              ) : (
+                <div className="flex flex-col gap-2 items-center text-center">
+                  <span className="text-muted-foreground">
+                    {t("dragFiles")}
+                  </span>
+                  <span className="text-muted-foreground">{t("or")}</span>
+                  <div className="flex items-center text-primary">
+                    <HiOutlineUpload size={24} />
+                    <span className="font-medium">{t("upload")}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="flex flex-col gap-3">{filesOther()}</div>
+          </div>
+        </div>
+      </div>
+      <div className="flex justify-end gap-3">
+        <button
+          className="bg-black text-white px-4 py-2 rounded-md text-xl font-light"
+          onClick={handleGoBack}
+        >
+          {t("back")}
+        </button>
+        <button
+          className="bg-primary text-white  px-4 py-2 rounded-md text-xl font-light"
+          onClick={() => setStep(5)}
+        >
+          {t("next")}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ComponentFour;
diff --git a/components/PagesComponent/AdsListing/ComponentOne.jsx b/components/PagesComponent/AdsListing/ComponentOne.jsx
new file mode 100644
index 0000000..2140ffd
--- /dev/null
+++ b/components/PagesComponent/AdsListing/ComponentOne.jsx
@@ -0,0 +1,81 @@
+"use client";
+import { MdChevronRight } from "react-icons/md";
+import { Button } from "@/components/ui/button";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+
+const ComponentOne = ({
+  categories,
+  categoriesLoading,
+  fetchMoreCategory,
+  lastPage,
+  currentPage,
+  isLoadMoreCat,
+  handleCategoryTabClick,
+}) => {
+  return (
+    <>
+      <div className=" grid grid-cols-1 md:grid-cols-3 gap-6">
+        {categoriesLoading ? (
+          <div className="col-span-12 py-28">
+            <Loader />
+          </div>
+        ) : (
+          categories?.map((category) => {
+            return (
+              <div className="" key={category?.id}>
+                <div
+                  className="flex justify-between items-center cursor-pointer"
+                  key={category?.id}
+                  onClick={() => handleCategoryTabClick(category)}
+                >
+                  <div className="flex items-center gap-2 ">
+                    <CustomImage
+                      src={category?.image}
+                      alt={category?.translated_name || category?.name}
+                      height={48}
+                      width={48}
+                      className="h-12 w-12 rounded-full"
+                    />
+                    <span className="break-all">
+                      {category?.translated_name || category?.name}
+                    </span>
+                  </div>
+                  {category?.subcategories?.length > 0 && (
+                    <MdChevronRight size={24} className="rtl:scale-x-[-1]" />
+                  )}
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {lastPage > currentPage && (
+        <div className="text-center mt-6">
+          <Button
+            variant="outline"
+            className="text-sm sm:text-base text-primary w-[256px]"
+            disabled={isLoadMoreCat || categoriesLoading}
+            onClick={fetchMoreCategory}
+          >
+            {isLoadMoreCat ? t("loading") : t("loadMore")}
+          </Button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ComponentOne;
+
+const Loader = () => {
+  return (
+    <div className="flex justify-center">
+      <div className="relative w-12 h-12">
+        <div className="absolute w-12 h-12 bg-primary rounded-full animate-ping"></div>
+        <div className="absolute w-12 h-12 bg-primary rounded-full animate-ping delay-1000"></div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/PagesComponent/AdsListing/ComponentThree.jsx b/components/PagesComponent/AdsListing/ComponentThree.jsx
new file mode 100644
index 0000000..be2d746
--- /dev/null
+++ b/components/PagesComponent/AdsListing/ComponentThree.jsx
@@ -0,0 +1,338 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { toast } from "sonner";
+import { HiOutlineUpload } from "react-icons/hi";
+import { MdOutlineAttachFile } from "react-icons/md";
+import CustomLink from "@/components/Common/CustomLink";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { handleKeyDown, inpNum, t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+
+const ComponentThree = ({
+  customFields,
+  setExtraDetails,
+  filePreviews,
+  setFilePreviews,
+  setStep,
+  handleGoBack,
+  currentExtraDetails,
+  langId,
+  defaultLangId,
+}) => {
+  const write = (fieldId, value) =>
+    setExtraDetails((prev) => ({
+      ...prev,
+      [langId]: {
+        ...prev[langId],
+        [fieldId]: value,
+      },
+    }));
+
+  const handleFileChange = (id, file) => {
+    if (file) {
+      const allowedExtensions = /\.(jpg|jpeg|svg|png|pdf)$/i;
+      if (!allowedExtensions.test(file.name)) {
+        toast.error(t("notAllowedFile"));
+        return;
+      }
+      const fileUrl = URL.createObjectURL(file);
+      setFilePreviews((prev) => {
+        const oldUrl = prev?.[langId]?.[id]?.url;
+        if (oldUrl) {
+          URL.revokeObjectURL(oldUrl);
+        }
+        return {
+          ...prev,
+          [langId]: {
+            ...(prev[langId] || {}),
+            [id]: {
+              url: fileUrl,
+              isPdf: /\.pdf$/i.test(file.name),
+            },
+          },
+        };
+      });
+
+
+      write(id, file);
+    }
+  };
+
+  const handleChange = (id, value) => write(id, value ?? "");
+
+  const handleCheckboxChange = (id, value, checked) => {
+    const list = currentExtraDetails[id] || [];
+    const next = checked ? [...list, value] : list.filter((v) => v !== value);
+    write(id, next);
+  };
+
+  const renderCustomFields = (field) => {
+    let {
+      id,
+      name,
+      translated_name,
+      type,
+      translated_value,
+      values,
+      min_length,
+      max_length,
+      is_required,
+    } = field;
+
+    const inputProps = {
+      id,
+      name: id,
+      required: !!is_required,
+      onChange: (e) => handleChange(id, e.target.value),
+      value: currentExtraDetails[id] || "",
+      ...(type === "number"
+        ? { min: min_length, max: max_length }
+        : { minLength: min_length, maxLength: max_length }),
+    };
+
+    switch (type) {
+      case "number": {
+        return (
+          <div className="flex flex-col">
+            <Input
+              type={type}
+              inputMode="numeric"
+              placeholder={`${t("enter")} ${translated_name || name}`}
+              {...inputProps}
+              onKeyDown={(e) => handleKeyDown(e, max_length)}
+              onKeyPress={(e) => inpNum(e)}
+            />
+            {max_length && (
+              <span className="self-end text-sm text-muted-foreground">
+                {`${currentExtraDetails[id]?.length ?? 0}/${max_length}`}
+              </span>
+            )}
+          </div>
+        );
+      }
+      case "textbox": {
+        return (
+          <div className=" flex flex-col">
+            <Textarea
+              placeholder={`${t("enter")} ${translated_name || name}`}
+              {...inputProps}
+            />
+            {max_length && (
+              <span className="self-end text-sm text-muted-foreground">
+                {`${currentExtraDetails[id]?.length ?? 0}/${max_length}`}
+              </span>
+            )}
+          </div>
+        );
+      }
+
+      case "dropdown":
+        return (
+          <div className="w-full">
+            <Select
+              id={id}
+              name={id}
+              onValueChange={(value) => handleChange(id, value)}
+              value={currentExtraDetails[id] || ""}
+            >
+              <SelectTrigger className="outline-none focus:outline-none">
+                <SelectValue
+                  className="font-medium"
+                  placeholder={`${t("select")} ${translated_name || name}`}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel value="">
+                    {t("select")} {translated_name || name}
+                  </SelectLabel>
+                  {values?.map((option, index) => (
+                    <SelectItem
+                      id={option}
+                      className="font-medium"
+                      key={option}
+                      value={option}
+                    >
+                      {translated_value[index] || option}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+        );
+
+      case "checkbox":
+        return (
+          <div className="flex w-full flex-wrap gap-2">
+            {values?.map((value, index) => {
+              const uniqueId = `${id}-${value}-${index}`;
+              return (
+                <div key={uniqueId} className="flex gap-1 items-center">
+                  <Checkbox
+                    id={uniqueId}
+                    value={value}
+                    onCheckedChange={(checked) =>
+                      handleCheckboxChange(id, value, checked)
+                    }
+                    checked={currentExtraDetails[id]?.includes(value)}
+                  />
+                  <label
+                    htmlFor={uniqueId}
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  >
+                    {translated_value[index] || value}
+                  </label>
+                </div>
+              );
+            })}
+          </div>
+        );
+      case "radio":
+        return (
+          <RadioGroup
+            value={currentExtraDetails[id] || ""}
+            onValueChange={(value) => handleChange(id, value)}
+            className="flex flex-wrap gap-2"
+          >
+            {(translated_value || values)?.map((option, index) => {
+              const uniqueId = `${id}-${option}-${index}`;
+              return (
+                <div
+                  key={uniqueId}
+                  className="flex items-center gap-2 flex-wrap"
+                >
+                  <RadioGroupItem
+                    value={option}
+                    id={uniqueId}
+                    className="sr-only peer"
+                  />
+                  <label
+                    htmlFor={uniqueId}
+                    className={`${currentExtraDetails[id] === option
+                      ? "bg-primary text-white"
+                      : ""
+                      } border rounded-md px-4 py-2 cursor-pointer transition-colors`}
+                  >
+                    {translated_value[index] || option}
+                  </label>
+                </div>
+              );
+            })}
+          </RadioGroup>
+        );
+
+      case "fileinput":
+        const fileUrl = filePreviews?.[langId]?.[id]?.url;
+        const isPdf = filePreviews?.[langId]?.[id]?.isPdf;
+
+        return (
+          <>
+            <label htmlFor={id} className="flex gap-2 items-center">
+              <div className="cursor-pointer border px-2.5 py-1 rounded">
+                <HiOutlineUpload size={24} fontWeight="400" />
+              </div>
+              {fileUrl && (
+                <div className="flex items-center gap-1 text-sm flex-nowrap break-words">
+                  {isPdf ? (
+                    <>
+                      <MdOutlineAttachFile />
+                      <CustomLink
+                        href={fileUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {t("viewPdf")}
+                      </CustomLink>
+                    </>
+                  ) : (
+                    <CustomImage
+                      key={fileUrl}
+                      src={fileUrl}
+                      alt="Preview"
+                      className="h-9 w-9"
+                      height={36}
+                      width={36}
+                    />
+                  )}
+                </div>
+              )}
+            </label>
+            <input
+              type="file"
+              id={id}
+              name={id}
+              className="hidden"
+              onChange={(e) => handleFileChange(id, e.target.files[0])}
+              accept=".jpg,.jpeg,.png,.svg,.pdf"
+            />
+            <span className="text-sm text-muted-foreground">
+              {t("allowedFileType")}
+            </span>
+          </>
+        );
+      default:
+        break;
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {customFields?.map((field) => {
+          if (langId !== defaultLangId && field.type !== "textbox") return null;
+
+          return (
+            <div className="flex flex-col w-full gap-2" key={field?.id}>
+              <div className="flex gap-2 items-center">
+                <CustomImage
+                  src={field?.image}
+                  alt={field?.name}
+                  height={28}
+                  width={28}
+                  className="h-7 w-7 rounded-sm"
+                />
+                <Label
+                  className={`${field?.required === 1 && defaultLangId === langId
+                    ? "requiredInputLabel"
+                    : ""
+                    }`}
+                >
+                  {field?.translated_name || field?.name}
+                </Label>
+              </div>
+              {renderCustomFields(field)}
+            </div>
+          );
+        })}
+      </div>
+      <div className="flex justify-end gap-3">
+        <button
+          className="bg-black text-white px-4 py-2 rounded-md text-xl font-light"
+          onClick={handleGoBack}
+        >
+          {t("back")}
+        </button>
+        <button
+          className="bg-primary text-white  px-4 py-2 rounded-md text-xl font-light"
+          onClick={() => setStep(4)}
+        >
+          {t("next")}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ComponentThree;
diff --git a/components/PagesComponent/AdsListing/ComponentTwo.jsx b/components/PagesComponent/AdsListing/ComponentTwo.jsx
new file mode 100644
index 0000000..700a3cc
--- /dev/null
+++ b/components/PagesComponent/AdsListing/ComponentTwo.jsx
@@ -0,0 +1,293 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { getIsRtl } from "@/redux/reducer/languageSlice";
+import {
+  getCurrencyIsoCode,
+  getCurrencyPosition,
+  getCurrencySymbol,
+} from "@/redux/reducer/settingSlice";
+import { generateSlug, t } from "@/utils";
+import PhoneInput from "react-phone-input-2";
+import { useSelector } from "react-redux";
+
+const ComponentTwo = ({
+  setTranslations,
+  current,
+  langId,
+  handleDetailsSubmit,
+  handleDeatilsBack,
+  is_job_category,
+  isPriceOptional,
+  defaultLangId,
+  currencies,
+}) => {
+  const currencyPosition = useSelector(getCurrencyPosition);
+  const currencySymbol = useSelector(getCurrencySymbol);
+  const currencyIsoCode = useSelector(getCurrencyIsoCode);
+  const isRTL = useSelector(getIsRtl);
+
+  const selectedCurrency = currencies?.find(
+    (curr) => curr?.id === current?.currency_id
+  );
+  // Use selected currency's symbol and position, or fallback to Redux settings
+  const displaySymbol = selectedCurrency?.symbol || currencySymbol;
+  const displayPosition = selectedCurrency?.position || currencyPosition;
+
+  const placeholderLabel =
+    displayPosition === "right" ? `00 ${displaySymbol}` : `${displaySymbol} 00`;
+
+  const handleField = (field) => (e) => {
+    const value = e.target.value;
+    setTranslations((prev) => {
+      const updatedLangData = {
+        ...prev[langId],
+        [field]: value,
+      };
+      // ✅ Only auto-generate slug if default language and field is title
+      if (field === "name" && langId === defaultLangId) {
+        updatedLangData.slug = generateSlug(value);
+      }
+      return {
+        ...prev,
+        [langId]: updatedLangData,
+      };
+    });
+  };
+
+  const handlePhoneChange = (value, data) => {
+    const dial = data?.dialCode || ""; // Dial code like "91", "1"
+    const iso2 = data?.countryCode || ""; // Region code like "in", "us", "ae"
+    setTranslations((prev) => {
+      const pureMobile = value.startsWith(dial)
+        ? value.slice(dial.length)
+        : value;
+      return {
+        ...prev,
+        [langId]: {
+          ...prev[langId],
+          contact: pureMobile,
+          country_code: dial,
+          region_code: iso2,
+        },
+      };
+    });
+  };
+
+  const handleCurrencyChange = (currencyId) => {
+    setTranslations((prev) => ({
+      ...prev,
+      [langId]: {
+        ...prev[langId],
+        currency_id: Number(currencyId),
+      },
+    }));
+  };
+
+  return (
+    <div className="flex flex-col w-full gap-6">
+      <div className="flex flex-col gap-2">
+        <Label
+          htmlFor="title"
+          className={langId === defaultLangId ? "requiredInputLabel" : ""}
+        >
+          {t("title")}
+        </Label>
+        <Input
+          type="text"
+          name="title"
+          id="title"
+          placeholder={t("enterTitle")}
+          value={current.name || ""}
+          onChange={handleField("name")} //here send param as the one we need to send to the api
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label
+          htmlFor="description"
+          className={langId === defaultLangId ? "requiredInputLabel" : ""}
+        >
+          {t("description")}
+        </Label>
+        <Textarea
+          name="description"
+          id="description"
+          cols="30"
+          rows="3"
+          placeholder={t("enterDescription")}
+          className="border rounded-md px-4 py-2 outline-none"
+          value={current.description || ""}
+          onChange={handleField("description")}
+        ></Textarea>
+      </div>
+
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="currency">{t("currency")}</Label>
+        {
+          currencies?.length > 0 ?
+            <Select
+              value={current.currency_id?.toString()}
+              onValueChange={handleCurrencyChange}
+              dir={isRTL ? "rtl" : "ltr"}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Currency" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {currencies?.map((currency) => (
+                    <SelectItem
+                      key={currency.id}
+                      value={currency.id.toString()}
+                    >
+                      {currency.iso_code} ({currency.symbol})
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            :
+            <Select
+              value={currencyIsoCode} // ✅ same default value you already have
+              disabled
+              dir={isRTL ? "rtl" : "ltr"}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+
+              {/* Required for RTL */}
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value={currencyIsoCode}>
+                    {currencyIsoCode} ({currencySymbol})
+                  </SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+        }
+      </div>
+      {/* Render the rest only for default language */}
+      {langId === defaultLangId && (
+        <>
+          {is_job_category ? (
+            <>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="salaryMin">{t("salaryMin")}</Label>
+                <Input
+                  type="number"
+                  name="salaryMin"
+                  id="salaryMin"
+                  min={0}
+                  placeholder={placeholderLabel}
+                  value={current.min_salary || ""}
+                  onChange={handleField("min_salary")}
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="salaryMax">{t("salaryMax")}</Label>
+                <Input
+                  type="number"
+                  min={0}
+                  name="salaryMax"
+                  id="salaryMax"
+                  placeholder={placeholderLabel}
+                  value={current.max_salary || ""}
+                  onChange={handleField("max_salary")}
+                />
+              </div>
+            </>
+          ) : (
+            <div className="flex flex-col gap-2">
+              <Label
+                htmlFor="price"
+                className={
+                  !isPriceOptional && langId === defaultLangId
+                    ? "requiredInputLabel"
+                    : ""
+                }
+              >
+                {t("price")}
+              </Label>
+              <Input
+                type="number"
+                name="price"
+                id="price"
+                min={0}
+                placeholder={placeholderLabel}
+                value={current.price || ""}
+                onChange={handleField("price")}
+              />
+            </div>
+          )}
+
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="phonenumber">{t("phoneNumber")}</Label>
+            <PhoneInput
+              country={process.env.NEXT_PUBLIC_DEFAULT_COUNTRY}
+              value={`${current.country_code}${current.contact}`}
+              onChange={(phone, data) => handlePhoneChange(phone, data)}
+              inputProps={{
+                name: "phonenumber",
+                id: "phonenumber",
+              }}
+              enableLongNumbers
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="videoLink">{t("videoLink")}</Label>
+            <Input
+              type="text"
+              name="videoLink"
+              id="videoLink"
+              placeholder={t("enterAdditionalLinks")}
+              value={current.video_link || ""}
+              onChange={handleField("video_link")}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="slug">
+              {t("slug")}{" "}
+              <span className="text-muted-foreground text-xs">
+                ({t("allowedSlug")})
+              </span>
+            </Label>
+            <Input
+              type="text"
+              name="slug"
+              id="slug"
+              placeholder={t("enterSlug")}
+              value={current.slug || ""}
+              onChange={handleField("slug")}
+            />
+          </div>
+        </>
+      )}
+      <div className="flex justify-end gap-3">
+        <button
+          className="bg-black text-white px-4 py-2 rounded-md text-xl font-light"
+          onClick={handleDeatilsBack}
+        >
+          {t("back")}
+        </button>
+        <button
+          className="bg-primary text-white  px-4 py-2 rounded-md text-xl font-light"
+          onClick={handleDetailsSubmit}
+        >
+          {t("next")}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ComponentTwo;
diff --git a/components/PagesComponent/AdsListing/ManualAddress.jsx b/components/PagesComponent/AdsListing/ManualAddress.jsx
new file mode 100644
index 0000000..cadef2c
--- /dev/null
+++ b/components/PagesComponent/AdsListing/ManualAddress.jsx
@@ -0,0 +1,853 @@
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command";
+import { useInView } from "react-intersection-observer";
+import { Check, ChevronsUpDown, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  getAreasApi,
+  getCitiesApi,
+  getCoutriesApi,
+  getStatesApi,
+} from "@/utils/api";
+import { Textarea } from "@/components/ui/textarea";
+import { t } from "@/utils";
+
+const ManualAddress = ({
+  showManualAddress,
+  setShowManualAddress,
+  setLocation,
+}) => {
+  const [CountryStore, setCountryStore] = useState({
+    Countries: [],
+    SelectedCountry: {},
+    CountrySearch: "",
+    currentPage: 1,
+    hasMore: false,
+    countryOpen: false,
+    isLoading: false,
+  });
+  const [StateStore, setStateStore] = useState({
+    States: [],
+    SelectedState: {},
+    StateSearch: "",
+    currentPage: 1,
+    hasMore: false,
+    stateOpen: false,
+    isLoading: false,
+  });
+  const [CityStore, setCityStore] = useState({
+    Cities: [],
+    SelectedCity: {},
+    CitySearch: "",
+    currentPage: 1,
+    hasMore: false,
+    isLoading: false,
+    cityOpen: false,
+  });
+  const [AreaStore, setAreaStore] = useState({
+    Areas: [],
+    SelectedArea: {},
+    AreaSearch: "",
+    currentPage: 1,
+    hasMore: false,
+    areaOpen: false,
+    isLoading: false,
+  });
+  const [Address, setAddress] = useState("");
+  const [fieldErrors, setFieldErrors] = useState({});
+  const isCountrySelected =
+    Object.keys(CountryStore?.SelectedCountry).length > 0;
+  // Check if areas exist for the selected city
+  const hasAreas = AreaStore?.Areas.length > 0;
+  // Infinite scroll refs
+  const { ref: stateRef, inView: stateInView } = useInView();
+  const { ref: countryRef, inView: countryInView } = useInView();
+  const { ref: cityRef, inView: cityInView } = useInView();
+  const { ref: areaRef, inView: areaInView } = useInView();
+
+  const getCountriesData = async (search, page) => {
+    try {
+      setCountryStore((prev) => ({
+        ...prev,
+        isLoading: true,
+        Countries: search ? [] : prev.Countries, // Clear list if searching
+      }));
+      // Fetch countries
+      const params = {};
+      if (search) {
+        params.search = search; // Send only 'search' if provided
+      } else {
+        params.page = page; // Send only 'page' if no search
+      }
+
+      const res = await getCoutriesApi.getCoutries(params);
+      let allCountries;
+      if (page > 1) {
+        allCountries = [...CountryStore?.Countries, ...res?.data?.data?.data];
+      } else {
+        allCountries = res?.data?.data?.data;
+      }
+      setCountryStore((prev) => ({
+        ...prev,
+        currentPage: res?.data?.data?.current_page,
+        Countries: allCountries,
+        hasMore:
+          res?.data?.data?.current_page < res?.data?.data?.last_page
+            ? true
+            : false,
+        isLoading: false,
+      }));
+    } catch (error) {
+      console.error("Error fetching countries data:", error);
+      setCountryStore((prev) => ({ ...prev, isLoading: false }));
+    }
+  };
+  const getStatesData = async (search, page) => {
+    try {
+      setStateStore((prev) => ({
+        ...prev,
+        isLoading: true,
+        States: search ? [] : prev.States,
+      }));
+      const params = {
+        country_id: CountryStore?.SelectedCountry?.id,
+      };
+      if (search) {
+        params.search = search; // Send only 'search' if provided
+      } else {
+        params.page = page; // Send only 'page' if no search
+      }
+
+      const res = await getStatesApi.getStates(params);
+
+      let allStates;
+      if (page > 1) {
+        allStates = [...StateStore?.States, ...res?.data?.data?.data];
+      } else {
+        allStates = res?.data?.data?.data;
+      }
+
+      setStateStore((prev) => ({
+        ...prev,
+        currentPage: res?.data?.data?.current_page,
+        States: allStates,
+        hasMore:
+          res?.data?.data?.current_page < res?.data?.data?.last_page
+            ? true
+            : false,
+        isLoading: false,
+      }));
+    } catch (error) {
+      console.error("Error fetching states data:", error);
+      setStateStore((prev) => ({ ...prev, isLoading: false }));
+      return [];
+    }
+  };
+  const getCitiesData = async (search, page) => {
+    try {
+      setCityStore((prev) => ({
+        ...prev,
+        isLoading: true,
+        Cities: search ? [] : prev.Cities,
+      }));
+      const params = {
+        state_id: StateStore?.SelectedState?.id,
+      };
+      if (search) {
+        params.search = search; // Send only 'search' if provided
+      } else {
+        params.page = page; // Send only 'page' if no search
+      }
+
+      const res = await getCitiesApi.getCities(params);
+      let allCities;
+      if (page > 1) {
+        allCities = [...CityStore?.Cities, ...res?.data?.data?.data];
+      } else {
+        allCities = res?.data?.data?.data;
+      }
+      setCityStore((prev) => ({
+        ...prev,
+        currentPage: res?.data?.data?.current_page,
+        Cities: allCities,
+        hasMore:
+          res?.data?.data?.current_page < res?.data?.data?.last_page
+            ? true
+            : false,
+        isLoading: false,
+      }));
+    } catch (error) {
+      console.error("Error fetching cities data:", error);
+      setCityStore((prev) => ({ ...prev, isLoading: false }));
+      return [];
+    }
+  };
+  const getAreaData = async (search, page) => {
+    try {
+      setAreaStore((prev) => ({
+        ...prev,
+        isLoading: true,
+        Areas: search ? [] : prev.Areas,
+      }));
+      const params = {
+        city_id: CityStore?.SelectedCity?.id,
+      };
+      if (search) {
+        params.search = search;
+      } else {
+        params.page = page;
+      }
+      const res = await getAreasApi.getAreas(params);
+      let allArea;
+      if (page > 1) {
+        allArea = [...AreaStore?.Areas, ...res?.data?.data?.data];
+      } else {
+        allArea = res?.data?.data?.data;
+      }
+      setAreaStore((prev) => ({
+        ...prev,
+        currentPage: res?.data?.data?.current_page,
+        Areas: allArea,
+        hasMore:
+          res?.data?.data?.current_page < res?.data?.data?.last_page
+            ? true
+            : false,
+        isLoading: false,
+      }));
+    } catch (error) {
+      console.error("Error fetching areas data:", error);
+      setAreaStore((prev) => ({ ...prev, isLoading: false }));
+      return [];
+    }
+  };
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (showManualAddress) {
+        getCountriesData(CountryStore?.CountrySearch, 1);
+      }
+    }, 500);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [CountryStore?.CountrySearch, showManualAddress]);
+  useEffect(() => {
+    if (CountryStore?.SelectedCountry?.id) {
+      const timeout = setTimeout(() => {
+        getStatesData(StateStore?.StateSearch, 1);
+      }, 500);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [CountryStore?.SelectedCountry?.id, StateStore?.StateSearch]);
+  useEffect(() => {
+    if (StateStore?.SelectedState?.id) {
+      const timeout = setTimeout(() => {
+        getCitiesData(CityStore?.CitySearch, 1);
+      }, 500);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [StateStore?.SelectedState?.id, CityStore?.CitySearch]);
+  useEffect(() => {
+    if (CityStore?.SelectedCity?.id) {
+      const timeout = setTimeout(() => {
+        getAreaData(AreaStore?.AreaSearch, 1);
+      }, 500);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [CityStore?.SelectedCity?.id, AreaStore?.AreaSearch]);
+
+  // Trigger infinite scroll when refs come into view
+  useEffect(() => {
+    if (CountryStore?.hasMore && !CountryStore?.isLoading && countryInView) {
+      getCountriesData("", CountryStore?.currentPage + 1);
+    }
+  }, [
+    countryInView,
+    CountryStore?.hasMore,
+    CountryStore?.isLoading,
+    CountryStore?.currentPage,
+  ]);
+
+  useEffect(() => {
+    if (StateStore?.hasMore && !StateStore?.isLoading && stateInView) {
+      getStatesData("", StateStore?.currentPage + 1);
+    }
+  }, [
+    stateInView,
+    StateStore?.hasMore,
+    StateStore?.isLoading,
+    StateStore?.currentPage,
+  ]);
+
+  useEffect(() => {
+    if (CityStore?.hasMore && !CityStore?.isLoading && cityInView) {
+      getCitiesData("", CityStore?.currentPage + 1);
+    }
+  }, [
+    cityInView,
+    CityStore?.hasMore,
+    CityStore?.isLoading,
+    CityStore?.currentPage,
+  ]);
+
+  useEffect(() => {
+    if (AreaStore?.hasMore && !AreaStore?.isLoading && areaInView) {
+      getAreaData("", AreaStore?.currentPage + 1);
+    }
+  }, [
+    areaInView,
+    AreaStore?.hasMore,
+    AreaStore?.isLoading,
+    AreaStore?.currentPage,
+  ]);
+
+  const validateFields = () => {
+    const errors = {};
+    if (!CountryStore?.SelectedCountry?.name) errors.country = true;
+    if (!StateStore?.SelectedState?.name) errors.state = true;
+    if (!CityStore?.SelectedCity?.name) errors.city = true;
+    if (!AreaStore?.SelectedArea?.name && !Address.trim())
+      errors.address = true;
+    return errors;
+  };
+
+  const handleCountryChange = (value) => {
+    const Country = CountryStore?.Countries.find(
+      (country) => country.name === value
+    );
+    setCountryStore((prev) => ({
+      ...prev,
+      SelectedCountry: Country,
+      countryOpen: false,
+    }));
+    setStateStore({
+      States: [],
+      SelectedState: {},
+      StateSearch: "",
+      currentPage: 1,
+      hasMore: false,
+      stateOpen: false,
+    });
+    setCityStore({
+      Cities: [],
+      SelectedCity: {},
+      CitySearch: "",
+      currentPage: 1,
+      hasMore: false,
+      cityOpen: false,
+    });
+    setAreaStore({
+      Areas: [],
+      SelectedArea: {},
+      AreaSearch: "",
+      currentPage: 1,
+      hasMore: false,
+      areaOpen: false,
+    });
+    setAddress("");
+  };
+  const handleStateChange = (value) => {
+    const State = StateStore?.States.find((state) => state.name === value);
+    setStateStore((prev) => ({
+      ...prev,
+      SelectedState: State,
+      stateOpen: false,
+    }));
+    setCityStore({
+      Cities: [],
+      SelectedCity: {},
+      CitySearch: "",
+      currentPage: 1,
+      hasMore: false,
+      cityOpen: false,
+    });
+    setAreaStore({
+      Areas: [],
+      SelectedArea: {},
+      AreaSearch: "",
+      currentPage: 1,
+      hasMore: false,
+      areaOpen: false,
+    });
+    setAddress("");
+  };
+  const handleCityChange = (value) => {
+    const City = CityStore?.Cities.find((city) => city.name === value);
+    setCityStore((prev) => ({
+      ...prev,
+      SelectedCity: City,
+      cityOpen: false,
+    }));
+    setAreaStore({
+      Areas: [],
+      SelectedArea: {},
+      AreaSearch: "",
+      currentPage: 1,
+      hasMore: false,
+      areaOpen: false,
+    });
+    setAddress("");
+  };
+  const handleAreaChange = (value) => {
+    const chosenArea = AreaStore?.Areas.find((item) => item.name === value);
+    setAreaStore((prev) => ({
+      ...prev,
+      SelectedArea: chosenArea,
+      areaOpen: false,
+    }));
+  };
+
+  const handleSave = () => {
+    const errors = validateFields();
+    setFieldErrors(errors);
+    if (Object.keys(errors).length > 0) return;
+
+    // Build address parts array and filter out empty values
+
+    const addressParts = [];
+    const addressPartsTranslated = [];
+
+    if (hasAreas && AreaStore?.SelectedArea?.name) {
+      addressParts.push(AreaStore.SelectedArea.name);
+      addressPartsTranslated.push(
+        AreaStore.SelectedArea.translated_name || AreaStore.SelectedArea.name
+      );
+    } else if (Address.trim()) {
+      addressParts.push(Address.trim());
+      addressPartsTranslated.push(Address.trim());
+    }
+    if (CityStore?.SelectedCity?.name) {
+      addressParts.push(CityStore.SelectedCity.name);
+      addressPartsTranslated.push(
+        CityStore.SelectedCity.translated_name || CityStore.SelectedCity.name
+      );
+    }
+    if (StateStore?.SelectedState?.name) {
+      addressParts.push(StateStore.SelectedState.name);
+      addressPartsTranslated.push(
+        StateStore.SelectedState.translated_name ||
+        StateStore.SelectedState.name
+      );
+    }
+    if (CountryStore?.SelectedCountry?.name) {
+      addressParts.push(CountryStore.SelectedCountry.name);
+      addressPartsTranslated.push(
+        CountryStore.SelectedCountry.translated_name ||
+        CountryStore.SelectedCountry.name
+      );
+    }
+
+    const formattedAddress = addressParts.join(", ");
+    const formattedAddressTranslated = addressPartsTranslated.join(", ");
+
+    const locationData = {
+      country: CountryStore?.SelectedCountry?.name || "",
+      state: StateStore?.SelectedState?.name || "",
+      city: CityStore?.SelectedCity?.name || "",
+      formattedAddress: formattedAddress,
+      address_translated: formattedAddressTranslated,
+      lat: CityStore?.SelectedCity?.latitude || null,
+      long: CityStore?.SelectedCity?.longitude || null,
+      area_id: AreaStore?.SelectedArea?.id || null,
+    };
+    setLocation(locationData);
+    setShowManualAddress(false);
+  };
+
+  return (
+    <Dialog open={showManualAddress} onOpenChange={setShowManualAddress}>
+      <DialogContent className="">
+        <DialogHeader>
+          <DialogTitle>{t("manuAddAddress")}</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-4 py-4">
+          <div className="flex flex-col gap-1">
+            <Popover
+              modal
+              open={CountryStore?.countryOpen}
+              onOpenChange={(isOpen) =>
+                setCountryStore((prev) => ({ ...prev, countryOpen: isOpen }))
+              }
+            >
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={CountryStore?.countryOpen}
+                  className={`w-full justify-between outline-none ${fieldErrors.country ? "border-red-500" : ""
+                    }`}
+                >
+                  {CountryStore?.SelectedCountry?.translated_name ||
+                    CountryStore?.SelectedCountry?.name ||
+                    t("country")}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              {fieldErrors.country && (
+                <span className="text-red-500 text-sm">
+                  {t("countryRequired")}
+                </span>
+              )}
+              <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+                <Command shouldFilter={false}>
+                  <CommandInput
+                    placeholder={t("searchCountries")}
+                    value={CountryStore.CountrySearch || ""}
+                    onValueChange={(val) => {
+                      setCountryStore((prev) => ({
+                        ...prev,
+                        CountrySearch: val,
+                      }));
+                    }}
+                  />
+                  <CommandEmpty>
+                    {CountryStore.isLoading ? (
+                      <LoacationLoader />
+                    ) : (
+                      <div className="text-center">
+                        <p className="text-sm text-muted-foreground">
+                          {t("noCountriesFound")}
+                        </p>
+                      </div>
+                    )}
+                  </CommandEmpty>
+                  <CommandGroup className="max-h-[240px] overflow-y-auto">
+                    {CountryStore?.Countries?.map((country, index) => {
+                      const isLast =
+                        index === CountryStore?.Countries?.length - 1;
+                      return (
+                        <CommandItem
+                          key={country.id}
+                          value={country.name}
+                          onSelect={handleCountryChange}
+                          ref={isLast ? countryRef : null}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              CountryStore?.SelectedCountry?.name ===
+                                country?.name
+                                ? "opacity-100"
+                                : "opacity-0"
+                            )}
+                          />
+                          {country.translated_name || country.name}
+                        </CommandItem>
+                      );
+                    })}
+                    {CountryStore.isLoading &&
+                      CountryStore.Countries.length > 0 && <LoacationLoader />}
+                  </CommandGroup>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <Popover
+              modal
+              open={StateStore?.stateOpen}
+              onOpenChange={(isOpen) =>
+                setStateStore((prev) => ({ ...prev, stateOpen: isOpen }))
+              }
+            >
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={StateStore?.stateOpen}
+                  className={`w-full justify-between outline-none ${fieldErrors.state ? "border-red-500" : ""
+                    }`}
+                  disabled={!isCountrySelected}
+                >
+                  {StateStore?.SelectedState?.translated_name ||
+                    StateStore?.SelectedState?.name ||
+                    t("state")}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              {fieldErrors.state && (
+                <span className="text-red-500 text-sm">
+                  {t("stateRequired")}
+                </span>
+              )}
+              <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+                <Command shouldFilter={false}>
+                  <CommandInput
+                    placeholder={t("searchStates")}
+                    value={StateStore.StateSearch || ""}
+                    onValueChange={(val) => {
+                      setStateStore((prev) => ({ ...prev, StateSearch: val }));
+                    }}
+                  />
+                  <CommandEmpty>
+                    {StateStore.isLoading ? (
+                      <LoacationLoader />
+                    ) : (
+                      <div className="text-center">
+                        <p className="text-sm text-muted-foreground">
+                          {t("noStatesFound")}
+                        </p>
+                      </div>
+                    )}
+                  </CommandEmpty>
+                  <CommandGroup className="max-h-[240px] overflow-y-auto">
+                    {StateStore?.States?.map((state, index) => {
+                      const isLast = index === StateStore?.States?.length - 1;
+                      return (
+                        <CommandItem
+                          key={state.id}
+                          value={state.name}
+                          onSelect={handleStateChange}
+                          ref={isLast ? stateRef : null}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              StateStore?.SelectedState?.name === state?.name
+                                ? "opacity-100"
+                                : "opacity-0"
+                            )}
+                          />
+                          {state.translated_name || state.name}
+                        </CommandItem>
+                      );
+                    })}
+                    {StateStore.isLoading && StateStore.States.length > 0 && (
+                      <LoacationLoader />
+                    )}
+                  </CommandGroup>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <Popover
+              modal
+              open={CityStore?.cityOpen}
+              onOpenChange={(isOpen) =>
+                setCityStore((prev) => ({ ...prev, cityOpen: isOpen }))
+              }
+            >
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={CityStore?.cityOpen}
+                  className={`w-full justify-between outline-none ${fieldErrors.city ? "border-red-500" : ""
+                    }`}
+                  disabled={!StateStore?.SelectedState?.id}
+                >
+                  {CityStore?.SelectedCity?.translated_name ||
+                    CityStore?.SelectedCity?.name ||
+                    t("city")}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              {fieldErrors.city && (
+                <span className="text-red-500 text-sm">
+                  {t("cityRequired")}
+                </span>
+              )}
+              <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+                <Command shouldFilter={false}>
+                  <CommandInput
+                    placeholder={t("searchCities")}
+                    value={CityStore.CitySearch || ""}
+                    onValueChange={(val) => {
+                      setCityStore((prev) => ({ ...prev, CitySearch: val }));
+                    }}
+                  />
+                  <CommandEmpty>
+                    {CityStore.isLoading ? (
+                      <LoacationLoader />
+                    ) : (
+                      <div className="text-center">
+                        <p className="text-sm text-muted-foreground">
+                          {t("noCitiesFound")}
+                        </p>
+                      </div>
+                    )}
+                  </CommandEmpty>
+                  <CommandGroup className="max-h-[240px] overflow-y-auto">
+                    {CityStore?.Cities?.map((city, index) => {
+                      const isLast = index === CityStore?.Cities?.length - 1;
+                      return (
+                        <CommandItem
+                          key={city.id}
+                          value={city.name}
+                          onSelect={handleCityChange}
+                          ref={isLast ? cityRef : null}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              CityStore?.SelectedCity?.name === city?.name
+                                ? "opacity-100"
+                                : "opacity-0"
+                            )}
+                          />
+                          {city.translated_name || city.name}
+                        </CommandItem>
+                      );
+                    })}
+                    {CityStore.isLoading && CityStore.Cities.length > 0 && (
+                      <LoacationLoader />
+                    )}
+                  </CommandGroup>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          {hasAreas || AreaStore?.AreaSearch ? (
+            <div className="flex flex-col gap-1">
+              <Popover
+                modal
+                open={AreaStore?.areaOpen}
+                onOpenChange={(isOpen) =>
+                  setAreaStore((prev) => ({ ...prev, areaOpen: isOpen }))
+                }
+              >
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={AreaStore?.areaOpen}
+                    className={`w-full justify-between outline-none ${fieldErrors.address ? "border-red-500" : ""
+                      }`}
+                    disabled={!CityStore?.SelectedCity?.id}
+                  >
+                    {AreaStore?.SelectedArea?.translated_name ||
+                      AreaStore?.SelectedArea?.name ||
+                      t("area")}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                {fieldErrors.address && (
+                  <span className="text-red-500 text-sm">
+                    {t("areaRequired")}
+                  </span>
+                )}
+                <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+                  <Command shouldFilter={false}>
+                    <CommandInput
+                      placeholder={t("searchAreas")}
+                      value={AreaStore.AreaSearch || ""}
+                      onValueChange={(val) => {
+                        setAreaStore((prev) => ({ ...prev, AreaSearch: val }));
+                      }}
+                    />
+                    <CommandEmpty>
+                      {AreaStore.isLoading ? (
+                        <LoacationLoader />
+                      ) : (
+                        <div className="text-center">
+                          <p className="text-sm text-muted-foreground">
+                            {t("noAreasFound")}
+                          </p>
+                        </div>
+                      )}
+                    </CommandEmpty>
+                    <CommandGroup className="max-h-[240px] overflow-y-auto">
+                      {AreaStore?.Areas?.map((area, index) => {
+                        const isLast = index === AreaStore?.Areas?.length - 1;
+                        return (
+                          <CommandItem
+                            key={area.id}
+                            value={area.name}
+                            onSelect={handleAreaChange}
+                            ref={isLast ? areaRef : null}
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-4 w-4",
+                                AreaStore?.SelectedArea?.name === area?.name
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                            {area.translated_name || area.name}
+                          </CommandItem>
+                        );
+                      })}
+                      {AreaStore.isLoading && AreaStore.Areas.length > 0 && (
+                        <LoacationLoader />
+                      )}
+                    </CommandGroup>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+          ) : (
+            <div className="flex flex-col gap-1">
+              <Textarea
+                rows={5}
+                className={`border p-2 outline-none rounded-md w-full ${fieldErrors.address ? "border-red-500" : ""
+                  }`}
+                placeholder={t("enterAddre")}
+                value={Address}
+                onChange={(e) => setAddress(e.target.value)}
+                disabled={!CityStore?.SelectedCity?.id}
+              />
+              {fieldErrors.address && (
+                <span className="text-red-500 text-sm">
+                  {t("addressRequired")}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+        <DialogFooter className="flex justify-end gap-2">
+          <button onClick={() => setShowManualAddress(false)}>
+            {t("cancel")}
+          </button>
+          <button
+            className="bg-primary p-2 px-4 rounded-md text-white font-medium"
+            onClick={handleSave}
+          >
+            {t("save")}
+          </button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ManualAddress;
+
+const LoacationLoader = () => {
+  return (
+    <div className="flex items-center justify-center py-4">
+      <Loader2 className="size-4 animate-spin" />
+      <span className="ml-2 text-sm text-muted-foreground">
+        {t("loading")}..
+      </span>
+    </div>
+  );
+};
diff --git a/components/PagesComponent/BlogDetail/BlogDetailPage.jsx b/components/PagesComponent/BlogDetail/BlogDetailPage.jsx
new file mode 100644
index 0000000..3cce262
--- /dev/null
+++ b/components/PagesComponent/BlogDetail/BlogDetailPage.jsx
@@ -0,0 +1,203 @@
+"use client";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import { setBreadcrumbPath } from "@/redux/reducer/breadCrumbSlice";
+import { formatDateMonthYear, t, truncate } from "@/utils";
+import { getBlogsApi } from "@/utils/api";
+import { useEffect, useState } from "react";
+import { FaEye, FaRegCalendarCheck } from "react-icons/fa";
+import { useDispatch, useSelector } from "react-redux";
+import parse from "html-react-parser";
+import {
+  FacebookShareButton,
+  TwitterShareButton,
+  WhatsappShareButton,
+} from "react-share";
+import { BiLink, BiLogoFacebook, BiLogoWhatsapp } from "react-icons/bi";
+import { RiTwitterXLine } from "react-icons/ri";
+import { usePathname } from "next/navigation";
+import { toast } from "sonner";
+import BlogCard from "../LandingPage/BlogCard";
+import { Badge } from "@/components/ui/badge";
+import Layout from "@/components/Layout/Layout";
+import { getCompanyName } from "@/redux/reducer/settingSlice";
+import PopularPosts from "../Blogs/PopularPosts";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import NoData from "@/components/EmptyStates/NoData";
+import PageLoader from "@/components/Common/PageLoader";
+import CustomImage from "@/components/Common/CustomImage";
+
+const BlogDetailPage = ({ slug }) => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const path = usePathname();
+  const dispatch = useDispatch();
+  const admin = useSelector((state) => state?.Settings?.data?.data?.admin);
+  const CompanyName = useSelector(getCompanyName);
+  const [blogData, setBlogData] = useState([]);
+  const [relatedBlogs, setRelatedBlogs] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const currentUrl = `${process.env.NEXT_PUBLIC_WEB_URL}${path}`;
+
+  const langCode = CurrentLanguage?.code?.toUpperCase();
+
+  useEffect(() => {
+    getBlogsData();
+  }, [CurrentLanguage.id]);
+
+  const getBlogsData = async () => {
+    try {
+      setIsLoading(true);
+      const res = await getBlogsApi.getBlogs({ slug: slug, views: 1 });
+      setBlogData(res?.data?.data?.data[0]);
+      const title = res?.data?.data?.data[0]?.title;
+      dispatch(
+        setBreadcrumbPath([
+          {
+            name: t("ourBlogs"),
+            slug: "/blogs",
+          },
+          {
+            name: truncate(title, 30),
+          },
+        ])
+      );
+      setRelatedBlogs(res?.data?.other_blogs);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCopyUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(currentUrl);
+      toast(t("copyToClipboard"));
+    } catch (error) {
+      console.error("Error copying to clipboard:", error);
+    }
+  };
+
+  return (
+    <Layout>
+      <BreadCrumb />
+      <div className="container">
+        <div className="flex flex-col mt-8 gap-12">
+          <div className="grid md:grid-cols-12 grid-col-1 gap-6">
+            {isLoading ? (
+              <div className="col-span-1 md:col-span-8">
+                <PageLoader />
+              </div>
+            ) : blogData ? (
+              <div className="col-span-1 md:col-span-8 flex flex-col gap-8">
+                <h1 className="text-3xl font-medium">
+                  {blogData?.translated_title || blogData?.title}
+                </h1>
+                <div className="flex items-center flex-wrap gap-2 opacity-60 text-sm">
+                  <div className="flex gap-2 items-center">
+                    <CustomImage
+                      src={admin?.profile}
+                      alt={admin?.name || "Admin Image"}
+                      height={28}
+                      width={28}
+                      className="size-7 aspect-square rounded-md"
+                    />
+                    <p>{admin?.name}</p>
+                  </div>
+                  <div className="border-r h-[16px]"></div>
+                  <div className="flex items-center gap-1">
+                    <FaEye size={16} />
+                    {t("views")}: {blogData?.views}
+                  </div>
+                  <div className="border-r h-[16px] "></div>
+                  <div className="flex gap-2 items-center">
+                    <FaRegCalendarCheck size={16} color="" />
+                    {t("postedOn")}: {formatDateMonthYear(blogData?.created_at)}
+                  </div>
+                </div>
+                <CustomImage
+                  src={blogData?.image}
+                  alt={blogData?.title || "Blog Image"}
+                  height={838}
+                  width={500}
+                  className="w-full h-auto aspect-[838/500] rounded-lg"
+                />
+                <div className="max-w-full prose lg:prose-lg">
+                  {parse(
+                    blogData?.translated_description ||
+                      blogData?.description ||
+                      ""
+                  )}
+                </div>
+                <div className="border-t pt-4 flex items-center justify-between ">
+                  <div className="flex flex-col gap-2 opacity-60">
+                    <span className="pb-2 font-sm ">{t("shareThis")}</span>
+                    <div className="flex gap-3">
+                      <button className="border-none" onClick={handleCopyUrl}>
+                        <BiLink size={24} />
+                      </button>
+                      <FacebookShareButton
+                        url={currentUrl}
+                        title={currentUrl + CompanyName}
+                        hashtag={CompanyName}
+                      >
+                        <BiLogoFacebook size={24} />
+                      </FacebookShareButton>
+                      <TwitterShareButton url={currentUrl}>
+                        <RiTwitterXLine size={24} />
+                      </TwitterShareButton>
+                      <WhatsappShareButton
+                        url={currentUrl}
+                        title={
+                          blogData?.translated_title ||
+                          blogData?.title + "" + " - " + "" + CompanyName
+                        }
+                        hashtag={CompanyName}
+                      >
+                        <BiLogoWhatsapp size={24} />
+                      </WhatsappShareButton>
+                    </div>
+                  </div>
+                  <div>
+                    {blogData?.translated_tags && (
+                      <div className="flex gap-2 items-center flex-wrap justify-end">
+                        {blogData?.translated_tags?.map((e) => (
+                          <Badge
+                            key={e}
+                            variant="outline"
+                            className="font-normal"
+                          >
+                            {e}
+                          </Badge>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="col-span-1 md:col-span-8">
+                <NoData name={t("blog")} />
+              </div>
+            )}
+
+            <div className="col-span-1 md:col-span-4">
+              <PopularPosts langCode={langCode} />
+            </div>
+          </div>
+          <div className="flex gap-8 flex-col">
+            <h1 className="text-2xl font-medium">{t("relatedArticle")}</h1>
+            <div className="grid md:grid-cols-12 grid-cols-1 gap-4">
+              {relatedBlogs &&
+                relatedBlogs?.map((blog, index) => (
+                  <div className="md:col-span-4 col-span-12" key={index}>
+                    <BlogCard blog={blog} />
+                  </div>
+                ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+export default BlogDetailPage;
diff --git a/components/PagesComponent/Blogs/Blogs.jsx b/components/PagesComponent/Blogs/Blogs.jsx
new file mode 100644
index 0000000..4797116
--- /dev/null
+++ b/components/PagesComponent/Blogs/Blogs.jsx
@@ -0,0 +1,103 @@
+"use client";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import { t } from "@/utils";
+import { getBlogsApi } from "@/utils/api";
+import { useEffect, useState } from "react";
+import BlogCardSkeleton from "@/components/Skeletons/BlogCardSkeleton";
+import BlogCard from "../LandingPage/BlogCard";
+import Layout from "@/components/Layout/Layout";
+import { Button } from "@/components/ui/button";
+import NoData from "@/components/EmptyStates/NoData";
+import Tags from "./Tags";
+import { useSearchParams } from "next/navigation";
+import { useSelector } from "react-redux";
+import { getCurrentLangCode } from "@/redux/reducer/languageSlice";
+
+const Blogs = () => {
+  const searchParams = useSearchParams();
+  const tag = searchParams?.get("tag");
+  const langCode = useSelector(getCurrentLangCode);
+  const [blogs, setBlogs] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [hasMore, setHasMore] = useState(false);
+  const [isLoadMore, setIsLoadMore] = useState(false);
+  useEffect(() => {
+    getBlogsData(currentPage);
+  }, [tag, langCode]);
+
+  const getBlogsData = async (page) => {
+    try {
+      page > 1 ? setIsLoadMore(true) : setIsLoading(true);
+      const res = await getBlogsApi.getBlogs({
+        sort_by: "new-to-old",
+        page,
+        ...(tag && { tag }),
+      });
+
+      if (res?.data?.error === false) {
+        page === 1
+          ? setBlogs(res?.data?.data?.data)
+          : setBlogs([...blogs, ...res?.data?.data?.data]);
+        setCurrentPage(res?.data?.data?.current_page);
+        setHasMore(res?.data?.data?.current_page < res?.data?.data?.last_page);
+      } else {
+        console.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+      setIsLoadMore(false);
+    }
+  };
+
+  const handleLoadMore = () => {
+    getBlogsData(currentPage + 1);
+  };
+
+  return (
+    <Layout>
+      <BreadCrumb title2={t("ourBlogs")} />
+      <div className="container">
+        <div className="flex flex-col mt-8 gap-6">
+          <h1 className="text-2xl font-medium">{t("ourBlogs")}</h1>
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-4 ">
+            <div className="lg:col-span-8 col-span-12 order-2 lg:order-1">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {isLoading ? (
+                  Array.from({ length: 6 })?.map((_, index) => (
+                    <BlogCardSkeleton key={index} />
+                  ))
+                ) : blogs && blogs?.length > 0 ? (
+                  blogs?.map((blog) => <BlogCard key={blog?.id} blog={blog} />)
+                ) : (
+                  <div className="col-span-full">
+                    <NoData name={t("blog")} />
+                  </div>
+                )}
+              </div>
+              {hasMore && (
+                <div className="text-center mt-6 mb-2">
+                  <Button
+                    variant="outline"
+                    className="text-sm sm:text-base text-primary w-[256px]"
+                    disabled={isLoading || isLoadMore}
+                    onClick={handleLoadMore}
+                  >
+                    {isLoadMore ? t("loading") : t("loadMore")}
+                  </Button>
+                </div>
+              )}
+            </div>
+            <div className="col-span-12 lg:col-span-4 order-1 lg:order-2">
+              <Tags tag={tag} langCode={langCode} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Blogs;
diff --git a/components/PagesComponent/Blogs/PopularPosts.jsx b/components/PagesComponent/Blogs/PopularPosts.jsx
new file mode 100644
index 0000000..05bb782
--- /dev/null
+++ b/components/PagesComponent/Blogs/PopularPosts.jsx
@@ -0,0 +1,80 @@
+import NoData from "@/components/EmptyStates/NoData";
+import { Skeleton } from "@/components/ui/skeleton";
+import { t } from "@/utils";
+import { getBlogsApi } from "@/utils/api";
+import CustomLink from "@/components/Common/CustomLink";
+import { useEffect, useState } from "react";
+import CustomImage from "@/components/Common/CustomImage";
+
+const PopularPosts = ({ langCode }) => {
+  const [isPopularPostLoading, setIsPopularPostLoading] = useState(false);
+  const [popularBlogs, setPopulerBlogs] = useState([]);
+
+  useEffect(() => {
+    getPopulerBlogsData();
+  }, [langCode]);
+
+  const getPopulerBlogsData = async () => {
+    setIsPopularPostLoading(true);
+    try {
+      const res = await getBlogsApi.getBlogs({ sort_by: "popular" });
+      setPopulerBlogs(res?.data?.data?.data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsPopularPostLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col border rounded-xl">
+      <div className="p-4 border-b">
+        <p className="font-medium">{t("popularPosts")}</p>
+      </div>
+      <div className="flex flex-col gap-2">
+        {isPopularPostLoading ? (
+          Array.from({ length: 8 })?.map((_, index) => (
+            <PopularPostsSkeleton key={index} />
+          ))
+        ) : popularBlogs && popularBlogs?.length > 0 ? (
+          popularBlogs?.map((popularBlog) => (
+            <CustomLink
+              key={popularBlog?.id}
+              href={`/blogs/${popularBlog?.slug}`}
+              className="flex gap-3 px-4 py-2 items-center"
+            >
+              <CustomImage
+                src={popularBlog?.image}
+                alt={popularBlog?.title}
+                height={48}
+                width={64}
+                className="aspect-[64/48] rounded object-cover"
+              />
+              <p className="line-clamp-3 font-medium">
+                {popularBlog?.translated_title || popularBlog?.title}
+              </p>
+            </CustomLink>
+          ))
+        ) : (
+          <div className="col-span-full">
+            <NoData name={t("popularPosts")} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PopularPosts;
+
+const PopularPostsSkeleton = () => {
+  return (
+    <div className="flex gap-3 px-4 py-2 items-center">
+      <Skeleton className="h-12 w-16 rounded-lg" />
+      <div className="flex-1 space-y-2">
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-4 w-1/2" />
+      </div>
+    </div>
+  );
+};
diff --git a/components/PagesComponent/Blogs/Tags.jsx b/components/PagesComponent/Blogs/Tags.jsx
new file mode 100644
index 0000000..61f85f6
--- /dev/null
+++ b/components/PagesComponent/Blogs/Tags.jsx
@@ -0,0 +1,82 @@
+import { cn } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
+import { t } from "@/utils";
+import { getBlogTagsApi } from "@/utils/api";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useNavigate } from "@/components/Common/useNavigate";
+
+const Tags = ({ tag, langCode }) => {
+  const pathname = usePathname();
+  const { navigate } = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+  const [blogTags, setBlogTags] = useState([]);
+
+  const isAllTagActive = pathname === "/blogs" && !tag;
+
+  useEffect(() => {
+    getBlogTagsData();
+  }, [langCode]);
+
+  const getBlogTagsData = async () => {
+    try {
+      setIsLoading(true);
+      const res = await getBlogTagsApi.getBlogs();
+      setBlogTags(res?.data?.data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleAllTags = () => {
+    navigate("/blogs", { scroll: false });
+  };
+
+  const handleTagClick = (tagItem) => {
+    window.history.pushState(null, "", `/blogs?tag=${tagItem}`);
+  };
+  return (
+    <div className="flex flex-col border rounded-lg ">
+      <div className="p-4">
+        <p className="font-bold">{t("tags")}</p>
+      </div>
+      <div className="border-b w-full"></div>
+      <div className="p-4 flex flex-wrap gap-2">
+        {isLoading ? (
+          Array.from({ length: 10 }).map((_, index) => (
+            <Skeleton key={index} className="w-20 h-8" />
+          ))
+        ) : (
+          <>
+            <button
+              className={cn(
+                "border px-4 text-sm py-2 rounded-md",
+                isAllTagActive && "border-primary text-primary"
+              )}
+              onClick={handleAllTags}
+            >
+              {t("all")}
+            </button>
+
+            {blogTags?.map((tagItem) => (
+              <button
+                key={tagItem.value}
+                className={cn(
+                  "border px-4 text-sm py-2 rounded-md break-all",
+                  tag === String(tagItem.value) && "border-primary text-primary"
+                )}
+                onClick={() => handleTagClick(tagItem.value)}
+              >
+                {tagItem.label}
+              </button>
+            ))}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Tags;
diff --git a/components/PagesComponent/Cards/AddListingPlanCard.jsx b/components/PagesComponent/Cards/AddListingPlanCard.jsx
new file mode 100644
index 0000000..645f6e9
--- /dev/null
+++ b/components/PagesComponent/Cards/AddListingPlanCard.jsx
@@ -0,0 +1,228 @@
+import { FaArrowRight, FaCheck } from "react-icons/fa";
+import { formatPriceAbbreviated, t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+import { useState } from "react";
+
+const AddListingPlanCard = ({ pckg, handlePurchasePackage }) => {
+
+  const [isFlipped, setIsFlipped] = useState(false);
+
+  const descriptionItems =
+    Array.isArray(pckg?.translated_key_points) &&
+      pckg.translated_key_points.length > 0
+      ? pckg.translated_key_points
+      : (pckg?.translated_description || pckg?.description || "")
+        .split("\r\n")
+        .filter(Boolean);
+
+  const isPackageActive = pckg?.is_active == 1;
+
+  const userPurchasedPackage = pckg?.user_purchased_packages?.[0]
+  const remainingDays = userPurchasedPackage?.remaining_days;
+  const remainingItems = userPurchasedPackage?.remaining_item_limit;
+  const totalDays = pckg?.duration;
+  const totalItems = pckg?.item_limit;
+  const listingDurationDays = isPackageActive ? userPurchasedPackage?.listing_duration_days : pckg?.listing_duration_days
+
+  return (
+
+    <div className="perspective-1000">
+      <div
+        className={`relative transition-transform duration-500 transform-style-preserve-3d ${isFlipped ? "rotate-y-180" : ""
+          }`}
+      >
+        <div
+          className={`backface-hidden rounded-lg relative p-4 sm:p-8 shadow-sm border ${isPackageActive == 1 ? "bg-primary !text-white" : "bg-white"
+            }`}
+        >
+          {/* Sale Badge */}
+          {pckg?.discount_in_percentage > 0 && (
+            <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 z-20">
+              <span className="bg-primary text-white px-6 py-2 rounded-full text-sm font-medium whitespace-nowrap">
+                {t("save")} {pckg?.discount_in_percentage}% {t("off")}
+              </span>
+            </div>
+          )}
+
+          {/* Card Header */}
+          <div className="flex items-center gap-4">
+            <CustomImage
+              height={80}
+              width={80}
+              src={pckg.icon}
+              alt="Bronze medal"
+              className="aspect-square rounded-lg"
+            />
+            <div className="flex flex-col gap-2 overflow-hidden">
+              <h2 className="text-xl font-medium mb-1 line-clamp-2 overflow-hidden">
+                {pckg?.translated_name || pckg?.name}
+              </h2>
+              <div className="flex items-center gap-1">
+                {pckg?.final_price !== 0 ? (
+                  <p className="text-xl font-bold">
+                    {formatPriceAbbreviated(pckg?.final_price)}
+                  </p>
+                ) : (
+                  t("Free")
+                )}
+                {pckg?.price > pckg?.final_price && (
+                  <p className="text-xl font-bold line-through text-gray-500">
+                    {formatPriceAbbreviated(pckg?.price)}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Divider */}
+          <div className="border-t border-gray-200 my-6"></div>
+
+          <div className="h-[250px] overflow-y-auto mb-3">
+            <h6 className="text-base font-medium">Features List</h6>
+
+            {/* Feature List */}
+            <div className="flex flex-col gap-2 p-3 text-sm">
+              <div className="flex items-center gap-3">
+                <span
+                  className={`${isPackageActive == 1 ? "text-white" : "text-primary"
+                    }`}
+                >
+                  <FaCheck />
+                </span>
+                <span className="text-normal capitalize">
+                  {t("packageValidity")}:{" "}
+                  {isPackageActive
+                    ? `${remainingDays} / ${totalDays} ${t("days")}`
+                    : `${totalDays} ${t("days")}`}
+                </span>
+              </div>
+              <div className="flex items-center gap-3">
+                <span
+                  className={`${isPackageActive == 1 ? "text-white" : "text-primary"
+                    }`}
+                >
+
+                  <FaCheck />
+                </span>
+                <span className="capitalize">
+                  {t("listingDuration")}: {listingDurationDays} {t("days")}
+                </span>
+              </div>
+              <div className="flex items-center gap-3">
+                <span
+                  className={`${isPackageActive == 1 ? "text-white" : "text-primary"
+                    }`}
+                >
+                  <FaCheck />
+                </span>
+                <span className="text-normal">
+                  {totalItems === "unlimited"
+                    ? t("unlimited")
+                    : isPackageActive
+                      ? `${remainingItems} / ${totalItems}`
+                      : totalItems}{" "}
+                  {t("adsListing")}
+                </span>
+              </div>
+
+              {pckg.categories.length === 0 && (
+                <div className="flex items-center gap-3">
+                  <span
+                    className={`${isPackageActive == 1 ? "text-white" : "text-primary"
+                      }`}
+                  >
+                    <FaCheck />
+                  </span>
+                  <span className="text-normal ">{t("allCategoriesIncluded")}</span>
+                </div>
+              )}
+
+              {descriptionItems.map((item, index) => (
+                <div key={index} className="flex items-center gap-3">
+                  <span
+                    className={`${isPackageActive == 1 ? "text-white" : "text-primary"
+                      }`}
+                  >
+                    <FaCheck />
+                  </span>
+                  <span className="text-normal ">{item}</span>
+                </div>
+              ))}
+            </div>
+
+            {pckg.categories.length > 0 && (
+              <>
+                <h6 className="text-base font-medium">{t("categoryIncludes")}</h6>
+                <div className="flex flex-col gap-2 p-3 text-sm">
+                  {pckg.categories.slice(0, 2).map((category) => (
+                    <div key={category.id} className="flex items-center gap-3">
+                      <span
+                        className={`${isPackageActive == 1 ? "text-white" : "text-primary"
+                          }`}
+                      >
+                        <FaCheck />
+                      </span>
+                      <span className="text-normal ">
+                        {category.translated_name || category.name}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+                {pckg.categories.length > 2 && (
+                  <button
+                    onClick={() => setIsFlipped(true)}
+                    className={`text-sm underline px-3 ${isPackageActive == 1 ? "text-white" : "text-primary"
+                      }`}
+                  >
+                    {t("seeMore")}
+                  </button>
+                )}
+              </>
+            )}
+          </div>
+
+          <div className="flex items-center justify-center h-12 max-h-12 p-4 md:p-0">
+            <button
+              onClick={() => handlePurchasePackage(pckg)}
+              className={` w-full ${isPackageActive == 1 ? "hidden" : "flex"
+                } py-1 px-3 md:py-2 md:px-4 lg:py-3 lg:px-6 rounded-lg  items-center text-primary  justify-center hover:bg-primary border hover:text-white transition-all duration-300`}
+            >
+              <span className="font-light text-lg">{t("choosePlan")}</span>
+              <span className="ml-2">
+                <FaArrowRight size={20} className="rtl:scale-x-[-1]" />
+              </span>
+            </button>
+          </div>
+
+
+        </div>
+        <div
+          className={`absolute inset-0 rotate-y-180 backface-hidden rounded-lg p-4 sm:p-8 shadow-sm border
+    ${isPackageActive == 1 ? "bg-primary text-white" : "bg-white"}
+  `}
+        >
+          <h6 className="text-lg font-medium mb-4">{t("allCategories")}</h6>
+
+          <div className="flex flex-col gap-2 overflow-y-auto max-h-[300px]">
+            {pckg.categories.map((category) => (
+              <div key={category.id} className="flex items-center gap-3">
+                <FaCheck className="text-primary" />
+                <span>{category.translated_name || category.name}</span>
+              </div>
+            ))}
+          </div>
+
+          <button
+            onClick={() => setIsFlipped(false)}
+            className={`mt-4 text-sm underline ${isPackageActive == 1 ? "text-white" : "text-primary"
+              }`}
+          >
+            {t("back")}
+          </button>
+        </div>
+      </div>
+    </div >
+  );
+};
+
+export default AddListingPlanCard;
diff --git a/components/PagesComponent/Chat/BlockedUsersMenu.jsx b/components/PagesComponent/Chat/BlockedUsersMenu.jsx
new file mode 100644
index 0000000..3577669
--- /dev/null
+++ b/components/PagesComponent/Chat/BlockedUsersMenu.jsx
@@ -0,0 +1,139 @@
+import { t } from "@/utils";
+import { RiUserForbidLine } from "react-icons/ri";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { getBlockedUsers, unBlockUserApi } from "@/utils/api";
+import { useState } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { toast } from "sonner";
+import { useSelector } from "react-redux";
+import { getIsRtl } from "@/redux/reducer/languageSlice";
+import CustomImage from "@/components/Common/CustomImage";
+
+const BlockedUsersMenu = ({ setSelectedChatDetails }) => {
+  const [blockedUsersList, setBlockedUsersList] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [unblockingId, setUnblockingId] = useState("");
+  const isRTL = useSelector(getIsRtl);
+
+  const fetchBlockedUsers = async () => {
+    setLoading(true);
+    try {
+      const response = await getBlockedUsers.blockedUsers();
+      const { data } = response;
+      setBlockedUsersList(data?.data);
+    } catch (error) {
+      console.error("Error fetching blocked users:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOpenChange = (isOpen) => {
+    setOpen(isOpen);
+    if (isOpen) {
+      fetchBlockedUsers();
+    }
+  };
+
+  const handleUnblock = async (userId, e) => {
+    e.stopPropagation();
+    setUnblockingId(userId);
+    try {
+      const response = await unBlockUserApi.unBlockUser({
+        blocked_user_id: userId,
+      });
+      if (response?.data?.error === false) {
+        // Refresh the blocked users list after successful unblock
+        setBlockedUsersList((prevList) =>
+          prevList.filter((user) => user.id !== userId)
+        );
+        setSelectedChatDetails((prev) => ({
+          ...prev,
+          user_blocked: false,
+        }));
+        toast.success(response?.data?.message);
+      }
+    } catch (error) {
+      console.error("Error unblocking user:", error);
+    } finally {
+      setUnblockingId("");
+    }
+  };
+
+  const BlockedUserSkeleton = () => (
+    <div className="flex items-center justify-between p-2">
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <Skeleton className="h-10 w-10 rounded-full" />
+        <Skeleton className="h-4 w-24" />
+      </div>
+      <Skeleton className="h-8 w-16 rounded-md" />
+    </div>
+  );
+
+  return (
+    <DropdownMenu open={open} onOpenChange={handleOpenChange}>
+      <DropdownMenuTrigger asChild>
+        <button className="focus:outline-none">
+          <RiUserForbidLine size={22} />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={isRTL ? "start" : "end"} className="w-72">
+        <DropdownMenuLabel>{t("blockedUsers")}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <div className="max-h-64 overflow-y-auto">
+          {loading ? (
+            Array.from({ length: 2 }, (_, index) => (
+              <BlockedUserSkeleton key={index} />
+            ))
+          ) : blockedUsersList && blockedUsersList.length > 0 ? (
+            <DropdownMenuGroup>
+              {blockedUsersList.map((user) => (
+                <DropdownMenuItem
+                  key={user.id}
+                  className="flex items-center justify-between p-2"
+                >
+                  <div className="flex items-center gap-2 flex-1 min-w-0">
+                    <div className="h-10 w-10 flex-shrink-0 rounded-full overflow-hidden bg-gray-200 relative">
+                      <CustomImage
+                        src={user?.profile}
+                        alt={user.name}
+                        fill
+                        className="object-cover"
+                      />
+                    </div>
+                    <span className="truncate">{user.name}</span>
+                  </div>
+                  <button
+                    onClick={(e) => handleUnblock(user?.id, e)}
+                    disabled={unblockingId === user?.id}
+                    className={`px-3 py-1 text-sm ${
+                      unblockingId === user?.id
+                        ? "bg-gray-400 cursor-not-allowed"
+                        : "bg-primary hover:bg-primary/80"
+                    } text-white rounded-md flex-shrink-0 ml-2`}
+                  >
+                    {t("unblock")}
+                  </button>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuGroup>
+          ) : (
+            <div className="p-4 text-center text-muted-foreground">
+              {t("noBlockedUsers")}
+            </div>
+          )}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+export default BlockedUsersMenu;
diff --git a/components/PagesComponent/Chat/Chat.jsx b/components/PagesComponent/Chat/Chat.jsx
new file mode 100644
index 0000000..698fb90
--- /dev/null
+++ b/components/PagesComponent/Chat/Chat.jsx
@@ -0,0 +1,173 @@
+"use client";
+import SelectedChatHeader from "./SelectedChatHeader";
+import ChatList from "./ChatList";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import NoChatFound from "./NoChatFound";
+import ChatMessages from "./ChatMessages";
+import { useSelector } from "react-redux";
+import { getCurrentLangCode } from "@/redux/reducer/languageSlice";
+import { useMediaQuery } from "usehooks-ts";
+import { chatListApi } from "@/utils/api";
+import { useNavigate } from "@/components/Common/useNavigate";
+
+const Chat = () => {
+  const searchParams = useSearchParams();
+  const activeTab = searchParams.get("activeTab") || "selling";
+  const chatId = Number(searchParams.get("chatid")) || "";
+  const [selectedChatDetails, setSelectedChatDetails] = useState();
+  const langCode = useSelector(getCurrentLangCode);
+  const { navigate } = useNavigate();
+
+  const [IsLoading, setIsLoading] = useState(true);
+
+  const [buyer, setBuyer] = useState({
+    BuyerChatList: [],
+    CurrentBuyerPage: 1,
+    HasMoreBuyer: false,
+  });
+
+  const [seller, setSeller] = useState({
+    SellerChatList: [],
+    CurrentSellerPage: 1,
+    HasMoreSeller: false,
+  });
+
+  const isLargeScreen = useMediaQuery("(min-width: 1200px)");
+
+  const fetchSellerChatList = async (page = 1) => {
+    if (page === 1) {
+      setIsLoading(true);
+    }
+    try {
+      const res = await chatListApi.chatList({ type: "seller", page });
+      if (res?.data?.error === false) {
+        const data = res?.data?.data?.data;
+        const currentPage = res?.data?.data?.current_page;
+        const lastPage = res?.data?.data?.last_page;
+
+        setSeller((prev) => ({
+          ...prev,
+          SellerChatList: page === 1 ? data : [...prev.SellerChatList, ...data],
+          CurrentSellerPage: currentPage,
+          HasMoreSeller: currentPage < lastPage,
+        }));
+      } else {
+        console.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.error("Error fetching seller chat list:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const fetchBuyerChatList = async (page = 1) => {
+    if (page === 1) {
+      setIsLoading(true);
+    }
+    try {
+      const res = await chatListApi.chatList({ type: "buyer", page });
+      if (res?.data?.error === false) {
+        const data = res?.data?.data?.data;
+        const currentPage = res?.data?.data?.current_page;
+        const lastPage = res?.data?.data?.last_page;
+
+        setBuyer((prev) => ({
+          ...prev,
+          BuyerChatList: page === 1 ? data : [...prev.BuyerChatList, ...data],
+          CurrentBuyerPage: currentPage,
+          HasMoreBuyer: currentPage < lastPage,
+        }));
+      } else {
+        console.log(res?.data?.message);
+      }
+    } catch (error) {
+      console.log("Error fetching buyer chat list:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    activeTab === "selling" ? fetchSellerChatList() : fetchBuyerChatList();
+  }, [activeTab, langCode]);
+
+  useEffect(() => {
+    if (chatId && activeTab === "selling" && seller.SellerChatList.length > 0) {
+      setSelectedChatDetails(
+        seller.SellerChatList.find((chat) => chat.id === chatId)
+      );
+    } else if (
+      chatId &&
+      activeTab === "buying" &&
+      buyer.BuyerChatList.length > 0
+    ) {
+      setSelectedChatDetails(
+        buyer.BuyerChatList.find((chat) => chat.id === chatId)
+      );
+    } else if (!chatId) {
+      setSelectedChatDetails("");
+    }
+  }, [chatId, activeTab, seller.SellerChatList, buyer.BuyerChatList, langCode]);
+
+  const handleBack = () => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.delete("chatid");
+    navigate(`?${params.toString()}`, { scroll: false });
+  };
+
+  return (
+    <div className="grid grid-cols-1 xl:grid-cols-12">
+      <div className="col-span-4">
+        {(isLargeScreen || !chatId || IsLoading) && (
+          <ChatList
+            chatId={chatId}
+            activeTab={activeTab}
+            buyer={buyer}
+            setBuyer={setBuyer}
+            langCode={langCode}
+            isLargeScreen={isLargeScreen}
+            seller={seller}
+            setSeller={setSeller}
+            IsLoading={IsLoading}
+            fetchSellerChatList={fetchSellerChatList}
+            fetchBuyerChatList={fetchBuyerChatList}
+            setSelectedChatDetails={setSelectedChatDetails}
+          />
+        )}
+      </div>
+      {(isLargeScreen || chatId) && (
+        <div className="col-span-8">
+          {selectedChatDetails?.id ? (
+            <div className="ltr:xl:border-l rtl:lg:border-r h-[65vh] lg:h-[800px] flex flex-col">
+              <SelectedChatHeader
+                selectedChat={selectedChatDetails}
+                isSelling={activeTab === "selling"}
+                setSelectedChat={setSelectedChatDetails}
+                handleBack={handleBack}
+                isLargeScreen={isLargeScreen}
+              />
+              <ChatMessages
+                selectedChatDetails={selectedChatDetails}
+                setSelectedChatDetails={setSelectedChatDetails}
+                isSelling={activeTab === "selling"}
+                setBuyer={setBuyer}
+                chatId={chatId}
+              />
+            </div>
+          ) : (
+            <div className="ltr:xl:border-l rtl:xl:border-r h-[60vh] lg:h-[800px] flex items-center justify-center">
+              <NoChatFound
+                isLargeScreen={isLargeScreen}
+                handleBack={handleBack}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Chat;
diff --git a/components/PagesComponent/Chat/ChatList.jsx b/components/PagesComponent/Chat/ChatList.jsx
new file mode 100644
index 0000000..84efd5c
--- /dev/null
+++ b/components/PagesComponent/Chat/ChatList.jsx
@@ -0,0 +1,119 @@
+import { t } from "@/utils";
+import ChatListCard from "./ChatListCard";
+import ChatListCardSkeleton from "./ChatListCardSkeleton";
+import BlockedUsersMenu from "./BlockedUsersMenu";
+import NoChatListFound from "./NoChatListFound";
+import InfiniteScroll from "react-infinite-scroll-component";
+import CustomLink from "@/components/Common/CustomLink";
+
+const ChatList = ({
+  chatId,
+  activeTab,
+  buyer,
+  setBuyer,
+  isLargeScreen,
+  seller,
+  setSeller,
+  IsLoading,
+  fetchSellerChatList,
+  fetchBuyerChatList,
+  setSelectedChatDetails
+}) => {
+  const handleChatTabClick = (chat, isSelling) => {
+    if (isSelling) {
+      setSeller((prev) => ({
+        ...prev,
+        SellerChatList: prev.SellerChatList.map((item) =>
+          item.id === chat.id ? { ...item, unread_chat_count: 0 } : item
+        ),
+      }));
+    } else {
+      setBuyer((prev) => ({
+        ...prev,
+        BuyerChatList: prev.BuyerChatList.map((item) =>
+          item.id === chat.id ? { ...item, unread_chat_count: 0 } : item
+        ),
+      }));
+    }
+  };
+
+  return (
+    <div className="h-[60vh] max-h-[800px] flex flex-col lg:h-full">
+      {isLargeScreen && (
+        <div className="p-4 flex items-center gap-1 justify-between border-b">
+          <h4 className="font-medium text-xl">{t("chat")}</h4>
+          {/* Blocked Users Menu Component */}
+          <BlockedUsersMenu setSelectedChatDetails={setSelectedChatDetails} />
+        </div>
+      )}
+
+      <div className="flex items-center">
+        <CustomLink
+          href={`/chat?activeTab=selling`}
+          className={`py-4 flex-1 text-center border-b ${activeTab === "selling" ? "border-primary" : ""
+            }`}
+          scroll={false}
+        >
+          {t("selling")}
+        </CustomLink>
+        <CustomLink
+          href={`/chat?activeTab=buying`}
+          className={`py-4 flex-1 text-center border-b ${activeTab === "buying" ? "border-primary" : ""
+            }`}
+          scroll={false}
+        >
+          {t("buying")}
+        </CustomLink>
+      </div>
+      <div className="flex-1 overflow-y-auto" id="chatList">
+        <InfiniteScroll
+          dataLength={
+            activeTab === "buying"
+              ? buyer.BuyerChatList?.length
+              : seller.SellerChatList?.length
+          }
+          next={() => {
+            activeTab === "buying"
+              ? fetchBuyerChatList(buyer.CurrentBuyerPage + 1)
+              : fetchSellerChatList(seller.CurrentSellerPage + 1);
+          }}
+          hasMore={
+            activeTab === "buying" ? buyer.HasMoreBuyer : seller.HasMoreSeller
+          }
+          loader={Array.from({ length: 3 }, (_, index) => (
+            <ChatListCardSkeleton key={index} />
+          ))}
+          scrollableTarget="chatList"
+        >
+          {IsLoading
+            ? Array.from({ length: 8 }, (_, index) => (
+              <ChatListCardSkeleton key={index} />
+            ))
+            : (() => {
+              const chatList =
+                activeTab === "selling"
+                  ? seller.SellerChatList
+                  : buyer.BuyerChatList;
+              return chatList.length > 0 ? (
+                chatList.map((chat, index) => (
+                  <ChatListCard
+                    key={Number(chat.id) || index}
+                    chat={chat}
+                    isActive={chat?.id === chatId}
+                    isSelling={activeTab === "selling"}
+                    handleChatTabClick={handleChatTabClick}
+                  />
+                ))
+              ) : (
+                <div className="h-full flex items-center justify-center p-4">
+                  <NoChatListFound />
+                </div>
+              );
+            })()}
+        </InfiniteScroll>
+      </div>
+    </div>
+  );
+};
+
+export default ChatList;
diff --git a/components/PagesComponent/Chat/ChatListCard.jsx b/components/PagesComponent/Chat/ChatListCard.jsx
new file mode 100644
index 0000000..d9da723
--- /dev/null
+++ b/components/PagesComponent/Chat/ChatListCard.jsx
@@ -0,0 +1,62 @@
+import { formatTime } from "@/utils";
+import CustomLink from "@/components/Common/CustomLink";
+import CustomImage from "@/components/Common/CustomImage";
+
+const ChatListCard = ({ chat, isSelling, isActive, handleChatTabClick }) => {
+  const user = isSelling ? chat?.buyer : chat?.seller;
+  const isUnread = chat?.unread_chat_count > 0;
+
+  return (
+    <CustomLink
+      scroll={false}
+      href={`/chat?activeTab=${isSelling ? "selling" : "buying"}&chatid=${
+        chat?.id
+      }`}
+      onClick={() => handleChatTabClick(chat, isSelling)}
+      className={`py-3 px-4 border-b flex items-center gap-4 cursor-pointer ${
+        isActive ? "bg-primary text-white" : ""
+      }`}
+    >
+      <div className="relative flex-shrink-0">
+        <CustomImage
+          src={user?.profile}
+          alt="User avatar"
+          width={56}
+          height={56}
+          className="w-[56px] h-auto aspect-square object-cover rounded-full"
+        />
+
+        <CustomImage
+          src={chat?.item?.image}
+          alt="Item image"
+          width={24}
+          height={24}
+          className="w-[24px] h-auto aspect-square object-cover rounded-full absolute top-[32px] bottom-[-6px] right-[-6px]"
+        />
+      </div>
+      <div className="flex flex-col gap-2 w-full min-w-0">
+        <div className="w-full flex items-center gap-1 justify-between min-w-0">
+          <h5 className="font-medium truncate" title={user?.name}>
+            {user?.name}
+          </h5>
+          <span className="text-xs">{formatTime(chat?.last_message_time)}</span>
+        </div>
+        <div className="flex items-center gap-1 justify-between">
+          <p
+            className="truncate text-sm"
+            title={chat?.item?.translated_name || chat?.item?.name}
+          >
+            {chat?.item?.translated_name || chat?.item?.name}
+          </p>
+          {isUnread && !isActive && (
+            <span className="flex items-center justify-center bg-primary text-white rounded-full px-2 py-1 text-xs">
+              {chat?.unread_chat_count}
+            </span>
+          )}
+        </div>
+      </div>
+    </CustomLink>
+  );
+};
+
+export default ChatListCard;
diff --git a/components/PagesComponent/Chat/ChatListCardSkeleton.jsx b/components/PagesComponent/Chat/ChatListCardSkeleton.jsx
new file mode 100644
index 0000000..b58b3a6
--- /dev/null
+++ b/components/PagesComponent/Chat/ChatListCardSkeleton.jsx
@@ -0,0 +1,25 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+const ChatListCardSkeleton = () => {
+    return (
+        <div className="p-4 border-b">
+            <div className="flex items-start gap-3">
+                {/* Avatar skeleton */}
+                <Skeleton className="w-12 h-12 rounded-full" />
+
+                <div className="flex-1">
+                    {/* Name skeleton */}
+                    <Skeleton className="h-4 w-[40%] mb-2 rounded-md" />
+
+                    {/* Message skeleton */}
+                    <Skeleton className="h-3 w-[70%] rounded-md" />
+                </div>
+
+                {/* Time skeleton */}
+                <Skeleton className="h-3 w-[15%] rounded-md" />
+            </div>
+        </div>
+    )
+}
+
+export default ChatListCardSkeleton 
\ No newline at end of file
diff --git a/components/PagesComponent/Chat/ChatMessages.jsx b/components/PagesComponent/Chat/ChatMessages.jsx
new file mode 100644
index 0000000..eb1cdd9
--- /dev/null
+++ b/components/PagesComponent/Chat/ChatMessages.jsx
@@ -0,0 +1,343 @@
+import { userSignUpData } from "@/redux/reducer/authSlice";
+import {
+  formatChatMessageTime,
+  formatMessageDate,
+  formatPriceAbbreviated,
+  t,
+} from "@/utils";
+import { getMessagesApi } from "@/utils/api";
+import { Fragment, useEffect, useRef, useState } from "react";
+import { useSelector } from "react-redux";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Loader2, ChevronUp } from "lucide-react";
+import dynamic from "next/dynamic";
+const SendMessage = dynamic(() => import("./SendMessage"), { ssr: false });
+import GiveReview from "./GiveReview";
+import { getNotification } from "@/redux/reducer/globalStateSlice";
+import CustomImage from "@/components/Common/CustomImage";
+import { cn } from "@/lib/utils";
+
+// Skeleton component for chat messages
+const ChatMessagesSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-4 w-full">
+      {/* Skeleton for date separator */}
+
+      {/* Received message skeletons */}
+      <div className="flex flex-col gap-1 w-[65%] max-w-[80%]">
+        <Skeleton className="h-16 w-full rounded-md" />
+        <Skeleton className="h-3 w-[30%] rounded-md" />
+      </div>
+
+      {/* Sent message skeletons */}
+      <div className="flex flex-col gap-1 w-[70%] max-w-[80%] self-end">
+        <Skeleton className="h-10 w-full rounded-md" />
+        <Skeleton className="h-3 w-[30%] self-end rounded-md" />
+      </div>
+
+      {/* Image message skeleton */}
+      <div className="flex flex-col gap-1 w-[50%] max-w-[80%]">
+        <Skeleton className="h-32 w-full rounded-md" />
+        <Skeleton className="h-3 w-[30%] rounded-md" />
+      </div>
+
+      {/* Audio message skeleton */}
+      <div className="flex flex-col gap-1 w-[60%] max-w-[80%] self-end">
+        <Skeleton className="h-12 w-full rounded-md" />
+        <Skeleton className="h-3 w-[30%] self-end rounded-md" />
+      </div>
+
+      {/* Another message skeleton */}
+      <div className="flex flex-col gap-1 w-[45%] max-w-[80%]">
+        <Skeleton className="h-14 w-full rounded-md" />
+        <Skeleton className="h-3 w-[30%] rounded-md" />
+      </div>
+      <div className="flex flex-col gap-1 w-[60%] max-w-[80%] self-end">
+        <Skeleton className="h-12 w-full rounded-md" />
+        <Skeleton className="h-3 w-[30%] self-end rounded-md" />
+      </div>
+
+      {/* Another message skeleton */}
+      <div className="flex flex-col gap-1 w-[45%] max-w-[80%]">
+        <Skeleton className="h-14 w-full rounded-md" />
+        <Skeleton className="h-3 w-[30%] rounded-md" />
+      </div>
+    </div>
+  );
+};
+
+const renderMessageContent = (message, isCurrentUser) => {
+  const baseTextClass = isCurrentUser
+    ? "text-white bg-primary p-2 rounded-md w-fit"
+    : "text-black bg-border p-2 rounded-md w-fit";
+
+  const audioStyles = isCurrentUser ? "border-primary" : "border-border";
+
+  switch (message.message_type) {
+    case "audio":
+      return (
+        <audio
+          src={message.audio}
+          controls
+          className={`w-full sm:w-[70%] ${
+            isCurrentUser ? "self-end" : "self-start"
+          } rounded-md border-2 ${audioStyles}`}
+          controlsList="nodownload"
+          type="audio/mpeg"
+          preload="metadata"
+        />
+      );
+
+    case "file":
+      return (
+        <div className={`${baseTextClass}`}>
+          <CustomImage
+            src={message.file}
+            alt="Chat Image"
+            className="rounded-md w-auto h-auto max-h-[250px] max-w-[250px] object-contain"
+            width={200}
+            height={200}
+          />
+        </div>
+      );
+
+    case "file_and_text":
+      return (
+        <div className={`${baseTextClass} flex flex-col gap-2`}>
+          <CustomImage
+            src={message.file}
+            alt="Chat Image"
+            className="rounded-md w-auto h-auto max-h-[250px] max-w-[250px] object-contain"
+            width={200}
+            height={200}
+          />
+          <div className="border-white/20">{message.message}</div>
+        </div>
+      );
+
+    default:
+      return (
+        <p
+          className={`${baseTextClass} whitespace-pre-wrap ${
+            isCurrentUser ? "self-end" : "self-start"
+          }`}
+        >
+          {message?.message}
+        </p>
+      );
+  }
+};
+
+const ChatMessages = ({
+  selectedChatDetails,
+  isSelling,
+  setSelectedChatDetails,
+  setBuyer,
+  chatId,
+}) => {
+  const notification = useSelector(getNotification);
+  const [chatMessages, setChatMessages] = useState([]);
+  const [currentMessagesPage, setCurrentMessagesPage] = useState(1);
+  const [hasMoreChatMessages, setHasMoreChatMessages] = useState(false);
+  const [isLoadPrevMesg, setIsLoadPrevMesg] = useState(false);
+  const [IsLoading, setIsLoading] = useState(false);
+  const [showReviewDialog, setShowReviewDialog] = useState(false);
+  const lastMessageDate = useRef(null);
+  const isAskForReview =
+    !isSelling &&
+    selectedChatDetails?.item?.status === "sold out" &&
+    !selectedChatDetails?.item?.review &&
+    Number(selectedChatDetails?.item?.sold_to) ===
+      Number(selectedChatDetails?.buyer_id);
+
+  const user = useSelector(userSignUpData);
+  const userId = user?.id;
+
+  useEffect(() => {
+    if (selectedChatDetails?.id) {
+      fetchChatMessgaes(1);
+    }
+  }, [selectedChatDetails?.id]);
+
+  useEffect(() => {
+    if (
+      notification?.type === "chat" &&
+      Number(notification?.item_offer_id) === Number(chatId) &&
+      (notification?.user_type === "Seller" ? !isSelling : isSelling)
+    ) {
+      const newMessage = {
+        message_type: notification?.message_type_temp,
+        message: notification?.message,
+        sender_id: Number(notification?.sender_id),
+        created_at: notification?.created_at,
+        audio: notification?.audio,
+        file: notification?.file,
+        id: Number(notification?.id),
+        item_offer_id: Number(notification?.item_offer_id),
+        updated_at: notification?.updated_at,
+      };
+
+      setChatMessages((prev) => [...prev, newMessage]);
+    }
+  }, [notification]);
+
+  const fetchChatMessgaes = async (page) => {
+    try {
+      page > 1 ? setIsLoadPrevMesg(true) : setIsLoading(true);
+      const response = await getMessagesApi.chatMessages({
+        item_offer_id: selectedChatDetails?.id,
+        page,
+      });
+      if (response?.data?.error === false) {
+        const currentPage = Number(response?.data?.data?.current_page);
+        const lastPage = Number(response?.data?.data?.last_page);
+        const hasMoreChatMessages = currentPage < lastPage;
+        const chatMessages = (response?.data?.data?.data).reverse();
+        setCurrentMessagesPage(currentPage);
+        setHasMoreChatMessages(hasMoreChatMessages);
+        page > 1
+          ? setChatMessages((prev) => [...chatMessages, ...prev])
+          : setChatMessages(chatMessages);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoadPrevMesg(false);
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="flex-1 overflow-y-auto bg-muted p-4 flex flex-col gap-2.5 relative">
+        {IsLoading ? (
+          <ChatMessagesSkeleton />
+        ) : (
+          <>
+            {/* Show review dialog if open */}
+            {showReviewDialog && (
+              <div className="absolute inset-0 z-20 flex items-center justify-center bg-black/20 p-4">
+                <div className="w-full max-w-md">
+                  <GiveReview
+                    itemId={selectedChatDetails?.item_id}
+                    sellerId={selectedChatDetails?.seller_id}
+                    onClose={() => setShowReviewDialog(false)}
+                    onSuccess={handleReviewSuccess}
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* button to load previous messages */}
+            {hasMoreChatMessages && !IsLoading && (
+              <div className="absolute top-3 left-0 right-0 z-10 flex justify-center pb-2">
+                <button
+                  onClick={() => fetchChatMessgaes(currentMessagesPage + 1)}
+                  disabled={isLoadPrevMesg}
+                  className="text-primary text-sm font-medium px-3 py-1.5 bg-white/90 rounded-full shadow-md hover:bg-white flex items-center gap-1.5"
+                >
+                  {isLoadPrevMesg ? (
+                    <>
+                      <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                      {t("loading")}
+                    </>
+                  ) : (
+                    <>
+                      <ChevronUp className="w-4 h-4" />
+                      {t("loadPreviousMessages")}
+                    </>
+                  )}
+                </button>
+              </div>
+            )}
+
+            {/* offer price */}
+            {!hasMoreChatMessages &&
+              selectedChatDetails?.amount > 0 &&
+              (() => {
+                const isSeller = isSelling;
+                const containerClasses = `flex flex-col gap-1 rounded-md p-2 w-fit ${
+                  isSeller ? "bg-border" : "bg-primary text-white self-end"
+                }`;
+                const label = isSeller ? t("offer") : t("yourOffer");
+
+                return (
+                  <div className={containerClasses}>
+                    <p className="text-sm">{label}</p>
+                    <span className="text-xl font-medium">
+                      {selectedChatDetails.formatted_amount}
+                    </span>
+                  </div>
+                );
+              })()}
+
+            {/* chat messages */}
+            {chatMessages &&
+              chatMessages.length > 0 &&
+              chatMessages.map((message) => {
+                const messageDate = formatMessageDate(message.created_at);
+                const showDateSeparator =
+                  messageDate !== lastMessageDate.current;
+                if (showDateSeparator) {
+                  lastMessageDate.current = messageDate;
+                }
+
+                return (
+                  <Fragment key={message?.id}>
+                    {showDateSeparator && (
+                      <p className="text-xs bg-[#f1f1f1] py-1 px-2 rounded-lg text-muted-foreground my-5 mx-auto">
+                        {messageDate}
+                      </p>
+                    )}
+
+                    {message.sender_id === userId ? (
+                      <div
+                        className={cn(
+                          "flex flex-col gap-1 max-w-[80%] self-end",
+                          message.message_type === "audio" && "w-full"
+                        )}
+                        key={message?.id}
+                      >
+                        {renderMessageContent(message, true)}
+                        <p className="text-xs text-muted-foreground ltr:text-right rtl:text-left">
+                          {formatChatMessageTime(message?.created_at)}
+                        </p>
+                      </div>
+                    ) : (
+                      <div
+                        className={cn(
+                          "flex flex-col gap-1 max-w-[80%]",
+                          message.message_type === "audio" && "w-full"
+                        )}
+                        key={message?.id}
+                      >
+                        {renderMessageContent(message, false)}
+                        <p className="text-xs text-muted-foreground ltr:text-left rtl:text-right">
+                          {formatChatMessageTime(message?.created_at)}
+                        </p>
+                      </div>
+                    )}
+                  </Fragment>
+                );
+              })}
+          </>
+        )}
+      </div>
+      {isAskForReview && (
+        <GiveReview
+          key={`review-${selectedChatDetails?.id}`}
+          itemId={selectedChatDetails?.item_id}
+          setSelectedChatDetails={setSelectedChatDetails}
+          setBuyer={setBuyer}
+        />
+      )}
+      <SendMessage
+        key={`send-${selectedChatDetails?.id}`}
+        selectedChatDetails={selectedChatDetails}
+        setChatMessages={setChatMessages}
+      />
+    </>
+  );
+};
+
+export default ChatMessages;
diff --git a/components/PagesComponent/Chat/GiveReview.jsx b/components/PagesComponent/Chat/GiveReview.jsx
new file mode 100644
index 0000000..2b9a6bc
--- /dev/null
+++ b/components/PagesComponent/Chat/GiveReview.jsx
@@ -0,0 +1,173 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { FaStar } from "react-icons/fa";
+import { t } from "@/utils";
+import { addItemReviewApi } from "@/utils/api";
+import { toast } from "sonner";
+
+const GiveReview = ({ itemId, setSelectedChatDetails, setBuyer }) => {
+  const [rating, setRating] = useState(0);
+  const [hoveredRating, setHoveredRating] = useState(0);
+  const [review, setReview] = useState("");
+  const [errors, setErrors] = useState({
+    rating: "",
+    review: "",
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleRatingClick = (selectedRating) => {
+    setRating(selectedRating);
+    setErrors((prev) => ({ ...prev, rating: "" }));
+  };
+
+  const handleMouseEnter = (starValue) => {
+    setHoveredRating(starValue);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredRating(0);
+  };
+
+  const handleReviewChange = (e) => {
+    setReview(e.target.value);
+    setErrors((prev) => ({ ...prev, review: "" }));
+  };
+
+  const validateForm = () => {
+    const newErrors = {
+      rating: "",
+      review: "",
+    };
+    let isValid = true;
+
+    if (rating === 0) {
+      newErrors.rating = t("pleaseSelectRating");
+      isValid = false;
+    }
+
+    if (!review.trim()) {
+      newErrors.review = t("pleaseWriteReview");
+      isValid = false;
+    }
+
+    setErrors(newErrors);
+    return isValid;
+  };
+
+  const handleSubmit = async () => {
+    if (!validateForm()) {
+      return;
+    }
+    try {
+      setIsSubmitting(true);
+      const res = await addItemReviewApi.addItemReview({
+        item_id: itemId,
+        review,
+        ratings: rating,
+      });
+      if (res?.data?.error === false) {
+        toast.success(res?.data?.message);
+        setSelectedChatDetails((prev) => ({
+          ...prev,
+          item: {
+            ...prev.item,
+            review: res?.data?.data,
+          },
+        }));
+        setBuyer((prev) => ({
+          ...prev,
+          BuyerChatList: prev.BuyerChatList.map((chatItem) =>
+            chatItem?.item?.id === Number(res?.data?.data?.item_id)
+              ? {
+                  ...chatItem,
+                  item: {
+                    ...chatItem.item,
+                    review: res?.data?.data?.review, // use review from API
+                  },
+                }
+              : chatItem
+          ),
+        }));
+        setRating(0);
+        setReview("");
+        setErrors({
+          rating: "",
+          review: "",
+        });
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error(t("somethingWentWrong"));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="bg-muted p-4">
+      <div className="rounded-lg p-4 bg-white">
+        <div className="mb-5">
+          <h3 className="text-base font-medium mb-2">{t("rateSeller")}</h3>
+          <p className="text-sm text-gray-500 mb-3">{t("rateYourExp")}</p>
+
+          <div className="flex gap-2 mb-2">
+            {[1, 2, 3, 4, 5].map((starValue) => (
+              <button
+                key={starValue}
+                type="button"
+                className="p-1 focus:outline-none"
+                onClick={() => handleRatingClick(starValue)}
+                onMouseEnter={() => handleMouseEnter(starValue)}
+                onMouseLeave={handleMouseLeave}
+                aria-label={`Rate ${starValue} stars out of 5`}
+                tabIndex={0}
+              >
+                <FaStar
+                  className={`text-3xl ${
+                    (hoveredRating || rating) >= starValue
+                      ? "text-yellow-400"
+                      : "text-gray-200"
+                  }`}
+                />
+              </button>
+            ))}
+          </div>
+          {errors.rating && (
+            <p className="text-red-500 text-sm mt-1">{errors.rating}</p>
+          )}
+        </div>
+
+        <div className="mb-4">
+          <Textarea
+            placeholder={t("writeAReview")}
+            value={review}
+            onChange={handleReviewChange}
+            className={`min-h-[100px] resize-none border-gray-200 rounded ${
+              errors.review ? "border-red-500" : ""
+            }`}
+          />
+          {errors.review && (
+            <p className="text-red-500 text-sm mt-1">{errors.review}</p>
+          )}
+        </div>
+
+        <div className="flex justify-end">
+          <Button
+            onClick={handleSubmit}
+            className="bg-primary text-white px-6"
+            disabled={isSubmitting}
+          >
+            {t("submit")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GiveReview;
diff --git a/components/PagesComponent/Chat/NoChatFound.jsx b/components/PagesComponent/Chat/NoChatFound.jsx
new file mode 100644
index 0000000..5e415d1
--- /dev/null
+++ b/components/PagesComponent/Chat/NoChatFound.jsx
@@ -0,0 +1,21 @@
+import { Button } from "@/components/ui/button";
+import { t } from "@/utils";
+import { MdArrowBack } from "react-icons/md";
+
+const NoChatFound = ({ handleBack, isLargeScreen }) => {
+  return (
+    <div className="flex flex-col gap-3 text-center items-center justify-center">
+      <h5 className="text-primary text-2xl font-medium">{t("noChatFound")}</h5>
+      <p>{t("startConversation")}</p>
+
+      {!isLargeScreen && (
+        <Button className="w-fit" onClick={handleBack}>
+          <MdArrowBack size={20} className="rtl:scale-x-[-1]" />
+          {t("back")}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default NoChatFound;
diff --git a/components/PagesComponent/Chat/NoChatListFound.jsx b/components/PagesComponent/Chat/NoChatListFound.jsx
new file mode 100644
index 0000000..4b028a3
--- /dev/null
+++ b/components/PagesComponent/Chat/NoChatListFound.jsx
@@ -0,0 +1,23 @@
+import { t } from "@/utils";
+import noChatListFound from "../../../public/assets/no_data_found_illustrator.svg";
+import CustomImage from "@/components/Common/CustomImage";
+
+const NoChatListFound = () => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2">
+      <CustomImage
+        src={noChatListFound}
+        alt="no chat list found"
+        width={200}
+        height={200}
+        className="w-[200px] h-auto aspect-square"
+      />
+      <h3 className="font-medium text-2xl text-primary text-center">
+        {t("noConversationsFound")}
+      </h3>
+      <span className="text-sm text-center">{t("noChatsAvailable")}</span>
+    </div>
+  );
+};
+
+export default NoChatListFound;
diff --git a/components/PagesComponent/Chat/SelectedChatHeader.jsx b/components/PagesComponent/Chat/SelectedChatHeader.jsx
new file mode 100644
index 0000000..e5c4ce2
--- /dev/null
+++ b/components/PagesComponent/Chat/SelectedChatHeader.jsx
@@ -0,0 +1,137 @@
+import { HiOutlineDotsVertical } from "react-icons/hi";
+import { t } from "@/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import CustomLink from "@/components/Common/CustomLink";
+import { blockUserApi, unBlockUserApi } from "@/utils/api";
+import { toast } from "sonner";
+import { useSelector } from "react-redux";
+import { getIsRtl } from "@/redux/reducer/languageSlice";
+import CustomImage from "@/components/Common/CustomImage";
+import { MdArrowBack } from "react-icons/md";
+
+const SelectedChatHeader = ({
+  selectedChat,
+  isSelling,
+  setSelectedChat,
+  handleBack,
+  isLargeScreen,
+}) => {
+  const isBlocked = selectedChat?.user_blocked;
+  const userData = isSelling ? selectedChat?.buyer : selectedChat?.seller;
+  const itemData = selectedChat?.item;
+  const isRTL = useSelector(getIsRtl);
+
+  const handleBlockUser = async (id) => {
+    try {
+      const response = await blockUserApi.blockUser({
+        blocked_user_id: userData?.id,
+      });
+
+      if (response?.data?.error === false) {
+        setSelectedChat((prevData) => ({
+          ...prevData,
+          user_blocked: true,
+        }));
+        toast.success(response?.data?.message);
+      } else {
+        toast.error(response?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleUnBlockUser = async (id) => {
+    try {
+      const response = await unBlockUserApi.unBlockUser({
+        blocked_user_id: userData?.id,
+      });
+      if (response?.data.error === false) {
+        setSelectedChat((prevData) => ({
+          ...prevData,
+          user_blocked: false,
+        }));
+        toast.success(response?.data?.message);
+      } else {
+        toast.error(response?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-1 px-4 py-3 border-b">
+      <div className="flex items-center gap-4 min-w-0">
+        {!isLargeScreen && (
+          <button onClick={handleBack}>
+            <MdArrowBack size={20} className="rtl:scale-x-[-1]" />
+          </button>
+        )}
+        <div className="relative flex-shrink-0">
+          <CustomLink href={`/seller/${userData?.id}`}>
+            <CustomImage
+              src={userData?.profile}
+              alt="avatar"
+              width={56}
+              height={56}
+              className="w-[56px] h-auto aspect-square object-cover rounded-full"
+            />
+          </CustomLink>
+          <CustomImage
+            src={userData?.profile}
+            alt="avatar"
+            width={24}
+            height={24}
+            className="w-[24px] h-auto aspect-square object-cover rounded-full absolute top-[32px] bottom-[-6px] right-[-6px]"
+          />
+        </div>
+        <div className="flex flex-col gap-2 w-full min-w-0">
+          <CustomLink
+            href={`/seller/${userData?.id}`}
+            className="font-medium truncate"
+            title={userData?.name}
+          >
+            {userData?.name}
+          </CustomLink>
+          <p
+            className="truncate text-sm"
+            title={itemData?.translated_name || itemData?.name}
+          >
+            {itemData?.translated_name || itemData?.name}
+          </p>
+        </div>
+      </div>
+
+      {/* Dropdown Menu for Actions */}
+
+      <div className="flex flex-col gap-1">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="self-end">
+              <HiOutlineDotsVertical size={22} />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align={isRTL ? "start" : "end"}>
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={isBlocked ? handleUnBlockUser : handleBlockUser}
+            >
+              <span>{isBlocked ? t("unblock") : t("block")}</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <div className="text-xs whitespace-nowrap">
+          {itemData?.formatted_price}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SelectedChatHeader;
diff --git a/components/PagesComponent/Chat/SendMessage.jsx b/components/PagesComponent/Chat/SendMessage.jsx
new file mode 100644
index 0000000..148842a
--- /dev/null
+++ b/components/PagesComponent/Chat/SendMessage.jsx
@@ -0,0 +1,256 @@
+"use client";
+import { sendMessageApi } from "@/utils/api";
+import { useEffect, useState, useRef } from "react";
+import { IoMdAttach, IoMdSend } from "react-icons/io";
+import { FaMicrophone, FaRegStopCircle } from "react-icons/fa";
+import { Loader2, X } from "lucide-react";
+import { useReactMediaRecorder } from "react-media-recorder";
+import { toast } from "sonner";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+
+const SendMessage = ({ selectedChatDetails, setChatMessages }) => {
+  const isAllowToChat =
+    selectedChatDetails?.item?.status === "approved" ||
+    selectedChatDetails?.item?.status === "featured";
+
+  if (!isAllowToChat) {
+    return (
+      <div className="p-4 border-t text-center text-muted-foreground">
+        {t("thisAd")} {selectedChatDetails?.item?.status}
+      </div>
+    );
+  }
+
+  const id = selectedChatDetails?.id;
+  const [message, setMessage] = useState("");
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState("");
+  const [isSending, setIsSending] = useState(false);
+  const fileInputRef = useRef(null);
+
+  // Voice recording setup
+  const { status, startRecording, stopRecording, mediaBlobUrl, error } =
+    useReactMediaRecorder({
+      audio: true,
+      blobPropertyBag: { type: "audio/mpeg" },
+    });
+
+  const isRecording = status === "recording";
+  const [recordingDuration, setRecordingDuration] = useState(0);
+
+  // Format recording duration as mm:ss
+  const formatDuration = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, "0")}:${secs
+      .toString()
+      .padStart(2, "0")}`;
+  };
+
+  // Timer for recording
+  useEffect(() => {
+    let timer;
+    if (isRecording) {
+      timer = setInterval(() => {
+        setRecordingDuration((prev) => prev + 1);
+      }, 1000);
+    } else {
+      setRecordingDuration(0);
+    }
+
+    return () => clearInterval(timer);
+  }, [isRecording]);
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+      }
+      stopRecording();
+    };
+  }, []);
+
+  // Handle recorded audio
+  useEffect(() => {
+    if (mediaBlobUrl && status === "stopped") {
+      handleRecordedAudio();
+    }
+  }, [mediaBlobUrl, status]);
+
+  const handleRecordedAudio = async () => {
+    try {
+      const response = await fetch(mediaBlobUrl);
+      const blob = await response.blob();
+      const audioFile = new File([blob], "recording.mp3", {
+        type: "audio/mpeg",
+      });
+      sendMessage(audioFile);
+    } catch (err) {
+      console.error("Error processing audio:", err);
+      toast.error("Failed to process recording");
+    }
+  };
+
+  const handleFileSelect = (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    // Check if file is an image
+    const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
+
+    if (!allowedTypes.includes(file.type)) {
+      toast.error("Only image files (JPEG, PNG, JPG) are allowed");
+      return;
+    }
+
+    // Create preview URL for image
+    const fileUrl = URL.createObjectURL(file);
+    setPreviewUrl(fileUrl);
+    setSelectedFile(file);
+  };
+
+  const removeSelectedFile = () => {
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+    setSelectedFile(null);
+    setPreviewUrl("");
+    // Reset file input value to allow selecting the same file again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const sendMessage = async (audioFile = null) => {
+    if ((!message.trim() && !selectedFile && !audioFile) || isSending) return;
+
+    const params = {
+      item_offer_id: id,
+      message: message ? message : "",
+      file: selectedFile ? selectedFile : "",
+      audio: audioFile ? audioFile : "",
+    };
+
+    try {
+      setIsSending(true);
+      const response = await sendMessageApi.sendMessage(params);
+
+      if (!response?.data?.error) {
+        setChatMessages((prev) => [...prev, response.data.data]);
+        setMessage("");
+        removeSelectedFile();
+      } else {
+        toast.error(response?.data?.message || "Failed to send message");
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Error sending message");
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  const handleVoiceButtonClick = () => {
+    if (isRecording) {
+      stopRecording();
+    } else {
+      startRecording();
+      if (error) {
+        console.log(error);
+        switch (error) {
+          case "permission_denied":
+            toast.error(t("microphoneAccessDenied"));
+            break;
+          case "no_specified_media_found":
+            toast.error(t("noMicrophoneFound"));
+            break;
+          default:
+            toast.error(t("somethingWentWrong"));
+        }
+      }
+    }
+  };
+
+  return (
+    <div className="flex flex-col">
+      {/* File Preview */}
+      {previewUrl && (
+        <div className="px-4 pt-2 pb-1">
+          <div className="relative w-32 h-32 border rounded-md overflow-hidden group">
+            <CustomImage
+              src={previewUrl}
+              alt="File preview"
+              fill
+              className="object-contain"
+            />
+            <button
+              onClick={removeSelectedFile}
+              className="absolute top-1 right-1 bg-black/70 text-white p-1 rounded-full opacity-70 hover:opacity-100"
+            >
+              <X size={14} />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Input Area */}
+      <div className="p-4 border-t flex items-center gap-2">
+        {!isRecording && (
+          <>
+            <input
+              type="file"
+              ref={fileInputRef}
+              className="hidden"
+              accept="image/jpeg,image/png,image/jpg"
+              onChange={handleFileSelect}
+            />
+            <button
+              onClick={() => fileInputRef.current.click()}
+              aria-label="Attach file"
+            >
+              <IoMdAttach size={20} className="text-muted-foreground" />
+            </button>
+          </>
+        )}
+
+        {isRecording ? (
+          <div className="flex-1 py-2 px-3 bg-red-50 text-red-500 rounded-md flex items-center justify-center font-medium">
+            {t("recording")} {formatDuration(recordingDuration)}
+          </div>
+        ) : (
+          <textarea
+            type="text"
+            placeholder="Message..."
+            className="flex-1 outline-none border px-3 py-1 rounded-md"
+            value={message}
+            rows={2}
+            onChange={(e) => setMessage(e.target.value)}
+          />
+        )}
+
+        <button
+          className="p-2 bg-primary text-white rounded-md"
+          disabled={isSending}
+          onClick={
+            message.trim() || selectedFile
+              ? () => sendMessage()
+              : handleVoiceButtonClick
+          }
+        >
+          {isSending ? (
+            <Loader2 size={20} className="animate-spin" />
+          ) : message.trim() || selectedFile ? (
+            <IoMdSend size={20} className="rtl:scale-x-[-1]" />
+          ) : isRecording ? (
+            <FaRegStopCircle size={20} />
+          ) : (
+            <FaMicrophone size={20} />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SendMessage;
diff --git a/components/PagesComponent/Contact/ContactUs.jsx b/components/PagesComponent/Contact/ContactUs.jsx
new file mode 100644
index 0000000..b295e1d
--- /dev/null
+++ b/components/PagesComponent/Contact/ContactUs.jsx
@@ -0,0 +1,380 @@
+"use client";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { settingsData } from "@/redux/reducer/settingSlice";
+import { t } from "@/utils";
+import { useState } from "react";
+import {
+  FaInstagram,
+  FaFacebook,
+  FaLinkedin,
+  FaPinterest,
+} from "react-icons/fa";
+import { GrLocation } from "react-icons/gr";
+import { RiMailSendLine } from "react-icons/ri";
+import { useSelector } from "react-redux";
+import { TbPhoneCall } from "react-icons/tb";
+import { FaSquareXTwitter } from "react-icons/fa6";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import { contactUsApi } from "@/utils/api";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Loader2 } from "lucide-react";
+import Layout from "@/components/Layout/Layout";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import parse from "html-react-parser";
+import Link from "next/link";
+
+const ContactUs = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const settings = useSelector(settingsData);
+  const [IsLoading, setIsLoading] = useState(false);
+  const contactUs = settings?.contact_us;
+
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    subject: "",
+    message: "",
+  });
+
+  const [errors, setErrors] = useState({
+    name: "",
+    email: "",
+    subject: "",
+    message: "",
+  });
+
+  const validateEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+    // Clear error when user starts typing
+    setErrors({
+      ...errors,
+      [name]: "",
+    });
+  };
+
+  const validateForm = () => {
+    let isValid = true;
+    const newErrors = {};
+
+    // Name validation
+    if (!formData.name.trim()) {
+      newErrors.name = t("nameRequired");
+      isValid = false;
+    }
+
+    // Email validation
+    if (!formData.email.trim()) {
+      newErrors.email = t("emailRequired");
+      isValid = false;
+    } else if (!validateEmail(formData.email)) {
+      newErrors.email = t("invalidEmail");
+      isValid = false;
+    }
+
+    // Subject validation
+    if (!formData.subject.trim()) {
+      newErrors.subject = t("subjectRequired");
+      isValid = false;
+    }
+
+    // Message validation
+    if (!formData.message.trim()) {
+      newErrors.message = t("messageRequired");
+      isValid = false;
+    }
+
+    setErrors(newErrors);
+    return isValid;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (validateForm()) {
+      try {
+        setIsLoading(true);
+        const res = await contactUsApi.contactUs(formData);
+        if (res?.data?.error === false) {
+          toast.success(t("thankForContacting"));
+          setFormData({
+            name: "",
+            email: "",
+            subject: "",
+            message: "",
+          });
+        } else {
+          toast.error(t("errorOccurred"));
+        }
+      } catch (error) {
+        toast.error(t("errorOccurred"));
+        console.log(error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  return (
+    <Layout>
+      <BreadCrumb title2={t("contactUs")} />
+      <div className="container">
+        <h1 className="sectionTitle mt-8">{t("contactUs")}</h1>
+        <div className="grid grid-cols-1 lg:grid-cols-3 mt-6 border rounded-lg">
+          {/* Contact Form */}
+          <div className="lg:col-span-2 p-4 sm:p-6 rounded-lg">
+            <h2 className="text-lg sm:text-xl font-medium mb-2">
+              {t("sendMessage")}
+            </h2>
+            <p className="text-sm sm:text-base text-muted-foreground mb-6">
+              {t("contactIntro")}
+            </p>
+
+            <form onSubmit={handleSubmit}>
+              <div className="grid grid-cols-1 gap-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div className="labelInputCont">
+                    <Label htmlFor="name" className="requiredInputLabel">
+                      {t("name")}
+                    </Label>
+                    <Input
+                      id="name"
+                      name="name"
+                      type="text"
+                      placeholder={t("enterName")}
+                      value={formData.name}
+                      onChange={handleChange}
+                      className={
+                        errors.name
+                          ? "border-red-500 focus-visible:ring-red-500"
+                          : ""
+                      }
+                    />
+                    {errors.name && (
+                      <span className="text-red-500 text-sm">
+                        {errors.name}
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="labelInputCont">
+                    <Label htmlFor="email" className="requiredInputLabel">
+                      {t("email")}
+                    </Label>
+                    <Input
+                      id="email"
+                      name="email"
+                      type="text"
+                      placeholder={t("enterEmail")}
+                      value={formData.email}
+                      onChange={handleChange}
+                      className={
+                        errors.email
+                          ? "border-red-500 focus-visible:ring-red-500"
+                          : ""
+                      }
+                    />
+                    {errors.email && (
+                      <span className="text-red-500 text-sm">
+                        {errors.email}
+                      </span>
+                    )}
+                  </div>
+                </div>
+
+                <div className="labelInputCont">
+                  <Label htmlFor="subject" className="requiredInputLabel">
+                    {t("subject")}
+                  </Label>
+                  <Input
+                    id="subject"
+                    name="subject"
+                    type="text"
+                    placeholder={t("enterSubject")}
+                    value={formData.subject}
+                    onChange={handleChange}
+                    className={
+                      errors.subject
+                        ? "border-red-500 focus-visible:ring-red-500"
+                        : ""
+                    }
+                  />
+                  {errors.subject && (
+                    <span className="text-red-500 text-sm">
+                      {errors.subject}
+                    </span>
+                  )}
+                </div>
+
+                <div className="labelInputCont">
+                  <Label htmlFor="message" className="requiredInputLabel">
+                    {t("message")}
+                  </Label>
+                  <Textarea
+                    id="message"
+                    name="message"
+                    placeholder={t("enterMessage")}
+                    value={formData.message}
+                    onChange={handleChange}
+                    className={
+                      errors.message
+                        ? "border-red-500 focus-visible:ring-red-500"
+                        : ""
+                    }
+                  />
+                  {errors.message && (
+                    <span className="text-red-500 text-sm">
+                      {errors.message}
+                    </span>
+                  )}
+                </div>
+
+                <div className="flex justify-end">
+                  <Button type="submit" disabled={IsLoading}>
+                    {IsLoading ? (
+                      <>
+                        <Loader2 className="animate-spin" />
+                        {t("submitting")}
+                      </>
+                    ) : (
+                      t("submit")
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </div>
+
+          {/* Contact Information */}
+          <div className="bg-[#1a1a1a] text-white p-4 sm:p-6 rounded-lg">
+            <h2 className="text-lg sm:text-xl font-medium mb-6">
+              {t("contactInfo")}
+            </h2>
+            <div className="space-y-6">
+              <div className="max-w-full prose lg:prose-lg prose-invert">
+                {parse(contactUs || "")}
+              </div>
+
+              {settings?.company_address && (
+                <div className="flex items-center gap-4">
+                  <div className="footerSocialLinks">
+                    <GrLocation size={24} />
+                  </div>
+                  <p className="text-sm text-white/65 hover:text-primary">
+                    {settings?.company_address}
+                  </p>
+                </div>
+              )}
+
+              {settings?.company_email && (
+                <div className="flex items-center gap-4">
+                  <div className="footerSocialLinks">
+                    <RiMailSendLine size={24} />
+                  </div>
+                  <Link
+                    href={`mailto:${settings?.company_email}`}
+                    className="text-sm text-white/65 hover:text-primary"
+                  >
+                    {settings?.company_email}
+                  </Link>
+                </div>
+              )}
+
+              {settings?.company_tel1 && settings?.company_tel2 && (
+                <div className="flex items-center gap-4">
+                  <div className="footerSocialLinks">
+                    <TbPhoneCall size={24} />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <Link
+                      href={`tel:${settings?.company_tel1}`}
+                      className="text-sm text-white/65 hover:text-primary"
+                    >
+                      {settings?.company_tel1}
+                    </Link>
+                    <Link
+                      href={`tel:${settings?.company_tel2}`}
+                      className="text-sm text-white/65 hover:text-primary"
+                    >
+                      {settings?.company_tel2}
+                    </Link>
+                  </div>
+                </div>
+              )}
+
+              <div>
+                <h3 className="text-lg sm:text-xl font-medium mb-6">
+                  {t("socialMedia")}
+                </h3>
+                <div className="flex flex-wrap gap-4">
+                  {settings?.facebook_link && (
+                    <Link
+                      href={settings?.facebook_link}
+                      className="footerSocialLinks"
+                    >
+                      <FaFacebook size={24} />
+                    </Link>
+                  )}
+                  {settings?.instagram_link && (
+                    <Link
+                      href={settings?.instagram_link}
+                      className="footerSocialLinks"
+                    >
+                      <FaInstagram size={22} />
+                    </Link>
+                  )}
+
+                  {settings?.x_link && (
+                    <Link
+                      href={settings?.x_link}
+                      className="footerSocialLinks"
+                    >
+                      <FaSquareXTwitter size={22} />
+                    </Link>
+                  )}
+                  {settings?.linkedin_link && (
+                    <Link
+                      href={settings?.linkedin_link}
+                      className="footerSocialLinks"
+                    >
+                      <FaLinkedin size={24} />
+                    </Link>
+                  )}
+                  {settings?.pinterest_link && (
+                    <Link
+                      href={settings?.pinterest_link}
+                      className="footerSocialLinks"
+                    >
+                      <FaPinterest size={24} />
+                    </Link>
+                  )}
+                </div>
+              </div>
+
+              {settings?.google_map_iframe_link && (
+                <iframe
+                  src={settings?.google_map_iframe_link}
+                  width="100%"
+                  height="200"
+                  className="aspect-[432/189] w-full rounded mt-6"
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default ContactUs;
diff --git a/components/PagesComponent/EditListing/AdsEditSuccessModal.jsx b/components/PagesComponent/EditListing/AdsEditSuccessModal.jsx
new file mode 100644
index 0000000..7fbc34d
--- /dev/null
+++ b/components/PagesComponent/EditListing/AdsEditSuccessModal.jsx
@@ -0,0 +1,53 @@
+import {
+  Dialog,
+  DialogContent,
+} from "@/components/ui/dialog";
+import trueGif from "../../../public/assets/true.gif";
+import CustomLink from "@/components/Common/CustomLink";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+
+const AdEditSuccessModal = ({
+  openSuccessModal,
+  setOpenSuccessModal,
+  createdAdSlug,
+}) => {
+  const closeSuccessModal = () => {
+    setOpenSuccessModal(false);
+  };
+
+  return (
+    <Dialog open={openSuccessModal} onOpenChange={closeSuccessModal}>
+      <DialogContent
+        className="[&>button]:hidden lgmax-w-[100px]"
+        onInteractOutside={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <div className="flex flex-col items-center justify-center gap-4">
+          <div className="flex flex-col justify-center items-center">
+            <CustomImage
+              src={trueGif}
+              alt="success"
+              height={176}
+              width={176}
+              className="h-44 w-44"
+            />
+            <h2 className="text-3xl font-semibold">{t("adEditedSuccess")}</h2>
+          </div>
+          <CustomLink
+            href={`/my-listing/${createdAdSlug}`}
+            className="py-3 px-6 bg-primary text-white rounded-md"
+          >
+            {t("viewAd")}
+          </CustomLink>
+          <CustomLink href="/" className="">
+            {t("backToHome")}
+          </CustomLink>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AdEditSuccessModal;
diff --git a/components/PagesComponent/EditListing/EditComponentFour.jsx b/components/PagesComponent/EditListing/EditComponentFour.jsx
new file mode 100644
index 0000000..0db81b1
--- /dev/null
+++ b/components/PagesComponent/EditListing/EditComponentFour.jsx
@@ -0,0 +1,177 @@
+import { useState } from "react";
+import { BiMapPin } from "react-icons/bi";
+import { FaLocationCrosshairs } from "react-icons/fa6";
+import { IoLocationOutline } from "react-icons/io5";
+import ManualAddress from "../AdsListing/ManualAddress";
+import { t } from "@/utils";
+import { getIsPaidApi } from "@/redux/reducer/settingSlice";
+import { useSelector } from "react-redux";
+import dynamic from "next/dynamic";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import LandingAdEditSearchAutocomplete from "@/components/Location/LandingAdEditSearchAutocomplete";
+import { getIsBrowserSupported } from "@/redux/reducer/locationSlice";
+import { Loader2 } from "lucide-react";
+import useGetLocation from "@/components/Layout/useGetLocation";
+
+const MapComponent = dynamic(() => import("@/components/Common/MapComponent"), {
+  ssr: false,
+  loading: () => <div className="w-full h-[400px] bg-gray-100 rounded-lg" />,
+});
+
+const EditComponentFour = ({
+  location,
+  setLocation,
+  handleFullSubmission,
+  isAdPlaced,
+  handleGoBack,
+}) => {
+  const isBrowserSupported = useSelector(getIsBrowserSupported);
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [showManualAddress, setShowManualAddress] = useState();
+  const [IsGettingCurrentLocation, setIsGettingCurrentLocation] =
+    useState(false);
+  const IsPaidApi = useSelector(getIsPaidApi);
+  const { fetchLocationData } = useGetLocation();
+
+  const getCurrentLocation = async () => {
+    if (navigator.geolocation) {
+      setIsGettingCurrentLocation(true);
+      navigator.geolocation.getCurrentPosition(
+        async (position) => {
+          try {
+            const { latitude, longitude } = position.coords;
+            const data = await fetchLocationData({
+              lat: latitude,
+              lng: longitude,
+            });
+            setLocation(data);
+          } catch (error) {
+            console.error("Error fetching location data:", error);
+            toast.error(t("errorOccurred"));
+          } finally {
+            setIsGettingCurrentLocation(false);
+          }
+        },
+        (error) => {
+          toast.error(t("locationNotGranted"));
+          setIsGettingCurrentLocation(false);
+        }
+      );
+    } else {
+      toast.error(t("geoLocationNotSupported"));
+    }
+  };
+
+  const getLocationWithMap = async (pos) => {
+    try {
+      const data = await fetchLocationData(pos);
+      setLocation(data);
+    } catch (error) {
+      console.error("Error fetching location data:", error);
+      toast.error(t("errorOccurred"));
+    }
+  };
+
+  return (
+    <>
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-8">
+          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-3">
+            <h5 className="text-xl font-medium">{t("addLocation")}</h5>
+            <div className="flex items-center gap-2 border rounded-md w-full md:w-96 min-h-[42px]">
+              <LandingAdEditSearchAutocomplete
+                saveOnSuggestionClick={false}
+                setSelectedLocation={setLocation}
+              />
+              {isBrowserSupported && (
+                <button
+                  onClick={getCurrentLocation}
+                  disabled={IsGettingCurrentLocation}
+                  className="bg-primary p-2 text-white gap-2 flex items-center rounded-md h-10"
+                >
+                  <span>
+                    {IsGettingCurrentLocation ? (
+                      <Loader2 className="size-3.5 animate-spin" />
+                    ) : (
+                      <FaLocationCrosshairs size={16} />
+                    )}
+                  </span>
+                  <span className="whitespace-nowrap hidden md:inline">
+                    {IsGettingCurrentLocation ? t("loading") : t("locateMe")}
+                  </span>
+                </button>
+              )}
+            </div>
+          </div>
+          <div className="flex gap-8 flex-col">
+            <MapComponent
+              location={location}
+              getLocationWithMap={getLocationWithMap}
+            />
+            <div className="flex items-center gap-3 bg-muted rounded-lg p-4  ">
+              <div className="p-5 rounded-md bg-white">
+                <BiMapPin className="text-primary" size={32} />
+              </div>
+              <span className="flex flex-col gap-1">
+                <h6 className="font-medium">{t("address")}</h6>
+                {location?.address_translated || location?.formattedAddress ? (
+                  <p>
+                    {location?.address_translated || location?.formattedAddress}
+                  </p>
+                ) : (
+                  t("addYourAddress")
+                )}
+              </span>
+            </div>
+          </div>
+
+          {!IsPaidApi && (
+            <>
+              <div className="relative flex items-center justify-center ">
+                <div className="absolute top-1/2 left-0 right-0 h-px bg-[#d3d3d3]"></div>
+                <div className="relative bg-muted text-black text-base font-medium rounded-full w-12 h-12 flex items-center justify-center uppercase">
+                  {t("or")}
+                </div>
+              </div>
+              <div className="flex flex-col gap-3 items-center justify-center ">
+                <p className="text-xl font-semibold">
+                  {t("whatLocAdYouSelling")}
+                </p>
+                <button
+                  className="p-2 flex items-center gap-2 border rounded-md font-medium"
+                  onClick={() => setShowManualAddress(true)}
+                >
+                  <IoLocationOutline size={20} />
+                  {t("addLocation")}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+        <div className="flex justify-end gap-3">
+          <button
+            className="bg-black text-white px-4 py-2 rounded-md text-xl font-light"
+            onClick={handleGoBack}
+          >
+            {t("back")}
+          </button>
+          <button
+            className="bg-primary text-white  px-4 py-2 rounded-md text-xl font-light0 disabled:bg-gray-500"
+            disabled={isAdPlaced}
+            onClick={handleFullSubmission}
+          >
+            {isAdPlaced ? t("posting") : t("postNow")}
+          </button>
+        </div>
+      </div>
+      <ManualAddress
+        key={showManualAddress}
+        showManualAddress={showManualAddress}
+        setShowManualAddress={setShowManualAddress}
+        setLocation={setLocation}
+      />
+    </>
+  );
+};
+
+export default EditComponentFour;
diff --git a/components/PagesComponent/EditListing/EditComponentOne.jsx b/components/PagesComponent/EditListing/EditComponentOne.jsx
new file mode 100644
index 0000000..1683281
--- /dev/null
+++ b/components/PagesComponent/EditListing/EditComponentOne.jsx
@@ -0,0 +1,289 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { getIsRtl } from "@/redux/reducer/languageSlice";
+import {
+  getCurrencyIsoCode,
+  getCurrencyPosition,
+  getCurrencySymbol,
+} from "@/redux/reducer/settingSlice";
+import { generateSlug, t } from "@/utils";
+import PhoneInput from "react-phone-input-2";
+import { useSelector } from "react-redux";
+const EditComponentOne = ({
+  setTranslations,
+  current,
+  langId,
+  defaultLangId,
+  handleDetailsSubmit,
+  is_job_category,
+  isPriceOptional,
+  currencies,
+}) => {
+  const currencyPosition = useSelector(getCurrencyPosition);
+  const currencySymbol = useSelector(getCurrencySymbol);
+  const currencyIsoCode = useSelector(getCurrencyIsoCode);
+  const isRTL = useSelector(getIsRtl);
+  const selectedCurrency = currencies?.find(
+    (curr) => curr?.id === current?.currency_id
+  );
+
+  // Use selected currency's symbol and position, or fallback to Redux settings
+  const displaySymbol = selectedCurrency?.symbol || currencySymbol;
+  const displayPosition = selectedCurrency?.position || currencyPosition;
+
+  const placeholderLabel =
+    displayPosition === "right" ? `00 ${displaySymbol}` : `${displaySymbol} 00`;
+
+  const handleField = (field) => (e) => {
+    const value = e.target.value;
+    setTranslations((prev) => {
+      const updatedLangData = {
+        ...prev[langId],
+        [field]: value,
+      };
+
+      // ✅ Only auto-generate slug if default language and field is title
+      if (field === "name" && langId === defaultLangId) {
+        updatedLangData.slug = generateSlug(value);
+      }
+
+      return {
+        ...prev,
+        [langId]: updatedLangData,
+      };
+    });
+  };
+
+  const handlePhoneChange = (value, data) => {
+    const dial = data?.dialCode || ""; // Dial code like "91", "1"
+    const iso2 = data?.countryCode || ""; // Region code like "in", "us", "ae"
+    setTranslations((prev) => {
+      const pureMobile = value.startsWith(dial)
+        ? value.slice(dial.length)
+        : value;
+      return {
+        ...prev,
+        [langId]: {
+          ...prev[langId],
+          contact: pureMobile,
+          country_code: dial,
+          region_code: iso2,
+        },
+      };
+    });
+  };
+
+  const handleCurrencyChange = (currencyId) => {
+    setTranslations((prev) => ({
+      ...prev,
+      [langId]: {
+        ...prev[langId],
+        currency_id: Number(currencyId),
+      },
+    }));
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <Label
+          htmlFor="title"
+          className={langId === defaultLangId ? "requiredInputLabel" : ""}
+        >
+          {t("title")}
+        </Label>
+        <Input
+          type="text"
+          name="title"
+          id="title"
+          placeholder={t("enterTitle")}
+          value={current.name || ""}
+          onChange={handleField("name")}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label
+          htmlFor="description"
+          className={langId === defaultLangId ? "requiredInputLabel" : ""}
+        >
+          {t("description")}
+        </Label>
+        <Textarea
+          name="description"
+          id="description"
+          placeholder={t("enterDescription")}
+          value={current.description || ""}
+          onChange={handleField("description")}
+        />
+      </div>
+
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="currency">{t("currency")}</Label>
+        {
+          currencies?.length > 0 ?
+            <Select
+              value={current?.currency_id?.toString()}
+              onValueChange={handleCurrencyChange}
+              dir={isRTL ? "rtl" : "ltr"}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder={t("currency")} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {/* <SelectLabel>Currencies</SelectLabel> */}
+                  {currencies?.map((currency) => (
+                    <SelectItem
+                      key={currency.id}
+                      value={currency.id.toString()}
+                      dir={isRTL ? "rtl" : "ltr"}
+                    >
+                      {currency.iso_code} ({currency.symbol})
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            :
+            <Select
+              value={currencyIsoCode} // ✅ same default value you already have
+              disabled
+              dir={isRTL ? "rtl" : "ltr"}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+
+              {/* Required for RTL */}
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value={currencyIsoCode}>
+                    {currencyIsoCode} ({currencySymbol})
+                  </SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+        }
+      </div>
+      {langId === defaultLangId && (
+        <>
+          {is_job_category ? (
+            <>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="min_salary">{t("salaryMin")}</Label>
+                <Input
+                  type="number"
+                  name="min_salary"
+                  id="min_salary"
+                  placeholder={placeholderLabel}
+                  value={current.min_salary || ""}
+                  onChange={handleField("min_salary")}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="max_salary">{t("salaryMax")}</Label>
+                <Input
+                  type="number"
+                  name="max_salary"
+                  id="max_salary"
+                  placeholder={placeholderLabel}
+                  value={current.max_salary || ""}
+                  onChange={handleField("max_salary")}
+                  min={0}
+                />
+              </div>
+            </>
+          ) : (
+            <div className="flex flex-col gap-2">
+              <Label
+                htmlFor="price"
+                className={
+                  !isPriceOptional && langId === defaultLangId
+                    ? "requiredInputLabel"
+                    : ""
+                }
+              >
+                {t("price")}
+              </Label>
+              <Input
+                type="number"
+                name="price"
+                id="price"
+                placeholder={placeholderLabel}
+                value={current.price || ""}
+                onChange={handleField("price")}
+                min={0}
+              />
+            </div>
+          )}
+          <div className="flex flex-col gap-2">
+            <Label
+              htmlFor="phonenumber"
+            >
+              {t("phoneNumber")}
+            </Label>
+            <PhoneInput
+              country={process.env.NEXT_PUBLIC_DEFAULT_COUNTRY}
+              value={`${current.country_code}${current.contact}`}
+              onChange={(phone, data) => handlePhoneChange(phone, data)}
+              inputProps={{
+                name: "phonenumber",
+                id: "phonenumber",
+              }}
+              enableLongNumbers
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="videoLink">{t("videoLink")}</Label>
+            <Input
+              type="text"
+              name="videoLink"
+              id="videoLink"
+              placeholder={t("enterAdditionalLinks")}
+              value={current.video_link || ""}
+              onChange={handleField("video_link")}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="slug">
+              {t("slug")}{" "}
+              <span className="text-sm text-muted-foreground">
+                ({t("allowedSlug")})
+              </span>
+            </Label>
+            <Input
+              type="text"
+              name="slug"
+              id="slug"
+              placeholder={t("enterSlug")}
+              onChange={handleField("slug")}
+              value={current.slug || ""}
+            />
+          </div>
+        </>
+      )}
+
+      <div className="flex justify-end">
+        <button
+          className="bg-primary text-white  px-4 py-2 rounded-md text-xl"
+          onClick={handleDetailsSubmit}
+        >
+          {t("next")}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default EditComponentOne;
diff --git a/components/PagesComponent/EditListing/EditComponentThree.jsx b/components/PagesComponent/EditListing/EditComponentThree.jsx
new file mode 100644
index 0000000..b44d380
--- /dev/null
+++ b/components/PagesComponent/EditListing/EditComponentThree.jsx
@@ -0,0 +1,298 @@
+import { useCallback, useMemo } from "react";
+import { IoInformationCircleOutline } from "react-icons/io5";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useDropzone } from "react-dropzone";
+import { HiOutlineUpload } from "react-icons/hi";
+import { MdClose } from "react-icons/md";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+
+const EditComponentThree = ({
+  uploadedImages,
+  setUploadedImages,
+  OtherImages,
+  setOtherImages,
+  handleImageSubmit,
+  handleGoBack,
+  setDeleteImagesId,
+}) => {
+
+
+  const onDrop = useCallback((acceptedFiles) => {
+    if (acceptedFiles.length == 0) {
+      toast.error(t("wrongFile"));
+    } else {
+      setUploadedImages(acceptedFiles);
+    }
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      "image/jpeg": [".jpeg", ".jpg"],
+      "image/png": [".png"],
+    },
+    multiple: false,
+  });
+
+  const files = useMemo(() => {
+    if (typeof uploadedImages === "string") {
+      return (
+        <div className="relative">
+          <CustomImage
+            width={591}
+            height={350}
+            className="rounded-2xl object-cover aspect-[591/350]"
+            src={uploadedImages}
+            alt="Uploaded Image"
+          />
+          <div className="absolute top-2 left-2 flex gap-2 items-center">
+            <button
+              className="bg-white p-1 rounded-full"
+              onClick={() => removeImage(0)}
+            >
+              <MdClose
+                size={14}
+                color="black"
+                className="flex items-center justify-center rounded-full"
+              />
+            </button>
+            <div className="text-white flex flex-col">
+              <span>{t("uploadedImage")}</span>
+            </div>
+          </div>
+        </div>
+      );
+    } else {
+      return (
+        uploadedImages?.map((file, index) => (
+          <div key={index} className="relative">
+            <CustomImage
+              width={591}
+              height={350}
+              className="rounded-2xl object-cover aspect-[591/350]"
+              src={URL.createObjectURL(file)}
+              alt={index}
+            />
+            <div className="absolute top-2 left-2 flex gap-2 items-center">
+              <button
+                className="bg-white p-1 rounded-full"
+                onClick={() => removeImage(index)}
+              >
+                <MdClose
+                  size={14}
+                  color="black"
+                  className="flex items-center justify-center rounded-full"
+                />
+              </button>
+              <div className="text-white text-xs flex flex-col">
+                <span>{file.name}</span>
+                <span>{Math.round(file.size / 1024)} KB</span>
+              </div>
+            </div>
+          </div>
+        )) || []
+      );
+    }
+  }, [uploadedImages]);
+
+  const removeImage = (index) => {
+    if (typeof uploadedImages === "string") {
+      setUploadedImages([]);
+    } else {
+      setUploadedImages((prevImages) =>
+        prevImages?.filter((_, i) => i !== index)
+      );
+    }
+  };
+
+  const onOtherDrop = useCallback(
+    (acceptedFiles) => {
+      const currentFilesCount = OtherImages.length; // Number of files already uploaded
+      const remainingSlots = 5 - currentFilesCount; // How many more files can be uploaded
+
+      if (remainingSlots === 0) {
+        // Show error if the limit has been reached
+        toast.error(t("imageLimitExceeded"));
+        return;
+      }
+
+      if (acceptedFiles.length > remainingSlots) {
+        // Show error if the number of new files exceeds the remaining slots
+        toast.error(
+          t("youCanUpload") + " " + remainingSlots + " " + t("moreImages")
+        );
+        return;
+      }
+
+      // Add the new files to the state
+      setOtherImages((prevImages) => [...prevImages, ...acceptedFiles]);
+    },
+    [OtherImages]
+  );
+
+  const {
+    getRootProps: getRootOtheProps,
+    getInputProps: getInputOtherProps,
+    isDragActive: isDragOtherActive,
+  } = useDropzone({
+    onDrop: onOtherDrop,
+    accept: {
+      "image/jpeg": [".jpeg", ".jpg"],
+      "image/png": [".png"],
+    },
+    multiple: true,
+  });
+
+  const removeOtherImage = (index, file) => {
+    setOtherImages((prevImages) => prevImages.filter((_, i) => i !== index));
+    setDeleteImagesId((prevIds) => {
+      const newId = file?.id;
+      if (prevIds) {
+        return `${prevIds},${newId}`;
+      } else {
+        return `${newId}`;
+      }
+    });
+  };
+
+  const filesOther = useMemo(
+    () =>
+      OtherImages &&
+      OtherImages?.map((file, index) => (
+        <div key={file.id || `${file?.name}-${file?.size}`} className="relative">
+          <CustomImage
+            width={591}
+            height={350}
+            className="rounded-2xl object-cover aspect-[591/350]"
+            src={file.image ? file.image : URL.createObjectURL(file)}
+            alt={index}
+          />
+          <div className="absolute top-2 left-2 flex gap-2 items-center">
+            <button
+              className="bg-white p-1 rounded-full"
+              onClick={() => removeOtherImage(index, file)}
+            >
+              <MdClose
+                size={14}
+                color="black"
+                className="flex items-center justify-center rounded-full"
+              />
+            </button>
+            {
+              (file?.name || file?.size) &&
+              <div className="text-white text-xs flex flex-col">
+                <span>{file.name}</span>
+                <span>{Math.round(file.size / 1024)} KB</span>
+              </div>
+            }
+          </div>
+        </div>
+      )),
+    [OtherImages]
+  );
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="grid grid-col-1 md:grid-cols-2 gap-4">
+        <div className="flex flex-col gap-2">
+          <span className="requiredInputLabel text-sm">{t("mainPicture")}</span>
+          <div className="border-2 border-dashed rounded-lg p-2">
+            <div
+              {...getRootProps()}
+              className="flex flex-col min-h-[175px] items-center justify-center cursor-pointer"
+              style={{ display: uploadedImages.length > 0 ? "none" : "" }}
+            >
+              <input {...getInputProps()} />
+              {isDragActive ? (
+                <span className="text-muted-foreground font-medium">
+                  {t("dropFiles")}
+                </span>
+              ) : (
+                <div className="flex flex-col items-center gap-2 text-center">
+                  <span className="text-muted-foreground">
+                    {t("dragFiles")}
+                  </span>
+                  <span className="text-muted-foreground">{t("or")}</span>
+                  <div className="flex items-center gap-2 text-primary">
+                    <HiOutlineUpload size={24} />
+                    <span className="font-medium">{t("upload")}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+            <div>{files}</div>
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <span className="flex items-center gap-1 font-semibold text-sm">
+            {t("otherPicture")}
+
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex">
+                    <IoInformationCircleOutline size={22} />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="top"
+                  align="center"
+                  className="font-normal"
+                >
+                  <p>{t("maxOtherImages")}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </span>
+          <div className="border-2 border-dashed rounded-lg p-2">
+            <div
+              {...getRootOtheProps()}
+              className="flex flex-col items-center justify-center min-h-[175px] cursor-pointer"
+              style={{ display: OtherImages.length >= 5 ? "none" : "" }}
+            >
+              <input {...getInputOtherProps()} />
+              {isDragOtherActive ? (
+                <span className="text-primary font-medium">
+                  {t("dropFiles")}
+                </span>
+              ) : (
+                <div className="flex flex-col gap-2 items-center text-center">
+                  <span className="text-muted-foreground">
+                    {t("dragFiles")}
+                  </span>
+                  <span className="text-muted-foreground">{t("or")}</span>
+                  <div className="flex items-center gap-2 text-primary">
+                    <HiOutlineUpload size={24} />
+                    <span className="font-medium">{t("upload")}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="flex flex-col gap-3">{filesOther}</div>
+          </div>
+        </div>
+      </div>
+      <div className="flex justify-end gap-3">
+        <button
+          className="bg-black text-white px-4 py-2 rounded-md text-xl font-light"
+          onClick={handleGoBack}
+        >
+          {t("back")}
+        </button>
+        <button
+          className="bg-primary text-white  px-4 py-2 rounded-md text-xl font-light"
+          onClick={handleImageSubmit}
+        >
+          {t("next")}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default EditComponentThree;
diff --git a/components/PagesComponent/EditListing/EditComponentTwo.jsx b/components/PagesComponent/EditListing/EditComponentTwo.jsx
new file mode 100644
index 0000000..21c19a6
--- /dev/null
+++ b/components/PagesComponent/EditListing/EditComponentTwo.jsx
@@ -0,0 +1,322 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { toast } from "sonner";
+import { HiOutlineUpload } from "react-icons/hi";
+import { MdOutlineAttachFile } from "react-icons/md";
+import CustomLink from "@/components/Common/CustomLink";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { handleKeyDown, inpNum, t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+
+const EditComponentTwo = ({
+  customFields,
+  setExtraDetails,
+  handleGoBack,
+  filePreviews,
+  setFilePreviews,
+  submitExtraDetails,
+  currentExtraDetails,
+  langId,
+  defaultLangId,
+}) => {
+  const write = (fieldId, value) =>
+    setExtraDetails((prev) => ({
+      ...prev,
+      [langId]: {
+        ...prev[langId],
+        [fieldId]: value,
+      },
+    }));
+
+  const handleFileChange = (id, file) => {
+    if (file) {
+      const allowedExtensions = /\.(jpg|jpeg|svg|png|pdf)$/i;
+      if (!allowedExtensions.test(file.name)) {
+        toast.error(t("notAllowedFile"));
+        return;
+      }
+      const fileUrl = URL.createObjectURL(file);
+      setFilePreviews((prevPreviews) => ({
+        ...prevPreviews,
+        [id]: {
+          url: fileUrl,
+          isPdf: /\.pdf$/i.test(file.name),
+        },
+      }));
+      write(id, file);
+    }
+  };
+
+  const handleCheckboxChange = (id, value, checked) => {
+    const list = currentExtraDetails[id] || [];
+    const next = checked
+      ? list.includes(value)
+        ? list
+        : [...list, value]
+      : list.filter((v) => v !== value);
+    write(id, next);
+  };
+
+  const handleChange = (id, value) => write(id, value ?? "");
+
+  const renderCustomFields = (field) => {
+    let {
+      id,
+      translated_name,
+      name,
+      type,
+      translated_value,
+      values,
+      min_length,
+      max_length,
+    } = field;
+
+    const inputProps = {
+      id,
+      name: id,
+      onChange: (e) => handleChange(id, e.target.value),
+      value: currentExtraDetails[id] || "",
+      ...(type === "number"
+        ? { min: min_length, max: max_length }
+        : { minLength: min_length, maxLength: max_length }),
+    };
+
+    switch (type) {
+      case "number":
+        return (
+          <div className="flex flex-col">
+            <Input
+              type={type}
+              inputMode="numeric"
+              placeholder={`${t("enter")} ${translated_name || name}`}
+              {...inputProps}
+              onKeyDown={(e) => handleKeyDown(e, max_length)}
+              onKeyPress={(e) => inpNum(e)}
+            />
+            {max_length && (
+              <span className="self-end text-sm text-muted-foreground">
+                {`${currentExtraDetails[id]?.length ?? 0}/${max_length}`}
+              </span>
+            )}
+          </div>
+        );
+      case "textbox":
+        return (
+          <div className=" flex flex-col">
+            <Textarea
+              placeholder={`${t("enter")} ${translated_name || name}`}
+              {...inputProps}
+            />
+            {max_length && (
+              <span className="self-end text-sm text-muted-foreground">
+                {`${currentExtraDetails[id]?.length ?? 0}/${max_length}`}
+              </span>
+            )}
+          </div>
+        );
+      case "dropdown":
+        return (
+          <div className="w-full">
+            <Select
+              id={id}
+              name={id}
+              value={currentExtraDetails[id] || ""}
+              onValueChange={(value) => handleChange(id, value)}
+            >
+              <SelectTrigger className="outline-none focus:outline-none">
+                <SelectValue
+                  className="font-medium"
+                  placeholder={`${t("select")} ${translated_name || name}`}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel value="">
+                    {t("select")} {translated_name || name}
+                  </SelectLabel>
+                  {values?.map((option, index) => (
+                    <SelectItem
+                      id={option}
+                      className="font-medium"
+                      key={option}
+                      value={option}
+                    >
+                      {translated_value[index] || option}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+        );
+
+      case "checkbox":
+        return (
+          <div className="flex w-full flex-wrap gap-2">
+            {values?.map((value, index) => {
+              const uniqueId = `${id}-${value}-${index}`;
+              return (
+                <div key={uniqueId} className="flex gap-1 items-center">
+                  <Checkbox
+                    id={uniqueId}
+                    value={value}
+                    onCheckedChange={(checked) =>
+                      handleCheckboxChange(id, value, checked)
+                    }
+                    checked={currentExtraDetails[id]?.includes(value)}
+                  />
+                  <label
+                    htmlFor={uniqueId}
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  >
+                    {translated_value[index] || value}
+                  </label>
+                </div>
+              );
+            })}
+          </div>
+        );
+      case "radio":
+        return (
+          <RadioGroup
+            value={currentExtraDetails[id] || ""}
+            onValueChange={(value) => handleChange(id, value)}
+            className="flex gap-2 flex-wrap"
+          >
+            {values?.map((option, index) => {
+              const uniqueId = `${id}-${option}-${index}`;
+              return (
+                <div
+                  key={uniqueId}
+                  className="flex items-center gap-2 flex-wrap"
+                >
+                  <RadioGroupItem
+                    value={option}
+                    id={uniqueId}
+                    className="sr-only peer "
+                  />
+                  <label
+                    htmlFor={uniqueId}
+                    className={`${currentExtraDetails[id] === option
+                      ? "bg-primary text-white"
+                      : ""
+                      } border rounded-md px-4 py-2 cursor-pointer transition-colors`}
+                  >
+                    {translated_value[index] || option}
+                  </label>
+                </div>
+              );
+            })}
+          </RadioGroup>
+        );
+
+      case "fileinput":
+        const fileUrl = filePreviews[id]?.url;
+        return (
+          <>
+            <label htmlFor={id} className="flex gap-2 items-center">
+              <div className="cursor-pointer border px-2.5 py-1 rounded">
+                <HiOutlineUpload size={24} fontWeight="400" />
+              </div>
+              {filePreviews[id] && (
+                <div className="flex items-center gap-1 text-sm flex-nowrap break-words">
+                  {filePreviews[id]?.isPdf ? (
+                    <>
+                      <MdOutlineAttachFile />
+                      <CustomLink
+                        href={fileUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {t("viewPdf")}
+                      </CustomLink>
+                    </>
+                  ) : (
+                    <CustomImage
+                      key={fileUrl}
+                      src={fileUrl}
+                      alt="Preview"
+                      className="h-9 w-9"
+                      height={36}
+                      width={36}
+                    />
+                  )}
+                </div>
+              )}
+            </label>
+            <input
+              type="file"
+              id={id}
+              name={name}
+              className="hidden"
+              onChange={(e) => handleFileChange(id, e.target.files[0])}
+              accept=".jpg,.jpeg,.png,.svg,.pdf"
+            />
+            <span className="text-sm text-muted-foreground">
+              {t("allowedFileType")}
+            </span>
+          </>
+        );
+      default:
+        break;
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {customFields?.map((field) => {
+          if (langId !== defaultLangId && field.type !== "textbox") return null;
+          return (
+            <div className="flex flex-col w-full gap-2" key={field?.id}>
+              <div className="flex gap-2 items-center">
+                <CustomImage
+                  src={field?.image}
+                  alt={field?.name}
+                  height={28}
+                  width={28}
+                  className="h-7 w-7 rounded-sm"
+                />
+                <Label
+                  className={`${field?.required === 1 && defaultLangId === langId
+                    ? "requiredInputLabel"
+                    : ""
+                    }`}
+                >
+                  {field?.translated_name || field?.name}
+                </Label>
+              </div>
+              {renderCustomFields(field)}
+            </div>
+          );
+        })}
+      </div>
+      <div className="flex justify-end gap-3">
+        <button
+          className="bg-black text-white px-4 py-2 rounded-md text-xl font-light"
+          onClick={handleGoBack}
+        >
+          {t("back")}
+        </button>
+        <button
+          className="bg-primary text-white  px-4 py-2 rounded-md text-xl font-light"
+          onClick={submitExtraDetails}
+        >
+          {t("next")}
+        </button>
+      </div>
+    </div>
+  );
+};
+export default EditComponentTwo;
diff --git a/components/PagesComponent/EditListing/EditListing.jsx b/components/PagesComponent/EditListing/EditListing.jsx
new file mode 100644
index 0000000..a4a34bf
--- /dev/null
+++ b/components/PagesComponent/EditListing/EditListing.jsx
@@ -0,0 +1,538 @@
+"use client";
+import { useEffect, useState } from "react";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import {
+  editItemApi,
+  getCurrenciesApi,
+  getCustomFieldsApi,
+  getMyItemsApi,
+  getParentCategoriesApi,
+} from "@/utils/api";
+import {
+  filterNonDefaultTranslations,
+  getMainDetailsTranslations,
+  isValidURL,
+  prefillExtraDetails,
+  prepareCustomFieldFiles,
+  prepareCustomFieldTranslations,
+  t,
+  validateExtraDetails,
+} from "@/utils";
+import EditComponentOne from "./EditComponentOne";
+import EditComponentTwo from "./EditComponentTwo";
+import EditComponentThree from "./EditComponentThree";
+import EditComponentFour from "./EditComponentFour";
+import { toast } from "sonner";
+import Layout from "@/components/Layout/Layout";
+import Checkauth from "@/HOC/Checkauth";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import { useSelector } from "react-redux";
+import AdSuccessModal from "../AdsListing/AdSuccessModal";
+import {
+  getDefaultLanguageCode,
+  getLanguages,
+} from "@/redux/reducer/settingSlice";
+import AdLanguageSelector from "../AdsListing/AdLanguageSelector";
+import PageLoader from "@/components/Common/PageLoader";
+import { isValidPhoneNumber } from "libphonenumber-js/max";
+
+const EditListing = ({ id }) => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [step, setStep] = useState(1);
+  const [CreatedAdSlug, setCreatedAdSlug] = useState("");
+  const [openSuccessModal, setOpenSuccessModal] = useState(false);
+  const [selectedCategoryPath, setSelectedCategoryPath] = useState([]);
+  const [customFields, setCustomFields] = useState([]);
+  const [uploadedImages, setUploadedImages] = useState([]);
+  const [OtherImages, setOtherImages] = useState([]);
+  const [Location, setLocation] = useState({});
+  const [currencies, setCurrencies] = useState([]);
+  const [filePreviews, setFilePreviews] = useState({});
+  const [deleteImagesId, setDeleteImagesId] = useState("");
+  const [isAdPlaced, setIsAdPlaced] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const languages = useSelector(getLanguages);
+  const defaultLanguageCode = useSelector(getDefaultLanguageCode);
+  const defaultLangId = languages?.find(
+    (lang) => lang.code === defaultLanguageCode
+  )?.id;
+
+  const [extraDetails, setExtraDetails] = useState({
+    [defaultLangId]: {},
+  });
+  const [langId, setLangId] = useState(defaultLangId);
+
+  const [translations, setTranslations] = useState({
+    [defaultLangId]: {},
+  });
+  const hasTextbox = customFields.some((field) => field.type === "textbox");
+
+  const defaultDetails = translations[defaultLangId] || {};
+  const currentDetails = translations[langId] || {};
+  const currentExtraDetails = extraDetails[langId] || {};
+
+  const is_job_category =
+    Number(
+      selectedCategoryPath[selectedCategoryPath.length - 1]?.is_job_category
+    ) === 1;
+  const isPriceOptional =
+    Number(
+      selectedCategoryPath[selectedCategoryPath.length - 1]?.price_optional
+    ) === 1;
+
+  useEffect(() => {
+    getSingleListingData();
+  }, [CurrentLanguage.id]);
+
+  const fetchCategoryPath = async (childCategoryId) => {
+    try {
+      const categoryResponse =
+        await getParentCategoriesApi.getPaymentCategories({
+          child_category_id: childCategoryId,
+        });
+      setSelectedCategoryPath(categoryResponse?.data?.data);
+    } catch (error) {
+      console.log("Error fetching category path:", error);
+    }
+  };
+
+  const getCustomFields = async (categoryIds, extraFieldValue) => {
+    try {
+      const customFieldsRes = await getCustomFieldsApi.getCustomFields({
+        category_ids: categoryIds,
+      });
+      const data = customFieldsRes?.data?.data;
+      setCustomFields(data);
+      const tempExtraDetails = prefillExtraDetails({
+        data,
+        languages,
+        defaultLangId,
+        extraFieldValue,
+        setFilePreviews,
+      });
+      setExtraDetails(tempExtraDetails);
+      setLangId(defaultLangId);
+    } catch (error) {
+      console.log("Error fetching custom fields:", error);
+    }
+  };
+
+  const getCurrencies = async () => {
+    try {
+      const res = await getCurrenciesApi.getCurrencies();
+      const currenciesData = res?.data?.data || [];
+      setCurrencies(currenciesData);
+      return currenciesData; // Return the currencies data
+    } catch (error) {
+      console.log("error", error);
+      return [];
+    }
+  };
+
+  const getSingleListingData = async () => {
+    try {
+      setIsLoading(true);
+      const res = await getMyItemsApi.getMyItems({ id: Number(id) });
+      const listingData = res?.data?.data?.data?.[0];
+
+      if (!listingData) {
+        throw new Error("Listing not found");
+      }
+      // Get currencies data directly
+      const [_, __, currenciesData] = await Promise.all([
+        getCustomFields(
+          listingData.all_category_ids,
+          listingData?.all_translated_custom_fields
+        ),
+        fetchCategoryPath(listingData?.category_id),
+        getCurrencies(),
+      ]);
+
+      setUploadedImages(listingData?.image);
+      setOtherImages(listingData?.gallery_images);
+
+      const mainDetailsTranslation = getMainDetailsTranslations(
+        listingData,
+        languages,
+        defaultLangId,
+        currenciesData
+      );
+      setTranslations(mainDetailsTranslation);
+      setLocation({
+        country: listingData?.country,
+        state: listingData?.state,
+        city: listingData?.city,
+        formattedAddress: listingData?.translated_address,
+        lat: listingData?.latitude,
+        long: listingData?.longitude,
+        area_id: listingData?.area_id ? listingData?.area_id : null,
+      });
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDetailsSubmit = () => {
+    if (customFields?.length === 0) {
+      setStep(3);
+      return;
+    }
+    setStep(2);
+  };
+
+  const handleImageSubmit = () => {
+    if (uploadedImages.length === 0) {
+      toast.error(t("uploadMainPicture"));
+      return;
+    }
+    setStep(4);
+  };
+
+  const handleGoBack = () => {
+    if (step == 3 && customFields?.length == 0) {
+      setStep((prev) => prev - 2);
+    } else {
+      setStep((prev) => prev - 1);
+    }
+  };
+
+  const handleTabClick = (tab) => {
+    if (tab === 1) {
+      setStep(1);
+    } else if (tab === 2) {
+      setStep(2);
+    } else if (tab === 3) {
+      setStep(3);
+    } else if (tab === 4) {
+      setStep(4);
+    }
+  };
+
+  const submitExtraDetails = () => {
+    setStep(3);
+  };
+
+  const SLUG_RE = /^[a-z0-9-]+$/i;
+  const isEmpty = (x) => !x || !x.toString().trim();
+  const isNegative = (n) => Number(n) < 0;
+
+  const handleFullSubmission = () => {
+    const {
+      name,
+      description,
+      price,
+      slug,
+      contact,
+      video_link,
+      min_salary,
+      max_salary,
+      country_code,
+    } = defaultDetails;
+
+    if (!name.trim() || !description.trim()) {
+      toast.error(t("completeDetails"));
+      setStep(1);
+      return;
+    }
+
+    // ✅ Validate phone number ONLY if user entered one as it is optional
+    if (Boolean(contact) && !isValidPhoneNumber(`+${country_code}${contact}`)) {
+      toast.error(t("invalidPhoneNumber"));
+      return setStep(1);
+    }
+
+    if (is_job_category) {
+      const min = min_salary ? Number(min_salary) : null;
+      const max = max_salary ? Number(max_salary) : null;
+
+      // Salary fields are optional, but validate if provided
+      if (min !== null && min < 0) {
+        toast.error(t("enterValidSalaryMin"));
+        setStep(1);
+        return;
+      }
+
+      if (max !== null && max < 0) {
+        toast.error(t("enterValidSalaryMax"));
+        setStep(1);
+        return;
+      }
+      if (min !== null && max !== null) {
+        if (min === max) {
+          toast.error(t("salaryMinCannotBeEqualMax"));
+          return setStep(1);
+        }
+        if (min > max) {
+          toast.error(t("salaryMinCannotBeGreaterThanMax"));
+          return setStep(1);
+        }
+      }
+    } else {
+      if (!isPriceOptional && isEmpty(price)) {
+        toast.error(t("completeDetails"));
+        return setStep(1);
+      }
+
+      if (!isEmpty(price) && isNegative(price)) {
+        toast.error(t("enterValidPrice"));
+        return setStep(1);
+      }
+    }
+
+    if (!isEmpty(slug) && !SLUG_RE.test(slug.trim())) {
+      toast.error(t("addValidSlug"));
+      return setStep(1);
+    }
+
+    if (!isEmpty(video_link) && !isValidURL(video_link)) {
+      toast.error(t("enterValidUrl"));
+      setStep(1);
+      return;
+    }
+
+    if (
+      customFields.length !== 0 &&
+      !validateExtraDetails({
+        languages,
+        defaultLangId,
+        extraDetails,
+        customFields,
+        filePreviews,
+      })
+    ) {
+      setStep(2);
+      return;
+    }
+
+    if (uploadedImages.length === 0) {
+      toast.error(t("uploadMainPicture"));
+      setStep(3);
+      return;
+    }
+
+    if (
+      !Location?.country ||
+      !Location?.state ||
+      !Location?.city ||
+      !Location?.formattedAddress
+    ) {
+      toast.error(t("pleaseSelectCity"));
+      return;
+    }
+    editAd();
+  };
+
+  const editAd = async () => {
+    const nonDefaultTranslations = filterNonDefaultTranslations(
+      translations,
+      defaultLangId
+    );
+    const customFieldTranslations =
+      prepareCustomFieldTranslations(extraDetails);
+
+    const customFieldFiles = prepareCustomFieldFiles(
+      extraDetails,
+      defaultLangId
+    );
+
+    const allData = {
+      id: id,
+      name: defaultDetails.name,
+      slug: defaultDetails.slug.trim(),
+      description: defaultDetails?.description,
+      price: defaultDetails.price,
+      contact: defaultDetails.contact,
+      region_code: defaultDetails?.region_code?.toUpperCase() || "",
+      video_link: defaultDetails?.video_link,
+      // custom_fields: transformedCustomFields,
+      image: typeof uploadedImages == "string" ? null : uploadedImages[0],
+      gallery_images: OtherImages,
+      address: Location?.formattedAddress,
+      latitude: Location?.lat,
+      longitude: Location?.long,
+      custom_field_files: customFieldFiles,
+      country: Location?.country,
+      state: Location?.state,
+      city: Location?.city,
+      ...(Location?.area_id ? { area_id: Number(Location?.area_id) } : {}),
+      delete_item_image_id: deleteImagesId,
+      ...(Object.keys(nonDefaultTranslations).length > 0 && {
+        translations: nonDefaultTranslations,
+      }),
+      ...(defaultDetails?.currency_id && {
+        currency_id: defaultDetails?.currency_id,
+      }),
+      ...(Object.keys(customFieldTranslations).length > 0 && {
+        custom_field_translations: customFieldTranslations,
+      }),
+      // expiry_date: '2025-10-13'
+    };
+
+    if (is_job_category) {
+      // Only add salary fields if they're provided
+      allData.min_salary = defaultDetails.min_salary;
+      allData.max_salary = defaultDetails.max_salary;
+    } else {
+      allData.price = defaultDetails.price;
+    }
+
+    try {
+      setIsAdPlaced(true);
+      const res = await editItemApi.editItem(allData);
+      if (res?.data?.error === false) {
+        setOpenSuccessModal(true);
+        setCreatedAdSlug(res?.data?.data[0]?.slug);
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsAdPlaced(false);
+    }
+  };
+
+  return (
+    <Layout>
+      {isLoading ? (
+        <PageLoader />
+      ) : (
+        <>
+          <BreadCrumb title2={t("editListing")} />
+          <div className="container">
+            <div className="flex flex-col gap-6 mt-8">
+              <h1 className="text-2xl font-medium">{t("editListing")}</h1>
+              <div className="flex flex-col gap-6 border rounded-md p-4">
+                <div className="flex items-center gap-3 justify-between bg-muted px-4 py-2 rounded-md flex-wrap">
+                  <div className="flex items-center gap-3 flex-wrap">
+                    <div
+                      className={`transition-all duration-300 p-2 cursor-pointer ${step === 1 ? "bg-primary text-white" : ""
+                        } rounded-md `}
+                      onClick={() => handleTabClick(1)}
+                    >
+                      {t("details")}
+                    </div>
+                    {customFields?.length > 0 && (
+                      <div
+                        className={`transition-all duration-300 p-2 cursor-pointer ${step === 2 ? "bg-primary text-white" : ""
+                          } rounded-md`}
+                        onClick={() => handleTabClick(2)}
+                      >
+                        {t("extraDetails")}
+                      </div>
+                    )}
+                    <div
+                      className={`transition-all duration-300 p-2 cursor-pointer ${step === 3 ? "bg-primary text-white" : ""
+                        } rounded-md  `}
+                      onClick={() => handleTabClick(3)}
+                    >
+                      {t("images")}
+                    </div>
+                    <div
+                      className={`transition-all duration-300 p-2 cursor-pointer ${step === 4 ? "bg-primary text-white" : ""
+                        } rounded-md `}
+                      onClick={() => handleTabClick(4)}
+                    >
+                      {t("location")}
+                    </div>
+                  </div>
+                  {(step === 1 || (step === 2 && hasTextbox)) && (
+                    <AdLanguageSelector
+                      langId={langId}
+                      setLangId={setLangId}
+                      languages={languages}
+                      setTranslations={setTranslations}
+                    />
+                  )}
+                </div>
+                {step === 1 &&
+                  selectedCategoryPath &&
+                  selectedCategoryPath?.length > 0 && (
+                    <div className="flex flex-col gap-2">
+                      <h1 className="font-medium text-xl">
+                        {t("selectedCategory")}
+                      </h1>
+                      <div className="flex">
+                        {selectedCategoryPath?.map((item, index) => {
+                          const shouldShowComma =
+                            selectedCategoryPath.length > 1 &&
+                            index !== selectedCategoryPath.length - 1;
+                          return (
+                            <span className="text-primary" key={item.id}>
+                              {item.name}
+                              {shouldShowComma && ", "}
+                            </span>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+                <div>
+                  {step == 1 && (
+                    <EditComponentOne
+                      setTranslations={setTranslations}
+                      current={currentDetails}
+                      langId={langId}
+                      defaultLangId={defaultLangId}
+                      handleDetailsSubmit={handleDetailsSubmit}
+                      is_job_category={is_job_category}
+                      isPriceOptional={isPriceOptional}
+                      currencies={currencies}
+                    />
+                  )}
+
+                  {step == 2 && customFields.length > 0 && (
+                    <EditComponentTwo
+                      customFields={customFields}
+                      extraDetails={extraDetails}
+                      setExtraDetails={setExtraDetails}
+                      handleGoBack={handleGoBack}
+                      filePreviews={filePreviews}
+                      setFilePreviews={setFilePreviews}
+                      submitExtraDetails={submitExtraDetails}
+                      currentExtraDetails={currentExtraDetails}
+                      langId={langId}
+                      defaultLangId={defaultLangId}
+                    />
+                  )}
+
+                  {step == 3 && (
+                    <EditComponentThree
+                      setUploadedImages={setUploadedImages}
+                      uploadedImages={uploadedImages}
+                      OtherImages={OtherImages}
+                      setOtherImages={setOtherImages}
+                      handleImageSubmit={handleImageSubmit}
+                      handleGoBack={handleGoBack}
+                      setDeleteImagesId={setDeleteImagesId}
+                    />
+                  )}
+
+                  {step == 4 && (
+                    <EditComponentFour
+                      handleGoBack={handleGoBack}
+                      location={Location}
+                      setLocation={setLocation}
+                      handleFullSubmission={handleFullSubmission}
+                      isAdPlaced={isAdPlaced}
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+          <AdSuccessModal
+            openSuccessModal={openSuccessModal}
+            setOpenSuccessModal={setOpenSuccessModal}
+            createdAdSlug={CreatedAdSlug}
+          />
+        </>
+      )}
+    </Layout>
+  );
+};
+
+export default Checkauth(EditListing);
diff --git a/components/PagesComponent/Faq/FaqCard.jsx b/components/PagesComponent/Faq/FaqCard.jsx
new file mode 100644
index 0000000..d8880c1
--- /dev/null
+++ b/components/PagesComponent/Faq/FaqCard.jsx
@@ -0,0 +1,31 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+const FaqCard = ({ faq }) => {
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      className="border rounded-md overflow-hidden"
+    >
+      <AccordionItem value={faq?.id} className="border-none group">
+        <AccordionTrigger
+          className="text-start font-bold text-base px-4 hover:no-underline bg-transparent 
+                    group-data-[state=open]:bg-muted group-data-[state=open]:text-primary
+                    group-data-[state=open]:border-b"
+        >
+          {faq?.translated_question || faq?.question}
+        </AccordionTrigger>
+        <AccordionContent className="bg-muted p-4">
+          <p className="text-base">{faq?.translated_answer || faq?.answer}</p>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export default FaqCard;
diff --git a/components/PagesComponent/Faq/FaqsPage.jsx b/components/PagesComponent/Faq/FaqsPage.jsx
new file mode 100644
index 0000000..eb7ab8e
--- /dev/null
+++ b/components/PagesComponent/Faq/FaqsPage.jsx
@@ -0,0 +1,57 @@
+"use client";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import { t } from "@/utils";
+import { useEffect, useState } from "react";
+import { getFaqApi } from "@/utils/api";
+import FaqCard from "./FaqCard";
+import Layout from "@/components/Layout/Layout";
+import { useSelector } from "react-redux";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import PageLoader from "@/components/Common/PageLoader";
+import NoData from "@/components/EmptyStates/NoData";
+
+const FaqsPage = () => {
+  const [faqs, setFaqs] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+
+  useEffect(() => {
+    fetchFaqs();
+  }, [CurrentLanguage.id]);
+
+  const fetchFaqs = async () => {
+    try {
+      setLoading(true);
+      const res = await getFaqApi.getFaq();
+      setFaqs(res?.data?.data);
+    } catch (error) {
+      console.log("error", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Layout>
+      <BreadCrumb title2={t("faqs")} />
+      {loading ? (
+        <PageLoader />
+      ) : faqs && faqs?.length > 0 ? (
+        <div className="container">
+          <div className="flex flex-col gap-6 mt-8">
+            <h1 className="text-2xl font-semibold">{t("faqs")}</h1>
+            <div className="flex flex-col gap-4 md:gap-8">
+              {faqs?.map((faq) => {
+                return <FaqCard faq={faq} key={faq?.id} />;
+              })}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <NoData name={t("faqs")} />
+      )}
+    </Layout>
+  );
+};
+
+export default FaqsPage;
diff --git a/components/PagesComponent/Favorites/Favorites.jsx b/components/PagesComponent/Favorites/Favorites.jsx
new file mode 100644
index 0000000..7dc1ce0
--- /dev/null
+++ b/components/PagesComponent/Favorites/Favorites.jsx
@@ -0,0 +1,95 @@
+"use client";
+import ProductCard from "@/components/Common/ProductCard";
+import NoData from "@/components/EmptyStates/NoData";
+import ProductCardSkeleton from "@/components/Common/ProductCardSkeleton";
+import { Button } from "@/components/ui/button";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import { t } from "@/utils";
+import { getFavouriteApi } from "@/utils/api";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+
+const Favorites = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [favoritesData, setFavoriteData] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [hasMore, setHasMore] = useState(false);
+  const [IsLoadMore, setIsLoadMore] = useState(false);
+
+  const fetchFavoriteItems = async (page) => {
+    try {
+      if (page === 1) {
+        setIsLoading(true);
+      }
+      const response = await getFavouriteApi.getFavouriteApi({ page });
+      const data = response?.data?.data?.data;
+      if (page === 1) {
+        setFavoriteData(data);
+      } else {
+        setFavoriteData((prevData) => [...prevData, ...data]);
+      }
+
+      setCurrentPage(response?.data?.data.current_page);
+
+      if (response?.data?.data.current_page < response?.data?.data.last_page) {
+        setHasMore(true);
+      } else {
+        setHasMore(false);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+      setIsLoadMore(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchFavoriteItems(currentPage);
+  }, [currentPage, CurrentLanguage.id]);
+
+  const handleLoadMore = () => {
+    setIsLoadMore(true);
+    setCurrentPage((prevPage) => prevPage + 1);
+  };
+
+  const handleLike = (id) => {
+    fetchFavoriteItems(1);
+  };
+
+  return (
+    <>
+      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 lg:grid-cols-2 gap-3 sm:gap-6">
+        {isLoading ? (
+          [...Array(12)].map((_, index) => <ProductCardSkeleton key={index} />)
+        ) : favoritesData && favoritesData.length > 0 ? (
+          favoritesData?.map(
+            (fav) =>
+              fav?.is_liked && (
+                <ProductCard key={fav?.id} item={fav} handleLike={handleLike} />
+              )
+          )
+        ) : (
+          <div className="col-span-full">
+            <NoData name={t("favorites")} />
+          </div>
+        )}
+      </div>
+      {favoritesData && favoritesData.length > 0 && hasMore && (
+        <div className="text-center mt-6">
+          <Button
+            variant="outline"
+            className="text-sm sm:text-base text-primary w-[256px]"
+            disabled={isLoading || IsLoadMore}
+            onClick={handleLoadMore}
+          >
+            {IsLoadMore ? t("loading") : t("loadMore")}
+          </Button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Favorites;
diff --git a/components/PagesComponent/Home/AllItems.jsx b/components/PagesComponent/Home/AllItems.jsx
new file mode 100644
index 0000000..194a149
--- /dev/null
+++ b/components/PagesComponent/Home/AllItems.jsx
@@ -0,0 +1,165 @@
+import ProductCard from "@/components/Common/ProductCard";
+import NoData from "@/components/EmptyStates/NoData";
+import AllItemsSkeleton from "@/components/PagesComponent/Home/AllItemsSkeleton";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { resetBreadcrumb } from "@/redux/reducer/breadCrumbSlice";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import { t } from "@/utils";
+import { allItemApi } from "@/utils/api";
+import { Info, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+const AllItems = ({ cityData, KmRange }) => {
+  const dispatch = useDispatch();
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [AllItem, setAllItem] = useState([]);
+  const [hasMore, setHasMore] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadMore, setIsLoadMore] = useState(false);
+
+  // State to track if we should show location alert
+  const [locationAlertMessage, setLocationAlertMessage] = useState("");
+
+  const getAllItemData = async (page) => {
+    if (page === 1) {
+      setIsLoading(true);
+    }
+    try {
+      const params = {
+        page,
+        current_page: "home",
+      };
+      if (Number(KmRange) > 0 && (cityData?.areaId || cityData?.city)) {
+        // Add location-based parameters for non-demo mode
+        params.radius = KmRange;
+        params.latitude = cityData.lat;
+        params.longitude = cityData.long;
+      } else {
+        // Add location hierarchy parameters for non-demo mode
+        if (cityData?.areaId) {
+          params.area_id = cityData.areaId;
+        } else if (cityData?.city) {
+          params.city = cityData.city;
+        } else if (cityData?.state) {
+          params.state = cityData.state;
+        } else if (cityData?.country) {
+          params.country = cityData.country;
+        }
+      }
+
+      const response = await allItemApi.getItems(params);
+      if (response.data?.error === true) {
+        throw new Error(response.data?.message);
+      }
+
+      const apiMessage = response.data.message;
+      // Check if message indicates no items in selected location
+      const isNoItemsInLocation = apiMessage
+        ?.toLowerCase()
+        .includes("no ads found");
+
+      // Show alert only if there are items but from different location
+      if (isNoItemsInLocation && response?.data?.data?.data?.length > 0) {
+        setLocationAlertMessage(apiMessage);
+      } else {
+        setLocationAlertMessage("");
+      }
+
+      if (response?.data?.data?.data?.length > 0) {
+        const data = response?.data?.data?.data;
+        if (page === 1) {
+          setAllItem(data);
+        } else {
+          setAllItem((prevData) => [...prevData, ...data]);
+        }
+        const currentPage = response?.data?.data?.current_page;
+        const lastPage = response?.data?.data?.last_page;
+        setHasMore(currentPage < lastPage);
+        setCurrentPage(currentPage);
+      } else {
+        setAllItem([]);
+      }
+    } catch (error) {
+      console.error("Error:", error);
+    } finally {
+      setIsLoading(false);
+      setIsLoadMore(false);
+    }
+  };
+
+  useEffect(() => {
+    getAllItemData(1);
+  }, [cityData.lat, cityData.long, KmRange, CurrentLanguage?.id]);
+
+  const handleLoadMore = () => {
+    setIsLoadMore(true);
+    getAllItemData(currentPage + 1);
+  };
+
+  useEffect(() => {
+    // reset breadcrumb path when in home page
+    dispatch(resetBreadcrumb());
+  }, []);
+
+  const handleLikeAllData = (id) => {
+    const updatedItems = AllItem.map((item) => {
+      if (item.id === id) {
+        return { ...item, is_liked: !item.is_liked };
+      }
+      return item;
+    });
+    setAllItem(updatedItems);
+  };
+
+  return (
+    <section className="container mt-12">
+      <h5 className="text-xl sm:text-2xl font-medium">
+        {t("allAdvertisements")}
+      </h5>
+
+      {/* Location Alert - shows when items are from different location */}
+      {locationAlertMessage && AllItem.length > 0 && (
+        <Alert variant="warning" className="mt-3">
+          <Info className="size-4" />
+          <AlertTitle>{locationAlertMessage}</AlertTitle>
+          <AlertDescription className="sr-only"></AlertDescription>
+        </Alert>
+      )}
+
+      <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-6 mt-6">
+        {isLoading ? (
+          <AllItemsSkeleton />
+        ) : AllItem && AllItem.length > 0 ? (
+          AllItem?.map((item) => (
+            <ProductCard
+              key={item?.id}
+              item={item}
+              handleLike={handleLikeAllData}
+            />
+          ))
+        ) : (
+          <div className="col-span-full">
+            <NoData name={t("advertisement")} />
+          </div>
+        )}
+      </div>
+
+      {AllItem && AllItem.length > 0 && hasMore && (
+        <div className="text-center mt-6">
+          <Button
+            variant="outline"
+            className="text-sm sm:text-base text-primary w-[256px]"
+            disabled={isLoading || isLoadMore}
+            onClick={handleLoadMore}
+          >
+            {isLoadMore ? t("loading") : t("loadMore")}
+          </Button>
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default AllItems;
diff --git a/components/PagesComponent/Home/AllItemsSkeleton.jsx b/components/PagesComponent/Home/AllItemsSkeleton.jsx
new file mode 100644
index 0000000..6ae00f4
--- /dev/null
+++ b/components/PagesComponent/Home/AllItemsSkeleton.jsx
@@ -0,0 +1,14 @@
+import { useId } from "react";
+import ProductCardSkeleton from "../../Common/ProductCardSkeleton";
+
+const AllItemsSkeleton = () => {
+  return (
+    <>
+      {Array.from({ length: 8 }).map(() => (
+        <ProductCardSkeleton key={useId()} />
+      ))}
+    </>
+  );
+};
+
+export default AllItemsSkeleton;
diff --git a/components/PagesComponent/Home/FeaturedSections.jsx b/components/PagesComponent/Home/FeaturedSections.jsx
new file mode 100644
index 0000000..99844a7
--- /dev/null
+++ b/components/PagesComponent/Home/FeaturedSections.jsx
@@ -0,0 +1,62 @@
+"use client";
+import { t } from "@/utils";
+import CustomLink from "@/components/Common/CustomLink";
+import ProductCard from "@/components/Common/ProductCard";
+import { Fragment } from "react";
+
+const FeaturedSections = ({ featuredData, setFeaturedData, allEmpty }) => {
+  const handleLike = (id) => {
+    const updatedData = featuredData.map((section) => {
+      const updatedSectionData = section.section_data.map((item) => {
+        if (item.id === id) {
+          return { ...item, is_liked: !item.is_liked };
+        }
+        return item;
+      });
+      return { ...section, section_data: updatedSectionData };
+    });
+    setFeaturedData(updatedData);
+  };
+
+  return (
+    featuredData &&
+    featuredData.length > 0 &&
+    !allEmpty && (
+      <section className="container">
+        {featuredData.map(
+          (ele) =>
+            ele?.section_data.length > 0 && (
+              <Fragment key={ele?.id}>
+                <div className="space-between gap-2 mt-12">
+                  <h5 className="text-xl sm:text-2xl font-medium">
+                    {ele?.translated_name || ele?.title}
+                  </h5>
+
+                  {ele?.section_data.length > 4 && (
+                    <CustomLink
+                      href={`/ads?featured_section=${ele?.slug}`}
+                      className="text-sm sm:text-base font-medium whitespace-nowrap"
+                      prefetch={false}
+                    >
+                      {t("viewAll")}
+                    </CustomLink>
+                  )}
+                </div>
+                <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-6 mt-6">
+                  {ele?.section_data.slice(0, 4).map((data) => (
+                    <ProductCard
+                      key={data?.id}
+                      item={data}
+                      handleLike={handleLike}
+                    />
+                  ))}
+                </div>
+              </Fragment>
+            )
+        )}
+      </section>
+    )
+  );
+};
+
+export default FeaturedSections;
diff --git a/components/PagesComponent/Home/FeaturedSectionsSkeleton.jsx b/components/PagesComponent/Home/FeaturedSectionsSkeleton.jsx
new file mode 100644
index 0000000..c1b054a
--- /dev/null
+++ b/components/PagesComponent/Home/FeaturedSectionsSkeleton.jsx
@@ -0,0 +1,20 @@
+import { Skeleton } from "../../ui/skeleton";
+import ProductCardSkeleton from "../../Common/ProductCardSkeleton";
+
+const FeaturedSectionsSkeleton = () => {
+  return (
+    <div className="container">
+      <div className="space-between gap-2 mt-12">
+        <Skeleton className="w-1/6 h-4" />
+        <Skeleton className="w-1/12 h-4" />
+      </div>
+      <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-6 mt-6">
+        {Array.from({ length: 4 }).map((_, index) => (
+          <ProductCardSkeleton key={index} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FeaturedSectionsSkeleton;
diff --git a/components/PagesComponent/Home/HeaderCategories.jsx b/components/PagesComponent/Home/HeaderCategories.jsx
new file mode 100644
index 0000000..dbda936
--- /dev/null
+++ b/components/PagesComponent/Home/HeaderCategories.jsx
@@ -0,0 +1,300 @@
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import { t } from "@/utils";
+import CustomLink from "@/components/Common/CustomLink";
+import { useEffect, useRef, useState } from "react";
+import { IoIosMore } from "react-icons/io";
+import CustomImage from "@/components/Common/CustomImage";
+import { useNavigate } from "@/components/Common/useNavigate";
+import { usePathname, useSearchParams } from "next/navigation";
+
+const HeaderCategories = ({ cateData }) => {
+  const containerRef = useRef(null);
+  const measureRef = useRef(null);
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const { navigate } = useNavigate();
+
+  const [fitCategoriesCount, setFitCategoriesCount] = useState(3);
+
+  useEffect(() => {
+    const calculateFit = () => {
+      if (!containerRef.current || !measureRef.current) return;
+
+      const containerWidth = containerRef.current.offsetWidth;
+      const otherWidth = 80; //approx width of other option
+      const availableWidth = containerWidth - otherWidth;
+
+      const items = Array.from(measureRef.current.children);
+      let totalWidth = 0;
+      let visible = 0;
+
+      for (const item of items) {
+        const width = item.getBoundingClientRect().width + 48; // padding/gap buffer
+
+        if (totalWidth + width > availableWidth) break;
+        totalWidth += width;
+        visible++;
+      }
+
+      setFitCategoriesCount(visible);
+    };
+
+    const resizeObserver = new ResizeObserver(calculateFit);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => resizeObserver.disconnect();
+  }, [cateData]);
+
+  // Helper function to build URL with category while preserving existing search params
+  const buildCategoryUrl = (categorySlug) => {
+    if (pathname.startsWith("/ads")) {
+      // Preserve existing search params and update category
+      const newSearchParams = new URLSearchParams(searchParams.toString());
+      newSearchParams.delete("lang");
+      newSearchParams.set("category", categorySlug);
+      return `/ads?${newSearchParams.toString()}`;
+    } else {
+      // Not on ads page, just add category
+      return `/ads?category=${categorySlug}`;
+    }
+  };
+
+  const handleCategoryClick = (slug) => {
+    if (pathname.startsWith("/ads")) {
+      const newSearchParams = new URLSearchParams(searchParams.toString());
+      newSearchParams.set("category", slug);
+      const newUrl = `/ads?${newSearchParams.toString()}`;
+      window.history.pushState(null, "", newUrl);
+    } else {
+      navigate(`/ads?category=${slug}`);
+    }
+  };
+
+  const handleOtherCategoryClick = () => {
+    if (pathname.startsWith("/ads")) {
+      const newSearchParams = new URLSearchParams(searchParams.toString());
+      newSearchParams.delete("category");
+      const newUrl = `/ads?${newSearchParams.toString()}`;
+      window.history.pushState(null, "", newUrl);
+    } else {
+      navigate(`/ads`);
+    }
+  };
+
+  return (
+    <div className="hidden lg:block py-1.5 border-b">
+      <div className="container" ref={containerRef}>
+        {/* Hidden measurement row */}
+        <div
+          ref={measureRef}
+          className="absolute opacity-0 pointer-events-none flex"
+          style={{ position: "fixed", top: -9999, left: -9999 }}
+        >
+          {cateData.map((category) => (
+            <div key={category.id} className="px-2">
+              <span className="whitespace-nowrap font-medium text-sm">
+                {category.translated_name}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        <NavigationMenu>
+          <NavigationMenuList className="rtl:flex-row-reverse">
+            {cateData?.slice(0, fitCategoriesCount)?.map((category) => (
+              <NavigationMenuItem key={category.id}>
+                {category.subcategories_count > 0 ? (
+                  <>
+                    <NavigationMenuTrigger
+                      onClick={() => handleCategoryClick(category.slug)}
+                    >
+                      {category.translated_name}
+                    </NavigationMenuTrigger>
+                    <NavigationMenuContent className="rtl:[direction:rtl]">
+                      <NavigationMenuLink asChild>
+                        <div
+                          style={{
+                            width: containerRef?.current?.offsetWidth - 32,
+                          }}
+                          className="flex overflow-x-auto"
+                        >
+                          <div className="w-[20%] p-4 bg-muted">
+                            <div className="flex gap-1">
+                              <CustomImage
+                                src={category?.image}
+                                alt={category?.translated_name}
+                                width={22}
+                                height={22}
+                                className="w-22 h-auto aspect-square"
+                              />
+                              <p className="font-bold">
+                                {category?.translated_name}
+                              </p>
+                            </div>
+                          </div>
+
+                          <div className="w-[80%] p-4">
+                            <div className="flex flex-col flex-wrap w-min gap-8 h-[30vh] max-h-[30vh]">
+                              {/* <CustomLink
+                                href={`/ads?category=${category.slug}`}
+                                className="font-semibold whitespace-nowrap text-sm hover:text-primary"
+                              >
+                                {t("seeAllIn")} {category.translated_name}
+                              </CustomLink> */}
+
+                              {category.subcategories.map((subcategory) => (
+                                <div key={subcategory.id}>
+                                  <CustomLink
+                                    href={buildCategoryUrl(subcategory.slug)}
+                                    className="font-semibold whitespace-nowrap text-sm hover:text-primary"
+                                  >
+                                    {subcategory.translated_name}
+                                  </CustomLink>
+
+                                  {subcategory.subcategories_count > 0 && (
+                                    <ul className="flex flex-col gap-2 mt-2">
+                                      {subcategory?.subcategories
+                                        ?.slice(0, 5)
+                                        .map((nestedSubcategory) => (
+                                          <li
+                                            key={nestedSubcategory?.id}
+                                            className="text-xs"
+                                          >
+                                            <CustomLink
+                                              href={buildCategoryUrl(
+                                                nestedSubcategory?.slug
+                                              )}
+                                              className="hover:text-primary whitespace-nowrap"
+                                            >
+                                              {
+                                                nestedSubcategory?.translated_name
+                                              }
+                                            </CustomLink>
+                                          </li>
+                                        ))}
+                                      {subcategory.subcategories.length > 5 && (
+                                        <li className="text-xs">
+                                          <CustomLink
+                                            href={buildCategoryUrl(
+                                              subcategory.slug
+                                            )}
+                                            className="hover:text-primary"
+                                          >
+                                            {t("viewAll")}
+                                          </CustomLink>
+                                        </li>
+                                      )}
+                                    </ul>
+                                  )}
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        </div>
+                      </NavigationMenuLink>
+                    </NavigationMenuContent>
+                  </>
+                ) : (
+                  <NavigationMenuLink
+                    className={navigationMenuTriggerStyle()}
+                    href={buildCategoryUrl(category?.slug)}
+                    asChild
+                  >
+                    <CustomLink href={buildCategoryUrl(category?.slug)}>
+                      {category.translated_name}
+                    </CustomLink>
+                  </NavigationMenuLink>
+                )}
+              </NavigationMenuItem>
+            ))}
+            {cateData && cateData.length > fitCategoriesCount && (
+              <NavigationMenuItem>
+                <NavigationMenuTrigger onClick={handleOtherCategoryClick}>
+                  {t("other")}
+                </NavigationMenuTrigger>
+                <NavigationMenuContent className="rtl:[direction:rtl]">
+                  <NavigationMenuLink asChild>
+                    <div
+                      style={{ width: containerRef?.current?.offsetWidth - 32 }}
+                      className="flex overflow-x-auto w-[80vw]"
+                    >
+                      <div className="w-[20%] p-4 bg-muted">
+                        <div className="flex gap-1">
+                          <IoIosMore size={22} />
+                          <p className="font-bold">{t("other")}</p>
+                        </div>
+                      </div>
+
+                      <div className="w-[80%] p-4">
+                        <div className="flex flex-col flex-wrap w-min gap-8 h-[30vh] max-h-[30vh]">
+                          {cateData
+                            .slice(fitCategoriesCount)
+                            .map((subcategory) => (
+                              <div key={subcategory.id}>
+                                <CustomLink
+                                  href={buildCategoryUrl(subcategory.slug)}
+                                  className="font-semibold whitespace-nowrap text-sm hover:text-primary"
+                                >
+                                  {subcategory.translated_name}
+                                </CustomLink>
+
+                                {subcategory.subcategories_count > 0 && (
+                                  <ul className="flex flex-col gap-2 mt-2">
+                                    {subcategory?.subcategories
+                                      ?.slice(0, 5)
+                                      .map((nestedSubcategory) => (
+                                        <li
+                                          key={nestedSubcategory?.id}
+                                          className="text-xs"
+                                        >
+                                          <CustomLink
+                                            href={buildCategoryUrl(
+                                              nestedSubcategory?.slug
+                                            )}
+                                            className="hover:text-primary"
+                                          >
+                                            {nestedSubcategory?.translated_name}
+                                          </CustomLink>
+                                        </li>
+                                      ))}
+                                    {subcategory.subcategories.length > 5 && (
+                                      <li className="text-xs">
+                                        <CustomLink
+                                          href={buildCategoryUrl(
+                                            subcategory.slug
+                                          )}
+                                          className="hover:text-primary"
+                                        >
+                                          {t("viewAll")}
+                                        </CustomLink>
+                                      </li>
+                                    )}
+                                  </ul>
+                                )}
+                              </div>
+                            ))}
+                        </div>
+                      </div>
+                    </div>
+                  </NavigationMenuLink>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+            )}
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+    </div>
+  );
+};
+
+export default HeaderCategories;
diff --git a/components/PagesComponent/Home/Home.jsx b/components/PagesComponent/Home/Home.jsx
new file mode 100644
index 0000000..5400982
--- /dev/null
+++ b/components/PagesComponent/Home/Home.jsx
@@ -0,0 +1,110 @@
+"use client";
+import { useEffect, useState } from "react";
+import AllItems from "./AllItems";
+import FeaturedSections from "./FeaturedSections";
+import { FeaturedSectionApi, sliderApi } from "@/utils/api";
+import { getCurrentLangCode } from "@/redux/reducer/languageSlice";
+import { useSelector } from "react-redux";
+import { getCityData, getKilometerRange } from "@/redux/reducer/locationSlice";
+import OfferSliderSkeleton from "@/components/PagesComponent/Home/OfferSliderSkeleton";
+import FeaturedSectionsSkeleton from "./FeaturedSectionsSkeleton";
+import PopularCategories from "./PopularCategories";
+import dynamic from "next/dynamic";
+
+const OfferSlider = dynamic(() => import("./OfferSlider"), {
+  ssr: false,
+  loading: OfferSliderSkeleton,
+});
+
+const Home = () => {
+  const KmRange = useSelector(getKilometerRange);
+  const cityData = useSelector(getCityData);
+  const currentLanguageCode = useSelector(getCurrentLangCode);
+  const [IsFeaturedLoading, setIsFeaturedLoading] = useState(false);
+  const [featuredData, setFeaturedData] = useState([]);
+  const [Slider, setSlider] = useState([]);
+  const [IsSliderLoading, setIsSliderLoading] = useState(true);
+  const allEmpty = featuredData?.every((ele) => ele?.section_data.length === 0);
+
+  useEffect(() => {
+    const fetchSliderData = async () => {
+      let params = {};
+      if (cityData?.city) {
+        params.city = cityData.city;
+        params.state = cityData.state;
+        params.country = cityData.country;
+      } else if (cityData?.state) {
+        params.state = cityData.state;
+      } else if (cityData?.country) {
+        params.country = cityData.country;
+      }
+      try {
+        const response = await sliderApi.getSlider(params);
+        const data = response.data;
+        setSlider(data.data);
+      } catch (error) {
+        console.error("Error:", error);
+      } finally {
+        setIsSliderLoading(false);
+      }
+    };
+    fetchSliderData();
+  }, [cityData?.city, cityData?.state, cityData?.country]);
+
+  useEffect(() => {
+    const fetchFeaturedSectionData = async () => {
+      setIsFeaturedLoading(true);
+      try {
+        const params = {};
+        if (Number(KmRange) > 0 && (cityData?.areaId || cityData?.city)) {
+          params.radius = KmRange;
+          params.latitude = cityData.lat;
+          params.longitude = cityData.long;
+        } else {
+          if (cityData?.areaId) {
+            params.area_id = cityData.areaId;
+          } else if (cityData?.city) {
+            params.city = cityData.city;
+          } else if (cityData?.state) {
+            params.state = cityData.state;
+          } else if (cityData?.country) {
+            params.country = cityData.country;
+          }
+        }
+        const response = await FeaturedSectionApi.getFeaturedSections(params);
+        const { data } = response.data;
+        setFeaturedData(data);
+      } catch (error) {
+        console.error("Error:", error);
+      } finally {
+        setIsFeaturedLoading(false);
+      }
+    };
+    fetchFeaturedSectionData();
+  }, [cityData.lat, cityData.long, KmRange, currentLanguageCode]);
+  return (
+    <>
+      {IsSliderLoading ? (
+        <OfferSliderSkeleton />
+      ) : (
+        Slider &&
+        Slider.length > 0 && (
+          <OfferSlider Slider={Slider} IsLoading={IsSliderLoading} />
+        )
+      )}
+      <PopularCategories />
+      {IsFeaturedLoading ? (
+        <FeaturedSectionsSkeleton />
+      ) : (
+        <FeaturedSections
+          featuredData={featuredData}
+          setFeaturedData={setFeaturedData}
+          allEmpty={allEmpty}
+        />
+      )}
+      <AllItems cityData={cityData} KmRange={KmRange} />
+    </>
+  );
+};
+
+export default Home;
diff --git a/components/PagesComponent/Home/HomeHeader.jsx b/components/PagesComponent/Home/HomeHeader.jsx
new file mode 100644
index 0000000..c4026ea
--- /dev/null
+++ b/components/PagesComponent/Home/HomeHeader.jsx
@@ -0,0 +1,435 @@
+"use client";
+import LanguageDropdown from "@/components/Common/LanguageDropdown";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import {
+  getIsFreAdListing,
+  getOtpServiceProvider,
+  settingsData,
+} from "@/redux/reducer/settingSlice";
+import { t, truncate } from "@/utils";
+import CustomLink from "@/components/Common/CustomLink";
+import { useSelector } from "react-redux";
+import { GrLocation } from "react-icons/gr";
+import { getCityData } from "@/redux/reducer/locationSlice";
+import HomeMobileMenu from "./HomeMobileMenu.jsx";
+import MailSentSuccessModal from "@/components/Auth/MailSentSuccessModal.jsx";
+import { useEffect, useState } from "react";
+import {
+  getIsLoggedIn,
+  logoutSuccess,
+  userSignUpData,
+} from "@/redux/reducer/authSlice.js";
+import ProfileDropdown from "./ProfileDropdown.jsx";
+import { toast } from "sonner";
+import FirebaseData from "@/utils/Firebase.js";
+import { IoIosAddCircleOutline } from "react-icons/io";
+import dynamic from "next/dynamic";
+import {
+  getIsLoginModalOpen,
+  setIsLoginOpen,
+} from "@/redux/reducer/globalStateSlice.js";
+import ReusableAlertDialog from "@/components/Common/ReusableAlertDialog";
+import { deleteUserApi, getLimitsApi, logoutApi } from "@/utils/api.js";
+import { useMediaQuery } from "usehooks-ts";
+import UnauthorizedModal from "@/components/Auth/UnauthorizedModal.jsx";
+import CustomImage from "@/components/Common/CustomImage.jsx";
+import { Loader2 } from "lucide-react";
+import { useNavigate } from "@/components/Common/useNavigate.jsx";
+import { usePathname } from "next/navigation.js";
+import { Skeleton } from "@/components/ui/skeleton.jsx";
+import HeaderCategories from "./HeaderCategories.jsx";
+import { deleteUser, getAuth } from "firebase/auth";
+import DeleteAccountVerifyOtpModal from "@/components/Auth/DeleteAccountVerifyOtpModal.jsx";
+import useGetCategories from "@/components/Layout/useGetCategories.jsx";
+
+const Search = dynamic(() => import("./Search.jsx"), {
+  ssr: false,
+});
+const LoginModal = dynamic(() => import("@/components/Auth/LoginModal.jsx"), {
+  ssr: false,
+});
+const RegisterModal = dynamic(
+  () => import("@/components/Auth/RegisterModal.jsx"),
+  {
+    ssr: false,
+  }
+);
+const LocationModal = dynamic(
+  () => import("@/components/Location/LocationModal.jsx"),
+  {
+    ssr: false,
+  }
+);
+
+const HeaderCategoriesSkeleton = () => {
+  return (
+    <div className="container">
+      <div className="py-1.5 border-b">
+        <Skeleton className="w-full h-[40px]" />
+      </div>
+    </div>
+  );
+};
+
+const HomeHeader = () => {
+  // 📦 Framework & Firebase
+  const { navigate } = useNavigate();
+  const { signOut } = FirebaseData();
+  const pathname = usePathname();
+
+  // 🔌 Redux State (via useSelector)
+
+  // User & Auth
+  const userData = useSelector(userSignUpData);
+  const IsLoggedin = useSelector(getIsLoggedIn);
+  const IsLoginOpen = useSelector(getIsLoginModalOpen);
+  const otp_service_provider = useSelector(getOtpServiceProvider);
+
+
+  // Ads & Categories
+  // const isCategoryLoading = useSelector(getIsCatLoading);
+  // const cateData = useSelector(CategoryData);
+  const { getCategories, cateData, isCatLoading: isCategoryLoading } = useGetCategories();
+  const IsFreeAdListing = useSelector(getIsFreAdListing);
+
+  // Location
+  const cityData = useSelector(getCityData);
+
+  // Language & Settings
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const settings = useSelector(settingsData);
+
+  // 🎛️ Local UI State (via useState)
+
+  // Modals
+  const [IsRegisterModalOpen, setIsRegisterModalOpen] = useState(false);
+  const [IsLocationModalOpen, setIsLocationModalOpen] = useState(false);
+  const [IsVerifyOtpBeforeDelete, setIsVerifyOtpBeforeDelete] = useState(false);
+
+  // Auth State
+  const [IsLogout, setIsLogout] = useState(false);
+  const [IsLoggingOut, setIsLoggingOut] = useState(false);
+
+  // Profile
+  const [IsUpdatingProfile, setIsUpdatingProfile] = useState(false);
+
+  // Ad Listing
+  const [IsAdListingClicked, setIsAdListingClicked] = useState(false);
+
+  // Email Status
+  const [IsMailSentSuccess, setIsMailSentSuccess] = useState(false);
+
+  // 📱 Media Query
+  const isLargeScreen = useMediaQuery("(min-width: 992px)");
+
+  //delete account state
+  const [manageDeleteAccount, setManageDeleteAccount] = useState({
+    IsDeleteAccount: false,
+    IsDeleting: false,
+  });
+
+
+  useEffect(() => {
+    getCategories(1);
+  }, [CurrentLanguage.id]);
+
+
+  const handleLogout = async () => {
+    try {
+      setIsLoggingOut(true);
+      await signOut();
+      const res = await logoutApi.logoutApi({
+        ...(userData?.fcm_id && { fcm_token: userData?.fcm_id }),
+      });
+      if (res?.data?.error === false) {
+        logoutSuccess();
+        toast.success(t("signOutSuccess"));
+        setIsLogout(false);
+        // avoid redirect if already on home page otherwise router.push triggering server side api calls
+        if (pathname !== "/") {
+          navigate("/");
+        }
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log("Failed to log out", error);
+    } finally {
+      setIsLoggingOut(false);
+    }
+  };
+
+  const handleAdListing = async () => {
+    if (!IsLoggedin) {
+      setIsLoginOpen(true);
+      return;
+    }
+    if (!userData?.name || !userData?.email) {
+      setIsUpdatingProfile(true);
+      return;
+    }
+
+    if (IsFreeAdListing) {
+      navigate("/ad-listing");
+      return;
+    }
+    try {
+      setIsAdListingClicked(true);
+      const res = await getLimitsApi.getLimits({
+        package_type: "item_listing",
+      });
+      if (res?.data?.error === false) {
+        navigate("/ad-listing");
+      } else {
+        toast.error(t("purchasePlan"));
+        navigate("/subscription");
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsAdListingClicked(false);
+    }
+  };
+
+  const handleUpdateProfile = () => {
+    setIsUpdatingProfile(false);
+    navigate("/profile");
+  };
+
+  const locationText =
+    cityData?.address_translated || cityData?.formattedAddress;
+
+  const handleDeleteAcc = async () => {
+    try {
+      setManageDeleteAccount((prev) => ({ ...prev, IsDeleting: true }));
+      const auth = getAuth();
+      const user = auth.currentUser;
+      const isMobileLogin = userData?.type == "phone";
+      const needsOtpVerification = isMobileLogin && !user && otp_service_provider === "firebase";
+      if (user) {
+        await deleteUser(user);
+      } else if (needsOtpVerification) {
+        setManageDeleteAccount((prev) => ({ ...prev, IsDeleteAccount: false }));
+        setIsVerifyOtpBeforeDelete(true);
+        return;
+      }
+      await deleteUserApi.deleteUser();
+      logoutSuccess();
+      toast.success(t("userDeleteSuccess"));
+      setManageDeleteAccount((prev) => ({ ...prev, IsDeleteAccount: false }));
+      // avoid redirect if already on home page otherwise router.push triggering server side api calls
+      if (pathname !== "/") {
+        navigate("/");
+      }
+    } catch (error) {
+      console.error("Error deleting user:", error.message);
+      const isMobileLogin = userData?.type === "phone";
+      if (error.code === "auth/requires-recent-login") {
+        if (isMobileLogin) {
+          setManageDeleteAccount((prev) => ({
+            ...prev,
+            IsDeleteAccount: false, // close delete modal
+          }));
+          setIsVerifyOtpBeforeDelete(true); // open OTP screen
+          return;
+        }
+        logoutSuccess();
+        toast.error(t("deletePop"));
+        setManageDeleteAccount((prev) => ({ ...prev, IsDeleteAccount: false }));
+      }
+    } finally {
+      setManageDeleteAccount((prev) => ({ ...prev, IsDeleting: false }));
+    }
+  };
+
+  return (
+    <>
+      <header className="py-5 border-b">
+        <nav className="container">
+          <div className="space-between">
+            <CustomLink href="/">
+              <CustomImage
+                src={settings?.header_logo}
+                alt="logo"
+                width={195}
+                height={52}
+                className="w-full h-[52px] object-contain ltr:object-left rtl:object-right max-w-[195px]"
+              />
+            </CustomLink>
+            {/* desktop category search select */}
+
+            {isLargeScreen && (
+              <div className="flex items-center border leading-none rounded">
+                <Search />
+              </div>
+            )}
+
+            <button
+              className="hidden lg:flex items-center gap-1"
+              onClick={() => setIsLocationModalOpen(true)}
+            >
+              <GrLocation
+                size={16}
+                className="flex-shrink-0"
+                title={locationText ? locationText : t("addLocation")}
+              />
+              <p
+                className="hidden xl:block text-sm"
+                title={locationText ? locationText : t("addLocation")}
+              >
+                {locationText
+                  ? truncate(locationText, 12)
+                  : truncate(t("addLocation"), 12)}
+              </p>
+            </button>
+
+            <div className="hidden lg:flex items-center gap-2">
+              {IsLoggedin ? (
+                <ProfileDropdown
+                  setIsLogout={setIsLogout}
+                  IsLogout={IsLogout}
+                />
+              ) : (
+                <>
+                  <button
+                    onClick={() => setIsLoginOpen(true)}
+                    title={t("login")}
+                  >
+                    {truncate(t("login"), 12)}
+                  </button>
+                  <span className="border-l h-6 self-center"></span>
+                  <button
+                    onClick={() => setIsRegisterModalOpen(true)}
+                    title={t("register")}
+                  >
+                    {truncate(t("register"), 12)}
+                  </button>
+                </>
+              )}
+
+              <button
+                className="bg-primary px-2 xl:px-4 py-2 items-center text-white rounded-md  flex gap-1"
+                disabled={IsAdListingClicked}
+                onClick={handleAdListing}
+                title={t("adListing")}
+              >
+                {IsAdListingClicked ? (
+                  <Loader2 size={18} className="animate-spin" />
+                ) : (
+                  <IoIosAddCircleOutline size={18} />
+                )}
+
+                <span className="hidden xl:inline">
+                  {truncate(t("adListing"), 12)}
+                </span>
+              </button>
+
+              <LanguageDropdown />
+            </div>
+            <HomeMobileMenu
+              setIsLocationModalOpen={setIsLocationModalOpen}
+              setIsRegisterModalOpen={setIsRegisterModalOpen}
+              setIsLogout={setIsLogout}
+              locationText={locationText}
+              handleAdListing={handleAdListing}
+              IsAdListingClicked={IsAdListingClicked}
+              setManageDeleteAccount={setManageDeleteAccount}
+            />
+          </div>
+
+          {!isLargeScreen && (
+            <div className="flex items-center border leading-none rounded mt-2">
+              <Search />
+            </div>
+          )}
+        </nav>
+      </header>
+      {isCategoryLoading && !cateData.length ? (
+        <HeaderCategoriesSkeleton />
+      ) : (
+        cateData &&
+        cateData.length > 0 && <HeaderCategories cateData={cateData} />
+      )}
+
+      <LoginModal
+        key={IsLoginOpen}
+        IsLoginOpen={IsLoginOpen}
+        setIsRegisterModalOpen={setIsRegisterModalOpen}
+      />
+
+      <RegisterModal
+        setIsMailSentSuccess={setIsMailSentSuccess}
+        IsRegisterModalOpen={IsRegisterModalOpen}
+        setIsRegisterModalOpen={setIsRegisterModalOpen}
+        key={`${IsRegisterModalOpen}-register-modal`}
+      />
+      <MailSentSuccessModal
+        IsMailSentSuccess={IsMailSentSuccess}
+        setIsMailSentSuccess={setIsMailSentSuccess}
+      />
+
+      {/* Reusable Alert Dialog for Logout */}
+      <ReusableAlertDialog
+        open={IsLogout}
+        onCancel={() => setIsLogout(false)}
+        onConfirm={handleLogout}
+        title={t("confirmLogout")}
+        description={t("areYouSureToLogout")}
+        cancelText={t("cancel")}
+        confirmText={t("yes")}
+        confirmDisabled={IsLoggingOut}
+      />
+
+      {/* Reusable Alert Dialog for Updating Profile */}
+      <ReusableAlertDialog
+        open={IsUpdatingProfile}
+        onCancel={() => setIsUpdatingProfile(false)}
+        onConfirm={handleUpdateProfile}
+        title={t("updateProfile")}
+        description={t("youNeedToUpdateProfile")}
+        confirmText={t("yes")}
+      />
+
+      {!isLargeScreen && (
+        <ReusableAlertDialog
+          open={manageDeleteAccount?.IsDeleteAccount}
+          onCancel={() =>
+            setManageDeleteAccount((prev) => ({
+              ...prev,
+              IsDeleteAccount: false,
+            }))
+          }
+          onConfirm={handleDeleteAcc}
+          title={t("areYouSure")}
+          description={
+            <ul className="list-disc list-inside mt-2">
+              <li>{t("adsAndTransactionWillBeDeleted")}</li>
+              <li>{t("accountsDetailsWillNotRecovered")}</li>
+              <li>{t("subWillBeCancelled")}</li>
+              <li>{t("savedMesgWillBeLost")}</li>
+            </ul>
+          }
+          cancelText={t("cancel")}
+          confirmText={t("yes")}
+          confirmDisabled={manageDeleteAccount?.IsDeleting}
+        />
+      )}
+
+      <LocationModal
+        key={`${IsLocationModalOpen}-location-modal`}
+        IsLocationModalOpen={IsLocationModalOpen}
+        setIsLocationModalOpen={setIsLocationModalOpen}
+      />
+      <UnauthorizedModal />
+      <DeleteAccountVerifyOtpModal
+        isOpen={IsVerifyOtpBeforeDelete}
+        setIsOpen={setIsVerifyOtpBeforeDelete}
+        key={`${IsVerifyOtpBeforeDelete}-delete-account-verify-otp-modal`}
+        pathname={pathname}
+        navigate={navigate}
+      />
+    </>
+  );
+};
+
+export default HomeHeader;
diff --git a/components/PagesComponent/Home/HomeMobileMenu.jsx b/components/PagesComponent/Home/HomeMobileMenu.jsx
new file mode 100644
index 0000000..6d6a4af
--- /dev/null
+++ b/components/PagesComponent/Home/HomeMobileMenu.jsx
@@ -0,0 +1,260 @@
+"use client";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { t } from "@/utils";
+import { useState } from "react";
+import { GiHamburgerMenu } from "react-icons/gi";
+import LanguageDropdown from "../../Common/LanguageDropdown";
+import { GrLocation } from "react-icons/gr";
+import {
+  IoIosAddCircleOutline,
+  IoMdNotificationsOutline,
+} from "react-icons/io";
+import { setIsLoginOpen } from "@/redux/reducer/globalStateSlice";
+import { usePathname } from "next/navigation";
+import CustomImage from "@/components/Common/CustomImage";
+import { Loader2 } from "lucide-react";
+import { useSelector } from "react-redux";
+import { userSignUpData } from "@/redux/reducer/authSlice";
+import CustomLink from "@/components/Common/CustomLink";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { BiChat, BiDollarCircle, BiReceipt, BiTrashAlt } from "react-icons/bi";
+import { LiaAdSolid } from "react-icons/lia";
+import { LuHeart } from "react-icons/lu";
+import { MdOutlineRateReview, MdWorkOutline } from "react-icons/md";
+import { RiLogoutCircleLine } from "react-icons/ri";
+import { settingsData } from "@/redux/reducer/settingSlice";
+import FilterTree from "@/components/Filter/FilterTree";
+
+const HomeMobileMenu = ({
+  setIsLocationModalOpen,
+  setIsRegisterModalOpen,
+  setIsLogout,
+  locationText,
+  handleAdListing,
+  IsAdListingClicked,
+  setManageDeleteAccount,
+}) => {
+  const UserData = useSelector(userSignUpData);
+  const settings = useSelector(settingsData);
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const pathname = usePathname();
+
+  const showMenu = !!UserData;
+  const showCategories = !pathname.startsWith("/ads");
+
+  const openLocationEditModal = () => {
+    setIsOpen(false);
+    setIsLocationModalOpen(true);
+  };
+
+  const handleLogin = () => {
+    setIsOpen(false);
+    setIsLoginOpen(true);
+  };
+
+  const handleRegister = () => {
+    setIsOpen(false);
+    setIsRegisterModalOpen(true);
+  };
+
+  const handleSignOut = () => {
+    setIsOpen(false);
+    setIsLogout(true);
+  };
+
+  const handleDeleteAccount = () => {
+    setIsOpen(false);
+    setManageDeleteAccount((prev) => ({
+      ...prev,
+      IsDeleteAccount: true,
+    }));
+  };
+
+  // All user links
+  const navItems = (
+    <div className="flex flex-col px-4 pb-4">
+      <CustomLink
+        href="/notifications"
+        className="flex items-center gap-1 py-4"
+      >
+        <IoMdNotificationsOutline size={24} />
+        <span>{t("notifications")}</span>
+      </CustomLink>
+      <CustomLink href="/chat" className="flex items-center gap-1 py-4">
+        <BiChat size={24} />
+        <span>{t("chat")}</span>
+      </CustomLink>
+      <CustomLink
+        href="/user-subscription"
+        className="flex items-center gap-1 py-4"
+      >
+        <BiDollarCircle size={24} />
+        <span>{t("subscription")}</span>
+      </CustomLink>
+      <CustomLink href="/my-ads" className="flex items-center gap-1 py-4">
+        <LiaAdSolid size={24} />
+        <span>{t("myAds")}</span>
+      </CustomLink>
+      <CustomLink href="/favorites" className="flex items-center gap-1 py-4">
+        <LuHeart size={24} />
+        <span>{t("favorites")}</span>
+      </CustomLink>
+      <CustomLink href="/transactions" className="flex items-center gap-1 py-4">
+        <BiReceipt size={24} />
+        <span>{t("transaction")}</span>
+      </CustomLink>
+      <CustomLink href="/reviews" className="flex items-center gap-1 py-4">
+        <MdOutlineRateReview size={24} />
+        <span>{t("myReviews")}</span>
+      </CustomLink>
+      <CustomLink
+        href="/job-applications"
+        className="flex items-center gap-1 py-4"
+      >
+        <MdWorkOutline size={24} />
+        <span>{t("jobApplications")}</span>
+      </CustomLink>
+      <button onClick={handleSignOut} className="flex items-center gap-1 py-4">
+        <RiLogoutCircleLine size={24} />
+        <span>{t("signOut")}</span>
+      </button>
+      <button
+        onClick={handleDeleteAccount}
+        className="flex items-center gap-1 text-destructive py-4"
+      >
+        <BiTrashAlt size={24} />
+        <span>{t("deleteAccount")}</span>
+      </button>
+    </div>
+  );
+
+  return (
+    <Sheet open={isOpen} onOpenChange={setIsOpen} className="lg:hidden">
+      <SheetTrigger asChild className="lg:hidden">
+        <button
+          id="hamburg"
+          className="text-2xl cursor-pointer border rounded-lg p-1"
+        >
+          <GiHamburgerMenu size={25} className="text-primary" />
+        </button>
+      </SheetTrigger>
+      <SheetContent className="[&>button:first-child]:hidden] p-0 overflow-y-auto">
+        <SheetHeader className="p-4 border-b border">
+          <SheetTitle>
+            <CustomImage
+              src={settings?.header_logo}
+              width={195}
+              height={92}
+              alt="Logo"
+              className="w-full h-[52px] object-contain ltr:object-left rtl:object-right max-w-[195px]"
+            />
+          </SheetTitle>
+          <SheetDescription className="sr-only"></SheetDescription>
+        </SheetHeader>
+        <div className="p-4 flex flex-col gap-4">
+          <div className="flex items-center justify-between gap-3">
+            {UserData ? (
+              <CustomLink href="/profile" className="flex items-center gap-2">
+                <CustomImage
+                  src={UserData?.profile}
+                  width={48}
+                  height={48}
+                  alt={UserData?.name}
+                  className="rounded-full size-12 aspect-square object-cover border"
+                  onClick={() => setIsOpen(false)}
+                />
+                <p
+                  className="line-clamp-2"
+                  title={UserData?.name}
+                  onClick={() => setIsOpen(false)}
+                >
+                  {UserData?.name}
+                </p>
+              </CustomLink>
+            ) : (
+              <div className="flex items-center gap-2">
+                <button onClick={handleLogin}>{t("login")}</button>
+                <span className="border-l h-6 self-center"></span>
+                <button onClick={handleRegister}>{t("register")}</button>
+              </div>
+            )}
+            <div className="flex-shrink-0">
+              <LanguageDropdown />
+            </div>
+          </div>
+
+          <div
+            className="flex items-center gap-1 cursor-pointer"
+            onClick={openLocationEditModal}
+          >
+            <GrLocation size={16} className="flex-shrink-0" />
+            <p
+              className="line-clamp-2"
+              title={locationText ? locationText : t("addLocation")}
+            >
+              {locationText ? locationText : t("addLocation")}
+            </p>
+          </div>
+
+          <button
+            className="flex items-center justify-center gap-2 bg-primary py-2 px-3 text-white rounded-md"
+            disabled={IsAdListingClicked}
+            onClick={handleAdListing}
+          >
+            {IsAdListingClicked ? (
+              <Loader2 size={18} className="animate-spin" />
+            ) : (
+              <IoIosAddCircleOutline size={18} />
+            )}
+            <span>{t("adListing")}</span>
+          </button>
+        </div>
+
+        {showMenu && showCategories ? (
+          <Tabs defaultValue="menu">
+            <TabsList className="flex items-center justify-between bg-muted rounded-none">
+              <TabsTrigger
+                value="menu"
+                className="flex-1 data-state-active:bg-primary"
+              >
+                {t("menu")}
+              </TabsTrigger>
+              <TabsTrigger
+                value="categories"
+                className="flex-1 data-state-active:bg-primary"
+              >
+                {t("multipleCategories")}
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="menu">
+              {navItems}
+            </TabsContent>
+
+            <TabsContent value="categories" className="mt-4 px-4 pb-4">
+              <FilterTree />
+            </TabsContent>
+          </Tabs>
+        ) : showMenu ? (
+          navItems
+        ) : showCategories ? (
+          <div className="px-4 pb-4 flex flex-col gap-4">
+            <h1 className="font-medium">{t("multipleCategories")}</h1>
+            <FilterTree />
+          </div>
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default HomeMobileMenu;
diff --git a/components/PagesComponent/Home/OfferSlider.jsx b/components/PagesComponent/Home/OfferSlider.jsx
new file mode 100644
index 0000000..69029b9
--- /dev/null
+++ b/components/PagesComponent/Home/OfferSlider.jsx
@@ -0,0 +1,124 @@
+"use client";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { useEffect, useState } from "react";
+import { RiArrowLeftLine, RiArrowRightLine } from "react-icons/ri";
+import Autoplay from "embla-carousel-autoplay";
+import { userSignUpData } from "@/redux/reducer/authSlice";
+import { useSelector } from "react-redux";
+import CustomLink from "@/components/Common/CustomLink";
+import { getIsRtl } from "@/redux/reducer/languageSlice";
+import CustomImage from "@/components/Common/CustomImage";
+
+const OfferSlider = ({ Slider }) => {
+  const [api, setApi] = useState();
+  const [current, setCurrent] = useState(0);
+  const userData = useSelector(userSignUpData);
+  const isRTL = useSelector(getIsRtl);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    setCurrent(api.selectedScrollSnap());
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  return (
+    <section className="py-6 bg-muted">
+      <div className="container">
+        <Carousel
+          key={isRTL ? "rtl" : "ltr"}
+          className="w-full"
+          setApi={setApi}
+          opts={{
+            align: "start",
+            containScroll: "trim",
+            direction: isRTL ? "rtl" : "ltr",
+          }}
+          plugins={[Autoplay({ delay: 3000 })]}
+        >
+          <CarouselContent className="-ml-3 md:-ml-[30px]">
+            {Slider.map((ele, index) => {
+              let href;
+              if (ele?.model_type === "App\\Models\\Item") {
+                if (userData && userData?.id === ele?.model?.user_id) {
+                  href = `/my-listing/${ele?.model?.slug}`;
+                } else {
+                  href = `/ad-details/${ele?.model?.slug}`;
+                }
+              } else if (ele?.model_type === null) {
+                href = ele?.third_party_link;
+              } else if (ele?.model_type === "App\\Models\\Category") {
+                href = `/ads?category=${ele.model.slug}`;
+              } else {
+                href = "/";
+              }
+              // First 2 images load with eager loading and priority for Lighthouse performance
+              const isPriorityImage = index < 2;
+              return (
+                <CarouselItem
+                  className="basis-full md:basis-2/3 pl-3 md:pl-[30px]"
+                  key={ele?.id}
+                >
+                  <CustomLink
+                    href={href}
+                    target={ele?.model_type === null ? "_blank" : ""}
+                  >
+                    <CustomImage
+                      src={ele.image}
+                      alt="slider imag"
+                      width={983}
+                      height={493}
+                      className="aspect-[983/493] w-full object-cover rounded-xl"
+                      loading={isPriorityImage ? "eager" : "lazy"}
+                      priority={isPriorityImage}
+                    />
+                  </CustomLink>
+                </CarouselItem>
+              );
+            })}
+          </CarouselContent>
+
+          {Slider && Slider?.length > 1 && (
+            <>
+              <button
+                onClick={() => api?.scrollTo(current - 1)}
+                className={`sm:block absolute z-10 top-1/2 -translate-y-1/2 ltr:left-2 rtl:right-2 bg-primary p-1 md:p-2 rounded-full ${
+                  !api?.canScrollPrev() ? "cursor-default" : ""
+                }`}
+                disabled={!api?.canScrollPrev()}
+              >
+                <RiArrowLeftLine
+                  size={24}
+                  color="white"
+                  className={isRTL ? "rotate-180" : ""}
+                />
+              </button>
+              <button
+                onClick={() => api?.scrollTo(current + 1)}
+                className={`sm:block absolute z-10 top-1/2 -translate-y-1/2 ltr:right-2 rtl:left-2 bg-primary p-1 md:p-2 rounded-full ${
+                  !api?.canScrollNext() ? "cursor-default" : ""
+                }`}
+                disabled={!api?.canScrollNext()}
+              >
+                <RiArrowRightLine
+                  size={24}
+                  color="white"
+                  className={isRTL ? "rotate-180" : ""}
+                />
+              </button>
+            </>
+          )}
+        </Carousel>
+      </div>
+    </section>
+  );
+};
+
+export default OfferSlider;
diff --git a/components/PagesComponent/Home/OfferSliderSkeleton.jsx b/components/PagesComponent/Home/OfferSliderSkeleton.jsx
new file mode 100644
index 0000000..8648570
--- /dev/null
+++ b/components/PagesComponent/Home/OfferSliderSkeleton.jsx
@@ -0,0 +1,23 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+const OfferSliderSkeleton = () => {
+  return (
+    <section className="py-6 bg-muted">
+      <div className="container overflow-hidden">
+        <div className="grid grid-cols-1 md:grid-cols-[66.66%_66.66%] gap-4">
+          {Array.from({ length: 2 }).map((_, index) => (
+            <Skeleton
+              className={`${
+                index === 1 ? "hidden md:block" : ""
+              } aspect-[983/493] w-full rounded-xl`}
+              key={index}
+              height={493}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default OfferSliderSkeleton;
diff --git a/components/PagesComponent/Home/PopularCategories.jsx b/components/PagesComponent/Home/PopularCategories.jsx
new file mode 100644
index 0000000..a816e46
--- /dev/null
+++ b/components/PagesComponent/Home/PopularCategories.jsx
@@ -0,0 +1,123 @@
+"use client";
+import { useEffect, useState } from "react";
+import { RiArrowLeftLine, RiArrowRightLine } from "react-icons/ri";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import PopularCategoriesSkeleton from "./PopularCategoriesSkeleton.jsx";
+import PopularCategoryCard from "@/components/PagesComponent/Home/PopularCategoryCard";
+import { useSelector } from "react-redux";
+import { t } from "@/utils";
+import { getIsRtl } from "@/redux/reducer/languageSlice.js";
+import { Loader2 } from "lucide-react";
+import useGetCategories from "@/components/Layout/useGetCategories.jsx";
+
+const PopularCategories = () => {
+  const {
+    cateData,
+    getCategories,
+    isCatLoading,
+    isCatLoadMore,
+    catLastPage,
+    catCurrentPage,
+  } = useGetCategories();
+
+  const isRTL = useSelector(getIsRtl);
+  const [api, setApi] = useState();
+  const [current, setCurrent] = useState(0);
+  const isNextDisabled =
+    isCatLoadMore ||
+    ((!api || !api.canScrollNext()) && catCurrentPage >= catLastPage);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    setCurrent(api.selectedScrollSnap());
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api, cateData.length]);
+
+  const handleNext = async () => {
+    if (api && api.canScrollNext()) {
+      api.scrollTo(current + 1);
+    } else if (catCurrentPage < catLastPage) {
+      await getCategories(catCurrentPage + 1);
+      setTimeout(() => {
+        api.scrollTo(current + 1);
+      }, 200);
+    }
+  };
+
+  return isCatLoading && !cateData.length ? (
+    <PopularCategoriesSkeleton />
+  ) : (
+    cateData && cateData.length > 0 && (
+      <section className="container mt-12">
+        <div className="space-between">
+          <h5 className="text-xl sm:text-2xl font-medium">
+            {t("popularCategories")}
+          </h5>
+          <div className="flex items-center justify-center gap-2 sm:gap-4">
+            <button
+              onClick={() => api && api.scrollTo(current - 1)}
+              className={`bg-primary p-1 sm:p-2 rounded-full ${
+                !api?.canScrollPrev() ? "opacity-65 cursor-default" : ""
+              }`}
+              disabled={!api?.canScrollPrev()}
+            >
+              <RiArrowLeftLine
+                size={24}
+                color="white"
+                className={isRTL ? "rotate-180" : ""}
+              />
+            </button>
+            <button
+              onClick={handleNext}
+              className={`bg-primary p-1 sm:p-2 rounded-full ${
+                isNextDisabled ? "opacity-65 cursor-default" : ""
+              }`}
+              disabled={isNextDisabled}
+            >
+              {isCatLoadMore ? (
+                <Loader2 size={24} className="animate-spin" />
+              ) : (
+                <RiArrowRightLine
+                  size={24}
+                  color="white"
+                  className={isRTL ? "rotate-180" : ""}
+                />
+              )}
+            </button>
+          </div>
+        </div>
+        <Carousel
+          key={isRTL ? "rtl" : "ltr"}
+          className="w-full mt-6"
+          setApi={setApi}
+          opts={{
+            align: "start",
+            containScroll: "trim",
+            direction: isRTL ? "rtl" : "ltr",
+          }}
+        >
+          <CarouselContent className="-ml-3 md:-ml-[30px]">
+            {cateData.map((item) => (
+              <CarouselItem
+                key={item?.id}
+                className="basis-1/3 sm:basis-1/4 md:basis-1/5 lg:basis-[16.66%] xl:basis-[12.5%] 2xl:basis-[11.11%] md:pl-[30px]"
+              >
+                <PopularCategoryCard item={item} />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </section>
+    )
+  );
+};
+
+export default PopularCategories;
diff --git a/components/PagesComponent/Home/PopularCategoriesSkeleton.jsx b/components/PagesComponent/Home/PopularCategoriesSkeleton.jsx
new file mode 100644
index 0000000..d891929
--- /dev/null
+++ b/components/PagesComponent/Home/PopularCategoriesSkeleton.jsx
@@ -0,0 +1,38 @@
+import { Carousel, CarouselContent, CarouselItem } from "../../ui/carousel";
+import { Skeleton } from "../../ui/skeleton";
+
+const PopularCategoriesSkeleton = () => {
+  return (
+    <>
+      <div className="container mt-12">
+        <div className="space-between">
+          <Skeleton className="w-1/4 h-4" />
+          <Skeleton className="w-1/12 h-4" />
+        </div>
+        <Carousel
+          className="w-full mt-6"
+          opts={{
+            align: "start",
+            containScroll: "trim",
+          }}
+        >
+          <CarouselContent className="-ml-3 md:-ml-[30px]">
+            {Array.from({ length: 9 }).map((_, index) => (
+              <CarouselItem
+                key={index}
+                className="basis-1/3 sm:basis-1/4 md:basis-1/5 lg:basis-[16.66%] xl:basis-[12.5%] 2xl:basis-[11.11%] md:pl-[30px]"
+              >
+                <div className="flex flex-col gap-4">
+                  <Skeleton className="w-full aspect-square rounded-full" />
+                  <Skeleton className="w-full h-4" />
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </div>
+    </>
+  );
+};
+
+export default PopularCategoriesSkeleton;
diff --git a/components/PagesComponent/Home/PopularCategoryCard.jsx b/components/PagesComponent/Home/PopularCategoryCard.jsx
new file mode 100644
index 0000000..3a56b33
--- /dev/null
+++ b/components/PagesComponent/Home/PopularCategoryCard.jsx
@@ -0,0 +1,28 @@
+import CustomLink from "@/components/Common/CustomLink";
+import CustomImage from "@/components/Common/CustomImage";
+
+const PopularCategoryCard = ({ item }) => {
+  return (
+    <CustomLink
+      href={`/ads?category=${item?.slug}`}
+      className="flex flex-col gap-4"
+    >
+      <div className="border p-2.5 rounded-full">
+        <CustomImage
+          src={item?.image}
+          width={96}
+          height={96}
+          className="aspect-square w-full rounded-full"
+          alt="Category"
+          loading="eager"
+        />
+      </div>
+
+      <p className="text-sm sm:text-base line-clamp-2 font-medium text-center leading-tight">
+        {item?.translated_name}
+      </p>
+    </CustomLink>
+  );
+};
+
+export default PopularCategoryCard;
diff --git a/components/PagesComponent/Home/ProfileDropdown.jsx b/components/PagesComponent/Home/ProfileDropdown.jsx
new file mode 100644
index 0000000..5313c7e
--- /dev/null
+++ b/components/PagesComponent/Home/ProfileDropdown.jsx
@@ -0,0 +1,121 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { userSignUpData } from "@/redux/reducer/authSlice";
+import { t, truncate } from "@/utils";
+import { useSelector } from "react-redux";
+import { FiUser } from "react-icons/fi";
+import { IoMdNotificationsOutline } from "react-icons/io";
+import { BiChat, BiDollarCircle, BiReceipt } from "react-icons/bi";
+import { LiaAdSolid } from "react-icons/lia";
+import { LuHeart } from "react-icons/lu";
+import { MdOutlineRateReview, MdWorkOutline } from "react-icons/md";
+import { RiLogoutCircleLine } from "react-icons/ri";
+import { FaAngleDown } from "react-icons/fa";
+import { useMediaQuery } from "usehooks-ts";
+import CustomImage from "@/components/Common/CustomImage";
+import { useNavigate } from "@/components/Common/useNavigate";
+
+const ProfileDropdown = ({ IsLogout, setIsLogout }) => {
+  const isSmallScreen = useMediaQuery("(max-width: 1200px)");
+  const { navigate } = useNavigate();
+  const UserData = useSelector(userSignUpData);
+  return (
+    <DropdownMenu key={IsLogout}>
+      <DropdownMenuTrigger className="flex items-center gap-1">
+        <CustomImage
+          src={UserData?.profile}
+          alt={UserData?.name}
+          width={32}
+          height={32}
+          className="rounded-full w-8 h-8 aspect-square object-cover border"
+        />
+        <p>{truncate(UserData.name, 12)}</p>
+        <FaAngleDown className="text-muted-foreground flex-shrink-0" size={12} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={isSmallScreen ? "start" : "center"}>
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={() => navigate("/profile")}
+        >
+          <FiUser size={16} />
+          <span>{t("myProfile")}</span>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={() => navigate("/notifications")}
+        >
+          <IoMdNotificationsOutline size={16} />
+          {t("notification")}
+        </DropdownMenuItem>
+
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={() => navigate("/chat")}
+        >
+          <BiChat size={16} />
+          {t("chat")}
+        </DropdownMenuItem>
+
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={() => navigate("/user-subscription")}
+        >
+          <BiDollarCircle size={16} />
+          {t("subscription")}
+        </DropdownMenuItem>
+
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={() => navigate("/my-ads")}
+        >
+          <LiaAdSolid size={16} />
+          {t("myAds")}
+        </DropdownMenuItem>
+
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={() => navigate("/favorites")}
+        >
+          <LuHeart size={16} />
+          {t("favorites")}
+        </DropdownMenuItem>
+
+        <DropdownMenuItem onClick={() => navigate("/transactions")}>
+          <BiReceipt size={16} />
+          {t("transaction")}
+        </DropdownMenuItem>
+
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={() => navigate("/reviews")}
+        >
+          <MdOutlineRateReview size={16} />
+          {t("myReviews")}
+        </DropdownMenuItem>
+
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={() => navigate("/job-applications")}
+        >
+          <MdWorkOutline size={16} />
+          {t("jobApplications")}
+        </DropdownMenuItem>
+
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={() => setIsLogout(true)}
+        >
+          <RiLogoutCircleLine size={16} />
+          {t("signOut")}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default ProfileDropdown;
diff --git a/components/PagesComponent/Home/Search.jsx b/components/PagesComponent/Home/Search.jsx
new file mode 100644
index 0000000..0908b70
--- /dev/null
+++ b/components/PagesComponent/Home/Search.jsx
@@ -0,0 +1,156 @@
+"use client";
+import { Check, ChevronsUpDown, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useEffect, useState } from "react";
+import { useInView } from "react-intersection-observer";
+import { t } from "@/utils";
+import { BiPlanet } from "react-icons/bi";
+import { FaSearch } from "react-icons/fa";
+import { usePathname } from "next/navigation";
+import { useNavigate } from "@/components/Common/useNavigate";
+import useGetCategories from "@/components/Layout/useGetCategories";
+
+const Search = () => {
+  const {
+    cateData,
+    getCategories,
+    isCatLoadMore,
+    catLastPage,
+    catCurrentPage,
+  } = useGetCategories();
+
+  const pathname = usePathname();
+  const { navigate } = useNavigate();
+  const categoryList = [
+    { slug: "all-categories", translated_name: t("allCategories") },
+    ...cateData,
+  ];
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState("all-categories");
+  const selectedItem = categoryList.find((item) => item.slug === value);
+  const hasMore = catCurrentPage < catLastPage;
+  const { ref, inView } = useInView();
+  const [searchQuery, setSearchQuery] = useState("");
+
+  useEffect(() => {
+    if (open && inView && hasMore && !isCatLoadMore) {
+      getCategories(catCurrentPage + 1);
+    }
+  }, [hasMore, inView, isCatLoadMore, open]);
+
+  const handleSearchNav = (e) => {
+    e.preventDefault();
+
+    const query = encodeURIComponent(searchQuery);
+
+    // Build the base URL with query and language
+    const baseUrl = `/ads?query=${query}`;
+
+    // Add category parameter if not "all-categories"
+    const url =
+      selectedItem?.slug === "all-categories"
+        ? baseUrl
+        : `/ads?category=${selectedItem?.slug}&query=${query}`;
+
+    // Use consistent navigation method
+    if (pathname === "/ads") {
+      // If already on ads page, use history API to avoid full page reload
+      window.history.pushState(null, "", url);
+    } else {
+      // If on different page, use router for navigation
+      navigate(url);
+    }
+  };
+
+  return (
+    <>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="min-w-[125px] max-w-[125px] sm:min-w-[156px] sm:max-w-[156px] py-1 px-1.5 sm:py-2 sm:px-3 justify-between border-none hover:bg-transparent font-normal"
+          >
+            <span className="truncate">
+              {selectedItem?.translated_name || t("selectCat")}
+            </span>
+            <ChevronsUpDown className="opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-[200px] p-0">
+          <Command>
+            <CommandInput placeholder={t("searchACategory")} />
+            <CommandList>
+              <CommandEmpty>{t("noCategoryFound")}</CommandEmpty>
+              <CommandGroup>
+                {categoryList.map((category, index) => {
+                  const isLast = open && index === categoryList.length - 1;
+                  return (
+                    <CommandItem
+                      key={category?.slug}
+                      value={category?.slug}
+                      onSelect={(currentValue) => {
+                        setValue(currentValue);
+                        setOpen(false);
+                      }}
+                      ref={isLast ? ref : null}
+                    >
+                      {category.translated_name || category?.name}
+                      <Check
+                        className={cn(
+                          "ml-auto",
+                          value === category.slug ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+              {isCatLoadMore && (
+                <div className="flex justify-center items-center pb-2 text-muted-foreground">
+                  <Loader2 className="animate-spin" />
+                </div>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      <form
+        onSubmit={handleSearchNav}
+        className="w-full flex items-center gap-2 ltr:border-l rtl:border-r py-1 px-1.5 sm:py-2 sm:px-3"
+      >
+        <BiPlanet color="#595B6C" className="min-w-4 min-h-4" />
+        <input
+          type="text"
+          placeholder={t("searchAd")}
+          className="text-sm outline-none w-full"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+        <button
+          className="flex items-center gap-2 bg-primary text-white p-2 rounded"
+          type="submit"
+        >
+          <FaSearch size={14} />
+        </button>
+      </form>
+    </>
+  );
+};
+
+export default Search;
diff --git a/components/PagesComponent/JobApplications/JobApplications.jsx b/components/PagesComponent/JobApplications/JobApplications.jsx
new file mode 100644
index 0000000..23508d3
--- /dev/null
+++ b/components/PagesComponent/JobApplications/JobApplications.jsx
@@ -0,0 +1,150 @@
+"use client";
+import { formatDateMonthYear, t } from "@/utils";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import NoData from "@/components/EmptyStates/NoData";
+import { Badge } from "@/components/ui/badge";
+import JobApplicationSkeleton from "@/components/Skeletons/JobApplicationSkeleton";
+import { toast } from "sonner";
+import Pagination from "@/components/Common/Pagination";
+import { getMyJobApplicationsList } from "@/utils/api";
+import CustomLink from "@/components/Common/CustomLink";
+
+const JobApplications = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [jobApplication, setJobApplication] = useState({
+    data: [],
+    currentPage: 1,
+    totalItems: 0,
+    perPage: 15,
+    totalPages: 0,
+    isLoading: false,
+  });
+
+  useEffect(() => {
+    fetchJobApplicationsData(1);
+  }, [jobApplication?.currentPage, CurrentLanguage.code]);
+
+  const fetchJobApplicationsData = async (page) => {
+    try {
+      setJobApplication((prev) => ({ ...prev, isLoading: true }));
+      const response = await getMyJobApplicationsList.getMyJobApplications({
+        page,
+      });
+      if (response.data.error === false) {
+        setJobApplication((prev) => ({
+          ...prev,
+          data: response?.data?.data?.data,
+          totalItems: response?.data?.data?.total,
+          perPage: response?.data?.data?.per_page,
+          totalPages: response?.data?.data?.last_page,
+          currentPage: response?.data?.data?.current_page,
+        }));
+      } else {
+        toast.error(response.data.message);
+      }
+    } catch (error) {
+      console.error("Error:", error);
+    } finally {
+      setJobApplication((prev) => ({ ...prev, isLoading: false }));
+    }
+  };
+
+  const handlePageChange = (page) => {
+    setJobApplication((prev) => ({ ...prev, currentPage: page }));
+  };
+
+  const getStatusBadge = (status) => {
+    switch (status) {
+      case "pending":
+        return <Badge className="bg-yellow-500">{t("pending")}</Badge>;
+      case "accepted":
+        return <Badge className="bg-green-600">{t("accepted")}</Badge>;
+      case "rejected":
+        return <Badge className="bg-red-500">{t("rejected")}</Badge>;
+      default:
+        return <Badge>{status}</Badge>;
+    }
+  };
+
+
+
+
+  return (
+    <>
+      {jobApplication?.isLoading ? (
+        <JobApplicationSkeleton />
+      ) : jobApplication?.data?.length > 0 ? (
+        <>
+          <div className="overflow-hidden border rounded-md">
+            <Table>
+              <TableHeader className="bg-muted">
+                <TableRow className="text-xs sm:text-sm">
+                  <TableHead>{t("jobTitle")}</TableHead>
+                  <TableHead>{t("recruiter")}</TableHead>
+                  <TableHead>{t("status")}</TableHead>
+                  <TableHead>{t("appliedDate")}</TableHead>
+                  <TableHead>{t("resume")}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody className="text-xs sm:text-sm">
+                {jobApplication?.data?.map((application) => (
+                  <TableRow
+                    key={application?.id}
+                    className="hover:bg-muted text-center"
+                  >
+                    <TableCell>{application.item?.translated_name || "-"}</TableCell>
+                    <TableCell>{application.recruiter?.name || "-"}</TableCell>
+                    <TableCell>
+                      {getStatusBadge(application.status || "Pending")}
+                    </TableCell>
+                    <TableCell>
+                      {formatDateMonthYear(application.created_at)}
+                    </TableCell>
+                    <TableCell>
+                      {application?.resume ? (
+                        <CustomLink
+                          href={application?.resume}
+                          target="_blank"
+                          className="text-primary underline font-medium"
+                          rel="noopener noreferrer"
+                        >
+                          {t("viewResume")}
+                        </CustomLink>
+                      ) : (
+                        <span className="text-muted-foreground italic text-sm">
+                          {t("notAvailable")}
+                        </span>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            <div className="flex justify-end items-center mb-2">
+              <Pagination
+                className="mt-7"
+                currentPage={jobApplication?.currentPage}
+                totalPages={jobApplication?.totalPages}
+                onPageChange={handlePageChange}
+              />
+            </div>
+          </div>
+        </>
+      ) : (
+        <NoData name={t("jobApplications")} />
+      )}
+    </>
+  );
+};
+
+export default JobApplications;
diff --git a/components/PagesComponent/LandingPage/AnythingYouWant.jsx b/components/PagesComponent/LandingPage/AnythingYouWant.jsx
new file mode 100644
index 0000000..c47a753
--- /dev/null
+++ b/components/PagesComponent/LandingPage/AnythingYouWant.jsx
@@ -0,0 +1,172 @@
+"use client";
+import { t } from "@/utils";
+import { useEffect, useState } from "react";
+import { IoSearchOutline } from "react-icons/io5";
+import Img1 from "../../../public/assets/Image1.png";
+import Img2 from "../../../public/assets/Image2.png";
+import Img3 from "../../../public/assets/Image3.png";
+import Img4 from "../../../public/assets/Image4.png";
+import Img5 from "../../../public/assets/Image5.png";
+import Img6 from "../../../public/assets/Image6.png";
+import {
+  getCityData,
+  getIsBrowserSupported,
+  getKilometerRange,
+  saveCity,
+} from "@/redux/reducer/locationSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import LocationModal from "../../Location/LocationModal";
+import { toast } from "sonner";
+import { FaLocationCrosshairs } from "react-icons/fa6";
+import { getCompanyName } from "@/redux/reducer/settingSlice";
+import CustomLink from "@/components/Common/CustomLink";
+import { ArrowRight } from "lucide-react";
+import { setIsVisitedLandingPage } from "@/redux/reducer/globalStateSlice";
+import CustomImage from "@/components/Common/CustomImage";
+import { useNavigate } from "@/components/Common/useNavigate";
+import LandingAdEditSearchAutocomplete from "@/components/Location/LandingAdEditSearchAutocomplete";
+
+const AnythingYouWant = () => {
+  const dispatch = useDispatch();
+  const { navigate } = useNavigate();
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const LocationData = useSelector(getCityData);
+  const companyName = useSelector(getCompanyName);
+  const [selectedCity, setSelectedCity] = useState(LocationData);
+  const IsBrowserSupported = useSelector(getIsBrowserSupported);
+  const [IsLocationModalOpen, setIsLocationModalOpen] = useState(false);
+  const KmRange = useSelector(getKilometerRange);
+
+  useEffect(() => {
+    dispatch(setIsVisitedLandingPage(true));
+  }, []);
+
+  const handleSearchLocation = () => {
+    const isInvalidLocation =
+      KmRange > 0
+        ? !selectedCity?.lat || !selectedCity?.long
+        : !selectedCity?.areaId &&
+          !selectedCity?.city &&
+          !selectedCity?.state &&
+          !selectedCity?.country;
+
+    if (isInvalidLocation) {
+      toast.error(t("pleaseSelectLocation"));
+      return;
+    }
+
+    saveCity(selectedCity);
+    navigate("/");
+  };
+
+  return (
+    <>
+      <section
+        id="anythingYouWant"
+        className="py-28 bg-muted flex items-center justify-center"
+      >
+        <div className="container relative">
+          <div className="flex flex-col items-center gap-6 text-center">
+            <div className="flex flex-col items-center font-bold text-4xl lg:text-5xl gap-3 relative">
+              <h1 className="flex flex-column items-center relative z-10 after:content-[''] after:absolute after:bg-[#00b2ca] after:h-[40%] after:w-full after:z-[-1] after:bottom-0">
+                {t("buySell")}
+              </h1>
+              <h1>{t("anythingYouWant")}</h1>
+            </div>
+            <p className="text-sm font-light md:w-1/2">
+              {t("discoverEndlessPossibilitiesAt")} {companyName}{" "}
+              {t("goToMarketplace")}
+            </p>
+            <div className="space-between gap-3 rounded border w-full lg:w-[60%] bg-white py-2 ltr:pr-2 rtl:pl-2 relative">
+              <LandingAdEditSearchAutocomplete
+                saveOnSuggestionClick={false}
+                setSelectedLocation={setSelectedCity}
+              />
+              <div className="flex items-center gap-3">
+                {IsBrowserSupported && (
+                  <button
+                    className="flex items-center gap-2"
+                    onClick={() => setIsLocationModalOpen(true)}
+                  >
+                    <FaLocationCrosshairs size={22} />
+                  </button>
+                )}
+                <button
+                  className="flex items-center gap-2 bg-primary px-3 py-[6px] rounded text-white"
+                  onClick={handleSearchLocation}
+                >
+                  <IoSearchOutline size={22} />
+                  <span className="hidden md:block">{t("search")}</span>
+                </button>
+              </div>
+              <CustomLink
+                href="/"
+                className="hidden sm:flex items-center gap-2 text-destructive"
+              >
+                <span className="whitespace-nowrap">{t("skip")}</span>
+                <ArrowRight size={16} className="rtl:scale-x-[-1]" />
+              </CustomLink>
+            </div>
+            <CustomLink
+              href="/"
+              className="sm:hidden flex items-center gap-2 text-destructive"
+            >
+              <span className="whitespace-nowrap">{t("skip")}</span>
+              <ArrowRight size={16} className="rtl:scale-x-[-1]" />
+            </CustomLink>
+          </div>
+          <CustomImage
+            src={Img1}
+            className="hidden xl:block absolute xl:-top-[38%] ltr:xl:left-[3%] rtl:xl:right-[3%] xl:w-[110px] rounded-full"
+            height={135}
+            width={90}
+            alt="landing page image 1"
+          />
+          <CustomImage
+            src={Img2}
+            className="hidden xl:block absolute xl:top-[38%] ltr:xl:left-[9%] rtl:xl:right-[9%] xl:w-[110px] rounded-full"
+            height={135}
+            width={90}
+            alt="landing page image 2"
+          />
+          <CustomImage
+            src={Img3}
+            className="hidden xl:block absolute xl:top-[120%] ltr:xl:left-[3%] rtl:xl:right-[3%] xl:w-[110px] rounded-full"
+            height={90}
+            width={90}
+            alt="landing page image 3"
+          />
+          <CustomImage
+            src={Img4}
+            className="hidden xl:block absolute xl:-top-[38%] ltr:xl:right-[3%] rtl:xl:left-[3%] xl:w-[110px] rounded-full"
+            height={135}
+            width={90}
+            alt="landing page image 4"
+          />
+          <CustomImage
+            src={Img5}
+            className="hidden xl:block absolute xl:top-[38%] ltr:xl:right-[9%] rtl:xl:left-[9%] xl:w-[110px] rounded-full"
+            height={90}
+            width={90}
+            alt="landing page image 5"
+          />
+          <CustomImage
+            src={Img6}
+            className="hidden xl:block absolute xl:top-[109%] ltr:xl:right-[3%] rtl:xl:left-[3%] xl:w-[110px] rounded-full"
+            height={0}
+            width={0}
+            alt="landing page image 6"
+          />
+        </div>
+      </section>
+      <LocationModal
+        key={`${IsLocationModalOpen}-location-modal`}
+        IsLocationModalOpen={IsLocationModalOpen}
+        setIsLocationModalOpen={setIsLocationModalOpen}
+      />
+    </>
+  );
+};
+
+export default AnythingYouWant;
diff --git a/components/PagesComponent/LandingPage/BlogCard.jsx b/components/PagesComponent/LandingPage/BlogCard.jsx
new file mode 100644
index 0000000..fa8df62
--- /dev/null
+++ b/components/PagesComponent/LandingPage/BlogCard.jsx
@@ -0,0 +1,37 @@
+"use client";
+import { FaArrowRight } from "react-icons/fa";
+import CustomLink from "@/components/Common/CustomLink";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+
+const BlogCard = ({ blog }) => {
+  return (
+    <div className="p-4 rounded-3xl flex flex-col gap-4 border  h-100 bg-white h-full">
+      <CustomImage
+        src={blog?.image}
+        alt="Blog image"
+        className="w-full object-cover rounded-[8px] aspect-[388/200]"
+        width={378}
+        height={195}
+      />
+      <h5 className="text-lg font-semibold truncate">
+        {blog?.translated_title || blog?.title}
+      </h5>
+      <p
+        className="opacity-65 line-clamp-2"
+        dangerouslySetInnerHTML={{
+          __html: blog?.translated_description || blog?.description,
+        }}
+      ></p>
+      <CustomLink
+        href={`/blogs/${blog?.slug}`}
+        className="flex items-center gap-3 text-primary text-lg mt-auto"
+      >
+        <span>{t("readArticle")}</span>
+        <FaArrowRight className="rtl:scale-x-[-1]" size={20} />
+      </CustomLink>
+    </div>
+  );
+};
+
+export default BlogCard;
diff --git a/components/PagesComponent/LandingPage/LandingHeader.jsx b/components/PagesComponent/LandingPage/LandingHeader.jsx
new file mode 100644
index 0000000..1e5ca5a
--- /dev/null
+++ b/components/PagesComponent/LandingPage/LandingHeader.jsx
@@ -0,0 +1,141 @@
+"use client";
+import { t } from "@/utils";
+import { useSelector } from "react-redux";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import { settingsData } from "@/redux/reducer/settingSlice";
+import LanguageDropdown from "../../Common/LanguageDropdown";
+import LandingMobileMenu from "@/components/PagesComponent/LandingPage/LandingMobileMenu";
+import { useState, useEffect } from "react";
+import CustomImage from "@/components/Common/CustomImage";
+import CustomLink from "@/components/Common/CustomLink";
+
+const LandingHeader = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const settings = useSelector(settingsData);
+  const [isShowMobileMenu, setIsShowMobileMenu] = useState(false);
+  const [activeSection, setActiveSection] = useState("anythingYouWant");
+
+  const handleMobileMenuClose = () => {
+    if (isShowMobileMenu) {
+      setIsShowMobileMenu(false);
+    }
+  };
+
+  // Intersection Observer to track which section is currently visible
+  useEffect(() => {
+    const sections = ["anythingYouWant", "work_process", "faq", "ourBlogs"];
+    const observerOptions = {
+      root: null,
+      rootMargin: "0px", // Trigger when section is 20% from top
+      threshold: 0.7,
+    };
+    const observerCallback = (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setActiveSection(entry.target.id);
+        }
+      });
+    };
+    const observer = new IntersectionObserver(
+      observerCallback,
+      observerOptions
+    );
+    // Observe all sections
+    sections.forEach((sectionId) => {
+      const element = document.getElementById(sectionId);
+      if (element) {
+        observer.observe(element);
+      }
+    });
+    // Cleanup observer on component unmount
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <>
+      <header className="sticky top-0 z-50 bg-white shadow-xs">
+        <nav className="shadow-md">
+          <div className="container py-5 lg:flex lg:items-center lg:justify-between">
+            <div className="flex w-100 items-center justify-between">
+              <CustomImage
+                src={settings?.header_logo}
+                className="w-full h-[52px] object-contain ltr:object-left rtl:object-right max-w-[195px]"
+                alt="logo"
+                width={195}
+                height={52}
+              />
+
+              <LandingMobileMenu
+                isOpen={isShowMobileMenu}
+                setIsOpen={setIsShowMobileMenu}
+                activeSection={activeSection}
+              />
+            </div>
+            <div className="hidden lg:flex gap-6">
+              <ul className="flex items-center gap-6">
+                <li>
+                  <CustomLink
+                    href="#anythingYouWant"
+                    className={`cursor-pointer transition-all duration-200 ${
+                      activeSection === "anythingYouWant"
+                        ? "text-primary"
+                        : "hover:text-primary"
+                    }`}
+                  >
+                    {t("home")}
+                  </CustomLink>
+                </li>
+                <li>
+                  <CustomLink
+                    href="#work_process"
+                    className={`cursor-pointer transition-all duration-200 ${
+                      activeSection === "work_process"
+                        ? "text-primary"
+                        : "hover:text-primary"
+                    }`}
+                    onClick={handleMobileMenuClose}
+                  >
+                    {t("whyChooseUs")}
+                  </CustomLink>
+                </li>
+                <li>
+                  <CustomLink
+                    href="#faq"
+                    className={`cursor-pointer transition-all duration-200 ${
+                      activeSection === "faq"
+                        ? "text-primary"
+                        : "hover:text-primary"
+                    }`}
+                    onClick={handleMobileMenuClose}
+                  >
+                    {t("faqs")}
+                  </CustomLink>
+                </li>
+                <li>
+                  <CustomLink
+                    href="#ourBlogs"
+                    className={`cursor-pointer transition-all duration-200 ${
+                      activeSection === "ourBlogs"
+                        ? "text-primary"
+                        : "hover:text-primary"
+                    }`}
+                    onClick={handleMobileMenuClose}
+                  >
+                    {t("blog")}
+                  </CustomLink>
+                </li>
+              </ul>
+            </div>
+            <div className="hidden lg:flex">
+              <LanguageDropdown />
+            </div>
+          </div>
+        </nav>
+      </header>
+    </>
+  );
+};
+
+export default LandingHeader;
diff --git a/components/PagesComponent/LandingPage/LandingMobileMenu.jsx b/components/PagesComponent/LandingPage/LandingMobileMenu.jsx
new file mode 100644
index 0000000..921672f
--- /dev/null
+++ b/components/PagesComponent/LandingPage/LandingMobileMenu.jsx
@@ -0,0 +1,103 @@
+"use client";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { settingsData } from "@/redux/reducer/settingSlice";
+import { t } from "@/utils";
+import { GiHamburgerMenu } from "react-icons/gi";
+import { useSelector } from "react-redux";
+import LanguageDropdown from "../../Common/LanguageDropdown";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import CustomImage from "@/components/Common/CustomImage";
+
+const LandingMobileMenu = ({ isOpen, setIsOpen, activeSection }) => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const settings = useSelector(settingsData);
+
+  const scrollToSection = (id) => {
+    const section = document.getElementById(id);
+    if (section) {
+      setIsOpen(false);
+      section.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
+  return (
+    <Sheet open={isOpen} onOpenChange={setIsOpen} className="lg:hidden">
+      <SheetTrigger asChild className="lg:hidden">
+        <button
+          id="hamburg"
+          className="text-2xl cursor-pointer border rounded-lg p-1"
+        >
+          <GiHamburgerMenu size={25} className="text-primary" />
+        </button>
+      </SheetTrigger>
+      <SheetContent className="[&>button:first-child]:hidden] p-0">
+        <SheetHeader className="py-4 px-6 border-b border">
+          <SheetTitle>
+            <CustomImage
+              src={settings?.header_logo}
+              width={195}
+              height={52}
+              alt="Logo"
+              className="w-full h-[52px] object-contain ltr:object-left rtl:object-right max-w-[195px]"
+            />
+          </SheetTitle>
+        </SheetHeader>
+        <div className="p-6">
+          <div className="flex flex-col list-none">
+            <li
+              className={`cursor-pointer py-3 border-b border-dashed transition-all duration-200 ${
+                activeSection === "anythingYouWant"
+                  ? "text-primary"
+                  : "hover:text-primary"
+              }`}
+              onClick={() => scrollToSection("anythingYouWant")}
+            >
+              {t("home")}
+            </li>
+            <li
+              className={`cursor-pointer py-3 border-b border-dashed transition-all duration-200 ${
+                activeSection === "work_process"
+                  ? "text-primary"
+                  : "hover:text-primary"
+              }`}
+              onClick={() => scrollToSection("work_process")}
+            >
+              {t("whyChooseUs")}
+            </li>
+            <li
+              className={`cursor-pointer py-3 border-b border-dashed transition-all duration-200 ${
+                activeSection === "faq"
+                  ? "text-primary font-semibold bg-primary/5"
+                  : "hover:text-primary"
+              }`}
+              onClick={() => scrollToSection("faq")}
+            >
+              {t("faqs")}
+            </li>
+            <li
+              className={`cursor-pointer py-3 border-b border-dashed transition-all duration-200 ${
+                activeSection === "ourBlogs"
+                  ? "text-primary font-semibold bg-primary/5"
+                  : "hover:text-primary"
+              }`}
+              onClick={() => scrollToSection("ourBlogs")}
+            >
+              {t("blog")}
+            </li>
+            <li className="py-3">
+              <LanguageDropdown />
+            </li>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default LandingMobileMenu;
diff --git a/components/PagesComponent/LandingPage/OurBlogs.jsx b/components/PagesComponent/LandingPage/OurBlogs.jsx
new file mode 100644
index 0000000..c0cbd11
--- /dev/null
+++ b/components/PagesComponent/LandingPage/OurBlogs.jsx
@@ -0,0 +1,122 @@
+"use client";
+import { t } from "@/utils";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { useEffect, useState } from "react";
+import { RiArrowLeftLine, RiArrowRightLine } from "react-icons/ri";
+import { getBlogsApi } from "@/utils/api";
+import BlogCardSkeleton from "../../Skeletons/BlogCardSkeleton.jsx";
+import BlogCard from "./BlogCard.jsx";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice.js";
+import { useSelector } from "react-redux";
+
+const OurBlogs = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const isRTL = CurrentLanguage?.rtl;
+  const [api, setApi] = useState();
+  const [current, setCurrent] = useState(0);
+  const [Blogs, setBlogs] = useState([]);
+  const [IsLoading, setIsLoading] = useState(true);
+
+  const getBlogsData = async () => {
+    try {
+      const res = await getBlogsApi.getBlogs();
+      setBlogs(res?.data?.data?.data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getBlogsData();
+  }, [CurrentLanguage.id]);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    setCurrent(api.selectedScrollSnap());
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  return (
+    <section className="py-28 bg-muted" id="ourBlogs">
+      <div className="container">
+        <div className="flex items-center flex-col gap-6">
+          <p className="outlinedSecHead">{t("ourBlog")}</p>
+          <h1 className="landingSecHeader">
+            {t("masteringMarketplace")}
+            <br />
+            {t("withOurBlog")}
+          </h1>
+        </div>
+        <Carousel
+          key={isRTL ? "rtl" : "ltr"}
+          className="w-full mt-20"
+          setApi={setApi}
+          opts={{ align: "start", direction: isRTL ? "rtl" : "ltr" }}
+        >
+          <CarouselContent className="-ml-3 md:-ml-[30px]">
+            {IsLoading
+              ? Array.from({ length: 6 }).map((_, i) => (
+                  <CarouselItem
+                    key={i}
+                    className="sm:basis-1/2 xl:basis-1/3 pl-3 md:pl-[30px]"
+                  >
+                    <BlogCardSkeleton />
+                  </CarouselItem>
+                ))
+              : Blogs &&
+                Blogs.length > 0 &&
+                Blogs.map((blog) => (
+                  <CarouselItem
+                    key={blog?.id}
+                    className="sm:basis-1/2 xl:basis-1/3 pl-3 md:pl-[30px]"
+                  >
+                    <BlogCard blog={blog} />
+                  </CarouselItem>
+                ))}
+          </CarouselContent>
+        </Carousel>
+
+        <div className="flex items-center justify-center mt-[30px] gap-4">
+          <button
+            onClick={() => api?.scrollTo(current - 1)}
+            className={`bg-primary p-2 rounded ${
+              !api?.canScrollPrev() ? "opacity-65 cursor-default" : ""
+            }`}
+            disabled={!api?.canScrollPrev()}
+          >
+            <RiArrowLeftLine
+              size={24}
+              color="white"
+              className={isRTL ? "rotate-180" : ""}
+            />
+          </button>
+          <button
+            onClick={() => api?.scrollTo(current + 1)}
+            className={`bg-primary p-2 rounded ${
+              !api?.canScrollNext() ? "opacity-65 cursor-default" : ""
+            }`}
+            disabled={!api?.canScrollNext()}
+          >
+            <RiArrowRightLine
+              size={24}
+              color="white"
+              className={isRTL ? "rotate-180" : ""}
+            />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default OurBlogs;
diff --git a/components/PagesComponent/LandingPage/QuickAnswers.jsx b/components/PagesComponent/LandingPage/QuickAnswers.jsx
new file mode 100644
index 0000000..29d9e66
--- /dev/null
+++ b/components/PagesComponent/LandingPage/QuickAnswers.jsx
@@ -0,0 +1,70 @@
+"use client";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import { t } from "@/utils";
+import { getFaqApi } from "@/utils/api";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+
+const QuickAnswers = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [Faqs, setFaqs] = useState([]);
+
+  const getFaqData = async () => {
+    try {
+      const res = await getFaqApi.getFaq();
+      setFaqs(res?.data?.data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    getFaqData();
+  }, [CurrentLanguage.id]);
+
+  return (
+    <section className="py-28" id="faq">
+      <div className="container">
+        <div className="flex items-center flex-col gap-6">
+          <p className="outlinedSecHead">{t("navigating")}</p>
+          <h1 className="landingSecHeader">{t("quickAnswers")}</h1>
+        </div>
+        <div className="flex flex-col gap-4 md:gap-8 mt-20">
+          {Faqs &&
+            Faqs.length > 0 &&
+            Faqs.map((faq) => (
+              <Accordion
+                type="single"
+                collapsible
+                className="border rounded-md overflow-hidden"
+                key={faq?.id}
+              >
+                <AccordionItem value={faq?.id} className="border-none group">
+                  <AccordionTrigger
+                    className="text-start font-bold text-base px-4 hover:no-underline bg-transparent 
+                    group-data-[state=open]:bg-muted group-data-[state=open]:text-primary
+                    group-data-[state=open]:border-b"
+                  >
+                    {faq?.translated_question || faq?.question}
+                  </AccordionTrigger>
+                  <AccordionContent className="bg-muted p-4">
+                    <p className="text-base">
+                      {faq?.translated_answer || faq?.answer}
+                    </p>
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default QuickAnswers;
diff --git a/components/PagesComponent/LandingPage/WorkProcess.jsx b/components/PagesComponent/LandingPage/WorkProcess.jsx
new file mode 100644
index 0000000..7745f03
--- /dev/null
+++ b/components/PagesComponent/LandingPage/WorkProcess.jsx
@@ -0,0 +1,56 @@
+"use client";
+import { t } from "@/utils";
+import Arrow from "../../../public/assets/Arrow.svg";
+import { workProcessSteps } from "@/utils/constants";
+import { useSelector } from "react-redux";
+import { settingsData } from "@/redux/reducer/settingSlice";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import CustomImage from "@/components/Common/CustomImage";
+
+const WorkProcess = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const settings = useSelector(settingsData);
+
+  return (
+    <section className="py-28" id="work_process">
+      <div className="container">
+        <div className="flex items-center flex-col gap-6">
+          <p className="outlinedSecHead">
+            {t("how")} {settings?.company_name} {t("getsYouResults")}
+          </p>
+          <h1 className="landingSecHeader">
+            {t("unravelingThe")} {settings?.company_name} <br />{" "}
+            {t("workProcess")}
+          </h1>
+        </div>
+        <div className="mt-20">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 text-center">
+            {workProcessSteps.map((step, index) => (
+              <div
+                key={step.id}
+                className="flex flex-col items-center gap-4 relative"
+              >
+                {index !== workProcessSteps.length - 1 && (
+                  <CustomImage
+                    src={Arrow}
+                    alt="arrow"
+                    width={128}
+                    height={22}
+                    className="absolute hidden w-32 top-[5%] lg:block lg:-right-[34%] xl:-right-[30%] 2xl:-right-[25%] rtl:right-auto rtl:lg:-left-[34%] rtl:xl:-left-[30%] rtl:2xl:-left-[25%] rtl:scale-x-[-1]"
+                  />
+                )}
+                <span className="flex items-center justify-center text-white font-bold w-[40px] h-[40px] bg-primary rounded-full">
+                  {step.id}
+                </span>
+                <h5 className="font-bold">{t(step.title)}</h5>
+                <p>{t(step.description)}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WorkProcess;
diff --git a/components/PagesComponent/MyAds/ChoosePackageModal.jsx b/components/PagesComponent/MyAds/ChoosePackageModal.jsx
new file mode 100644
index 0000000..755d0c6
--- /dev/null
+++ b/components/PagesComponent/MyAds/ChoosePackageModal.jsx
@@ -0,0 +1,173 @@
+import CustomImage from "@/components/Common/CustomImage";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { formatPriceAbbreviated, t } from "@/utils";
+import { getPackageApi } from "@/utils/api";
+import { useSelector } from "react-redux";
+import { getCurrentLangCode } from "@/redux/reducer/languageSlice";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import NoData from "@/components/EmptyStates/NoData";
+import { cn } from "@/lib/utils";
+
+const ChoosePackageModal = ({
+  IsChoosePackage,
+  setIsChoosePackage,
+  selectedPackageId,
+  setSelectedPackageId,
+  ItemPackages,
+  setItemPackages,
+  isRenewingAd,
+  handleRenew,
+}) => {
+  const [IsLoading, setIsLoading] = useState(false);
+  const currentLanguageCode = useSelector(getCurrentLangCode);
+
+  useEffect(() => {
+    getItemsPackageData();
+  }, [currentLanguageCode]);
+
+  const getItemsPackageData = async () => {
+    try {
+      setIsLoading(true);
+      const res = await getPackageApi.getPackage({ type: "item_listing" });
+      const { data } = res?.data;
+      setItemPackages(data || []);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={IsChoosePackage} onOpenChange={setIsChoosePackage}>
+      <DialogContent onInteractOutside={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle className="text-xl font-semibold">
+            {t("selectPackage")}
+          </DialogTitle>
+          <DialogDescription className="sr-only"></DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3">
+          {IsLoading ? (
+            Array.from({ length: 3 }).map((_, index) => (
+              <PackageCardSkeleton key={index} />
+            ))
+          ) : ItemPackages.length > 0 ? (
+            ItemPackages.map((item) => (
+              <div
+                className={cn(
+                  "flex items-center gap-3 p-3 border rounded-lg hover:bg-muted transition-colors cursor-pointer",
+                  item?.id == selectedPackageId &&
+                    "bg-primary text-white hover:bg-primary"
+                )}
+                key={item?.id}
+                onClick={() => setSelectedPackageId(item?.id)}
+              >
+                <CustomImage
+                  src={item.icon}
+                  width={58}
+                  height={58}
+                  alt={"Dummy image"}
+                  className="rounded"
+                />
+                <div className="flex flex-col gap-1 w-full">
+                  <h3 className="text-lg font-medium ltr:text-left rtl:text-right line-clamp-2">
+                    {item.translated_name}
+                    {item?.is_active && t("activePlan")}
+                  </h3>
+                  <div className="flex items-center gap-3 justify-between w-full">
+                    <span className="text-lg font-bold whitespace-nowrap">
+                      {formatPriceAbbreviated(item.final_price)}
+                    </span>
+                    <span
+                      className={cn(
+                        "text-muted-foreground text-xs sm:text-sm ltr:text-right rtl:text-left",
+                        item?.id == selectedPackageId && "text-white"
+                      )}
+                    >
+                      <strong
+                        className={cn(
+                          item?.id == selectedPackageId
+                            ? "text-white"
+                            : "text-foreground"
+                        )}
+                      >
+                        {item.item_limit === "unlimited"
+                          ? t("unlimited")
+                          : item.item_limit}
+                      </strong>{" "}
+                      {t("ads")} &nbsp;|&nbsp;&nbsp;
+                      <strong
+                        className={cn(
+                          item?.id == selectedPackageId
+                            ? "text-white"
+                            : "text-foreground"
+                        )}
+                      >
+                        {item.duration === "unlimited"
+                          ? t("unlimited")
+                          : item.duration}
+                      </strong>{" "}
+                      {t("days")}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))
+          ) : (
+            <NoData name="packages" />
+          )}
+        </div>
+
+        {ItemPackages.length > 0 && (
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button className="bg-black text-white">{t("cancel")}</Button>
+            </DialogClose>
+            <Button
+              className="bg-primary text-white"
+              type="button"
+              onClick={handleRenew}
+              disabled={isRenewingAd}
+            >
+              {isRenewingAd ? t("loading") : t("renewAd")}
+            </Button>
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ChoosePackageModal;
+
+const PackageCardSkeleton = () => {
+  return (
+    <div className="flex items-center gap-3 p-3 border rounded-lg">
+      {/* Image Skeleton */}
+      <Skeleton className="h-[58px] w-[58px] rounded" />
+
+      <div className="flex flex-col gap-2 w-full">
+        {/* Title Skeleton */}
+        <Skeleton className="h-5 w-3/4" />
+
+        {/* Price + Meta Skeleton */}
+        <div className="flex items-center justify-between w-full gap-3">
+          <Skeleton className="h-5 w-16" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/PagesComponent/MyAds/GetMyAdStatus.jsx b/components/PagesComponent/MyAds/GetMyAdStatus.jsx
new file mode 100644
index 0000000..239b45f
--- /dev/null
+++ b/components/PagesComponent/MyAds/GetMyAdStatus.jsx
@@ -0,0 +1,75 @@
+// 📌 components/Common/GetMyAdStatus.jsx
+import {
+  MdAirplanemodeInactive,
+  MdOutlineDone,
+  MdOutlineLiveTv,
+  MdOutlineSell,
+} from "react-icons/md";
+import { BiBadgeCheck } from "react-icons/bi";
+import { RxCross2 } from "react-icons/rx";
+import { RiPassExpiredLine } from "react-icons/ri";
+import { IoTimerOutline } from "react-icons/io5";
+import { t } from "@/utils";
+
+const GetMyAdStatus = ({
+  status,
+  isApprovedSort = false,
+  isFeature = false,
+  isJobCategory = false,
+}) => {
+  const statusComponents = {
+    approved: isApprovedSort
+      ? { icon: <MdOutlineLiveTv size={16} color="white" />, text: t("live") }
+      : isFeature
+      ? { icon: <BiBadgeCheck size={16} color="white" />, text: t("featured") }
+      : { icon: <MdOutlineLiveTv size={16} color="white" />, text: t("live") },
+
+    review: {
+      icon: <IoTimerOutline size={16} color="white" />,
+      text: t("review"),
+    },
+    "permanent rejected": {
+      icon: <RxCross2 size={16} color="white" />,
+      text: t("permanentRejected"),
+      bg: "bg-red-600",
+    },
+    "soft rejected": {
+      icon: <RxCross2 size={16} color="white" />,
+      text: t("softRejected"),
+      bg: "bg-red-500",
+    },
+    inactive: {
+      icon: <MdAirplanemodeInactive size={16} color="white" />,
+      text: t("deactivate"),
+      bg: "bg-gray-500",
+    },
+    "sold out": {
+      icon: <MdOutlineSell size={16} color="white" />,
+      text: isJobCategory ? t("positionFilled") : t("soldOut"),
+      bg: "bg-yellow-600",
+    },
+    resubmitted: {
+      icon: <MdOutlineDone size={16} color="white" />,
+      text: t("resubmitted"),
+      bg: "bg-green-600",
+    },
+    expired: {
+      icon: <RiPassExpiredLine size={16} color="white" />,
+      text: t("expired"),
+      bg: "bg-gray-700",
+    },
+  };
+
+  const { icon, text, bg = "bg-primary" } = statusComponents[status] || {};
+
+  if (!status) return null;
+
+  return (
+    <div className={`flex items-center gap-1 ${bg} rounded-sm py-0.5 px-1`}>
+      {icon}
+      <span className="text-white text-sm text-ellipsis">{text}</span>
+    </div>
+  );
+};
+
+export default GetMyAdStatus;
diff --git a/components/PagesComponent/MyAds/MyAds.jsx b/components/PagesComponent/MyAds/MyAds.jsx
new file mode 100644
index 0000000..46ea579
--- /dev/null
+++ b/components/PagesComponent/MyAds/MyAds.jsx
@@ -0,0 +1,437 @@
+"use client";
+import { t } from "@/utils";
+import { CgArrowsExchangeAltV } from "react-icons/cg";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import AdsCard from "./MyAdsCard.jsx";
+import { deleteItemApi, getMyItemsApi, renewItemApi } from "@/utils/api";
+import { useSelector } from "react-redux";
+import ProductCardSkeleton from "@/components/Common/ProductCardSkeleton.jsx";
+import NoData from "@/components/EmptyStates/NoData";
+import { Button } from "@/components/ui/button";
+import {
+  CurrentLanguageData,
+  getIsRtl,
+} from "@/redux/reducer/languageSlice.js";
+import { Checkbox } from "@/components/ui/checkbox";
+import ReusableAlertDialog from "@/components/Common/ReusableAlertDialog.jsx";
+import { toast } from "sonner";
+import ChoosePackageModal from "./ChoosePackageModal.jsx";
+import { getIsFreAdListing } from "@/redux/reducer/settingSlice.js";
+
+const MyAds = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const searchParams = useSearchParams();
+  const isRTL = useSelector(getIsRtl);
+
+  const sortValue = searchParams.get("sort") || "new-to-old";
+  const status = searchParams.get("status") || "all";
+
+  const [totalAdsCount, setTotalAdsCount] = useState(0);
+  const [MyItems, setMyItems] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [lastPage, setLastPage] = useState(1);
+  const [IsLoading, setIsLoading] = useState(true);
+  const [IsLoadMore, setIsLoadMore] = useState(false);
+
+  const isFreeAdListing = useSelector(getIsFreAdListing);
+  const [ItemPackages, setItemPackages] = useState([]);
+  const [renewIds, setRenewIds] = useState([]);
+
+  const [selectedIds, setSelectedIds] = useState([]);
+  const [IsDeleting, setIsDeleting] = useState(false);
+  const [IsDeleteDialog, setIsDeleteDialog] = useState(false);
+
+  const [IsChoosePackage, setIsChoosePackage] = useState(false);
+  const [selectedPackageId, setSelectedPackageId] = useState("");
+  const [isRenewingAd, setIsRenewingAd] = useState(false);
+
+  // Filter expired ads and check if selection is allowed
+  const expiredAds = MyItems.filter((item) => item.status === "expired");
+  const canMultiSelect = expiredAds.length > 1;
+
+  const getMyItemsData = async (page = 1) => {
+    try {
+      const params = {
+        page,
+        sort_by: sortValue,
+      };
+      if (status !== "all") {
+        params.status = status;
+      }
+
+      // Set loading states based on page
+      if (page > 1) {
+        setIsLoadMore(true);
+      } else {
+        setIsLoading(true);
+      }
+
+      const res = await getMyItemsApi.getMyItems(params);
+      const data = res?.data;
+      if (data?.error === false) {
+        setTotalAdsCount(data?.data?.total);
+        page > 1
+          ? setMyItems((prevData) => [...prevData, ...data?.data?.data])
+          : setMyItems(data?.data?.data);
+        setCurrentPage(data?.data?.current_page);
+        setLastPage(data?.data?.last_page);
+      } else {
+        console.log("Error in response: ", data.message);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+      setIsLoadMore(false);
+    }
+  };
+
+  useEffect(() => {
+    getMyItemsData(1);
+  }, [sortValue, status, CurrentLanguage?.id]);
+
+  const updateURLParams = (key, value) => {
+    const params = new URLSearchParams(searchParams);
+    params.set(key, value);
+    window.history.pushState(null, "", `?${params.toString()}`);
+  };
+
+  const handleSortChange = (value) => {
+    updateURLParams("sort", value);
+  };
+
+  const handleStatusChange = (value) => {
+    updateURLParams("status", value);
+  };
+
+  const handleAdSelection = (adId) => {
+    const ad = MyItems.find((item) => item.id === adId);
+    if (ad?.status !== "expired") return;
+
+    setRenewIds((prev) => {
+      if (prev.includes(adId)) {
+        return prev.filter((id) => id !== adId);
+      } else {
+        return [...prev, adId];
+      }
+    });
+  };
+
+  const handleRemove = async () => {
+    if (selectedIds.length === 0) return;
+    try {
+      setIsDeleting(true);
+      const payload = { item_ids: selectedIds.join(",") };
+      // Call API
+      const res = await deleteItemApi.deleteItem(payload);
+
+      // Handle response
+      if (res?.data?.error === false) {
+        toast.success(res?.data?.message);
+        setIsDeleteDialog(false);
+        setSelectedIds([]);
+        setRenewIds([]);
+        await getMyItemsData(1);
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const renewAds = async ({ ids, packageId }) => {
+    try {
+      setIsRenewingAd(true);
+      let payload = {};
+      if (Array.isArray(ids)) {
+        payload = {
+          item_ids: ids.join(","),
+          ...(isFreeAdListing ? {} : { package_id: packageId }),
+        };
+      } else {
+        payload = {
+          item_ids: ids,
+          ...(isFreeAdListing ? {} : { package_id: packageId }),
+        };
+      }
+
+      const res = await renewItemApi.renewItem(payload);
+
+      if (res?.data?.error === false) {
+        toast.success(res?.data?.message);
+        setIsChoosePackage(false);
+        setRenewIds([]);
+        await getMyItemsData(1);
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsRenewingAd(false);
+    }
+  };
+
+  const handleRenew = (ids) => {
+    const idsToRenew = Array.isArray(ids) ? ids : renewIds;
+
+    if (isFreeAdListing) {
+      renewAds({ ids: idsToRenew });
+    } else {
+      if (!selectedPackageId) {
+        toast.error(t("pleaseSelectPackage"));
+        return;
+      }
+
+      const subPackage = ItemPackages.find(
+        (p) => Number(p.id) === Number(selectedPackageId)
+      );
+      if (!subPackage?.is_active) {
+        toast.error(t("purchasePackageFirst"));
+        navigate("/user-subscription");
+        return;
+      }
+      renewAds({ ids: idsToRenew, packageId: selectedPackageId });
+    }
+  };
+
+  // Handle context menu actions
+  const handleContextMenuAction = (action, adId) => {
+    const ad = MyItems.find((item) => item.id === adId);
+
+    switch (action) {
+      case "select":
+        // Only allow selection for expired ads
+        if (ad && ad.status === "expired") {
+          handleAdSelection(adId);
+        }
+        break;
+      case "renew":
+        if (isFreeAdListing) {
+          handleRenew([adId]);
+        } else {
+          setRenewIds([adId]);
+          setIsChoosePackage(true);
+        }
+        break;
+      case "delete":
+        setSelectedIds([adId]); // single ad
+        setIsDeleteDialog(true);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const handleSelectAll = () => {
+    if (renewIds.length === expiredAds.length) {
+      setRenewIds([]);
+    } else {
+      setRenewIds(expiredAds.map((item) => item.id));
+    }
+  };
+
+  const handleCancelSelection = () => setRenewIds([]);
+
+  return (
+    <>
+      <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between py-2 px-4 bg-muted rounded-lg">
+        <h1 className="font-semibold">
+          {t("totalAds")} {totalAdsCount}
+        </h1>
+
+        <div className="flex flex-wrap sm:flex-nowrap items-center gap-2">
+          <div className="flex items-center gap-1">
+            <CgArrowsExchangeAltV size={25} />
+            <span className="whitespace-nowrap">{t("sortBy")}</span>
+          </div>
+          <Select value={sortValue} onValueChange={handleSortChange}>
+            <SelectTrigger className="bg-transparent border-black/23 whitespace-nowrap">
+              <SelectValue placeholder="Sort by" />
+            </SelectTrigger>
+            <SelectContent align={isRTL ? "start" : "end"}>
+              <SelectGroup>
+                <SelectItem value="new-to-old">
+                  {t("newestToOldest")}
+                </SelectItem>
+                <SelectItem value="old-to-new">
+                  {t("oldestToNewest")}
+                </SelectItem>
+                <SelectItem value="price-high-to-low">
+                  {t("priceHighToLow")}
+                </SelectItem>
+                <SelectItem value="price-low-to-high">
+                  {t("priceLowToHigh")}
+                </SelectItem>
+                <SelectItem value="popular_items">{t("popular")}</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+
+          <Select value={status} onValueChange={handleStatusChange}>
+            <SelectTrigger className="bg-transparent border-black/23">
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent align={isRTL ? "start" : "end"}>
+              <SelectGroup>
+                <SelectItem value="all">{t("all")}</SelectItem>
+                <SelectItem value="review">{t("review")}</SelectItem>
+                <SelectItem value="approved">{t("live")}</SelectItem>
+                <SelectItem value="soft rejected">
+                  {t("softRejected")}
+                </SelectItem>
+                <SelectItem value="permanent rejected">
+                  {t("permanentRejected")}
+                </SelectItem>
+                <SelectItem value="inactive">{t("deactivate")}</SelectItem>
+                <SelectItem value="featured">{t("featured")}</SelectItem>
+                <SelectItem value="sold out">{t("soldOut")}</SelectItem>
+                <SelectItem value="resubmitted">{t("resubmitted")}</SelectItem>
+                <SelectItem value="expired">{t("expired")}</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="mt-[30px] text-sm text-destructive">
+        <span>{t("expiredAdsNote")}</span>
+      </div>
+
+      {/* Selection controls - only show when there are expired ads and at least one is selected */}
+      {canMultiSelect && renewIds.length > 0 && (
+        <div className="flex items-center justify-between mt-[30px]">
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                checked={renewIds.length === expiredAds.length}
+                onCheckedChange={handleSelectAll}
+                className="data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+              />
+              <span className="text-sm font-medium">{t("selectAll")}</span>
+            </div>
+          </div>
+          <p className="text-sm">
+            {renewIds.length} {renewIds.length === 1 ? t("ad") : t("ads")}{" "}
+            {t("selected")}
+          </p>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 mt-[30px] xl:grid-cols-3 gap-3 sm:gap-6">
+        {IsLoading ? (
+          [...Array(6)].map((item, index) => (
+            <ProductCardSkeleton key={index} />
+          ))
+        ) : MyItems && MyItems?.length > 0 ? (
+          MyItems.map((item) => (
+            <AdsCard
+              key={item?.id}
+              data={item}
+              isApprovedSort={sortValue === "approved"}
+              isSelected={renewIds.includes(item?.id)}
+              isSelectable={renewIds.length > 0 && item.status === "expired"}
+              onSelectionToggle={() => handleAdSelection(item?.id)}
+              onContextMenuAction={(action) =>
+                handleContextMenuAction(action, item?.id)
+              }
+            />
+          ))
+        ) : (
+          <div className="col-span-full">
+            <NoData name={t("advertisement")} />
+          </div>
+        )}
+      </div>
+      {currentPage < lastPage && (
+        <div className="text-center mt-6">
+          <Button
+            variant="outline"
+            className="text-sm sm:text-base text-primary w-[256px]"
+            disabled={IsLoading || IsLoadMore}
+            onClick={() => getMyItemsData(currentPage + 1)}
+          >
+            {IsLoadMore ? t("loading") : t("loadMore")}
+          </Button>
+        </div>
+      )}
+
+      {/* Action buttons for selected ads - show at bottom */}
+      {renewIds.length > 0 && (
+        <div className="mt-[30px]">
+          <div className="flex items-center justify-end gap-3">
+            <Button
+              onClick={handleCancelSelection}
+              className="bg-black text-white"
+            >
+              {t("cancel")}
+            </Button>
+            <Button
+              onClick={() => {
+                if (renewIds.length === 0) return; // no selection
+                setSelectedIds([...renewIds]); // copy renewIds to selectedIds
+                setIsDeleteDialog(true);
+              }}
+              className="bg-destructive text-white"
+            >
+              {t("remove")}
+            </Button>
+            <Button
+              onClick={() => {
+                if (isFreeAdListing) {
+                  handleRenew(); // directly renew
+                } else {
+                  setIsChoosePackage(true);
+                }
+              }}
+              disabled={isRenewingAd}
+              className="bg-primary text-white"
+            >
+              {isRenewingAd ? t("loading") : t("renew")}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      <ChoosePackageModal
+        key={IsChoosePackage}
+        selectedPackageId={selectedPackageId}
+        setSelectedPackageId={setSelectedPackageId}
+        ItemPackages={ItemPackages}
+        setItemPackages={setItemPackages}
+        IsChoosePackage={IsChoosePackage}
+        setIsChoosePackage={setIsChoosePackage}
+        handleRenew={handleRenew}
+        isRenewingAd={isRenewingAd}
+      />
+      <ReusableAlertDialog
+        open={IsDeleteDialog}
+        onCancel={() => setIsDeleteDialog(false)}
+        onConfirm={handleRemove}
+        title={t("areYouSure")}
+        description={
+          selectedIds.length === 1
+            ? t("areYouSureToDeleteAd")
+            : t("areYouSureToDeleteAds")
+        }
+        cancelText={t("cancel")}
+        confirmText={t("yes")}
+        confirmDisabled={IsDeleting}
+      />
+    </>
+  );
+};
+
+export default MyAds;
diff --git a/components/PagesComponent/MyAds/MyAdsCard.jsx b/components/PagesComponent/MyAds/MyAdsCard.jsx
new file mode 100644
index 0000000..d985f75
--- /dev/null
+++ b/components/PagesComponent/MyAds/MyAdsCard.jsx
@@ -0,0 +1,162 @@
+import CustomLink from "@/components/Common/CustomLink";
+import { BiHeart } from "react-icons/bi";
+import { RxEyeOpen } from "react-icons/rx";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+import GetMyAdStatus from "./GetMyAdStatus";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RotateCcw, Trash2, CheckSquare } from "lucide-react";
+
+const MyAdsCard = ({
+  data,
+  isApprovedSort,
+  isSelected = false,
+  isSelectable = false,
+  onSelectionToggle,
+  onContextMenuAction,
+}) => {
+  const isJobCategory = Number(data?.category?.is_job_category) === 1;
+  const isAdminEdited = Number(data?.is_edited_by_admin) === 1;
+  const translated_item = data?.translated_item;
+
+  const isHidePrice = isJobCategory
+    ? !data?.formatted_salary_range
+    : !data?.formatted_price;
+
+  const status = data?.status;
+  const isExpired = status === "expired";
+
+  const price = isJobCategory
+    ? data?.formatted_salary_range
+    : data?.formatted_price;
+
+  // Card content JSX to avoid duplication
+  const cardContent = (
+    <div
+      className={`relative border flex flex-col gap-2 rounded-xl p-2 hover:shadow-md transition-all duration-200 ${
+        isSelected ? "ring-2 ring-primary bg-primary/5" : ""
+      }`}
+    >
+      {/* Selection checkbox - only show in selection mode */}
+      {isSelectable && (
+        <div className="absolute top-2 left-2 z-10">
+          <Checkbox
+            checked={isSelected}
+            onCheckedChange={onSelectionToggle}
+            className="bg-white shadow-sm border-2 border-primary data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+          />
+        </div>
+      )}
+
+      {/* Main card content */}
+      <CustomLink
+        href={`/my-listing/${data?.slug}`}
+        className="flex flex-col gap-2"
+        onClick={(e) => {
+          if (isSelectable) {
+            e.preventDefault();
+            onSelectionToggle();
+          } else {
+            // For navigation, ensure the event propagates properly
+            // Don't prevent default or stop propagation for normal clicks
+          }
+        }}
+      >
+        <CustomImage
+          src={data?.image}
+          width={220}
+          height={220}
+          alt={data?.image}
+          className="w-full h-auto aspect-square rounded-sm object-cover"
+        />
+
+        <div className="flex items-center gap-2 flex-wrap">
+          {status && (
+            <GetMyAdStatus
+              status={status}
+              isApprovedSort={isApprovedSort}
+              isFeature={data?.is_feature}
+              isJobCategory={isJobCategory}
+            />
+          )}
+
+          {isAdminEdited && (
+            <div className="py-1 px-2 bg-red-400/15 rounded-sm text-destructive text-sm">
+              {t("adminEdited")}
+            </div>
+          )}
+        </div>
+
+        {!isHidePrice && (
+          <p className="font-medium line-clamp-1">
+            {translated_item?.name || data?.name}
+          </p>
+        )}
+
+        <div className="space-between gap-1">
+          {isHidePrice ? (
+            <p className="font-medium line-clamp-1">
+              {translated_item?.name || data?.name}
+            </p>
+          ) : (
+            <p
+              className="font-semibold text-lg text-balance break-all line-clamp-2"
+              title={price}
+            >
+              {price}
+            </p>
+          )}
+          <div className="flex items-center gap-1 text-xs">
+            <div className="flex items-center gap-1">
+              <RxEyeOpen size={14} className="text-black/60" />
+              <span>{data?.clicks}</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <BiHeart size={14} className="text-black/60" />
+              <span>{data?.total_likes}</span>
+            </div>
+          </div>
+        </div>
+      </CustomLink>
+    </div>
+  );
+
+  return (
+    <ContextMenu modal={false}>
+      <ContextMenuTrigger asChild disabled={!isExpired}>
+        {cardContent}
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem
+          onClick={() => onContextMenuAction("select")}
+          className="flex items-center gap-2 cursor-pointer"
+        >
+          <CheckSquare className="size-4" />
+          {isSelected ? "Deselect" : "Select"}
+        </ContextMenuItem>
+        <ContextMenuItem
+          onClick={() => onContextMenuAction("renew")}
+          className="flex items-center gap-2 cursor-pointer"
+        >
+          <RotateCcw className="size-4 text-primary" />
+          <span className="text-primary">{t("renew")}</span>
+        </ContextMenuItem>
+        <ContextMenuItem
+          onClick={() => onContextMenuAction("delete")}
+          className="flex items-center gap-2 text-destructive focus:text-destructive cursor-pointer"
+        >
+          <Trash2 className="size-4" />
+          {t("remove")}
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+};
+
+export default MyAdsCard;
diff --git a/components/PagesComponent/Notifications/NotificationSkeleton.jsx b/components/PagesComponent/Notifications/NotificationSkeleton.jsx
new file mode 100644
index 0000000..b9eb1e0
--- /dev/null
+++ b/components/PagesComponent/Notifications/NotificationSkeleton.jsx
@@ -0,0 +1,47 @@
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+
+const NotificationSkeleton = () => {
+    return (
+        <div className="overflow-hidden border rounded-md">
+            <Table>
+                <TableHeader className='bg-muted'>
+                    <TableRow className='text-xs sm:text-sm'>
+                        <TableHead>
+                            <div className="h-5 w-2/4 bg-gray-200 rounded animate-pulse"></div>
+                        </TableHead>
+                        <TableHead className="text-center">
+                            <div className="h-5 w-2/4 bg-gray-200 rounded animate-pulse mx-auto"></div>
+                        </TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody className='text-xs sm:text-sm'>
+                    {Array.from({ length: 15 }).map((_, index) => (
+                        <TableRow key={index} className="hover:bg-muted">
+                            <TableCell>
+                                <div className="flex items-center gap-3">
+                                    <div className="w-[48px] h-[48px] rounded bg-gray-200 animate-pulse"></div>
+                                    <div className="flex flex-col gap-2 flex-1">
+                                        <div className="h-4 bg-gray-200 rounded animate-pulse w-2/4"></div>
+                                        <div className="h-3 bg-gray-200 rounded animate-pulse w-3/4"></div>
+                                    </div>
+                                </div>
+                            </TableCell>
+                            <TableCell className="text-center">
+                                <div className="h-4 bg-gray-200 rounded animate-pulse w-full mx-auto"></div>
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    );
+};
+
+export default NotificationSkeleton; 
\ No newline at end of file
diff --git a/components/PagesComponent/Notifications/Notifications.jsx b/components/PagesComponent/Notifications/Notifications.jsx
new file mode 100644
index 0000000..a4c7796
--- /dev/null
+++ b/components/PagesComponent/Notifications/Notifications.jsx
@@ -0,0 +1,134 @@
+"use client";
+import { formatDateMonthYear, t } from "@/utils";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import { getNotificationList } from "@/utils/api";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import Pagination from "@/components/Common/Pagination";
+import NoData from "@/components/EmptyStates/NoData";
+import NotificationSkeleton from "./NotificationSkeleton";
+import CustomImage from "@/components/Common/CustomImage";
+import { userSignUpData } from "@/redux/reducer/authSlice";
+import { useNavigate } from "@/components/Common/useNavigate";
+import { cn } from "@/lib/utils";
+
+const Notifications = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [notifications, setNotifications] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const userData = useSelector(userSignUpData);
+  const { navigate } = useNavigate();
+
+  const fetchNotificationData = async (page) => {
+    try {
+      setIsLoading(true);
+      const response = await getNotificationList.getNotification({ page });
+      if (response?.data?.error === false) {
+        setNotifications(response?.data.data.data);
+        setTotalPages(response?.data?.data?.last_page);
+      } else {
+        toast.error(data.message);
+      }
+    } catch (error) {
+      console.error("Error:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchNotificationData(currentPage);
+  }, [currentPage]);
+
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
+  const handleNotificationClick = (notification) => {
+    // Check if notification has item slug
+    if (notification?.item?.slug) {
+      const currentUserId = userData?.id; // Get current user ID
+      const notificationUserId = notification?.item?.user_id; // Get notification user ID
+
+      if (currentUserId == notificationUserId) {
+        // If current user is the same as notification user, redirect to my-listing
+        navigate(`/my-listing/${notification.item.slug}`);
+      } else {
+        // Otherwise, redirect to ad-details
+        navigate(`/ad-details/${notification.item.slug}`);
+      }
+    }
+  };
+  return isLoading ? (
+    <NotificationSkeleton />
+  ) : notifications.length > 0 ? (
+    <>
+      <div className="overflow-hidden border rounded-md">
+        <Table>
+          <TableHeader className="bg-muted">
+            <TableRow className="text-xs sm:text-sm">
+              <TableHead className="text-black font-bold ltr:text-left rtl:text-right">
+                {t("notification")}
+              </TableHead>
+              <TableHead className="text-black font-bold text-center">
+                {t("date")}
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody className="text-xs sm:text-sm">
+            {notifications.map((notification, index) => (
+              <TableRow
+                key={index}
+                className={cn(
+                  "hover:bg-muted",
+                  notification?.item?.slug && "cursor-pointer"
+                )}
+                onClick={() => handleNotificationClick(notification)}
+              >
+                <TableCell>
+                  <div className="flex items-center gap-3">
+                    <CustomImage
+                      src={notification?.image}
+                      width={48}
+                      height={48}
+                      alt="notification icon"
+                      className="w-[48px] h-[48px] object-cover rounded"
+                    />
+                    <div className="flex flex-col gap-1">
+                      <p className="font-medium">{notification.title}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {notification.message}
+                      </p>
+                    </div>
+                  </div>
+                </TableCell>
+                <TableCell className="text-center">
+                  {formatDateMonthYear(notification.created_at)}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <Pagination
+        className="mt-7"
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={handlePageChange}
+      />
+    </>
+  ) : (
+    <NoData name={t("notifications")} />
+  );
+};
+export default Notifications;
diff --git a/components/PagesComponent/ProductDetail/AdEditedByAdmin.jsx b/components/PagesComponent/ProductDetail/AdEditedByAdmin.jsx
new file mode 100644
index 0000000..0033d58
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/AdEditedByAdmin.jsx
@@ -0,0 +1,50 @@
+import { t } from "@/utils";
+import { useEffect, useRef, useState } from "react";
+import { LiaUserEditSolid } from "react-icons/lia";
+
+const AdEditedByAdmin = ({ admin_edit_reason }) => {
+  const textRef = useRef(null);
+  const [isTextOverflowing, setIsTextOverflowing] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    const checkTextOverflow = () => {
+      if (textRef.current && !isExpanded) {
+        const element = textRef.current;
+        const isOverflowing = element.scrollHeight > element.clientHeight;
+        setIsTextOverflowing(isOverflowing);
+      }
+    };
+
+    checkTextOverflow();
+    window.addEventListener("resize", checkTextOverflow);
+
+    return () => window.removeEventListener("resize", checkTextOverflow);
+  }, [isExpanded]);
+
+  return (
+    <div className="flex items-start gap-3 border border-[#ffb3b3] bg-[#fff6f6] rounded-lg px-4 py-5 text-destructive">
+      <LiaUserEditSolid className="size-12 text-destructive flex-shrink-0" />
+      <div className="flex flex-col gap-1">
+        <span className="font-medium text-[#d32f2f]">
+          {t("adEditedBy")} <b>{t("admin")}</b>
+        </span>
+        <div className="text-sm text-destructive">
+          <p ref={textRef} className={!isExpanded ? "line-clamp-2" : ""}>
+            {admin_edit_reason}
+          </p>
+        </div>
+        {isTextOverflowing && (
+          <button
+            className="text-sm font-medium text-destructive"
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            {isExpanded ? t("seeLess") : t("seeMore")}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AdEditedByAdmin;
diff --git a/components/PagesComponent/ProductDetail/AdsReportCard.jsx b/components/PagesComponent/ProductDetail/AdsReportCard.jsx
new file mode 100644
index 0000000..ae7032a
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/AdsReportCard.jsx
@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { PiWarningOctagon } from "react-icons/pi";
+import ReportModal from "@/components/User/ReportModal";
+import { getIsLoggedIn } from "@/redux/reducer/authSlice";
+import { useSelector } from "react-redux";
+import { setIsLoginOpen } from "@/redux/reducer/globalStateSlice";
+import { t } from "@/utils";
+const AdsReportCard = ({ productDetails, setProductDetails }) => {
+  const [isReportModalOpen, setIsReportModalOpen] = useState(false);
+  const isLoggedIn = useSelector(getIsLoggedIn);
+
+  const handleReportAd = () => {
+    if (!isLoggedIn) {
+      setIsLoginOpen(true);
+      return;
+    }
+    setIsReportModalOpen(true);
+  };
+
+  return (
+    <div className="flex flex-col border rounded-lg ">
+      <div className="flex items-center gap-2 p-4">
+        <div className="bg-[#DC354514] rounded-full p-2">
+          <PiWarningOctagon size={22} className="text-[#DC3545]" />
+        </div>
+        <p className="text-base">{t("reportItmLabel")}</p>
+      </div>
+      <div className="border-b w-full"></div>
+      <div className="flex p-4 justify-between">
+        <div className="flex items-center gap-2">
+          <p className="text-base font-medium">{t("adId")}</p>
+          <p className="text-base font-medium"> #{productDetails?.id}</p>
+        </div>
+        <button
+          className=" bg-muted text-primary font-semibold py-1 px-2 rounded-md text-sm"
+          onClick={handleReportAd}
+        >
+          {t("reportAd")}
+        </button>
+      </div>
+      <ReportModal
+        productDetails={productDetails}
+        setProductDetails={setProductDetails}
+        isReportModalOpen={isReportModalOpen}
+        setIsReportModalOpen={setIsReportModalOpen}
+      />
+    </div>
+  );
+};
+
+export default AdsReportCard;
diff --git a/components/PagesComponent/ProductDetail/AdsStatusChangeCards.jsx b/components/PagesComponent/ProductDetail/AdsStatusChangeCards.jsx
new file mode 100644
index 0000000..6b49115
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/AdsStatusChangeCards.jsx
@@ -0,0 +1,220 @@
+import { useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { chanegItemStatusApi } from "@/utils/api";
+import { toast } from "sonner";
+import SoldOutModal from "./SoldOutModal";
+import ReusableAlertDialog from "@/components/Common/ReusableAlertDialog";
+import { t } from "@/utils";
+import { useNavigate } from "@/components/Common/useNavigate";
+
+const AdsStatusChangeCards = ({
+  productDetails,
+  setProductDetails,
+  status,
+  setStatus,
+}) => {
+  const { navigate } = useNavigate();
+  const [IsChangingStatus, setIsChangingStatus] = useState(false);
+  const [showSoldOut, setShowSoldOut] = useState(false);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [selectedRadioValue, setSelectedRadioValue] = useState(null);
+
+  const isJobAd = productDetails?.category?.is_job_category === 1;
+
+  const isSoftRejected =
+    productDetails?.status === "soft rejected" ||
+    productDetails?.status === "resubmitted";
+
+  const IsDisableSelect = !(
+    productDetails?.status === "approved" ||
+    productDetails?.status === "inactive"
+  );
+
+  const isShowRejectedReason =
+    productDetails?.rejected_reason &&
+    (productDetails?.status === "soft rejected" ||
+      productDetails?.status === "permanent rejected");
+  const resubmitAdForReview = async () => {
+    try {
+      const res = await chanegItemStatusApi.changeItemStatus({
+        item_id: productDetails?.id,
+        status: "resubmitted",
+      });
+
+      if (res?.data?.error === false) {
+        toast(t("adResubmitted"));
+        setProductDetails((prev) => ({ ...prev, status: "resubmitted" }));
+      }
+    } catch (error) {
+      console.log(error);
+      toast(error.message);
+    }
+  };
+
+  const handleStatusChange = (newStatus) => {
+    setStatus(newStatus);
+  };
+
+  const updateItemStatus = async () => {
+    if (productDetails?.status === status) {
+      toast.error(t("changeStatusToSave"));
+      return;
+    }
+    if (status === "sold out") {
+      setShowSoldOut(true);
+      return;
+    }
+    try {
+      setIsChangingStatus(true);
+      const res = await chanegItemStatusApi.changeItemStatus({
+        item_id: productDetails?.id,
+        status: status === "approved" ? "active" : status,
+      });
+      if (res?.data?.error === false) {
+        setProductDetails((prev) => ({ ...prev, status }));
+        toast.success(t("statusUpdated"));
+        navigate("/my-ads");
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log("error", error);
+    } finally {
+      setIsChangingStatus(false);
+    }
+  };
+
+  const makeItemSoldOut = async () => {
+    try {
+      setIsChangingStatus(true);
+      await new Promise((resolve) => setTimeout(resolve, 5000));
+      const res = await chanegItemStatusApi.changeItemStatus({
+        item_id: productDetails?.id,
+        status: "sold out",
+        sold_to: selectedRadioValue,
+      });
+      if (res?.data?.error === false) {
+        toast.success(t("statusUpdated"));
+        setProductDetails((prev) => ({ ...prev, status: "sold out" }));
+        setShowConfirmModal(false);
+      } else {
+        toast.error(t("failedToUpdateStatus"));
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsChangingStatus(false);
+    }
+  };
+
+  return (
+    <>
+      {isSoftRejected ? (
+        <div className="border rounded-md gap-4">
+          <div className="flex flex-col">
+            <div className="p-4 text-xl font-medium border-b">
+              {t("adWasRejectedResubmitNow")}
+            </div>
+            {productDetails?.rejected_reason && (
+              <p className="bg-red-100 text-[#dc3545] px-2 py-1 rounded text-sm mt-[7px] font-medium">
+                <span className="font-medium">{t("rejectedReason")}:</span>{" "}
+                {productDetails?.rejected_reason}
+              </p>
+            )}
+            <div className="w-full p-4 ">
+              <button
+                className="bg-primary text-white font-medium w-full p-2 rounded-md"
+                disabled={productDetails?.status === "resubmitted"}
+                onClick={resubmitAdForReview}
+              >
+                {productDetails?.status === "resubmitted"
+                  ? t("resubmitted")
+                  : t("resubmit")}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col border rounded-md ">
+          <div className="p-4 border-b font-semibold">{t("changeStatus")}</div>
+          <div className="p-4 flex flex-col gap-4 ">
+            <Select
+              className="outline-none "
+              value={status}
+              onValueChange={handleStatusChange}
+              disabled={IsChangingStatus || IsDisableSelect}
+            >
+              <SelectTrigger className="outline-none">
+                <SelectValue placeholder={t("status")} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="approved">{t("active")}</SelectItem>
+                <SelectItem value="inactive">{t("deactivate")}</SelectItem>
+                <SelectItem value="review" disabled>
+                  {" "}
+                  {t("review")}
+                </SelectItem>
+                <SelectItem value="permanent rejected" disabled>
+                  {" "}
+                  {t("permanentRejected")}
+                </SelectItem>
+                <SelectItem value="expired" disabled>
+                  {t("expired")}
+                </SelectItem>
+                <SelectItem
+                  value="sold out"
+                  disabled={productDetails?.status === "inactive"}
+                >
+                  {isJobAd ? t("jobClosed") : t("soldOut")}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+
+            {isShowRejectedReason && (
+              <p className="bg-red-100 text-[#dc3545] px-2 py-1 rounded text-sm mt-[7px] font-medium">
+                <span className="font-medium">{t("rejectedReason")}:</span>{" "}
+                {productDetails?.rejected_reason}
+              </p>
+            )}
+            <button
+              className="bg-primary text-white font-medium w-full p-2 rounded-md disabled:opacity-80"
+              onClick={updateItemStatus}
+              disabled={IsChangingStatus || IsDisableSelect}
+            >
+              {t("save")}
+            </button>
+          </div>
+        </div>
+      )}
+      <SoldOutModal
+        productDetails={productDetails}
+        showSoldOut={showSoldOut}
+        setShowSoldOut={setShowSoldOut}
+        selectedRadioValue={selectedRadioValue}
+        setSelectedRadioValue={setSelectedRadioValue}
+        setShowConfirmModal={setShowConfirmModal}
+      />
+
+      <ReusableAlertDialog
+        open={showConfirmModal}
+        onCancel={() => setShowConfirmModal(false)}
+        onConfirm={makeItemSoldOut}
+        title={isJobAd ? t("confirmHire") : t("confirmSoldOut")}
+        description={
+          isJobAd ? t("markAsClosedDescription") : t("cantUndoChanges")
+        }
+        cancelText={t("cancel")}
+        confirmText={t("confirm")}
+        confirmDisabled={IsChangingStatus}
+      />
+    </>
+  );
+};
+
+export default AdsStatusChangeCards;
diff --git a/components/PagesComponent/ProductDetail/ApplyJobModal.jsx b/components/PagesComponent/ProductDetail/ApplyJobModal.jsx
new file mode 100644
index 0000000..6343deb
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/ApplyJobModal.jsx
@@ -0,0 +1,267 @@
+import { useState, useCallback, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { t } from "@/utils";
+import { HiOutlineUpload } from "react-icons/hi";
+import { MdOutlineAttachFile } from "react-icons/md";
+import { useDropzone } from "react-dropzone";
+import { jobApplyApi } from "@/utils/api";
+import { userSignUpData } from "@/redux/reducer/authSlice";
+import { useSelector } from "react-redux";
+
+const ApplyJobModal = ({
+  showApplyModal,
+  setShowApplyModal,
+  item_id,
+  setProductDetails,
+}) => {
+  const userData = useSelector(userSignUpData);
+
+  const [formData, setFormData] = useState({
+    fullName: userData?.name || "",
+    phoneNumber: userData?.mobile || "",
+    email: userData?.email || "",
+    resume: null,
+  });
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [resumePreview, setResumePreview] = useState(null);
+
+  // this is the useEffect to revoke the object url of the resume preview
+  useEffect(() => {
+    return () => {
+      if (resumePreview?.url) {
+        URL.revokeObjectURL(resumePreview.url);
+      }
+    };
+  }, [resumePreview?.url]);
+
+  const onDrop = useCallback((acceptedFiles) => {
+    const file = acceptedFiles[0];
+    if (file) {
+      setFormData((prev) => ({
+        ...prev,
+        resume: file,
+      }));
+
+      // Create preview for PDF files
+      if (file.type === "application/pdf") {
+        const fileUrl = URL.createObjectURL(file);
+        setResumePreview({
+          url: fileUrl,
+          isPdf: true,
+          name: file.name,
+        });
+      } else {
+        setResumePreview({
+          url: null,
+          isPdf: false,
+          name: file.name,
+        });
+      }
+    }
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      "application/pdf": [".pdf"],
+      "application/msword": [".doc"],
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+        [".docx"],
+    },
+    maxFiles: 1,
+    multiple: false,
+  });
+
+  const removeResume = () => {
+    setFormData((prev) => ({
+      ...prev,
+      resume: null,
+    }));
+    if (resumePreview?.url) {
+      URL.revokeObjectURL(resumePreview.url);
+    }
+    setResumePreview(null);
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      // Create form data object to send
+      const data = {
+        full_name: formData.fullName,
+        mobile: formData.phoneNumber,
+        email: formData.email,
+        item_id: item_id,
+      };
+
+      // Only include resume if it's available
+      if (formData.resume) {
+        data.resume = formData.resume;
+      }
+      setIsSubmitting(true);
+      const res = await jobApplyApi.jobApply(data);
+      if (res?.data?.error === false) {
+        toast.success(res?.data?.message);
+        setProductDetails((prev) => ({
+          ...prev,
+          is_already_job_applied: true,
+        }));
+        setShowApplyModal(false);
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={showApplyModal} onOpenChange={setShowApplyModal}>
+      <DialogContent
+        className="max-w-md sm:max-w-lg"
+        onInteractOutside={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle className="text-xl font-semibold">
+            {t("applyNow")}
+          </DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {/* Full Name */}
+          <div className="labelInputCont">
+            <Label htmlFor="fullName" className="requiredInputLabel">
+              {t("fullName")}
+            </Label>
+            <Input
+              id="fullName"
+              name="fullName"
+              type="text"
+              placeholder={t("enterFullName")}
+              value={formData.fullName}
+              onChange={handleInputChange}
+              required
+            />
+          </div>
+
+          {/* Phone Number */}
+          <div className="labelInputCont">
+            <Label htmlFor="phoneNumber" className="requiredInputLabel">
+              {t("phoneNumber")}
+            </Label>
+            <Input
+              id="phoneNumber"
+              name="phoneNumber"
+              type="tel"
+              placeholder={t("enterPhoneNumber")}
+              value={formData.phoneNumber}
+              onChange={handleInputChange}
+              required
+              pattern="[0-9]*"
+              inputMode="numeric"
+            />
+          </div>
+
+          {/* Email */}
+          <div className="labelInputCont">
+            <Label htmlFor="email" className="requiredInputLabel">
+              {t("email")}
+            </Label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              placeholder={t("enterEmail")}
+              value={formData.email}
+              onChange={handleInputChange}
+              required
+            />
+          </div>
+
+          {/* Resume Upload */}
+          <div className="labelInputCont">
+            <Label>
+              {t("resume")} ({t("optional")})
+            </Label>
+            <div className="space-y-2">
+              {!resumePreview ? (
+                <div
+                  {...getRootProps()}
+                  className={`border-2 border-dashed rounded-lg p-6 text-center transition-all duration-200 cursor-pointer hover:border-primary hover:bg-muted ${
+                    isDragActive ? "border-primary bg-muted" : ""
+                  }`}
+                >
+                  <input {...getInputProps()} />
+                  <HiOutlineUpload className="mx-auto h-8 w-8 text-muted-foreground mb-2" />
+                  <p className="text-sm text-muted-foreground">
+                    {isDragActive
+                      ? t("dropResumeHere")
+                      : t("dragAndDropResume")}
+                  </p>
+                  <p className="text-sm text-gray-600">{t("clickToSelect")}</p>
+                  <p className="text-xs text-gray-500 mt-1">PDF, DOC, DOCX</p>
+                </div>
+              ) : (
+                <div className="border rounded-lg p-3 bg-gray-50">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center space-x-2">
+                      <MdOutlineAttachFile className="h-5 w-5 shrink-0 text-muted-foreground" />
+                      <span className="text-sm font-medium text-muted-foreground break-all text-balance">
+                        {resumePreview.name}
+                      </span>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={removeResume}
+                      className="text-red-500 hover:text-red-700 text-sm"
+                    >
+                      {t("remove")}
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Submit Button */}
+          <div className="flex gap-3 pt-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setShowApplyModal(false)}
+              className="flex-1"
+              disabled={isSubmitting}
+            >
+              {t("cancel")}
+            </Button>
+            <Button type="submit" disabled={isSubmitting} className="flex-1">
+              {isSubmitting ? t("submitting") : t("submit")}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ApplyJobModal;
diff --git a/components/PagesComponent/ProductDetail/JobApplicationCard.jsx b/components/PagesComponent/ProductDetail/JobApplicationCard.jsx
new file mode 100644
index 0000000..bccb465
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/JobApplicationCard.jsx
@@ -0,0 +1,142 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { Check, X, Download } from "lucide-react";
+import CustomLink from "@/components/Common/CustomLink";
+import { formatDateMonthYear, t } from "@/utils";
+import { toast } from "sonner";
+import { useState } from "react";
+import { updateJobStatusApi } from "@/utils/api";
+
+const JobApplicationCard = ({
+  application,
+  setReceivedApplications,
+  isJobFilled,
+}) => {
+  const [processing, setProcessing] = useState(false);
+
+  const handleStatusChange = async (newStatus) => {
+    try {
+      setProcessing(true);
+      const res = await updateJobStatusApi.updateJobStatus({
+        job_id: application.id,
+        status: newStatus,
+      });
+      if (res?.data?.error === false) {
+        toast.success(res?.data?.message);
+        setReceivedApplications((prev) => ({
+          ...prev,
+          data: prev.data.map((app) =>
+            app.id === application.id ? { ...app, status: newStatus } : app
+          ),
+        }));
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const getStatusBadge = (status) => {
+    switch (status) {
+      case "accepted":
+        return <Badge className="bg-green-600">{t("accepted")}</Badge>;
+      case "rejected":
+        return <Badge className="bg-red-500">{t("rejected")}</Badge>;
+      case "pending":
+        return <Badge className="bg-yellow-500">{t("pending")}</Badge>;
+      default:
+        return <Badge className="bg-yellow-500">{t("pending")}</Badge>;
+    }
+  };
+
+  return (
+    <Card className="hover:shadow-md transition-shadow duration-200">
+      <CardHeader>
+        <div className="flex items-center justify-between ltr:flex-row rtl:flex-row-reverse">
+          <h3 className="font-semibold">{application.full_name}</h3>
+          {getStatusBadge(application.status)}
+        </div>
+      </CardHeader>
+
+      <CardContent>
+        <div className="space-y-3">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
+            <div className="flex flex-col ltr:text-left rtl:text-right">
+              <span className="text-muted-foreground font-medium text-xs uppercase tracking-wide">
+                {t("email")}
+              </span>
+              <span>{application.email}</span>
+            </div>
+
+            <div className="flex flex-col ltr:text-left rtl:text-right">
+              <span className="text-muted-foreground font-medium text-xs uppercase tracking-wide">
+                {t("phone")}
+              </span>
+              <span>{application.mobile}</span>
+            </div>
+
+            <div className="flex flex-col sm:col-span-2 ltr:text-left rtl:text-right">
+              <span className="text-muted-foreground font-medium text-xs uppercase tracking-wide">
+                {t("appliedDate")}
+              </span>
+              <span>
+                {formatDateMonthYear(application.created_at)}
+              </span>
+            </div>
+          </div>
+
+          {(application.status === "pending" || application.resume) && (
+            <>
+              <Separator className="my-3" />
+              <div className="flex flex-wrap gap-2 ltr:flex-row rtl:flex-row-reverse">
+                {application.status === "pending" && !isJobFilled && (
+                  <>
+                    <Button
+                      size="sm"
+                      className="bg-primary text-white"
+                      onClick={() => handleStatusChange("accepted")}
+                      disabled={processing}
+                    >
+                      <Check className="size-4" />
+                      {t("accept")}
+                    </Button>
+
+                    <Button
+                      size="sm"
+                      variant="destructive"
+                      onClick={() => handleStatusChange("rejected")}
+                      disabled={processing}
+                    >
+                      <X className="size-4" />
+                      {t("reject")}
+                    </Button>
+                  </>
+                )}
+
+                {application.resume && (
+                  <Button size="sm" variant="outline" asChild>
+                    <CustomLink
+                      href={application.resume}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Download className="size-4" />
+                      {t("viewResume")}
+                    </CustomLink>
+                  </Button>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default JobApplicationCard;
diff --git a/components/PagesComponent/ProductDetail/JobApplicationCardSkeleton.jsx b/components/PagesComponent/ProductDetail/JobApplicationCardSkeleton.jsx
new file mode 100644
index 0000000..c56bf33
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/JobApplicationCardSkeleton.jsx
@@ -0,0 +1,47 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const JobApplicationCardSkeleton = () => {
+  return (
+    <Card className="hover:shadow-md transition-shadow duration-200">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-6 w-32" />
+          <Skeleton className="h-6 w-20" />
+        </div>
+      </CardHeader>
+
+      <CardContent>
+        <div className="space-y-3">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
+            <div className="flex flex-col space-y-1">
+              <Skeleton className="h-3 w-12" />
+              <Skeleton className="h-4 w-40" />
+            </div>
+
+            <div className="flex flex-col space-y-1">
+              <Skeleton className="h-3 w-12" />
+              <Skeleton className="h-4 w-32" />
+            </div>
+
+            <div className="flex flex-col space-y-1 sm:col-span-2">
+              <Skeleton className="h-3 w-20" />
+              <Skeleton className="h-4 w-36" />
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <Skeleton className="h-px w-full" />
+            <div className="flex flex-wrap gap-2">
+              <Skeleton className="h-8 w-20" />
+              <Skeleton className="h-8 w-20" />
+              <Skeleton className="h-8 w-24" />
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default JobApplicationCardSkeleton;
diff --git a/components/PagesComponent/ProductDetail/JobApplicationModal.jsx b/components/PagesComponent/ProductDetail/JobApplicationModal.jsx
new file mode 100644
index 0000000..09be240
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/JobApplicationModal.jsx
@@ -0,0 +1,143 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useEffect, useState } from "react";
+import { t } from "@/utils";
+import { getAdJobApplicationsApi } from "@/utils/api";
+import NoData from "@/components/EmptyStates/NoData";
+import JobApplicationCard from "./JobApplicationCard";
+import JobApplicationCardSkeleton from "./JobApplicationCardSkeleton";
+
+const JobApplicationModal = ({
+  IsShowJobApplications,
+  setIsShowJobApplications,
+  listingId,
+  isJobFilled,
+}) => {
+  const [receivedApplications, setReceivedApplications] = useState({
+    data: [],
+    isLoading: true,
+    isLoadingMore: false,
+    currentPage: 1,
+    hasMore: false,
+  });
+
+  useEffect(() => {
+    if (IsShowJobApplications) {
+      fetchApplications(receivedApplications?.currentPage);
+    }
+  }, [IsShowJobApplications]);
+
+  const fetchApplications = async (page) => {
+    try {
+      if (page === 1) {
+        setReceivedApplications((prev) => ({
+          ...prev,
+          isLoading: true,
+        }));
+      } else {
+        setReceivedApplications((prev) => ({
+          ...prev,
+          isLoadingMore: true,
+        }));
+      }
+      const res = await getAdJobApplicationsApi.getAdJobApplications({
+        page,
+        item_id: listingId,
+      });
+      if (res?.data?.error === false) {
+        if (page === 1) {
+          setReceivedApplications((prev) => ({
+            ...prev,
+            data: res?.data?.data?.data || [],
+            currentPage: res?.data?.data?.current_page,
+            hasMore: res?.data?.data?.last_page > res?.data?.data?.current_page,
+          }));
+        } else {
+          setReceivedApplications((prev) => ({
+            ...prev,
+            data: [...prev.data, ...(res?.data?.data?.data || [])],
+            currentPage: res?.data?.data?.current_page,
+            hasMore: res?.data?.data?.last_page > res?.data?.data?.current_page,
+          }));
+        }
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setReceivedApplications((prev) => ({
+        ...prev,
+        isLoading: false,
+        isLoadingMore: false,
+      }));
+    }
+  };
+  const loadMore = () => {
+    fetchApplications(receivedApplications.currentPage + 1);
+  };
+
+  return (
+    <Dialog
+      open={IsShowJobApplications}
+      onOpenChange={setIsShowJobApplications}
+    >
+      <DialogContent
+        className="max-w-2xl max-h-[80vh]"
+        onInteractOutside={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle className="text-xl font-semibold">
+            {t("jobApplications")}
+          </DialogTitle>
+          <DialogDescription className="!text-base">
+            {t("jobApplicationsDescription")}
+          </DialogDescription>
+        </DialogHeader>
+        <ScrollArea className="h-[60vh] pr-4">
+          <div className="space-y-4">
+            {receivedApplications.isLoading ? (
+              // Show skeleton loading state
+              Array.from({ length: 3 }).map((_, index) => (
+                <JobApplicationCardSkeleton key={index} />
+              ))
+            ) : receivedApplications?.data?.length > 0 ? (
+              receivedApplications?.data?.map((application) => (
+                <JobApplicationCard
+                  key={application?.id}
+                  application={application}
+                  setReceivedApplications={setReceivedApplications}
+                  isJobFilled={isJobFilled}
+                />
+              ))
+            ) : (
+              <NoData name={t("jobApplications")} />
+            )}
+          </div>
+
+          {receivedApplications.hasMore && (
+            <div className="text-center my-6">
+              <Button
+                variant="outline"
+                onClick={loadMore}
+                disabled={receivedApplications.isLoadingMore}
+                className="text-sm sm:text-base text-primary w-[256px]"
+              >
+                {receivedApplications.isLoadingMore
+                  ? t("loading")
+                  : t("loadMore")}
+              </Button>
+            </div>
+          )}
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default JobApplicationModal;
diff --git a/components/PagesComponent/ProductDetail/MakeFeaturedAd.jsx b/components/PagesComponent/ProductDetail/MakeFeaturedAd.jsx
new file mode 100644
index 0000000..a4440a6
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/MakeFeaturedAd.jsx
@@ -0,0 +1,112 @@
+import {  t } from "@/utils";
+import adIcon from "@/public/assets/ad_icon.svg";
+import { Button } from "@/components/ui/button";
+import ReusableAlertDialog from "@/components/Common/ReusableAlertDialog";
+import { createFeaturedItemApi, getLimitsApi } from "@/utils/api";
+import { useState } from "react";
+import { toast } from "sonner";
+import CustomImage from "@/components/Common/CustomImage";
+import { useNavigate } from "@/components/Common/useNavigate";
+
+const MakeFeaturedAd = ({ item_id, setProductDetails }) => {
+  const [isGettingLimits, setIsGettingLimits] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalConfig, setModalConfig] = useState({});
+  const [isConfirmLoading, setIsConfirmLoading] = useState(false);
+  const { navigate } = useNavigate();
+
+  const handleCreateFeaturedAd = async () => {
+    try {
+      setIsGettingLimits(true);
+      const res = await getLimitsApi.getLimits({
+        package_type: "advertisement",
+      });
+
+      if (res?.data?.error === false) {
+        // ✅ Limit granted → show confirmation modal
+        setModalConfig({
+          title: t("createFeaturedAd"),
+          description: t("youWantToCreateFeaturedAd"),
+          cancelText: t("cancel"),
+          confirmText: t("yes"),
+          onConfirm: createFeaturedAd,
+        });
+      } else {
+        // ❌ No package → show subscribe modal
+        setModalConfig({
+          title: t("noPackage"),
+          description: t("pleaseSubscribes"),
+          cancelText: t("cancel"),
+          confirmText: t("subscribe"),
+          onConfirm: () => navigate("/user-subscription"),
+        });
+      }
+      setIsModalOpen(true);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsGettingLimits(false);
+    }
+  };
+
+  const createFeaturedAd = async () => {
+    try {
+      setIsConfirmLoading(true);
+      const res = await createFeaturedItemApi.createFeaturedItem({
+        item_id,
+        positions: "home_screen",
+      });
+      if (res?.data?.error === false) {
+        toast.success(t("featuredAdCreated"));
+        setProductDetails((prev) => ({
+          ...prev,
+          is_feature: true,
+        }));
+        setIsModalOpen(false);
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsConfirmLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="border rounded-md p-4 flex flex-col md:flex-row items-center gap-3 justify-between">
+        <div className="flex flex-col md:flex-row items-center gap-4">
+          <div className="bg-muted py-4 px-5 rounded-md">
+            <div className="w-[62px] h-[75px] relative">
+              <CustomImage
+                src={adIcon}
+                alt="featured-ad"
+                fill
+              />
+            </div>
+          </div>
+          <p className="text-xl font-medium text-center ltr:md:text-left rtl:md:text-right">
+            {t("featureAdPrompt")}
+          </p>
+        </div>
+
+        <Button onClick={handleCreateFeaturedAd} disabled={isGettingLimits}>
+          {t("createFeaturedAd")}
+        </Button>
+      </div>
+      <ReusableAlertDialog
+        open={isModalOpen}
+        onCancel={() => setIsModalOpen(false)}
+        onConfirm={modalConfig.onConfirm}
+        title={modalConfig.title}
+        description={modalConfig.description}
+        cancelText={modalConfig.cancelText}
+        confirmText={modalConfig.confirmText}
+        confirmDisabled={isConfirmLoading}
+      />
+    </>
+  );
+};
+
+export default MakeFeaturedAd;
diff --git a/components/PagesComponent/ProductDetail/MakeOfferModal.jsx b/components/PagesComponent/ProductDetail/MakeOfferModal.jsx
new file mode 100644
index 0000000..77d2e20
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/MakeOfferModal.jsx
@@ -0,0 +1,198 @@
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+import { itemOfferApi, tipsApi } from "@/utils/api";
+import { t } from "@/utils";
+import { Skeleton } from "@/components/ui/skeleton";
+import { FaCheck } from "react-icons/fa";
+import { useNavigate } from "@/components/Common/useNavigate";
+
+const MakeOfferModal = ({ isOpen, onClose, productDetails }) => {
+  const { navigate } = useNavigate();
+  const [offerAmount, setOfferAmount] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState("");
+  const [tips, setTips] = useState([]);
+  const [isLoadingTips, setIsLoadingTips] = useState(true);
+  const [canProceed, setCanProceed] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchTips();
+    }
+  }, [isOpen]);
+
+  const fetchTips = async () => {
+    try {
+      setIsLoadingTips(true);
+      const response = await tipsApi.tips();
+      if (response?.data?.error === false) {
+        const tipsData = response.data.data || [];
+        setTips(tipsData);
+        // If no tips found, automatically set canProceed to true
+        if (!tipsData.length) {
+          setCanProceed(true);
+        }
+      }
+    } catch (error) {
+      console.error("Error fetching tips:", error);
+      // If error occurs, show make offer interface
+      setCanProceed(true);
+    } finally {
+      setIsLoadingTips(false);
+    }
+  };
+
+  const validateOffer = () => {
+    if (!offerAmount.trim()) {
+      setError(t("offerAmountRequired"));
+      return false;
+    }
+
+    const amount = Number(offerAmount);
+    if (amount >= productDetails?.price) {
+      setError(t("offerMustBeLessThanSellerPrice"));
+      return false;
+    }
+
+    setError("");
+    return true;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!validateOffer()) {
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      const response = await itemOfferApi.offer({
+        item_id: productDetails?.id,
+        amount: Number(offerAmount),
+      });
+
+      if (response?.data?.error === false) {
+        toast.success(t("offerSentSuccessfully"));
+        onClose();
+        navigate("/chat?activeTab=buying&chatid=" + response?.data?.data?.id);
+      } else {
+        toast.error(t("unableToSendOffer"));
+      }
+    } catch (error) {
+      toast.error(t("unableToSendOffer"));
+      console.error(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleChange = (e) => {
+    setOfferAmount(e.target.value);
+    setError(""); // Clear error when user starts typing
+  };
+
+  const handleContinue = () => {
+    setCanProceed(true);
+  };
+
+  const renderMakeOfferForm = () => (
+    <div className="space-y-4">
+      <DialogHeader>
+        <DialogTitle className="text-4xl font-normal">
+          {t("makeAn")}
+          <span className="text-primary">&nbsp;{t("offer")}</span>
+        </DialogTitle>
+        <DialogDescription>{t("openToOffers")}</DialogDescription>
+      </DialogHeader>
+
+      <div className="flex flex-col gap-2 bg-muted py-6 px-3 rounded-md justify-center items-center">
+        <span>{t("sellerPrice")}</span>
+        <span className="text-2xl font-medium">
+          {productDetails?.formatted_price}
+        </span>
+      </div>
+
+      <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+        <div className="space-y-2">
+          <Label htmlFor="offerAmount" className="requiredInputLabel">
+            {t("yourOffer")}
+          </Label>
+          <Input
+            id="offerAmount"
+            type="number"
+            value={offerAmount}
+            onChange={handleChange}
+            placeholder={t("typeOfferPrice")}
+            min={0}
+            className={error ? "border-red-500 focus-visible:ring-red-500" : ""}
+          />
+          {error && <span className="text-red-500 text-sm">{error}</span>}
+        </div>
+        <Button
+          type="submit"
+          className="py-2 px-4 rounded-md"
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? t("sending") : t("sendOffer")}
+        </Button>
+      </form>
+    </div>
+  );
+
+  const renderTipsSection = () => (
+    <>
+      <DialogHeader>
+        <DialogTitle className="text-4xl text-center font-normal">
+          {t("safety")}
+          <span className="text-primary">&nbsp;{t("tips")}</span>
+        </DialogTitle>
+      </DialogHeader>
+      {isLoadingTips ? (
+        <div className="space-y-3">
+          {Array.from({ length: 12 }).map((_, i) => (
+            <div key={i} className="flex items-center space-x-4">
+              <Skeleton className="h-4 w-[5%]" />
+              <Skeleton className="h-4 w-[95%]" />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {tips.map((tip, index) => (
+            <div key={tip?.id} className="flex items-center gap-2">
+              <div className="p-2 text-white bg-primary rounded-full">
+                <FaCheck size={18} />
+              </div>
+              <p className="">{tip?.description}</p>
+            </div>
+          ))}
+        </div>
+      )}
+      <Button onClick={handleContinue}>{t("continue")}</Button>
+    </>
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent
+        onInteractOutside={(e) => e.preventDefault()}
+        className="sm:py-[50px] sm:px-[90px]"
+      >
+        {!canProceed ? renderTipsSection() : renderMakeOfferForm()}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default MakeOfferModal;
diff --git a/components/PagesComponent/ProductDetail/MyAdsListingDetailCard.jsx b/components/PagesComponent/ProductDetail/MyAdsListingDetailCard.jsx
new file mode 100644
index 0000000..7aa1cc5
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/MyAdsListingDetailCard.jsx
@@ -0,0 +1,161 @@
+import { formatDateMonthYear, t } from "@/utils/index";
+import { FaBriefcase, FaRegCalendarCheck, FaRegHeart } from "react-icons/fa";
+import { IoEyeOutline } from "react-icons/io5";
+import { toast } from "sonner";
+import { useSelector } from "react-redux";
+import { deleteItemApi } from "@/utils/api";
+import CustomLink from "@/components/Common/CustomLink";
+import { getCompanyName } from "@/redux/reducer/settingSlice";
+import ShareDropdown from "@/components/Common/ShareDropdown";
+import { useState } from "react";
+import JobApplicationModal from "./JobApplicationModal";
+import ReusableAlertDialog from "@/components/Common/ReusableAlertDialog";
+import { useNavigate } from "@/components/Common/useNavigate";
+
+const MyAdsListingDetailCard = ({ productDetails }) => {
+  const { navigate } = useNavigate();
+  const CompanyName = useSelector(getCompanyName);
+
+  const [IsDeleteAccount, setIsDeleteAccount] = useState(false);
+  const [IsDeletingAccount, setIsDeletingAccount] = useState(false);
+
+  const [IsShowJobApplications, setIsShowJobApplications] = useState(false);
+  const productName =
+    productDetails?.translated_item?.name || productDetails?.name;
+  // share variables
+  const currentUrl = `${process.env.NEXT_PUBLIC_WEB_URL}/ad-details/${productDetails?.slug}`;
+  const FbTitle = productName + " | " + CompanyName;
+  const headline = `🚀 Discover the perfect deal! Explore "${productName}" from ${CompanyName} and grab it before it's gone. Shop now at`;
+  const isEditable =
+    productDetails?.status &&
+    !["permanent rejected", "inactive", "sold out", "expired"].includes(
+      productDetails.status
+    );
+
+  // job application variables
+  const isJobCategory = Number(productDetails?.category?.is_job_category) === 1;
+  const isShowReceivedJobApplications =
+    isJobCategory &&
+    (productDetails?.status === "approved" ||
+      productDetails?.status === "featured" ||
+      productDetails?.status === "sold out");
+
+  const price = isJobCategory
+    ? productDetails?.formatted_salary_range
+    : productDetails?.formatted_price;
+
+  const deleteAd = async () => {
+    try {
+      setIsDeletingAccount(true);
+      const res = await deleteItemApi.deleteItem({
+        item_id: productDetails?.id,
+      });
+      if (res?.data?.error === false) {
+        toast.success(t("adDeleted"));
+        navigate("/my-ads");
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsDeletingAccount(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="flex flex-col border rounded-lg">
+        <div className="flex  w-full flex-col gap-4 p-4 border-b">
+          <div className="flex justify-between max-w-full">
+            <h1
+              className="text-2xl font-medium word-break-all line-clamp-2"
+              title={productName}
+            >
+              {productName}
+            </h1>
+            {productDetails?.status === "approved" && (
+              <ShareDropdown
+                url={currentUrl}
+                title={FbTitle}
+                headline={headline}
+                companyName={CompanyName}
+                className="rounded-full size-10 flex items-center justify-center p-2 border"
+              />
+            )}
+          </div>
+          <div className="flex justify-between items-end w-full">
+            <h2
+              className="text-primary text-3xl font-bold break-all text-balance line-clamp-2"
+              title={price}
+            >
+              {price}
+            </h2>
+            <p className="text-sm text-muted-foreground whitespace-nowrap">
+              {t("adId")} #{productDetails?.id}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center justify-center text-muted-foreground gap-1 p-4 border-b flex-wrap">
+          <div className="text-sm flex items-center gap-1 ">
+            <FaRegCalendarCheck size={14} />
+            {t("postedOn")}: {formatDateMonthYear(productDetails?.created_at)}
+          </div>
+          <div className="ltr:border-l rtl:border-r gap-1 flex items-center text-sm px-2">
+            <IoEyeOutline size={14} />
+            {t("views")}: {productDetails?.clicks}
+          </div>
+          <div className="ltr:border-l rtl:border-r gap-1 flex items-center text-sm px-2">
+            <FaRegHeart size={14} />
+            {t("favorites")}: {productDetails?.total_likes}
+          </div>
+        </div>
+        <div className="p-4 flex items-center gap-4 flex-wrap">
+          <button
+            className="py-2 px-4 flex-1 rounded-md bg-black text-white font-medium"
+            onClick={() => setIsDeleteAccount(true)}
+          >
+            {t("delete")}
+          </button>
+
+          {isEditable && (
+            <CustomLink
+              href={`/edit-listing/${productDetails?.id}`}
+              className="bg-primary py-2 px-4 flex-1 rounded-md text-white font-medium text-center"
+            >
+              {t("edit")}
+            </CustomLink>
+          )}
+
+          {isShowReceivedJobApplications && (
+            <button
+              onClick={() => setIsShowJobApplications(true)}
+              className="bg-black py-2 px-4 flex-1 rounded-md text-white font-medium whitespace-nowrap flex items-center gap-2 justify-center"
+            >
+              <FaBriefcase />
+              {t("jobApplications")}
+            </button>
+          )}
+        </div>
+      </div>
+      <JobApplicationModal
+        IsShowJobApplications={IsShowJobApplications}
+        setIsShowJobApplications={setIsShowJobApplications}
+        listingId={productDetails?.id}
+        isJobFilled={productDetails?.status === "sold out"}
+      />
+      <ReusableAlertDialog
+        open={IsDeleteAccount}
+        onCancel={() => setIsDeleteAccount(false)}
+        onConfirm={deleteAd}
+        title={t("areYouSure")}
+        description={t("youWantToDeleteThisAd")}
+        cancelText={t("cancel")}
+        confirmText={t("yes")}
+        confirmDisabled={IsDeletingAccount}
+      />
+    </>
+  );
+};
+
+export default MyAdsListingDetailCard;
diff --git a/components/PagesComponent/ProductDetail/ProductDescription.jsx b/components/PagesComponent/ProductDetail/ProductDescription.jsx
new file mode 100644
index 0000000..edf7fd2
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/ProductDescription.jsx
@@ -0,0 +1,53 @@
+import { useEffect, useRef, useState } from "react";
+import parse from "html-react-parser";
+import { t } from "@/utils";
+const ProductDescription = ({ productDetails }) => {
+  const [showFullDescription, setShowFullDescription] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const descriptionRef = useRef(null);
+
+  const translated_item = productDetails?.translated_item;
+
+  const fullDescription =
+    translated_item?.description?.replace(/\n/g, "<br />") ||
+    productDetails?.description?.replace(/\n/g, "<br />");
+
+  useEffect(() => {
+    const descriptionBody = descriptionRef.current;
+    if (descriptionBody) {
+      setIsOverflowing(
+        descriptionBody.scrollHeight > descriptionBody.clientHeight
+      );
+    }
+  }, [fullDescription]);
+
+  const toggleDescription = () => {
+    setShowFullDescription((prev) => !prev);
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <span className="text-2xl font-medium">{t("description")}</span>
+      <div
+        className={`${
+          showFullDescription ? "h-[100%]" : "max-h-[72px]"
+        } max-w-full prose lg:prose-lg overflow-hidden`}
+        ref={descriptionRef}
+      >
+        {parse(fullDescription || "")}
+      </div>
+      {isOverflowing && (
+        <div className=" flex justify-center items-center">
+          <button
+            onClick={toggleDescription}
+            className="text-primary font-bold text-base"
+          >
+            {showFullDescription ? t("seeLess") : t("seeMore")}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProductDescription;
diff --git a/components/PagesComponent/ProductDetail/ProductDetailCard.jsx b/components/PagesComponent/ProductDetail/ProductDetailCard.jsx
new file mode 100644
index 0000000..a876eee
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/ProductDetailCard.jsx
@@ -0,0 +1,95 @@
+import { formatDateMonthYear, t } from "@/utils/index";
+import { FaHeart, FaRegCalendarCheck, FaRegHeart } from "react-icons/fa";
+import { manageFavouriteApi } from "@/utils/api";
+import { toast } from "sonner";
+import { usePathname } from "next/navigation";
+import { getIsLoggedIn } from "@/redux/reducer/authSlice";
+import { useSelector } from "react-redux";
+import { getCompanyName } from "@/redux/reducer/settingSlice";
+import ShareDropdown from "@/components/Common/ShareDropdown";
+import { setIsLoginOpen } from "@/redux/reducer/globalStateSlice";
+
+const ProductDetailCard = ({ productDetails, setProductDetails }) => {
+  const path = usePathname();
+  const currentUrl = `${process.env.NEXT_PUBLIC_WEB_URL}${path}`;
+  const translated_item = productDetails?.translated_item;
+  const isLoggedIn = useSelector(getIsLoggedIn);
+  const CompanyName = useSelector(getCompanyName);
+  const FbTitle =
+    (translated_item?.name || productDetails?.name) + " | " + CompanyName;
+  const headline = `🚀 Discover the perfect deal! Explore "${
+    translated_item?.name || productDetails?.name
+  }" from ${CompanyName} and grab it before it's gone. Shop now at`;
+
+  const isJobCategory = Number(productDetails?.category?.is_job_category) === 1;
+  const price = isJobCategory
+    ? productDetails?.formatted_salary_range
+    : productDetails?.formatted_price;
+
+  const handleLikeItem = async () => {
+    if (!isLoggedIn) {
+      setIsLoginOpen(true);
+      return;
+    }
+    try {
+      const response = await manageFavouriteApi.manageFavouriteApi({
+        item_id: productDetails?.id,
+      });
+      if (response?.data?.error === false) {
+        setProductDetails((prev) => ({
+          ...prev,
+          is_liked: !productDetails?.is_liked,
+        }));
+      }
+      toast.success(response?.data?.message);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 border p-4 rounded-lg">
+      <div className="flex justify-between max-w-full">
+        <div className="flex flex-col gap-2">
+          <h1
+            className="text-2xl font-medium word-break-all line-clamp-2"
+            title={translated_item?.name || productDetails?.name}
+          >
+            {translated_item?.name || productDetails?.name}
+          </h1>
+          <h2
+            className="text-primary text-3xl font-bold break-all text-balance line-clamp-2"
+            title={price}
+          >
+            {price}
+          </h2>
+        </div>
+        <div className="flex flex-col gap-4">
+          <button
+            className="rounded-full size-10 flex items-center justify-center p-2 border"
+            onClick={handleLikeItem}
+          >
+            {productDetails?.is_liked === true ? (
+              <FaHeart size={20} className="text-primary" />
+            ) : (
+              <FaRegHeart size={20} />
+            )}
+          </button>
+          <ShareDropdown
+            url={currentUrl}
+            title={FbTitle}
+            headline={headline}
+            companyName={CompanyName}
+            className="rounded-full p-2 border bg-white"
+          />
+        </div>
+      </div>
+      <div className="flex gap-1 items-center">
+        <FaRegCalendarCheck />
+        {t("postedOn")}:{formatDateMonthYear(productDetails?.created_at)}
+      </div>
+    </div>
+  );
+};
+
+export default ProductDetailCard;
diff --git a/components/PagesComponent/ProductDetail/ProductDetails.jsx b/components/PagesComponent/ProductDetail/ProductDetails.jsx
new file mode 100644
index 0000000..5edb104
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/ProductDetails.jsx
@@ -0,0 +1,264 @@
+"use client";
+import { useEffect, useState } from "react";
+import { allItemApi, getMyItemsApi, setItemTotalClickApi } from "@/utils/api";
+import ProductFeature from "./ProductFeature";
+import ProductDescription from "./ProductDescription";
+import ProductDetailCard from "./ProductDetailCard";
+import SellerDetailCard from "./SellerDetailCard";
+import ProductLocation from "./ProductLocation";
+import AdsReportCard from "./AdsReportCard";
+import SimilarProducts from "./SimilarProducts";
+import MyAdsListingDetailCard from "./MyAdsListingDetailCard";
+import AdsStatusChangeCards from "./AdsStatusChangeCards";
+import { usePathname, useSearchParams } from "next/navigation";
+import Layout from "@/components/Layout/Layout";
+import ProductGallery from "./ProductGallery";
+import {
+  getFilteredCustomFields,
+  getYouTubeVideoId,
+  t,
+  truncate,
+} from "@/utils";
+import PageLoader from "@/components/Common/PageLoader";
+import OpenInAppDrawer from "@/components/Common/OpenInAppDrawer";
+import { useDispatch, useSelector } from "react-redux";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import { setBreadcrumbPath } from "@/redux/reducer/breadCrumbSlice";
+import MakeFeaturedAd from "./MakeFeaturedAd";
+import RenewAd from "./RenewAd";
+import AdEditedByAdmin from "./AdEditedByAdmin";
+import NoData from "@/components/EmptyStates/NoData";
+
+const ProductDetails = ({ slug }) => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const dispatch = useDispatch();
+  const pathName = usePathname();
+  const searchParams = useSearchParams();
+  const isShare = searchParams.get("share") == "true" ? true : false;
+  const isMyListing = pathName?.startsWith("/my-listing") ? true : false;
+  const [productDetails, setProductDetails] = useState(null);
+  const [galleryImages, setGalleryImages] = useState([]);
+  const [status, setStatus] = useState("");
+  const [videoData, setVideoData] = useState({
+    url: "",
+    thumbnail: "",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [isOpenInApp, setIsOpenInApp] = useState(false);
+
+  const IsShowFeaturedAd =
+    isMyListing &&
+    !productDetails?.is_feature &&
+    productDetails?.status === "approved";
+
+  const isMyAdExpired = isMyListing && productDetails?.status === "expired";
+  const isEditedByAdmin =
+    isMyListing && productDetails?.is_edited_by_admin === 1;
+
+  useEffect(() => {
+    fetchProductDetails();
+  }, [CurrentLanguage?.id]);
+
+  useEffect(() => {
+    if (window.innerWidth <= 768 && !isMyListing && isShare) {
+      setIsOpenInApp(true);
+    }
+  }, []);
+
+  const fetchMyListingDetails = async (slug) => {
+    const response = await getMyItemsApi.getMyItems({ slug });
+    const product = response?.data?.data?.data?.[0];
+    if (!product) throw new Error("My listing product not found");
+    setProductDetails(product);
+    const videoLink = product?.video_link;
+    if (videoLink) {
+      const videoId = getYouTubeVideoId(videoLink);
+      const thumbnail = videoId
+        ? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`
+        : "";
+      setVideoData((prev) => ({ ...prev, url: videoLink, thumbnail }));
+    }
+
+    const galleryImages =
+      product?.gallery_images?.map((image) => image?.image) || [];
+    setGalleryImages([product?.image, ...galleryImages]);
+    setStatus(product?.status);
+    dispatch(
+      setBreadcrumbPath([
+        {
+          name: t("myAds"),
+          slug: "/my-ads",
+        },
+        {
+          name: truncate(product?.translated_item?.name || product?.name, 80),
+        },
+      ])
+    );
+  };
+  const incrementViews = async (item_id) => {
+    try {
+      if (!item_id) {
+        console.error("Invalid item_id for incrementViews");
+        return;
+      }
+      const res = await setItemTotalClickApi.setItemTotalClick({ item_id });
+    } catch (error) {
+      console.error("Error incrementing views:", error);
+    }
+  };
+
+  const fetchPublicListingDetails = async (slug) => {
+    const response = await allItemApi.getItems({ slug });
+    const product = response?.data?.data?.data?.[0];
+
+    if (!product) throw new Error("Public listing product not found");
+    setProductDetails(product);
+    const videoLink = product?.video_link;
+    if (videoLink) {
+      setVideoData((prev) => ({ ...prev, url: videoLink }));
+      const videoId = getYouTubeVideoId(videoLink);
+      const thumbnail = videoId
+        ? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`
+        : "";
+      setVideoData((prev) => ({ ...prev, thumbnail }));
+    }
+
+    const galleryImages =
+      product?.gallery_images?.map((image) => image?.image) || [];
+    setGalleryImages([product?.image, ...galleryImages]);
+    await incrementViews(product?.id);
+  };
+
+  const fetchProductDetails = async () => {
+    try {
+      setIsLoading(true);
+      if (isMyListing) {
+        await fetchMyListingDetails(slug);
+      } else {
+        await fetchPublicListingDetails(slug);
+      }
+    } catch (error) {
+      console.error("Failed to fetch product details:", error);
+      // You can also show a toast or error message here
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const filteredFields = getFilteredCustomFields(
+    productDetails?.all_translated_custom_fields,
+    CurrentLanguage?.id
+  );
+
+  return (
+    <Layout>
+      {isLoading ? (
+        <PageLoader />
+      ) : productDetails ? (
+        <>
+          {isMyListing ? (
+            <BreadCrumb />
+          ) : (
+            <BreadCrumb
+              title2={truncate(
+                productDetails?.translated_item?.name || productDetails?.name,
+                80
+              )}
+            />
+          )}
+          <div className="container mt-8">
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-7 mt-6">
+              <div className="col-span-1 lg:col-span-8">
+                <div className="flex flex-col gap-7">
+                  <ProductGallery
+                    galleryImages={galleryImages}
+                    videoData={videoData}
+                  />
+
+                  {IsShowFeaturedAd && (
+                    <MakeFeaturedAd
+                      item_id={productDetails?.id}
+                      setProductDetails={setProductDetails}
+                    />
+                  )}
+
+                  {filteredFields.length > 0 && (
+                    <ProductFeature filteredFields={filteredFields} />
+                  )}
+                  <ProductDescription productDetails={productDetails} />
+                </div>
+              </div>
+              <div className="flex flex-col col-span-1 lg:col-span-4 gap-7">
+                {isMyListing ? (
+                  <MyAdsListingDetailCard productDetails={productDetails} />
+                ) : (
+                  <ProductDetailCard
+                    productDetails={productDetails}
+                    setProductDetails={setProductDetails}
+                  />
+                )}
+
+                {!isMyListing && (
+                  <SellerDetailCard
+                    productDetails={productDetails}
+                    setProductDetails={setProductDetails}
+                  />
+                )}
+
+                {isMyListing && (
+                  <AdsStatusChangeCards
+                    productDetails={productDetails}
+                    setProductDetails={setProductDetails}
+                    status={status}
+                    setStatus={setStatus}
+                  />
+                )}
+
+                {isEditedByAdmin && (
+                  <AdEditedByAdmin
+                    admin_edit_reason={productDetails?.admin_edit_reason}
+                  />
+                )}
+
+                {isMyAdExpired && (
+                  <RenewAd
+                    item_id={productDetails?.id}
+                    setProductDetails={setProductDetails}
+                    currentLanguageId={CurrentLanguage?.id}
+                    setStatus={setStatus}
+                  />
+                )}
+
+                <ProductLocation productDetails={productDetails} />
+
+                {!isMyListing && !productDetails?.is_already_reported && (
+                  <AdsReportCard
+                    productDetails={productDetails}
+                    setProductDetails={setProductDetails}
+                  />
+                )}
+              </div>
+            </div>
+            {!isMyListing && (
+              <SimilarProducts
+                productDetails={productDetails}
+                key={`similar-products-${CurrentLanguage?.id}`}
+              />
+            )}
+            <OpenInAppDrawer
+              isOpenInApp={isOpenInApp}
+              setIsOpenInApp={setIsOpenInApp}
+            />
+          </div>
+        </>
+      ) : (
+        <div className="container mt-8">
+          <NoData name={t("oneAdvertisement")} />
+        </div>
+      )}
+    </Layout>
+  );
+};
+
+export default ProductDetails;
diff --git a/components/PagesComponent/ProductDetail/ProductFeature.jsx b/components/PagesComponent/ProductDetail/ProductFeature.jsx
new file mode 100644
index 0000000..b77c474
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/ProductFeature.jsx
@@ -0,0 +1,80 @@
+import { Badge } from "@/components/ui/badge";
+import { FaRegLightbulb } from "react-icons/fa";
+import { isPdf, t } from "@/utils/index";
+import { MdOutlineAttachFile } from "react-icons/md";
+import CustomLink from "@/components/Common/CustomLink";
+import CustomImage from "@/components/Common/CustomImage";
+
+const ProductFeature = ({ filteredFields }) => {
+  return (
+    <div className="flex flex-col gap-2 bg-muted rounded-lg">
+      <div className="flex flex-col gap-2 p-4">
+        <div>
+          <Badge className="bg-primary rounded-sm gap-1 text-base  text-white py-2 px-4">
+            <FaRegLightbulb />
+            {t("highlights")}
+          </Badge>
+        </div>
+        <div className="flex flex-col gap-6 items-start mt-6">
+          {filteredFields?.map((feature, index) => {
+            return (
+              <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-3 w-full" key={index}>
+                <div className="flex items-center gap-2 w-full md:w-1/3">
+                  <CustomImage
+                    src={feature?.image}
+                    alt={feature?.translated_name || feature?.name}
+                    height={24}
+                    width={24}
+                    className="aspect-square size-6"
+                  />
+                  <p className="text-base font-medium text-wrap">
+                    {feature?.translated_name || feature?.name}
+                  </p>
+                </div>
+
+                <div className="flex items-center gap-2 sm:gap-4 w-full md:w-2/3">
+                  <span className="hidden md:inline">:</span>
+                  {feature.type === "fileinput" ? (
+                    isPdf(feature?.value?.[0]) ? (
+                      <div className="flex gap-1 items-center">
+                        <MdOutlineAttachFile size={20} />
+                        <CustomLink
+                          href={feature?.value?.[0]}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          {t("viewPdf")}
+                        </CustomLink>
+                      </div>
+                    ) : (
+                      <CustomLink
+                        href={feature?.value}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <CustomImage
+                          src={feature?.value}
+                          alt="Preview"
+                          width={36}
+                          height={36}
+                        />
+                      </CustomLink>
+                    )
+                  ) : (
+                    <p className="text-base text-muted-foreground w-full">
+                      {Array.isArray(feature?.translated_selected_values)
+                        ? feature?.translated_selected_values.join(", ")
+                        : feature?.translated_selected_values}
+                    </p>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductFeature;
diff --git a/components/PagesComponent/ProductDetail/ProductGallery.jsx b/components/PagesComponent/ProductDetail/ProductGallery.jsx
new file mode 100644
index 0000000..cf20d26
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/ProductGallery.jsx
@@ -0,0 +1,205 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { PhotoProvider, PhotoView } from "react-photo-view";
+import "react-photo-view/dist/react-photo-view.css";
+import {
+  RiArrowLeftLine,
+  RiArrowRightLine,
+  RiPlayCircleFill,
+} from "react-icons/ri";
+import { useSelector } from "react-redux";
+import { getIsRtl } from "@/redux/reducer/languageSlice";
+import ReactPlayer from "react-player";
+import { getPlaceholderImage } from "@/redux/reducer/settingSlice";
+import CustomImage from "@/components/Common/CustomImage";
+
+const ProductGallery = ({ galleryImages, videoData }) => {
+  const [selectedIndex, setSelectedIndex] = useState(0); // -1 means video
+  const carouselApi = useRef(null);
+  const isRTL = useSelector(getIsRtl);
+  const placeHolderImage = useSelector(getPlaceholderImage);
+
+  const hasVideo = videoData?.url;
+
+  useEffect(() => {
+    if (!carouselApi.current) return;
+    // If no video, we use this normally
+    const handleSelect = () => {
+      const index = carouselApi.current.selectedScrollSnap();
+      setSelectedIndex(index);
+    };
+    carouselApi.current.on("select", handleSelect);
+    setSelectedIndex(carouselApi.current.selectedScrollSnap());
+
+    return () => {
+      carouselApi.current?.off("select", handleSelect);
+    };
+  }, []);
+
+  const handlePrevImage = () => {
+    if (!carouselApi.current) return;
+    if (selectedIndex === -1) {
+      // From video, go to last image
+      const lastImageIndex = galleryImages.length - 1;
+      carouselApi.current.scrollTo(lastImageIndex);
+      setSelectedIndex(lastImageIndex);
+    } else if (selectedIndex === 0) {
+      if (hasVideo) {
+        setSelectedIndex(-1);
+      } else {
+        const lastIndex = galleryImages.length - 1;
+        carouselApi.current.scrollTo(lastIndex);
+        setSelectedIndex(lastIndex);
+      }
+    } else {
+      const newIndex = selectedIndex - 1;
+      carouselApi.current.scrollTo(newIndex);
+      setSelectedIndex(newIndex);
+    }
+  };
+
+  const handleNextImage = () => {
+    if (!carouselApi.current) return;
+    if (selectedIndex === -1) {
+      // From video, go to first image
+      carouselApi.current.scrollTo(0);
+      setSelectedIndex(0);
+    } else if (selectedIndex === galleryImages.length - 1) {
+      // From last image, go to video
+      if (hasVideo) {
+        // Go to video
+        setSelectedIndex(-1);
+      } else {
+        // Loop to first image
+        carouselApi.current.scrollTo(0);
+        setSelectedIndex(0);
+      }
+    } else {
+      const newIndex = (selectedIndex + 1) % galleryImages.length;
+      carouselApi.current.scrollTo(newIndex);
+      setSelectedIndex(newIndex);
+    }
+  };
+
+  const handleImageClick = (index) => {
+    setSelectedIndex(index);
+  };
+
+  return (
+    <PhotoProvider>
+      <div className="bg-muted rounded-lg">
+        {selectedIndex === -1 ? (
+          <ReactPlayer
+            url={videoData.url}
+            controls
+            playing={false}
+            className="aspect-[870/500] rounded-lg"
+            width="100%"
+            height="100%"
+            config={{
+              file: {
+                attributes: { controlsList: "nodownload" },
+              },
+            }}
+          />
+        ) : (
+          <PhotoView
+            src={galleryImages[selectedIndex] || placeHolderImage}
+            index={selectedIndex}
+            key={selectedIndex}
+          >
+            <CustomImage
+              src={galleryImages[selectedIndex]}
+              alt="Product Detail"
+              width={870}
+              height={500}
+              className="h-full w-full object-center object-contain rounded-lg aspect-[870/500] cursor-pointer"
+            />
+          </PhotoView>
+        )}
+      </div>
+      <div className="relative">
+        <Carousel
+          key={isRTL ? "rtl" : "ltr"}
+          opts={{
+            align: "start",
+            containScroll: "trim",
+            direction: isRTL ? "rtl" : "ltr",
+          }}
+          className="w-full"
+          setApi={(api) => {
+            carouselApi.current = api;
+          }}
+        >
+          <CarouselContent className="md:-ml-[20px]">
+            {galleryImages?.map((image, index) => (
+              <CarouselItem key={index} className="basis-auto md:pl-[20px]">
+                <PhotoView src={image} index={index} className="hidden" />
+                <CustomImage
+                  src={image}
+                  alt="Product Detail"
+                  height={120}
+                  width={120}
+                  className={`w-[100px] sm:w-[120px] aspect-square object-cover rounded-lg cursor-pointer ${
+                    selectedIndex === index ? "border-2 border-primary" : ""
+                  }`}
+                  onClick={() => handleImageClick(index)}
+                />
+              </CarouselItem>
+            ))}
+            {hasVideo && (
+              <CarouselItem className="basis-auto md:pl-[20px]">
+                <div
+                  className={`relative w-[100px] sm:w-[120px] aspect-square rounded-lg cursor-pointer ${
+                    selectedIndex === -1 ? "border-2 border-primary" : ""
+                  }`}
+                  onClick={() => setSelectedIndex(-1)}
+                >
+                  <CustomImage
+                    src={videoData?.thumbnail}
+                    alt="Video Thumbnail"
+                    height={120}
+                    width={120}
+                    className="w-full h-full object-cover rounded-lg"
+                  />
+                  <div className="absolute inset-0 bg-black bg-opacity-30 rounded-lg flex items-center justify-center">
+                    <RiPlayCircleFill size={40} className="text-white" />
+                  </div>
+                </div>
+              </CarouselItem>
+            )}
+          </CarouselContent>
+          <div className="absolute top-1/2 ltr:left-2 rtl:right-2 -translate-y-1/2">
+            <button
+              onClick={handlePrevImage}
+              className="bg-primary p-1 sm:p-2 rounded-full"
+            >
+              <RiArrowLeftLine
+                size={24}
+                color="white"
+                className={isRTL ? "rotate-180" : ""}
+              />
+            </button>
+          </div>
+          <div className="absolute top-1/2 ltr:right-2 rtl:left-2 -translate-y-1/2">
+            <button
+              onClick={handleNextImage}
+              className="bg-primary p-1 sm:p-2 rounded-full"
+            >
+              <RiArrowRightLine
+                size={24}
+                color="white"
+                className={isRTL ? "rotate-180" : ""}
+              />
+            </button>
+          </div>
+        </Carousel>
+      </div>
+    </PhotoProvider>
+  );
+};
+export default ProductGallery;
diff --git a/components/PagesComponent/ProductDetail/ProductLocation.jsx b/components/PagesComponent/ProductDetail/ProductLocation.jsx
new file mode 100644
index 0000000..4d7e2ce
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/ProductLocation.jsx
@@ -0,0 +1,50 @@
+import { IoLocationOutline } from "react-icons/io5";
+import dynamic from "next/dynamic";
+import { t } from "@/utils";
+
+const Map = dynamic(() => import("@/components/Location/Map"), {
+  ssr: false,
+});
+
+const ProductLocation = ({ productDetails }) => {
+  const handleShowMapClick = () => {
+    const locationQuery = `${
+      productDetails?.translated_item?.address || productDetails?.address
+    }`;
+    const googleMapsUrl = `https://www.google.com/maps?q=${locationQuery}&ll=${productDetails?.latitude},${productDetails?.longitude}&z=12&t=m`;
+    window.open(googleMapsUrl, "_blank");
+  };
+
+  return (
+    <div className="flex flex-col border rounded-lg ">
+      <div className="p-4">
+        <p className="font-bold">{t("postedIn")}</p>
+      </div>
+      <div className="border-b w-full"></div>
+      <div className="flex flex-col p-4 gap-4">
+        <div className="flex items-start gap-2   ">
+          <IoLocationOutline size={22} className="mt-1" />
+          <p className="w-full overflow-hidden text-ellipsis">
+            {productDetails?.translated_address}
+          </p>
+        </div>
+        <div className="rounded-lg overflow-hidden">
+          <Map
+            latitude={productDetails?.latitude}
+            longitude={productDetails?.longitude}
+          />
+        </div>
+        <div>
+          <button
+            className="border px-4 py-2 rounded-md w-full flex items-center gap-2 text-base  justify-center"
+            onClick={handleShowMapClick}
+          >
+            {t("showOnMap")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductLocation;
diff --git a/components/PagesComponent/ProductDetail/RenewAd.jsx b/components/PagesComponent/ProductDetail/RenewAd.jsx
new file mode 100644
index 0000000..e473c74
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/RenewAd.jsx
@@ -0,0 +1,116 @@
+import { useNavigate } from "@/components/Common/useNavigate";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { getIsFreAdListing } from "@/redux/reducer/settingSlice";
+import { t } from "@/utils";
+import { getPackageApi, renewItemApi } from "@/utils/api";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { toast } from "sonner";
+
+const RenewAd = ({
+  currentLanguageId,
+  setProductDetails,
+  item_id,
+  setStatus,
+}) => {
+  const { navigate } = useNavigate();
+  const [RenewId, setRenewId] = useState("");
+  const [ItemPackages, setItemPackages] = useState([]);
+  const [isRenewingAd, setIsRenewingAd] = useState(false);
+
+  const isFreeAdListing = useSelector(getIsFreAdListing);
+
+  useEffect(() => {
+    getItemsPackageData();
+  }, [currentLanguageId]);
+
+  const getItemsPackageData = async () => {
+    try {
+      const res = await getPackageApi.getPackage({ type: "item_listing" });
+      const { data } = res.data;
+      setItemPackages(data);
+      setRenewId(data[0]?.id);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleRenewItem = async () => {
+    try {
+      const subPackage = ItemPackages.find(
+        (p) => Number(p.id) === Number(RenewId)
+      );
+      if (!isFreeAdListing && !subPackage?.is_active) {
+        toast.error(t("purchasePackageFirst"));
+        navigate("/user-subscription");
+        return;
+      }
+
+      try {
+        setIsRenewingAd(true);
+        const res = await renewItemApi.renewItem({
+          item_ids: item_id,
+          ...(isFreeAdListing ? {} : { package_id: RenewId }),
+        });
+        if (res?.data?.error === false) {
+          setProductDetails((prev) => ({
+            ...prev,
+            status: res?.data?.data?.status,
+            expiry_date: res?.data?.data?.expiry_date,
+          }));
+          setStatus(res?.data?.data?.status);
+          toast.success(res?.data?.message);
+        } else {
+          toast.error(res?.data?.message);
+        }
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setIsRenewingAd(false);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <div className="flex flex-col border rounded-md ">
+      <div className="p-4 border-b font-semibold">{t("renewAd")}</div>
+      <div className="p-4 flex flex-col gap-4 ">
+        <Select
+          className="outline-none "
+          value={RenewId}
+          onValueChange={(value) => setRenewId(value)}
+        >
+          <SelectTrigger className="outline-none">
+            <SelectValue placeholder={t("renewAd")} />
+          </SelectTrigger>
+          <SelectContent className="w-[--radix-select-trigger-width]">
+            {ItemPackages.map((item) => (
+              <SelectItem value={item?.id} key={item?.id}>
+                {item?.translated_name} - {item.duration} {t("days")}{" "}
+                {item?.is_active && t("activePlan")}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <button
+          className="bg-primary text-white font-medium w-full p-2 rounded-md disabled:opacity-80"
+          onClick={handleRenewItem}
+          disabled={isRenewingAd}
+        >
+          {t("renew")}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default RenewAd;
diff --git a/components/PagesComponent/ProductDetail/SellerDetailCard.jsx b/components/PagesComponent/ProductDetail/SellerDetailCard.jsx
new file mode 100644
index 0000000..73ea60e
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/SellerDetailCard.jsx
@@ -0,0 +1,221 @@
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { MdVerifiedUser } from "react-icons/md";
+import { IoMdStar } from "react-icons/io";
+import { FaArrowRight, FaPaperPlane } from "react-icons/fa";
+import { IoChatboxEllipsesOutline } from "react-icons/io5";
+import { useSelector } from "react-redux";
+import { extractYear, t } from "@/utils";
+import CustomLink from "@/components/Common/CustomLink";
+import { BiPhoneCall } from "react-icons/bi";
+import { itemOfferApi } from "@/utils/api";
+import { toast } from "sonner";
+import { userSignUpData } from "@/redux/reducer/authSlice";
+import { Gift } from "lucide-react";
+import MakeOfferModal from "./MakeOfferModal";
+import { setIsLoginOpen } from "@/redux/reducer/globalStateSlice";
+import ApplyJobModal from "./ApplyJobModal";
+import CustomImage from "@/components/Common/CustomImage";
+import Link from "next/link";
+import { useNavigate } from "@/components/Common/useNavigate";
+
+const SellerDetailCard = ({ productDetails, setProductDetails }) => {
+  const { navigate } = useNavigate();
+  const userData = productDetails && productDetails?.user;
+  const memberSinceYear = productDetails?.created_at
+    ? extractYear(productDetails.created_at)
+    : "";
+  const [IsStartingChat, setIsStartingChat] = useState(false);
+  const loggedInUser = useSelector(userSignUpData);
+  const loggedInUserId = loggedInUser?.id;
+  const [IsOfferModalOpen, setIsOfferModalOpen] = useState(false);
+  const [showApplyModal, setShowApplyModal] = useState(false);
+
+  const isAllowedToMakeOffer =
+    productDetails?.price > 0 &&
+    !productDetails?.is_already_offered &&
+    Number(productDetails?.category?.is_job_category) === 0 &&
+    Number(productDetails?.category?.price_optional) === 0;
+  const isJobCategory = Number(productDetails?.category?.is_job_category) === 1;
+  const isApplied = productDetails?.is_already_job_applied;
+  const item_id = productDetails?.id;
+
+  const offerData = {
+    itemPrice: productDetails?.price,
+    itemId: productDetails?.id,
+  };
+
+  const handleChat = async () => {
+    if (!loggedInUserId) {
+      setIsLoginOpen(true);
+      return;
+    }
+    try {
+      setIsStartingChat(true);
+      const response = await itemOfferApi.offer({
+        item_id: offerData.itemId,
+      });
+      const { data } = response.data;
+      navigate("/chat?activeTab=buying&chatid=" + data?.id);
+    } catch (error) {
+      toast.error(t("unableToStartChat"));
+      console.log(error);
+    } finally {
+      setIsStartingChat(false);
+    }
+  };
+
+  const handleMakeOffer = () => {
+    if (!loggedInUserId) {
+      setIsLoginOpen(true);
+      return;
+    }
+    setIsOfferModalOpen(true);
+  };
+
+  const handleApplyJob = () => {
+    if (!loggedInUserId) {
+      setIsLoginOpen(true);
+      return;
+    }
+    setShowApplyModal(true);
+  };
+
+  return (
+    <>
+      <div className="flex items-center rounded-lg border flex-col">
+        {(userData?.is_verified === 1 || memberSinceYear) && (
+          <div className="p-4 flex justify-between items-center w-full">
+            {productDetails?.user?.is_verified == 1 && (
+              <Badge
+                variant="outline"
+                className="p-1 bg-[#FA6E53] flex items-center gap-1 rounded-md text-white text-sm"
+              >
+                <MdVerifiedUser size={20} />
+                {t("verified")}
+              </Badge>
+            )}
+            {memberSinceYear && (
+              <p className="ltr:ml-auto rtl:mr-auto text-sm text-muted-foreground">
+                {t("memberSince")}: {memberSinceYear}
+              </p>
+            )}
+          </div>
+        )}
+        <div className="border-b w-full"></div>
+        <div className="flex gap-2 justify-between w-full items-center p-4">
+          <div className="flex gap-2.5 items-center max-w-[90%]">
+            <CustomImage
+              onClick={() => navigate(`/seller/${productDetails?.user?.id}`)}
+              src={productDetails?.user?.profile}
+              alt="Seller Image"
+              width={80}
+              height={80}
+              className="w-[80px] aspect-square rounded-lg cursor-pointer"
+            />
+            <div className="flex flex-col gap-1 min-w-0">
+              <CustomLink
+                href={`/seller/${productDetails?.user?.id}`}
+                className="font-bold text-lg text_ellipsis"
+              >
+                {productDetails?.user?.name}
+              </CustomLink>
+              {productDetails?.user?.reviews_count > 0 &&
+                productDetails?.user?.average_rating && (
+                  <div className="flex items-center gap-1 text-sm">
+                    <IoMdStar size={20} className="text-black" />
+                    <p className="flex">
+                      {Number(productDetails?.user?.average_rating).toFixed(2)}
+                    </p>{" "}
+                    |{" "}
+                    <p className="flex text-sm ">
+                      {productDetails?.user?.reviews_count}
+                    </p>{" "}
+                    {t("ratings")}
+                  </div>
+                )}
+              {productDetails?.user?.show_personal_details === 1 &&
+                productDetails?.user?.email && (
+                  <Link
+                    href={`mailto:${productDetails?.user?.email}`}
+                    className="text-sm text_ellipsis"
+                  >
+                    {productDetails?.user?.email}
+                  </Link>
+                )}
+            </div>
+          </div>
+          <CustomLink href={`/seller/${productDetails?.user?.id}`}>
+            <FaArrowRight size={20} className="text-black rtl:scale-x-[-1]" />
+          </CustomLink>
+        </div>
+        <div className="border-b w-full"></div>
+        <div className="flex flex-wrap items-center gap-4 p-4 w-full">
+          <button
+            onClick={handleChat}
+            disabled={IsStartingChat}
+            className="bg-[#000] text-white p-4 rounded-md flex items-center gap-2 text-base font-medium justify-center whitespace-nowrap [flex:1_1_47%]"
+          >
+            <IoChatboxEllipsesOutline size={22} />
+            {IsStartingChat ? (
+              <span>{t("startingChat")}</span>
+            ) : (
+              <span>{t("startChat")}</span>
+            )}
+          </button>
+
+          {productDetails?.user?.mobile && (
+            <Link
+              href={`tel:${
+                productDetails?.user?.country_code
+                  ? `+${productDetails.user.country_code}`
+                  : ""
+              }${productDetails?.user?.mobile}`}
+              className="bg-[#000] text-white p-4 rounded-md flex items-center gap-2 text-base font-medium justify-center whitespace-nowrap [flex:1_1_47%]"
+            >
+              <BiPhoneCall size={21} />
+              <span>{t("call")}</span>
+            </Link>
+          )}
+          {isAllowedToMakeOffer && (
+            <button
+              onClick={handleMakeOffer}
+              className="bg-primary text-white p-4 rounded-md flex items-center gap-2 text-base font-medium justify-center whitespace-nowrap [flex:1_1_47%]"
+            >
+              <Gift size={21} />
+              {t("makeOffer")}
+            </button>
+          )}
+          {isJobCategory && (
+            <button
+              className={`text-white p-4 rounded-md flex items-center gap-2 text-base font-medium justify-center whitespace-nowrap [flex:1_1_47%] ${
+                isApplied ? "bg-primary" : "bg-black"
+              }`}
+              disabled={isApplied}
+              onClick={handleApplyJob}
+            >
+              <FaPaperPlane size={20} />
+              {isApplied ? t("applied") : t("applyNow")}
+            </button>
+          )}
+        </div>
+      </div>
+
+      <MakeOfferModal
+        isOpen={IsOfferModalOpen}
+        onClose={() => setIsOfferModalOpen(false)}
+        productDetails={productDetails}
+        key={`offer-modal-${IsOfferModalOpen}`}
+      />
+      <ApplyJobModal
+        key={`apply-job-modal-${showApplyModal}`}
+        showApplyModal={showApplyModal}
+        setShowApplyModal={setShowApplyModal}
+        item_id={item_id}
+        setProductDetails={setProductDetails}
+      />
+    </>
+  );
+};
+
+export default SellerDetailCard;
diff --git a/components/PagesComponent/ProductDetail/SimilarProducts.jsx b/components/PagesComponent/ProductDetail/SimilarProducts.jsx
new file mode 100644
index 0000000..dd152ef
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/SimilarProducts.jsx
@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from "react";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { allItemApi } from "@/utils/api";
+import ProductCard from "@/components/Common/ProductCard";
+import { useSelector } from "react-redux";
+import { getIsRtl } from "@/redux/reducer/languageSlice";
+import { t } from "@/utils";
+import { getCityData, getKilometerRange } from "@/redux/reducer/locationSlice";
+
+const SimilarProducts = ({ productDetails }) => {
+  const [similarData, setSimilarData] = useState([]);
+  const isRTL = useSelector(getIsRtl);
+  const location = useSelector(getCityData);
+  const KmRange = useSelector(getKilometerRange);
+
+  const fetchSimilarData = async (cateID) => {
+    try {
+      const response = await allItemApi.getItems({
+        category_id: cateID,
+        ...(location?.lat &&
+          location?.long && {
+          latitude: location?.lat,
+          longitude: location?.long,
+          radius: KmRange,
+        }),
+      });
+      const responseData = response?.data;
+      if (responseData) {
+        const { data } = responseData;
+        const filteredData = data?.data?.filter(
+          (item) => item.id !== productDetails?.id
+        );
+        setSimilarData(filteredData || []);
+      } else {
+        console.error("Invalid response:", response);
+      }
+    } catch (error) {
+      console.error("Error:", error);
+    }
+  };
+  useEffect(() => {
+    if (productDetails?.category_id) {
+      fetchSimilarData(productDetails?.category_id);
+    }
+  }, [productDetails?.category_id]);
+
+  if (similarData && similarData.length === 0) {
+    return null;
+  }
+
+  const handleLikeAllData = (id) => {
+    const updatedItems = similarData.map((item) => {
+      if (item.id === id) {
+        return { ...item, is_liked: !item.is_liked };
+      }
+      return item;
+    });
+    setSimilarData(updatedItems);
+  };
+
+  return (
+    <div className="flex flex-col gap-5 mt-8">
+      <h2 className="text-2xl font-medium">{t("relatedAds")}</h2>
+      <Carousel
+        key={isRTL ? "rtl" : "ltr"}
+        opts={{
+          direction: isRTL ? "rtl" : "ltr",
+        }}
+      >
+        <CarouselContent>
+          {similarData?.map((item) => (
+            <CarouselItem
+              key={item.id}
+              className="md:basis-1/3 lg:basis-[25%] basis-2/3 sm:basis-1/2"
+            >
+              <ProductCard item={item} handleLike={handleLikeAllData} />
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        {similarData?.length > 3 && (
+          <>
+            <CarouselPrevious className="hidden md:flex absolute top-1/2 ltr:left-2 rtl:right-2 rtl:scale-x-[-1] -translate-y-1/2 bg-primary text-white rounded-full" />
+            <CarouselNext className="hidden md:flex absolute top-1/2 ltr:right-2 rtl:left-2 rtl:scale-x-[-1] -translate-y-1/2 bg-primary text-white rounded-full" />
+          </>
+        )}
+      </Carousel>
+    </div>
+  );
+};
+
+export default SimilarProducts;
diff --git a/components/PagesComponent/ProductDetail/SoldOutModal.jsx b/components/PagesComponent/ProductDetail/SoldOutModal.jsx
new file mode 100644
index 0000000..ce4097b
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/SoldOutModal.jsx
@@ -0,0 +1,199 @@
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { t } from "@/utils";
+import { getItemBuyerListApi } from "@/utils/api";
+import NoDataFound from "../../../public/assets/no_data_found_illustrator.svg";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Skeleton } from "@/components/ui/skeleton";
+import CustomImage from "@/components/Common/CustomImage";
+
+const SoldOutModal = ({
+  productDetails,
+  showSoldOut,
+  setShowSoldOut,
+  selectedRadioValue,
+  setSelectedRadioValue,
+  setShowConfirmModal,
+}) => {
+  const [buyers, setBuyers] = useState([]);
+  const [isNoneOfAboveChecked, setIsNoneOfAboveChecked] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const isJobAd = productDetails?.category?.is_job_category === 1;
+
+  useEffect(() => {
+    if (showSoldOut) {
+      getBuyers();
+    }
+  }, [showSoldOut]);
+
+  const handleNoneOfAboveChecked = (checked) => {
+    if (selectedRadioValue !== null) {
+      setSelectedRadioValue(null);
+    }
+    setIsNoneOfAboveChecked(checked);
+  };
+
+  const handleRadioButtonCheck = (value) => {
+    if (isNoneOfAboveChecked) {
+      setIsNoneOfAboveChecked(false);
+    }
+    setSelectedRadioValue(value);
+  };
+
+  const handleHideModal = () => {
+    setIsNoneOfAboveChecked(false);
+    setSelectedRadioValue(null);
+    setShowSoldOut(false);
+  };
+
+  const getBuyers = async () => {
+    try {
+      setIsLoading(true);
+      const res = await getItemBuyerListApi.getItemBuyerList({
+        item_id: productDetails?.id,
+      });
+      setBuyers(res?.data?.data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSoldOut = () => {
+    setShowSoldOut(false);
+    setShowConfirmModal(true);
+  };
+
+  return (
+    <Dialog open={showSoldOut} onOpenChange={handleHideModal}>
+      <DialogContent
+        onInteractOutside={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle className="text-xl">
+            {isJobAd ? t("whoWasHired") : t("whoMadePurchase")}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="mt-4 flex flex-col gap-6">
+          <div className="rounded-md p-2 bg-muted flex items-center gap-4">
+            <div className="">
+              <CustomImage
+                src={productDetails?.image}
+                alt={productDetails?.name}
+                height={80}
+                width={80}
+                className="h-20 w-20"
+              />
+            </div>
+            <div>
+              <h1 className="text-base font-medium">{productDetails?.name}</h1>
+              <p className="text-xl font-medium text-primary">
+                {productDetails?.formatted_price}
+              </p>
+            </div>
+          </div>
+          <div className="text-sm text-red-500">
+            {isJobAd ? t("selectHiredApplicant") : t("selectBuyerFromList")}
+          </div>
+
+          {isLoading ? (
+            // Buyers list skeleton
+            <>
+              {[1, 2, 3].map((item) => (
+                <div key={item} className="flex justify-between">
+                  <div className="flex gap-4 items-center">
+                    <Skeleton className="h-12 w-12 rounded-full" />
+                    <Skeleton className="h-4 w-24" />
+                  </div>
+                  <Skeleton className="h-4 w-4 rounded-full" />
+                </div>
+              ))}
+            </>
+          ) : (
+            <>
+              {buyers?.length > 0 ? (
+                buyers?.map((buyer) => {
+                  return (
+                    <div key={buyer?.id} className="flex justify-between">
+                      <div className="flex gap-4 items-center">
+                        <CustomImage
+                          src={buyer?.profile}
+                          width={48}
+                          height={48}
+                          alt="Ad Buyer"
+                          className="h-12 w-12 rounded-full"
+                        />
+                        <span className="text-sm">{buyer?.name}</span>
+                      </div>
+                      <RadioGroup
+                        onValueChange={(value) => handleRadioButtonCheck(value)}
+                        value={selectedRadioValue}
+                      >
+                        <div className="flex items-center space-x-2">
+                          <RadioGroupItem
+                            value={buyer?.id}
+                            id={`buyer-${buyer?.id}`}
+                          />
+                        </div>
+                      </RadioGroup>
+                    </div>
+                  );
+                })
+              ) : (
+                <div className="flex justify-center flex-col items-center gap-4">
+                  <div>
+                    <CustomImage
+                      src={NoDataFound}
+                      alt="no_img"
+                      width={200}
+                      height={200}
+                    />
+                  </div>
+                  <h3 className="text-xl font-medium">
+                    {isJobAd ? t("noApplicantsFound") : t("noBuyersFound")}
+                  </h3>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+        <div className="pt-6 pb-1 border-t flex items-center justify-between">
+          <div className="flex items-center gap-2 ">
+            <Checkbox
+              id="terms"
+              checked={isNoneOfAboveChecked}
+              onCheckedChange={(checked) => handleNoneOfAboveChecked(checked)}
+            />
+            <label
+              htmlFor="terms"
+              className="text-sm  leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              {t("noneOfAbove")}
+            </label>
+          </div>
+          <button
+            className="border rounded-md px-4 py-2 text-lg disabled:bg-gray-500 disabled:text-white hover:bg-primary disabled:border-none hover:text-white"
+            disabled={
+              (!selectedRadioValue && !isNoneOfAboveChecked) || isLoading
+            }
+            onClick={handleSoldOut}
+          >
+            {isJobAd ? t("jobClosed") : t("soldOut")}
+          </button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+export default SoldOutModal;
diff --git a/components/PagesComponent/ProductDetail/SoldOutModalSkeleton.jsx b/components/PagesComponent/ProductDetail/SoldOutModalSkeleton.jsx
new file mode 100644
index 0000000..1f70157
--- /dev/null
+++ b/components/PagesComponent/ProductDetail/SoldOutModalSkeleton.jsx
@@ -0,0 +1,39 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+const SoldOutModalSkeleton = () => {
+    return (
+        <>
+            <div className='mt-4 flex flex-col gap-6'>
+                <div className='rounded-md p-2 bg-muted flex items-center gap-4'>
+                    <Skeleton className='h-20 w-20 rounded-md' />
+                    <div className='w-full'>
+                        <Skeleton className='h-5 w-3/5 mb-2' />
+                        <Skeleton className='h-7 w-2/5' />
+                    </div>
+                </div>
+                <Skeleton className='h-5 w-4/5' />
+
+                {/* Buyers list skeletons */}
+                {[1, 2, 3].map((item) => (
+                    <div key={item} className='flex justify-between'>
+                        <div className='flex gap-4 items-center'>
+                            <Skeleton className='h-12 w-12 rounded-full' />
+                            <Skeleton className='h-4 w-24' />
+                        </div>
+                        <Skeleton className='h-4 w-4 rounded-full' />
+                    </div>
+                ))}
+
+                <div className='pt-6 pb-1 border-t flex items-center justify-between'>
+                    <div className='flex items-center gap-2'>
+                        <Skeleton className='h-4 w-4' />
+                        <Skeleton className='h-4 w-1/3' />
+                    </div>
+                    <Skeleton className='h-10 w-1/4 rounded-md' />
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default SoldOutModalSkeleton 
\ No newline at end of file
diff --git a/components/PagesComponent/ProfileDashboard/ProfileDashboard.jsx b/components/PagesComponent/ProfileDashboard/ProfileDashboard.jsx
new file mode 100644
index 0000000..57ae18d
--- /dev/null
+++ b/components/PagesComponent/ProfileDashboard/ProfileDashboard.jsx
@@ -0,0 +1,116 @@
+"use client";
+import ProfileSidebar from "@/components/Profile/ProfileSidebar";
+import { usePathname } from "next/navigation";
+import Checkauth from "@/HOC/Checkauth";
+import Notifications from "../Notifications/Notifications";
+import Profile from "@/components/Profile/Profile";
+import MyAds from "../MyAds/MyAds";
+import Favorites from "../Favorites/Favorites";
+import Transactions from "../Transactions/Transactions";
+import Reviews from "../Reviews/Reviews";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import Chat from "../Chat/Chat";
+import Layout from "@/components/Layout/Layout";
+import ProfileSubscription from "../Subscription/ProfileSubscription";
+import JobApplications from "../JobApplications/JobApplications";
+import { t } from "@/utils";
+import { useMediaQuery } from "usehooks-ts";
+import BlockedUsersMenu from "../Chat/BlockedUsersMenu";
+import { cn } from "@/lib/utils";
+
+const ProfileDashboard = () => {
+  const pathname = usePathname();
+  const isNotifications = pathname === "/notifications";
+  const isSubscriptions = pathname === "/user-subscription";
+  const isProfile = pathname === "/profile";
+  const isAds = pathname === "/my-ads";
+  const isFavorite = pathname === "/favorites";
+  const isTransaction = pathname === "/transactions";
+  const isReviews = pathname === "/reviews";
+  const isChat = pathname == "/chat";
+  const isJobApplications = pathname == "/job-applications";
+
+  const isLargeScreen = useMediaQuery("(min-width: 992px)");
+  const isSmallerThanLaptop = useMediaQuery("(max-width: 1200px)");
+
+  const renderHeading = () => {
+    if (isProfile) {
+      return t("myProfile");
+    } else if (isNotifications) {
+      return t("notifications");
+    } else if (isSubscriptions) {
+      return t("subscription");
+    } else if (isAds) {
+      return t("myAds");
+    } else if (isFavorite) {
+      return t("myFavorites");
+    } else if (isTransaction) {
+      return t("myTransaction");
+    } else if (isReviews) {
+      return t("reviews");
+    } else if (isChat) {
+      return "chat";
+    } else if (isJobApplications) {
+      return t("jobApplications");
+    }
+  };
+
+  const renderContent = () => {
+    if (isProfile) {
+      return <Profile />;
+    } else if (isNotifications) {
+      return <Notifications />;
+    } else if (isSubscriptions) {
+      return <ProfileSubscription />;
+    } else if (isAds) {
+      return <MyAds />;
+    } else if (isFavorite) {
+      return <Favorites />;
+    } else if (isTransaction) {
+      return <Transactions />;
+    } else if (isReviews) {
+      return <Reviews />;
+    } else if (isChat) {
+      return <Chat />;
+    } else if (isJobApplications) {
+      return <JobApplications />;
+    }
+  };
+  const breadCrumbTitle = renderHeading();
+  return (
+    <Layout>
+      <BreadCrumb title2={breadCrumbTitle} />
+      <div className="container mt-8">
+        {isChat && isSmallerThanLaptop ? (
+          <div className="flex items-center justify-between">
+            <h1 className="sectionTitle">{renderHeading()}</h1>
+            <BlockedUsersMenu />
+          </div>
+        ) : (
+          <h1 className="sectionTitle">{renderHeading()}</h1>
+        )}
+
+        <div
+          className={cn(
+            "grid grid-cols-1 lg:grid-cols-4 lg:border rounded-lg mt-6",
+            isChat && "border"
+          )}
+        >
+          {isLargeScreen && (
+            <div className="max-h-fit lg:col-span-1 ltr:lg:border-r rtl:lg:border-l">
+              <ProfileSidebar />
+            </div>
+          )}
+
+          <div
+            className={cn("lg:col-span-3 lg:border-t-0", !isChat && "lg:p-7")}
+          >
+            {renderContent()}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Checkauth(ProfileDashboard);
diff --git a/components/PagesComponent/Reviews/MyReviewsCard.jsx b/components/PagesComponent/Reviews/MyReviewsCard.jsx
new file mode 100644
index 0000000..d3836be
--- /dev/null
+++ b/components/PagesComponent/Reviews/MyReviewsCard.jsx
@@ -0,0 +1,126 @@
+"use client";
+import { GoReport } from "react-icons/go";
+import StarRating from "./StarRating";
+import { formatDate, t } from "@/utils";
+import { useState, useRef, useEffect } from "react";
+import ReportReviewModal from "./ReportReviewModal";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import CustomImage from "@/components/Common/CustomImage";
+
+const MyReviewsCard = ({ rating, setMyReviews }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isTextOverflowing, setIsTextOverflowing] = useState(false);
+  const textRef = useRef(null);
+  const [IsReportModalOpen, setIsReportModalOpen] = useState(false);
+  const [SellerReviewId, setSellerReviewId] = useState("");
+
+  useEffect(() => {
+    const checkTextOverflow = () => {
+      if (textRef.current) {
+        const isOverflowing =
+          textRef.current.scrollHeight > textRef.current.clientHeight;
+        setIsTextOverflowing(isOverflowing);
+      }
+    };
+
+    checkTextOverflow();
+    window.addEventListener("resize", checkTextOverflow);
+
+    return () => window.removeEventListener("resize", checkTextOverflow);
+  }, []);
+
+  const handleReportClick = (id) => {
+    setSellerReviewId(id);
+    setIsReportModalOpen(true);
+  };
+
+  return (
+    <div className="bg-white p-4 rounded-lg flex flex-col gap-4">
+      <div className="flex flex-col sm:flex-row flex-1 gap-4">
+        <div className="relative w-fit">
+          <CustomImage
+            src={rating?.buyer?.profile}
+            width={72}
+            height={72}
+            alt="Reviewer"
+            className="aspect-square rounded-full object-cover"
+          />
+          <CustomImage
+            src={rating?.item?.image}
+            width={36}
+            height={36}
+            alt="Reviewer"
+            className="absolute top-12 bottom-[-6px] right-[-6px] w-[36px] h-auto aspect-square rounded-full object-cover"
+          />
+        </div>
+
+        <div className="flex-1">
+          <div className="flex flex-1 items-center justify-between">
+            <p className="font-semibold">{rating?.buyer?.name}</p>
+            {rating?.report_status ? (
+              <div></div>
+            ) : (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button onClick={() => handleReportClick(rating?.id)}>
+                      <GoReport />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="left" align="center">
+                    <p>{t("reportReview")}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+          </div>
+
+          <p className="mt-1 text-sm line-clamp-1">
+            {rating?.item?.translated_name || rating?.item?.name}
+          </p>
+          <div className="mt-1 flex items-center gap-1">
+            <StarRating rating={Number(rating?.ratings)} size={24} />
+            <span className="text-sm text-muted-foreground">
+              {rating?.ratings}
+            </span>
+          </div>
+          <p className="text-sm mt-1 justify-self-end">
+            {formatDate(rating?.created_at)}
+          </p>
+        </div>
+      </div>
+
+      <div className="border-b"></div>
+
+      <div>
+        <p ref={textRef} className={`${!isExpanded ? "line-clamp-2" : ""}`}>
+          {rating?.review}
+        </p>
+        {isTextOverflowing && (
+          <div className="flex justify-center mt-1">
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="text-primary text-sm hover:underline"
+            >
+              {isExpanded ? "See Less" : "See More"}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Report Review Modal */}
+      <ReportReviewModal
+        isOpen={IsReportModalOpen}
+        setIsOpen={setIsReportModalOpen}
+        reviewId={SellerReviewId}
+        setMyReviews={setMyReviews}
+      />
+    </div>
+  );
+};
+export default MyReviewsCard;
diff --git a/components/PagesComponent/Reviews/MyReviewsCardSkeleton.jsx b/components/PagesComponent/Reviews/MyReviewsCardSkeleton.jsx
new file mode 100644
index 0000000..d03b5fa
--- /dev/null
+++ b/components/PagesComponent/Reviews/MyReviewsCardSkeleton.jsx
@@ -0,0 +1,60 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+const ReviewCardItem = () => {
+    return (
+        <div className="bg-white p-4 rounded-lg flex flex-col gap-4">
+            <div className="flex flex-col sm:flex-row flex-1 gap-4">
+                {/* Profile image with smaller image overlay */}
+                <div className="relative w-fit">
+                    <Skeleton className="w-[72px] h-[72px] rounded-full" />
+                    <Skeleton className="w-[36px] h-[36px] rounded-full absolute top-12 bottom-[-6px] right-[-6px]" />
+                </div>
+
+                <div className="flex-1">
+                    {/* Reviewer name and report icon */}
+                    <div className="flex flex-1 items-center justify-between">
+                        <Skeleton className="h-5 w-32 rounded-md" />
+                        <Skeleton className="h-5 w-5 rounded-md" />
+                    </div>
+
+                    {/* Item name */}
+                    <Skeleton className="h-4 w-48 mt-1 rounded-md" />
+
+                    {/* Star rating */}
+                    <div className="mt-1 flex items-center gap-1">
+                        <Skeleton className="h-6 w-32 rounded-md" />
+                    </div>
+
+                    {/* Date */}
+                    <Skeleton className="h-4 w-24 mt-1 rounded-md" />
+                </div>
+            </div>
+
+            {/* Divider */}
+            <div className="border-b"></div>
+
+            {/* Review text */}
+            <div>
+                <Skeleton className="h-4 w-full rounded-md mb-2" />
+                <Skeleton className="h-4 w-full rounded-md" />
+
+                {/* See More button (optional) */}
+                <div className="flex justify-center mt-1">
+                    <Skeleton className="h-4 w-16 rounded-md" />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const MyReviewsCardSkeleton = () => {
+    return (
+        <div className="mt-[30px] p-2 sm:p-4 bg-muted rounded-xl flex flex-col gap-[30px]">
+            {Array(8).fill(0).map((_, index) => (
+                <ReviewCardItem key={`review-skeleton-${index}`} />
+            ))}
+        </div>
+    );
+};
+
+export default MyReviewsCardSkeleton; 
\ No newline at end of file
diff --git a/components/PagesComponent/Reviews/RatingsSummary.jsx b/components/PagesComponent/Reviews/RatingsSummary.jsx
new file mode 100644
index 0000000..cf6dc76
--- /dev/null
+++ b/components/PagesComponent/Reviews/RatingsSummary.jsx
@@ -0,0 +1,45 @@
+'use client'
+import StarRating from "./StarRating";
+import { calculateRatingPercentages, t } from "@/utils";
+import { TiStarFullOutline } from "react-icons/ti";
+import { Progress } from "@/components/ui/progress";
+
+const RatingsSummary = ({ averageRating, reviews }) => {
+
+
+    const { ratingCount, ratingPercentages } = reviews?.length
+        ? calculateRatingPercentages(reviews)
+        : { ratingCount: {}, ratingPercentages: {} };
+
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-12 p-4 rounded-xl border">
+            {/* Average Rating Section */}
+            <div className="col-span-4 border-b md:border-b-0 ltr:md:border-r rtl:md:border-l pb-4 md:pb-0 ltr:md:pr-4 rtl:md:pl-4">
+                <h1 className="font-bold text-6xl text-center">{Number(averageRating).toFixed(2)}</h1>
+                <div className="mt-4 flex flex-col items-center justify-center gap-1">
+                    <StarRating rating={Number(averageRating)} size={40} />
+                    <p className="text-sm">{reviews.length} {t('ratings')}</p>
+                </div>
+            </div>
+
+            {/* Rating Progress Bars Section */}
+            <div className="col-span-8 pt-4 md:pt-0 ltr:md:pl-8 rtl:md:pr-8">
+                <div className="flex flex-col gap-2">
+                    {[5, 4, 3, 2, 1].map((rating) => (
+                        <div className="flex items-center gap-2" key={`rating-${rating}`}>
+                            <div className="flex items-center gap-1">
+                                {rating}
+                                <TiStarFullOutline color="black" size={24} />
+                            </div>
+                            <Progress value={ratingPercentages?.[rating] || 0} className='h-3' />
+                            <span>{ratingCount?.[rating] || 0}</span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default RatingsSummary; 
\ No newline at end of file
diff --git a/components/PagesComponent/Reviews/RatingsSummarySkeleton.jsx b/components/PagesComponent/Reviews/RatingsSummarySkeleton.jsx
new file mode 100644
index 0000000..ad69952
--- /dev/null
+++ b/components/PagesComponent/Reviews/RatingsSummarySkeleton.jsx
@@ -0,0 +1,31 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+const RatingsSummarySkeleton = () => {
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-12 p-4 rounded-xl border">
+            {/* Average Rating Section Skeleton */}
+            <div className="col-span-4 border-b md:border-b-0 ltr:md:border-r pb-4 md:pb-0 md:pr-4">
+                <div className="flex flex-col items-center justify-center">
+                    <Skeleton className="h-24 w-24 rounded-md mb-4" />
+                    <Skeleton className="h-6 w-36 rounded-md mb-2" />
+                    <Skeleton className="h-4 w-20 rounded-md" />
+                </div>
+            </div>
+
+            {/* Rating Progress Bars Section Skeleton */}
+            <div className="col-span-8 pt-4 md:pt-0 md:pl-8">
+                <div className="flex flex-col gap-3">
+                    {[1, 2, 3, 4, 5].map((index) => (
+                        <div className="flex items-center gap-2" key={`skeleton-rating-${index}`}>
+                            <Skeleton className="h-6 w-10 rounded-md" />
+                            <Skeleton className="h-3 flex-1 rounded-md" />
+                            <Skeleton className="h-4 w-6 rounded-md" />
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default RatingsSummarySkeleton; 
\ No newline at end of file
diff --git a/components/PagesComponent/Reviews/ReportReviewModal.jsx b/components/PagesComponent/Reviews/ReportReviewModal.jsx
new file mode 100644
index 0000000..0113339
--- /dev/null
+++ b/components/PagesComponent/Reviews/ReportReviewModal.jsx
@@ -0,0 +1,109 @@
+'use client';
+import { useState, useEffect } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { addReportReviewApi } from "@/utils/api";
+import { toast } from "sonner";
+import { t } from "@/utils";
+
+const ReportReviewModal = ({ isOpen, setIsOpen, reviewId, setMyReviews }) => {
+    const [reason, setReason] = useState("");
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [validationError, setValidationError] = useState("");
+
+    // Clear reason and validation error when modal closes
+    useEffect(() => {
+        if (!isOpen) {
+            setReason("");
+            setValidationError("");
+        }
+    }, [isOpen]);
+
+    const handleSubmit = async () => {
+        if (!reason.trim()) {
+            setValidationError("Please provide a reason for the report");
+            return;
+        }
+        setValidationError("");
+        setIsSubmitting(true);
+        try {
+            const res = await addReportReviewApi.addReportReview({
+                seller_review_id: reviewId,
+                report_reason: reason,
+            });
+
+            if (res?.data?.error === false) {
+                toast.success(res?.data?.message)
+                setMyReviews(prevReviews =>
+                    prevReviews.map(review =>
+                        review.id === reviewId ? { ...review, report_reason: res?.data?.data.report_reason, report_status: res?.data?.data.report_status } : review
+                    )
+                );
+                setReason("");
+                setIsOpen(false);
+            } else {
+                toast.error(res?.data?.message)
+            }
+        } catch (error) {
+            console.error("Error reporting review:", error);
+            toast.error(t("somethingWentWrong"))
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    // Clear validation error when user types
+    const handleReasonChange = (e) => {
+        setReason(e.target.value);
+        if (validationError) {
+            setValidationError("");
+        }
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <DialogContent onInteractOutside={(e) => e.preventDefault()} className="px-6 py-6 sm:max-w-[500px]">
+                <DialogHeader>
+                    <DialogTitle className="text-xl font-medium">
+                        {t('reportReview')}
+                    </DialogTitle>
+                    <DialogDescription className="text-sm text-gray-600 mt-2">
+                        {t('reportReviewDescription')}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="mt-4">
+                    <Textarea
+                        placeholder="Write your reason here"
+                        className={`h-32 resize-none ${validationError ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
+                        value={reason}
+                        onChange={handleReasonChange}
+                    />
+                    {validationError && (
+                        <p className="text-red-500 text-sm mt-1">{validationError}</p>
+                    )}
+                </div>
+
+                <div className="mt-6 flex justify-end gap-3">
+                    <Button
+                        type="button"
+                        variant="outline"   
+                        onClick={() => setIsOpen(false)}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        type="button"
+                        onClick={handleSubmit}
+                        disabled={isSubmitting}
+                    >
+                        {isSubmitting ? t("submitting") : t("report")}
+                    </Button>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default ReportReviewModal; 
\ No newline at end of file
diff --git a/components/PagesComponent/Reviews/Reviews.jsx b/components/PagesComponent/Reviews/Reviews.jsx
new file mode 100644
index 0000000..248ae8d
--- /dev/null
+++ b/components/PagesComponent/Reviews/Reviews.jsx
@@ -0,0 +1,90 @@
+"use client";
+import { t } from "@/utils";
+import RatingsSummary from "./RatingsSummary";
+import RatingsSummarySkeleton from "./RatingsSummarySkeleton";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { getMyReviewsApi } from "@/utils/api";
+import MyReviewsCard from "./MyReviewsCard.jsx";
+import MyReviewsCardSkeleton from "@/components/PagesComponent/Reviews/MyReviewsCardSkeleton";
+import { Button } from "@/components/ui/button";
+import NoData from "@/components/EmptyStates/NoData";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+
+const Reviews = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [MyReviews, setMyReviews] = useState([]);
+  const [AverageRating, setAverageRating] = useState("");
+  const [CurrentPage, setCurrentPage] = useState(1);
+  const [ReviewHasMore, setReviewHasMore] = useState(false);
+  const [IsLoading, setIsLoading] = useState(false);
+  const [IsLoadMore, setIsLoadMore] = useState(false);
+
+  const getReveiws = async (page) => {
+    try {
+      if (page === 1) {
+        setIsLoading(true);
+      }
+      const res = await getMyReviewsApi.getMyReviews({ page });
+      setAverageRating(res?.data?.data?.average_rating);
+      setMyReviews(res?.data?.data?.ratings?.data);
+      setCurrentPage(res?.data?.data?.ratings?.current_page);
+      if (
+        res?.data?.data?.ratings?.current_page <
+        res?.data?.data?.ratings?.last_page
+      ) {
+        setReviewHasMore(true);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+      setIsLoadMore(false);
+    }
+  };
+
+  useEffect(() => {
+    getReveiws(1);
+  }, [CurrentLanguage?.id]);
+
+  const handleReviewLoadMore = () => {
+    setIsLoadMore(true);
+    getReveiws(CurrentPage + 1);
+  };
+
+  return IsLoading ? (
+    <>
+      <RatingsSummarySkeleton />
+      <MyReviewsCardSkeleton />
+    </>
+  ) : MyReviews && MyReviews.length > 0 ? (
+    <>
+      <RatingsSummary averageRating={AverageRating} reviews={MyReviews} />
+      <div className="mt-[30px] p-2 sm:p-4 bg-muted rounded-xl flex flex-col gap-[30px]">
+        {MyReviews?.map((rating) => (
+          <MyReviewsCard
+            rating={rating}
+            key={rating?.id}
+            setMyReviews={setMyReviews}
+          />
+        ))}
+      </div>
+      {ReviewHasMore && (
+        <div className="text-center mt-6">
+          <Button
+            variant="outline"
+            className="text-sm sm:text-base text-primary w-[256px]"
+            disabled={IsLoading || IsLoadMore}
+            onClick={handleReviewLoadMore}
+          >
+            {IsLoadMore ? t("loading") : t("loadMore")}
+          </Button>
+        </div>
+      )}
+    </>
+  ) : (
+    <NoData name={t("reviews")} />
+  );
+};
+
+export default Reviews;
diff --git a/components/PagesComponent/Reviews/SellerReviewCard.jsx b/components/PagesComponent/Reviews/SellerReviewCard.jsx
new file mode 100644
index 0000000..bf2143c
--- /dev/null
+++ b/components/PagesComponent/Reviews/SellerReviewCard.jsx
@@ -0,0 +1,70 @@
+import { formatDate, t } from "@/utils";
+import { useEffect, useRef, useState } from "react";
+import StarRating from "./StarRating";
+import CustomImage from "@/components/Common/CustomImage";
+
+const SellerReviewCard = ({ rating }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isTextOverflowing, setIsTextOverflowing] = useState(false);
+  const textRef = useRef(null);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      const content = textRef.current;
+      if (content) {
+        setIsTextOverflowing(content.scrollHeight > content.clientHeight);
+      }
+    };
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, []);
+
+  return (
+    <div className="bg-white p-4 rounded-lg flex flex-col gap-4">
+      <div className="flex sm:items-center gap-4 flex-col sm:flex-row">
+        <CustomImage
+          src={rating?.buyer?.profile}
+          width={72}
+          height={72}
+          alt="Reviewer"
+          className="aspect-square rounded-full object-cover"
+        />
+        <div className="flex flex-col gap-1 w-full">
+          <p className="font-semibold">{rating?.buyer?.name}</p>
+
+          <div className="flex items-center justify-between flex-wrap gap-1 w-full">
+            <div className="flex items-center gap-1">
+              <StarRating rating={Number(rating?.ratings)} size={24} />
+              <span className="text-sm text-muted-foreground">
+                {rating?.ratings}
+              </span>
+            </div>
+            <p className="text-sm justify-self-end">
+              {formatDate(rating?.created_at)}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="border-b"></div>
+
+      <div>
+        <p ref={textRef} className={`${!isExpanded ? "line-clamp-2" : ""}`}>
+          {rating?.review}
+        </p>
+        {isTextOverflowing && (
+          <div className="flex justify-center mt-1">
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="text-primary text-sm hover:underline"
+            >
+              {isExpanded ? t("seeLess") : t("seeMore")}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SellerReviewCard;
diff --git a/components/PagesComponent/Reviews/StarRating.jsx b/components/PagesComponent/Reviews/StarRating.jsx
new file mode 100644
index 0000000..dd03a89
--- /dev/null
+++ b/components/PagesComponent/Reviews/StarRating.jsx
@@ -0,0 +1,38 @@
+'use client'
+import { TiStarFullOutline, TiStarHalfOutline, TiStarOutline } from "react-icons/ti";
+
+const StarRating = ({ rating = 0, size = 16, maxStars = 5, showEmpty = true }) => {
+
+    // Get the integer part of the rating (full stars)
+    const fullStars = Math.floor(rating);
+
+    // Check if there's any decimal part at all (0.1, 0.2, ..., 0.9)
+    const hasDecimal = rating % 1 !== 0;
+
+    // If there's any decimal, always show a half star
+    const hasHalfStar = hasDecimal;
+
+    // Calculate empty stars
+    const emptyStars = maxStars - fullStars - (hasHalfStar ? 1 : 0);
+
+    return (
+        <div className="flex items-center gap-1 max-w-full">
+            {/* Render full stars */}
+            {[...Array(fullStars)].map((_, index) => (
+                <TiStarFullOutline key={`full-${index}`} color="#FFD700" size={size} />
+            ))}
+
+            {/* Render half star if there's any decimal */}
+            {hasHalfStar && (
+                <TiStarHalfOutline key="half" className="rtl:scale-x-[-1]" color="#FFD700" size={size} />
+            )}
+
+            {/* Render empty stars */}
+            {showEmpty && [...Array(emptyStars)].map((_, index) => (
+                <TiStarOutline key={`empty-${index}`} color="#0000002E" size={size} />
+            ))}
+        </div>
+    );
+};
+
+export default StarRating;
\ No newline at end of file
diff --git a/components/PagesComponent/Seller/Seller.jsx b/components/PagesComponent/Seller/Seller.jsx
new file mode 100644
index 0000000..771fbe6
--- /dev/null
+++ b/components/PagesComponent/Seller/Seller.jsx
@@ -0,0 +1,141 @@
+"use client";
+import { useEffect, useState } from "react";
+import SellerLsitings from "./SellerLsitings";
+import SellerDetailCard from "./SellerDetailCard";
+import { getSellerApi } from "@/utils/api";
+import { t } from "@/utils";
+import SellerRating from "./SellerRating";
+import SellerSkeleton from "./SellerSkeleton";
+import NoData from "@/components/EmptyStates/NoData";
+import Layout from "@/components/Layout/Layout";
+import OpenInAppDrawer from "@/components/Common/OpenInAppDrawer";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import { useSelector } from "react-redux";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+
+const Seller = ({ id, searchParams }) => {
+
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [steps, setSteps] = useState(1);
+  const [IsNoUserFound, setIsNoUserFound] = useState(false);
+
+  const [seller, setSeller] = useState(null);
+  const [ratings, setRatings] = useState(null);
+  const [isSellerDataLoading, setIsSellerDataLoading] = useState(false);
+
+  const [isLoadMoreReview, setIsLoadMoreReview] = useState(false);
+  const [reviewHasMore, setReviewHasMore] = useState(false);
+  const [reviewCurrentPage, setReviewCurrentPage] = useState(1);
+
+  const [isOpenInApp, setIsOpenInApp] = useState(false);
+  const isShare = searchParams?.share == "true" ? true : false;
+
+  useEffect(() => {
+    if (window.innerWidth <= 768 && isShare) {
+      setIsOpenInApp(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    getSeller(reviewCurrentPage);
+  }, []);
+
+  const getSeller = async (page) => {
+    if (page === 1) {
+      setIsSellerDataLoading(true);
+    }
+    try {
+      const res = await getSellerApi.getSeller({ id: Number(id), page });
+      if (res?.data.error && res?.data?.code === 103) {
+        setIsNoUserFound(true);
+      } else {
+        const sellerData = res?.data?.data?.ratings;
+        if (page === 1) {
+          setRatings(sellerData);
+        } else {
+          setRatings({
+            ...ratings,
+            data: [...ratings?.data, ...sellerData?.data],
+          });
+        }
+        setSeller(res?.data?.data?.seller);
+        setReviewCurrentPage(res?.data?.data?.ratings?.current_page);
+        if (
+          res?.data?.data?.ratings?.current_page <
+          res?.data?.data?.ratings?.last_page
+        ) {
+          setReviewHasMore(true);
+        }
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsSellerDataLoading(false);
+      setIsLoadMoreReview(false);
+    }
+  };
+
+  const handleSteps = (step) => {
+    setSteps(step);
+  };
+
+  if (IsNoUserFound) {
+    return <NoData name={t("noSellerFound")} />;
+  }
+
+  return (
+    <Layout>
+      {isSellerDataLoading ? (
+        <SellerSkeleton steps={steps} />
+      ) : (
+        <>
+          <BreadCrumb title2={seller?.name} />
+          <div className="container mx-auto mt-6">
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-4">
+              <div className="col-span-12 lg:col-span-4">
+                <SellerDetailCard seller={seller} ratings={ratings} />
+              </div>
+              <div className="flex flex-col gap-8 col-span-12 lg:col-span-8">
+                <div className="p-4 flex items-center gap-4 bg-muted border rounded-md w-full">
+                  <button
+                    onClick={() => handleSteps(1)}
+                    className={`py-2 px-4 rounded-md ${
+                      steps === 1 ? "bg-primary text-white" : ""
+                    }`}
+                  >
+                    {t("liveAds")}
+                  </button>
+                  <button
+                    onClick={() => handleSteps(2)}
+                    className={`py-2 px-4 rounded-md ${
+                      steps === 2 ? "bg-primary text-white" : ""
+                    }`}
+                  >
+                    {t("reviews")}
+                  </button>
+                </div>
+                {steps === 1 && <SellerLsitings id={id} />}
+                {steps === 2 && (
+                  <SellerRating
+                    ratingsData={ratings}
+                    seller={seller}
+                    isLoadMoreReview={isLoadMoreReview}
+                    reviewHasMore={reviewHasMore}
+                    reviewCurrentPage={reviewCurrentPage}
+                    getSeller={getSeller}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+      <OpenInAppDrawer
+        isOpenInApp={isOpenInApp}
+        setIsOpenInApp={setIsOpenInApp}
+      />
+    </Layout>
+  );
+};
+
+export default Seller;
diff --git a/components/PagesComponent/Seller/SellerDetailCard.jsx b/components/PagesComponent/Seller/SellerDetailCard.jsx
new file mode 100644
index 0000000..8348ad3
--- /dev/null
+++ b/components/PagesComponent/Seller/SellerDetailCard.jsx
@@ -0,0 +1,114 @@
+import { Badge } from "@/components/ui/badge";
+import { MdOutlineMailOutline, MdVerifiedUser } from "react-icons/md";
+import { IoMdStar } from "react-icons/io";
+import { FiPhoneCall } from "react-icons/fi";
+import { extractYear, t } from "@/utils";
+import { usePathname } from "next/navigation";
+import { useSelector } from "react-redux";
+import { getCompanyName } from "@/redux/reducer/settingSlice";
+import ShareDropdown from "@/components/Common/ShareDropdown";
+import CustomLink from "@/components/Common/CustomLink";
+import CustomImage from "@/components/Common/CustomImage";
+import Link from "next/link";
+
+const SellerDetailCard = ({ seller, ratings }) => {
+  const pathname = usePathname();
+  const memberSinceYear = seller?.created_at
+    ? extractYear(seller.created_at)
+    : "";
+  const currentUrl = `${process.env.NEXT_PUBLIC_WEB_URL}${pathname}`;
+  const CompanyName = useSelector(getCompanyName);
+  const FbTitle = seller?.name + " | " + CompanyName;
+
+
+  return (
+    <div className="rounded-lg border overflow-hidden">
+      <div className="flex justify-between items-center p-4 bg-muted">
+        <h1 className="text-lg font-bold">{t("seller_info")}</h1>
+        <ShareDropdown
+          url={currentUrl}
+          title={FbTitle}
+          headline={FbTitle}
+          companyName={CompanyName}
+          className="rounded-md p-2 border bg-white"
+        />
+      </div>
+
+      {(seller?.is_verified === 1 || memberSinceYear) && (
+        <div className="border-t p-4">
+          <div className="flex items-center">
+            {seller?.is_verified === 1 && (
+              <Badge className="p-1 bg-[#FA6E53] flex items-center gap-1 rounded-md text-white text-sm">
+                <MdVerifiedUser size={22} />
+                {t("verified")}
+              </Badge>
+            )}
+
+            {memberSinceYear && (
+              <div className="ltr:ml-auto rtl:mr-auto text-sm text-muted-foreground">
+                {t("memberSince")}: {memberSinceYear}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="border-t flex flex-col justify-center items-center p-4 gap-4">
+        <CustomImage
+          src={seller?.profile}
+          alt="Seller Image"
+          width={120}
+          height={120}
+          className="aspect-square rounded-xl object-cover"
+        />
+
+        <div className="text-center w-full">
+          <h3 className="text-xl font-bold">{seller?.name}</h3>
+          <div className="flex items-center justify-center gap-1 text-sm mt-1">
+            <IoMdStar />
+            <span>
+              {Number(seller?.average_rating).toFixed(2)} |{" "}
+              {ratings?.data?.length} {t("ratings")}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {seller?.show_personal_details === 1 &&
+        (seller?.email || seller?.mobile) && (
+          <div className="border-t p-4 flex flex-col gap-4">
+            {seller?.email && (
+              <div className="flex items-center gap-2">
+                <div className="p-3 bg-muted rounded-md border">
+                  <MdOutlineMailOutline className="size-4" />
+                </div>
+                <CustomLink
+                  href={`mailto:${seller?.email}`}
+                  className="break-all"
+                >
+                  {seller?.email}
+                </CustomLink>
+              </div>
+            )}
+
+            {seller?.mobile && (
+              <div className="flex items-center gap-2">
+                <div className="p-3 bg-muted rounded-md border">
+                  <FiPhoneCall className="size-4" />
+                </div>
+
+                <Link
+                  href={`tel:${seller?.mobile}`}
+                  className="break-all"
+                >
+                  {seller?.mobile}
+                </Link>
+              </div>
+            )}
+          </div>
+        )}
+    </div>
+  );
+};
+
+export default SellerDetailCard;
diff --git a/components/PagesComponent/Seller/SellerLsitings.jsx b/components/PagesComponent/Seller/SellerLsitings.jsx
new file mode 100644
index 0000000..a347b78
--- /dev/null
+++ b/components/PagesComponent/Seller/SellerLsitings.jsx
@@ -0,0 +1,200 @@
+import { useEffect, useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { TbTransferVertical } from "react-icons/tb";
+import { IoGrid } from "react-icons/io5";
+import { allItemApi } from "@/utils/api";
+import ProductHorizontalCardSkeleton from "@/components/Common/ProductHorizontalCardSkeleton";
+import ProductCardSkeleton from "@/components/Common/ProductCardSkeleton";
+import ProductCard from "@/components/Common/ProductCard";
+import NoData from "@/components/EmptyStates/NoData";
+import ProductHorizontalCard from "@/components/Common/ProductHorizontalCard";
+import { useSearchParams } from "next/navigation";
+import { MdViewStream } from "react-icons/md";
+import { Button } from "@/components/ui/button";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import { useSelector } from "react-redux";
+import { t } from "@/utils";
+
+const SellerLsitings = ({ id }) => {
+  const searchParams = useSearchParams();
+  const view = searchParams.get("view") || "grid";
+  const sortBy = searchParams.get("sort") || "new-to-old";
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [isSellerItemsLoading, setIsSellerItemsLoading] = useState(false);
+  const [sellerItems, setSellerItems] = useState([]);
+  const [isSellerItemLoadMore, setIsSellerItemLoadMore] = useState(false);
+  const [CurrentPage, setCurrentPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+
+  useEffect(() => {
+    getSellerItems(1);
+  }, [sortBy, CurrentLanguage.id]);
+
+  const getSellerItems = async (page) => {
+    try {
+      if (page === 1) {
+        setIsSellerItemsLoading(true);
+      }
+      const res = await allItemApi.getItems({
+        user_id: id,
+        sort_by: sortBy,
+        page,
+      });
+
+      if (page > 1) {
+        // Append new data to existing sellerItems
+        setSellerItems((prevItems) => [...prevItems, ...res?.data?.data?.data]);
+      } else {
+        // Set new data if CurrentPage is 1 or initial load
+        setSellerItems(res?.data?.data?.data);
+      }
+
+      setCurrentPage(res?.data?.data?.current_page);
+      if (res?.data?.data.current_page === res?.data?.data.last_page) {
+        setHasMore(false); // Check if there's more data
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsSellerItemsLoading(false);
+      setIsSellerItemLoadMore(false);
+    }
+  };
+
+  const handleLike = (id) => {
+    const updatedItems = sellerItems.map((item) => {
+      if (item.id === id) {
+        return { ...item, is_liked: !item.is_liked };
+      }
+      return item;
+    });
+    setSellerItems(updatedItems);
+  };
+
+  const handleProdLoadMore = () => {
+    setIsSellerItemLoadMore(true);
+    getSellerItems(CurrentPage + 1);
+  };
+
+  const toggleView = (newView) => {
+    const params = new URLSearchParams(searchParams);
+    params.set("view", newView);
+    window.history.pushState(null, "", `?${params.toString()}`);
+  };
+
+  const handleSortBy = (value) => {
+    const params = new URLSearchParams(searchParams);
+    params.set("sort", value);
+    window.history.pushState(null, "", `?${params.toString()}`);
+  };
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div className="flex flex-col sm:flex-row sm:items-center gap-2">
+          <div className="flex items-center gap-1">
+            <TbTransferVertical />
+            <span className="whitespace-nowrap">{t("sortBy")}</span>
+          </div>
+          <Select value={sortBy} onValueChange={handleSortBy}>
+            <SelectTrigger>
+              <SelectValue placeholder={t("sortBy")} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value="new-to-old">
+                  {t("newestToOldest")}
+                </SelectItem>
+                <SelectItem value="old-to-new">
+                  {t("oldestToNewest")}
+                </SelectItem>
+                <SelectItem value="price-high-to-low">
+                  {t("priceHighToLow")}
+                </SelectItem>
+                <SelectItem value="price-low-to-high">
+                  {t("priceLowToHigh")}
+                </SelectItem>
+                <SelectItem value="popular_items">{t("popular")}</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => toggleView("grid")}
+            className={`flex items-center justify-center size-8 sm:size-10 text-muted-foreground transition-colors duration-300 cursor-pointer gap-2 rounded-full ${
+              view === "grid"
+                ? "bg-primary text-white"
+                : "hover:bg-black/15 hover:text-black"
+            }`}
+          >
+            <IoGrid className="size-5 sm:size-6" />
+          </button>
+          <button
+            onClick={() => toggleView("list")}
+            className={`flex items-center justify-center size-8 sm:size-10 text-muted-foreground hover:text-black transition-colors duration-300 cursor-pointer gap-2 rounded-full ${
+              view === "list"
+                ? "bg-primary text-white"
+                : "hover:text-black hover:bg-black/15"
+            }`}
+          >
+            <MdViewStream className="size-5 sm:size-6" />
+          </button>
+        </div>
+      </div>
+      <div className="grid grid-cols-12 gap-4">
+        {isSellerItemsLoading ? (
+          Array.from({ length: 12 }).map((_, index) =>
+            view === "list" ? (
+              <div className="col-span-12" key={index}>
+                <ProductHorizontalCardSkeleton />
+              </div>
+            ) : (
+              <div key={index} className="col-span-6 lg:col-span-4">
+                <ProductCardSkeleton />
+              </div>
+            )
+          )
+        ) : sellerItems && sellerItems.length > 0 ? (
+          sellerItems?.map((item, index) =>
+            view === "list" ? (
+              <div className="col-span-12" key={index}>
+                <ProductHorizontalCard item={item} handleLike={handleLike} />
+              </div>
+            ) : (
+              <div className="col-span-6 lg:col-span-4" key={index}>
+                <ProductCard item={item} handleLike={handleLike} />
+              </div>
+            )
+          )
+        ) : (
+          <div className="col-span-12">
+            <NoData name={t("ads")} />
+          </div>
+        )}
+      </div>
+
+      {sellerItems && sellerItems.length > 0 && hasMore && (
+        <div className="text-center mt-6">
+          <Button
+            variant="outline"
+            className="text-sm sm:text-base text-primary w-[256px]"
+            disabled={isSellerItemsLoading || isSellerItemLoadMore}
+            onClick={handleProdLoadMore}
+          >
+            {isSellerItemLoadMore ? t("loading") : t("loadMore")}
+          </Button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SellerLsitings;
diff --git a/components/PagesComponent/Seller/SellerRating.jsx b/components/PagesComponent/Seller/SellerRating.jsx
new file mode 100644
index 0000000..94446e2
--- /dev/null
+++ b/components/PagesComponent/Seller/SellerRating.jsx
@@ -0,0 +1,39 @@
+import { t } from '@/utils';
+import RatingsSummary from '../Reviews/RatingsSummary';
+import SellerReviewCard from "@/components/PagesComponent/Reviews/SellerReviewCard";
+import { Button } from '@/components/ui/button';
+import NoData from '@/components/EmptyStates/NoData';
+
+
+const SellerRating = ({ ratingsData, seller, isLoadMoreReview, reviewHasMore, reviewCurrentPage, getSeller }) => {
+
+    return (
+        ratingsData?.data?.length > 0 ?
+            <>
+                <RatingsSummary averageRating={seller?.average_rating} reviews={ratingsData?.data} />
+                <div className='flex flex-col gap-4 bg-muted p-4 rounded-lg'>
+                    {ratingsData?.data?.map((rating) => (
+                        <SellerReviewCard key={rating.id} rating={rating} />
+                    ))}
+                    {
+                        ratingsData?.data?.length > 0 && reviewHasMore && (
+                            <div className="text-center">
+                                <Button
+                                    variant="outline"
+                                    className="text-sm sm:text-base text-primary w-[256px]"
+                                    disabled={isLoadMoreReview}
+                                    onClick={() => getSeller(reviewCurrentPage + 1)}
+                                >
+                                    {isLoadMoreReview ? t("loading") : t("loadMore")}
+                                </Button>
+                            </div>
+                        )
+                    }
+                </div>
+            </>
+            :
+            <NoData name={t('reviews')} />
+    );
+};
+
+export default SellerRating;
\ No newline at end of file
diff --git a/components/PagesComponent/Seller/SellerSkeleton.jsx b/components/PagesComponent/Seller/SellerSkeleton.jsx
new file mode 100644
index 0000000..57ca513
--- /dev/null
+++ b/components/PagesComponent/Seller/SellerSkeleton.jsx
@@ -0,0 +1,75 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+const SellerSkeleton = ({ steps }) => {
+  return (
+    <div className="container mx-auto mt-6">
+      <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
+        {/* Left Side - Seller Detail Card Skeleton */}
+        <div className="col-span-12 md:col-span-4">
+          <div className="bg-white rounded-lg shadow-sm border p-6">
+            <div className="flex flex-col items-center gap-4">
+              <Skeleton className="h-32 w-32 rounded-full" />
+              <Skeleton className="h-6 w-3/4" />
+              <Skeleton className="h-4 w-1/2" />
+              <div className="flex gap-2">
+                {[1, 2, 3, 4, 5].map(i => (
+                  <Skeleton key={i} className="h-5 w-5 rounded-full" />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Right Side - Content Skeleton */}
+        <div className="flex flex-col gap-4 col-span-12 md:col-span-8">
+          {/* Tabs Skeleton */}
+          <div className="p-4 flex items-center gap-4 bg-muted rounded-md w-full">
+            <Skeleton className="h-10 w-24" />
+            <Skeleton className="h-10 w-24" />
+          </div>
+
+          {/* Content Area Skeleton */}
+
+          {steps === 1 ? (
+            // Listings Skeleton
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {[1, 2, 3, 4, 5, 6].map(i => (
+                <div key={i} className="border rounded-lg p-4">
+                  <Skeleton className="h-40 w-full mb-4" />
+                  <Skeleton className="h-4 w-3/4 mb-2" />
+                  <Skeleton className="h-4 w-1/2" />
+                </div>
+              ))}
+            </div>
+          ) : (
+            // Ratings Skeleton
+            <div className="flex flex-col gap-6">
+              <div className="flex gap-6 items-center">
+                <div className="flex flex-col gap-3 items-center">
+                  <Skeleton className="h-16 w-16" />
+                  <div className="flex gap-2">
+                    {[1, 2, 3, 4, 5].map(i => (
+                      <Skeleton key={i} className="h-5 w-5" />
+                    ))}
+                  </div>
+                  <Skeleton className="h-4 w-20" />
+                </div>
+                <div className="flex-1">
+                  {[5, 4, 3, 2, 1].map(i => (
+                    <div key={i} className="flex items-center space-x-3 mb-3">
+                      <Skeleton className="h-4 w-4" />
+                      <Skeleton className="h-2 flex-1" />
+                      <Skeleton className="h-4 w-8" />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SellerSkeleton;
diff --git a/components/PagesComponent/StaticPages/AboutUs.jsx b/components/PagesComponent/StaticPages/AboutUs.jsx
new file mode 100644
index 0000000..623de19
--- /dev/null
+++ b/components/PagesComponent/StaticPages/AboutUs.jsx
@@ -0,0 +1,22 @@
+"use client";
+import Layout from "@/components/Layout/Layout";
+import { getAboutUs } from "@/redux/reducer/settingSlice";
+import parse from "html-react-parser";
+import { useSelector } from "react-redux";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import { t } from "@/utils";
+
+const AboutUs = () => {
+  const aboutUs = useSelector(getAboutUs);
+
+  return (
+    <Layout>
+      <BreadCrumb title2={t("aboutUs")} />
+      <div className="container">
+        <div className="max-w-full prose lg:prose-lg py-7">{parse(aboutUs || "")}</div>
+      </div>
+    </Layout>
+  );
+};
+
+export default AboutUs;
diff --git a/components/PagesComponent/StaticPages/PrivacyPolicy.jsx b/components/PagesComponent/StaticPages/PrivacyPolicy.jsx
new file mode 100644
index 0000000..3144b2c
--- /dev/null
+++ b/components/PagesComponent/StaticPages/PrivacyPolicy.jsx
@@ -0,0 +1,26 @@
+"use client";
+
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import Layout from "@/components/Layout/Layout";
+import { settingsData } from "@/redux/reducer/settingSlice";
+import { t } from "@/utils";
+import parse from "html-react-parser";
+import { useSelector } from "react-redux";
+
+const PrivacyPolicy = () => {
+  const settings = useSelector(settingsData);
+  const privacy = settings?.privacy_policy;
+
+  return (
+    <Layout>
+      <BreadCrumb title2={t("privacyPolicy")} />
+      <div className="container">
+        <div className="max-w-full py-7 prose lg:prose-lg">
+          {parse(privacy || "")}
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default PrivacyPolicy;
diff --git a/components/PagesComponent/StaticPages/RefundPolicy.jsx b/components/PagesComponent/StaticPages/RefundPolicy.jsx
new file mode 100644
index 0000000..e52d774
--- /dev/null
+++ b/components/PagesComponent/StaticPages/RefundPolicy.jsx
@@ -0,0 +1,26 @@
+"use client";
+
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import Layout from "@/components/Layout/Layout";
+import { settingsData } from "@/redux/reducer/settingSlice";
+import { t } from "@/utils";
+import parse from "html-react-parser";
+import { useSelector } from "react-redux";
+
+const RefundPolicy = () => {
+  const settings = useSelector(settingsData);
+  const privacy = settings?.refund_policy;
+
+  return (
+    <Layout>
+      <BreadCrumb title2={t("refundPolicy")} />
+      <div className="container">
+        <div className="max-w-full py-7 prose lg:prose-lg">
+          {parse(privacy || "")}
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default RefundPolicy;
diff --git a/components/PagesComponent/StaticPages/TermsAndCondition.jsx b/components/PagesComponent/StaticPages/TermsAndCondition.jsx
new file mode 100644
index 0000000..cc32824
--- /dev/null
+++ b/components/PagesComponent/StaticPages/TermsAndCondition.jsx
@@ -0,0 +1,23 @@
+"use client";
+import { settingsData } from "@/redux/reducer/settingSlice";
+import { useSelector } from "react-redux";
+import parse from "html-react-parser";
+import Layout from "@/components/Layout/Layout";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import { t } from "@/utils";
+
+const TermsAndCondition = () => {
+  const settings = useSelector(settingsData);
+  const termsAndCondition = settings?.terms_conditions;
+
+  return (
+    <Layout>
+      <BreadCrumb title2={t("termsConditions")} />
+      <div className="container">
+        <div className="max-w-full prose lg:prose-lg py-7">{parse(termsAndCondition || "")}</div>
+      </div>
+    </Layout>
+  );
+};
+
+export default TermsAndCondition;
diff --git a/components/PagesComponent/Subscription/BankDetailsModal.jsx b/components/PagesComponent/Subscription/BankDetailsModal.jsx
new file mode 100644
index 0000000..bbb8d31
--- /dev/null
+++ b/components/PagesComponent/Subscription/BankDetailsModal.jsx
@@ -0,0 +1,120 @@
+import { useNavigate } from "@/components/Common/useNavigate";
+import NoData from "@/components/EmptyStates/NoData";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  getIsShowBankDetails,
+  hideBankDetails,
+} from "@/redux/reducer/globalStateSlice";
+import { t } from "@/utils";
+import { createPaymentIntentApi } from "@/utils/api";
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import { toast } from "sonner";
+
+const BankDetailsModal = ({ packageId, bankDetails }) => {
+  const { navigate } = useNavigate();
+  const IsShowBankDetails = useSelector(getIsShowBankDetails);
+  const IsBankDetails = bankDetails && Object.keys(bankDetails).length > 0;
+  const [IsConfirmingPayment, setIsConfirmingPayment] = useState(false);
+
+  const handleConfirmPayment = async () => {
+    try {
+      setIsConfirmingPayment(true);
+      const res = await createPaymentIntentApi.createIntent({
+        package_id: packageId,
+        payment_method: "bankTransfer",
+      });
+      if (res?.data?.error === false) {
+        toast.success(t("paymentConfirmed"));
+        hideBankDetails();
+        navigate("/transactions");
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log("Failed to confirm Payment", error);
+    } finally {
+      setIsConfirmingPayment(false);
+    }
+  };
+  return (
+    <Dialog open={IsShowBankDetails} onOpenChange={hideBankDetails}>
+      <DialogContent onInteractOutside={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle className="text-xl font-semibold">
+            {t("bankAccountDetails")}
+          </DialogTitle>
+          <DialogDescription className="!text-base">
+            {t("pleaseTransferAmount")}
+          </DialogDescription>
+          {IsBankDetails ? (
+            <>
+              <div className="flex flex-col gap-3 !mt-8">
+                <div className="flex items-center gap-2">
+                  <p className="w-[35%] opacity-60 font-medium text-base">
+                    {t("accountHolder")}
+                  </p>
+                  <p className="text-base px-3 py-2 bg-muted w-[75%] rounded">
+                    {bankDetails?.account_holder_name}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <p className="w-[35%] opacity-60 font-medium text-base">
+                    {t("accountNumber")}
+                  </p>
+                  <p className="text-base px-3 py-2 bg-muted w-[75%] rounded">
+                    {bankDetails?.account_number}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <p className="w-[35%] opacity-60 font-medium text-base">
+                    {t("bankName")}
+                  </p>
+                  <p className="text-base px-3 py-2 bg-muted w-[75%] rounded">
+                    {bankDetails?.bank_name}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <p className="w-[35%] opacity-60 font-medium text-base">
+                    SWIFT/IFSC Code
+                  </p>
+                  <p className="text-base px-3 py-2 bg-muted w-[75%] rounded">
+                    {bankDetails?.ifsc_swift_code}
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-center flex-wrap gap-4 !mt-8">
+                <button
+                  className="px-4 py-2 border flex-1 rounded whitespace-nowrap"
+                  onClick={hideBankDetails}
+                >
+                  {t("cancel")}
+                </button>
+                <button
+                  className="px-4 py-2 bg-primary flex-1 text-white rounded whitespace-nowrap disabled:opacity-66"
+                  onClick={handleConfirmPayment}
+                  disabled={IsConfirmingPayment}
+                >
+                  {IsConfirmingPayment
+                    ? t("confirmingPayment")
+                    : t("confirmPayment")}
+                </button>
+              </div>
+            </>
+          ) : (
+            <NoData name={t("bankAccountDetails")} />
+          )}
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default BankDetailsModal;
diff --git a/components/PagesComponent/Subscription/BankTransferPayment.jsx b/components/PagesComponent/Subscription/BankTransferPayment.jsx
new file mode 100644
index 0000000..6eff671
--- /dev/null
+++ b/components/PagesComponent/Subscription/BankTransferPayment.jsx
@@ -0,0 +1,24 @@
+import { showBankDetails } from "@/redux/reducer/globalStateSlice";
+import { FaAngleRight } from "react-icons/fa";
+import { AiOutlineBank } from "react-icons/ai"
+import { t } from "@/utils";
+
+
+const BankTransferPayment = ({ closePaymentModal }) => {
+  const handleBankTransfer = () => {
+    closePaymentModal();
+    showBankDetails();
+  };
+
+  return (
+    <button onClick={handleBankTransfer} className="flex items-center gap-2 justify-between p-2">
+      <div className="flex items-center gap-2">
+        <AiOutlineBank size={30} />
+        <span className="text-lg font-semibold">{t("bankTransfer")}</span>
+      </div>
+      <FaAngleRight size={18} className="rtl:scale-x-[-1]" />
+    </button>
+  );
+};
+
+export default BankTransferPayment;
diff --git a/components/PagesComponent/Subscription/FlutterwavePayment.jsx b/components/PagesComponent/Subscription/FlutterwavePayment.jsx
new file mode 100644
index 0000000..b680677
--- /dev/null
+++ b/components/PagesComponent/Subscription/FlutterwavePayment.jsx
@@ -0,0 +1,77 @@
+import { useState } from "react";
+import FlutterwaveLogo from "../../../public/assets/flutterwave.png";
+import { FaAngleRight } from "react-icons/fa";
+import { createPaymentIntentApi } from "@/utils/api";
+import { toast } from "sonner";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+import { Loader2 } from "lucide-react";
+
+const FlutterwavePayment = ({ selectedPackage }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const handleFlutterwavePayment = async () => {
+    setIsLoading(true);
+    try {
+      const res = await createPaymentIntentApi.createIntent({
+        package_id: selectedPackage.id,
+        payment_method: "FlutterWave",
+      });
+      if (res.data.error) {
+        toast.error(res.data.message);
+        return;
+      }
+      const payment_gateway_response =
+        res?.data?.data?.payment_intent?.payment_gateway_response?.data?.link;
+
+      if (payment_gateway_response) {
+        const popupWidth = 600;
+        const popupHeight = 700;
+        const popupLeft = window.innerWidth / 2 - popupWidth / 2;
+        const popupTop = window.innerHeight / 2 - popupHeight / 2;
+
+        window.open(
+          payment_gateway_response,
+          "paymentWindow",
+          `width=${popupWidth},height=${popupHeight},top=${popupTop},left=${popupLeft}`
+        );
+      } else {
+        throw new Error("Unable to retrieve payment gateway response.");
+      }
+    } catch (error) {
+      console.error("Error during Flutterwave payment", error);
+      toast.error(t("errorOccurred"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={handleFlutterwavePayment} className="w-full p-2">
+        <div className="flex items-center gap-2 justify-between ">
+          <div className="flex gap-3 items-center">
+            <div className="w-8 h-8">
+              <CustomImage
+                height={32}
+                width={32}
+                src={FlutterwaveLogo.src}
+                alt="Flutterwave"
+                className="w-full h-full "
+              />
+            </div>
+            <p className="text-lg font-semibold">{t("flutterwave")}</p>
+          </div>
+          <div>
+            {isLoading ? (
+              <Loader2 className="w-5 h-5 animate-spin" />
+            ) : (
+              <FaAngleRight size={18} className="rtl:scale-x-[-1]" />
+            )}
+          </div>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default FlutterwavePayment;
diff --git a/components/PagesComponent/Subscription/PayStackPayment.jsx b/components/PagesComponent/Subscription/PayStackPayment.jsx
new file mode 100644
index 0000000..d04d26c
--- /dev/null
+++ b/components/PagesComponent/Subscription/PayStackPayment.jsx
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import PayStackLogo from "../../../public/assets/ic_paystack.png";
+import { FaAngleRight } from "react-icons/fa";
+import { createPaymentIntentApi } from "@/utils/api";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+const PayStackPayment = ({ packageSettings, selectedPackage }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const handlePayStackPayment = async () => {
+    try {
+      setIsLoading(true);
+      const res = await createPaymentIntentApi.createIntent({
+        package_id: selectedPackage.id,
+        payment_method: packageSettings.Paystack.payment_method,
+        platform_type: "web",
+      });
+
+      if (res.data.error) {
+        throw new Error(res.data.message);
+      }
+
+      const paymentIntent = res.data.data.payment_intent;
+      const authorizationUrl =
+        paymentIntent?.payment_gateway_response?.data?.authorization_url;
+
+      if (authorizationUrl) {
+        const popupWidth = 600;
+        const popupHeight = 700;
+        const popupLeft = window.innerWidth / 2 - popupWidth / 2;
+        const popupTop = window.innerHeight / 2 - popupHeight / 2;
+
+        window.open(
+          authorizationUrl,
+          "paymentWindow",
+          `width=${popupWidth},height=${popupHeight},top=${popupTop},left=${popupLeft}`
+        );
+      } else {
+        throw new Error("Unable to retrieve authorization URL.");
+      }
+    } catch (error) {
+      console.error("An error occurred while processing the payment:", error);
+      toast.error(t("errorOccurred"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={handlePayStackPayment} className="w-full p-2">
+        <div className="flex items-center gap-2 justify-between ">
+          <div className="flex gap-3 items-center">
+            <div className="w-8 h-8">
+              <CustomImage
+                height={32}
+                width={32}
+                src={PayStackLogo.src}
+                alt="Paystack"
+                className="w-full h-full "
+              />
+            </div>
+            <p className="text-lg font-semibold">{t("payStack")}</p>
+          </div>
+          <div>
+            {isLoading ? (
+              <Loader2 className="w-5 h-5 animate-spin" />
+            ) : (
+              <FaAngleRight size={18} className="rtl:scale-x-[-1]" />
+            )}
+          </div>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default PayStackPayment;
diff --git a/components/PagesComponent/Subscription/PaymentModal.jsx b/components/PagesComponent/Subscription/PaymentModal.jsx
new file mode 100644
index 0000000..dabc4ce
--- /dev/null
+++ b/components/PagesComponent/Subscription/PaymentModal.jsx
@@ -0,0 +1,146 @@
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { t } from "@/utils";
+import RazorpayPayment from "./RazorpayPayment";
+import PayStackPayment from "./PayStackPayment";
+import FlutterwavePayment from "./FlutterwavePayment";
+import PhonepePayment from "./PhonepePayment";
+import StripePayment from "./StripePayment";
+import StripeLogo from "../../../public/assets/ic_stripe.png";
+import { FaAngleRight } from "react-icons/fa";
+import PaymentModalLoading from "./PaymentModalLoading";
+import { toast } from "sonner";
+import BankTransferPayment from "./BankTransferPayment";
+import CustomImage from "@/components/Common/CustomImage";
+import PaypalPayment from "./PaypalPayment";
+
+const PaymentModal = ({
+  showPaymentModal,
+  setShowPaymentModal,
+  selectedPackage,
+  packageSettings,
+  isLoading,
+  setToggleApiAfterPaymentSuccess
+}) => {
+  const [showStripePayment, setShowStripePayment] = useState(false);
+  const isBankTransferActive =
+    Number(packageSettings?.bankTransfer?.status) === 1;
+  const PaymentModalClose = () => {
+    setShowPaymentModal(false);
+    setShowStripePayment(false);
+  };
+
+  const handleMessage = (event) => {
+    if (event.origin === process.env.NEXT_PUBLIC_API_URL) {
+      const { status } = event.data;
+      if (status === "success") {
+        toast.success(t("paymentSuccess"));
+        setToggleApiAfterPaymentSuccess((prev) => !prev)
+      } else if (status === "cancel") {
+        toast.error(t("paymentCancelled"));
+      } else {
+        toast.error(t("paymentFailed"));
+      }
+      PaymentModalClose();
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [handleMessage]);
+
+  return (
+    <div>
+      <Dialog open={showPaymentModal} onOpenChange={PaymentModalClose}>
+        <DialogContent
+          className="!max-w-[520px]"
+          onInteractOutside={(e) => {
+            e.preventDefault();
+          }}
+        >
+          <DialogHeader className="border-b border-gray-400 pb-5 ">
+            <DialogTitle className="text-lg">{t("paymentWith")} {showStripePayment && t("stripe")}</DialogTitle>
+          </DialogHeader>
+          {isLoading ? (
+            <div className="flex justify-center items-center h-full flex-col gap-4">
+              {Array.from({ length: 7 }).map((_, index) => (
+                <PaymentModalLoading key={index} />
+              ))}
+            </div>
+          ) : showStripePayment ? (
+            <StripePayment
+              selectedPackage={selectedPackage}
+              packageSettings={packageSettings}
+              PaymentModalClose={PaymentModalClose}
+              setShowStripePayment={setShowStripePayment}
+              setToggleApiAfterPaymentSuccess={setToggleApiAfterPaymentSuccess}
+            />
+          ) : (
+            <div className="flex flex-col gap-4 mt-2">
+              {packageSettings?.Stripe?.status == 1 && (
+                <button
+                  onClick={() => setShowStripePayment(true)}
+                  className="w-full p-2"
+                >
+                  <div className="flex items-center gap-2 justify-between ">
+                    <div className="flex gap-3 items-center">
+                      <div className="w-8 h-8">
+                        <CustomImage
+                          height={32}
+                          width={32}
+                          src={StripeLogo.src}
+                          alt="Stripe"
+                          className="w-full h-full "
+                        />
+                      </div>
+                      <p className="text-lg font-semibold">{t("stripe")}</p>
+                    </div>
+                    <FaAngleRight size={18} className="rtl:scale-x-[-1]" />
+                  </div>
+                </button>
+              )}
+              {packageSettings?.Razorpay?.status == 1 && (
+                <RazorpayPayment
+                  packageSettings={packageSettings}
+                  selectedPackage={selectedPackage}
+                  setShowPaymentModal={setShowPaymentModal}
+                  setToggleApiAfterPaymentSuccess={setToggleApiAfterPaymentSuccess}
+                />
+              )}
+              {packageSettings?.Paystack?.status == 1 && (
+                <PayStackPayment
+                  packageSettings={packageSettings}
+                  selectedPackage={selectedPackage}
+                />
+              )}
+              {packageSettings?.flutterwave?.status == 1 && (
+                <FlutterwavePayment selectedPackage={selectedPackage} />
+              )}
+              {packageSettings?.PhonePe?.status == 1 && (
+                <PhonepePayment selectedPackage={selectedPackage} />
+              )}
+
+              {packageSettings?.Paypal?.status == 1 && (
+                <PaypalPayment selectedPackage={selectedPackage} />
+              )}
+
+              {isBankTransferActive && (
+                <BankTransferPayment closePaymentModal={PaymentModalClose} />
+              )}
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default PaymentModal;
diff --git a/components/PagesComponent/Subscription/PaymentModalLoading.jsx b/components/PagesComponent/Subscription/PaymentModalLoading.jsx
new file mode 100644
index 0000000..a481dd2
--- /dev/null
+++ b/components/PagesComponent/Subscription/PaymentModalLoading.jsx
@@ -0,0 +1,22 @@
+
+
+const PaymentModalLoading = () => {
+    return (
+        <div className="w-full p-2 animate-pulse">
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                    {/* Logo skeleton */}
+                    <div className="w-8 h-8 bg-gray-200 rounded-md"></div>
+
+                    {/* Text skeleton */}
+                    <div className="h-7 bg-gray-200 rounded-md w-24"></div>
+                </div>
+
+                {/* Arrow skeleton */}
+                <div className="w-4 h-4 bg-gray-200 rounded-md"></div>
+            </div>
+        </div>
+    )
+}
+
+export default PaymentModalLoading
\ No newline at end of file
diff --git a/components/PagesComponent/Subscription/PaypalPayment.jsx b/components/PagesComponent/Subscription/PaypalPayment.jsx
new file mode 100644
index 0000000..292d7c6
--- /dev/null
+++ b/components/PagesComponent/Subscription/PaypalPayment.jsx
@@ -0,0 +1,79 @@
+import { useState } from "react";
+import PaypalLogo from "../../../public/assets/paypal-logo.png";
+import { FaAngleRight } from "react-icons/fa";
+import { createPaymentIntentApi } from "@/utils/api";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+
+const PaypalPayment = ({ selectedPackage }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const handlePaypalPayment = async () => {
+    try {
+      setIsLoading(true);
+      const res = await createPaymentIntentApi.createIntent({
+        package_id: selectedPackage.id,
+        payment_method: "PayPal",
+        platform_type: "web",
+      });
+      if (res.data.error) {
+        toast.error(res.data.message);
+        return;
+      }
+
+      const payment_gateway_response =
+        res?.data?.data?.payment_intent?.approval_url;
+
+      if (payment_gateway_response) {
+        const popupWidth = 600;
+        const popupHeight = 700;
+        const popupLeft = window.innerWidth / 2 - popupWidth / 2;
+        const popupTop = window.innerHeight / 2 - popupHeight / 2;
+
+        window.open(
+          payment_gateway_response,
+          "paymentWindow",
+          `width=${popupWidth},height=${popupHeight},top=${popupTop},left=${popupLeft}`
+        );
+      } else {
+        throw new Error("Unable to retrieve payment gateway response.");
+      }
+    } catch (error) {
+      console.error("Error during Flutterwave payment", error);
+      toast.error(t("errorOccurred"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={handlePaypalPayment} className="w-full p-2">
+        <div className="flex items-center gap-2 justify-between ">
+          <div className="flex gap-3 items-center">
+            <div className="w-8 h-8">
+              <CustomImage
+                height={32}
+                width={32}
+                src={PaypalLogo}
+                alt="Paypal"
+                className="w-full h-full "
+              />
+            </div>
+            <p className="text-lg font-semibold">{t("paypal")}</p>
+          </div>
+          <div>
+            {isLoading ? (
+              <Loader2 className="w-5 h-5 animate-spin" />
+            ) : (
+              <FaAngleRight size={18} className="rtl:scale-x-[-1]" />
+            )}
+          </div>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default PaypalPayment;
diff --git a/components/PagesComponent/Subscription/PhonepePayment.jsx b/components/PagesComponent/Subscription/PhonepePayment.jsx
new file mode 100644
index 0000000..001045b
--- /dev/null
+++ b/components/PagesComponent/Subscription/PhonepePayment.jsx
@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import PhonepeLogo from "../../../public/assets/phonepe-icon.png";
+import { FaAngleRight } from "react-icons/fa";
+import { useSelector } from "react-redux";
+import { createPaymentIntentApi } from "@/utils/api";
+import { toast } from "sonner";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+import { Loader2 } from "lucide-react";
+
+const PhonepePayment = ({ selectedPackage }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const userData = useSelector((state) => state.UserSignup.data.data);
+
+  const handlePhonepePayment = async () => {
+    if (!userData?.mobile) {
+      toast.error(t("addMobileNumberToProceed"));
+      return;
+    }
+    try {
+      setIsLoading(true);
+      const res = await createPaymentIntentApi.createIntent({
+        package_id: selectedPackage.id,
+        payment_method: "PhonePe",
+        platform_type: "web",
+      });
+      if (res.data.error) {
+        console.log("Error in payment intent response:", res.data.message);
+        toast.error(res.data.message);
+        return;
+      }
+
+      const payment_gateway_response =
+        res.data.data.payment_intent.payment_gateway_response
+          ?.payment_gateway_response;
+
+      if (payment_gateway_response) {
+        const popupWidth = 600;
+        const popupHeight = 700;
+        const popupLeft = window.innerWidth / 2 - popupWidth / 2;
+        const popupTop = window.innerHeight / 2 - popupHeight / 2;
+
+        window.open(
+          payment_gateway_response,
+          "paymentWindow",
+          `width=${popupWidth},height=${popupHeight},top=${popupTop},left=${popupLeft}`
+        );
+      } else {
+        throw new Error("Unable to retrieve payment gateway response.");
+      }
+    } catch (error) {
+      console.error("Error during PhonePe payment", error);
+      toast.error(t("errorOccurred"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={handlePhonepePayment} className="w-full p-2">
+        <div className="flex items-center gap-2 justify-between ">
+          <div className="flex gap-3 items-center">
+            <div className="w-8 h-8">
+              <CustomImage
+                height={32}
+                width={32}
+                src={PhonepeLogo.src}
+                alt="Phonepe"
+                className="w-full h-full "
+              />
+            </div>
+            <p className="text-lg font-semibold">{t("phonepe")}</p>
+          </div>
+          <div>
+            {isLoading ? (
+              <Loader2 className="w-5 h-5 animate-spin" />
+            ) : (
+              <FaAngleRight size={18} className="rtl:scale-x-[-1]" />
+            )}
+          </div>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default PhonepePayment;
diff --git a/components/PagesComponent/Subscription/ProfileSubscription.jsx b/components/PagesComponent/Subscription/ProfileSubscription.jsx
new file mode 100644
index 0000000..23173e2
--- /dev/null
+++ b/components/PagesComponent/Subscription/ProfileSubscription.jsx
@@ -0,0 +1,224 @@
+"use client";
+import { useEffect, useState } from "react";
+import AddListingPlanCard from "@/components/PagesComponent/Cards/AddListingPlanCard";
+import {
+  assigFreePackageApi,
+  getPackageApi,
+  getPaymentSettingsApi,
+} from "@/utils/api";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { t } from "@/utils";
+import PaymentModal from "./PaymentModal";
+import AddListingPlanCardSkeleton from "@/components/Skeletons/AddListingPlanCardSkeleton";
+import { CurrentLanguageData, getIsRtl } from "@/redux/reducer/languageSlice";
+import { useSelector } from "react-redux";
+import { toast } from "sonner";
+import BankDetailsModal from "./BankDetailsModal";
+import { getIsFreAdListing } from "@/redux/reducer/settingSlice";
+import { useNavigate } from "@/components/Common/useNavigate";
+
+const ProfileSubscription = () => {
+  const isRTL = useSelector(getIsRtl);
+  const { navigate } = useNavigate();
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [listingPackages, setListingPackages] = useState([]);
+
+  const hasListingDiscount = listingPackages?.some(
+    (p) => p?.discount_in_percentage > 0
+  );
+
+  const [adPackages, setAdPackages] = useState([]);
+  const hasAdDiscount = adPackages.some((p) => p.discount_in_percentage > 0);
+  const [showPaymentModal, setShowPaymentModal] = useState(false);
+  const [selectedPackage, setSelectedPackage] = useState(null);
+  const [isListingPackagesLoading, setIsListingPackagesLoading] =
+    useState(false);
+  const [isAdPackagesLoading, setIsAdPackagesLoading] = useState(false);
+  const [packageSettings, setPackageSettings] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const isFreeAdListing = useSelector(getIsFreAdListing);
+  const [toggleApiAfterPaymentSuccess, setToggleApiAfterPaymentSuccess] = useState(false)
+
+
+  useEffect(() => {
+    if (!isFreeAdListing) {
+      handleFetchListingPackages();
+    }
+    handleFetchFeaturedPackages();
+  }, [CurrentLanguage?.id, toggleApiAfterPaymentSuccess]);
+
+  useEffect(() => {
+    if (showPaymentModal) {
+      handleFetchPaymentSetting();
+    }
+  }, [showPaymentModal]);
+
+  const handleFetchPaymentSetting = async () => {
+    setIsLoading(true);
+    try {
+      const res = await getPaymentSettingsApi.getPaymentSettings();
+      const { data } = res.data;
+      setPackageSettings(data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleFetchListingPackages = async () => {
+    try {
+      setIsListingPackagesLoading(true);
+      const res = await getPackageApi.getPackage({ type: "item_listing" });
+      setListingPackages(res?.data?.data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsListingPackagesLoading(false);
+    }
+  };
+
+  const handleFetchFeaturedPackages = async () => {
+    try {
+      setIsAdPackagesLoading(true);
+      const res = await getPackageApi.getPackage({ type: "advertisement" });
+      setAdPackages(res.data?.data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsAdPackagesLoading(false);
+    }
+  };
+
+  const handlePurchasePackage = (pckg) => {
+    if (pckg?.final_price === 0) {
+      assignPackage(pckg.id);
+    } else {
+      setShowPaymentModal(true);
+      setSelectedPackage(pckg);
+    }
+  };
+
+  const assignPackage = async (id) => {
+    try {
+      const res = await assigFreePackageApi.assignFreePackage({
+        package_id: id,
+      });
+      const data = res?.data;
+      if (data?.error === false) {
+        toast.success(data.message);
+        navigate("/");
+      } else {
+        toast.error(data.message);
+      }
+    } catch (error) {
+      toast.error(data.message);
+      console.log(error);
+    }
+  };
+
+  return (
+    <>
+      {isListingPackagesLoading ? (
+        <AddListingPlanCardSkeleton />
+      ) : (
+        <>
+          {listingPackages.length > 0 && (
+            <div className="flex flex-col gap-4">
+              <h1 className="text-2xl font-medium">{t("adListingPlan")}</h1>
+              <div className="relative">
+                <Carousel
+                  key={isRTL ? "rtl" : "ltr"}
+                  opts={{
+                    align: "start",
+                    containScroll: "trim",
+                    direction: isRTL ? "rtl" : "ltr",
+                  }}
+                  className="w-full"
+                >
+                  <CarouselPrevious className="flex absolute top-1/2 ltr:left-2 rtl:right-2 rtl:scale-x-[-1] -translate-y-1/2 bg-primary text-white rounded-full z-10" />
+                  <CarouselNext className="flex absolute top-1/2 ltr:right-2 rtl:left-2 rtl:scale-x-[-1] -translate-y-1/2 bg-primary text-white rounded-full z-10" />
+                  <CarouselContent
+                    className={`gap-4 ${hasListingDiscount ? "pt-6" : ""}`}
+                  >
+                    {listingPackages?.map((pckg) => (
+                      <CarouselItem
+                        key={pckg.id}
+                        className="basis-[100%] sm:basis-3/4 md:basis-1/2 lg:basis-[66.66%] xl:basis-[45%] first:pl-4"
+                      >
+                        <AddListingPlanCard
+                          pckg={pckg}
+                          handlePurchasePackage={handlePurchasePackage}
+                        />
+                      </CarouselItem>
+                    ))}
+                  </CarouselContent>
+                </Carousel>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+      {isAdPackagesLoading ? (
+        <AddListingPlanCardSkeleton />
+      ) : (
+        <div
+          className={`flex flex-col gap-4 ${listingPackages.length > 0 ? "mt-8" : ""
+            }`}
+        >
+          <h1 className="text-2xl font-medium">{t("featuredAdPlan")}</h1>
+          <div className="relative">
+            <Carousel
+              key={isRTL ? "rtl" : "ltr"}
+              opts={{
+                align: "start",
+                containScroll: "trim",
+                direction: isRTL ? "rtl" : "ltr",
+              }}
+              className="w-full"
+            >
+              <CarouselPrevious className="flex absolute top-1/2 ltr:left-2 rtl:right-2 rtl:scale-x-[-1] -translate-y-1/2 bg-primary text-white rounded-full z-10" />
+              <CarouselNext className="flex absolute top-1/2 ltr:right-2 rtl:left-2 rtl:scale-x-[-1] -translate-y-1/2 bg-primary text-white rounded-full z-10" />
+
+              <CarouselContent
+                className={`gap-4 ${hasAdDiscount ? "pt-6" : ""}`}
+              >
+                {adPackages?.map((pckg) => (
+                  <CarouselItem
+                    key={pckg.id}
+                    className="basis-[100%] sm:basis-3/4 md:basis-1/2 lg:basis-[66.66%] xl:basis-[45%] first:pl-4"
+                  >
+                    <AddListingPlanCard
+                      pckg={pckg}
+                      handlePurchasePackage={handlePurchasePackage}
+                    />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+          </div>
+        </div>
+      )}
+      <PaymentModal
+        showPaymentModal={showPaymentModal}
+        setShowPaymentModal={setShowPaymentModal}
+        selectedPackage={selectedPackage}
+        packageSettings={packageSettings}
+        isLoading={isLoading}
+        setToggleApiAfterPaymentSuccess={setToggleApiAfterPaymentSuccess}
+      />
+      <BankDetailsModal
+        packageId={selectedPackage?.id}
+        bankDetails={packageSettings?.bankTransfer}
+      />
+    </>
+  );
+};
+
+export default ProfileSubscription;
diff --git a/components/PagesComponent/Subscription/RazorpayPayment.jsx b/components/PagesComponent/Subscription/RazorpayPayment.jsx
new file mode 100644
index 0000000..6640632
--- /dev/null
+++ b/components/PagesComponent/Subscription/RazorpayPayment.jsx
@@ -0,0 +1,109 @@
+import { createPaymentIntentApi } from "@/utils/api";
+import { useState } from "react";
+import { useRazorpay } from "react-razorpay";
+import RazorpayLogo from "../../../public/assets/ic_razorpay.png";
+import { FaAngleRight } from "react-icons/fa";
+import { useSelector } from "react-redux";
+import { toast } from "sonner";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+import { Loader2 } from "lucide-react";
+
+const RazorpayPayment = ({
+  packageSettings,
+  selectedPackage,
+  setShowPaymentModal,
+  setToggleApiAfterPaymentSuccess
+}) => {
+  const { Razorpay } = useRazorpay();
+  const { data: settingsData } = useSelector((state) => state.Settings);
+  const { data: user } = useSelector((state) => state.UserSignup);
+  const [isLoading, setIsLoading] = useState(false);
+  let rzpay;
+
+  const PayWithRazorPay = async () => {
+    try {
+      setIsLoading(true);
+      const res = await createPaymentIntentApi.createIntent({
+        package_id: selectedPackage.id,
+        payment_method: packageSettings.Razorpay.payment_method,
+      });
+      if (res.data.error) {
+        toast.error(res.data.message);
+        return;
+      }
+      setShowPaymentModal(false);
+      const paymentIntent = res.data.data.payment_intent;
+      const options = {
+        key: packageSettings.Razorpay.api_key,
+        name: settingsData.company_name,
+        description: settingsData.company_name,
+        image: settingsData.company_logo,
+        order_id: paymentIntent.id,
+        handler: function (response) {
+          toast.success(t("paymentSuccess"));
+          setToggleApiAfterPaymentSuccess((prev) => !prev)
+        },
+        prefill: {
+          name: user.name,
+          email: user.email,
+          contact: user.mobile,
+        },
+        notes: {
+          address: user.address,
+          user_id: user.id,
+          package_id: selectedPackage.id,
+        },
+        theme: {
+          color: settingsData.web_theme_color,
+        },
+      };
+
+      rzpay = new Razorpay(options); // Assign rzpay outside the function
+
+      rzpay.on("payment.failed", function (response) {
+        console.error(response.error.description);
+        if (rzpay) {
+          rzpay?.close();
+        }
+      });
+
+      rzpay.open();
+    } catch (error) {
+      console.error("Error during payment", error);
+      toast.error(t("errorProcessingPayment"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={PayWithRazorPay} className="w-full p-2">
+        <div className="flex items-center gap-2 justify-between ">
+          <div className="flex gap-3 items-center">
+            <div className="w-8 h-8">
+              <CustomImage
+                src={RazorpayLogo.src}
+                alt="Razorpay"
+                width={32}
+                height={32}
+                className="w-full h-full "
+              />
+            </div>
+            <p className="text-lg font-semibold">{t("razorPay")}</p>
+          </div>
+          <div>
+            {isLoading ? (
+              <Loader2 className="w-5 h-5 animate-spin" />
+            ) : (
+              <FaAngleRight size={18} className="rtl:scale-x-[-1]" />
+            )}
+          </div>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default RazorpayPayment;
diff --git a/components/PagesComponent/Subscription/StripePayment.jsx b/components/PagesComponent/Subscription/StripePayment.jsx
new file mode 100644
index 0000000..8243e4f
--- /dev/null
+++ b/components/PagesComponent/Subscription/StripePayment.jsx
@@ -0,0 +1,179 @@
+import React, { useState, useEffect, useCallback } from "react";
+
+import {
+  Elements,
+  ElementsConsumer,
+  PaymentElement,
+} from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
+import { createPaymentIntentApi } from "@/utils/api";
+import { toast } from "sonner";
+import { t } from "@/utils";
+import { Loader2 } from "lucide-react";
+
+const StripePayment = ({
+  selectedPackage,
+  packageSettings,
+  PaymentModalClose,
+  setShowStripePayment,
+  setToggleApiAfterPaymentSuccess
+}) => {
+  const [stripePromise, setStripePromise] = useState(null);
+  const [clientSecret, setClientSecret] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [formattedPrice, setFormattedPrice] = useState('')
+
+  useEffect(() => {
+    const loadStripeInstance = async () => {
+      if (packageSettings?.Stripe?.api_key) {
+        const stripeInstance = await loadStripe(packageSettings.Stripe.api_key);
+        setStripePromise(stripeInstance);
+      }
+    };
+    loadStripeInstance();
+  }, [packageSettings?.Stripe?.api_key]);
+
+  const handleStripePayment = useCallback(async () => {
+    try {
+      const res = await createPaymentIntentApi.createIntent({
+        package_id: selectedPackage.id,
+        payment_method: packageSettings.Stripe.payment_method,
+      });
+      if (res.data.error === true) {
+        toast.error(res.data.message);
+        return;
+      }
+      // Extract payment intent data from response
+      const paymentIntent =
+        res.data.data.payment_intent?.payment_gateway_response;
+
+      // Extract formatted price from payment_intent (not from payment_gateway_response)
+      const formattedPrice = res.data.data.payment_intent?.formatted_price;
+      if (formattedPrice) {
+        setFormattedPrice(formattedPrice);
+      }
+
+      const clientSecret = paymentIntent.client_secret;
+      setClientSecret(clientSecret);
+      setShowStripePayment(true);
+    } catch (error) {
+      console.error("Error during Stripe payment", error);
+      toast.error(t("errorOccurred"));
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    selectedPackage.id,
+    packageSettings?.Stripe?.payment_method,
+    setShowStripePayment,
+  ]);
+
+  useEffect(() => {
+    handleStripePayment();
+  }, [handleStripePayment]);
+
+  // PaymentForm component that uses the formattedPrice from parent scope
+  const PaymentForm = ({ elements, stripe }) => {
+    const [IsProcessing, setIsProcessing] = useState(false);
+
+    const handleSubmit = async (event) => {
+      event.preventDefault();
+      setIsProcessing(true);
+
+      // First, submit the elements to validate and prepare the payment method
+      // This must be called before confirmPayment
+      const { error: submitError } = await elements.submit();
+
+      if (submitError) {
+        // Handle validation errors
+        toast.error(submitError.message || t("paymentFailed"));
+        setIsProcessing(false);
+        return;
+      }
+
+      // PaymentElement handles payment method creation internally
+      // Just confirm the payment with the client secret
+      try {
+        const { error: confirmError } = await stripe.confirmPayment({
+          elements,
+          clientSecret,
+          redirect: "if_required",
+        });
+
+        if (confirmError) {
+          // Handle payment confirmation error
+          console.error(confirmError.message);
+          toast.error(confirmError.message || t("paymentFailed"));
+        } else {
+          // Payment succeeded
+          toast.success(t("paymentSuccess"));
+          setToggleApiAfterPaymentSuccess((prev) => !prev)
+          PaymentModalClose();
+        }
+      } catch (error) {
+        console.error("Error during payment:", error);
+      } finally {
+        setIsProcessing(false);
+      }
+    };
+
+    return (
+      <form onSubmit={handleSubmit}>
+        <div className="stripe_module">
+          {/* <div className="mb-4 text-lg font-semibold">
+            {t("pay")} {amountToPay / 100} {currency?.toUpperCase()}
+          </div> */}
+          <PaymentElement />
+          <button
+            className="w-full bg-primary text-white p-2 rounded-md my-4 flex items-center justify-center"
+            type="submit"
+            disabled={!stripePromise || IsProcessing}
+          >
+            {IsProcessing ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              t("pay") + " " + formattedPrice
+            )}
+          </button>
+        </div>
+      </form>
+    );
+  };
+
+  return (
+    <>
+      {loading ? (
+        <div className="">
+          <div className="animate-pulse">
+            <div className="w-full h-10 bg-gray-200 rounded-md mb-2"></div>
+            <div className="flex justify-between mb-4">
+              <div className="w-1/2 h-5 bg-gray-200 rounded-md"></div>
+              <div className="w-1/4 h-5 bg-gray-200 rounded-md"></div>
+            </div>
+            <div className="w-full h-12 bg-gray-200 rounded-md mt-6"></div>
+          </div>
+        </div>
+      ) : (
+        stripePromise &&
+        clientSecret && (
+          <div className="card">
+            {/* <div className="card-header">{t("payWithStripe")} :</div> */}
+            <div className="card-body">
+              <Elements stripe={stripePromise} options={{
+                clientSecret
+              }}  >
+                <ElementsConsumer>
+                  {({ stripe, elements }) => (
+                    <PaymentForm elements={elements} stripe={stripe} />
+                  )}
+                </ElementsConsumer>
+              </Elements>
+            </div>
+          </div>
+        )
+      )}
+    </>
+  );
+};
+
+export default StripePayment;
diff --git a/components/PagesComponent/Subscription/Subscription.jsx b/components/PagesComponent/Subscription/Subscription.jsx
new file mode 100644
index 0000000..ca22a68
--- /dev/null
+++ b/components/PagesComponent/Subscription/Subscription.jsx
@@ -0,0 +1,234 @@
+"use client";
+import { useEffect, useState } from "react";
+import AddListingPlanCard from "@/components/PagesComponent/Cards/AddListingPlanCard";
+import {
+  assigFreePackageApi,
+  getPackageApi,
+  getPaymentSettingsApi,
+} from "@/utils/api";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { t } from "@/utils";
+import PaymentModal from "./PaymentModal";
+import { CurrentLanguageData, getIsRtl } from "@/redux/reducer/languageSlice";
+import { useSelector } from "react-redux";
+import Layout from "@/components/Layout/Layout";
+import { getIsLoggedIn } from "@/redux/reducer/authSlice";
+import { setIsLoginOpen } from "@/redux/reducer/globalStateSlice";
+import { toast } from "sonner";
+import BankDetailsModal from "./BankDetailsModal";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import AdListingPublicPlanCardSkeleton from "@/components/Skeletons/AdListingPublicPlanCardSkeleton";
+import { getIsFreAdListing } from "@/redux/reducer/settingSlice";
+import { useNavigate } from "@/components/Common/useNavigate";
+
+const Subscription = () => {
+  const isRTL = useSelector(getIsRtl);
+  const { navigate } = useNavigate();
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+
+  const [listingPackages, setListingPackages] = useState([]);
+  const hasListingDiscount = listingPackages?.some(
+    (p) => p?.discount_in_percentage > 0
+  );
+  const [isListingPackagesLoading, setIsListingPackagesLoading] =
+    useState(false);
+
+  const [selectedPackage, setSelectedPackage] = useState(null);
+
+  const [adPackages, setAdPackages] = useState([]);
+  const hasAdDiscount = adPackages.some((p) => p.discount_in_percentage > 0);
+  const [isAdPackagesLoading, setIsAdPackagesLoading] = useState(false);
+  const [toggleApiAfterPaymentSuccess, setToggleApiAfterPaymentSuccess] = useState(false)
+
+
+  const [showPaymentModal, setShowPaymentModal] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [packageSettings, setPackageSettings] = useState(null);
+  const isLoggedIn = useSelector(getIsLoggedIn);
+  const isFreeAdListing = useSelector(getIsFreAdListing);
+
+  useEffect(() => {
+    if (!isFreeAdListing) {
+      handleFetchListingPackages();
+    }
+    handleFetchFeaturedPackages();
+  }, [CurrentLanguage?.id, toggleApiAfterPaymentSuccess]);
+
+  useEffect(() => {
+    if (showPaymentModal) {
+      handleFetchPaymentSetting();
+    }
+  }, [showPaymentModal]);
+
+  const handleFetchPaymentSetting = async () => {
+    setIsLoading(true);
+    try {
+      const res = await getPaymentSettingsApi.getPaymentSettings();
+      const { data } = res.data;
+      setPackageSettings(data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleFetchListingPackages = async () => {
+    try {
+      setIsListingPackagesLoading(true);
+      const res = await getPackageApi.getPackage({ type: "item_listing" });
+      setListingPackages(res?.data?.data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsListingPackagesLoading(false);
+    }
+  };
+
+  const handleFetchFeaturedPackages = async () => {
+    try {
+      setIsAdPackagesLoading(true);
+      const res = await getPackageApi.getPackage({ type: "advertisement" });
+      setAdPackages(res.data?.data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsAdPackagesLoading(false);
+    }
+  };
+
+  const handlePurchasePackage = (pckg) => {
+    if (!isLoggedIn) {
+      setIsLoginOpen(true);
+      return;
+    }
+    if (pckg?.final_price === 0) {
+      assignPackage(pckg.id);
+    } else {
+      setShowPaymentModal(true);
+      setSelectedPackage(pckg);
+    }
+  };
+
+  const assignPackage = async (id) => {
+    try {
+      const res = await assigFreePackageApi.assignFreePackage({
+        package_id: id,
+      });
+      const data = res?.data;
+      if (data?.error === false) {
+        toast.success(data.message);
+        navigate("/");
+      } else {
+        toast.error(data.message);
+      }
+    } catch (error) {
+      toast.error(data.message);
+      console.log(error);
+    }
+  };
+
+  return (
+    <Layout>
+      <BreadCrumb title2={t("subscription")} />
+      <div className="container">
+        {isListingPackagesLoading ? (
+          <AdListingPublicPlanCardSkeleton />
+        ) : (
+          listingPackages?.length > 0 && (
+            <div className="flex flex-col gap-4 mt-8">
+              <h1 className="text-2xl font-medium">{t("adListingPlan")}</h1>
+              <div className="relative">
+                <Carousel
+                  key={isRTL ? "rtl" : "ltr"}
+                  opts={{
+                    align: "start",
+                    containScroll: "trim",
+                    direction: isRTL ? "rtl" : "ltr",
+                  }}
+                >
+                  <CarouselPrevious className="hidden md:flex absolute top-1/2 ltr:left-2 rtl:right-2 rtl:scale-x-[-1] -translate-y-1/2 bg-primary text-white rounded-full z-10" />
+                  <CarouselNext className="hidden md:flex absolute top-1/2 ltr:right-2 rtl:left-2 rtl:scale-x-[-1] -translate-y-1/2 bg-primary text-white rounded-full z-10" />
+                  <CarouselContent
+                    className={`sm:gap-4 ${hasListingDiscount ? "pt-6" : ""}`}
+                  >
+                    {listingPackages?.map((pckg) => (
+                      <CarouselItem
+                        key={pckg.id}
+                        className="basis-[90%] sm:basis-[75%] md:basis-[55%] lg:basis-[45%] xl:basis-[35%] 2xl:basis-[30%]"
+                      >
+                        <AddListingPlanCard
+                          pckg={pckg}
+                          handlePurchasePackage={handlePurchasePackage}
+                        />
+                      </CarouselItem>
+                    ))}
+                  </CarouselContent>
+                </Carousel>
+              </div>
+            </div>
+          )
+        )}
+
+        {isAdPackagesLoading ? (
+          <AdListingPublicPlanCardSkeleton />
+        ) : (
+          <div className="flex flex-col gap-4 mt-8">
+            <h1 className="text-2xl font-medium">{t("featuredAdPlan")}</h1>
+            <div className="relative">
+              <Carousel
+                key={isRTL ? "rtl" : "ltr"}
+                opts={{
+                  align: "start",
+                  containScroll: "trim",
+                  direction: isRTL ? "rtl" : "ltr",
+                }}
+                className="w-full"
+              >
+                <CarouselPrevious className="hidden md:flex absolute top-1/2 ltr:left-2 rtl:right-2 rtl:scale-x-[-1] -translate-y-1/2 bg-primary text-white rounded-full z-10" />
+                <CarouselNext className="hidden md:flex absolute top-1/2 ltr:right-2 rtl:left-2 rtl:scale-x-[-1] -translate-y-1/2 bg-primary text-white rounded-full z-10" />
+                <CarouselContent
+                  className={`sm:gap-4 ${hasAdDiscount ? "pt-6" : ""}`}
+                >
+                  {adPackages?.map((pckg) => (
+                    <CarouselItem
+                      key={pckg.id}
+                      className="basis-[90%] sm:basis-[75%] md:basis-[55%] lg:basis-[45%] xl:basis-[35%] 2xl:basis-[30%]"
+                    >
+                      <AddListingPlanCard
+                        pckg={pckg}
+                        handlePurchasePackage={handlePurchasePackage}
+                      />
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+              </Carousel>
+            </div>
+          </div>
+        )}
+
+        <PaymentModal
+          showPaymentModal={showPaymentModal}
+          setShowPaymentModal={setShowPaymentModal}
+          selectedPackage={selectedPackage}
+          packageSettings={packageSettings}
+          isLoading={isLoading}
+          setToggleApiAfterPaymentSuccess={setToggleApiAfterPaymentSuccess}
+
+        />
+        <BankDetailsModal
+          packageId={selectedPackage?.id}
+          bankDetails={packageSettings?.bankTransfer}
+        />
+      </div>
+    </Layout>
+  );
+};
+
+export default Subscription;
diff --git a/components/PagesComponent/Transactions/Transactions.jsx b/components/PagesComponent/Transactions/Transactions.jsx
new file mode 100644
index 0000000..ec88771
--- /dev/null
+++ b/components/PagesComponent/Transactions/Transactions.jsx
@@ -0,0 +1,150 @@
+"use client";
+import { formatDateMonthYear, t } from "@/utils";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import NoData from "@/components/EmptyStates/NoData";
+import { Badge } from "@/components/ui/badge";
+import TransactionSkeleton from "@/components/Skeletons/TransactionSkeleton";
+import { paymentTransactionApi } from "@/utils/api";
+import { toast } from "sonner";
+import Pagination from "@/components/Common/Pagination";
+import UploadReceiptModal from "./UploadReceiptModal";
+
+const Transactions = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [transactions, setTransactions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(null);
+  const [transactionId, setTransactionId] = useState("");
+  const [IsUploadRecipt, setIsUploadRecipt] = useState(false);
+
+  const handleUploadReceipt = (id) => {
+    setTransactionId(id);
+    setIsUploadRecipt(true);
+  };
+
+  const fetchTransactions = async () => {
+    try {
+      setIsLoading(true);
+      const res = await paymentTransactionApi.transaction({
+        page: currentPage,
+      });
+      setTotalPages(res.data.data.last_page);
+      setCurrentPage(res.data.data.current_page);
+      if (res?.data?.error === false) {
+        setTransactions(res?.data?.data?.data);
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
+  useEffect(() => {
+    fetchTransactions();
+  }, [currentPage]);
+
+  const getStatusBadge = (status) => {
+    switch (status) {
+      case "succeed":
+        return <Badge className="bg-green-500">{t("completed")}</Badge>;
+      case "pending":
+        return <Badge className="bg-yellow-500">{t("pending")}</Badge>;
+      case "failed":
+        return <Badge className="bg-red-500">{t("failed")}</Badge>;
+      case "under review":
+        return <Badge className="bg-blue-500">{t("underReview")}</Badge>;
+      default:
+        return <Badge>{status}</Badge>;
+    }
+  };
+
+  return (
+    <>
+      {isLoading ? (
+        <TransactionSkeleton />
+      ) : transactions.length > 0 ? (
+        <>
+          <div className="overflow-hidden border rounded-md">
+            <Table>
+              <TableHeader className="bg-muted">
+                <TableRow className="text-xs sm:text-sm">
+                  <TableHead>{t("id")}</TableHead>
+                  <TableHead>{t("paymentMethod")}</TableHead>
+                  <TableHead>{t("transactionId")}</TableHead>
+                  <TableHead>{t("date")}</TableHead>
+                  <TableHead>{t("price")}</TableHead>
+                  <TableHead>{t("status")}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody className="text-xs sm:text-sm">
+                {transactions.map((transaction) => (
+                  <TableRow
+                    key={transaction?.id}
+                    className="hover:bg-muted text-center"
+                  >
+                    <TableCell>{transaction?.id}</TableCell>
+                    <TableCell>{transaction?.payment_gateway}</TableCell>
+                    <TableCell>{transaction?.order_id}</TableCell>
+                    <TableCell>
+                      {formatDateMonthYear(transaction?.created_at)}
+                    </TableCell>
+                    <TableCell>{transaction?.amount}</TableCell>
+                    <TableCell>
+                      {transaction?.payment_status === "pending" &&
+                      transaction?.payment_gateway === "BankTransfer" ? (
+                        <button
+                          onClick={() => handleUploadReceipt(transaction?.id)}
+                          className="py-2 px-4 rounded whitespace-nowrap text-white bg-primary"
+                        >
+                          {t("uploadReceipt")}
+                        </button>
+                      ) : (
+                        getStatusBadge(transaction?.payment_status)
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            <div className="flex justify-end items-center mb-2">
+              <Pagination
+                className="mt-7"
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={handlePageChange}
+              />
+            </div>
+          </div>
+        </>
+      ) : (
+        <NoData name={t("transaction")} />
+      )}
+      <UploadReceiptModal
+        key={IsUploadRecipt}
+        IsUploadRecipt={IsUploadRecipt}
+        setIsUploadRecipt={setIsUploadRecipt}
+        transactionId={transactionId}
+        setData={setTransactions}
+      />
+    </>
+  );
+};
+export default Transactions;
diff --git a/components/PagesComponent/Transactions/UploadReceiptModal.jsx b/components/PagesComponent/Transactions/UploadReceiptModal.jsx
new file mode 100644
index 0000000..1f02204
--- /dev/null
+++ b/components/PagesComponent/Transactions/UploadReceiptModal.jsx
@@ -0,0 +1,136 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { t } from "@/utils";
+import { updateBankTransferApi } from "@/utils/api";
+import { useState, useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import { MdClose } from "react-icons/md";
+import { toast } from "sonner";
+
+const UploadReceiptModal = ({
+  IsUploadRecipt,
+  setIsUploadRecipt,
+  transactionId,
+  setData,
+}) => {
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [preview, setPreview] = useState(null);
+
+  const onDrop = useCallback((acceptedFiles) => {
+    const file = acceptedFiles[0];
+    setSelectedFile(file);
+
+    // Create preview URL
+    const previewUrl = URL.createObjectURL(file);
+    setPreview(previewUrl);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      "image/*": [".png", ".jpg", ".jpeg"],
+    },
+    maxFiles: 1,
+    multiple: false,
+  });
+
+  const clearSelection = () => {
+    if (preview) {
+      URL.revokeObjectURL(preview);
+    }
+    setSelectedFile(null);
+    setPreview(null);
+  };
+
+  const handleReceiptSubmit = async () => {
+    try {
+      setIsUploading(true);
+      const res = await updateBankTransferApi.updateBankTransfer({
+        payment_transection_id: transactionId,
+        payment_receipt: selectedFile,
+      });
+
+      if (res?.data?.error === false) {
+        setData((prevData) =>
+          prevData.map((item) =>
+            item.id === transactionId ? res?.data?.data : item
+          )
+        );
+        toast.success(t("receiptUploaded"));
+        setIsUploadRecipt(false);
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log("Failed To Upload Receipt", error);
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <Dialog open={IsUploadRecipt} onOpenChange={setIsUploadRecipt}>
+      <DialogContent onInteractOutside={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle className="text-xl font-semibold">
+            {t("uploadPaymentReceipt")}
+          </DialogTitle>
+          <DialogDescription className="!text-base">
+            {t("uploadReceiptDescription")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4 mt-4">
+          {!selectedFile ? (
+            <div
+              {...getRootProps()}
+              className={`border-2 border-dashed border-gray-300 rounded-lg p-8 text-center transition-all duration-200 cursor-pointer hover:border-primary hover:bg-gray-50 ${
+                isDragActive ? "border-primary bg-gray-50" : ""
+              }`}
+            >
+              <input {...getInputProps()} />
+              {/* <FileImage className="receipt-icon" /> */}
+              <p className="text-sm text-black opacity-60">
+                {isDragActive
+                  ? t("dropYourReceiptHere")
+                  : t("dragAndDropReceipt")}
+              </p>
+              <p className="text-sm text-black opacity-60">
+                {t("clickToSelect")}
+              </p>
+            </div>
+          ) : (
+            <div className="relative">
+              <img
+                src={preview}
+                alt="Receipt preview"
+                className="w-full h-48 object-contain rounded-lg border border-gray-200"
+              />
+              <button
+                className="absolute top-2 right-2 bg-red-500 text-white border-none rounded flex items-center justify-center w-8 h-8 cursor-pointer"
+                onClick={clearSelection}
+              >
+                <MdClose size={24} />
+              </button>
+            </div>
+          )}
+          <button
+            className="border-0 bg-primary text-white px-3 py-1.5 rounded w-max self-end disabled:opacity-65"
+            onClick={handleReceiptSubmit}
+            disabled={!selectedFile || isUploading}
+          >
+            {t("submit")}
+          </button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default UploadReceiptModal;
diff --git a/components/PagesComponent/UserVerification/UserVerification.jsx b/components/PagesComponent/UserVerification/UserVerification.jsx
new file mode 100644
index 0000000..43e1b8f
--- /dev/null
+++ b/components/PagesComponent/UserVerification/UserVerification.jsx
@@ -0,0 +1,463 @@
+"use client";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import {
+  handleKeyDown,
+  inpNum,
+  prefillVerificationDetails,
+  prepareCustomFieldFiles,
+  prepareCustomFieldTranslations,
+  t,
+  validateExtraDetails,
+} from "@/utils";
+import {
+  getVerificationFiledsApi,
+  getVerificationStatusApi,
+  sendVerificationReqApi,
+} from "@/utils/api";
+import { useEffect, useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { toast } from "sonner";
+import { MdOutlineAttachFile } from "react-icons/md";
+import { HiOutlineUpload } from "react-icons/hi";
+import CustomLink from "@/components/Common/CustomLink";
+import Layout from "@/components/Layout/Layout";
+import Checkauth from "@/HOC/Checkauth";
+import AdLanguageSelector from "../AdsListing/AdLanguageSelector";
+import {
+  getDefaultLanguageCode,
+  getLanguages,
+} from "@/redux/reducer/settingSlice";
+import { useSelector } from "react-redux";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import PageLoader from "@/components/Common/PageLoader";
+import { getCurrentLangCode } from "@/redux/reducer/languageSlice";
+import CustomImage from "@/components/Common/CustomImage";
+import { useNavigate } from "@/components/Common/useNavigate";
+
+const UserVerification = () => {
+  const { navigate } = useNavigate();
+  const [UserVeriFields, setUserVeriFields] = useState([]);
+  const [filePreviews, setFilePreviews] = useState({});
+  const [VerificationStatus, setVerificationStatus] = useState("");
+  const [verificationLoading, setVerificationLoading] = useState(false);
+  const [isVerifying, setIsVerifying] = useState(false);
+
+  const langCode = useSelector(getCurrentLangCode);
+  const languages = useSelector(getLanguages);
+  const defaultLanguageCode = useSelector(getDefaultLanguageCode);
+  const defaultLangId = languages?.find(
+    (lang) => lang.code === defaultLanguageCode
+  )?.id;
+  const [langId, setLangId] = useState(defaultLangId);
+  const [translations, setTranslations] = useState({
+    [defaultLangId]: {},
+  });
+
+  const currentTranslation = translations[langId] || {};
+  const hasTextbox = UserVeriFields.some((field) => field.type === "textbox");
+
+  useEffect(() => {
+    fetchVerificationData();
+  }, [langCode]);
+
+  const fetchVerificationData = async () => {
+    try {
+      setVerificationLoading(true);
+
+      // Step 1: Fetch field definitions
+      const fieldsRes = await getVerificationFiledsApi.getVerificationFileds();
+      const fieldData = fieldsRes?.data?.data || [];
+      setUserVeriFields(fieldData);
+
+      // Step 2: Fetch verification values
+      const statusRes = await getVerificationStatusApi.getVerificationStatus();
+      const statusData = statusRes?.data?.data;
+      const statusError = statusRes?.data?.error;
+
+      if (statusError) {
+        setVerificationStatus("not applied");
+      } else {
+        setVerificationStatus(statusData?.status);
+      }
+
+      const verification_fields = statusData?.verification_fields || [];
+
+      // Step 3: Prepare translations
+      const translationsToSet = prefillVerificationDetails({
+        data: fieldData,
+        languages,
+        defaultLangId,
+        extraFieldValue:
+          statusData?.status === "not applied" ? [] : verification_fields,
+        setFilePreviews,
+      });
+
+      setTranslations(translationsToSet);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setVerificationLoading(false);
+    }
+  };
+  const renderCustomFields = (field) => {
+    let {
+      id,
+      name,
+      translated_name,
+      type,
+      translated_value,
+      values,
+      min_length,
+      max_length,
+    } = field;
+
+    const inputProps = {
+      id,
+      name: id,
+      onChange: (e) => handleChange(id, e.target.value),
+      value: currentTranslation[id] || "",
+      ...(type === "number"
+        ? { min: min_length, max: max_length }
+        : { minLength: min_length, maxLength: max_length }),
+    };
+
+    switch (type) {
+      case "number":
+        return (
+          <div className="flex flex-col">
+            <Input
+              type="number"
+              inputMode="numeric"
+              placeholder={`${t("enter")} ${translated_name || name}`}
+              {...inputProps}
+              onKeyDown={(e) => handleKeyDown(e, max_length)}
+              onKeyPress={(e) => inpNum(e)}
+              className="border rounded-md px-4 py-2 outline-none"
+            />
+            {max_length && (
+              <span className="flex justify-end text-muted-foreground text-sm">
+                {`${currentTranslation[id]?.length ?? 0}/${max_length}`}
+              </span>
+            )}
+          </div>
+        );
+      case "textbox": {
+        return (
+          <div className=" flex flex-col">
+            <Textarea
+              placeholder={`${t("enter")} ${translated_name || name}`}
+              {...inputProps}
+            />
+            {max_length && (
+              <span className=" flex justify-end text-muted-foreground text-sm">
+                {`${currentTranslation[id]?.length ?? 0}/${max_length}`}
+              </span>
+            )}
+          </div>
+        );
+      }
+
+      case "dropdown":
+        return (
+          <div className="w-full">
+            <Select
+              value={currentTranslation[id] || ""}
+              onValueChange={(value) => handleChange(id, value)}
+              id={id}
+              name={id}
+            >
+              <SelectTrigger className="outline-none focus:outline-none">
+                <SelectValue
+                  className="font-semibold"
+                  placeholder={`${t("select")} ${translated_name || name}`}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel value="">
+                    {t("select")} {translated_name || name}
+                  </SelectLabel>
+                  {values?.map((option, index) => (
+                    <SelectItem
+                      id={option}
+                      className="font-semibold"
+                      key={index}
+                      value={option}
+                    >
+                      {translated_value?.[index] || option}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+        );
+      case "checkbox":
+        return (
+          <div className="flex w-full flex-wrap gap-2">
+            {values?.map((value, index) => {
+              return (
+                <div key={index} className="flex gap-1 items-center">
+                  <Checkbox
+                    id={id}
+                    value={value}
+                    onCheckedChange={(checked) =>
+                      handleCheckboxChange(id, value, checked)
+                    }
+                    checked={currentTranslation[id]?.includes(value)}
+                  />
+                  <label
+                    htmlFor="terms"
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  >
+                    {translated_value?.[index] || value}
+                  </label>
+                </div>
+              );
+            })}
+          </div>
+        );
+      case "radio":
+        return (
+          <RadioGroup
+            value={currentTranslation[id] || ""}
+            onValueChange={(value) => handleChange(id, value)}
+            className="flex flex-wrap gap-3"
+            id={id}
+            name={id}
+          >
+            {values?.map((option, index) => (
+              <div key={option} className="flex items-center">
+                <RadioGroupItem
+                  value={option}
+                  id={option}
+                  className="sr-only peer"
+                />
+                <label
+                  htmlFor={option}
+                  className={`${
+                    currentTranslation[id] === option
+                      ? "bg-primary text-white"
+                      : "bg-white"
+                  } border rounded-md px-4 py-2 cursor-pointer transition-colors flex items-center`}
+                >
+                  {translated_value?.[index] || option}
+                </label>
+              </div>
+            ))}
+          </RadioGroup>
+        );
+      case "fileinput":
+        const fileUrl = filePreviews?.[langId]?.[id]?.url;
+        const isPdf = filePreviews?.[langId]?.[id]?.isPdf;
+        return (
+          <>
+            <label htmlFor={id} className="flex gap-2 items-center">
+              <div className="flex items-center gap-1 cursor-pointer border border-gray-300 px-2.5 py-1 rounded w-fit">
+                <HiOutlineUpload size={24} fontWeight="400" />
+              </div>
+              {fileUrl && (
+                <div className="flex items-center gap-1 text-sm flex-nowrap break-words">
+                  {isPdf ? (
+                    <>
+                      <MdOutlineAttachFile className="file_icon" />
+                      <CustomLink
+                        href={fileUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {t("viewPdf")}
+                      </CustomLink>
+                    </>
+                  ) : (
+                    <CustomImage
+                      src={fileUrl}
+                      alt="Preview"
+                      className="h-9 w-9 aspect-square"
+                      height={36}
+                      width={36}
+                    />
+                  )}
+                </div>
+              )}
+            </label>
+            <input
+              type="file"
+              id={id}
+              name={id}
+              className="hidden"
+              onChange={(e) => handleFileChange(id, e.target.files[0])}
+            />
+            <span className="text-sm text-muted-foreground">
+              {t("allowedFileType")}
+            </span>
+          </>
+        );
+      default:
+        break;
+    }
+  };
+
+  const write = (fieldId, value) =>
+    setTranslations((prev) => ({
+      ...prev,
+      [langId]: {
+        ...prev[langId],
+        [fieldId]: value,
+      },
+    }));
+
+  const handleFileChange = (id, file) => {
+    if (file) {
+      const allowedExtensions = /\.(jpg|jpeg|svg|png|pdf)$/i;
+      if (!allowedExtensions.test(file.name)) {
+        toast.error(t("notAllowedFile"));
+        return;
+      }
+      const fileUrl = URL.createObjectURL(file);
+      // Language-scoped preview
+      setFilePreviews((prev) => ({
+        ...prev,
+        [langId]: {
+          ...(prev[langId] || {}),
+          [id]: {
+            url: fileUrl,
+            isPdf: /\.pdf$/i.test(file.name),
+          },
+        },
+      }));
+      write(id, file);
+    }
+  };
+
+  const handleCheckboxChange = (id, value, checked) => {
+    const list = currentTranslation[id] || [];
+    const next = checked ? [...list, value] : list.filter((v) => v !== value);
+    write(id, next);
+  };
+
+  const handleChange = (id, value) => write(id, value ?? "");
+
+  const handleVerify = async () => {
+    if (VerificationStatus === "approved") {
+      toast.error(t("verificationDoneAlready"));
+      return;
+    }
+    if (
+      VerificationStatus === "resubmitted" ||
+      VerificationStatus === "pending" ||
+      VerificationStatus === "submitted"
+    ) {
+      toast.error(t("verificationAlreadyInReview"));
+      return;
+    }
+
+    if (
+      validateExtraDetails({
+        languages,
+        defaultLangId,
+        extraDetails: translations,
+        customFields: UserVeriFields,
+        filePreviews,
+      })
+    ) {
+      setIsVerifying(true);
+      const verification_field_translations =
+        prepareCustomFieldTranslations(translations);
+      const verification_field_files = prepareCustomFieldFiles(
+        translations,
+        defaultLangId
+      );
+      try {
+        const res = await sendVerificationReqApi.sendVerificationReq({
+          verification_field_translations,
+          verification_field_files,
+        });
+        if (res?.data?.error === false) {
+          toast.success(res?.data?.message);
+          navigate("/profile");
+        }
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setIsVerifying(false);
+      }
+    }
+  };
+
+  return (
+    <Layout>
+      <BreadCrumb title2={t("userVerification")} />
+
+      {verificationLoading ? (
+        <PageLoader />
+      ) : (
+        <div className="container mt-8">
+          <div className="flex flex-col gap-6">
+            <div className="flex items-center gap-3 justify-between">
+              <h1 className="text-2xl font-semibold">
+                {t("userVerification")}
+              </h1>
+              {hasTextbox && (
+                <AdLanguageSelector
+                  langId={langId}
+                  setLangId={setLangId}
+                  languages={languages}
+                  setTranslations={setTranslations}
+                />
+              )}
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-12 gap-4 ">
+              {UserVeriFields?.map((field) => {
+                if (langId !== defaultLangId && field.type !== "textbox")
+                  return null;
+
+                return (
+                  <div
+                    className="col-span-1 md:col-span-6 flex flex-col gap-2"
+                    key={field?.id}
+                  >
+                    <Label
+                      className={`${
+                        field?.is_required === 1 && defaultLangId === langId
+                          ? "requiredInputLabel"
+                          : ""
+                      }`}
+                      htmlFor={field?.id}
+                    >
+                      {field?.translated_name || field?.name}
+                    </Label>
+                    {renderCustomFields(field)}
+                  </div>
+                );
+              })}
+            </div>
+            <div className="flex justify-end">
+              <button
+                className="px-4 py-2 bg-black text-white text-xl rounded-md disabled:opacity-60"
+                disabled={isVerifying}
+                onClick={handleVerify}
+              >
+                {isVerifying ? t("loading") : t("verify")}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </Layout>
+  );
+};
+
+export default Checkauth(UserVerification);
diff --git a/components/Profile/Profile.jsx b/components/Profile/Profile.jsx
new file mode 100644
index 0000000..3607062
--- /dev/null
+++ b/components/Profile/Profile.jsx
@@ -0,0 +1,428 @@
+"use client";
+import { getDefaultCountryCode, t } from "@/utils";
+import { MdAddPhotoAlternate, MdVerifiedUser } from "react-icons/md";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { loadUpdateUserData, userSignUpData } from "@/redux/reducer/authSlice";
+import { Switch } from "../ui/switch";
+import { Textarea } from "../ui/textarea";
+import { Button, buttonVariants } from "../ui/button";
+import { Fcmtoken, settingsData } from "@/redux/reducer/settingSlice";
+import {
+  getUserInfoApi,
+  getVerificationStatusApi,
+  updateProfileApi,
+} from "@/utils/api";
+import { toast } from "sonner";
+import CustomLink from "@/components/Common/CustomLink";
+import Image from "next/image";
+import PhoneInput from "react-phone-input-2";
+import "react-phone-input-2/lib/style.css";
+import { isValidPhoneNumber } from "libphonenumber-js/max";
+import { Loader2 } from "lucide-react";
+
+const Profile = () => {
+  const UserData = useSelector(userSignUpData);
+  const IsLoggedIn = UserData !== undefined && UserData !== null;
+  const settings = useSelector(settingsData);
+  const placeholder_image = settings?.placeholder_image;
+  const [profileImage, setProfileImage] = useState("");
+  const [profileFile, setProfileFile] = useState(null);
+  const fetchFCM = useSelector(Fcmtoken);
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    address: "",
+    notification: 1,
+    show_personal_details: 0,
+    region_code: "",
+    country_code: "",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [isPending, setIsPending] = useState(false);
+  const [VerificationStatus, setVerificationStatus] = useState("");
+  const [RejectionReason, setRejectionReason] = useState("");
+  const getVerificationProgress = async () => {
+    try {
+      const res = await getVerificationStatusApi.getVerificationStatus();
+      if (res?.data?.error === true) {
+        setVerificationStatus("not applied");
+      } else {
+        const status = res?.data?.data?.status;
+        const rejectReason = res?.data?.data?.rejection_reason;
+        setVerificationStatus(status);
+        setRejectionReason(rejectReason);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const getUserDetails = async () => {
+    try {
+      const res = await getUserInfoApi.getUserInfo();
+      if (res?.data?.error === false) {
+        const region = (
+          res?.data?.data?.region_code ||
+          process.env.NEXT_PUBLIC_DEFAULT_COUNTRY ||
+          "in"
+        ).toLowerCase();
+
+        const countryCode =
+          res?.data?.data?.country_code?.replace("+", "") || getDefaultCountryCode();
+
+        setFormData({
+          name: res?.data?.data?.name || "",
+          email: res?.data?.data?.email || "",
+          phone: res?.data?.data?.mobile || "",
+          address: res?.data?.data?.address || "",
+          notification: res?.data?.data?.notification,
+          show_personal_details: Number(res?.data?.data?.show_personal_details),
+          region_code: region,
+          country_code: countryCode,
+        });
+        setProfileImage(res?.data?.data?.profile || placeholder_image);
+        const currentFcmId = UserData?.fcm_id;
+        if (!res?.data?.data?.fcm_id && currentFcmId) {
+          const updatedData = { ...res?.data?.data, fcm_id: currentFcmId };
+          loadUpdateUserData(updatedData);
+        } else {
+          loadUpdateUserData(res?.data?.data);
+        }
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log("Error fetching user details:", error);
+    }
+  };
+
+  useEffect(() => {
+    if (IsLoggedIn) {
+      const fetchData = async () => {
+        setIsPending(true);
+        try {
+          await Promise.all([getVerificationProgress(), getUserDetails()]);
+        } catch (error) {
+          console.log("Error in parallel API calls:", error);
+        } finally {
+          setIsPending(false);
+        }
+      };
+      fetchData();
+    }
+  }, []);
+
+  const handleChange = (e) => {
+    const { id, value } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [id]: value,
+    }));
+  };
+
+  const handlePhoneChange = (value, data) => {
+    const dial = data?.dialCode || "";
+    const iso2 = data?.countryCode || ""; // region code (in, us, ae)
+
+    setFormData((prev) => {
+      const pureMobile = value.startsWith(dial)
+        ? value.slice(dial.length)
+        : value;
+      return {
+        ...prev,
+        phone: pureMobile,
+        country_code: dial,
+        region_code: iso2,
+      };
+    });
+  };
+
+  const handleSwitchChange = (id) => {
+    setFormData((prevData) => ({
+      ...prevData,
+      [id]: prevData[id] === 1 ? 0 : 1,
+    }));
+  };
+
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setProfileFile(file);
+      const reader = new FileReader();
+      reader.onload = () => {
+        setProfileImage(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      if (!formData?.name.trim() || !formData?.address.trim()) {
+        toast.error(t("emptyFieldNotAllowed"));
+        return;
+      }
+      const mobileNumber = formData.phone || "";
+
+      // ✅ Validate phone number ONLY if user entered one as it is optional
+      if (
+        Boolean(mobileNumber) &&
+        !isValidPhoneNumber(`+${formData.country_code}${mobileNumber}`)
+      ) {
+        toast.error(t("invalidPhoneNumber"));
+        return;
+      }
+      setIsLoading(true);
+      const response = await updateProfileApi.updateProfile({
+        name: formData.name,
+        email: formData.email,
+        mobile: mobileNumber,
+        address: formData.address,
+        profile: profileFile,
+        fcm_id: fetchFCM ? fetchFCM : "",
+        notification: formData.notification,
+        country_code: formData.country_code,
+        show_personal_details: formData?.show_personal_details,
+        region_code: formData.region_code.toUpperCase(),
+      });
+
+      const data = response.data;
+      if (data.error !== true) {
+        const currentFcmId = UserData?.fcm_id;
+        if (!data?.data?.fcm_id && currentFcmId) {
+          const updatedData = { ...data?.data, fcm_id: currentFcmId };
+          loadUpdateUserData(updatedData);
+        } else {
+          loadUpdateUserData(data?.data);
+        }
+        toast.success(data.message);
+      } else {
+        toast.error(data.message);
+      }
+    } catch (error) {
+      console.error("Error:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Show loader when pending is true
+  if (isPending) {
+    return (
+      <div className="flex justify-center items-center h-full">
+        <div className="relative w-12 h-12">
+          <div className="absolute w-12 h-12 bg-primary rounded-full animate-ping"></div>
+          <div className="absolute w-12 h-12 bg-primary rounded-full animate-ping delay-1000"></div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+      <div className="flex flex-col md:flex-row md:items-center sm:justify-between gap-4 md:border md:py-6 md:px-4 md:rounded">
+        <div className="flex flex-col md:flex-row items-center gap-4 flex-1">
+          <div className="relative">
+            {/* use next js image directly here */}
+            {profileImage && (
+              <Image
+                src={profileImage}
+                alt="User profile"
+                width={120}
+                height={120}
+                className="w-[120px] h-auto aspect-square rounded-full border-muted border-4"
+              />
+            )}
+
+            <div className="flex items-center justify-center p-1 absolute size-10 rounded-full top-20 right-0 bg-primary border-4 border-[#efefef] text-white cursor-pointer">
+              <input
+                type="file"
+                id="profileImageUpload"
+                className="hidden"
+                accept="image/*"
+                onChange={handleImageChange}
+              />
+              <label htmlFor="profileImageUpload" className="cursor-pointer">
+                <MdAddPhotoAlternate size={22} />
+              </label>
+            </div>
+          </div>
+          <div className="flex flex-col gap-2 flex-1">
+            <h1
+              className="text-xl text-center ltr:md:text-left rtl:md:text-right font-medium break-words line-clamp-2"
+              title={UserData?.name}
+            >
+              {UserData?.name}
+            </h1>
+            <p className="break-all text-center ltr:md:text-left rtl:md:text-right">
+              {UserData?.email}
+            </p>
+          </div>
+        </div>
+        <div className="md:max-w-[50%] flex justify-center md:justify-end">
+          {(() => {
+            switch (VerificationStatus) {
+              case "approved":
+                return (
+                  <div className="flex items-center gap-1 rounded text-white bg-[#fa6e53] py-1 px-2 text-sm">
+                    <MdVerifiedUser size={14} />
+                    <span>{t("verified")}</span>
+                  </div>
+                );
+
+              case "not applied":
+                return (
+                  <div className="flex justify-end">
+                    <CustomLink
+                      href="/user-verification"
+                      className={buttonVariants()}
+                    >
+                      {t("verfiyNow")}
+                    </CustomLink>
+                  </div>
+                );
+
+              case "rejected":
+                return (
+                  <div className="flex flex-col gap-4 items-center md:items-end">
+                    {RejectionReason && (
+                      <p className="text-sm text-center md:text-right capitalize">
+                        {RejectionReason}
+                      </p>
+                    )}
+
+                    <CustomLink
+                      href="/user-verification"
+                      className={buttonVariants() + " w-fit"}
+                    >
+                      {t("applyAgain")}
+                    </CustomLink>
+                  </div>
+                );
+
+              case "pending":
+              case "resubmitted":
+                return (
+                  <Button type="button" className="cursor-auto">
+                    {t("inReview")}
+                  </Button>
+                );
+              default:
+                return null;
+            }
+          })()}
+        </div>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:border md:py-6 md:px-4 md:rounded">
+        <h1 className="col-span-full text-xl font-medium">
+          {t("personalInfo")}
+        </h1>
+
+        <div className="labelInputCont">
+          <Label htmlFor="name" className="requiredInputLabel">
+            {t("name")}
+          </Label>
+          <Input
+            type="text"
+            id="name"
+            placeholder={t("enterName")}
+            value={formData.name}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="flex flex-colgap-1">
+          <div className="w-1/2 flex flex-col justify-between gap-3">
+            <Label className="font-semibold" htmlFor="notification-mode">
+              {t("notification")}
+            </Label>
+            <Switch
+              className="rtl:[direction:rtl]"
+              id="notification-mode"
+              checked={Number(formData.notification) === 1}
+              onCheckedChange={() => handleSwitchChange("notification")}
+            />
+          </div>
+          <div className="w-1/2 flex flex-col justify-between gap-3">
+            <Label className="font-semibold" htmlFor="showPersonal-mode">
+              {t("showContactInfo")}
+            </Label>
+            <Switch
+              id="showPersonal-mode"
+              checked={Number(formData.show_personal_details) === 1}
+              onCheckedChange={() =>
+                handleSwitchChange("show_personal_details")
+              }
+            />
+          </div>
+        </div>
+
+        <div className="labelInputCont">
+          <Label htmlFor="email" className="requiredInputLabel">
+            {t("email")}
+          </Label>
+          <Input
+            type="email"
+            id="email"
+            placeholder={t("enterEmail")}
+            value={formData.email}
+            onChange={handleChange}
+            readOnly={
+              UserData?.type === "email" || UserData?.type === "google"
+                ? true
+                : false
+            }
+          />
+        </div>
+        <div className="labelInputCont">
+          <Label htmlFor="phone" className="font-semibold">
+            {t("phoneNumber")}
+          </Label>
+          <PhoneInput
+            country={process.env.NEXT_PUBLIC_DEFAULT_COUNTRY}
+            value={`${formData.country_code}${formData.phone}`}
+            onChange={(phone, data) => handlePhoneChange(phone, data)}
+            inputProps={{
+              name: "phone",
+            }}
+            enableLongNumbers
+            disabled={UserData?.type === "phone"}
+          />
+        </div>
+      </div>
+      <div className="md:border md:py-6 md:px-4 md:rounded">
+        <h1 className="col-span-full mb-6 text-xl font-medium">
+          {t("address")}
+        </h1>
+        <div className="labelInputCont">
+          <Label htmlFor="address" className="requiredInputLabel">
+            {t("address")}
+          </Label>
+          <Textarea
+            id="address"
+            name="address"
+            value={formData.address}
+            onChange={handleChange}
+          />
+        </div>
+      </div>
+
+      <Button disabled={isLoading} className="ltr:ml-auto rtl:mr-auto w-fit">
+        {isLoading ?
+          <>
+            <Loader2 className="size-4 animate-spin" />
+            {t("savingChanges")}
+          </>
+          :
+          t("saveChanges")}
+      </Button>
+    </form>
+  );
+};
+
+export default Profile;
diff --git a/components/Profile/ProfileSidebar.jsx b/components/Profile/ProfileSidebar.jsx
new file mode 100644
index 0000000..fa531de
--- /dev/null
+++ b/components/Profile/ProfileSidebar.jsx
@@ -0,0 +1,235 @@
+"use client";
+import { t } from "@/utils";
+import CustomLink from "@/components/Common/CustomLink";
+import { usePathname } from "next/navigation";
+import { BiChat, BiDollarCircle, BiReceipt, BiTrashAlt } from "react-icons/bi";
+import { FiUser } from "react-icons/fi";
+import { IoMdNotificationsOutline } from "react-icons/io";
+import { LiaAdSolid } from "react-icons/lia";
+import { LuHeart } from "react-icons/lu";
+import { MdOutlineRateReview, MdWorkOutline } from "react-icons/md";
+import { RiLogoutCircleLine } from "react-icons/ri";
+import FirebaseData from "@/utils/Firebase";
+import { logoutSuccess, userSignUpData } from "@/redux/reducer/authSlice";
+import { toast } from "sonner";
+import { useState } from "react";
+import { deleteUserApi, logoutApi } from "@/utils/api";
+import { deleteUser, getAuth } from "firebase/auth";
+import ReusableAlertDialog from "../Common/ReusableAlertDialog";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import { useSelector } from "react-redux";
+import { useNavigate } from "../Common/useNavigate";
+import DeleteAccountVerifyOtpModal from "../Auth/DeleteAccountVerifyOtpModal";
+import { getOtpServiceProvider } from "@/redux/reducer/settingSlice";
+
+const ProfileSidebar = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const { navigate } = useNavigate();
+  const pathname = usePathname();
+  const userData = useSelector(userSignUpData);
+  const otp_service_provider = useSelector(getOtpServiceProvider);
+  const [IsLogout, setIsLogout] = useState(false);
+  const [IsDeleting, setIsDeleting] = useState(false);
+  const [IsDeleteAccount, setIsDeleteAccount] = useState(false);
+  const [IsLoggingOut, setIsLoggingOut] = useState(false);
+  const [IsVerifyOtpBeforeDelete, setIsVerifyOtpBeforeDelete] = useState(false);
+  const { signOut } = FirebaseData();
+
+  const handleLogout = async () => {
+    try {
+      setIsLoggingOut(true);
+      await signOut();
+      const res = await logoutApi.logoutApi({
+        ...(userData?.fcm_id && { fcm_token: userData?.fcm_id }),
+      });
+      if (res?.data?.error === false) {
+        logoutSuccess();
+        toast.success(t("signOutSuccess"));
+        setIsLogout(false);
+        if (pathname !== "/") {
+          navigate("/");
+        }
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log("Failed to logout", error);
+    } finally {
+      setIsLoggingOut(false);
+    }
+  };
+
+
+  const handleDeleteAcc = async () => {
+    try {
+      setIsDeleting(true);
+      const auth = getAuth();
+      const user = auth.currentUser;
+      const isMobileLogin = userData?.type == "phone";
+      const needsOtpVerification = isMobileLogin && !user && otp_service_provider === "firebase";
+      if (user) {
+        await deleteUser(user);
+      } else if (needsOtpVerification) {
+        setIsDeleteAccount(false);
+        setIsVerifyOtpBeforeDelete(true);
+        return;
+      }
+      await deleteUserApi.deleteUser();
+      logoutSuccess();
+      toast.success(t("userDeleteSuccess"));
+      setIsDeleteAccount(false);
+      if (pathname !== "/") {
+        navigate("/");
+      }
+    } catch (error) {
+      console.error("Error deleting user:", error.message);
+      const isMobileLogin = userData?.type === "phone";
+      if (error.code === "auth/requires-recent-login") {
+        if (isMobileLogin) {
+          setIsDeleteAccount(false);
+          setIsVerifyOtpBeforeDelete(true);
+          return;
+        }
+        logoutSuccess();
+        toast.error(t("deletePop"));
+        setIsDeleteAccount(false);
+      }
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="flex flex-col gap-4 py-6 px-4 h-full">
+        <CustomLink
+          href="/profile"
+          className={`flex items-center gap-1 py-2 px-4 ${pathname === "/profile" ? "profileActiveTab" : ""
+            }`}
+        >
+          <FiUser size={24} />
+          <span>{t("profile")}</span>
+        </CustomLink>
+        <CustomLink
+          href="/notifications"
+          className={`flex items-center gap-1 py-2 px-4 ${pathname === "/notifications" ? "profileActiveTab" : ""
+            }`}
+        >
+          <IoMdNotificationsOutline size={24} />
+          <span>{t("notifications")}</span>
+        </CustomLink>
+        <CustomLink
+          href="/chat"
+          className={`flex items-center gap-1 py-2 px-4 ${pathname === "/chat" ? "profileActiveTab" : ""
+            }`}
+        >
+          <BiChat size={24} />
+          <span>{t("chat")}</span>
+        </CustomLink>
+        <CustomLink
+          href="/user-subscription"
+          className={`flex items-center gap-1 py-2 px-4 ${pathname === "/user-subscription" ? "profileActiveTab" : ""
+            }`}
+        >
+          <BiDollarCircle size={24} />
+          <span>{t("subscription")}</span>
+        </CustomLink>
+        <CustomLink
+          href="/my-ads"
+          className={`flex items-center gap-1 py-2 px-4 ${pathname === "/my-ads" ? "profileActiveTab" : ""
+            }`}
+        >
+          <LiaAdSolid size={24} />
+          <span>{t("myAds")}</span>
+        </CustomLink>
+        <CustomLink
+          href="/favorites"
+          className={`flex items-center gap-1 py-2 px-4 ${pathname === "/favorites" ? "profileActiveTab" : ""
+            }`}
+        >
+          <LuHeart size={24} />
+          <span>{t("favorites")}</span>
+        </CustomLink>
+        <CustomLink
+          href="/transactions"
+          className={`flex items-center gap-1 py-2 px-4 ${pathname === "/transactions" ? "profileActiveTab" : ""
+            }`}
+        >
+          <BiReceipt size={24} />
+          <span>{t("transaction")}</span>
+        </CustomLink>
+        <CustomLink
+          href="/reviews"
+          className={`flex items-center gap-1 py-2 px-4 ${pathname === "/reviews" ? "profileActiveTab" : ""
+            }`}
+        >
+          <MdOutlineRateReview size={24} />
+          <span>{t("myReviews")}</span>
+        </CustomLink>
+        <CustomLink
+          href="/job-applications"
+          className={`flex items-center gap-1 py-2 px-4 ${pathname === "/job-applications" ? "profileActiveTab" : ""
+            }`}
+        >
+          <MdWorkOutline size={24} />
+          <span>{t("jobApplications")}</span>
+        </CustomLink>
+
+        <button
+          onClick={() => setIsLogout(true)}
+          className="flex items-center gap-1 py-2 px-4"
+        >
+          <RiLogoutCircleLine size={24} />
+          <span>{t("signOut")}</span>
+        </button>
+        <button
+          onClick={() => setIsDeleteAccount(true)}
+          className="flex items-center gap-1 py-2 px-4 text-destructive"
+        >
+          <BiTrashAlt size={24} />
+          <span>{t("deleteAccount")}</span>
+        </button>
+      </div>
+
+      {/* Logout Alert Dialog */}
+      <ReusableAlertDialog
+        open={IsLogout}
+        onCancel={() => setIsLogout(false)}
+        onConfirm={handleLogout}
+        title={t("confirmLogout")}
+        description={t("areYouSureToLogout")}
+        cancelText={t("cancel")}
+        confirmText={t("yes")}
+        confirmDisabled={IsLoggingOut}
+      />
+
+      {/* Delete Account Alert Dialog */}
+      <ReusableAlertDialog
+        open={IsDeleteAccount}
+        onCancel={() => setIsDeleteAccount(false)}
+        onConfirm={handleDeleteAcc}
+        title={t("areYouSure")}
+        description={
+          <ul className="list-disc list-inside mt-2">
+            <li>{t("adsAndTransactionWillBeDeleted")}</li>
+            <li>{t("accountsDetailsWillNotRecovered")}</li>
+            <li>{t("subWillBeCancelled")}</li>
+            <li>{t("savedMesgWillBeLost")}</li>
+          </ul>
+        }
+        cancelText={t("cancel")}
+        confirmText={t("yes")}
+        confirmDisabled={IsDeleting}
+      />
+      <DeleteAccountVerifyOtpModal
+        isOpen={IsVerifyOtpBeforeDelete}
+        setIsOpen={setIsVerifyOtpBeforeDelete}
+        key={IsVerifyOtpBeforeDelete}
+        pathname={pathname}
+        navigate={navigate}
+      />
+    </>
+  );
+};
+
+export default ProfileSidebar;
diff --git a/components/Skeletons/AdListingPublicPlanCardSkeleton.jsx b/components/Skeletons/AdListingPublicPlanCardSkeleton.jsx
new file mode 100644
index 0000000..f2a69a0
--- /dev/null
+++ b/components/Skeletons/AdListingPublicPlanCardSkeleton.jsx
@@ -0,0 +1,50 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+const AdListingPublicPlanCardSkeleton = () => {
+  return (
+    <>
+      <Skeleton className="w-1/5 h-4 mt-8 mb-4" />
+      <div className="flex gap-4 overflow-x-auto scrollbar-none">
+        {Array.from({ length: 4 }).map((_, index) => (
+          <div
+            key={index}
+            className="rounded-lg p-8 shadow-sm border bg-white basis-[90%] sm:basis-[75%] md:basis-[55%] lg:basis-[45%] xl:basis-[35%] 2xl:basis-[30%] flex-shrink-0 first:pl-4"
+          >
+            {/* Card Header */}
+            <div className="flex items-center gap-4">
+              <div className="p-1 md:p-4 rounded-lg">
+                <Skeleton className="w-20 h-20 md:w-24 md:h-24 rounded-full" />
+              </div>
+              <div className="flex flex-col gap-2 overflow-hidden flex-1">
+                <Skeleton className="h-6 w-3/4 mb-1 rounded" /> {/* Title */}
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-6 w-16 rounded" /> {/* Price */}
+                  <Skeleton className="h-6 w-10 rounded" />{" "}
+                  {/* Strikethrough price */}
+                </div>
+              </div>
+            </div>
+            {/* Divider */}
+            <div className="my-6">
+              <Skeleton className="h-[2px] w-full" />
+            </div>
+            {/* Feature List Skeleton */}
+            <div className="space-y-2 mb-2 h-[250px] max-h-[250px] overflow-y-auto p-4 md:p-0 flex flex-col">
+              {[...Array(5)].map((_, i) => (
+                <div key={i} className="flex items-center gap-3">
+                  <Skeleton className="h-5 w-5 rounded-full" />
+                  <Skeleton className="h-4 w-3/4 rounded" />
+                </div>
+              ))}
+            </div>
+            {/* Button Skeleton */}
+            <div className="flex items-center justify-center h-12 max-h-12 p-4 md:p-0">
+              <Skeleton className="h-10 w-full rounded-lg" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+export default AdListingPublicPlanCardSkeleton;
diff --git a/components/Skeletons/AddListingPlanCardSkeleton.jsx b/components/Skeletons/AddListingPlanCardSkeleton.jsx
new file mode 100644
index 0000000..cc119d9
--- /dev/null
+++ b/components/Skeletons/AddListingPlanCardSkeleton.jsx
@@ -0,0 +1,50 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+const AddListingPlanCardSkeleton = () => {
+  return (
+    <>
+      <Skeleton className="w-1/5 h-4 mt-8 mb-4" />
+      <div className="flex gap-4 overflow-x-auto scrollbar-none">
+        {Array.from({ length: 4 }).map((_, index) => (
+          <div
+            key={index}
+            className="rounded-lg p-8 shadow-sm border bg-white basis-[100%] sm:basis-3/4 md:basis-1/2 lg:basis-[66.66%] xl:basis-[45%] flex-shrink-0 first:pl-4"
+          >
+            {/* Card Header */}
+            <div className="flex items-center gap-4">
+              <div className="p-1 md:p-4 rounded-lg">
+                <Skeleton className="w-20 h-20 md:w-24 md:h-24 rounded-full" />
+              </div>
+              <div className="flex flex-col gap-2 overflow-hidden flex-1">
+                <Skeleton className="h-6 w-3/4 mb-1 rounded" /> {/* Title */}
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-6 w-16 rounded" /> {/* Price */}
+                  <Skeleton className="h-6 w-10 rounded" />{" "}
+                  {/* Strikethrough price */}
+                </div>
+              </div>
+            </div>
+            {/* Divider */}
+            <div className="my-6">
+              <Skeleton className="h-[2px] w-full" />
+            </div>
+            {/* Feature List Skeleton */}
+            <div className="space-y-2 mb-2 h-[250px] max-h-[250px] overflow-y-auto p-4 md:p-0 flex flex-col">
+              {[...Array(5)].map((_, i) => (
+                <div key={i} className="flex items-center gap-3">
+                  <Skeleton className="h-5 w-5 rounded-full" />
+                  <Skeleton className="h-4 w-3/4 rounded" />
+                </div>
+              ))}
+            </div>
+            {/* Button Skeleton */}
+            <div className="flex items-center justify-center h-12 max-h-12 p-4 md:p-0">
+              <Skeleton className="h-10 w-full rounded-lg" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+export default AddListingPlanCardSkeleton;
diff --git a/components/Skeletons/BlogCardSkeleton.jsx b/components/Skeletons/BlogCardSkeleton.jsx
new file mode 100644
index 0000000..11738c5
--- /dev/null
+++ b/components/Skeletons/BlogCardSkeleton.jsx
@@ -0,0 +1,15 @@
+import { Skeleton } from "../ui/skeleton";
+
+const BlogCardSkeleton = () => {
+  return (
+    <div className="p-4 rounded-3xl flex flex-col gap-4 border h-100 bg-white h-full">
+      <Skeleton className="w-full aspect-[388/200]" />
+      <Skeleton className="w-2/3 h-4" />
+      <Skeleton className="w-full h-4" />
+      <Skeleton className="w-full h-4" />
+      <Skeleton className="w-1/3 h-4" />
+    </div>
+  );
+};
+
+export default BlogCardSkeleton;
diff --git a/components/Skeletons/JobApplicationSkeleton.jsx b/components/Skeletons/JobApplicationSkeleton.jsx
new file mode 100644
index 0000000..79375c5
--- /dev/null
+++ b/components/Skeletons/JobApplicationSkeleton.jsx
@@ -0,0 +1,63 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+const JobApplicationSkeleton = ({ count = 5 }) => {
+  return (
+    <div className="overflow-x-auto">
+      <div className="min-w-full overflow-hidden border rounded-md">
+        <Table>
+          <TableHeader className="bg-muted">
+            <TableRow className="text-xs sm:text-sm">
+              <TableHead>
+                <div className="h-5 w-[60%] bg-gray-200 rounded animate-pulse"></div>
+              </TableHead>
+              <TableHead>
+                <div className="h-5 w-[70%] bg-gray-200 rounded animate-pulse"></div>
+              </TableHead>
+              <TableHead>
+                <div className="h-5 w-[50%] bg-gray-200 rounded animate-pulse"></div>
+              </TableHead>
+              <TableHead>
+                <div className="h-5 w-[70%] bg-gray-200 rounded animate-pulse"></div>
+              </TableHead>
+              <TableHead>
+                <div className="h-5 w-[60%] bg-gray-200 rounded animate-pulse"></div>
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody className="text-xs sm:text-sm">
+            {Array(count)
+              .fill(0)
+              .map((_, index) => (
+                <TableRow key={index} className="hover:bg-muted">
+                  <TableCell>
+                    <div className="h-4 w-[85%] bg-gray-200 rounded animate-pulse"></div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="h-4 w-[80%] bg-gray-200 rounded animate-pulse"></div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="h-6 w-[75%] bg-gray-200 rounded animate-pulse"></div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="h-4 w-[90%] bg-gray-200 rounded animate-pulse"></div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="h-4 w-[70%] bg-gray-200 rounded animate-pulse"></div>
+                  </TableCell>
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+};
+
+export default JobApplicationSkeleton;
diff --git a/components/Skeletons/TransactionSkeleton.jsx b/components/Skeletons/TransactionSkeleton.jsx
new file mode 100644
index 0000000..332b216
--- /dev/null
+++ b/components/Skeletons/TransactionSkeleton.jsx
@@ -0,0 +1,67 @@
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+
+const TransactionSkeleton = ({ count = 5 }) => {
+    return (
+        <div className="overflow-x-auto">
+            <div className="min-w-full overflow-hidden border rounded-md">
+                <Table>
+                    <TableHeader className='bg-muted'>
+                        <TableRow className='text-xs sm:text-sm'>
+                            <TableHead>
+                                <div className="h-5 w-[50%] bg-gray-200 rounded animate-pulse"></div>
+                            </TableHead>
+                            <TableHead>
+                                <div className="h-5 w-[70%] bg-gray-200 rounded animate-pulse"></div>
+                            </TableHead>
+                            <TableHead>
+                                <div className="h-5 w-[60%] bg-gray-200 rounded animate-pulse"></div>
+                            </TableHead>
+                            <TableHead>
+                                <div className="h-5 w-[70%] bg-gray-200 rounded animate-pulse"></div>
+                            </TableHead>
+                            <TableHead>
+                                <div className="h-5 w-[60%] bg-gray-200 rounded animate-pulse"></div>
+                            </TableHead>
+                            <TableHead>
+                                <div className="h-5 w-[70%] bg-gray-200 rounded animate-pulse"></div>
+                            </TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody className='text-xs sm:text-sm'>
+                        {Array(count).fill(0).map((_, index) => (
+                            <TableRow key={index} className="hover:bg-muted">
+                                <TableCell>
+                                    <div className="h-4 w-[80%] bg-gray-200 rounded animate-pulse"></div>
+                                </TableCell>
+                                <TableCell>
+                                    <div className="h-4 w-[85%] bg-gray-200 rounded animate-pulse"></div>
+                                </TableCell>
+                                <TableCell>
+                                    <div className="h-4 w-[90%] bg-gray-200 rounded animate-pulse"></div>
+                                </TableCell>
+                                <TableCell>
+                                    <div className="h-4 w-[80%] bg-gray-200 rounded animate-pulse"></div>
+                                </TableCell>
+                                <TableCell>
+                                    <div className="h-4 w-[70%] bg-gray-200 rounded animate-pulse"></div>
+                                </TableCell>
+                                <TableCell>
+                                    <div className="h-6 w-[75%] bg-gray-200 rounded animate-pulse"></div>
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+        </div>
+    );
+};
+
+export default TransactionSkeleton; 
\ No newline at end of file
diff --git a/components/User/ReportModal.jsx b/components/User/ReportModal.jsx
new file mode 100644
index 0000000..6c980ff
--- /dev/null
+++ b/components/User/ReportModal.jsx
@@ -0,0 +1,148 @@
+import { addReportReasonApi, getReportReasonsApi } from "@/utils/api";
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { toast } from "sonner";
+import { t } from "@/utils";
+
+const ReportModal = ({
+  productDetails,
+  setProductDetails,
+  isReportModalOpen,
+  setIsReportModalOpen,
+}) => {
+  const [reasons, setReasons] = useState([]);
+  const [selectedReason, setSelectedReason] = useState(null);
+  const [customReason, setCustomReason] = useState("");
+  const [IsSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    fetchReportData();
+  }, []);
+
+  const fetchReportData = async () => {
+    try {
+      const response = await getReportReasonsApi.reportReasons();
+      const { data } = response?.data;
+      setReasons(data?.data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleReport = async (e) => {
+    e.preventDefault();
+
+    if (!selectedReason) {
+      toast.error(t("pleaseSelectReason"));
+      return;
+    }
+
+    // Validation: Ensure custom reason is provided if "Other" is selected
+    if (selectedReason === "other" && !customReason.trim()) {
+      toast.error(t("pleaseProvideReason"));
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      const response = await addReportReasonApi.addReport({
+        item_id: productDetails?.id,
+        report_reason_id: selectedReason === "other" ? "" : selectedReason,
+        other_message: customReason,
+      });
+      if (response.data?.error === true) {
+        toast.error(response?.data?.message);
+      } else {
+        setProductDetails((prev) => ({ ...prev, is_already_reported: true }));
+        toast.success(response?.data?.message);
+        handleClose();
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = () => {
+    setIsReportModalOpen(false);
+    setSelectedReason(null);
+    setCustomReason("");
+  };
+
+  return (
+    <Dialog open={isReportModalOpen} onOpenChange={handleClose}>
+      <DialogContent onInteractOutside={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle className="text-xl font-semibold">
+            {t("report")}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-2">
+          {/* Pre-defined reasons */}
+          {reasons.map((reason) => (
+            <button
+              key={reason.id}
+              onClick={() => setSelectedReason(reason.id)}
+              className={`w-full text-base ltr:text-left rtl:text-right p-3 rounded-lg border transition-colors ${
+                selectedReason === reason.id
+                  ? "bg-primary text-white"
+                  : "hover:bg-gray-50 text-gray-700"
+              }`}
+            >
+              {reason.translated_reason || reason.reason}
+            </button>
+          ))}
+
+          {/* Other reason option */}
+          <div className="flex flex-col gap-2">
+            <button
+              onClick={() => setSelectedReason("other")}
+              className={`w-full border ltr:text-left rtl:text-right p-3 rounded-lg transition-colors ${
+                selectedReason === "other"
+                  ? "bg-primary text-white"
+                  : "hover:bg-gray-50 text-gray-700"
+              }`}
+            >
+              {t("other")}
+            </button>
+            {selectedReason === "other" && (
+              <textarea
+                value={customReason}
+                onChange={(e) => setCustomReason(e.target.value)}
+                placeholder={t("writereason")}
+                className="w-full p-2 text-sm border rounded-md focus:outline-none focus:ring-1 focus:ring-primary mt-2"
+                rows={3}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Submit button */}
+        <div className="flex gap-2 flex-col md:flex-row">
+          <button
+            className="w-full py-2 px-4 text-white  text-base font-medium  bg-[#000] rounded-md hover:bg-primary/90 transition-colors"
+            onClick={handleClose}
+          >
+            {t("cancel")}
+          </button>
+          <button
+            className="w-full py-2 px-4 text-base font-medium  text-white  bg-primary rounded-md hover:bg-primary/90 transition-colors"
+            onClick={handleReport}
+            disabled={!selectedReason || IsSubmitting}
+          >
+            {IsSubmitting ? t("submitting") : t("submit")}
+          </button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ReportModal;
diff --git a/components/ui/accordion.jsx b/components/ui/accordion.jsx
new file mode 100644
index 0000000..fd50e4d
--- /dev/null
+++ b/components/ui/accordion.jsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown, ChevronUp, MinusCircle, PlusCircle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all group",
+        className
+      )}
+      {...props}>
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 group-data-[state=closed]:block group-data-[state=open]:hidden" />
+      <ChevronUp className="h-4 w-4 shrink-0 transition-transform duration-200 group-data-[state=closed]:hidden group-data-[state=open]:block" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}>
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/components/ui/alert-dialog.jsx b/components/ui/alert-dialog.jsx
new file mode 100644
index 0000000..b48d2a8
--- /dev/null
+++ b/components/ui/alert-dialog.jsx
@@ -0,0 +1,99 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref} />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props} />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-2 text-center ltr:sm:text-left rtl:sm:text-right", className)}
+    {...props} />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2", className)}
+    {...props} />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props} />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/components/ui/alert.jsx b/components/ui/alert.jsx
new file mode 100644
index 0000000..b2601a3
--- /dev/null
+++ b/components/ui/alert.jsx
@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props} />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props} />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props} />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/components/ui/badge.jsx b/components/ui/badge.jsx
new file mode 100644
index 0000000..36b7f6f
--- /dev/null
+++ b/components/ui/badge.jsx
@@ -0,0 +1,34 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  ...props
+}) {
+  return (<div className={cn(badgeVariants({ variant }), className)} {...props} />);
+}
+
+export { Badge, badgeVariants }
diff --git a/components/ui/breadcrumb.jsx b/components/ui/breadcrumb.jsx
new file mode 100644
index 0000000..584e635
--- /dev/null
+++ b/components/ui/breadcrumb.jsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef(
+  ({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />
+)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props} />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props} />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-primary", className)}
+      {...props} />
+  );
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props} />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}>
+    {children ?? <ChevronRight className="rtl:scale-x-[-1]" />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}>
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/components/ui/button.jsx b/components/ui/button.jsx
new file mode 100644
index 0000000..6ac12a5
--- /dev/null
+++ b/components/ui/button.jsx
@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/components/ui/card.jsx b/components/ui/card.jsx
new file mode 100644
index 0000000..df9f92a
--- /dev/null
+++ b/components/ui/card.jsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+    {...props} />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props} />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+    {...props} />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props} />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/components/ui/carousel.jsx b/components/ui/carousel.jsx
new file mode 100644
index 0000000..ddc3d45
--- /dev/null
+++ b/components/ui/carousel.jsx
@@ -0,0 +1,226 @@
+"use client";
+import * as React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+const CarouselContext = React.createContext(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext]
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          // orientation === "horizontal"
+          //   ? "-left-12 top-1/2 -translate-y-1/2"
+          //   : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeft className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  }
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          // orientation === "horizontal"
+          //   ? "-right-12 top-1/2 -translate-y-1/2"
+          //   : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRight className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  }
+);
+CarouselNext.displayName = "CarouselNext";
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};
diff --git a/components/ui/checkbox.jsx b/components/ui/checkbox.jsx
new file mode 100644
index 0000000..dc639bc
--- /dev/null
+++ b/components/ui/checkbox.jsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}>
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/components/ui/collapsible.jsx b/components/ui/collapsible.jsx
new file mode 100644
index 0000000..9fa4894
--- /dev/null
+++ b/components/ui/collapsible.jsx
@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/components/ui/command.jsx b/components/ui/command.jsx
new file mode 100644
index 0000000..5eda899
--- /dev/null
+++ b/components/ui/command.jsx
@@ -0,0 +1,135 @@
+"use client";
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+const Command = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef(
+  ({ className, wrapperClassName, ...props }, ref) => (
+    <div
+      className={cn(
+        "flex items-center border-b px-3",
+        wrapperClassName // 👈 override border here
+      )}
+      cmdk-input-wrapper=""
+    >
+      <Search className="ltr:mr-2 rtl:ml-2 h-4 w-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        ref={ref}
+        className={cn(
+          "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+);
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/components/ui/context-menu.jsx b/components/ui/context-menu.jsx
new file mode 100644
index 0000000..9829ee8
--- /dev/null
+++ b/components/ui/context-menu.jsx
@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}>
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+      className
+    )}
+    {...props} />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+        className
+      )}
+      {...props} />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props} />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props} />
+  );
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/components/ui/dialog.jsx b/components/ui/dialog.jsx
new file mode 100644
index 0000000..30f366e
--- /dev/null
+++ b/components/ui/dialog.jsx
@@ -0,0 +1,106 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef(
+  ({ className, children, ...props }, ref) => (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[95%] sm:max-w-[642px] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background py-[20px] p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg max-h-[90vh] overflow-y-auto",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute ltr:right-4 top-4 rtl:left-4 p-2 bg-muted rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <X className="h-5 w-5" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left rtl:text-right",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end gap-2",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight ltr:pr-11 rtl:pl-11",
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/components/ui/drawer.jsx b/components/ui/drawer.jsx
new file mode 100644
index 0000000..6d21646
--- /dev/null
+++ b/components/ui/drawer.jsx
@@ -0,0 +1,92 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props} />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}>
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props} />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props} />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/components/ui/dropdown-menu.jsx b/components/ui/dropdown-menu.jsx
new file mode 100644
index 0000000..c8bca5c
--- /dev/null
+++ b/components/ui/dropdown-menu.jsx
@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}>
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props} />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rtl:[direction:rtl]",
+        className
+      )}
+      {...props} />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props} />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props} />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return (
+    (<span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props} />)
+  );
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/components/ui/input.jsx b/components/ui/input.jsx
new file mode 100644
index 0000000..87aed4c
--- /dev/null
+++ b/components/ui/input.jsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+  return (
+    (<input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded border bg-background px-4 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props} />)
+  );
+})
+Input.displayName = "Input"
+
+export { Input }
diff --git a/components/ui/label.jsx b/components/ui/label.jsx
new file mode 100644
index 0000000..6f9ff47
--- /dev/null
+++ b/components/ui/label.jsx
@@ -0,0 +1,22 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), "font-semibold", className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/components/ui/navigation-menu.jsx b/components/ui/navigation-menu.jsx
new file mode 100644
index 0000000..77dc076
--- /dev/null
+++ b/components/ui/navigation-menu.jsx
@@ -0,0 +1,104 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-20 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}>
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1 rtl:space-x-reverse",
+      className
+    )}
+    {...props} />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+)
+
+const NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group flex gap-1 rtl:flex-row-reverse", className)}
+    {...props}>
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true" />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+      className
+    )}
+    {...props} />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 rtl:left-auto rtl:right-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props} />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}>
+    <div
+      className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
diff --git a/components/ui/pagination.jsx b/components/ui/pagination.jsx
new file mode 100644
index 0000000..714561c
--- /dev/null
+++ b/components/ui/pagination.jsx
@@ -0,0 +1,100 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button";
+
+const Pagination = ({
+  className,
+  ...props
+}) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props} />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row flex-wrap items-center gap-1", className)}
+    {...props} />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(buttonVariants({
+      variant: isActive ? "outline" : "ghost",
+      size,
+    }), className)}
+    {...props} />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}>
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}>
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}>
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/components/ui/popover.jsx b/components/ui/popover.jsx
new file mode 100644
index 0000000..003df7e
--- /dev/null
+++ b/components/ui/popover.jsx
@@ -0,0 +1,27 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+        className
+      )}
+      {...props} />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/components/ui/progress.jsx b/components/ui/progress.jsx
new file mode 100644
index 0000000..e455fea
--- /dev/null
+++ b/components/ui/progress.jsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => {
+  const percentage = (value || 0) / 100;
+
+  return (
+    <ProgressPrimitive.Root
+      ref={ref}
+      className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        className={cn(
+          "h-full w-full flex-1 bg-[#FA6E53] transition-transform duration-300",
+          "ltr:origin-left rtl:origin-right"
+        )}
+        style={{ transform: `scaleX(${percentage})` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+});
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/components/ui/radio-group.jsx b/components/ui/radio-group.jsx
new file mode 100644
index 0000000..5a31129
--- /dev/null
+++ b/components/ui/radio-group.jsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+  return (<RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />);
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}>
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
diff --git a/components/ui/scroll-area.jsx b/components/ui/scroll-area.jsx
new file mode 100644
index 0000000..65156c0
--- /dev/null
+++ b/components/ui/scroll-area.jsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}>
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/components/ui/select.jsx b/components/ui/select.jsx
new file mode 100644
index 0000000..ef299d0
--- /dev/null
+++ b/components/ui/select.jsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate",
+      className
+    )}
+    {...props}>
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}>
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}>
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        position === "popper" &&
+        "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}>
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn("p-1", position === "popper" &&
+          "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]")}>
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props} />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ltr:pl-8 rtl:pr-8 ltr:pr-2 rtl:pl-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute ltr:left-2 rtl:right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props} />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/components/ui/separator.jsx b/components/ui/separator.jsx
new file mode 100644
index 0000000..c277af8
--- /dev/null
+++ b/components/ui/separator.jsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef((
+  { className, orientation = "horizontal", decorative = true, ...props },
+  ref
+) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    )}
+    {...props} />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/components/ui/sheet.jsx b/components/ui/sheet.jsx
new file mode 100644
index 0000000..27e7dc0
--- /dev/null
+++ b/components/ui/sheet.jsx
@@ -0,0 +1,110 @@
+"use client";
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref} />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+      {children}
+      <SheetPrimitive.Close
+        
+        className="absolute ltr:right-4 rtl:left-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+    {...props} />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props} />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/components/ui/skeleton.jsx b/components/ui/skeleton.jsx
new file mode 100644
index 0000000..d398830
--- /dev/null
+++ b/components/ui/skeleton.jsx
@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}) {
+  return (<div className={cn("animate-pulse rounded-md bg-gray-300", className)} {...props} />);
+}
+
+export { Skeleton }
diff --git a/components/ui/slider.jsx b/components/ui/slider.jsx
new file mode 100644
index 0000000..7b071bc
--- /dev/null
+++ b/components/ui/slider.jsx
@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/utils";
+
+const Slider = React.forwardRef(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
diff --git a/components/ui/sonner.jsx b/components/ui/sonner.jsx
new file mode 100644
index 0000000..bd51a92
--- /dev/null
+++ b/components/ui/sonner.jsx
@@ -0,0 +1,29 @@
+"use client";
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+const Toaster = ({
+  ...props
+}) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    (<Sonner
+      theme={theme}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props} />)
+  );
+}
+
+export { Toaster }
diff --git a/components/ui/switch.jsx b/components/ui/switch.jsx
new file mode 100644
index 0000000..c79c7dd
--- /dev/null
+++ b/components/ui/switch.jsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}>
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 rtl:data-[state=checked]:-translate-x-5 rtl:data-[state=unchecked]:translate-x-0"
+      )} />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/components/ui/table.jsx b/components/ui/table.jsx
new file mode 100644
index 0000000..86f6581
--- /dev/null
+++ b/components/ui/table.jsx
@@ -0,0 +1,83 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props} />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props} />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+    {...props} />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props} />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-center align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props} />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props} />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props} />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/components/ui/tabs.jsx b/components/ui/tabs.jsx
new file mode 100644
index 0000000..c8b3590
--- /dev/null
+++ b/components/ui/tabs.jsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props} />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-white data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props} />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props} />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/components/ui/textarea.jsx b/components/ui/textarea.jsx
new file mode 100644
index 0000000..68e084d
--- /dev/null
+++ b/components/ui/textarea.jsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    (<textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props} />)
+  );
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/components/ui/tooltip.jsx b/components/ui/tooltip.jsx
new file mode 100644
index 0000000..84147e0
--- /dev/null
+++ b/components/ui/tooltip.jsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props} />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/install.sh b/install.sh
new file mode 100644
index 0000000..be8146d
--- /dev/null
+++ b/install.sh
@@ -0,0 +1,85 @@
+#!/bin/bash
+
+set -e
+
+# Function to display status messages
+status_message() {
+    echo "==== $1 ===="
+}
+
+# Update system and install curl
+# status_message "Updating system and installing curl"
+# sudo apt update && sudo apt install -y curl
+
+# Install NVM
+
+# if [ ! -f nvm.sh ]; then
+  status_message "Installing NVM"
+  wget -O nvm.sh https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
+
+  # Load NVM
+  export NVM_DIR="$HOME/.nvm"
+  [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+
+  # Install Node.js
+  status_message "Installing Node.js"
+  nvm install 20
+# else
+#   nvm use 20
+# fi
+
+# Verify Node.js installation
+node -v
+
+if ! pm2 -v  ; then
+  # Install PM2 globally
+  status_message "Installing PM2"
+  npm install -g pm2
+fi
+
+# Function to find an available port
+find_available_port() {
+    for port in $(seq 8003 9001); do
+        if ! sudo lsof -i :$port > /dev/null 2>&1; then
+            echo $port
+            return 0
+        fi
+    done
+    echo "No available ports found between 8001 and 9001" >&2
+    return 1
+}
+
+# Find an available port
+status_message "Finding an available port"
+PORT=$(find_available_port)
+if [ $? -ne 0 ]; then
+    exit 1
+fi
+echo "Found available port: $PORT"
+
+# Update .htaccess file
+status_message "Updating .htaccess file"
+sed -i "s/http:\/\/127\.0\.0\.1:[0-9]*\//http:\/\/127.0.0.1:$PORT\//g" .htaccess
+
+# Update package.json file
+status_message "Updating package.json file"
+sed -i "s/NODE_PORT=*[0-9]*/NODE_PORT=$PORT/" package.json
+
+# Install project dependencies
+status_message "Installing project dependencies"
+npm install --loglevel verbose
+
+
+# Build the project
+status_message "Building the project"
+npm run build
+
+# Start the project with PM2
+status_message "Starting the project with PM2"
+pm2 start npm --name "eClassify" -- start
+
+# Display PM2 processes
+status_message "Displaying PM2 processes"
+pm2 ls
+
+status_message "Installation and deployment complete!"
\ No newline at end of file
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..0fd28d3
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./*"
+      ],
+      "@/components/*": [
+        "./components/*"
+      ],
+      "@/utils/*": [
+        "./utils/*"
+      ],
+      "@/redux/*": [
+        "./redux/*"
+      ],
+      "@/app/*": [
+        "./app/*"
+      ],
+      "@/lib/*": [
+        "./lib/*"
+      ],
+      "@/public/*": [
+        "./public/*"
+      ]
+    }
+  },
+  "include": [
+    "./**/*.js",
+    "./**/*.jsx",
+    "./**/*.ts",
+    "./**/*.tsx",
+    "components/Layout"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/lib/constants.js b/lib/constants.js
new file mode 100644
index 0000000..cecdf19
--- /dev/null
+++ b/lib/constants.js
@@ -0,0 +1,5 @@
+export const SEO_REVALIDATE_SECONDS =
+  (Number(process.env.NEXT_PUBLIC_SEO_REVALIDATE_MINUTES) || 60) * 60;
+
+
+export const SITEMAP_REVALIDATE_SECONDS = 604800;
\ No newline at end of file
diff --git a/lib/utils.js b/lib/utils.js
new file mode 100644
index 0000000..b652125
--- /dev/null
+++ b/lib/utils.js
@@ -0,0 +1,8 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+
diff --git a/next.config.mjs b/next.config.mjs
new file mode 100644
index 0000000..043cc16
--- /dev/null
+++ b/next.config.mjs
@@ -0,0 +1,18 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: false,
+  htmlLimitedBots: /.*/,
+  images: {
+    unoptimized: true,
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "eclassify.thewrteam.in",
+        port: "", // You can leave this empty if there is no specific port
+        pathname: "/**",
+      },
+    ],
+  },
+};
+
+export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..7aebb19
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,9913 @@
+{
+  "name": "eclassify_tailwind",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "eclassify_tailwind",
+      "version": "0.1.0",
+      "dependencies": {
+        "@radix-ui/react-accordion": "^1.2.11",
+        "@radix-ui/react-alert-dialog": "^1.1.14",
+        "@radix-ui/react-checkbox": "^1.3.2",
+        "@radix-ui/react-collapsible": "^1.1.11",
+        "@radix-ui/react-context-menu": "^2.2.16",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.15",
+        "@radix-ui/react-label": "^2.1.7",
+        "@radix-ui/react-navigation-menu": "^1.2.13",
+        "@radix-ui/react-popover": "^1.1.14",
+        "@radix-ui/react-progress": "^1.1.7",
+        "@radix-ui/react-radio-group": "^1.3.7",
+        "@radix-ui/react-scroll-area": "^1.2.9",
+        "@radix-ui/react-select": "^2.2.5",
+        "@radix-ui/react-separator": "^1.1.7",
+        "@radix-ui/react-slider": "^1.3.5",
+        "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-switch": "^1.2.5",
+        "@radix-ui/react-tabs": "^1.1.13",
+        "@radix-ui/react-toast": "^1.2.14",
+        "@radix-ui/react-tooltip": "^1.2.7",
+        "@react-google-maps/api": "^2.20.7",
+        "@reduxjs/toolkit": "^2.8.2",
+        "@stripe/react-stripe-js": "^3.7.0",
+        "@stripe/stripe-js": "^6.1.0",
+        "axios": "^1.10.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
+        "embla-carousel-autoplay": "^8.6.0",
+        "embla-carousel-react": "^8.6.0",
+        "firebase": "^11.9.1",
+        "html-react-parser": "^5.2.5",
+        "leaflet": "^1.9.4",
+        "libphonenumber-js": "^1.12.9",
+        "lucide-react": "^0.468.0",
+        "next": "^15.3.4",
+        "next-themes": "^0.4.6",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "react-dropzone": "^14.3.8",
+        "react-icons": "^5.5.0",
+        "react-infinite-scroll-component": "^6.1.0",
+        "react-intersection-observer": "^9.16.0",
+        "react-leaflet": "^5.0.0",
+        "react-media-recorder": "^1.7.1",
+        "react-phone-input-2": "^2.15.1",
+        "react-phone-number-input": "^3.4.14",
+        "react-photo-view": "^1.2.7",
+        "react-player": "^2.16.0",
+        "react-razorpay": "^3.0.1",
+        "react-redux": "^9.2.0",
+        "react-share": "^5.2.2",
+        "redux-persist": "^6.0.0",
+        "sonner": "^1.7.4",
+        "tailwind-merge": "^2.6.0",
+        "tailwindcss-animate": "^1.0.7",
+        "use-debounce": "^10.0.5",
+        "usehooks-ts": "^3.1.1",
+        "vaul": "^1.1.2"
+      },
+      "devDependencies": {
+        "@tailwindcss/typography": "^0.5.16",
+        "eslint": "^8.57.1",
+        "eslint-config-next": "15.3.1",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^3.4.17"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
+      "integrity": "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
+      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
+      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@firebase/ai": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@firebase/ai/-/ai-1.4.1.tgz",
+      "integrity": "sha512-bcusQfA/tHjUjBTnMx6jdoPMpDl3r8K15Z+snHz9wq0Foox0F/V+kNLXucEOHoTL2hTc9l+onZCyBJs2QoIC3g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.3",
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@firebase/app-types": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics": {
+      "version": "0.10.17",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.17.tgz",
+      "integrity": "sha512-n5vfBbvzduMou/2cqsnKrIes4auaBjdhg8QNA2ZQZ59QgtO2QiwBaXQZQE4O4sgB0Ds1tvLgUUkY+pwzu6/xEg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/installations": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics-compat": {
+      "version": "0.2.23",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.23.tgz",
+      "integrity": "sha512-3AdO10RN18G5AzREPoFgYhW6vWXr3u+OYQv6pl3CX6Fky8QRk0AHurZlY3Q1xkXO0TDxIsdhO3y65HF7PBOJDw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/analytics": "0.10.17",
+        "@firebase/analytics-types": "0.8.3",
+        "@firebase/component": "0.6.18",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics-types": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.8.3.tgz",
+      "integrity": "sha512-VrIp/d8iq2g501qO46uGz3hjbDb8xzYMrbu8Tp0ovzIzrvJZ2fvmj649gTjge/b7cCCcjT0H37g1gVtlNhnkbg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/app": {
+      "version": "0.13.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.13.2.tgz",
+      "integrity": "sha512-jwtMmJa1BXXDCiDx1vC6SFN/+HfYG53UkfJa6qeN5ogvOunzbFDO3wISZy5n9xgYFUrEP6M7e8EG++riHNTv9w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@firebase/app-check": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.10.1.tgz",
+      "integrity": "sha512-MgNdlms9Qb0oSny87pwpjKush9qUwCJhfmTJHDfrcKo4neLGiSeVE4qJkzP7EQTIUFKp84pbTxobSAXkiuQVYQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/app-check-compat": {
+      "version": "0.3.26",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.3.26.tgz",
+      "integrity": "sha512-PkX+XJMLDea6nmnopzFKlr+s2LMQGqdyT2DHdbx1v1dPSqOol2YzgpgymmhC67vitXVpNvS3m/AiWQWWhhRRPQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/app-check": "0.10.1",
+        "@firebase/app-check-types": "0.5.3",
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/app-check-interop-types": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-interop-types/-/app-check-interop-types-0.3.3.tgz",
+      "integrity": "sha512-gAlxfPLT2j8bTI/qfe3ahl2I2YcBQ8cFIBdhAQA4I2f3TndcO+22YizyGYuttLHPQEpWkhmpFW60VCFEPg4g5A==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/app-check-types": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-types/-/app-check-types-0.5.3.tgz",
+      "integrity": "sha512-hyl5rKSj0QmwPdsAxrI5x1otDlByQ7bvNvVt8G/XPO2CSwE++rmSVf3VEhaeOR4J8ZFaF0Z0NDSmLejPweZ3ng==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/app-compat": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.4.2.tgz",
+      "integrity": "sha512-LssbyKHlwLeiV8GBATyOyjmHcMpX/tFjzRUCS1jnwGAew1VsBB4fJowyS5Ud5LdFbYpJeS+IQoC+RQxpK7eH3Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/app": "0.13.2",
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@firebase/app-types": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.3.tgz",
+      "integrity": "sha512-kRVpIl4vVGJ4baogMDINbyrIOtOxqhkZQg4jTq3l8Lw6WSk0xfpEYzezFu+Kl4ve4fbPl79dvwRtaFqAC/ucCw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/auth": {
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.10.8.tgz",
+      "integrity": "sha512-GpuTz5ap8zumr/ocnPY57ZanX02COsXloY6Y/2LYPAuXYiaJRf6BAGDEdRq1BMjP93kqQnKNuKZUTMZbQ8MNYA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@react-native-async-storage/async-storage": "^1.18.1"
+      },
+      "peerDependenciesMeta": {
+        "@react-native-async-storage/async-storage": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@firebase/auth-compat": {
+      "version": "0.5.28",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.5.28.tgz",
+      "integrity": "sha512-HpMSo/cc6Y8IX7bkRIaPPqT//Jt83iWy5rmDWeThXQCAImstkdNo3giFLORJwrZw2ptiGkOij64EH1ztNJzc7Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/auth": "1.10.8",
+        "@firebase/auth-types": "0.13.0",
+        "@firebase/component": "0.6.18",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/auth-interop-types": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.2.4.tgz",
+      "integrity": "sha512-JPgcXKCuO+CWqGDnigBtvo09HeBs5u/Ktc2GaFj2m01hLarbxthLNm7Fk8iOP1aqAtXV+fnnGj7U28xmk7IwVA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/auth-types": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.13.0.tgz",
+      "integrity": "sha512-S/PuIjni0AQRLF+l9ck0YpsMOdE8GO2KU6ubmBB7P+7TJUCQDa3R1dlgYm9UzGbbePMZsp0xzB93f2b/CgxMOg==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/component": {
+      "version": "0.6.18",
+      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.6.18.tgz",
+      "integrity": "sha512-n28kPCkE2dL2U28fSxZJjzPPVpKsQminJ6NrzcKXAI0E/lYC8YhfwpyllScqVEvAI3J2QgJZWYgrX+1qGI+SQQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@firebase/data-connect": {
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/@firebase/data-connect/-/data-connect-0.3.10.tgz",
+      "integrity": "sha512-VMVk7zxIkgwlVQIWHOKFahmleIjiVFwFOjmakXPd/LDgaB/5vzwsB5DWIYo+3KhGxWpidQlR8geCIn39YflJIQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/auth-interop-types": "0.2.4",
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/database": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-1.0.20.tgz",
+      "integrity": "sha512-H9Rpj1pQ1yc9+4HQOotFGLxqAXwOzCHsRSRjcQFNOr8lhUt6LeYjf0NSRL04sc4X0dWe8DsCvYKxMYvFG/iOJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.3",
+        "@firebase/auth-interop-types": "0.2.4",
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "faye-websocket": "0.11.4",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@firebase/database-compat": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-2.0.11.tgz",
+      "integrity": "sha512-itEsHARSsYS95+udF/TtIzNeQ0Uhx4uIna0sk4E0wQJBUnLc/G1X6D7oRljoOuwwCezRLGvWBRyNrugv/esOEw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/database": "1.0.20",
+        "@firebase/database-types": "1.0.15",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@firebase/database-types": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-1.0.15.tgz",
+      "integrity": "sha512-XWHJ0VUJ0k2E9HDMlKxlgy/ZuTa9EvHCGLjaKSUvrQnwhgZuRU5N3yX6SZ+ftf2hTzZmfRkv+b3QRvGg40bKNw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/app-types": "0.9.3",
+        "@firebase/util": "1.12.1"
+      }
+    },
+    "node_modules/@firebase/firestore": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.8.0.tgz",
+      "integrity": "sha512-QSRk+Q1/CaabKyqn3C32KSFiOdZpSqI9rpLK5BHPcooElumOBooPFa6YkDdiT+/KhJtel36LdAacha9BptMj2A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "@firebase/webchannel-wrapper": "1.0.3",
+        "@grpc/grpc-js": "~1.9.0",
+        "@grpc/proto-loader": "^0.7.8",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/firestore-compat": {
+      "version": "0.3.53",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.53.tgz",
+      "integrity": "sha512-qI3yZL8ljwAYWrTousWYbemay2YZa+udLWugjdjju2KODWtLG94DfO4NALJgPLv8CVGcDHNFXoyQexdRA0Cz8Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/firestore": "4.8.0",
+        "@firebase/firestore-types": "3.0.3",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/firestore-types": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-3.0.3.tgz",
+      "integrity": "sha512-hD2jGdiWRxB/eZWF89xcK9gF8wvENDJkzpVFb4aGkzfEaKxVRD1kjz1t1Wj8VZEp2LCB53Yx1zD8mrhQu87R6Q==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/functions": {
+      "version": "0.12.9",
+      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.12.9.tgz",
+      "integrity": "sha512-FG95w6vjbUXN84Ehezc2SDjGmGq225UYbHrb/ptkRT7OTuCiQRErOQuyt1jI1tvcDekdNog+anIObihNFz79Lg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.3",
+        "@firebase/auth-interop-types": "0.2.4",
+        "@firebase/component": "0.6.18",
+        "@firebase/messaging-interop-types": "0.2.3",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/functions-compat": {
+      "version": "0.3.26",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.3.26.tgz",
+      "integrity": "sha512-A798/6ff5LcG2LTWqaGazbFYnjBW8zc65YfID/en83ALmkhu2b0G8ykvQnLtakbV9ajrMYPn7Yc/XcYsZIUsjA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/functions": "0.12.9",
+        "@firebase/functions-types": "0.6.3",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/functions-types": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.6.3.tgz",
+      "integrity": "sha512-EZoDKQLUHFKNx6VLipQwrSMh01A1SaL3Wg6Hpi//x6/fJ6Ee4hrAeswK99I5Ht8roiniKHw4iO0B1Oxj5I4plg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/installations": {
+      "version": "0.6.18",
+      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.6.18.tgz",
+      "integrity": "sha512-NQ86uGAcvO8nBRwVltRL9QQ4Reidc/3whdAasgeWCPIcrhOKDuNpAALa6eCVryLnK14ua2DqekCOX5uC9XbU/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/util": "1.12.1",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations-compat": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-compat/-/installations-compat-0.2.18.tgz",
+      "integrity": "sha512-aLFohRpJO5kKBL/XYL4tN+GdwEB/Q6Vo9eZOM/6Kic7asSUgmSfGPpGUZO1OAaSRGwF4Lqnvi1f/f9VZnKzChw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/installations": "0.6.18",
+        "@firebase/installations-types": "0.5.3",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations-types": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.5.3.tgz",
+      "integrity": "sha512-2FJI7gkLqIE0iYsNQ1P751lO3hER+Umykel+TkLwHj6plzWVxqvfclPUZhcKFVQObqloEBTmpi2Ozn7EkCABAA==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x"
+      }
+    },
+    "node_modules/@firebase/logger": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.4.4.tgz",
+      "integrity": "sha512-mH0PEh1zoXGnaR8gD1DeGeNZtWFKbnz9hDO91dIml3iou1gpOnLqXQ2dJfB71dj6dpmUjcQ6phY3ZZJbjErr9g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@firebase/messaging": {
+      "version": "0.12.22",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.12.22.tgz",
+      "integrity": "sha512-GJcrPLc+Hu7nk+XQ70Okt3M1u1eRr2ZvpMbzbc54oTPJZySHcX9ccZGVFcsZbSZ6o1uqumm8Oc7OFkD3Rn1/og==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/installations": "0.6.18",
+        "@firebase/messaging-interop-types": "0.2.3",
+        "@firebase/util": "1.12.1",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/messaging-compat": {
+      "version": "0.2.22",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.2.22.tgz",
+      "integrity": "sha512-5ZHtRnj6YO6f/QPa/KU6gryjmX4Kg33Kn4gRpNU6M1K47Gm8kcQwPkX7erRUYEH1mIWptfvjvXMHWoZaWjkU7A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/messaging": "0.12.22",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/messaging-interop-types": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-interop-types/-/messaging-interop-types-0.2.3.tgz",
+      "integrity": "sha512-xfzFaJpzcmtDjycpDeCUj0Ge10ATFi/VHVIvEEjDNc3hodVBQADZ7BWQU7CuFpjSHE+eLuBI13z5F/9xOoGX8Q==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/performance": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.7.7.tgz",
+      "integrity": "sha512-JTlTQNZKAd4+Q5sodpw6CN+6NmwbY72av3Lb6wUKTsL7rb3cuBIhQSrslWbVz0SwK3x0ZNcqX24qtRbwKiv+6w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/installations": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0",
+        "web-vitals": "^4.2.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/performance-compat": {
+      "version": "0.2.20",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-compat/-/performance-compat-0.2.20.tgz",
+      "integrity": "sha512-XkFK5NmOKCBuqOKWeRgBUFZZGz9SzdTZp4OqeUg+5nyjapTiZ4XoiiUL8z7mB2q+63rPmBl7msv682J3rcDXIQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/performance": "0.7.7",
+        "@firebase/performance-types": "0.2.3",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/performance-types": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.2.3.tgz",
+      "integrity": "sha512-IgkyTz6QZVPAq8GSkLYJvwSLr3LS9+V6vNPQr0x4YozZJiLF5jYixj0amDtATf1X0EtYHqoPO48a9ija8GocxQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/remote-config": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.6.5.tgz",
+      "integrity": "sha512-fU0c8HY0vrVHwC+zQ/fpXSqHyDMuuuglV94VF6Yonhz8Fg2J+KOowPGANM0SZkLvVOYpTeWp3ZmM+F6NjwWLnw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/installations": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/remote-config-compat": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-compat/-/remote-config-compat-0.2.18.tgz",
+      "integrity": "sha512-YiETpldhDy7zUrnS8e+3l7cNs0sL7+tVAxvVYU0lu7O+qLHbmdtAxmgY+wJqWdW2c9nDvBFec7QiF58pEUu0qQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/remote-config": "0.6.5",
+        "@firebase/remote-config-types": "0.4.0",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/remote-config-types": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.4.0.tgz",
+      "integrity": "sha512-7p3mRE/ldCNYt8fmWMQ/MSGRmXYlJ15Rvs9Rk17t8p0WwZDbeK7eRmoI1tvCPaDzn9Oqh+yD6Lw+sGLsLg4kKg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/storage": {
+      "version": "0.13.14",
+      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.13.14.tgz",
+      "integrity": "sha512-xTq5ixxORzx+bfqCpsh+o3fxOsGoDjC1nO0Mq2+KsOcny3l7beyBhP/y1u5T6mgsFQwI1j6oAkbT5cWdDBx87g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/storage-compat": {
+      "version": "0.3.24",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.3.24.tgz",
+      "integrity": "sha512-XHn2tLniiP7BFKJaPZ0P8YQXKiVJX+bMyE2j2YWjYfaddqiJnROJYqSomwW6L3Y+gZAga35ONXUJQju6MB6SOQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/storage": "0.13.14",
+        "@firebase/storage-types": "0.8.3",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/storage-types": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.8.3.tgz",
+      "integrity": "sha512-+Muk7g9uwngTpd8xn9OdF/D48uiQ7I1Fae7ULsWPuKoCH3HU7bfFPhxtJYzyhjdniowhuDpQcfPmuNRAqZEfvg==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/util": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.12.1.tgz",
+      "integrity": "sha512-zGlBn/9Dnya5ta9bX/fgEoNC3Cp8s6h+uYPYaDieZsFOAdHP/ExzQ/eaDgxD3GOROdPkLKpvKY0iIzr9adle0w==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@firebase/webchannel-wrapper": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.3.tgz",
+      "integrity": "sha512-2xCRM9q9FlzGZCdgDMJwc0gyUkWFtkosy7Xxr6sFgQwn+wMNIWd7xIvYNauU1r64B5L5rsGKy/n9TKJ0aAFeqQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.4.tgz",
+      "integrity": "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.5.tgz",
+      "integrity": "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.4",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.7.tgz",
+      "integrity": "sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
+    "node_modules/@googlemaps/js-api-loader": {
+      "version": "1.16.8",
+      "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz",
+      "integrity": "sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@googlemaps/markerclusterer": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.5.3.tgz",
+      "integrity": "sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "supercluster": "^8.0.1"
+      }
+    },
+    "node_modules/@grpc/grpc-js": {
+      "version": "1.9.15",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.15.tgz",
+      "integrity": "sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@grpc/proto-loader": "^0.7.8",
+        "@types/node": ">=12.12.47"
+      },
+      "engines": {
+        "node": "^8.13.0 || >=10.10.0"
+      }
+    },
+    "node_modules/@grpc/proto-loader": {
+      "version": "0.7.15",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.15.tgz",
+      "integrity": "sha512-tMXdRCfYVixjuFK+Hk0Q1s38gV9zDiDJfWL3h1rv4Qc39oILCu1TRTDt7+fGUI8K4G1Fj125Hx/ru3azECWTyQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lodash.camelcase": "^4.3.0",
+        "long": "^5.0.0",
+        "protobufjs": "^7.2.5",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "deprecated": "Use @eslint/config-array instead",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.3",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
+      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.10.0"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.12.tgz",
+      "integrity": "sha512-pUvdJN1on574wQHjaBfNGDt9Mz5utDSZFsIIQkMzPgNS8ZvT4H2mwOrOIClwsQOb6EGx5M76/CZr6G8i6pSpLg==",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "15.3.1",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.3.1.tgz",
+      "integrity": "sha512-oEs4dsfM6iyER3jTzMm4kDSbrQJq8wZw5fmT6fg2V3SMo+kgG+cShzLfEV20senZzv8VF+puNLheiGPlBGsv2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "3.3.1"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.12.tgz",
+      "integrity": "sha512-RnRjBtH8S8eXCpUNkQ+543DUc7ys8y15VxmFU9HRqlo9BG3CcBUiwNtF8SNoi2xvGCVJq1vl2yYq+3oISBS0Zg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.12.tgz",
+      "integrity": "sha512-nqa9/7iQlboF1EFtNhWxQA0rQstmYRSBGxSM6g3GxvxHxcoeqVXfGNr9stJOme674m2V7r4E3+jEhhGvSQhJRA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.12.tgz",
+      "integrity": "sha512-dCzAjqhDHwmoB2M4eYfVKqXs99QdQxNQVpftvP1eGVppamXh/OkDAwV737Zr0KPXEqRUMN4uCjh6mjO+XtF3Mw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.12.tgz",
+      "integrity": "sha512-+fpGWvQiITgf7PUtbWY1H7qUSnBZsPPLyyq03QuAKpVoTy/QUx1JptEDTQMVvQhvizCEuNLEeghrQUyXQOekuw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.12.tgz",
+      "integrity": "sha512-jSLvgdRRL/hrFAPqEjJf1fFguC719kmcptjNVDJl26BnJIpjL3KH5h6mzR4mAweociLQaqvt4UyzfbFjgAdDcw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.12.tgz",
+      "integrity": "sha512-/uaF0WfmYqQgLfPmN6BvULwxY0dufI2mlN2JbOKqqceZh1G4hjREyi7pg03zjfyS6eqNemHAZPSoP84x17vo6w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.12.tgz",
+      "integrity": "sha512-xhsL1OvQSfGmlL5RbOmU+FV120urrgFpYLq+6U8C6KIym32gZT6XF/SDE92jKzzlPWskkbjOKCpqk5m4i8PEfg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.12.tgz",
+      "integrity": "sha512-Z1Dh6lhFkxvBDH1FoW6OU/L6prYwPSlwjLiZkExIAh8fbP6iI/M7iGTQAJPYJ9YFlWobCZ1PHbchFhFYb2ADkw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
+      "integrity": "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
+      "integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz",
+      "integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.8.tgz",
+      "integrity": "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
+      "integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.14.tgz",
+      "integrity": "sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
+      "integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.8.tgz",
+      "integrity": "sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-context": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.3.tgz",
+      "integrity": "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
+      "integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",
+      "integrity": "sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
+      "integrity": "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz",
+      "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.15.tgz",
+      "integrity": "sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
+    "node_modules/@react-google-maps/api": {
+      "version": "2.20.8",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.20.8.tgz",
+      "integrity": "sha512-wtLYFtCGXK3qbIz1H5to3JxbosPnKsvjDKhqGylXUb859EskhzR7OpuNt0LqdLarXUtZCJTKzPn3BNaekNIahg==",
+      "license": "MIT",
+      "dependencies": {
+        "@googlemaps/js-api-loader": "1.16.8",
+        "@googlemaps/markerclusterer": "2.5.3",
+        "@react-google-maps/infobox": "2.20.0",
+        "@react-google-maps/marker-clusterer": "2.20.0",
+        "@types/google.maps": "3.58.1",
+        "invariant": "2.2.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/@react-google-maps/infobox": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.20.0.tgz",
+      "integrity": "sha512-03PJHjohhaVLkX6+NHhlr8CIlvUxWaXhryqDjyaZ8iIqqix/nV8GFdz9O3m5OsjtxtNho09F/15j14yV0nuyLQ==",
+      "license": "MIT"
+    },
+    "node_modules/@react-google-maps/marker-clusterer": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.20.0.tgz",
+      "integrity": "sha512-tieX9Va5w1yP88vMgfH1pHTacDQ9TgDTjox3tLlisKDXRQWdjw+QeVVghhf5XqqIxXHgPdcGwBvKY6UP+SIvLw==",
+      "license": "MIT"
+    },
+    "node_modules/@react-leaflet/core": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
+      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
+      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.16.1.tgz",
+      "integrity": "sha512-TvZbIpeKqGQQ7X0zSCvPH9riMSFQFSggnfBjFZ1mEoILW+UuXCKwOoPcgjMwiUtRqFZ8jWhPJc4um14vC6I4ag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
+    "node_modules/@stripe/react-stripe-js": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-3.10.0.tgz",
+      "integrity": "sha512-UPqHZwMwDzGSax0ZI7XlxR3tZSpgIiZdk3CiwjbTK978phwR/fFXeAXQcN/h8wTAjR4ZIAzdlI9DbOqJhuJdeg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@stripe/stripe-js": ">=1.44.1 <8.0.0",
+        "react": ">=16.8.0 <20.0.0",
+        "react-dom": ">=16.8.0 <20.0.0"
+      }
+    },
+    "node_modules/@stripe/stripe-js": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-6.1.0.tgz",
+      "integrity": "sha512-/5zxRol+MU4I7fjZXPxP2M6E1nuHOxAzoc0tOEC/TLnC31Gzc+5EE93mIjoAnu28O1Sqpl7/BkceDHwnGmn75A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.16"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+      "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/google.maps": {
+      "version": "3.58.1",
+      "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
+      "integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "25.3.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.0.tgz",
+      "integrity": "sha512-4K3bqJpXpqfg2XKGK9bpDTc6xO/xoUP/RBWS7AtRMug6zZFaRekiLzjVtAoZMquxoAbzBvy5nxQ7veS5eYzf8A==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.1.tgz",
+      "integrity": "sha512-Jz9ZztpB37dNC+HU2HI28Bs9QXpzCz+y/twHOwhyrIRdbuVDxSytJNDl6z/aAKlaRIwC7y8wJdkBv7FxYGgi0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.56.1",
+        "@typescript-eslint/type-utils": "8.56.1",
+        "@typescript-eslint/utils": "8.56.1",
+        "@typescript-eslint/visitor-keys": "8.56.1",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.56.1",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.56.1.tgz",
+      "integrity": "sha512-klQbnPAAiGYFyI02+znpBRLyjL4/BrBd0nyWkdC0s/6xFLkXYQ8OoRrSkqacS1ddVxf/LDyODIKbQ5TgKAf/Fg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.56.1",
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/typescript-estree": "8.56.1",
+        "@typescript-eslint/visitor-keys": "8.56.1",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.56.1.tgz",
+      "integrity": "sha512-TAdqQTzHNNvlVFfR+hu2PDJrURiwKsUvxFn1M0h95BB8ah5jejas08jUWG4dBA68jDMI988IvtfdAI53JzEHOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.56.1",
+        "@typescript-eslint/types": "^8.56.1",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.56.1.tgz",
+      "integrity": "sha512-YAi4VDKcIZp0O4tz/haYKhmIDZFEUPOreKbfdAN3SzUDMcPhJ8QI99xQXqX+HoUVq8cs85eRKnD+rne2UAnj2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/visitor-keys": "8.56.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.56.1.tgz",
+      "integrity": "sha512-qOtCYzKEeyr3aR9f28mPJqBty7+DBqsdd63eO0yyDwc6vgThj2UjWfJIcsFeSucYydqcuudMOprZ+x1SpF3ZuQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.56.1.tgz",
+      "integrity": "sha512-yB/7dxi7MgTtGhZdaHCemf7PuwrHMenHjmzgUW1aJpO+bBU43OycnM3Wn+DdvDO/8zzA9HlhaJ0AUGuvri4oGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/typescript-estree": "8.56.1",
+        "@typescript-eslint/utils": "8.56.1",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.56.1.tgz",
+      "integrity": "sha512-dbMkdIUkIkchgGDIv7KLUpa0Mda4IYjo4IAMJUZ+3xNoUXxMsk9YtKpTHSChRS85o+H9ftm51gsK1dZReY9CVw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.56.1.tgz",
+      "integrity": "sha512-qzUL1qgalIvKWAf9C1HpvBjif+Vm6rcT5wZd4VoMb9+Km3iS3Cv9DY6dMRMDtPnwRAFyAi7YXJpTIEXLvdfPxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.56.1",
+        "@typescript-eslint/tsconfig-utils": "8.56.1",
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/visitor-keys": "8.56.1",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.3.tgz",
+      "integrity": "sha512-fy6KJm2RawA5RcHkLa1z/ScpBeA762UF9KmZQxwIbDtRJrgLzM10depAiEQ+CXYcoiqW1/m96OAAoke2nE9EeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.2.tgz",
+      "integrity": "sha512-+G4CpNBxa5MprY+04MbgOw1v7So6n5JY166pFi9KfYwT78fxScCeSNQSNzp6dpPSW2rONOps6Ocam1wFhCgoVw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.56.1.tgz",
+      "integrity": "sha512-HPAVNIME3tABJ61siYlHzSWCGtOoeP2RTIaHXFMPqjrQKCGB9OgUVdiNgH7TJS2JNIQ5qQ4RsAUDuGaGme/KOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.56.1",
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/typescript-estree": "8.56.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.56.1.tgz",
+      "integrity": "sha512-KiROIzYdEV85YygXw6BI/Dx4fnBlFQu6Mq4QE4MOH9fFnhohw6wX/OAvDY2/C+ut0I3RSPKenvZJIVYqJNkhEw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.1",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
+      "integrity": "sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.11.1.tgz",
+      "integrity": "sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz",
+      "integrity": "sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.11.1.tgz",
+      "integrity": "sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.11.1.tgz",
+      "integrity": "sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.11.1.tgz",
+      "integrity": "sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.11.1.tgz",
+      "integrity": "sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.11.1.tgz",
+      "integrity": "sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.11.1.tgz",
+      "integrity": "sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.11.1.tgz",
+      "integrity": "sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.11.1.tgz",
+      "integrity": "sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.11.1.tgz",
+      "integrity": "sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.11.1.tgz",
+      "integrity": "sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.11.1.tgz",
+      "integrity": "sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.11.1.tgz",
+      "integrity": "sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.11.1.tgz",
+      "integrity": "sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.11.1.tgz",
+      "integrity": "sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.11.1.tgz",
+      "integrity": "sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz",
+      "integrity": "sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ast-types-flow": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
+      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/attr-accept": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
+      "integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/automation-events": {
+      "version": "7.1.15",
+      "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-7.1.15.tgz",
+      "integrity": "sha512-NsHJlve3twcgs8IyP4iEYph7Fzpnh6klN7G5LahwvypakBjFbsiGHJxrqTmeHKREdu/Tx6oZboqNI0tD4MnFlA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=18.2.0"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.1.tgz",
+      "integrity": "sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/axios": {
+      "version": "1.13.5",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
+      "integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.11",
+        "form-data": "^4.0.5",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/broker-factory": {
+      "version": "3.1.13",
+      "resolved": "https://registry.npmjs.org/broker-factory/-/broker-factory-3.1.13.tgz",
+      "integrity": "sha512-H2VALe31mEtO/SRcNp4cUU5BAm1biwhc/JaF77AigUuni/1YT0FLCJfbUxwIEs9y6Kssjk2fmXgf+Y9ALvmKlw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "fast-unique-numbers": "^9.0.26",
+        "tslib": "^2.8.1",
+        "worker-factory": "^7.0.48"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001774",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001774.tgz",
+      "integrity": "sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/compilerr": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/compilerr/-/compilerr-10.0.2.tgz",
+      "integrity": "sha512-CFwUXxJ9OuWsSvnLSbefxi+GLsZ0YnuJh40ry5QdmZ1FWK59OG+QB8XSj6t7Kq+/c5DSS7en+cML6GlzHKH58A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "dashify": "^2.0.0",
+        "indefinite-article": "0.0.2",
+        "tslib": "^2.5.0"
+      },
+      "engines": {
+        "node": ">=14.15.4"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/country-flag-icons": {
+      "version": "1.6.14",
+      "resolved": "https://registry.npmjs.org/country-flag-icons/-/country-flag-icons-1.6.14.tgz",
+      "integrity": "sha512-tPis+tN/esXXSuQJZCbkUhnIeUrZmtDKSjUuSI7Sss2GHsgAGvbSAQkx4Ut0qethZbDfPGYco8EjzOPElxYIFw==",
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/dashify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dashify/-/dashify-2.0.0.tgz",
+      "integrity": "sha512-hpA5C/YrPjucXypHPPc0oJ1l9Hf6wWbiOL7Ik42cxnsUOhWiCB/fylKbKqqJalW9FgkNQCw16YO8uW9Hs0Iy1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/embla-carousel": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
+      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
+      "license": "MIT"
+    },
+    "node_modules/embla-carousel-autoplay": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.6.0.tgz",
+      "integrity": "sha512-OBu5G3nwaSXkZCo1A6LTaFMZ8EpkYbwIaH+bPqdBnDGQ2fh4+NbzjXjs2SktoPNKCtflfVMc75njaDHOYXcrsA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
+      "integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==",
+      "license": "MIT",
+      "dependencies": {
+        "embla-carousel": "8.6.0",
+        "embla-carousel-reactive-utils": "8.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
+      "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
+      "integrity": "sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.2.tgz",
+      "integrity": "sha512-BrUQ0cPTB/IwXj23HtwHjS9n7O4h9FX94b4xc5zlTHxeLgTAdzYUDyy6KdExAl9lbN5rtfe44xpjpmj9grxs5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.1",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.1.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.3.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.5",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-config-next": {
+      "version": "15.3.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.3.1.tgz",
+      "integrity": "sha512-GnmyVd9TE/Ihe3RrvcafFhXErErtr2jS0JDeCSp3vWvy86AXwHsRBt0E3MqP/m8ACS1ivcsi5uaqjbhsG18qKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@next/eslint-plugin-next": "15.3.1",
+        "@rushstack/eslint-patch": "^1.10.3",
+        "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-jsx-a11y": "^6.10.0",
+        "eslint-plugin-react": "^7.37.0",
+        "eslint-plugin-react-hooks": "^5.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.23.0 || ^8.0.0 || ^9.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-import-resolver-typescript": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
+      "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.4.0",
+        "get-tsconfig": "^4.10.0",
+        "is-bun-module": "^2.0.0",
+        "stable-hash": "^0.0.5",
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-import-resolver-typescript"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*",
+        "eslint-plugin-import-x": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-import": {
+          "optional": true
+        },
+        "eslint-plugin-import-x": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
+      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
+        "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
+      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "aria-query": "^5.3.2",
+        "array-includes": "^3.1.8",
+        "array.prototype.flatmap": "^1.3.2",
+        "ast-types-flow": "^0.0.8",
+        "axe-core": "^4.10.0",
+        "axobject-query": "^4.1.0",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^3.3.5",
+        "language-tags": "^1.0.9",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.includes": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.6",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.6.tgz",
+      "integrity": "sha512-3JmVl5hMGtJ3kMmB3zi3DL25KfkCEyy3Tw7Gmw7z5w8M9WlwoPFnIvwChzu1+cF3iaK3sp18hhPz8ANeimdJfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "node-exports-info": "^1.6.0",
+        "object-keys": "^1.1.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extendable-media-recorder": {
+      "version": "6.6.10",
+      "resolved": "https://registry.npmjs.org/extendable-media-recorder/-/extendable-media-recorder-6.6.10.tgz",
+      "integrity": "sha512-gnSmLqDFq40ZdbGfuarnMLNqYPLCPpPr0p21V+g67wG4Pv2oCc/ga8sfsZrEM5GywEi7FcpyRm3z99JWZ/0aPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.9",
+        "media-encoder-host": "^8.0.76",
+        "multi-buffer-data-view": "^3.0.20",
+        "recorder-audio-worklet": "^5.1.26",
+        "standardized-audio-context": "^25.3.29",
+        "subscribable-things": "^2.1.6",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/extendable-media-recorder-wav-encoder": {
+      "version": "7.0.136",
+      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder/-/extendable-media-recorder-wav-encoder-7.0.136.tgz",
+      "integrity": "sha512-K4ZcMSbsTlI7gv92K+UY+czvk37PIPSWLqp5NF3pNDF9S6iffCbNJnl+k1zce02P6tmOAf+ZlzVRRjxSXNEoog==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "extendable-media-recorder-wav-encoder-broker": "^7.0.125",
+        "extendable-media-recorder-wav-encoder-worker": "^8.0.121",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/extendable-media-recorder-wav-encoder-broker": {
+      "version": "7.0.125",
+      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder-broker/-/extendable-media-recorder-wav-encoder-broker-7.0.125.tgz",
+      "integrity": "sha512-HVmznJvyG+eFZJRYLd9h3OF0oNNIGEmEHAP4IQ0Y5gwxJcmrFhVmGB4hLi1GT/jNM8aSoCxIePVkCX+5tuGvpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "broker-factory": "^3.1.13",
+        "extendable-media-recorder-wav-encoder-worker": "^8.0.121",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/extendable-media-recorder-wav-encoder-worker": {
+      "version": "8.0.121",
+      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder-worker/-/extendable-media-recorder-wav-encoder-worker-8.0.121.tgz",
+      "integrity": "sha512-UBBgWkyE9fpCLDdrWdTZM56FkImAljpUuxr6+y9W6LHvY7XWhkZP+yO5uZUUquS5IpsBlY2uKOWpKwiLdo3FOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "tslib": "^2.8.1",
+        "worker-factory": "^7.0.48"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-unique-numbers": {
+      "version": "9.0.26",
+      "resolved": "https://registry.npmjs.org/fast-unique-numbers/-/fast-unique-numbers-9.0.26.tgz",
+      "integrity": "sha512-3Mtq8p1zQinjGyWfKeuBunbuFoixG72AUkk4VvzbX4ykCW9Q4FzRaNyIlfQhUjnKw2ARVP+/CKnoyr6wfHftig==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=18.2.0"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/file-selector": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz",
+      "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.7.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/firebase": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-11.10.0.tgz",
+      "integrity": "sha512-nKBXoDzF0DrXTBQJlZa+sbC5By99ysYU1D6PkMRYknm0nCW7rJly47q492Ht7Ndz5MeYSBuboKuhS1e6mFC03w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/ai": "1.4.1",
+        "@firebase/analytics": "0.10.17",
+        "@firebase/analytics-compat": "0.2.23",
+        "@firebase/app": "0.13.2",
+        "@firebase/app-check": "0.10.1",
+        "@firebase/app-check-compat": "0.3.26",
+        "@firebase/app-compat": "0.4.2",
+        "@firebase/app-types": "0.9.3",
+        "@firebase/auth": "1.10.8",
+        "@firebase/auth-compat": "0.5.28",
+        "@firebase/data-connect": "0.3.10",
+        "@firebase/database": "1.0.20",
+        "@firebase/database-compat": "2.0.11",
+        "@firebase/firestore": "4.8.0",
+        "@firebase/firestore-compat": "0.3.53",
+        "@firebase/functions": "0.12.9",
+        "@firebase/functions-compat": "0.3.26",
+        "@firebase/installations": "0.6.18",
+        "@firebase/installations-compat": "0.2.18",
+        "@firebase/messaging": "0.12.22",
+        "@firebase/messaging-compat": "0.2.22",
+        "@firebase/performance": "0.7.7",
+        "@firebase/performance-compat": "0.2.20",
+        "@firebase/remote-config": "0.6.5",
+        "@firebase/remote-config-compat": "0.2.18",
+        "@firebase/storage": "0.13.14",
+        "@firebase/storage-compat": "0.3.24",
+        "@firebase/util": "1.12.1"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.13.6",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.6.tgz",
+      "integrity": "sha512-shZT/QMiSHc/YBLxxOkMtgSid5HFoauqCE3/exfsEcwg1WkeqjG+V40yBbBrsD+jW2HDXcs28xOfcbm2jI8Ddw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/html-dom-parser": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.1.8.tgz",
+      "integrity": "sha512-MCIUng//mF2qTtGHXJWr6OLfHWmg3Pm8ezpfiltF83tizPWY17JxT4dRLE8lykJ5bChJELoY3onQKPbufJHxYA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/remarkablemark"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "5.0.3",
+        "htmlparser2": "10.1.0"
+      }
+    },
+    "node_modules/html-react-parser": {
+      "version": "5.2.17",
+      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-5.2.17.tgz",
+      "integrity": "sha512-m+K/7Moq1jodAB4VL0RXSOmtwLUYoAsikZhwd+hGQe5Vtw2dbWfpFd60poxojMU0Tsh9w59mN1QLEcoHz0Dx9w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/remarkablemark"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/html-react-parser"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "5.0.3",
+        "html-dom-parser": "5.1.8",
+        "react-property": "2.0.2",
+        "style-to-js": "1.1.21"
+      },
+      "peerDependencies": {
+        "@types/react": "0.14 || 15 || 16 || 17 || 18 || 19",
+        "react": "0.14 || 15 || 16 || 17 || 18 || 19"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.1.0.tgz",
+      "integrity": "sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "entities": "^7.0.1"
+      }
+    },
+    "node_modules/http-parser-js": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz",
+      "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==",
+      "license": "MIT"
+    },
+    "node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "license": "ISC"
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immer": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.4.tgz",
+      "integrity": "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/indefinite-article": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/indefinite-article/-/indefinite-article-0.0.2.tgz",
+      "integrity": "sha512-Au/2XzRkvxq2J6w5uvSSbBKPZ5kzINx5F2wb0SF8xpRL8BP9Lav81TnRbfPp6p+SYjYxwaaLn4EUwI3/MmYKSw==",
+      "license": "MIT"
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "license": "MIT"
+    },
+    "node_modules/input-format": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/input-format/-/input-format-0.3.14.tgz",
+      "integrity": "sha512-gHMrgrbCgmT4uK5Um5eVDUohuV9lcs95ZUUN9Px2Y0VIfjTzT2wF8Q3Z4fwLFm7c5Z2OXCm53FHoovj6SlOKdg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">=18.1.0",
+        "react-dom": ">=18.1.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bun-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
+      "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.7.1"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/jsonp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz",
+      "integrity": "sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==",
+      "dependencies": {
+        "debug": "^2.1.3"
+      }
+    },
+    "node_modules/jsonp/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/jsonp/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==",
+      "license": "ISC"
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.23",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
+      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
+      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "language-subtag-registry": "^0.3.20"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/libphonenumber-js": {
+      "version": "1.12.37",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.12.37.tgz",
+      "integrity": "sha512-rDU6bkpuMs8YRt/UpkuYEAsYSoNuDEbrE41I3KNvmXREGH6DGBJ8Wbak4by29wNOQ27zk4g4HL82zf0OGhwRuw==",
+      "license": "MIT"
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==",
+      "license": "MIT"
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha512-6raRe2vxCYBhpBu+B+TtNGUzah+hQjVdu3E17wfusjyrXBka2nBS8OH/gjVZ5PvHOhWmIZTYri09Z6n/QfnNMw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.startswith": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
+      "integrity": "sha512-XClYR1h4/fJ7H+mmCKppbiBmljN/nGs73iq2SjCT9SF4CBPoUHzLvWmH1GtZMhMBZSiRkHXfeA2RY1eIlJ75ww==",
+      "license": "MIT"
+    },
+    "node_modules/long": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
+      "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.468.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.468.0.tgz",
+      "integrity": "sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-encoder-host": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/media-encoder-host/-/media-encoder-host-8.1.0.tgz",
+      "integrity": "sha512-VwX3ex48ltl+K1ObGEq3IcZp/XqpNTWemd9brC9ovo89rYmCRKTZAp1FCyfAY86RdvSMrUs26lbo45DIDVyERg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.4",
+        "media-encoder-host-broker": "^7.1.0",
+        "media-encoder-host-worker": "^9.2.0",
+        "tslib": "^2.6.2"
+      }
+    },
+    "node_modules/media-encoder-host-broker": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/media-encoder-host-broker/-/media-encoder-host-broker-7.1.0.tgz",
+      "integrity": "sha512-Emu3f45Wbf6AoRJxfvZ8e5nh8fRVviBfkABgYNvVUsVBgJ7+l137gn324g/JmNVQhhVQ89fjmGT1kHIJ9JG5Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.4",
+        "broker-factory": "^3.0.97",
+        "fast-unique-numbers": "^9.0.4",
+        "media-encoder-host-worker": "^9.2.0",
+        "tslib": "^2.6.2"
+      }
+    },
+    "node_modules/media-encoder-host-worker": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/media-encoder-host-worker/-/media-encoder-host-worker-9.2.0.tgz",
+      "integrity": "sha512-LrJJgNBDZH2y1PYBLaiYQw9uFU5i3yPvDkDxdko+L3Z4qzhKq9+4eYxKDqlwO4EdOlaiggvMpkgZl3roOniz2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.4",
+        "extendable-media-recorder-wav-encoder-broker": "^7.0.100",
+        "tslib": "^2.6.2",
+        "worker-factory": "^7.0.24"
+      }
+    },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
+      "license": "MIT"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.3.tgz",
+      "integrity": "sha512-M2GCs7Vk83NxkUyQV1bkABc4yxgz9kILhHImZiBPAZ9ybuvCb0/H7lEl5XvIg3g+9d4eNotkZA5IWwYl0tibaA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/multi-buffer-data-view": {
+      "version": "3.0.24",
+      "resolved": "https://registry.npmjs.org/multi-buffer-data-view/-/multi-buffer-data-view-3.0.24.tgz",
+      "integrity": "sha512-jm7Ycplx37ExXyQmqhwl7zfQmAj81y5LLzVx0XyWea4omP9W/xJhLEHs/5b+WojGyYSRt8BHiXZVcYzu68Ma0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.6",
+        "tslib": "^2.4.1"
+      },
+      "engines": {
+        "node": ">=12.20.1"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/napi-postinstall": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
+      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/next": {
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.12.tgz",
+      "integrity": "sha512-Fi/wQ4Etlrn60rz78bebG1i1SR20QxvV8tVp6iJspjLUSHcZoeUXCt+vmWoEcza85ElZzExK/jJ/F6SvtGktjA==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "15.5.12",
+        "@swc/helpers": "0.5.15",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "15.5.12",
+        "@next/swc-darwin-x64": "15.5.12",
+        "@next/swc-linux-arm64-gnu": "15.5.12",
+        "@next/swc-linux-arm64-musl": "15.5.12",
+        "@next/swc-linux-x64-gnu": "15.5.12",
+        "@next/swc-linux-x64-musl": "15.5.12",
+        "@next/swc-win32-arm64-msvc": "15.5.12",
+        "@next/swc-win32-x64-msvc": "15.5.12",
+        "sharp": "^0.34.3"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.51.1",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-exports-info": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.0.tgz",
+      "integrity": "sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array.prototype.flatmap": "^1.3.3",
+        "es-errors": "^1.3.0",
+        "object.entries": "^1.1.9",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/node-exports-info/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/protobufjs": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz",
+      "integrity": "sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg==",
+      "hasInstallScript": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/node": ">=13.7.0",
+        "long": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
+      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.4"
+      }
+    },
+    "node_modules/react-dropzone": {
+      "version": "14.4.1",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.4.1.tgz",
+      "integrity": "sha512-QDuV76v3uKbHiH34SpwifZ+gOLi1+RdsCO1kl5vxMT4wW8R82+sthjvBw4th3NHF/XX6FBsqDYZVNN+pnhaw0g==",
+      "license": "MIT",
+      "dependencies": {
+        "attr-accept": "^2.2.4",
+        "file-selector": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-infinite-scroll-component": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.1.tgz",
+      "integrity": "sha512-R8YoOyiNDynSWmfVme5LHslsKrP+/xcRUWR2ies8UgUab9dtyw5ECnMCVPPmnmjjF4MWQmfVdRwRWcWaDgeyMA==",
+      "license": "MIT",
+      "dependencies": {
+        "throttle-debounce": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0"
+      }
+    },
+    "node_modules/react-intersection-observer": {
+      "version": "9.16.0",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.16.0.tgz",
+      "integrity": "sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-leaflet": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
+      "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^3.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
+    "node_modules/react-media-recorder": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/react-media-recorder/-/react-media-recorder-1.7.2.tgz",
+      "integrity": "sha512-qNn9VUe/bScN3IXWGbSgULbCnYvfamj8RDzjWa5jAtA8M8l9tKg3GujcCgwx2rLCq4rLw+k048LK8i3oPDx4hQ==",
+      "license": "MIT",
+      "dependencies": {
+        "extendable-media-recorder": "^6.6.5",
+        "extendable-media-recorder-wav-encoder": "^7.0.68"
+      }
+    },
+    "node_modules/react-phone-input-2": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz",
+      "integrity": "sha512-W03abwhXcwUoq+vUFvC6ch2+LJYMN8qSOiO889UH6S7SyMCQvox/LF3QWt+cZagZrRdi5z2ON3omnjoCUmlaYw==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.2.6",
+        "lodash.debounce": "^4.0.8",
+        "lodash.memoize": "^4.1.2",
+        "lodash.reduce": "^4.6.0",
+        "lodash.startswith": "^4.2.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+        "react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
+      }
+    },
+    "node_modules/react-phone-number-input": {
+      "version": "3.4.16",
+      "resolved": "https://registry.npmjs.org/react-phone-number-input/-/react-phone-number-input-3.4.16.tgz",
+      "integrity": "sha512-ix1+SIyGuLxnlAeW+XQNhwOmmDd4Zmr6Ng1eQl0E2XS8xIuue3gdZeBG4LGTMjTIFneOTO9pUPL+AEDhV6+r+A==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.5.1",
+        "country-flag-icons": "^1.6.14",
+        "input-format": "^0.3.14",
+        "libphonenumber-js": "^1.12.37",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/react-photo-view": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/react-photo-view/-/react-photo-view-1.2.7.tgz",
+      "integrity": "sha512-MfOWVPxuibncRLaycZUNxqYU8D9IA+rbGDDaq6GM8RIoGJal592hEJoRAyRSI7ZxyyJNJTLMUWWL3UIXHJJOpw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/react-player": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.1.tgz",
+      "integrity": "sha512-mxP6CqjSWjidtyDoMOSHVPdhX0pY16aSvw5fVr44EMaT7X5Xz46uQ4b/YBm1v2x+3hHkB9PmjEEkmbHb9PXQ4w==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0"
+      }
+    },
+    "node_modules/react-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz",
+      "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==",
+      "license": "MIT"
+    },
+    "node_modules/react-razorpay": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-razorpay/-/react-razorpay-3.0.1.tgz",
+      "integrity": "sha512-43P6VB20quinlUDN3dUdg0XlMtoClzfvhgpPWnGrLwLE6Pr570fXdA4kC+92Wqof48A/x96TXRpLnrQ/J1eXyw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-share": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/react-share/-/react-share-5.2.2.tgz",
+      "integrity": "sha512-z0nbOX6X6vHHWAvXduNkYeJUKTKNpKM5Xpmc5a2BxjJhUWl+sE7AsSEMmYEUj2DuDjZr5m7KFIGF0sQPKcUN6w==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.3.2",
+        "jsonp": "^0.2.1"
+      },
+      "peerDependencies": {
+        "react": "^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/recorder-audio-worklet": {
+      "version": "5.1.39",
+      "resolved": "https://registry.npmjs.org/recorder-audio-worklet/-/recorder-audio-worklet-5.1.39.tgz",
+      "integrity": "sha512-w/RazoBwZnkFnEPRsJYNThOHznLQC98/IzWRrutpJQVvCcL0nbLsVSLDaRrnrqVpRUI11VgiXRh30HaHiSdVhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "broker-factory": "^3.0.75",
+        "fast-unique-numbers": "^7.0.2",
+        "recorder-audio-worklet-processor": "^4.2.21",
+        "standardized-audio-context": "^25.3.41",
+        "subscribable-things": "^2.1.14",
+        "tslib": "^2.5.0",
+        "worker-factory": "^6.0.76"
+      }
+    },
+    "node_modules/recorder-audio-worklet-processor": {
+      "version": "4.2.21",
+      "resolved": "https://registry.npmjs.org/recorder-audio-worklet-processor/-/recorder-audio-worklet-processor-4.2.21.tgz",
+      "integrity": "sha512-oiiS2sp6eMxkvjt13yetSYUJvnAxBZk60mIxz0Vf/2lDWa/4svCyMLHIDzYKbHahkISd0UYyqLS9dI7xDlUOCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "tslib": "^2.5.0"
+      }
+    },
+    "node_modules/recorder-audio-worklet/node_modules/fast-unique-numbers": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/fast-unique-numbers/-/fast-unique-numbers-7.0.2.tgz",
+      "integrity": "sha512-xnqpsnu889bHbq5cbDMwCJ2BPf6kjFPMu+RHfqKvisRxeEbTOVxY5aW/ZNsZ/r8OlwatxmjdFEVQog2xAhLkvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "tslib": "^2.5.0"
+      },
+      "engines": {
+        "node": ">=14.15.4"
+      }
+    },
+    "node_modules/recorder-audio-worklet/node_modules/worker-factory": {
+      "version": "6.0.76",
+      "resolved": "https://registry.npmjs.org/worker-factory/-/worker-factory-6.0.76.tgz",
+      "integrity": "sha512-W1iBNPmE9p0asU4aFmYJYCnMxhkvk4qlKc660GlHxWgmflY64NxxTbmKqipu4K5p9LiKKPjqXfcQme6153BZEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "compilerr": "^10.0.2",
+        "fast-unique-numbers": "^7.0.2",
+        "tslib": "^2.5.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-persist": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
+      "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": ">4.0.0"
+      }
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/rxjs-interop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/rxjs-interop/-/rxjs-interop-2.0.0.tgz",
+      "integrity": "sha512-ASEq9atUw7lualXB+knvgtvwkCEvGWV2gDD/8qnASzBkzEARZck9JAyxmY8OS6Nc1pCPEgDTKNcx+YqqYfzArw==",
+      "license": "MIT"
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "devOptional": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/sonner": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.7.4.tgz",
+      "integrity": "sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stable-hash": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
+      "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/standardized-audio-context": {
+      "version": "25.3.77",
+      "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.77.tgz",
+      "integrity": "sha512-Ki9zNz6pKcC5Pi+QPjPyVsD9GwJIJWgryji0XL9cAJXMGyn+dPOf6Qik1AHei0+UNVcc4BOCa0hWLBzlwqsW/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.6",
+        "automation-events": "^7.0.9",
+        "tslib": "^2.7.0"
+      }
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/string.prototype.includes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
+      "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/style-to-js": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.14"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/subscribable-things": {
+      "version": "2.1.57",
+      "resolved": "https://registry.npmjs.org/subscribable-things/-/subscribable-things-2.1.57.tgz",
+      "integrity": "sha512-Ebcu2SJUntGnfJlTKc5jIGcDbuev4Ys2bRstzl5DUyzjWTZV9ymONZ0x8kEiN8NtnDlVuFe40EB8t3XvH8SWkw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "rxjs-interop": "^2.0.0",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "license": "ISC",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwind-merge": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.1.tgz",
+      "integrity": "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "license": "MIT"
+    },
+    "node_modules/unrs-resolver": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
+      "integrity": "sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.3.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.11.1",
+        "@unrs/resolver-binding-android-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-x64": "1.11.1",
+        "@unrs/resolver-binding-freebsd-x64": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-musl": "1.11.1",
+        "@unrs/resolver-binding-wasm32-wasi": "1.11.1",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-debounce": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.1.0.tgz",
+      "integrity": "sha512-lu87Za35V3n/MyMoEpD5zJv0k7hCn0p+V/fK2kWD+3k2u3kOCwO593UArbczg1fhfs2rqPEnHpULJ3KmGdDzvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/usehooks-ts": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.1.tgz",
+      "integrity": "sha512-I4diPp9Cq6ieSUH2wu+fDAVQO43xwtulo+fKEidHUwZPnYImbtkTjzIJYcDcJqxgmX31GVqNFURodvcgHcW0pA==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vaul": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",
+      "integrity": "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/web-vitals": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
+      "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
+      "integrity": "sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/worker-factory": {
+      "version": "7.0.48",
+      "resolved": "https://registry.npmjs.org/worker-factory/-/worker-factory-7.0.48.tgz",
+      "integrity": "sha512-CGmBy3tJvpBPjUvb0t4PrpKubUsfkI1Ohg0/GGFU2RvA9j/tiVYwKU8O7yu7gH06YtzbeJLzdUR29lmZKn5pag==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "fast-unique-numbers": "^9.0.26",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..3699384
--- /dev/null
+++ b/package.json
@@ -0,0 +1,81 @@
+{
+  "name": "eclassify_tailwind",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev-turbo": "next dev --turbo",
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "NODE_ENV=production NODE_PORT=8004 node server.js",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@react-google-maps/api": "^2.20.7",
+    "@reduxjs/toolkit": "^2.8.2",
+    "@stripe/react-stripe-js": "^3.7.0",
+    "@stripe/stripe-js": "^6.1.0",
+    "axios": "^1.10.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "firebase": "^11.9.1",
+    "html-react-parser": "^5.2.5",
+    "leaflet": "^1.9.4",
+    "libphonenumber-js": "^1.12.9",
+    "lucide-react": "^0.468.0",
+    "next": "^15.3.4",
+    "next-themes": "^0.4.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-dropzone": "^14.3.8",
+    "react-icons": "^5.5.0",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-intersection-observer": "^9.16.0",
+    "react-leaflet": "^5.0.0",
+    "react-media-recorder": "^1.7.1",
+    "react-phone-input-2": "^2.15.1",
+    "react-phone-number-input": "^3.4.14",
+    "react-photo-view": "^1.2.7",
+    "react-player": "^2.16.0",
+    "react-razorpay": "^3.0.1",
+    "react-redux": "^9.2.0",
+    "react-share": "^5.2.2",
+    "redux-persist": "^6.0.0",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "use-debounce": "^10.0.5",
+    "usehooks-ts": "^3.1.1",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.16",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "15.3.1",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17"
+  }
+}
\ No newline at end of file
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..1a69fd2
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/public/assets/Arrow.svg b/public/assets/Arrow.svg
new file mode 100644
index 0000000..8c16a3d
--- /dev/null
+++ b/public/assets/Arrow.svg
@@ -0,0 +1,14 @@
+<svg width="195" height="33" viewBox="0 0 195 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M101.124 14.5844H95.9099C94.7125 14.5844 93.7451 15.5607 93.7451 16.7583C93.7451 17.9559 94.7212 18.9279 95.9186 18.9279H101.129C102.326 18.9279 103.298 17.9516 103.298 16.754C103.298 15.5563 102.326 14.5844 101.129 14.5844H101.124Z" fill="black"/>
+<path d="M148.012 14.4498H147.995C146.273 14.4628 144.538 14.4759 142.789 14.4845C141.592 14.4932 140.624 15.4696 140.633 16.6672C140.642 17.8605 141.609 18.8238 142.802 18.8238H142.815C144.564 18.8151 146.303 18.8021 148.025 18.7891C149.223 18.7804 150.186 17.7997 150.177 16.6021C150.169 15.4088 149.201 14.4498 148.008 14.4498H148.012Z" fill="black"/>
+<path d="M38.6276 14.823H38.6016C36.8446 14.8447 35.105 14.8664 33.387 14.8881C32.1897 14.9054 31.2309 15.8905 31.2483 17.0881C31.2656 18.277 32.2331 19.2273 33.4174 19.2273C33.4261 19.2273 33.4391 19.2273 33.4478 19.2273C35.1614 19.2056 36.8967 19.1796 38.6537 19.1622C39.851 19.1492 40.8098 18.1642 40.7968 16.9666C40.7837 15.7776 39.8163 14.823 38.6276 14.823Z" fill="black"/>
+<path d="M163.643 14.2849H163.613C161.899 14.3066 160.164 14.3326 158.407 14.35C157.21 14.363 156.251 15.348 156.264 16.5457C156.277 17.7346 157.244 18.6892 158.433 18.6892H158.459C160.216 18.6676 161.956 18.6459 163.674 18.6242C164.871 18.6068 165.83 17.6218 165.812 16.4242C165.795 15.2352 164.827 14.2849 163.643 14.2849Z" fill="black"/>
+<path d="M22.9535 15.0703C21.1835 15.105 19.4439 15.1441 17.7389 15.1875C16.5416 15.2178 15.5958 16.2115 15.6219 17.4092C15.6522 18.5894 16.6153 19.5267 17.791 19.5267C17.8083 19.5267 17.8257 19.5267 17.843 19.5267C19.5436 19.4833 21.2789 19.4443 23.0446 19.4096C24.242 19.3835 25.192 18.3942 25.166 17.1965C25.14 15.9989 24.1509 15.0356 22.9535 15.0747V15.0703Z" fill="black"/>
+<path d="M69.8804 14.6234H69.8761C68.1321 14.6278 66.3925 14.6321 64.6658 14.6408C63.4685 14.6408 62.501 15.6214 62.5054 16.8191C62.5054 18.0124 63.4815 18.98 64.6745 18.98H64.6832C66.4098 18.9757 68.1451 18.967 69.8891 18.9627C71.0865 18.9627 72.0539 17.9863 72.0539 16.7887C72.0539 15.5911 71.0821 14.6234 69.8848 14.6234H69.8804Z" fill="black"/>
+<path d="M116.755 14.5713H111.545C110.348 14.58 109.376 15.552 109.376 16.7496C109.376 17.9472 110.348 18.9192 111.545 18.9192H116.755C117.953 18.9105 118.924 17.9385 118.92 16.7409C118.92 15.5433 117.948 14.5756 116.751 14.5756L116.755 14.5713Z" fill="black"/>
+<path d="M54.254 14.6885H54.241C52.4883 14.6972 50.753 14.7102 49.0307 14.7232C47.8334 14.7319 46.8703 15.7125 46.879 16.9102C46.8876 18.1035 47.8594 19.0624 49.0481 19.0624H49.0654C50.7877 19.0494 52.523 19.0364 54.2713 19.0277C55.4687 19.019 56.4361 18.0427 56.4275 16.8451C56.4188 15.6518 55.4513 14.6885 54.2583 14.6885H54.254Z" fill="black"/>
+<path d="M7.29683 15.5C5.50513 15.5651 3.76115 15.6345 2.07357 15.7082C0.876216 15.7603 -0.0521696 16.7757 -0.000110611 17.969C0.0519484 19.1319 1.0107 20.0432 2.16468 20.0432C2.19504 20.0432 2.22975 20.0432 2.26012 20.0432C3.93902 19.9694 5.66998 19.9 7.44866 19.8392C8.64602 19.7958 9.58308 18.7891 9.5397 17.5915C9.49632 16.3938 8.49852 15.4609 7.29249 15.5H7.29683Z" fill="black"/>
+<path d="M85.4982 14.5974H80.2966C79.0993 14.606 78.1275 15.578 78.1319 16.7757C78.1319 17.9733 79.1036 18.9409 80.301 18.9409H85.4982C86.6956 18.9323 87.6673 17.9603 87.6673 16.7626C87.6673 15.565 86.6956 14.593 85.4982 14.593V14.5974Z" fill="black"/>
+<path d="M132.386 14.5366H132.377L127.171 14.554C125.974 14.554 125.007 15.5303 125.007 16.7279C125.007 17.9256 125.978 18.8932 127.176 18.8932H127.18L132.39 18.8759C133.588 18.8759 134.555 17.8952 134.551 16.6976C134.551 15.5043 133.575 14.5366 132.382 14.5366H132.386Z" fill="black"/>
+<path d="M171.313 16.3287L165.821 33.0045C173.205 26.1788 185.248 19.5832 194.996 15.6431C185.039 12.2759 172.636 6.39184 164.866 0.00012207L171.313 16.3287Z" fill="black"/>
+</svg>
diff --git a/public/assets/Google Download.png b/public/assets/Google Download.png
new file mode 100644
index 0000000..3edf9a6
Binary files /dev/null and b/public/assets/Google Download.png differ
diff --git a/public/assets/Image1.png b/public/assets/Image1.png
new file mode 100644
index 0000000..9b79c3a
Binary files /dev/null and b/public/assets/Image1.png differ
diff --git a/public/assets/Image2.png b/public/assets/Image2.png
new file mode 100644
index 0000000..9456fea
Binary files /dev/null and b/public/assets/Image2.png differ
diff --git a/public/assets/Image3.png b/public/assets/Image3.png
new file mode 100644
index 0000000..ca3eb02
Binary files /dev/null and b/public/assets/Image3.png differ
diff --git a/public/assets/Image4.png b/public/assets/Image4.png
new file mode 100644
index 0000000..c94380b
Binary files /dev/null and b/public/assets/Image4.png differ
diff --git a/public/assets/Image5.png b/public/assets/Image5.png
new file mode 100644
index 0000000..13e0b01
Binary files /dev/null and b/public/assets/Image5.png differ
diff --git a/public/assets/Image6.png b/public/assets/Image6.png
new file mode 100644
index 0000000..3d20a56
Binary files /dev/null and b/public/assets/Image6.png differ
diff --git a/public/assets/Mail Verification.svg b/public/assets/Mail Verification.svg
new file mode 100644
index 0000000..3e2be68
--- /dev/null
+++ b/public/assets/Mail Verification.svg	
@@ -0,0 +1,56 @@
+<svg width="300" height="196" viewBox="0 0 300 196" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_162_754)">
+<path d="M155.855 0.767357L32.9009 79.5165L49.6522 195.105H242.997L267.099 95.7226L155.855 0.767357Z" fill="#F6F5FA"/>
+<path opacity="0.1" d="M155.855 0.767357L32.9009 79.5156L49.6531 195.104H242.997L267.099 95.7218L155.855 0.767357Z" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119.183 83.7827C119.186 83.3515 119.103 82.9241 118.94 82.5248C118.777 82.1255 118.536 81.7622 118.232 81.4556C117.928 81.149 117.566 80.9051 117.168 80.7379C116.769 80.5706 116.342 80.4833 115.909 80.4809H58.1799C57.7456 80.4794 57.3153 80.5632 56.9135 80.7275C56.5117 80.8918 56.1462 81.1334 55.8381 81.4385C55.5299 81.7437 55.2851 82.1063 55.1175 82.5058C54.9499 82.9053 54.8628 83.3338 54.8613 83.7668V120.105C54.8639 120.981 55.2146 121.82 55.8366 122.439C56.4586 123.058 57.3012 123.406 58.1799 123.406H115.872C116.306 123.407 116.736 123.322 117.137 123.157C117.539 122.992 117.903 122.749 118.211 122.443C118.518 122.138 118.762 121.775 118.929 121.375C119.095 120.975 119.181 120.546 119.182 120.114V83.7827H119.183Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M111.694 56.9547C111.694 56.5946 111.623 56.238 111.485 55.9052C111.346 55.5724 111.144 55.2701 110.889 55.0153C110.633 54.7606 110.33 54.5585 109.996 54.4206C109.663 54.2827 109.305 54.2116 108.944 54.2115H65.3838C64.6532 54.2108 63.9521 54.4993 63.4347 55.0137C62.9173 55.5281 62.6259 56.2262 62.6245 56.9547V85.9338L84.3219 102.248C85.1388 102.863 86.1349 103.197 87.159 103.197C88.1831 103.197 89.1793 102.863 89.9962 102.248L111.694 85.9338V56.9547Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M112.096 56.9556C112.095 56.1219 111.761 55.3228 111.17 54.7338C110.578 54.1449 109.776 53.8142 108.939 53.8144H65.3837C64.9699 53.8137 64.56 53.8943 64.1774 54.0516C63.7948 54.2088 63.447 54.4397 63.1538 54.731C62.8607 55.0222 62.628 55.3682 62.469 55.7492C62.31 56.1301 62.2278 56.5386 62.2271 56.9512V85.9347C62.2262 85.9964 62.2406 86.0573 62.269 86.1121C62.2974 86.1669 62.339 86.2139 62.3899 86.2488C62.3899 86.2488 77.6182 97.7132 84.0802 102.563C84.9656 103.233 86.0466 103.595 87.1581 103.595C88.2695 103.595 89.3505 103.233 90.2359 102.563C96.6961 97.7097 111.933 86.2488 111.933 86.2488C111.984 86.2139 112.026 86.1669 112.054 86.1121C112.083 86.0573 112.097 85.9964 112.096 85.9347V56.9556ZM111.3 56.9556V85.738C109.673 86.9574 95.8368 97.3682 89.7651 101.932C89.0143 102.494 88.1009 102.797 87.162 102.797C86.2232 102.797 85.3098 102.494 84.5589 101.932L63.0244 85.738V56.9556C63.0261 56.3313 63.2755 55.733 63.7183 55.2915C64.1611 54.8501 64.7611 54.6013 65.3873 54.5997H108.944C109.569 54.602 110.168 54.8512 110.61 55.2927C111.051 55.7343 111.299 56.3321 111.3 56.9556Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.7995 81.3068C55.7995 81.3068 76.3588 96.7674 84.0606 102.549C84.9529 103.221 86.0402 103.584 87.1579 103.584C88.2757 103.584 89.363 103.221 90.2553 102.549C97.9447 96.7674 118.515 81.3068 118.515 81.3068C118.597 81.2412 118.65 81.147 118.664 81.0436C118.678 80.9402 118.651 80.8354 118.59 80.7509C118.526 80.6671 118.432 80.6119 118.327 80.5975C118.222 80.5831 118.116 80.6107 118.032 80.6741C118.032 80.6741 97.473 96.1365 89.781 101.917C89.025 102.486 88.1037 102.794 87.1566 102.794C86.2095 102.794 85.2882 102.486 84.5323 101.917C76.8402 96.1365 56.2818 80.6741 56.2818 80.6741C56.1974 80.6154 56.0934 80.5914 55.9917 80.6073C55.8899 80.6232 55.7983 80.6777 55.7359 80.7594C55.6735 80.841 55.6452 80.9436 55.6569 81.0456C55.6686 81.1477 55.7203 81.2412 55.7995 81.3068Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.2952 64.4733H87.689C87.7946 64.4733 87.8959 64.4314 87.9706 64.357C88.0453 64.2825 88.0872 64.1815 88.0872 64.0762C88.0872 63.9709 88.0453 63.8699 87.9706 63.7954C87.8959 63.721 87.7946 63.6791 87.689 63.6791H70.2952C70.1896 63.6791 70.0883 63.721 70.0136 63.7954C69.9389 63.8699 69.897 63.9709 69.897 64.0762C69.897 64.1815 69.9389 64.2825 70.0136 64.357C70.0883 64.4314 70.1896 64.4733 70.2952 64.4733Z" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.2706 71.4438H103.728C103.835 71.4438 103.937 71.4016 104.013 71.3264C104.088 71.2512 104.13 71.1492 104.13 71.0428C104.13 70.9364 104.088 70.8344 104.013 70.7592C103.937 70.684 103.835 70.6418 103.728 70.6418H70.2679C70.1613 70.6418 70.059 70.684 69.9835 70.7592C69.9081 70.8344 69.8657 70.9364 69.8657 71.0428C69.8657 71.1492 69.9081 71.2512 69.9835 71.3264C70.059 71.4016 70.1613 71.4438 70.2679 71.4438" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.2702 78.4241H103.728C103.782 78.4267 103.837 78.4182 103.888 78.3992C103.939 78.3802 103.985 78.351 104.025 78.3136C104.064 78.2761 104.095 78.231 104.117 78.1811C104.138 78.1311 104.149 78.0774 104.149 78.0231C104.149 77.9688 104.138 77.915 104.117 77.8651C104.095 77.8152 104.064 77.7701 104.025 77.7326C103.985 77.6951 103.939 77.666 103.888 77.647C103.837 77.628 103.782 77.6195 103.728 77.6221H70.2676C70.1642 77.6269 70.0666 77.6713 69.9951 77.7459C69.9237 77.8206 69.8838 77.9199 69.8838 78.0231C69.8838 78.1263 69.9237 78.2256 69.9951 78.3002C70.0666 78.3749 70.1642 78.4193 70.2676 78.4241" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.2706 85.3903H103.728C103.835 85.3903 103.937 85.3481 104.012 85.273C104.088 85.1979 104.13 85.096 104.13 84.9897C104.13 84.8835 104.088 84.7816 104.012 84.7065C103.937 84.6313 103.835 84.5891 103.728 84.5891H70.268C70.1614 84.5891 70.0592 84.6313 69.9839 84.7065C69.9085 84.7816 69.8662 84.8835 69.8662 84.9897C69.8662 85.096 69.9085 85.1979 69.9839 85.273C70.0592 85.3481 70.1614 85.3903 70.268 85.3903" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M113.974 107.143L115.715 110.269C115.74 110.315 115.774 110.355 115.815 110.387C115.856 110.42 115.902 110.444 115.952 110.459C116.002 110.473 116.055 110.478 116.106 110.472C116.158 110.466 116.208 110.451 116.254 110.426C116.3 110.401 116.34 110.367 116.373 110.327C116.405 110.286 116.429 110.24 116.444 110.19C116.459 110.14 116.463 110.088 116.458 110.036C116.452 109.984 116.436 109.934 116.411 109.889L114.67 106.754C114.619 106.663 114.533 106.595 114.432 106.566C114.332 106.537 114.223 106.548 114.13 106.597C114.038 106.65 113.97 106.736 113.941 106.839C113.912 106.941 113.924 107.05 113.975 107.144" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M60.6821 51.8821L49.8033 41.0397C49.7664 41.0029 49.7226 40.9738 49.6744 40.9538C49.6262 40.9339 49.5745 40.9237 49.5224 40.9237C49.4702 40.9237 49.4185 40.9339 49.3703 40.9538C49.3221 40.9738 49.2783 41.0029 49.2414 41.0397C49.2045 41.0765 49.1752 41.1202 49.1552 41.1683C49.1353 41.2163 49.125 41.2678 49.125 41.3199C49.125 41.3719 49.1353 41.4234 49.1552 41.4715C49.1752 41.5196 49.2045 41.5632 49.2414 41.6L60.1193 52.4424C60.1562 52.4792 60.2 52.5083 60.2482 52.5283C60.2964 52.5482 60.3481 52.5584 60.4002 52.5584C60.4524 52.5584 60.5041 52.5482 60.5523 52.5283C60.6005 52.5083 60.6443 52.4792 60.6812 52.4424C60.7181 52.4056 60.7474 52.3619 60.7673 52.3138C60.7873 52.2658 60.7976 52.2143 60.7976 52.1622C60.7976 52.1102 60.7873 52.0587 60.7673 52.0106C60.7474 51.9625 60.719 51.9189 60.6821 51.8821Z" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M65.3782 47.0909L63.2278 39.088C63.1978 38.9896 63.1307 38.9067 63.0406 38.8568C62.9505 38.8068 62.8444 38.7937 62.7448 38.8203C62.6452 38.8469 62.5599 38.911 62.5068 38.9992C62.4538 39.0873 62.4372 39.1925 62.4605 39.2927L64.6109 47.2956C64.6409 47.394 64.708 47.4769 64.7981 47.5268C64.8882 47.5767 64.9943 47.5898 65.0939 47.5632C65.1935 47.5367 65.2788 47.4725 65.3318 47.3844C65.3849 47.2963 65.4015 47.191 65.3782 47.0909Z" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.5163 56.3556L46.8437 54.0385C46.7433 54.0153 46.6377 54.0319 46.5493 54.0848C46.4609 54.1377 46.3966 54.2227 46.37 54.322C46.3433 54.4213 46.3564 54.5271 46.4065 54.6169C46.4566 54.7068 46.5397 54.7737 46.6384 54.8035L55.3109 57.1206C55.3612 57.1371 55.4143 57.1434 55.4671 57.1391C55.5198 57.1348 55.5712 57.1201 55.6181 57.0957C55.6651 57.0714 55.7067 57.038 55.7405 56.9974C55.7744 56.9568 55.7997 56.9099 55.8151 56.8594C55.8305 56.8089 55.8356 56.7558 55.8301 56.7034C55.8247 56.6509 55.8088 56.6 55.7833 56.5537C55.7579 56.5074 55.7234 56.4667 55.682 56.4339C55.6405 56.4011 55.5929 56.3769 55.5419 56.3627L55.5163 56.3556Z" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M175.024 73.7803C175.826 73.8827 176.628 73.9506 177.423 73.9929C177.474 73.9967 177.525 73.9903 177.574 73.9742C177.622 73.9582 177.667 73.9327 177.706 73.8993C177.745 73.8658 177.777 73.8251 177.8 73.7794C177.823 73.7337 177.837 73.6839 177.84 73.633V73.6188C177.845 73.5141 177.808 73.4118 177.738 73.3339C177.667 73.256 177.569 73.2087 177.464 73.2024C176.687 73.168 175.912 73.0921 175.118 72.9977C175.068 72.9899 175.016 72.9922 174.966 73.0044C174.917 73.0165 174.87 73.0384 174.829 73.0687C174.788 73.0989 174.753 73.137 174.727 73.1807C174.701 73.2244 174.683 73.2728 174.676 73.3232V73.3382C174.664 73.4435 174.695 73.549 174.761 73.6317C174.828 73.7143 174.924 73.7674 175.03 73.7794M182.247 73.8818C183.058 73.7935 183.86 73.6859 184.636 73.5412C184.739 73.5243 184.831 73.4674 184.892 73.3828C184.953 73.2983 184.978 73.1931 184.962 73.0903V73.0824C184.941 72.9799 184.882 72.8892 184.796 72.8291C184.711 72.769 184.605 72.744 184.501 72.7594C183.734 72.9041 182.958 73.0147 182.172 73.0912C182.068 73.1023 181.972 73.1541 181.906 73.2352C181.84 73.3163 181.808 73.4203 181.818 73.5244C181.833 73.6271 181.886 73.7204 181.967 73.7859C182.047 73.8513 182.15 73.884 182.254 73.8774M168.006 72.1082C168.773 72.38 169.542 72.6182 170.307 72.8309C170.408 72.8554 170.515 72.84 170.606 72.7877C170.696 72.7354 170.763 72.6504 170.792 72.5503C170.819 72.4499 170.806 72.3427 170.754 72.2522C170.703 72.1617 170.617 72.0953 170.516 72.0677H170.509C169.769 71.8638 169.017 71.6265 168.267 71.3618C168.167 71.3286 168.059 71.3358 167.965 71.3819C167.871 71.428 167.799 71.5092 167.764 71.608C167.746 71.6556 167.738 71.7064 167.74 71.7572C167.742 71.8081 167.754 71.8581 167.775 71.9044C167.796 71.9507 167.826 71.9924 167.863 72.027C167.901 72.0617 167.945 72.0887 167.993 72.1065H168.002M189.303 72.3112C190.07 72.0465 190.821 71.75 191.555 71.435C191.604 71.4138 191.647 71.3834 191.683 71.3454C191.72 71.3074 191.748 71.2627 191.767 71.2137C191.786 71.1648 191.795 71.1125 191.794 71.0601C191.793 71.0076 191.781 70.9558 191.76 70.9078C191.739 70.8598 191.708 70.8164 191.67 70.7801C191.632 70.7439 191.587 70.7155 191.538 70.6965C191.489 70.6775 191.437 70.6684 191.384 70.6696C191.332 70.6708 191.28 70.6823 191.231 70.7035C190.523 71.0185 189.789 71.3071 189.047 71.563C188.997 71.5804 188.951 71.6074 188.912 71.6424C188.873 71.6775 188.841 71.7199 188.818 71.7673C188.795 71.8147 188.782 71.866 188.779 71.9185C188.776 71.9709 188.784 72.0234 188.801 72.073C188.818 72.1214 188.845 72.166 188.879 72.2042C188.914 72.2425 188.955 72.2736 189.002 72.2958C189.048 72.318 189.098 72.3309 189.15 72.3337C189.201 72.3365 189.253 72.3291 189.301 72.3121M161.449 69.1056C162.157 69.5141 162.865 69.8882 163.573 70.2368C163.618 70.2607 163.667 70.2756 163.718 70.2805C163.769 70.2854 163.82 70.2803 163.869 70.2655C163.918 70.2507 163.963 70.2264 164.003 70.1941C164.042 70.1617 164.075 70.122 164.099 70.0771L164.104 70.0665C164.15 69.9717 164.157 69.863 164.124 69.7631C164.091 69.6633 164.02 69.5801 163.927 69.5309C163.234 69.1903 162.544 68.8162 161.846 68.4253C161.801 68.3984 161.752 68.3805 161.701 68.3725C161.65 68.3645 161.598 68.3666 161.548 68.3788C161.497 68.3909 161.45 68.4128 161.408 68.4432C161.366 68.4736 161.331 68.5119 161.304 68.5559C161.277 68.5999 161.259 68.6488 161.251 68.6998C161.243 68.7508 161.245 68.8028 161.257 68.8529C161.269 68.9031 161.291 68.9503 161.322 68.992C161.352 69.0337 161.391 69.069 161.435 69.0959L161.453 69.1056M195.805 69.1568C196.488 68.7156 197.144 68.2471 197.777 67.7618C197.822 67.7317 197.861 67.6926 197.891 67.6467C197.921 67.6009 197.941 67.5494 197.949 67.4955C197.958 67.4417 197.956 67.3865 197.942 67.3337C197.928 67.2808 197.904 67.2314 197.87 67.1885C197.836 67.1456 197.793 67.1102 197.745 67.0845C197.697 67.0588 197.644 67.0434 197.589 67.0392C197.535 67.035 197.48 67.0422 197.428 67.0603C197.376 67.0783 197.329 67.1069 197.289 67.1441C196.675 67.6118 196.034 68.0627 195.37 68.488C195.28 68.5442 195.216 68.6339 195.192 68.7372C195.169 68.8406 195.187 68.9491 195.243 69.039C195.3 69.1288 195.39 69.1927 195.493 69.2164C195.597 69.2402 195.706 69.2219 195.796 69.1656L195.804 69.1603M155.48 65.1544C156.034 65.5197 156.589 65.9115 157.143 66.32C157.237 66.3791 157.32 66.4471 157.417 66.5071C157.459 66.5372 157.507 66.5588 157.557 66.5706C157.608 66.5824 157.66 66.5842 157.711 66.5759C157.762 66.5676 157.811 66.5493 157.855 66.5221C157.899 66.4949 157.937 66.4594 157.967 66.4175C157.998 66.3756 158.019 66.3282 158.031 66.278C158.043 66.2278 158.045 66.1757 158.036 66.1248C158.028 66.0739 158.01 66.0251 157.982 65.9812C157.955 65.9373 157.919 65.8993 157.877 65.8691C157.789 65.8012 157.707 65.7412 157.621 65.6732C157.049 65.2562 156.481 64.865 155.916 64.4997C155.828 64.4422 155.722 64.4214 155.62 64.4421C155.517 64.4628 155.427 64.5232 155.37 64.61C155.312 64.6968 155.291 64.803 155.312 64.9051C155.332 65.0072 155.393 65.0969 155.48 65.1544ZM201.34 64.5253C201.895 63.9294 202.418 63.3171 202.909 62.6882C202.971 62.6043 202.997 62.4999 202.983 62.397C202.969 62.294 202.916 62.2005 202.834 62.1359C202.793 62.1038 202.746 62.0801 202.696 62.0661C202.646 62.0521 202.594 62.048 202.542 62.0541C202.491 62.0603 202.441 62.0765 202.396 62.1019C202.35 62.1273 202.31 62.1613 202.278 62.2021C201.8 62.8144 201.298 63.41 200.761 63.988C200.69 64.0661 200.654 64.1687 200.658 64.2736C200.663 64.3785 200.709 64.4774 200.785 64.5491C200.823 64.5837 200.868 64.6105 200.916 64.628C200.965 64.6454 201.016 64.6532 201.068 64.6508C201.119 64.6484 201.17 64.6359 201.216 64.6141C201.263 64.5923 201.305 64.5615 201.339 64.5235M122.136 64.2085C122.786 63.783 123.461 63.3967 124.157 63.0518C124.204 63.0287 124.245 62.9966 124.279 62.9573C124.313 62.9181 124.339 62.8725 124.355 62.8232C124.371 62.7739 124.377 62.7219 124.373 62.6702C124.368 62.6186 124.354 62.5683 124.33 62.5224V62.518C124.281 62.4249 124.197 62.3544 124.097 62.3215C123.997 62.2886 123.888 62.2958 123.793 62.3415C123.067 62.7054 122.363 63.1114 121.685 63.5574C121.643 63.5853 121.606 63.6214 121.578 63.6635C121.549 63.7056 121.53 63.7528 121.519 63.8026C121.509 63.8524 121.509 63.9036 121.519 63.9535C121.529 64.0033 121.548 64.0507 121.577 64.093L121.583 64.1018C121.64 64.1881 121.729 64.2483 121.83 64.2691C121.932 64.29 122.038 64.2698 122.124 64.213L122.138 64.2041M149.223 61.8738C149.939 62.1544 150.655 62.4782 151.381 62.8268C151.476 62.8736 151.586 62.8808 151.686 62.8469C151.787 62.813 151.869 62.7407 151.916 62.6459C151.963 62.5511 151.971 62.4416 151.937 62.3415C151.903 62.2414 151.83 62.1589 151.735 62.1121C150.993 61.7591 150.25 61.4318 149.523 61.1415C149.475 61.1219 149.425 61.1119 149.374 61.1118C149.323 61.1117 149.272 61.1217 149.225 61.1411C149.178 61.1605 149.135 61.189 149.099 61.225C149.063 61.2609 149.034 61.3036 149.015 61.3506V61.363C148.975 61.459 148.976 61.5667 149.016 61.6623C149.057 61.7579 149.133 61.8336 149.23 61.873M128.508 61.2606C129.216 61.0312 129.967 60.8097 130.769 60.6138C130.871 60.5874 130.96 60.5216 131.014 60.4307C131.068 60.3398 131.084 60.2312 131.059 60.1285C131.033 60.0274 130.969 59.9403 130.879 59.8862C130.79 59.832 130.683 59.8151 130.581 59.8391C129.754 60.043 128.988 60.2724 128.261 60.5027C128.211 60.5189 128.165 60.5447 128.125 60.5787C128.085 60.6128 128.052 60.6543 128.028 60.7009C127.981 60.795 127.972 60.9043 128.005 61.0047C128.038 61.1051 128.109 61.1884 128.204 61.2362C128.298 61.284 128.408 61.2934 128.508 61.2606ZM142.439 60.0244C143.198 60.1347 143.965 60.2794 144.75 60.4656C144.853 60.4891 144.961 60.4711 145.051 60.4153C145.14 60.3596 145.204 60.2708 145.228 60.1682C145.25 60.0659 145.231 59.9592 145.175 59.8703C145.12 59.7815 145.032 59.7175 144.931 59.6918C144.129 59.5047 143.338 59.36 142.558 59.2409C142.506 59.2293 142.453 59.2281 142.4 59.2375C142.348 59.2469 142.298 59.2667 142.254 59.2956C142.209 59.3246 142.171 59.3622 142.141 59.4061C142.111 59.4501 142.091 59.4995 142.081 59.5515C142.071 59.6035 142.071 59.657 142.082 59.7088C142.093 59.7607 142.114 59.8098 142.144 59.8533C142.175 59.8969 142.213 59.9339 142.258 59.9622C142.303 59.9905 142.353 60.0096 142.406 60.0182C142.417 60.0209 142.427 60.0236 142.439 60.0244ZM135.404 59.8312C136.163 59.7632 136.948 59.7209 137.758 59.7121C137.862 59.7076 137.961 59.6638 138.034 59.5896C138.107 59.5154 138.149 59.4163 138.151 59.3124C138.149 59.2077 138.106 59.1079 138.031 59.0347C137.956 58.9614 137.855 58.9208 137.75 58.9215C136.923 58.9303 136.112 58.9727 135.336 59.0406C135.233 59.0496 135.138 59.0987 135.072 59.1773C135.006 59.2558 134.973 59.3574 134.982 59.4597V59.4738C134.993 59.5764 135.044 59.6706 135.123 59.7364C135.203 59.8023 135.305 59.8347 135.408 59.8268" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.127 187.914C125.903 187.959 126.705 187.983 127.524 187.991C127.576 187.992 127.627 187.983 127.675 187.964C127.723 187.946 127.767 187.918 127.805 187.882C127.842 187.846 127.872 187.804 127.892 187.757C127.913 187.71 127.924 187.659 127.925 187.607V187.601C127.926 187.496 127.885 187.395 127.811 187.321C127.738 187.246 127.637 187.203 127.532 187.201C126.722 187.192 125.939 187.167 125.169 187.125C125.064 187.119 124.962 187.156 124.883 187.226C124.805 187.295 124.757 187.393 124.751 187.498C124.743 187.6 124.775 187.701 124.842 187.779C124.908 187.857 125.003 187.906 125.105 187.914H125.125M132.316 187.826C133.101 187.767 133.894 187.69 134.706 187.597C134.758 187.591 134.808 187.576 134.854 187.551C134.901 187.526 134.941 187.493 134.974 187.452C135.007 187.411 135.031 187.365 135.046 187.315C135.061 187.264 135.066 187.212 135.06 187.16V187.156C135.048 187.05 134.994 186.954 134.912 186.888C134.829 186.822 134.723 186.791 134.617 186.803C133.824 186.896 133.039 186.973 132.262 187.032C132.158 187.039 132.061 187.087 131.992 187.166C131.923 187.245 131.888 187.347 131.895 187.451V187.458C131.905 187.562 131.955 187.659 132.035 187.727C132.114 187.795 132.217 187.829 132.322 187.824M117.985 186.99C118.754 187.15 119.546 187.296 120.357 187.424C120.461 187.439 120.567 187.412 120.651 187.35C120.736 187.288 120.793 187.195 120.809 187.091C120.825 186.988 120.799 186.883 120.737 186.799C120.675 186.714 120.583 186.658 120.479 186.642C119.677 186.514 118.909 186.377 118.15 186.216C118.047 186.195 117.94 186.216 117.853 186.273C117.765 186.33 117.703 186.42 117.681 186.522C117.67 186.573 117.669 186.625 117.679 186.676C117.688 186.726 117.707 186.775 117.735 186.818C117.763 186.862 117.8 186.899 117.842 186.929C117.885 186.958 117.933 186.979 117.984 186.99M139.454 186.879C140.223 186.735 141.008 186.572 141.8 186.395C141.901 186.374 141.989 186.314 142.046 186.228C142.102 186.141 142.122 186.037 142.1 185.936V185.926C142.078 185.824 142.017 185.735 141.929 185.677C141.841 185.62 141.734 185.6 141.631 185.62C140.846 185.797 140.07 185.951 139.302 186.097C139.251 186.106 139.203 186.126 139.159 186.154C139.116 186.182 139.078 186.218 139.049 186.261C139.02 186.304 138.999 186.351 138.988 186.402C138.977 186.453 138.977 186.505 138.986 186.556C139.006 186.66 139.066 186.753 139.154 186.813C139.242 186.874 139.349 186.897 139.454 186.879ZM111.074 184.937C111.808 185.228 112.559 185.499 113.343 185.754C113.392 185.771 113.444 185.777 113.496 185.773C113.548 185.769 113.598 185.755 113.644 185.732C113.691 185.709 113.732 185.676 113.766 185.637C113.8 185.598 113.825 185.553 113.842 185.503C113.858 185.454 113.864 185.402 113.86 185.351C113.856 185.299 113.842 185.249 113.819 185.203C113.796 185.157 113.763 185.115 113.724 185.082C113.685 185.048 113.639 185.022 113.59 185.006C112.822 184.752 112.08 184.488 111.372 184.199C111.273 184.162 111.162 184.165 111.065 184.208C110.968 184.251 110.891 184.33 110.852 184.428C110.833 184.476 110.823 184.527 110.824 184.578C110.824 184.63 110.835 184.68 110.855 184.728C110.876 184.775 110.905 184.817 110.942 184.853C110.979 184.889 111.023 184.917 111.07 184.936M146.438 185.252L148.739 184.635C148.789 184.622 148.835 184.599 148.877 184.568C148.918 184.537 148.952 184.498 148.978 184.453C149.005 184.409 149.022 184.359 149.029 184.308C149.035 184.257 149.032 184.205 149.019 184.156V184.151C148.992 184.05 148.926 183.964 148.835 183.911C148.744 183.858 148.636 183.843 148.534 183.87C147.757 184.082 146.99 184.286 146.233 184.482C146.131 184.51 146.045 184.576 145.992 184.667C145.939 184.758 145.924 184.866 145.951 184.968C145.979 185.07 146.045 185.157 146.136 185.211C146.227 185.265 146.336 185.281 146.439 185.257M153.341 183.352C154.093 183.139 154.861 182.918 155.628 182.695C155.73 182.666 155.816 182.598 155.867 182.506C155.918 182.413 155.931 182.304 155.901 182.203C155.872 182.101 155.804 182.016 155.711 181.965C155.618 181.914 155.509 181.901 155.408 181.93C154.639 182.152 153.881 182.371 153.121 182.594C153.021 182.62 152.936 182.685 152.885 182.773C152.833 182.862 152.819 182.968 152.845 183.067V183.077C152.873 183.178 152.94 183.264 153.032 183.316C153.123 183.367 153.232 183.381 153.333 183.353H153.338M104.638 181.702C105.294 182.119 105.985 182.519 106.71 182.919C106.803 182.966 106.911 182.976 107.011 182.946C107.112 182.917 107.196 182.849 107.247 182.758C107.273 182.713 107.289 182.664 107.296 182.613C107.302 182.562 107.298 182.51 107.285 182.46C107.271 182.411 107.247 182.364 107.216 182.324C107.184 182.283 107.145 182.249 107.1 182.224H107.094C106.377 181.834 105.704 181.441 105.059 181.035C104.969 180.98 104.862 180.962 104.759 180.986C104.657 181.01 104.568 181.074 104.513 181.163C104.457 181.249 104.438 181.354 104.46 181.455C104.482 181.556 104.543 181.643 104.63 181.699L104.641 181.706M160.208 181.353C160.959 181.132 161.728 180.901 162.485 180.672C162.587 180.643 162.673 180.576 162.725 180.484C162.776 180.392 162.789 180.284 162.761 180.182C162.728 180.084 162.658 180.001 162.566 179.952C162.474 179.903 162.367 179.89 162.266 179.918C161.499 180.147 160.739 180.369 159.979 180.599C159.881 180.625 159.798 180.689 159.747 180.776C159.696 180.864 159.682 180.968 159.708 181.066L159.714 181.082C159.728 181.133 159.752 181.18 159.784 181.221C159.816 181.262 159.857 181.296 159.902 181.321C159.948 181.347 159.998 181.363 160.05 181.369C160.102 181.375 160.155 181.371 160.205 181.357M167.055 179.327C167.815 179.098 168.575 178.876 169.342 178.646C169.392 178.631 169.438 178.606 169.479 178.573C169.519 178.541 169.552 178.5 169.577 178.454C169.601 178.408 169.617 178.358 169.622 178.307C169.627 178.255 169.622 178.203 169.607 178.153C169.592 178.103 169.567 178.057 169.534 178.017C169.501 177.977 169.46 177.943 169.414 177.919C169.368 177.894 169.318 177.879 169.266 177.874C169.214 177.869 169.162 177.874 169.112 177.889C168.353 178.12 167.585 178.341 166.825 178.57C166.725 178.601 166.64 178.67 166.59 178.762C166.541 178.855 166.53 178.963 166.561 179.064C166.591 179.164 166.66 179.248 166.753 179.298C166.846 179.347 166.955 179.358 167.055 179.327ZM98.9137 177.321C99.4677 177.839 100.064 178.374 100.722 178.909C100.804 178.971 100.907 179 101.009 178.988C101.112 178.977 101.206 178.926 101.272 178.847C101.338 178.768 101.371 178.667 101.363 178.564C101.356 178.462 101.31 178.366 101.233 178.297C100.584 177.767 99.9943 177.251 99.4633 176.749C99.3882 176.677 99.2876 176.638 99.1834 176.64C99.0792 176.641 98.98 176.684 98.9075 176.759L98.9005 176.767C98.8651 176.803 98.8372 176.845 98.8183 176.892C98.7995 176.939 98.79 176.988 98.7905 177.039C98.791 177.089 98.8014 177.139 98.8212 177.185C98.841 177.231 98.8697 177.273 98.9058 177.309L98.9173 177.319M173.917 177.309L176.204 176.646C176.305 176.618 176.391 176.551 176.442 176.459C176.494 176.368 176.507 176.26 176.478 176.16C176.45 176.059 176.383 175.974 176.291 175.922C176.2 175.871 176.092 175.858 175.991 175.886H175.982C175.215 176.108 174.455 176.32 173.697 176.543C173.596 176.573 173.511 176.642 173.459 176.734C173.408 176.826 173.395 176.934 173.423 177.036C173.437 177.086 173.461 177.133 173.494 177.174C173.527 177.215 173.567 177.249 173.613 177.274C173.659 177.299 173.709 177.315 173.761 177.321C173.813 177.327 173.866 177.322 173.916 177.308M180.784 175.351C181.551 175.138 182.311 174.933 183.078 174.721C183.18 174.695 183.266 174.63 183.319 174.54C183.372 174.45 183.388 174.343 183.362 174.242C183.333 174.142 183.266 174.056 183.175 174.004C183.084 173.951 182.976 173.936 182.874 173.961L180.573 174.6C180.474 174.625 180.389 174.688 180.337 174.775C180.284 174.862 180.269 174.967 180.293 175.066L180.299 175.083C180.312 175.133 180.335 175.179 180.366 175.219C180.398 175.26 180.437 175.294 180.481 175.319C180.525 175.345 180.575 175.361 180.625 175.368C180.676 175.375 180.728 175.371 180.777 175.358H180.786M94.2376 171.819C94.6642 172.51 95.1342 173.172 95.6447 173.803C95.712 173.884 95.8087 173.936 95.914 173.947C96.0193 173.958 96.1247 173.928 96.2075 173.862C96.2478 173.83 96.2814 173.79 96.3062 173.745C96.331 173.7 96.3467 173.65 96.3523 173.599C96.3579 173.548 96.3533 173.496 96.3388 173.447C96.3243 173.398 96.3001 173.352 96.2677 173.311C95.7811 172.709 95.3311 172.078 94.9199 171.421C94.8936 171.377 94.8587 171.338 94.8173 171.307C94.7758 171.275 94.7286 171.253 94.6783 171.239C94.628 171.226 94.5756 171.223 94.5241 171.231C94.4727 171.238 94.4231 171.255 94.3783 171.281C94.3335 171.307 94.2944 171.342 94.263 171.384C94.2317 171.425 94.2089 171.472 94.1958 171.522C94.1827 171.572 94.1797 171.624 94.1869 171.676C94.1941 171.727 94.2113 171.777 94.2376 171.821M187.689 173.514L189.99 172.929C190.091 172.904 190.179 172.84 190.233 172.752C190.288 172.663 190.305 172.556 190.28 172.455C190.254 172.352 190.188 172.265 190.097 172.21C190.007 172.156 189.898 172.14 189.795 172.164C189.028 172.352 188.258 172.548 187.484 172.752C187.383 172.777 187.296 172.841 187.243 172.93C187.189 173.019 187.173 173.125 187.198 173.226V173.238C187.226 173.339 187.293 173.424 187.383 173.476C187.474 173.528 187.581 173.543 187.683 173.518M194.599 171.821C195.376 171.645 196.149 171.468 196.92 171.292C196.971 171.282 197.019 171.262 197.062 171.233C197.105 171.204 197.142 171.167 197.17 171.124C197.199 171.081 197.219 171.033 197.229 170.983C197.238 170.932 197.238 170.88 197.228 170.829V170.823C197.204 170.72 197.14 170.631 197.051 170.574C196.962 170.517 196.854 170.496 196.75 170.517C195.983 170.687 195.206 170.87 194.421 171.046C194.37 171.058 194.322 171.08 194.279 171.11C194.237 171.14 194.2 171.178 194.173 171.222C194.145 171.266 194.126 171.315 194.117 171.367C194.109 171.418 194.11 171.47 194.122 171.521C194.133 171.572 194.155 171.62 194.185 171.662C194.215 171.705 194.254 171.741 194.298 171.769C194.342 171.796 194.391 171.815 194.443 171.824C194.494 171.832 194.547 171.831 194.598 171.819M236.755 170.06C237.508 170.307 238.24 170.589 238.958 170.884C239.005 170.906 239.056 170.918 239.107 170.92C239.159 170.923 239.211 170.915 239.259 170.897C239.308 170.879 239.352 170.852 239.391 170.818C239.429 170.783 239.46 170.741 239.481 170.694C239.503 170.647 239.516 170.597 239.518 170.545C239.52 170.494 239.512 170.442 239.494 170.394C239.477 170.345 239.45 170.301 239.415 170.263C239.38 170.225 239.338 170.194 239.291 170.172L239.265 170.161C238.54 169.847 237.78 169.567 237.013 169.312C236.965 169.294 236.913 169.287 236.862 169.289C236.811 169.292 236.76 169.304 236.714 169.326C236.667 169.348 236.626 169.379 236.591 169.417C236.557 169.455 236.53 169.499 236.513 169.547V169.559C236.481 169.658 236.489 169.766 236.535 169.859C236.581 169.953 236.662 170.025 236.761 170.06M201.582 170.332C202.367 170.179 203.141 170.035 203.918 169.898C204.022 169.88 204.115 169.821 204.176 169.735C204.237 169.649 204.261 169.542 204.243 169.438C204.224 169.335 204.166 169.242 204.079 169.182C203.993 169.121 203.886 169.097 203.782 169.115C202.997 169.261 202.22 169.405 201.436 169.556C201.385 169.565 201.337 169.583 201.294 169.61C201.251 169.637 201.213 169.672 201.183 169.714C201.154 169.755 201.133 169.802 201.121 169.852C201.11 169.902 201.109 169.953 201.117 170.004V170.015C201.138 170.117 201.198 170.207 201.284 170.266C201.37 170.325 201.476 170.347 201.579 170.328M208.608 169.129C209.405 169.011 210.187 168.909 210.962 168.806C211.014 168.8 211.064 168.783 211.109 168.757C211.154 168.731 211.193 168.697 211.225 168.656C211.257 168.615 211.28 168.568 211.294 168.518C211.307 168.468 211.311 168.416 211.304 168.364C211.297 168.313 211.281 168.263 211.255 168.218C211.229 168.173 211.194 168.134 211.153 168.102C211.112 168.071 211.065 168.047 211.015 168.034C210.965 168.02 210.912 168.017 210.861 168.024C210.076 168.117 209.29 168.228 208.497 168.346C208.445 168.353 208.396 168.37 208.351 168.395C208.306 168.421 208.266 168.455 208.234 168.496C208.203 168.537 208.179 168.584 208.166 168.634C208.152 168.684 208.149 168.736 208.155 168.788C208.17 168.893 208.226 168.987 208.311 169.051C208.396 169.115 208.503 169.144 208.608 169.129ZM229.866 168.499C230.662 168.61 231.437 168.738 232.204 168.882C232.255 168.892 232.307 168.891 232.358 168.881C232.408 168.87 232.456 168.85 232.499 168.821C232.542 168.791 232.579 168.754 232.607 168.711C232.635 168.668 232.655 168.62 232.664 168.569C232.683 168.465 232.66 168.358 232.601 168.27C232.542 168.183 232.451 168.122 232.347 168.1C231.572 167.956 230.778 167.829 229.977 167.717C229.873 167.704 229.769 167.732 229.686 167.795C229.603 167.858 229.549 167.951 229.534 168.054C229.519 168.157 229.546 168.261 229.608 168.345C229.67 168.428 229.762 168.484 229.865 168.5M215.688 168.313C216.485 168.246 217.275 168.195 218.049 168.152C218.154 168.147 218.253 168.1 218.324 168.021C218.394 167.943 218.431 167.84 218.425 167.735C218.424 167.684 218.412 167.634 218.391 167.587C218.37 167.541 218.34 167.499 218.302 167.464C218.265 167.429 218.221 167.402 218.173 167.384C218.126 167.366 218.075 167.357 218.023 167.359H218.007C217.222 167.403 216.42 167.453 215.617 167.521C215.512 167.53 215.415 167.579 215.346 167.658C215.278 167.738 215.243 167.841 215.251 167.946C215.261 168.052 215.312 168.149 215.394 168.218C215.475 168.286 215.58 168.32 215.686 168.311M222.792 168.032C223.588 168.032 224.378 168.057 225.155 168.091C225.261 168.096 225.364 168.058 225.442 167.987C225.519 167.915 225.566 167.816 225.57 167.711C225.574 167.605 225.536 167.503 225.465 167.425C225.393 167.348 225.294 167.302 225.188 167.297C224.403 167.263 223.601 167.238 222.792 167.238C222.742 167.238 222.691 167.247 222.644 167.266C222.596 167.284 222.553 167.312 222.517 167.348C222.48 167.383 222.451 167.425 222.431 167.472C222.411 167.519 222.4 167.569 222.4 167.619V167.63C222.399 167.735 222.44 167.836 222.514 167.91C222.587 167.985 222.687 168.028 222.792 168.03" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119.79 168.721C119.346 168.722 118.912 168.854 118.543 169.101C118.174 169.348 117.887 169.698 117.718 170.108C117.548 170.517 117.505 170.968 117.592 171.402C117.68 171.836 117.895 172.235 118.209 172.548C118.524 172.861 118.925 173.073 119.36 173.159C119.796 173.245 120.248 173.2 120.658 173.029C121.068 172.859 121.419 172.572 121.665 172.203C121.911 171.834 122.043 171.401 122.042 170.958C122.042 170.664 121.983 170.372 121.87 170.101C121.756 169.829 121.59 169.582 121.381 169.374C121.172 169.166 120.924 169.001 120.651 168.889C120.378 168.777 120.085 168.72 119.79 168.721ZM119.79 169.515C120.077 169.514 120.359 169.598 120.598 169.757C120.838 169.916 121.025 170.142 121.135 170.406C121.246 170.671 121.276 170.962 121.22 171.244C121.165 171.525 121.027 171.784 120.824 171.987C120.621 172.19 120.363 172.329 120.081 172.386C119.799 172.442 119.506 172.414 119.24 172.305C118.974 172.196 118.747 172.011 118.586 171.773C118.426 171.535 118.34 171.255 118.339 170.968V170.961C118.34 170.578 118.493 170.21 118.765 169.939C119.037 169.668 119.405 169.515 119.79 169.515Z" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M219.904 107.62C219.558 107.62 219.22 107.722 218.932 107.914C218.645 108.105 218.42 108.377 218.288 108.696C218.155 109.014 218.12 109.365 218.188 109.703C218.255 110.041 218.421 110.352 218.666 110.596C218.91 110.84 219.222 111.006 219.561 111.074C219.9 111.141 220.252 111.107 220.571 110.975C220.891 110.843 221.164 110.62 221.356 110.333C221.549 110.047 221.651 109.71 221.652 109.365C221.652 109.136 221.607 108.909 221.519 108.698C221.431 108.486 221.303 108.294 221.14 108.132C220.978 107.97 220.786 107.842 220.574 107.754C220.362 107.666 220.134 107.621 219.905 107.621L219.904 107.62ZM219.904 108.414C220.158 108.415 220.401 108.517 220.581 108.696C220.76 108.876 220.86 109.119 220.86 109.373C220.859 109.626 220.758 109.869 220.578 110.048C220.398 110.227 220.154 110.327 219.9 110.327C219.646 110.327 219.402 110.227 219.223 110.048C219.043 109.869 218.941 109.626 218.941 109.373C218.941 109.119 219.041 108.876 219.22 108.696C219.399 108.517 219.643 108.415 219.897 108.414H219.904Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M207.377 90.3756L217.888 85.5227C217.982 85.4759 218.055 85.3951 218.091 85.2967C218.128 85.1983 218.125 85.0897 218.084 84.9932C218.063 84.9459 218.032 84.9032 217.995 84.8675C217.957 84.8319 217.913 84.804 217.864 84.7855C217.816 84.7669 217.764 84.7581 217.712 84.7596C217.66 84.761 217.609 84.7727 217.562 84.7938H217.553L207.044 89.6468C206.997 89.6687 206.955 89.6996 206.92 89.7377C206.885 89.7759 206.858 89.8205 206.84 89.8691C206.822 89.9177 206.814 89.9693 206.817 90.0209C206.819 90.0725 206.832 90.1232 206.854 90.17V90.1762C206.896 90.2689 206.974 90.3411 207.069 90.377C207.165 90.4129 207.271 90.4095 207.364 90.3677H207.373" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M81.1243 148.763C81.0578 148.725 80.9815 148.707 80.905 148.712C80.8285 148.717 80.7552 148.744 80.6942 148.791C80.6333 148.837 80.5874 148.9 80.5624 148.973C80.5373 149.045 80.5342 149.123 80.5535 149.197L85.6075 170.122C85.6227 170.18 85.6514 170.235 85.6911 170.281C85.7309 170.327 85.7807 170.363 85.8367 170.386C85.893 170.412 85.9546 170.423 86.0163 170.419C86.0779 170.416 86.1377 170.397 86.1906 170.365L95.2092 165.178L103.916 161.941C103.987 161.915 104.048 161.869 104.093 161.809C104.138 161.748 104.164 161.676 104.169 161.601C104.175 161.526 104.16 161.45 104.124 161.383C104.089 161.316 104.035 161.261 103.969 161.224L81.1243 148.763ZM81.5322 149.885C81.5322 149.885 98.9393 159.385 102.823 161.506L94.9004 164.444C94.8791 164.451 94.8591 164.461 94.8411 164.475L86.257 169.416L81.5322 149.885Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M213.483 43.2632C213.502 43.1888 213.498 43.1106 213.473 43.038C213.448 42.9655 213.402 42.9018 213.341 42.855C213.28 42.8081 213.207 42.78 213.13 42.7741C213.054 42.7683 212.977 42.785 212.909 42.8221L193.689 53.308C193.624 53.347 193.57 53.4028 193.534 53.4696C193.498 53.5364 193.481 53.6116 193.484 53.6874C193.491 53.7636 193.52 53.8361 193.567 53.8967C193.614 53.9572 193.677 54.0033 193.749 54.0297L201.068 56.7456L208.647 61.1088C208.701 61.1399 208.76 61.1583 208.822 61.1626C208.883 61.1669 208.945 61.1569 209.001 61.1335C209.058 61.1091 209.108 61.0715 209.147 61.0239C209.186 60.9763 209.213 60.9201 209.226 60.86L213.483 43.2632ZM212.504 43.9471L208.578 60.1577L201.433 56.0432C201.414 56.0291 201.393 56.0187 201.37 56.0124L194.836 53.5885L212.504 43.9471Z" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M95.136 164.506L81.5732 149.236C81.5399 149.197 81.4992 149.165 81.4535 149.142C81.4077 149.119 81.3579 149.105 81.3068 149.101C81.2557 149.097 81.2043 149.103 81.1555 149.119C81.1068 149.135 81.0617 149.16 81.0228 149.193H81.0175C80.9381 149.263 80.8897 149.361 80.8827 149.467C80.8757 149.572 80.9108 149.676 80.9803 149.755L94.5414 165.026C94.5751 165.065 94.6162 165.096 94.6621 165.119C94.7081 165.141 94.7581 165.155 94.8092 165.158C94.8604 165.161 94.9117 165.154 94.9601 165.138C95.0086 165.121 95.0534 165.095 95.0918 165.061L95.0971 165.057C95.1756 164.992 95.2251 164.899 95.2348 164.798C95.2444 164.697 95.2133 164.596 95.1484 164.518L95.1343 164.502" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M201.7 56.6018L213.103 43.7538C213.173 43.6757 213.209 43.5732 213.204 43.4686C213.198 43.364 213.152 43.2657 213.074 43.1953C212.994 43.127 212.89 43.0927 212.785 43.0996C212.68 43.1065 212.582 43.1542 212.512 43.2324L201.096 56.0803C201.027 56.1594 200.991 56.2628 200.998 56.3677C201.005 56.4726 201.054 56.5704 201.133 56.6397C201.213 56.709 201.316 56.744 201.421 56.737C201.527 56.7301 201.625 56.6818 201.694 56.6027" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M94.336 164.854L92.0157 169.583L90.2962 167.507C90.2285 167.426 90.1319 167.375 90.0268 167.364C89.9217 167.353 89.8165 167.383 89.7334 167.448C89.6929 167.481 89.6594 167.522 89.6349 167.568C89.6103 167.614 89.5951 167.665 89.5901 167.717C89.5852 167.769 89.5906 167.821 89.6061 167.871C89.6216 167.921 89.6468 167.968 89.6803 168.008L91.7918 170.558C91.8348 170.608 91.8896 170.647 91.9513 170.671C92.0131 170.696 92.0798 170.705 92.1458 170.697C92.2116 170.69 92.2746 170.667 92.3291 170.63C92.3835 170.592 92.4276 170.542 92.4573 170.483L95.0431 165.2C95.0889 165.107 95.096 165 95.0629 164.902C95.0297 164.803 94.959 164.722 94.8661 164.676C94.7721 164.63 94.6637 164.623 94.5644 164.656C94.4651 164.689 94.3827 164.759 94.3351 164.852" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M201.165 56.7386L203.347 61.1768C203.377 61.2355 203.422 61.2859 203.476 61.3237C203.53 61.3615 203.593 61.3856 203.659 61.3938C203.725 61.4024 203.793 61.3938 203.855 61.3687C203.917 61.3437 203.971 61.3031 204.013 61.2509L205.789 59.1068C205.855 59.0263 205.887 58.9229 205.876 58.8193C205.866 58.7157 205.815 58.6204 205.734 58.5544C205.696 58.5213 205.651 58.4962 205.602 58.4804C205.554 58.4647 205.502 58.4586 205.452 58.4625C205.401 58.4664 205.351 58.4803 205.306 58.5034C205.26 58.5264 205.22 58.5581 205.187 58.5968L205.18 58.6038L203.789 60.2803L201.882 56.398C201.861 56.3494 201.831 56.3054 201.793 56.2687C201.754 56.232 201.709 56.2032 201.66 56.184C201.61 56.1649 201.558 56.1557 201.505 56.1571C201.452 56.1585 201.399 56.1705 201.351 56.1922C201.303 56.214 201.259 56.2451 201.223 56.2838C201.187 56.3225 201.159 56.368 201.141 56.4177C201.122 56.4673 201.114 56.5201 201.117 56.5729C201.119 56.6257 201.132 56.6775 201.155 56.7253L201.164 56.7456" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M240.275 124.866C240.196 124.571 240.06 124.295 239.874 124.053C239.688 123.811 239.456 123.608 239.191 123.455C238.926 123.303 238.634 123.204 238.331 123.164C238.027 123.124 237.719 123.144 237.424 123.223H237.419L217.385 128.574C217.089 128.653 216.812 128.789 216.569 128.975C216.327 129.161 216.123 129.392 215.97 129.656C215.817 129.921 215.718 130.212 215.678 130.515C215.638 130.817 215.658 131.124 215.737 131.419L218.931 143.306C219.092 143.901 219.482 144.408 220.018 144.716C220.553 145.024 221.189 145.108 221.786 144.949C226.459 143.7 237.15 140.844 241.819 139.595C242.115 139.516 242.392 139.38 242.635 139.195C242.878 139.009 243.082 138.778 243.235 138.514C243.388 138.25 243.487 137.959 243.528 137.656C243.568 137.354 243.548 137.047 243.469 136.752C242.629 133.623 241.115 127.992 240.275 124.862" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M215.695 129.821C215.695 129.821 224.381 133.325 228.092 134.819C228.646 135.044 229.258 135.082 229.836 134.927C230.413 134.773 230.925 134.435 231.292 133.964C233.747 130.831 239.483 123.505 239.483 123.505C239.547 123.424 239.576 123.32 239.564 123.217C239.551 123.114 239.498 123.02 239.416 122.956C239.333 122.891 239.227 122.862 239.123 122.875C239.018 122.887 238.922 122.941 238.856 123.023L230.67 133.479C230.409 133.814 230.045 134.055 229.633 134.165C229.222 134.274 228.786 134.247 228.392 134.087L215.998 129.089C215.9 129.05 215.792 129.052 215.695 129.092C215.598 129.133 215.522 129.21 215.482 129.307C215.462 129.354 215.452 129.406 215.452 129.457C215.452 129.509 215.463 129.56 215.482 129.607C215.502 129.655 215.531 129.698 215.568 129.735C215.605 129.771 215.648 129.8 215.696 129.819H215.7" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M145.407 80.06C145.407 80.06 146.455 86.0732 147.641 88.7441C147.641 88.7441 145.706 94.6559 149.79 93.4303C149.79 93.4303 153.107 102.854 161.952 98.4403L163.517 103.101L180.37 100.101L176.605 90.8891L168.085 75.9262L145.407 80.06Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M145.328 79.6691C145.225 79.6899 145.135 79.7494 145.076 79.8352C145.017 79.9209 144.994 80.0262 145.011 80.1288C145.011 80.1288 146.049 86.0062 147.223 88.7706C146.953 89.6738 146.808 90.6095 146.791 91.5518C146.721 91.9138 146.747 92.288 146.869 92.6363C146.991 92.9846 147.203 93.2944 147.484 93.5341C147.765 93.7737 148.105 93.9346 148.469 94.0002C148.833 94.0658 149.208 94.0339 149.556 93.9077C150.032 95.0221 151.8 98.5841 155.308 99.6827C157.454 100.281 159.747 100.034 161.715 98.9935L163.141 103.229C163.172 103.319 163.234 103.396 163.316 103.444C163.398 103.493 163.495 103.51 163.59 103.494L180.443 100.483C180.502 100.474 180.558 100.451 180.607 100.417C180.655 100.384 180.696 100.339 180.725 100.287C180.752 100.235 180.767 100.177 180.77 100.119C180.773 100.06 180.764 100.001 180.743 99.9465L176.975 90.7347C176.966 90.7216 176.957 90.7074 176.951 90.6924L168.431 75.7312C168.391 75.6602 168.329 75.6034 168.255 75.5684C168.181 75.5334 168.098 75.5218 168.017 75.5353L145.328 79.6691ZM145.865 80.375L167.882 76.3691C167.882 76.3691 175.881 90.4285 176.244 91.0585L179.815 99.7938L163.785 102.651L162.333 98.3132C162.315 98.2593 162.285 98.2099 162.245 98.1688C162.206 98.1276 162.158 98.0956 162.105 98.075C162.053 98.0533 161.997 98.0428 161.94 98.0443C161.884 98.0459 161.829 98.0593 161.778 98.0838C159.244 99.3509 157.183 99.4444 155.547 98.9256C151.71 97.7265 150.17 93.3032 150.17 93.3032C150.137 93.2056 150.067 93.125 149.975 93.0789C149.882 93.0327 149.775 93.0249 149.677 93.0571C149.444 93.1557 149.193 93.2072 148.939 93.2087C148.685 93.2102 148.433 93.1617 148.199 93.0659C147.973 92.8865 147.797 92.6523 147.689 92.3857C147.581 92.1191 147.543 91.8292 147.579 91.5438C147.601 90.6344 147.75 89.7325 148.022 88.8641C148.052 88.7725 148.049 88.6728 148.012 88.5835C147.053 85.9175 146.334 83.1712 145.865 80.3777" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M167.392 80.855C165.853 81.7496 164.494 82.9233 163.387 84.3156C163.321 84.3975 163.29 84.5022 163.302 84.6067C163.313 84.7112 163.366 84.8069 163.448 84.8728C163.53 84.9387 163.635 84.9693 163.74 84.958C163.844 84.9466 163.94 84.8943 164.007 84.8124C165.046 83.503 166.323 82.3993 167.77 81.5582C167.862 81.5098 167.932 81.427 167.963 81.3279C167.995 81.2288 167.986 81.1214 167.938 81.0288C167.889 80.9355 167.804 80.8656 167.703 80.8342C167.601 80.8028 167.492 80.8125 167.398 80.8612" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M167.349 83.885C166.643 83.4519 165.898 83.0873 165.122 82.7962C165.072 82.7798 165.02 82.7732 164.968 82.7769C164.916 82.7806 164.866 82.7945 164.819 82.8178C164.773 82.8411 164.731 82.8733 164.697 82.9126C164.663 82.9519 164.637 82.9975 164.621 83.0468V83.0521C164.59 83.1525 164.6 83.2611 164.648 83.3544C164.697 83.4477 164.78 83.5182 164.88 83.5506C165.595 83.8189 166.282 84.1567 166.931 84.5591C166.975 84.5867 167.024 84.6052 167.076 84.6137C167.127 84.6222 167.18 84.6205 167.231 84.6087C167.282 84.5969 167.33 84.5753 167.372 84.5449C167.415 84.5146 167.451 84.4763 167.479 84.4321C167.506 84.3879 167.525 84.3387 167.533 84.2873C167.542 84.2359 167.54 84.1834 167.528 84.1327C167.516 84.082 167.495 84.0341 167.464 83.9917C167.434 83.9494 167.395 83.9134 167.351 83.8859" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M161.75 81.0297C162.013 82.5314 162.11 84.0573 162.04 85.58C162.037 85.6163 162.024 85.6511 162.003 85.681C161.982 85.7109 161.954 85.7348 161.921 85.7503C161.887 85.7659 161.85 85.771 161.813 85.7648C161.776 85.7587 161.743 85.7416 161.716 85.7159C160.483 84.4966 159.439 83.1006 158.618 81.5741C158.618 81.5741 150.053 82.7988 145.514 80.4853L145.805 81.9147C144.718 81.2897 143.858 80.3374 143.347 79.1944C142.837 78.0515 142.702 76.7767 142.964 75.553L141.249 77.3556C141.249 77.3556 142.613 60.7868 158.618 57.5715C171.485 54.995 176.813 62.885 176.813 62.885C176.813 62.885 186.883 67.7282 183.739 77.9009C181.043 86.6194 179.773 87.9456 177.544 92.93L175.41 93.3385L168.349 86.2532C169.182 85.5646 169.723 84.5875 169.863 83.518C170.004 82.4484 169.734 81.3654 169.107 80.4862C167.921 78.5891 164.338 77.8241 161.746 81.0306" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M149.036 83.5744C149.656 82.9233 150.438 82.4465 151.301 82.1918C151.401 82.1576 151.483 82.0858 151.529 81.9918C151.576 81.8978 151.584 81.7893 151.551 81.6897C151.535 81.6409 151.509 81.5958 151.475 81.5568C151.442 81.5179 151.401 81.486 151.355 81.4629C151.309 81.4397 151.259 81.4259 151.207 81.4221C151.156 81.4184 151.104 81.4247 151.055 81.4409H151.048C150.041 81.7392 149.133 82.3039 148.422 83.075C148.356 83.1574 148.325 83.2625 148.336 83.3673C148.348 83.4721 148.4 83.5682 148.483 83.6344C148.523 83.6665 148.569 83.6904 148.619 83.7047C148.668 83.7189 148.72 83.7233 148.772 83.7176C148.823 83.7118 148.873 83.6961 148.918 83.6712C148.963 83.6464 149.003 83.6129 149.035 83.5727" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M157.414 91.1724C157.293 92.0348 156.867 92.8256 156.211 93.4014C155.556 93.9772 154.716 94.2998 153.842 94.3109C153.74 94.322 153.645 94.3708 153.576 94.4477C153.507 94.5246 153.469 94.6243 153.47 94.7274C153.473 94.83 153.518 94.9271 153.593 94.9972C153.668 95.0673 153.769 95.1048 153.872 95.1015H153.894C154.955 95.0836 155.974 94.6861 156.765 93.9815C157.557 93.277 158.068 92.3123 158.206 91.2632C158.216 91.1583 158.184 91.0537 158.118 90.9714C158.052 90.8891 157.957 90.8356 157.852 90.8221C157.748 90.8122 157.643 90.8436 157.562 90.9096C157.48 90.9757 157.428 91.071 157.417 91.175" fill="black"/>
+<path d="M151.194 86.9318C151.415 86.9019 151.621 86.8075 151.788 86.6607C151.954 86.5138 152.074 86.3209 152.13 86.1065C152.187 85.8921 152.179 85.6658 152.106 85.4561C152.034 85.2464 151.901 85.0628 151.724 84.9284C151.547 84.7941 151.335 84.715 151.113 84.7012C150.891 84.6875 150.67 84.7396 150.477 84.8511C150.285 84.9626 150.13 85.1284 150.032 85.3275C149.935 85.5267 149.898 85.7503 149.928 85.97C149.948 86.1161 149.996 86.2569 150.07 86.3844C150.145 86.5118 150.244 86.6234 150.361 86.7127C150.479 86.802 150.613 86.8674 150.756 86.9049C150.899 86.9425 151.048 86.9517 151.194 86.9318Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M157.391 195.108L153.184 140.881V115.702L181.207 111.96L199.018 119.47C202.235 119.793 212.66 160.1 216.318 195.108H157.391Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M156.99 195.135C157 195.234 157.046 195.326 157.12 195.394C157.194 195.461 157.291 195.499 157.391 195.5H216.319C216.375 195.501 216.431 195.49 216.482 195.468C216.533 195.446 216.58 195.414 216.617 195.373C216.655 195.332 216.684 195.283 216.702 195.23C216.719 195.177 216.726 195.121 216.72 195.066C213.787 167.016 206.508 135.579 202.073 123.961C201.57 122.452 200.864 121.018 199.974 119.699C199.771 119.404 199.473 119.188 199.13 119.086L181.36 111.593C181.295 111.567 181.225 111.558 181.156 111.567L153.133 115.309C153.037 115.321 152.948 115.367 152.883 115.439C152.818 115.511 152.781 115.604 152.779 115.701V140.878C152.779 140.887 152.783 140.896 152.789 140.903L156.99 195.135ZM157.757 194.709C157.391 190.022 153.654 141.84 153.585 140.862V116.05C156.665 115.634 179.4 112.598 181.157 112.368C182.58 112.972 198.856 119.828 198.856 119.828C198.894 119.843 198.934 119.854 198.975 119.86C199.048 119.885 199.113 119.929 199.162 119.988C199.324 120.144 199.467 120.318 199.588 120.507C200.29 121.692 200.872 122.944 201.328 124.243C205.731 135.767 212.921 166.854 215.88 194.709L157.757 194.709Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M155.164 109.348C155.123 108.08 155.398 106.823 155.962 105.686C156.526 104.55 157.363 103.569 158.398 102.833C161.938 100.442 183.751 94.2933 193.611 98.0018C197.304 99.388 198.141 102.952 199.524 108.132C200.249 110.862 199.779 111.721 201.913 115.608C204.048 119.495 200.651 122.915 196.214 122.897C186.961 122.772 177.794 121.114 169.087 117.99C157.801 113.746 155.387 115.821 152.871 117.114C152.871 117.114 151.037 111.704 155.165 109.349" fill="#F96D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M156.869 109.505C158.768 109.098 160.727 109.05 162.645 109.362C162.746 109.384 162.852 109.366 162.94 109.311C163.028 109.256 163.09 109.168 163.113 109.067C163.139 108.969 163.125 108.864 163.074 108.776C163.023 108.688 162.939 108.624 162.84 108.597L162.816 108.592C160.785 108.258 158.71 108.303 156.696 108.725C156.594 108.75 156.507 108.814 156.451 108.903C156.396 108.992 156.378 109.099 156.401 109.201C156.421 109.302 156.481 109.391 156.567 109.448C156.654 109.506 156.759 109.527 156.861 109.507H156.869" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M198.879 112.186C198.879 112.186 194.675 114.457 184.618 112.156C184.568 112.144 184.517 112.141 184.467 112.148C184.417 112.155 184.368 112.172 184.324 112.197C184.281 112.223 184.242 112.257 184.212 112.297C184.181 112.338 184.159 112.384 184.146 112.433L184.142 112.451C184.119 112.553 184.137 112.66 184.192 112.749C184.247 112.838 184.335 112.901 184.437 112.926C194.894 115.308 199.26 112.878 199.26 112.878C199.346 112.825 199.408 112.74 199.433 112.642C199.459 112.545 199.446 112.441 199.397 112.352C199.348 112.264 199.268 112.197 199.171 112.166C199.075 112.135 198.97 112.142 198.879 112.186Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.4847 195.503H250.615C250.72 195.503 250.822 195.461 250.896 195.386C250.971 195.312 251.013 195.211 251.013 195.106C251.013 195 250.971 194.899 250.896 194.825C250.822 194.75 250.72 194.709 250.615 194.709H43.4847C43.379 194.709 43.2777 194.75 43.2031 194.825C43.1284 194.899 43.0864 195 43.0864 195.106C43.0864 195.211 43.1284 195.312 43.2031 195.386C43.2777 195.461 43.379 195.503 43.4847 195.503Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M120.783 117.031C120.009 115.387 119.404 113.669 118.978 111.902C118.633 110.072 117.8 108.367 116.567 106.968C115.709 106.113 114.28 106.968 114.28 106.968C114.28 106.968 109.93 101.09 108.108 98.623C107.896 98.3412 107.582 98.1534 107.233 98.1002C106.884 98.0469 106.528 98.1322 106.241 98.338C105.95 98.5542 105.749 98.8707 105.678 99.2261C105.607 99.5814 105.671 99.9504 105.857 100.261C107.295 102.657 110.529 108.01 110.529 108.01C109.984 108.209 109.483 108.513 109.057 108.906C108.631 109.299 108.287 109.773 108.046 110.299C108.046 110.299 106.108 111.315 106.01 113.131C105.621 113.556 105.341 114.069 105.194 114.626C105.048 115.183 105.04 115.767 105.171 116.328C105.613 118.269 108.047 119.935 109.414 120.747C110.413 121.418 111.307 122.231 112.069 123.161L116.24 121.914L120.783 117.031Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M121.071 117.299C121.127 117.243 121.164 117.17 121.176 117.092C121.189 117.014 121.177 116.934 121.142 116.863C120.381 115.253 119.788 113.57 119.372 111.839C119.011 109.924 118.137 108.143 116.844 106.682C116.649 106.493 116.413 106.352 116.155 106.268C115.896 106.185 115.622 106.162 115.353 106.201C115.026 106.24 114.707 106.327 114.406 106.46L108.421 98.3909C108.152 98.0241 107.749 97.7787 107.299 97.7087C106.849 97.6387 106.389 97.7499 106.021 98.0177L106.01 98.0256C105.636 98.2975 105.379 98.6989 105.288 99.1507C105.197 99.6025 105.279 100.072 105.518 100.466L109.958 107.832C108.981 108.281 108.192 109.056 107.726 110.023C107.184 110.334 106.716 110.758 106.352 111.265C105.988 111.772 105.738 112.35 105.618 112.962C105.22 113.435 104.938 113.993 104.794 114.593C104.65 115.192 104.647 115.817 104.787 116.418C105.036 117.307 105.517 118.115 106.18 118.759C107.083 119.666 108.101 120.45 109.209 121.093C110.171 121.734 111.033 122.514 111.764 123.409C111.813 123.47 111.879 123.516 111.953 123.539C112.028 123.563 112.108 123.565 112.184 123.543L116.356 122.296C116.421 122.273 116.481 122.237 116.533 122.19L121.071 117.299ZM120.311 116.946L116.026 121.561L112.212 122.701C111.46 121.821 110.588 121.049 109.622 120.407C108.575 119.804 107.611 119.067 106.755 118.216C106.193 117.672 105.783 116.991 105.567 116.24C105.452 115.745 105.458 115.229 105.584 114.736C105.71 114.243 105.952 113.788 106.291 113.408C106.359 113.338 106.4 113.246 106.407 113.149C106.496 112.619 106.707 112.116 107.025 111.682C107.343 111.247 107.758 110.893 108.238 110.647C108.283 110.625 108.323 110.594 108.356 110.556C108.388 110.517 108.412 110.473 108.426 110.424C108.643 109.954 108.953 109.531 109.336 109.181C109.719 108.831 110.169 108.56 110.658 108.385C110.714 108.365 110.764 108.334 110.806 108.292C110.848 108.251 110.88 108.201 110.9 108.145C110.923 108.091 110.932 108.032 110.927 107.973C110.923 107.914 110.904 107.857 110.873 107.806L106.202 100.058C106.065 99.832 106.017 99.5636 106.069 99.305C106.12 99.0463 106.266 98.816 106.479 98.6591C106.68 98.5135 106.93 98.4524 107.175 98.4891C107.421 98.5257 107.643 98.6571 107.792 98.855L113.964 107.2C114.023 107.282 114.11 107.339 114.209 107.359C114.307 107.379 114.41 107.36 114.495 107.307C114.787 107.139 115.109 107.031 115.442 106.987C115.594 106.962 115.75 106.972 115.897 107.017C116.044 107.062 116.179 107.139 116.291 107.244C117.47 108.583 118.265 110.214 118.592 111.965C118.992 113.682 119.57 115.354 120.316 116.952" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.247 120.44C125.778 120.435 126.304 120.541 126.792 120.751C127.28 120.96 127.718 121.269 128.079 121.657C130.528 123.996 135.441 129.226 143.417 139.969C143.417 139.969 148.825 121.606 152.758 117.293C156.691 112.98 172.131 119.207 168.293 135.999C164.454 152.79 158.148 168.285 147.546 168.532C136.943 168.779 129.503 158.93 121.75 148.032C113.997 137.134 112.759 130.638 113.535 128.402C113.563 128.315 113.597 128.23 113.638 128.148C113.424 127.714 112.691 126.549 112.085 125.413C111.815 124.898 111.715 124.311 111.798 123.736C111.881 123.16 112.143 122.625 112.547 122.206C114.774 119.937 117.434 118.132 120.369 116.899C120.761 116.737 121.194 116.704 121.606 116.803C122.018 116.902 122.389 117.129 122.663 117.451C123.704 118.651 125.248 120.447 125.248 120.447" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.435 120.048C125.06 119.614 123.842 118.186 122.957 117.183C122.626 116.802 122.183 116.534 121.691 116.416C121.199 116.298 120.683 116.337 120.214 116.527C117.227 117.782 114.521 119.619 112.254 121.929C111.792 122.405 111.492 123.016 111.399 123.673C111.305 124.33 111.423 124.999 111.734 125.586C112.271 126.615 112.92 127.653 113.201 128.162C113.176 128.231 113.159 128.266 113.159 128.274C112.835 129.219 112.826 130.869 113.475 133.25C114.413 136.678 116.733 141.669 121.425 148.261C125.319 153.738 129.137 158.943 133.308 162.755C137.539 166.614 142.147 169.048 147.556 168.931C151.916 168.83 155.585 166.244 158.647 162.042C163.151 155.885 166.376 146.222 168.687 136.092C171.431 124.04 164.457 117.321 158.673 115.886C156.087 115.24 153.724 115.657 152.462 117.033C151.269 118.342 149.92 120.945 148.64 123.939C146.209 129.639 143.965 136.792 143.266 139.104C135.546 128.762 130.77 123.676 128.354 121.38C127.979 120.978 127.528 120.654 127.027 120.427C126.526 120.2 125.984 120.074 125.434 120.056M124.948 120.703C124.984 120.745 125.029 120.779 125.079 120.802C125.129 120.825 125.183 120.838 125.239 120.839C125.72 120.838 126.197 120.937 126.639 121.129C127.08 121.321 127.477 121.602 127.805 121.954C130.245 124.284 135.141 129.507 143.092 140.219C143.137 140.278 143.197 140.323 143.267 140.35C143.336 140.377 143.411 140.384 143.485 140.371C143.557 140.358 143.624 140.324 143.678 140.275C143.732 140.225 143.771 140.161 143.791 140.09C143.791 140.09 146.436 131.117 149.371 124.262C150.61 121.363 151.886 118.844 153.047 117.578C154.147 116.369 156.219 116.097 158.471 116.659C163.983 118.027 170.526 124.457 167.908 135.924C165.621 145.943 162.455 155.494 158.003 161.592C155.102 165.563 151.655 168.047 147.527 168.149C142.332 168.27 137.913 165.895 133.844 162.179C129.707 158.401 125.928 153.239 122.074 147.812C117.459 141.332 115.164 136.424 114.243 133.048C113.646 130.896 113.612 129.389 113.91 128.54C113.936 128.461 113.967 128.385 114.004 128.311C114.044 128.206 114.041 128.09 113.995 127.988C113.782 127.546 113.048 126.379 112.434 125.231C112.205 124.791 112.12 124.291 112.19 123.801C112.261 123.31 112.483 122.854 112.827 122.496C115.017 120.261 117.633 118.485 120.522 117.274C120.836 117.145 121.184 117.119 121.514 117.198C121.845 117.277 122.142 117.458 122.364 117.715C123.405 118.914 124.949 120.708 124.949 120.708" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M143.077 140.168C145.073 143.733 146.528 147.573 147.396 151.563C147.406 151.614 147.426 151.662 147.455 151.705C147.483 151.748 147.52 151.785 147.563 151.814C147.606 151.842 147.655 151.862 147.705 151.872C147.756 151.882 147.808 151.883 147.859 151.873C147.91 151.863 147.958 151.843 148.001 151.814C148.044 151.785 148.081 151.749 148.11 151.706C148.139 151.663 148.159 151.615 148.169 151.564C148.179 151.513 148.179 151.461 148.169 151.411C147.289 147.332 145.805 143.406 143.765 139.764C143.739 139.719 143.704 139.679 143.662 139.648C143.62 139.616 143.573 139.593 143.523 139.58C143.421 139.553 143.312 139.568 143.221 139.621C143.13 139.674 143.064 139.761 143.037 139.863C143.01 139.964 143.025 140.072 143.078 140.163" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M115.582 127.536C115.582 127.536 120.425 122.888 123.635 121.908C123.736 121.878 123.82 121.809 123.87 121.716C123.92 121.624 123.931 121.516 123.901 121.415C123.869 121.315 123.799 121.232 123.707 121.182C123.614 121.133 123.506 121.122 123.405 121.15C120.069 122.166 115.025 126.967 115.025 126.967C114.951 127.04 114.908 127.14 114.906 127.245C114.904 127.35 114.944 127.451 115.016 127.527C115.052 127.565 115.094 127.595 115.142 127.616C115.189 127.637 115.241 127.648 115.293 127.649C115.345 127.65 115.396 127.641 115.445 127.623C115.493 127.604 115.537 127.576 115.575 127.54" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_162_754">
+<rect width="300" height="195" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/NewBG.png b/public/assets/NewBG.png
new file mode 100644
index 0000000..adabe36
Binary files /dev/null and b/public/assets/NewBG.png differ
diff --git a/public/assets/Transperant_Placeholder.png b/public/assets/Transperant_Placeholder.png
new file mode 100644
index 0000000..8e26dfb
Binary files /dev/null and b/public/assets/Transperant_Placeholder.png differ
diff --git a/public/assets/ad_icon.svg b/public/assets/ad_icon.svg
new file mode 100644
index 0000000..10a31ec
--- /dev/null
+++ b/public/assets/ad_icon.svg
@@ -0,0 +1,22 @@
+<svg width="62" height="75" viewBox="0 0 62 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3150_12073)">
+<path d="M1.61719 5.63696H60.4562V15.174H1.61719V5.63696Z" fill="#00B2CA"/>
+<path d="M4.24609 15.174H57.8261V51.602H4.24609V15.174Z" fill="#00B2CA" fill-opacity="0.2"/>
+<path d="M28.418 51.606H35.818V72.956H28.418V51.606Z" fill="#B3B0B5"/>
+<path d="M26.2578 1.46997H35.8178V9.24097H26.2578V1.46997Z" fill="#F9F9F9"/>
+<path d="M9.49219 1.46997H19.0532V9.24097H9.49219V1.46997Z" fill="#F9F9F9"/>
+<path d="M43.1328 1.46997H52.6938V9.24097H43.1328V1.46997Z" fill="#F9F9F9"/>
+<path d="M14.2695 24.804V21.026H47.9095V44.251H14.2695V36.634" fill="#FA6E53"/>
+<path d="M43.1 74.424C43.48 74.41 43.8397 74.2492 44.1035 73.9754C44.3674 73.7016 44.5148 73.3362 44.5148 72.956C44.5148 72.5758 44.3674 72.2104 44.1035 71.9366C43.8397 71.6628 43.48 71.502 43.1 71.488H37.135V60.549H51.778C52.158 60.535 52.5177 60.3742 52.7815 60.1004C53.0454 59.8266 53.1928 59.4612 53.1928 59.081C53.1928 58.7008 53.0454 58.3354 52.7815 58.0616C52.5177 57.7878 52.158 57.627 51.778 57.613H46.5V53.07H57.677C57.8699 53.07 58.061 53.032 58.2392 52.9581C58.4175 52.8842 58.5794 52.7759 58.7157 52.6393C58.8521 52.5028 58.9602 52.3407 59.0338 52.1624C59.1075 51.9841 59.1453 51.7929 59.145 51.6V16.642H60.306C60.6953 16.642 61.0687 16.4873 61.344 16.212C61.6193 15.9367 61.774 15.5633 61.774 15.174V5.637C61.7737 5.24775 61.619 4.87451 61.3437 4.59926C61.0685 4.32402 60.6953 4.16927 60.306 4.169H54.006V1.469C54.0063 1.08036 53.8524 0.707464 53.5782 0.432088C53.3039 0.156712 52.9316 0.0013267 52.543 3.06567e-06H42.983C42.5937 3.06567e-06 42.2203 0.154667 41.945 0.42997C41.6697 0.705274 41.515 1.07867 41.515 1.468V4.168H37.135V1.468C37.135 1.07867 36.9803 0.705274 36.705 0.42997C36.4297 0.154667 36.0563 3.06567e-06 35.667 3.06567e-06H26.106C25.7167 3.06567e-06 25.3433 0.154667 25.068 0.42997C24.7927 0.705274 24.638 1.07867 24.638 1.468V4.168H20.371V1.468C20.371 1.27497 20.3329 1.08383 20.259 0.90553C20.185 0.727228 20.0766 0.565264 19.94 0.428908C19.8033 0.292553 19.6412 0.184483 19.4627 0.110886C19.2842 0.0372884 19.093 -0.000391416 18.9 3.06567e-06H9.343C9.15014 -0.000128314 8.95914 0.0377457 8.78091 0.111461C8.60269 0.185176 8.44074 0.293287 8.30432 0.429617C8.1679 0.565946 8.05968 0.727822 7.98584 0.905993C7.912 1.08416 7.874 1.27514 7.874 1.468V4.168H1.467C1.27422 4.16813 1.08335 4.20623 0.905297 4.28013C0.727241 4.35403 0.565484 4.46227 0.42926 4.59868C0.293037 4.73509 0.185015 4.89699 0.111362 5.07515C0.0377098 5.2533 -0.000131026 5.44422 3.40863e-07 5.637V15.174C3.40863e-07 15.5633 0.154664 15.9367 0.429968 16.212C0.705271 16.4873 1.07866 16.642 1.468 16.642H2.628V51.6C2.62774 51.7933 2.66565 51.9847 2.73955 52.1633C2.81346 52.3419 2.92191 52.5042 3.05867 52.6407C3.19544 52.7773 3.35783 52.8856 3.53653 52.9592C3.71523 53.0329 3.90672 53.0705 4.1 53.07H17.435V57.613H4.1C3.72004 57.627 3.36032 57.7878 3.09647 58.0616C2.83262 58.3354 2.68519 58.7008 2.68519 59.081C2.68519 59.4612 2.83262 59.8266 3.09647 60.1004C3.36032 60.3742 3.72004 60.535 4.1 60.549H26.8V71.488H20.833C20.453 71.502 20.0933 71.6628 19.8295 71.9366C19.5656 72.2104 19.4182 72.5758 19.4182 72.956C19.4182 73.3362 19.5656 73.7016 19.8295 73.9754C20.0933 74.2492 20.453 74.41 20.833 74.424H43.1ZM44.45 2.935H51.075V7.77H44.45V2.935ZM27.574 2.935H34.2V7.77H27.574V2.935ZM10.81 2.935H17.435V7.77H10.811L10.81 2.935ZM2.935 13.706V7.1H7.875V9.238C7.875 9.43078 7.91297 9.62168 7.98675 9.79978C8.06052 9.97789 8.16865 10.1397 8.30497 10.276C8.44128 10.4124 8.60311 10.5205 8.78122 10.5943C8.95933 10.668 9.15022 10.706 9.343 10.706H18.9C19.2893 10.706 19.6627 10.5513 19.938 10.276C20.2133 10.0007 20.368 9.62734 20.368 9.238V7.1H24.636V9.238C24.636 9.62734 24.7907 10.0007 25.066 10.276C25.3413 10.5513 25.7147 10.706 26.104 10.706H35.664C35.8568 10.706 36.0477 10.668 36.2258 10.5943C36.4039 10.5205 36.5657 10.4124 36.702 10.276C36.8384 10.1397 36.9465 9.97789 37.0203 9.79978C37.094 9.62168 37.132 9.43078 37.132 9.238V7.1H41.511V9.238C41.511 9.62734 41.6657 10.0007 41.941 10.276C42.2163 10.5513 42.5897 10.706 42.979 10.706H52.54C52.9293 10.706 53.3027 10.5513 53.578 10.276C53.8533 10.0007 54.008 9.62734 54.008 9.238V7.1H58.836V13.7L2.935 13.706ZM20.371 57.613V53.07H26.8V57.613H20.371ZM34.2 71.489H29.74V53.07H34.2V71.489ZM43.564 57.613H37.135V53.07H43.563L43.564 57.613ZM5.564 50.134V16.642H56.209V50.134H5.564Z" fill="black"/>
+<path d="M14.1243 26.272C14.5134 26.2725 14.8869 26.1185 15.1625 25.8438C15.4382 25.5691 15.5935 25.1962 15.5943 24.807V22.497H46.2943V42.786H15.5943V36.637C15.5802 36.257 15.4194 35.8973 15.1457 35.6335C14.8719 35.3696 14.5065 35.2222 14.1263 35.2222C13.746 35.2222 13.3806 35.3696 13.1069 35.6335C12.8331 35.8973 12.6723 36.257 12.6583 36.637V44.254C12.6583 44.6433 12.8129 45.0167 13.0882 45.292C13.3635 45.5673 13.7369 45.722 14.1263 45.722H47.7663C48.1556 45.722 48.529 45.5673 48.8043 45.292C49.0796 45.0167 49.2343 44.6433 49.2343 44.254V21.025C49.2343 20.6357 49.0796 20.2623 48.8043 19.987C48.529 19.7117 48.1556 19.557 47.7663 19.557H14.1243C13.7349 19.557 13.3615 19.7117 13.0862 19.987C12.8109 20.2623 12.6562 20.6357 12.6562 21.025V24.807C12.6563 25.1963 12.8109 25.5697 13.0862 25.845C13.3615 26.1203 13.7349 26.275 14.1243 26.275V26.272Z" fill="black"/>
+<path d="M23.2131 38.109C23.3903 38.0904 23.5599 38.027 23.706 37.9249C23.852 37.8227 23.9697 37.6851 24.048 37.525C24.137 37.365 24.5141 35.725 24.5321 35.725H27.8L28.327 37.675C28.6 38.675 30.88 37.95 30.635 36.957L27.7351 27.443C27.3761 26.316 24.9351 26.316 24.5751 27.443C23.7084 30.303 22.8417 33.163 21.975 36.023C21.757 36.743 21.375 37.461 22.288 37.905C22.572 38.0561 22.8919 38.1267 23.2131 38.109ZM26.158 29.673L27.2891 33.853H25.027L26.158 29.673Z" fill="black"/>
+<path d="M33.3929 38.1261H36.1349C37.1366 38.1773 38.1226 37.8612 38.9079 37.237C39.3025 36.814 39.5998 36.3099 39.7791 35.7599C39.9584 35.2099 40.0153 34.6273 39.9458 34.053C39.9685 33.0037 39.9715 31.9541 39.9548 30.9041C40.014 30.0918 39.8747 29.2774 39.5488 28.5311C39.2005 27.9455 38.6977 27.4672 38.0955 27.1486C37.4932 26.83 36.8149 26.6835 36.1349 26.7251H33.3929C32.9709 26.7251 32.3398 26.9331 32.3398 27.4581V37.393C32.3398 37.918 32.9709 38.1261 33.3929 38.1261ZM34.7558 28.8461C36.0258 28.8461 37.5289 28.6701 37.5289 30.4061V34.4451C37.5289 36.1771 36.0288 36.005 34.7558 36.005V28.8461Z" fill="black"/>
+<path d="M12.7668 31.2469C12.8774 31.515 13.065 31.7443 13.3058 31.9058C13.5467 32.0673 13.83 32.1539 14.12 32.1545C14.41 32.155 14.6936 32.0697 14.9351 31.9091C15.1766 31.7486 15.3651 31.5201 15.4768 31.2524C15.5885 30.9848 15.6183 30.6901 15.5626 30.4055C15.5069 30.1209 15.368 29.8593 15.1637 29.6535C14.9593 29.4478 14.6985 29.3073 14.4143 29.2497C14.1301 29.1921 13.8352 29.22 13.5668 29.33C13.2087 29.4806 12.9241 29.7661 12.7744 30.1247C12.6247 30.4833 12.622 30.8864 12.7668 31.2469Z" fill="black"/>
+<path d="M57.3935 57.642C57.0927 57.7015 56.8181 57.8537 56.6083 58.0773C56.3984 58.3008 56.2639 58.5845 56.2237 58.8885C56.1834 59.1924 56.2394 59.5014 56.3837 59.7719C56.5281 60.0424 56.7535 60.2608 57.0285 60.3966C57.3034 60.5323 57.6139 60.5785 57.9165 60.5287C58.219 60.4788 58.4983 60.3354 58.7151 60.1186C58.932 59.9019 59.0754 59.6226 59.1254 59.3201C59.1753 59.0176 59.1292 58.707 58.9935 58.432C58.8488 58.1444 58.6144 57.9118 58.3257 57.7692C58.0371 57.6267 57.7098 57.5821 57.3935 57.642Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_3150_12073">
+<rect width="61.775" height="74.424" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/flutterwave.png b/public/assets/flutterwave.png
new file mode 100644
index 0000000..82acbaf
Binary files /dev/null and b/public/assets/flutterwave.png differ
diff --git a/public/assets/iOS Download.png b/public/assets/iOS Download.png
new file mode 100644
index 0000000..2483149
Binary files /dev/null and b/public/assets/iOS Download.png differ
diff --git a/public/assets/ic_paystack.png b/public/assets/ic_paystack.png
new file mode 100644
index 0000000..b146fa4
Binary files /dev/null and b/public/assets/ic_paystack.png differ
diff --git a/public/assets/ic_razorpay.png b/public/assets/ic_razorpay.png
new file mode 100644
index 0000000..12ebff2
Binary files /dev/null and b/public/assets/ic_razorpay.png differ
diff --git a/public/assets/ic_stripe.png b/public/assets/ic_stripe.png
new file mode 100644
index 0000000..6c69154
Binary files /dev/null and b/public/assets/ic_stripe.png differ
diff --git a/public/assets/no_data_found_illustrator.svg b/public/assets/no_data_found_illustrator.svg
new file mode 100644
index 0000000..af6ebf7
--- /dev/null
+++ b/public/assets/no_data_found_illustrator.svg
@@ -0,0 +1,93 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="255" height="255" viewBox="0 0 255 255">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="back" width="255" height="255" transform="translate(60 183)" fill="#fff"/>
+    </clipPath>
+    <linearGradient id="linear-gradient" x1="0.488" y1="-0.011" x2="0.512" y2="1.041" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#faffff"/>
+      <stop offset="0.55" stop-color="#faffff"/>
+      <stop offset="1" stop-color="#e5f9f6"/>
+    </linearGradient>
+  </defs>
+  <g id="no_data_found_illustrator" transform="translate(17345 5782)">
+    <g id="no_data_found_illustrator-2" data-name="no_data_found_illustrator" transform="translate(-17405 -5965)" clip-path="url(#clip-path)">
+      <g id="no_data_found" data-name="no data found" transform="translate(60.123 183)">
+        <path id="Path_15401" data-name="Path 15401" d="M254.754,127.377h0a127.174,127.174,0,0,1-7.229,42.4q-.6,1.7-1.25,3.388-1.479,3.838-3.2,7.554-1.931,4.184-4.154,8.2a127.324,127.324,0,0,1-7.4,11.8l-.106.151-.144.2-.007.01-.1.138q-.274.385-.552.768a128.1,128.1,0,0,1-13.5,15.777q-.389.386-.781.768l-.037.036a126.957,126.957,0,0,1-88.92,36.175h0a126.873,126.873,0,0,1-82.79-30.572q-3.156-2.7-6.131-5.6l-.037-.036q-.392-.383-.781-.768A128.089,128.089,0,0,1,24.136,202q-.225-.309-.447-.62l-.106-.148A126.79,126.79,0,0,1,0,127.377H0A127.377,127.377,0,0,1,127.377,0h0A127.377,127.377,0,0,1,254.754,127.377Z" fill="url(#linear-gradient)"/>
+        <g id="illustrator">
+          <path id="Path_15403" data-name="Path 15403" d="M197.306,209.1c2.175,0,18.366-8.7,23.331-12.531,14.452-11.168,23.487-27.445,23.471-45.92-.02-23.185-12.021-47.6-35.955-53.92-8.309-2.195-16.071,3.663-23.865,5.444-4.667,1.066-9.973,1.087-14.237-1.334-3.577-2.03-6.191-6.06-5.718-10.146.48-4.145,3.9-7.413,7.66-9.222s7.942-2.512,11.9-3.821c5.175-1.709,10.14-5.147,11.092-10.826a33.39,33.39,0,0,0-3.036-20.2c-11.614-23.3-40.694-21.323-62.323-17.11-9.815,1.912-18.7,8.207-25.853,14.96a62.387,62.387,0,0,0-18.692,55.939c.928,5.45,3.195,10.649,0,15.755-5.063,8.1-15.907,11.014-24.953,10.565a38.7,38.7,0,0,0-32.233,15c-8.432,11.1-7.914,24.274-2.575,36.6q.206.473.418.944a85.513,85.513,0,0,0,8.12,13.918c1.862,2.643,3.838,5.2,5.894,7.7,1.073,1.3,5.7,8.207,7.247,8.207H197.3Z" fill="#fff"/>
+          <path id="Path_15404" data-name="Path 15404" d="M249.937,209.1H15.588a.141.141,0,1,1,0-.273H249.937a.141.141,0,1,1,0,.273Z" fill="#011721"/>
+          <g id="person">
+            <path id="Path_15405" data-name="Path 15405" d="M242.518,48.853a1.525,1.525,0,0,0-2.584-1.567C225.813,64.633,212.614,76,202.6,78.814a1.273,1.273,0,0,1-1.6-1.38l.262-2.324a1.339,1.339,0,0,0-.571-1.67l-.885,1.232c-1.9.331-3.437-2.569-3.437-2.569l-2.05,3.474,1.813,2.245,1.384.155a.616.616,0,1,1-.164,1.22,26.147,26.147,0,0,1-8.173-2.963,75.6,75.6,0,0,1-7.394-4.77c-2.024-7.244-3.97-17.91-6.167-24.925a1.348,1.348,0,0,0-2.635.45c.617,16.911,1.537,25.433,2,28.221a4.051,4.051,0,0,0,1.311,2.369c5.19,4.6,6.973,6.8,10.365,9.3a9.86,9.86,0,0,1,3.971,6.9l2.312,21.979s5.09,7.732,24.067-.516c-.206-1.236-.327-1.9-.327-1.9-1.674-7.869-2.446-18.755-2.736-23.9a5.174,5.174,0,0,1,1.689-4.149c13.476-12.082,22.747-26.967,26.886-36.441Z" fill="#00b2ca"/>
+            <path id="Path_16627" data-name="Path 16627" d="M174.6,53.329s-.719-.572-1.4-1.091c.6,13.208,1.366,20.466,1.775,22.958a4.068,4.068,0,0,0,1.317,2.386c5.191,4.6,6.976,6.8,10.366,9.3l-9.244-11.043a6.576,6.576,0,0,1-1.844-4.206l-.968-18.307Z"/>
+            <path id="Path_15406" data-name="Path 15406" d="M174.6,53.329s-.719-.572-1.4-1.091c.6,13.208,1.366,20.466,1.775,22.958a4.068,4.068,0,0,0,1.317,2.386c5.191,4.6,6.976,6.8,10.366,9.3l-9.244-11.043a6.576,6.576,0,0,1-1.844-4.206l-.968-18.307Z" fill="#00b2ca" opacity="0.75"/>
+            <path id="Path_15407" data-name="Path 15407" d="M195.906,72.894l-.985-3.137s6.225-.718,9.05.288c0,0,1.389,4.549-2.777,9l-.289,1.118-1.151-1.306-3.126-3.66-.721-2.3Z" fill="#011721"/>
+            <path id="Path_15408" data-name="Path 15408" d="M201.005,77.434l.262-2.324a1.339,1.339,0,0,0-.571-1.67l-.885,1.232c-1.9.331-3.437-2.569-3.437-2.569l-2.05,3.474,1.813,2.245,1.383.155a.616.616,0,1,1-.164,1.22c-.052,1.824,2.24,3.274,2.24,3.274a10.5,10.5,0,0,0,3.008-3.658,1.275,1.275,0,0,1-1.6-1.378Z" fill="#ffd2b3"/>
+            <path id="Path_15409" data-name="Path 15409" d="M192.94,115.763a128.052,128.052,0,0,0-10.612,17.2,65.571,65.571,0,0,0-5.666,14.949c2.545,10.368,10.8,34.976,16.528,47.682a2.077,2.077,0,0,0,3.967-.986c-1.28-19.359-4.3-46.117-4.3-46.117,3.944-5.136,10.769-16.384,10.769-16.384-.356,7.457,8.588,53.592,12.133,75.248a2.077,2.077,0,0,0,4.1.023c6.01-35.117-1.184-82.171-2.846-92.131-18.977,8.247-24.067.516-24.067.516Z" fill="#05293c"/>
+            <path id="Path_15410" data-name="Path 15410" d="M239.937,47.285q-1.733,2.128-3.445,4.131a3.111,3.111,0,0,0,3.543,2.567c.967-1.836,1.8-3.562,2.487-5.137a1.524,1.524,0,0,0-2.585-1.562Z" fill="#ffd2b3"/>
+            <path id="Path_15411" data-name="Path 15411" d="M214.826,201.639c.333,2.052.646,3.97.931,5.716a2.077,2.077,0,0,0,4.1.023c.35-2.045.654-4.133.918-6.249a5.086,5.086,0,0,1-5.945.511Z" fill="#ffd2b3"/>
+            <path id="Path_15412" data-name="Path 15412" d="M194,195.178l.21-4.4-17.546-42.872c2.51,10.227,10.53,34.366,16.289,47.152Z" fill="#011721"/>
+            <path id="Path_15413" data-name="Path 15413" d="M197.158,194.608c-.129-1.952-.291-3.955-.478-5.98a4.722,4.722,0,0,1-5.62,2.206c.752,1.691,1.469,3.291,2.131,4.76a2.077,2.077,0,0,0,3.967-.986Z" fill="#d39266"/>
+            <path id="Path_15414" data-name="Path 15414" d="M192.8,147.732l.059.759c3.944-5.136,10.769-16.384,10.769-16.384-.327,6.856,7.4,46.13,11.2,69.532h0l-10.584-76.645L192.8,147.731Z" fill="#011721"/>
+            <path id="Path_15415" data-name="Path 15415" d="M240.035,53.982s-.431-1.651-1.563-.145C234.14,59.6,222.6,76.7,214.237,82.982a12.4,12.4,0,0,0-4.9,9.283,82.309,82.309,0,0,0,2.315,25.022h0c1.65-.533,3.432-1.2,5.359-2.041-.206-1.236-.327-1.9-.327-1.9C215,105.454,214.229,94.53,213.942,89.4a5.161,5.161,0,0,1,1.716-4.129,116.566,116.566,0,0,0,24.377-31.289Z"/>
+            <path id="Path_16626" data-name="Path 16626" d="M240.035,53.982s-.431-1.651-1.563-.145C234.14,59.6,222.6,76.7,214.237,82.982a12.4,12.4,0,0,0-4.9,9.283,82.309,82.309,0,0,0,2.315,25.022h0c1.65-.533,3.432-1.2,5.359-2.041-.206-1.236-.327-1.9-.327-1.9C215,105.454,214.229,94.53,213.942,89.4a5.161,5.161,0,0,1,1.716-4.129,116.566,116.566,0,0,0,24.377-31.289Z" fill="#00b2ca" opacity="0.75"/>
+            <path id="Path_15416" data-name="Path 15416" d="M199.19,82.4s-2.281,24.565,19.262,30.175l3.971-1.945-2.679-3.412s-19.372-5.172-20.013-24.792l-.542-.027Z" fill="#fa6e53"/>
+            <path id="Path_15417" data-name="Path 15417" d="M199.594,78.888a1.512,1.512,0,0,0-1.153-.8l-.913-.112a.615.615,0,1,1-.171,1.218c-.052,1.824,2.24,3.274,2.24,3.274a6.651,6.651,0,0,0,1.288-1.132l-1.292-2.451Z" fill="#d39266"/>
+            <path id="Path_15418" data-name="Path 15418" d="M197.413,77.965Z" fill="#d39266"/>
+            <path id="Path_15419" data-name="Path 15419" d="M242.551,47.674l-4.08,6.164a3.451,3.451,0,0,0,1.563.145c.967-1.836,1.8-3.562,2.487-5.137a1.466,1.466,0,0,0,.03-1.172Z" fill="#d39266"/>
+            <path id="Path_15420" data-name="Path 15420" d="M194.21,190.778h0l2.672,5.027a2.051,2.051,0,0,0,.277-1.2c-.129-1.952-.291-3.955-.478-5.98a4.608,4.608,0,0,1-2.47,2.15Z" fill="#ffd2b3"/>
+            <path id="Path_15421" data-name="Path 15421" d="M217.378,202.365a6.262,6.262,0,0,1-2.551-.726c.333,2.052.645,3.97.931,5.716a2.008,2.008,0,0,0,1.88,1.728Z" fill="#d39266"/>
+            <path id="Path_15422" data-name="Path 15422" d="M177.31,52.511c-.56-2.147-1.131-4.206-1.721-6.078a1.334,1.334,0,0,0-2.6.454c.081,2.229.167,4.287.257,6.2,0,0,3.125.9,4.069-.573Z" fill="#ffd2b3"/>
+            <path id="Path_15423" data-name="Path 15423" d="M173.689,45.662c-.758.381-.714.964-.69,1.617.076,2.078.158,4.007.242,5.8a8.236,8.236,0,0,0,1.364.245l-.916-7.667Z" fill="#d39266"/>
+          </g>
+          <g id="search_files" data-name="search files">
+            <g id="file">
+              <path id="Path_15424" data-name="Path 15424" d="M167.02,198.873l5.964-62.892H96.943V209.1h62.669c6.731,0,6.992-6.518,7.407-10.224Z" fill="#fff"/>
+              <path id="Path_16628" data-name="Path 16628" d="M167.02,198.873l5.964-62.892H96.943V209.1h62.669c6.731,0,6.992-6.518,7.407-10.224Z" fill="#00b2ca" opacity="0.7"/>
+              <g id="error">
+                <path id="Path_15425" data-name="Path 15425" d="M166.64,153.594l-35.656-2.373,3.331-50.058,29.512,1.964,5.7,7.006Z" fill="#fa6e53"/>
+                <path id="Path_15426" data-name="Path 15426" d="M147.533,131.6l.087-1.308c.32-4.81,6.485-4.578,6.744-8.468.122-1.839-1.177-3.133-3.263-3.272-2.193-.146-3.694,1.069-3.817,2.908l-.04.6a.482.482,0,0,1-.6.493l-2.962-.339a.553.553,0,0,1-.531-.568l.031-.46c.273-4.1,3.642-6.685,8.275-6.377,4.562.3,7.357,3.154,7.09,7.15-.393,5.907-6.623,5.563-6.841,8.852l-.071,1.061a.522.522,0,0,1-.6.528l-2.971-.2a.522.522,0,0,1-.528-.6Zm-.8,5.594a2.62,2.62,0,0,1,2.858-2.367,2.557,2.557,0,1,1-.374,5.09,2.589,2.589,0,0,1-2.483-2.722Z" fill="#fff"/>
+                <path id="Path_15427" data-name="Path 15427" d="M163.827,103.127l-.436,6.55,6.141.456Z" fill="#05293c"/>
+                <path id="Path_15427-2" data-name="Path 15427" d="M163.827,103.127l-.436,6.55,6.141.456Z" fill="#fa6e53" opacity="0.8"/>
+              </g>
+              <path id="Path_15428" data-name="Path 15428" d="M159.576,209.1H43.273a8.556,8.556,0,0,1-8.59-7.733l-6.556-64.8a2.425,2.425,0,0,1,2.457-2.733H96.816a2.43,2.43,0,0,0,2.151-1.217l2.272-4.018a2.43,2.43,0,0,1,2.151-1.217H142.2a3.1,3.1,0,0,1,3.009,2.733l6.956,68.761c.415,3.706.676,10.224,7.407,10.224Z" fill="#00b2ca"/>
+              <path id="Path_15429" data-name="Path 15429" d="M146.606,143.892l-1.394-13.78a3.1,3.1,0,0,0-3.009-2.733H103.388a2.43,2.43,0,0,0-2.151,1.217l-2.272,4.018a2.43,2.43,0,0,1-2.151,1.217H30.583a2.426,2.426,0,0,0-2.457,2.733l4.788,47.324C75.453,143.267,146.606,143.892,146.606,143.892Z" fill="#fff"/>
+              <path id="Path_16629" data-name="Path 16629" d="M146.606,143.892l-1.394-13.78a3.1,3.1,0,0,0-3.009-2.733H103.388a2.43,2.43,0,0,0-2.151,1.217l-2.272,4.018a2.43,2.43,0,0,1-2.151,1.217H30.583a2.426,2.426,0,0,0-2.457,2.733l4.788,47.324C75.453,143.267,146.606,143.892,146.606,143.892Z" fill="#00b2ca" opacity="0.4"/>
+              <path id="Path_15430" data-name="Path 15430" d="M43.273,209.1h116.3c-4.9,0-6.371-3.456-6.969-6.766H34.84a8.55,8.55,0,0,0,8.433,6.766Z" fill="#fff"/>
+              <path id="Path_16630" data-name="Path 16630" d="M43.273,209.1h116.3c-4.9,0-6.371-3.456-6.969-6.766H34.84a8.55,8.55,0,0,0,8.433,6.766Z" fill="#00b2ca" opacity="0.83"/>
+              <path id="Path_15431" data-name="Path 15431" d="M107.589,208.6h0a5.6,5.6,0,0,0,2.3-7.554L80.9,146.607a1.479,1.479,0,0,0-2-.61l-.612.326-2.8-5.249a32.553,32.553,0,0,0,7.7-7.243H31.162c.048.062.094.127.143.189.067.086.132.175.2.26.257.325.521.642.79.955.041.047.08.1.121.143q.436.5.89.985l.058.063q.477.5.972.985l.017.017q.506.491,1.031.958h0a32.783,32.783,0,0,0,34.088,5.9l2.8,5.249-.612.326a1.477,1.477,0,0,0-.611,2l28.99,54.441a5.537,5.537,0,0,0,1.846,2.026q.226.149.464.274a5.648,5.648,0,0,0,1.344.5h2.6a5.569,5.569,0,0,0,1.3-.5Z" opacity="0.5"/>
+              <path id="Path_16631" data-name="Path 16631" d="M107.589,208.6h0a5.6,5.6,0,0,0,2.3-7.554L80.9,146.607a1.479,1.479,0,0,0-2-.61l-.612.326-2.8-5.249a32.553,32.553,0,0,0,7.7-7.243H31.162c.048.062.094.127.143.189.067.086.132.175.2.26.257.325.521.642.79.955.041.047.08.1.121.143q.436.5.89.985l.058.063q.477.5.972.985l.017.017q.506.491,1.031.958h0a32.783,32.783,0,0,0,34.088,5.9l2.8,5.249-.612.326a1.477,1.477,0,0,0-.611,2l28.99,54.441a5.537,5.537,0,0,0,1.846,2.026q.226.149.464.274a5.648,5.648,0,0,0,1.344.5h2.6a5.569,5.569,0,0,0,1.3-.5Z" fill="#00b2ca" opacity="0.7"/>
+            </g>
+            <g id="notfound">
+              <circle id="Ellipse_256" data-name="Ellipse 256" cx="13.949" cy="13.949" r="13.949" transform="translate(50.251 96.784)" fill="#fff"/>
+              <circle id="Ellipse_280" data-name="Ellipse 280" cx="13.949" cy="13.949" r="13.949" transform="translate(50.251 96.784)" fill="#fa6e53"/>
+              <path id="Path_15432" data-name="Path 15432" d="M67.593,117.78l-10.44-10.44a2.591,2.591,0,0,1,0-3.654h0a2.591,2.591,0,0,1,3.654,0l10.439,10.439a2.591,2.591,0,0,1,0,3.654h0a2.591,2.591,0,0,1-3.653,0Z" fill="#fff"/>
+              <path id="Path_15433" data-name="Path 15433" d="M71.247,107.34,60.808,117.78a2.591,2.591,0,0,1-3.654,0h0a2.591,2.591,0,0,1,0-3.654l10.439-10.439a2.591,2.591,0,0,1,3.654,0h0a2.591,2.591,0,0,1,0,3.653Z" fill="#fff"/>
+            </g>
+            <g id="magnifire">
+              <path id="Path_15434" data-name="Path 15434" d="M93.362,95.8A32.76,32.76,0,1,0,76.75,141.559l4.135,7.764,6.024-3.208-4.135-7.764A32.763,32.763,0,0,0,93.362,95.8ZM77.177,135.1A27.086,27.086,0,1,1,88.354,98.465,27.086,27.086,0,0,1,77.177,135.1Z" fill="#00b2ca"/>
+              <path id="Path_15435" data-name="Path 15435" d="M49.049,82.28a32.761,32.761,0,0,0-6.387,53.383l4.086-3.965A27.085,27.085,0,1,1,85.473,94.124l4.088-3.967a32.769,32.769,0,0,0-40.513-7.876Z"/>
+              <path id="Path_16632" data-name="Path 16632" d="M49.049,82.28a32.761,32.761,0,0,0-6.387,53.383l4.086-3.965A27.085,27.085,0,1,1,85.473,94.124l4.088-3.967a32.769,32.769,0,0,0-40.513-7.876Z" fill="#00b2ca" opacity="0.71"/>
+              <path id="Path_15436" data-name="Path 15436" d="M114.867,205.88h0a5.6,5.6,0,0,1-7.554-2.3l-28.99-54.441a1.479,1.479,0,0,1,.61-2l7.247-3.86a1.479,1.479,0,0,1,2,.61l28.99,54.441a5.6,5.6,0,0,1-2.3,7.554Z" fill="#011721"/>
+              <path id="Path_15437" data-name="Path 15437" d="M78.933,147.135a1.479,1.479,0,0,0-.61,2l28.99,54.441a5.6,5.6,0,0,0,7.554,2.3L82.557,145.2Z" fill="#05293c"/>
+              <path id="Path_15438" data-name="Path 15438" d="M89.228,98a28.076,28.076,0,1,0-11.585,37.977A28.076,28.076,0,0,0,89.228,98Zm-12.05,37.1A27.086,27.086,0,1,1,88.354,98.465,27.086,27.086,0,0,1,77.178,135.1Z"/>
+              <path id="Path_16633" data-name="Path 16633" d="M89.228,98a28.076,28.076,0,1,0-11.585,37.977A28.076,28.076,0,0,0,89.228,98Zm-12.05,37.1A27.086,27.086,0,1,1,88.354,98.465,27.086,27.086,0,0,1,77.178,135.1Z" fill="#00b2ca" opacity="0.7"/>
+              <circle id="Ellipse_257" data-name="Ellipse 257" cx="27.086" cy="27.086" r="27.086" transform="translate(37.361 84.111)" fill="#fff" opacity="0.35"/>
+              <path id="Path_15439" data-name="Path 15439" d="M51.25,86.415a28.076,28.076,0,0,0-5.216,45.976l.714-.693A27.085,27.085,0,1,1,85.473,94.124l.714-.693A28.082,28.082,0,0,0,51.25,86.415Z" fill="#00b2ca" opacity="0.7"/>
+            </g>
+          </g>
+          <g id="shocked">
+            <rect id="line" width="0.629" height="4.578" transform="matrix(0.763, -0.646, 0.646, 0.763, 189.55, 64.992)" fill="#011721"/>
+            <rect id="line-2" data-name="line" width="0.629" height="4.41" transform="matrix(0.994, -0.113, 0.113, 0.994, 196.261, 61.041)" fill="#011721"/>
+            <rect id="line-3" data-name="line" width="3.214" height="0.628" transform="translate(207.074 67.787) rotate(-28.34)" fill="#011721"/>
+          </g>
+        </g>
+        <g id="lines">
+          <path id="Path_15440" data-name="Path 15440" d="M27.474,110.212h-.011a.079.079,0,0,1-.067-.088c1.284-9.271,4.483-17.043,9.506-23.1a39.321,39.321,0,0,1,15.427-11.2,51.851,51.851,0,0,1,20.7-3.8.079.079,0,0,1,0,.157h0a51.707,51.707,0,0,0-20.64,3.794c-9.728,4.039-21.934,13.246-24.831,34.168a.079.079,0,0,1-.078.068Z" fill="#011721"/>
+          <path id="Path_15441" data-name="Path 15441" d="M115.853,201.207a.079.079,0,0,1-.068-.039l-18.909-32.89a.078.078,0,0,1,.029-.107.077.077,0,0,1,.107.029l18.909,32.89a.078.078,0,0,1-.029.107.075.075,0,0,1-.039.01Z" fill="#fff2e6"/>
+          <path id="Path_15442" data-name="Path 15442" d="M168.047,159.961h0a.079.079,0,0,1-.074-.083l.887-16.269a.082.082,0,0,1,.083-.074.079.079,0,0,1,.074.083l-.887,16.269a.079.079,0,0,1-.079.074Z" fill="#011721"/>
+          <path id="Path_15443" data-name="Path 15443" d="M212.421,203.357a.078.078,0,0,1-.078-.064l-9.2-50.9a.079.079,0,0,1,.063-.091.076.076,0,0,1,.091.063l9.2,50.9a.079.079,0,0,1-.063.091h-.014Z" fill="#011721"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/paypal-logo.png b/public/assets/paypal-logo.png
new file mode 100644
index 0000000..75cb77d
Binary files /dev/null and b/public/assets/paypal-logo.png differ
diff --git a/public/assets/phonepe-icon.png b/public/assets/phonepe-icon.png
new file mode 100644
index 0000000..f4390ff
Binary files /dev/null and b/public/assets/phonepe-icon.png differ
diff --git a/public/assets/something_went_wrong.svg b/public/assets/something_went_wrong.svg
new file mode 100644
index 0000000..603702d
--- /dev/null
+++ b/public/assets/something_went_wrong.svg
@@ -0,0 +1,222 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="255" height="255" viewBox="0 0 255 255">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.488" y1="-0.011" x2="0.512" y2="1.041" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#faffff"/>
+      <stop offset="0.55" stop-color="#faffff"/>
+      <stop offset="1" stop-color="#e5f9f6"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#fafaff"/>
+      <stop offset="0.55" stop-color="#fafaff"/>
+      <stop offset="1" stop-color="#e5f7f9"/>
+    </linearGradient>
+  </defs>
+  <g id="something_went_wrong" transform="translate(16973.877 5782)">
+    <path id="back" d="M255,127.506h0a127.307,127.307,0,0,1-7.236,42.443q-.6,1.7-1.251,3.391-1.48,3.842-3.2,7.562-1.933,4.188-4.158,8.208a127.451,127.451,0,0,1-7.407,11.812l-.106.151-.144.2-.007.01-.1.138q-.274.385-.553.769a128.227,128.227,0,0,1-13.513,15.793q-.389.386-.782.769l-.037.036A127.076,127.076,0,0,1,127.5,255h0a126.992,126.992,0,0,1-82.87-30.6q-3.159-2.7-6.137-5.606l-.037-.036q-.392-.383-.782-.769A128.217,128.217,0,0,1,24.159,202.2q-.225-.309-.447-.621l-.106-.148A126.922,126.922,0,0,1,0,127.506H0A127.5,127.5,0,0,1,127.5,0h0A127.5,127.5,0,0,1,255,127.506Z" transform="translate(-16973.877 -5782)" fill="url(#linear-gradient)"/>
+    <g id="illustrator" transform="translate(-16963.842 -5742.83)">
+      <path id="Path_14824" data-name="Path 14824" d="M54.873,156.271A116.732,116.732,0,0,0,66.255,206.7H183.664A117.269,117.269,0,0,0,223.493,50.9,117.257,117.257,0,0,0,54.874,156.271Z" transform="translate(-9.789 -39.052)" fill="#fff"/>
+      <path id="Path_16634" data-name="Path 16634" d="M54.873,156.271A116.732,116.732,0,0,0,66.255,206.7H183.664A117.269,117.269,0,0,0,223.493,50.9,117.257,117.257,0,0,0,54.874,156.271Z" transform="translate(-9.789 -39.052)" fill="#00b2ca" opacity="0.1"/>
+      <path id="Path_14825" data-name="Path 14825" d="M236.868,206.794H10.321a.23.23,0,1,1,0-.446H236.867a.23.23,0,1,1,0,.446Z" transform="translate(-10.035 -39.052)" fill="#011721"/>
+      <g id="head" transform="translate(163.968 25.831)">
+        <path id="Path_14830" data-name="Path 14830" d="M176.355,74.181l-2.532-4.07,9.256-5.013a3.46,3.46,0,0,1,4.341,1.8c.88,1.761,2.1,5.018,2.607,11.507l-9.432-1.16-4.24-3.065Z" transform="translate(-173.823 -64.883)" fill="#011721"/>
+        <path id="Path_14831" data-name="Path 14831" d="M176.358,79.372l4.427,2.409,2.341-1.989a.843.843,0,0,1,1.136.194.976.976,0,0,1,.006,1.273s3.863-2.951,5.935-2.819a15.254,15.254,0,0,1-2.613-1.18c-2.964-1.321-1.337-4.744-3.163-5.335-.571-.185-.855,2.12-2.47,1.928-1.3-.153-5.6-1.475-5.6-1.475v6.994Z" transform="translate(-173.823 -64.883)" fill="#ffd2b3"/>
+        <path id="Path_14832" data-name="Path 14832" d="M184.269,81.259a15.323,15.323,0,0,1,1.8-1.528h0l-1.008-.581a1.119,1.119,0,0,0-1.309.1l-.62.54a.843.843,0,0,1,1.136.194.976.976,0,0,1,.006,1.273Z" transform="translate(-173.823 -64.883)" fill="#d39266"/>
+      </g>
+      <g id="body" transform="translate(123.883 34.29)">
+        <path id="Path_14826" data-name="Path 14826" d="M153.837,104.379,135.572,106.2a2.105,2.105,0,0,0-.208,4.159,108.242,108.242,0,0,0,20.988,1.668l8.791-2.158-11.306-5.487Z" transform="translate(-133.671 -73.342)" fill="#00b2ca"/>
+        <path id="Path_14827" data-name="Path 14827" d="M144.269,111.563c-2.956-1.9-1.377-6.094-1.377-6.094h0l-7.321.729a2.1,2.1,0,0,0-.208,4.159,79.044,79.044,0,0,0,8.905,1.206Z" transform="translate(-133.671 -73.342)" fill="#ffd2b3"/>
+        <path id="Path_14828" data-name="Path 14828" d="M133.813,109.059a2.012,2.012,0,0,0,1.551,1.3,108.243,108.243,0,0,0,20.988,1.668l8.611-2.114-.261-.258-2.211-1.073-7.485.448c-4.918.723-18.107.173-21.193.031Z" transform="translate(-133.671 -73.342)"/>
+        <path id="Path_16640" data-name="Path 16640" d="M133.813,109.059a2.012,2.012,0,0,0,1.551,1.3,108.243,108.243,0,0,0,20.988,1.668l8.611-2.114-.261-.258-2.211-1.073-7.485.448c-4.918.723-18.107.173-21.193.031Z" transform="translate(-133.671 -73.342)" fill="#00b2ca" opacity="0.65"/>
+        <path id="Path_14829" data-name="Path 14829" d="M135.364,110.357a79.04,79.04,0,0,0,8.905,1.206,3.732,3.732,0,0,1-1.615-2.214c-3.891-.075-7.426-.225-8.841-.29a2.012,2.012,0,0,0,1.551,1.3Z" transform="translate(-133.671 -73.342)" fill="#d39266"/>
+        <path id="Path_14833" data-name="Path 14833" d="M173.734,73.814c-5.209,4.718-13.258,14.639-20.636,32.3a4.32,4.32,0,0,0,4.147,5.974c7.841-.3,20.189-2.9,26.916-7.8l11.284,25.867s16.979,6.5,28.508-1.048c0,0-9.9-29.877-20.923-45.688a12.581,12.581,0,0,0-14.817-4.675,14.467,14.467,0,0,0-5.344,3.618l-16.141,18.027S172.956,85,176.65,75.85a1.825,1.825,0,0,0-2.915-2.038Z" transform="translate(-133.671 -73.342)" fill="#00b2ca"/>
+        <path id="Path_14834" data-name="Path 14834" d="M166.727,100.389S172.955,85,176.65,75.851a1.775,1.775,0,0,0-.578-2.124S166.631,96.281,166.727,100.389Z" transform="translate(-133.671 -73.342)"/>
+        <path id="Path_16641" data-name="Path 16641" d="M166.727,100.389S172.955,85,176.65,75.851a1.775,1.775,0,0,0-.578-2.124S166.631,96.281,166.727,100.389Z" transform="translate(-133.671 -73.342)" fill="#00b2ca" opacity="0.65"/>
+        <path id="Path_14835" data-name="Path 14835" d="M174.253,81.781c.852-2.107,1.673-4.139,2.4-5.93a1.825,1.825,0,0,0-2.915-2.038,49.913,49.913,0,0,0-4.114,4.243c0,.021-.029,4.135,4.633,3.724Z" transform="translate(-133.671 -73.342)" fill="#ffd2b3"/>
+        <path id="Path_14836" data-name="Path 14836" d="M172.825,81.75a6.194,6.194,0,0,0,1.428.031c.852-2.107,1.673-4.139,2.4-5.93a1.775,1.775,0,0,0-.578-2.124s-1.472,3.518-3.246,8.023Z" transform="translate(-133.671 -73.342)" fill="#d39266"/>
+        <path id="Path_14837" data-name="Path 14837" d="M184.6,96.819c-4.216,10.848-26.719,14.94-28.244,15.205a4.364,4.364,0,0,0,.892.066c7.841-.3,20.189-2.9,26.916-7.8l11.284,25.867s.238.09.662.234l15.351-6.108c-20.41-6.547-26.861-27.461-26.861-27.461Z" transform="translate(-133.671 -73.342)"/>
+        <path id="Path_16639" data-name="Path 16639" d="M184.6,96.819c-4.216,10.848-26.719,14.94-28.244,15.205a4.364,4.364,0,0,0,.892.066c7.841-.3,20.189-2.9,26.916-7.8l11.284,25.867s.238.09.662.234l15.351-6.108c-20.41-6.547-26.861-27.461-26.861-27.461Z" transform="translate(-133.671 -73.342)" fill="#00b2ca" opacity="0.65"/>
+      </g>
+      <g id="weel" transform="translate(164.122 157.799)">
+        <rect id="Rectangle_1539" data-name="Rectangle 1539" width="3.172" height="54.482" rx="1.117" transform="translate(54.482 1.102) rotate(90)" fill="#00b2ca"/>
+        <circle id="Ellipse_242" data-name="Ellipse 242" cx="4.119" cy="4.119" r="4.119" transform="translate(0.047 5.825) rotate(-45)" fill="#00b2ca"/>
+        <circle id="Ellipse_243" data-name="Ellipse 243" cx="4.119" cy="4.119" r="4.119" transform="translate(42.786 5.825) rotate(-45)" fill="#00b2ca"/>
+        <path id="Path_14852" data-name="Path 14852" d="M226.9,197.953H201.152v1.586h27.241v-.1a1.489,1.489,0,0,0-1.489-1.489Z" transform="translate(-173.911 -196.851)"/>
+      </g>
+      <g id="leg" transform="translate(103.344 80.404)">
+        <path id="Path_14840" data-name="Path 14840" d="M157.19,141.8s-21.556,29.4-43.645,61.137a2.277,2.277,0,0,0,3.124,3.2c10.184-6.77,27.983-20.053,49.49-42.235l6.992-12.315-15.96-9.789Z" transform="translate(-113.133 -119.456)" fill="#05293c"/>
+        <path id="Path_14841" data-name="Path 14841" d="M166.158,163.9l6.992-12.315-3.6-2.207L157.19,141.8,126.4,199.258h0A334.527,334.527,0,0,0,166.158,163.9Z" transform="translate(-113.133 -119.456)" fill="#011721"/>
+        <path id="Path_14842" data-name="Path 14842" d="M218.757,131.3c-4.543-9.082-20.922-11.844-20.922-11.844-8.457,4.867-20.323,10.706-29.066,15.446-6.7,3.631-11.579,6.9-11.579,6.9,7.2,26.348,28.874,53.325,38.5,64.381a1.764,1.764,0,0,0,3.037-1.6c-5.586-21.525-17.067-55.969-17.067-55.969,16.394-4.177,26.152-8.619,31.955-12.359a18.506,18.506,0,0,0,5.14-4.95h0Z" transform="translate(-113.133 -119.456)" fill="#05293c"/>
+        <path id="Path_14843" data-name="Path 14843" d="M181.662,148.61c16.394-4.177,26.152-8.619,31.955-12.359,2.05-1.321,5.176-.408,6.534-2.348l-1.394-2.6a17.755,17.755,0,0,0-7.3-7.02s-27.072,11.16-43.383,21.313c3.788,22.17,13.573,43.658,22.966,55.085l1.221-.2,4.428-3.423c-5.939-21.174-15.028-48.442-15.028-48.442Z" transform="translate(-113.133 -119.456)" fill="#011721"/>
+        <path id="Path_14844" data-name="Path 14844" d="M119.5,194.412q-2.958,4.215-5.96,8.526a2.277,2.277,0,0,0,3.124,3.2c2.724-1.811,6-4.093,9.736-6.881,0,0-2.908-.215-4.376-1.393a9.7,9.7,0,0,1-2.524-3.452Z" transform="translate(-113.133 -119.456)" fill="#ffd2b3"/>
+        <path id="Path_14845" data-name="Path 14845" d="M198.729,204.579c-.94-3.623-1.586-6-2.777-10.132a17.448,17.448,0,0,1-2.128,2.668,9.768,9.768,0,0,1-4.088,1.964c2.253,2.785,4.288,5.188,5.956,7.1a1.764,1.764,0,0,0,3.037-1.6Z" transform="translate(-113.133 -119.456)" fill="#ffd2b3"/>
+        <path id="Path_14846" data-name="Path 14846" d="M122.078,197.9l-8.266,7.957a2.208,2.208,0,0,0,2.855.282c2.724-1.811,6-4.093,9.736-6.881a9.8,9.8,0,0,1-4.326-1.357Z" transform="translate(-113.133 -119.456)" fill="#d39266"/>
+        <path id="Path_14847" data-name="Path 14847" d="M193.577,197.349a10.5,10.5,0,0,1-3.841,1.73c2.253,2.785,4.288,5.188,5.956,7.1a1.712,1.712,0,0,0,2.047.446l-4.162-9.279Z" transform="translate(-113.133 -119.456)" fill="#d39266"/>
+      </g>
+      <g id="char" transform="translate(163.483 26.034)">
+        <g id="back-2" data-name="back">
+          <circle id="Ellipse_244" data-name="Ellipse 244" cx="6.278" cy="6.278" r="6.278" transform="translate(59.469 8.878) rotate(-45)"/>
+          <path id="Path_14848" data-name="Path 14848" d="M243.046,67.876,239.8,79.944a6.253,6.253,0,1,0,3.249-12.068Z" transform="translate(-173.272 -65.087)" fill="#00b2ca"/>
+          <path id="Path_14849" data-name="Path 14849" d="M207.4,149.512H179.164a5.892,5.892,0,0,1-5.892-5.892h0a5.892,5.892,0,0,1,5.893-5.893H207.4A13.6,13.6,0,0,0,220.5,127.7l12.853-46.26a5.892,5.892,0,0,1,7.255-4.1h0a5.892,5.892,0,0,1,4.1,7.255l-12.842,46.227A25.4,25.4,0,0,1,207.4,149.513Z" transform="translate(-173.272 -65.087)" fill="#00b2ca"/>
+          <path id="Path_14850" data-name="Path 14850" d="M226.922,125.71l12.842-46.227a5.855,5.855,0,0,0,.17-2.254,5.872,5.872,0,0,0-6.58,4.216L220.5,127.705a13.6,13.6,0,0,1-13.1,10.022H179.164a5.892,5.892,0,0,0-5.892,5.892h0a5.81,5.81,0,0,0,.069.687,5.865,5.865,0,0,0,.878.088h28.234a25.4,25.4,0,0,0,24.468-18.686Z" transform="translate(-173.272 -65.087)"/>
+        </g>
+        <g id="stand" transform="translate(15.798 83.226)">
+          <path id="Path_14838" data-name="Path 14838" d="M189.074,148.313H213.23v1.7a4.032,4.032,0,0,1-4.03,4.03H193.1a4.032,4.032,0,0,1-4.03-4.03v-1.7h0Z" transform="translate(-189.07 -148.313)" fill="#00b2ca"/>
+          <path id="Path_14839" data-name="Path 14839" d="M213.23,148.313H200.816l.337,1.2v4.526h9.264a2.814,2.814,0,0,0,2.814-2.814Z" transform="translate(-189.07 -148.313)" fill="#00b2ca"/>
+          <rect id="Rectangle_1540" data-name="Rectangle 1540" width="8.908" height="11.993" transform="translate(7.628 5.726)" fill="#00b2ca"/>
+          <rect id="Rectangle_1541" data-name="Rectangle 1541" width="4.536" height="33.226" transform="translate(9.814 17.718)" fill="#00b2ca"/>
+          <rect id="Rectangle_1542" data-name="Rectangle 1542" width="2.268" height="33.226" transform="translate(12.081 17.718)"/>
+          <rect id="Rectangle_1543" data-name="Rectangle 1543" width="4.454" height="11.993" transform="translate(12.081 5.726)"/>
+        </g>
+        <g id="stand-2" data-name="stand" transform="translate(8.772 50.355)">
+          <path id="Path_14851" data-name="Path 14851" d="M184.515,147.468a2.474,2.474,0,0,1-2.349-3.242l5.956-18.167a15.392,15.392,0,0,1,14.655-10.617h35.1a2.471,2.471,0,0,1,0,4.943h-35.1a10.459,10.459,0,0,0-9.959,7.214l-5.956,18.167a2.473,2.473,0,0,1-2.348,1.7Z" transform="translate(-182.044 -115.442)" fill="#00b2ca"/>
+          <path id="Path_14853" data-name="Path 14853" d="M237.879,115.442h-35.1a15.391,15.391,0,0,0-14.655,10.617l-.349,1.063a15.174,15.174,0,0,1,5.185-6.184,17.568,17.568,0,0,1,10.1-3.019h37.29a.056.056,0,0,0,0-.006,2.472,2.472,0,0,0-2.471-2.471Z" transform="translate(-182.044 -115.442)"/>
+        </g>
+        <g id="shadow" transform="translate(48.515 55.296)" opacity="0.38">
+          <path id="Path_14854" data-name="Path 14854" d="M234.768,120.384l-.511,1.838-12.47.861.75-2.7Z" transform="translate(-221.787 -120.383)" fill="#011721"/>
+        </g>
+      </g>
+      <g id="table" transform="translate(25.972 73.069)">
+        <rect id="wood" width="2.559" height="93.474" transform="translate(18.087 1.199)" fill="#00b2ca"/>
+        <rect id="wood-2" data-name="wood" width="2.559" height="93.474" transform="translate(136.214 1.199)" fill="#00b2ca"/>
+        <rect id="wood-3" data-name="wood" width="154.222" height="2.4" rx="0.844" fill="#00b2ca"/>
+      </g>
+      <g id="error" transform="translate(116.048 2.012)">
+        <path id="Path_14855" data-name="Path 14855" d="M140.406,66.521l-13.1-.2a1.378,1.378,0,0,1-1.163-2.085l6.721-11.25,6.721-11.25a1.379,1.379,0,0,1,2.388.035l6.382,11.446,6.382,11.446a1.379,1.379,0,0,1-1.224,2.05l-13.1-.2Z" transform="translate(-125.948 -41.064)" fill="#00b2ca"/>
+        <path id="Path_14856" data-name="Path 14856" d="M140.425,65.269l-12.375-.185a.476.476,0,0,1-.4-.719L134,53.741l6.348-10.624a.475.475,0,0,1,.823.013L147.2,53.938l6.028,10.809a.475.475,0,0,1-.422.707l-12.375-.185Z" transform="translate(-125.948 -41.064)" fill="#fff"/>
+        <path id="Path_16644" data-name="Path 16644" d="M140.425,65.269l-12.375-.185a.476.476,0,0,1-.4-.719L134,53.741l6.348-10.624a.475.475,0,0,1,.823.013L147.2,53.938l6.028,10.809a.475.475,0,0,1-.422.707l-12.375-.185Z" transform="translate(-125.948 -41.064)" fill="#00b2ca" opacity="0.1"/>
+        <path id="Path_14857" data-name="Path 14857" d="M141.486,58.538l-1.92-.029-.44-8.218,3.045.046Z" transform="translate(-125.948 -41.064)" fill="#00b2ca"/>
+        <circle id="Ellipse_245" data-name="Ellipse 245" cx="1.523" cy="1.523" r="1.523" transform="translate(12.394 19.694) rotate(-48.16)" fill="#00b2ca"/>
+      </g>
+      <g id="tree" transform="translate(24.29 88.069)">
+        <g id="tree-2" data-name="tree">
+          <path id="Path_14858" data-name="Path 14858" d="M34.325,186.851h66.789v5.976a14.21,14.21,0,0,1-14.2,14.2H48.528a14.21,14.21,0,0,1-14.2-14.2v-5.976h0Z" transform="translate(-34.325 -127.121)" fill="#00b2ca"/>
+          <path id="Path_14859" data-name="Path 14859" d="M54.505,201.781h26.43a20.184,20.184,0,0,0,19.484-14.926l-65.4,0a20.185,20.185,0,0,0,19.48,14.93Z" transform="translate(-34.325 -127.121)"/>
+          <path id="Path_16635" data-name="Path 16635" d="M54.505,201.781h26.43a20.184,20.184,0,0,0,19.484-14.926l-65.4,0a20.185,20.185,0,0,0,19.48,14.93Z" transform="translate(-34.325 -127.121)" fill="#00b2ca" opacity="0.65"/>
+          <path id="Path_14860" data-name="Path 14860" d="M61.631,181.6s-15.288-32.76,15.045-54.479c0,0,21.476,16.987-4.368,54.479Z" transform="translate(-34.325 -127.121)"/>
+          <path id="Path_16638" data-name="Path 16638" d="M61.631,181.6s-15.288-32.76,15.045-54.479c0,0,21.476,16.987-4.368,54.479Z" transform="translate(-34.325 -127.121)" fill="#00b2ca" opacity="0.65"/>
+          <path id="Path_14861" data-name="Path 14861" d="M76.677,127.123s5.657,40.853-10.6,54.479h6.234c25.844-37.492,4.368-54.479,4.368-54.479Z" transform="translate(-34.325 -127.121)" fill="#00b2ca"/>
+          <path id="Path_14862" data-name="Path 14862" d="M84.628,153.443s-17.506-.119-22.968,16.882l4.414,4.545,18.553-21.427Z" transform="translate(-34.325 -127.121)" fill="#00b2ca"/>
+          <path id="Path_14863" data-name="Path 14863" d="M59.4,186.851s-.85-44.651,45.258-31.061c0,0-4.125,20.142-32.032,31.061Z" transform="translate(-34.325 -127.121)"/>
+          <path id="Path_16637" data-name="Path 16637" d="M59.4,186.851s-.85-44.651,45.258-31.061c0,0-4.125,20.142-32.032,31.061Z" transform="translate(-34.325 -127.121)" fill="#00b2ca" opacity="0.65"/>
+          <path id="Path_14864" data-name="Path 14864" d="M104.66,155.79s-24.39,1.936-39.071,31.061h7.039C100.535,175.931,104.66,155.79,104.66,155.79Z" transform="translate(-34.325 -127.121)" fill="#00b2ca"/>
+          <path id="Path_14865" data-name="Path 14865" d="M58.252,169.133l-.068-.511s16.027,2.681,15.972,17.612l-1.012.327-5.919-1.826-9.447-12.813.474-2.789Z" transform="translate(-34.325 -127.121)" fill="#00b2ca"/>
+          <path id="Path_14866" data-name="Path 14866" d="M73.112,186.851s3.154-20.384-32.153-19.535a24.369,24.369,0,0,0,11.648,19.535Z" transform="translate(-34.325 -127.121)"/>
+          <path id="Path_16636" data-name="Path 16636" d="M73.112,186.851s3.154-20.384-32.153-19.535a24.369,24.369,0,0,0,11.648,19.535Z" transform="translate(-34.325 -127.121)" fill="#00b2ca" opacity="0.65"/>
+          <path id="Path_14867" data-name="Path 14867" d="M40.958,167.316a24.369,24.369,0,0,0,11.648,19.535h8.251c-11.648-6.375-19.9-19.535-19.9-19.535Z" transform="translate(-34.325 -127.121)" fill="#00b2ca"/>
+        </g>
+        <path id="Path_14868" data-name="Path 14868" d="M70.989,177.921a.083.083,0,0,1-.047-.015.081.081,0,0,1-.018-.111c.1-.136,10.031-13.675,21.373-18.311a.079.079,0,1,1,.059.146c-11.3,4.621-21.205,18.122-21.3,18.258a.081.081,0,0,1-.064.033Z" transform="translate(-34.325 -127.121)" fill="#011721"/>
+        <path id="Path_14869" data-name="Path 14869" d="M76.973,155.436h-.009a.079.079,0,0,1-.07-.087,116.542,116.542,0,0,0,.618-15.416.08.08,0,0,1,.159-.007,116.571,116.571,0,0,1-.62,15.44.079.079,0,0,1-.079.071Z" transform="translate(-34.325 -127.121)" fill="#011721"/>
+        <path id="Path_14870" data-name="Path 14870" d="M60.857,186.93a.08.08,0,0,1-.038-.009,41.551,41.551,0,0,1-8.632-6.285.08.08,0,0,1,.115-.11A41.376,41.376,0,0,0,60.9,186.78a.081.081,0,0,1,.033.108.079.079,0,0,1-.07.042Z" transform="translate(-34.325 -127.121)" fill="#011721"/>
+      </g>
+      <g id="computer" transform="translate(34.686 16.077)">
+        <rect id="laptop" width="71.905" height="2.853" rx="1.004" transform="translate(105.904 56.869) rotate(180)" fill="#011721"/>
+        <path id="Path_14871" data-name="Path 14871" d="M80.2,109.077h51.9L117.857,71.886,65.805,71.1Z" transform="translate(-44.721 -55.129)" fill="#011721"/>
+        <path id="Path_14872" data-name="Path 14872" d="M81.544,109.077h49.41L117.085,72.97l-49.561-.789Z" transform="translate(-44.721 -55.129)" fill="#fff"/>
+        <path id="Path_16642" data-name="Path 16642" d="M81.544,109.077h49.41L117.085,72.97l-49.561-.789Z" transform="translate(-44.721 -55.129)" fill="#00b2ca" opacity="0.2"/>
+        <g id="_10101010" data-name="10101010" transform="translate(0 27.377)" opacity="0.49">
+          <path id="Path_14873" data-name="Path 14873" d="M45.259,82.569h.3a.077.077,0,0,1,.076.055l1.428,3.749c.014.037,0,.055-.034.055h-.282a.077.077,0,0,1-.076-.055L45.4,83.033a.036.036,0,0,0-.015-.017.018.018,0,0,0-.019,0l-.454.171-.015,0a.082.082,0,0,1-.068-.05l-.106-.2v-.011a.05.05,0,0,1,.017-.055l.459-.286a.113.113,0,0,1,.065-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14874" data-name="Path 14874" d="M46.776,82.569h.3a.076.076,0,0,1,.076.055l1.428,3.749c.014.037,0,.055-.034.055h-.281a.078.078,0,0,1-.077-.055l-1.272-3.341a.035.035,0,0,0-.014-.017.021.021,0,0,0-.02,0l-.454.171-.014,0a.083.083,0,0,1-.069-.05l-.1-.2V82.93a.05.05,0,0,1,.017-.055l.458-.286a.118.118,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14875" data-name="Path 14875" d="M49.6,86.211a1.576,1.576,0,0,1-.528-.714l-.76-2a.83.83,0,0,1-.015-.714.592.592,0,0,1,.571-.273,1.285,1.285,0,0,1,.788.273,1.564,1.564,0,0,1,.531.714l.76,2a.822.822,0,0,1,.013.714.606.606,0,0,1-.579.274,1.256,1.256,0,0,1-.78-.274Zm.986-.239a.57.57,0,0,0-.023-.454l-.776-2.039a1.035,1.035,0,0,0-.321-.452A.729.729,0,0,0,49,82.856a.32.32,0,0,0-.326.171.568.568,0,0,0,.023.452l.776,2.039a1.048,1.048,0,0,0,.321.454.723.723,0,0,0,.457.171.344.344,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14876" data-name="Path 14876" d="M52.273,86.211a1.576,1.576,0,0,1-.528-.714l-.76-2a.83.83,0,0,1-.015-.714.592.592,0,0,1,.571-.273,1.285,1.285,0,0,1,.788.273,1.564,1.564,0,0,1,.531.714l.76,2a.822.822,0,0,1,.013.714.606.606,0,0,1-.579.274,1.256,1.256,0,0,1-.78-.274Zm.986-.239a.57.57,0,0,0-.023-.454l-.776-2.039a1.035,1.035,0,0,0-.321-.452.729.729,0,0,0-.468-.171.32.32,0,0,0-.326.171.568.568,0,0,0,.023.452l.776,2.039a1.048,1.048,0,0,0,.321.454.723.723,0,0,0,.457.171.344.344,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14877" data-name="Path 14877" d="M54.94,86.211a1.575,1.575,0,0,1-.528-.714l-.76-2a.832.832,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.285,1.285,0,0,1,.788.273,1.571,1.571,0,0,1,.531.714l.76,2a.826.826,0,0,1,.013.714.608.608,0,0,1-.58.274,1.259,1.259,0,0,1-.78-.274Zm.987-.239a.574.574,0,0,0-.023-.454l-.777-2.039a1.036,1.036,0,0,0-.321-.452.727.727,0,0,0-.467-.171.321.321,0,0,0-.326.171.567.567,0,0,0,.023.452l.777,2.039a1.047,1.047,0,0,0,.321.454.721.721,0,0,0,.456.171.345.345,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14878" data-name="Path 14878" d="M56.413,82.569h.3a.076.076,0,0,1,.076.055l1.428,3.749c.014.037,0,.055-.034.055H57.9a.078.078,0,0,1-.077-.055l-1.273-3.34a.035.035,0,0,0-.014-.017.021.021,0,0,0-.02,0l-.454.171-.014,0a.083.083,0,0,1-.069-.05l-.1-.2v-.011a.05.05,0,0,1,.017-.055l.458-.286a.118.118,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14879" data-name="Path 14879" d="M59.241,86.211a1.576,1.576,0,0,1-.528-.714l-.76-2a.83.83,0,0,1-.015-.714.592.592,0,0,1,.571-.273,1.285,1.285,0,0,1,.788.273,1.564,1.564,0,0,1,.531.714l.76,2a.822.822,0,0,1,.013.714.606.606,0,0,1-.579.274,1.256,1.256,0,0,1-.78-.274Zm.986-.239a.57.57,0,0,0-.023-.454l-.776-2.039a1.035,1.035,0,0,0-.321-.452.729.729,0,0,0-.468-.171.32.32,0,0,0-.326.171.568.568,0,0,0,.023.452l.776,2.039a1.048,1.048,0,0,0,.321.454.723.723,0,0,0,.457.171.344.344,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14880" data-name="Path 14880" d="M60.713,82.569h.3a.076.076,0,0,1,.076.055l1.428,3.749c.014.037,0,.055-.034.055H62.2a.078.078,0,0,1-.077-.055l-1.272-3.341a.035.035,0,0,0-.014-.017.021.021,0,0,0-.02,0l-.454.171-.014,0a.083.083,0,0,1-.069-.05l-.1-.2V82.93a.05.05,0,0,1,.017-.055l.458-.286a.118.118,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14881" data-name="Path 14881" d="M63.542,86.211a1.576,1.576,0,0,1-.528-.714l-.76-2a.83.83,0,0,1-.015-.714.592.592,0,0,1,.571-.273,1.285,1.285,0,0,1,.788.273,1.564,1.564,0,0,1,.531.714l.76,2a.822.822,0,0,1,.013.714.606.606,0,0,1-.579.274,1.256,1.256,0,0,1-.781-.274Zm.986-.239a.57.57,0,0,0-.023-.454l-.776-2.039a1.035,1.035,0,0,0-.321-.452.729.729,0,0,0-.468-.171.32.32,0,0,0-.326.171.568.568,0,0,0,.023.452l.776,2.039a1.048,1.048,0,0,0,.321.454.723.723,0,0,0,.457.171.344.344,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14882" data-name="Path 14882" d="M65.014,82.569h.3a.076.076,0,0,1,.076.055l1.428,3.749c.014.037,0,.055-.034.055H66.5a.078.078,0,0,1-.077-.055l-1.272-3.341a.035.035,0,0,0-.014-.017.021.021,0,0,0-.02,0l-.454.171-.014,0a.083.083,0,0,1-.069-.05l-.1-.2V82.93a.05.05,0,0,1,.017-.055l.458-.286a.118.118,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14883" data-name="Path 14883" d="M66.53,82.569h.3a.076.076,0,0,1,.076.055l1.428,3.749c.014.037,0,.055-.034.055h-.281a.078.078,0,0,1-.077-.055L66.67,83.032a.035.035,0,0,0-.014-.017.021.021,0,0,0-.02,0l-.454.171-.014,0a.083.083,0,0,1-.069-.05l-.1-.2V82.93a.05.05,0,0,1,0-.058l.458-.286a.118.118,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14884" data-name="Path 14884" d="M68.046,82.569h.3a.077.077,0,0,1,.076.055l1.428,3.749c.014.037,0,.055-.034.055h-.282a.077.077,0,0,1-.076-.055l-1.272-3.341a.036.036,0,0,0-.015-.017.018.018,0,0,0-.019,0l-.454.171-.015,0a.082.082,0,0,1-.068-.05l-.106-.2V82.93a.05.05,0,0,1,.017-.055l.459-.286a.113.113,0,0,1,.065-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14885" data-name="Path 14885" d="M69.563,82.569h.3a.076.076,0,0,1,.076.055l1.428,3.749c.014.037,0,.055-.034.055h-.281a.078.078,0,0,1-.077-.055L69.7,83.033a.035.035,0,0,0-.014-.017.021.021,0,0,0-.02,0l-.454.171-.014,0a.083.083,0,0,1-.069-.05l-.1-.2v-.011a.05.05,0,0,1,.017-.055l.458-.286a.118.118,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14886" data-name="Path 14886" d="M72.391,86.211a1.576,1.576,0,0,1-.528-.714l-.76-2a.83.83,0,0,1-.015-.714.592.592,0,0,1,.571-.273,1.285,1.285,0,0,1,.788.273,1.564,1.564,0,0,1,.531.714l.76,2a.822.822,0,0,1,.013.714.606.606,0,0,1-.579.274,1.256,1.256,0,0,1-.781-.274Zm.986-.239a.57.57,0,0,0-.023-.454l-.776-2.039a1.035,1.035,0,0,0-.321-.452.729.729,0,0,0-.468-.171.32.32,0,0,0-.326.171.568.568,0,0,0,.023.452l.776,2.039a1.048,1.048,0,0,0,.321.454.723.723,0,0,0,.457.171.344.344,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14887" data-name="Path 14887" d="M75.059,86.211a1.576,1.576,0,0,1-.528-.714l-.76-2a.83.83,0,0,1-.015-.714.592.592,0,0,1,.571-.273,1.285,1.285,0,0,1,.788.273,1.564,1.564,0,0,1,.531.714l.76,2a.822.822,0,0,1,.013.714.606.606,0,0,1-.579.274A1.256,1.256,0,0,1,75.059,86.211Zm.986-.239a.569.569,0,0,0-.023-.454l-.776-2.039a1.035,1.035,0,0,0-.321-.452.729.729,0,0,0-.468-.171.32.32,0,0,0-.326.171.568.568,0,0,0,.023.452l.776,2.039a1.048,1.048,0,0,0,.321.454.723.723,0,0,0,.457.171A.344.344,0,0,0,76.045,85.972Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14888" data-name="Path 14888" d="M77.727,86.211A1.575,1.575,0,0,1,77.2,85.5l-.76-2a.832.832,0,0,1-.016-.714A.6.6,0,0,1,77,82.515a1.285,1.285,0,0,1,.788.273,1.571,1.571,0,0,1,.531.714l.76,2a.826.826,0,0,1,.013.714.608.608,0,0,1-.58.274,1.259,1.259,0,0,1-.785-.279Zm.987-.239a.574.574,0,0,0-.023-.454l-.777-2.039a1.036,1.036,0,0,0-.321-.452.727.727,0,0,0-.467-.171.321.321,0,0,0-.326.171.567.567,0,0,0,.023.452l.777,2.039a1.047,1.047,0,0,0,.321.454.721.721,0,0,0,.456.171.345.345,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14889" data-name="Path 14889" d="M80.4,86.211a1.576,1.576,0,0,1-.528-.714l-.76-2a.83.83,0,0,1-.015-.714.592.592,0,0,1,.571-.273,1.285,1.285,0,0,1,.788.273,1.564,1.564,0,0,1,.531.714l.76,2a.822.822,0,0,1,.013.714.606.606,0,0,1-.579.274,1.256,1.256,0,0,1-.781-.274Zm.986-.239a.57.57,0,0,0-.023-.454l-.776-2.039a1.035,1.035,0,0,0-.321-.452.729.729,0,0,0-.468-.171.32.32,0,0,0-.326.171.568.568,0,0,0,.023.452l.776,2.039a1.048,1.048,0,0,0,.321.454.723.723,0,0,0,.457.171.344.344,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14890" data-name="Path 14890" d="M83.065,86.211a1.576,1.576,0,0,1-.528-.714l-.76-2a.83.83,0,0,1-.015-.714.592.592,0,0,1,.571-.273,1.285,1.285,0,0,1,.788.273,1.564,1.564,0,0,1,.531.714l.76,2a.822.822,0,0,1,.013.714.606.606,0,0,1-.579.274,1.256,1.256,0,0,1-.781-.274Zm.986-.239a.569.569,0,0,0-.023-.454l-.776-2.039a1.035,1.035,0,0,0-.321-.452.729.729,0,0,0-.468-.171.32.32,0,0,0-.326.171.568.568,0,0,0,.023.452l.776,2.039a1.048,1.048,0,0,0,.321.454.723.723,0,0,0,.457.171A.344.344,0,0,0,84.051,85.972Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14891" data-name="Path 14891" d="M84.537,82.569h.3a.076.076,0,0,1,.076.055l1.428,3.749c.014.037,0,.055-.034.055h-.281a.078.078,0,0,1-.077-.055l-1.272-3.341a.035.035,0,0,0-.014-.017.021.021,0,0,0-.02,0l-.454.171-.014,0a.083.083,0,0,1-.069-.05l-.1-.2V82.93a.05.05,0,0,1,.017-.055l.458-.286a.118.118,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14892" data-name="Path 14892" d="M47.779,89.186h.3a.078.078,0,0,1,.076.055l1.428,3.749c.014.037,0,.055-.034.055h-.282a.076.076,0,0,1-.076-.055l-1.272-3.34a.034.034,0,0,0-.015-.017.018.018,0,0,0-.019,0l-.454.171-.015.006a.082.082,0,0,1-.068-.05l-.106-.2v-.01a.05.05,0,0,1,.018-.055l.459-.286a.117.117,0,0,1,.065-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14893" data-name="Path 14893" d="M49.3,89.186h.3a.078.078,0,0,1,.076.055L51.1,92.99c.015.037,0,.055-.034.055h-.281a.078.078,0,0,1-.078-.055l-1.272-3.34a.03.03,0,0,0-.014-.017.021.021,0,0,0-.02,0l-.454.171-.014.006a.083.083,0,0,1-.069-.05l-.106-.2v-.01a.049.049,0,0,1,.017-.055l.458-.286a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14894" data-name="Path 14894" d="M50.811,89.186h.3a.078.078,0,0,1,.076.055l1.427,3.749c.015.037,0,.055-.034.055H52.3a.078.078,0,0,1-.078-.055L50.95,89.65a.03.03,0,0,0-.014-.017.021.021,0,0,0-.02,0l-.454.171-.014.006a.083.083,0,0,1-.069-.05l-.106-.2v-.01a.049.049,0,0,1,.017-.055l.458-.286a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14895" data-name="Path 14895" d="M53.64,92.827a1.575,1.575,0,0,1-.528-.714l-.76-2a.834.834,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.568,1.568,0,0,1,.531.714l.76,2a.824.824,0,0,1,.013.714.607.607,0,0,1-.58.273,1.254,1.254,0,0,1-.78-.273Zm.986-.24a.568.568,0,0,0-.023-.453L53.827,90.1a1.043,1.043,0,0,0-.321-.452.727.727,0,0,0-.467-.171.32.32,0,0,0-.326.171.567.567,0,0,0,.023.452l.776,2.039a1.043,1.043,0,0,0,.321.453.722.722,0,0,0,.456.171.345.345,0,0,0,.338-.175Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14896" data-name="Path 14896" d="M55.111,89.186h.3a.078.078,0,0,1,.076.055l1.427,3.749c.015.037,0,.055-.034.055H56.6a.078.078,0,0,1-.078-.055L55.25,89.65a.03.03,0,0,0-.014-.017.021.021,0,0,0-.02,0l-.454.171-.014.006a.083.083,0,0,1-.069-.05l-.106-.2v-.01a.049.049,0,0,1,.017-.055l.458-.286a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14897" data-name="Path 14897" d="M57.941,92.827a1.575,1.575,0,0,1-.528-.714l-.76-2a.834.834,0,0,1-.016-.714.6.6,0,0,1,.572-.273A1.289,1.289,0,0,1,58,89.4a1.568,1.568,0,0,1,.531.714l.76,2a.824.824,0,0,1,.013.714.607.607,0,0,1-.58.273,1.254,1.254,0,0,1-.779-.273Zm.986-.24a.568.568,0,0,0-.023-.453L58.127,90.1a1.043,1.043,0,0,0-.321-.452.727.727,0,0,0-.467-.171.32.32,0,0,0-.326.171.567.567,0,0,0,.023.452l.776,2.039a1.043,1.043,0,0,0,.321.453.722.722,0,0,0,.456.171.345.345,0,0,0,.338-.175Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14898" data-name="Path 14898" d="M59.412,89.186h.3a.078.078,0,0,1,.076.055l1.427,3.749c.015.037,0,.055-.034.055H60.9a.078.078,0,0,1-.078-.055L59.55,89.65a.03.03,0,0,0-.014-.017.021.021,0,0,0-.02,0l-.454.171-.014.006a.083.083,0,0,1-.069-.05l-.106-.2v-.01a.049.049,0,0,1,.017-.055l.458-.286a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14899" data-name="Path 14899" d="M62.241,92.827a1.575,1.575,0,0,1-.528-.714l-.76-2a.834.834,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.568,1.568,0,0,1,.531.714l.76,2a.824.824,0,0,1,.013.714.607.607,0,0,1-.58.273,1.254,1.254,0,0,1-.78-.273Zm.986-.24a.568.568,0,0,0-.023-.453L62.428,90.1a1.043,1.043,0,0,0-.321-.452.727.727,0,0,0-.467-.171.32.32,0,0,0-.326.171.567.567,0,0,0,.023.452l.776,2.039a1.043,1.043,0,0,0,.321.453.722.722,0,0,0,.456.171.345.345,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14900" data-name="Path 14900" d="M63.713,89.186h.3a.078.078,0,0,1,.076.055l1.428,3.749c.014.037,0,.055-.034.055H65.2a.076.076,0,0,1-.076-.055l-1.272-3.34a.034.034,0,0,0-.015-.017.018.018,0,0,0-.019,0l-.454.171-.015.006a.082.082,0,0,1-.068-.05l-.106-.2v-.01a.05.05,0,0,1,.018-.055l.459-.286a.117.117,0,0,1,.065-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14901" data-name="Path 14901" d="M65.229,89.186h.3a.078.078,0,0,1,.076.055l1.427,3.749c.015.037,0,.055-.034.055h-.281a.078.078,0,0,1-.078-.055l-1.272-3.34a.03.03,0,0,0-.014-.017.021.021,0,0,0-.02,0l-.454.171-.014.006a.083.083,0,0,1-.069-.05l-.106-.2v-.01a.049.049,0,0,1,.017-.055l.458-.286a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14902" data-name="Path 14902" d="M66.745,89.186h.3a.078.078,0,0,1,.076.055l1.428,3.749c.014.037,0,.055-.034.055h-.282a.076.076,0,0,1-.076-.055l-1.272-3.34a.034.034,0,0,0-.015-.017.018.018,0,0,0-.019,0L66.4,89.8l-.015.006a.082.082,0,0,1-.068-.05l-.106-.2v-.01a.05.05,0,0,1,.018-.055l.459-.286a.117.117,0,0,1,.065-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14903" data-name="Path 14903" d="M69.574,92.827a1.579,1.579,0,0,1-.528-.714l-.759-2a.834.834,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.572,1.572,0,0,1,.531.714l.759,2a.826.826,0,0,1,.014.714.608.608,0,0,1-.58.273A1.257,1.257,0,0,1,69.574,92.827Zm.987-.24a.573.573,0,0,0-.023-.453L69.761,90.1a1.038,1.038,0,0,0-.321-.452.728.728,0,0,0-.467-.171.32.32,0,0,0-.326.171.569.569,0,0,0,.023.452l.777,2.039a1.042,1.042,0,0,0,.321.453.722.722,0,0,0,.456.171.345.345,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14904" data-name="Path 14904" d="M72.242,92.827a1.579,1.579,0,0,1-.528-.714l-.759-2a.834.834,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.573,1.573,0,0,1,.531.714l.759,2a.826.826,0,0,1,.014.714.608.608,0,0,1-.58.273,1.257,1.257,0,0,1-.781-.273Zm.987-.24a.573.573,0,0,0-.023-.453L72.429,90.1a1.038,1.038,0,0,0-.321-.452.728.728,0,0,0-.467-.171.32.32,0,0,0-.326.171.569.569,0,0,0,.023.452l.777,2.039a1.042,1.042,0,0,0,.321.453.722.722,0,0,0,.456.171.345.345,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14905" data-name="Path 14905" d="M74.911,92.827a1.575,1.575,0,0,1-.528-.714l-.76-2a.834.834,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.569,1.569,0,0,1,.531.714l.76,2a.824.824,0,0,1,.013.714.607.607,0,0,1-.58.273A1.254,1.254,0,0,1,74.911,92.827Zm.986-.24a.568.568,0,0,0-.023-.453L75.1,90.1a1.043,1.043,0,0,0-.321-.452.727.727,0,0,0-.467-.171.32.32,0,0,0-.326.171.567.567,0,0,0,.023.452l.776,2.039a1.043,1.043,0,0,0,.321.453.722.722,0,0,0,.456.171.345.345,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14906" data-name="Path 14906" d="M76.382,89.186h.3a.078.078,0,0,1,.076.055l1.428,3.749c.014.037,0,.055-.034.055H77.87a.076.076,0,0,1-.076-.055L76.52,89.65a.034.034,0,0,0-.015-.017.018.018,0,0,0-.019,0l-.454.171-.015.006a.082.082,0,0,1-.068-.05l-.106-.2v-.01a.05.05,0,0,1,.018-.055l.459-.286a.117.117,0,0,1,.065-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14907" data-name="Path 14907" d="M77.9,89.186h.3a.078.078,0,0,1,.076.055L79.7,92.99c.015.037,0,.055-.034.055h-.281a.078.078,0,0,1-.078-.055l-1.272-3.34a.03.03,0,0,0-.014-.017.021.021,0,0,0-.02,0l-.454.171-.014.006a.083.083,0,0,1-.069-.05l-.106-.2v-.01a.049.049,0,0,1,.017-.055l.458-.286a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14908" data-name="Path 14908" d="M80.728,92.827a1.575,1.575,0,0,1-.528-.714l-.76-2a.834.834,0,0,1-.016-.714A.6.6,0,0,1,80,89.13a1.289,1.289,0,0,1,.788.273,1.568,1.568,0,0,1,.531.714l.76,2a.824.824,0,0,1,.013.714.607.607,0,0,1-.58.273,1.254,1.254,0,0,1-.784-.277Zm.986-.24a.568.568,0,0,0-.023-.453L80.914,90.1a1.043,1.043,0,0,0-.321-.452.727.727,0,0,0-.467-.171.32.32,0,0,0-.326.171.567.567,0,0,0,.023.452l.776,2.039a1.043,1.043,0,0,0,.321.453.722.722,0,0,0,.456.171.345.345,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14909" data-name="Path 14909" d="M83.4,92.827a1.579,1.579,0,0,1-.528-.714l-.759-2A.834.834,0,0,1,82.1,89.4a.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.572,1.572,0,0,1,.531.714l.759,2a.826.826,0,0,1,.014.714.608.608,0,0,1-.58.273,1.257,1.257,0,0,1-.781-.273Zm.987-.24a.573.573,0,0,0-.023-.453L83.583,90.1a1.038,1.038,0,0,0-.321-.452.728.728,0,0,0-.467-.171.32.32,0,0,0-.326.171.569.569,0,0,0,.023.452l.777,2.039a1.042,1.042,0,0,0,.321.453.722.722,0,0,0,.456.171.345.345,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14910" data-name="Path 14910" d="M84.867,89.186h.3a.078.078,0,0,1,.076.055L86.67,92.99c.015.037,0,.055-.034.055h-.281a.078.078,0,0,1-.078-.055L85,89.65a.03.03,0,0,0-.014-.017.021.021,0,0,0-.02,0l-.454.171-.014.006a.083.083,0,0,1-.069-.05l-.106-.2v-.01a.049.049,0,0,1,.017-.055l.46-.295a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14911" data-name="Path 14911" d="M51.5,99.444a1.572,1.572,0,0,1-.528-.714l-.761-2a.831.831,0,0,1-.015-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.565,1.565,0,0,1,.531.714l.761,2a.824.824,0,0,1,.013.714.607.607,0,0,1-.58.274,1.257,1.257,0,0,1-.781-.274Zm.987-.239a.571.571,0,0,0-.023-.453l-.776-2.04a1.049,1.049,0,0,0-.321-.452.728.728,0,0,0-.467-.171.321.321,0,0,0-.326.171.565.565,0,0,0,.023.452l.776,2.04a1.054,1.054,0,0,0,.321.453.722.722,0,0,0,.456.171.347.347,0,0,0,.333-.176Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14912" data-name="Path 14912" d="M54.164,99.444a1.573,1.573,0,0,1-.528-.714l-.759-2a.833.833,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.566,1.566,0,0,1,.531.714l.759,2a.824.824,0,0,1,.013.714.607.607,0,0,1-.58.274,1.257,1.257,0,0,1-.78-.274Zm.986-.239a.57.57,0,0,0-.023-.453l-.777-2.04a1.038,1.038,0,0,0-.321-.452.729.729,0,0,0-.467-.171.32.32,0,0,0-.326.171.565.565,0,0,0,.023.452l.777,2.04a1.045,1.045,0,0,0,.321.453.722.722,0,0,0,.456.171.344.344,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14913" data-name="Path 14913" d="M55.636,95.8h.3a.078.078,0,0,1,.076.055L57.439,99.6c.015.037,0,.055-.034.055h-.281a.078.078,0,0,1-.077-.055l-1.272-3.341a.029.029,0,0,0-.014-.017.023.023,0,0,0-.019,0l-.454.171-.015,0a.082.082,0,0,1-.068-.05l-.106-.2v-.011a.052.052,0,0,1,.017-.055l.459-.286a.115.115,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14914" data-name="Path 14914" d="M57.152,95.8h.3a.076.076,0,0,1,.076.055L58.957,99.6c.014.037,0,.055-.034.055h-.281a.077.077,0,0,1-.076-.055L57.29,96.265a.035.035,0,0,0-.015-.017.023.023,0,0,0-.019,0l-.454.171-.014,0a.083.083,0,0,1-.069-.05l-.1-.2v-.011a.05.05,0,0,1,.018-.055l.458-.286a.116.116,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14915" data-name="Path 14915" d="M58.669,95.8h.3a.078.078,0,0,1,.076.055L60.472,99.6c.015.037,0,.055-.034.055h-.281a.078.078,0,0,1-.077-.055l-1.272-3.341a.029.029,0,0,0-.014-.017.023.023,0,0,0-.019,0l-.454.171-.015,0a.082.082,0,0,1-.068-.05l-.106-.2v-.011a.052.052,0,0,1,.017-.055l.459-.286a.115.115,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14916" data-name="Path 14916" d="M60.185,95.8h.3a.078.078,0,0,1,.076.055L61.988,99.6c.015.037,0,.055-.034.055h-.281A.078.078,0,0,1,61.6,99.6l-1.272-3.341a.029.029,0,0,0-.014-.017.023.023,0,0,0-.019,0l-.454.171-.015,0a.082.082,0,0,1-.068-.05l-.106-.2v-.011a.052.052,0,0,1,.017-.055l.459-.286a.115.115,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14917" data-name="Path 14917" d="M63.013,99.444a1.572,1.572,0,0,1-.528-.714l-.76-2a.831.831,0,0,1-.015-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.565,1.565,0,0,1,.531.714l.76,2a.824.824,0,0,1,.013.714.607.607,0,0,1-.58.274,1.257,1.257,0,0,1-.781-.274ZM64,99.2a.571.571,0,0,0-.023-.453l-.776-2.04a1.049,1.049,0,0,0-.321-.452.728.728,0,0,0-.467-.171.321.321,0,0,0-.326.171.565.565,0,0,0,.023.452l.776,2.04a1.054,1.054,0,0,0,.321.453.722.722,0,0,0,.456.171A.347.347,0,0,0,64,99.2Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14918" data-name="Path 14918" d="M65.681,99.444a1.573,1.573,0,0,1-.528-.714l-.759-2a.833.833,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.566,1.566,0,0,1,.531.714l.759,2a.824.824,0,0,1,.013.714.607.607,0,0,1-.58.274A1.257,1.257,0,0,1,65.681,99.444Zm.986-.239a.57.57,0,0,0-.023-.453l-.777-2.04a1.038,1.038,0,0,0-.321-.452.729.729,0,0,0-.467-.171.32.32,0,0,0-.326.171.565.565,0,0,0,.023.452l.777,2.04a1.045,1.045,0,0,0,.321.453.722.722,0,0,0,.456.171.344.344,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14919" data-name="Path 14919" d="M67.153,95.8h.3a.078.078,0,0,1,.076.055L68.956,99.6c.015.037,0,.055-.034.055H68.64a.078.078,0,0,1-.077-.055L67.29,96.265a.029.029,0,0,0-.014-.017.023.023,0,0,0-.019,0l-.454.171-.015,0a.082.082,0,0,1-.068-.05l-.106-.2v-.011a.052.052,0,0,1,.017-.055l.459-.286a.115.115,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14920" data-name="Path 14920" d="M68.669,95.8h.3a.076.076,0,0,1,.076.055L70.474,99.6c.014.037,0,.055-.034.055h-.281a.077.077,0,0,1-.076-.055l-1.272-3.341a.035.035,0,0,0-.015-.017.023.023,0,0,0-.019,0l-.454.171-.014,0a.083.083,0,0,1-.069-.05l-.1-.2v-.011a.05.05,0,0,1,.018-.055l.458-.286a.116.116,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14921" data-name="Path 14921" d="M71.5,99.444a1.573,1.573,0,0,1-.528-.714l-.759-2a.833.833,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.566,1.566,0,0,1,.531.714l.759,2a.824.824,0,0,1,.013.714.607.607,0,0,1-.58.274A1.257,1.257,0,0,1,71.5,99.444Zm.986-.239a.57.57,0,0,0-.023-.453l-.777-2.04a1.038,1.038,0,0,0-.321-.452.729.729,0,0,0-.467-.171.32.32,0,0,0-.326.171.565.565,0,0,0,.023.452l.777,2.04a1.045,1.045,0,0,0,.321.453.722.722,0,0,0,.456.171.344.344,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14922" data-name="Path 14922" d="M54.016,106.06a1.575,1.575,0,0,1-.528-.714l-.76-2a.834.834,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.575,1.575,0,0,1,.531.714l.76,2a.826.826,0,0,1,.013.714.608.608,0,0,1-.58.274A1.256,1.256,0,0,1,54.016,106.06Zm.987-.239a.572.572,0,0,0-.023-.454l-.776-2.039a1.044,1.044,0,0,0-.322-.452.73.73,0,0,0-.467-.171.321.321,0,0,0-.326.171.567.567,0,0,0,.023.452l.776,2.039a1.052,1.052,0,0,0,.321.454.724.724,0,0,0,.456.171.347.347,0,0,0,.335-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14923" data-name="Path 14923" d="M56.684,106.06a1.579,1.579,0,0,1-.528-.714l-.759-2a.834.834,0,0,1-.016-.714.593.593,0,0,1,.571-.273,1.289,1.289,0,0,1,.788.273,1.57,1.57,0,0,1,.532.714l.759,2a.824.824,0,0,1,.013.714.608.608,0,0,1-.58.274,1.256,1.256,0,0,1-.78-.274Zm.986-.239a.571.571,0,0,0-.023-.454l-.777-2.039a1.037,1.037,0,0,0-.321-.452.732.732,0,0,0-.468-.171.321.321,0,0,0-.326.171.569.569,0,0,0,.023.452l.777,2.039a1.044,1.044,0,0,0,.321.454.724.724,0,0,0,.456.171.344.344,0,0,0,.339-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14924" data-name="Path 14924" d="M59.352,106.06a1.579,1.579,0,0,1-.528-.714l-.759-2a.834.834,0,0,1-.016-.714.593.593,0,0,1,.571-.273,1.289,1.289,0,0,1,.788.273,1.57,1.57,0,0,1,.532.714l.759,2a.824.824,0,0,1,.013.714.608.608,0,0,1-.58.274A1.256,1.256,0,0,1,59.352,106.06Zm.986-.239a.571.571,0,0,0-.023-.454l-.777-2.039a1.037,1.037,0,0,0-.321-.452.732.732,0,0,0-.468-.171.321.321,0,0,0-.326.171.569.569,0,0,0,.023.452l.777,2.039a1.044,1.044,0,0,0,.321.454.724.724,0,0,0,.456.171.344.344,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14925" data-name="Path 14925" d="M60.825,102.418h.3a.076.076,0,0,1,.076.055l1.428,3.748c.014.037,0,.055-.034.055h-.281a.077.077,0,0,1-.077-.055l-1.272-3.34a.029.029,0,0,0-.014-.017.02.02,0,0,0-.019,0l-.454.171-.014.006a.082.082,0,0,1-.069-.05l-.106-.2v-.01a.05.05,0,0,1,.017-.055l.459-.286a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14926" data-name="Path 14926" d="M62.34,102.418h.3a.076.076,0,0,1,.076.055l1.428,3.748c.014.037,0,.055-.034.055h-.281a.077.077,0,0,1-.077-.055l-1.272-3.34a.029.029,0,0,0-.014-.017.02.02,0,0,0-.019,0l-.454.171-.014.006a.082.082,0,0,1-.069-.05l-.106-.2v-.01a.05.05,0,0,1,.017-.055l.459-.286a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14927" data-name="Path 14927" d="M63.856,102.418h.3a.077.077,0,0,1,.076.055l1.428,3.748c.014.037,0,.055-.034.055h-.281a.077.077,0,0,1-.077-.055L64,102.881a.032.032,0,0,0-.014-.017.019.019,0,0,0-.019,0l-.454.171-.015.006a.082.082,0,0,1-.068-.05l-.106-.2v-.01a.05.05,0,0,1,.017-.055l.459-.286a.117.117,0,0,1,.065-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14928" data-name="Path 14928" d="M65.373,102.418h.3a.076.076,0,0,1,.076.055l1.428,3.748c.014.037,0,.055-.034.055H66.86a.077.077,0,0,1-.077-.055l-1.272-3.34a.029.029,0,0,0-.014-.017.02.02,0,0,0-.019,0l-.454.171-.014.006a.082.082,0,0,1-.069-.05l-.106-.2v-.01a.05.05,0,0,1,.017-.055l.459-.286a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14929" data-name="Path 14929" d="M66.889,102.418h.3a.076.076,0,0,1,.076.055l1.428,3.748c.014.037,0,.055-.034.055h-.281a.077.077,0,0,1-.077-.055l-1.272-3.34a.029.029,0,0,0-.014-.017.02.02,0,0,0-.019,0l-.454.171-.014.006a.082.082,0,0,1-.069-.05l-.106-.2v-.01a.05.05,0,0,1,.017-.055l.459-.286a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14930" data-name="Path 14930" d="M69.718,106.06a1.575,1.575,0,0,1-.528-.714l-.76-2a.834.834,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.575,1.575,0,0,1,.531.714l.76,2a.826.826,0,0,1,.013.714.608.608,0,0,1-.58.274,1.256,1.256,0,0,1-.78-.274Zm.987-.239a.572.572,0,0,0-.023-.454l-.776-2.039a1.044,1.044,0,0,0-.322-.452.73.73,0,0,0-.467-.171.321.321,0,0,0-.326.171.567.567,0,0,0,.023.452l.776,2.039a1.052,1.052,0,0,0,.321.454.724.724,0,0,0,.456.171.347.347,0,0,0,.333-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14931" data-name="Path 14931" d="M72.386,106.06a1.575,1.575,0,0,1-.528-.714l-.76-2a.834.834,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.575,1.575,0,0,1,.531.714l.76,2a.826.826,0,0,1,.013.714.608.608,0,0,1-.58.274,1.256,1.256,0,0,1-.78-.274Zm.987-.239a.572.572,0,0,0-.023-.454l-.776-2.039a1.044,1.044,0,0,0-.322-.452.73.73,0,0,0-.467-.171.321.321,0,0,0-.326.171.567.567,0,0,0,.023.452l.776,2.039a1.052,1.052,0,0,0,.321.454.724.724,0,0,0,.456.171A.347.347,0,0,0,73.373,105.821Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14932" data-name="Path 14932" d="M73.858,102.418h.3a.077.077,0,0,1,.076.055l1.428,3.748c.014.037,0,.055-.034.055h-.281a.077.077,0,0,1-.077-.055L74,102.882a.032.032,0,0,0-.014-.017.019.019,0,0,0-.019,0l-.454.171-.015.006a.082.082,0,0,1-.068-.05l-.106-.2v-.01a.05.05,0,0,1,.017-.055l.459-.286a.117.117,0,0,1,.065-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14933" data-name="Path 14933" d="M76.687,106.06a1.575,1.575,0,0,1-.528-.714l-.76-2a.834.834,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.575,1.575,0,0,1,.531.714l.76,2a.826.826,0,0,1,.013.714.608.608,0,0,1-.58.274A1.256,1.256,0,0,1,76.687,106.06Zm.987-.239a.572.572,0,0,0-.023-.454l-.776-2.039a1.044,1.044,0,0,0-.322-.452.73.73,0,0,0-.467-.171.321.321,0,0,0-.326.171.567.567,0,0,0,.023.452l.776,2.039a1.052,1.052,0,0,0,.321.454.724.724,0,0,0,.456.171.347.347,0,0,0,.338-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14934" data-name="Path 14934" d="M78.158,102.418h.3a.076.076,0,0,1,.076.055l1.428,3.748c.014.037,0,.055-.034.055h-.281a.077.077,0,0,1-.077-.055l-1.272-3.34a.029.029,0,0,0-.014-.017.02.02,0,0,0-.019,0l-.454.171-.014.006a.082.082,0,0,1-.069-.05l-.106-.2v-.01a.05.05,0,0,1,.017-.055l.459-.286a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14935" data-name="Path 14935" d="M80.987,106.06a1.579,1.579,0,0,1-.528-.714l-.759-2a.834.834,0,0,1-.016-.714.593.593,0,0,1,.571-.273,1.289,1.289,0,0,1,.788.273,1.57,1.57,0,0,1,.532.714l.759,2a.824.824,0,0,1,.013.714.608.608,0,0,1-.58.274,1.256,1.256,0,0,1-.78-.274Zm.986-.239a.571.571,0,0,0-.023-.454l-.777-2.039a1.037,1.037,0,0,0-.321-.452.732.732,0,0,0-.468-.171.321.321,0,0,0-.326.171.569.569,0,0,0,.023.452l.777,2.039a1.044,1.044,0,0,0,.321.454.724.724,0,0,0,.456.171.344.344,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14936" data-name="Path 14936" d="M82.459,102.418h.3a.076.076,0,0,1,.076.055l1.428,3.748c.014.037,0,.055-.034.055h-.281a.077.077,0,0,1-.077-.055l-1.272-3.34a.029.029,0,0,0-.014-.017.02.02,0,0,0-.019,0l-.454.171-.014.006a.082.082,0,0,1-.069-.05l-.106-.2v-.01a.05.05,0,0,1,.017-.055l.459-.286a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14937" data-name="Path 14937" d="M85.287,106.06a1.579,1.579,0,0,1-.528-.714l-.759-2a.834.834,0,0,1-.016-.714.593.593,0,0,1,.571-.273,1.289,1.289,0,0,1,.788.273,1.57,1.57,0,0,1,.532.714l.759,2a.824.824,0,0,1,.013.714.608.608,0,0,1-.58.274A1.256,1.256,0,0,1,85.287,106.06Zm.986-.239a.571.571,0,0,0-.023-.454l-.777-2.039a1.037,1.037,0,0,0-.321-.452.732.732,0,0,0-.468-.171.321.321,0,0,0-.326.171.569.569,0,0,0,.023.452l.777,2.039a1.044,1.044,0,0,0,.321.454.724.724,0,0,0,.456.171.344.344,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14938" data-name="Path 14938" d="M87.956,106.06a1.575,1.575,0,0,1-.528-.714l-.76-2a.834.834,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.575,1.575,0,0,1,.531.714l.76,2a.826.826,0,0,1,.013.714.608.608,0,0,1-.58.274A1.256,1.256,0,0,1,87.956,106.06Zm.987-.239a.572.572,0,0,0-.023-.454l-.776-2.039a1.044,1.044,0,0,0-.322-.452.73.73,0,0,0-.467-.171.321.321,0,0,0-.326.171.567.567,0,0,0,.023.452l.776,2.039a1.052,1.052,0,0,0,.321.454.724.724,0,0,0,.456.171A.347.347,0,0,0,88.943,105.821Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14939" data-name="Path 14939" d="M89.428,102.418h.3a.076.076,0,0,1,.076.055l1.428,3.748c.014.037,0,.055-.034.055h-.281a.077.077,0,0,1-.077-.055l-1.272-3.34a.029.029,0,0,0-.014-.017.02.02,0,0,0-.019,0l-.454.171-.014.006a.082.082,0,0,1-.069-.05l-.106-.2v-.01a.05.05,0,0,1,.017-.055l.459-.286a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14940" data-name="Path 14940" d="M90.943,102.418h.3a.077.077,0,0,1,.076.055l1.428,3.748c.014.037,0,.055-.034.055h-.281a.077.077,0,0,1-.077-.055l-1.272-3.34a.032.032,0,0,0-.014-.017.019.019,0,0,0-.019,0l-.454.171-.015.006a.082.082,0,0,1-.068-.05l-.106-.2v-.01a.05.05,0,0,1,.017-.055l.459-.286a.117.117,0,0,1,.065-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14941" data-name="Path 14941" d="M93.773,106.06a1.575,1.575,0,0,1-.528-.714l-.76-2a.834.834,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.575,1.575,0,0,1,.531.714l.76,2a.826.826,0,0,1,.013.714.608.608,0,0,1-.58.274,1.256,1.256,0,0,1-.78-.274Zm.987-.239a.572.572,0,0,0-.023-.454l-.776-2.039a1.044,1.044,0,0,0-.322-.452.73.73,0,0,0-.467-.171.321.321,0,0,0-.326.171.567.567,0,0,0,.023.452l.776,2.039a1.052,1.052,0,0,0,.321.454.724.724,0,0,0,.456.171.347.347,0,0,0,.338-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14942" data-name="Path 14942" d="M96.441,106.06a1.575,1.575,0,0,1-.528-.714l-.76-2a.834.834,0,0,1-.016-.714.6.6,0,0,1,.572-.273,1.289,1.289,0,0,1,.788.273,1.575,1.575,0,0,1,.531.714l.76,2a.826.826,0,0,1,.013.714.608.608,0,0,1-.58.274,1.256,1.256,0,0,1-.78-.274Zm.987-.239a.572.572,0,0,0-.023-.454l-.776-2.039a1.044,1.044,0,0,0-.322-.452.73.73,0,0,0-.467-.171.321.321,0,0,0-.326.171.567.567,0,0,0,.023.452l.776,2.039a1.052,1.052,0,0,0,.321.454.724.724,0,0,0,.456.171.347.347,0,0,0,.338-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14943" data-name="Path 14943" d="M97.912,102.418h.3a.077.077,0,0,1,.076.055l1.428,3.748c.014.037,0,.055-.034.055H99.4a.077.077,0,0,1-.077-.055l-1.272-3.34a.032.032,0,0,0-.014-.017.019.019,0,0,0-.019,0l-.454.171-.015.006a.082.082,0,0,1-.068-.05l-.106-.2v-.01a.05.05,0,0,1,.017-.055l.459-.286a.117.117,0,0,1,.065-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14944" data-name="Path 14944" d="M99.429,102.418h.3a.076.076,0,0,1,.076.055l1.428,3.748c.014.037,0,.055-.034.055h-.281a.077.077,0,0,1-.077-.055l-1.272-3.34a.029.029,0,0,0-.014-.017.02.02,0,0,0-.019,0l-.454.171-.014.006a.082.082,0,0,1-.069-.05l-.106-.2v-.01a.05.05,0,0,1,.017-.055l.459-.286a.119.119,0,0,1,.066-.017Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14945" data-name="Path 14945" d="M102.258,106.06a1.579,1.579,0,0,1-.528-.714l-.759-2a.834.834,0,0,1-.016-.714.593.593,0,0,1,.571-.273,1.289,1.289,0,0,1,.788.273,1.57,1.57,0,0,1,.532.714l.759,2a.824.824,0,0,1,.013.714.608.608,0,0,1-.58.274A1.256,1.256,0,0,1,102.258,106.06Zm.986-.239a.571.571,0,0,0-.023-.454l-.777-2.039a1.037,1.037,0,0,0-.321-.452.732.732,0,0,0-.468-.171.321.321,0,0,0-.326.171.569.569,0,0,0,.023.452l.777,2.039a1.044,1.044,0,0,0,.321.454.724.724,0,0,0,.456.171.344.344,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+          <path id="Path_14946" data-name="Path 14946" d="M104.926,106.06a1.579,1.579,0,0,1-.528-.714l-.759-2a.834.834,0,0,1-.016-.714.593.593,0,0,1,.571-.273,1.289,1.289,0,0,1,.788.273,1.57,1.57,0,0,1,.532.714l.759,2a.824.824,0,0,1,.013.714.608.608,0,0,1-.58.274,1.256,1.256,0,0,1-.78-.274Zm.986-.239a.571.571,0,0,0-.023-.454l-.777-2.039a1.037,1.037,0,0,0-.321-.452.732.732,0,0,0-.468-.171.321.321,0,0,0-.326.171.569.569,0,0,0,.023.452l.777,2.039a1.044,1.044,0,0,0,.321.454.724.724,0,0,0,.456.171.345.345,0,0,0,.337-.171Z" transform="translate(-44.721 -82.506)" fill="#011721"/>
+        </g>
+        <g id="popup" transform="translate(2.513)">
+          <path id="Path_14947" data-name="Path 14947" d="M117.447,105.222H89.89L82.673,86.273H110.23Z" transform="translate(-47.234 -55.129)" fill="#00b2ca"/>
+          <path id="Path_14948" data-name="Path 14948" d="M119.127,102.256H91.57L84.353,83.307H111.91Z" transform="translate(-47.234 -55.129)" fill="#fff"/>
+          <path id="Path_16643" data-name="Path 16643" d="M119.127,102.256H91.57L84.353,83.307H111.91Z" transform="translate(-47.234 -55.129)" fill="#00b2ca" opacity="0.1"/>
+          <path id="Path_14949" data-name="Path 14949" d="M111.91,83.307l-10.17,9.475L84.353,83.307Z" transform="translate(-47.234 -55.129)" fill="#00b2ca" opacity="0.85"/>
+          <path id="Path_14950" data-name="Path 14950" d="M98.516,91.024l3.224,1.757,2.623-2.444,14.764,11.918H91.57Z" transform="translate(-47.234 -55.129)" fill="#00b2ca" opacity="0.5"/>
+          <path id="Path_14951" data-name="Path 14951" d="M49.061,55.129H83.287a4.3,4.3,0,0,1,3.663,2.652L96.991,84.145c.556,1.459-.183,2.652-1.642,2.652H61.123a4.3,4.3,0,0,1-3.663-2.652L47.419,57.781c-.556-1.459.183-2.652,1.642-2.652Z" transform="translate(-47.234 -55.129)" fill="#fa6e53"/>
+          <g id="dangerus" transform="translate(12.941 2.708)">
+            <path id="Path_14952" data-name="Path 14952" d="M74.462,63.092c-1.138-2.988-4.549-5.394-7.514-5.249-2.512.124-3.888,2.147-3.177,4.7a8.3,8.3,0,0,0,3.44,4.476,19.693,19.693,0,0,1,2.46,1.9,2.675,2.675,0,0,0,2.023.7c.69,0,1.284-.08,1.488-.707a5.36,5.36,0,0,1,.92-1.776,3.985,3.985,0,0,0,.362-4.042Z" transform="translate(-60.175 -57.837)" fill="url(#linear-gradient-2)"/>
+            <path id="Path_14953" data-name="Path 14953" d="M83.243,77.966c-.014.1-.181.325-.6.143l-.319-.139L65.885,70.791l-.319-.139a.716.716,0,0,1-.49-.618A3.058,3.058,0,0,0,63.11,67.2c-1.233-.539-2.352-.141-2.5.887a2.521,2.521,0,0,0,.737,1.94,1.277,1.277,0,0,0-1.172,1.106,3.058,3.058,0,0,0,1.967,2.836c1.233.539,2.352.141,2.5-.887.014-.1.181-.325.6-.143l.319.139L82,80.255l.319.139a.716.716,0,0,1,.49.618,3.058,3.058,0,0,0,1.967,2.836c1.233.539,2.352.141,2.5-.887a2.521,2.521,0,0,0-.737-1.94,1.277,1.277,0,0,0,1.172-1.106,3.058,3.058,0,0,0-1.967-2.836C84.509,76.541,83.39,76.938,83.243,77.966Z" transform="translate(-60.175 -57.837)" fill="url(#linear-gradient-2)"/>
+            <path id="Path_14954" data-name="Path 14954" d="M66.5,77.966a.605.605,0,0,0,.707.143l.213-.139,10.972-7.179.213-.139c.278-.182.108-.519.018-.618-.93-1.028-1.017-2.3-.194-2.836s2.244-.141,3.174.887a2.516,2.516,0,0,1,.741,1.94,3.38,3.38,0,0,1,2.015,1.106c.93,1.028,1.017,2.3.194,2.836s-2.244.141-3.174-.887a.6.6,0,0,0-.707-.143l-.213.139-10.97,7.179-.213.139c-.278.182-.108.519-.018.618.93,1.028,1.017,2.3.194,2.836s-2.244.141-3.174-.887a2.516,2.516,0,0,1-.741-1.94,3.38,3.38,0,0,1-2.015-1.106c-.93-1.028-1.017-2.3-.194-2.836S65.573,76.938,66.5,77.966Z" transform="translate(-60.175 -57.837)" fill="url(#linear-gradient-2)"/>
+          </g>
+        </g>
+        <g id="lines" transform="translate(60.151 22.111)">
+          <path id="Path_14955" data-name="Path 14955" d="M108.448,77.594h-3.319a.287.287,0,0,1-.245-.177c-.038-.1.012-.177.11-.177h3.319a.287.287,0,0,1,.245.177A.117.117,0,0,1,108.448,77.594Z" transform="translate(-104.871 -77.24)" fill="#011721"/>
+          <path id="Path_14956" data-name="Path 14956" d="M111.166,77.594h-1.561a.287.287,0,0,1-.245-.177c-.038-.1.012-.177.11-.177h1.561a.287.287,0,0,1,.245.177A.118.118,0,0,1,111.166,77.594Z" transform="translate(-104.871 -77.24)" fill="#011721"/>
+          <path id="Path_14957" data-name="Path 14957" d="M115.493,77.594h-3.575a.287.287,0,0,1-.245-.177c-.038-.1.012-.177.11-.177h3.575a.287.287,0,0,1,.245.177C115.641,77.515,115.592,77.594,115.493,77.594Z" transform="translate(-104.871 -77.24)" fill="#011721"/>
+          <path id="Path_14958" data-name="Path 14958" d="M107.705,78.828H105.6a.287.287,0,0,1-.245-.177c-.037-.1.012-.177.11-.177h2.106a.287.287,0,0,1,.245.177A.12.12,0,0,1,107.705,78.828Z" transform="translate(-104.871 -77.24)" fill="#011721"/>
+          <path id="Path_14959" data-name="Path 14959" d="M108.918,78.828h-.4a.287.287,0,0,1-.245-.177c-.038-.1.012-.177.11-.177h.4a.287.287,0,0,1,.245.177C109.065,78.749,109.016,78.828,108.918,78.828Z" transform="translate(-104.871 -77.24)" fill="#011721"/>
+          <path id="Path_14960" data-name="Path 14960" d="M112.138,78.828H109.4a.287.287,0,0,1-.245-.177c-.037-.1.012-.177.11-.177H112a.287.287,0,0,1,.245.177C112.285,78.749,112.236,78.828,112.138,78.828Z" transform="translate(-104.871 -77.24)" fill="#011721"/>
+          <path id="Path_14961" data-name="Path 14961" d="M114.73,78.828h-1.777a.287.287,0,0,1-.245-.177c-.037-.1.012-.177.11-.177H114.6a.287.287,0,0,1,.245.177A.118.118,0,0,1,114.73,78.828Z" transform="translate(-104.871 -77.24)" fill="#011721"/>
+          <path id="Path_14962" data-name="Path 14962" d="M110.145,80.02h-4.092a.287.287,0,0,1-.245-.177c-.037-.1.012-.177.11-.177h4.092a.287.287,0,0,1,.245.177A.118.118,0,0,1,110.145,80.02Z" transform="translate(-104.871 -77.24)" fill="#011721"/>
+          <path id="Path_14963" data-name="Path 14963" d="M111.462,80.02h-.711a.287.287,0,0,1-.245-.177c-.037-.1.012-.177.11-.177h.711a.287.287,0,0,1,.245.177A.118.118,0,0,1,111.462,80.02Z" transform="translate(-104.871 -77.24)" fill="#011721"/>
+          <path id="Path_14964" data-name="Path 14964" d="M112.842,80.02h-.753a.287.287,0,0,1-.245-.177c-.037-.1.012-.177.11-.177h.753a.287.287,0,0,1,.245.177A.118.118,0,0,1,112.842,80.02Z" transform="translate(-104.871 -77.24)" fill="#011721"/>
+          <path id="Path_14965" data-name="Path 14965" d="M115.937,80.02h-2.279a.287.287,0,0,1-.245-.177c-.038-.1.012-.177.11-.177H115.8a.287.287,0,0,1,.245.177A.117.117,0,0,1,115.937,80.02Z" transform="translate(-104.871 -77.24)" fill="#011721"/>
+        </g>
+        <path id="Path_14966" data-name="Path 14966" d="M123.558,96.564l-.726-1.9a3.04,3.04,0,0,0-2.594-1.878c-1.036,0-1.558.843-1.163,1.878l.726,1.9a.541.541,0,0,0-.478.811l1.41,3.7a1.32,1.32,0,0,0,1.124.814h3.7c.448,0,.674-.366.5-.814l-1.41-3.7a1.325,1.325,0,0,0-1.1-.811Zm-.522,3.56a1.021,1.021,0,0,1-.872-.632c-.133-.349.042-.632.391-.632a1.021,1.021,0,0,1,.872.632c.134.35-.042.632-.391.632Zm-.427-3.563h-1.861l-.725-1.9a.62.62,0,0,1,.576-.931,1.506,1.506,0,0,1,1.285.931Z" transform="translate(-44.721 -55.129)" fill="#00b2ca"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/true.gif b/public/assets/true.gif
new file mode 100644
index 0000000..0becf75
Binary files /dev/null and b/public/assets/true.gif differ
diff --git a/public/firebase-messaging-sw.js b/public/firebase-messaging-sw.js
new file mode 100644
index 0000000..587d51d
--- /dev/null
+++ b/public/firebase-messaging-sw.js
@@ -0,0 +1,24 @@
+importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js');
+importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js');
+// // Initialize the Firebase app in the service worker by passing the generated config
+
+const firebaseConfig = {
+    apiKey: "xxxxxxxxxxxxxxxxxxxxxxx",
+    authDomain: "xxxxxxxxxxxxxxxxxxxxxxx",
+    projectId: "xxxxxxxxxxxxxxxxxxxxxxx",
+    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxx",
+    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxx",
+    appId: "xxxxxxxxxxxxxxxxxxxxxxx",
+    measurementId: "xxxxxxxxxxxxxxxxxxxxxxx"
+};
+
+firebase?.initializeApp(firebaseConfig)
+
+// Retrieve firebase messaging
+const messaging = firebase.messaging();
+
+self.addEventListener('install', function (event) {
+    console.log('Hello world from the Service Worker :call_me_hand:');
+});
+
+
diff --git a/redux/reducer/authSlice.js b/redux/reducer/authSlice.js
new file mode 100644
index 0000000..10508e8
--- /dev/null
+++ b/redux/reducer/authSlice.js
@@ -0,0 +1,51 @@
+import { createSelector, createSlice } from "@reduxjs/toolkit";
+import { store } from "../store";  // Ensure this import path is correct
+
+const initialState = {
+    data: null,
+};
+
+export const authSlice = createSlice({
+    name: "UserSignup",
+    initialState,
+    reducers: {
+
+        updateDataSuccess: (usersignup, action) => {
+            usersignup.data = action.payload;
+        },
+        userUpdateData: (usersignup, action) => {
+            usersignup.data.data = action.payload.data;
+        },
+        userLogout: (usersignup) => {
+            usersignup.data = null; // Clear data when user logs out
+        }
+    },
+});
+
+export const { updateDataSuccess, userUpdateData, userLogout } = authSlice.actions;
+export default authSlice.reducer;
+
+export const loadUpdateData = (data) => {
+    store.dispatch(updateDataSuccess(data));
+};
+export const loadUpdateUserData = (data) => {
+    store.dispatch(userUpdateData({ data }));
+};
+export const logoutSuccess = () => {
+    store.dispatch(userLogout());
+};
+
+
+export const userSignUpData = createSelector(
+    (state) => state.UserSignup,
+    (UserSignup) => UserSignup?.data?.data
+);
+
+export const getIsLoggedIn = createSelector(
+    (state) => state.UserSignup,
+    (UserSignup) => UserSignup?.data?.token
+);
+
+
+
+
diff --git a/redux/reducer/breadCrumbSlice.js b/redux/reducer/breadCrumbSlice.js
new file mode 100644
index 0000000..cfff230
--- /dev/null
+++ b/redux/reducer/breadCrumbSlice.js
@@ -0,0 +1,30 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+
+const initialState = {
+    BreadcrumbPath: [],
+};
+
+export const breadCrumbSlice = createSlice({
+    name: "BreadcrumbPath",
+    initialState,
+    reducers: {
+        setBreadcrumbPath: (state, action) => {
+            state.BreadcrumbPath = action.payload;
+        },
+        resetBreadcrumb: () => {
+            return initialState
+        }
+    },
+});
+
+export default breadCrumbSlice.reducer;
+export const { setBreadcrumbPath, resetBreadcrumb } = breadCrumbSlice.actions;
+
+
+export const BreadcrumbPathData = (state) => state.BreadcrumbPath.BreadcrumbPath;
+
+
+
+
+
diff --git a/redux/reducer/categorySlice.js b/redux/reducer/categorySlice.js
new file mode 100644
index 0000000..4ffdb21
--- /dev/null
+++ b/redux/reducer/categorySlice.js
@@ -0,0 +1,61 @@
+import { createSelector, createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  cateData: [],
+  catLastPage: 1,
+  catCurrentPage: 1,
+  isCatLoading: false,
+  isCatLoadMore: false,
+};
+
+export const categorySlice = createSlice({
+  name: "Category",
+  initialState,
+  reducers: {
+    setCateData: (state, action) => {
+      state.cateData = action.payload;
+    },
+    setCatLastPage: (state, action) => {
+      state.catLastPage = action.payload;
+    },
+    setCatCurrentPage: (state, action) => {
+      state.catCurrentPage = action.payload;
+    },
+    setIsCatLoading: (state, action) => {
+      state.isCatLoading = action.payload;
+    },
+    setIsCatLoadMore: (state, action) => {
+      state.isCatLoadMore = action.payload;
+    },
+  },
+});
+
+export default categorySlice.reducer;
+export const {
+  setCateData,
+  setCatLastPage,
+  setCatCurrentPage,
+  setIsCatLoading,
+  setIsCatLoadMore,
+} = categorySlice.actions;
+
+export const CategoryData = createSelector(
+  (state) => state.Category,
+  (Category) => Category.cateData
+);
+export const getCatLastPage = createSelector(
+  (state) => state.Category,
+  (Category) => Category.catLastPage
+);
+export const getCatCurrentPage = createSelector(
+  (state) => state.Category,
+  (Category) => Category.catCurrentPage
+);
+export const getIsCatLoading = createSelector(
+  (state) => state.Category,
+  (Category) => Category.isCatLoading
+);
+export const getIsCatLoadMore = createSelector(
+  (state) => state.Category,
+  (Category) => Category.isCatLoadMore
+);
diff --git a/redux/reducer/globalStateSlice.js b/redux/reducer/globalStateSlice.js
new file mode 100644
index 0000000..c5eb6e3
--- /dev/null
+++ b/redux/reducer/globalStateSlice.js
@@ -0,0 +1,134 @@
+import { createSelector, createSlice } from "@reduxjs/toolkit";
+import { store } from "../store";
+
+const initialState = {
+  IsLoginModalOpen: false,
+  IsVisitedLandingPage: false,
+  IsShowBankDetails: false,
+  Notification: null,
+  IsUnauthorized: false,
+  selectedLocation: null,
+  // Add blocked users state
+  blockedUsersList: [],
+  blockedUsersLoading: false,
+};
+
+export const globalStateSlice = createSlice({
+  name: "GlobalState",
+  initialState,
+  reducers: {
+    setIsLoginModalOpen: (state, action) => {
+      state.IsLoginModalOpen = action.payload;
+    },
+    setIsVisitedLandingPage: (state, action) => {
+      state.IsVisitedLandingPage = action.payload;
+    },
+    setIsShowBankDetails: (state, action) => {
+      state.IsShowBankDetails = action.payload;
+    },
+    setNotification: (state, action) => {
+      state.Notification = action.payload;
+    },
+    setIsUnauthorized: (state, action) => {
+      state.IsUnauthorized = action.payload;
+    },
+    setSelectedLocation: (state, action) => {
+      state.selectedLocation = action.payload;
+    },
+    // Add blocked users reducers
+    setBlockedUsersList: (state, action) => {
+      state.blockedUsersList = action.payload;
+    },
+    setBlockedUsersLoading: (state, action) => {
+      state.blockedUsersLoading = action.payload;
+    },
+    addBlockedUser: (state, action) => {
+      const userId = action.payload;
+      if (!state.blockedUsersList.some(user => user.id === userId)) {
+        state.blockedUsersList.push({ id: userId });
+      }
+    },
+    removeBlockedUser: (state, action) => {
+      const userId = action.payload;
+      state.blockedUsersList = state.blockedUsersList.filter(user => user.id !== userId);
+    },
+  },
+});
+
+export default globalStateSlice.reducer;
+export const {
+  setIsLoginModalOpen,
+  setIsVisitedLandingPage,
+  setIsShowBankDetails,
+  setNotification,
+  setIsUnauthorized,
+  setSelectedLocation,
+  // Export blocked users actions
+  setBlockedUsersList,
+  setBlockedUsersLoading,
+  addBlockedUser,
+  removeBlockedUser,
+} = globalStateSlice.actions;
+
+export const getIsVisitedLandingPage = createSelector(
+  (state) => state.GlobalState,
+  (GlobalState) => GlobalState.IsVisitedLandingPage
+);
+
+export const getIsLoginModalOpen = createSelector(
+  (state) => state.GlobalState,
+  (GlobalState) => GlobalState.IsLoginModalOpen
+);
+
+export const getIsShowBankDetails = createSelector(
+  (state) => state.GlobalState,
+  (GlobalState) => GlobalState.IsShowBankDetails
+);
+
+export const setIsLoginOpen = (value) => {
+  store.dispatch(setIsLoginModalOpen(value));
+};
+
+export const showBankDetails = () => {
+  store.dispatch(setIsShowBankDetails(true));
+};
+
+export const hideBankDetails = () => {
+  store.dispatch(setIsShowBankDetails(false));
+};
+
+export const getNotification = createSelector(
+  (state) => state.GlobalState,
+  (GlobalState) => GlobalState.Notification
+);
+
+export const getIsUnauthorized = createSelector(
+  (state) => state.GlobalState,
+  (GlobalState) => GlobalState.IsUnauthorized
+);
+
+export const getSelectedLocation = createSelector(
+  (state) => state.GlobalState,
+  (GlobalState) => GlobalState.selectedLocation
+);
+
+// Add blocked users selectors with fallbacks
+export const getBlockedUsersList = createSelector(
+  (state) => state.GlobalState,
+  (GlobalState) => GlobalState?.blockedUsersList || []
+);
+
+export const getBlockedUsersLoading = createSelector(
+  (state) => state.GlobalState,
+  (GlobalState) => GlobalState?.blockedUsersLoading || false
+);
+
+export const getIsUserBlocked = createSelector(
+  [getBlockedUsersList, (state, userId) => userId],
+  (blockedUsersList, userId) => {
+    if (!blockedUsersList || !Array.isArray(blockedUsersList)) {
+      return false;
+    }
+    return blockedUsersList.some(user => user.id === userId);
+  }
+);
diff --git a/redux/reducer/languageSlice.js b/redux/reducer/languageSlice.js
new file mode 100644
index 0000000..12d03e7
--- /dev/null
+++ b/redux/reducer/languageSlice.js
@@ -0,0 +1,39 @@
+import { createSelector, createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+    language: {},
+};
+
+export const languageSlice = createSlice({
+    name: "CurrentLanguage",
+    initialState,
+    reducers: {
+        setCurrentLanguage: (state, action) => {
+            state.language = action.payload;
+        },
+        resetCurrentLanguage: (state, action) => {
+            state.language = action.payload;
+        },
+    },
+});
+
+export default languageSlice.reducer;
+export const { setCurrentLanguage, resetCurrentLanguage } = languageSlice.actions;
+
+export const CurrentLanguageData = createSelector(
+    (state) => state.CurrentLanguage,
+    (CurrentLanguage) => CurrentLanguage.language
+);
+
+export const getIsRtl = createSelector(
+    (state) => state.CurrentLanguage,
+    (CurrentLanguage) => CurrentLanguage.language.rtl
+);
+
+export const getCurrentLangCode = createSelector(
+    (state) => state.CurrentLanguage,
+    (CurrentLanguage) => CurrentLanguage.language.code
+);
+
+
+
diff --git a/redux/reducer/locationSlice.js b/redux/reducer/locationSlice.js
new file mode 100644
index 0000000..8b554bc
--- /dev/null
+++ b/redux/reducer/locationSlice.js
@@ -0,0 +1,74 @@
+import { createSelector, createSlice } from "@reduxjs/toolkit";
+import { store } from "../store";
+
+const initialState = {
+  cityData: {
+    area: "",
+    areaId: "",
+    city: "",
+    state: "",
+    country: "",
+    lat: "",
+    long: "",
+    formattedAddress: "",
+  },
+  KilometerRange: 0,
+  IsBrowserSupported: true,
+};
+export const locationSlice = createSlice({
+  name: "Location",
+  initialState,
+  reducers: {
+    setCityData: (location, action) => {
+      location.cityData = action.payload.data;
+    },
+    setIsBrowserSupported: (location, action) => {
+      location.IsBrowserSupported = action.payload;
+    },
+    setKilometerRange: (location, action) => {
+      location.KilometerRange = action.payload;
+    },
+  },
+});
+
+export default locationSlice.reducer;
+export const { setCityData, setIsBrowserSupported, setKilometerRange } =
+  locationSlice.actions;
+
+export const resetCityData = () => {
+  const initialCityData = {
+    area: "",
+    areaId: "",
+    city: "",
+    state: "",
+    country: "",
+    lat: "",
+    long: "",
+    formattedAddress: "",
+  };
+  store.dispatch(setCityData({ data: initialCityData }));
+};
+
+// Action to store location
+export const saveCity = (data) => {
+  store.dispatch(setCityData({ data }));
+};
+
+export const getCityData = createSelector(
+  (state) => state.Location,
+  (Location) => Location.cityData
+);
+export const getKilometerRange = createSelector(
+  (state) => state.Location,
+  (Location) => Number(Location.KilometerRange)
+);
+export const getIsBrowserSupported = createSelector(
+  (state) => state.Location,
+  (Location) => Location.IsBrowserSupported
+);
+
+
+export const getCurrentCountry = createSelector(
+  (state) => state.Location,
+  (Location) => Location.cityData.country
+);
diff --git a/redux/reducer/settingSlice.js b/redux/reducer/settingSlice.js
new file mode 100644
index 0000000..4dd66cc
--- /dev/null
+++ b/redux/reducer/settingSlice.js
@@ -0,0 +1,137 @@
+import { createSelector, createSlice } from "@reduxjs/toolkit";
+import { store } from "../store";
+
+const initialState = {
+  data: null,
+  lastFetch: null,
+  loading: false,
+  fcmToken: null,
+};
+
+export const settingsSlice = createSlice({
+  name: "Settings",
+  initialState,
+  reducers: {
+    settingsSucess: (settings, action) => {
+      const { data } = action.payload;
+      settings.data = data;
+    },
+    getToken: (settings, action) => {
+      settings.fcmToken = action.payload.data;
+    },
+  },
+});
+
+export const { settingsSucess, getToken } = settingsSlice.actions;
+export default settingsSlice.reducer;
+
+// Action to store token
+export const getFcmToken = (data) => {
+  store.dispatch(getToken({ data }));
+};
+
+// Selectors
+export const settingsData = createSelector(
+  (state) => state.Settings,
+  (settings) => settings.data?.data
+);
+
+export const Fcmtoken = createSelector(
+  (state) => state.Settings,
+  (settings) => settings?.fcmToken
+);
+
+export const getIsLandingPage = createSelector(
+  (state) => state.Settings,
+  (settings) => Number(settings?.data?.data?.show_landing_page)
+);
+
+export const getPlaceholderImage = createSelector(
+  (state) => state.Settings,
+  (settings) => settings?.data?.data?.placeholder_image
+);
+
+export const getCompanyName = createSelector(
+  (state) => state.Settings,
+  (settings) => settings?.data?.data?.company_name
+);
+
+export const getIsMaintenanceMode = createSelector(
+  (state) => state.Settings,
+  (settings) => Number(settings?.data?.data?.maintenance_mode) === 1
+);
+
+export const getIsFreAdListing = createSelector(
+  (state) => state.Settings,
+  (settings) => Number(settings?.data?.data?.free_ad_listing) === 1
+);
+
+export const getMinRange = createSelector(
+  (state) => state.Settings,
+  (settings) => Number(settings?.data?.data?.min_length)
+);
+
+export const getMaxRange = createSelector(
+  (state) => state.Settings,
+  (settings) => Number(settings?.data?.data?.max_length)
+);
+
+export const getIsDemoMode = createSelector(
+  (state) => state.Settings,
+  (settings) => settings?.data?.data?.demo_mode
+);
+
+export const getOtpServiceProvider = createSelector(
+  (state) => state.Settings,
+  (settings) => settings?.data?.data?.otp_service_provider
+);
+
+export const getDefaultLatitude = createSelector(
+  (state) => state.Settings,
+  (settings) => Number(settings?.data?.data?.default_latitude)
+);
+export const getDefaultLongitude = createSelector(
+  (state) => state.Settings,
+  (settings) => Number(settings?.data?.data?.default_longitude)
+);
+export const getIsPaidApi = createSelector(
+  (state) => state.Settings,
+  (settings) => settings?.data?.data?.map_provider === "google_places"
+);
+
+export const getLanguages = createSelector(
+  (state) => state.Settings,
+  (settings) => settings?.data?.data?.languages
+);
+
+export const getDefaultLanguageCode = createSelector(
+  (state) => state.Settings,
+  (settings) => settings?.data?.data?.default_language
+);
+
+export const getShowLandingPage = createSelector(
+  (state) => state.Settings,
+  (settings) => Number(settings?.data?.data?.show_landing_page) === 1
+);
+
+export const getCurrencyPosition = createSelector(
+  (state) => state.Settings,
+  (settings) => settings?.data?.data?.currency_symbol_position
+);
+
+export const getCurrencySymbol = createSelector(
+  (state) => state.Settings,
+  (settings) => settings?.data?.data?.currency_symbol
+);
+
+
+export const getCurrencyIsoCode = createSelector(
+  (state) => state.Settings,
+  (settings) => settings?.data?.data?.currency_iso_code
+);
+
+export const getAboutUs = createSelector(
+  (state) => state.Settings,
+  (settings) => settings?.data?.data?.about_us
+);
+
diff --git a/redux/store/index.js b/redux/store/index.js
new file mode 100644
index 0000000..b7fab72
--- /dev/null
+++ b/redux/store/index.js
@@ -0,0 +1,40 @@
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { persistStore, persistReducer } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+import settingsReducer from "../reducer/settingSlice";
+import categoryReducer from '../reducer/categorySlice'
+import BreadcrumbPathReducer from '../reducer/breadCrumbSlice'
+import CurrentLanguageReducer from '../reducer/languageSlice'
+import locationReducer from '../reducer/locationSlice';
+import globalStateReducer from '../reducer/globalStateSlice';
+import authReducer from '../reducer/authSlice'
+
+const persistConfig = {
+  key: 'root',
+  storage,
+  manualPersisting: true,
+};
+
+
+const rootReducer = combineReducers({
+  Settings: settingsReducer,
+  Category: categoryReducer,
+  UserSignup: authReducer,
+  BreadcrumbPath: BreadcrumbPathReducer,
+  CurrentLanguage: CurrentLanguageReducer,
+  Location: locationReducer,
+  GlobalState: globalStateReducer
+});
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+export const store = configureStore({
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) => [
+    ...getDefaultMiddleware({
+      serializableCheck: false,
+    }),
+  ],
+});
+
+export const persistor = persistStore(store);
diff --git a/redux/store/providers.jsx b/redux/store/providers.jsx
new file mode 100644
index 0000000..80e3346
--- /dev/null
+++ b/redux/store/providers.jsx
@@ -0,0 +1,6 @@
+"use client";
+import { Provider } from "react-redux";
+import { store } from ".";
+export function Providers({ children }) {
+  return <Provider store={store}>{children}</Provider>;
+}
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..1cf9386
--- /dev/null
+++ b/server.js
@@ -0,0 +1,32 @@
+const { createServer } = require('http');
+const { parse } = require('url');
+const next = require('next');
+const fs = require('fs');
+const path = require('path');
+const dev = process.env.NODE_ENV !== 'production';
+const app = next({ dev });
+const handle = app.getRequestHandler();
+const port = process.env.NODE_PORT || 8003
+app.prepare().then(() => {
+  createServer((req, res) => {
+    const parsedUrl = parse(req.url, true);
+    const { pathname, query } = parsedUrl;
+    if (pathname.startsWith('/.well-known')) {
+      const filePath = path.join(process.cwd(), pathname.substring(1));
+      try {
+        const fileContent = fs.readFileSync(filePath, 'utf-8');
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(fileContent);
+        return;
+      } catch (error) {
+        console.error(error);
+        res.writeHead(404);
+        res.end('Not Found');
+        return;
+      }
+    }
+    handle(req, res, parsedUrl);
+  }).listen(port, (err) => {
+    if (err) throw err;
+  });
+});
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..da65040
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,121 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      colors: {
+        background: "var(--background)",
+        foreground: "hsl(var(--foreground))",
+        border: "var(--border)",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "var(--primary)",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "var(--muted)",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "var(--destructive)",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          1: "hsl(var(--chart-1))",
+          2: "hsl(var(--chart-2))",
+          3: "hsl(var(--chart-3))",
+          4: "hsl(var(--chart-4))",
+          5: "hsl(var(--chart-5))",
+        },
+      },
+      keyframes: {
+        "accordion-down": {
+          from: {
+            height: "0",
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)",
+          },
+        },
+        "accordion-up": {
+          from: {
+            height: "var(--radix-accordion-content-height)",
+          },
+          to: {
+            height: "0",
+          },
+        },
+        "collapsible-down": {
+          from: {
+            height: 0,
+            opacity: 0,
+          },
+          to: {
+            height: "var(--radix-collapsible-content-height)",
+            opacity: 1,
+          },
+        },
+        "collapsible-up": {
+          from: {
+            height: "var(--radix-collapsible-content-height)",
+            opacity: 1,
+          },
+          to: {
+            height: 0,
+            opacity: 0,
+          },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "collapsible-down": "collapsible-down 0.3s ease-in-out",
+        "collapsible-up": "collapsible-up 0.3s ease-in-out",
+      },
+    },
+    screens: {
+      sm: "576px",
+      md: "768px",
+      lg: "992px",
+      xl: "1200px",
+      "2xl": "1400px",
+    },
+    container: {
+      center: true,
+      padding: "1rem",
+    },
+  },
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+};
diff --git a/utils/Firebase.js b/utils/Firebase.js
new file mode 100644
index 0000000..eaa5de1
--- /dev/null
+++ b/utils/Firebase.js
@@ -0,0 +1,121 @@
+"use client";
+import { initializeApp, getApps, getApp } from "firebase/app";
+import {
+  getMessaging,
+  getToken,
+  onMessage,
+  isSupported,
+} from "firebase/messaging";
+import firebase from "firebase/compat/app";
+import { getAuth } from "firebase/auth";
+import { toast } from "sonner";
+import { createStickyNote, t } from ".";
+import { getFcmToken } from "@/redux/reducer/settingSlice";
+
+const FirebaseData = () => {
+  let firebaseConfig = {
+    apiKey: process.env.NEXT_PUBLIC_API_KEY,
+    authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
+    projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
+    storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
+    messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
+    appId: process.env.NEXT_PUBLIC_APP_ID,
+    measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
+  };
+
+  if (!firebase.apps.length) {
+    firebase.initializeApp(firebaseConfig);
+  }
+
+  const app = initializeApp(firebaseConfig);
+  const authentication = getAuth(app);
+  const firebaseApp = !getApps().length
+    ? initializeApp(firebaseConfig)
+    : getApp();
+
+  const messagingInstance = async () => {
+    try {
+      const isSupportedBrowser = await isSupported();
+      if (isSupportedBrowser) {
+        return getMessaging(firebaseApp);
+      } else {
+        createStickyNote();
+        return null;
+      }
+    } catch (err) {
+      console.error("Error checking messaging support:", err);
+      return null;
+    }
+  };
+  const fetchToken = async (setFcmToken) => {
+    try {
+      if (typeof window !== "undefined" && "serviceWorker" in navigator) {
+        const messaging = await messagingInstance();
+        if (!messaging) {
+          console.error("Messaging not supported.");
+          return;
+        }
+        const permission = await Notification.requestPermission();
+        if (permission === "granted") {
+          getToken(messaging, {
+            vapidKey: process.env.NEXT_PUBLIC_VAPID_KEY,
+          })
+            .then((currentToken) => {
+              if (currentToken) {
+                getFcmToken(currentToken);
+                setFcmToken(currentToken);
+              } else {
+                console.error("No token found");
+                toast.error(t("permissionRequired"));
+              }
+            })
+            .catch((err) => {
+              console.error("Error retrieving token:", err);
+              // If the error is "no active Service Worker", try to register the service worker again
+              if (err.message.includes("no active Service Worker")) {
+                registerServiceWorker();
+              }
+            });
+        } else {
+          console.error("Permission not granted");
+        }
+      }
+    } catch (err) {
+      console.error("Error requesting notification permission:", err);
+    }
+  };
+
+  const registerServiceWorker = () => {
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker
+        .register("/firebase-messaging-sw.js")
+        .then((registration) => {
+          console.log(
+            "Service Worker registration successful with scope: ",
+            registration.scope
+          );
+          // After successful registration, try to fetch the token again
+          fetchToken();
+        })
+        .catch((err) => {
+          console.log("Service Worker registration failed: ", err);
+        });
+    }
+  };
+
+  const onMessageListener = async (callback) => {
+    const messaging = await messagingInstance();
+    if (messaging) {
+      return onMessage(messaging, callback);
+    } else {
+      console.error("Messaging not supported.");
+      return null;
+    }
+  };
+  const signOut = () => {
+    return authentication.signOut();
+  };
+  return { firebase, authentication, fetchToken, onMessageListener, signOut };
+};
+
+export default FirebaseData;
diff --git a/utils/api.js b/utils/api.js
new file mode 100644
index 0000000..227f949
--- /dev/null
+++ b/utils/api.js
@@ -0,0 +1,1180 @@
+"use client";
+import Api from "@/api/AxiosInterceptors";
+export const GET_SETTINGS = "get-system-settings";
+export const GET_SEO_SETTINGS = "seo-settings";
+export const GET_SLIDER = "get-slider";
+export const GET_CATEGORIES = "get-categories";
+export const GET_PARENT_CATEGORIES = "get-parent-categories";
+export const GET_ITEM = "get-item";
+export const GET_PACKAGE = "get-package";
+export const GET_BLOGS = "blogs";
+export const GET_BLOG_TAGS = "blog-tags";
+export const GET_FEATURED_SECTION = "get-featured-section";
+export const GET_FAQ = "faq";
+export const GET_COUNTRIES = "countries";
+export const GET_STATES = "states";
+export const GET_CITIES = "cities";
+export const GET_AREA = "areas";
+export const GET_LANGUAGE = "get-languages";
+export const GET_CUSTOM_FIELDS = "get-customfields";
+export const MANAGE_FAVOURITE = "manage-favourite";
+export const GET_FAVOURITE_ITEMS = "get-favourite-item";
+export const GET_MY_ITEMS = "my-items";
+export const GET_LIMITS = "get-limits";
+export const DELETE_ITEM = "delete-item";
+export const UPDATE_ITEM_STATUS = "update-item-status";
+export const CREATE_FEATURED_ITEM = "make-item-featured";
+export const CONTACT_US = "contact-us";
+export const UPDATE_LISTING = "update-item";
+export const USER_SIGNUP = "user-signup";
+export const USER_EXISTS = "user-exists";
+export const UPDATE_PROFILE = "update-profile";
+export const DELETE_USER = "delete-user";
+export const GET_REPORT_REASONS = "get-report-reasons";
+export const ADD_REPORT = "add-reports";
+export const GET_NOTIFICATION_LIST = "get-notification-list";
+export const CHAT_LIST = "chat-list";
+export const CHAT_MESSAGES = "chat-messages";
+export const SEND_MESSAGE = "send-message";
+export const BLOCK_USER = "block-user";
+export const UNBLOCK_USER = "unblock-user";
+export const BLOCKED_USERS = "blocked-users";
+export const ASSIGN_FREE_PACKAGE = "assign-free-package";
+export const GET_PAYMENT_SETTINGS = "get-payment-settings";
+export const PAYMENT_INTENT = "payment-intent";
+export const PAYMENT_TRANSACTIONS = "payment-transactions";
+export const TIPS = "tips";
+export const ITEM_OFFER = "item-offer";
+export const ADD_ITEM = "add-item";
+export const GET_SELLER = "get-seller";
+export const ITEM_BUYER_LIST = "item-buyer-list";
+export const AD_ITEM_REVIEW = "add-item-review";
+export const GET_VERIFICATION_FIELDS = "verification-fields";
+export const SEND_VERIFICATION_REQUEST = "send-verification-request";
+export const GET_VERIFICATION_STATUS = "verification-request";
+export const MY_REVIEWS = "my-review";
+export const RENEW_ITEM = "renew-item";
+export const ADD_REPORT_REVIEW = "add-review-report";
+export const BANK_TRANSFER_UPDATE = "bank-transfer-update";
+export const JOB_APPLY = "job-apply";
+export const MY_JOB_APPLICATIONS = "my-job-applications";
+export const GET_JOB_APPLICATIONS = "get-job-applications";
+export const UPDATE_JOB_STATUS = "update-job-applications-status";
+export const GET_OTP = "get-otp";
+export const VERIFY_OTP = "verify-otp";
+export const GET_LOCATION = "get-location";
+export const GET_USER_INFO = "get-user-info";
+export const LOGOUT = "logout";
+export const SET_ITEM_TOTAL_CLICK = "set-item-total-click";
+export const RESET_PASSWORD = "reset-password";
+export const GET_CURRENCIES = "get-currencies";
+
+// 1. SETTINGS API
+export const settingsApi = {
+  getSettings: ({ type } = {}) => {
+    return Api.get(GET_SETTINGS, {
+      params: { type },
+    });
+  },
+};
+
+// 2. SLIDER API
+export const sliderApi = {
+  getSlider: ({ country, state, city } = {}) => {
+    return Api.get(GET_SLIDER, { params: { country, state, city } });
+  },
+};
+
+// 3. CATEGORY API
+export const categoryApi = {
+  getCategory: ({ category_id, page, listing } = {}) => {
+    return Api.get(GET_CATEGORIES, {
+      params: { category_id, page, listing },
+    });
+  },
+};
+// 3. MY ITEMS API
+export const getMyItemsApi = {
+  getMyItems: ({ sort_by, page, status, id, category_id, slug } = {}) => {
+    return Api.get(GET_MY_ITEMS, {
+      params: { page, sort_by, status, id, category_id, slug },
+    });
+  },
+};
+export const getLimitsApi = {
+  getLimits: ({ package_type } = {}) => {
+    return Api.get(GET_LIMITS, {
+      params: { package_type },
+    });
+  },
+};
+export const getSellerApi = {
+  getSeller: ({ id, page } = {}) => {
+    return Api.get(GET_SELLER, {
+      params: { id, page },
+    });
+  },
+};
+export const getVerificationStatusApi = {
+  getVerificationStatus: () => {
+    return Api.get(GET_VERIFICATION_STATUS, {});
+  },
+};
+export const getItemBuyerListApi = {
+  getItemBuyerList: ({ item_id } = {}) => {
+    return Api.get(ITEM_BUYER_LIST, {
+      params: { item_id },
+    });
+  },
+};
+export const getVerificationFiledsApi = {
+  getVerificationFileds: () => {
+    return Api.get(GET_VERIFICATION_FIELDS, {});
+  },
+};
+
+// 4. ITEM API
+export const allItemApi = {
+  getItems: ({
+    id,
+    custom_fields,
+    category_id,
+    min_price,
+    max_price,
+    sort_by,
+    posted_since,
+    featured_section_id,
+    status,
+    page,
+    search,
+    country,
+    state,
+    city,
+    slug,
+    category_slug,
+    featured_section_slug,
+    area_id,
+    latitude,
+    longitude,
+    radius,
+    user_id,
+    popular_items,
+    limit,
+    current_page,
+  } = {}) => {
+    return Api.get(GET_ITEM, {
+      params: {
+        id,
+        custom_fields,
+        category_id,
+        min_price,
+        max_price,
+        sort_by,
+        posted_since,
+        featured_section_id,
+        status,
+        page,
+        search,
+        country,
+        state,
+        city,
+        slug,
+        category_slug,
+        featured_section_slug,
+        area_id,
+        latitude,
+        longitude,
+        radius,
+        user_id,
+        popular_items,
+        limit,
+        current_page,
+      },
+    });
+  },
+};
+
+// PACKAGE API
+
+export const getPackageApi = {
+  getPackage: ({ type } = {}) => {
+    return Api.get(GET_PACKAGE, {
+      params: {
+        type,
+      },
+    });
+  },
+};
+
+// BLOGS API
+export const getBlogsApi = {
+  getBlogs: ({ slug, category_id, sort_by, tag, page, views } = {}) => {
+    return Api.get(GET_BLOGS, {
+      params: {
+        slug,
+        category_id,
+        sort_by,
+        tag,
+        page,
+        views,
+      },
+    });
+  },
+};
+// BLOGS API
+export const getBlogTagsApi = {
+  getBlogs: ({ } = {}) => {
+    return Api.get(GET_BLOG_TAGS, {
+      params: {},
+    });
+  },
+};
+export const getMyReviewsApi = {
+  getMyReviews: ({ page } = {}) => {
+    return Api.get(MY_REVIEWS, {
+      params: {
+        page,
+      },
+    });
+  },
+};
+
+// 5. GET_FEATURED_SECTION
+export const FeaturedSectionApi = {
+  getFeaturedSections: ({
+    city,
+    state,
+    country,
+    slug,
+    latitude,
+    longitude,
+    radius,
+    area_id,
+  } = {}) => {
+    return Api.get(GET_FEATURED_SECTION, {
+      params: {
+        city,
+        state,
+        country,
+        slug,
+        latitude,
+        longitude,
+        radius,
+        area_id,
+      },
+    });
+  },
+};
+// FAQ API
+
+export const getFaqApi = {
+  getFaq: () => {
+    return Api.get(GET_FAQ, {
+      params: {},
+    });
+  },
+};
+
+// COUNTRY API
+
+export const getCoutriesApi = {
+  getCoutries: ({ search, page } = {}) => {
+    return Api.get(GET_COUNTRIES, {
+      params: {
+        search,
+        page,
+      },
+    });
+  },
+};
+
+// STATES API
+
+export const getStatesApi = {
+  getStates: ({ country_id, search, page } = {}) => {
+    return Api.get(GET_STATES, {
+      params: {
+        country_id,
+        search,
+        page,
+      },
+    });
+  },
+};
+
+// CITIES API
+
+export const getCitiesApi = {
+  getCities: ({ state_id, search, page } = {}) => {
+    return Api.get(GET_CITIES, {
+      params: {
+        state_id,
+        search,
+        page,
+      },
+    });
+  },
+};
+export const getAreasApi = {
+  getAreas: ({ city_id, search, page } = {}) => {
+    return Api.get(GET_AREA, {
+      params: {
+        city_id,
+        search,
+        page,
+      },
+    });
+  },
+};
+
+// language api
+
+export const getLanguageApi = {
+  getLanguage: ({ language_code, type } = {}) => {
+    return Api.get(GET_LANGUAGE, {
+      params: {
+        language_code,
+        type,
+      },
+    });
+  },
+};
+
+export const userSignUpApi = {
+  userSignup: ({
+    password,
+    name,
+    email,
+    mobile,
+    fcm_id,
+    firebase_id,
+    type,
+    profile,
+    country_code,
+    registration,
+    region_code,
+    is_login,
+  } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (name) formData.append("name", name);
+    if (email) formData.append("email", email);
+    if (mobile) formData.append("mobile", mobile);
+    if (fcm_id) formData.append("fcm_id", fcm_id);
+    if (firebase_id) formData.append("firebase_id", firebase_id);
+    if (type) formData.append("type", type);
+    if (region_code) formData.append("region_code", region_code);
+
+    // Assuming `profile` is a file object. If it's a URL or other type, handle accordingly.
+    if (profile) {
+      formData.append("profile", profile);
+    }
+    if (country_code) formData.append("country_code", country_code);
+    if (registration) formData.append("registration", registration);
+    if (is_login) formData.append("is_login", is_login);
+    if (password) formData.append("password", password);
+
+    return Api.post(USER_SIGNUP, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+export const logoutApi = {
+  logoutApi: ({ fcm_token } = {}) => {
+    const formData = new FormData();
+    if (fcm_token) formData.append("fcm_token", fcm_token);
+    return Api.post(LOGOUT, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+export const sendVerificationReqApi = {
+  sendVerificationReq: ({
+    verification_field_translations,
+    verification_field_files,
+  } = {}) => {
+    const formData = new FormData();
+
+    if (verification_field_translations)
+      formData.append(
+        "verification_field_translations",
+        verification_field_translations
+      );
+
+    verification_field_files.forEach(({ key, files }) => {
+      const file = Array.isArray(files) ? files[0] : files;
+      if (file) {
+        formData.append(`verification_field_files[${key}]`, file);
+      }
+    });
+
+    return Api.post(SEND_VERIFICATION_REQUEST, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+export const updateProfileApi = {
+  updateProfile: ({
+    name,
+    email,
+    mobile,
+    fcm_id,
+    address,
+    profile,
+    notification,
+    show_personal_details,
+    country_code,
+    region_code,
+  } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (name) formData.append("name", name);
+    if (email) formData.append("email", email);
+    formData.append("mobile", mobile);
+    if (fcm_id) formData.append("fcm_id", fcm_id);
+    if (address) formData.append("address", address);
+    if (country_code) formData.append("country_code", country_code);
+
+    // Assuming `profile` is a file object. If it's a URL or other type, handle accordingly.
+    if (profile) {
+      formData.append("profile", profile);
+    }
+    formData.append("notification", notification);
+    formData.append("show_personal_details", show_personal_details);
+    formData.append("region_code", region_code);
+
+    return Api.post(UPDATE_PROFILE, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+// GET NOTIFICATION API
+
+export const getNotificationList = {
+  getNotification: ({ page } = {}) => {
+    return Api.get(GET_NOTIFICATION_LIST, {
+      params: {
+        page: page,
+      },
+    });
+  },
+};
+
+// ASSIGN FREE PACKAGE
+export const assigFreePackageApi = {
+  assignFreePackage: ({ package_id } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (package_id) formData.append("package_id", package_id);
+
+    return Api.post(ASSIGN_FREE_PACKAGE, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+export const addItemReviewApi = {
+  addItemReview: ({ review, ratings, item_id } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (review) formData.append("review", review);
+    if (ratings) formData.append("ratings", ratings);
+    if (item_id) formData.append("item_id", item_id);
+
+    return Api.post(AD_ITEM_REVIEW, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+export const renewItemApi = {
+  renewItem: ({ item_ids, package_id } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (item_ids) formData.append("item_ids", item_ids);
+    if (package_id) formData.append("package_id", package_id);
+
+    return Api.post(RENEW_ITEM, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+// DELETE ITEM API
+
+export const deleteItemApi = {
+  deleteItem: ({ item_id, item_ids } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (item_id) formData.append("item_id", item_id);
+    if (item_ids) formData.append("item_ids", item_ids);
+    return Api.post(DELETE_ITEM, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+export const chanegItemStatusApi = {
+  changeItemStatus: ({ item_id, status, sold_to } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (item_id) formData.append("item_id", item_id);
+    if (status) formData.append("status", status);
+    if (sold_to) formData.append("sold_to", sold_to);
+
+    return Api.post(UPDATE_ITEM_STATUS, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+export const createFeaturedItemApi = {
+  createFeaturedItem: ({ item_id, positions } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (item_id) formData.append("item_id", item_id);
+    if (positions) formData.append("positions", positions);
+
+    return Api.post(CREATE_FEATURED_ITEM, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+// getPackageSettingsApi
+export const getPaymentSettingsApi = {
+  getPaymentSettings: () => {
+    return Api.get(GET_PAYMENT_SETTINGS, {
+      params: {},
+    });
+  },
+};
+// createPaymentIntentApi
+export const createPaymentIntentApi = {
+  createIntent: ({ package_id, payment_method, platform_type } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (package_id) formData.append("package_id", package_id);
+    if (payment_method) formData.append("payment_method", payment_method);
+    if (platform_type) formData.append("platform_type", platform_type);
+
+    return Api.post(PAYMENT_INTENT, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+// deleteUserApi
+export const deleteUserApi = {
+  deleteUser: () => {
+    return Api.delete(DELETE_USER, {
+      params: {},
+    });
+  },
+};
+// paymentTransactionApi
+export const paymentTransactionApi = {
+  transaction: ({ page }) => {
+    return Api.get(PAYMENT_TRANSACTIONS, {
+      params: {
+        page: page,
+      },
+    });
+  },
+};
+
+// custom field api
+
+export const getCustomFieldsApi = {
+  getCustomFields: ({ category_ids, filter } = {}) => {
+    return Api.get(GET_CUSTOM_FIELDS, {
+      params: {
+        category_ids,
+        ...(filter !== undefined ? { filter } : {}),
+      },
+    });
+  },
+};
+
+export const tipsApi = {
+  tips: ({ } = {}) => {
+    return Api.get(TIPS, {
+      params: {},
+    });
+  },
+};
+
+export const itemOfferApi = {
+  offer: ({ item_id, amount } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (item_id) formData.append("item_id", item_id);
+    if (amount) formData.append("amount", amount);
+
+    return Api.post(ITEM_OFFER, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+export const chatListApi = {
+  chatList: ({ type, page } = {}) => {
+    return Api.get(CHAT_LIST, {
+      params: {
+        type,
+        page,
+      },
+    });
+  },
+};
+
+export const getMessagesApi = {
+  chatMessages: ({ item_offer_id, page } = {}) => {
+    return Api.get(CHAT_MESSAGES, {
+      params: {
+        item_offer_id,
+        page,
+      },
+    });
+  },
+};
+// add item api
+
+export const addItemApi = {
+  addItem: ({
+    name,
+    slug,
+    description,
+    category_id,
+    all_category_ids,
+    price,
+    contact,
+    video_link,
+    custom_fields,
+    image,
+    gallery_images = [],
+    address,
+    latitude,
+    longitude,
+    custom_field_files = [],
+    area_id,
+    country,
+    state,
+    city,
+    min_salary,
+    max_salary,
+    translations,
+    custom_field_translations,
+    region_code,
+    currency_id
+  } = {}) => {
+    const formData = new FormData();
+    // Append only if the value is defined and not an empty string
+
+    if (name) formData.append("name", name);
+    if (slug) formData.append("slug", slug);
+    if (description) formData.append("description", description);
+    if (category_id) formData.append("category_id", category_id);
+    if (all_category_ids) formData.append("all_category_ids", all_category_ids);
+    if (price) formData.append("price", price);
+    if (contact) formData.append("contact", contact);
+    if (video_link) formData.append("video_link", video_link);
+
+    if (custom_fields)
+      formData.append("custom_fields", JSON.stringify(custom_fields));
+
+    if (image) formData.append("image", image);
+    if (gallery_images.length > 0) {
+      gallery_images.forEach((gallery_image, index) => {
+        formData.append(`gallery_images[${index}]`, gallery_image);
+      });
+    }
+    if (address) formData.append("address", address);
+    if (latitude) formData.append("latitude", latitude);
+    if (longitude) formData.append("longitude", longitude);
+
+    // Append custom field files
+    custom_field_files.forEach(({ key, files }) => {
+      if (Array.isArray(files)) {
+        files.forEach((file, index) =>
+          formData.append(`custom_field_files[${key}]`, file)
+        );
+      } else {
+        formData.append(`custom_field_files[${key}]`, files);
+      }
+    });
+
+    if (country) formData.append("country", country);
+    if (state) formData.append("state", state);
+    if (city) formData.append("city", city);
+    if (area_id) formData.append("area_id", area_id);
+    if (min_salary) formData.append("min_salary", min_salary);
+    if (max_salary) formData.append("max_salary", max_salary);
+    if (region_code) formData.append("region_code", region_code);
+    if (currency_id) formData.append("currency_id", currency_id);
+
+    if (custom_field_translations)
+      formData.append("custom_field_translations", custom_field_translations);
+
+    if (translations) formData.append("translations", translations);
+
+    return Api.post(ADD_ITEM, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+// Edit item API
+export const editItemApi = {
+  editItem: ({
+    id,
+    name,
+    slug,
+    description,
+    category_id,
+    all_category_ids,
+    price,
+    contact,
+    video_link,
+    custom_fields,
+    image,
+    gallery_images = [],
+    address,
+    latitude,
+    longitude,
+    custom_field_files = [],
+    area_id,
+    country,
+    state,
+    city,
+    delete_item_image_id,
+    min_salary,
+    max_salary,
+    translations,
+    custom_field_translations,
+    region_code,
+    currency_id
+    // expiry_date,
+  } = {}) => {
+    const formData = new FormData();
+    // Append only if the value is defined and not an empty string
+    if (id) formData.append("id", id);
+    if (name) formData.append("name", name);
+    if (slug) formData.append("slug", slug);
+    if (description) formData.append("description", description);
+    if (category_id) formData.append("category_id", category_id);
+    if (all_category_ids) formData.append("all_category_ids", all_category_ids);
+    if (price) formData.append("price", price);
+    if (delete_item_image_id)
+      formData.append("delete_item_image_id", delete_item_image_id);
+    if (contact) formData.append("contact", contact);
+    if (video_link) formData.append("video_link", video_link);
+    if (latitude) formData.append("latitude", latitude);
+    if (longitude) formData.append("longitude", longitude);
+    if (custom_fields)
+      formData.append("custom_fields", JSON.stringify(custom_fields));
+    if (address) formData.append("address", address);
+    formData.append("contact", contact);
+    if (country) formData.append("country", country);
+    if (state) formData.append("state", state);
+    // if (custom_field_files) formData.append("custom_field_files", custom_field_files)
+    if (area_id) formData.append("area_id", area_id);
+    if (city) formData.append("city", city);
+    if (currency_id) formData.append("currency_id", currency_id);
+    if (image != null) formData.append("image", image);
+    if (gallery_images.length > 0) {
+      gallery_images.forEach((gallery_image, index) => {
+        formData.append(`gallery_images[${index}]`, gallery_image);
+      });
+    }
+    if (region_code) formData.append("region_code", region_code);
+
+    formData.append("min_salary", min_salary);
+    formData.append("max_salary", max_salary);
+    // if (expiry_date) formData.append("expiry_date", expiry_date);
+
+    custom_field_files.forEach(({ key, files }) => {
+      if (Array.isArray(files)) {
+        files.forEach((file, index) =>
+          formData.append(`custom_field_files[${key}]`, file)
+        );
+      } else {
+        formData.append(`custom_field_files[${key}]`, files);
+      }
+    });
+
+    if (custom_field_translations)
+      formData.append("custom_field_translations", custom_field_translations);
+
+    if (translations) formData.append("translations", translations);
+    return Api.post(UPDATE_LISTING, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+export const sendMessageApi = {
+  sendMessage: ({ item_offer_id, message, file, audio } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (item_offer_id) formData.append("item_offer_id", item_offer_id);
+    if (message) formData.append("message", message);
+    if (file) formData.append("file", file);
+    if (audio) formData.append("audio", audio);
+
+    return Api.post(SEND_MESSAGE, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+// favorite API
+export const manageFavouriteApi = {
+  manageFavouriteApi: ({ item_id } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (item_id) formData.append("item_id", item_id);
+
+    return Api.post(MANAGE_FAVOURITE, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+export const getFavouriteApi = {
+  getFavouriteApi: ({ page } = {}) => {
+    return Api.get(GET_FAVOURITE_ITEMS, {
+      params: {
+        page,
+      },
+    });
+  },
+};
+
+export const getReportReasonsApi = {
+  reportReasons: ({ } = {}) => {
+    return Api.get(GET_REPORT_REASONS, {
+      params: {},
+    });
+  },
+};
+
+export const addReportReasonApi = {
+  addReport: ({ item_id, report_reason_id, other_message } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (item_id) formData.append("item_id", item_id);
+    if (report_reason_id) formData.append("report_reason_id", report_reason_id);
+    if (other_message) formData.append("other_message", other_message);
+
+    return Api.post(ADD_REPORT, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+export const addReportReviewApi = {
+  addReportReview: ({ seller_review_id, report_reason } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (seller_review_id) formData.append("seller_review_id", seller_review_id);
+    if (report_reason) formData.append("report_reason", report_reason);
+
+    return Api.post(ADD_REPORT_REVIEW, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+export const blockUserApi = {
+  blockUser: ({ blocked_user_id } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (blocked_user_id) formData.append("blocked_user_id", blocked_user_id);
+
+    return Api.post(BLOCK_USER, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+export const unBlockUserApi = {
+  unBlockUser: ({ blocked_user_id } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (blocked_user_id) formData.append("blocked_user_id", blocked_user_id);
+
+    return Api.post(UNBLOCK_USER, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+export const getBlockedUsers = {
+  blockedUsers: ({ } = {}) => {
+    return Api.get(BLOCKED_USERS, {
+      params: {},
+    });
+  },
+};
+
+export const contactUsApi = {
+  contactUs: ({ name, email, subject, message } = {}) => {
+    const formData = new FormData();
+    // Append only if the value is defined and not an empty string
+    if (name) formData.append("name", name);
+    if (email) formData.append("email", email);
+    if (subject) formData.append("subject", subject);
+    if (message) formData.append("message", message);
+    return Api.post(CONTACT_US, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+// get parent cate api
+export const getParentCategoriesApi = {
+  getPaymentCategories: ({ child_category_id, tree, slug } = {}) => {
+    return Api.get(GET_PARENT_CATEGORIES, {
+      params: {
+        child_category_id,
+        tree,
+        slug,
+      },
+    });
+  },
+};
+
+export const updateBankTransferApi = {
+  updateBankTransfer: ({ payment_transection_id, payment_receipt } = {}) => {
+    const formData = new FormData();
+    if (payment_transection_id)
+      formData.append("payment_transection_id", payment_transection_id);
+    if (payment_receipt) formData.append("payment_receipt", payment_receipt);
+
+    return Api.post(BANK_TRANSFER_UPDATE, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+export const jobApplyApi = {
+  jobApply: ({ item_id, full_name, email, mobile, resume } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (item_id) formData.append("item_id", item_id);
+    if (full_name) formData.append("full_name", full_name);
+    if (email) formData.append("email", email);
+    if (mobile) formData.append("mobile", mobile);
+    if (resume) formData.append("resume", resume);
+
+    return Api.post(JOB_APPLY, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+export const getMyJobApplicationsList = {
+  getMyJobApplications: ({ page } = {}) => {
+    return Api.get(MY_JOB_APPLICATIONS, {
+      params: {
+        page: page,
+      },
+    });
+  },
+};
+
+export const getAdJobApplicationsApi = {
+  getAdJobApplications: ({ page, item_id } = {}) => {
+    return Api.get(GET_JOB_APPLICATIONS, {
+      params: {
+        page: page,
+        item_id: item_id,
+      },
+    });
+  },
+};
+
+export const updateJobStatusApi = {
+  updateJobStatus: ({ job_id, status } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (job_id) formData.append("job_id", job_id);
+    if (status) formData.append("status", status);
+
+    return Api.post(UPDATE_JOB_STATUS, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+export const verifyOtpApi = {
+  verifyOtp: ({ number, otp, country_code, password } = {}) => {
+    return Api.get(VERIFY_OTP, {
+      params: {
+        number: number,
+        country_code: country_code,
+        otp: otp,
+        password: password
+      },
+    });
+  },
+};
+export const getOtpApi = {
+  getOtp: ({ number, country_code } = {}) => {
+    return Api.get(GET_OTP, {
+      params: {
+        number: number,
+        country_code: country_code
+      },
+    });
+  },
+};
+
+export const getLocationApi = {
+  getLocation: ({ lat, lng, lang, search, place_id, session_id } = {}) => {
+    return Api.get(GET_LOCATION, {
+      params: { lat, lng, lang, search, place_id, session_id },
+    });
+  },
+};
+
+export const getUserInfoApi = {
+  getUserInfo: () => {
+    return Api.get(GET_USER_INFO);
+  },
+};
+
+export const getCurrenciesApi = {
+  getCurrencies: ({ country } = {}) => {
+    return Api.get(GET_CURRENCIES, {
+      params: {
+        country: country,
+      },
+    });
+  },
+};
+export const getUserExistsApi = {
+  getUserExists: ({ mobile, country_code, forgot_password } = {}) => {
+    return Api.get(USER_EXISTS, {
+      params: {
+        mobile: mobile,
+        country_code: country_code,
+        forgot_password: forgot_password
+      },
+    });
+  },
+};
+
+export const setItemTotalClickApi = {
+  setItemTotalClick: ({ item_id } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (item_id) formData.append("item_id", item_id);
+
+    return Api.post(SET_ITEM_TOTAL_CLICK, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+
+export const resetPasswordApi = {
+  resetPassword: ({ number, country_code, new_password, token } = {}) => {
+    const formData = new FormData();
+
+    // Append only if the value is defined and not an empty string
+    if (number) formData.append("number", number);
+    if (country_code) formData.append("country_code", country_code);
+    if (new_password) formData.append("new_password", new_password);
+
+    // Prepare headers
+    const headers = {
+      "Content-Type": "multipart/form-data",
+    };
+
+    // Add authorization header if token is provided
+    if (token) {
+      headers.authorization = `Bearer ${token}`;
+    }
+
+    return Api.post(RESET_PASSWORD, formData, {
+      headers
+    });
+  },
+};
+
+
+export const getSeoSettingsApi = {
+  getSeoSettings: ({ page } = {}) => {
+    return Api.get(GET_SEO_SETTINGS, {
+      params: {
+        page,
+      },
+    });
+  },
+};
\ No newline at end of file
diff --git a/utils/constants.jsx b/utils/constants.jsx
new file mode 100644
index 0000000..eb781d6
--- /dev/null
+++ b/utils/constants.jsx
@@ -0,0 +1,51 @@
+
+export const workProcessSteps = [
+    {
+        id: 1,
+        title: 'listingMadeEasy',
+        description: 'createAds',
+    },
+    {
+        id: 2,
+        title: "instantReach",
+        description: "connectVastAudience",
+    },
+    {
+        id: 3,
+        title: "effortlessConnection",
+        description: "interactSecureMessaging",
+    },
+    {
+        id: 4,
+        title: "enjoyBenefits",
+        description: "reapRewards",
+    },
+];
+
+export const quickLinks = [
+    {
+        id: 1,
+        href: "/about-us",
+        labelKey: "aboutUs",
+    },
+    {
+        id: 2,
+        href: "/contact-us",
+        labelKey: "contactUs",
+    },
+    {
+        id: 3,
+        href: "/subscription",
+        labelKey: "subscription",
+    },
+    {
+        id: 4,
+        href: "/blogs",
+        labelKey: "ourBlog",
+    },
+    {
+        id: 5,
+        href: "/faqs",
+        labelKey: "faqs",
+    },
+];
diff --git a/utils/generateKeywords.js b/utils/generateKeywords.js
new file mode 100644
index 0000000..cf952b9
--- /dev/null
+++ b/utils/generateKeywords.js
@@ -0,0 +1,29 @@
+const stopWords = ['the', 'is', 'in', 'and', 'a', 'to', 'of', 'for', 'on', 'at', 'with', 'by', 'this', 'that', 'or', 'as', 'an', 'from', 'it', 'was', 'are', 'be', 'has', 'have', 'had', 'but', 'if', 'else'];
+
+export const generateKeywords = (description) => {
+    if (!description) {
+        return process.env.NEXT_PUBLIC_META_kEYWORDS
+            ? process.env.NEXT_PUBLIC_META_kEYWORDS.split(",").map((keyword) =>
+                keyword.trim()
+            )
+            : [];
+    }
+
+    const words = description
+        .toLowerCase()
+        .replace(/[^\w\s]/g, "")
+        .split(/\s+/);
+
+    const filteredWords = words.filter((word) => !stopWords.includes(word));
+
+    const wordFrequency = filteredWords.reduce((acc, word) => {
+        acc[word] = (acc[word] || 0) + 1;
+        return acc;
+    }, {});
+
+    const sortedWords = Object.keys(wordFrequency).sort(
+        (a, b) => wordFrequency[b] - wordFrequency[a]
+    );
+
+    return sortedWords.slice(0, 10);
+};
\ No newline at end of file
diff --git a/utils/getFetcherStatus.js b/utils/getFetcherStatus.js
new file mode 100644
index 0000000..4c6add8
--- /dev/null
+++ b/utils/getFetcherStatus.js
@@ -0,0 +1,14 @@
+let hasFetchedSystemSettings = false;
+let hasFetchedCategories = false;
+export function getHasFetchedSystemSettings() {
+  return hasFetchedSystemSettings;
+}
+export function setHasFetchedSystemSettings(value) {
+  hasFetchedSystemSettings = value;
+}
+export function getHasFetchedCategories() {
+  return hasFetchedCategories;
+}
+export function setHasFetchedCategories(value) {
+  hasFetchedCategories = value;
+}
\ No newline at end of file
diff --git a/utils/index.jsx b/utils/index.jsx
new file mode 100644
index 0000000..5cd3762
--- /dev/null
+++ b/utils/index.jsx
@@ -0,0 +1,1337 @@
+"use client";
+import { toast } from "sonner";
+import { store } from "../redux/store";
+import enTranslation from "./locale/en.json";
+import { generateKeywords } from "./generateKeywords";
+import { getCountryCallingCode } from "react-phone-number-input";
+
+export const t = (label) => {
+  if (typeof store.getState !== "function") {
+    return enTranslation[label] || label;
+  }
+
+  const langData =
+    store.getState().CurrentLanguage?.language?.file_name &&
+    store.getState().CurrentLanguage?.language?.file_name[label];
+  if (langData) {
+    return langData;
+  } else {
+    return enTranslation[label] || label;
+  }
+};
+
+// check user login
+// is login user check
+export const isLogin = () => {
+  // Use the selector to access user data
+  const userData = store.getState()?.UserSignup?.data;
+  // Check if the token exists
+  if (userData?.token) {
+    return true;
+  }
+
+  return false;
+};
+
+export const IsLandingPageOn = () => {
+  let settings = store.getState()?.Settings?.data?.data;
+  return Number(settings?.show_landing_page);
+};
+
+export const getDefaultLatLong = () => {
+  let settings = store.getState()?.Settings?.data?.data;
+  const default_latitude = Number(settings?.default_latitude);
+  const default_longitude = Number(settings?.default_longitude);
+
+  const defaultLetLong = {
+    latitude: default_latitude,
+    longitude: default_longitude,
+  };
+  return defaultLetLong;
+};
+
+export const getPlaceApiKey = () => {
+  let settings = store.getState()?.Settings?.data?.data;
+  return settings?.place_api_key;
+};
+
+export const getSlug = (pathname) => {
+  const segments = pathname.split("/");
+  return segments[segments.length - 1];
+};
+
+export const formatDate = (createdAt) => {
+  const date = new Date(createdAt);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days === 0) {
+    return t("today");
+  } else if (days === 1) {
+    return t("yesterday");
+  } else if (days < 30) {
+    return `${days} ${t("daysAgo")}`;
+  } else if (days < 365) {
+    const months = Math.floor(days / 30);
+    return `${months} ${months > 1 ? t("months") : t("month")} ${t("ago")}`;
+  } else {
+    const years = Math.floor(days / 365);
+    return `${years} ${years > 1 ? t("years") : t("year")} ${t("ago")}`;
+  }
+};
+
+export const languageLocaleMap = {
+  af: "af-ZA", // Afrikaans
+  am: "am-ET", // Amharic
+  ar: "ar-SA", // Arabic
+  az: "az-AZ", // Azerbaijani
+  be: "be-BY", // Belarusian
+  bg: "bg-BG", // Bulgarian
+  bn: "bn-BD", // Bengali
+  bs: "bs-BA", // Bosnian
+  ca: "ca-ES", // Catalan
+  cs: "cs-CZ", // Czech
+  cy: "cy-GB", // Welsh
+  da: "da-DK", // Danish
+  de: "de-DE", // German
+  dz: "dz-BT", // Dzongkha
+  el: "el-GR", // Greek
+  en: "en-US", // English
+  eo: "eo-001", // Esperanto
+  es: "es-ES", // Spanish
+  et: "et-EE", // Estonian
+  eu: "eu-ES", // Basque
+  fa: "fa-IR", // Persian
+  fi: "fi-FI", // Finnish
+  fr: "fr-FR", // French
+  ga: "ga-IE", // Irish
+  gl: "gl-ES", // Galician
+  gu: "gu-IN", // Gujarati
+  he: "he-IL", // Hebrew
+  hi: "hi-IN", // Hindi
+  hr: "hr-HR", // Croatian
+  hu: "hu-HU", // Hungarian
+  hy: "hy-AM", // Armenian
+  id: "id-ID", // Indonesian
+  is: "is-IS", // Icelandic
+  it: "it-IT", // Italian
+  ja: "ja-JP", // Japanese
+  jv: "jv-ID", // Javanese
+  ka: "ka-GE", // Georgian
+  kk: "kk-KZ", // Kazakh
+  km: "km-KH", // Khmer
+  kn: "kn-IN", // Kannada
+  ko: "ko-KR", // Korean
+  ky: "ky-KG", // Kyrgyz
+  lo: "lo-LA", // Lao
+  lt: "lt-LT", // Lithuanian
+  lv: "lv-LV", // Latvian
+  mk: "mk-MK", // Macedonian
+  ml: "ml-IN", // Malayalam
+  mn: "mn-MN", // Mongolian
+  mr: "mr-IN", // Marathi
+  ms: "ms-MY", // Malay
+  mt: "mt-MT", // Maltese
+  my: "my-MM", // Burmese
+  ne: "ne-NP", // Nepali
+  nl: "nl-NL", // Dutch
+  no: "no-NO", // Norwegian
+  or: "or-IN", // Odia
+  pa: "pa-IN", // Punjabi
+  pl: "pl-PL", // Polish
+  ps: "ps-AF", // Pashto
+  pt: "pt-PT", // Portuguese
+  ro: "ro-RO", // Romanian
+  ru: "ru-RU", // Russian
+  rw: "rw-RW", // Kinyarwanda
+  si: "si-LK", // Sinhala
+  sk: "sk-SK", // Slovak
+  sl: "sl-SI", // Slovenian
+  so: "so-SO", // Somali
+  sq: "sq-AL", // Albanian
+  sr: "sr-RS", // Serbian
+  sv: "sv-SE", // Swedish
+  sw: "sw-TZ", // Swahili
+  ta: "ta-IN", // Tamil
+  te: "te-IN", // Telugu
+  tg: "tg-TJ", // Tajik
+  th: "th-TH", // Thai
+  tk: "tk-TM", // Turkmen
+  tr: "tr-TR", // Turkish
+  uk: "uk-UA", // Ukrainian
+  ur: "ur-PK", // Urdu
+  uz: "uz-UZ", // Uzbek
+  vi: "vi-VN", // Vietnamese
+  xh: "xh-ZA", // Xhosa
+  yi: "yi-001", // Yiddish
+  yo: "yo-NG", // Yoruba
+  zh: "zh-CN", // Chinese (Simplified)
+  zu: "zu-ZA", // Zulu
+};
+
+export const countryLocaleMap = {
+  AF: "ps-AF", // Afghanistan
+  AL: "sq-AL", // Albania
+  DZ: "ar-DZ", // Algeria
+  AS: "en-AS", // American Samoa
+  AD: "ca-AD", // Andorra
+  AO: "pt-AO", // Angola
+  AI: "en-AI", // Anguilla
+  AG: "en-AG", // Antigua and Barbuda
+  AR: "es-AR", // Argentina
+  AM: "hy-AM", // Armenia
+  AU: "en-AU", // Australia
+  AT: "de-AT", // Austria
+  AZ: "az-AZ", // Azerbaijan
+  BS: "en-BS", // Bahamas
+  BH: "ar-BH", // Bahrain
+  BD: "bn-BD", // Bangladesh
+  BB: "en-BB", // Barbados
+  BY: "be-BY", // Belarus
+  BE: "nl-BE", // Belgium
+  BZ: "en-BZ", // Belize
+  BJ: "fr-BJ", // Benin
+  BM: "en-BM", // Bermuda
+  BT: "dz-BT", // Bhutan
+  BO: "es-BO", // Bolivia
+  BA: "bs-BA", // Bosnia and Herzegovina
+  BW: "en-BW", // Botswana
+  BR: "pt-BR", // Brazil
+  BN: "ms-BN", // Brunei
+  BG: "bg-BG", // Bulgaria
+  BF: "fr-BF", // Burkina Faso
+  BI: "fr-BI", // Burundi
+  KH: "km-KH", // Cambodia
+  CM: "fr-CM", // Cameroon
+  CA: "en-CA", // Canada
+  CV: "pt-CV", // Cape Verde
+  KY: "en-KY", // Cayman Islands
+  CF: "fr-CF", // Central African Republic
+  TD: "fr-TD", // Chad
+  CL: "es-CL", // Chile
+  CN: "zh-CN", // China
+  CO: "es-CO", // Colombia
+  KM: "ar-KM", // Comoros
+  CG: "fr-CG", // Congo
+  CR: "es-CR", // Costa Rica
+  HR: "hr-HR", // Croatia
+  CU: "es-CU", // Cuba
+  CY: "el-CY", // Cyprus
+  CZ: "cs-CZ", // Czech Republic
+  DK: "da-DK", // Denmark
+  DJ: "fr-DJ", // Djibouti
+  DM: "en-DM", // Dominica
+  DO: "es-DO", // Dominican Republic
+  EC: "es-EC", // Ecuador
+  EG: "ar-EG", // Egypt
+  SV: "es-SV", // El Salvador
+  GQ: "es-GQ", // Equatorial Guinea
+  ER: "ti-ER", // Eritrea
+  EE: "et-EE", // Estonia
+  SZ: "en-SZ", // Eswatini
+  ET: "am-ET", // Ethiopia
+  FJ: "en-FJ", // Fiji
+  FI: "fi-FI", // Finland
+  FR: "fr-FR", // France
+  GA: "fr-GA", // Gabon
+  GM: "en-GM", // Gambia
+  GE: "ka-GE", // Georgia
+  DE: "de-DE", // Germany
+  GH: "en-GH", // Ghana
+  GR: "el-GR", // Greece
+  GD: "en-GD", // Grenada
+  GU: "en-GU", // Guam
+  GT: "es-GT", // Guatemala
+  GN: "fr-GN", // Guinea
+  GW: "pt-GW", // Guinea-Bissau
+  GY: "en-GY", // Guyana
+  HT: "fr-HT", // Haiti
+  HN: "es-HN", // Honduras
+  HU: "hu-HU", // Hungary
+  IS: "is-IS", // Iceland
+  IN: "en-IN", // India
+  ID: "id-ID", // Indonesia
+  IR: "fa-IR", // Iran
+  IQ: "ar-IQ", // Iraq
+  IE: "en-IE", // Ireland
+  IL: "he-IL", // Israel
+  IT: "it-IT", // Italy
+  JM: "en-JM", // Jamaica
+  JP: "ja-JP", // Japan
+  JO: "ar-JO", // Jordan
+  KZ: "kk-KZ", // Kazakhstan
+  KE: "en-KE", // Kenya
+  KI: "en-KI", // Kiribati
+  KP: "ko-KP", // North Korea
+  KR: "ko-KR", // South Korea
+  KW: "ar-KW", // Kuwait
+  KG: "ky-KG", // Kyrgyzstan
+  LA: "lo-LA", // Laos
+  LV: "lv-LV", // Latvia
+  LB: "ar-LB", // Lebanon
+  LS: "en-LS", // Lesotho
+  LR: "en-LR", // Liberia
+  LY: "ar-LY", // Libya
+  LI: "de-LI", // Liechtenstein
+  LT: "lt-LT", // Lithuania
+  LU: "fr-LU", // Luxembourg
+  MG: "fr-MG", // Madagascar
+  MW: "en-MW", // Malawi
+  MY: "ms-MY", // Malaysia
+  MV: "dv-MV", // Maldives
+  ML: "fr-ML", // Mali
+  MT: "mt-MT", // Malta
+  MH: "en-MH", // Marshall Islands
+  MR: "ar-MR", // Mauritania
+  MU: "en-MU", // Mauritius
+  MX: "es-MX", // Mexico
+  FM: "en-FM", // Micronesia
+  MD: "ro-MD", // Moldova
+  MC: "fr-MC", // Monaco
+  MN: "mn-MN", // Mongolia
+  ME: "sr-ME", // Montenegro
+  MA: "ar-MA", // Morocco
+  MZ: "pt-MZ", // Mozambique
+  MM: "my-MM", // Myanmar
+  NA: "en-NA", // Namibia
+  NR: "en-NR", // Nauru
+  NP: "ne-NP", // Nepal
+  NL: "nl-NL", // Netherlands
+  NZ: "en-NZ", // New Zealand
+  NI: "es-NI", // Nicaragua
+  NE: "fr-NE", // Niger
+  NG: "en-NG", // Nigeria
+  NO: "no-NO", // Norway
+  OM: "ar-OM", // Oman
+  PK: "ur-PK", // Pakistan
+  PW: "en-PW", // Palau
+  PS: "ar-PS", // Palestine
+  PA: "es-PA", // Panama
+  PG: "en-PG", // Papua New Guinea
+  PY: "es-PY", // Paraguay
+  PE: "es-PE", // Peru
+  PH: "en-PH", // Philippines
+  PL: "pl-PL", // Poland
+  PT: "pt-PT", // Portugal
+  QA: "ar-QA", // Qatar
+  RO: "ro-RO", // Romania
+  RU: "ru-RU", // Russia
+  RW: "rw-RW", // Rwanda
+  KN: "en-KN", // Saint Kitts and Nevis
+  LC: "en-LC", // Saint Lucia
+  VC: "en-VC", // Saint Vincent and the Grenadines
+  WS: "en-WS", // Samoa
+  SM: "it-SM", // San Marino
+  ST: "pt-ST", // Sao Tome and Principe
+  SA: "ar-SA", // Saudi Arabia
+  SN: "fr-SN", // Senegal
+  RS: "sr-RS", // Serbia
+  SC: "en-SC", // Seychelles
+  SL: "en-SL", // Sierra Leone
+  SG: "en-SG", // Singapore
+  SK: "sk-SK", // Slovakia
+  SI: "sl-SI", // Slovenia
+  SB: "en-SB", // Solomon Islands
+  SO: "so-SO", // Somalia
+  ZA: "en-ZA", // South Africa
+  ES: "es-ES", // Spain
+  LK: "si-LK", // Sri Lanka
+  SD: "ar-SD", // Sudan
+  SR: "nl-SR", // Suriname
+  SE: "sv-SE", // Sweden
+  CH: "de-CH", // Switzerland
+  SY: "ar-SY", // Syria
+  TW: "zh-TW", // Taiwan
+  TJ: "tg-TJ", // Tajikistan
+  TZ: "sw-TZ", // Tanzania
+  TH: "th-TH", // Thailand
+  TG: "fr-TG", // Togo
+  TO: "en-TO", // Tonga
+  TT: "en-TT", // Trinidad and Tobago
+  TN: "ar-TN", // Tunisia
+  TR: "tr-TR", // Turkey
+  TM: "tk-TM", // Turkmenistan
+  UG: "en-UG", // Uganda
+  UA: "uk-UA", // Ukraine
+  AE: "ar-AE", // United Arab Emirates
+  GB: "en-GB", // United Kingdom
+  US: "en-US", // United States
+  UY: "es-UY", // Uruguay
+  UZ: "uz-UZ", // Uzbekistan
+  VU: "en-VU", // Vanuatu
+  VE: "es-VE", // Venezuela
+  VN: "vi-VN", // Vietnam
+  YE: "ar-YE", // Yemen
+  ZM: "en-ZM", // Zambia
+  ZW: "en-ZW", // Zimbabwe
+};
+
+// Function to format large numbers as strings with K, M, and B abbreviations
+export const formatPriceAbbreviated = (price) => {
+  if (
+    price === null ||
+    price === undefined ||
+    (typeof price === "string" && price.trim() === "")
+  ) {
+    return "";
+  }
+
+  if (Number(price) === 0) {
+    return t("Free");
+  }
+
+  const settingsData = store.getState()?.Settings?.data?.data;
+  const currencySymbol = settingsData?.currency_symbol;
+  const currencyPosition = settingsData.currency_symbol_position;
+  const countryCode =
+    process.env.NEXT_PUBLIC_DEFAULT_COUNTRY?.toUpperCase() || "US";
+  const locale = countryLocaleMap[countryCode] || "en-US";
+
+  const formattedNumber = new Intl.NumberFormat(locale, {
+    maximumFractionDigits: 2,
+    useGrouping: true,
+  }).format(Number(price));
+
+  return currencyPosition === "right"
+    ? `${formattedNumber} ${currencySymbol}`
+    : `${currencySymbol} ${formattedNumber}`;
+};
+
+export const formatSalaryRange = (minSalary, maxSalary) => {
+  const hasMin =
+    minSalary !== undefined && minSalary !== null && minSalary !== "";
+  const hasMax =
+    maxSalary !== undefined && maxSalary !== null && maxSalary !== "";
+
+  if (hasMin && hasMax) {
+    return `${formatPriceAbbreviated(minSalary)} – ${formatPriceAbbreviated(
+      maxSalary
+    )}`;
+  }
+
+  if (hasMin) {
+    return `${t("from")} ${formatPriceAbbreviated(minSalary)}`;
+  }
+
+  if (hasMax) {
+    return `${t("upTo")} ${formatPriceAbbreviated(maxSalary)}`;
+  }
+
+  return "";
+};
+
+// utils/stickyNote.js
+export const createStickyNote = () => {
+  // Check if sticky note already exists - prevent duplicates
+  if (document.getElementById("firebase-sticky-note")) {
+    return;
+  }
+
+  const stickyNote = document.createElement("div");
+  stickyNote.id = "firebase-sticky-note";
+  stickyNote.style.position = "fixed";
+  stickyNote.style.bottom = "0";
+  stickyNote.style.width = "100%";
+  stickyNote.style.backgroundColor = "#ffffff";
+  stickyNote.style.color = "#000000";
+  stickyNote.style.padding = "10px";
+  stickyNote.style.textAlign = "center";
+  stickyNote.style.fontSize = "14px";
+  stickyNote.style.zIndex = "99999";
+
+  const closeButton = document.createElement("span");
+  closeButton.setAttribute("data-sticky-close", "true"); // Add identifier
+  closeButton.style.cursor = "pointer";
+  closeButton.style.float = "right";
+  closeButton.innerHTML = "&times;";
+  closeButton.fontSize = "20px";
+
+  closeButton.onclick = function () {
+    document.body.removeChild(stickyNote);
+  };
+
+  const playStoreLink = store.getState()?.Settings?.data?.data?.play_store_link;
+  const appStoreLink = store.getState()?.Settings?.data?.data?.app_store_link;
+
+  const message = document.createElement("span");
+  message.setAttribute("data-sticky-message", "true");
+  message.innerText = t("chatAndNotificationNotSupported");
+
+  const linkContainer = document.createElement("div"); // Changed to 'div' for better spacing
+  linkContainer.style.display = "inline-block"; // Keeps links inline while allowing space
+
+  const linkStyle = "text-decoration: underline !important; color: #3498db";
+
+  if (playStoreLink) {
+    const playStoreAnchor = document.createElement("a");
+    playStoreAnchor.setAttribute("data-sticky-playstore", "true"); // Add identifier
+    playStoreAnchor.style.cssText = linkStyle;
+    playStoreAnchor.innerText = t("playStore");
+    playStoreAnchor.href = playStoreLink;
+    playStoreAnchor.target = "_blank";
+    linkContainer.appendChild(playStoreAnchor);
+  }
+
+  if (appStoreLink) {
+    const appStoreAnchor = document.createElement("a");
+    appStoreAnchor.setAttribute("data-sticky-appstore", "true"); // Add identifier
+    appStoreAnchor.style.cssText = linkStyle;
+    appStoreAnchor.style.marginLeft = "5px"; // Space before this link
+    appStoreAnchor.innerText = t("appStore");
+    appStoreAnchor.href = appStoreLink;
+    appStoreAnchor.target = "_blank";
+    linkContainer.appendChild(appStoreAnchor);
+  }
+
+  stickyNote.appendChild(closeButton);
+  stickyNote.appendChild(message);
+  stickyNote.appendChild(linkContainer);
+
+  document.body.appendChild(stickyNote);
+};
+
+// Simple function to update sticky note translations
+export const updateStickyNoteTranslations = () => {
+  const note = document.getElementById("firebase-sticky-note");
+  if (!note) return;
+
+  // Use data attributes to find the correct elements
+  const message = note.querySelector("[data-sticky-message]");
+  const playStoreLink = note.querySelector("[data-sticky-playstore]");
+  const appStoreLink = note.querySelector("[data-sticky-appstore]");
+
+  if (message) {
+    message.innerText = t("chatAndNotificationNotSupported");
+  }
+  if (playStoreLink) {
+    playStoreLink.innerText = t("playStore");
+  }
+  if (appStoreLink) {
+    appStoreLink.innerText = t("appStore");
+  }
+};
+
+const ERROR_CODES = {
+  "auth/user-not-found": t("userNotFound"),
+  "auth/wrong-password": t("invalidPassword"),
+  "auth/email-already-in-use": t("emailInUse"),
+  "auth/invalid-email": t("invalidEmail"),
+  "auth/user-disabled": t("userAccountDisabled"),
+  "auth/too-many-requests": t("tooManyRequests"),
+  "auth/operation-not-allowed": t("operationNotAllowed"),
+  "auth/internal-error": t("internalError"),
+  "auth/invalid-login-credentials": t("incorrectDetails"),
+  "auth/invalid-credential": t("incorrectDetails"),
+  "auth/admin-restricted-operation": t("adminOnlyOperation"),
+  "auth/already-initialized": t("alreadyInitialized"),
+  "auth/app-not-authorized": t("appNotAuthorized"),
+  "auth/app-not-installed": t("appNotInstalled"),
+  "auth/argument-error": t("argumentError"),
+  "auth/captcha-check-failed": t("captchaCheckFailed"),
+  "auth/code-expired": t("codeExpired"),
+  "auth/cordova-not-ready": t("cordovaNotReady"),
+  "auth/cors-unsupported": t("corsUnsupported"),
+  "auth/credential-already-in-use": t("credentialAlreadyInUse"),
+  "auth/custom-token-mismatch": t("customTokenMismatch"),
+  "auth/requires-recent-login": t("requiresRecentLogin"),
+  "auth/dependent-sdk-initialized-before-auth": t(
+    "dependentSdkInitializedBeforeAuth"
+  ),
+  "auth/dynamic-link-not-activated": t("dynamicLinkNotActivated"),
+  "auth/email-change-needs-verification": t("emailChangeNeedsVerification"),
+  "auth/emulator-config-failed": t("emulatorConfigFailed"),
+  "auth/expired-action-code": t("expiredActionCode"),
+  "auth/cancelled-popup-request": t("cancelledPopupRequest"),
+  "auth/invalid-api-key": t("invalidApiKey"),
+  "auth/invalid-app-credential": t("invalidAppCredential"),
+  "auth/invalid-app-id": t("invalidAppId"),
+  "auth/invalid-user-token": t("invalidUserToken"),
+  "auth/invalid-auth-event": t("invalidAuthEvent"),
+  "auth/invalid-cert-hash": t("invalidCertHash"),
+  "auth/invalid-verification-code": t("invalidVerificationCode"),
+  "auth/invalid-continue-uri": t("invalidContinueUri"),
+  "auth/invalid-cordova-configuration": t("invalidCordovaConfiguration"),
+  "auth/invalid-custom-token": t("invalidCustomToken"),
+  "auth/invalid-dynamic-link-domain": t("invalidDynamicLinkDomain"),
+  "auth/invalid-emulator-scheme": t("invalidEmulatorScheme"),
+  "auth/invalid-message-payload": t("invalidMessagePayload"),
+  "auth/invalid-multi-factor-session": t("invalidMultiFactorSession"),
+  "auth/invalid-oauth-client-id": t("invalidOauthClientId"),
+  "auth/invalid-oauth-provider": t("invalidOauthProvider"),
+  "auth/invalid-action-code": t("invalidActionCode"),
+  "auth/unauthorized-domain": t("unauthorizedDomain"),
+  "auth/invalid-persistence-type": t("invalidPersistenceType"),
+  "auth/invalid-phone-number": t("invalidPhoneNumber"),
+  "auth/invalid-provider-id": t("invalidProviderId"),
+  "auth/invalid-recaptcha-action": t("invalidRecaptchaAction"),
+  "auth/invalid-recaptcha-token": t("invalidRecaptchaToken"),
+  "auth/invalid-recaptcha-version": t("invalidRecaptchaVersion"),
+  "auth/invalid-recipient-email": t("invalidRecipientEmail"),
+  "auth/invalid-req-type": t("invalidReqType"),
+  "auth/invalid-sender": t("invalidSender"),
+  "auth/invalid-verification-id": t("invalidVerificationId"),
+  "auth/invalid-tenant-id": t("invalidTenantId"),
+  "auth/multi-factor-info-not-found": t("multiFactorInfoNotFound"),
+  "auth/multi-factor-auth-required": t("multiFactorAuthRequired"),
+  "auth/missing-android-pkg-name": t("missingAndroidPkgName"),
+  "auth/missing-app-credential": t("missingAppCredential"),
+  "auth/auth-domain-config-required": t("authDomainConfigRequired"),
+  "auth/missing-client-type": t("missingClientType"),
+  "auth/missing-verification-code": t("missingVerificationCode"),
+  "auth/missing-continue-uri": t("missingContinueUri"),
+  "auth/missing-iframe-start": t("missingIframeStart"),
+  "auth/missing-ios-bundle-id": t("missingIosBundleId"),
+  "auth/missing-multi-factor-info": t("missingMultiFactorInfo"),
+  "auth/missing-multi-factor-session": t("missingMultiFactorSession"),
+  "auth/missing-or-invalid-nonce": t("missingOrInvalidNonce"),
+  "auth/missing-phone-number": t("missingPhoneNumber"),
+  "auth/missing-recaptcha-token": t("missingRecaptchaToken"),
+  "auth/missing-recaptcha-version": t("missingRecaptchaVersion"),
+  "auth/missing-verification-id": t("missingVerificationId"),
+  "auth/app-deleted": t("appDeleted"),
+  "auth/account-exists-with-different-credential": t(
+    "accountExistsWithDifferentCredential"
+  ),
+  "auth/network-request-failed": t("networkRequestFailed"),
+  "auth/no-auth-event": t("noAuthEvent"),
+  "auth/no-such-provider": t("noSuchProvider"),
+  "auth/null-user": t("nullUser"),
+  "auth/operation-not-supported-in-this-environment": t(
+    "operationNotSupportedInThisEnvironment"
+  ),
+  "auth/popup-blocked": t("popupBlocked"),
+  "auth/popup-closed-by-user": t("popupClosedByUser"),
+  "auth/provider-already-linked": t("providerAlreadyLinked"),
+  "auth/quota-exceeded": t("quotaExceeded"),
+  "auth/recaptcha-not-enabled": t("recaptchaNotEnabled"),
+  "auth/redirect-cancelled-by-user": t("redirectCancelledByUser"),
+  "auth/redirect-operation-pending": t("redirectOperationPending"),
+  "auth/rejected-credential": t("rejectedCredential"),
+  "auth/second-factor-already-in-use": t("secondFactorAlreadyInUse"),
+  "auth/maximum-second-factor-count-exceeded": t(
+    "maximumSecondFactorCountExceeded"
+  ),
+  "auth/tenant-id-mismatch": t("tenantIdMismatch"),
+  "auth/timeout": t("timeout"),
+  "auth/user-token-expired": t("userTokenExpired"),
+  "auth/unauthorized-continue-uri": t("unauthorizedContinueUri"),
+  "auth/unsupported-first-factor": t("unsupportedFirstFactor"),
+  "auth/unsupported-persistence-type": t("unsupportedPersistenceType"),
+  "auth/unsupported-tenant-operation": t("unsupportedTenantOperation"),
+  "auth/unverified-email": t("unverifiedEmail"),
+  "auth/user-cancelled": t("userCancelled"),
+  "auth/user-mismatch": t("userMismatch"),
+  "auth/user-signed-out": t("userSignedOut"),
+  "auth/weak-password": t("weakPassword"),
+  "auth/web-storage-unsupported": t("webStorageUnsupported"),
+  "auth/missing-email": t("addEmail"),
+};
+
+// Error handling function
+export const handleFirebaseAuthError = (errorCode) => {
+  // Check if the error code exists in the global ERROR_CODES object
+  if (ERROR_CODES.hasOwnProperty(errorCode)) {
+    // If the error code exists, log the corresponding error message
+    toast.error(ERROR_CODES[errorCode]);
+  } else {
+    // If the error code is not found, log a generic error message
+    toast.error(`${t("errorOccurred")}:${errorCode}`);
+  }
+  // Optionally, you can add additional logic here to handle the error
+  // For example, display an error message to the user, redirect to an error page, etc.
+};
+
+export const truncate = (text, maxLength) => {
+  // Check if text is undefined or null
+  if (!text) {
+    return ""; // or handle the case as per your requirement
+  }
+
+  const stringText = String(text);
+
+  // If the text length is less than or equal to maxLength, return the original text
+  if (stringText.length <= maxLength) {
+    return text;
+  } else {
+    // Otherwise, truncate the text to maxLength characters and append ellipsis
+    return stringText?.slice(0, maxLength) + "...";
+  }
+};
+
+export const loadStripeApiKey = () => {
+  const STRIPEData = store.getState()?.Settings;
+  const StripeKey = STRIPEData?.data?.stripe_publishable_key;
+  if (StripeKey) {
+    ``;
+    return StripeKey;
+  }
+  return false;
+};
+
+export const generateSlug = (text) => {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9\s-]/g, "") // Remove all characters that are not lowercase letters, digits, spaces, or hyphens
+    .replace(/\s+/g, "-") // Replace spaces with hyphens
+    .replace(/-+/g, "-") // Replace multiple hyphens with a single hyphen
+    .replace(/^-+|-+$/g, ""); // Remove leading or trailing hyphens
+};
+
+export const isEmptyObject = (obj) => {
+  return Object.keys(obj).length === 0;
+};
+
+// Create a temporary element to measure the width of category names
+
+export const measureCategoryWidth = (categoryName) => {
+  const tempElement = document.createElement("span");
+  tempElement.style.display = "inline-block";
+  tempElement.style.visibility = "hidden";
+  tempElement.style.position = "absolute";
+  tempElement.innerText = categoryName;
+  document.body.appendChild(tempElement);
+  const width = tempElement.offsetWidth + 15; //icon width(12) + gap(3) between category and icon
+  document.body.removeChild(tempElement);
+  return width;
+};
+
+export const calculateRatingPercentages = (ratings) => {
+  // Initialize counters for each star rating
+  const ratingCount = {
+    5: 0,
+    4: 0,
+    3: 0,
+    2: 0,
+    1: 0,
+  };
+
+  // Count the number of each star rating
+  ratings?.forEach((rating) => {
+    const roundedRating = Math.round(rating?.ratings); // Round down to the nearest whole number
+    if (roundedRating >= 1 && roundedRating <= 5) {
+      ratingCount[roundedRating] += 1;
+    }
+  });
+
+  // Get the total number of ratings
+  const totalRatings = ratings.length;
+
+  // Calculate the percentage for each rating
+  const ratingPercentages = {
+    5: (ratingCount[5] / totalRatings) * 100,
+    4: (ratingCount[4] / totalRatings) * 100,
+    3: (ratingCount[3] / totalRatings) * 100,
+    2: (ratingCount[2] / totalRatings) * 100,
+    1: (ratingCount[1] / totalRatings) * 100,
+  };
+
+  return { ratingCount, ratingPercentages };
+};
+
+export const isPdf = (url) => url?.toLowerCase().endsWith(".pdf");
+
+export const extractYear = (dateString) => {
+  const date = new Date(dateString);
+  return date.getFullYear();
+};
+
+export const isValidURL = (url) => {
+  const pattern = /^(ftp|http|https):\/\/[^ "]+$/;
+  return pattern.test(url);
+};
+
+export const formatTime = (dateString) => {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffInSeconds = Math.floor((now - date) / 1000);
+  const diffInMinutes = Math.floor(diffInSeconds / 60);
+  const diffInHours = Math.floor(diffInMinutes / 60);
+  const diffInDays = Math.floor(diffInHours / 24);
+  const diffInWeeks = Math.floor(diffInDays / 7);
+  const diffInMonths = Math.floor(diffInDays / 30);
+  const diffInYears = Math.floor(diffInDays / 365);
+
+  if (diffInSeconds < 60) {
+    return t("now");
+  } else if (diffInMinutes < 60) {
+    return `${diffInMinutes}m`;
+  } else if (diffInHours < 24) {
+    return `${diffInHours}h`;
+  } else if (diffInDays === 1) {
+    return t("yesterday");
+  } else if (diffInDays < 7) {
+    return `${diffInDays}d`;
+  } else if (diffInWeeks < 4) {
+    return `${diffInWeeks}w`;
+  } else if (diffInMonths < 12) {
+    return `${diffInMonths}mo`;
+  } else {
+    return `${diffInYears}y`;
+  }
+};
+
+export const formatChatMessageTime = (dateString) => {
+  if (!dateString) return "";
+  const date = new Date(dateString);
+  const langCode = store
+    .getState()
+    ?.CurrentLanguage?.language?.code?.toLowerCase();
+  const locale = languageLocaleMap?.[langCode] || "en-US";
+  return date.toLocaleTimeString(locale, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  });
+};
+
+export const formatDateMonthYear = (dateString) => {
+  if (!dateString) return "";
+
+  const langCode = store
+    .getState()
+    ?.CurrentLanguage?.language?.code?.toLowerCase();
+  const locale = languageLocaleMap?.[langCode] || "en-US";
+  return new Date(dateString).toLocaleDateString(locale, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+};
+
+export const formatMessageDate = (dateString) => {
+  const messageDate = new Date(dateString);
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  if (messageDate.toDateString() === today.toDateString()) {
+    return t("today");
+  } else if (messageDate.toDateString() === yesterday.toDateString()) {
+    return t("yesterday");
+  } else {
+    return formatDateMonthYear(dateString);
+  }
+};
+
+export const getYouTubeVideoId = (url) => {
+  const regExp =
+    /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
+  const match = url?.match(regExp);
+  if (match) {
+    return match && match[2].length === 11 ? match[2] : null;
+  } else {
+    return false;
+  }
+};
+
+export const validateExtraDetails = ({
+  languages,
+  defaultLangId,
+  extraDetails,
+  customFields,
+  filePreviews,
+}) => {
+  for (const lang of languages) {
+    const current = extraDetails?.[lang.id] || {};
+    const previews = filePreviews?.[lang.id] || {};
+    const isDefaultLang = lang.id === defaultLangId;
+    const langLabel = isDefaultLang ? "" : `${lang.name}: `;
+
+    for (const field of customFields) {
+      const { id, name, type, required, is_required, min_length } = field;
+
+      const requiredValue = required ?? is_required ?? 0;
+
+      // Skip non-textbox fields in non-default languages
+      if (!isDefaultLang && type !== "textbox") continue;
+
+      const value = current[id];
+
+      const isValueEmpty =
+        value === undefined ||
+        value === null ||
+        value === "" ||
+        (Array.isArray(value) && value.length === 0);
+
+      const isRequired = isDefaultLang && requiredValue === 1;
+      const shouldValidate = isRequired || (!isValueEmpty && !isDefaultLang);
+
+      if (!shouldValidate) continue;
+
+      const showError = (msg) => {
+        toast.error(`${langLabel}${msg}`);
+      };
+
+      // === Required Validation
+      const isMissing =
+        (["textbox", "number", "radio", "dropdown"].includes(type) &&
+          isValueEmpty) ||
+        (type === "checkbox" &&
+          (!Array.isArray(value) || value.length === 0)) ||
+        (type === "fileinput" && !value && !previews[id]);
+
+      if (isRequired && isMissing) {
+        const key = ["checkbox", "radio"].includes(type)
+          ? t("selectAtleastOne")
+          : t("fillDetails");
+        showError(`${key} ${name}.`);
+        return false;
+      }
+
+      // === Min Length Validation
+      if (value && min_length && ["textbox", "number"].includes(type)) {
+        const valStr = String(type === "textbox" ? value.trim() : value);
+        if (valStr.length < min_length) {
+          const lengthError =
+            type === "number"
+              ? `${t("mustBeAtleast")} ${min_length} ${t("digitLong")}`
+              : `${t("mustBeAtleast")} ${min_length} ${t("charactersLong")}`;
+          showError(`${name} ${lengthError}`);
+          return false;
+        }
+      }
+    }
+  }
+
+  return true;
+};
+
+const urlToFile = async (url, filename) => {
+  const response = await fetch(url);
+  const blob = await response.blob();
+  return new File([blob], filename, { type: blob.type });
+};
+
+export const prefillExtraDetails = ({
+  data,
+  languages,
+  defaultLangId,
+  extraFieldValue,
+  setFilePreviews,
+}) => {
+  const tempExtraDetails = {};
+
+  languages.forEach((lang) => {
+    const isDefault = lang.id === defaultLangId;
+    const perLang = {};
+    data.forEach(async (field) => {
+      const fieldId = field.id;
+
+      if (!isDefault && field.type !== "textbox") return;
+
+      const extraField = extraFieldValue.find(
+        (item) => item.language_id === lang.id && item.id === fieldId
+      );
+      const fieldValue = extraField?.value || null;
+
+      switch (field.type) {
+        case "checkbox":
+          perLang[fieldId] = fieldValue || [];
+          break;
+
+        case "radio":
+          perLang[fieldId] = fieldValue ? fieldValue[0] : "";
+          break;
+
+        case "fileinput":
+          if (isDefault && fieldValue?.length) {
+            const fileUrl = fieldValue[0];
+
+            // update preview immediately
+            setFilePreviews?.((prev) => ({
+              ...prev,
+              [fieldId]: {
+                url: fileUrl,
+                isPdf: isPdf(fileUrl),
+              },
+            }));
+
+            // convert URL → File (binary) for payload
+            const file = await urlToFile(fileUrl, `prefilled-${fieldId}`);
+            perLang[fieldId] = file;
+          } else {
+            perLang[fieldId] = "";
+          }
+          break;
+
+        default:
+          perLang[fieldId] = fieldValue ? fieldValue[0] : "";
+      }
+    });
+
+    tempExtraDetails[lang.id] = perLang;
+  });
+
+  return tempExtraDetails;
+};
+
+export const prefillVerificationDetails = ({
+  data,
+  languages,
+  defaultLangId,
+  extraFieldValue,
+  setFilePreviews,
+}) => {
+  const tempExtraDetails = {};
+
+  languages.forEach((lang) => {
+    const isDefault = lang.id === defaultLangId;
+    const perLang = {};
+    data.forEach((field) => {
+      const fieldId = field.id;
+
+      if (!isDefault && field.type !== "textbox") return;
+
+      const extraField = extraFieldValue.find(
+        (item) => item.language_id === lang.id && item.id === fieldId
+      );
+      const fieldValue = extraField?.value || null;
+      switch (field.type) {
+        case "checkbox":
+          perLang[fieldId] = fieldValue || [];
+          break;
+
+        case "radio":
+          perLang[fieldId] = fieldValue ? fieldValue[0] : "";
+          break;
+
+        case "fileinput":
+          if (isDefault && fieldValue?.length) {
+            setFilePreviews?.((prev) => ({
+              ...prev,
+              [fieldId]: {
+                url: fieldValue[0],
+                isPdf: isPdf(fieldValue[0]),
+              },
+            }));
+          }
+          perLang[fieldId] = "";
+          break;
+
+        default:
+          perLang[fieldId] = fieldValue ? fieldValue[0] : "";
+      }
+    });
+
+    tempExtraDetails[lang.id] = perLang;
+  });
+
+  return tempExtraDetails;
+};
+
+export const getMainDetailsTranslations = (
+  listingData,
+  languages,
+  defaultLangId,
+  currencies = []
+) => {
+  const translations = {};
+
+  // Fill translations for all languages
+  languages.forEach((lang) => {
+    const isDefault = lang.id === defaultLangId;
+
+    if (isDefault) {
+      const region = listingData?.region_code?.toUpperCase() || ""; // react-phone-number-input expects uppercase region code
+      const countryCodeFromRegion = region ? getCountryCallingCode(region) : "";
+
+      // Default language gets full data
+      translations[lang.id] = {
+        name: listingData?.name || "",
+        description: listingData?.description || "",
+        price: listingData?.price || "",
+        contact: listingData?.contact || "",
+        video_link: listingData?.video_link || "",
+        slug: listingData?.slug || "",
+        min_salary: listingData?.min_salary || "",
+        max_salary: listingData?.max_salary || "",
+        region_code: listingData?.region_code?.toLowerCase() || "",
+        country_code: countryCodeFromRegion,
+        ...(listingData?.currency_id && { currency_id: listingData?.currency_id }),
+      };
+
+      // Preselect first currency if currencies are available but currency_id is not set
+      // This handles the case when no currency was selected at ad listing
+      if (
+        !listingData?.currency_id &&
+        currencies?.length > 0 &&
+        !translations[lang.id].currency_id
+      ) {
+        // Find first currency (or selected one if available)
+        const defaultCurrency =
+          currencies.find((curr) => curr.selected == 1) || currencies[0];
+
+        if (defaultCurrency) {
+          translations[lang.id].currency_id = defaultCurrency?.id;
+        }
+      }
+
+
+    } else {
+      // Other languages: get translation if available
+      const translated = listingData?.translations?.find(
+        (tr) => tr.language_id === lang.id
+      );
+
+      translations[lang.id] = {
+        name: translated?.name || "",
+        description: translated?.description || "",
+      };
+    }
+  });
+
+  return translations;
+};
+
+export const filterNonDefaultTranslations = (translations, defaultLangId) => {
+  const result = {};
+
+  for (const langId in translations) {
+    if (Number(langId) === Number(defaultLangId)) continue;
+
+    const fields = translations[langId];
+    const filteredFields = {};
+
+    for (const key in fields) {
+      const value = fields[key];
+      if (
+        value !== undefined &&
+        value !== null &&
+        typeof value === "string" &&
+        value.trim() !== ""
+      ) {
+        filteredFields[key] = value.trim();
+      }
+    }
+
+    if (Object.keys(filteredFields).length > 0) {
+      result[langId] = filteredFields;
+    }
+  }
+
+  return JSON.stringify(result);
+};
+
+export const prepareCustomFieldTranslations = (extraDetails = {}) => {
+  const result = {};
+
+  for (const langId in extraDetails) {
+    const fields = extraDetails[langId];
+    const cleanedFields = {};
+
+    for (const fieldId in fields) {
+      const value = fields[fieldId];
+
+      if (
+        Array.isArray(value) &&
+        value.length > 0 &&
+        !(value[0] instanceof File)
+      ) {
+        cleanedFields[fieldId] = value;
+      } else if (
+        value !== undefined &&
+        value !== null &&
+        value !== "" &&
+        !(value instanceof File)
+      ) {
+        cleanedFields[fieldId] = [String(value)];
+      }
+    }
+
+    if (Object.keys(cleanedFields).length > 0) {
+      result[langId] = cleanedFields;
+    }
+  }
+
+  return JSON.stringify(result);
+};
+
+export const prepareCustomFieldFiles = (extraDetails, defaultLangId) => {
+  const customFieldFiles = [];
+  const defaultLangFields = extraDetails?.[defaultLangId] || {};
+
+  Object.entries(defaultLangFields).forEach(([fieldId, value]) => {
+    if (value instanceof File) {
+      customFieldFiles.push({ key: fieldId, files: [value] });
+    } else if (Array.isArray(value) && value[0] instanceof File) {
+      customFieldFiles.push({ key: fieldId, files: value });
+    }
+  });
+
+  return customFieldFiles;
+};
+
+export const handleKeyDown = (e, maxLength) => {
+  if (maxLength === null || maxLength === undefined) {
+    return;
+  }
+  const value = e.target.value;
+  // Allow control keys (Backspace, Delete, Arrow keys, etc.)
+  const controlKeys = [
+    "Backspace",
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowDown",
+    "Delete",
+    "Tab",
+  ];
+
+  if (value.length >= maxLength && !controlKeys.includes(e.key)) {
+    e.preventDefault();
+  }
+};
+
+export const inpNum = (e) => {
+  e = e || window.event;
+  var charCode = typeof e.which == "undefined" ? e.keyCode : e.which;
+  var charStr = String.fromCharCode(charCode);
+  if (!charStr.match(/^[0-9]+$/)) {
+    e.preventDefault();
+  }
+};
+
+export const getFilteredCustomFields = (
+  allTranslatedFields,
+  currentLanguageId
+) => {
+  const fields = Array.isArray(allTranslatedFields) ? allTranslatedFields : [];
+  const fieldMap = new Map();
+
+  for (const field of fields) {
+    const id = field.id;
+    const val =
+      field.type === "fileinput"
+        ? field.value
+        : field.translated_selected_values;
+
+    const isEmpty =
+      val === null ||
+      val === "" ||
+      (Array.isArray(val) &&
+        (val.length === 0 ||
+          (val.length === 1 && (val[0] === "" || val[0] === null))));
+
+    if (isEmpty) continue;
+
+    // Prefer current language or store the first available
+    if (!fieldMap.has(id) || field.language_id === currentLanguageId) {
+      fieldMap.set(id, field);
+    }
+  }
+
+  return Array.from(fieldMap.values());
+};
+
+export const getDefaultCountryCode = () => {
+  try {
+    const defaultCountry =
+      process.env.NEXT_PUBLIC_DEFAULT_COUNTRY?.toUpperCase();
+    if (defaultCountry) {
+      return getCountryCallingCode(defaultCountry);
+    }
+  } catch (error) {
+    console.log("Error getting country calling code:", error);
+  }
+  return "91"; // Fallback to "91" if env var is not set or invalid
+};
+
+export const formatPhoneNumber = (number = "", countryCode = "") => {
+  if (!number || !countryCode) return number;
+
+  // Remove non-digit characters from country code
+  const countryCodeDigitsOnly = countryCode.replace(/\D/g, "");
+
+  // Remove non-digit characters from number (optional but safer)
+  const digitsOnlyNumber = number.replace(/\D/g, "");
+
+  // Check if number starts with country code
+  if (digitsOnlyNumber.startsWith(countryCodeDigitsOnly)) {
+    return digitsOnlyNumber.substring(countryCodeDigitsOnly.length);
+  }
+
+  return digitsOnlyNumber;
+};
+
+
+export const seoData = ({
+  title,
+  description,
+  keywords,
+  image,
+  canonicalUrl,
+}) => {
+  const getMeta = (selector, attrs) => {
+    let tag = document.querySelector(selector);
+    if (!tag) {
+      tag = document.createElement("meta");
+      Object.keys(attrs).forEach((key) => (tag[key] = attrs[key]));
+      document.head.appendChild(tag);
+    }
+    return tag;
+  };
+
+  // Title
+  if (title) {
+    document.title = title;
+
+    getMeta('meta[property="og:title"]', { property: "og:title" }).setAttribute(
+      "content",
+      title
+    );
+
+    getMeta('meta[name="twitter:title"]', {
+      name: "twitter:title",
+    }).setAttribute("content", title);
+  }
+
+  // Description
+  if (description) {
+    getMeta('meta[name="description"]', { name: "description" }).setAttribute(
+      "content",
+      description
+    );
+
+    getMeta('meta[property="og:description"]', {
+      property: "og:description",
+    }).setAttribute("content", description);
+
+    getMeta('meta[name="twitter:description"]', {
+      name: "twitter:description",
+    }).setAttribute("content", description);
+  }
+
+  // Keywords
+  if (keywords) {
+    getMeta('meta[name="keywords"]', { name: "keywords" }).setAttribute(
+      "content",
+      keywords
+    );
+  }
+
+  // Image
+  if (image) {
+    getMeta('meta[property="og:image"]', { property: "og:image" }).setAttribute(
+      "content",
+      image
+    );
+
+    getMeta('meta[name="twitter:image"]', {
+      name: "twitter:image",
+    }).setAttribute("content", image);
+  }
+
+  if (canonicalUrl) {
+    let canonical = document.querySelector('link[rel="canonical"]');
+    if (!canonical) {
+      canonical = document.createElement("link");
+      canonical.rel = "canonical";
+      document.head.appendChild(canonical);
+    }
+    canonical.href = canonicalUrl;
+  }
+};
\ No newline at end of file
diff --git a/utils/locale/en.json b/utils/locale/en.json
new file mode 100644
index 0000000..82cd8d7
--- /dev/null
+++ b/utils/locale/en.json
@@ -0,0 +1,742 @@
+{
+  "searchAd": "Search any advertisement",
+  "login": "Login",
+  "register": "Register",
+  "loginTo": "Login to",
+  "newto": "New to",
+  "createAccount": "Create an account.",
+  "emailOrPhoneNumber": "Email or phone number",
+  "mobileNumber": "Mobile number",
+  "loginWithEmail": "Login with Email",
+  "enterEmailPhone": "Enter your email or phone number",
+  "continue": "Continue",
+  "orSignInWith": "or sign in with",
+  "continueWithGoogle": "Continue with Google",
+  "continueWithEmail": "Continue with Email",
+  "continueWithMobile": "Continue with Mobile",
+  "agreeSignIn": "By signing in to your account you agree to",
+  "termsService": "Terms of Service",
+  "and": "and",
+  "privacyPolicy": "Privacy Policy",
+  "welcomeTo": "Welcome to",
+  "haveAccount": "Have an account?",
+  "logIn": "Log in.",
+  "username": "Username",
+  "typeUsername": "Type username",
+  "email": "Email",
+  "typeEmail": "Type email",
+  "phone": "Phone",
+  "password": "Password",
+  "typePassword": "Type Password",
+  "verifyEmail": "Verify email address",
+  "orSignUpWith": "or sign up with",
+  "agreeCreateAccount": "By creating an account you agree to",
+  "adListing": "Ad Listing",
+  "editListing": "Edit Listing",
+  "viewAll": "View all",
+  "all": "All",
+  "quickLinks": "Quick Links",
+  "aboutUs": "About Us",
+  "contactUs": "Contact Us",
+  "ourBlog": "Our Blog",
+  "termsConditions": "Terms & Conditions",
+  "getInTouch": "Get in touch",
+  "home": "Home",
+  "whyChooseUs": "Why Choose Us",
+  "faqs": "FAQs",
+  "blog": "Blog",
+  "buySell": "Buy and Sell",
+  "anythingYouWant": "anything you want",
+  "selectLocation": "Select Location",
+  "select": "Select",
+  "locateMe": "Locate me",
+  "search": "Search",
+  "skip": "Skip",
+  "discoverEndlessPossibilitiesAt": "Discover endless possibilities at",
+  "goToMarketplace": "your go-to marketplace for buying and selling anything. Join our vibrant community and start your journey today!",
+  "how": "How",
+  "getsYouResults": "Gets You Results?",
+  "unravelingThe": "Unraveling the",
+  "workProcess": "Work Process",
+  "listingMadeEasy": "Listing Made Easy",
+  "instantReach": "Instant Reach",
+  "effortlessConnection": "Effortless connection",
+  "enjoyBenefits": "Enjoy the benefits",
+  "createAds": "Create compelling ads in minutes with intuitive steps, detailed descriptions, & eye-catching photos.",
+  "connectVastAudience": "Connect with a vast audience of potential buyers through targeted search options and powerful filters.",
+  "interactSecureMessaging": "Interact directly with interested parties through secure messaging within the platform.",
+  "reapRewards": "Reap the rewards of selling without the hassle of yard sales or consignment shops.",
+  "goProSellFaster": "Go Pro, Sell Faster",
+  "upgradeSubscription": "Upgrade your experience with a subscription",
+  "off": "Off",
+  "adsListing": "Ads Listing",
+  "choosePlan": "Choose Plan",
+  "craftEpic": "Craft Your Epic",
+  "classifiedsPosting": "Classifieds Posting",
+  "createAdd": "Create Add",
+  "ourBlogs": "Our Blogs",
+  "masteringMarketplace": "Mastering the Marketplace",
+  "withOurBlog": "with Our Blog",
+  "readArticle": "Read Article",
+  "navigating": "Navigating",
+  "quickAnswers": "Quick Answers to Your Queries",
+  "loadMore": "Load More",
+  "selectedCategory": "Selected Category",
+  "details": "Details",
+  "extraDetails": "Extra Details",
+  "images": "Images",
+  "location": "Location",
+  "selected": "Selected",
+  "allCategory": "All Category",
+  "back": "Back",
+  "next": "Next",
+  "title": "Title",
+  "enterTitle": "Enter title",
+  "enterSlug": "Enter slug",
+  "description": "Description",
+  "enterDescription": "Enter description",
+  "price": "Price",
+  "phoneNumber": "Phone Number",
+  "enterPhoneNumber": "Enter phone number",
+  "enterAdditionalLinks": "Enter additional link",
+  "mainPicture": "Main picture",
+  "maxOtherImages": "Max 12 Images",
+  "or": "or",
+  "upload": "Upload",
+  "otherPicture": "Other picture",
+  "adPostedSuccess": "Ad Successfully Posted",
+  "adEditedSuccess": "Ad Successfully Edited",
+  "viewAd": "View Ad",
+  "backToHome": "Back to home",
+  "myAds": "My Ads",
+  "sortBy": "Sort by",
+  "newestToOldest": "Newest to Oldest",
+  "oldestToNewest": "Oldest to Newest",
+  "priceHighToLow": "Price Highest to Lowest",
+  "priceLowToHigh": "Price Lowest to Highest",
+  "areYouSure": "Are you sure?",
+  "yes": "Yes",
+  "signOutSuccess": "Sign out Successfully",
+  "signOutCancelled": "Sign out Cancelled",
+  "editProfile": "Edit Profile",
+  "notifications": "Notifications",
+  "chat": "Chat",
+  "subscription": "Subscription",
+  "userSubscription": "User Subscription",
+  "ads": "Ads",
+  "transaction": "Transaction",
+  "signOut": "Sign out",
+  "deleteAccount": "Delete Account",
+  "featured": "Featured",
+  "deactivate": "Deactivate",
+  "enterValidBudget": "Please enter valid budget range",
+  "filters": "Filters",
+  "apply": "Apply",
+  "allTime": "All time",
+  "today": "Today",
+  "yesterday": "Yesterday",
+  "within1Week": "Within 1 week",
+  "within2Weeks": "Within 2 weeks",
+  "within1Month": "Within 1 month",
+  "within3Months": "Within 3 months",
+  "multipleCategories": "Categories",
+  "budget": "Budget",
+  "datePosted": "Date Posted",
+  "from": "From",
+  "to": "To",
+  "noDataFound": "No Data Found",
+  "noSellerFound": "No Seller Found",
+  "noAdsFound": "No Ads Found",
+  "noChatFound": "No Chat Data Found",
+  "noReviewsFound": "No Reviews Found",
+  "startConversation": "Start Conversation",
+  "somthingWentWrong": "Somthing Went Wrong",
+  "tryLater": "Try Later",
+  "sorryTryAnotherWay": "We're sorry what you were looking for. please try another way",
+  "noAdsAvailable": "There are currently no ads available. Start by creating your first ad now!",
+  "clearAll": "Clear All",
+  "buying": "Buying",
+  "selling": "Selling",
+  "typeMessageHere": "Type Message Here",
+  "sendMessage": "Send us a Message",
+  "contactIntro": "Get in touch with us! Whether you have questions, feedback, or just want to say hello, our contact page is the gateway to reaching our team.",
+  "name": "Name",
+  "enterName": "Enter your name",
+  "enterEmail": "Enter your email",
+  "subject": "Subject",
+  "enterSubject": "Enter your subject",
+  "message": "Message",
+  "enterMessage": "Enter your message",
+  "submit": "Submit",
+  "contactInfo": "Contact information",
+  "socialMedia": "Social Media",
+  "myFavorites": "My Favorites",
+  "listedOn": "Listed on",
+  "views": "Views",
+  "favorites": "Favorites",
+  "edit": "Edit",
+  "changeStatus": "Change Status",
+  "renewAd": "Renew Ad",
+  "renew": "Renew",
+  "active": "Active",
+  "save": "Save",
+  "postedIn": "Posted in",
+  "showOnMap": "View on Google Map",
+  "featureAdPrompt": "Don't wait! Feature your ad today and watch your product sell faster!",
+  "createFeaturedAd": "Create Featured Ad",
+  "highlights": "Highlights",
+  "notification": "Notification",
+  "date": "Date",
+  "tags": "Tags",
+  "popularPosts": "Popular Posts",
+  "postedOn": "Posted on",
+  "shareThis": "Share this",
+  "relatedArticle": "Related Articles",
+  "seeLess": "See Less",
+  "seeMore": "See More",
+  "adId": "Ad id",
+  "memberSince": "Member Since",
+  "makeOffer": "Make an offer",
+  "startChat": "Start Chat",
+  "startingChat": "Starting Chat",
+  "makeAn": "Make an",
+  "safety": "Safety",
+  "jobTitle": "Job Title",
+  "recruiter": "Recruiter",
+  "appliedDate": "Applied Date",
+  "download": "Download",
+  "reviewed": "Reviewed",
+  "shortlisted": "Shortlisted",
+  "accepted": "Accepted",
+  "tips": "Tips",
+  "offer": "Offer",
+  "openToOffers": "Open to offers! Let's chat!",
+  "sellerPrice": "Seller Price",
+  "yourOffer": "Your Offer",
+  "typeOfferPrice": "Type Offer Price",
+  "sendOffer": "Send Offer",
+  "myProfile": "My Profile",
+  "personalInfo": "Personal Info",
+  "address": "Address",
+  "saveChanges": "Save Changes",
+  "adListingPlan": "Ad Listing Plan",
+  "featuredAdPlan": "Featured Ad Plan",
+  "myTransaction": "My Transaction",
+  "id": "ID",
+  "paymentMethod": "Payment Method",
+  "transactionId": "Transaction Id",
+  "status": "Status",
+  "reportUser": "Report User",
+  "shareProfile": "Share Profile",
+  "followers": "Followers",
+  "following": "Following",
+  "follow": "Follow",
+  "addLocation": "Add Location",
+  "editLocation": "Edit Location",
+  "report": "Report",
+  "reportReview": "Report Review",
+  "cancel": "Cancel",
+  "allCategories": "All Categories",
+  "category": "Categories",
+  "checkEmail": "Check Your Email",
+  "verifyAccount": "Click the link in your email to verify your account.",
+  "youveGotMail": "You’ve got mail!",
+  "emailInUse": "Email already in use.",
+  "invalidEmail": "Invalid email address.",
+  "weakPassword": "Password is too weak.",
+  "userAccountDisabled": "User account has been disabled",
+  "tooManyRequests": "Too many requests, try again later",
+  "operationNotAllowed": "Operation not allowed",
+  "internalError": "Internal error occurred",
+  "incorrectDetails": "The details entered are incorrect Please enter the correct details and try again.",
+  "errorOccurred": "An error occurred.",
+  "titleRequired": "Title is required",
+  "descriptionRequired": "Description field is required",
+  "priceRequired": "Price is required",
+  "usernameRequired": "Username is required",
+  "emailRequired": "Email is required",
+  "emailInvalid": "Email address is invalid",
+  "nameRequired": "Name is required",
+  "subjectRequired": "Subject is required",
+  "messageRequired": "Message is required",
+  "phoneRequired": "Phone number is required",
+  "phoneInvalid": "Phone number is invalid",
+  "passwordRequired": "Password is required",
+  "passwordTooShort": "Password must be 6 characters or more",
+  "userNotFound": "user not found",
+  "verifyEmailFirst": "Please first verify your email address!!!",
+  "otpmissing": "Please Enter OTP",
+  "quotaExceeded": "Quota exceeded. Please try again later.",
+  "invalidPhoneNumber": "Invalid phone number",
+  "enterOtp": "Enter OTP",
+  "verify": "Verify",
+  "otp": "OTP",
+  "change": "Change",
+  "sentTo": "Sent to",
+  "verifyOtp": "Verify OTP",
+  "signIn": "Sign in",
+  "enterPassword": "Enter your password",
+  "signInWithEmail": "Sign in with Email",
+  "signUpWithEmail": "Sign up with Email",
+  "paymentWith": "Payment with",
+  "stripe": "Stripe",
+  "razorPay": "Razor pay",
+  "payStack": "Pay Stack",
+  "phonepe": "PhonePe",
+  "paypal": "PayPal",
+  "flutterwave": "FlutterWave",
+  "dropFiles": "Drop the files here...",
+  "dragFiles": "Drag & Drop your files",
+  "paymentSuccess": "Payment Successful!",
+  "paymentMClose": "Payment modal closed",
+  "userDeleteSuccess": "User Deleted Successfully",
+  "deletePop": "Please Login again for delete your account",
+  "offerPriceError": "Offer price must be less than or equal to the seller's price.",
+  "offerPricePositiveError": "Offer price must be greater than 0.",
+  "offerSendError": "There was an error sending your offer. Please try again.",
+  "postNow": "Post Now",
+  "videoLink": "Video link",
+  "other": "Other",
+  "reason": "Reason",
+  "writereason": "Write your reason here",
+  "Free": "Free",
+  "review": "Under Review",
+  "live": "Live",
+  "rejected": "Rejected",
+  "soldOut": "Sold Out",
+  "experienceTheMagic": "Experience the Magic of the",
+  "app": "App",
+  "loginToAddOrRemove": "Login to Add or Remove from Favorites",
+  "loginToMakeOffer": "Login to Make an Offer",
+  "loginToStartChat": "Login to start chat",
+  "days": "Days",
+  "allowedFileType": "Allowed file types: PNG,JPG,JPEG,SVG,PDF",
+  "relatedAds": "Related Ads",
+  "wrongFile": "File may exceed expected size or image format is wrong",
+  "youhaveblocked": "You blocked this contact. Tap to",
+  "block": "Block",
+  "unblock": "Unblock",
+  "thisAd": "This Advertisement is",
+  "nousers": "No users blocked",
+  "logoutConfirmation": "Are you sure you want to logout ?",
+  "userDeactivatedByAdmin": "User is deactivated by administrator. Please contact your administrator",
+  "otpSentSuccess": "OTP sent successfully",
+  "invalidPhoneNumberOrEmail": "Please enter a valid phone number or Email id",
+  "resetPassword": "Check your email to reset your password.",
+  "errorHandlingNotif": "Error handling notification.",
+  "locationNotGranted": "Location permission not granted.",
+  "geoLocationNotSupported": "Geolocation is not supported by this browser.",
+  "loginFirst": "Please Login first",
+  "loginToAccess": "Please log in to access this page.",
+  "featuredAdCreated": "Featured ad created successfully",
+  "selectCategory": "Please select a category",
+  "completeDetails": "Please complete the required details.",
+  "enterValidPrice": "Please enter a valid price.",
+  "fillDetails": "Please fill the details for",
+  "selectAtleastOne": "Please select at least one value for",
+  "enterValidUrl": "Please enter a valid URL for the link.",
+  "uploadMainPicture": "Please upload the main picture",
+  "selectCountry": "Please select a country",
+  "countrySelect": "Select a country",
+  "selectState": "Please select a state",
+  "selectCity": "Please select a city",
+  "selectArea": "Please select an area",
+  "enterAddress": "Please enter your address",
+  "locationSetFailed": "Setting your location failed.",
+  "pleaseSelectLocation": "Please select your location",
+  "selectValidImage": "Please select a valid image file (JPG, PNG, or JPEG)",
+  "emptyFieldNotAllowed": "Empty fields are not allowed for edit profile",
+  "adDeleted": "Ad Deleted Successfully",
+  "changeStatusToSave": "Please change the status to save",
+  "statusUpdated": "Status Updated Successfully",
+  "advertisementUnderReview": "Your advertisement is now under review.",
+  "errorProcessingPayment": "An error occurred while processing the payment.",
+  "paymentSuccessfull": "Payment successful!",
+  "paymentCancelled": "Payment cancelled.",
+  "paymentFailed": "Payment failed. Please try again.",
+  "permissionRequired": "Permission is required to receive notifications.",
+  "invalidPassword": "Invalid password",
+  "enter": "Enter",
+  "max": "Max 3MB",
+  "manually": "Manually",
+  "map": "Map",
+  "locationIsSet": "Your location has been successfully set. You may now proceed to post.",
+  "stateSelect": "Select a state",
+  "citySelect": "Select a city",
+  "areaSelect": "Select an area",
+  "country": "Country",
+  "state": "State",
+  "city": "City",
+  "connectMircophone": "Please connect a microphone to record audio messages.",
+  "noMicrophone": "No Microphone Found",
+  "ok": "OK",
+  "permissionDenied": "Microphone Permission Denied",
+  "allowAccess": "Please allow microphone access to record audio messages. Go to your browser settings to enable the microphone permission.",
+  "error": "Error",
+  "errorAccessingMicrophone": "An error occurred while accessing the microphone. Please try again later.",
+  "browserDoesNotSupportAudio": "Your browser does not support the audio element.",
+  "uploadedImage": "Uploaded Image",
+  "loading": "Loading...",
+  "adsAndTransactionWillBeDeleted": "Your ads and transactions history will be deleted",
+  "accountsDetailsWillNotRecovered": "Accounts details can't be recovered",
+  "subWillBeCancelled": "Subscriptions will be cancelled",
+  "savedMesgWillBeLost": "Saved preferences and messages will be lost",
+  "youWantToCreateFeaturedAd": "Are you sure to create this advertisement as a featured ad ?",
+  "noPackage": "No Package Available",
+  "pleaseSubscribes": "Please Subscribe to any packages to use this functionality",
+  "subscribe": "Subscribe",
+  "pay": "Pay",
+  "payWithStripe": "Payment with Stripe",
+  "forgtPassword": "Forgot Password ?",
+  "categorySelect": "Select a category",
+  "popularCategories": "Popular Categories",
+  "pleaseSelectCity": "Please select location",
+  "pleaseSelectArea": "Please select an Area",
+  "InvalidLatOrLng": "Invalid Latitude or Longitude",
+  "currentLocation": "Current Location",
+  "thankForContacting": "Thank you for contacting us! We’ll be in touch soon.",
+  "products": "Products",
+  "resendOtp": "Resend OTP",
+  "totalAds": "Total Ads",
+  "purchasePlan": "You need to purchase a plan to create an ad. Please visit our Plans & Pricing page.",
+  "failedToLike": "Failed to like",
+  "delete": "Delete",
+  "copyright": "Copyright",
+  "allRightsReserved": "All Rights Reserved",
+  "seeAllIn": "See all in",
+  "notAllowedFile": "Only JPG, JPEG, SVG, PNG, and PDF files are supported",
+  "viewPdf": "View PDF",
+  "slug": "Slug",
+  "daysAgo": "days ago",
+  "month": "month",
+  "months": "months",
+  "s": "s",
+  "ago": "ago",
+  "year": "year",
+  "years": "years",
+  "mustBeAtleast": "must be atleast",
+  "charactersLong": "characters long",
+  "digitLong": "digit long",
+  "allowedSlug": "Lowercase english letters, numbers and dashes allowed",
+  "nearByRange": "Nearby Range",
+  "applyRange": "Apply Range",
+  "range": "KM Range",
+  "extradetails": "Extra Details",
+  "km": "KM",
+  "seller_info": "Seller Information",
+  "verified": "VERIFIED",
+  "verifyLabel": "Your account is successfully verified!",
+  "ratings": "Ratings",
+  "issueWithSeller": "Have an issue with a seller?",
+  "reportSeller": "Report Seller",
+  "reportAd": "Report this ad",
+  "liveAds": "Live Ads",
+  "reviews": "Reviews",
+  "whoMadePurchase": "Who made the purchase?",
+  "selectBuyerFromList": "Select buyer from the list. If the buyer is not listed, choose \"None of the above\".",
+  "noneOfAbove": "None of above",
+  "reportItmLabel": "Did you find any problem with this advertisement?",
+  "confirmSoldOut": "Confirm sold out",
+  "cantUndoChanges": "After marking this ad as a sold out, you can't undo or change its status.",
+  "confirm": "Confirm",
+  "adminOnlyOperation": "Admin Only Operation",
+  "alreadyInitialized": "Already Initialized",
+  "appNotAuthorized": "App Not Authorized",
+  "appNotInstalled": "App Not Installed",
+  "argumentError": "Argument Error",
+  "captchaCheckFailed": "Captcha Check Failed",
+  "codeExpired": "Code Expired",
+  "cordovaNotReady": "Cordova Not Ready",
+  "corsUnsupported": "CORS Unsupported",
+  "credentialAlreadyInUse": "Credential Already In Use",
+  "customTokenMismatch": "Credential Mismatch",
+  "requiresRecentLogin": "Credential Too Old, Login Again",
+  "dependentSdkInitializedBeforeAuth": "Dependent SDK Initialized Before Auth",
+  "dynamicLinkNotActivated": "Dynamic Link Not Activated",
+  "emailChangeNeedsVerification": "Email Change Needs Verification",
+  "emulatorConfigFailed": "Emulator Config Failed",
+  "expiredActionCode": "Expired OOB Code",
+  "cancelledPopupRequest": "Expired Popup Request",
+  "invalidApiKey": "Invalid API Key",
+  "invalidAppCredential": "Invalid App Credential",
+  "invalidAppId": "Invalid App ID",
+  "invalidUserToken": "Invalid Auth",
+  "invalidAuthEvent": "Invalid Auth Event",
+  "invalidCertHash": "Invalid Cert Hash",
+  "invalidVerificationCode": "Invalid Code",
+  "invalidContinueUri": "Invalid Continue URI",
+  "invalidCordovaConfiguration": "Invalid Cordova Configuration",
+  "invalidCustomToken": "Invalid Custom Token",
+  "invalidDynamicLinkDomain": "Invalid Dynamic Link Domain",
+  "invalidEmulatorScheme": "Invalid Emulator Scheme",
+  "invalidMessagePayload": "Invalid Message Payload",
+  "invalidMultiFactorSession": "Invalid MFA Session",
+  "invalidOauthClientId": "Invalid OAuth Client ID",
+  "invalidOauthProvider": "Invalid OAuth Provider",
+  "invalidActionCode": "Invalid OOB Code",
+  "unauthorizedDomain": "Invalid Origin",
+  "invalidPersistenceType": "Invalid Persistence",
+  "invalidProviderId": "Invalid Provider ID",
+  "invalidRecaptchaAction": "Invalid Recaptcha Action",
+  "invalidRecaptchaToken": "Invalid Recaptcha Token",
+  "invalidRecaptchaVersion": "Invalid Recaptcha Version",
+  "invalidRecipientEmail": "Invalid Recipient Email",
+  "invalidReqType": "Invalid Req Type",
+  "invalidSender": "Invalid Sender",
+  "invalidVerificationId": "Invalid Session Info",
+  "invalidTenantId": "Invalid Tenant ID",
+  "multiFactorInfoNotFound": "MFA Info Not Found",
+  "multiFactorAuthRequired": "MFA Required",
+  "missingAndroidPkgName": "Missing Android Package Name",
+  "missingAppCredential": "Missing App Credential",
+  "authDomainConfigRequired": "Missing Auth Domain",
+  "missingClientType": "Missing Client Type",
+  "missingVerificationCode": "Missing Code",
+  "missingContinueUri": "Missing Continue URI",
+  "missingIframeStart": "Missing Iframe Start",
+  "missingIosBundleId": "Missing iOS Bundle ID",
+  "missingMultiFactorInfo": "Missing MFA Info",
+  "missingMultiFactorSession": "Missing MFA Session",
+  "missingOrInvalidNonce": "Missing or Invalid Nonce",
+  "missingPhoneNumber": "Missing Phone Number",
+  "missingRecaptchaToken": "Missing Recaptcha Token",
+  "missingRecaptchaVersion": "Missing Recaptcha Version",
+  "missingVerificationId": "Missing Session Info",
+  "appDeleted": "Module Destroyed",
+  "accountExistsWithDifferentCredential": "Need Confirmation",
+  "networkRequestFailed": "Network Request Failed",
+  "noAuthEvent": "No Auth Event",
+  "noSuchProvider": "No Such Provider",
+  "nullUser": "Null User",
+  "operationNotSupportedInThisEnvironment": "Operation Not Supported",
+  "popupBlocked": "Popup Blocked",
+  "popupClosedByUser": "Popup Closed By User",
+  "providerAlreadyLinked": "Provider Already Linked",
+  "recaptchaNotEnabled": "Recaptcha Not Enabled",
+  "redirectCancelledByUser": "Redirect Cancelled By User",
+  "redirectOperationPending": "Redirect Operation Pending",
+  "rejectedCredential": "Rejected Credential",
+  "secondFactorAlreadyInUse": "Second Factor Already Enrolled",
+  "maximumSecondFactorCountExceeded": "Second Factor Limit Exceeded",
+  "tenantIdMismatch": "Tenant ID Mismatch",
+  "timeout": "Timeout",
+  "userTokenExpired": "Token Expired",
+  "unauthorizedContinueUri": "Unauthorized Domain",
+  "unsupportedFirstFactor": "Unsupported First Factor",
+  "unsupportedPersistenceType": "Unsupported Persistence",
+  "unsupportedTenantOperation": "Unsupported Tenant Operation",
+  "unverifiedEmail": "Unverified Email",
+  "userCancelled": "User Cancelled",
+  "userMismatch": "User Mismatch",
+  "userSignedOut": "User Signed Out",
+  "webStorageUnsupported": "Web Storage Unsupported",
+  "rateSeller": "Rate Seller",
+  "rateYourExp": "Rate your experience",
+  "chatIsDisable": "This chat is disable",
+  "showContactInfo": "Show Contact Info",
+  "popular": "Popular",
+  "noBuyersFound": "No Buyers Found",
+  "failedToUpdateStatus": "Failed to update status",
+  "unableToStartChat": "Unable to start the chat",
+  "noConvWithSeller": "No Conversation with Seller Yet!",
+  "notInitiated": "You haven't initiated any chat with the seller. Feel free to make your offer for this product or start a direct chat with the seller!",
+  "offerLater": "Offer later",
+  "submitProposal": "Submit a proposal",
+  "writeReview": "Write a review...",
+  "provideRating": "Please provide a rating to submit your review.",
+  "provideReview": "Please write a review to submit.",
+  "getVerified": "Get Verified",
+  "applyToGetBadge": "Apply now to earn your verified badge and enhance your trustworthiness!",
+  "verfiyNow": "Get Verification Badge",
+  "userVerification": "User Verification",
+  "youAreVerified": "Verified",
+  "applyAgain": "Apply Again",
+  "pendingVerificationText": "Your verification request is under review. Please wait while we process your request. You will be notified once the verification is complete.",
+  "pending": "Pending",
+  "failedToSubmitReview": "Failed to submit review",
+  "addValidSlug": "Please provide a valid slug.",
+  "copyToClipboard": "Copied to clipboard",
+  "facebook": "Facebook",
+  "whatsapp": "Whatsapp",
+  "copyLink": "Copy Link",
+  "verificationAlreadySubmitted": "Your verification has already been submitted. Please wait for review.",
+  "verificationDoneAlready": "Your verification is already approved. No need to resubmit.",
+  "verificationAlreadyInReview": "Your verification is already in review.",
+  "inReview": "In Review",
+  "waitForConfirmation": "Your verification is under review. Please wait for confirmation.",
+  "noRatingsYet": "No ratings yet",
+  "now": "Now",
+  "imageLimitExceeded": "Image limit exceeded",
+  "youCanUpload": "You can only upload",
+  "moreImages": "more images.",
+  "myReviews": "Reviews",
+  "accessYourAccount": "Access your account securely and quickly",
+  "pleaseProvideReason": "Please provide a reason",
+  "no": "No",
+  "found": "Found",
+  "data": "Data",
+  "packages": "Packages",
+  "posting": "Posting...",
+  "allAdvertisements": "All Advertisements",
+  "viewIn": "View in",
+  "open": "Open",
+  "oops": "Oops...",
+  "youNeedToUpdateProfile": "You need to update your profile first to add advertisement!",
+  "youWantToDeleteThisAd": "You want to delete this Ad",
+  "loadPrevMesgs": "Load Previous Messages",
+  "call": "Call",
+  "expired": "Expired",
+  "purchasePackageFirst": "To continue, please purchase the chosen package first.",
+  "selectValidLocation": "Please select valid location",
+  "addEmail": "Email address is required. Please enter your email and try again.",
+  "confirmLogout": "Confirm Logout",
+  "areYouSureToLogout": "Are you sure you want to log out? You will need to log in again to access your account.",
+  "savingChanges": "Saving..",
+  "profile": "Profile",
+  "softRejected": "Soft Rejected",
+  "permanentRejected": "Permanent Rejected",
+  "rejectedReason": "Rejected Reason",
+  "resubmitted": "Resubmitted",
+  "advertisement": "Advertisements",
+  "reportReviewDescription": "Please provide a reason for reporting this review. This will help us review your report more effectively.",
+  "submitting": "Submitting...",
+  "somethingWentWrong": "Something went wrong. Please try again later.",
+  "completed": "Completed",
+  "failed": "Failed",
+  "underReview": "Under Review",
+  "whatLocAdYouSelling": "What is the location of the advertisement you are selling?",
+  "manuAddAddress": "Manually Add Location",
+  "allItems": "All Items",
+  "blockedUsers": "Blocked Users",
+  "noBlockedUsers": "No blocked users",
+  "blocking": "Blocking",
+  "unblocking": "Unblocking",
+  "loadPreviousMessages": "Previous Messages",
+  "microphoneAccessDenied": "Microphone access denied. Enable permissions.",
+  "noMicrophoneFound": "No microphone found. Connect a microphone and try again.",
+  "unexpectedError": "An unexpected error occurred. Please try again.",
+  "failedToStartRecording": "Failed to start recording. Try again.",
+  "writeAReview": "Write a review...",
+  "pleaseSelectRating": "Please select a rating",
+  "pleaseWriteReview": "Please write a review",
+  "adWasRejectedResubmitNow": "Your ad was rejected. Give it another shot by resubmitting it!",
+  "resubmit": "Resubmit",
+  "appIsNotInstalled": "app is not installed. Would you like to download it from the",
+  "appStore": "App Store",
+  "playStore": "Play Store",
+  "linkNotAvailable": "link not available",
+  "getTheBestExperienceByOpeningThisInOurMobileApp": "Get the best experience by opening this in our mobile app",
+  "openInApp": "Open in App",
+  "offerAmountRequired": "Offer amount is required",
+  "offerMustBeLessThanSellerPrice": "Offer must be less than seller price",
+  "offerSentSuccessfully": "Offer sent successfully",
+  "unableToSendOffer": "Unable to send offer",
+  "sending": "Sending...",
+  "noCategoryFound": "No category found.",
+  "searchACategory": "Search category...",
+  "selectCat": "Select category...",
+  "underMaintenance": "Our website is currently undergoing maintenance and will be temporarily unavailable.",
+  "updateProfile": "Update Profile",
+  "searchCountries": "Search countries...",
+  "searchStates": "Search states...",
+  "searchCities": "Search cities...",
+  "searchAreas": "Search areas...",
+  "noCountriesFound": "No countries found",
+  "noStatesFound": "No states found",
+  "noCitiesFound": "No cities found",
+  "noAreasFound": "No areas found",
+  "addressRequired": "Address is required",
+  "countryRequired": "Country is required",
+  "stateRequired": "State is required",
+  "cityRequired": "City is required",
+  "areaRequired": "Area is required",
+  "enterValidSalaryMin": "Please enter a valid minimum salary.",
+  "enterValidSalaryMax": "Please enter a valid maximum salary.",
+  "salaryMinCannotBeEqualMax": "Minimum salary cannot be equal to maximum salary.",
+  "salaryMinCannotBeGreaterThanMax": "Minimum salary cannot be greater than maximum salary.",
+  "salaryMin": "Minimum Salary",
+  "salaryMax": "Maximum Salary",
+  "applied": "Applied",
+  "applyNow": "Apply Now",
+  "dropResumeHere": "Drop your resume here",
+  "dragAndDropResume": "Drag and drop your resume here",
+  "clickToSelect": "or click to select",
+  "optional": "Optional",
+  "resume": "Resume",
+  "enterFullName": "Enter full name",
+  "remove": "Remove",
+  "adminEdited": "Admin Edited",
+  "jobApplications": "Job Applications",
+  "viewResume": "View Resume",
+  "notAvailable": "Not Available",
+  "jobApplicationsDescription": "You’ve received the following applications for this position.",
+  "allCountries": "All Countries",
+  "rangeLabel": "Range",
+  "area": "Area",
+  "useCurrentLocation": "Use Current Location",
+  "automaticallyDetectLocation": "Automatically detect your location",
+  "allIn": "All in",
+  "gettingLocation": "Getting location...",
+  "locationPermissionDenied": "Location permission denied",
+  "reset": "Reset",
+  "unlimited": "Unlimited",
+  "selectLanguage": "Select Language",
+  "chatAndNotificationNotSupported": "Chat and Notification features are not supported on this browser. For a better user experience, please use our mobile application. ",
+  "addYourAddress": "Add your address",
+  "locationSaved": "Location saved successfully",
+  "enterAddre": "Enter address",
+  "nearByKmRange": "Nearby (KM Range)",
+  "positionFilled": "Position Filled",
+  "recording": "Recording...",
+  "pageNotFound": "Page Not Found",
+  "noApplicantsFound": "No applicants found",
+  "whoWasHired": "Who was hired for this job?",
+  "selectHiredApplicant": "Select the hired applicant. If not listed, choose \"None of the above\".",
+  "jobClosed": "Job Closed",
+  "confirmHire": "Confirm Hire",
+  "markAsClosedDescription": "After marking this job as filled, you won’t be able to undo or change its status.",
+  "adEditedBy": "Ad Edited by",
+  "admin": "Admin",
+  "activePlan": "(Active Plan)",
+  "refundPolicy": "Refund Policy",
+  "noConversationsFound": "No chat found",
+  "noChatsAvailable": "It looks like there are no chats available.",
+  "bankTransfer": "Bank Transfer",
+  "oneAdvertisement": "Advertisement",
+  "bankAccountDetails": "Bank Account Details",
+  "pleaseTransferAmount": "Please transfer the amount to the following bank account",
+  "confirmPayment": "Confirm Payment",
+  "accountHolder": "Account Holder",
+  "accountNumber": "Account Number",
+  "bankName": "Bank Name",
+  "accept": "Accept",
+  "reject": "Reject",
+  "areYouSureToDeleteAds": "You want to delete ads? This action cannot be undone.",
+  "areYouSureToDeleteAd": "You want to delete this ad? This action cannot be undone.",
+  "selectPackage": "Select Package",
+  "pleaseSelectPackage": "Please select a package to proceed.",
+  "selectAll": "Select All",
+  "ad": "Ad",
+  "menu": "Menu",
+  "expiredAdsNote": "Note: Right-click on expired ads to renew or remove them.",
+  "uploadPaymentReceipt": "Upload Payment Receipt",
+  "uploadReceiptDescription": "Upload your payment receipt by dragging and dropping or clicking to select",
+  "dropYourReceiptHere": "Drop your receipt here",
+  "dragAndDropReceipt": "Drag & drop your receipt here",
+  "receiptUploaded": "Receipt uploaded! Admin will review it and activate your package if approved.",
+  "confirmingPayment": "Confirming Payment",
+  "uploadReceipt": " Upload Receipt",
+  "featuredSection": "Featured Section",
+  "resetYourPassword": "Reset Your Password",
+  "enterNewPassword": "Enter New Password",
+  "newPassword": "New Password",
+  "submitResetPassword": "Reset Password",
+  "otpVerified": "OTP Verified Successfully",
+  "currency": "Currency",
+  "failedToSendOtp": "Failed to send OTP",
+  "categoryIncludes": "Categories Includes",
+  "allCategoriesIncluded": "All Categories included",
+  "packageValidity": "Package Validity",
+  "listingDuration": "Listing Validity",
+  "paymentConfirmed": "Payment Confirmed Successfully"
+}
\ No newline at end of file