diff --git a/components/CodeAnimation/AsyncAPIcontent.tsx b/components/CodeAnimation/AsyncAPIcontent.tsx
new file mode 100644
index 000000000000..1706b10f35b9
--- /dev/null
+++ b/components/CodeAnimation/AsyncAPIcontent.tsx
@@ -0,0 +1,7 @@
+/**
+ * @description Renders the content related to AsyncAPI in a styled div container.
+ * This is used as the default content for the "AsyncAPI Document" tab in the DemoAnimation component.
+ */
+export default function renderAsyncAPIContent() {
+  return <div className='font-mono text-sm leading-relaxed text-[#98c379]'>content here</div>;
+}
diff --git a/components/CodeAnimation/CodeGeneration.tsx b/components/CodeAnimation/CodeGeneration.tsx
new file mode 100644
index 000000000000..3c4cb94a17c2
--- /dev/null
+++ b/components/CodeAnimation/CodeGeneration.tsx
@@ -0,0 +1,11 @@
+/**
+ * @description Renders the content related to code generation in a styled div container.
+ * This is used as the content for the "Code Generation" tab in the DemoAnimation component.
+ */
+export default function renderCodeGeneration() {
+  return (
+    <div className='font-mono text-sm leading-relaxed'>
+      <h1 className='text-[#98c379]'>content here</h1>
+    </div>
+  );
+}
diff --git a/components/CodeAnimation/DemoAnimation.tsx b/components/CodeAnimation/DemoAnimation.tsx
new file mode 100644
index 000000000000..5dce0da6fd1f
--- /dev/null
+++ b/components/CodeAnimation/DemoAnimation.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+
+import Container from '../layout/Container';
+import renderAsyncAPIContent from './AsyncAPIcontent';
+import renderCodeGeneration from './CodeGeneration';
+import renderDocumentation from './Documentation';
+
+/**
+ * @description A React component that displays a demo animation interface with three tabs:
+ * "AsyncAPI Document," "Code Generation," and "Documentation." The content of each tab
+ * dynamically updates based on the active tab selected by the user.
+ *
+ */
+export default function DemoAnimation() {
+  const [activeTab, setActiveTab] = useState('AsyncAPI Document');
+  const tabs = ['AsyncAPI Document', 'Code Generation', 'Documentation'];
+
+  /**
+   * @description Determines and renders the content for the currently active tab.
+   */
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'Code Generation':
+        return renderCodeGeneration() || <p>No content available</p>;
+      case 'Documentation':
+        return renderDocumentation() || <p>No content available</p>;
+      default:
+        return renderAsyncAPIContent() || <p>No content available</p>;
+    }
+  };
+
+  return (
+    <div className='relative inset-x-1/2 mx-[-50vw] w-screen bg-blue-100 p-6 font-sans'>
+      <Container>
+        <h1 className='mb-2 text-center text-2xl font-medium'>Sneak Peek Into The Real Process</h1>
+        <p className='mb-6 text-center text-sm text-gray-600'>
+          One of our main goals is to improve the current state of Event
+          <br />
+          Driven Architecture (EDA!)
+        </p>
+
+        <div className='mb-4 flex flex-wrap overflow-hidden rounded-lg bg-black'>
+          {tabs.map((tab) => (
+            <button
+              key={tab}
+              className={`m-2 flex-1 rounded px-4 py-2 text-center text-sm transition-colors duration-200 ${
+                activeTab === tab ? 'bg-white text-black' : 'bg-gray-700 text-gray-300 hover:bg-gray-800'
+              }`}
+              onClick={() => setActiveTab(tab)}
+              aria-selected={activeTab === tab}
+              role='tab'
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+
+        <div
+          className='min-h-[400px] rounded-lg bg-[#1a1b26] p-6 transition-all duration-200'
+          role='tabpanel'
+          aria-labelledby={`tab-${activeTab}`}
+        >
+          <div className='max-w-full overflow-auto'>
+            <div className='overflow-x-auto whitespace-pre-wrap'>{renderContent()}</div>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+}
diff --git a/components/CodeAnimation/Documentation.tsx b/components/CodeAnimation/Documentation.tsx
new file mode 100644
index 000000000000..1bdb59b21590
--- /dev/null
+++ b/components/CodeAnimation/Documentation.tsx
@@ -0,0 +1,11 @@
+/**
+ * @description Renders the documentation content in a styled container.
+ * This is used as the content for the "Documentation" tab in the DemoAnimation component.
+ */
+export default function renderDocumentation() {
+  return (
+    <div className='font-sans text-white'>
+      <h1 className='mb-4 text-xl font-semibold'>Documentation</h1>
+    </div>
+  );
+}
diff --git a/components/DemoAnimation.tsx b/components/DemoAnimation.tsx
deleted file mode 100644
index 1748d0c6ca2b..000000000000
--- a/components/DemoAnimation.tsx
+++ /dev/null
@@ -1,383 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import Typing from 'react-typist-component';
-
-import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
-
-import OpenInStudioButton from './buttons/OpenInStudioButton';
-import ArrowRight from './icons/ArrowRight';
-import MacWindow from './MacWindow';
-import Heading from './typography/Heading';
-
-interface IDemoAnimationProps {
-  className?: string;
-}
-
-interface ICursorProps {
-  className?: string;
-}
-
-/**
- * @description A component that displays a cursor for the typing animation
- * @param {string} props.className - The class name for the component
- */
-function Cursor({ className = '' }: ICursorProps) {
-  return (
-    <span
-      className={`${className} animation-blink animation-1s animation-step-end ml-px bg-gray-400 px-px font-bold`}
-    ></span>
-  );
-}
-
-/**
- * @description A component that displays a demo animation of an AsyncAPI document
- * @param {string} props.className - The class name for the component
- */
-export default function DemoAnimation({ className = '' }: IDemoAnimationProps) {
-  const [started] = useState(true);
-  const [showInfo, setShowInfo] = useState(false);
-  const [showChannelsAndOperation, setShowChannelsAndOperation] = useState(false);
-  const [showUntilMessagePayload, setShowUntilMessagePayload] = useState(false);
-  const [showDisplayName, setShowDisplayName] = useState(false);
-  const [showEmail, setShowEmail] = useState(false);
-  const [showDisplayNameDescription, setShowDisplayNameDescription] = useState(false);
-  const [showEmailDescription, setShowEmailDescription] = useState(false);
-  const [finished, setFinished] = useState(false);
-  const [showControls, setShowControls] = useState(false);
-  const typingDelay = 60;
-
-  useEffect(() => {
-    if (finished) {
-      setTimeout(() => {
-        setShowControls(true);
-      }, 2000);
-    }
-  }, [finished]);
-
-  /**
-   * @description classes that displays a cursor for the typing animation
-   * @param {boolean} condition - The condition to determine which class to apply
-   */
-  function transitionClassNames(condition: boolean) {
-    return `transition-all duration-500 ease-in-out overflow-hidden ${condition ? 'opacity-100 max-h-auto' : 'max-h-0 opacity-0'}`;
-  }
-
-  /**
-   * @description A component that displays a cursor for the typing animation
-   */
-  function renderTyping(children: React.ReactNode, callback: () => void) {
-    return (
-      <Typing typingDelay={typingDelay} cursor={<Cursor />} onTypingDone={callback}>
-        {children}
-      </Typing>
-    );
-  }
-
-  /**
-   * @description A component that displays info block
-   */
-  function renderInfoBlock(callback: () => void) {
-    const descriptionCallback = () => setFinished(true);
-
-    const common = (
-      <>
-        <div>
-          <span className='text-teal-400'>asyncapi:</span> 3.0.0
-        </div>
-        <div>
-          <span className='text-teal-400'>info:</span>
-        </div>
-        <div>
-          <span className='text-teal-400'>&nbsp;&nbsp;title:</span> Account Service
-        </div>
-        <div>
-          <span className='text-teal-400'>&nbsp;&nbsp;version:</span> 1.0.0
-        </div>
-        <Typing.Delay ms={500} />
-      </>
-    );
-
-    if (showEmailDescription) {
-      return (
-        <>
-          {common}
-          <Typing typingDelay={typingDelay} cursor={<Cursor />} onTypingDone={descriptionCallback}>
-            <div>
-              <span className='text-teal-400'>&nbsp;&nbsp;description:</span> This service is in charge of processing
-              user signups :rocket:
-            </div>
-          </Typing>
-        </>
-      );
-    }
-
-    return renderTyping(common, callback);
-  }
-
-  /**
-   * @description A component that displays channels and operation block
-   */
-  function renderChannelsOperationBlock(callback: () => void) {
-    return renderTyping(
-      <>
-        <div>
-          <span className='text-teal-400'>channels:</span>
-        </div>
-        <div>
-          <span className='text-yellow-300'>&nbsp;&nbsp;userSignedup:</span>
-        </div>
-        <div>
-          <span className='text-purple-400'>&nbsp;&nbsp;&nbsp;&nbsp;address:</span>
-          <span className='text-teal-200'>&apos;user/signedup&apos;</span>
-        </div>
-        <div>
-          <span className='text-teal-400'>&nbsp;&nbsp;&nbsp;&nbsp;messages:</span>
-        </div>
-        <div>
-          <span className='text-yellow-300'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;userSignedupMessage:</span>
-        </div>
-        <div>
-          <span className='text-teal-200'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ref:</span>
-          <span className='text-teal-200'>&apos;#/components/messages/UserSignedUp&apos;</span>
-        </div>
-        <div>
-          <span className='text-teal-400'>operations:</span>
-        </div>
-        <div>
-          <span className='text-yellow-300'>&nbsp;&nbsp;processUserSignups:</span>
-        </div>
-        <div>
-          <span className='text-purple-400'>&nbsp;&nbsp;&nbsp;&nbsp;action:</span>
-          <span className='text-teal-200'>&apos;receive&apos;</span>
-        </div>
-        <div>
-          <span className='text-teal-400'>&nbsp;&nbsp;&nbsp;&nbsp;channel:</span>
-        </div>
-        <div>
-          <span className='text-teal-200'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ref:</span>
-          <span className='text-teal-200'> &apos;#/channels/userSignedup&apos;</span>
-        </div>
-        <Typing.Delay ms={500} />
-      </>,
-      callback
-    );
-  }
-
-  /**
-   * @description A component that displays until message payload block
-   */
-  function renderUntilMessagePayload(callback: () => void) {
-    return renderTyping(
-      <>
-        <div>
-          <span className='text-teal-400'>components:</span>
-        </div>
-        <div>
-          <span className='text-teal-400'>&nbsp;&nbsp;messages:</span>
-        </div>
-        <div>
-          <span className='text-teal-200'>&nbsp;&nbsp;&nbsp;&nbsp;UserSignedUp:</span>
-        </div>
-        <div>
-          <span className='text-teal-400'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;payload:</span>
-        </div>
-        <div>
-          <span className='text-teal-400'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:</span>
-          <span> object</span>
-        </div>
-      </>,
-      callback
-    );
-  }
-
-  /**
-   * @description A component that displays display name block
-   */
-  function renderDisplayName(callback: () => void) {
-    const descriptionCallback = () => setShowDisplayNameDescription(true);
-
-    const common = (
-      <>
-        <div>
-          <span className='text-teal-400'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;properties:</span>
-        </div>
-        <div>
-          <span className='text-green-400'>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;displayName:
-          </span>
-        </div>
-        <div>
-          <span className='text-teal-400'>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:
-          </span>
-          <span> string</span>
-        </div>
-      </>
-    );
-
-    if (showEmail) {
-      return (
-        <>
-          {common}
-          <Typing typingDelay={typingDelay} cursor={<Cursor />} onTypingDone={descriptionCallback}>
-            <div>
-              <span className='text-teal-400'>
-                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description:
-              </span>
-              <span> Name of the user</span>
-            </div>
-          </Typing>
-        </>
-      );
-    }
-
-    return renderTyping(<>{common}</>, callback);
-  }
-
-  /**
-   * @description A component that displays email block
-   */
-  function renderEmail(callback: () => void) {
-    const descriptionCallback = () => setShowEmailDescription(true);
-
-    const common = (
-      <>
-        <div>
-          <span className='text-green-400'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;email:</span>
-        </div>
-        <div>
-          <span className='text-teal-400'>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:
-          </span>
-          <span> string</span>
-        </div>
-        <div>
-          <span className='text-teal-400'>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format:
-          </span>
-          <span> email</span>
-        </div>
-      </>
-    );
-
-    if (showDisplayNameDescription) {
-      return (
-        <>
-          {common}
-          <Typing typingDelay={typingDelay} cursor={<Cursor />} onTypingDone={descriptionCallback}>
-            <div>
-              <span className='text-teal-400'>
-                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description:
-              </span>
-              <span> Email of the user</span>
-            </div>
-          </Typing>
-        </>
-      );
-    }
-
-    return renderTyping(common, callback);
-  }
-
-  return (
-    <div className={`${className} relative`}>
-      <div
-        className='transition-all duration-500 ease-in-out md:flex'
-        style={showControls ? { filter: '', opacity: '1' } : undefined}
-      >
-        <div className='z-20 mb-2 md:mb-0 md:mr-1 md:flex-1'>
-          <MacWindow
-            className='h-full border border-gray-800 bg-code-editor-dark shadow-lg transition-all duration-500 ease-in-out'
-            contentClassName='text-left text-white text-sm font-mono font-medium transition-all duration-500 ease-in-out break-words md:min-h-108'
-            title='asyncapi.yaml'
-          >
-            {(showEmailDescription || started) && renderInfoBlock(() => setShowInfo(true))}
-            {showInfo && renderChannelsOperationBlock(() => setShowChannelsAndOperation(true))}
-            {showChannelsAndOperation && renderUntilMessagePayload(() => setShowUntilMessagePayload(true))}
-            {(showUntilMessagePayload || showEmail) && renderDisplayName(() => setShowDisplayName(true))}
-            {(showDisplayName || showDisplayNameDescription) && renderEmail(() => setShowEmail(true))}
-          </MacWindow>
-        </div>
-        <div className={'relative z-10 transition-all duration-500 ease-in-out md:mb-0 md:ml-6 md:flex-1'}>
-          <div
-            className={`mt-8 text-center md:mt-0 md:text-left lg:absolute lg:inset-x-0 lg:top-0 lg:ml-48 lg:mr-8 ${showControls ? 'block' : 'hidden'}`}
-          >
-            <Heading typeStyle={HeadingTypeStyle.md} level={HeadingLevel.h2} className='mb-4'>
-              Play with it!
-            </Heading>
-            <p className='font-normal tracking mx-auto mb-6 max-w-3xl text-lg text-gray-700'>
-              Open this example on AsyncAPI Studio to get a better taste of the specification. No signup is required!
-            </p>
-            <OpenInStudioButton />
-          </div>
-          <MacWindow
-            className={`min-h-full border border-gray-200 bg-gray-50 shadow-lg transition-all duration-500 ease-in-out ${showControls ? 'h-0 -translate-x-full opacity-0 lg:h-auto lg:-translate-x-3/4 lg:opacity-100' : ''}`}
-            contentClassName='text-left h-full text-gray-800 text-sm font-medium transition-all duration-500 ease-in-out'
-            title='Account Service Documentation'
-          >
-            <div className={`mb-8 mt-4 ${transitionClassNames(showInfo)}`}>
-              <h1 className='text-2xl font-bold text-gray-500'>Account Service 1.0.0</h1>
-              <p className={transitionClassNames(finished)}>This service is in charge of processing user signups 🚀</p>
-            </div>
-
-            <div className={transitionClassNames(showChannelsAndOperation)}>
-              <span className='mr-2 rounded bg-green-500 px-3 py-2 font-bold text-white'>RECEIVES</span>{' '}
-              <span className='text-lg text-gray-700'>user/signedup</span>
-            </div>
-
-            <div className={transitionClassNames(showUntilMessagePayload)}>
-              <div className='mb-2 mt-4 text-gray-400'>Accepts the following message:</div>
-              <div className='rounded bg-gray-200 p-4 text-gray-600'>
-                Payload{' '}
-                <ArrowRight
-                  className={`inline-block size-4 transition-all duration-500 ease-in-out ${showDisplayName ? 'rotate-90' : ''}`}
-                />{' '}
-                <span className='ml-24 font-bold text-green-500'>Object</span>
-                <div>
-                  <div className='mt-2 rounded bg-gray-100 p-4'>
-                    <div className={`mb-4 grid grid-cols-2 ${transitionClassNames(showDisplayName)}`}>
-                      <div>displayName</div>
-                      <div>
-                        <div className='font-bold text-green-500'>String</div>
-                        <div className={`text-sm ${transitionClassNames(showDisplayNameDescription)}`}>
-                          Name of the user
-                        </div>
-                      </div>
-                    </div>
-                    <div className={`grid grid-cols-2 ${transitionClassNames(showEmail)}`}>
-                      <div>email</div>
-                      <div>
-                        <div className='font-bold text-green-500'>
-                          String
-                          <span className='ml-2 rounded bg-yellow-300 px-1 py-0.5 text-xs text-black'>email</span>
-                        </div>
-                        <div className={`text-sm ${transitionClassNames(showEmailDescription)}`}>Email of the user</div>
-                      </div>
-                    </div>
-
-                    <div className='mt-8 text-xs text-gray-400'>Additional properties are allowed.</div>
-                  </div>
-
-                  <div className='mt-4 rounded bg-code-editor-dark p-4 font-mono text-gray-400'>
-                    {/* eslint-disable-next-line react/jsx-no-comment-textnodes */}
-                    <div className='text-gray-500'>// Example</div>
-                    <div>&nbsp;</div>
-                    <div>{'{'}</div>
-                    <div className={transitionClassNames(showDisplayName)}>
-                      <span className='text-teal-400'>&nbsp;&nbsp;&quot;displayName&quot;</span>:{' '}
-                      <span className='text-white'>&quot;Eve & Chan&quot;</span>,
-                    </div>
-                    <div className={transitionClassNames(showEmail)}>
-                      <span className='text-teal-400'>&nbsp;&nbsp;&quot;email&quot;</span>:{' '}
-                      <span className='text-white'>&quot;info@asyncapi.io&quot;</span>
-                    </div>
-                    <div>{'}'}</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </MacWindow>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/components/Hero.tsx b/components/Hero.tsx
index c0609e837569..69544d5071fc 100644
--- a/components/Hero.tsx
+++ b/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 DemoAnimation from './CodeAnimation/DemoAnimation';
 import Features from './features';
-import ArrowRight from './icons/ArrowRight';
-import IconLoupe from './icons/Loupe';
+import Container from './layout/Container';
+import DiamondSponsors from './sponsors/DiamondSponsors';
 import Heading from './typography/Heading';
-import Paragraph from './typography/Paragraph';
 
 interface HeroProps {
   className?: string;
@@ -33,56 +30,50 @@ export default function Hero({ className = '' }: HeroProps) {
       <header className={`mt-12 px-2 ${className}`}>
         <div className='text-center'>
           <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.xl} className='mb-4'>
-            {t('main.header')} <span className='block md:-mt-4'> {t('main.subHeader')}</span>
+            {t('main.header')}
+          </Heading>
+          <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg} className='-mt-4'>
+            {t('main.subHeader')}
           </Heading>
           <Heading
-            level={HeadingLevel.h2}
+            level={HeadingLevel.h3}
             typeStyle={HeadingTypeStyle.bodyLg}
             textColor='text-gray-700'
             className='mx-auto mb-10 max-w-4xl'
           >
-            {t('main.body_pretext')} <strong>{t('main.body_boldtext')}</strong>
-            {t('main.body_posttext')}
+            {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'
-              icon={<ArrowRight className='-mb-1 size-5' />}
-              data-testid='Hero-Button'
+              text={t('main.join_btn')}
+              href='/slack-invite'
+              aria-label='Join our Slack Community'
+              data-testid='Join-Button'
+            />
+            <span className='m-2 text-lg font-medium'>OR</span>
+            <Button
+              className='block w-full border border-blue-500 bg-white text-blue-500 hover:bg-white md:w-auto'
+              text={t('main.subscribe_btn')}
+              href='#'
+              aria-disabled='true'
+              aria-label='Subscribe to our updates'
+              data-testid='Subscribe-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>
         </div>
+        <div className='relative inset-x-1/2 mx-[-50vw] mt-16 w-screen bg-blue-100'>
+          <Container className='p-6 text-center' wide>
+            <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
+              {t('sponsors.diamondTitle')}
+            </Heading>
+            <DiamondSponsors className='mt-4' showSupportBanner={false} />
+          </Container>
+        </div>
+        <Features />
         <div className='mt-8 md:mt-16'>
           <DemoAnimation />
         </div>
-        <Features />
       </header>
     </>
   );
diff --git a/components/SupportUs/SupportUs.tsx b/components/SupportUs/SupportUs.tsx
index 399fb0ca5dc8..1a99cdd45c53 100644
--- a/components/SupportUs/SupportUs.tsx
+++ b/components/SupportUs/SupportUs.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
 
+import Heading from '../typography/Heading';
+import Paragraph from '../typography/Paragraph';
+import TextLink from '../typography/TextLink';
 import { items } from './SupportItemsList';
 
 interface SupportUsProps {
@@ -16,6 +19,14 @@ interface SupportUsProps {
 export default function SupportUs({ className = '' }: SupportUsProps): React.ReactNode {
   return (
     <div className={`text-center ${className}`} data-testid='SupportUs-main'>
+      <Heading>Supporters</Heading>
+      <Paragraph className='mx-auto my-6 max-w-4xl text-center'>
+        The following companies support us by letting us use their products for free. Interested in supporting us too?
+        <TextLink className='text-gray-700' href='mailto:info@asyncapi.io' target='_blank'>
+          Email us
+        </TextLink>{' '}
+        for more info
+      </Paragraph>
       <div
         className='flex flex-wrap items-center justify-center sm:py-2 md:mb-4 md:px-4'
         data-testid='SupportUs-section'
diff --git a/components/buttons/GoogleCalendarButton.tsx b/components/buttons/GoogleCalendarButton.tsx
index 15f16dca65f7..92e1b8fcba48 100644
--- a/components/buttons/GoogleCalendarButton.tsx
+++ b/components/buttons/GoogleCalendarButton.tsx
@@ -4,7 +4,6 @@ import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';
 import { useTranslation } from '../../utils/i18n';
-import IconGoogleCalendar from '../icons/GoogleCalendar';
 import Button from './Button';
 
 interface IGoogleCalendarButtonProps extends IButtonDefaultProps {}
@@ -29,7 +28,6 @@ export default function GoogleCalendarButton({
   return (
     <Button
       text={t(text)}
-      icon={<IconGoogleCalendar />}
       href={href}
       iconPosition={iconPosition}
       target={target}
diff --git a/components/buttons/ICSFileButton.tsx b/components/buttons/ICSFileButton.tsx
index 1f529cee3c10..69fe3475f62f 100644
--- a/components/buttons/ICSFileButton.tsx
+++ b/components/buttons/ICSFileButton.tsx
@@ -4,7 +4,6 @@ import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';
 import { useTranslation } from '../../utils/i18n';
-import IconCalendar from '../icons/Calendar';
 import Button from './Button';
 
 interface IICSFButtonProps extends IButtonDefaultProps {}
@@ -29,7 +28,6 @@ export default function ICSFButton({
   return (
     <Button
       text={t(text)}
-      icon={<IconCalendar />}
       href={href}
       iconPosition={iconPosition}
       target={target}
diff --git a/components/features/FeatureList.ts b/components/features/FeatureList.ts
index 130cd2599525..7db0f8f56252 100644
--- a/components/features/FeatureList.ts
+++ b/components/features/FeatureList.ts
@@ -6,83 +6,63 @@ interface FeatureLink {
 
 interface Feature {
   id: string;
-  links: FeatureLink[];
+  name: string;
+  link: FeatureLink;
 }
 
 export const features: Feature[] = [
   {
-    id: 'specification',
-    links: [
-      {
-        label: 'Documentation',
-        href: 'docs/reference/specification/latest',
-        id: 'whyasyncapi-spec-documentation-link'
-      }
-    ]
+    id: 'costs-control',
+    name: 'Costs Control',
+    link: {
+      label: 'features.read-more',
+      href: 'docs/costs-control',
+      id: 'costs-control-read-more-link'
+    }
   },
   {
-    id: 'document-apis',
-    links: [
-      {
-        label: 'HTML Template',
-        href: 'https://github.com/asyncapi/html-template',
-        id: 'whyasyncapi-apis-htmltemplate-link'
-      },
-      {
-        label: 'React Component',
-        href: 'https://github.com/asyncapi/asyncapi-react/',
-        id: 'whyasyncapi-apis-reactcomponents-link'
-      }
-    ]
+    id: 'publishing-api',
+    name: 'Self-service for Publishing API',
+    link: {
+      label: 'features.read-more',
+      href: 'docs/publishing-api',
+      id: 'publishing-api-read-more-link'
+    }
   },
   {
     id: 'code-generation',
-    links: [
-      {
-        label: 'Generator',
-        href: 'tools/generator',
-        id: 'whyasyncapi-generation-generator-link'
-      },
-      {
-        label: 'Modelina',
-        href: 'tools/modelina',
-        id: 'whyasyncapi-generation-modelina-link'
-      }
-    ]
+    name: 'Code Generation',
+    link: {
+      label: 'features.read-more',
+      href: 'docs/code-generation',
+      id: 'code-generation-read-more-link'
+    }
   },
   {
-    id: 'community',
-    links: [
-      {
-        label: 'Join our Slack',
-        href: 'https://asyncapi.com/slack-invite',
-        id: 'whyasyncapi-community-slack-link'
-      }
-    ]
+    id: 'infra-as-code',
+    name: 'Infrastructure as Code',
+    link: {
+      label: 'features.read-more',
+      href: 'docs/infra-as-code',
+      id: 'infra-as-code-read-more-link'
+    }
   },
   {
-    id: 'open-governance',
-    links: [
-      {
-        label: 'Read more about Open Governance',
-        href: 'blog/governance-motivation',
-        id: 'whyasyncapi-governance-more-link'
-      },
-      {
-        label: 'TSC Members',
-        href: 'community/tsc',
-        id: 'whyasyncapi-governance-tsc-link'
-      }
-    ]
+    id: 'governance-consistency',
+    name: 'Governance & Consistency',
+    link: {
+      label: 'features.read-more',
+      href: 'docs/governance-consistency',
+      id: 'governance-consistency-read-more-link'
+    }
   },
   {
-    id: 'much-more',
-    links: [
-      {
-        label: 'View GitHub Discussions',
-        href: 'https://github.com/asyncapi/community/discussions',
-        id: 'whyasyncapi-muchmore-github-link'
-      }
-    ]
+    id: 'developer-portal',
+    name: 'Developer Portal',
+    link: {
+      label: 'features.read-more',
+      href: 'docs/developer-portal',
+      id: 'developer-portal-read-more-link'
+    }
   }
 ];
diff --git a/components/features/index.tsx b/components/features/index.tsx
index 959db7b55a7f..46ca594520d5 100644
--- a/components/features/index.tsx
+++ b/components/features/index.tsx
@@ -16,36 +16,37 @@ export default function Features() {
   const { t } = useTranslation('landing-page');
 
   return (
-    <section className='relative bg-white pt-16'>
-      <div className='mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8'>
-        <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg} className='mt-2'>
-          {t('features.title')}
-        </Heading>
-        <Paragraph className='mx-auto mt-2 max-w-prose'>{t('features.description')}</Paragraph>
-        <div className='mt-12 text-left'>
-          <ul className='grid  grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3' data-testid='Feature-ul'>
+    <section className='relative bg-white py-16'>
+      <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <div className='text-center'>
+          <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg} className='mt-2'>
+            {t('features.title')}
+          </Heading>
+          <Paragraph className='mx-auto mt-4 max-w-2xl text-gray-500'>{t('features.description')}</Paragraph>
+        </div>
+        <div className='mt-12'>
+          <ul className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3' data-testid='Feature-ul'>
             {features.map((feature) => (
               <li
                 key={feature.id}
-                className='flex flex-col justify-between rounded-lg border border-gray-200 px-6 pb-8 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg'
+                className='rounded-lg border border-gray-200 bg-white p-6 shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl'
                 data-testid='Feature-li'
               >
-                <div>
-                  <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.mdSemibold} className='mt-8'>
-                    {t(`features.${feature.id}.name`)}
-                  </Heading>
-                  {
-                    <Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-5'>
-                      {t(`features.${feature.id}.description`)}
-                    </Paragraph>
-                  }
-                </div>
-                <div className='flex justify-between'>
-                  {feature.links.map((link) => (
-                    <TextLink id={link.id} href={link.href} key={link.id} className='mt-6 inline-block'>
-                      {t(`features.${feature.id}.links.${link.id}`)}
-                    </TextLink>
-                  ))}
+                <Heading level={HeadingLevel.h4} typeStyle={HeadingTypeStyle.mdSemibold} className='mb-4 text-gray-900'>
+                  {t(`features.${feature.id}.name`)}
+                </Heading>
+                <Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-4 text-gray-600'>
+                  {t(`features.${feature.id}.description`)}
+                </Paragraph>
+                <div className='mt-6'>
+                  <TextLink
+                    id={feature.link.id}
+                    href={feature.link.href}
+                    key={feature.link.id}
+                    className='font-large text-black no-underline hover:underline'
+                  >
+                    {t('features.read-more')}
+                  </TextLink>
                 </div>
               </li>
             ))}
diff --git a/components/sponsors/DiamondSponsors.tsx b/components/sponsors/DiamondSponsors.tsx
new file mode 100644
index 000000000000..24e11a9f0be3
--- /dev/null
+++ b/components/sponsors/DiamondSponsors.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { sponsors } from './DiamondSponsorsList';
+
+interface SponsorsProps {
+  className?: string;
+  showSupportBanner?: boolean;
+}
+
+/**
+ * This component displays Diamond Sponsors.
+ * @param {SponsorsProps} props - The props for Sponsors component.
+ * @param {string} props.className - Additional CSS classes for styling.
+ * @param {boolean} props.showSupportBanner - Indicates whether support banner should be displayed.
+ */
+export default function DiamondSponsors({ className = '', showSupportBanner = true }: SponsorsProps): React.ReactNode {
+  return (
+    <div className={`text-center ${className}`}>
+      <ul className='mb-4 flex flex-wrap items-center justify-center md:px-4'>
+        {sponsors.map((sponsor) => (
+          <li key={sponsor.website} className='w-2/3 sm:w-1/4 md:w-1/3 lg:w-1/5' data-testid='Sponsors-list'>
+            <a
+              href={sponsor.website}
+              target='_blank'
+              className='relative block p-4 text-center sm:p-0'
+              rel='noopener noreferrer'
+              data-testid='Sponsors-link'
+            >
+              <img
+                className={sponsor?.imageClass}
+                src={sponsor.imageSrc}
+                alt={sponsor.altText}
+                data-testid='Sponsors-img'
+              />
+            </a>
+          </li>
+        ))}
+      </ul>
+      {showSupportBanner && (
+        <div className='md:px-4'>
+          <span className='text-gray-500'>Want to become a sponsor?</span>{' '}
+          <a
+            href='https://opencollective.com/asyncapi'
+            target='_blank'
+            rel='noopener noreferrer'
+            className='text-primary-600'
+          >
+            Support us!
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/sponsors/DiamondSponsorsList.ts b/components/sponsors/DiamondSponsorsList.ts
new file mode 100644
index 000000000000..bdc75f3a7141
--- /dev/null
+++ b/components/sponsors/DiamondSponsorsList.ts
@@ -0,0 +1,25 @@
+import type { SponsorType } from '@/types/components/sponsors/SponsorType';
+
+export const sponsors: SponsorType[] = [
+  {
+    name: 'Solace',
+    website: 'https://www.solace.com',
+    imageSrc: '/img/sponsors/solace.png',
+    altText: 'Solace',
+    imageClass: 'inline-block px-4 sm:h-12'
+  },
+  {
+    name: 'Gravitee.io',
+    website: 'https://www.gravitee.io',
+    imageSrc: '/img/sponsors/gravitee.io_logo.jpg',
+    altText: 'Gravitee.io',
+    imageClass: 'inline-block px-4 sm:h-14'
+  },
+  {
+    name: 'Postman',
+    website: 'https://www.postman.com',
+    imageSrc: '/img/sponsors/postman.png',
+    altText: 'Postman',
+    imageClass: 'inline-block px-4 sm:h-18'
+  }
+];
diff --git a/pages/[lang]/index.tsx b/pages/[lang]/index.tsx
index 847a8effbc8d..0e0a2a9a0726 100644
--- a/pages/[lang]/index.tsx
+++ b/pages/[lang]/index.tsx
@@ -7,27 +7,16 @@ import { getStaticPaths, makeStaticProps } from '@/utils/getStatic';
 import Button from '../../components/buttons/Button';
 import GoogleCalendarButton from '../../components/buttons/GoogleCalendarButton';
 import ICSFileButton from '../../components/buttons/ICSFileButton';
-import SubscribeButton from '../../components/buttons/SubscribeButton';
-import Calendar from '../../components/Calendar';
 import Head from '../../components/Head';
 import Hero from '../../components/Hero';
 import Container from '../../components/layout/Container';
-import AdidasLogo from '../../components/logos/Adidas';
-import AxwayLogo from '../../components/logos/Axway';
-import SalesforceLogo from '../../components/logos/Salesforce';
-import SapLogo from '../../components/logos/SAP';
-import SlackLogo from '../../components/logos/Slack';
-import NewsletterSubscribe from '../../components/NewsletterSubscribe';
-import NewsroomSection from '../../components/newsroom/NewsroomSection';
 import Slack from '../../components/slack';
 import GoldSponsors from '../../components/sponsors/GoldSponsors';
 import PlatinumSponsors from '../../components/sponsors/PlatinumSponsors';
 import SilverSponsors from '../../components/sponsors/SilverSponsors';
 import SupportUs from '../../components/SupportUs/SupportUs';
-import Testimonial from '../../components/Testimonial';
 import Heading from '../../components/typography/Heading';
 import Paragraph from '../../components/typography/Paragraph';
-import TextLink from '../../components/typography/TextLink';
 
 const getStaticProps = makeStaticProps(['landing-page', 'footer', 'common']);
 
@@ -43,105 +32,48 @@ export default function HomePage() {
     <>
       <Head title='AsyncAPI Initiative for event-driven APIs' />
       <main id='main-content' className='scroll-mt-5'>
+        <div className='flex w-screen items-center justify-center bg-blue-100 py-2'>
+          <img className='mr-4 h-8 w-auto' src='/img/logos/LFX.svg' alt='Linux Foundation' />
+          <span className='font-semibold'>{t('main.linuxFoundation_txt')}</span>
+        </div>
         <Container wide>
           <Hero className='mb-24' />
         </Container>
 
-        <Container className='pb-12 text-center' wide as='section'>
-          <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
-            {t('adopters.title')}
-          </Heading>
-          <Paragraph className='mb-20 mt-2 md:mx-auto md:w-2/3'>
-            {t('adopters.description')}
-            <TextLink href='https://github.com/asyncapi/website/issues/new' target='_blank'>
-              {t('adopters.linkText')}
-            </TextLink>
-          </Paragraph>
-          <ul className='md:grid md:grid-cols-2 md:gap-8 lg:grid-cols-5'>
-            <li className='flex justify-center'>
-              <AdidasLogo className='h-8 text-gray-400 hover:text-black' />
-            </li>
-            <li className='flex justify-center'>
-              <AxwayLogo className='group mt-12 h-14 text-gray-400 hover:text-black md:-mt-5 lg:-mt-5' />
-            </li>
-            <li className='flex justify-center'>
-              <SlackLogo className='group mt-12 h-10 text-gray-400 hover:text-black md:mt-2 lg:-mt-1' />
-            </li>
-            <li className='flex justify-center'>
-              <SalesforceLogo className='mt-12 h-16 text-gray-400 md:mt-2 lg:-mt-4' />
-            </li>
-            <li className='flex justify-center'>
-              <SapLogo className='mt-12 h-12 text-gray-400 md:mt-2 lg:-mt-2' />
-            </li>
-          </ul>
-        </Container>
-
-        <div className='mt-8 bg-dark py-12'>
-          <Container wide as='section'>
-            <NewsletterSubscribe dark />
-          </Container>
-        </div>
-
-        <Container className='py-12 text-center' wide as='section'>
-          <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
-            {t('community.title')}
-          </Heading>
-          <Paragraph className='mt-2 md:mx-auto md:w-1/2'>{t('community.subtitle')}</Paragraph>
-          <div className='py-2 lg:py-12'>
-            <Container wide>
-              <div className='lg:flex'>
-                <div className='mt-10 lg:mt-0 lg:w-1/2'>
-                  <Slack />
-                </div>
-                <section className='lg:ml-12 lg:w-1/2 lg:max-w-xl lg:text-left'>
-                  <div className='mt-5'>
-                    <Heading level={HeadingLevel.h4} typeStyle={HeadingTypeStyle.mdSemibold}>
-                      {t('community.slackCTATitle')}
-                    </Heading>
-                    <Paragraph className='mt-2'>{t('community.slackCTADesc')}</Paragraph>
-                  </div>
-                  <div className='mt-5 flex justify-center lg:justify-start'>
-                    <Button className='w-full md:w-auto' text={t('community.slackCTABtn')} href='/slack-invite' />
-                  </div>
-                </section>
+        <Container className='py-12 text-left' wide as='section'>
+          <div className='flex flex-col gap-8 px-4 lg:flex-row lg:gap-12 lg:px-0'>
+            <div className='text-center lg:w-1/2 lg:text-left'>
+              <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
+                {t('community.title')}
+              </Heading>
+              <Paragraph className='mx-auto mt-2 text-left md:w-2/3 lg:mx-0'>{t('community.subtitle')}</Paragraph>
+              <div className='mt-5 flex justify-center lg:justify-start'>
+                <Button className='w-full md:w-auto' text={t('community.slackCTABtn')} href='/slack-invite' />
               </div>
+            </div>
 
-              <div className='mt-12 lg:flex lg:flex-row-reverse'>
-                <section className='mt-10 lg:mt-0 lg:flex-1'>
-                  <Calendar size={2} />
-                </section>
-                <section className='lg:mr-12 lg:max-w-xl lg:text-left'>
-                  <div className='mt-5 lg:mr-12'>
-                    <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.mdSemibold}>
-                      {t('community.meetingTitle')}
-                    </Heading>
-                    <Paragraph className='mt-2'>
-                      {t('community.meetingDesc')}
-
-                      <TextLink href='/community/meetings'>{t('community.meetingLink')}</TextLink>
-                    </Paragraph>
-                    <ul className='mt-5 justify-center md:flex'>
-                      <li>
-                        <GoogleCalendarButton href='https://calendar.google.com/calendar/u/3?cid=Y19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t' />
-                      </li>
-                      <li>
-                        <SubscribeButton href='/community/meetings' className='mt-2 md:ml-2 md:mt-0' />
-                      </li>
-                      <li>
-                        <ICSFileButton
-                          href='https://calendar.google.com/calendar/ical/c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com/public/basic.ics'
-                          className='mt-2 md:ml-2 md:mt-0'
-                        />
-                      </li>
-                    </ul>
-                  </div>
-                </section>
-              </div>
-            </Container>
-            <Container wide>
-              <NewsroomSection />
-            </Container>
+            <div className='mt-10 w-full lg:mt-0 lg:w-1/2'>
+              <Slack />
+            </div>
           </div>
+
+          <Container className='mt-20 text-center' wide>
+            <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
+              {t('community.meetingTitle')}
+            </Heading>
+            <Paragraph className='mt-4 lg:mx-36'>{t('community.meetingDesc')}</Paragraph>
+            <div className='mt-4 flex flex-col items-center justify-center gap-2 md:flex-row'>
+              <GoogleCalendarButton
+                className='bg-primary-500 text-white hover:bg-primary-400'
+                href='https://calendar.google.com/calendar/u/3?cid=Y19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t'
+              />
+              <h1 className='m-2'>OR</h1>
+              <ICSFileButton
+                href='https://calendar.google.com/calendar/ical/c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com/public/basic.ics'
+                className='block border border-blue-500 bg-white text-blue-500 hover:bg-white md:w-auto'
+              />
+            </div>
+          </Container>
         </Container>
 
         <section className='pb-20' role='contentinfo' aria-label='Our Sponsors'>
@@ -165,67 +97,8 @@ export default function HomePage() {
             </Heading>
             <SilverSponsors className='mt-4' showSupportBanner={false} />
           </Container>
-
-          <Container className='py-6 text-center' wide as='section'>
-            <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.mdSemibold} className='mb-4'>
-              {t('sponsors.sponsorCTATitle')}
-            </Heading>
-            <Paragraph className='mt-2 md:mx-auto md:w-1/2'>
-              {t('sponsors.sponsorCTADesc')}
-              <TextLink href='https://opencollective.com/asyncapi' target='_blank'>
-                {t('sponsors.sponsorCTALink')}
-              </TextLink>
-            </Paragraph>
-          </Container>
+          <SupportUs />
         </section>
-        <Container className='py-6 pb-20 text-center' wide>
-          <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
-            {t('sponsors.supportedByTitle')}
-          </Heading>
-          <Paragraph className='mx-auto mt-3 max-w-2xl pb-4 sm:mt-4'>
-            {t('sponsors.supportedByPretext')}
-            <TextLink href='mailto:info@asyncapi.io' target='_blank'>
-              {t('sponsors.supportedByLink')}
-            </TextLink>{' '}
-            {t('sponsors.supportedByPosttext')}
-          </Paragraph>
-          <SupportUs className='mt-4' showSupportBanner={false} />
-        </Container>
-        <Container className='mt-8 pb-20 text-center' wide as='section'>
-          <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
-            {t('testimonials.title')}
-          </Heading>
-          <ul className='mx-auto max-w-screen-xl md:grid md:grid-cols-2 md:px-6 lg:px-8'>
-            <Testimonial
-              className='md:pr-10 lg:pr-16'
-              text='Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs.'
-              authorAvatar='/img/testimonials/matt-mclarty.jpg'
-              authorName='Matt McLarty'
-              authorDescription='Global Leader of API Strategy at MuleSoft'
-            />
-            <Testimonial
-              className='md:pl-10 lg:pl-16'
-              text='Event-driven APIs need love too! AsyncAPI brings the many benefits of a machine/human-readable specification to these nuanced approaches.'
-              authorAvatar='/img/testimonials/bill-doerrfeld.jpg'
-              authorName='Bill Doerrfeld'
-              authorDescription='Editor in Chief at Nordic APIs'
-            />
-            <Testimonial
-              className='md:pr-10 lg:pr-16'
-              text="Developers need to be able to quickly and consistently create event-driven applications that provide business value and react to customer needs in realtime. I can't count how many times I've heard developers ask for OpenAPI/Swagger style tools for the asynchronous and event-driven world, and that is exactly what the AsyncAPI initiative is making a reality."
-              authorAvatar='/img/testimonials/jonathan-schabowsky.jpg'
-              authorName='Jonathan Schabowsky'
-              authorDescription='Sr. Architect, Office of the CTO at Solace'
-            />
-            <Testimonial
-              className='md:pl-10 lg:pl-16'
-              text='We’ve been focusing on event-driven APIs since 2014 and thank the AsyncAPI contributors every day for driving the community towards common standards.'
-              authorAvatar='/img/testimonials/eric-horesnyi.jpg'
-              authorName='Eric Horesnyi'
-              authorDescription='CEO at Streamdata.io'
-            />
-          </ul>
-        </Container>
       </main>
     </>
   );
diff --git a/public/locales/de/landing-page.json b/public/locales/de/landing-page.json
index ab75bdab207f..7e48a59f860a 100644
--- a/public/locales/de/landing-page.json
+++ b/public/locales/de/landing-page.json
@@ -5,41 +5,38 @@
         "body_pretext": "Open-Source-Tools zur einfachen Erstellung und Wartung Ihrer ereignisgesteuerten Architektur. Alle basieren auf der AsyncAPI-Spezifikation, der ",
         "body_boldtext": "Industriestandard",
         "body_posttext": " zur Definition asynchroner APIs.",
-        "docs_btn": "Lesen Sie die Dokumente",
-        "search_btn": "Schnellsuche...",
-        "slogan_text": "Wir sind stolz darauf, Teil der",
-        "slogan_link": "Linux Foundation"
+        "join_btn": "Join our Community",
+        "subscribe_btn": "Subscribe to our Newsletter",
+        "linuxFoundation_txt": "Part of the Linux Foundation"
     },
     "features": {
-        "title": "Warum AsyncAPI?",
-        "description": "Verbesserung des aktuellen Stands der ereignisgesteuerten Architekturen (EDA)",
-        
-        "specification.name": "Spezifikation",
-        "specification.description": "Ermöglicht es Ihnen, die Schnittstellen von asynchronen APIs zu definieren und ist protokollunabhängig.",
-        "specification.links.whyasyncapi-spec-documentation-link": "Dokumentation",
-
-        "document-apis.name": "APIs dokumentieren",
-        "document-apis.description": "Verwenden Sie unsere Tools, um Dokumentation auf Build-Ebene, auf einem Server und auf einem Client zu generieren.",
-        "document-apis.links.whyasyncapi-apis-htmltemplate-link": "HTML-Vorlage",
-        "document-apis.links.whyasyncapi-apis-reactcomponents-link": "React-Komponente",
-
-        "code-generation.name": "Code-Generierung",
-        "code-generation.description": "Generieren Sie Dokumentation, Code (TypeScript, Java, C# usw.) und mehr aus Ihren AsyncAPI-Dateien.",
-        "code-generation.links.whyasyncapi-generation-generator-link": "Generator",
-        "code-generation.links.whyasyncapi-generation-modelina-link": "Modelina",
-
-        "community.name": "Gemeinschaft",
-        "community.description": "Wir sind eine Gemeinschaft von großartigen Menschen, die leidenschaftlich an AsyncAPI und ereignisgesteuerten Architekturen interessiert sind.",
-        "community.links.whyasyncapi-community-slack-link": "Treten Sie unserem Slack bei",
-
-        "open-governance.links.whyasyncapi-governance-more-link": "Erfahren Sie mehr über Offene Governance",
-        "open-governance.links.whyasyncapi-governance-tsc-link": "TSC-Mitglieder",
-        "open-governance.name": "Offene Governance",
-        "open-governance.description": "Unser Open-Source-Projekt ist Teil der Linux Foundation und arbeitet unter einem Modell der offenen Governance.",
-
-        "much-more.name": "Und noch viel mehr...",
-        "much-more.description": "Wir haben viele verschiedene Tools und laden Sie ein, unsere Ideen zu erkunden und neue Ideen für AsyncAPI vorzuschlagen.",
-        "much-more.links.whyasyncapi-muchmore-github-link": "GitHub-Diskussionen anzeigen"
+        "title": "What You Can Use AsyncAPI For",
+        "description": "One of our main goals is to improve the current state of Event Driven Architecture (EDA)",
+        "costs-control": {
+            "name": "Costs Control",
+            "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs."
+        },
+        "publishing-api": {
+            "name": "Self-service for Publishing API",
+            "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs."
+        },
+        "code-generation": {
+            "name": "Code Generation",
+            "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs."
+        },
+        "infra-as-code": {
+            "name": "Infrastructure as Code",
+            "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs."
+        },
+        "governance-consistency": {
+            "name": "Governance & Consistency",
+            "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs."
+        },
+        "developer-portal": {
+            "name": "Developer Portal",
+            "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs."
+        },
+        "read-more": "Read More"
     },
     "adopters": {
         "title": "Von den weltweit führenden Marken übernommen",
@@ -57,6 +54,7 @@
         "meetingLink": "Erfahren Sie mehr über unsere Meetings."
     },
     "sponsors": {
+        "diamondTitle": "Diamond Sponsors",
         "platinumTitle": "Platin-Sponsoren",
         "goldTitle": "Gold-Sponsoren",
         "silverTitle": "Silber-Sponsoren",
diff --git a/public/locales/en/landing-page.json b/public/locales/en/landing-page.json
index ae14df4c0145..439b12acde20 100644
--- a/public/locales/en/landing-page.json
+++ b/public/locales/en/landing-page.json
@@ -5,41 +5,38 @@
         "body_pretext": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the ",
         "body_boldtext": "industry standard",
         "body_posttext": " for defining asynchronous APIs.",
-        "docs_btn": "Read the docs",
-        "search_btn": "Quick search...",
-        "slogan_text": "Proud to be part of the",
-        "slogan_link": "Linux Foundation"
+        "join_btn": "Join our Community",
+        "subscribe_btn": "Subscribe to our Newsletter",
+        "linuxFoundation_txt": "Part of the Linux Foundation"
     },
     "features": {
-        "title": "Why AsyncAPI?",
-        "description": "Improving the current state of Event-Driven Architectures (EDA)",
-
-        "specification.name": "Specification",
-        "specification.description": "Allows you to define the interfaces of asynchronous APIs and is protocol agnostic.",
-        "specification.links.whyasyncapi-spec-documentation-link": "Documentation",
-
-        "document-apis.name": "Document APIs",
-        "document-apis.description": "Use our tools to generate documentation at the build level, on a server, and on a client.",
-        "document-apis.links.whyasyncapi-apis-htmltemplate-link": "HTML Template",
-        "document-apis.links.whyasyncapi-apis-reactcomponents-link": "React Component",
-
-        "code-generation.name": "Code Generation",
-        "code-generation.description": "Generate documentation, Code (TypeScript, Java, C#, etc), and more out of your AsyncAPI files.",
-        "code-generation.links.whyasyncapi-generation-generator-link": "Generator",
-        "code-generation.links.whyasyncapi-generation-modelina-link": "Modelina",
-
-        "community.name": "Community",
-        "community.description": "We're a community of great people who are passionate about AsyncAPI and event-driven architectures.",
-        "community.links.whyasyncapi-community-slack-link": "Join our Slack",
-
-        "open-governance.name": "Open Governance",
-        "open-governance.description": "Our Open-Source project is part of Linux Foundation and works under an Open Governance model.",
-        "open-governance.links.whyasyncapi-governance-more-link": "Read more about Open Governance",
-        "open-governance.links.whyasyncapi-governance-tsc-link": "TSC Members",
-
-        "much-more.name": "And much more...",
-        "much-more.description": "We have many different tools and welcome you to explore our ideas and propose new ideas to AsyncAPI.",
-        "much-more.links.whyasyncapi-muchmore-github-link": "View GitHub Discussions"
+        "title": "What You Can Use AsyncAPI For",
+        "description": "One of our main goals is to improve the current state of Event Driven Architecture (EDA)",
+        "costs-control": {
+            "name": "Costs Control",
+            "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs."
+        },
+        "publishing-api": {
+            "name": "Self-service for Publishing API",
+            "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs."
+        },
+        "code-generation": {
+            "name": "Code Generation",
+            "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs."
+        },
+        "infra-as-code": {
+            "name": "Infrastructure as Code",
+            "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs."
+        },
+        "governance-consistency": {
+            "name": "Governance & Consistency",
+            "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs."
+        },
+        "developer-portal": {
+            "name": "Developer Portal",
+            "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs."
+        },
+        "read-more": "Read More"
     },
     "adopters": {
         "title": "Adopted by the world leading brands",
@@ -51,12 +48,13 @@
         "subtitle": "We're a community of great people who are passionate about AsyncAPI and event-driven architectures.",
         "slackCTATitle": "Join our Slack workspace",
         "slackCTADesc": "We welcome everyone to join our Slack workspace. If you have a question on how to use AsyncAPI, want to contribute, or simply want to say hello 👋, you're welcome to join us. We're nice people 🙂",
-        "slackCTABtn": "Join us!",
+        "slackCTABtn": "Join us on slack",
         "meetingTitle": "Join our public meetings",
         "meetingDesc": "AsyncAPI hosts different meetings every week. They are focused on different topics, sometimes purely technical and sometimes about community building. Pick one and join us!",
         "meetingLink": "Learn more about our meetings."
     },
     "sponsors": {
+        "diamondTitle": "Diamond Sponsors",
         "platinumTitle": "Platinum Sponsors",
         "goldTitle": "Gold Sponsors",
         "silverTitle": "Silver Sponsors",