Merge branch 'main' of https://gits.techvanguard.vn/UKSOURCE/hailearning.edu.vn into fea/thanh-02022026-news

app/appointment/page.tsx

@@ -1,501 +1,437 @@
 "use client";
 
-import { useState } from "react";
-import appointmentData from "./appointment.json";
+import { useState, useEffect, FormEvent } from "react";
+import { AppointmentData } from "./types";
+import Breadcrumb from "../components/Breadcrumb";
+
 
 export default function AppointmentPage() {
-  const [selectedType, setSelectedType] = useState("consultation");
-  const [selectedConsultant, setSelectedConsultant] = useState("");
-  const [selectedDate, setSelectedDate] = useState("");
-  const [selectedTime, setSelectedTime] = useState("");
-  const [selectedOffice, setSelectedOffice] = useState("online");
-  const [openFaq, setOpenFaq] = useState<number | null>(null);
-
+  const [appointmentData, setAppointmentData] = useState<AppointmentData | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
   const [formData, setFormData] = useState({
-    fullName: "",
+    name: "",
     email: "",
     phone: "",
-    visaType: "",
-    country: "",
-    travelDate: "",
-    previousVisa: "",
-    notes: "",
+    address: "",
+    appointmentDate: "",
+    message: "",
+    visaTypes: [] as string[],
   });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitStatus, setSubmitStatus] = useState<{
+    type: "success" | "error" | null;
+    message: string;
+  }>({ type: null, message: "" });
 
-  const handleInputChange = (
-    e: React.ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >,
+  // Calendar state
+  const [currentDate, setCurrentDate] = useState(new Date());
+
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
+
+  // Calendar helper functions
+  const months = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December"
+  ];
+
+  const getDaysInMonth = (year: number, month: number) => {
+    return new Date(year, month + 1, 0).getDate();
+  };
+
+  const getFirstDayOfMonth = (year: number, month: number) => {
+    const day = new Date(year, month, 1).getDay();
+    // Convert Sunday (0) to 7 for Monday-first calendar
+    return day === 0 ? 7 : day;
+  };
+
+  const generateCalendarDays = () => {
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+    const daysInMonth = getDaysInMonth(year, month);
+    const firstDay = getFirstDayOfMonth(year, month);
+    const today = new Date();
+
+    const days: React.ReactNode[] = [];
+
+    // Empty cells for days before the first day of the month
+    for (let i = 1; i < firstDay; i++) {
+      days.push(<div key={`empty-${i}`} className="date empty"></div>);
+    }
+
+    // Days of the month
+    for (let day = 1; day <= daysInMonth; day++) {
+      const isToday =
+        day === today.getDate() &&
+        month === today.getMonth() &&
+        year === today.getFullYear();
+
+      days.push(
+        <div
+          key={day}
+          className={`date ${isToday ? "today active" : ""}`}
+          onClick={() => handleDateClick(year, month, day)}
+          style={{ cursor: "pointer" }}
+        >
+          {day}
+        </div>
+      );
+    }
+
+    return days;
+  };
+
+  const handleDateClick = (year: number, month: number, day: number) => {
+    const selectedDate = new Date(year, month, day);
+    const formattedDate = selectedDate.toISOString().split("T")[0];
+    setFormData((prev) => ({ ...prev, appointmentDate: formattedDate }));
+  };
+
+  const handlePrevMonth = () => {
+    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
+  };
+
+  const handleNextMonth = () => {
+    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
+  };
+
+  // Fetch appointment data from CMS
+  useEffect(() => {
+    const fetchAppointmentData = async () => {
+      try {
+        const response = await fetch(`${apiUrl}/api/appointment`);
+        const result = await response.json();
+
+        if (result.success && result.data) {
+          setAppointmentData(result.data);
+        }
+      } catch (error) {
+        console.error("Error fetching appointment data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchAppointmentData();
+  }, [apiUrl]);
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
     const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleCheckboxChange = (visaType: string, checked: boolean) => {
     setFormData((prev) => ({
       ...prev,
-      [name]: value,
+      visaTypes: checked
+        ? [...prev.visaTypes, visaType]
+        : prev.visaTypes.filter((v) => v !== visaType),
     }));
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    console.log("Appointment booked:", {
-      type: selectedType,
-      consultant: selectedConsultant,
-      date: selectedDate,
-      time: selectedTime,
-      office: selectedOffice,
-      ...formData,
-    });
-    alert(
-      "Đặt lịch thành công! Chúng tôi sẽ liên hệ xác nhận trong thời gian sớm nhất.",
+    setIsSubmitting(true);
+    setSubmitStatus({ type: null, message: "" });
+
+    try {
+      const response = await fetch(`${apiUrl}/api/appointment/submit`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(formData),
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.success) {
+        setSubmitStatus({
+          type: "success",
+          message: data.message || "Thank you! Your appointment has been submitted.",
+        });
+        // Reset form
+        setFormData({
+          name: "",
+          email: "",
+          phone: "",
+          address: "",
+          appointmentDate: "",
+          message: "",
+          visaTypes: [],
+        });
+      } else {
+        setSubmitStatus({
+          type: "error",
+          message: data.error || "Something went wrong. Please try again.",
+        });
+      }
+    } catch (error) {
+      console.error("Submit error:", error);
+      setSubmitStatus({
+        type: "error",
+        message: "Network error. Please check your connection and try again.",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Get data with fallbacks
+  const hero = appointmentData?.hero || {
+    title: "Make Appointment",
+    backgroundImage: "/assets/img/inner-page/breadcrumb.jpg",
+    subtitle: "About Our Consultancy",
+    heading: "Want to meet us for your need?",
+    description: "24/7 customer support is always ready to answer all your questions",
+  };
+
+  const visaOptions = appointmentData?.visaOptions || [
+    "Canada Immigration",
+    "Tourist Visa",
+    "Medical Visa",
+    "Coaching",
+    "Student Visa",
+    "Spouse Visa",
+    "Job Opportunity",
+    "Exam",
+  ];
+
+  const formSettings = appointmentData?.form || {
+    heading: "Request Appointment",
+    submitButton: {
+      text: "Request Appointment",
+      icon: "fa-solid fa-arrow-right",
+      buttonClass: "theme-btn",
+    },
+  };
+
+  // Get background image URL
+  const backgroundImage = hero.backgroundImage?.startsWith("http")
+    ? hero.backgroundImage
+    : hero.backgroundImage?.startsWith("/")
+      ? hero.backgroundImage
+      : `/assets/img/inner-page/breadcrumb.jpg`;
+
+  if (isLoading) {
+    return (
+      <div className="loading-wrapper" style={{ minHeight: "50vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
+        <div className="spinner-border text-primary" role="status">
+          <span className="visually-hidden">Loading...</span>
+        </div>
+      </div>
     );
-  };
-
-  const toggleFaq = (index: number) => {
-    setOpenFaq(openFaq === index ? null : index);
-  };
-
-  const selectedAppointmentType = appointmentData.appointmentTypes.find(
-    (type) => type.id === selectedType,
-  );
-  const selectedConsultantData = appointmentData.consultants.find(
-    (c) => c.id === selectedConsultant,
-  );
+  }
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="max-w-6xl mx-auto">
-        {/* Header */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
-            {appointmentData.title}
-          </h1>
-          <p className="text-xl text-gray-600 mb-8">
-            {appointmentData.subtitle}
-          </p>
+    <>
+      {/* Breadcrumb-Wrapper Section Start */}
+      <Breadcrumb title={hero.title} current={hero.title} />
 
-          {/* Benefits */}
-          <div className="grid md:grid-cols-4 gap-6 max-w-4xl mx-auto">
-            {appointmentData.hero.benefits.map((benefit, index) => (
-              <div key={index} className="bg-blue-50 p-4 rounded-lg">
-                <p className="text-blue-800 font-medium">{benefit}</p>
+      {/* Appointment Section Start */}
+      <section className="appointment-section section-padding fix">
+        <div className="container">
+          <div className="appointment-wrapper">
+            <div className="row g-4">
+              <div className="col-lg-6">
+                <div className="appointment-content">
+                  <div className="section-title mb-0">
+                    {hero.subtitle && (
+                      <span className="sub-title-2">{hero.subtitle}</span>
+                    )}
+                    {hero.heading && (
+                      <h2 className="split-text-right split-text-in-right">
+                        {hero.heading}
+                      </h2>
+                    )}
+                  </div>
+                  <h5>Have any questions?</h5>
+                  {hero.description && <p>{hero.description}</p>}
+                </div>
               </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="grid lg:grid-cols-3 gap-8">
-          {/* Booking Form */}
-          <div className="lg:col-span-2">
-            <div className="bg-white rounded-lg shadow-lg p-6">
-              <h2 className="text-2xl font-bold text-gray-900 mb-6">
-                Đặt Lịch Hẹn
-              </h2>
-
-              <form onSubmit={handleSubmit} className="space-y-6">
-                {/* Appointment Type */}
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-3">
-                    Loại tư vấn <span className="text-red-500">*</span>
-                  </label>
-                  <div className="grid md:grid-cols-2 gap-4">
-                    {appointmentData.appointmentTypes.map((type) => (
-                      <div
-                        key={type.id}
-                        className={`border rounded-lg p-4 cursor-pointer transition-colors ${
-                          selectedType === type.id
-                            ? "border-blue-500 bg-blue-50"
-                            : "border-gray-200 hover:border-gray-300"
-                        }`}
-                        onClick={() => setSelectedType(type.id)}
-                      >
-                        <div className="flex items-center justify-between mb-2">
-                          <div className="flex items-center">
-                            <span className="text-2xl mr-3">{type.icon}</span>
-                            <div>
-                              <h3 className="font-semibold">{type.name}</h3>
-                              {type.popular && (
-                                <span className="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">
-                                  Phổ biến
-                                </span>
-                              )}
-                            </div>
-                          </div>
-                          <div className="text-right">
-                            <div className="font-bold text-blue-600">
-                              {type.price}
-                            </div>
-                            <div className="text-sm text-gray-500">
-                              {type.duration}
-                            </div>
-                          </div>
-                        </div>
-                        <p className="text-gray-600 text-sm">
-                          {type.description}
-                        </p>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-
-                {/* Consultant Selection */}
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-3">
-                    Chọn chuyên gia
-                  </label>
-                  <div className="space-y-3">
-                    <div
-                      className={`border rounded-lg p-4 cursor-pointer transition-colors ${
-                        selectedConsultant === ""
-                          ? "border-blue-500 bg-blue-50"
-                          : "border-gray-200 hover:border-gray-300"
-                      }`}
-                      onClick={() => setSelectedConsultant("")}
-                    >
-                      <div className="font-medium">
-                        Để chúng tôi chọn chuyên gia phù hợp
-                      </div>
-                      <div className="text-sm text-gray-600">
-                        Dựa trên loại visa và quốc gia bạn quan tâm
-                      </div>
+              <div className="col-lg-6">
+                <div className="calendar">
+                  <div className="calendar-header">
+                    <h2 id="month-year">{months[currentDate.getMonth()]} {currentDate.getFullYear()}</h2>
+                    <div>
+                      <button type="button" onClick={handlePrevMonth}>&lt;</button>
+                      <button type="button" onClick={handleNextMonth}>&gt;</button>
                     </div>
-
-                    {appointmentData.consultants.map((consultant) => (
-                      <div
-                        key={consultant.id}
-                        className={`border rounded-lg p-4 cursor-pointer transition-colors ${
-                          selectedConsultant === consultant.id
-                            ? "border-blue-500 bg-blue-50"
-                            : "border-gray-200 hover:border-gray-300"
-                        }`}
-                        onClick={() => setSelectedConsultant(consultant.id)}
-                      >
-                        <div className="flex items-center">
-                          <div className="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center mr-4">
-                            <span className="text-gray-600">👤</span>
-                          </div>
-                          <div className="flex-1">
-                            <div className="font-semibold">
-                              {consultant.name}
-                            </div>
-                            <div className="text-sm text-gray-600">
-                              {consultant.title}
-                            </div>
-                            <div className="flex items-center text-sm text-gray-500">
-                              <span className="mr-2">
-                                ⭐ {consultant.rating}
-                              </span>
-                              <span className="mr-2">
-                                ({consultant.reviews} đánh giá)
-                              </span>
-                              <span>{consultant.experience}</span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    ))}
                   </div>
-                </div>
-
-                {/* Date & Time */}
-                <div className="grid md:grid-cols-2 gap-6">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-2">
-                      Ngày hẹn <span className="text-red-500">*</span>
-                    </label>
-                    <input
-                      type="date"
-                      value={selectedDate}
-                      onChange={(e) => setSelectedDate(e.target.value)}
-                      min={new Date().toISOString().split("T")[0]}
-                      required
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    />
+                  <div className="days">
+                    <div>Mon</div>
+                    <div>Tue</div>
+                    <div>Wed</div>
+                    <div>Thu</div>
+                    <div>Fri</div>
+                    <div>Sat</div>
+                    <div>Sun</div>
                   </div>
-
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-2">
-                      Giờ hẹn <span className="text-red-500">*</span>
-                    </label>
-                    <select
-                      value={selectedTime}
-                      onChange={(e) => setSelectedTime(e.target.value)}
-                      required
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    >
-                      <option value="">Chọn giờ</option>
-                      {appointmentData.timeSlots.map((slot) => (
-                        <option
-                          key={slot.time}
-                          value={slot.time}
-                          disabled={!slot.available}
-                        >
-                          {slot.label} {!slot.available && "(Đã đặt)"}
-                        </option>
-                      ))}
-                    </select>
+                  <div className="dates" id="dates">
+                    {generateCalendarDays()}
                   </div>
                 </div>
-
-                {/* Office Selection */}
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-3">
-                    Hình thức tư vấn <span className="text-red-500">*</span>
-                  </label>
-                  <div className="space-y-3">
-                    <div
-                      className={`border rounded-lg p-4 cursor-pointer transition-colors ${
-                        selectedOffice === "online"
-                          ? "border-blue-500 bg-blue-50"
-                          : "border-gray-200 hover:border-gray-300"
-                      }`}
-                      onClick={() => setSelectedOffice("online")}
-                    >
-                      <div className="flex items-center">
-                        <span className="text-2xl mr-3">💻</span>
-                        <div>
-                          <div className="font-medium">Tư vấn online</div>
-                          <div className="text-sm text-gray-600">
-                            Video call qua Zoom/Google Meet
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    {appointmentData.offices.map((office, index) => (
-                      <div
-                        key={index}
-                        className={`border rounded-lg p-4 cursor-pointer transition-colors ${
-                          selectedOffice === office.name
-                            ? "border-blue-500 bg-blue-50"
-                            : "border-gray-200 hover:border-gray-300"
-                        }`}
-                        onClick={() => setSelectedOffice(office.name)}
-                      >
-                        <div className="flex items-center">
-                          <span className="text-2xl mr-3">🏢</span>
-                          <div>
-                            <div className="font-medium">
-                              Văn phòng {office.name}
-                            </div>
-                            <div className="text-sm text-gray-600">
-                              {office.address}
-                            </div>
-                            <div className="text-sm text-gray-500">
-                              {office.hours}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-
-                {/* Personal Information */}
-                <div className="border-t pt-6">
-                  <h3 className="text-lg font-semibold text-gray-900 mb-4">
-                    Thông Tin Cá Nhân
-                  </h3>
-                  <div className="grid md:grid-cols-2 gap-6">
-                    {appointmentData.formFields.map((field) => (
-                      <div
-                        key={field.name}
-                        className={
-                          field.type === "textarea" ? "md:col-span-2" : ""
-                        }
-                      >
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          {field.label}
-                          {field.required && (
-                            <span className="text-red-500 ml-1">*</span>
-                          )}
-                        </label>
-
-                        {field.type === "textarea" ? (
-                          <textarea
-                            name={field.name}
-                            value={
-                              formData[field.name as keyof typeof formData]
-                            }
-                            onChange={handleInputChange}
-                            placeholder={field.placeholder}
-                            required={field.required}
-                            rows={4}
-                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                          />
-                        ) : field.type === "select" ? (
-                          <select
-                            name={field.name}
-                            value={
-                              formData[field.name as keyof typeof formData]
-                            }
-                            onChange={handleInputChange}
-                            required={field.required}
-                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                          >
-                            <option value="">
-                              Chọn {field.label.toLowerCase()}
-                            </option>
-                            {field.options?.map((option, index) => (
-                              <option key={index} value={option}>
-                                {option}
-                              </option>
-                            ))}
-                          </select>
-                        ) : (
-                          <input
-                            type={field.type}
-                            name={field.name}
-                            value={
-                              formData[field.name as keyof typeof formData]
-                            }
-                            onChange={handleInputChange}
-                            placeholder={field.placeholder}
-                            required={field.required}
-                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                          />
-                        )}
-                      </div>
-                    ))}
-                  </div>
-                </div>
-
-                {/* Submit Button */}
-                <button
-                  type="submit"
-                  className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors font-medium text-lg"
-                >
-                  Đặt Lịch Hẹn
-                </button>
-              </form>
-            </div>
-          </div>
-
-          {/* Sidebar */}
-          <div className="space-y-6">
-            {/* Booking Summary */}
-            <div className="bg-white rounded-lg shadow-lg p-6">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">
-                Tóm Tắt Đặt Lịch
-              </h3>
-
-              {selectedAppointmentType && (
-                <div className="space-y-3">
-                  <div className="flex justify-between">
-                    <span className="text-gray-600">Loại tư vấn:</span>
-                    <span className="font-medium">
-                      {selectedAppointmentType.name}
-                    </span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-600">Thời gian:</span>
-                    <span className="font-medium">
-                      {selectedAppointmentType.duration}
-                    </span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-600">Phí:</span>
-                    <span className="font-medium text-blue-600">
-                      {selectedAppointmentType.price}
-                    </span>
-                  </div>
-
-                  {selectedConsultantData && (
-                    <div className="border-t pt-3">
-                      <div className="flex justify-between">
-                        <span className="text-gray-600">Chuyên gia:</span>
-                        <span className="font-medium">
-                          {selectedConsultantData.name}
-                        </span>
-                      </div>
-                    </div>
-                  )}
-
-                  {selectedDate && selectedTime && (
-                    <div className="border-t pt-3">
-                      <div className="flex justify-between">
-                        <span className="text-gray-600">Ngày giờ:</span>
-                        <span className="font-medium">
-                          {selectedDate} lúc{" "}
-                          {
-                            appointmentData.timeSlots.find(
-                              (s) => s.time === selectedTime,
-                            )?.label
-                          }
-                        </span>
-                      </div>
-                    </div>
-                  )}
-
-                  {selectedOffice && (
-                    <div className="flex justify-between">
-                      <span className="text-gray-600">Hình thức:</span>
-                      <span className="font-medium">
-                        {selectedOffice === "online"
-                          ? "Online"
-                          : `Văn phòng ${selectedOffice}`}
-                      </span>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-
-            {/* Contact Info */}
-            <div className="bg-blue-50 rounded-lg p-6">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">
-                Cần Hỗ Trợ?
-              </h3>
-              <div className="space-y-3">
-                <div className="flex items-center">
-                  <span className="text-blue-600 mr-2">📞</span>
-                  <span>1900 1234</span>
-                </div>
-                <div className="flex items-center">
-                  <span className="text-blue-600 mr-2">✉️</span>
-                  <span>info@visaservice.com</span>
-                </div>
-                <div className="flex items-center">
-                  <span className="text-blue-600 mr-2">💬</span>
-                  <span>Chat trực tuyến 24/7</span>
-                </div>
               </div>
             </div>
           </div>
         </div>
+      </section>
 
-        {/* FAQs */}
-        <div className="mt-16">
-          <h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">
-            Câu Hỏi Thường Gặp
-          </h2>
-          <div className="max-w-3xl mx-auto space-y-4">
-            {appointmentData.faqs.map((faq, index) => (
+      {/* Contact Section Start */}
+      <div className="contact-section section-padding fix pt-0">
+        <div className="container">
+          <div className="contact-from-wrapper">
+            {/* Status Message */}
+            {submitStatus.type && (
               <div
-                key={index}
-                className="bg-white rounded-lg shadow-md overflow-hidden"
+                className={`alert ${submitStatus.type === "success"
+                  ? "alert-success"
+                  : "alert-danger"
+                  } text-center mb-4`}
               >
-                <button
-                  className="w-full p-6 text-left hover:bg-gray-50 transition-colors"
-                  onClick={() => toggleFaq(index)}
-                >
-                  <div className="flex items-center justify-between">
-                    <h3 className="font-semibold text-gray-900">
-                      {faq.question}
-                    </h3>
-                    <span className="text-gray-400">
-                      {openFaq === index ? "−" : "+"}
-                    </span>
-                  </div>
-                </button>
-                {openFaq === index && (
-                  <div className="px-6 pb-6">
-                    <p className="text-gray-700">{faq.answer}</p>
-                  </div>
-                )}
+                {submitStatus.message}
               </div>
-            ))}
+            )}
+
+            <form onSubmit={handleSubmit} className="contact-form-items">
+              <div className="row g-4">
+                <div className="col-xl-12">
+                  <div className="row g-4">
+                    <div className="col-lg-4">
+                      <div className="form-clt">
+                        <span>Your Name *</span>
+                        <input
+                          type="text"
+                          name="name"
+                          value={formData.name}
+                          onChange={handleChange}
+                          placeholder="Your name"
+                          required
+                        />
+                      </div>
+                    </div>
+                    <div className="col-lg-4">
+                      <div className="form-clt">
+                        <span>Your Email *</span>
+                        <input
+                          type="email"
+                          name="email"
+                          value={formData.email}
+                          onChange={handleChange}
+                          placeholder="Your email"
+                          required
+                        />
+                      </div>
+                    </div>
+                    <div className="col-lg-4">
+                      <div className="form-clt">
+                        <span>Your Phone</span>
+                        <input
+                          type="tel"
+                          name="phone"
+                          value={formData.phone}
+                          onChange={handleChange}
+                          placeholder="Phone Number"
+                        />
+                      </div>
+                    </div>
+                    <div className="col-lg-6">
+                      <div className="form-clt">
+                        <span>Your Address</span>
+                        <input
+                          type="text"
+                          name="address"
+                          value={formData.address}
+                          onChange={handleChange}
+                          placeholder="Your address"
+                        />
+                      </div>
+                    </div>
+                    <div className="col-lg-6">
+                      <div className="form-clt">
+                        <span>Appointment Date</span>
+                        <input
+                          type="date"
+                          name="appointmentDate"
+                          value={formData.appointmentDate}
+                          onChange={handleChange}
+                        />
+                      </div>
+                    </div>
+                    <div className="col-lg-12">
+                      <div className="form-clt">
+                        <textarea
+                          name="message"
+                          value={formData.message}
+                          onChange={handleChange}
+                          placeholder="Type your message"
+                        ></textarea>
+                      </div>
+                    </div>
+                  </div>
+
+                  {visaOptions.length > 0 && (
+                    <div className="cheak-list-item">
+                      <div className="cheak-list">
+                        {visaOptions.slice(0, Math.ceil(visaOptions.length / 2)).map((visa, index) => (
+                          <div className="form-check" key={index}>
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              id={`visa-${index}`}
+                              checked={formData.visaTypes.includes(visa)}
+                              onChange={(e) =>
+                                handleCheckboxChange(visa, e.target.checked)
+                              }
+                            />
+                            <label
+                              className="form-check-label"
+                              htmlFor={`visa-${index}`}
+                            >
+                              {visa}
+                            </label>
+                          </div>
+                        ))}
+                      </div>
+                      <div className="cheak-list mb-0">
+                        {visaOptions.slice(Math.ceil(visaOptions.length / 2)).map((visa, index) => (
+                          <div className="form-check" key={index + Math.ceil(visaOptions.length / 2)}>
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              id={`visa-${index + Math.ceil(visaOptions.length / 2)}`}
+                              checked={formData.visaTypes.includes(visa)}
+                              onChange={(e) =>
+                                handleCheckboxChange(visa, e.target.checked)
+                              }
+                            />
+                            <label
+                              className="form-check-label"
+                              htmlFor={`visa-${index + Math.ceil(visaOptions.length / 2)}`}
+                            >
+                              {visa}
+                            </label>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  <button
+                    type="submit"
+                    className={formSettings.submitButton?.buttonClass || "theme-btn"}
+                    disabled={isSubmitting}
+                  >
+                    {isSubmitting ? "SUBMITTING..." : (formSettings.submitButton?.text || "Request Appointment")}
+                    <i className={formSettings.submitButton?.icon || "fa-solid fa-arrow-right"}></i>
+                  </button>
+                </div>
+              </div>
+            </form>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }

app/appointment/types.ts

@@ -0,0 +1,30 @@
+export interface AppointmentHero {
+    title: string;
+    backgroundImage: string;
+    subtitle: string;
+    heading: string;
+    description: string;
+}
+
+export interface AppointmentForm {
+    heading: string;
+    fields: Array<{
+        name: string;
+        label: string;
+        type: string;
+        placeholder: string;
+        required: boolean;
+        colClass: string;
+    }>;
+    submitButton: {
+        text: string;
+        icon: string;
+        buttonClass: string;
+    };
+}
+
+export interface AppointmentData {
+    hero: AppointmentHero;
+    visaOptions: string[];
+    form: AppointmentForm;
+}

app/contact/page.tsx

@@ -1,157 +1,237 @@
 "use client";
 
-import { useState } from "react";
-import contactData from "./contact.json";
+import { useState, useEffect, FormEvent } from "react";
+import { ContactData } from "./types";
+import Breadcrumb from "../components/Breadcrumb";
 
 export default function ContactPage() {
+  const [contactData, setContactData] = useState<ContactData | null>(null);
+  const [loading, setLoading] = useState(true);
   const [formData, setFormData] = useState({
-    fullName: "",
+    name: "",
     email: "",
     phone: "",
-    service: "",
+    address: "",
+    date: "",
     message: "",
   });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitStatus, setSubmitStatus] = useState<{
+    type: "success" | "error" | null;
+    message: string;
+  }>({ type: null, message: "" });
 
-  const handleInputChange = (
-    e: React.ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >,
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
+
+  // Fetch contact data from CMS
+  useEffect(() => {
+    const fetchContactData = async () => {
+      try {
+        const response = await fetch(`${apiUrl}/api/contact`, { cache: 'no-store' });
+        if (response.ok) {
+          const data = await response.json();
+          setContactData(data);
+        }
+      } catch (error) {
+        console.error("Error fetching contact data:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchContactData();
+  }, [apiUrl]);
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
     const { name, value } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
+    setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    console.log("Form submitted:", formData);
-    // Handle form submission here
-    alert(
-      "Cảm ơn bạn đã liên hệ! Chúng tôi sẽ phản hồi trong thời gian sớm nhất.",
+    setIsSubmitting(true);
+    setSubmitStatus({ type: null, message: "" });
+
+    try {
+      const response = await fetch(`${apiUrl}/api/contact/submit`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(formData),
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.success) {
+        setSubmitStatus({
+          type: "success",
+          message: data.message || "Thank you! We will contact you soon.",
+        });
+        setFormData({
+          name: "",
+          email: "",
+          phone: "",
+          address: "",
+          date: "",
+          message: "",
+        });
+      } else {
+        setSubmitStatus({
+          type: "error",
+          message: data.error || "Something went wrong. Please try again.",
+        });
+      }
+    } catch (error) {
+      console.error("Submit error:", error);
+      setSubmitStatus({
+        type: "error",
+        message: "Network error. Please check your connection and try again.",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="loading-wrapper" style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
+        <p>Loading...</p>
+      </div>
     );
+  }
+
+  // Default values if API fails
+  const hero = contactData?.hero || { title: "Contact Us", backgroundImage: "/assets/img/inner-page/breadcrumb.jpg" };
+  const contactCards = contactData?.contactCards || [];
+  const map = contactData?.map || { embedUrl: "" };
+  const form = contactData?.form || {
+    heading: "Send Us Message",
+    description: "Have questions? Send us a message today.",
+    fields: [],
+    submitButton: { text: "SEND MESSAGE", icon: "fa-solid fa-arrow-right", buttonClass: "theme-btn style-2" }
   };
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="max-w-6xl mx-auto">
-        {/* Header */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
-            {contactData.title}
-          </h1>
-          <p className="text-xl text-gray-600">{contactData.subtitle}</p>
-        </div>
+    <>
+      {/* Breadcrumb-Wrapper Section Start */}
+      <Breadcrumb title={hero.title} current={hero.title} />
 
-        <div className="grid lg:grid-cols-2 gap-12">
-          {/* Contact Information */}
-          <div>
-            <h2 className="text-2xl font-bold text-gray-900 mb-6">
-              Thông Tin Liên Hệ
-            </h2>
-
-            {/* Contact Details */}
-            <div className="space-y-6 mb-8">
-              {Object.entries(contactData.contactInfo).map(([key, info]) => (
-                <div key={key} className="flex items-start">
-                  <span className="text-2xl mr-4">{info.icon}</span>
-                  <div>
-                    <h3 className="font-semibold text-gray-900">
-                      {info.label}
-                    </h3>
-                    <p className="text-gray-700 whitespace-pre-line">
-                      {info.value}
-                    </p>
+      {/* Contact Icon Section Start */}
+      <section className="contact-us-section-3 section-padding fix">
+        <div className="container">
+          <div className="row g-4">
+            {contactCards.map((card, index) => (
+              <div className="col-xl-4 col-lg-6 col-md-6" key={index}>
+                <div className="contact-icon-item">
+                  <div className="icon">
+                    <i className={card.iconType}></i>
+                  </div>
+                  <div className="content">
+                    <p>{card.title}</p>
+                    <h6>
+                      {card.content.map((line, i) => (
+                        <span key={i}>
+                          {card.type === "email" ? (
+                            <a href={`mailto:${line}`}>{line}</a>
+                          ) : card.type === "phone" ? (
+                            <a href={`tel:${line.replace(/\s/g, "")}`}>{line}</a>
+                          ) : (
+                            line
+                          )}
+                          {i < card.content.length - 1 && <br />}
+                        </span>
+                      ))}
+                    </h6>
                   </div>
                 </div>
-              ))}
-            </div>
-
-            {/* Offices */}
-            <h3 className="text-xl font-bold text-gray-900 mb-4">Văn Phòng</h3>
-            <div className="space-y-4">
-              {contactData.offices.map((office, index) => (
-                <div key={index} className="bg-gray-50 p-4 rounded-lg">
-                  <h4 className="font-semibold text-gray-900 mb-2">
-                    {office.name}
-                  </h4>
-                  <p className="text-gray-700 text-sm mb-1">
-                    📍 {office.address}
-                  </p>
-                  <p className="text-gray-700 text-sm mb-1">
-                    📞 {office.phone}
-                  </p>
-                  <p className="text-gray-700 text-sm">✉️ {office.email}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Contact Form */}
-          <div>
-            <h2 className="text-2xl font-bold text-gray-900 mb-6">
-              Gửi Tin Nhắn
-            </h2>
-            <form onSubmit={handleSubmit} className="space-y-6">
-              {contactData.formFields.map((field) => (
-                <div key={field.name}>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    {field.label}
-                    {field.required && (
-                      <span className="text-red-500 ml-1">*</span>
-                    )}
-                  </label>
-
-                  {field.type === "textarea" ? (
-                    <textarea
-                      name={field.name}
-                      value={formData[field.name as keyof typeof formData]}
-                      onChange={handleInputChange}
-                      placeholder={field.placeholder}
-                      required={field.required}
-                      rows={4}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    />
-                  ) : field.type === "select" ? (
-                    <select
-                      name={field.name}
-                      value={formData[field.name as keyof typeof formData]}
-                      onChange={handleInputChange}
-                      required={field.required}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    >
-                      <option value="">Chọn dịch vụ</option>
-                      {field.options?.map((option, index) => (
-                        <option key={index} value={option}>
-                          {option}
-                        </option>
-                      ))}
-                    </select>
-                  ) : (
-                    <input
-                      type={field.type}
-                      name={field.name}
-                      value={formData[field.name as keyof typeof formData]}
-                      onChange={handleInputChange}
-                      placeholder={field.placeholder}
-                      required={field.required}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    />
-                  )}
-                </div>
-              ))}
-
-              <button
-                type="submit"
-                className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors font-medium"
-              >
-                Gửi Tin Nhắn
-              </button>
-            </form>
+              </div>
+            ))}
           </div>
         </div>
-      </div>
-    </div>
+      </section>
+
+      {/* Contact Section Start */}
+      <section className="contact-section-3 section-padding fix pt-0">
+        <div className="container">
+          <div className="contact-from-wrapper">
+            <h5 className="text-center">{form.heading}</h5>
+            <p className="text-center mt-3 mb-5">&quot;{form.description}&quot;</p>
+
+            {/* Status Message */}
+            {submitStatus.type && (
+              <div
+                className={`alert ${submitStatus.type === "success" ? "alert-success" : "alert-danger"
+                  } text-center mb-4`}
+              >
+                {submitStatus.message}
+              </div>
+            )}
+
+            <div className="row g-4">
+              <div className="col-xl-12">
+                <form onSubmit={handleSubmit} className="contact-form-items">
+                  <div className="row g-4">
+                    {form.fields.map((field, index) => (
+                      <div className={field.colClass || "col-lg-12"} key={index}>
+                        <div className="form-clt">
+                          <span>{field.label}{field.required && " *"}</span>
+                          {field.type === "textarea" ? (
+                            <textarea
+                              name={field.name}
+                              value={formData[field.name as keyof typeof formData] || ""}
+                              onChange={handleChange}
+                              placeholder={field.placeholder}
+                              required={field.required}
+                            ></textarea>
+                          ) : (
+                            <input
+                              type={field.type}
+                              name={field.name}
+                              value={formData[field.name as keyof typeof formData] || ""}
+                              onChange={handleChange}
+                              placeholder={field.placeholder}
+                              required={field.required}
+                            />
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                    <div className="col-lg-4">
+                      <button
+                        type="submit"
+                        className={form.submitButton.buttonClass}
+                        disabled={isSubmitting}
+                      >
+                        {isSubmitting ? "SENDING..." : form.submitButton.text}
+                        <i className={form.submitButton.icon}></i>
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Map Section Start */}
+      {map.embedUrl && (
+        <div className="map-section section-padding pt-0">
+          <div className="map-items">
+            <div className="googpemap">
+              <iframe
+                src={map.embedUrl}
+                style={{ border: 0 }}
+                allowFullScreen
+                loading="lazy"
+              ></iframe>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   );
 }

app/contact/types.ts

@@ -0,0 +1,44 @@
+export interface ContactCard {
+    type: string;
+    title: string;
+    content: string[];
+    iconType: string;
+}
+
+export interface ContactHero {
+    title: string;
+    backgroundImage: string;
+}
+
+export interface ContactMap {
+    embedUrl: string;
+}
+
+export interface ContactFormField {
+    name: string;
+    label: string;
+    type: string;
+    placeholder: string;
+    required: boolean;
+    colClass: string;
+}
+
+export interface ContactSubmitButton {
+    text: string;
+    icon: string;
+    buttonClass: string;
+}
+
+export interface ContactForm {
+    heading: string;
+    description: string;
+    fields: ContactFormField[];
+    submitButton: ContactSubmitButton;
+}
+
+export interface ContactData {
+    hero: ContactHero;
+    contactCards: ContactCard[];
+    map: ContactMap;
+    form: ContactForm;
+}

app/globals.css

@@ -1 +1,8 @@
-@import "tailwindcss";
+@import "tailwindcss";
+.collapse {
+  visibility: visible !important;
+}
+
+.collapse.show {
+  visibility: visible;
+}

app/layout.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import "./globals.css";
-
 import Loader from "./components/Loader";
 import BackToTop from "./components/BackToTop";
 import MouseCursor from "./components/MouseCursor";
@@ -51,19 +50,46 @@ export default function RootLayout({
         {children}
         <Footer />
         {/* Scripts */}
-        <Script src="/assets/js/jquery-3.7.1.min.js" strategy="beforeInteractive" />
-        <Script src="/assets/js/viewport.jquery.js" strategy="afterInteractive" />
-        <Script src="/assets/js/bootstrap.bundle.min.js" strategy="afterInteractive" />
-        <Script src="/assets/js/jquery.nice-select.min.js" strategy="afterInteractive" />
-        <Script src="/assets/js/jquery.waypoints.js" strategy="afterInteractive" />
+        <Script
+          src="/assets/js/jquery-3.7.1.min.js"
+          strategy="beforeInteractive"
+        />
+        <Script
+          src="/assets/js/viewport.jquery.js"
+          strategy="afterInteractive"
+        />
+        <Script
+          src="/assets/js/bootstrap.bundle.min.js"
+          strategy="afterInteractive"
+        />
+        <Script
+          src="/assets/js/jquery.nice-select.min.js"
+          strategy="afterInteractive"
+        />
+        <Script
+          src="/assets/js/jquery.waypoints.js"
+          strategy="afterInteractive"
+        />
         <Script src="/assets/js/odometer.min.js" strategy="afterInteractive" />
-        <Script src="/assets/js/swiper-bundle.min.js" strategy="afterInteractive" />
-        <Script src="/assets/js/jquery.meanmenu.min.js" strategy="afterInteractive" />
-        <Script src="/assets/js/jquery.magnific-popup.min.js" strategy="afterInteractive" />
+        <Script
+          src="/assets/js/swiper-bundle.min.js"
+          strategy="afterInteractive"
+        />
+        <Script
+          src="/assets/js/jquery.meanmenu.min.js"
+          strategy="afterInteractive"
+        />
+        <Script
+          src="/assets/js/jquery.magnific-popup.min.js"
+          strategy="afterInteractive"
+        />
         <Script src="/assets/js/wow.min.js" strategy="afterInteractive" />
         <Script src="/assets/js/gsap.js" strategy="afterInteractive" />
         <Script src="/assets/js/lenis.min.js" strategy="afterInteractive" />
-        <Script src="/assets/js/ScrollTrigger.min.js" strategy="afterInteractive" />
+        <Script
+          src="/assets/js/ScrollTrigger.min.js"
+          strategy="afterInteractive"
+        />
         <Script src="/assets/js/SplitText.min.js" strategy="afterInteractive" />
         <Script src="/assets/js/main.js" strategy="afterInteractive" />
       </body>

app/pricing/page.tsx

@@ -1,188 +1,260 @@
-import pricingData from "./pricing.json";
+import Breadcrumb from "../components/Breadcrumb";
+import { PricingData, PricingAPIResponse, Plan, TestimonialItem } from "./types";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
+
+async function getPricingData(): Promise<PricingData | null> {
+  try {
+    const res = await fetch(`${API_URL}/api/pricing`, {
+      next: { revalidate: 60 }, // Revalidate every 60 seconds
+    });
+    if (!res.ok) {
+      throw new Error("Failed to fetch pricing data");
+    }
+    const response: PricingAPIResponse = await res.json();
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching pricing data:", error);
+    return null;
+  }
+}
+
+// Component to render a single plan
+function PlanCard({ plan, index }: { plan: Plan; index: number }) {
+  const styleClass = plan.style === "style-2" ? " style-2" : "";
+  const buttonStyleClass = plan.style === "style-2" ? " style-2" : "";
 
-export default function PricingPage() {
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="max-w-6xl mx-auto">
-        {/* Header */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
-            {pricingData.title}
-          </h1>
-          <p className="text-xl text-gray-600 mb-4">{pricingData.subtitle}</p>
-          <p className="text-sm text-gray-500 bg-yellow-50 p-3 rounded-lg inline-block">
-            💡 {pricingData.note}
-          </p>
-        </div>
+    <div className={`pricing-box-items${styleClass}`}>
+      <div className="pricing-header">
+        <h2>
+          <sup>{plan.currency}</sup>
+          {plan.price}
+          <sub>/{plan.period}</sub>
+        </h2>
+        <span className="sub-texts">{plan.name}</span>
+      </div>
+      <a href={plan.buttonLink} className={`theme-btn${buttonStyleClass}`}>
+        {plan.buttonText}
+        <i className={plan.buttonIcon}></i>
+      </a>
+      <ul className="pricing-list">
+        {plan.features.map((feature, idx) => (
+          <li key={idx}>
+            <i className="fa-solid fa-chevrons-right"></i> {feature}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
 
-        {/* Pricing Packages */}
-        <div className="grid md:grid-cols-3 gap-8 mb-16">
-          {pricingData.packages.map((pkg) => (
-            <div
-              key={pkg.id}
-              className={`relative bg-white rounded-lg shadow-lg p-6 ${
-                pkg.popular ? "ring-2 ring-blue-500 transform scale-105" : ""
-              }`}
-            >
-              {/* Popular Badge */}
-              {pkg.popular && (
-                <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
-                  <span className="bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-medium">
-                    Phổ biến nhất
-                  </span>
-                </div>
-              )}
+// Component to render star rating
+function StarRating({ rating }: { rating: number }) {
+  return (
+    <div className="star">
+      {[...Array(rating)].map((_, i) => (
+        <i key={i} className="fa-solid fa-star"></i>
+      ))}
+    </div>
+  );
+}
 
-              {/* Package Header */}
-              <div className="text-center mb-6">
-                <h3 className="text-2xl font-bold text-gray-900 mb-2">
-                  {pkg.name}
-                </h3>
-                <p className="text-gray-600 mb-4">{pkg.description}</p>
-                <div className="text-3xl font-bold text-blue-600">
-                  {parseInt(pkg.price).toLocaleString()} {pkg.currency}
-                </div>
-              </div>
-
-              {/* Features */}
-              <div className="mb-6">
-                <h4 className="font-semibold text-gray-900 mb-3">Bao gồm:</h4>
-                <ul className="space-y-2">
-                  {pkg.features.map((feature, index) => (
-                    <li key={index} className="flex items-center text-gray-700">
-                      <span className="text-green-500 mr-2">✓</span>
-                      {feature}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-
-              {/* Limitations */}
-              {pkg.limitations.length > 0 && (
-                <div className="mb-6">
-                  <h4 className="font-semibold text-gray-900 mb-3">Lưu ý:</h4>
-                  <ul className="space-y-2">
-                    {pkg.limitations.map((limitation, index) => (
-                      <li
-                        key={index}
-                        className="flex items-center text-gray-600 text-sm"
-                      >
-                        <span className="text-orange-500 mr-2">⚠</span>
-                        {limitation}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-
-              {/* CTA Button */}
-              <button
-                className={`w-full py-3 px-6 rounded-lg font-medium transition-colors ${
-                  pkg.popular
-                    ? "bg-blue-600 text-white hover:bg-blue-700"
-                    : "bg-gray-100 text-gray-900 hover:bg-gray-200"
-                }`}
-              >
-                Chọn gói này
-              </button>
-            </div>
-          ))}
-        </div>
-
-        {/* Additional Services */}
-        <div className="mb-16">
-          <h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">
-            Dịch Vụ Bổ Sung
-          </h2>
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {pricingData.additionalServices.map((service, index) => (
-              <div
-                key={index}
-                className="bg-white rounded-lg shadow-md p-6 text-center"
-              >
-                <h3 className="font-semibold text-gray-900 mb-2">
-                  {service.name}
-                </h3>
-                <div className="text-2xl font-bold text-blue-600 mb-2">
-                  {parseInt(service.price).toLocaleString()} VNĐ
-                </div>
-                <div className="text-sm text-gray-500 mb-3">
-                  /{service.unit}
-                </div>
-                <p className="text-gray-700 text-sm">{service.description}</p>
-              </div>
-            ))}
+// Component to render testimonial slide
+function TestimonialSlide({ item }: { item: TestimonialItem }) {
+  return (
+    <div className="swiper-slide">
+      <div className="content">
+        <StarRating rating={item.rating} />
+        <h3>&ldquo;{item.content}&rdquo;</h3>
+        <div className="info-item">
+          <div className="icon">
+            <i className="fa-solid fa-quote-right"></i>
           </div>
-        </div>
-
-        {/* Country Pricing */}
-        <div>
-          <h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">
-            Phí Visa Theo Quốc Gia
-          </h2>
-          <div className="bg-white rounded-lg shadow-lg overflow-hidden">
-            <div className="overflow-x-auto">
-              <table className="w-full">
-                <thead className="bg-gray-50">
-                  <tr>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Quốc gia
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Phí visa
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Thời gian xử lý
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Tỷ lệ thành công
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="bg-white divide-y divide-gray-200">
-                  {pricingData.countries.map((country, index) => (
-                    <tr key={index} className="hover:bg-gray-50">
-                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                        {country.name}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                        {parseInt(country.visaFee).toLocaleString()} VNĐ
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                        {country.processingTime}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap">
-                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                          {country.successRate}
-                        </span>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-
-        {/* Contact CTA */}
-        <div className="text-center mt-12 bg-blue-50 rounded-lg p-8">
-          <h2 className="text-2xl font-bold text-gray-900 mb-4">
-            Cần Tư Vấn Chi Tiết?
-          </h2>
-          <p className="text-gray-700 mb-6">
-            Liên hệ với chúng tôi để được tư vấn miễn phí và nhận báo giá phù
-            hợp nhất
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <button className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors">
-              Tư vấn miễn phí
-            </button>
-            <button className="bg-white text-blue-600 border border-blue-600 px-8 py-3 rounded-lg hover:bg-blue-50 transition-colors">
-              Gọi ngay: 1900 1234
-            </button>
+          <div className="content">
+            <h5>{item.name},</h5>
+            <span>{item.role}</span>
           </div>
         </div>
       </div>
     </div>
   );
 }
+
+export default async function PricingPage() {
+  const data = await getPricingData();
+
+  // Fallback values if data is not available
+  const pricingSection = data?.pricingSection || {
+    subtitle: "pricing plan",
+    heading: "Flexible Plans to Suit Every Traveler",
+    description: "Choose the plan that fits your visa needs and enjoy expert guidance every step of the way.",
+  };
+
+  const plans = data?.plans || {
+    monthly: [],
+    yearly: [],
+  };
+
+  const testimonials = data?.testimonials || {
+    subtitle: "What Our Clients Say",
+    heading: "Immigration Success Stories",
+    buttonText: "View All Review",
+    buttonLink: "/contact",
+    buttonIcon: "fa-solid fa-arrow-right",
+    image: "/assets/img/home-3/test-thumb.jpg",
+    items: [],
+  };
+
+  const hero = data?.hero || {
+    title: "pricing plan",
+  };
+
+  return (
+    <>
+      {/* Breadcrumb-Wrapper Section Start */}
+      <Breadcrumb title={hero.title} current={hero.title} />
+
+      {/* Pricing Section Start */}
+      <section className="pricing-section-2 section-padding fix section-bg-1">
+        <div className="container">
+          <div className="pricing-wrapper-2">
+            <div className="row g-4 align-items-center">
+              <div className="col-xl-6 col-lg-5">
+                <div className="pricing-content">
+                  <div className="section-title mb-0">
+                    <span className="sub-title-2 wow fadeInUp">
+                      {pricingSection.subtitle}
+                    </span>
+                    <h2 className="split-text-right split-text-in-right">
+                      {pricingSection.heading}
+                    </h2>
+                  </div>
+                  <p className="pricing-text wow fadeInUp" data-wow-delay=".5s">
+                    {pricingSection.description}
+                  </p>
+                  <div
+                    className="d-flex mt-3 mt-md-0 wow fadeInUp"
+                    data-wow-delay=".5s"
+                  >
+                    <div className="pricing-two__tab">
+                      <nav>
+                        <div className="nav nav-tabs" id="nav-tab" role="tablist">
+                          <button
+                            className="nav-link active"
+                            id="pt-1-tab"
+                            data-bs-toggle="tab"
+                            data-bs-target="#pt-1"
+                            type="button"
+                            role="tab"
+                            aria-controls="pt-1"
+                            aria-selected="true"
+                          >
+                            Monthly
+                          </button>
+                          <button
+                            className="nav-link"
+                            id="pt-2-tab"
+                            data-bs-toggle="tab"
+                            data-bs-target="#pt-2"
+                            type="button"
+                            role="tab"
+                            aria-controls="pt-2"
+                            aria-selected="false"
+                            tabIndex={-1}
+                          >
+                            Yearly
+                          </button>
+                        </div>
+                      </nav>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="col-xl-6 col-lg-7">
+                <div className="pricing__tab-content">
+                  <div className="tab-content" id="nav-tabContent">
+                    {/* Monthly Plans Tab */}
+                    <div
+                      className="tab-pane fade active show"
+                      id="pt-1"
+                      role="tabpanel"
+                      aria-labelledby="pt-1-tab"
+                    >
+                      <div className="pricing-right-items">
+                        {plans.monthly.map((plan, index) => (
+                          <PlanCard key={index} plan={plan} index={index} />
+                        ))}
+                      </div>
+                    </div>
+                    {/* Yearly Plans Tab */}
+                    <div
+                      className="tab-pane fade"
+                      id="pt-2"
+                      role="tabpanel"
+                      aria-labelledby="pt-2-tab"
+                    >
+                      <div className="pricing-right-items">
+                        {plans.yearly.map((plan, index) => (
+                          <PlanCard key={index} plan={plan} index={index} />
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonial Section Start */}
+      <section className="testimonial-section section-padding fix">
+        <div className="container">
+          <div className="section-title-area">
+            <div className="section-title mb-0">
+              <span className="sub-title-2 wow fadeInUp">
+                {testimonials.subtitle}
+              </span>
+              <h2 className="split-text-right split-text-in-right">
+                {testimonials.heading}
+              </h2>
+            </div>
+            <a href={testimonials.buttonLink} className="theme-btn">
+              {testimonials.buttonText}
+              <i className={testimonials.buttonIcon}></i>
+            </a>
+          </div>
+          <div className="testimonial-wrapper-3">
+            <div className="row g-4 align-items-center">
+              <div className="col-lg-4">
+                <div className="testimonial-thumb">
+                  <img src={testimonials.image} alt="testimonial" />
+                </div>
+              </div>
+              <div className="col-lg-8">
+                <div className="testimonial-content">
+                  <div className="swiper testimonial-slider-3">
+                    <div className="swiper-wrapper">
+                      {testimonials.items.map((item, index) => (
+                        <TestimonialSlide key={index} item={item} />
+                      ))}
+                    </div>
+                  </div>
+                  <div className="array-buttons-3">
+                    <button className="array-prev">
+                      <i className="fa-solid fa-arrow-left"></i>
+                    </button>
+                    <button className="array-next">
+                      <i className="fa-solid fa-arrow-right"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/pricing/types.ts

@@ -0,0 +1,65 @@
+// Type definitions for Pricing page
+
+export interface BreadcrumbItem {
+    text: string;
+    link: string;
+}
+
+export interface Hero {
+    title: string;
+    backgroundImage: string;
+    shapeImage: string;
+    breadcrumb: BreadcrumbItem[];
+}
+
+export interface PricingSection {
+    subtitle: string;
+    heading: string;
+    description: string;
+}
+
+export interface Plan {
+    name: string;
+    price: string;
+    period: string;
+    currency: string;
+    buttonText: string;
+    buttonLink: string;
+    buttonIcon: string;
+    style: "default" | "style-2";
+    features: string[];
+}
+
+export interface Plans {
+    monthly: Plan[];
+    yearly: Plan[];
+}
+
+export interface TestimonialItem {
+    name: string;
+    role: string;
+    rating: number;
+    content: string;
+}
+
+export interface Testimonials {
+    subtitle: string;
+    heading: string;
+    buttonText: string;
+    buttonLink: string;
+    buttonIcon: string;
+    image: string;
+    items: TestimonialItem[];
+}
+
+export interface PricingData {
+    hero: Hero;
+    pricingSection: PricingSection;
+    plans: Plans;
+    testimonials: Testimonials;
+}
+
+export interface PricingAPIResponse {
+    success: boolean;
+    data: PricingData;
+}

app/services/details/[slug]/not-found.tsx

@@ -0,0 +1,56 @@
+export default function NotFound() {
+  return (
+    <>
+      <section
+        className="breadcrumb-wrapper fix bg-cover"
+        style={{
+          backgroundImage: "url(/assets/img/inner-page/breadcrumb.jpg)",
+        }}
+      >
+        <div className="shape">
+          <img src="/assets/img/inner-page/shape.png" alt="img" />
+        </div>
+        <div className="container">
+          <div className="page-heading">
+            <h1 className="breadcrumb-title">Service Not Found</h1>
+            <ul className="breadcrumb-list">
+              <li>
+                <a href="/">Home</a>
+              </li>
+              <li>
+                <i className="fa-solid fa-chevron-right"></i>
+              </li>
+              <li>
+                <a href="/services">Services</a>
+              </li>
+              <li>
+                <i className="fa-solid fa-chevron-right"></i>
+              </li>
+              <li>
+                <a href="#">Not Found</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <section className="section-padding">
+        <div className="container">
+          <div className="row justify-content-center">
+            <div className="col-lg-8 text-center">
+              <h2>Service Not Found</h2>
+              <p className="mb-4">
+                The service you're looking for could not be found. Please check
+                the URL or return to our services page.
+              </p>
+              <a href="/services" className="theme-btn">
+                Back to Services
+                <i className="fa-solid fa-arrow-right"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/services/details/[slug]/page.tsx

@@ -0,0 +1,173 @@
+import { Metadata } from "next";
+import { fetchServiceBySlug } from "../../../../api/servicesApi";
+import { notFound } from "next/navigation";
+import { imageUrl } from "../../../utils/image";
+import Breadcrumb from "../../../components/Breadcrumb";
+
+interface ServiceDetailsPageProps {
+  params: Promise<{
+    slug: string;
+  }>;
+}
+
+export async function generateMetadata({
+  params,
+}: ServiceDetailsPageProps): Promise<Metadata> {
+  try {
+    const { slug } = await params;
+    const data = await fetchServiceBySlug(slug);
+    if (!data || !data.serviceDetails) {
+      return {
+        title: "Service Not Found",
+        description: "The requested service could not be found.",
+      };
+    }
+
+    return {
+      title: `${data.serviceDetails.content.title} - Visaway Immigration Services`,
+      description: data.serviceDetails.content.description,
+    };
+  } catch (error) {
+    return {
+      title: "Service Not Found",
+      description: "The requested service could not be found.",
+    };
+  }
+}
+
+export default async function ServiceDetailsPage({
+  params,
+}: ServiceDetailsPageProps) {
+  try {
+    const { slug } = await params;
+    console.log("Service details page - slug:", slug);
+
+    const data = await fetchServiceBySlug(slug);
+
+    if (!data || !data.serviceDetails) {
+      notFound();
+    }
+
+    const { serviceDetails } = data;
+    const { content, keyFeatures, faq } = serviceDetails;
+
+    return (
+      <>
+        {/* Breadcrumb Section */}
+        <Breadcrumb title="Services Details" current="Service Details" />
+
+        {/* Service-details Section Start */}
+        <section className="service-details-section section-padding fix">
+          <div className="container">
+            <div className="service-details-wrapper">
+              <div className="row">
+                <div className="col-xl-12">
+                  <div className="service-details-post">
+                    <h2>{content.title}</h2>
+                    <p className="mt-2">{content.description}</p>
+                    <div className="details-image">
+                      <img src={imageUrl(content.mainImage)} alt="img" />
+                    </div>
+                    <h3 className="text">{content.overviewTitle}</h3>
+                    <p className="mt-3 mb-3">{content.overviewDescription}</p>
+                    <p className="mb-4">{content.additionalDescription}</p>
+
+                    <div className="row g-4">
+                      <div className="col-lg-6">
+                        <div className="service-left-content">
+                          <h3>{keyFeatures.title}</h3>
+                          <ul className="list-item">
+                            {keyFeatures.items.map(
+                              (feature: any, index: number) => (
+                                <li key={index}>
+                                  <i className="fa-solid fa-chevrons-right"></i>
+                                  <span>{feature.title} -</span>
+                                  {feature.description}
+                                </li>
+                              ),
+                            )}
+                          </ul>
+                        </div>
+                      </div>
+                      <div className="col-lg-6">
+                        <div className="thumb">
+                          <img
+                            src={imageUrl(keyFeatures.sideImage)}
+                            alt="img"
+                          />
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="row mt-4 mt-xl-0 g-4">
+                      <div className="col-lg-6">
+                        <div className="thumb">
+                          <img src={imageUrl(faq.sideImage)} alt="img" />
+                        </div>
+                      </div>
+                      <div className="col-lg-6">
+                        <div className="faq-items">
+                          <h3 className="mb-3">{faq.title}</h3>
+                          <div className="accordion" id="accordionExample">
+                            {faq.items.map((faqItem: any, index: number) => {
+                              const isExpanded = faqItem.isExpanded;
+                              const questionNumber = String(index + 1).padStart(
+                                2,
+                                "0",
+                              );
+                              return (
+                                <div
+                                  key={`faq-${index}`}
+                                  className="accordion-item wow fadeInUp"
+                                  data-wow-delay={`.${(index + 1) * 2}s`}
+                                >
+                                  <h5
+                                    className="accordion-header"
+                                    id={`heading${index}`}
+                                  >
+                                    <button
+                                      className={`accordion-button ${!isExpanded ? "collapsed" : ""}`}
+                                      type="button"
+                                      data-bs-toggle="collapse"
+                                      data-bs-target={`#collapse${index}`}
+                                      aria-expanded={
+                                        isExpanded ? "true" : "false"
+                                      }
+                                      aria-controls={`collapse${index}`}
+                                    >
+                                      {questionNumber}. {faqItem.question}
+                                    </button>
+                                  </h5>
+                                  <div
+                                    id={`collapse${index}`}
+                                    className={`accordion-collapse collapse ${isExpanded ? "show" : ""}`}
+                                    aria-labelledby={`heading${index}`}
+                                    data-bs-parent="#accordionExample"
+                                  >
+                                    <div className="accordion-body">
+                                      <p>{faqItem.answer}</p>
+                                    </div>
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </>
+    );
+  } catch (error) {
+    console.error("Error loading service details:", error);
+    const { slug } = await params;
+    console.log("Slug that failed:", slug);
+    console.log("Falling back to not found page");
+    notFound();
+  }
+}

app/services/page.tsx

@@ -1,73 +1,263 @@
-import servicesData from "./services.json";
+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",
+};
+
+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",
+    },
+  ];
 
-export default function ServicesPage() {
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="max-w-6xl mx-auto">
-        {/* Header */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
-            {servicesData.title}
-          </h1>
-          <p className="text-xl text-gray-600">{servicesData.subtitle}</p>
-        </div>
+    <>
+      {/* Breadcrumb Section */}
+      <Breadcrumb title="Services" current="Services" />
 
-        {/* Services Grid */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-2 gap-8">
-          {servicesData.services.map((service) => (
-            <div
-              key={service.id}
-              className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow"
-            >
-              {/* Service Header */}
-              <div className="flex items-center mb-4">
-                <span className="text-4xl mr-4">{service.icon}</span>
-                <div>
-                  <h3 className="text-xl font-semibold text-gray-900">
-                    {service.name}
-                  </h3>
-                  <p className="text-blue-600 font-medium">{service.price}</p>
+      {/* Service Section Start */}
+      <section className="service-section section-padding fix section-bg-1">
+        <div className="container">
+          <div className="section-title text-center">
+            <span className="sub-title-2 wow fadeInUp">
+              {services.title.subTitle}
+            </span>
+            <h2 className="split-text-right split-text-in-right">
+              {services.title.mainTitle}
+            </h2>
+          </div>
+          <div className="row">
+            <div className="col-xl-12">
+              {services.items.map((service: any) => (
+                <div
+                  key={service.id}
+                  className={`service-main-item-3 ${service.layout === "right" ? "style-2" : ""} fade-up-anim`}
+                >
+                  {service.layout === "right" && (
+                    <div className="service-button">
+                      <a
+                        href={`/services/details/${service.slug}`}
+                        className="theme-btn"
+                      >
+                        read more
+                        <i className="fa-solid fa-arrow-right"></i>
+                      </a>
+                    </div>
+                  )}
+                  <div className="service-left">
+                    {service.layout === "left" && (
+                      <div className="service-image">
+                        <img src={imageUrl(service.image)} alt="img" />
+                      </div>
+                    )}
+                    <div className="content">
+                      <h3>
+                        <a href={`/services/details/${service.slug}`}>
+                          {service.name}
+                        </a>
+                      </h3>
+                      <p>{service.description}</p>
+                    </div>
+                    {service.layout === "right" && (
+                      <div className="service-image">
+                        <img src={imageUrl(service.image)} alt="img" />
+                      </div>
+                    )}
+                  </div>
+                  {service.layout === "left" && (
+                    <div className="service-button">
+                      <a
+                        href={`/services/details/${service.slug}`}
+                        className="theme-btn"
+                      >
+                        read more
+                        <i className="fa-solid fa-arrow-right"></i>
+                      </a>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Destination-Offer Section Start */}
+      <section className="destination-offer-section section-padding fix">
+        <div className="bg-image">
+          <img src={imageUrl(destinations.backgroundImage)} alt="img" />
+        </div>
+        <div className="container">
+          <div className="section-title">
+            <span className="sub-title-2 theme wow fadeInUp">
+              {destinations.title.subTitle}
+            </span>
+            <h2 className="split-text-right split-text-in-right text-white">
+              {destinations.title.mainTitle}
+            </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) => (
+              <div key={country.id} className="col destination-offer-item">
+                <div className="choose-us-image">
+                  <img src={imageUrl(country.image)} alt="img" />
+                </div>
+                <div className="choose-us-content">
+                  <div className="icon-item">
+                    <div className="icon">
+                      <img src={imageUrl(country.icon)} alt="img" />
+                    </div>
+                    <h5>
+                      <a href={country.link}>{country.name}</a>
+                    </h5>
+                  </div>
+                  <p>{country.description}</p>
                 </div>
               </div>
+            ))}
+          </div>
+        </div>
+      </section>
 
-              {/* Description */}
-              <p className="text-gray-700 mb-6">{service.description}</p>
-
-              {/* Features */}
-              <div className="mb-6">
-                <h4 className="font-semibold text-gray-900 mb-3">Tính năng:</h4>
-                <ul className="space-y-2">
-                  {service.features.map((feature, index) => (
-                    <li key={index} className="flex items-center text-gray-700">
-                      <span className="text-green-500 mr-2">✓</span>
-                      {feature}
-                    </li>
-                  ))}
-                </ul>
+      {/* Service-Visa Section Start */}
+      {/* <section className="service-visa-section fix">
+        <div className="container">
+          <div className="service-visa-wrapper">
+            {visas.items.map((visa: any, index: number) => (
+              <div
+                key={visa.id}
+                className={`service-visa-items ${index > 0 ? "style-2" : ""}`}
+              >
+                <div className="top-item">
+                  <h4 className="number">{visa.number}</h4>
+                  <h3>
+                    <a href={visa.buttonLink}>{visa.name}</a>
+                  </h3>
+                </div>
+                <p>{visa.description}</p>
+                <a href={visa.buttonLink} className="service-button">
+                  {visa.buttonText}
+                </a>
               </div>
+            ))}
+          </div>
+        </div>
+      </section> */}
 
-              {/* CTA Button */}
-              <button className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">
-                Tìm Hiểu Thêm
-              </button>
+      {/* Testimonial Section3 Start */}
+      <section className="testimonial-section section-padding fix">
+        <div className="container">
+          <div className="section-title-area">
+            <div className="section-title mb-0">
+              <span className="sub-title-2 wow fadeInUp">
+                {reviews.title.subTitle}
+              </span>
+              <h2 className="split-text-right split-text-in-right">
+                {reviews.title.mainTitle}
+              </h2>
             </div>
-          ))}
+            <a href="#" className="theme-btn">
+              View All Review
+              <i className="fa-solid fa-arrow-right"></i>
+            </a>
+          </div>
+          <div className="testimonial-wrapper-3">
+            <div className="row g-4 align-items-center">
+              <div className="col-lg-4">
+                <div className="testimonial-thumb">
+                  <img src={imageUrl(reviews.thumb)} alt="img" />
+                </div>
+              </div>
+              <div className="col-lg-8">
+                <div className="testimonial-content">
+                  <div className="swiper testimonial-slider-3">
+                    <div className="swiper-wrapper">
+                      {reviews.items.map((testimonial: any) => (
+                        <div key={testimonial.id} className="swiper-slide">
+                          <div className="content">
+                            <div className="star">
+                              {[...Array(testimonial.rating)].map(
+                                (_: any, i: number) => (
+                                  <i key={i} className="fa-solid fa-star"></i>
+                                ),
+                              )}
+                            </div>
+                            <h3>"{testimonial.content}"</h3>
+                            <div className="info-item">
+                              <div className="icon">
+                                <i className={testimonial.icon}></i>
+                              </div>
+                              <div className="content">
+                                <h5>{testimonial.author.name}</h5>
+                                <span>{testimonial.author.type}</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="array-buttons-3">
+                    <button className="array-prev">
+                      <i className="fa-solid fa-arrow-left"></i>
+                    </button>
+                    <button className="array-next">
+                      <i className="fa-solid fa-arrow-right"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-
-        {/* Contact CTA */}
-        <div className="text-center mt-12 bg-gray-50 rounded-lg p-8">
-          <h2 className="text-2xl font-bold text-gray-900 mb-4">
-            Cần Tư Vấn Thêm?
-          </h2>
-          <p className="text-gray-700 mb-6">
-            Liên hệ với chúng tôi để được tư vấn miễn phí và nhận báo giá chi
-            tiết
-          </p>
-          <button className="bg-green-600 text-white px-8 py-3 rounded-lg hover:bg-green-700 transition-colors">
-            Liên Hệ Ngay
-          </button>
-        </div>
-      </div>
-    </div>
+      </section>
+    </>
   );
 }

app/utils/image.ts

@@ -0,0 +1,13 @@
+export const imageUrl = (path?: string) => {
+  // Không có ảnh → ảnh mặc định
+  if (!path) return "/_images/default.jpg";
+
+  // Đã là full URL
+  if (path.startsWith("http")) return path;
+
+  const base = (
+    process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001"
+  ).replace(/\/$/, "");
+
+  return `${base}/${path.replace(/^\//, "")}`;
+};