forked from UKSOURCE/hailearning.edu.vn
260 lines
9.6 KiB
TypeScript
260 lines
9.6 KiB
TypeScript
import { Metadata } from "next";
|
|
import { fetchServicePageData } from "../../api/servicesApi";
|
|
import { imageUrl } from "../utils/image";
|
|
import Breadcrumb from "../components/Breadcrumb";
|
|
import "./services.css";
|
|
|
|
export default async function ServicesPage() {
|
|
const data = await fetchServicePageData();
|
|
const { services, destinations, visas, reviews } = data;
|
|
const country = [
|
|
{
|
|
id: "canada",
|
|
name: "Canada",
|
|
description:
|
|
"Canada provides quality education, rich culture and global opportunities",
|
|
image: "img/home-3/choose-us/01.jpg",
|
|
icon: "img/home-3/choose-us/icon-1.png",
|
|
link: "country-details.html",
|
|
},
|
|
{
|
|
id: "south-korea",
|
|
name: "South Korea",
|
|
description:
|
|
"South Korea offers advanced technology and cultural experiences",
|
|
image: "img/home-3/choose-us/02.jpg",
|
|
icon: "img/home-3/choose-us/icon-2.png",
|
|
link: "country-details.html",
|
|
},
|
|
{
|
|
id: "france",
|
|
name: "France",
|
|
description:
|
|
"France offers rich cultural heritage and educational excellence",
|
|
image: "img/home-3/choose-us/03.jpg",
|
|
icon: "img/home-3/choose-us/icon-3.png",
|
|
link: "country-details.html",
|
|
},
|
|
{
|
|
id: "uk",
|
|
name: "UK",
|
|
description: "UK provides world-class education and career opportunities",
|
|
image: "img/home-3/choose-us/04.jpg",
|
|
icon: "img/home-3/choose-us/icon-2.png",
|
|
link: "country-details.html",
|
|
},
|
|
{
|
|
id: "germany",
|
|
name: "Germany",
|
|
description: "Germany offers excellent education and strong economy",
|
|
image: "img/home-3/choose-us/05.jpg",
|
|
icon: "img/home-3/choose-us/icon-3.png",
|
|
link: "country-details.html",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{/* Breadcrumb Section */}
|
|
<Breadcrumb title="Services" current="Services" />
|
|
|
|
{/* 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.slug}
|
|
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>
|
|
|
|
{/* 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> */}
|
|
|
|
{/* 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="/contact" 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>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|