Feature/UI ux update (#3495)

* Fix navbar for consistent styling

* Update homepage with minimal design

* Fix docs page styling to be consistent with other docs websites

* Update activeBasePath

* Add footer

* Make files prettier

* Implement coderabbit suggestions

* "Implement coderabbit suggestions"

* Fix height issue of the hero section

* Make code prettier

* Update with coderabbit suggestion

* Update styling according to coderabbit

* Remove unused files

* Update with coderabbit suggestion

* Refactor suggestion by coderabbit

* Run prettier for updated component

docs/docusaurus.config.ts

@@ -62,7 +62,8 @@ const config: Config = {
         title: 'Talawa',
         logo: {
           alt: 'Talawa Logo',
-          src: 'img/icons/favicon_palisadoes.ico',
+          src: 'img/icons/logo.png',
+          href: 'https://docs.talawa.io/',
           className: 'LogoAnimation',
         },
         items: [
@@ -79,10 +80,10 @@ const config: Config = {
             target: '_self',
           },
           {
+            to: '/docs',
+            activeBasePath: 'docs',
             label: 'Admin Guide',
             position: 'left',
-            href: '/docs',
-            target: '_self',
           },
           {
             label: 'API Guide',
@@ -110,6 +111,62 @@ const config: Config = {
           },
         ],
       },
+      footer: {
+        style: 'dark',
+        links: [
+          {
+            title: 'Community',
+            items: [
+              {
+                label: 'Slack',
+                to: 'https://github.com/PalisadoesFoundation',
+                className: 'footer__icon footer__slack',
+              },
+              {
+                label: 'News',
+                to: 'https://www.palisadoes.org/news/',
+                className: 'footer__icon footer__news',
+              },
+              {
+                label: 'Contact Us',
+                to: 'https://www.palisadoes.org/contact/',
+                className: 'footer__icon footer__contact',
+              },
+            ],
+          },
+          {
+            title: 'Social Media',
+            items: [
+              {
+                label: ' Twitter',
+                to: 'https://twitter.com/palisadoesorg?lang=en',
+                className: 'footer__icon footer__twitter',
+              },
+              {
+                label: ' Facebook',
+                to: 'https://www.facebook.com/palisadoesproject/',
+                className: 'footer__icon footer__facebook',
+              },
+              {
+                label: ' Instagram',
+                to: 'https://www.instagram.com/palisadoes/?hl=en',
+                className: 'footer__icon footer__instagram',
+              },
+            ],
+          },
+          {
+            title: 'Development',
+            items: [
+              {
+                label: ' GitHub',
+                to: 'https://github.com/PalisadoesFoundation',
+                className: 'footer__icon footer__github',
+              },
+            ],
+          },
+        ],
+        copyright: `Copyright © ${new Date().getFullYear()} The Palisadoes Foundation, LLC. Built with Docusaurus.`,
+      },
       colorMode: {
         defaultMode: 'light',
         disableSwitch: false,

docs/src/components/layout/HeaderHero.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import HomeCallToAction from '../../utils/HomeCallToAction';
+
+function HeaderHero() {
+  return (
+    <section className="HeaderHero" role="banner">
+      <h1 className="title" id="main-title">
+        Talawa
+      </h1>
+      <h2 className="tagline" aria-describedby="main-title">
+        Admin Docs
+      </h2>
+      <p className="description">
+        Web based administrative dashboard for the Talawa mobile app
+      </p>
+      <div className="buttons" role="navigation" aria-label="Quick links">
+        <HomeCallToAction />
+      </div>
+    </section>
+  );
+}
+
+export default HeaderHero;