From ebed8a8dc4eda4f14590190204c3368529ba6aad Mon Sep 17 00:00:00 2001
From: Osama Jandali <osamajandaly@gmail.com>
Date: Thu, 12 Sep 2024 18:47:12 +0300
Subject: [PATCH] Update homepage and navbar

---
 docusaurus.config.js |  8 +++++--
 src/pages/index.tsx  | 56 +++++++++++++++++++++++++-------------------
 2 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 66417681..2ab67e4d 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -66,8 +66,7 @@ const config = {
         },
         items: [
           {
-            type: "docSidebar",
-            sidebarId: "tutorialSidebar",
+            to: "/intro",
             position: "left",
             label: "Documentation",
           },
@@ -76,6 +75,11 @@ const config = {
             position: "left",
             label: "Plugins",
           },
+          {
+            to: "/users/quick-start",
+            position: "left",
+            label: "Quick Start",
+          },
           {
             href: "https://github.com/Green-Software-Foundation/if",
             position: "right",
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 8c927eed..e8ec960b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,42 +1,50 @@
-import React from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import Hackathon from '@site/src/components/Hackathon';
+import React from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import Hackathon from "@site/src/components/Hackathon";
 
-import styles from './index.module.css';
+import styles from "./index.module.css";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero', styles.heroBanner)}>
+    <header className={clsx("hero", styles.heroBanner)}>
       <div className="container">
         <div className={styles.heroInner}>
-          <h1 className={clsx('hero__title', styles.heroTitle)}>{siteConfig.title}</h1>
-          <p className="hero__subtitle">Impact Framework is a way to compute and report the environmental impacts of software applications accurately. </p>
-          <div className={styles.heroVideo}>
-            <iframe width="560" height="315" src="https://www.youtube.com/embed/msk-55owTeM?si=VyZNWzFzAU4uEiD5" title="Introducing Impact Framework - opensource tool to measure software by the Green Software Foundation" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
-          </div>
+          <h1 className={clsx("hero__title", styles.heroTitle)}>
+            {siteConfig.title}
+          </h1>
+          <p className="hero__subtitle">
+            The solution to opaque carbon reporting{" "}
+          </p>
           <div className={styles.buttons}>
-            <Link
-              className="button button--primary button--md"
-              to="/intro"
-            >
-              Read The Docs
+            <Link className="button button--primary button--md" to="https://grnsft.org/if/become-a-watcher">
+            Become a watcher
             </Link>
             <Link
-              className="button button--primary button--md"
-              to="https://explorer.if.greensoftware.foundation/"
+              className="button button--secondary button--md"
+              to="/users/quick-start"
             >
-              Explore IF Plugins
+              Quick start
             </Link>
           </div>
-
+          <div className={styles.heroVideo}>
+            <iframe
+              width="560"
+              height="315"
+              src="https://www.youtube.com/embed/msk-55owTeM?si=VyZNWzFzAU4uEiD5"
+              title="Introducing Impact Framework - opensource tool to measure software by the Green Software Foundation"
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              allowFullScreen
+            ></iframe>
+          </div>
         </div>
       </div>
-    </header >
+    </header>
   );
 }