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/components/publications/PublicationHeader.tsx b/app/components/publications/PublicationHeader.tsx new file mode 100644 index 0000000..5bcba22 --- /dev/null +++ b/app/components/publications/PublicationHeader.tsx @@ -0,0 +1,45 @@ +import React from 'react'; + +const PublicationHeader = () => { + return ( +
+
+ + {/* Title row + action buttons */} +
+
+

Publication Repository

+

Search, filter, and access over 15,000 academic publications and research papers.

+
+
+ + +
+
+ + {/* Search bar */} +
+ + + + +
+ +
+
+ +
+
+ ); +}; + +export default PublicationHeader; diff --git a/app/components/publications/PublicationResults.tsx b/app/components/publications/PublicationResults.tsx new file mode 100644 index 0000000..7f63444 --- /dev/null +++ b/app/components/publications/PublicationResults.tsx @@ -0,0 +1,169 @@ +'use client'; +import React, { useState } from 'react'; +import Link from 'next/link'; + +const SORT_OPTIONS = ['Relevance', 'Newest First', 'Oldest First', 'Most Cited']; + +const PublicationResults = () => { + const [isSortOpen, setIsSortOpen] = useState(false); + const [selectedSort, setSelectedSort] = useState('Relevance'); + + return ( +
+ + {/* Toolbar */} +
+

+ Showing 1-10 of 12,450 results +

+ +
+ +
+ + {isSortOpen && ( +
+ {SORT_OPTIONS.map((opt) => ( +
{ setSelectedSort(opt); setIsSortOpen(false); }} + > + {opt} +
+ ))} +
+ )} +
+
+
+ + {/* Cards */} +
+ + {/* Card 1 */} +
+
+

+ The Evolution of Democratic Institutions in Post-War Europe +

+
+ + Open Access + + Peer Reviewed +
+
+ +
+
+ + Dr. Elena Rostova, Prof. Marcus Chen +
+
+ October 2024 +
+
+ DOI: 10.1038/s41586-024 +
+
+ Center for Political Studies +
+
+ +

+ This paper examines the structural shifts in Western European democratic frameworks from 1945 to 1980. By analyzing institutional archives across France, Germany, and Italy, the research identifies a distinct divergence in how parliamentary powers were consolidated versus distributed. The findings challenge traditional narratives of a uniform democratic resurgence, suggesting instead that local historical contexts heavily dictated the adoption of specific liberal norms. +

+ +
+ Keywords: + Democracy + European History + Institutions +
+ +
+ + + +
+
+ + {/* Card 2 */} +
+
+

+ Cognitive Linguistics and the Framing of Modern Ethics +

+
+ + Institutional + +
+
+ +
+
+ + Dr. Sarah Jenkins +
+
+ August 2024 +
+
+ DOI: 10.1016/j.cogling.2024 +
+
+ +

+ An exploration into how metaphor and cognitive framing shape contemporary ethical debates. The study utilizes computational linguistics to analyze over 10,000 policy documents and public speeches, demonstrating a significant correlation between specific metaphorical structures and the resulting ethical policy frameworks adopted by legislative bodies. +

+ +
+ + +
+
+ +
+ + {/* Pagination */} +
+ + +
+ + + + ... + +
+ + +
+ +
+ ); +}; + +export default PublicationResults; diff --git a/app/components/publications/PublicationSidebar.tsx b/app/components/publications/PublicationSidebar.tsx new file mode 100644 index 0000000..37b7de2 --- /dev/null +++ b/app/components/publications/PublicationSidebar.tsx @@ -0,0 +1,123 @@ +'use client'; + +import React, { useState } from 'react'; + +const YEARS = ['2024 (1,245)', '2023 (3,412)', '2022 (2,890)']; +const DOMAINS = ['Liberal Arts (4,521)', 'Social Sciences (3,210)', 'Humanities (2,980)', 'Political Science (1,840)']; +const ACCESS_TYPES = ['Open Access', 'Institutional Login', 'Request Access']; + +const AccordionSection = ({ + title, + open, + onToggle, + children, +}: { + title: string; + open: boolean; + onToggle: () => void; + children: React.ReactNode; +}) => ( +
+ +
+ {children} +
+
+); + +const PublicationSidebar = () => { + const [isYearOpen, setIsYearOpen] = useState(true); + const [isDomainOpen, setIsDomainOpen] = useState(true); + const [isAccessOpen, setIsAccessOpen] = useState(true); + const [minYear, setMinYear] = useState(''); + const [maxYear, setMaxYear] = useState(''); + + return ( + + ); +}; + +export default PublicationSidebar; diff --git a/app/components/publications/publications.css b/app/components/publications/publications.css new file mode 100644 index 0000000..6c797e2 --- /dev/null +++ b/app/components/publications/publications.css @@ -0,0 +1,787 @@ +/* ============================================================ + publications.css — Scoped under .pub-wrapper + Matches the HTML reference design exactly. + All rules are scoped to avoid conflicts with Bootstrap/main.css + ============================================================ */ + +/* --- Local CSS Variables (override globals for this page) --- */ +.pub-wrapper { + --pub-blue: #263c6f; + --pub-blue-hover: #1d2e55; + --pub-blue-light: #f0f4f8; + --pub-border: #e5e7eb; + --pub-text: #111827; + --pub-muted: #6b7280; + --pub-bg: #f9fafb; + --pub-accent: #3b82f6; + + background-color: var(--pub-bg); + width: 100%; +} + +/* ============================================================ + SEARCH HEADER SECTION + ============================================================ */ +.pub-wrapper #repo-header { + width: 100%; + background-color: #ffffff; + border-bottom: 1px solid var(--pub-border); + padding-top: 3rem; + padding-bottom: 3rem; +} + +.pub-wrapper #repo-header h1 { + font-size: 2.25rem; + font-weight: 700; + color: var(--pub-text); + letter-spacing: -0.025em; + margin-bottom: 0.5rem; + line-height: 2.5rem; +} + +.pub-wrapper #repo-header p { + color: var(--pub-muted); + font-size: 1.125rem; + margin: 0; +} + +/* Search bar */ +.pub-wrapper .pub-search-bar { + position: relative; + width: 100%; + border-radius: 0.75rem; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); +} + +.pub-wrapper .pub-search-bar input { + display: block; + width: 100%; + padding: 1rem 8rem 1rem 3rem; + border: 1px solid var(--pub-border); + border-radius: 0.75rem; + font-size: 1.125rem; + color: var(--pub-text); + background-color: #ffffff; + outline: none; + transition: border-color 0.2s, box-shadow 0.2s; + box-sizing: border-box; +} + +.pub-wrapper .pub-search-bar input::placeholder { + color: var(--pub-muted); +} + +.pub-wrapper .pub-search-bar input:focus { + border-color: var(--pub-blue); + box-shadow: 0 0 0 2px rgba(38, 60, 111, 0.15); +} + +.pub-wrapper .pub-search-bar .pub-search-icon { + position: absolute; + top: 50%; + left: 1rem; + transform: translateY(-50%); + color: var(--pub-muted); + font-size: 1.125rem; + pointer-events: none; +} + +.pub-wrapper .pub-search-bar .pub-search-btn-wrap { + position: absolute; + top: 50%; + right: 0.5rem; + transform: translateY(-50%); +} + +/* ============================================================ + BUTTONS + ============================================================ */ +.pub-wrapper .pub-btn-primary { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background-color: var(--pub-blue); + color: #ffffff; + border: 1px solid var(--pub-blue); + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: background-color 0.2s; + text-decoration: none; + white-space: nowrap; +} + +.pub-wrapper .pub-btn-primary:hover { + background-color: var(--pub-blue-hover); + color: #ffffff; +} + +.pub-wrapper .pub-btn-outline { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background-color: #ffffff; + color: var(--pub-text); + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: border-color 0.2s, color 0.2s; + text-decoration: none; + white-space: nowrap; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); +} + +.pub-wrapper .pub-btn-outline:hover { + border-color: var(--pub-blue); + color: var(--pub-blue); +} + +/* ============================================================ + MAIN CONTENT LAYOUT + ============================================================ */ +.pub-wrapper #repo-content { + padding-top: 2.5rem; + padding-bottom: 2.5rem; +} + +.pub-wrapper .pub-layout { + display: flex; + flex-direction: column; + gap: 2rem; +} + +@media (min-width: 1024px) { + .pub-wrapper .pub-layout { + flex-direction: row; + } +} + +/* ============================================================ + SIDEBAR + ============================================================ */ +.pub-wrapper .pub-sidebar { + width: 100%; + flex-shrink: 0; +} + +@media (min-width: 1024px) { + .pub-wrapper .pub-sidebar { + width: 20rem; /* 320px */ + min-width: 20rem; + max-width: 20rem; + } +} + +.pub-wrapper .pub-sidebar-inner { + background-color: #ffffff; + border-radius: 0.75rem; + border: 1px solid var(--pub-border); + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + padding: 1.25rem; + position: sticky; + top: 7rem; /* below fixed header */ + height: fit-content; +} + +.pub-wrapper .pub-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1.5rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--pub-border); +} + +.pub-wrapper .pub-sidebar-header h2 { + font-size: 1.125rem; + font-weight: 700; + color: var(--pub-text); + display: flex; + align-items: center; + gap: 0.5rem; + margin: 0; +} + +.pub-wrapper .pub-sidebar-header h2 i { + color: var(--pub-blue); +} + +.pub-wrapper .pub-sidebar-header .pub-clear-btn { + font-size: 0.875rem; + color: var(--pub-accent); + font-weight: 500; + background: none; + border: none; + cursor: pointer; + padding: 0; + text-decoration: none; +} + +.pub-wrapper .pub-sidebar-header .pub-clear-btn:hover { + text-decoration: underline; +} + +/* Accordion */ +.pub-wrapper .pub-accordion { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.pub-wrapper .pub-accordion-item { + /* no extra styles needed */ +} + +.pub-wrapper .pub-accordion-trigger { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + text-align: left; + font-size: 0.9375rem; + font-weight: 600; + color: var(--pub-text); + background: none; + border: none; + cursor: pointer; + padding: 0; + margin-bottom: 0.75rem; +} + +.pub-wrapper .pub-accordion-trigger i { + font-size: 0.75rem; + color: var(--pub-muted); + transition: transform 0.3s ease; +} + +.pub-wrapper .pub-accordion-trigger.open i { + transform: rotate(180deg); +} + +.pub-wrapper .pub-accordion-body { + overflow: hidden; + transition: max-height 0.3s ease-out, opacity 0.3s ease-out; + max-height: 0; + opacity: 0; +} + +.pub-wrapper .pub-accordion-body.open { + max-height: 600px; + opacity: 1; +} + +.pub-wrapper .pub-accordion-body .pub-filter-list { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding-bottom: 0.5rem; +} + +/* Filter checkbox labels */ +.pub-wrapper .pub-filter-label { + display: flex; + align-items: center; + gap: 0.75rem; + cursor: pointer; +} + +.pub-wrapper .pub-filter-label span { + font-size: 0.875rem; + color: var(--pub-text); + transition: color 0.15s; +} + +.pub-wrapper .pub-filter-label:hover span { + color: var(--pub-blue); +} + +/* Custom checkbox */ +.pub-wrapper .pub-checkbox { + appearance: none; + -webkit-appearance: none; + width: 1.15em; + height: 1.15em; + border: 1px solid var(--pub-border); + border-radius: 0.25em; + background-color: #ffffff; + display: grid; + place-content: center; + cursor: pointer; + flex-shrink: 0; + transition: background-color 0.15s, border-color 0.15s; +} + +.pub-wrapper .pub-checkbox::before { + content: ""; + width: 0.65em; + height: 0.65em; + transform: scale(0); + transition: transform 120ms ease-in-out; + background-color: #ffffff; + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); +} + +.pub-wrapper .pub-checkbox:checked { + background-color: var(--pub-blue); + border-color: var(--pub-blue); +} + +.pub-wrapper .pub-checkbox:checked::before { + transform: scale(1); +} + +/* Year range inputs */ +.pub-wrapper .pub-year-range { + display: flex; + gap: 0.5rem; + padding-top: 0.5rem; +} + +.pub-wrapper .pub-year-range input { + width: 50%; + padding: 0.375rem 0.5rem; + border: 1px solid var(--pub-border); + border-radius: 0.25rem; + font-size: 0.875rem; + color: var(--pub-text); + background-color: #ffffff; + outline: none; + transition: border-color 0.2s; + box-sizing: border-box; +} + +.pub-wrapper .pub-year-range input:focus { + border-color: var(--pub-blue); +} + +/* ============================================================ + RESULTS AREA + ============================================================ */ +.pub-wrapper .pub-results { + flex: 1; + min-width: 0; +} + +/* Results toolbar */ +.pub-wrapper .pub-results-toolbar { + display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; + background-color: #ffffff; + padding: 1rem; + border-radius: 0.75rem; + border: 1px solid var(--pub-border); + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + margin-bottom: 1.5rem; +} + +@media (min-width: 640px) { + .pub-wrapper .pub-results-toolbar { + flex-direction: row; + justify-content: space-between; + } +} + +.pub-wrapper .pub-results-count { + font-size: 0.875rem; + color: var(--pub-text); +} + +.pub-wrapper .pub-results-count strong { + font-weight: 700; +} + +.pub-wrapper .pub-sort-wrap { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.pub-wrapper .pub-sort-wrap label { + font-size: 0.875rem; + color: var(--pub-muted); + white-space: nowrap; +} + +.pub-wrapper .pub-sort-select { + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + color: var(--pub-text); + background-color: #ffffff; + outline: none; + cursor: pointer; + transition: border-color 0.2s; + min-width: 140px; +} + +.pub-wrapper .pub-sort-select:focus, +.pub-wrapper .pub-sort-select:hover { + border-color: var(--pub-blue); +} + +/* Sort dropdown (custom React dropdown) */ +.pub-wrapper .pub-sort-dropdown { + position: relative; +} + +.pub-wrapper .pub-sort-dropdown-btn { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + background-color: #ffffff; + color: var(--pub-text); + cursor: pointer; + min-width: 140px; + transition: border-color 0.2s; + outline: none; +} + +.pub-wrapper .pub-sort-dropdown-btn:hover, +.pub-wrapper .pub-sort-dropdown-btn.open { + border-color: var(--pub-blue); +} + +.pub-wrapper .pub-sort-dropdown-btn i { + font-size: 0.625rem; + color: var(--pub-muted); + transition: transform 0.3s; +} + +.pub-wrapper .pub-sort-dropdown-btn.open i { + transform: rotate(180deg); +} + +.pub-wrapper .pub-sort-dropdown-menu { + position: absolute; + top: calc(100% + 4px); + right: 0; + width: 100%; + background-color: #ffffff; + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); + z-index: 50; + overflow: hidden; + padding: 0.25rem 0; +} + +.pub-wrapper .pub-sort-dropdown-option { + padding: 0.5rem 1rem; + font-size: 0.875rem; + cursor: pointer; + transition: background-color 0.15s; + color: var(--pub-text); +} + +.pub-wrapper .pub-sort-dropdown-option:hover { + background-color: #f9fafb; +} + +.pub-wrapper .pub-sort-dropdown-option.selected { + background-color: var(--pub-blue-light); + color: var(--pub-blue); + font-weight: 600; +} + +/* ============================================================ + PUBLICATION CARD + ============================================================ */ +.pub-wrapper .pub-card-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.pub-wrapper .pub-card { + background-color: #ffffff; + border-radius: 0.75rem; + border: 1px solid var(--pub-border); + padding: 1.5rem; + transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease; + cursor: default; +} + +.pub-wrapper .pub-card:hover { + border-color: var(--pub-blue); + box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); +} + +/* Card top row: title + badges */ +.pub-wrapper .pub-card-top { + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 0.75rem; +} + +@media (min-width: 768px) { + .pub-wrapper .pub-card-top { + flex-direction: row; + justify-content: space-between; + } +} + +.pub-wrapper .pub-card-title { + font-size: 1.25rem; + font-weight: 700; + color: var(--pub-text); + line-height: 1.4; + margin: 0; + transition: color 0.2s; +} + +.pub-wrapper .pub-card:hover .pub-card-title { + color: var(--pub-blue); +} + +.pub-wrapper .pub-card-title a { + color: inherit; + text-decoration: none; +} + +.pub-wrapper .pub-card-title a:hover { + color: var(--pub-blue); +} + +/* Badges */ +.pub-wrapper .pub-badges { + display: flex; + gap: 0.5rem; + flex-shrink: 0; + flex-wrap: wrap; +} + +.pub-wrapper .pub-badge { + display: inline-flex; + align-items: center; + gap: 0.25rem; + padding: 0.25rem 0.625rem; + border-radius: 0.25rem; + font-size: 0.75rem; + font-weight: 600; + border: 1px solid transparent; + white-space: nowrap; +} + +.pub-wrapper .pub-badge-open { + background-color: #f0fdf4; + color: #15803d; + border-color: #bbf7d0; +} + +.pub-wrapper .pub-badge-peer { + background-color: var(--pub-blue-light); + color: var(--pub-blue); + border-color: rgba(38, 60, 111, 0.2); +} + +.pub-wrapper .pub-badge-institutional { + background-color: #fefce8; + color: #a16207; + border-color: #fde68a; +} + +.pub-wrapper .pub-badge-request { + background-color: #eff6ff; + color: #1d4ed8; + border-color: #bfdbfe; +} + +/* Card meta row */ +.pub-wrapper .pub-card-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.5rem 1.5rem; + font-size: 0.875rem; + color: var(--pub-muted); + margin-bottom: 1rem; +} + +.pub-wrapper .pub-card-meta .pub-meta-item { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.pub-wrapper .pub-card-meta .pub-meta-item strong { + color: var(--pub-text); + font-weight: 500; +} + +/* Card abstract */ +.pub-wrapper .pub-card-abstract { + font-size: 0.875rem; + color: var(--pub-muted); + line-height: 1.625; + margin-bottom: 1rem; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Keywords */ +.pub-wrapper .pub-keywords { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + margin-bottom: 1rem; +} + +.pub-wrapper .pub-keywords-label { + font-size: 0.75rem; + font-weight: 500; + color: var(--pub-muted); +} + +.pub-wrapper .pub-keyword-tag { + display: inline-block; + padding: 0.25rem 0.5rem; + background-color: #f3f4f6; + color: #4b5563; + border-radius: 0.25rem; + font-size: 0.75rem; +} + +/* Card actions */ +.pub-wrapper .pub-card-actions { + display: flex; + align-items: center; + gap: 0.75rem; + padding-top: 1rem; + border-top: 1px solid var(--pub-border); + flex-wrap: wrap; +} + +.pub-wrapper .pub-action-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + background: none; + border: none; + cursor: pointer; + padding: 0; + transition: color 0.2s; + text-decoration: none; +} + +.pub-wrapper .pub-action-btn-primary { + color: var(--pub-blue); +} + +.pub-wrapper .pub-action-btn-primary:hover { + color: var(--pub-blue-hover); +} + +.pub-wrapper .pub-action-btn-secondary { + color: var(--pub-muted); + margin-left: 1rem; +} + +.pub-wrapper .pub-action-btn-secondary:hover { + color: var(--pub-text); +} + +/* ============================================================ + PAGINATION + ============================================================ */ +.pub-wrapper .pub-pagination { + display: flex; + align-items: center; + justify-content: space-between; + border-top: 1px solid var(--pub-border); + padding-top: 1.5rem; + margin-top: 2rem; + gap: 1rem; +} + +.pub-wrapper .pub-page-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + background-color: #ffffff; + color: var(--pub-text); + cursor: pointer; + transition: border-color 0.2s, color 0.2s; +} + +.pub-wrapper .pub-page-btn:hover:not(:disabled) { + border-color: var(--pub-blue); + color: var(--pub-blue); +} + +.pub-wrapper .pub-page-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + background-color: #f9fafb; +} + +.pub-wrapper .pub-page-numbers { + display: none; + align-items: center; + gap: 0.25rem; +} + +@media (min-width: 768px) { + .pub-wrapper .pub-page-numbers { + display: flex; + } +} + +.pub-wrapper .pub-page-num { + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + background-color: #ffffff; + color: var(--pub-text); + border: none; + cursor: pointer; + transition: background-color 0.15s, color 0.15s; +} + +.pub-wrapper .pub-page-num:hover { + background-color: #f3f4f6; +} + +.pub-wrapper .pub-page-num.active { + background-color: var(--pub-blue); + color: #ffffff; + cursor: default; +} + +.pub-wrapper .pub-page-ellipsis { + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + color: var(--pub-muted); + font-size: 0.875rem; +} diff --git a/app/components/research/ProjectsAndCenters.tsx b/app/components/research/ProjectsAndCenters.tsx new file mode 100644 index 0000000..83c078d --- /dev/null +++ b/app/components/research/ProjectsAndCenters.tsx @@ -0,0 +1,208 @@ +import React from 'react'; + +// Khối chứa 2 cột: Active Projects Feed và Funding Calls +const ProjectsAndCenters = () => { + return ( +
+
+
+ + {/* --- CỘT TRÁI (7/12): ACTIVE PROJECTS LIST --- */} +
+
+

Active Projects Feed

+ + View All Projects + +
+ +
+ + {/* Project Item 1 */} +
+
+ + + +
+
+
+ Active + + + + + Updated 2d ago + +
+

Urban Microclimate Modeling

+

+ Developing high-resolution predictive models for heat island effects in European metropolitan areas using machine learning. +

+ +
+
+ Researcher + Researcher +
+3
+
+
+
+ Progress + 65% +
+
+
+
+
+
+
+
+ + {/* Project Item 2 */} +
+
+ + + +
+
+
+ Data Collection + + + + + Updated 1w ago + +
+

Digital Rights in the EU Framework

+

+ A comparative analysis of member state implementation of digital privacy directives and their impact on civil liberties. +

+ +
+
+ Researcher + Researcher +
+
+
+ Progress + 30% +
+
+
+
+
+
+
+
+ + {/* Project Item 3 */} +
+
+ + + +
+
+
+ Review + + + + + Updated 3w ago + +
+

Behavioral Impacts of Universal Basic Income

+

+ Longitudinal study tracking spending habits and employment outcomes in selected pilot regions across France. +

+ +
+
+ Researcher + Researcher + Researcher +
+
+
+ Progress + 90% +
+
+
+
+
+
+
+
+
+
+ + {/* --- CỘT PHẢI (5/12): FUNDING CALLS --- */} +
+
+

Funding Calls

+
+ +
+
+ + {/* Item 1 */} +
+ Closing Soon +

EU Horizon 2025: Sustainable Tech

+
+ + Due Nov 15 + + + Details + +
+
+ + {/* Item 2 */} +
+ Internal Grant +

Seed Funding for AI Ethics

+
+ + Due Dec 01 + + + Details + +
+
+ +
+ + +
+
+ +
+
+
+ ); +}; + +export default ProjectsAndCenters; \ No newline at end of file diff --git a/app/components/research/ResearchDomains.tsx b/app/components/research/ResearchDomains.tsx new file mode 100644 index 0000000..7c13d6c --- /dev/null +++ b/app/components/research/ResearchDomains.tsx @@ -0,0 +1,167 @@ +import React from 'react'; + +// Khối chứa danh sách các lĩnh vực nghiên cứu. +const ResearchDomains = () => { + return ( +
+
+ + {/* Tiêu đề Section */} +
+

Research Domains

+

+ Discover our core areas of expertise, where interdisciplinary teams tackle complex global challenges. +

+
+ + {/* Grid chứa các thẻ (Cards) */} +
+ + {/* Domain Card 1 (Nổi bật - Màu xanh) */} +
+ {/* Hiệu ứng Glow */} +
+ +
+ + + +
+ +

Law & Policy

+

+ Investigating the evolution of international law, human rights, and public policy in a rapidly changing geopolitical landscape. +

+ +
+ 42 Centers + + + +
+
+ + {/* Domain Card 2 */} +
+
+ + + +
+ +

Cognitive Science

+

+ Bridging psychology, neuroscience, and artificial intelligence to understand human cognition and behavior. +

+ +
+ 28 Centers + + + +
+
+ + {/* Domain Card 3 */} +
+
+ + + +
+ +

Environmental Studies

+

+ Developing sustainable solutions for climate change, resource management, and ecological preservation. +

+ +
+ 35 Centers + + + +
+
+ + {/* Domain Card 4 */} +
+
+ + + +
+ +

History & Humanities

+

+ Preserving cultural heritage and analyzing historical contexts to inform contemporary societal debates. +

+ +
+ 50 Centers + + + +
+
+ + {/* Domain Card 5 */} +
+
+ + + +
+ +

Economics

+

+ Analyzing global markets, behavioral economics, and policy impacts on socioeconomic development. +

+ +
+ 19 Centers + + + +
+
+ + {/* Domain Card 6 - CTA */} +
+
+ + + +
+

View All Domains

+

Explore our complete directory of 15+ research areas.

+
+ +
+
+
+ ); +}; + +export default ResearchDomains; \ No newline at end of file diff --git a/app/components/research/ResearchHero.tsx b/app/components/research/ResearchHero.tsx new file mode 100644 index 0000000..290ed8f --- /dev/null +++ b/app/components/research/ResearchHero.tsx @@ -0,0 +1,101 @@ +'use client'; + +import React from 'react'; +import { useRouter } from 'next/navigation'; + +const ResearchHero = () => { + const router = useRouter(); + return ( +
+
+
+ + {/* --- CỘT TRÁI --- */} +
+ + {/* Label: gạch ngang + "Research Hub" */} +
+ + Research Hub +
+ + {/* Heading */} +

+ Pioneering
+ Discovery +

+ + {/* Description */} +

+ Explore our cutting-edge research domains, active projects, and interdisciplinary centers driving innovation in liberal arts and sciences. +

+ + {/* Buttons */} +
+ + +
+
+ + {/* --- CỘT PHẢI: Visual composition --- */} +
+
+ + {/* Glow nền */} +
+ + {/* Main image card */} +
+ Research laboratory +
+
+
+ + Featured + +
+

Cognitive Sciences Lab

+

Exploring the intersection of AI and human psychology.

+
+
+ + {/* Floating stat card 1 — Publications */} +
+
+ +
+
+

12k+

+

Publications

+
+
+ + {/* Floating stat card 2 — Active Projects */} +
+
+ +
+
+

340

+

Active Projects

+
+
+ +
+
+ +
+
+
+ ); +}; + +export default ResearchHero; diff --git a/app/components/research/ResearchResources.tsx b/app/components/research/ResearchResources.tsx new file mode 100644 index 0000000..cea555a --- /dev/null +++ b/app/components/research/ResearchResources.tsx @@ -0,0 +1,68 @@ +import React from 'react'; + +// Khối chứa 2 banner: Research Guidance và Publication Repository +const ResearchResources = () => { + return ( + + ); +}; + +export default ResearchResources; \ No newline at end of file diff --git a/app/components/research/ResearchSearch.tsx b/app/components/research/ResearchSearch.tsx new file mode 100644 index 0000000..09fb4b7 --- /dev/null +++ b/app/components/research/ResearchSearch.tsx @@ -0,0 +1,115 @@ +'use client'; + +import React, { useState } from 'react'; +import { useRouter } from 'next/navigation'; + +const ResearchSearch = () => { + const [query, setQuery] = useState(''); + const [activeFilter, setActiveFilter] = useState('Researchers'); + const filters = ['Researchers', 'Labs', 'Projects', 'Institutes']; + const router = useRouter(); + + const handleSearch = () => { + const params = new URLSearchParams({ q: query, type: activeFilter }); + router.push(`/research/search?${params.toString()}`); + }; + + return ( +
+ + {/* Search bar */} +
+
+ +
+ setQuery(e.target.value)} + onKeyDown={(e) => e.key === 'Enter' && handleSearch()} + placeholder="Search across researchers, labs, projects, and disciplines..." + style={{ + width: '100%', + paddingLeft: '3rem', + paddingRight: '8rem', + paddingTop: '1rem', + paddingBottom: '1rem', + backgroundColor: '#ffffff', + border: '1px solid #e5e7eb', + borderRadius: '1rem', + boxShadow: '0 1px 2px 0 rgba(0,0,0,0.05)', + fontSize: '1rem', + color: '#374151', + outline: 'none', + transition: 'border-color 0.2s, box-shadow 0.2s', + boxSizing: 'border-box', + }} + onFocus={(e) => { + e.target.style.borderColor = '#263c6f'; + e.target.style.boxShadow = '0 0 0 2px rgba(38,60,111,0.15)'; + }} + onBlur={(e) => { + e.target.style.borderColor = '#e5e7eb'; + e.target.style.boxShadow = '0 1px 2px 0 rgba(0,0,0,0.05)'; + }} + /> +
+ +
+
+ + {/* Filter pills */} +
+ + Filters: + + {filters.map((filter) => ( + + ))} +
+ +
+ ); +}; + +export default ResearchSearch; diff --git a/app/components/research/research.css b/app/components/research/research.css new file mode 100644 index 0000000..f73db68 --- /dev/null +++ b/app/components/research/research.css @@ -0,0 +1,718 @@ +/* ============================================================ + research.css — Scoped under .research-wrapper + Matches the HTML reference design exactly. + All rules scoped to avoid conflicts with Bootstrap/main.css + ============================================================ */ + +/* --- Local CSS Variables --- */ +.research-wrapper { + --r-blue: #263c6f; + --r-blue-hover: #1d2e55; + --r-blue-light: #f0f4f8; + --r-accent: #3b82f6; + --r-border: #e5e7eb; + --r-text: #111827; + --r-muted: #6b7280; + --r-bg: #f9fafb; + --r-white: #ffffff; + --r-shadow-soft: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); + --r-shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); + + width: 100%; + background-color: var(--r-bg); +} + +/* ============================================================ + HERO SECTION + ============================================================ */ +.research-wrapper #research-hero { + width: 100%; + background-color: var(--r-bg); + border-bottom: 1px solid var(--r-border); + padding-top: 3rem; + padding-bottom: 4rem; + font-family: 'Inter', sans-serif; +} + +/* Label row: gạch ngang + text "Research Hub" */ +.research-wrapper #research-hero .hero-label { + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.research-wrapper #research-hero .hero-label-line { + display: block; + width: 2rem; + height: 2.5px; + background-color: var(--r-accent); + flex-shrink: 0; +} + +.research-wrapper #research-hero .hero-label-text { + font-size: 0.875rem; + font-weight: 600; + color: var(--r-blue); + text-transform: uppercase; + letter-spacing: 0.05em; + font-family: 'Inter', sans-serif; +} + +/* Heading */ +.research-wrapper #research-hero h1 { + font-family: 'Inter', sans-serif; + font-size: 3rem; + font-weight: 700; + color: var(--r-text); + letter-spacing: -0.025em; + line-height: 1.1; + margin: 0; +} + +@media (min-width: 1024px) { + .research-wrapper #research-hero h1 { + font-size: 4.5rem; + } +} + +.research-wrapper #research-hero h1 span { + color: var(--r-blue); +} + +/* Paragraph */ +.research-wrapper #research-hero .hero-desc { + font-family: 'Inter', sans-serif; + font-size: 1.125rem; + color: var(--r-muted); + line-height: 1.625; + max-width: 36rem; + margin: 0; +} + +/* Left column spacing */ +.research-wrapper #research-hero .hero-left { + display: flex; + flex-direction: column; + gap: 2rem; +} + +/* Button row */ +.research-wrapper #research-hero .hero-buttons { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +/* Hero buttons */ +.research-wrapper .r-btn-primary { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 1rem 2rem; + background-color: var(--r-blue); + color: var(--r-white); + border: none; + border-radius: 9999px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s; + box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); + text-decoration: none; +} + +.research-wrapper .r-btn-primary:hover { + background-color: var(--r-blue-hover); + color: var(--r-white); +} + +.research-wrapper .r-btn-outline { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 1rem 2rem; + background-color: var(--r-white); + color: var(--r-text); + border: 1px solid var(--r-border); + border-radius: 9999px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + text-decoration: none; +} + +.research-wrapper .r-btn-outline:hover { + background-color: #f9fafb; + color: var(--r-text); +} + +/* Hero floating stat cards */ +.research-wrapper .r-stat-card { + position: absolute; + background-color: var(--r-white); + border-radius: 1rem; + padding: 1rem; + border: 1px solid var(--r-border); + box-shadow: var(--r-shadow-hover); + z-index: 20; + display: flex; + align-items: center; + gap: 1rem; +} + +.research-wrapper .r-stat-card p { + margin: 0; + line-height: 1.2; +} + +/* ============================================================ + RESEARCH DOMAINS SECTION + ============================================================ */ +.research-wrapper #research-domains { + padding-top: 5rem; + padding-bottom: 5rem; + background-color: var(--r-white); +} + +.research-wrapper #research-domains h2 { + font-size: 1.875rem; + font-weight: 700; + color: var(--r-text); + margin-bottom: 1rem; +} + +@media (min-width: 1024px) { + .research-wrapper #research-domains h2 { + font-size: 2.25rem; + } +} + +.research-wrapper #research-domains > div > div:first-child p { + color: var(--r-muted); + max-width: 42rem; + margin: 0 auto; +} + +/* Domain card — folder tab shape */ +.research-wrapper .folder-tab { + clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); + padding: 2rem; + min-height: 320px; + display: flex; + flex-direction: column; + border-radius: 1.5rem; + position: relative; + overflow: hidden; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.research-wrapper .folder-tab:hover { + transform: translateY(-4px); + box-shadow: var(--r-shadow-hover); +} + +/* Blue variant (first card) */ +.research-wrapper .folder-tab-blue { + background-color: var(--r-blue); + color: var(--r-white); +} + +.research-wrapper .folder-tab-blue h3 { + color: var(--r-white); +} + +.research-wrapper .folder-tab-blue p { + color: rgba(255,255,255,0.8); +} + +/* Light variant */ +.research-wrapper .folder-tab-light { + background-color: var(--r-blue-light); + color: var(--r-text); + border: 1px solid var(--r-border); +} + +/* CTA card (dashed border) */ +.research-wrapper .domain-card-cta { + border-radius: 1.5rem; + padding: 2rem; + min-height: 320px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + border: 2px dashed var(--r-border); + background-color: var(--r-bg); + cursor: pointer; + transition: border-color 0.2s; +} + +.research-wrapper .domain-card-cta:hover { + border-color: var(--r-blue); +} + +.research-wrapper .domain-card-cta h3 { + font-size: 1.25rem; + font-weight: 700; + color: var(--r-text); + margin-bottom: 0.5rem; +} + +.research-wrapper .domain-card-cta p { + font-size: 0.875rem; + color: var(--r-muted); + margin: 0; +} + +/* Domain card icon box */ +.research-wrapper .domain-icon-blue { + width: 3.5rem; + height: 3.5rem; + border-radius: 1rem; + background-color: rgba(255,255,255,0.2); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 2rem; + border: 1px solid rgba(255,255,255,0.3); + flex-shrink: 0; +} + +.research-wrapper .domain-icon-light { + width: 3.5rem; + height: 3.5rem; + border-radius: 1rem; + background-color: var(--r-white); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 2rem; + border: 1px solid var(--r-border); + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + flex-shrink: 0; +} + +.research-wrapper .domain-card-cta .domain-icon-cta { + width: 4rem; + height: 4rem; + border-radius: 9999px; + background-color: var(--r-white); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + transition: transform 0.2s; +} + +.research-wrapper .domain-card-cta:hover .domain-icon-cta { + transform: scale(1.1); +} + +/* Domain card footer row */ +.research-wrapper .domain-card-footer { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: auto; +} + +.research-wrapper .domain-badge-white { + font-size: 0.875rem; + font-weight: 500; + background-color: var(--r-white); + padding: 0.25rem 0.75rem; + border-radius: 9999px; + border: 1px solid var(--r-border); + color: var(--r-blue); +} + +.research-wrapper .domain-badge-glass { + font-size: 0.875rem; + font-weight: 500; + background-color: rgba(255,255,255,0.2); + padding: 0.25rem 0.75rem; + border-radius: 9999px; + color: var(--r-white); +} + +/* ============================================================ + PROJECTS & CENTERS SECTION + ============================================================ */ +.research-wrapper #projects-centers { + padding-top: 5rem; + padding-bottom: 5rem; + background-color: var(--r-bg); + border-top: 1px solid var(--r-border); + border-bottom: 1px solid var(--r-border); +} + +.research-wrapper #projects-centers h2 { + font-size: 1.5rem; + font-weight: 700; + color: var(--r-text); + margin: 0; +} + +/* Project item card */ +.research-wrapper .project-card { + background-color: var(--r-white); + border-radius: 1.25rem; + padding: 1.5rem; + border: 1px solid var(--r-border); + box-shadow: var(--r-shadow-soft); + display: flex; + flex-direction: column; + gap: 1.5rem; + align-items: flex-start; + transition: box-shadow 0.25s ease; +} + +.research-wrapper .project-card:hover { + box-shadow: var(--r-shadow-hover); +} + +@media (min-width: 640px) { + .research-wrapper .project-card { + flex-direction: row; + align-items: center; + } +} + +.research-wrapper .project-icon { + width: 4rem; + height: 4rem; + border-radius: 0.75rem; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + border: 1px solid var(--r-border); +} + +.research-wrapper .project-icon-blue { background-color: var(--r-blue-light); border-color: var(--r-border); } +.research-wrapper .project-icon-purple { background-color: #faf5ff; border-color: #e9d5ff; } +.research-wrapper .project-icon-orange { background-color: #fff7ed; border-color: #fed7aa; } + +/* Status badges */ +.research-wrapper .badge { + display: inline-flex; + align-items: center; + padding: 0.25rem 0.625rem; + border-radius: 0.375rem; + font-size: 0.75rem; + font-weight: 600; + border: 1px solid transparent; +} + +.research-wrapper .badge-active { background-color: #f0fdf4; color: #15803d; border-color: #bbf7d0; } +.research-wrapper .badge-collection { background-color: #fefce8; color: #a16207; border-color: #fde68a; } +.research-wrapper .badge-review { background-color: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } + +/* Progress bar */ +.research-wrapper .progress-bar-track { + width: 8rem; + background-color: var(--r-bg); + border-radius: 9999px; + height: 0.375rem; +} + +.research-wrapper .progress-bar-fill { + height: 0.375rem; + border-radius: 9999px; +} + +.research-wrapper .progress-fill-blue { background-color: var(--r-blue); } +.research-wrapper .progress-fill-accent { background-color: var(--r-accent); } + +/* ============================================================ + FUNDING CALLS (right column) + ============================================================ */ +.research-wrapper .funding-card { + background-color: var(--r-white); + border-radius: 1.5rem; + padding: 1.5rem; + border: 1px solid var(--r-border); + box-shadow: var(--r-shadow-soft); + display: flex; + flex-direction: column; + transition: box-shadow 0.25s ease; +} + +.research-wrapper .funding-card:hover { + box-shadow: var(--r-shadow-hover); +} + +.research-wrapper .funding-item { + padding: 1.25rem; + background-color: var(--r-bg); + border-radius: 1rem; + border: 1px solid var(--r-border); + transition: border-color 0.2s; +} + +.research-wrapper .funding-item:hover { + border-color: var(--r-accent); +} + +.research-wrapper .funding-item h4 { + font-size: 1rem; + font-weight: 700; + color: var(--r-text); + margin: 0 0 0.75rem 0; +} + +.research-wrapper .funding-label-urgent { + font-size: 0.625rem; + font-weight: 700; + color: #ef4444; + text-transform: uppercase; + letter-spacing: 0.05em; + display: block; + margin-bottom: 0.5rem; +} + +.research-wrapper .funding-label-internal { + font-size: 0.625rem; + font-weight: 700; + color: var(--r-blue); + text-transform: uppercase; + letter-spacing: 0.05em; + display: block; + margin-bottom: 0.5rem; +} + +.research-wrapper .funding-meta { + display: flex; + justify-content: space-between; + align-items: center; +} + +.research-wrapper .funding-due { + font-size: 0.75rem; + color: var(--r-muted); + font-weight: 500; + display: inline-flex; + align-items: center; + gap: 0.375rem; +} + +.research-wrapper .funding-link { + font-size: 0.75rem; + font-weight: 600; + color: var(--r-blue); + display: inline-flex; + align-items: center; + gap: 0.25rem; + text-decoration: none; + transition: color 0.15s; +} + +.research-wrapper .funding-link:hover { + color: var(--r-blue-hover); +} + +.research-wrapper .funding-view-all { + width: 100%; + margin-top: 1.5rem; + padding: 0.75rem; + border-radius: 0.75rem; + border: 1px solid var(--r-border); + font-size: 0.875rem; + font-weight: 600; + color: var(--r-text); + background-color: var(--r-white); + cursor: pointer; + transition: border-color 0.2s, color 0.2s; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); +} + +.research-wrapper .funding-view-all:hover { + border-color: var(--r-blue); + color: var(--r-blue); +} + +/* ============================================================ + RESEARCH RESOURCES (Quick Links) + ============================================================ */ +.research-wrapper #research-quick-links { + padding-top: 5rem; + padding-bottom: 5rem; + background-color: var(--r-white); +} + +.research-wrapper .resource-card { + display: block; + background-color: var(--r-bg); + border-radius: 1.5rem; + padding: 2rem; + border: 1px solid var(--r-border); + position: relative; + overflow: hidden; + text-decoration: none; + transition: border-color 0.2s; +} + +.research-wrapper .resource-card:hover { + border-color: var(--r-accent); +} + +.research-wrapper .resource-card-glow { + position: absolute; + right: 0; + top: 0; + width: 16rem; + height: 16rem; + background-color: var(--r-blue-light); + border-radius: 9999px; + filter: blur(64px); + opacity: 0.5; + transform: translateY(-50%) translateX(25%); + transition: opacity 0.3s; + pointer-events: none; +} + +.research-wrapper .resource-card:hover .resource-card-glow { + opacity: 0.8; +} + +.research-wrapper .resource-icon { + width: 4rem; + height: 4rem; + border-radius: 1rem; + background-color: var(--r-white); + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + border: 1px solid var(--r-border); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + transition: transform 0.2s; +} + +.research-wrapper .resource-card:hover .resource-icon { + transform: scale(1.05); +} + +.research-wrapper .resource-card h3 { + font-size: 1.5rem; + font-weight: 700; + color: var(--r-text); + margin-bottom: 0.5rem; + transition: color 0.2s; +} + +.research-wrapper .resource-card:hover h3 { + color: var(--r-blue); +} + +.research-wrapper .resource-card p { + color: var(--r-muted); + line-height: 1.625; + margin-bottom: 1rem; +} + +.research-wrapper .resource-link { + display: inline-flex; + align-items: center; + font-size: 0.875rem; + font-weight: 600; + color: var(--r-blue); + gap: 0.5rem; +} + +/* ============================================================ + COLLABORATION CTA SECTION + ============================================================ */ +.research-wrapper #collaboration-cta { + padding-top: 6rem; + padding-bottom: 6rem; + background-color: var(--r-blue); + position: relative; + overflow: hidden; +} + +.research-wrapper #collaboration-cta h2 { + font-size: 2.25rem; + font-weight: 700; + color: var(--r-white); + letter-spacing: -0.025em; + margin-bottom: 1.5rem; +} + +@media (min-width: 768px) { + .research-wrapper #collaboration-cta h2 { font-size: 3rem; } +} + +@media (min-width: 1024px) { + .research-wrapper #collaboration-cta h2 { font-size: 3.75rem; } +} + +.research-wrapper #collaboration-cta p { + font-size: 1.25rem; + color: var(--r-blue-light); + opacity: 0.9; + line-height: 1.625; + max-width: 42rem; + margin: 0 auto 2.5rem; + font-weight: 300; +} + +.research-wrapper .cta-btn-white { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem 2rem; + background-color: var(--r-white); + color: var(--r-blue); + border: none; + border-radius: 0.75rem; + font-size: 1rem; + font-weight: 700; + cursor: pointer; + transition: background-color 0.2s; + box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); + text-decoration: none; + width: 100%; +} + +@media (min-width: 640px) { + .research-wrapper .cta-btn-white { width: auto; } +} + +.research-wrapper .cta-btn-white:hover { + background-color: #f9fafb; + color: var(--r-blue); +} + +.research-wrapper .cta-btn-ghost { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem 2rem; + background-color: transparent; + color: var(--r-white); + border: 2px solid rgba(255,255,255,0.3); + border-radius: 0.75rem; + font-size: 1rem; + font-weight: 700; + cursor: pointer; + transition: background-color 0.2s; + text-decoration: none; + width: 100%; +} + +@media (min-width: 640px) { + .research-wrapper .cta-btn-ghost { width: auto; } +} + +.research-wrapper .cta-btn-ghost:hover { + background-color: rgba(255,255,255,0.1); + color: var(--r-white); +} diff --git a/app/components/research/search/ResearchSearchHeader.tsx b/app/components/research/search/ResearchSearchHeader.tsx new file mode 100644 index 0000000..80ec3d7 --- /dev/null +++ b/app/components/research/search/ResearchSearchHeader.tsx @@ -0,0 +1,79 @@ +'use client'; + +import React, { useState } from 'react'; +import { useRouter } from 'next/navigation'; + +const FILTERS = ['Researchers', 'Labs', 'Projects', 'Institutes']; + +const ResearchSearchHeader = () => { + const [query, setQuery] = useState(''); + const [activeFilter, setActiveFilter] = useState('Researchers'); + const router = useRouter(); + + const handleSearch = () => { + const params = new URLSearchParams({ q: query, type: activeFilter }); + router.push(`/research/search?${params.toString()}`); + }; + + return ( +
+
+ + {/* Title row */} +
+
+

Research Search

+

Search across researchers, labs, active projects, and institutes.

+
+
+ +
+
+ + {/* Search bar */} +
+ + + + setQuery(e.target.value)} + onKeyDown={(e) => e.key === 'Enter' && handleSearch()} + /> +
+ +
+
+ + {/* Filter tabs */} +
+ + Filter by: + + {FILTERS.map((f) => ( + + ))} +
+ +
+
+ ); +}; + +export default ResearchSearchHeader; diff --git a/app/components/research/search/ResearchSearchResults.tsx b/app/components/research/search/ResearchSearchResults.tsx new file mode 100644 index 0000000..d4460a8 --- /dev/null +++ b/app/components/research/search/ResearchSearchResults.tsx @@ -0,0 +1,177 @@ +'use client'; + +import React, { useState } from 'react'; + +const SORT_OPTIONS = ['Relevance', 'Newest First', 'Most Active', 'Alphabetical']; + +const RESULTS = [ + { + type: 'Project', + badgeClass: 'pub-badge-open', + badgeIcon: 'fa-flask', + badgeLabel: 'Active Project', + statusClass: 'pub-badge-peer', + statusLabel: 'Environmental Studies', + title: 'Urban Microclimate Modeling', + lead: 'Dr. Alan Turing', + updated: 'Updated 2 days ago', + center: 'Institute for Climate Research', + desc: 'Developing high-resolution predictive models for heat island effects in European metropolitan areas using machine learning and satellite data.', + tags: ['Climate', 'Machine Learning', 'Urban Studies'], + progress: 65, + }, + { + type: 'Lab', + badgeClass: 'pub-badge-institutional', + badgeIcon: 'fa-building-user', + badgeLabel: 'Research Lab', + statusClass: 'pub-badge-peer', + statusLabel: 'Cognitive Science', + title: 'Cognitive Sciences Lab', + lead: 'Prof. Marie Curie', + updated: 'Updated 1 week ago', + center: 'Center for Digital Humanities', + desc: 'Exploring the intersection of artificial intelligence and human psychology, with a focus on decision-making processes and behavioral modeling.', + tags: ['AI', 'Psychology', 'Neuroscience'], + progress: null, + }, + { + type: 'Project', + badgeClass: 'pub-badge-request', + badgeIcon: 'fa-gavel', + badgeLabel: 'Data Collection', + statusClass: 'pub-badge-peer', + statusLabel: 'Law & Policy', + title: 'Digital Rights in the EU Framework', + lead: 'Dr. Elena Rostova', + updated: 'Updated 1 week ago', + center: 'Institute for Advanced European Studies', + desc: 'A comparative analysis of member state implementation of digital privacy directives and their impact on civil liberties across the EU.', + tags: ['Digital Rights', 'EU Law', 'Privacy'], + progress: 30, + }, +]; + +const ResearchSearchResults = () => { + const [isSortOpen, setIsSortOpen] = useState(false); + const [selectedSort, setSelectedSort] = useState('Relevance'); + + return ( +
+ + {/* Toolbar */} +
+

+ Showing 1–10 of 340 results +

+
+ +
+ + {isSortOpen && ( +
+ {SORT_OPTIONS.map((opt) => ( +
{ setSelectedSort(opt); setIsSortOpen(false); }} + > + {opt} +
+ ))} +
+ )} +
+
+
+ + {/* Result cards */} +
+ {RESULTS.map((item, idx) => ( +
+
+

+ {item.title} +

+
+ + {item.badgeLabel} + + {item.statusLabel} +
+
+ +
+
+ + {item.lead} +
+
+ {item.updated} +
+
+ {item.center} +
+
+ +

{item.desc}

+ +
+ Tags: + {item.tags.map((tag) => ( + {tag} + ))} +
+ + {item.progress !== null && ( +
+
+ Progress + {item.progress}% +
+
+
+
+
+ )} + +
+ + +
+
+ ))} +
+ + {/* Pagination */} +
+ +
+ + + + ... + +
+ +
+ +
+ ); +}; + +export default ResearchSearchResults; diff --git a/app/components/research/search/ResearchSearchSidebar.tsx b/app/components/research/search/ResearchSearchSidebar.tsx new file mode 100644 index 0000000..cc961c9 --- /dev/null +++ b/app/components/research/search/ResearchSearchSidebar.tsx @@ -0,0 +1,94 @@ +'use client'; + +import React, { useState } from 'react'; + +const DOMAINS = ['Law & Policy (42)', 'Cognitive Science (28)', 'Environmental Studies (35)', 'History & Humanities (50)', 'Economics (19)']; +const STATUSES = ['Active', 'Data Collection', 'Review', 'Completed']; +const TYPES = ['Researchers', 'Labs', 'Projects', 'Institutes']; + +const AccordionSection = ({ + title, + open, + onToggle, + children, +}: { + title: string; + open: boolean; + onToggle: () => void; + children: React.ReactNode; +}) => ( +
+ +
+ {children} +
+
+); + +const ResearchSearchSidebar = () => { + const [isDomainOpen, setIsDomainOpen] = useState(true); + const [isStatusOpen, setIsStatusOpen] = useState(true); + const [isTypeOpen, setIsTypeOpen] = useState(true); + + return ( + + ); +}; + +export default ResearchSearchSidebar; diff --git a/app/globals.css b/app/globals.css index f9292ec..2868526 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,37 +1,17 @@ @import "tailwindcss"; - -/* Mobile Menu Styles */ @import "./components/layout/Header/mobile-menu.css"; - -.collapse { - visibility: visible !important; -} - -.collapse.show { - visibility: visible; -} - -/* Header Responsive Styles */ @import "./components/layout/Header/header-responsive.css"; - - - +@import "./components/home/home.css"; +@import "./components/about/about.css"; +@import "./components/research/research.css"; +@import "./components/publications/publications.css"; @theme { - --color-brand-blue: #1b254b; - - --color-brand-accent: #3b82f6; --color-brand-light: #f8fbff; - --color-ui-bg: #f9fafb; - - --color-ui-text: #111827; - --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); --shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); @@ -44,9 +24,3 @@ @apply border border-[--color-ui-border] bg-white; } } - -/* Research Page Styles */ -@import "./components/research/research.css"; - -/* Publications Page Styles */ -@import "./components/publications/publications.css"; 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/app/publications/page.tsx b/app/publications/page.tsx new file mode 100644 index 0000000..0e54db4 --- /dev/null +++ b/app/publications/page.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import PublicationHeader from '@/app/components/publications/PublicationHeader'; +import PublicationSidebar from '@/app/components/publications/PublicationSidebar'; +import PublicationResults from '@/app/components/publications/PublicationResults'; + +export default function PublicationsPage() { + return ( +
+ +
+
+
+ + +
+
+
+
+ ); +} diff --git a/app/research/page.tsx b/app/research/page.tsx new file mode 100644 index 0000000..5fdf105 --- /dev/null +++ b/app/research/page.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Metadata } from 'next'; +import ResearchHero from '@/app/components/research/ResearchHero'; +import ResearchSearch from '@/app/components/research/ResearchSearch'; +import ResearchDomains from '@/app/components/research/ResearchDomains'; +import ProjectsAndCenters from '@/app/components/research/ProjectsAndCenters'; +import ResearchResources from '@/app/components/research/ResearchResources'; + +export const metadata: Metadata = { + title: 'Research Hub | Liberal University', + description: 'Explore our cutting-edge research domains, active projects, and funding calls.', +}; + +export default function ResearchPage() { + return ( +
+ + + + + +
+ ); +} diff --git a/app/research/search/page.tsx b/app/research/search/page.tsx new file mode 100644 index 0000000..8344233 --- /dev/null +++ b/app/research/search/page.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Metadata } from 'next'; +import ResearchSearchHeader from '@/app/components/research/search/ResearchSearchHeader'; +import ResearchSearchSidebar from '@/app/components/research/search/ResearchSearchSidebar'; +import ResearchSearchResults from '@/app/components/research/search/ResearchSearchResults'; + +export const metadata: Metadata = { + title: 'Search Research | Liberal University', + description: 'Search across researchers, labs, projects, and institutes.', +}; + +export default function ResearchSearchPage() { + return ( +
+ +
+
+
+ + +
+
+
+
+ ); +} diff --git a/public/assets/css/main.css b/public/assets/css/main.css index b38e5ac..d286402 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 @@ - - - - - - - - - - - - - - - - - -