From 22da891a6bd0ecc1bc9913819b0f8232119b5485 Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Fri, 8 Sep 2023 21:49:28 +0530
Subject: [PATCH 01/14] add custom i18n link

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 components/link.js                  |  9 +++++++++
 components/navigation/MenuBlocks.js |  5 +++--
 lib/i18nPaths.js                    | 10 ++++++++++
 3 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 lib/i18nPaths.js

diff --git a/components/link.js b/components/link.js
index de49d3b1895d..62619593cd61 100644
--- a/components/link.js
+++ b/components/link.js
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { defaultLanguage, languages } from "../lib/i18n";
+import i18nPaths from "../lib/i18nPaths";
 
 const LinkComponent = ({ children, locale, ...props }) => {
   const router = useRouter();
@@ -13,6 +14,14 @@ const LinkComponent = ({ children, locale, ...props }) => {
 
   let href = props.href || pathname;
 
+  if ((props.href && i18nPaths[language] && !i18nPaths[language].includes(href)) || href.includes("http", 0)) {
+    return (
+      <Link href={href} passHref>
+        {children}
+      </Link>
+    );
+  }
+
   if (locale) {
     if (props.href) {
       href = `/${locale}${href}`;
diff --git a/components/navigation/MenuBlocks.js b/components/navigation/MenuBlocks.js
index 8125bf9041c8..c2c1e3eb786e 100644
--- a/components/navigation/MenuBlocks.js
+++ b/components/navigation/MenuBlocks.js
@@ -1,3 +1,4 @@
+import LinkComponent from '../link';
 import Paragraph from '../typography/Paragraph';
 import Label from './Label'
 import Link from 'next/link'
@@ -11,7 +12,7 @@ export default function MenuBlocks ({
         items.map((item, index) => {
           const isExternalHref = item.href && item.href.startsWith('http');
           return (
-            <Link href={item.comingSoon ? '' : item.href} key={index}>
+            <LinkComponent href={item.comingSoon ? '' : item.href} key={index}>
               <a data-testid="MenuBlocks-Link"
                 className="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150" 
                 target={isExternalHref ? "_blank" : undefined} 
@@ -29,7 +30,7 @@ export default function MenuBlocks ({
                   </Paragraph>
                 </div>
               </a>
-            </Link>
+            </LinkComponent>
           )
         })
       }
diff --git a/lib/i18nPaths.js b/lib/i18nPaths.js
new file mode 100644
index 000000000000..b527ee54881f
--- /dev/null
+++ b/lib/i18nPaths.js
@@ -0,0 +1,10 @@
+const i18nPaths = {
+    en: [
+        "/tools/cli"
+    ],
+    de: [
+        "/tools/cli"
+    ]
+};
+
+export default i18nPaths;
\ No newline at end of file

From b86965a9ac3ed5cf2f9a71b2650be334fecad4b0 Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Sat, 9 Sep 2023 12:14:25 +0530
Subject: [PATCH 02/14] fix link.js

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 components/link.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/components/link.js b/components/link.js
index 62619593cd61..330957298c4b 100644
--- a/components/link.js
+++ b/components/link.js
@@ -5,6 +5,15 @@ import i18nPaths from "../lib/i18nPaths";
 
 const LinkComponent = ({ children, locale, ...props }) => {
   const router = useRouter();
+
+  if (!router) {
+    return (
+      <Link href={props.href} passHref>
+        {children}
+      </Link>
+    );
+  }
+
   const { pathname, query, asPath } = router;
 
   // Detect current language

From 4bb2f3b7124588bdc123e057e83955e9c1660bbf Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Thu, 28 Sep 2023 17:36:42 +0530
Subject: [PATCH 03/14] Enable i18n

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 components/navigation/NavBar.js | 11 +++++------
 pages/index.js                  |  4 ++--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index ae30f472933c..bb4fe9de1de2 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -72,10 +72,9 @@ export default function NavBar({
     router.push(href);
   };
 
-  // To be enabled on the last PR
-  // useEffect(() => {
-  //   changeLanguage(browserLanguageDetector(), false);
-  // }, []);
+  useEffect(() => {
+    changeLanguage(browserLanguageDetector(), false);
+  }, []);
 
   function outsideClick(menu) {
     if (open !== menu) return;
@@ -180,14 +179,14 @@ export default function NavBar({
             </SearchButton>
 
             {/* // Language Picker Component */}
-            {/* <LanguageSelect
+            <LanguageSelect
               options={uniqueLangs}
               onChange={(value) => {
                 changeLanguage(value.toLowerCase(), true);
               }}
               className=""
               selected={i18n.language.toLocaleUpperCase()}
-            /> */}
+            />
 
             <GithubButton text="Star on GitHub" href="https://github.com/asyncapi/spec" className="py-2 ml-2" inNav="true" />
           </div>
diff --git a/pages/index.js b/pages/index.js
index 67f9185d4923..0069a28a90fd 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -27,8 +27,8 @@ import NewsroomSection from '../components/newsroom/NewsroomSection'
 import { languageDetection } from "../lib/i18n";
 
 function HomePage() {
-  //To be enabled in a future PR
-  //languageDetection();
+  
+  languageDetection();
   return (
     <>
       <Head />

From 13a375ec42aa83b6c3eabc43fa2f7993a9efa3ca Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Thu, 28 Sep 2023 17:47:38 +0530
Subject: [PATCH 04/14] Fix type error

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 components/navigation/NavBar.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index bb4fe9de1de2..c627b9e344f1 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -41,7 +41,7 @@ export default function NavBar({
   const changeLanguage = async (locale, langPicker) => {
 
     // Verifies if the language change is from langPicker or the browser-api
-    if(langPicker){
+    if (langPicker) {
       localStorage.setItem('i18nLang', locale);
     }
 
@@ -185,7 +185,12 @@ export default function NavBar({
                 changeLanguage(value.toLowerCase(), true);
               }}
               className=""
-              selected={i18n.language.toLocaleUpperCase()}
+              selected={() => {
+                if (i18n.language) {
+                  return i18n.language.toLocaleUpperCase();
+                }
+                return "EN";
+              }}
             />
 
             <GithubButton text="Star on GitHub" href="https://github.com/asyncapi/spec" className="py-2 ml-2" inNav="true" />

From ba9e97aa0da0d51c0fa6b3f83b147dcd3ee5345d Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Mon, 9 Oct 2023 20:45:27 +0530
Subject: [PATCH 05/14] change select value

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 components/navigation/NavBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index c627b9e344f1..e9449ca89f5f 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -185,7 +185,7 @@ export default function NavBar({
                 changeLanguage(value.toLowerCase(), true);
               }}
               className=""
-              selected={() => {
+              value={() => {
                 if (i18n.language) {
                   return i18n.language.toLocaleUpperCase();
                 }

From c6d53c87307bc64932c7e686d6607792558379f2 Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Wed, 27 Dec 2023 09:10:52 +0530
Subject: [PATCH 06/14] make changes to LanguageSelect

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 components/languageSelector/LanguageSelect.js |  2 +-
 components/navigation/NavBar.js               | 14 +++++---------
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/components/languageSelector/LanguageSelect.js b/components/languageSelector/LanguageSelect.js
index b8d931a7d6f2..d9ba4f549536 100644
--- a/components/languageSelector/LanguageSelect.js
+++ b/components/languageSelector/LanguageSelect.js
@@ -12,7 +12,7 @@ export default function LanguageSelect({
             value={selected}
         >
             {options.map((option, index) => (
-                <option key={index} selected={option.value === selected} value={option.value} data-testid="Option-form">
+                <option key={index} value={option.value} data-testid="Option-form">
                     {option.text}
                 </option>
             ))}
diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index 3e2d5e665000..96695cced249 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -22,9 +22,10 @@ import {
 import browserLanguageDetector from "../../lib/browserLanguageDetector";
 
 const isMobile = isMobileDevice();
-const uniqueLangs = [...new Set(["EN", "DE"])].map((repo) => ({
-  key: repo,
-  text: repo,
+const uniqueLangs = ["EN", "DE"].map((lang) => ({
+  key: lang,
+  text: lang,
+  value: lang
 }));
 
 export default function NavBar({
@@ -184,12 +185,7 @@ export default function NavBar({
                 changeLanguage(value.toLowerCase(), true);
               }}
               className=""
-              value={() => {
-                if (i18n.language) {
-                  return i18n.language.toLocaleUpperCase();
-                }
-                return "EN";
-              }}
+              selected={i18n.language ? i18n.language.toUpperCase() : "EN"}
             />
 
             <GithubButton text="Star on GitHub" href="https://github.com/asyncapi/spec" className="py-2 ml-2" inNav="true" />

From c308f235bd810820c874df1fa6deeae29cdaeed7 Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Fri, 2 Feb 2024 23:42:04 +0530
Subject: [PATCH 07/14] add changes

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 components/navigation/NavBar.js | 20 +++++++++++++++-----
 lib/i18nPaths.js                |  2 ++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index 96695cced249..be7f3bc44e87 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -20,13 +20,9 @@ import {
   useTranslation,
 } from "../../lib/i18n";
 import browserLanguageDetector from "../../lib/browserLanguageDetector";
+import i18nPaths from "../../lib/i18nPaths";
 
 const isMobile = isMobileDevice();
-const uniqueLangs = ["EN", "DE"].map((lang) => ({
-  key: lang,
-  text: lang,
-  value: lang
-}));
 
 export default function NavBar({
   className = '',
@@ -38,6 +34,20 @@ export default function NavBar({
   const [mobileMenuOpen, setMobileMenuOpen] = useState();
   const { i18n } = useTranslation();
 
+  const getUniqueLangs = () => {
+    let pathnameWithoutLocale = pathname;
+    if (pathname && pathname.includes("/[lang]")) {
+      pathnameWithoutLocale = pathname.replace("/[lang]", "");
+    }
+    let uniqueLangs = Object.keys(i18nPaths).filter(lang => i18nPaths[lang].includes(pathnameWithoutLocale)).map(lang => lang.toUpperCase());
+    return uniqueLangs.length === 0 ? ["EN"] : uniqueLangs;
+  }
+  const uniqueLangs = getUniqueLangs().map((lang) => ({
+    key: lang,
+    text: lang,
+    value: lang
+  }));
+
   const changeLanguage = async (locale, langPicker) => {
 
     // Verifies if the language change is from langPicker or the browser-api
diff --git a/lib/i18nPaths.js b/lib/i18nPaths.js
index b527ee54881f..138b598cea6f 100644
--- a/lib/i18nPaths.js
+++ b/lib/i18nPaths.js
@@ -1,8 +1,10 @@
 const i18nPaths = {
     en: [
+        "", //Homepage Route
         "/tools/cli"
     ],
     de: [
+        "", //Homepage Route
         "/tools/cli"
     ]
 };

From fd28f053e7b9ccda06173b059e5590aae5995a97 Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Sun, 4 Feb 2024 11:34:08 +0530
Subject: [PATCH 08/14] add comments and fix router

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 components/link.js                  |  10 +-
 components/navigation/MenuBlocks.js |   1 -
 components/navigation/NavBar.js     |   8 +
 pages/index.js                      | 261 +---------------------------
 4 files changed, 24 insertions(+), 256 deletions(-)

diff --git a/components/link.js b/components/link.js
index 330957298c4b..053277db8c98 100644
--- a/components/link.js
+++ b/components/link.js
@@ -6,6 +6,7 @@ import i18nPaths from "../lib/i18nPaths";
 const LinkComponent = ({ children, locale, ...props }) => {
   const router = useRouter();
 
+  // If there is no router available (e.g., during server-side rendering & cypress tests), render a standard Link
   if (!router) {
     return (
       <Link href={props.href} passHref>
@@ -16,13 +17,16 @@ const LinkComponent = ({ children, locale, ...props }) => {
 
   const { pathname, query, asPath } = router;
 
-  // Detect current language
+  // Detect current language based on the path or query parameter
   const slug = asPath.split("/")[1];
   const langSlug = languages.includes(slug) && slug;
   const language = query.lang || langSlug || defaultLanguage;
 
   let href = props.href || pathname;
 
+  /* 
+  If explicit href is provided, and the language-specific paths for the current language do not include the href, or if the href starts with "http", render a standard Link 
+  */
   if ((props.href && i18nPaths[language] && !i18nPaths[language].includes(href)) || href.includes("http", 0)) {
     return (
       <Link href={href} passHref>
@@ -31,10 +35,13 @@ const LinkComponent = ({ children, locale, ...props }) => {
     );
   }
 
+  // If a locale is provided, update the href with the locale
   if (locale) {
     if (props.href) {
       href = `/${locale}${href}`;
     } else {
+      // If the current path starts with "/404", update href to be the root path with the locale
+      // Otherwise, replace "[lang]" placeholder with the locale
       if (pathname.startsWith("/404")) {
         href = `/${locale}`;
       } else {
@@ -42,6 +49,7 @@ const LinkComponent = ({ children, locale, ...props }) => {
       }
     }
   } else {
+    // If no locale is provided, update the href with the current language or keep it as is
     if (language) {
       href = `/${language}${href}`;
     } else {
diff --git a/components/navigation/MenuBlocks.js b/components/navigation/MenuBlocks.js
index 02689ac2f049..f9caa326820a 100644
--- a/components/navigation/MenuBlocks.js
+++ b/components/navigation/MenuBlocks.js
@@ -1,7 +1,6 @@
 import LinkComponent from '../link';
 import Paragraph from '../typography/Paragraph';
 import Label from './Label'
-import Link from 'next/link'
 import { useRouter } from 'next/router';
 
 
diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index be7f3bc44e87..670fdfa639d6 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -36,10 +36,16 @@ export default function NavBar({
 
   const getUniqueLangs = () => {
     let pathnameWithoutLocale = pathname;
+
+    // Check if the pathname includes "/[lang]", if so, replace it with an empty string
     if (pathname && pathname.includes("/[lang]")) {
       pathnameWithoutLocale = pathname.replace("/[lang]", "");
     }
+
+    // Filter unique languages based on i18nPaths that include the modified pathnameWithoutLocale
     let uniqueLangs = Object.keys(i18nPaths).filter(lang => i18nPaths[lang].includes(pathnameWithoutLocale)).map(lang => lang.toUpperCase());
+
+    // If no unique languages are found, default to ["EN"]
     return uniqueLangs.length === 0 ? ["EN"] : uniqueLangs;
   }
   const uniqueLangs = getUniqueLangs().map((lang) => ({
@@ -82,6 +88,8 @@ export default function NavBar({
     router.push(href);
   };
 
+  // First param: Passes the language based on the browser's defalt language
+  // Second param: Prevents the language change from being saved in the local storage
   useEffect(() => {
     changeLanguage(browserLanguageDetector(), false);
   }, []);
diff --git a/pages/index.js b/pages/index.js
index 0069a28a90fd..a16734288475 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,262 +1,15 @@
-import Container from '../components/layout/Container'
-import NavBar from '../components/navigation/NavBar'
-import Hero from '../components/Hero'
-import NewsletterSubscribe from '../components/NewsletterSubscribe'
-import Sponsors from '../components/sponsors/Sponsors'
-import Head from '../components/Head'
-import Slack from '../components/slack'
-import Button from '../components/buttons/Button'
-import Calendar from '../components/Calendar'
-import AdidasLogo from '../components/logos/Adidas'
-import AxwayLogo from '../components/logos/Axway'
-import SlackLogo from '../components/logos/Slack'
-import SalesforceLogo from '../components/logos/Salesforce'
-import SapLogo from '../components/logos/SAP'
-import Testimonial from '../components/Testimonial'
-import Heading from '../components/typography/Heading'
-import Paragraph from '../components/typography/Paragraph'
-import TextLink from '../components/typography/TextLink'
-import GoldSponsors from '../components/sponsors/GoldSponsors'
-import SilverSponsors from '../components/sponsors/SilverSponsors'
-import SupportUs from '../components/SupportUs/SupportUs'
-import StickyNavbar from '../components/navigation/StickyNavbar'
-import GoogleCalendarButton from '../components/buttons/GoogleCalendarButton';
-import ICSFileButton from '../components/buttons/ICSFileButton';
-import SubscribeButton from '../components/buttons/SubscribeButton';
-import NewsroomSection from '../components/newsroom/NewsroomSection'
+import { useState } from "react";
 import { languageDetection } from "../lib/i18n";
 
 function HomePage() {
-  
+  const loader = 'img/loaders/loader.png'; // preloader image for the tools
   languageDetection();
-  return (
-    <>
-      <Head />
-      <StickyNavbar>
-        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-      </StickyNavbar>
-
-      <main id="main-content" className="scroll-mt-5">
-        <Container wide>
-          <Hero className="mb-24" />
-        </Container>
-
-        <Container className="text-center pb-12" wide as="section">
-          <Heading
-            level="h3"
-            typeStyle="heading-lg"
-            className="mb-4"
-          >
-            Adopted by the world leading brands
-          </Heading>
-          <Paragraph className="mt-2 mb-20 md:w-2/3 md:mx-auto">
-            These brands are already using AsyncAPI in production. Is your company using AsyncAPI and wants to be included in this list?
-            <TextLink href="https://github.com/asyncapi/website/issues/new" target="_blank">
-              Let us know here!
-            </TextLink>
-          </Paragraph>
-          <ul className="md:grid md:gap-8 md:grid-cols-2 lg:grid-cols-5">
-            <li className="justify-center flex">
-              <AdidasLogo className="h-8 text-gray-400 hover:text-black" />
-            </li>
-            <li className="justify-center flex">
-              <AxwayLogo className="mt-12 md:-mt-5 lg:-mt-5 h-14 text-gray-400 group hover:text-black" />
-            </li>
-            <li className="justify-center flex">
-              <SlackLogo className="mt-12 md:mt-2 lg:-mt-1 h-10 text-gray-400 hover:text-black group" />
-            </li>
-            <li className="justify-center flex">
-              <SalesforceLogo className="mt-12 md:mt-2 lg:-mt-4 h-16 text-gray-400" />
-            </li>
-            <li className="justify-center flex">
-              <SapLogo className="mt-12 md:mt-2 lg:-mt-2 h-12 text-gray-400" />
-            </li>
-          </ul>
-        </Container>
-
-        <div className="bg-dark py-12 mt-8">
-          <Container wide as="section">
-            <NewsletterSubscribe dark />
-          </Container>
-        </div>
-
-        <Container className="text-center py-12" wide as="section">
-          <Heading
-            level="h3"
-            typeStyle="heading-lg"
-            className="mb-4"
-          >
-            Join our great community!
-          </Heading>
-          <Paragraph className="mt-2 md:w-1/2 md:mx-auto">
-            We're a community of great people who are passionate about AsyncAPI and event-driven architectures.
-          </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:text-left lg:max-w-xl lg:w-1/2 lg:ml-12">
-                  <div className="mt-5">
-                    <Heading level="h4" typeStyle="heading-md-semibold">
-                      Join our Slack workspace
-                    </Heading>
-                    <Paragraph className="mt-2">
-                      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 👋 &nbsp;you're welcome to join us. We're nice people 🙂
-                    </Paragraph>
-                  </div>
-                  <div className="mt-5 flex justify-center lg:justify-start">
-                    <Button className="w-full md:w-auto" text="Join us!" href="/slack-invite" />
-                  </div>
-                </section>
-              </div>
-
-              <div className="mt-12 lg:flex lg:flex-row-reverse">
-                <section className="mt-10 lg:mt-0 lg:flex-1">
-                  <Calendar size="2" className="float-left" />
-                </section>
-                <section className="lg:text-left lg:max-w-xl lg:mr-12">
-                  <div className="mt-5 lg:mr-12">
-                    <Heading level="h3" typeStyle="heading-md-semibold">
-                      Join our public meetings
-                    </Heading>
-                    <Paragraph className="mt-2">
-                      AsyncAPI hosts different meetings every week. They are focused on different topic, sometimes purely technical and sometimes about community building. Pick one and join us!
-
-                      <TextLink href="/community/meetings">
-                        Learn more about our meetings.
-                      </TextLink>
-                    </Paragraph>
-                    <ul className="mt-5 md:flex justify-center">
-                      <li>
-                        <GoogleCalendarButton href="https://calendar.google.com/calendar/u/3?cid=Y19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t" />
-                      </li>
-                      <li>
-                        <SubscribeButton
-                          href="/community/meetings"
-                          className="mt-2 md:mt-0 md:ml-2"
-                        />
-                      </li>
-                      <li>
-                        <ICSFileButton
-                          href="https://calendar.google.com/calendar/ical/c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com/public/basic.ics"
-                          className="mt-2 md:mt-0 md:ml-2"
-                        />
-                      </li>
-                    </ul>
-                  </div>
-                </section>
-              </div>
-            </Container>
-            <Container wide>
-              <NewsroomSection />
-            </Container>
-          </div>
 
-        </Container>
-
-
-        <section className="pb-20" role="contentinfo" aria-label='Our Sponsors'>
-          <Container className="text-center pb-6" wide as="section">
-            <Heading
-              level="h3"
-              typeStyle="heading-lg"
-              className="mb-4"
-            >
-              Platinum Sponsors
-            </Heading>
-            <Sponsors className="mt-4" showSupportBanner={ false } />
-          </Container>
-
-          <Container className="text-center pb-6" wide as="section">
-            <Heading
-              level="h3"
-              typeStyle="heading-lg"
-              className="mb-4"
-            >
-              Gold Sponsors
-            </Heading>
-            <GoldSponsors className="mt-4" showSupportBanner={ false } />
-          </Container>
-
-          <Container className="text-center pyb-6" wide as="section">
-            <Heading
-              level="h3"
-              typeStyle="heading-lg"
-              className="mb-4"
-            >
-              Silver Sponsors
-            </Heading>
-            <SilverSponsors className="mt-4" showSupportBanner={ false } />
-          </Container>
-
-
-          <Container className="text-center py-6" wide as="section">
-            <Heading
-              level="h3"
-              typeStyle="heading-md-semibold"
-              className="mb-4"
-            >
-              Want to Sponsor Us?
-            </Heading>
-            <Paragraph className="mt-2 md:w-1/2 md:mx-auto">
-              These great organizations are already supporting AsyncAPI. Want to become a sponsor?
-              <TextLink href="https://opencollective.com/asyncapi" target="_blank">
-                Support us!
-              </TextLink>
-            </Paragraph>
-          </Container>
-        </section>
-        <Container className="text-center py-6 pb-20" wide>
-          <Heading level="h3" typeStyle="heading-lg" className="mb-4">
-            Supported by
-          </Heading>
-          <Paragraph className="mt-3 max-w-2xl mx-auto sm:mt-4 pb-4">
-            The following companies support us by letting us use their products for free. Interested in supporting us too?
-            <TextLink href="mailto:info@asyncapi.io" target="_blank">
-              Email us
-            </TextLink> for more info.
-          </Paragraph>
-          <SupportUs className="mt-4" showSupportBanner={ false } />
-        </Container>
-        <Container className="text-center pb-20 mt-8" wide as="section">
-          <Heading level="h3" typeStyle="heading-lg" className="mb-4">
-            What the experts are saying
-          </Heading>
-          <ul className="max-w-screen-xl mx-auto 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 everyday for driving the community towards common standards."
-              authorAvatar="/img/testimonials/eric-horesnyi.jpg"
-              authorName="Eric Horesnyi"
-              authorDescription="CEO at Streamdata.io"
-            />
-          </ul>
-        </Container>
-      </main>
-    </>
+  return (
+    <div className="flex animate-pulse w-fit mx-auto my-24 gap-4 text-black">
+      <img src={loader} className="mx-auto w-16" />
+      <div className="text-xl my-auto">Loading...</div>
+    </div>
   )
 }
 

From 64accd065b738f0cfba5d1d081d0661241139978 Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Sun, 4 Feb 2024 11:35:46 +0530
Subject: [PATCH 09/14] remove unused import

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 pages/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/index.js b/pages/index.js
index a16734288475..546c7345025b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { languageDetection } from "../lib/i18n";
 
 function HomePage() {

From c3d72f0d05a8a6df8c87e0189f87855bb48fa476 Mon Sep 17 00:00:00 2001
From: Akshat Nema <akshat.nema@postman.com@Akshats-MacBook-Pro.local>
Date: Sun, 4 Feb 2024 13:29:47 +0530
Subject: [PATCH 10/14] updated js doc comments

---
 components/navigation/NavBar.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index 670fdfa639d6..73b42a1263a3 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -91,6 +91,10 @@ export default function NavBar({
   // First param: Passes the language based on the browser's defalt language
   // Second param: Prevents the language change from being saved in the local storage
   useEffect(() => {
+    /**
+     * First param: Passes the language based on the browser's default language
+     * Second param: Prevents the language change from being saved in the local storage
+     */
     changeLanguage(browserLanguageDetector(), false);
   }, []);
 

From c64e922135a28b3682cb9f5319878ee073ad629e Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Sun, 4 Feb 2024 14:38:14 +0530
Subject: [PATCH 11/14] update jsdoc comments

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 components/navigation/NavBar.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index 670fdfa639d6..617a8de9865a 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -34,6 +34,11 @@ export default function NavBar({
   const [mobileMenuOpen, setMobileMenuOpen] = useState();
   const { i18n } = useTranslation();
 
+  /**
+ * Retrieves unique language options based on the current path and i18nPaths configuration.
+ *
+ * @returns {string[]} - An array of unique language options in uppercase.
+ */
   const getUniqueLangs = () => {
     let pathnameWithoutLocale = pathname;
 
@@ -48,12 +53,23 @@ export default function NavBar({
     // If no unique languages are found, default to ["EN"]
     return uniqueLangs.length === 0 ? ["EN"] : uniqueLangs;
   }
+
   const uniqueLangs = getUniqueLangs().map((lang) => ({
     key: lang,
     text: lang,
     value: lang
   }));
 
+  /**
+ * Changes the language and updates the URL accordingly.
+ *
+ * @async
+ * @param {string} locale - The new locale/language to set.
+ * @param {boolean} langPicker - Indicates whether the change is from the language picker.
+ *                              If true, stores the language in local storage.
+ * @returns {Promise<void>} - A promise representing the completion of the language change.
+ * @throws {Error} - If an error occurs during the language change process.
+ */
   const changeLanguage = async (locale, langPicker) => {
 
     // Verifies if the language change is from langPicker or the browser-api
@@ -88,8 +104,12 @@ export default function NavBar({
     router.push(href);
   };
 
-  // First param: Passes the language based on the browser's defalt language
-  // Second param: Prevents the language change from being saved in the local storage
+  /*
+  useEffect to set the initial language on component mount
+  Detects the user's preferred language using browserLanguageDetector 
+  and updates the language without affecting the localStorage.
+  This ensures the components renders with the correct initial language.
+  */
   useEffect(() => {
     changeLanguage(browserLanguageDetector(), false);
   }, []);

From 4642b9a4148ec209ab82eff415b47699a7ce0446 Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Tue, 6 Feb 2024 18:25:42 +0530
Subject: [PATCH 12/14] add navbar and centered logo

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 components/navigation/NavBar.js | 16 ++++++----------
 pages/index.js                  | 19 +++++++++++++++----
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index fe68b8c3cd4f..17423d6f4386 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -104,17 +104,13 @@ export default function NavBar({
     router.push(href);
   };
 
-  /*
-  useEffect to set the initial language on component mount
-  Detects the user's preferred language using browserLanguageDetector 
-  and updates the language without affecting the localStorage.
-  This ensures the components renders with the correct initial language.
-  */
+  /**
+   * useEffect to set the initial language on component mount
+   * Detects the user's preferred language using browserLanguageDetector 
+   * and updates the language without affecting the localStorage.
+   * This ensures the components renders with the correct initial language.
+   */
   useEffect(() => {
-    /**
-     * First param: Passes the language based on the browser's default language
-     * Second param: Prevents the language change from being saved in the local storage
-     */
     changeLanguage(browserLanguageDetector(), false);
   }, []);
 
diff --git a/pages/index.js b/pages/index.js
index 546c7345025b..c5bc7fed2b39 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,3 +1,6 @@
+import NavBar from '../components/navigation/NavBar'
+import Head from '../components/Head'
+import StickyNavbar from '../components/navigation/StickyNavbar'
 import { languageDetection } from "../lib/i18n";
 
 function HomePage() {
@@ -5,10 +8,18 @@ function HomePage() {
   languageDetection();
 
   return (
-    <div className="flex animate-pulse w-fit mx-auto my-24 gap-4 text-black">
-      <img src={loader} className="mx-auto w-16" />
-      <div className="text-xl my-auto">Loading...</div>
-    </div>
+    <>
+      <Head />
+      <StickyNavbar>
+        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
+      </StickyNavbar>
+      <div className="h-screen">
+        <div className="flex animate-pulse w-fit mx-auto my-60 gap-4 text-black">
+          <img src={loader} className="mx-auto w-16" />
+          <div className="text-xl my-auto">Loading...</div>
+        </div>
+      </div>
+    </>
   )
 }
 

From 2f07331fdd3a20caeaa89dd04c5af68c142db719 Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Tue, 6 Feb 2024 22:34:53 +0530
Subject: [PATCH 13/14] add infinite loop fix

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 components/navigation/NavBar.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index 17423d6f4386..bf7079f845f6 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -104,16 +104,6 @@ export default function NavBar({
     router.push(href);
   };
 
-  /**
-   * useEffect to set the initial language on component mount
-   * Detects the user's preferred language using browserLanguageDetector 
-   * and updates the language without affecting the localStorage.
-   * This ensures the components renders with the correct initial language.
-   */
-  useEffect(() => {
-    changeLanguage(browserLanguageDetector(), false);
-  }, []);
-
   function outsideClick(menu) {
     if (open !== menu) return;
     setOpen(null);

From ca1e82b70cc99ce75b3595c4433cb80a6f641991 Mon Sep 17 00:00:00 2001
From: akshatnema <akshatnema.school@gmail.com>
Date: Wed, 7 Feb 2024 17:09:44 +0530
Subject: [PATCH 14/14] update UI of LanguageSelect

---
 components/languageSelector/LanguageSelect.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/languageSelector/LanguageSelect.js b/components/languageSelector/LanguageSelect.js
index d9ba4f549536..99d8a68babaf 100644
--- a/components/languageSelector/LanguageSelect.js
+++ b/components/languageSelector/LanguageSelect.js
@@ -8,7 +8,7 @@ export default function LanguageSelect({
     return (
         <select data-testid="Select-form"
             onChange={(ev) => onChange(ev.target.value)}
-            className={twMerge(`form-select h-full py-0 px-3 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500 ${className}`)}
+            className={twMerge(`form-select h-full py-0 px-3 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black ${className}`)}
             value={selected}
         >
             {options.map((option, index) => (