Initial commit

app/visa/page.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import visaData from "./visa.json";
+import Breadcrumb from "./components/Breadcrumb";
+
+const ASSET_URL = process.env.NEXT_PUBLIC_API_URL || "";
+
+interface VisaCountry {
+  id: number;
+  name: string;
+  icon: string;
+  services: string[];
+}
+
+const visaCountries: VisaCountry[] = visaData.visaSystem.summaryList.map(
+  (country) => ({
+    ...country,
+    icon: `${ASSET_URL}/${country.icon}`,
+  }),
+);
+
+export default function VisaListPage() {
+  const getSlug = (countryName: string): string => {
+    return countryName.toLowerCase().replace(/\s+/g, "-");
+  };
+
+  return (
+    <>
+      {/* Breadcrumb-Wrapper Section Start */}
+      <Breadcrumb
+        title={visaData.visaSystem.breadcrumb.list.title}
+        breadcrumbItems={[
+          { label: "Home", href: "/" },
+          { label: visaData.visaSystem.breadcrumb.list.title },
+        ]}
+        backgroundImage={`${ASSET_URL}/${visaData.visaSystem.breadcrumb.list.image}`}
+      />
+
+      {/* Service Section Start */}
+      <section className="visa-provide-section section-padding section-bg-1 fix">
+        <div className="container">
+          <div className="row g-4">
+            {visaCountries.map((country) => (
+              <div key={country.id} className="col-lg-6">
+                <div className="visa-provide-box mt-0">
+                  <div className="visa-top-item">
+                    <div className="visa-left">
+                      <div className="icon">
+                        <img src={country.icon} alt="img" />
+                      </div>
+                      <div className="content">
+                        <p>Visa Service</p>
+                        <h3>
+                          <a href={`/visa/${getSlug(country.name)}`}>
+                            {country.name}
+                          </a>
+                        </h3>
+                      </div>
+                    </div>
+                    <a
+                      href={`/visa/${getSlug(country.name)}`}
+                      className="theme-btn"
+                    >
+                      Read More
+                      <i className="fa-solid fa-arrow-right"></i>
+                    </a>
+                  </div>
+                  <div className="visa-list-item">
+                    <ul className="list">
+                      <li>
+                        <i className="fa-regular fa-arrow-right"></i>
+                        {country.services[0]}
+                      </li>
+                      <li>
+                        <i className="fa-regular fa-arrow-right"></i>
+                        {country.services[1]}
+                      </li>
+                    </ul>
+                    <ul className="list">
+                      <li>
+                        <i className="fa-regular fa-arrow-right"></i>
+                        {country.services[2]}
+                      </li>
+                      <li>
+                        <i className="fa-regular fa-arrow-right"></i>
+                        {country.services[3]}
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}