forked from UKSOURCE/hailearning.edu.vn
83 lines
3.6 KiB
TypeScript
83 lines
3.6 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
interface VisaCountriesProps {
|
|
data: {
|
|
heading: string;
|
|
subheading: string;
|
|
description: string;
|
|
countries: {
|
|
name: string;
|
|
code: string;
|
|
flag: string;
|
|
link: string;
|
|
visaTypes: string[];
|
|
}[];
|
|
ctaButton: {
|
|
label: string;
|
|
href: string;
|
|
};
|
|
};
|
|
}
|
|
|
|
const VisaCountries = ({ data }: VisaCountriesProps) => {
|
|
// Display the first country as featured
|
|
const featuredCountry = data.countries[0];
|
|
const halfLength = Math.ceil(featuredCountry.visaTypes.length / 2);
|
|
const firstColumn = featuredCountry.visaTypes.slice(0, halfLength);
|
|
const secondColumn = featuredCountry.visaTypes.slice(halfLength);
|
|
|
|
return (
|
|
<section className="feature-section section-padding fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/feature/bg.png')" }}>
|
|
<div className="container">
|
|
<div className="feature-wrapper">
|
|
<div className="row g-4">
|
|
<div className="col-lg-6">
|
|
<div className="feature-content">
|
|
<div className="section-title mb-0">
|
|
<span className="sub-title bg-2 wow fadeInUp">{data.subheading}</span>
|
|
<h2 className="text-white split-text-right split-text-in-right">
|
|
{data.heading}
|
|
</h2>
|
|
</div>
|
|
<p className="text wow fadeInUp" data-wow-delay=".3s">
|
|
{data.description}
|
|
</p>
|
|
<div className="feature-list-item wow fadeInUp" data-wow-delay=".5s">
|
|
<ul className="list">
|
|
{firstColumn.map((visaType, index) => (
|
|
<li key={index}>
|
|
<i className="fa-solid fa-arrow-right"></i>
|
|
{visaType}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<ul className="list">
|
|
{secondColumn.map((visaType, index) => (
|
|
<li key={index}>
|
|
<i className="fa-solid fa-arrow-right"></i>
|
|
{visaType}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<Link href={data.ctaButton.href} className="theme-btn">
|
|
{data.ctaButton.label}
|
|
<i className="fa-solid fa-arrow-right"></i>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div className="feature-image">
|
|
<img src={featuredCountry.flag} alt="img" />
|
|
<h6>{featuredCountry.code}.{featuredCountry.name}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default VisaCountries;
|