completed responsive design of Navbar component.

README.md

@@ -16,7 +16,7 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 

app/about/page.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const page = () => {
+  return (
+    <div>About Page</div>
+  )
+}
+
+export default page

app/components/Hero.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Hero = () => {
+  return (
+    <div>Hero</div>
+  )
+}
+
+export default Hero

app/components/Navbar.js

@@ -0,0 +1,173 @@
+"use client"
+import React, { useEffect, useState } from "react";
+import { BsShare } from "react-icons/bs";
+import {AiOutlineMenu, AiOutlineClose} from 'react-icons/ai'
+import Image from "next/image";
+
+import styles from '../styles/navbar.module.css'
+import '../globals.css'
+import Link from "next/link";
+
+const Navbar = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const sideList = [
+    {
+
+      title: "How it Works",
+    },
+    {
+
+      title: "About",
+    },
+    {
+
+      title: "Work",
+    },
+    {
+
+      title: "Pricing",
+    },
+    {
+
+        title: "Blog",
+      }
+  ];
+
+  const navList = [
+    {
+
+        title: "How it Works",
+      },
+      {
+
+        title: "About",
+      },
+      {
+
+        title: "Work",
+      },
+      {
+
+        title: "Pricing",
+      },
+      {
+
+          title: "Blog",
+        }
+  ];
+
+  const handleDrawer = () => {
+    setIsOpen(!isOpen);
+  };
+
+  useEffect(() => {
+    const handleEscKeyPress = (e) => {
+      if (e.keyCode === 27 && isOpen) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.body.style.setProperty("overflow", "hidden");
+    } else {
+      document.body.style.removeProperty("overflow");
+    }
+
+    document.addEventListener("keydown", handleEscKeyPress);
+
+    return () => {
+      document.removeEventListener("keydown", handleEscKeyPress);
+    };
+  }, [isOpen]);
+
+  return (
+    <nav className={styles.navbar} >
+      <div className={`${styles.innerNav} && ${styles.container}`}>
+
+
+        <Image
+          src='./logo.svg'
+          alt="Logo"
+         width={50}
+         height={50}className={styles.logo}
+        />
+
+<button className={styles.toggleBtn} aria-label="Open Menu" onClick={handleDrawer}>
+          <AiOutlineMenu className={styles.toggleBtn} />
+        </button>
+
+
+        <div className={styles.desktopNav}>
+
+        {navList.map(({ title }, index) => {
+          return  (
+
+
+              <Link className={styles.desktopLinks} key={index} href='/'>{title}</Link>
+
+          );
+        })}
+
+
+      <div className={styles.desktopBtn}>
+      <button className={`${styles.btn} && ${styles.navBtn}`}>
+          <Link href='#'>Get Started With Your Trial</Link>
+        </button>
+      </div>
+
+    </div>
+
+      </div>
+
+
+
+
+
+      {isOpen && (
+        <div className={styles.contentCover}>
+          <div
+            onClick={() => setIsOpen(false)}
+            className={styles.coverClosed}
+            tabIndex="0"
+          ></div>
+        </div>
+      )}
+
+      <aside
+        className={`${styles.sideBar} && ${
+          isOpen ? styles.sidebarClosed : styles.sidebarOpen
+        }`}
+      >
+        <span className={styles.innerNavLogo}>
+          <Image
+            src='./logo.svg'
+            alt="Logo"
+
+            width={50}
+            height={50}
+
+          />
+           <AiOutlineClose className={styles.closeBtn} onClick={() => setIsOpen(false)} />
+        </span>
+        {sideList.map(({ icon, title }, index) => {
+          return (
+            <span
+              key={index}
+              className={styles.mobileNav}
+            >
+              <Link href='#'>{title}</Link>
+            </span>
+          );
+        })}
+
+          <button className={`${styles.btn} && ${styles.navBtn}`}>
+            <Link href='#'>Get Started With Your Trial</Link>
+          </button>
+
+      </aside>
+    </nav>
+  );
+};
+
+export default Navbar;

app/components/index.js

@@ -0,0 +1,3 @@
+export { default as Navbar } from './Navbar';
+export { default as Footer } from './Footer';
+export { default as Hero } from './Hero';

app/globals.css

@@ -1,167 +1,35 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+:root {
+
+  --primary-color: #F86642;
+  --accent-color: #E0EAF3;
+  --default-color: #292526;
+  --white: #fff;
+
+
+}
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
 body {
-  font-family: Inter;
+
 }
-
-@layer utilities {
-  .btn_white { 
-    @apply  border-white bg-white px-8 py-3 text-green-50
-  }
-  .btn_white_text  { 
-    @apply  border-white bg-white px-8 py-3 text-gray-90
-  }
-  .btn_orange  { 
-    @apply  border-orange bg-orange px-8 py-5 text-white
-  }
-  .btn_dark_green { 
-    @apply  bg-green-90 px-8 py-4 text-white transition-all hover:bg-black
-  }
-  .btn_dark_green_outline  { 
-    @apply border-gray-20 bg-green-90 px-8 py-5 text-white
-  }
-
-  .max-container {
-    @apply mx-auto max-w-[1440px];
-  }
-
-  .padding-container {
-    @apply px-6 lg:px-20 3xl:px-0;
-  }
-
-  .flexCenter {
-    @apply flex items-center justify-center;
-  }
-  .flexColCenter {
-    @apply flex items-center justify-center flex-col;
-  }
-
-  .flexBetween {
-    @apply flex items-center justify-between;
-  }
-  .flexColBetween {
-    @apply flex items-center justify-between flex-col;
-  }
-
-  .flexEvenly {
-    @apply flex items-center justify-evenly;
-  }
-
-  .flexStart {
-    @apply flex items-center justify-start;
-  }
-
-  .flexEnd {
-    @apply flex items-center justify-end;
-  }
-
-  /* FONTS */
-  .regular-64 {
-    @apply text-[64px] font-[400] leading-[120%];
-  }
-
-  .regular-40 {
-    @apply text-[40px] font-[400] leading-[120%];
-  }
-
-  .regular-32 {
-    @apply text-[32px] font-[400];
-  }
-
-  .regular-24 {
-    @apply text-[24px] font-[400];
-  }
-
-  .regular-20 {
-    @apply text-[20px] font-[400];
-  }
-
-  .regular-18 {
-    @apply text-[18px] font-[400];
-  }
-
-  .regular-16 {
-    @apply text-[16px] font-[400];
-  }
-
-  .regular-14 {
-    @apply text-[14px] font-[400];
-  }
-
-  .medium-14 {
-    @apply text-[14px] font-[600];
-  }
-
-  .bold-88 {
-    @apply text-[88px] font-[700] leading-[120%];
-  }
-
-  .bold-64 {
-    @apply text-[64px] font-[700] leading-[120%];
-  }
-
-  .bold-52 {
-    @apply text-[52px] font-[700] leading-[120%];
-  }
-
-  .bold-40 {
-    @apply text-[40px] font-[700] leading-[120%];
-  }
-
-  .bold-32 {
-    @apply text-[32px] font-[700] leading-[120%];
-  }
-
-  .bold-20 {
-    @apply text-[20px] font-[700];
-  }
-
-  .bold-18 {
-    @apply text-[18px] font-[700];
-  }
-
-  .bold-16 {
-    @apply text-[16px] font-[700];
-  }
-
-  /* Hero */
-  .hero-img {
-    @apply relative right-0 top-8  bg-cover bg-center md:-right-28 xl:-top-60;
-  }
-
-  /* Camp */
-  .camp-quote {
-    @apply absolute -right-6 bottom-4 w-[140px] lg:bottom-10 xl:-right-8 xl:w-[186px] 3xl:right-0;
-  }
-
-  /* Feature */
-  .feature-phone {
-    @apply absolute top-[13%] z-10 hidden max-w-[1500px] rotate-[15deg] md:-left-16 lg:flex  3xl:left-20;
-  }
-
-  /* Get App */
-  .get-app {
-    @apply max-container relative flex w-full  flex-col justify-between gap-32 overflow-hidden bg-green-90 bg-pattern bg-cover bg-center bg-no-repeat px-6 py-12 text-white sm:flex-row sm:gap-12 sm:py-24 lg:px-20 xl:max-h-[598px] 2xl:rounded-5xl;
-  }
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1140px;
+  padding-left: 2rem;
+  padding-right: 2rem;
 }
 
-/* Hide scrollbar for Chrome, Safari and Opera */
-.hide-scrollbar::-webkit-scrollbar {
-  display: none;
+button {
+  background-color: var(--primary-color);
+  color: var(--white);
+  border-radius: 7px;
 }
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.hide-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}