forked from UKSOURCE/hailearning.edu.vn
66 lines
3.7 KiB
TypeScript
66 lines
3.7 KiB
TypeScript
const FEATURES = [
|
|
"Access to world-renowned museums, archives, and libraries.",
|
|
"A hub for international organizations and global policy.",
|
|
"A vibrant cultural ecosystem that enriches the liberal arts experience.",
|
|
];
|
|
|
|
const IMAGES = [
|
|
{ src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/4df3620db3-dda28233c91d6369d039.png", alt: "Parisian cafe and street", tall: false },
|
|
{ src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/a45c3de13a-8173142c33595269388d.png", alt: "Students in Parisian library", tall: true },
|
|
{ src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/fe39e27ab6-40f9c9b4851f3b8176da.png", alt: "Seine river with historic bridges", tall: true },
|
|
{ src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/cb66207ea0-16795a67db08ef0e6f8c.png", alt: "Modern research facility", tall: false },
|
|
];
|
|
|
|
const WhyParis = () => {
|
|
return (
|
|
<section id="why-paris" className="why-paris">
|
|
<div className="container">
|
|
<div className="row align-items-center">
|
|
{/* Left: Image grid */}
|
|
<div className="col-lg-6 order-lg-1 order-2">
|
|
<div className="why-paris__image-grid">
|
|
<div className="why-paris__image-col">
|
|
<img src={IMAGES[0].src} alt={IMAGES[0].alt} className="why-paris__img why-paris__img--short" />
|
|
<img src={IMAGES[1].src} alt={IMAGES[1].alt} className="why-paris__img why-paris__img--tall" />
|
|
</div>
|
|
<div className="why-paris__image-col why-paris__image-col--offset">
|
|
<img src={IMAGES[2].src} alt={IMAGES[2].alt} className="why-paris__img why-paris__img--tall" />
|
|
<img src={IMAGES[3].src} alt={IMAGES[3].alt} className="why-paris__img why-paris__img--short" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Text */}
|
|
<div className="col-lg-6 order-lg-2 order-1">
|
|
<div className="why-paris__content">
|
|
<div className="about-hero__badge">
|
|
<span className="about-hero__badge-line"></span>
|
|
<span className="about-hero__badge-text">Our Location</span>
|
|
</div>
|
|
<h2 className="why-paris__title">Why Paris?</h2>
|
|
<p className="why-paris__desc">
|
|
Paris is not just a backdrop; it is our extended campus. As a historic center
|
|
of intellectual thought, art, and scientific discovery, the city offers
|
|
unparalleled opportunities for our students and researchers.
|
|
</p>
|
|
<ul className="why-paris__list">
|
|
{FEATURES.map((item, i) => (
|
|
<li key={i} className="why-paris__list-item">
|
|
<span className="why-paris__check">
|
|
<i className="fa-solid fa-check"></i>
|
|
</span>
|
|
<span>{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<button className="why-paris__btn">Explore Campus Life</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default WhyParis;
|