refactor ui and json data about

This commit is contained in:
2026-02-02 22:29:31 +07:00
parent bf652a64b6
commit 1add9d4d9d
11 changed files with 344 additions and 410 deletions

View File

@@ -1,62 +1,44 @@
import Link from 'next/link';
import Link from "next/link";
import { AboutData } from "../../about/types";
const AboutFeatures = () => {
interface AboutFeaturesProps {
data: AboutData["features"];
}
const AboutFeatures = ({ data }: AboutFeaturesProps) => {
return (
<section className="choose-us-section-2 section-padding fix bg-cover" style={{ backgroundImage: 'url(/assets/img/home-2/feature/bg-shape.png)' }}>
<section
className="choose-us-section-2 section-padding fix bg-cover"
style={{ backgroundImage: `url(${data.backgroundImage})` }}
>
<div className="container">
<div className="choose-us-wrapper-2">
<div className="row g-4">
<div className="col-lg-6">
<div className="choose-us-image">
<img src="/assets/img/home-2/feature/02.png" alt="img" />
<img src={data.image} alt="img" />
</div>
</div>
<div className="col-lg-6">
<div className="feature-content">
<div className="section-title mb-0">
<span className="sub-title-2 wow fadeInUp">Your Travel Made Easy</span>
<h2 className="split-text-right split-text-in-right">
Smooth Visa Journey Guaranteed
</h2>
<span className="sub-title-2 wow fadeInUp">{data.subheading}</span>
<h2 className="split-text-right split-text-in-right">{data.heading}</h2>
</div>
<p className="text">
We provide expert guidance for every visa application, ensuring smooth processing, personalized support, and reliable assistance
</p>
<div className="choose-us-box">
<div className="icon">
<img src="/assets/img/home-2/icon/01.png" alt="img" />
<p className="text">{data.description}</p>
{data.items.map((item, index) => (
<div key={index} className="choose-us-box">
<div className="icon">
<img src={item.icon} alt="img" />
</div>
<div className="content">
<h5>{item.title}</h5>
<p>{item.description}</p>
</div>
</div>
<div className="content">
<h5>Expert Consultants</h5>
<p>
Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors.
</p>
</div>
</div>
<div className="choose-us-box">
<div className="icon">
<img src="/assets/img/home-2/icon/01.png" alt="img" />
</div>
<div className="content">
<h5>Personalized Support</h5>
<p>
Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors.
</p>
</div>
</div>
<div className="choose-us-box">
<div className="icon">
<img src="/assets/img/home-2/icon/01.png" alt="img" />
</div>
<div className="content">
<h5>Transparent Process</h5>
<p>
Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors.
</p>
</div>
</div>
<Link href="/contact" className="theme-btn">
Get Started Today
))}
<Link href={data.ctaButton.href} className="theme-btn">
{data.ctaButton.label}
<i className="fa-solid fa-arrow-right"></i>
</Link>
</div>