add navbar and centered logo

Signed-off-by: Ansh Goyal <[email protected]>
asyncapi · Feb 6, 2024 · 4642b9a · 4642b9a
1 parent 867b943
commit 4642b9a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git 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
@@ -1,14 +1,25 @@
+import NavBar from '../components/navigation/NavBar'
+import Head from '../components/Head'
+import StickyNavbar from '../components/navigation/StickyNavbar'
 import { languageDetection } from "../lib/i18n";
 
 function HomePage() {
   const loader = 'img/loaders/loader.png'; // preloader image for the tools
   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>
+    </>
   )
 }