fix: refactor services page styling and improve component logic

app/services/page.tsx

@@ -2,11 +2,7 @@ import { Metadata } from "next";
 import { fetchServicePageData } from "../../api/servicesApi";
 import { imageUrl } from "../utils/image";
 import Breadcrumb from "../components/Breadcrumb";
-
-export const metadata: Metadata = {
-  title: "Services - Visaway Immigration & Visa Consulting",
-  description: "Immigration & Visa Consulting Services",
-};
+import "./services.css";
 
 export default async function ServicesPage() {
   const data = await fetchServicePageData();
@@ -77,7 +73,7 @@ export default async function ServicesPage() {
             <div className="col-xl-12">
               {services.items.map((service: any) => (
                 <div
-                  key={service.id}
+                  key={service.slug}
                   className={`service-main-item-3 ${service.layout === "right" ? "style-2" : ""} fade-up-anim`}
                 >
                   {service.layout === "right" && (
@@ -203,7 +199,7 @@ export default async function ServicesPage() {
                 {reviews.title.mainTitle}
               </h2>
             </div>
-            <a href="#" className="theme-btn">
+            <a href="/contact" className="theme-btn">
               View All Review
               <i className="fa-solid fa-arrow-right"></i>
             </a>