feat!: dark Theme Rollout

.gitignore

@@ -25,3 +25,5 @@ config/tools-ignored.json
 deno.lock
 cypress/videos
 cypress/screenshots
+next-env.d.ts
+*.tsbuildinfo

components/Calendar.tsx

@@ -37,11 +37,15 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
   return (
     <div
       className={twMerge(
-        'overflow-hidden rounded-md border border-gray-200 bg-white p-4 h-full flex flex-col gap-2',
+        'overflow-hidden rounded-md border border-gray-200 bg-white dark:bg-dark-background dark:border-border p-4 h-full flex  flex-col gap-2',
         className
       )}
     >
-      <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.mdSemibold}>
+      <Heading
+        level={HeadingLevel.h2}
+        typeStyle={HeadingTypeStyle.mdSemibold}
+        className='dark:text-dark-heading text-gray-900'
+      >
         {t('calendar.title')}
       </Heading>
       <ul>
@@ -52,8 +56,10 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
                 <span className='flex-1 self-center text-center'>{dayjs(event.date).format('D')}</span>
               </div>
               <div className='grow text-left sm:mt-0 sm:pl-6'>
-                <h2 className='title-font font-medium text-gray-900 hover:text-gray-500'>{event.title}</h2>
-                <p className='text-gray-600'>
+                <h2 className='title-font font-medium text-gray-900 dark:text-white hover:text-gray-500 dark:hover:text-gray-300'>
+                  {event.title}
+                </h2>
+                <p className='text-gray-600 dark:text-gray-300'>
                   {dayjs(event.date).format('LLLL')} UTC
                   {dayjs(event.date).format('Z')}
                 </p>
@@ -63,7 +69,9 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
         ))}
       </ul>
       <div className='h-full content-center'>
-        {!eventsExist && <div className='font-bold text-gray-700 lg:pb-8'>{t('calendar.noMeetingsMessage')}</div>}
+        {!eventsExist && (
+          <div className='font-bold text-gray-700 dark:text-gray-300 lg:pb-8'>{t('calendar.noMeetingsMessage')}</div>
+        )}
         <div className='sm:pt-0 md:pt-2 lg:pb-8 lg:pt-0' data-testid='Calendar-button'>
           <GoogleCalendarButton href={CALENDAR_URL} text={t('calendar.viewCalendarBtn')} />
         </div>

components/CaseStudyCard.tsx

@@ -1,16 +1,18 @@
+import Link from 'next/link';
 import React from 'react';
 
 import type { ICaseStudies } from '@/types/post';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
+import Button from './buttons/Button';
 import Paragraph from './typography/Paragraph';
 
 interface ICaseStudyCardProps {
   studies?: ICaseStudies;
 }
 
 /**
- * @description A component that displays a list of case studies in a card format
+ * @description Displays case studies in a card grid layout
  * @param {ICaseStudies} props.studies - The list of case studies to display
  */
 export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) {
@@ -19,21 +21,26 @@
   }
 
   return (
-    <div className='flex flex-wrap justify-center gap-3 pt-10 lg:gap-8 lg:text-center'>
+    <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8'>
       {studies.map((study, index) => (
-        <a key={index} className='lg:w-[30%]' href={`casestudies/${study.id}`}>
-          <div
-            className='h-full min-h-[300px] max-w-sm overflow-hidden rounded-md border border-gray-200 bg-white p-4'
-            data-testid='CaseStudyCard-main'
-          >
-            <span className='mr-2'>
-              <img className='m-auto h-16' src={study.company.logo} alt={study.company.name} />
-            </span>
-            <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4'>
+        <Link key={index} href={`/casestudies/${study.id}`} className='group block h-full'>
+          <div className='h-full bg-white dark:bg-dark-background border border-gray-200 dark:border-gray-700 rounded-2xl p-6 transition-all duration-300 hover:shadow-xl hover:-translate-y-1'>
+            <div className='flex items-center justify-center h-20 mb-6'>
+              <img src={study.company.logo} alt={study.company.name} className='max-h-16 max-w-full object-contain' />
+            </div>
+
+            <Paragraph typeStyle={ParagraphTypeStyle.md} className='text-gray-600 dark:text-gray-400 mb-6 line-clamp-4'>
               {study.company.description}
             </Paragraph>
+
+            <div className='mt-auto'>
+              <Button
+                text='Read case study →'
+                className='w-full bg-primary-500 hover:bg-primary-600 text-white group-hover:bg-primary-600 transition-colors'
+              />
+            </div>
           </div>
-        </a>
+        </Link>
       ))}
     </div>
   );

components/CaseTOC.tsx

@@ -95,7 +95,7 @@ function TOCItem({ item, index, currSelected, closeMenu }: TOCItemProps) {
       <nav className='relative block max-w-max'>
         <a
           className={twMerge(
-            'font-normal mb-1 flex items-center font-sans text-sm text-gray-900 antialiased transition duration-100 ease-in-out hover:underline',
+            'font-normal mb-1 flex items-center font-sans text-sm dark:text-white text-gray-900 antialiased transition duration-100 ease-in-out hover:underline',
             active && 'font-bold text-primary-500'
           )}
           href={`#${item.slug}`}
@@ -168,8 +168,8 @@ export default function CaseTOC({ className, cssBreakingPoint = 'xl', toc }: Cas
               open && 'mb-4'
             } flex-1 text-primary-500 font-medium uppercase tracking-wide text-sm font-sans antialiased ${
               cssBreakingPoint === 'xl'
-                ? 'xl:mb-4 xl:text-xs xl:text-gray-900 xl:font-bold'
-                : 'lg:mb-4 lg:text-xs lg:text-gray-900 lg:font-bold'
+                ? 'xl:mb-4 xl:text-xs xl:text-gray-900 dark:text-gray-300 xl:font-bold'
+                : 'lg:mb-4 lg:text-xs lg:text-gray-900 dark:text-gray-300 lg:font-bold'
             }`
           )}
         >

components/DarkModeToggle.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+// SVG Icons as components
+const SunIcon = ({ className = 'w-5 h-5' }) => (
+  <svg
+    className={className}
+    fill='none'
+    stroke='white'
+    stroke-width='2'
+    viewBox='0 0 24 24'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <circle cx='12' cy='12' r='5' />
+    <path d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42' />
+  </svg>
+);
+
+const MoonIcon = ({ className = 'w-5 h-5' }) => (
+  <svg
+    className={`stroke-current text-opacity-85 text-zinc-600 ${className}`}
+    fill='none'
+    strokeWidth='2'
+    viewBox='0 0 24 24'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' />
+  </svg>
+);
+
+/**
+ * A modern toggle button component that switches between light and dark mode.
+ * Remembers the selected mode using localStorage with smooth animations.
+ */
+export default function DarkModeToggle() {
+  const [isDark, setIsDark] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    // Load preference on mount
+    const storedTheme = localStorage.getItem('theme');
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    const shouldUseDark = storedTheme === 'dark' || (!storedTheme && systemPrefersDark);
+
+    document.documentElement.classList.toggle('dark', shouldUseDark);
+    setIsDark(shouldUseDark);
+  }, []);
+
+  const toggleDarkMode = () => {
+    const newTheme = !isDark;
+
+    document.documentElement.classList.toggle('dark', newTheme);
+    localStorage.setItem('theme', newTheme ? 'dark' : 'light');
+    setIsDark(newTheme);
+  };
+
+  // Prevent hydration mismatch
+  if (!mounted) {
+    return <div className='w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-800 animate-pulse' />;
+  }
+
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className='relative p-2 mx-2 text-zinc-800 dark:text-zinc-800 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-primary-500 rounded-lg transition-all duration-300 group'
+      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {/* Icon container with smooth rotation */}
+      <div className='relative w-5 h-5 transition-transform duration-300 group-hover:scale-110'>
+        {isDark ? (
+          <SunIcon className='w-5 h-5 transition-all duration-300 rotate-0 group-hover:rotate-12' />
+        ) : (
+          <MoonIcon className='w-5 h-5 transition-all duration-300 rotate-0 group-hover:-rotate-12' />
+        )}
+      </div>
+
+      {/* Tooltip */}
+      <div className='absolute -bottom-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap'>
+        {isDark ? 'Light mode' : 'Dark mode'}
+      </div>
+    </button>
+  );
+}

components/Feedback.tsx

@@ -95,31 +95,35 @@ export default function Feedback({ className }: IFeedbackProps) {
   }
 
   return (
-    <div className={`flex flex-col rounded-md border border-gray-200 p-4 shadow-md ${className}`}>
+    <div
+      className={`flex flex-col rounded-md border dark:bg-dark-card dark:border-border border-gray-200 p-4 shadow-md ${className}`}
+    >
       <div className='flex flex-row'>
-        <img src='/img/illustrations/icons/icon.svg' className='my-auto sm:size-14 lg:w-16' alt='' aria-hidden='true' />
+        <img src='/img/illustrations/icons/icon.svg' className='my-auto sm:size-14 lg:w-14' alt='' aria-hidden='true' />
         <div className='ml-4 flex flex-col'>
-          <div className='text-xl'>Was this helpful?</div>
-          <div className='text-sm text-gray-500'>Help us improve the docs by adding your contribution.</div>
+          <div className='text-xl dark:text-dark-heading'>Was this helpful?</div>
+          <div className='text-sm dark:text-dark-text text-gray-500'>
+            Help us improve the docs by adding your contribution.
+          </div>
         </div>
       </div>
       <form onSubmit={handleSubmit}>
         <div className='my-4 flex flex-col'>
           <textarea
-            className='inline-block h-20 w-full rounded-md border bg-gray-50 px-2 py-1 align-top text-sm text-gray-700 focus:border-0'
+            className='inline-block h-20 w-full rounded-md border dark:border-border dark:bg-dark-footer bg-gray-50 px-2 py-1 align-top text-sm text-gray-700 focus:border-0'
             placeholder='Write your suggestions here'
             onChange={(e) => setFeedback(e.target.value)}
             required
           />
           <div className='mt-4 block text-sm lg:flex lg:flex-row'>
             <button
-              className='w-full rounded bg-primary-500 py-2 text-white shadow-md transition-all duration-500 ease-in-out hover:shadow-lg lg:w-6/12'
+              className='w-full rounded bg-primary-500 dark:border border-primary-500 dark:hover:bg-transparent py-2 text-white shadow-md transition-all duration-300 ease-in-out hover:shadow-lg lg:w-6/12'
               type='submit'
             >
               Submit feedback
             </button>
-            <div className='my-2 w-full text-center font-medium lg:my-auto lg:w-1/12'>OR</div>
-            <GitHubIssue />
+            <div className='my-2 w-full text-center dark:text-dark-text font-medium lg:my-auto lg:w-1/12'>OR</div>
+            <GitHubIssue className='bg-secondary-500 dark:border dark:border-secondary-500 dark:hover:bg-transparent' />
           </div>
         </div>
       </form>

components/Hero.tsx

@@ -1,18 +1,15 @@
 import React from 'react';
 
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
-import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
 import { useTranslation } from '../utils/i18n';
-import AlgoliaSearch, { SearchButton } from './AlgoliaSearch'; // Import AlgoliaSearch component
 import Button from './buttons/Button';
 import AnnouncementHero from './campaigns/AnnouncementHero';
-import DemoAnimation from './DemoAnimation';
 import Features from './features';
 import ArrowRight from './icons/ArrowRight';
-import IconLoupe from './icons/Loupe';
+import SneakPeek from './SneakPeek';
+import DiamondSponsors from './sponsors/DiamondSponsors';
 import Heading from './typography/Heading';
-import Paragraph from './typography/Paragraph';
 
 interface HeroProps {
   className?: string;
@@ -32,57 +29,41 @@ export default function Hero({ className = '' }: HeroProps) {
       <AnnouncementHero className='my-4' />
       <header className={`mt-12 px-2 ${className}`}>
         <div className='text-center'>
-          <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.xl} className='mb-4'>
+          <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.xxl} className='mb-4'>
             {t('main.header')} <span className='block md:-mt-4'> {t('main.subHeader')}</span>
+            <span className='block md:-mt-4'>{t('main.extraSubHeader')}</span>
           </Heading>
+
           <Heading
             level={HeadingLevel.h2}
-            typeStyle={HeadingTypeStyle.bodyLg}
-            textColor='text-gray-700'
+            typeStyle={HeadingTypeStyle.bodyLlg}
+            textColor='text-gray-700 dark:text-dark-text'
             className='mx-auto mb-10 max-w-4xl'
           >
             {t('main.body_pretext')} <strong>{t('main.body_boldtext')}</strong>
             {t('main.body_posttext')}
           </Heading>
           <div className='flex flex-col items-center justify-center gap-2 md:flex-row'>
             <Button
-              className='block w-full md:w-auto'
-              text={t('main.docs_btn')}
-              href='/docs'
+              className='block w-full md:w-1/3 hover:bg-primary-600'
+              text={t('main.community_btn')}
+              href='https://www.asyncapi.com/slack-invite'
+              target='_blank'
+              rel='noopener noreferrer'
               icon={<ArrowRight className='-mb-1 size-5' />}
               data-testid='Hero-Button'
             />
-            {/* Wrap SearchButton with AlgoliaSearch component */}
-            <AlgoliaSearch>
-              <SearchButton className='flex w-full items-center space-x-3 rounded-md border border-secondary-500 bg-secondary-100 px-4 py-3 text-left text-secondary-500 shadow-md transition-all duration-500 ease-in-out hover:bg-secondary-500 hover:text-white md:w-auto'>
-                {({ actionKey }) => (
-                  <>
-                    <IconLoupe />
-                    <span className='flex-auto'>{t('main.search_btn')}</span>
-                    {actionKey && (
-                      <kbd className='font-sans font-semibold'>
-                        <abbr title={actionKey.key} className='no-underline'>
-                          {actionKey.shortKey}
-                        </abbr>{' '}
-                        K
-                      </kbd>
-                    )}
-                  </>
-                )}
-              </SearchButton>
-            </AlgoliaSearch>
           </div>
-          <Paragraph typeStyle={ParagraphTypeStyle.sm} className='mt-4' textColor='text-gray-500'>
-            {t('main.slogan_text')}{' '}
-            <a className='underline' href='https://www.linuxfoundation.org/'>
-              {t('main.slogan_link')}
-            </a>
-          </Paragraph>
+
+          <DiamondSponsors
+            className={'w-full relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw]'}
+            showSupportBanner={false}
+          />
         </div>
+        <Features />
         <div className='mt-8 md:mt-16'>
-          <DemoAnimation />
+          <SneakPeek />
         </div>
-        <Features />
       </header>
     </>
   );