From 54b8e66c7d226d60624e45c3ac06d2c356b1f913 Mon Sep 17 00:00:00 2001 From: Fiti-git Date: Sun, 3 May 2026 12:48:49 +0530 Subject: [PATCH] feat(ui): redesign foundation with DeepMind-inspired editorial style Introduce a cohesive design system and rebuild the home page as the first pass of a site-wide redesign. List/detail pages will follow. Theme & typography - Add custom MARC light + dark daisyUI themes (marc, marc-dark) with coordinated primary, secondary, accent, neutral and base palettes - Wire Inter (sans) + Instrument Serif (display) via Google Fonts - Add reusable utilities: text-gradient, bg-grid, blob, surface-hover, divider-soft, scroll-rail, eyebrow, focus-visible ring, prefers-reduced-motion guard Layout, nav, footer - BaseLayout now accepts title/description/image/fullWidth props and emits proper SEO + Open Graph + Twitter meta and canonical URL - Inline theme bootstrap script prevents dark-mode flash on load - Navbar: translucent backdrop-blur shell, gradient active-route underline, persistent dark-mode toggle, accessible mobile menu - Footer: dark 3-column layout with brand, explore, about and socials Reusable components - Add src/components/ui/PageHeader.astro and Section.astro - Refresh ResearchAreaCard with image overlay and serif title - Simplify Breadcrumb to minimal uppercase trail Home page - Editorial hero with display serif headline, gradient accent, grid background and ambient blobs - Stats strip (research areas, projects, publications, researchers) - Research pillars grid (was a stacked list) - 4-up latest news rail - Dark CTA card to drive traffic to People Notes - Existing content collections, schemas, sheet sync and deploy workflow are unchanged - Tested with npm run build - 22 pages generated successfully --- src/components/Breadcrumb.astro | 26 +- src/components/Footer.astro | 256 ++++++++++------- src/components/Navbar.astro | 220 +++++++++++---- src/components/ResearchAreaCard.astro | 60 +++- src/components/ui/PageHeader.astro | 26 ++ src/components/ui/Section.astro | 69 +++++ src/layouts/BaseLayout.astro | 79 +++++- src/pages/index.astro | 382 +++++++++++++++----------- src/styles/app.css | 200 +++++++++++++- 9 files changed, 986 insertions(+), 332 deletions(-) create mode 100644 src/components/ui/PageHeader.astro create mode 100644 src/components/ui/Section.astro diff --git a/src/components/Breadcrumb.astro b/src/components/Breadcrumb.astro index eba62d4..973ffe4 100644 --- a/src/components/Breadcrumb.astro +++ b/src/components/Breadcrumb.astro @@ -1,11 +1,25 @@ --- -import "../styles/app.css"; - -const { path } = Astro.props; --- -
-
+ + + diff --git a/src/components/Footer.astro b/src/components/Footer.astro index ff36b8c..3b2d840 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -2,112 +2,170 @@ import { Image } from "astro:assets"; import logo from "../assets/logo.png"; -// --- Configuration: Edit URLs here --- const facebookUrl = - "https://www.facebook.com/p/Multidisciplinary-AI-Research-Center-MARC-61566611961677/"; // e.g., https://www.facebook.com/marc.pdn -const linkedinUrl = "https://www.linkedin.com/company/multidisciplinaryai"; // e.g., https://www.linkedin.com/company/marc-pdn -const youtubeUrl = "https://www.youtube.com/@MARCUoP"; // e.g., https://www.youtube.com/@marc_pdn + "https://www.facebook.com/p/Multidisciplinary-AI-Research-Center-MARC-61566611961677/"; +const linkedinUrl = "https://www.linkedin.com/company/multidisciplinaryai"; +const youtubeUrl = "https://www.youtube.com/@MARCUoP"; const facultyUrl = "https://eng.pdn.ac.lk/"; -// ------------------------------------- + +const exploreLinks = [ + { href: "/Research", label: "Research areas" }, + { href: "/projects", label: "Projects" }, + { href: "/publications", label: "Publications" }, +]; +const aboutLinks = [ + { href: "/people", label: "People" }, + { href: "/news", label: "News" }, + { href: facultyUrl, label: "Faculty of Engineering", external: true }, +]; +const year = new Date().getFullYear(); --- -