fix: navbar and resposive issues

components/Button/Button.tsx

@@ -17,6 +17,28 @@ const button = cva(["inline-flex", "items-center", "rounded-xl", "text-center",
         "border-2",
         "border-slate-100",
       ],
+      navSignIn: [
+        "bg-transparent",
+        "justify-center",
+        "text-slate-200",
+        "rounded-[30px]",
+        "hover:text-white",
+        "border-solid",
+        "border-0",
+        "border-slate-100",
+        "mr-2",
+      ],
+      navSignUp: [
+        "justify-center",
+        "text-slate-100",
+        "hover:text-white",
+        "rounded-[30px]",
+        "border-solid",
+        "border-2",
+        "border-slate-100",
+        "flex",
+        "mx-auto",
+      ],
       hero1: [
         "text-black",
         "bg-white",

components/ImageFilter/ImageFilter.tsx

@@ -2,7 +2,7 @@
 
 import { Button } from "components/Button/Button"
 import { useState } from "react"
-import { Image } from "./image"
+import { ImageCard } from "./image"
 import { FilterableData } from "./FilterableData"
 import { CardBody, CardContainer, CardItem } from "components/Ui/Card"
 import { motion } from "framer-motion" // Import motion
@@ -33,11 +33,16 @@ const ImageFilter = () => {
         ))}
         {/* filtered cards display */}
       </div>
-      <main className="grid w-full gap-x-5 gap-y-8 md:mt-8 md:grid-cols-2 lg:grid-cols-3">
+      {/* <main className="grid w-full gap-x-5 gap-y-8 md:mt-8 md:grid-cols-2 lg:grid-cols-3"> */}
+      <main className="grid max-w-full grid-cols-1 place-items-center gap-3 p-4 md:max-w-full md:grid-cols-3">
         {FilterableData.map((item, index) => (
           <motion.div
             key={index}
-            layout
+            layout={"position"}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.5 }}
             className={`w-full cursor-pointer rounded-lg border border-gray-600 bg-gray-800 shadow  ${
               activeFilter === "all" || activeFilter === item.name
                 ? "" /* Show card */
@@ -46,8 +51,8 @@ const ImageFilter = () => {
           >
             <CardContainer>
               <CardBody>
-                <Image
-                  className="h-[400px] w-full overflow-hidden rounded-lg"
+                <ImageCard
+                  className="h-full w-full overflow-hidden rounded-lg"
                   image={item.src}
                   alt={item.name}
                   objectCover="object-cover"

components/ImageFilter/image.tsx

@@ -7,8 +7,9 @@ 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 Image = <T extends React.ElementType = "div">({
+export const ImageCard = <T extends React.ElementType = "div">({
   className,
   image,
   alt,
@@ -19,7 +20,7 @@ export const Image = <T extends React.ElementType = "div">({
   const Component = as || "div"
   return (
     <Component className={className} {...rest}>
-      <img src={image} alt={alt} className={`h-full w-full ${objectCover}`} />
+      <Image src={image} width={400} height={400} alt={alt} className={`h-full w-full ${objectCover}`} />
     </Component>
   )
 }

components/Navbar/Navbar.tsx

@@ -1,50 +1,99 @@
+"use client"
 interface NavbarProps {
-    logoSrc: string; // Path to your logo image
+  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
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY >= TOP_OFFSET) {
+        setShowBackground(true)
+      } else {
+        setShowBackground(false)
+      }
+    }
+
+    window.addEventListener("scroll", handleScroll)
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll)
+    }
+  }, [])
+
+  const [hovered, setHovered] = useState(false)
+  const imgStyle = {
+    transform: hovered ? "translateX(3px)" : "none",
+    transition: "transform .2s", // Optional: Smooth transition
   }
-  
-  const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
-    return (
-      <nav className="fixed top-0 left-0 w-full h-20 bg-transparent flex items-center justify-between px-4 z-50">
-        <a href="/">
-          <img src={logoSrc} alt="Your Logo" className="h-20" />
-        </a>
-        <ul className="hidden md:flex space-x-4 text-lg font-medium">
-          <li>
-            <a href="/" className="hover:text-gray-700">
-              Home
-            </a>
-          </li>
-          <li>
-            <a href="/services" className="hover:text-gray-700">
-              Services
-            </a>
-          </li>
-          <li>
-            <a href="/portfolio" className="hover:text-gray-700">
-              Portfolio
-            </a>
-          </li>
-          <li>
-            <a href="/about-us" className="hover:text-gray-700">
-              About Us
-            </a>
-          </li>
-          <li>
-            <a href="/contact-us" className="hover:text-gray-700">
-              Contact Us
-            </a>
-          </li>
-        </ul>
-        <div className="flex md:hidden items-center">
-          <button className="px-4 py-2 text-white bg-blue-500 hover:bg-blue-700 rounded-md">
-            Sign In
-          </button>
-          <button className="px-4 py-2 ml-2 text-white bg-green-500 hover:bg-green-700 rounded-md">
-            Sign Up
-          </button>
-        </div>
-      </nav>
-    );
-  };
-  
-  export default Navbar;
+
+  return (
+    <nav
+      className={`${
+        showBackground ? "backdrop-blur" : "bg-transparent"
+      } fixed left-0 top-0 z-50 flex h-20 w-full items-center justify-between px-4 text-white`}
+    >
+      <a href="/">
+        <img src={logoSrc} alt="Your Logo" className="h-20 text-white" />
+      </a>
+      <ul className="hidden space-x-4 text-lg font-medium md:flex">
+        <li>
+          <a href="/" className="hover:text-vizoleG2">
+            Home
+          </a>
+        </li>
+        <li>
+          <a href="/services" className="hover:text-vizoleG2">
+            Services
+          </a>
+        </li>
+        <li>
+          <a href="/portfolio" className="hover:text-vizoleG2">
+            Portfolio
+          </a>
+        </li>
+        <li>
+          <a href="/about-us" className="hover:text-vizoleG2">
+            About Us
+          </a>
+        </li>
+        <li>
+          <a href="/contact-us" className="hover:text-vizoleG2">
+            Contact Us
+          </a>
+        </li>
+      </ul>
+      <div className="flex items-center">
+        <Button
+          href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
+          intent="navSignIn"
+          size="hero1"
+        >
+          Sign In
+        </Button>
+        <Button
+          href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
+          intent="navSignUp"
+          size="hero1"
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+        >
+          Sign Up
+          <div className="ml-2">
+            <span>
+              <FaArrowRight style={imgStyle} className="text-white" />
+            </span>
+          </div>
+        </Button>
+      </div>
+    </nav>
+  )
+}
+
+export default Navbar