Sync with fork

package.json

@@ -20,7 +20,7 @@
     "@types/react-dom": "18.2.17",
     "eslint": "8.54.0",
     "eslint-config-next": "14.0.3",
-    "next": "^13.0.0",
+    "next": "^14.0.0",
     "next-themes": "^0.2.1",
     "prettier": "^3.1.0",
     "react": "18.2.0",

src/app/ThemeSwitcher.tsx

@@ -1,16 +1,16 @@
-"use client"
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
-import SwitchToLight from "@/components/Navbar/DarkmodeToggle/SwitchToLightIcon";
-import SwitchToDark from "@/components/Navbar/DarkmodeToggle/SwitchToDarkIcon";
+'use client'
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+import SwitchToLight from '@/components/Navbar/DarkmodeToggle/SwitchToLightIcon'
+import SwitchToDark from '@/components/Navbar/DarkmodeToggle/SwitchToDarkIcon'
 
 const ThemeSwitcher = () => {
-  const { theme, setTheme } = useTheme();
+  const { theme, setTheme } = useTheme()
   const [mounted, setMounted] = useState(false)
 
-  useEffect(() => setMounted(true), []);
+  useEffect(() => setMounted(true), [])
 
-  if(!mounted) {
+  if (!mounted) {
     return (
       <div>
         <SwitchToLight />
@@ -20,10 +20,12 @@ const ThemeSwitcher = () => {
   }
 
   return (
-    <div onClick={() => theme === 'light' ? setTheme('dark') : setTheme('light')}>
+    <div
+      onClick={() => (theme === 'light' ? setTheme('dark') : setTheme('light'))}
+    >
       <SwitchToLight />
       <SwitchToDark />
     </div>
   )
-  };
-  export default ThemeSwitcher;
+}
+export default ThemeSwitcher

src/app/page.tsx

@@ -8,30 +8,33 @@ import FAQSection from '@/components/FAQSection/FAQSection'
 import SupportSection from '@/components/SuipportSection/SupportSection'
 import HelpOutSection from '@/components/HelpOutSection/HelpOutSection'
 import BlogSection from '@/components/BlogSection/BlogSection'
+import Footer from '@/components/Footer/Footer'
 
 export default function Home() {
   return (
     <>
       <div className={style.top__down__red__gradient}>
         <Navbar />
         <div className="container">
-          <HeroSection />
+          <section className="my-xxl">
+            <HeroSection />
+          </section>
         </div>
       </div>
       <div className="container">
-        <section>
+        <section className="my-xxl">
           <h2 className="main__title__h2">What are we trying to do?</h2>
           <CardGroup cards={cardGroupItems} />
         </section>
-        <section>
+        <section className="mb-xxl">
           <BaoSection />
         </section>
       </div>
-      <section className={'pb-0'}>
+      <section className="pb-0">
         <FAQSection />
       </section>
       <div className="container">
-        <section>
+        <section className="mb-xxl">
           <SupportSection />
         </section>
       </div>
@@ -41,12 +44,12 @@ export default function Home() {
         </section>
       </div>
       <div className="container">
-        <section>
+        <section className="my-xxl">
           <BlogSection />
         </section>
       </div>
       <div className={style.bottom__up__red__gradient}>
-        <Navbar />
+        <Footer />
       </div>
     </>
   )

src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import styles from '@/styles/button.module.scss'
+import styles from '@/styles/components/button/button.module.scss'
 import React, { ReactNode } from 'react'
 
 interface Props {

src/components/FAQSection/FAQSection.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client'
 import React from 'react'
 import styles from '@/styles/components/faqSection.module.scss'
 import Accordion from '../Accordion/Accordion'
@@ -11,7 +11,7 @@ export default function FAQSection() {
     <div className={styles.faq__section}>
       <div className="container">
         <div className={styles.faq__section__title}>
-          <h2 className="main__title__h2 mb-xxl">Secrets we can share</h2>
+          <h2 className="main__title__h2 my-xxl">Secrets we can share</h2>
         </div>
         {accordionData.map((item, index) => (
           <Accordion

src/components/Footer/Footer.tsx

@@ -0,0 +1,27 @@
+'use client'
+import styles from '@/styles/components/navbar/navbar.module.scss'
+import { useState } from 'react'
+import NavbarItems from '../Navbar/NavbarItems'
+import NavbarSocial from '../Navbar/NavbarSocial'
+
+export default function Navbar() {
+  const [isNavOpen, setIsNavOpen] = useState<boolean>(false)
+
+  return (
+    <nav className={styles.navbar}>
+      <div className={styles.navbar__content}>
+        <div className={styles.navbar__navigation__wrapper}>
+          <div className={styles.navbar__logo}>
+            <span>OpenBao</span>
+          </div>
+          <div className={styles.navbar__menu}>
+            <NavbarItems />
+          </div>
+        </div>
+        <div className={styles.navbar__social}>
+          <NavbarSocial />
+        </div>
+      </div>
+    </nav>
+  )
+}

src/components/HeroSection/HeroSection.tsx

@@ -9,12 +9,13 @@ export default function HeroSection() {
       <LinuxFountation />
       <h1 className={styles.hero__section__text}>Let Us Keep Your Secrets</h1>
       <p className={styles.hero__section__subtext}>
-        OpenBao, a secret project for the open source developer.
+        OpenBao, a secret project for the open source developer. (All copy is
+        currently placeholder)
       </p>
-      <Button variant="outline" size="md">
+      <Button variant="outline" size="md" className="ma-sm">
         Read Manifesto
       </Button>
-      <Button variant="secondary" size="md">
+      <Button variant="secondary" size="md" className="ma-sm">
         Give It A Try
       </Button>
     </section>

src/components/Navbar/GithubStats.tsx

@@ -1,39 +1,43 @@
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import styles from '@/styles/components/navbar/githubStats.module.scss';
-import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import styles from '@/styles/components/navbar/githubStats.module.scss'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
 
-export default async function GithubStats() {
-  const repo = "openbao/openbao"
-  const { stargazers_count: stars } = await fetch(
-    `https://api.github.com/repos/${repo}`,
-    {
-      ...(process.env.GITHUB_OAUTH_TOKEN && {
-        headers: {
-          Authorization: `Bearer ${process.env.GITHUB_OAUTH_TOKEN}`,
-          "Content-Type": "application/json",
-        },
-      }),
-      // data will revalidate every 24 hours
-      next: { revalidate: 86400 },
-    },
-  )
-    .then((res) => res.json())
-    .catch((e) => {
-      console.log(e)
-      return { stargazers_count: "1000+" }
-    });
+export default function GithubStats() {
+  // const repo = "openbao/openbao"
+  // const { stargazers_count: stars } = await fetch(
+  //   `https://api.github.com/repos/${repo}`,
+  //   {
+  //     ...(process.env.GITHUB_OAUTH_TOKEN && {
+  //       headers: {
+  //         Authorization: `Bearer ${process.env.GITHUB_OAUTH_TOKEN}`,
+  //         "Content-Type": "application/json",
+  //       },
+  //     }),
+  //     // data will revalidate every 24 hours
+  //     next: { revalidate: 86400 },
+  //   },
+  // )
+  //   .then((res) => res.json())
+  //   .catch((e) => {
+  //     console.log(e)
+  //     return { stargazers_count: "1000+" }
+  //   });
 
   return (
-    <a href={`https://github.com/${repo}`} target="_blank" className={styles.navbar__social__github}>
+    <a
+      // href={`https://github.com/${repo}`}
+      href="/"
+      target="_blank"
+      className={styles.navbar__social__github}
+    >
       <div className={styles.navbar__social__github__star}>
         <FontAwesomeIcon icon={faGithub} />
         <p>Star</p>
       </div>
       <div className={styles.navbar__social__github__stats}>
-        <p>{stars}</p>
+        <p>123</p>
       </div>
     </a>
   )
 }
-

src/components/Navbar/Navbar.tsx

@@ -1,22 +1,46 @@
-import React from 'react'
+'use client'
 import styles from '@/styles/components/navbar/navbar.module.scss'
+import { faBars, faClose } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useState } from 'react'
 import NavbarItems from './NavbarItems'
 import NavbarSocial from './NavbarSocial'
 
 export default function Navbar() {
+  const [isNavOpen, setIsNavOpen] = useState<boolean>(false)
+
   return (
     <nav className={styles.navbar}>
-      <div className={styles.navbar__navigation__wrapper}>
-        <div className={styles.navbar__logo}>
-          <span>OpenBao</span>
+      <div
+        className={
+          isNavOpen
+            ? `${styles.navbar__content} ${styles.navbar__content__active}`
+            : `${styles.navbar__content}`
+        }
+      >
+        <div className={styles.navbar__navigation__wrapper}>
+          <div className={styles.navbar__logo}>
+            <span>OpenBao</span>
+          </div>
+          <div className={styles.navbar__menu}>
+            <NavbarItems />
+          </div>
         </div>
-        <div className={styles.navbar__menu}>
-          <NavbarItems />
+        <div className={styles.navbar__social}>
+          <NavbarSocial />
         </div>
       </div>
-      <div className={styles.navbar__social}>
-        <NavbarSocial />
-      </div>
+      <button
+        onClick={() => setIsNavOpen(!isNavOpen)}
+        className={styles.navbar__toggle}
+        aria-expanded={isNavOpen}
+      >
+        {!isNavOpen ? (
+          <FontAwesomeIcon width={20} height={20} icon={faBars} />
+        ) : (
+          <FontAwesomeIcon width={20} height={20} icon={faClose} />
+        )}
+      </button>
     </nav>
   )
 }

src/styles/cardGroup.module.scss

@@ -1,6 +1,23 @@
+@import '@/styles/mobileVars.scss';
 // todo - make more modular
 .card__group {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: var(--padding-lg);
+  margin-top: var(--margin-xxl);
+  margin-bottom: var(--margin-xxl);
+}
+
+@media screen and (max-width: $mobile-sm) {
+
+  .card__group {
+    grid-template-columns: repeat(2, 2fr);
+  }
+}
+
+@media screen and (max-width: $mobile-xs) {
+
+  .card__group {
+    grid-template-columns: repeat(1, 1fr);
+  }
 }