Added the footer and navbar in the layout

package.json

@@ -13,6 +13,7 @@
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.0.1",
     "sass": "^1.70.0"
   },
   "devDependencies": {

src/pages/_app.tsx

@@ -16,7 +16,7 @@ export default function App({ Component, pageProps }: AppProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#5f5eaa" />
         <link rel="icon" href="/favicon.ico" />
-        <link rel="manifest" href="/manifest.json" />
+        {/* <link rel="manifest" href="/manifest.json" /> */}
         <link rel="shortcut icon" href="/favicon.ico" />
         <link rel="apple-touch-icon" href="/favicon.ico"></link>
       </Head>

src/pages/index.tsx

@@ -9,10 +9,6 @@ export default function Home() {
     <>
       <main className={`${styles.main} ${inter.className}`}>
         <div className={styles.description}>
-          <p>
-            Get started by editing CSSConnect &nbsp;
-            <code className={styles.code}>src/pages/index.tsx</code>
-          </p>
           <div>
             <a
               href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
@@ -92,9 +88,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <h2>
-              Deploy <span>-&gt;</span>
-            </h2>
+
             <p>
               Instantly deploy your Next.js site to a shareable URL
               with&nbsp;Vercel.

src/style-guide/components/Footer/index.tsx

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import Styles from './styles.module.scss';
+import {
+  AiFillFacebook,
+  AiFillInstagram,
+  AiFillLinkedin,
+} from 'react-icons/ai';
+
+const linksCSS = [
+  {
+    name:"Official Css website",
+    link:"/css"
+  },
+  {
+    name:"About Us",
+    link:"/about_us"
+  },
+  {
+    name:"Terms and Services",
+    link:"/terms"
+  },
+  {
+    name:"Privacy Policy",
+    link:"/policy"
+  },
+  {
+    name:"Community guidelines",
+    link:"/guidelines"
+  },
+];
+const links2 = [
+  {
+    name:"Help Centre",
+    link:"/help"
+  },
+  {
+    name:"Feedback",
+    link:"/feedback"
+  },
+  {
+    name:"Download Our App",
+    link:"/app"
+  },
+];
+
+
+const Footer = () => {
+  return (
+    <div className={Styles.footer}>
+      <div className={Styles.header}>
+        <h1>Css Connect</h1>
+      </div>
+
+      <div className={Styles.main}>
+        <div className={Styles.main_row}>
+          <div className={Styles.main_col}>
+            <h4>CSS</h4>
+
+            {
+              linksCSS.map((item,i)=>(
+                <Link href={item.link} key={i}>{item.name}</Link>
+              ))
+            }
+
+
+          </div>
+
+          <div className={Styles.main_col}>
+            <h4>Connect With Us</h4>
+            {
+              links2.map((item,i)=>(
+                <Link href={item.link} key={i}>{item.name}</Link>
+              ))
+            }
+          </div>
+        </div>
+        <div className={Styles.main_row}>
+          <div className={Styles.main_col}>
+            <h1>Follow us</h1>
+            <div className={Styles.icons}>
+              <Link href="#">
+                <AiFillFacebook size={30} />
+              </Link>
+              <Link href="#">
+                <AiFillInstagram size={30} />
+              </Link>
+              <Link href="#">
+                <AiFillLinkedin size={30} />
+              </Link>
+            </div>
+          </div>
+
+          <div className={Styles.main_col}>
+            <img src='tech.jpeg'/>
+          </div>
+        </div>
+
+        </div>
+      </div>
+  );
+};
+
+export default Footer;

src/style-guide/components/Footer/styles.module.scss

@@ -0,0 +1,98 @@
+@mixin alignCenterColumn{
+    display: flex;
+    align-items: center;
+    // justify-content: space-evenly;
+    flex-direction: column;
+}
+
+$breakpoints: (
+  xxs: 430px,
+  xs: 710px,
+  sm: 991px,
+  md: 1280px,
+  lg: 1920px,
+  xl: 5000px
+);
+
+@mixin break($breakpoint) {
+    @if map-has-key($breakpoints, $breakpoint) {
+      $max-width: map-get($breakpoints, $breakpoint);
+      @media screen and (max-width: $max-width) {
+        @content;
+      }
+    } @else {
+      @error "Invalid breakpoint: #{$breakpoint}.";
+    }
+  }
+
+.footer{
+
+    background-color: transparent;
+    width: 100%;
+    border: 1px solid white ;
+
+
+    .header{
+        // align-self: flex-start;
+        padding: 2vw;
+        // margin-bottom: 2rem;
+    }
+
+    .main {
+        // display: flex;
+        // flex-direction: row;
+        @include break(xs){
+
+            // flex-direction: column;
+        }
+        .main_row {
+            display: flex;
+            // margin: 0 6rem;
+
+            .main_col {
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                cursor: pointer;
+                padding: 2em 2em;
+                font-size: 0.8em;
+                font-family: "AlphaCentauri" ;
+                letter-spacing: 2px;
+                color: var(--footer-text) ;
+                transition: all 0.2s;
+                // line-height: 1.6em;
+
+                h4{
+                    color: red;
+                    position: relative;
+
+                    &::before{
+                        content: "";
+                        position: absolute;
+                        left: 0;
+                        bottom: 0;
+                        background-color: red;
+                        height: 3px;
+                        width: 70px;
+                    }
+                }
+
+                img{
+                    height: auto;
+                    width: auto;
+                    max-width: 100px;
+                    max-height: 100px;
+                }
+
+
+
+              }
+          }
+      }
+
+}
+
+
+
+
+

src/style-guide/components/Navbar/index.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from "react";
+import Link from 'next/link';
+import Styles from "./styles.module.scss"
+import ToggleTheme from "../../components/toggle-theme";
+
+const links =[
+    {
+        name:"Home",
+        link:"/home"
+    },
+    {
+        name:"Feed",
+        link:"/feed"
+    },
+    {
+        name:"Contact Us",
+        link:"/contact_us"
+    },
+];
+
+const Navbar =()=>{
+    const [toggle, setToggle] = useState(false);
+    const [darkMode, setDarkMode] = useState(false);
+    const [isActive,setActive] = useState(false);
+    return(
+    <div className={Styles.navbarContainer}>
+        <nav className="navbar">
+            <Link href="/home"><img className={Styles.logo} src="logo_compressed.png" alt="LOGO"/></Link>
+          <ul className={isActive? Styles.activeNavItems :Styles.inactiveNavItems}>{
+            links.map((item,i)=>(
+                    <li key={i}><Link href={item.link}>{item.name}</Link></li>
+            ))
+          }</ul> 
+
+
+        <ToggleTheme/>
+
+        <div onClick={() => setActive(!isActive)}>
+            <div className={isActive ? Styles.activeHam : Styles.ham_Container} />
+        </div>
+
+
+        </nav>
+    </div>
+
+    );
+};
+
+export default Navbar;