fix: navbar and resposive issues

app/page.tsx

@@ -1,20 +1,14 @@
 "use client"
-import { Metadata } from "next"
+
 import { Button } from "components/Button/Button"
 import { InfiniteSlider } from "components/Slider/Slider"
 import { useState } from "react"
-import Navbar from "components/Navbar/Navbar"
-import { LP_GRID_ITEMS } from "lp-items"
 import { FaArrowRight, FaFileCsv, FaNewspaper } from "react-icons/fa"
 import "../styles/custom.css"
-import { MdOutlineWeb } from "react-icons/md"
 import { TiTick } from "react-icons/ti"
-import { MdOutlineAppSettingsAlt } from "react-icons/md"
 import { Glow, GlowCapture } from "@codaworks/react-glow"
-import StarBackground from "components/StarBackground/StarBackground"
-import { Textarea } from "@nextui-org/react"
 import ImageFilter from "components/ImageFilter/ImageFilter"
-import { BackgroundBeams } from "components/Ui/BackgroundBeams"
+import { BsGlobe2, BsAndroid, BsApple, BsHeadsetVr } from "react-icons/bs"
 
 export default function Web() {
   const [init, setInit] = useState(false)
@@ -160,7 +154,7 @@ export default function Web() {
                 <div className=" glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow">
                   <div className=" text-center">
                     <div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
-                      <MdOutlineWeb className="h-[80px] w-[80px] text-white" />
+                      <BsGlobe2 className="h-[50px] w-[50px] text-white" />
                     </div>
                   </div>
                   <div className="flex h-full flex-col rounded-lg ">
@@ -171,8 +165,7 @@ export default function Web() {
                     </div>
                     <div className="flex flex-grow flex-col justify-between">
                       <p className="text-base leading-relaxed text-gray-300">
-                        We specialize in creating modern, user-friendly websites that reflect your brand and drive
-                        business growth.
+                        We craft engaging and responsive websites that captivate users and drive business growth.
                       </p>
                       <a
                         href="#"
@@ -199,19 +192,19 @@ export default function Web() {
                 <div className=" glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow">
                   <div className=" text-center">
                     <div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
-                      <MdOutlineAppSettingsAlt className="h-[80px] w-[80px] text-white" />
+                      <BsApple className="h-[50px] w-[50px] text-white" />
                     </div>
                   </div>
                   <div className="flex h-full flex-col rounded-lg ">
                     <div className="mb-3 flex items-center ">
                       <h2 className="mb-4 max-w-3xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-3xl">
-                        IOS / Android App Development
+                        IOS Application Development
                       </h2>
                     </div>
                     <div className="flex flex-grow flex-col justify-between">
                       <p className="text-base leading-relaxed text-gray-300">
-                        We specialize in creating modern, user-friendly websites that reflect your brand and drive
-                        business growth.
+                        Our skilled team designs and develops intuitive iOS apps that seamlessly integrate with Apple
+                        devices.
                       </p>
                       <a
                         href="#"
@@ -238,19 +231,18 @@ export default function Web() {
                 <div className=" glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow">
                   <div className=" text-center">
                     <div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
-                      <MdOutlineWeb className="h-[80px] w-[80px] text-white" />
+                      <BsAndroid className="h-[50px] w-[50px] text-white" />
                     </div>
                   </div>
                   <div className="flex h-full flex-col rounded-lg ">
                     <div className="mb-3 flex items-center ">
                       <h2 className="mb-4 max-w-3xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-3xl">
-                        Web Devlopment
+                        Android Application Development
                       </h2>
                     </div>
                     <div className="flex flex-grow flex-col justify-between">
                       <p className="text-base leading-relaxed text-gray-300">
-                        We specialize in creating modern, user-friendly websites that reflect your brand and drive
-                        business growth.
+                        From concept to deployment, we create robust Android apps that cater to a diverse user base.
                       </p>
                       <a
                         href="#"
@@ -277,19 +269,19 @@ export default function Web() {
                 <div className=" glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow">
                   <div className=" text-center">
                     <div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
-                      <MdOutlineWeb className="h-[80px] w-[80px] text-white" />
+                      <BsHeadsetVr className="h-[50px] w-[50px] text-white" />
                     </div>
                   </div>
                   <div className="flex h-full flex-col rounded-lg ">
                     <div className="mb-3 flex items-center ">
                       <h2 className="mb-4 max-w-3xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-3xl">
-                        Web Devlopment
+                        Apps for AR Devices
                       </h2>
                     </div>
                     <div className="flex flex-grow flex-col justify-between">
                       <p className="text-base leading-relaxed text-gray-300">
-                        We specialize in creating modern, user-friendly websites that reflect your brand and drive
-                        business growth.
+                        Immerse users in augmented reality experiences with our cutting-edge applications for MetaQuest
+                        and Apple Vision Pro.
                       </p>
                       <a
                         href="#"
@@ -317,7 +309,7 @@ export default function Web() {
         </div>
       </section>
 
-      <section className="mb-32 h-[150vh] bg-[#0f172a] pl-[10%] pr-[10%] pt-40">
+      <section className="mb-10 h-[20%] bg-[#0f172a] pl-[10%] pr-[10%] pt-40">
         <div className="mx-auto place-self-center text-center">
           <div className="mb-4 text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
             <h1 className="bg-gradient-to-r from-slate-400 via-white to-slate-400 bg-clip-text text-transparent">
@@ -329,10 +321,12 @@ export default function Web() {
             digital transformation across industries.”
           </p>
         </div>
-        <ImageFilter />
+        <div>
+          <ImageFilter />
+        </div>
       </section>
 
-      <section className="bg-[#0f172a] dark:bg-gray-900 md:pt-[8%] lg:pt-[5%]">
+      <section className="bg-[#0f172a] max-md:p-4 md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
         <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
           <h2 className="mb-4 text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
             Contact Us

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