diff --git a/.env.example b/.env.example index b913a3c..dd446c7 100644 --- a/.env.example +++ b/.env.example @@ -1,2 +1,2 @@ PORT=3000 -NEXT_PUBLIC_API_URL=https://www.hailearning.edu.vn/ \ No newline at end of file +NEXT_PUBLIC_API_URL=http://localhost:3001 \ No newline at end of file diff --git a/app/about/page.tsx b/app/about/page.tsx index e8958c5..8c71402 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -1,24 +1,26 @@ -import { AboutHero, AboutIntro, AboutMission, AboutFeatures, AboutNews } from "../components/about"; import { aboutApi } from "../../api/aboutApi"; +import HeroSection from "../components/about/HeroSection"; +import Mission from "../components/about/Mission"; +import WhyParis from "../components/about/WhyParis"; +import HistoryTimeline from "../components/about/HistoryTimeline"; +import LeadershipMessage from "../components/about/LeaderShip_Message"; +import LeadershipBoard from "../components/about/LeaderShip_Broad"; +import Campus from "../components/about/Campus"; -// Force dynamic rendering - không cache export const dynamic = 'force-dynamic'; export default async function AboutPage() { const data = await aboutApi.getAbout(); - if (!data) { - return null; - } - return ( <> - - - - - + + + + + + + ); } - diff --git a/app/components/about/AboutFeatures.tsx b/app/components/about/AboutFeatures.tsx deleted file mode 100644 index 30ee458..0000000 --- a/app/components/about/AboutFeatures.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import Link from "next/link"; -import { AboutData } from "../../about/types"; - -interface AboutFeaturesProps { - data: AboutData["features"]; -} - -const AboutFeatures = ({ data }: AboutFeaturesProps) => { - return ( -
-
-
-
-
-
- img -
-
-
-
-
- {data.subheading} -

{data.heading}

-
-

{data.description}

- {data.items.map((item, index) => ( -
-
- img -
-
-
{item.title}
-

{item.description}

-
-
- ))} - - {data.ctaButton.label} - - -
-
-
-
-
-
- ); -}; - -export default AboutFeatures; diff --git a/app/components/about/AboutHero.tsx b/app/components/about/AboutHero.tsx deleted file mode 100644 index 9ab631c..0000000 --- a/app/components/about/AboutHero.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import Link from 'next/link'; -import { AboutData } from '../../about/types'; - -interface AboutHeroProps { - data: AboutData['hero']; -} - -const AboutHero = ({ data }: AboutHeroProps) => { - return ( -
-
- img -
-
-
-

{data.title}

- {Array.isArray(data.breadcrumb) && ( -
    - {data.breadcrumb.map((item, index) => ( -
  • - {index === data.breadcrumb.length - 1 ? ( - item - ) : ( - <> - {item} - - - )} -
    • - ))} -
- )} -
-
-
- ); -}; - -export default AboutHero; diff --git a/app/components/about/AboutIntro.tsx b/app/components/about/AboutIntro.tsx deleted file mode 100644 index 0e828c2..0000000 --- a/app/components/about/AboutIntro.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { AboutData } from "../../about/types"; - -interface AboutIntroProps { - data: AboutData["intro"]; -} - -const AboutIntro = ({ data }: AboutIntroProps) => { - return ( -
-
-
-
- {data.subheading} -

{data.heading}

-
-

{data.description}

-
-
-
- img -
-
-
-
- ); -}; - -export default AboutIntro; diff --git a/app/components/about/AboutMission.tsx b/app/components/about/AboutMission.tsx deleted file mode 100644 index ba6d6d8..0000000 --- a/app/components/about/AboutMission.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import Link from "next/link"; -import { AboutData } from "../../about/types"; - -interface AboutMissionProps { - data: AboutData["mission"]; -} - -const AboutMission = ({ data }: AboutMissionProps) => { - return ( -
-
- img -
-
-
-
-
-
- img -
- img -
-
- img -
-
- img -
-
- img -
-
-
-
-
-
- {data.subheading} -

{data.heading}

-
-

- {data.description} -

-
- {data.items.map((item, index) => ( -
- - - {item.label}- - -

{item.description}

-
- ))} -
-
    - {data.features.map((feature, index) => ( -
  • - - {feature} -
    • - ))} -
- - {data.ctaButton.label} - - -
-
-
-
-
-
- ); -}; - -export default AboutMission; diff --git a/app/components/about/AboutNews.tsx b/app/components/about/AboutNews.tsx deleted file mode 100644 index f188cde..0000000 --- a/app/components/about/AboutNews.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import Link from "next/link"; -import { AboutData } from "../../about/types"; - -interface AboutNewsProps { - data: AboutData["news"]; -} - -const AboutNews = ({ data }: AboutNewsProps) => { - return ( -
-
-
-
- {data.subheading} -

{data.heading}

-
- - {data.ctaButton.label} - - -
-
- {data.items.map((item, index) => ( -
-
-
- img - {item.category} -
-
-
-
-
-
-
-
-
- Comment ({item.comments}) - _ {item.date} -
-

- {item.title} -

-
-
- img - By {item.author.name} -
- - View Articles - -
-
-
-
- ))} -
-
-
- ); -}; - -export default AboutNews; diff --git a/app/components/about/Campus.tsx b/app/components/about/Campus.tsx new file mode 100644 index 0000000..c8d477c --- /dev/null +++ b/app/components/about/Campus.tsx @@ -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 ( +
+
+
+

Campus & Research Centers

+

+ State-of-the-art facilities nestled in the historic Latin Quarter, designed to foster innovation and collaboration. +

+
+ +
+ {CENTERS.map((center, i) => ( +
+
+ {center.title} +
+
+ + {center.tag} + +

{center.title}

+

{center.desc}

+ + Explore Facility + +
+
+ ))} +
+
+
+ ); +}; + +export default Campus; diff --git a/app/components/about/HeroSection.tsx b/app/components/about/HeroSection.tsx new file mode 100644 index 0000000..362026a --- /dev/null +++ b/app/components/about/HeroSection.tsx @@ -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 ( +
+
+
+ {/* Left: Text */} +
+
+
+ + Our Identity +
+

+

+ 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. +

+
+ +
+

+
+ + {/* Right: Image */} +
+
+ University campus +
+
+ +
+
+

Top 50

+

Global Research Ranking

+
+
+
+
+
+
+
+ ); +}; + +export default HeroSection; diff --git a/app/components/about/HistoryTimeline.tsx b/app/components/about/HistoryTimeline.tsx new file mode 100644 index 0000000..f1c5959 --- /dev/null +++ b/app/components/about/HistoryTimeline.tsx @@ -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 ( +
+
+
+

Our History

+

A legacy of academic excellence spanning over a century.

+
+ +
+
+ + {TIMELINE.map((item, i) => ( +
+
+

{item.year}

+

{item.title}

+

{item.desc}

+
+
+
+
+
+
+ ))} +
+
+
+ ); +}; + +export default HistoryTimeline; diff --git a/app/components/about/LeaderShip_Broad.tsx b/app/components/about/LeaderShip_Broad.tsx new file mode 100644 index 0000000..eefd6bc --- /dev/null +++ b/app/components/about/LeaderShip_Broad.tsx @@ -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 ( +
+
+
+
+ + University Leadership + +
+

Meet Our Leaders

+

Guiding our academic vision and institutional strategy.

+
+ +
+ {LEADERS.map((leader, i) => ( +
+
+ {leader.name} +
+
+

{leader.name}

+

{leader.role}

+
+ + + + + + +
+
+
+ ))} +
+
+
+ ); +}; + +export default LeadershipBoard; diff --git a/app/components/about/LeaderShip_Message.tsx b/app/components/about/LeaderShip_Message.tsx new file mode 100644 index 0000000..95396b8 --- /dev/null +++ b/app/components/about/LeaderShip_Message.tsx @@ -0,0 +1,73 @@ +import Link from "next/link"; + +const LeadershipMessage = () => { + return ( +
+
+
+ {/* Main content */} +
+
+

A Message from the President

+
+
+
+

+ "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." +

+

+ 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. +

+

+ 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. +

+
+
+
+ President +
+
+

Dr. Jean-UX Pilot Laurent

+

President & Vice-Chancellor

+
+ +
+
+ + {/* Sidebar */} +
+
+
+

Accreditation & Standards

+

Learn about our rigorous academic standards and global recognitions.

+ + View Credentials + +
+ +
+
+ +
+

Global Partnerships

+

Explore our network of industry and academic collaborators.

+ + Discover Network + +
+ +
+

Have Questions?

+ + Contact Administration + +
+
+
+
+
+
+ ); +}; + +export default LeadershipMessage; diff --git a/app/components/about/Mission.tsx b/app/components/about/Mission.tsx new file mode 100644 index 0000000..dc64fe3 --- /dev/null +++ b/app/components/about/Mission.tsx @@ -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 ( +
+
+
+
+ + Core Principles + +
+

Our Mission & Values

+

+ We are committed to advancing human knowledge and cultivating responsible global citizens through transformative education. +

+
+ +
+ {VALUES.map((item, i) => ( +
+
+ +
+

{item.title}

+

{item.desc}

+
+ ))} +
+
+
+ ); +}; + +export default Mission; diff --git a/app/components/about/WhyParis.tsx b/app/components/about/WhyParis.tsx new file mode 100644 index 0000000..276aeff --- /dev/null +++ b/app/components/about/WhyParis.tsx @@ -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 ( +
+
+
+ {/* Left: Image grid */} +
+
+
+ {IMAGES[0].alt} + {IMAGES[1].alt} +
+
+ {IMAGES[2].alt} + {IMAGES[3].alt} +
+
+
+ + {/* Right: Text */} +
+
+
+ + Our Location +
+

Why Paris?

+

+ 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. +

+
    + {FEATURES.map((item, i) => ( +
  • + + + + {item} +
    • + ))} +
+ +
+
+
+
+
+ ); +}; + +export default WhyParis; diff --git a/app/components/about/about.css b/app/components/about/about.css new file mode 100644 index 0000000..7f3b447 --- /dev/null +++ b/app/components/about/about.css @@ -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; } +} diff --git a/app/components/about/index.ts b/app/components/about/index.ts deleted file mode 100644 index 0f58ea8..0000000 --- a/app/components/about/index.ts +++ /dev/null @@ -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'; diff --git a/app/components/home/Achievements.tsx b/app/components/home/Achievements.tsx deleted file mode 100644 index 689328c..0000000 --- a/app/components/home/Achievements.tsx +++ /dev/null @@ -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 ( -
-
- img -
-
-
- {data.subheading} -

- {data.heading} -

-
-
-
-
-
- {data.items.map((item, index) => ( -
-

00{item.suffix}

-
{item.label}
-

- {item.description} -

-
- ))} -
-
-
-
- ); -}; - -export default Achievements; diff --git a/app/components/home/BlogPreview.tsx b/app/components/home/BlogPreview.tsx deleted file mode 100644 index ab19413..0000000 --- a/app/components/home/BlogPreview.tsx +++ /dev/null @@ -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 ( -
-
-
-
- {data.subheading} -

- {data.heading} -

-
- - {data.ctaButton.label} - - -
-
- {data.items.map((item, index) => { - const thumbUrl = getCmsImageUrl(item.thumbnail); - return ( -
-
-
- img - {item.category} -
-
-
-
-
-
-
-
-
- Comment ({item.comments.toString().padStart(2, '0')}) - _ {formatDate(item.date)} -
-

- - {item.title} - -

-
-
-
- {item.author.name.charAt(0).toUpperCase()} -
- By {item.author.name} -
- View Articles -
-
-
-
- ); - })} -
-
-
- ); -}; - -export default BlogPreview; diff --git a/app/components/home/FAQSection.tsx b/app/components/home/FAQSection.tsx deleted file mode 100644 index dc47ac5..0000000 --- a/app/components/home/FAQSection.tsx +++ /dev/null @@ -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 ( -
-
-
-
-
-
-
- {data.subheading} -

- {data.heading} -

-
-

- {data.description} -

- - {data.ctaButton.label} - - -
-
-
-
-
- {data.items.map((item, index) => ( -
-
- -
-
-
-

- {item.answer} -

-
-
-
- ))} -
-
-
-
-
-
-
- ); -}; - -export default FAQSection; diff --git a/app/components/home/HeroSection.tsx b/app/components/home/HeroSection.tsx index d123810..3f9b71d 100644 --- a/app/components/home/HeroSection.tsx +++ b/app/components/home/HeroSection.tsx @@ -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 ( +
+
+ Paris University Campus +
+
-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; - }; -} +
+
+
+ + Leading Research Institution +
-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 || '', - }]; +

+ Advancing Knowledge in the Heart of Paris +

- const firstSlide = slides[0]; +

+ A premier liberal arts and research university dedicated to fostering + interdisciplinary innovation, global partnerships, and academic excellence. +

- return ( -
-
- img -
-
- img -
-
- img -
-
- img -
-
-
- - 03 - - - 05 - -
-
-
-
-
-
-
- {slides.map((slide, index) => ( -
-
-
{slide.subtitle}
-

- {slide.title} - {slide.videoUrl && ( - - - - )} -

-

- {slide.description} -

-
- {slide.primaryButton?.href && ( - - {slide.primaryButton.label} - - - )} - {slide.secondaryButton?.href && ( - - {slide.secondaryButton.label} - - - )} -
-
-
- ))} -
-
-
-
-
-
- {slides.map((slide, index) => ( -
-
- img -
-
- ))} -
-
-
-
-
-
- ); +
+ + +
+
+
+
+ ); }; export default HeroSection; diff --git a/app/components/home/Partners.tsx b/app/components/home/Partners.tsx deleted file mode 100644 index 5681d28..0000000 --- a/app/components/home/Partners.tsx +++ /dev/null @@ -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 */} -
-
-
- {(data.visaConsultancy?.items || []).map((partner, index) => ( -
-
-
- {partner.name} -
-

{partner.name}

-
{partner.year}
-
-
- ))} -
-
-
- - {/* Brand Partners Section */} -
-
-
-
-
-
- {(data.brands?.items || []).map((brand, index) => ( -
-
- brand-logo -
-
- ))} -
-
-
-
-
-
- - ); -}; - -export default Partners; diff --git a/app/components/home/QuickLinksGrid.tsx b/app/components/home/QuickLinksGrid.tsx new file mode 100644 index 0000000..366301b --- /dev/null +++ b/app/components/home/QuickLinksGrid.tsx @@ -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 ( + + ); +}; + +export default QuickLinksGrid; diff --git a/app/components/home/Testimonials.tsx b/app/components/home/Testimonials.tsx deleted file mode 100644 index 9e75793..0000000 --- a/app/components/home/Testimonials.tsx +++ /dev/null @@ -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 ( -
-
-
- {data.subheading} -

- {data.heading} -

-
-
-
-
-
- img - - -
Real stories
-
-
-
-
-
- {data.items.map((testimonial, index) => ( -
-
-
- {Array.from({ length: testimonial.rating }).map((_, i) => ( - - ))} -
-

- {testimonial.comment} -

-
-
- img -
-
-
{testimonial.name}
- {testimonial.country} -
-
-
-
- ))} -
-
-
-
-
-
-
- ); -}; - -export default Testimonials; diff --git a/app/components/home/VideoGallery.tsx b/app/components/home/VideoGallery.tsx deleted file mode 100644 index 44faf61..0000000 --- a/app/components/home/VideoGallery.tsx +++ /dev/null @@ -1,35 +0,0 @@ -interface VideoGalleryProps { - data: { - heading: string; - videoUrl: string; - thumbnail: string; - }; -} - -const VideoGallery = ({ data }: VideoGalleryProps) => { - return ( -
- -
- img -
-
- img -
-
-
-
- img -
-

{data.heading.split(' ').map((word, index) => ( - {word}{index === 0 ?
: ' '} - ))}

-
-
-
- ); -}; - -export default VideoGallery; diff --git a/app/components/home/VisaCountries.tsx b/app/components/home/VisaCountries.tsx deleted file mode 100644 index 1d44bfc..0000000 --- a/app/components/home/VisaCountries.tsx +++ /dev/null @@ -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 ( -
-
-
-
-
-
-
- {data.subheading} -

- {data.heading} -

-
-

- {data.description} -

-
-
    - {firstColumn.map((visaType, index) => ( -
  • - - {visaType} -
    • - ))} -
-
    - {secondColumn.map((visaType, index) => ( -
  • - - {visaType} -
    • - ))} -
-
- - {data.ctaButton.label} - - -
-
-
-
- img -
{featuredCountry.code}.{featuredCountry.name}
-
-
-
-
-
-
- ); -}; - -export default VisaCountries; diff --git a/app/components/home/VisaSolutions.tsx b/app/components/home/VisaSolutions.tsx deleted file mode 100644 index bd637c5..0000000 --- a/app/components/home/VisaSolutions.tsx +++ /dev/null @@ -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 ( -
-
-
- {data.subheading} -

- {data.heading} -

-
-
- {data.items.map((item, index) => ( -
-
-
- -
-
{item.number}
-

- {item.title} -

-
-
-

- {item.description} -

- Service Details -
-
-
-
- ))} -
- ); -}; - -export default VisaSolutions; diff --git a/app/components/home/WhyChooseUs.tsx b/app/components/home/WhyChooseUs.tsx deleted file mode 100644 index a47bf22..0000000 --- a/app/components/home/WhyChooseUs.tsx +++ /dev/null @@ -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} - {highlight} - {after} - - ); - } - } - - return ( -
-
- img -
-
-
-
-
-
- img -
- img -
-
- img -
-
- img -
-
- img -
-
-
-
-
-
- {data.subheading} -

- {headingContent} -

-
-

- {data.description} -

-
- {data.items.map((item, index) => ( -
- {item.title}- -

{item.description}

-
- ))} -
-
    - {data.features.map((feature, index) => ( -
  • - - {feature} -
    • - ))} -
- - {data.ctaButton.label} - - -
-
-
-
-
-
- ); -}; - -export default WhyChooseUs; diff --git a/app/components/home/home.css b/app/components/home/home.css new file mode 100644 index 0000000..42a26f2 --- /dev/null +++ b/app/components/home/home.css @@ -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; +} diff --git a/app/globals.css b/app/globals.css index 54e6456..41413ec 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,7 +1,22 @@ @import "tailwindcss"; - -/* Mobile Menu Styles */ @import "./components/layout/Header/mobile-menu.css"; +@import "./components/layout/Header/header-responsive.css"; +@import "./components/home/home.css"; +@import "./components/about/about.css"; + +@theme { + --color-brand-blue: #1b254b; + --color-brand-light: #f8fbff; + --color-ui-muted: #6b7280; + --color-ui-border: #e5e7eb; + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); +} + +@layer components { + .bento-item { + @apply border border-[--color-ui-border] bg-white; + } +} .collapse { visibility: visible !important; @@ -10,27 +25,3 @@ .collapse.show { visibility: visible; } - -/* Header Responsive Styles */ -@import "./components/layout/Header/header-responsive.css"; - - - -@theme { - - --color-brand-blue: #1b254b; - - --color-brand-light: #f8fbff; - - --color-ui-muted: #6b7280; - - --color-ui-border: #e5e7eb; - - --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); -} - -@layer components { - .bento-item { - @apply border border-[--color-ui-border] bg-white; - } -} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 02bfdc0..955e344 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,13 +1,5 @@ import HeroSection from './components/home/HeroSection'; -import WhyChooseUs from './components/home/WhyChooseUs'; -import VisaSolutions from './components/home/VisaSolutions'; -import VisaCountries from './components/home/VisaCountries'; -import Testimonials from './components/home/Testimonials'; -import VideoGallery from './components/home/VideoGallery'; -import FAQSection from './components/home/FAQSection'; -import Achievements from './components/home/Achievements'; -import Partners from './components/home/Partners'; -import BlogPreview from './components/home/BlogPreview'; +import QuickLinksGrid from './components/home/QuickLinksGrid'; import localHomeData from './home.json'; import { getCmsImageUrl } from '@/utils/image'; import { fetchHomeData } from '@/api'; @@ -38,18 +30,8 @@ export default async function Home() { return ( <> - - - - - - - - - - - - + + ); } diff --git a/public/assets/css/main.css b/public/assets/css/main.css index 1030cd5..d07a37e 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -5041,599 +5041,6 @@ html.lenis, html.lenis body { transform: scale(1); } } -.hero-1 { - margin: 0 40px; - border-radius: 32px; - position: relative; - z-index: 9; -} -@media (max-width: 1399px) { - .hero-1 { - margin: 0 30px; - padding-top: 100px; - padding-bottom: 100px; - } -} -@media (max-width: 991px) { - .hero-1 { - padding-top: 80px; - padding-bottom: 0; - } -} -@media (max-width: 575px) { - .hero-1 { - margin: 0 15px; - } -} -.hero-1 .pagi-item { - right: 60px; - top: 345px; - position: absolute; - z-index: 999; -} -@media (max-width: 1600px) { - .hero-1 .pagi-item { - top: 310px; - } -} -@media (max-width: 1399px) { - .hero-1 .pagi-item { - display: none; - } -} -.hero-1 .pagi-item .dot-number { - display: flex; - align-items: center; - gap: 20px; -} -.hero-1 .pagi-item .dot-number .swiper-pagination-bullet { - background: none !important; - width: auto !important; - height: auto !important; - margin: 0 !important; - transition: all 0.4s ease-in-out; -} -.hero-1 .pagi-item .dot-number .swiper-pagination-bullet-active .dot-num span { - color: var(--white); - font-size: 32px; - font-weight: 700; - transition: all 0.4s ease-in-out; -} -.hero-1 .pagi-item .dot-number .dot-num { - transition: all 0.4s ease-in-out; -} -.hero-1 .pagi-item .dot-number .dot-num span { - font-size: 18px; - font-weight: 500; - color: rgba(255, 255, 255, 0.5); - transition: all 0.4s ease-in-out; -} -.hero-1 .left-shape { - position: absolute; - left: 0; - bottom: 0; -} -@media (max-width: 1399px) { - .hero-1 .left-shape { - display: none; - } -} -.hero-1 .hero-shape { - position: absolute; - z-index: -1; - right: 10px; - bottom: 0; - margin-right: 0; -} -@media (max-width: 1600px) { - .hero-1 .hero-shape { - max-width: 660px; - } -} -@media (max-width: 1399px) { - .hero-1 .hero-shape { - display: none; - max-width: initial; - } -} -.hero-1 .hero-shape img { - width: 100%; - height: 100%; -} -.hero-1 .top-shape { - position: absolute; - top: 0; - right: 0; -} -@media (max-width: 1399px) { - .hero-1 .top-shape { - display: none; - } -} -.hero-1 .top-shape img { - width: 100%; - height: 100%; -} -.hero-1 .right-shape { - position: absolute; - right: 0; - top: 0; -} -@media (max-width: 1399px) { - .hero-1 .right-shape { - display: none; - } -} -.hero-1 .container-fluid { - padding: 0 124px; -} -@media (max-width: 1899px) { - .hero-1 .container-fluid { - padding: 0 70px; - } -} -@media (max-width: 1600px) { - .hero-1 .container-fluid { - padding: 0 50px; - } -} -@media (max-width: 1399px) { - .hero-1 .container-fluid { - padding: 0 30px; - } -} -@media (max-width: 575px) { - .hero-1 .container-fluid { - padding: 0 15px; - } -} -.hero-1 .hero-content h6 { - font-size: 18px; - font-weight: 500; - color: var(--white); - margin-bottom: 20px; - line-height: 1; - padding: 8px 16px; - border-radius: 100px; - display: inline-block; - position: relative; - background-color: var(--bg-2); -} -.hero-1 .hero-content h1 { - color: var(--white); - text-transform: uppercase; - margin-bottom: 15px; -} -.hero-1 .hero-content h1 .video-btn { - width: 64px; - height: 64px; - line-height: 64px; - display: inline-block; - background-color: var(--theme); - color: var(--white); - text-align: center; - border-radius: 50%; - font-size: 20px; - margin-left: 60px; - position: relative; - z-index: 1; - transform: translateY(-15px); -} -@media (max-width: 1600px) { - .hero-1 .hero-content h1 .video-btn { - width: 50px; - height: 50px; - line-height: 50px; - } -} -@media (max-width: 1399px) { - .hero-1 .hero-content h1 .video-btn { - display: none; - } -} -.hero-1 .hero-content h1 .video-btn::before { - position: absolute; - content: ""; - background: rgba(203, 204, 207, 0.24); - width: 48px; - height: 1px; - left: -57px; - top: 30px; -} -.hero-1 .hero-content h1 .video-btn::after { - content: ""; - position: absolute; - top: -10px; - left: -10px; - right: -10px; - bottom: -10px; - border: 10px solid rgba(255, 255, 255, 0.12); - border-radius: 50%; - z-index: -1; -} -.hero-1 .hero-content p { - max-width: 671px; - color: rgba(255, 255, 255, 0.8); - padding-left: 30px; - border-left: 2px solid var(--white); - opacity: 0.8; -} -@media (max-width: 1399px) { - .hero-1 .hero-content p { - border-left: none; - padding-left: 0; - } -} -.hero-1 .hero-content .hero-button { - display: flex; - align-items: center; - gap: 35px; - margin-top: 50px; -} -@media (max-width: 1399px) { - .hero-1 .hero-content .hero-button { - margin-top: 30px; - flex-wrap: wrap; - gap: 25px; - } -} -.hero-1 .hero-content .hero-button .theme-btn { - background-color: var(--white); -} -.hero-1 .hero-content .hero-button .theme-btn:hover { - background-color: var(--theme); - border: 1px solid var(--theme); -} -.hero-1 .hero-content .hero-button .theme-btn.style-2 { - border: 1px solid var(--border-2); - background-color: transparent; - color: var(--white); -} -.hero-1 .hero-content .hero-button .theme-btn.style-2 i { - background-color: var(--white); - color: var(--header); -} -.hero-1 .hero-content .hero-button .theme-btn.style-2:hover { - background-color: var(--theme); - color: var(--white); - border: 1px solid var(--theme); -} -.hero-1 .hero-image { - margin-top: 20px; - margin-right: -140px; - position: relative; - z-index: 9; -} -@media (max-width: 1399px) { - .hero-1 .hero-image { - margin-right: 0; - } -} -.hero-1 .hero-image img { - width: 100%; - height: 100%; - opacity: 0; - transform: translateY(50px); - transition: all 0.8s ease-in-out; -} -.hero-1 .swiper-slide-active .hero-image img { - opacity: 1; - transform: translateY(0); -} - -.hero-2 { - position: relative; -} -@media (max-width: 1399px) { - .hero-2 { - padding-top: 100px; - padding-bottom: 100px; - } -} -@media (max-width: 991px) { - .hero-2 { - padding-top: 80px; - padding-bottom: 0; - } -} -.hero-2 .shape { - position: absolute; - left: 0; - top: 0; -} -@media (max-width: 1399px) { - .hero-2 .shape { - display: none; - } -} -.hero-2 .container-fluid { - padding: 0 65px; -} -@media (max-width: 1600px) { - .hero-2 .container-fluid { - padding: 0 50px; - } -} -@media (max-width: 1399px) { - .hero-2 .container-fluid { - padding: 0 40px; - } -} -@media (max-width: 1399px) { - .hero-2 .container-fluid { - padding: 0 30px; - } -} -@media (max-width: 575px) { - .hero-2 .container-fluid { - padding: 0 15px; - } -} -.hero-2::before { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - content: ""; - background: linear-gradient(279deg, rgba(21, 26, 38, 0.88) 34.84%, rgba(21, 26, 38, 0) 84.02%); -} -.hero-2 .hero-image { - margin-top: 30px; - position: relative; - margin-left: -75px; -} -@media (max-width: 1399px) { - .hero-2 .hero-image { - margin-left: 0; - margin-top: 0; - } -} -.hero-2 .hero-image img { - width: 100%; - height: 100%; -} -.hero-2 .hero-content { - position: relative; - z-index: 999; -} -.hero-2 .hero-content h6 { - color: var(--white); - font-size: 18px; - font-weight: 500; - letter-spacing: 6px; - text-transform: uppercase; - margin-bottom: 20px; -} -.hero-2 .hero-content h1 { - color: var(--white); - text-transform: uppercase; - margin-bottom: 20px; -} -.hero-2 .hero-content p { - color: var(--white); - max-width: 800px; - padding-left: 24px; - border-left: 3px solid var(--white); -} -@media (max-width: 1399px) { - .hero-2 .hero-content p { - border-left: none; - padding-left: 0; - } -} -.hero-2 .hero-content .hero-button { - display: flex; - align-items: center; - gap: 35px; - margin-top: 50px; -} -@media (max-width: 1399px) { - .hero-2 .hero-content .hero-button { - flex-wrap: wrap; - gap: 25px; - } -} -.hero-2 .hero-content .hero-button .theme-btn { - background-color: var(--white); -} -.hero-2 .hero-content .hero-button .theme-btn:hover { - background-color: var(--theme); - border: 1px solid var(--theme); -} -.hero-2 .hero-content .hero-button .theme-btn.style-2 { - border: 1px solid var(--border-2); - background-color: transparent; - color: var(--white); -} -.hero-2 .hero-content .hero-button .theme-btn.style-2 i { - background-color: var(--white); - color: var(--header); -} -.hero-2 .hero-content .hero-button .theme-btn.style-2:hover { - background-color: var(--theme); - color: var(--white); - border: 1px solid var(--theme); -} - -.hero-3 { - position: relative; - z-index: 9; -} -@media (max-width: 1399px) { - .hero-3 { - margin: 0 30px; - padding-top: 100px; - padding-bottom: 100px; - } -} -@media (max-width: 991px) { - .hero-3 { - padding-top: 80px; - padding-bottom: 0; - } -} -@media (max-width: 575px) { - .hero-3 { - margin: 0 15px; - } -} -.hero-3 .pagi-item { - right: 60px; - bottom: 120px; - position: absolute; - z-index: 999; -} -@media (max-width: 1399px) { - .hero-3 .pagi-item { - display: none; - } -} -.hero-3 .pagi-item .dot-number { - display: flex; - align-items: center; - gap: 20px; -} -.hero-3 .pagi-item .dot-number .swiper-pagination-bullet { - background: none !important; - width: auto !important; - height: auto !important; - margin: 0 !important; - transition: all 0.4s ease-in-out; -} -.hero-3 .pagi-item .dot-number .swiper-pagination-bullet-active .dot-num span { - color: var(--white); - font-size: 32px; - font-weight: 700; - transition: all 0.4s ease-in-out; -} -.hero-3 .pagi-item .dot-number .dot-num { - transition: all 0.4s ease-in-out; -} -.hero-3 .pagi-item .dot-number .dot-num span { - font-size: 18px; - font-weight: 500; - color: rgba(255, 255, 255, 0.5); - transition: all 0.4s ease-in-out; -} -.hero-3 .hero-shape { - position: absolute; - z-index: -1; - left: 0; - top: 0; -} -@media (max-width: 1600px) { - .hero-3 .hero-shape { - max-width: 660px; - } -} -@media (max-width: 1399px) { - .hero-3 .hero-shape { - display: none; - max-width: initial; - } -} -.hero-3 .hero-shape img { - width: 100%; - height: 100%; -} -.hero-3 .container-fluid { - padding: 0 124px; -} -@media (max-width: 1899px) { - .hero-3 .container-fluid { - padding: 0 70px; - } -} -@media (max-width: 1600px) { - .hero-3 .container-fluid { - padding: 0 50px; - } -} -@media (max-width: 1399px) { - .hero-3 .container-fluid { - padding: 0 30px; - } -} -@media (max-width: 575px) { - .hero-3 .container-fluid { - padding: 0 15px; - } -} -.hero-3 .hero-content h6 { - font-size: 18px; - font-weight: 500; - color: var(--theme); - margin-bottom: 20px; -} -.hero-3 .hero-content h1 { - color: var(--white); - text-transform: uppercase; - margin-bottom: 15px; -} -.hero-3 .hero-content p { - max-width: 772px; - color: rgba(255, 255, 255, 0.8); - opacity: 0.8; -} -.hero-3 .hero-content .hero-button { - display: flex; - align-items: center; - gap: 35px; - margin-top: 50px; -} -@media (max-width: 1399px) { - .hero-3 .hero-content .hero-button { - margin-top: 30px; - flex-wrap: wrap; - gap: 25px; - } -} -.hero-3 .hero-content .hero-button .theme-btn { - background-color: var(--white); -} -.hero-3 .hero-content .hero-button .theme-btn:hover { - background-color: var(--theme); - border: 1px solid var(--theme); -} -.hero-3 .hero-content .hero-button .theme-btn.style-2 { - border: 1px solid var(--border-2); - background-color: transparent; - color: var(--white); -} -.hero-3 .hero-content .hero-button .theme-btn.style-2 i { - background-color: var(--white); - color: var(--header); -} -.hero-3 .hero-content .hero-button .theme-btn.style-2:hover { - background-color: var(--theme); - color: var(--white); - border: 1px solid var(--theme); -} -.hero-3 .hero-image { - margin-top: 20px; - position: relative; - z-index: 9; -} -@media (max-width: 1399px) { - .hero-3 .hero-image { - margin-right: 0; - } -} -.hero-3 .hero-image img { - width: 100%; - height: 100%; - opacity: 0; - transform: translateY(50px); - transition: all 0.8s ease-in-out; -} -.hero-3 .swiper-slide-active .hero-image img { - opacity: 1; - transform: translateY(0); -} - .mean-container a.meanmenu-reveal { display: none; } diff --git a/public/assets/img/logo/Logo_HaiLearning.jpg b/public/assets/img/logo/Logo_HaiLearning.jpg deleted file mode 100644 index 7014168..0000000 Binary files a/public/assets/img/logo/Logo_HaiLearning.jpg and /dev/null differ diff --git a/public/assets/img/logo/Logo_ULDP.png b/public/assets/img/logo/Logo_ULDP.png new file mode 100644 index 0000000..1cadbe8 Binary files /dev/null and b/public/assets/img/logo/Logo_ULDP.png differ diff --git a/public/assets/img/logo/black-logo.svg b/public/assets/img/logo/black-logo.svg deleted file mode 100644 index ec35168..0000000 --- a/public/assets/img/logo/black-logo.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/public/assets/img/logo/white-logo.svg b/public/assets/img/logo/white-logo.svg deleted file mode 100644 index 486d3ee..0000000 --- a/public/assets/img/logo/white-logo.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - -