From 59c58d72b4a0deaf168fbc401a2a9227e5dd09bf Mon Sep 17 00:00:00 2001
From: 10vulture1005 <vaidiksaxena14@gmail.com>
Date: Sat, 29 Aug 2026 20:24:09 +0530
Subject: [PATCH 1/4] feat: implement typography system updates and integrate
 custom Google fonts via next/font

- Add lib/fonts.js configuring Inter, JetBrains_Mono, and Source_Serif_4
  via next/font/google with CSS variables (--font-sans, --font-mono, --font-serif).
- Wire font variables in pages/_app.page.tsx and remove manual Google Fonts
  <link>/<preconnect> tags from pages/_document.page.tsx.
- Exclude lib/fonts from the dev babel-loader rule in next.config.js so
  next/font can process it.
- Rewrite tailwind fontFamily to consume the CSS variables and rebuild
  fontSize (base, xl, h1-h5 + mobile variants) with line-height and
  letter-spacing tuples; add lineHeight, letterSpacing, and maxWidth.prose
  tokens.
- Add @layer base in styles/globals.css with html/body font-family,
  font-feature-settings, text-wrap: balance/pretty, ::selection, and
  prefers-reduced-motion overrides.
- Update components/Headlines.tsx, Code.tsx, and StyledMarkdownBlock.tsx
  to use the new type scale, max-w-prose for long-form content, and
  Source Serif for Bigquote/Regularquote.
- Harmonize home and community pages with the new typography tokens and
  add an UpcomingEventsList with a 'Read more' expander.
---
 components/Code.tsx                |  15 +-
 components/Headlines.tsx           |  10 +-
 components/StyledMarkdownBlock.tsx |  25 +-
 lib/fonts.js                       |  23 +
 next.config.js                     |   2 +-
 pages/_app.page.tsx                |  11 +-
 pages/_document.page.tsx           |  10 -
 pages/community/index.page.tsx     | 211 ++++----
 pages/index.page.tsx               | 836 ++++++++++++++---------------
 styles/globals.css                 |  83 ++-
 tailwind.config.js                 |  51 +-
 11 files changed, 684 insertions(+), 593 deletions(-)
 create mode 100644 lib/fonts.js

diff --git a/components/Code.tsx b/components/Code.tsx
index 7460fa4e8f..7c5c2524af 100644
--- a/components/Code.tsx
+++ b/components/Code.tsx
@@ -7,11 +7,16 @@ export default function Code({ children }: { children: any }) {
   const blockContext = useContext(BlockContext);
   return (
     <code
-      className={classnames('font-mono rounded px-1.5 py-0.5', {
-        'bg-slate-100 dark:bg-slate-900': blockContext === null,
-        'bg-amber-200': blockContext === BlockContextValue.Information,
-        'text-white': blockContext === BlockContextValue.CodeBlock,
-      })}
+      className={classnames(
+        'font-mono text-[0.9em] tracking-tight rounded px-1.5 py-0.5',
+        {
+          'bg-slate-100 dark:bg-slate-900 text-slate-800 dark:text-slate-200':
+            blockContext === null,
+          'bg-amber-200 text-slate-900':
+            blockContext === BlockContextValue.Information,
+          'text-white': blockContext === BlockContextValue.CodeBlock,
+        },
+      )}
       data-test='code'
     >
       {children}
diff --git a/components/Headlines.tsx b/components/Headlines.tsx
index 73dbedc930..1c8ef480c0 100644
--- a/components/Headlines.tsx
+++ b/components/Headlines.tsx
@@ -66,7 +66,7 @@ const Headline = ({
     ...propAttributes,
     id: propAttributes?.slug || slug,
     className: cn(
-      'group cursor-pointer hover:underline',
+      'group cursor-pointer hover:underline scroll-mt-28',
       isActive && 'text-startBlue dark:text-startBlue',
       propAttributes?.className,
     ),
@@ -97,7 +97,7 @@ const Headline1Tag = ({ children, attributes }: TagProps) => (
   <h1
     {...attributes}
     className={cn(
-      'text-h1mobile md:text-h1 dark:text-slate-200  font-bold pt-10 mb-6',
+      'text-h1mobile md:text-h1 font-bold tracking-tighter pt-10 mb-6 text-slate-900 dark:text-slate-100',
       attributes?.className,
     )}
   >
@@ -108,7 +108,7 @@ const Headline2Tag = ({ children, attributes }: TagProps) => (
   <h2
     {...attributes}
     className={cn(
-      'text-h2mobile md:text-h2 dark:text-slate-200 font-semibold mt-10 mb-4',
+      'text-h2mobile md:text-h2 font-semibold tracking-tighter mt-12 mb-4 text-slate-900 dark:text-slate-100',
       attributes?.className,
     )}
   >
@@ -119,7 +119,7 @@ const Headline3Tag = ({ children, attributes }: TagProps) => (
   <h3
     {...attributes}
     className={cn(
-      'text-h3mobile dark:text-slate-200 md:text-h3 font-semibold mt-6 mb-3',
+      'text-h3mobile md:text-h3 font-semibold tracking-tight mt-8 mb-3 text-slate-800 dark:text-slate-200',
       attributes?.className,
     )}
   >
@@ -130,7 +130,7 @@ const Headline4Tag = ({ children, attributes }: TagProps) => (
   <h4
     {...attributes}
     className={cn(
-      'text-h4mobile dark:text-slate-200 md:text-h4 font-semibold mt-4 mb-2',
+      'text-h4mobile md:text-h4 font-semibold tracking-tight mt-6 mb-2 text-slate-800 dark:text-slate-200',
       attributes?.className,
     )}
   >
diff --git a/components/StyledMarkdownBlock.tsx b/components/StyledMarkdownBlock.tsx
index eacebbf087..1bbeb2ccb5 100644
--- a/components/StyledMarkdownBlock.tsx
+++ b/components/StyledMarkdownBlock.tsx
@@ -48,7 +48,7 @@ export const StyledMarkdownBlock = ({ markdown }: StyledMarkdownBlockProps) => {
             },
             p: {
               component: ({ children }) => (
-                <p className='text-slate-600 block leading-7 pb-4 dark:text-slate-300'>
+                <p className='text-[1.0625rem] leading-relaxed text-slate-700 dark:text-slate-300 block pb-5 max-w-prose'>
                   {children}
                 </p>
               ),
@@ -109,21 +109,21 @@ export const StyledMarkdownBlock = ({ markdown }: StyledMarkdownBlockProps) => {
             },
             ol: {
               component: ({ children }) => (
-                <ol className='list-decimal mt-2 mb-4 ml-5'>{children}</ol>
+                <ol className='list-decimal mt-3 mb-5 ml-6 space-y-1.5 max-w-prose text-[1.0625rem] text-slate-700 dark:text-slate-300'>
+                  {children}
+                </ol>
               ),
             },
             ul: {
               component: ({ children }) => (
-                <ul className='mt-2 mb-4 list-disc list-outside ml-5'>
+                <ul className='mt-3 mb-5 list-disc list-outside ml-6 space-y-1.5 max-w-prose text-[1.0625rem] text-slate-700 dark:text-slate-300'>
                   {children}
                 </ul>
               ),
             },
             li: {
               component: ({ children }) => (
-                <li className='mt-1 leading-7 text-slate-600 dark:text-slate-300'>
-                  {children}
-                </li>
+                <li className='leading-relaxed'>{children}</li>
               ),
             },
             table: {
@@ -151,7 +151,10 @@ export const StyledMarkdownBlock = ({ markdown }: StyledMarkdownBlockProps) => {
             },
             td: {
               component: ({ children, rowSpan }) => (
-                <td className='border border-slate-200 p-4' rowSpan={rowSpan}>
+                <td
+                  className='border border-slate-200 dark:border-slate-700 p-4 text-slate-700 dark:text-slate-300'
+                  rowSpan={rowSpan}
+                >
                   {children}
                 </td>
               ),
@@ -196,7 +199,7 @@ export const StyledMarkdownBlock = ({ markdown }: StyledMarkdownBlockProps) => {
             },
             blockquote: {
               component: ({ children }) => (
-                <div className='bg-slate-50/50 dark:bg-slate-700 px-4 pt-4 mt-2 mb-4 border-l-2 border-slate-300'>
+                <div className='bg-slate-50/50 dark:bg-slate-700/50 px-5 pt-4 mt-3 mb-5 border-l-2 border-slate-300 dark:border-slate-500 rounded-r-md'>
                   {children}
                 </div>
               ),
@@ -366,8 +369,8 @@ export const StyledMarkdownBlock = ({ markdown }: StyledMarkdownBlockProps) => {
             Bigquote: {
               component: ({ children }) => {
                 return (
-                  <div className='text-h2mobile md:text-h2 text-center p-10 py-16 font-semibold text-slate-500 dark:text-slate-300 bg-slate-50 dark:bg-slate-700 mb-4 rounded-xl'>
-                    "{children}"
+                  <div className='font-serif text-h2mobile md:text-h3 italic text-center px-6 py-12 md:py-16 font-medium text-slate-600 dark:text-slate-200 bg-slate-50/70 dark:bg-slate-700/40 mb-6 mt-2 rounded-2xl border-y border-slate-200/60 dark:border-slate-600/40 tracking-tight'>
+                    &ldquo;{children}&rdquo;
                   </div>
                 );
               },
@@ -375,7 +378,7 @@ export const StyledMarkdownBlock = ({ markdown }: StyledMarkdownBlockProps) => {
             Regularquote: {
               component: ({ children }) => {
                 return (
-                  <div className='text-2xl my-5 mx-8 border-gray-300 bg-gray-300 dark:bg-gray-300 p-4 p-t-6 text-center dark:text-slate-800 rounded-xl'>
+                  <div className='font-serif text-xl md:text-2xl italic my-6 mx-4 md:mx-10 border-l-4 border-slate-300 dark:border-slate-500 bg-slate-50 dark:bg-slate-800/60 p-5 text-slate-700 dark:text-slate-200 rounded-r-xl leading-snug'>
                     {children}
                   </div>
                 );
diff --git a/lib/fonts.js b/lib/fonts.js
new file mode 100644
index 0000000000..4b679cbf35
--- /dev/null
+++ b/lib/fonts.js
@@ -0,0 +1,23 @@
+import { Inter, JetBrains_Mono, Source_Serif_4 } from 'next/font/google';
+
+export const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['300', '400', '500', '600', '700', '800'],
+  variable: '--font-sans',
+});
+
+export const jetbrainsMono = JetBrains_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['400', '500', '700'],
+  variable: '--font-mono',
+});
+
+export const sourceSerif = Source_Serif_4({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['400', '600', '700'],
+  style: ['normal', 'italic'],
+  variable: '--font-serif',
+});
diff --git a/next.config.js b/next.config.js
index 3b9750f83d..ddd1222397 100644
--- a/next.config.js
+++ b/next.config.js
@@ -10,7 +10,7 @@ const nextConfig = {
     if (dev && !isServer) {
       config.module.rules.push({
         test: /\.(js|jsx|ts|tsx)$/,
-        exclude: /node_modules/,
+        exclude: [/node_modules/, /lib\/fonts/],
         use: [
           {
             loader: 'babel-loader',
diff --git a/pages/_app.page.tsx b/pages/_app.page.tsx
index 9acd6abc57..a9a5387621 100644
--- a/pages/_app.page.tsx
+++ b/pages/_app.page.tsx
@@ -3,15 +3,20 @@ import 'tailwindcss/tailwind.css';
 import React from 'react';
 import type { AppProps } from 'next/app';
 import { ThemeProvider } from 'next-themes';
+import { inter, jetbrainsMono, sourceSerif } from '~/lib/fonts';
 
 function MyApp({ Component, pageProps }: AppProps) {
   // @ts-ignore
   const getLayout = Component.getLayout || ((page: JSX.Element) => page);
   const AnyComponent = Component as any;
   return (
-    <ThemeProvider attribute='class'>
-      {getLayout(<AnyComponent {...pageProps} />, pageProps)}
-    </ThemeProvider>
+    <div
+      className={`${inter.variable} ${jetbrainsMono.variable} ${sourceSerif.variable}`}
+    >
+      <ThemeProvider attribute='class'>
+        {getLayout(<AnyComponent {...pageProps} />, pageProps)}
+      </ThemeProvider>
+    </div>
   );
 }
 
diff --git a/pages/_document.page.tsx b/pages/_document.page.tsx
index cd9d508614..2ce654975d 100644
--- a/pages/_document.page.tsx
+++ b/pages/_document.page.tsx
@@ -17,16 +17,6 @@ class MyDocument extends Document {
     return (
       <Html lang='en'>
         <Head>
-          <link rel='preconnect' href='https://fonts.googleapis.com' />
-          <link
-            rel='preconnect'
-            href='https://fonts.gstatic.com'
-            crossOrigin=''
-          />
-          <link
-            href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@300;400&display=swap'
-            rel='stylesheet'
-          />
           <link
             rel='stylesheet'
             href='https://cdn.jsdelivr.net/npm/@docsearch/css@3'
diff --git a/pages/community/index.page.tsx b/pages/community/index.page.tsx
index c93b25461a..8729ae4aa7 100644
--- a/pages/community/index.page.tsx
+++ b/pages/community/index.page.tsx
@@ -16,6 +16,58 @@ import {
   printEventsForNextWeeks,
 } from '../../lib/calendarUtils';
 
+const UPCOMING_EVENTS_PREVIEW = 2;
+
+function UpcomingEventsList({ events }: { events: any[] }) {
+  const [expanded, setExpanded] = useState(false);
+  if (!events || events.length === 0) {
+    return (
+      <p className='text-sm text-slate-500 dark:text-slate-400'>
+        No upcoming events scheduled.
+      </p>
+    );
+  }
+  const visible = expanded ? events : events.slice(0, UPCOMING_EVENTS_PREVIEW);
+  const hasMore = events.length > UPCOMING_EVENTS_PREVIEW;
+  return (
+    <>
+      {visible.map((event: any, index: any) => (
+        <div
+          key={index}
+          className='mx-auto gap-2 group-hover:bg-white dark:bg-slate-900/50 dark:group-hover:bg-slate-800 bg-slate-100 h-[68px] w-full rounded-lg flex flex-row justify-between items-center p-2 mt-2'
+        >
+          <div
+            className={`h-[52px] w-1/3 rounded-lg text-center grid items-center bg-index-${index}`}
+          >
+            <p className='text-lg dark:text-white font-semibold'>{event.day}</p>
+          </div>
+          <div className='h-[52px] w-2/3 rounded-lg grid items-center px-2'>
+            <p className='text-xs dark:text-white leading-snug'>
+              <b className='text-blue-700'>{event.title}</b>
+              <br />
+              <span>
+                {event.time}({event.timezone})
+              </span>
+            </p>
+          </div>
+        </div>
+      ))}
+      {hasMore && (
+        <button
+          type='button'
+          onClick={() => setExpanded((v) => !v)}
+          aria-expanded={expanded}
+          className='mx-auto mt-3 block text-sm font-semibold text-primary hover:text-blue-700 dark:text-linkBlue dark:hover:text-blue-400 transition-colors'
+        >
+          {expanded
+            ? 'Show less'
+            : `Read more (${events.length - UPCOMING_EVENTS_PREVIEW} more)`}
+        </button>
+      )}
+    </>
+  );
+}
+
 export const getStaticProps: GetStaticProps = async () => {
   const PATH = 'pages/blog/posts';
   const files = fs.readdirSync(PATH);
@@ -168,130 +220,99 @@ export default function CommunityPages(props: any) {
           </div>
         </section>
         <div className='m-auto w-12/12 md:w-11/12 lg:w-10/12 xl:w-10/12'>
-          <div className='z-40 mt-20 mx-auto w-full md:h-[520px] md:flex grid grid-cols-1 lg:grid-cols-2 md:justify-between rounded-lg border border-gray-200 bg-white transition-colors hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900'>
-            <div className='p-4 px-8 flex justify-between w-full md:w-3/6 h-auto flex-col text-center md:text-left'>
-              <div data-testid='HomeCard-main' className='m-auto'>
-                <h2 className=' text-blue-700 font-bold  text-[2rem] text-center'>
+          <div className='z-40 mt-20 mx-auto w-full md:flex grid grid-cols-1 lg:grid-cols-2 md:justify-between rounded-lg border border-gray-200 bg-white transition-colors hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900 overflow-hidden'>
+            <div className='p-5 px-6 flex justify-between w-full md:w-3/6 h-auto flex-col text-center md:text-left'>
+              <div
+                data-testid='HomeCard-main'
+                className='m-auto flex flex-col items-center md:items-start text-center md:text-left gap-3'
+              >
+                <h2 className='text-blue-700 font-bold text-xl md:text-2xl'>
                   Ambassadors Program
                 </h2>
-                <h2 className='text-center font-bold text-slate-500 text-base tracking-wide dark:text-white mt-10'>
+                <p className='text-sm leading-relaxed text-slate-600 dark:text-slate-300 max-w-md'>
                   The JSON Schema Ambassadors Program recognize the people who
                   drive adoption, innovation and knowledge sharing in the JSON
                   Schema community.
-                </h2>
-                <div
-                  className='mt-10 mx-auto flex justify-center items-center'
-                  data-testid='HomeCard-button'
+                </p>
+                <Link
+                  href='/ambassadors'
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-5 rounded inline-block focus:outline-none text-sm'
                 >
-                  <Link
-                    href='/ambassadors'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none'
-                  >
-                    Become an ambassador
-                  </Link>
-                </div>
+                  Become an ambassador
+                </Link>
               </div>
             </div>
-            <div className='w-full h-fit-content md:w-3/6 max-sm:w-1/4 flex rounded-r-lg justify-end bg-cover bg-center bg-ambassador' />
+            <div className='w-full min-h-[180px] md:min-h-0 md:h-auto md:w-3/6 max-sm:w-1/4 flex rounded-r-lg justify-end bg-cover bg-center bg-ambassador' />
           </div>
 
-          <div className='z-40 mt-20 rounded-lg border border-gray-200 bg-white transition-colors hover:bg-slate-100 mx-auto w-full md:h-[520px] md:flex grid grid-cols-1 lg:grid-cols-2 md:justify-between dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900'>
-            <div className='p-4 px-8 flex justify-between w-full md:w-3/6 h-auto flex-col text-center md:text-left'>
+          <div className='z-40 mt-20 rounded-lg border border-gray-200 bg-white transition-colors hover:bg-slate-100 mx-auto w-full md:flex grid grid-cols-1 lg:grid-cols-2 md:justify-between dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900 overflow-hidden'>
+            <div className='p-5 px-6 flex justify-between w-full md:w-3/6 h-auto flex-col text-center md:text-left'>
               <div
                 data-testid='HomeCard-main'
-                className='m-auto flex flex-col items-center text-center'
+                className='m-auto flex flex-col items-center md:items-start text-center md:text-left gap-3'
               >
-                <h2 className='text-blue-700 font-bold text-[2rem]'>
+                <h2 className='text-blue-700 font-bold text-xl md:text-2xl'>
                   Join the JSON Schema Slack workspace!
                 </h2>
-                <h2 className='font-bold text-base text-slate-500 dark:text-white tracking-wide mt-10'>
+                <p className='text-sm leading-relaxed text-slate-600 dark:text-slate-300 max-w-md'>
                   Join our Slack to ask questions, get feedback on your
                   projects, and connect with +5000 practitioners and experts.
-                </h2>
-                <div className='mt-10'>
-                  <Link
-                    href='/slack'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none'
-                  >
-                    Join Slack
-                  </Link>
-                </div>
+                </p>
+                <Link
+                  href='/slack'
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-5 rounded inline-block focus:outline-none text-sm'
+                >
+                  Join Slack
+                </Link>
               </div>
             </div>
-            <div className='w-full h-fit-content md:w-3/6  flex rounded-r-lg justify-end bg-cover bg-center bg-slack' />
+            <div className='w-full min-h-[180px] md:min-h-0 md:h-auto md:w-3/6 flex rounded-r-lg justify-end bg-cover bg-center bg-slack' />
           </div>
         </div>
 
         <div className='m-auto w-12/12 md:w-11/12 lg:w-10/12 xl:w-10/12'>
-          <div className='z-40 mt-20 w-full rounded-lg border border-gray-200 bg-white group dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900 transition-colors hover:bg-slate-100 md:flex grid grid-cols-1 lg:grid-cols-2 justify-between'>
-            <div className='p-4 px-8 grid items-center w-full md:w-3/6 h-auto flex-col text-center md:text-left'>
-              <div data-testid='HomeCard-main'>
-                <h2 className='text-blue-700 text-[2rem] font-bold  text-center'>
-                  JSON Schema Community Meetings & Events
+          <div className='z-40 mt-20 w-full rounded-lg border border-gray-200 bg-white group dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900 transition-colors hover:bg-slate-100 md:flex grid grid-cols-1 lg:grid-cols-2 justify-between overflow-hidden'>
+            <div className='p-5 px-6 grid items-center w-full md:w-3/6 h-auto flex-col text-center md:text-left'>
+              <div data-testid='HomeCard-main' className='flex flex-col gap-3'>
+                <h2 className='text-blue-700 text-xl md:text-2xl font-bold text-center md:text-left'>
+                  JSON Schema Community Meetings &amp; Events
                 </h2>
-                <div
-                  className='mt-10 text-center'
-                  data-testid='HomeCard-button'
-                >
-                  <h2 className='text-slate-500 text-base tracking-wide dark:text-white mt-10 font-bold text-body-lg tracking-body font-regular'>
-                    We hold monthly Office Hours and weekly Open Community
-                    Working Meetings. Office Hours are every first Tuesday of
-                    the month at 15:00 BST, and by appointment. Open Community
-                    Working Meetings are every Monday at 14:00 PT.
-                  </h2>
-                  <div className='mt-10 flex justify-center'>
-                    <a
-                      href='https://github.com/orgs/json-schema-org/discussions/35'
-                      target='_blank'
-                      rel='noopener noreferrer'
-                      className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none'
-                    >
-                      Open Community Working Meetings
-                    </a>
-                  </div>
-                  <div className='mt-4 flex justify-center'>
-                    <a
-                      href='https://github.com/orgs/json-schema-org/discussions/34/'
-                      target='_blank'
-                      rel='noopener noreferrer'
-                      className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none'
-                    >
-                      Office Hours
-                    </a>
-                  </div>
+                <p className='text-sm leading-relaxed text-slate-600 dark:text-slate-300 text-center md:text-left'>
+                  We hold monthly Office Hours and weekly Open Community Working
+                  Meetings. Office Hours are every first Tuesday of the month at
+                  15:00 BST, and by appointment. Open Community Working Meetings
+                  are every Monday at 14:00 PT.
+                </p>
+                <div className='flex flex-wrap justify-center md:justify-start gap-2 mt-1'>
+                  <a
+                    href='https://github.com/orgs/json-schema-org/discussions/35'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded inline-block focus:outline-none text-sm'
+                  >
+                    Open Community Working Meetings
+                  </a>
+                  <a
+                    href='https://github.com/orgs/json-schema-org/discussions/34/'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded inline-block focus:outline-none text-sm'
+                  >
+                    Office Hours
+                  </a>
                 </div>
               </div>
             </div>
-            <div className='w-fit-content h-fit-content py-3 md:w-3/6 max-lg:mx-3 flex rounded-r-lg justify-end'>
-              <div className='mx-auto max-lg:w-full'>
-                <h2 className='text-center dark:text-white text-primary text-[2rem] font-bold '>
+            <div className='w-full py-4 md:py-5 md:w-3/6 max-lg:mx-3 flex rounded-r-lg justify-end'>
+              <div className='mx-auto max-lg:w-full w-full px-2'>
+                <h2 className='text-center dark:text-white text-primary text-xl md:text-2xl font-bold'>
                   Upcoming events
                 </h2>
-                {props.datesInfo.map((event: any, index: any) => (
-                  <div
-                    key={index}
-                    className='mx-auto gap-2 group-hover:bg-white dark:bg-slate-900/50 dark:group-hover:bg-slate-800  bg-slate-100 h-[90px] max-md:h-[120px]  max-sm:h-auto  w-full rounded-lg flex flex-row justify-between  items-center p-2 mt-2'
-                  >
-                    <div
-                      className={`h-[70px] w-1/3 rounded-lg text-center grid items-center bg-index-${index}`}
-                    >
-                      <p className='text-[2rem] dark:text-white'>{event.day}</p>
-                    </div>
-                    <div className='h-[70px] max-md:h-[120px]   max-sm:h-auto w-2/3  rounded-lg grid items-center px-2'>
-                      <p className='text-[12px]  dark:text-white'>
-                        <b className='text-blue-700'>{event.title}</b>
-                        <br />
-                        <span>
-                          {event.time}({event.timezone})
-                        </span>
-                      </p>
-                    </div>
-                  </div>
-                ))}
+                <UpcomingEventsList events={props.datesInfo} />
               </div>
             </div>
           </div>
diff --git a/pages/index.page.tsx b/pages/index.page.tsx
index 20150514dd..8c672a92ef 100644
--- a/pages/index.page.tsx
+++ b/pages/index.page.tsx
@@ -24,6 +24,15 @@ const algoliaAppId: string = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID as string;
 const algoliaApiKey: string = process.env.NEXT_PUBLIC_ALGOLIA_API_KEY as string;
 
 /* eslint-enable */
+
+type CalendarEvent = {
+  title: string;
+  time: string;
+  day: string;
+  timezone: string;
+  parsedStartDate: string;
+};
+
 export const getStaticProps: GetStaticProps = async () => {
   const files = fs.readdirSync(PATH);
   const blogPosts = files
@@ -45,9 +54,19 @@ export const getStaticProps: GetStaticProps = async () => {
     .slice(0, 5);
   const remoteICalUrl =
     'https://calendar.google.com/calendar/ical/info%40json-schema.org/public/basic.ics';
-  const datesInfo = await fetchRemoteICalFile(remoteICalUrl)
-    .then((icalData: any) => printEventsForNextWeeks(ical.parseICS(icalData)))
-    .catch((error) => console.error('Error:', error));
+  let datesInfo: CalendarEvent[] = [];
+  try {
+    const icalData = await fetchRemoteICalFile(remoteICalUrl);
+    if (icalData) {
+      const parsed = ical.parseICS(icalData) as Record<string, unknown>;
+      const events = printEventsForNextWeeks(parsed) as
+        | CalendarEvent[]
+        | undefined;
+      datesInfo = events ?? [];
+    }
+  } catch (error) {
+    console.error('Error fetching iCal data:', error);
+  }
   return { props: { blogPosts, datesInfo, fallback: false } };
 };
 
@@ -78,6 +97,289 @@ export function AlgoliaSearch() {
     </div>
   );
 }
+
+const UPCOMING_EVENTS_PREVIEW = 2;
+
+function UpcomingEventsList({ events }: { events: CalendarEvent[] }) {
+  const [expanded, setExpanded] = React.useState(false);
+  if (!events || events.length === 0) {
+    return (
+      <p className='text-sm text-slate-500 dark:text-slate-400'>
+        No upcoming events scheduled.
+      </p>
+    );
+  }
+  const visible = expanded ? events : events.slice(0, UPCOMING_EVENTS_PREVIEW);
+  const hasMore = events.length > UPCOMING_EVENTS_PREVIEW;
+  return (
+    <>
+      <ul className='space-y-2'>
+        {visible.map((event, index) => (
+          <li key={index}>
+            <div className='flex items-start'>
+              <p className='bg-btnOrange rounded-full w-10 h-10 flex items-center justify-center text-white mr-3 text-sm font-semibold shrink-0'>
+                {event.day}
+              </p>
+              <div className='text-sm leading-snug'>
+                <p className='font-medium text-slate-800 dark:text-slate-100'>
+                  {event.title}
+                </p>
+                <p className='text-slate-500 dark:text-slate-400'>
+                  <b>{event.time}</b> ({event.timezone})
+                </p>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+      {hasMore && (
+        <button
+          type='button'
+          onClick={() => setExpanded((v) => !v)}
+          aria-expanded={expanded}
+          className='mt-2 text-sm font-semibold text-primary hover:text-blue-700 dark:text-linkBlue dark:hover:text-blue-400 transition-colors'
+        >
+          {expanded
+            ? 'Show less'
+            : `Read more (${events.length - UPCOMING_EVENTS_PREVIEW} more)`}
+        </button>
+      )}
+    </>
+  );
+}
+
+type SponsorEntry = {
+  name: string;
+  href: string;
+  logoKey: keyof LogosMap;
+  width?: number;
+  className?: string;
+};
+
+type LogosMap = Record<string, string>;
+
+const MARQUEE_BASE_DURATION_S = 25;
+const SECONDS_PER_LOGO = 1.5;
+
+function SponsorMarquee({
+  sponsors,
+  logos,
+}: {
+  sponsors: SponsorEntry[];
+  logos: LogosMap;
+}) {
+  const duration = Math.max(
+    MARQUEE_BASE_DURATION_S,
+    sponsors.length * SECONDS_PER_LOGO,
+  );
+  const renderGroup = (isDuplicate: boolean) => (
+    <div
+      className='flex shrink-0 items-center gap-16 animate-marquee group-hover:[animation-play-state:paused] will-change-transform'
+      aria-hidden={isDuplicate ? true : undefined}
+    >
+      {sponsors.map((s) => {
+        const src = logos[s.logoKey] ?? logos.asyncapi ?? '';
+        if (!logos[s.logoKey] && process.env.NODE_ENV !== 'production') {
+          console.warn(
+            `[SponsorMarquee] Missing logo for key "${s.logoKey}" (sponsor: ${s.name})`,
+          );
+        }
+        const img = (
+          <Image
+            src={src}
+            alt={isDuplicate ? '' : `${s.name} logo`}
+            width={150}
+            height={48}
+            className={
+              s.className ?? 'h-12 w-auto max-w-[150px] object-contain'
+            }
+          />
+        );
+        return (
+          <div
+            key={`${isDuplicate ? 'b-' : 'a-'}${s.name}`}
+            className='marquee-item flex h-20 w-48 items-center justify-center shrink-0'
+          >
+            {isDuplicate ? (
+              img
+            ) : (
+              <a
+                href={s.href}
+                target='_blank'
+                rel='noopener noreferrer'
+                aria-label={s.name}
+                className='flex items-center justify-center w-full h-full'
+              >
+                {img}
+              </a>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <div
+      className='relative w-full flex overflow-hidden py-8 group gap-16'
+      style={{
+        ['--gap' as any]: '4rem',
+        ['--duration' as any]: `${duration}s`,
+        maskImage:
+          'linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%)',
+        WebkitMaskImage:
+          'linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%)',
+      }}
+    >
+      {renderGroup(false)}
+      {renderGroup(true)}
+    </div>
+  );
+}
+
+const BRONZE_SPONSORS: SponsorEntry[] = [
+  { name: 'AsyncAPI', href: 'https://www.asyncapi.com/', logoKey: 'asyncapi' },
+  { name: 'Airbnb', href: 'https://www.airbnb.com/', logoKey: 'airbnb' },
+  { name: 'LLC', href: 'https://www.llc.org/', logoKey: 'llc' },
+  {
+    name: 'VPS Server',
+    href: 'https://www.vpsserver.com/en-us/',
+    logoKey: 'vpsserver',
+  },
+  {
+    name: 'Route4Me',
+    href: 'https://www.route4me.com/',
+    logoKey: 'route4me',
+  },
+  { name: 'n8n', href: 'https://n8n.io/', logoKey: 'n8n' },
+  {
+    name: 'Apideck',
+    href: 'https://www.apideck.com/',
+    logoKey: 'apideck',
+  },
+  {
+    name: 'RxDB',
+    href: 'https://rxdb.info/?utm_source=sponsor&utm_medium=json-schema&utm_campaign=json-schema',
+    logoKey: 'rxdb',
+  },
+  { name: 'Anon Stories', href: 'https://anonstories.com', logoKey: 'anon' },
+  { name: 'Supadata', href: 'https://supadata.ai/', logoKey: 'supadata' },
+  { name: 'dottxt', href: 'https://dottxt.ai/', logoKey: 'dottxt' },
+  {
+    name: 'Sourcemeta',
+    href: 'https://www.sourcemeta.com/',
+    logoKey: 'sourcemeta',
+  },
+  { name: 'N-iX', href: 'https://www.n-ix.com/', logoKey: 'nix' },
+  { name: 'Oracle', href: 'https://www.oracle.com/', logoKey: 'oracle' },
+  {
+    name: 'Spin the wheel',
+    href: 'https://spinthewheel.io/',
+    logoKey: 'spinthewheel',
+  },
+  {
+    name: 'Time Now',
+    href: 'https://time.now/',
+    logoKey: 'timenow',
+    className: 'w-44 h-auto max-h-20 object-contain',
+  },
+  {
+    name: 'BairesDev',
+    href: 'https://www.bairesdev.com/',
+    logoKey: 'bairesdev',
+  },
+];
+
+if (process.env.NODE_ENV !== 'production') {
+  const missing = BRONZE_SPONSORS.filter((s) => s.logoKey === undefined);
+  if (missing.length) {
+    console.warn(
+      '[SponsorMarquee] Bronze sponsors missing logoKey:',
+      missing.map((s) => s.name),
+    );
+  }
+}
+
+const LOGOS_PATHS: { darkLogos: LogosMap; lightLogos: LogosMap } = {
+  darkLogos: {
+    asyncapi: '/img/logos/dark-mode/asyncapi_white.svg',
+    airbnb: '/img/logos/dark-mode/airbnb_white.png',
+    postman: '/img/logos/usedby/postman-white.png',
+    endjin: '/img/logos/sponsors/endjin-logo.svg',
+    llc: '/img/logos/dark-mode/llc_white.svg',
+    common_room: '/img/logos/dark-mode/common-room_white.svg',
+    slack: '/img/logos/dark-mode/slack_white.svg',
+    vpsserver: '/img/logos/sponsors/vps-server-logo.svg',
+    itflashcards: '/img/logos/sponsors/it_flashcards-white.svg',
+    route4me: '/img/logos/sponsors/route4me-logo-dark.svg',
+    n8n: '/img/logos/sponsors/n8n-logo-dark.svg',
+    ccopter: '/img/logos/sponsors/copycopter-white.png',
+    octue: '/img/logos/sponsors/octue-white.svg',
+    apideck: '/img/logos/sponsors/apideck-white.svg',
+    rxdb: '/img/logos/sponsors/rxdb.svg',
+    wda: '/img/logos/sponsors/wda-dark.svg',
+    anon: '/img/logos/sponsors/anon-white.png',
+    sourcemeta: '/img/logos/sponsors/sourcemeta-logo-light.svg',
+    dottxt: '/img/logos/sponsors/dottxt-logo-white.svg',
+    supadata: '/img/logos/sponsors/supadata-logo-light.svg',
+    devevents: '/img/logos/dark-mode/dev_events_logo.png',
+    nix: '/img/logos/sponsors/n-ix-logo.png',
+    oracle: '/img/logos/sponsors/Oracle.png',
+    litslink: '/img/logos/sponsors/litslink_dark.svg',
+    spinthewheel: '/img/logos/sponsors/spinthewheel.svg',
+    timenow: '/img/logos/sponsors/time_now_dark.svg',
+    legasset: '/img/logos/sponsors/legasset-logo.svg',
+    bairesdev: '/img/logos/sponsors/bairesdev-logo-orange-light.svg',
+  },
+  lightLogos: {
+    asyncapi: '/img/logos/sponsors/asyncapi-logo-dark.svg',
+    airbnb: '/img/logos/sponsors/airbnb-logo.png',
+    postman: '/img/logos/sponsors/postman_logo-orange.svg',
+    endjin: '/img/logos/sponsors/endjin-logo.svg',
+    llc: '/img/logos/sponsors/llc-logo.svg',
+    common_room: '/img/logos/supported/common-room.svg',
+    slack: '/img/logos/supported/slack-logo.svg',
+    vpsserver: '/img/logos/sponsors/vps-server-logo.svg',
+    itflashcards: '/img/logos/sponsors/it_flashcards.svg',
+    route4me: '/img/logos/sponsors/route4me-logo-white.svg',
+    n8n: '/img/logos/sponsors/n8n-logo-white.svg',
+    ccopter: '/img/logos/sponsors/copycopter.png',
+    octue: '/img/logos/sponsors/octue-black.svg',
+    apideck: '/img/logos/sponsors/apideck.svg',
+    rxdb: '/img/logos/sponsors/rxdb.svg',
+    wda: '/img/logos/sponsors/wda.svg',
+    anon: '/img/logos/sponsors/anon-black.png',
+    sourcemeta: '/img/logos/sponsors/sourcemeta-logo-dark.svg',
+    supadata: '/img/logos/sponsors/supadata-logo-dark.svg',
+    dottxt: '/img/logos/sponsors/dottxt-logo-dark.svg',
+    devevents: '/img/logos/dark-mode/dev_events_logo.png',
+    nix: '/img/logos/sponsors/n-ix-logo.png',
+    oracle: '/img/logos/sponsors/Oracle.png',
+    spinthewheel: '/img/logos/sponsors/spinthewheel.svg',
+    litslink: '/img/logos/sponsors/litslink_white.svg',
+    timenow: '/img/logos/sponsors/time_now_white.svg',
+    legasset: '/img/logos/sponsors/legasset-logo-dark.svg',
+    bairesdev: '/img/logos/sponsors/bairesdev-logo-orange-dark.svg',
+  },
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  const bronzeKeys = new Set(BRONZE_SPONSORS.map((s) => s.logoKey));
+  const lightKeys = new Set(Object.keys(LOGOS_PATHS.lightLogos));
+  const darkKeys = new Set(Object.keys(LOGOS_PATHS.darkLogos));
+  const missingInLight = [...bronzeKeys].filter(
+    (k) => !lightKeys.has(k as string),
+  );
+  const missingInDark = [...bronzeKeys].filter(
+    (k) => !darkKeys.has(k as string),
+  );
+  if (missingInLight.length || missingInDark.length) {
+    console.warn(
+      `[SponsorMarquee] Bronze logoKey(s) not present in LOGOS_PATHS — light: ${JSON.stringify(missingInLight)}, dark: ${JSON.stringify(missingInDark)}`,
+    );
+  }
+}
+
 const Home = (props: any) => {
   const blogPosts = props.blogPosts;
   const timeToRead = Math.ceil(readingTime(blogPosts[0].content).minutes);
@@ -89,75 +391,15 @@ const Home = (props: any) => {
     // Ensure the component is only rendered client-side
     setIsClient(true);
   }, []);
-  const LOGOS_PATHS = {
-    darkLogos: {
-      asyncapi: '/img/logos/dark-mode/asyncapi_white.svg',
-      airbnb: '/img/logos/dark-mode/airbnb_white.png',
-      postman: '/img/logos/usedby/postman-white.png',
-      endjin: '/img/logos/sponsors/endjin-logo.svg',
-      llc: '/img/logos/dark-mode/llc_white.svg',
-      common_room: '/img/logos/dark-mode/common-room_white.svg',
-      slack: '/img/logos/dark-mode/slack_white.svg',
-      vpsserver: '/img/logos/sponsors/vps-server-logo.svg',
-      itflashcards: '/img/logos/sponsors/it_flashcards-white.svg',
-      route4me: '/img/logos/sponsors/route4me-logo-dark.svg',
-      n8n: '/img/logos/sponsors/n8n-logo-dark.svg',
-      ccopter: '/img/logos/sponsors/copycopter-white.png',
-      octue: '/img/logos/sponsors/octue-white.svg',
-      apideck: '/img/logos/sponsors/apideck-white.svg',
-      rxdb: '/img/logos/sponsors/rxdb.svg',
-      wda: '/img/logos/sponsors/wda-dark.svg',
-      anon: '/img/logos/sponsors/anon-white.png',
-      sourcemeta: '/img/logos/sponsors/sourcemeta-logo-light.svg',
-      dottxt: '/img/logos/sponsors/dottxt-logo-white.svg',
-      supadata: '/img/logos/sponsors/supadata-logo-light.svg',
-      devevents: '/img/logos/dark-mode/dev_events_logo.png',
-      nix: '/img/logos/sponsors/n-ix-logo.png',
-      oracle: '/img/logos/sponsors/Oracle.png',
-      litslink: '/img/logos/sponsors/litslink_dark.svg',
-      spinthewheel: '/img/logos/sponsors/spinthewheel.svg',
-      timenow: '/img/logos/sponsors/time_now_dark.svg',
-      legasset: '/img/logos/sponsors/legasset-logo.svg',
-      bairesdev: '/img/logos/sponsors/bairesdev-logo-orange-light.svg',
-    },
-    lightLogos: {
-      asyncapi: '/img/logos/sponsors/asyncapi-logo-dark.svg',
-      airbnb: '/img/logos/sponsors/airbnb-logo.png',
-      postman: '/img/logos/sponsors/postman_logo-orange.svg',
-      endjin: '/img/logos/sponsors/endjin-logo.svg',
-      llc: '/img/logos/sponsors/llc-logo.svg',
-      common_room: '/img/logos/supported/common-room.svg',
-      slack: '/img/logos/supported/slack-logo.svg',
-      vpsserver: '/img/logos/sponsors/vps-server-logo.svg',
-      itflashcards: '/img/logos/sponsors/it_flashcards.svg',
-      route4me: '/img/logos/sponsors/route4me-logo-white.svg',
-      n8n: '/img/logos/sponsors/n8n-logo-white.svg',
-      ccopter: '/img/logos/sponsors/copycopter.png',
-      octue: '/img/logos/sponsors/octue-black.svg',
-      apideck: '/img/logos/sponsors/apideck.svg',
-      rxdb: '/img/logos/sponsors/rxdb.svg',
-      wda: '/img/logos/sponsors/wda.svg',
-      anon: '/img/logos/sponsors/anon-black.png',
-      sourcemeta: '/img/logos/sponsors/sourcemeta-logo-dark.svg',
-      supadata: '/img/logos/sponsors/supadata-logo-dark.svg',
-      dottxt: '/img/logos/sponsors/dottxt-logo-dark.svg',
-      devevents: '/img/logos/dark-mode/dev_events_logo.png',
-      nix: '/img/logos/sponsors/n-ix-logo.png',
-      oracle: '/img/logos/sponsors/Oracle.png',
-      spinthewheel: '/img/logos/sponsors/spinthewheel.svg',
-      litslink: '/img/logos/sponsors/litslink_white.svg',
-      timenow: '/img/logos/sponsors/time_now_white.svg',
-      legasset: '/img/logos/sponsors/legasset-logo-dark.svg',
-      bairesdev: '/img/logos/sponsors/bairesdev-logo-orange-dark.svg',
-    },
-  };
 
   const logos = useMemo(
     () =>
-      LOGOS_PATHS[resolvedTheme == 'dark' ? 'darkLogos' : 'lightLogos'] ||
-      LOGOS_PATHS.lightLogos,
+      (resolvedTheme === 'dark'
+        ? LOGOS_PATHS.darkLogos
+        : LOGOS_PATHS.lightLogos) ?? LOGOS_PATHS.lightLogos,
     [resolvedTheme],
   );
+  const mounted = isClient && resolvedTheme !== undefined;
   return (
     <div>
       <div className='flex flex-col items-center'>
@@ -370,102 +612,96 @@ const Home = (props: any) => {
             </p>
           </div>
           <div className='grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12 mx-auto w-5/6 md:w-3/5 lg:w-5/6'>
-            <div className='p-4 w-full mb-6 dark:shadow-2xl'>
+            <div className='p-5 w-full dark:shadow-2xl rounded-lg border border-slate-200 dark:border-slate-700 flex flex-col'>
               <Link
                 href='https://json-schema.org/slack'
                 target='_blank'
                 rel='noopener noreferrer'
+                className='flex-1'
               >
-                <h3 className='mb-4 font-semibold flex items-center dark:text-slate-200'>
+                <h3 className='mb-3 font-semibold flex items-center gap-2 dark:text-slate-200'>
                   Join the JSON Schema Slack Workspace!
                   {isClient && (
-                    <>
-                      <Image
-                        src='/img/logos/Slack-mark.svg'
-                        className='size-12'
-                        alt='slack'
-                        height={32}
-                        width={32}
-                      />
-                    </>
-                  )}
-                </h3>
-                {isClient && (
-                  <>
                     <Image
-                      src='/img/home-page/slack-json-schema.png'
-                      className='w-full mb-4'
-                      alt='slack-json-schema'
-                      height={500}
-                      width={300}
+                      src='/img/logos/Slack-mark.svg'
+                      className='size-5'
+                      alt='slack'
+                      height={20}
+                      width={20}
                     />
-                  </>
-                )}
+                  )}
+                </h3>
+
+                <div className='relative mb-3 overflow-hidden rounded-md border border-slate-200 dark:border-slate-700'>
+                  <Image
+                    src='/img/home-page/slack-json-schema.png'
+                    className='w-full h-auto'
+                    alt='JSON Schema Slack workspace'
+                    width={480}
+                    height={240}
+                    sizes='(max-width: 768px) 100vw, 33vw'
+                  />
+                </div>
 
-                {/* <h3 className='mb-4 font-semibold' >Event</h3> */}
-                <p className='mb-4 dark:text-slate-300 text-balance'>
+                <p className='mb-4 text-sm leading-relaxed text-slate-600 dark:text-slate-300 text-balance'>
                   Join our Slack to ask questions, get feedback on your
                   projects, and connect with +5000 practitioners and experts.
                 </p>
               </Link>
-              <button className='w-full lg:w-1/2 rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center mx-auto dark:border-none'>
-                <a
-                  href='https://json-schema.org/slack'
-                  className='flex items-center'
-                  target='_blank'
-                  rel='noreferrer'
-                >
-                  {isClient && (
-                    <>
-                      <Image
-                        src='/img/logos/slack_logo_small-white.svg'
-                        className='w-4 h-4 mr-2'
-                        width={16}
-                        height={16}
-                        alt='slack'
-                      />
-                    </>
-                  )}
-                  Join Slack
-                </a>
-              </button>
+              <Link
+                href='https://json-schema.org/slack'
+                target='_blank'
+                rel='noreferrer'
+                className='w-full rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center dark:border-none text-sm font-semibold'
+              >
+                {isClient && (
+                  <Image
+                    src='/img/logos/slack_logo_small-white.svg'
+                    className='w-4 h-4 mr-2'
+                    width={16}
+                    height={16}
+                    alt='slack'
+                  />
+                )}
+                Join Slack
+              </Link>
             </div>
             {/* BlogPost Data */}
-            <div className='p-4 w-full mb-6 dark:shadow-2xl'>
-              <Link href={`/blog/posts/${blogPosts[0].slug}`}>
-                <h3 className='mb-5 font-semibold pt-1 dark:text-slate-200'>
+            <div className='p-5 w-full dark:shadow-2xl rounded-lg border border-slate-200 dark:border-slate-700 flex flex-col'>
+              <Link
+                href={`/blog/posts/${blogPosts[0].slug}`}
+                className='flex-1'
+              >
+                <h3 className='mb-3 font-semibold pt-1 dark:text-slate-200'>
                   The JSON Schema Blog
                 </h3>
                 {isClient && (
-                  <>
-                    <Image
-                      src={blogPosts[0].frontmatter.cover}
-                      className='w-full h-[232px] object-contain mb-4'
-                      width={600}
-                      height={232}
-                      alt='blog'
-                    />
-                  </>
+                  <Image
+                    src={blogPosts[0].frontmatter.cover}
+                    className='w-full h-[180px] object-cover rounded mb-3'
+                    width={600}
+                    height={180}
+                    alt='blog'
+                  />
                 )}
-                <h3 className='mb-4 font-semibold dark:text-slate-300'>
-                  {' '}
+                <h3 className='mb-2 font-semibold text-base dark:text-slate-200'>
                   {blogPosts[0].frontmatter.title}
                 </h3>
-                <div className='mb-4'>
+                <div className='mb-3 text-sm leading-relaxed text-slate-600 dark:text-slate-300'>
                   <TextTruncate
                     element='span'
-                    line={4}
+                    line={3}
                     text={blogPosts[0].frontmatter.excerpt}
                   />
                 </div>
 
-                <div className='flex ml-2 mb-2'>
+                <div className='flex items-center ml-1 mb-2'>
                   {(blogPosts[0].frontmatter.authors || []).map(
                     (author: any, index: number) => {
                       return (
                         <div
                           key={index}
-                          className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
+                          className='bg-slate-50 h-[32px] w-[32px] rounded-full -ml-2 bg-cover bg-center border-2 border-white'
                           style={{
                             backgroundImage: `url(${author.photo})`,
                             zIndex: 10 - index,
@@ -474,8 +710,8 @@ const Home = (props: any) => {
                       );
                     },
                   )}
-                  <div className='flex flex-col ml-2'>
-                    <p className='text-sm font-semibold dark:text-slate-300'>
+                  <div className='flex flex-col ml-3 text-sm'>
+                    <p className='font-semibold dark:text-slate-200'>
                       {blogPosts[0].frontmatter.authors.length > 2 ? (
                         <>
                           {blogPosts[0].frontmatter.authors
@@ -495,7 +731,7 @@ const Home = (props: any) => {
                       )}
                     </p>
 
-                    <div className='text-slate-500 text-sm dark:text-slate-300'>
+                    <div className='text-slate-500 dark:text-slate-400'>
                       <span>
                         {blogPosts[0].frontmatter.date} &middot; {timeToRead}{' '}
                         min read
@@ -505,32 +741,30 @@ const Home = (props: any) => {
                 </div>
               </Link>
 
-              <div>
-                <Link
-                  href={`/blog/posts/${blogPosts[0].slug}`}
-                  className=' w-full lg:w-1/2 rounded border-2 bg-primary text-white hover:bg-blue-700 transition-all duration-300 ease-in-out h-[40px] text-center pt-1 semi-bold flex items-center justify-center mx-auto dark:border-none'
-                >
-                  Read more{' '}
-                </Link>
-              </div>
+              <Link
+                href={`/blog/posts/${blogPosts[0].slug}`}
+                className='w-full rounded border-2 bg-primary text-white hover:bg-blue-700 transition-all duration-300 ease-in-out h-[40px] flex items-center justify-center dark:border-none text-sm font-semibold'
+              >
+                Read more
+              </Link>
             </div>
-            <div>
-              <div className='p-4 md:w-full mb-6 mr-4 dark:shadow-2xl'>
+            <div className='lg:col-span-1 flex flex-col gap-4'>
+              <div className='p-5 w-full dark:shadow-2xl rounded-lg border border-slate-200 dark:border-slate-700 flex flex-col'>
                 <h3 className='mb-2 font-semibold dark:text-slate-200'>
-                  JSON Schema Community Meetings & Events
+                  JSON Schema Community Meetings &amp; Events
                 </h3>
-                <p className='mb-4 dark:text-slate-300'>
+                <p className='mb-4 text-sm leading-relaxed text-slate-600 dark:text-slate-300'>
                   We hold monthly Office Hours and Open Community Working
                   Meetings. Office Hours are every first Tuesday of the month
                   and by appointment. Open Community Working Meetings are every
                   third Monday of the month at 12:00 PT.
                 </p>
-                <div className='flex flex-col'>
+                <div className='flex flex-col gap-2 mt-auto'>
                   <a
                     href='https://github.com/orgs/json-schema-org/discussions/35'
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='w-fit max-w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white min-h-[40px] px-4 py-2 mb-4 flex items-center justify-center mx-auto dark:border-none'
+                    className='w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white min-h-[40px] px-4 py-2 flex items-center justify-center dark:border-none text-sm font-semibold'
                   >
                     Open Community Working Meetings
                   </a>
@@ -539,39 +773,21 @@ const Home = (props: any) => {
                     href='https://github.com/orgs/json-schema-org/discussions/34/'
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='max-w-[200px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center mx-auto dark:border-none'
+                    className='w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center dark:border-none text-sm font-semibold'
                   >
                     Office Hours
                   </a>
                 </div>
               </div>
-              <div className='p-2'>
-                <div>
-                  <Headline4>Upcoming events</Headline4>
-                  <div>
-                    <ul>
-                      {props.datesInfo.map((event: any, index: any) => (
-                        <li key={index}>
-                          <div className='flex mb-4'>
-                            <p className='bg-btnOrange rounded-full w-10 h-10 p-2 text-center text-white mr-2'>
-                              {event.day}
-                            </p>
-                            <div className='text-sm'>
-                              <p>{event.title}</p>
-                              <p>
-                                <b>{event.time}</b> ({event.timezone})
-                              </p>
-                            </div>
-                          </div>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
+              <div className='p-5 w-full dark:shadow-2xl rounded-lg border border-slate-200 dark:border-slate-700 flex flex-col'>
+                <Headline4>Upcoming events</Headline4>
+                <div className='mt-2 mb-4 flex-1'>
+                  <UpcomingEventsList events={props.datesInfo} />
                 </div>
 
                 <a
                   href='https://calendar.google.com/calendar/embed?src=info%40json-schema.org'
-                  className='w-full lg:w-1/2 rounded border-2 bg-primary text-white hover:bg-blue-700 transition-all duration-300 ease-in-out h-[40px] text-center flex items-center justify-center mx-auto dark:border-none'
+                  className='w-full rounded border-2 bg-primary text-white hover:bg-blue-700 transition-all duration-300 ease-in-out h-[40px] flex items-center justify-center dark:border-none text-sm font-semibold'
                   target='_blank'
                   rel='noopener noreferrer'
                 >
@@ -703,275 +919,23 @@ const Home = (props: any) => {
             >
               Bronze Sponsors
             </h3>
-            <div className='grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-12 items-center mx-auto  md:mx-0 px-4 '>
-              <a
-                href=' https://www.asyncapi.com/'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <Image
-                      src={logos.asyncapi}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      width={176}
-                      height={100}
-                      alt='asyncapi'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://www.airbnb.com/'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <Image
-                      src={logos.airbnb}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      width={176}
-                      height={100}
-                      alt='llc'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://www.llc.org/'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <Image
-                      src={logos.llc}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      width={176}
-                      height={100}
-                      alt='llc'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://www.vpsserver.com/en-us/'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <Image
-                      src={logos.vpsserver}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      width={176}
-                      height={100}
-                      alt='vpsserver'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://www.route4me.com/'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <Image
-                      src={logos.route4me}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      width={176}
-                      height={100}
-                      alt='route4me'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://n8n.io/'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <Image
-                      src={logos.n8n}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      width={176}
-                      height={100}
-                      alt='n8n'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://www.apideck.com/'
-                target='_blank'
-                rel='noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <img
-                      src={logos.apideck}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      alt='The Realtime Unified API for Accounting integrations'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://rxdb.info/?utm_source=sponsor&utm_medium=json-schema&utm_campaign=json-schema'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <img
-                      src={logos.rxdb}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      alt='The local Database for JavaScript Applications'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://anonstories.com'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <img
-                      src={logos.anon}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      alt='Instagram Story Viewer'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://supadata.ai/'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <img
-                      src={logos.supadata}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      alt='supadata logo'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://dottxt.ai/'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <img
-                      src={logos.dottxt}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      alt='dottxt logo'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://www.sourcemeta.com/'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <img
-                      src={logos.sourcemeta}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      alt='sourcemeta logo'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://www.n-ix.com/'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <img
-                      src={logos.nix}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      alt='n-iX logo'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://www.oracle.com/'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <img
-                      src={logos.oracle}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      alt='Oracle logo'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://spinthewheel.io/'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <img
-                      src={logos.spinthewheel}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      alt='Spin the wheel logo'
-                    />
-                  </>
-                )}
-              </a>
-              <a href='https://time.now/' target='_blank' rel='noreferrer'>
-                {isClient && (
-                  <>
-                    <img
-                      src={logos.timenow}
-                      className='w-24 transition-transform duration-300 hover:scale-105'
-                      alt='Time Now logo'
-                    />
-                  </>
-                )}
-              </a>
-              <a
-                href='https://www.bairesdev.com/'
-                target='_blank'
-                rel='noreferrer'
-              >
-                {isClient && (
-                  <>
-                    <img
-                      src={logos.bairesdev}
-                      className='w-44 transition-transform duration-300 hover:scale-105'
-                      alt='legasset logo'
-                    />
-                  </>
-                )}
-              </a>
+            <div className='w-full'>
+              {mounted ? (
+                <SponsorMarquee sponsors={BRONZE_SPONSORS} logos={logos} />
+              ) : (
+                <div
+                  className='relative w-full flex overflow-hidden py-8 gap-16'
+                  aria-hidden='true'
+                  style={{ minHeight: '160px' }}
+                />
+              )}
+            </div>
+            <div className='flex justify-center mt-8'>
               <a
                 href='https://opencollective.com/json-schema/contribute/sponsor-10816/checkout?interval=month&amount=100&name=&legalName=&email='
                 target='_blank'
                 rel='noopener noreferrer'
-                className='w-[155px] md:w-[176px] h-[44px] mx-auto rounded-lg bg-primary text-white font-semibold flex items-center justify-center space-x-2 cursor-pointer px-3 transition-transform duration-300 hover:scale-105'
+                className='w-[155px] md:w-[176px] h-[44px] rounded-lg bg-primary text-white font-semibold flex items-center justify-center space-x-2 cursor-pointer px-3 transition-transform duration-300 hover:scale-105'
               >
                 <svg
                   xmlns='http://www.w3.org/2000/svg'
diff --git a/styles/globals.css b/styles/globals.css
index 5c41c54644..bb90d5bf38 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,6 +2,77 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --font-sans-feature-settings: 'cv11', 'ss01', 'ss03';
+    --font-mono-feature-settings: 'calt', 'liga', 'ss02';
+  }
+
+  html {
+    font-family: var(--font-sans), 'Inter', ui-sans-serif, system-ui,
+      -apple-system, BlinkMacSystemFont, sans-serif;
+    font-feature-settings: var(--font-sans-feature-settings);
+    font-synthesis: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    scroll-padding-top: 100px;
+    scroll-behavior: smooth;
+    overflow-x: clip;
+  }
+
+  body {
+    @apply bg-white text-[1rem] leading-relaxed text-slate-700 dark:bg-slate-800 dark:text-slate-300;
+    font-feature-settings: var(--font-sans-feature-settings);
+  }
+
+  code,
+  kbd,
+  pre,
+  samp,
+  .font-mono {
+    font-feature-settings: var(--font-mono-feature-settings);
+  }
+
+  ::selection {
+    @apply bg-primary/15 text-slate-900 dark:bg-primary/30 dark:text-white;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-wrap: balance;
+    font-feature-settings: 'cv11', 'ss01';
+  }
+
+  p,
+  li,
+  blockquote {
+    text-wrap: pretty;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-marquee,
+  .animate-collapsible-down,
+  .animate-collapsible-up {
+    animation: none !important;
+  }
+}
+
+@layer utilities {
+  .marquee-item img {
+    transition: transform 0.3s ease;
+  }
+
+  .marquee-item:hover img {
+    transform: scale(1.1);
+  }
+}
+
 @layer utilities {
   .clip-bottom {
     clip-path: polygon(0 0, 0 100%, 0% 100%, 100% 85%, 100% 0);
@@ -34,12 +105,6 @@
   text-shadow: black 0 0 1em;
 }
 
-html {
-  font-family: 'Inter', sans-serif;
-  scroll-padding-top: 100px;
-  scroll-behavior: smooth;
-}
-
 .DocSearch-Button-Keys {
   display: none !important;
 }
@@ -275,12 +340,6 @@ border-radius: 4px; */
   background-color: #773cff84;
 }
 
-@layer base {
-  body {
-    @apply dark:bg-slate-800 bg-white;
-  }
-}
-
 .no-scroll {
   overflow: hidden;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 30c6ce84cb..57e69be265 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -24,24 +24,24 @@ module.exports = {
       ab1: '890px',
     },
     fontFamily: {
-      sans: ['Inter', 'ui-sans-serif', 'system-ui'],
-      serif: ['ui-serif', 'Georgia'],
-      mono: ['JetBrains Mono', 'monospace'],
+      sans: ['var(--font-sans)', 'Inter', 'ui-sans-serif', 'system-ui'],
+      serif: ['var(--font-serif)', 'ui-serif', 'Georgia'],
+      mono: ['var(--font-mono)', 'JetBrains Mono', 'ui-monospace', 'monospace'],
     },
     fontSize: {
       sm: '0.8rem',
-      base: '16px',
-      xl: '20px',
-      h5: '20px',
-      h4: '25px',
-      h3: '35px',
-      h2: '45px',
-      h1: '60px',
-      h1mobile: '35px',
-      h2mobile: '28px',
-      h3mobile: '25px',
-      h4mobile: '22px',
-      h5mobile: '20px',
+      base: ['1rem', { lineHeight: '1.75' }],
+      xl: ['1.25rem', { lineHeight: '1.75' }],
+      h5: ['1.25rem', { lineHeight: '1.6', letterSpacing: '-0.005em' }],
+      h4: ['1.5rem', { lineHeight: '1.3', letterSpacing: '-0.015em' }],
+      h3: ['2rem', { lineHeight: '1.2', letterSpacing: '-0.02em' }],
+      h2: ['2.625rem', { lineHeight: '1.15', letterSpacing: '-0.025em' }],
+      h1: ['3.5rem', { lineHeight: '1.1', letterSpacing: '-0.03em' }],
+      h1mobile: ['2.25rem', { lineHeight: '1.15', letterSpacing: '-0.02em' }],
+      h2mobile: ['1.75rem', { lineHeight: '1.2', letterSpacing: '-0.018em' }],
+      h3mobile: ['1.5rem', { lineHeight: '1.25', letterSpacing: '-0.015em' }],
+      h4mobile: ['1.375rem', { lineHeight: '1.3', letterSpacing: '-0.01em' }],
+      h5mobile: ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.005em' }],
     },
 
     extend: {
@@ -54,10 +54,17 @@ module.exports = {
           from: { height: 'var(--radix-collapsible-content-height)' },
           to: { height: '0' },
         },
+        marquee: {
+          from: { transform: 'translateX(0)' },
+          to: { transform: 'translateX(calc(-100% - var(--gap)))' },
+        },
       },
       animation: {
         'collapsible-down': 'collapsible-down 0.5s ease-in-out',
         'collapsible-up': 'collapsible-up 0.5s ease-in-out',
+        marquee: 'marquee var(--duration, 25s) linear infinite',
+        'marquee-fast': 'marquee 15s linear infinite',
+        'marquee-slow': 'marquee 30s linear infinite',
       },
       backgroundImage: {
         'gradient-radial':
@@ -79,6 +86,20 @@ module.exports = {
       lineHeight: {
         base: '24px',
         header: '74px',
+        tight: '1.15',
+        snug: '1.3',
+        relaxed: '1.7',
+      },
+      letterSpacing: {
+        tightest: '-0.04em',
+        tighter: '-0.025em',
+        tight: '-0.015em',
+        normal: '0',
+        wide: '0.025em',
+        wider: '0.05em',
+      },
+      maxWidth: {
+        prose: '68ch',
       },
       boxShadow: {
         '3xl': ' 0px 0px 20px 5px rgba(0, 0, 0, 0.05)',

From 0337bcc49ba50576e5dc11be3a98dc5257558c33 Mon Sep 17 00:00:00 2001
From: 10vulture1005 <vaidiksaxena14@gmail.com>
Date: Sat, 29 Aug 2026 21:10:34 +0530
Subject: [PATCH 2/4] ci: bump Node.js from 20 to 24 in all workflows

Node 20 is being deprecated on GitHub Actions runners (the workflow was
running on Node 24 by default and emitting a deprecation warning). Bump
all six setup-node usages to Node 24 to match the runner default and
avoid the deprecation notice / future breakage.

Also bump the local-development toolchain to match:
- Dockerfile: node:20-alpine -> node:24-alpine
- package.json engines.node: ^20.0.0 -> >=20.0.0 (still allows 20+ while
  documenting 24 as the new baseline)
- package.json volta.node: 20.9.0 -> 24.0.0

Workflows updated:
- .github/workflows/build-preview.yml
- .github/workflows/ci.yml (two jobs)
- .github/workflows/link-checker.yml
- .github/workflows/production-deployment.yml
- .github/workflows/validate-tooling-data.yml
---
 .github/workflows/build-preview.yml         | 2 +-
 .github/workflows/ci.yml                    | 8 ++++----
 .github/workflows/link-checker.yml          | 2 +-
 .github/workflows/production-deployment.yml | 2 +-
 .github/workflows/validate-tooling-data.yml | 2 +-
 Dockerfile                                  | 2 +-
 package.json                                | 4 ++--
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/build-preview.yml b/.github/workflows/build-preview.yml
index 52a77469b1..981ba00d5c 100644
--- a/.github/workflows/build-preview.yml
+++ b/.github/workflows/build-preview.yml
@@ -38,7 +38,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-         node-version: 20
+         node-version: 24
   
       - name: Install dependencies
         run: yarn install --immutable
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 7c7e959b4a..52a4eb555f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -17,13 +17,13 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Corepack enable 
+      - name: Corepack enable
         run: corepack enable
-        
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 24
           cache: 'yarn'
 
       - name: Install dependencies
@@ -51,7 +51,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 24
           cache: 'yarn'
 
       - name: Install dependencies
diff --git a/.github/workflows/link-checker.yml b/.github/workflows/link-checker.yml
index 249a2ae997..d4be94de58 100644
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -22,7 +22,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
 
       - name: Get Token 
         uses: actions/create-github-app-token@v1
diff --git a/.github/workflows/production-deployment.yml b/.github/workflows/production-deployment.yml
index 5480e59a07..a5ff7f2b7b 100644
--- a/.github/workflows/production-deployment.yml
+++ b/.github/workflows/production-deployment.yml
@@ -29,7 +29,7 @@ jobs:
             - name: Setup Node.js
               uses: actions/setup-node@v4
               with:
-                node-version: 20
+                node-version: 24
                 cache: 'yarn'
         
             - name: Install dependencies
diff --git a/.github/workflows/validate-tooling-data.yml b/.github/workflows/validate-tooling-data.yml
index 5ec227928a..85259d731a 100644
--- a/.github/workflows/validate-tooling-data.yml
+++ b/.github/workflows/validate-tooling-data.yml
@@ -25,7 +25,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
 
       - name: Install dependencies
         run: yarn add ajv ajv-formats js-yaml
diff --git a/Dockerfile b/Dockerfile
index ed9ac7892c..86d5a3f83d 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:20-alpine
+FROM node:24-alpine
 
 WORKDIR /app
 
diff --git a/package.json b/package.json
index dee69cf9e1..20daae93eb 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "test:coverage:all": "yarn test:coverage:e2e && yarn test:coverage:component && nyc merge .nyc_output coverage.json && nyc report --reporter=html --reporter=text"
   },
   "engines": {
-    "node": "^20.0.0"
+    "node": ">=20.0.0"
   },
   "dependencies": {
     "@docsearch/react": "3.9.0",
@@ -115,7 +115,7 @@
   },
   "packageManager": "yarn@4.4.0+sha512.91d93b445d9284e7ed52931369bc89a663414e5582d00eea45c67ddc459a2582919eece27c412d6ffd1bd0793ff35399381cb229326b961798ce4f4cc60ddfdb",
   "volta": {
-    "node": "20.9.0",
+    "node": "24.0.0",
     "yarn": "4.4.0"
   }
 }

From 3feb6f88e352e10d959f0f6c0078c44cbed09d4a Mon Sep 17 00:00:00 2001
From: 10vulture1005 <vaidiksaxena14@gmail.com>
Date: Sat, 29 Aug 2026 21:16:13 +0530
Subject: [PATCH 3/4] fix(tailwind): use <alpha-value> format for custom colors

Converts the custom theme colors (white, black, primary, btnOrange,
btnGold, startBlue, endBlue, linkBlue) from plain hex strings to the
rgb(... / <alpha-value>) format introduced in Tailwind 3.3+.

Why: @apply bg-primary/15 (and similar opacity-suffixed classes) inside
@layer base requires the color to be defined in <alpha-value> format,
otherwise Tailwind fails to generate the class and PostCSS reports
'The bg-primary/15 class does not exist'. This manifested in CI as a
webpack build failure on styles/globals.css.

The new format keeps every existing class (bg-primary, hover:bg-primary/90,
text-primary, etc.) working unchanged, and additionally makes the
opacity-suffixed variants usable from @apply directives.
---
 tailwind.config.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 57e69be265..d1bf43c4bd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -71,14 +71,14 @@ module.exports = {
           'linear-gradient(72.68deg, #002CC4 28.97%, #5468FF 145.47%)',
       },
       colors: {
-        white: '#ffffff',
-        black: '#000000',
-        primary: '#002CC4',
-        btnOrange: '#F47A08',
-        btnGold: '#AB9700',
-        startBlue: '#002CC4',
-        endBlue: '#5468FF',
-        linkBlue: '#3B82F6',
+        white: 'rgb(255 255 255 / <alpha-value>)',
+        black: 'rgb(0 0 0 / <alpha-value>)',
+        primary: 'rgb(0 44 196 / <alpha-value>)',
+        btnOrange: 'rgb(244 122 8 / <alpha-value>)',
+        btnGold: 'rgb(171 151 0 / <alpha-value>)',
+        startBlue: 'rgb(0 44 196 / <alpha-value>)',
+        endBlue: 'rgb(84 104 255 / <alpha-value>)',
+        linkBlue: 'rgb(59 130 246 / <alpha-value>)',
       },
       gradientColorStopPositions: {
         33: '145.47%',

From cb5f31e6c1c53412434964cd0b991268d8e49641 Mon Sep 17 00:00:00 2001
From: 10vulture1005 <vaidiksaxena14@gmail.com>
Date: Sat, 29 Aug 2026 21:31:55 +0530
Subject: [PATCH 4/4] fix(css): replace opacity modifier @apply with inline CSS
 for ::selection

The 'bg-primary/15' and 'bg-primary/30' classes were failing to build
because the arbitrary opacity modifiers were not resolving correctly
within the @apply directive in the @layer base block.

Replace with explicit RGB color values using CSS custom selectors
to avoid relying on Tailwind's opacity modifier syntax.
---
 styles/globals.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/styles/globals.css b/styles/globals.css
index bb90d5bf38..2a910d156a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -35,7 +35,13 @@
   }
 
   ::selection {
-    @apply bg-primary/15 text-slate-900 dark:bg-primary/30 dark:text-white;
+    background-color: rgb(0 44 196 / 0.15);
+    color: rgb(15 23 42);
+  }
+
+  .dark ::selection {
+    background-color: rgb(0 44 196 / 0.3);
+    color: white;
   }
 
   h1,