forked from UKSOURCE/hailearning.edu.vn
feat: Create FE home page and about page
This commit is contained in:
Đỗ Minh Nhật
@@ -1,53 +0,0 @@
|
||||
import Link from "next/link";
|
||||
import { AboutData } from "../../about/types";
|
||||
|
||||
interface AboutFeaturesProps {
|
||||
data: AboutData["features"];
|
||||
}
|
||||
|
||||
const AboutFeatures = ({ data }: AboutFeaturesProps) => {
|
||||
return (
|
||||
<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={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">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">{data.heading}</h2>
|
||||
</div>
|
||||
<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>
|
||||
))}
|
||||
<Link href={data.ctaButton.href} className="theme-btn">
|
||||
{data.ctaButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutFeatures;
|
||||
@@ -1,39 +0,0 @@
|
||||
import Link from 'next/link';
|
||||
import { AboutData } from '../../about/types';
|
||||
|
||||
interface AboutHeroProps {
|
||||
data: AboutData['hero'];
|
||||
}
|
||||
|
||||
const AboutHero = ({ data }: AboutHeroProps) => {
|
||||
return (
|
||||
<section className="breadcrumb-wrapper fix bg-cover" style={{ backgroundImage: `url(${data.backgroundImage})` }}>
|
||||
<div className="shape">
|
||||
<img src="/assets/img/inner-page/shape.png" alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="page-heading">
|
||||
<h1 className="breadcrumb-title">{data.title}</h1>
|
||||
{Array.isArray(data.breadcrumb) && (
|
||||
<ul className="breadcrumb-list">
|
||||
{data.breadcrumb.map((item, index) => (
|
||||
<li key={index}>
|
||||
{index === data.breadcrumb.length - 1 ? (
|
||||
item
|
||||
) : (
|
||||
<>
|
||||
<Link href="/">{item}</Link>
|
||||
<i className="fa-solid fa-chevron-right ms-2 me-2"></i>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutHero;
|
||||
@@ -1,28 +0,0 @@
|
||||
import { AboutData } from "../../about/types";
|
||||
|
||||
interface AboutIntroProps {
|
||||
data: AboutData["intro"];
|
||||
}
|
||||
|
||||
const AboutIntro = ({ data }: AboutIntroProps) => {
|
||||
return (
|
||||
<section className="intro-section section-padding fix pb-0">
|
||||
<div className="container">
|
||||
<div className="section-title-area">
|
||||
<div className="section-title">
|
||||
<span className="sub-title-2 wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">{data.heading}</h2>
|
||||
</div>
|
||||
<p>{data.description}</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="intro-image tp-clip-anim p-relative">
|
||||
<img src={data.image} alt="img" className="tp-anim-img" data-animate="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutIntro;
|
||||
@@ -1,79 +0,0 @@
|
||||
import Link from "next/link";
|
||||
import { AboutData } from "../../about/types";
|
||||
|
||||
interface AboutMissionProps {
|
||||
data: AboutData["mission"];
|
||||
}
|
||||
|
||||
const AboutMission = ({ data }: AboutMissionProps) => {
|
||||
return (
|
||||
<section className="about-section section-padding fix pb-0">
|
||||
<div className="top-shape">
|
||||
<img src={data.images.globeShape} 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={data.images.main} alt="img" className="wow img-custom-anim-left" />
|
||||
<div className="about-image-2">
|
||||
<img src={data.images.secondary} alt="img" className="wow img-custom-anim-right" />
|
||||
</div>
|
||||
<div className="bg-shape">
|
||||
<img src={data.images.bgShape} alt="img" />
|
||||
</div>
|
||||
<div className="plane-shape float-bob-y">
|
||||
<img src={data.images.planeShape} alt="img" />
|
||||
</div>
|
||||
<div className="top-shape float-bob-y">
|
||||
<img src={data.images.topShape} 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}</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="" className="me-2 d-inline-block" />
|
||||
{item.label}-
|
||||
</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 AboutMission;
|
||||
@@ -1,75 +0,0 @@
|
||||
import Link from "next/link";
|
||||
import { AboutData } from "../../about/types";
|
||||
|
||||
interface AboutNewsProps {
|
||||
data: AboutData["news"];
|
||||
}
|
||||
|
||||
const AboutNews = ({ data }: AboutNewsProps) => {
|
||||
return (
|
||||
<section className="news-section section-padding fix pt-0">
|
||||
<div className="container">
|
||||
<div className="section-title-area">
|
||||
<div className="section-title">
|
||||
<span className="sub-title">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">{data.heading}</h2>
|
||||
</div>
|
||||
<Link href={data.ctaButton.href} className="theme-btn">
|
||||
{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">
|
||||
<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})</span>
|
||||
<span>_ {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 AboutNews;
|
||||
65
app/components/about/Campus.tsx
Normal file
65
app/components/about/Campus.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import Link from "next/link";
|
||||
|
||||
const CENTERS = [
|
||||
{
|
||||
tag: "Biosciences",
|
||||
tagColor: "blue",
|
||||
title: "Institut Pasteur Collaborative Lab",
|
||||
desc: "A premier center focusing on immunology, genetics, and infectious diseases.",
|
||||
img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/115ee2f067-72629210549870cf0d35.png",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
tag: "Humanities",
|
||||
tagColor: "yellow",
|
||||
title: "Center for European Studies",
|
||||
desc: "Housing over 2 million volumes and dedicated to historical and sociological research.",
|
||||
img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/c11358a8da-a7b331f85d1fbd27c851.png",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
tag: "Technology",
|
||||
tagColor: "green",
|
||||
title: "AI & Robotics Institute",
|
||||
desc: "Pioneering developments in machine learning, automation, and computational science.",
|
||||
img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/97fca8b57f-238aa78a799f22cf1cd1.png",
|
||||
href: "#",
|
||||
},
|
||||
];
|
||||
|
||||
const Campus = () => {
|
||||
return (
|
||||
<section id="campus" className="about-campus">
|
||||
<div className="container">
|
||||
<div className="about-campus__header text-center">
|
||||
<h2 className="about-campus__title">Campus & Research Centers</h2>
|
||||
<p className="about-campus__subtitle">
|
||||
State-of-the-art facilities nestled in the historic Latin Quarter, designed to foster innovation and collaboration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="about-campus__grid">
|
||||
{CENTERS.map((center, i) => (
|
||||
<div key={i} className="about-campus__card">
|
||||
<div className="about-campus__img-wrap">
|
||||
<img src={center.img} alt={center.title} className="about-campus__img" />
|
||||
</div>
|
||||
<div className="about-campus__body">
|
||||
<span className={`about-campus__tag about-campus__tag--${center.tagColor}`}>
|
||||
{center.tag}
|
||||
</span>
|
||||
<h3 className="about-campus__card-title">{center.title}</h3>
|
||||
<p className="about-campus__card-desc">{center.desc}</p>
|
||||
<Link href={center.href} className="about-campus__link">
|
||||
Explore Facility <i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Campus;
|
||||
74
app/components/about/HeroSection.tsx
Normal file
74
app/components/about/HeroSection.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { AboutData } from "@/app/about/types";
|
||||
import { getCmsImageUrl } from "@/utils/image";
|
||||
import Link from "next/link";
|
||||
|
||||
interface HeroSectionProps {
|
||||
data?: AboutData | null;
|
||||
}
|
||||
|
||||
const HeroSection = ({ data }: HeroSectionProps) => {
|
||||
const title = data?.hero?.title || "A Legacy of Liberal Arts & Research";
|
||||
const backgroundImage = data?.hero?.backgroundImage
|
||||
? getCmsImageUrl(data.hero.backgroundImage)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<section
|
||||
id="about-hero"
|
||||
className="about-hero fix bg-cover"
|
||||
style={backgroundImage ? { backgroundImage: `url('${backgroundImage}')` } : undefined}
|
||||
>
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
{/* Left: Text */}
|
||||
<div className="col-lg-6">
|
||||
<div className="about-hero__content">
|
||||
<div className="about-hero__badge">
|
||||
<span className="about-hero__badge-line"></span>
|
||||
<span className="about-hero__badge-text">Our Identity</span>
|
||||
</div>
|
||||
<h1 className="about-hero__title"
|
||||
dangerouslySetInnerHTML={{ __html: title }}
|
||||
/>
|
||||
<p className="about-hero__desc">
|
||||
Founded in the heart of Paris, Université Libérale is dedicated to fostering
|
||||
critical thinking, interdisciplinary innovation, and global understanding through
|
||||
a rigorous liberal arts curriculum and world-class research initiatives.
|
||||
</p>
|
||||
<div className="about-hero__actions">
|
||||
<button className="about-hero__btn">
|
||||
Discover Our History
|
||||
<i className="fa-solid fa-arrow-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Image */}
|
||||
<div className="col-lg-6">
|
||||
<div className="about-hero__image-wrap">
|
||||
<img
|
||||
src={data?.intro?.image
|
||||
? getCmsImageUrl(data.intro.image)
|
||||
: "https://storage.googleapis.com/uxpilot-auth.appspot.com/e0291249ca-9b14cf509f6076b406c0.png"}
|
||||
alt="University campus"
|
||||
className="about-hero__image"
|
||||
/>
|
||||
<div className="about-hero__badge-card">
|
||||
<div className="about-hero__badge-icon">
|
||||
<i className="fa-solid fa-award"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="about-hero__badge-value">Top 50</h4>
|
||||
<p className="about-hero__badge-label">Global Research Ranking</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroSection;
|
||||
39
app/components/about/HistoryTimeline.tsx
Normal file
39
app/components/about/HistoryTimeline.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
const TIMELINE = [
|
||||
{ year: "1895", title: "Foundation", desc: "Established as an independent institute for liberal studies by a group of visionary scholars.", side: "left" },
|
||||
{ year: "1945", title: "Post-War Expansion", desc: "Expanded faculties to include modern sciences and established the first dedicated research hub.", side: "right" },
|
||||
{ year: "1982", title: "Global Partnerships", desc: "Initiated formal exchange programs and research partnerships with leading universities worldwide.", side: "left" },
|
||||
{ year: "2020", title: "Modern Research Era", desc: "Inauguration of the new interdisciplinary research center, focusing on sustainable global development.", side: "right" },
|
||||
];
|
||||
|
||||
const HistoryTimeline = () => {
|
||||
return (
|
||||
<section id="history-timeline" className="about-timeline">
|
||||
<div className="container">
|
||||
<div className="about-timeline__header text-center">
|
||||
<h2 className="about-timeline__title">Our History</h2>
|
||||
<p className="about-timeline__subtitle">A legacy of academic excellence spanning over a century.</p>
|
||||
</div>
|
||||
|
||||
<div className="about-timeline__track">
|
||||
<div className="about-timeline__line"></div>
|
||||
|
||||
{TIMELINE.map((item, i) => (
|
||||
<div key={i} className={`about-timeline__item about-timeline__item--${item.side}`}>
|
||||
<div className="about-timeline__content">
|
||||
<h3 className="about-timeline__year">{item.year}</h3>
|
||||
<h4 className="about-timeline__event">{item.title}</h4>
|
||||
<p className="about-timeline__desc">{item.desc}</p>
|
||||
</div>
|
||||
<div className="about-timeline__dot-wrap">
|
||||
<div className="about-timeline__dot"></div>
|
||||
</div>
|
||||
<div className="about-timeline__spacer"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HistoryTimeline;
|
||||
66
app/components/about/LeaderShip_Broad.tsx
Normal file
66
app/components/about/LeaderShip_Broad.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import Link from "next/link";
|
||||
|
||||
const LEADERS = [
|
||||
{
|
||||
name: "Dr. Eleanor Laurent",
|
||||
role: "President",
|
||||
img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/8ce6757572-cd9d4e986dee9e71d10c.png",
|
||||
},
|
||||
{
|
||||
name: "Prof. Marcus Dubois",
|
||||
role: "Dean of Humanities",
|
||||
img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/3aae15d87b-020f60df05ac2c52a087.png",
|
||||
},
|
||||
{
|
||||
name: "Dr. Sophie Martin",
|
||||
role: "Dean of Research",
|
||||
img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/3fc05a202c-26e5f00c35a829b5462d.png",
|
||||
},
|
||||
{
|
||||
name: "Prof. Jean-Paul Roux",
|
||||
role: "Provost",
|
||||
img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/3aae15d87b-c36f00cff7803c4209d4.png",
|
||||
},
|
||||
];
|
||||
|
||||
const LeadershipBoard = () => {
|
||||
return (
|
||||
<section id="leadership-board" className="about-leadership">
|
||||
<div className="container">
|
||||
<div className="about-leadership__header text-center">
|
||||
<div className="about-mission__badge">
|
||||
<span className="about-mission__badge-line"></span>
|
||||
<span className="about-mission__badge-text">University Leadership</span>
|
||||
<span className="about-mission__badge-line"></span>
|
||||
</div>
|
||||
<h2 className="about-leadership__title">Meet Our Leaders</h2>
|
||||
<p className="about-leadership__subtitle">Guiding our academic vision and institutional strategy.</p>
|
||||
</div>
|
||||
|
||||
<div className="about-leadership__grid">
|
||||
{LEADERS.map((leader, i) => (
|
||||
<div key={i} className="about-leadership__card">
|
||||
<div className="about-leadership__photo-wrap">
|
||||
<img src={leader.img} alt={leader.name} className="about-leadership__photo" />
|
||||
</div>
|
||||
<div className="about-leadership__info">
|
||||
<h3 className="about-leadership__name">{leader.name}</h3>
|
||||
<p className="about-leadership__role">{leader.role}</p>
|
||||
<div className="about-leadership__socials">
|
||||
<Link href="#" className="about-leadership__social-link">
|
||||
<i className="fa-brands fa-linkedin"></i>
|
||||
</Link>
|
||||
<Link href="#" className="about-leadership__social-link">
|
||||
<i className="fa-solid fa-envelope"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default LeadershipBoard;
|
||||
73
app/components/about/LeaderShip_Message.tsx
Normal file
73
app/components/about/LeaderShip_Message.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import Link from "next/link";
|
||||
|
||||
const LeadershipMessage = () => {
|
||||
return (
|
||||
<section id="leadership-message" className="about-message">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{/* Main content */}
|
||||
<div className="col-lg-8">
|
||||
<div className="about-message__header">
|
||||
<h2 className="about-message__title">A Message from the President</h2>
|
||||
<div className="about-message__divider"></div>
|
||||
</div>
|
||||
<div className="about-message__body">
|
||||
<p className="about-message__quote">
|
||||
"Research is not just about discovery; it is about responsibility. As a premier institution in Paris, we carry the torch of enlightenment into the 21st century."
|
||||
</p>
|
||||
<p>
|
||||
Welcome to Paris Research University. For decades, our halls have echoed with the profound debates of brilliant minds and the quiet hum of groundbreaking laboratories. We stand at the intersection of history and the future, leveraging our rich heritage to propel innovation that addresses the world's most pressing challenges.
|
||||
</p>
|
||||
<p>
|
||||
Our commitment is unwavering: to foster an inclusive, vibrant academic community where interdisciplinary collaboration thrives. We invite you to explore our centers, engage with our faculty, and join us in our relentless pursuit of knowledge.
|
||||
</p>
|
||||
</div>
|
||||
<div className="about-message__author">
|
||||
<div className="about-message__avatar">
|
||||
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg" alt="President" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="about-message__author-name">Dr. Jean-UX Pilot Laurent</h4>
|
||||
<p className="about-message__author-role">President & Vice-Chancellor</p>
|
||||
</div>
|
||||
<i className="fa-solid fa-quote-right about-message__quote-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="col-lg-4">
|
||||
<div className="about-message__sidebar">
|
||||
<div className="about-message__sidebar-card about-message__sidebar-card--primary">
|
||||
<h3>Accreditation & Standards</h3>
|
||||
<p>Learn about our rigorous academic standards and global recognitions.</p>
|
||||
<Link href="/accreditation" className="about-message__sidebar-link">
|
||||
View Credentials <i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="about-message__sidebar-card">
|
||||
<div className="about-message__sidebar-icon">
|
||||
<i className="fa-solid fa-handshake"></i>
|
||||
</div>
|
||||
<h3>Global Partnerships</h3>
|
||||
<p>Explore our network of industry and academic collaborators.</p>
|
||||
<Link href="/partnerships" className="about-message__sidebar-text-link">
|
||||
Discover Network <i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="about-message__sidebar-card">
|
||||
<h3>Have Questions?</h3>
|
||||
<Link href="/contact" className="about-message__sidebar-outline-link">
|
||||
Contact Administration
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default LeadershipMessage;
|
||||
51
app/components/about/Mission.tsx
Normal file
51
app/components/about/Mission.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
const VALUES = [
|
||||
{
|
||||
icon: "fa-solid fa-book-open",
|
||||
title: "Liberal Arts Foundation",
|
||||
desc: "Providing a broad intellectual foundation that encourages critical thinking, creativity, and the ability to adapt to a rapidly changing world.",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-microscope",
|
||||
title: "Research Excellence",
|
||||
desc: "Fostering a culture of rigorous inquiry and innovation, supporting faculty and students in pushing the boundaries of knowledge.",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-globe",
|
||||
title: "Global Perspective",
|
||||
desc: "Cultivating an inclusive environment that values diverse perspectives and prepares students to engage with complex global challenges.",
|
||||
},
|
||||
];
|
||||
|
||||
const Mission = () => {
|
||||
return (
|
||||
<section id="mission-values" className="about-mission">
|
||||
<div className="container">
|
||||
<div className="about-mission__header text-center">
|
||||
<div className="about-mission__badge">
|
||||
<span className="about-mission__badge-line"></span>
|
||||
<span className="about-mission__badge-text">Core Principles</span>
|
||||
<span className="about-mission__badge-line"></span>
|
||||
</div>
|
||||
<h2 className="about-mission__title">Our Mission & Values</h2>
|
||||
<p className="about-mission__subtitle">
|
||||
We are committed to advancing human knowledge and cultivating responsible global citizens through transformative education.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="about-mission__grid">
|
||||
{VALUES.map((item, i) => (
|
||||
<div key={i} className="about-mission__card">
|
||||
<div className="about-mission__icon-wrap">
|
||||
<i className={item.icon}></i>
|
||||
</div>
|
||||
<h3 className="about-mission__card-title">{item.title}</h3>
|
||||
<p className="about-mission__card-desc">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Mission;
|
||||
65
app/components/about/WhyParis.tsx
Normal file
65
app/components/about/WhyParis.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
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;
|
||||
902
app/components/about/about.css
Normal file
902
app/components/about/about.css
Normal file
@@ -0,0 +1,902 @@
|
||||
/* ============================================================
|
||||
ABOUT PAGE
|
||||
============================================================ */
|
||||
|
||||
.about-hero {
|
||||
padding: 80px 0;
|
||||
background-color: #f8fbff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.about-hero__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.about-hero__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.about-hero__badge-line {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2px;
|
||||
background: #1b254b;
|
||||
}
|
||||
|
||||
.about-hero__badge-text {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.about-hero__title {
|
||||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.about-hero__title span {
|
||||
color: var(--theme, #E13833);
|
||||
}
|
||||
|
||||
.about-hero__desc {
|
||||
font-size: 1.05rem;
|
||||
color: #6b7280;
|
||||
line-height: 1.7;
|
||||
max-width: 36rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.about-hero__actions {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.about-hero__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.875rem 2rem;
|
||||
background-color: #1b254b;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
border-radius: 0.375rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.about-hero__btn:hover {
|
||||
background-color: #151c3a;
|
||||
}
|
||||
|
||||
/* Image side */
|
||||
.about-hero__image-wrap {
|
||||
position: relative;
|
||||
border-radius: 1rem;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.about-hero__image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 1rem;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Badge card overlay */
|
||||
.about-hero__badge-card {
|
||||
position: absolute;
|
||||
bottom: -1.5rem;
|
||||
left: -1.5rem;
|
||||
background: #ffffff;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.about-hero__badge-card {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.about-hero__badge-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: #f8fbff;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
color: #1b254b;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.about-hero__badge-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.about-hero__badge-label {
|
||||
font-size: 0.8rem;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.about-hero {
|
||||
padding: 80px 0 60px;
|
||||
}
|
||||
|
||||
.about-hero__image-wrap {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Mission & Values
|
||||
------------------------------------------------------------ */
|
||||
.about-mission {
|
||||
padding: 80px 0;
|
||||
background-color: #f8f8f9;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.about-mission__header {
|
||||
max-width: 48rem;
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
|
||||
.about-mission__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.about-mission__badge-line {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2px;
|
||||
background: #E13833;
|
||||
}
|
||||
|
||||
.about-mission__badge-text {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.about-mission__title {
|
||||
font-size: clamp(1.75rem, 3vw, 2.25rem);
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.about-mission__subtitle {
|
||||
font-size: 1.05rem;
|
||||
color: #6b7280;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.about-mission__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.about-mission__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.about-mission__card {
|
||||
background: #ffffff;
|
||||
padding: 2rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.about-mission__card:hover {
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.about-mission__icon-wrap {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
background: #f8fbff;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
color: #1b254b;
|
||||
margin-bottom: 1.5rem;
|
||||
border-top: 4px solid transparent;
|
||||
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.about-mission__card:hover .about-mission__icon-wrap {
|
||||
background-color: #1b254b;
|
||||
color: #ffffff;
|
||||
border-top-color: #E13833;
|
||||
}
|
||||
|
||||
.about-mission__card-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.about-mission__card-desc {
|
||||
font-size: 0.95rem;
|
||||
color: #6b7280;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Why Paris
|
||||
------------------------------------------------------------ */
|
||||
.why-paris {
|
||||
padding: 80px 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.why-paris__image-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.why-paris__image-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.why-paris__image-col--offset {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.why-paris__img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.why-paris__img--short { height: 12rem; }
|
||||
.why-paris__img--tall { height: 16rem; }
|
||||
|
||||
.why-paris__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.why-paris__content {
|
||||
padding-left: 0;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.why-paris__title {
|
||||
font-size: clamp(1.75rem, 3vw, 2.25rem);
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.why-paris__desc {
|
||||
font-size: 1.05rem;
|
||||
color: #6b7280;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.why-paris__list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.why-paris__list-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
color: #1b254b;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.why-paris__check {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 50%;
|
||||
background: #f8fbff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1b254b;
|
||||
font-size: 0.65rem;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.why-paris__btn {
|
||||
display: inline-block;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.625rem 1.5rem;
|
||||
background: #f8fbff;
|
||||
color: #1b254b;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.why-paris__btn:hover {
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Leadership Message
|
||||
------------------------------------------------------------ */
|
||||
.about-message {
|
||||
padding: 80px 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.about-message__header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.about-message__title {
|
||||
font-size: clamp(1.75rem, 3vw, 2.5rem);
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.about-message__divider {
|
||||
width: 5rem;
|
||||
height: 4px;
|
||||
background: #E13833;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.about-message__body p {
|
||||
color: #6b7280;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.about-message__quote {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: #1b254b !important;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.about-message__author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
margin-top: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: #f8f8f9;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.about-message__avatar {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 2px solid #E13833;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.about-message__avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.about-message__author-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin: 0 0 0.25rem;
|
||||
}
|
||||
|
||||
.about-message__author-role {
|
||||
font-size: 0.875rem;
|
||||
color: #E13833;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.about-message__quote-icon {
|
||||
font-size: 3rem;
|
||||
color: #1b254b;
|
||||
opacity: 0.15;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.about-message__sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
position: sticky;
|
||||
top: 7rem;
|
||||
}
|
||||
|
||||
.about-message__sidebar-card {
|
||||
background: #f8f8f9;
|
||||
padding: 2rem;
|
||||
border-radius: 1.5rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.about-message__sidebar-card h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.about-message__sidebar-card p {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.about-message__sidebar-card--primary {
|
||||
background: #1b254b;
|
||||
}
|
||||
|
||||
.about-message__sidebar-card--primary h3,
|
||||
.about-message__sidebar-card--primary p {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.about-message__sidebar-card--primary p {
|
||||
color: rgba(255,255,255,0.75);
|
||||
}
|
||||
|
||||
.about-message__sidebar-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
color: #1b254b;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.about-message__sidebar-link:hover { background: #f3f4f6; }
|
||||
|
||||
.about-message__sidebar-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
color: #1b254b;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.about-message__sidebar-text-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #1b254b;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.about-message__sidebar-text-link:hover { text-decoration: underline; }
|
||||
|
||||
.about-message__sidebar-outline-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
border: 2px solid #1b254b;
|
||||
color: #1b254b;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.about-message__sidebar-outline-link:hover {
|
||||
background: #1b254b;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Leadership Board
|
||||
------------------------------------------------------------ */
|
||||
.about-leadership {
|
||||
padding: 80px 0;
|
||||
background: #f8f8f9;
|
||||
}
|
||||
|
||||
.about-leadership__header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.about-leadership__title {
|
||||
font-size: clamp(1.75rem, 3vw, 2.25rem);
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.about-leadership__subtitle {
|
||||
color: #6b7280;
|
||||
font-size: 1.05rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.about-leadership__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.about-leadership__grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.about-leadership__grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.about-leadership__card {
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.about-leadership__card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
|
||||
|
||||
.about-leadership__photo-wrap {
|
||||
height: 16rem;
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.about-leadership__photo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.about-leadership__card:hover .about-leadership__photo { transform: scale(1.05); }
|
||||
|
||||
.about-leadership__info {
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-leadership__name {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.about-leadership__role {
|
||||
font-size: 0.875rem;
|
||||
color: #E13833;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.about-leadership__socials {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.about-leadership__social-link {
|
||||
color: #6b7280;
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.about-leadership__social-link:hover { color: #1b254b; }
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Campus
|
||||
------------------------------------------------------------ */
|
||||
.about-campus {
|
||||
padding: 80px 0;
|
||||
background: #f8f8f9;
|
||||
}
|
||||
|
||||
.about-campus__header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.about-campus__title {
|
||||
font-size: clamp(1.75rem, 3vw, 2.25rem);
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.about-campus__subtitle {
|
||||
color: #6b7280;
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.about-campus__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.about-campus__grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.about-campus__card {
|
||||
background: #ffffff;
|
||||
border-radius: 1.5rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.about-campus__card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
|
||||
|
||||
.about-campus__img-wrap {
|
||||
height: 12rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.about-campus__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.about-campus__card:hover .about-campus__img { transform: scale(1.05); }
|
||||
|
||||
.about-campus__body {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.about-campus__tag {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.about-campus__tag--blue { background: #eff6ff; color: #1b254b; }
|
||||
.about-campus__tag--yellow { background: #fefce8; color: #854d0e; }
|
||||
.about-campus__tag--green { background: #f0fdf4; color: #166534; }
|
||||
|
||||
.about-campus__card-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.about-campus__card-desc {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.about-campus__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #1b254b;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
transition: gap 0.2s;
|
||||
}
|
||||
|
||||
.about-campus__link:hover { gap: 0.75rem; }
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
History Timeline
|
||||
------------------------------------------------------------ */
|
||||
.about-timeline {
|
||||
padding: 80px 0;
|
||||
background: #1b254b;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.about-timeline__header { margin-bottom: 3rem; }
|
||||
|
||||
.about-timeline__title {
|
||||
font-size: clamp(1.75rem, 3vw, 2.5rem);
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.about-timeline__subtitle { color: rgba(255,255,255,0.65); font-size: 1rem; margin: 0; }
|
||||
|
||||
.about-timeline__track {
|
||||
max-width: 44rem;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
/* Vertical line chạy giữa track */
|
||||
.about-timeline__line {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
margin-left: -1px;
|
||||
background: rgba(100,160,255,0.3);
|
||||
}
|
||||
|
||||
.about-timeline__item {
|
||||
display: flex;
|
||||
margin-bottom: 3.5rem;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about-timeline__item:last-child { margin-bottom: 0; }
|
||||
|
||||
/* Content chiếm nửa trái hoặc phải */
|
||||
.about-timeline__content {
|
||||
width: calc(50% - 1.5rem);
|
||||
}
|
||||
|
||||
/* Dot nằm absolute giữa line */
|
||||
.about-timeline__dot-wrap {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0.3rem;
|
||||
transform: translateX(-50%);
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Spacer chiếm nửa còn lại */
|
||||
.about-timeline__spacer {
|
||||
width: calc(50% - 1.5rem);
|
||||
}
|
||||
|
||||
/* Left: content bên trái, text align right */
|
||||
.about-timeline__item--left .about-timeline__content {
|
||||
text-align: right;
|
||||
order: 1;
|
||||
margin-right: 3rem;
|
||||
}
|
||||
.about-timeline__item--left .about-timeline__dot-wrap { order: 2; }
|
||||
.about-timeline__item--left .about-timeline__spacer { order: 3; }
|
||||
|
||||
/* Right: spacer bên trái, content bên phải */
|
||||
.about-timeline__item--right .about-timeline__spacer { order: 1; }
|
||||
.about-timeline__item--right .about-timeline__dot-wrap { order: 2; }
|
||||
.about-timeline__item--right .about-timeline__content {
|
||||
text-align: left;
|
||||
order: 3;
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.about-timeline__dot {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
border: 2px solid #74b3ff;
|
||||
box-shadow: 0 0 0 4px rgba(116,179,255,0.15);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.about-timeline__year {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
margin-bottom: 0.25rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.about-timeline__event {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #74b3ff;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.about-timeline__desc {
|
||||
font-size: 0.875rem;
|
||||
color: rgba(255,255,255,0.65);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
max-width: 18rem;
|
||||
}
|
||||
|
||||
.about-timeline__item--left .about-timeline__desc { margin-left: auto; }
|
||||
.about-timeline__item--right .about-timeline__desc { margin-right: auto; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.about-timeline__line { left: 0.75rem; }
|
||||
.about-timeline__item { flex-direction: column; align-items: flex-start; padding-left: 2.5rem; }
|
||||
.about-timeline__item--left .about-timeline__content,
|
||||
.about-timeline__item--right .about-timeline__content { text-align: left; padding: 0; order: 2; }
|
||||
.about-timeline__item--left .about-timeline__desc,
|
||||
.about-timeline__item--right .about-timeline__desc { margin: 0; max-width: 100%; }
|
||||
.about-timeline__dot-wrap { position: absolute; left: 0; top: 0.25rem; order: 1; }
|
||||
.about-timeline__spacer { display: none; }
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
export { default as AboutHero } from './AboutHero';
|
||||
export { default as AboutIntro } from './AboutIntro';
|
||||
export { default as AboutMission } from './AboutMission';
|
||||
export { default as AboutFeatures } from './AboutFeatures';
|
||||
export { default as AboutNews } from './AboutNews';
|
||||
@@ -1,47 +0,0 @@
|
||||
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;
|
||||
@@ -1,116 +0,0 @@
|
||||
import { getCmsImageUrl } from '@/utils/image';
|
||||
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) => {
|
||||
const thumbUrl = getCmsImageUrl(item.thumbnail);
|
||||
return (
|
||||
<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={thumbUrl}
|
||||
alt="img"
|
||||
style={{
|
||||
width: '419px',
|
||||
height: '312px',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
/>
|
||||
<span>{item.category}</span>
|
||||
<div className="news-layer-wrapper">
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></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">
|
||||
<div
|
||||
style={{
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
backgroundColor: '#d1d5db',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: '#374151',
|
||||
marginRight: '10px'
|
||||
}}
|
||||
>
|
||||
{item.author.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<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;
|
||||
@@ -1,83 +0,0 @@
|
||||
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 collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target={`#collapse${index}`}
|
||||
aria-expanded="false"
|
||||
aria-controls={`collapse${index}`}
|
||||
>
|
||||
{item.question}
|
||||
</button>
|
||||
</h5>
|
||||
<div
|
||||
id={`collapse${index}`}
|
||||
className="accordion-collapse collapse"
|
||||
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;
|
||||
@@ -1,141 +1,46 @@
|
||||
import { getCmsImageUrl } from '@/utils/image';
|
||||
import Link from 'next/link';
|
||||
import Link from "next/link";
|
||||
|
||||
interface HeroSlide {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
description: string;
|
||||
primaryButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
secondaryButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
heroImage?: string;
|
||||
videoUrl: string;
|
||||
}
|
||||
const HeroSection = () => {
|
||||
return (
|
||||
<section id="hero-banner" className="hero-home">
|
||||
<div className="hero-home__overlay">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1541339907198-e08756dedf3f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Paris University Campus"
|
||||
className="hero-home__bg-img"
|
||||
/>
|
||||
<div className="hero-home__gradient" />
|
||||
</div>
|
||||
|
||||
interface HeroSectionProps {
|
||||
data: {
|
||||
backgroundImage: string;
|
||||
// Optional multi-slide support from CMS
|
||||
slides?: HeroSlide[];
|
||||
// Legacy single-slide fields (fallback)
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
description?: string;
|
||||
primaryButton?: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
secondaryButton?: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
heroImage?: string;
|
||||
videoUrl?: string;
|
||||
};
|
||||
}
|
||||
<div className="hero-home__container">
|
||||
<div className="hero-home__content">
|
||||
<div className="hero-home__badge">
|
||||
<span className="hero-home__badge-dot" />
|
||||
<span className="hero-home__badge-text">Leading Research Institution</span>
|
||||
</div>
|
||||
|
||||
const HeroSection = ({ data }: HeroSectionProps) => {
|
||||
const slides: HeroSlide[] =
|
||||
(data.slides && data.slides.length > 0)
|
||||
? data.slides
|
||||
: [{
|
||||
title: data.title || '',
|
||||
subtitle: data.subtitle || '',
|
||||
description: data.description || '',
|
||||
primaryButton: data.primaryButton || { label: '', href: '#' },
|
||||
secondaryButton: data.secondaryButton || { label: '', href: '#' },
|
||||
heroImage: data.heroImage,
|
||||
videoUrl: data.videoUrl || '',
|
||||
}];
|
||||
<h1 className="hero-home__title">
|
||||
Advancing Knowledge in the Heart of Paris
|
||||
</h1>
|
||||
|
||||
const firstSlide = slides[0];
|
||||
<p className="hero-home__desc">
|
||||
A premier liberal arts and research university dedicated to fostering
|
||||
interdisciplinary innovation, global partnerships, and academic excellence.
|
||||
</p>
|
||||
|
||||
return (
|
||||
<section className="hero-section hero-1 fix bg-cover" style={{ backgroundImage: `url('${getCmsImageUrl(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">
|
||||
{slides.map((slide, index) => (
|
||||
<div className="swiper-slide" key={index}>
|
||||
<div className="hero-content">
|
||||
<h6>{slide.subtitle}</h6>
|
||||
<h1>
|
||||
{slide.title}
|
||||
{slide.videoUrl && (
|
||||
<a href={slide.videoUrl} className="video-btn video-popup">
|
||||
<i className="fa-solid fa-play"></i>
|
||||
</a>
|
||||
)}
|
||||
</h1>
|
||||
<p>
|
||||
{slide.description}
|
||||
</p>
|
||||
<div className="hero-button">
|
||||
{slide.primaryButton?.href && (
|
||||
<Link href={slide.primaryButton.href} className="theme-btn">
|
||||
{slide.primaryButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
)}
|
||||
{slide.secondaryButton?.href && (
|
||||
<Link href={slide.secondaryButton.href} className="theme-btn style-2">
|
||||
{slide.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">
|
||||
{slides.map((slide, index) => (
|
||||
<div className="swiper-slide" key={index}>
|
||||
<div className="hero-image">
|
||||
<img src={slide.heroImage || firstSlide.heroImage || "/assets/img/home-1/hero/man.png"} alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
<div className="hero-home__actions">
|
||||
<button className="hero-home__btn hero-home__btn--primary">
|
||||
Explore Research
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</button>
|
||||
<button className="hero-home__btn hero-home__btn--secondary">
|
||||
Partner With Us
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroSection;
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
import { getCmsImageUrl } from '@/utils/image';
|
||||
|
||||
interface PartnersProps {
|
||||
data: {
|
||||
visaConsultancy: {
|
||||
items: {
|
||||
name: string;
|
||||
icon: string;
|
||||
year: string;
|
||||
}[];
|
||||
};
|
||||
brands: {
|
||||
items: {
|
||||
logo: 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.visaConsultancy?.items || []).map((partner, index) => (
|
||||
<div key={index} className="col-xl-3 col-lg-4 col-md-6">
|
||||
<div className="visa-consultency-item">
|
||||
<div className="image d-flex justify-content-center">
|
||||
<img src={getCmsImageUrl(partner.icon)} alt={partner.name} />
|
||||
</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.brands?.items || []).map((brand, index) => (
|
||||
<div key={index} className="swiper-slide">
|
||||
<div className="brand-image d-flex justify-content-center">
|
||||
<img src={getCmsImageUrl(brand.logo)} alt="brand-logo" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Partners;
|
||||
67
app/components/home/QuickLinksGrid.tsx
Normal file
67
app/components/home/QuickLinksGrid.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import Link from "next/link";
|
||||
|
||||
const LINKS = [
|
||||
{
|
||||
icon: "fa-solid fa-microscope",
|
||||
title: "Research Hub",
|
||||
desc: "Discover our ongoing projects, facilities, and interdisciplinary centers.",
|
||||
cta: "View Hub",
|
||||
href: "/research",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-book-open",
|
||||
title: "Publications",
|
||||
desc: "Access our extensive repository of peer-reviewed papers and journals.",
|
||||
cta: "Browse",
|
||||
href: "/publications",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-handshake",
|
||||
title: "Partnerships",
|
||||
desc: "Collaborate with us through industry, academic, and global networks.",
|
||||
cta: "Connect",
|
||||
href: "/partnerships",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-newspaper",
|
||||
title: "News & Events",
|
||||
desc: "Stay updated with our latest breakthroughs, seminars, and campus life.",
|
||||
cta: "Read More",
|
||||
href: "/blog",
|
||||
},
|
||||
];
|
||||
|
||||
const QuickLinksGrid = () => {
|
||||
return (
|
||||
<section id="quick-links" className="quick-links">
|
||||
<div className="container">
|
||||
<div className="quick-links__header text-center">
|
||||
<h2 className="quick-links__title">Explore Our Ecosystem</h2>
|
||||
<p className="quick-links__subtitle">
|
||||
Navigate through our core pillars of academic excellence and global partnerships.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="quick-links__grid">
|
||||
{LINKS.map((item, i) => (
|
||||
<Link href={item.href} key={i} className="quick-links__card">
|
||||
<div className="quick-links__icon-wrap">
|
||||
<i className={item.icon}></i>
|
||||
</div>
|
||||
<h3 className="quick-links__card-title">{item.title}</h3>
|
||||
<p className="quick-links__card-desc">{item.desc}</p>
|
||||
<div className="quick-links__card-footer">
|
||||
<span className="quick-links__cta">{item.cta}</span>
|
||||
<span className="quick-links__arrow">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuickLinksGrid;
|
||||
@@ -1,74 +0,0 @@
|
||||
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;
|
||||
@@ -1,35 +0,0 @@
|
||||
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;
|
||||
@@ -1,82 +0,0 @@
|
||||
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;
|
||||
@@ -1,52 +0,0 @@
|
||||
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="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;
|
||||
@@ -1,109 +0,0 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface WhyChooseUsProps {
|
||||
data: {
|
||||
heading: string;
|
||||
highlightWord?: string;
|
||||
subheading: string;
|
||||
description: string;
|
||||
mainImage?: string;
|
||||
secondaryImage?: string;
|
||||
items: {
|
||||
icon: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}[];
|
||||
features: string[];
|
||||
ctaButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const WhyChooseUs = ({ data }: WhyChooseUsProps) => {
|
||||
const highlight = data.highlightWord?.trim();
|
||||
|
||||
let headingContent: React.ReactNode = data.heading;
|
||||
|
||||
if (highlight) {
|
||||
const index = data.heading.indexOf(highlight);
|
||||
if (index !== -1) {
|
||||
const before = data.heading.slice(0, index);
|
||||
const after = data.heading.slice(index + highlight.length);
|
||||
headingContent = (
|
||||
<>
|
||||
{before}
|
||||
<span>{highlight}</span>
|
||||
{after}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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={data.mainImage || "/assets/img/home-1/about/about-1.jpg"} alt="img" className="wow img-custom-anim-left" />
|
||||
<div className="about-image-2">
|
||||
<img src={data.secondaryImage || "/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">
|
||||
{headingContent}
|
||||
</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;
|
||||
514
app/components/home/home.css
Normal file
514
app/components/home/home.css
Normal file
@@ -0,0 +1,514 @@
|
||||
/* ============================================================
|
||||
HOME PAGE — shared styles
|
||||
============================================================ */
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Hero Section
|
||||
------------------------------------------------------------ */
|
||||
.hero-home {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 560px;
|
||||
background-color: #1b254b;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-home__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.hero-home__bg-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.hero-home__gradient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to right, #1b254b, rgba(27, 37, 75, 0.9), transparent);
|
||||
}
|
||||
|
||||
.hero-home__container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.hero-home__container {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-home__content {
|
||||
max-width: 42rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.hero-home__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.hero-home__badge-dot {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: #60a5fa;
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.hero-home__badge-text {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #bfdbfe;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
.hero-home__title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.hero-home__title {
|
||||
font-size: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Description */
|
||||
.hero-home__desc {
|
||||
font-size: 1.125rem;
|
||||
color: #bfdbfe;
|
||||
line-height: 1.7;
|
||||
max-width: 36rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.hero-home__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.hero-home__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.hero-home__btn--primary {
|
||||
background: #ffffff;
|
||||
color: #1b254b;
|
||||
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.hero-home__btn--primary:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.hero-home__btn--secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.hero-home__btn--secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Research Impact Section
|
||||
------------------------------------------------------------ */
|
||||
.research-impact {
|
||||
padding: 80px 0;
|
||||
background-color: #f8fbff;
|
||||
}
|
||||
|
||||
.research-impact__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.research-impact__title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.research-impact__year {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
background: #e5e7eb;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.research-impact__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.research-impact__stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.research-impact__stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.research-impact__stat-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.research-impact__stat-label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: #6b7280;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.research-impact__stat-value-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.research-impact__stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.research-impact__stat-trend {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.research-impact__stat-trend--up {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.research-impact__stat-trend--down {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.research-impact__stat-trend--stable {
|
||||
background: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.research-impact__stat-sub {
|
||||
font-size: 0.8rem;
|
||||
color: #9ca3af;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.research-impact__charts {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.research-impact__charts {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.research-impact__chart-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 1.75rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.research-impact__chart-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #1b254b;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.research-impact__chart-sub {
|
||||
font-size: 0.8rem;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.research-impact__bar-chart {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 1.5rem;
|
||||
height: 160px;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.research-impact__bar-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.research-impact__bar {
|
||||
width: 100%;
|
||||
border-radius: 6px 6px 0 0;
|
||||
min-height: 8px;
|
||||
transition: height 0.4s ease;
|
||||
}
|
||||
|
||||
.research-impact__bar--journals {
|
||||
background: #1b254b;
|
||||
}
|
||||
|
||||
.research-impact__bar--conferences {
|
||||
background: #74c0fc;
|
||||
}
|
||||
|
||||
.research-impact__bar-label {
|
||||
font-size: 0.78rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.research-impact__donut-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.research-impact__donut {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
-webkit-mask: radial-gradient(circle, transparent 40%, black 41%);
|
||||
mask: radial-gradient(circle, transparent 40%, black 41%);
|
||||
}
|
||||
|
||||
.research-impact__legend {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.research-impact__legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.research-impact__legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.research-impact__legend-label {
|
||||
color: #374151;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.research-impact__legend-value {
|
||||
font-weight: 600;
|
||||
color: #1b254b;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Quick Links Grid
|
||||
------------------------------------------------------------ */
|
||||
.quick-links {
|
||||
padding: 80px 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.quick-links__header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.quick-links__title {
|
||||
font-size: clamp(1.75rem, 3vw, 2.25rem);
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.quick-links__subtitle {
|
||||
color: #6b7280;
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.quick-links__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.quick-links__grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.quick-links__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-links__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f8fbff;
|
||||
padding: 2rem;
|
||||
border-radius: 1.5rem;
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.quick-links__card:hover {
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
||||
border-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.quick-links__icon-wrap {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
color: #1b254b;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.quick-links__card:hover .quick-links__icon-wrap {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.quick-links__card-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.quick-links__card-desc {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.quick-links__card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quick-links__cta {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #1b254b;
|
||||
}
|
||||
|
||||
.quick-links__arrow {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
background: #1b254b;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.quick-links__card:hover .quick-links__arrow {
|
||||
opacity: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user