From 693821a9aadc1f53a2415b7745a919a8b60fbf60 Mon Sep 17 00:00:00 2001
From: nguyenvanbao <nguyenhoanggiaphong12@gmail.com>
Date: Wed, 4 Feb 2026 11:52:19 +0700
Subject: [PATCH] fix: refactor services page styling and improve component
 logic

---
 app/services/page.tsx     | 10 +++-----
 app/services/services.css | 53 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 app/services/services.css

diff --git a/app/services/page.tsx b/app/services/page.tsx
index 1d1a476..944ebed 100644
--- a/app/services/page.tsx
+++ b/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>
diff --git a/app/services/services.css b/app/services/services.css
new file mode 100644
index 0000000..c386373
--- /dev/null
+++ b/app/services/services.css
@@ -0,0 +1,53 @@
+/* Custom CSS for Service Image Sizing */
+.service-main-item-3 .service-left .service-image {
+  flex-shrink: 0;
+  width: 352px;
+  height: 216px;
+  overflow: hidden;
+  border-radius: 16px;
+}
+
+.service-main-item-3 .service-left .service-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 16px;
+}
+/* 
+.service-main-item-3 .service-left .content {
+  flex: 1;
+  min-width: 0;
+}
+
+.service-main-item-3 .service-left {
+  gap: 30px;
+  align-items: flex-start;
+} */
+
+/* @media (max-width: 1399px) {
+  .service-main-item-3 .service-left .service-image {
+    width: 250px;
+    height: 180px;
+  }
+}
+
+@media (max-width: 767px) {
+  .service-main-item-3 .service-left .service-image {
+    width: 100%;
+    height: 200px;
+    max-width: 300px;
+  }
+
+  .service-main-item-3 .service-left {
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .service-main-item-3.style-2 .service-left {
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    text-align: left;
+  }
+} */