feat: refactor service API schema and update layout structure

app/services/page.tsx

@@ -11,6 +11,51 @@ export const metadata: Metadata = {
 export default async function ServicesPage() {
   const data = await fetchServicePageData();
   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",
+    },
+  ];
 
   return (
     <>
@@ -99,7 +144,7 @@ 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">
-            {destinations.items.map((country: any) => (
+            {country.map((country: any) => (
               <div key={country.id} className="col destination-offer-item">
                 <div className="choose-us-image">
                   <img src={imageUrl(country.image)} alt="img" />
@@ -122,7 +167,7 @@ export default async function ServicesPage() {
       </section>
 
       {/* Service-Visa Section Start */}
-      <section className="service-visa-section fix">
+      {/* <section className="service-visa-section fix">
         <div className="container">
           <div className="service-visa-wrapper">
             {visas.items.map((visa: any, index: number) => (
@@ -144,7 +189,7 @@ export default async function ServicesPage() {
             ))}
           </div>
         </div>
-      </section>
+      </section> */}
 
       {/* Testimonial Section3 Start */}
       <section className="testimonial-section section-padding fix">