feat: add country API integration and image fallback component

app/components/ImageWithFallback.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useState } from "react";
+import { imageUrl } from "../utils/image";
+
+interface ImageWithFallbackProps {
+  src: string;
+  alt: string;
+  fallbackSrc?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function ImageWithFallback({
+  src,
+  alt,
+  fallbackSrc = "_images/default.jpg",
+  className,
+  style,
+}: ImageWithFallbackProps) {
+  const [imgSrc, setImgSrc] = useState(imageUrl(src));
+  const [hasError, setHasError] = useState(false);
+
+  const handleError = () => {
+    if (!hasError) {
+      setHasError(true);
+      setImgSrc(imageUrl(fallbackSrc));
+    }
+  };
+
+  return (
+    <img
+      src={imgSrc}
+      alt={alt}
+      className={className}
+      style={style}
+      onError={handleError}
+    />
+  );
+}

app/services/page.tsx

@@ -1,57 +1,18 @@
-import { Metadata } from "next";
-import { fetchServicePageData } from "../../api/servicesApi";
+import { fetchServicePageData, fetchCountries } from "../../api/servicesApi";
 import { imageUrl } from "../utils/image";
 import Breadcrumb from "../components/Breadcrumb";
+import ImageWithFallback from "../components/ImageWithFallback";
 import "./services.css";
 
 export default async function ServicesPage() {
   const data = await fetchServicePageData();
+  const allCountries = await fetchCountries();
   const { services, destinations, visas, reviews } = data;
-  const country = [
-    {
-      id: "canada",
-      name: "Canada",
-      description:
-        "Canada provides quality education, rich culture and global opportunities",
-      image: "img/home-3/choose-us/01.jpg",
-      icon: "img/home-3/choose-us/icon-1.png",
-      link: "country-details.html",
-    },
-    {
-      id: "south-korea",
-      name: "South Korea",
-      description:
-        "South Korea offers advanced technology and cultural experiences",
-      image: "img/home-3/choose-us/02.jpg",
-      icon: "img/home-3/choose-us/icon-2.png",
-      link: "country-details.html",
-    },
-    {
-      id: "france",
-      name: "France",
-      description:
-        "France offers rich cultural heritage and educational excellence",
-      image: "img/home-3/choose-us/03.jpg",
-      icon: "img/home-3/choose-us/icon-3.png",
-      link: "country-details.html",
-    },
-    {
-      id: "uk",
-      name: "UK",
-      description: "UK provides world-class education and career opportunities",
-      image: "img/home-3/choose-us/04.jpg",
-      icon: "img/home-3/choose-us/icon-2.png",
-      link: "country-details.html",
-    },
-    {
-      id: "germany",
-      name: "Germany",
-      description: "Germany offers excellent education and strong economy",
-      image: "img/home-3/choose-us/05.jpg",
-      icon: "img/home-3/choose-us/icon-3.png",
-      link: "country-details.html",
-    },
-  ];
+
+  // Pagination logic - show only first 5 countries
+  const COUNTRIES_PER_PAGE = 5;
+  const displayedCountries = allCountries.slice(0, COUNTRIES_PER_PAGE);
+  const hasMoreCountries = allCountries.length > COUNTRIES_PER_PAGE;
 
   return (
     <>
@@ -140,10 +101,14 @@ export default async function ServicesPage() {
             </h2>
           </div>
           <div className="destination-offer-wrapper-3 fade-up-anim row g-4 g-xl-4 row-cols-xl-5 row-cols-lg-4 row-cols-md-2 row-cols-1">
-            {country.map((country: any) => (
+            {displayedCountries.map((country: any) => (
               <div key={country.id} className="col destination-offer-item">
                 <div className="choose-us-image">
-                  <img src={imageUrl(country.image)} alt="img" />
+                  <ImageWithFallback
+                    src={country.mainImage}
+                    alt="img"
+                    fallbackSrc="_images/default.jpg"
+                  />
                 </div>
                 <div className="choose-us-content">
                   <div className="icon-item">
@@ -151,14 +116,28 @@ export default async function ServicesPage() {
                       <img src={imageUrl(country.icon)} alt="img" />
                     </div>
                     <h5>
-                      <a href={country.link}>{country.name}</a>
+                      <a href={`/visa/${country.slug}`}>{country.name}</a>
                     </h5>
                   </div>
-                  <p>{country.description}</p>
+                  <p>
+                    {country.services && country.services.length > 0
+                      ? `Services: ${country.services.slice(0, 2).join(", ")}${country.services.length > 2 ? "..." : ""}`
+                      : "Immigration services available"}
+                  </p>
                 </div>
               </div>
             ))}
           </div>
+
+          {/* Show "View More" button if there are more countries */}
+          {hasMoreCountries && (
+            <div className="text-center mt-4">
+              <a href="/visa" className="theme-btn">
+                View All Countries ({allCountries.length})
+                <i className="fa-solid fa-arrow-right"></i>
+              </a>
+            </div>
+          )}
         </div>
       </section>