forked from UKSOURCE/hailearning.edu.vn
build ui header, footer, home page, about page
This commit is contained in:
47
app/components/home/Achievements.tsx
Normal file
47
app/components/home/Achievements.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
interface AchievementsProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
items: {
|
||||
value: string;
|
||||
suffix: string;
|
||||
label: string;
|
||||
description: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const Achievements = ({ data }: AchievementsProps) => {
|
||||
return (
|
||||
<section className="counter-section section-padding pb-0 fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/feature/bg-2.jpg')" }}>
|
||||
<div className="shape">
|
||||
<img src="/assets/img/home-1/feature/shape-2.png" alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<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>
|
||||
</div>
|
||||
<div className="counter-wrapper">
|
||||
<div className="container">
|
||||
<div className="counter-main-item">
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className={`counter-item ${index < 3 ? 'style-2' : ''}`}>
|
||||
<h2><span className="odometer" data-count={item.value}>00</span>{item.suffix}</h2>
|
||||
<h5>{item.label}</h5>
|
||||
<p>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Achievements;
|
||||
89
app/components/home/BlogPreview.tsx
Normal file
89
app/components/home/BlogPreview.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface BlogPreviewProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
ctaButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
items: {
|
||||
title: string;
|
||||
excerpt: string;
|
||||
category: string;
|
||||
date: string;
|
||||
author: {
|
||||
name: string;
|
||||
avatar: string;
|
||||
};
|
||||
comments: number;
|
||||
link: string;
|
||||
thumbnail: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const BlogPreview = ({ data }: BlogPreviewProps) => {
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' });
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="news-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="section-title-area">
|
||||
<div className="section-title">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
<Link href={data.ctaButton.href} className="theme-btn wow fadeInUp" data-wow-delay=".3s">
|
||||
{data.ctaButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="row">
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay={`.${(index + 1) * 2 + 1}s`}>
|
||||
<div className="news-card-item">
|
||||
<div className="news-image">
|
||||
<img src={item.thumbnail} alt="img" />
|
||||
<span>{item.category}</span>
|
||||
<div className="news-layer-wrapper">
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="news-content">
|
||||
<div className="list">
|
||||
<span>Comment ({item.comments.toString().padStart(2, '0')})</span>
|
||||
<span>_ {formatDate(item.date)}</span>
|
||||
</div>
|
||||
<h3>
|
||||
<Link href={item.link}>
|
||||
{item.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<div className="news-bottom">
|
||||
<div className="info-item">
|
||||
<img src={item.author.avatar} alt="img" />
|
||||
<span>By {item.author.name}</span>
|
||||
</div>
|
||||
<Link href={item.link} className="link-btn">View Articles<i className="fa-solid fa-arrow-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogPreview;
|
||||
83
app/components/home/FAQSection.tsx
Normal file
83
app/components/home/FAQSection.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface FAQSectionProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
description: string;
|
||||
ctaButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
items: {
|
||||
question: string;
|
||||
answer: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const FAQSection = ({ data }: FAQSectionProps) => {
|
||||
return (
|
||||
<section className="faq-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="faq-wrapper">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-5">
|
||||
<div className="faq-content">
|
||||
<div className="section-title mb-0">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text">
|
||||
{data.description}
|
||||
</p>
|
||||
<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-7">
|
||||
<div className="faq-items">
|
||||
<div className="accordion" id="accordionExample">
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className="accordion-item wow fadeInUp" data-wow-delay={`.${(index + 1) * 2}s`}>
|
||||
<h5 className="accordion-header" id={`heading${index}`}>
|
||||
<button
|
||||
className={`accordion-button ${index !== 1 ? 'collapsed' : ''}`}
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target={`#collapse${index}`}
|
||||
aria-expanded={index === 1 ? 'true' : 'false'}
|
||||
aria-controls={`collapse${index}`}
|
||||
>
|
||||
{item.question}
|
||||
</button>
|
||||
</h5>
|
||||
<div
|
||||
id={`collapse${index}`}
|
||||
className={`accordion-collapse collapse ${index === 1 ? 'show' : ''}`}
|
||||
aria-labelledby={`heading${index}`}
|
||||
data-bs-parent="#accordionExample"
|
||||
>
|
||||
<div className="accordion-body">
|
||||
<p>
|
||||
{item.answer}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FAQSection;
|
||||
100
app/components/home/HeroSection.tsx
Normal file
100
app/components/home/HeroSection.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface HeroSectionProps {
|
||||
data: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
description: string;
|
||||
primaryButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
secondaryButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
backgroundImage: string;
|
||||
videoUrl: string;
|
||||
};
|
||||
}
|
||||
|
||||
const HeroSection = ({ data }: HeroSectionProps) => {
|
||||
return (
|
||||
<section className="hero-section hero-1 fix bg-cover" style={{ backgroundImage: `url('${data.backgroundImage}')` }}>
|
||||
<div className="left-shape">
|
||||
<img src="/assets/img/home-1/hero/sape-2.png" alt="img" />
|
||||
</div>
|
||||
<div className="hero-shape">
|
||||
<img src="/assets/img/home-1/hero/shape.png" alt="img" />
|
||||
</div>
|
||||
<div className="top-shape">
|
||||
<img src="/assets/img/home-1/hero/shape-3.png" alt="img" />
|
||||
</div>
|
||||
<div className="right-shape">
|
||||
<img src="/assets/img/home-1/hero/shape-4.png" alt="img" />
|
||||
</div>
|
||||
<div className="pagi-item">
|
||||
<div className="dot-number">
|
||||
<span className="dot-num">
|
||||
<span>03</span>
|
||||
</span>
|
||||
<span className="dot-num">
|
||||
<span>05</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-fluid">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="swiper hero-slider">
|
||||
<div className="swiper-wrapper">
|
||||
<div className="swiper-slide">
|
||||
<div className="hero-content">
|
||||
<h6>{data.subtitle}</h6>
|
||||
<h1>
|
||||
{data.title}
|
||||
<a href={data.videoUrl} className="video-btn video-popup">
|
||||
<i className="fa-solid fa-play"></i>
|
||||
</a>
|
||||
</h1>
|
||||
<p>
|
||||
{data.description}
|
||||
</p>
|
||||
<div className="hero-button">
|
||||
<Link href={data.primaryButton.href} className="theme-btn">
|
||||
{data.primaryButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
<Link href={data.secondaryButton.href} className="theme-btn style-2">
|
||||
{data.secondaryButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="swiper image-slider">
|
||||
<div className="swiper-wrapper">
|
||||
<div className="swiper-slide">
|
||||
<div className="hero-image">
|
||||
<img src="/assets/img/home-1/hero/man.png" alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<div className="hero-image">
|
||||
<img src="/assets/img/home-1/hero/man.png" alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroSection;
|
||||
58
app/components/home/Partners.tsx
Normal file
58
app/components/home/Partners.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
interface PartnersProps {
|
||||
data: {
|
||||
heading: string;
|
||||
items: {
|
||||
name: string;
|
||||
logo: string;
|
||||
year: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const Partners = ({ data }: PartnersProps) => {
|
||||
return (
|
||||
<>
|
||||
{/* Awards Section */}
|
||||
<section className="visa-consultency-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="row g-4">
|
||||
{data.items.slice(0, 4).map((partner, index) => (
|
||||
<div key={index} className="col-xl-3 col-lg-4 col-md-6">
|
||||
<div className="visa-consultency-item">
|
||||
<div className="image">
|
||||
<img src={partner.logo} alt="img" />
|
||||
</div>
|
||||
<h3>{partner.name}</h3>
|
||||
<h6>{partner.year}</h6>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Brand Partners Section */}
|
||||
<div className="brand-section fix">
|
||||
<div className="container">
|
||||
<div className="brand-wrapper style-1">
|
||||
<div className="brand-item">
|
||||
<div className="swiper brand-slider">
|
||||
<div className="swiper-wrapper">
|
||||
{data.items.slice(4).map((partner, index) => (
|
||||
<div key={index} className="swiper-slide">
|
||||
<div className="brand-image text-center">
|
||||
<img src={partner.logo} alt={partner.name} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Partners;
|
||||
74
app/components/home/Testimonials.tsx
Normal file
74
app/components/home/Testimonials.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
interface TestimonialsProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
videoUrl: string;
|
||||
videoThumbnail: string;
|
||||
items: {
|
||||
name: string;
|
||||
role: string;
|
||||
country: string;
|
||||
rating: number;
|
||||
comment: string;
|
||||
avatar: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const Testimonials = ({ data }: TestimonialsProps) => {
|
||||
return (
|
||||
<section className="testimonial-section section-padding pb-0 fix">
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="testimonial-wrapper">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-4">
|
||||
<div className="testimonia-image tp-clip-anim p-relative">
|
||||
<img src={data.videoThumbnail} alt="img" className="tp-anim-img" data-animate="true" />
|
||||
<a href={data.videoUrl} className="video-btn video-popup">
|
||||
<i className="fa-solid fa-play"></i></a>
|
||||
<h5>Real stories</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-8">
|
||||
<div className="swiper testimonial-slider">
|
||||
<div className="swiper-wrapper">
|
||||
{data.items.map((testimonial, index) => (
|
||||
<div key={index} className="swiper-slide">
|
||||
<div className="testimonial-box">
|
||||
<div className="star">
|
||||
{Array.from({ length: testimonial.rating }).map((_, i) => (
|
||||
<i key={i} className="fa-solid fa-star"></i>
|
||||
))}
|
||||
</div>
|
||||
<p>
|
||||
{testimonial.comment}
|
||||
</p>
|
||||
<div className="info-item">
|
||||
<div className="client-image">
|
||||
<img src={testimonial.avatar} alt="img" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5>{testimonial.name}</h5>
|
||||
<span>{testimonial.country}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonials;
|
||||
35
app/components/home/VideoGallery.tsx
Normal file
35
app/components/home/VideoGallery.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
interface VideoGalleryProps {
|
||||
data: {
|
||||
heading: string;
|
||||
videoUrl: string;
|
||||
thumbnail: string;
|
||||
};
|
||||
}
|
||||
|
||||
const VideoGallery = ({ data }: VideoGalleryProps) => {
|
||||
return (
|
||||
<section className="video-section bg-cover">
|
||||
<video autoPlay loop muted playsInline className="video-bg">
|
||||
<source src={data.videoUrl} type="video/mp4" />
|
||||
</video>
|
||||
<div className="text-image">
|
||||
<img src="/assets/img/home-1/feature/text.png" alt="img" />
|
||||
</div>
|
||||
<div className="text-image-2">
|
||||
<img src="/assets/img/home-1/feature/text-2.png" alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="video-content">
|
||||
<div className="shape">
|
||||
<img src="/assets/img/home-1/feature/Vector.png" alt="img" />
|
||||
</div>
|
||||
<h2 className="split-text-right split-text-in-right">{data.heading.split(' ').map((word, index) => (
|
||||
<span key={index}>{word}{index === 0 ? <br /> : ' '}</span>
|
||||
))}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoGallery;
|
||||
82
app/components/home/VisaCountries.tsx
Normal file
82
app/components/home/VisaCountries.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
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;
|
||||
52
app/components/home/VisaSolutions.tsx
Normal file
52
app/components/home/VisaSolutions.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface VisaSolutionsProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
items: {
|
||||
number: string;
|
||||
title: string;
|
||||
description: string;
|
||||
link: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const VisaSolutions = ({ data }: VisaSolutionsProps) => {
|
||||
return (
|
||||
<div className="service-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className={`service-wrapper ${index === 1 ? 'active' : ''}`}>
|
||||
<div className="container">
|
||||
<div className="service-item">
|
||||
<div className="image-hover d-none d-md-block bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/hover-bg.jpg')" }}></div>
|
||||
<div className="left-item">
|
||||
<h5 className="number">{item.number}</h5>
|
||||
<h3>
|
||||
<Link href={item.link}>{item.title}</Link>
|
||||
</h3>
|
||||
</div>
|
||||
<div className="right-item">
|
||||
<p>
|
||||
{item.description}
|
||||
</p>
|
||||
<Link href={item.link} className="service-btn">Service Details <i className="fa-solid fa-arrow-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VisaSolutions;
|
||||
87
app/components/home/WhyChooseUs.tsx
Normal file
87
app/components/home/WhyChooseUs.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface WhyChooseUsProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
description: string;
|
||||
items: {
|
||||
icon: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}[];
|
||||
features: string[];
|
||||
ctaButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const WhyChooseUs = ({ data }: WhyChooseUsProps) => {
|
||||
return (
|
||||
<section className="about-section section-padding fix pb-0">
|
||||
<div className="top-shape">
|
||||
<img src="/assets/img/home-1/about/globe.png" alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="about-wrapper">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-6">
|
||||
<div className="about-image">
|
||||
<img src="/assets/img/home-1/about/about-1.jpg" alt="img" className="wow img-custom-anim-left" />
|
||||
<div className="about-image-2">
|
||||
<img src="/assets/img/home-1/about/about-02.jpg" alt="img" className="wow img-custom-anim-right" />
|
||||
</div>
|
||||
<div className="bg-shape">
|
||||
<img src="/assets/img/home-1/about/Vector.png" alt="img" />
|
||||
</div>
|
||||
<div className="plane-shape float-bob-y">
|
||||
<img src="/assets/img/home-1/about/plane.png" alt="img" />
|
||||
</div>
|
||||
<div className="top-shape float-bob-y">
|
||||
<img src="/assets/img/home-1/about/shape.png" alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="about-content">
|
||||
<div className="section-title mb-0">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading.split(' Dreams ')[0]} <span>Dreams</span> {data.heading.split(' Dreams ')[1]}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text wow fadeInUp" data-wow-delay=".3s">
|
||||
{data.description}
|
||||
</p>
|
||||
<div className="about-item wow fadeInUp" data-wow-delay=".5s">
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className="content">
|
||||
<span><img src={item.icon} alt="" /> {item.title}-</span>
|
||||
<p>{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<ul className="list wow fadeInUp" data-wow-delay=".3s">
|
||||
{data.features.map((feature, index) => (
|
||||
<li key={index}>
|
||||
<i className="fa-solid fa-chevrons-right"></i>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href={data.ctaButton.href} className="theme-btn wow fadeInUp" data-wow-delay=".5s">
|
||||
{data.ctaButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhyChooseUs;
|
||||
Reference in New Issue
Block a user