minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

feat: Create FE home page and about page

Browse Source
This commit is contained in:
Đỗ Minh Nhật
2026-04-14 19:28:35 +07:00
parent 13a281b8c8
commit 637846a80c
35 changed files with 1989 additions and 1765 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
app/components/about/AboutFeatures.tsx
View File

@@ -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;

39
app/components/about/AboutHero.tsx
View File

@@ -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;

28
app/components/about/AboutIntro.tsx
View File

@@ -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;

79
app/components/about/AboutMission.tsx
View File

@@ -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;

75
app/components/about/AboutNews.tsx
View File

@@ -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
View 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 &amp; 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
View 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
View 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
View 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
View 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 &amp; 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 &amp; 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
View 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 &amp; 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
View 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
View 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; }
}

5
app/components/about/index.ts
View File

@@ -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';