feat: navbar

app/about/page.tsx

@@ -1,5 +1,6 @@
 "use client"
-import React, { useRef, useEffect, useState } from "react"
+import { useEffect, useState } from "react"
+import { useRef } from "react"
 
 const MouseTrackingGlowEffect: React.FC = () => {
   const [position, setPosition] = useState({ x: 0, y: 0 })

components/ImageFilter/image.tsx

@@ -1,3 +1,5 @@
+import Image from "next/image"
+
 type ImageOwnProps<T extends React.ElementType> = {
   className: string
   image: string
@@ -7,7 +9,6 @@ type ImageOwnProps<T extends React.ElementType> = {
 }
 
 type ImageProps<T extends React.ElementType> = ImageOwnProps<T> & Omit<React.ComponentProps<T>, keyof ImageOwnProps<T>>
-import Image from "next/image"
 
 export const ImageCard = <T extends React.ElementType = "div">({
   className,

components/Navbar/Navbar.tsx

@@ -1,12 +1,13 @@
 "use client"
+
+import { useEffect, useState } from "react"
+import { Button } from "components/Button/Button"
+import { FaArrowRight } from "react-icons/fa"
+
 interface NavbarProps {
   logoSrc: string // Path to your logo image
 }
 
-import { useState, useEffect } from "react"
-import { Button } from "components/Button/Button"
-import { FaArrowRight } from "react-icons/fa"
-
 const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
   const [showBackground, setShowBackground] = useState(false)
   const TOP_OFFSET = 50
@@ -49,7 +50,10 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
         showBackground ? "backdrop-blur" : "bg-transparent"
       } fixed start-0 top-0 z-20 w-full bg-transparent dark:border-gray-600 dark:bg-gray-900`}
     >
-      <section className="MOBILE-MENU flex hidden backdrop-blur-lg" style={mobileNavStyle}>
+      <section
+        className={`${isNavOpen ? "animate-openmenu" : "animate-closemenu"}  block  backdrop-blur-lg`}
+        style={mobileNavStyle}
+      >
         <div>
           {" "}
           <div className="CROSS-ICON absolute right-0 top-0 px-8 py-8">
@@ -68,7 +72,7 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
               </svg>
             </button>
           </div>
-          <ul className="MENU-LINK-MOBILE-OPEN flex min-h-[300px] flex-col items-center justify-center text-white">
+          <ul className="MENU-LINK-MOBILE-OPEN flex h-full min-h-[300px]  flex-col items-center justify-center text-white">
             <li className="my-2 border-b border-gray-400 uppercase">
               <a href="#">Home</a>
             </li>

components/OurServices/OurServices.tsx

@@ -1,4 +1,4 @@
-import { GlowCapture, Glow } from "@codaworks/react-glow"
+import { Glow, GlowCapture } from "@codaworks/react-glow"
 import { BsAndroid, BsApple, BsGlobe2, BsHeadsetVr } from "react-icons/bs"
 
 export default function OurServices() {

components/Slider/Slider.tsx

@@ -1,16 +1,3 @@
-import {
-  FigmaLogoIcon,
-  FramerLogoIcon,
-  SketchLogoIcon,
-  TwitterLogoIcon,
-  GitHubLogoIcon,
-  VercelLogoIcon,
-  NotionLogoIcon,
-  DiscordLogoIcon,
-  InstagramLogoIcon,
-  LinkedInLogoIcon,
-} from "@radix-ui/react-icons"
-
 const LOGOS = [
   "/images/Amazon_Web_Services-Logo.wine.svg",
   "/images/Cisco_Systems-Logo.wine.svg",

components/Ui/Card.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "./../../utils/cn"
 import Image from "next/image"
-import React, { createContext, useState, useContext, useRef, useEffect } from "react"
+import React, { createContext, useContext, useEffect, useRef, useState } from "react"
 
 const MouseEnterContext = createContext<[boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined>(undefined)
 

components/aboutUs/AboutUs.tsx

@@ -24,7 +24,8 @@ export default function AboutUs() {
               </h2>
             </div>
             <h3 className="mr-90 max-w-2xl text-slate-300">
-              we're dedicated to bringing your ideas to life with innovative solutions tailored to your unique needs.
+              we&apos; re dedicated to bringing your ideas to life with innovative solutions tailored to your unique
+              needs.
             </h3>
           </div>
 

tailwind.config.js

@@ -104,6 +104,14 @@ module.exports = {
           },
         },
       },
+      openmenu: {
+        "0%": { left: "-224px" },
+        "100%": { left: "0px" },
+      },
+      closemenu: {
+        "0%": { left: "0px" },
+        "100%": { left: "-224px" },
+      },
     },
   },
   plugins: [require("@codaworks/react-glow/tailwind"), addVariablesForColors],