Navigation - Copy this React, Tailwind Component to your project

Create a navigation that blends with the first section of my nextjs app landing page. this navigation is only for the landing page. current landing page navigation: "use client"; import { useEffect, useState } from "react"; import Image from "next/image"; import Link from "next/link"; import { useSession } from "next auth/react"; import { useTheme } from "next themes"; import { usePathname } from "next/navigation"; import ThemeSwitcher from "./ThemeSwitcher"; // Adjust the import path if necessary const Header = () => { const [stickyMenu, setStickyMenu] = useState(false); const [navbarOpen, setNavbarOpen] = useState(false); const { data: session } = useSession(); const pathUrl = usePathname(); const handleStickyMenu = () => { setStickyMenu(window.scrollY > 0); }; useEffect(() => { window.addEventListener("scroll", handleStickyMenu); return () => window.removeEventListener("scroll", handleStickyMenu); }, []); return ( <header className={`fixed left 0 top 0 z 50 w full transition all duration 300 ${ stickyMenu ? "bg white shadow dark:bg dark" : "bg transparent" }`} > <div className="relative mx auto max w [1170px] flex items center justify between px 4 sm:px 8 xl:px 0"> {/* Logo with Animation */} <Link href="/" className="flex items center"> </Link> {/* Navigation Menu */} <div className={`flex items center ${ navbarOpen ? "flex flex col" : "hidden xl:flex" }`} > <nav className="flex space x 4"> {["Features", "How It Works", "Pricing", "FAQ"].map((item, idx) => ( <Link key={idx} href={`#${item.toLowerCase().replace(" ", " ")}`} className={`px 4 py 2 rounded full ${ pathUrl === `#${item.toLowerCase()}` ? "bg primary text white" : "" } hover:bg primary/10`} > {item} </Link> ))} </nav> {/* Theme and Account Controls */} <div className="ml 4 flex items center"> <ThemeSwitcher /> {session?.user ? ( <Link href="/dashboard" className="ml 4 px 4 py 2 rounded full bg primary text white hover:bg primary dark" > Dashboard </Link> ) : ( <> <Link href="/auth/signin" className="ml 4 text black hover:text primary dark:text white" > Sign In </Link> <Link href="/auth/signup" className="ml 4 px 4 py 2 rounded full bg primary text white hover:bg primary dark" > Sign Up </Link> </> )} </div> </div> </div> </header> ); }; export const HeaderWrapper = () => { const pathname = usePathname(); const [isLoading, setIsLoading] = useState(true); useEffect(() => { const timer = setTimeout(() => setIsLoading(false), 2000); return () => clearTimeout(timer); }, []); if (isLoading || pathname.startsWith("/admin") || pathname.startsWith("/user")) { return null; } return <Header />; }; export default Header; add this svg logo: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477 89"> <rect width="477" height="89" rx="10" ry="10" fill="#026cdf"/> <g transform="matrix(1.7635203706804352,0,0,1.7635203706804352,19.99999915908796,22.49983319241605)" fill="#ffffff"> <path d="M11.5 5 l0 1.84 l 4.64 0 l0 13.16 l 2.22 0 l0 13.16 l 4.64 0 l0 1.84 l11.5 0 z M15.52 5 l0 15 l 2.22 0 l0 15 l2.22 0 z M30.42 16.46 l1.46 1.46 c 1.38 1.52 3.36 2.28 5.54 2.28 c 4.22 0 7.62 3.34 7.62 7.7 c0 4.34 3.4 7.68 7.62 7.68 c2.18 0 4.16 0.76 5.56 2.3 l 1.46 1.46 c 0.88 1.28 2.48 1.92 4.1 1.92 c 3.1 0 5.4 2.76 5.4 5.84 c0 2.82 2.08 5.86 5.4 5.86 c1.44 0 3.28 0.56 4.08 1.9 z M48.58 5 l 7.38 6.2 l7.38 8.8 l 3.1 0 l 5.98 7.38 l 2.18 1.82 l0 5.56 l 2.22 0 l0 15 l2.22 0 l0 6.84 l8 6.84 l3.26 0 z M53.6 18.16 l8.14 0 l0 1.84 l 10.36 0 l0 15 l9.98 0 l0 1.84 l 7.76 0 l0 4.44 l6.34 0 l0 1.86 l 6.34 0 l0 5.02 z M74.24 5 l0 1.84 l 4.64 0 l0 13.16 l 2.22 0 l0 13.16 l 4.64 0 l0 1.84 l11.5 0 z"/> </g> <g transform="matrix(0.8996166836257732,0,0,0.8996166836257732,166.97511497804888,17.42169885583799)" fill="#ffffff"> <rect x="12.84" y="10.878" width="6.559" height="38.243"/> <path d="M89.855,57.135H10.144c 3.127,0 5.67 2.543 5.67 5.67V8.535c0 3.125,2.543 5.669,5.67 5.669h79.713 c3.127,0,5.67,2.544,5.67,5.669v42.93C95.525,54.592,92.982,57.135,89.855,57.135z M10.144,6.201c 1.288,0 2.335,1.047 2.335,2.334 v42.93c0,1.287,1.047,2.334,2.335,2.334h79.713c1.287,0,2.336 1.047,2.336 2.334V8.535c0 1.287 1.049 2.334 2.336 2.334H10.144z"/> <rect x="26.293" y="10.878" width="3.223" height="38.243"/> <rect x="22.67" y="10.878" width="1.418" height="38.243"/> <rect x="33.521" y="10.878" width="7.669" height="38.243"/> <rect x="44.414" y="10.878" width="3.336" height="38.243"/> <rect x="65.48" y="10.878" width="7.672" height="38.243"/> <rect x="58.923" y="10.878" width="3.335" height="38.243"/> <rect x="52.029" y="10.878" width="3.334" height="38.243"/> <rect x="83.157" y="10.878" width="3.335" height="38.243"/> <rect x="76.268" y="10.878" width="3.332" height="38.243"/> </g> <g transform="matrix(1.7635203706804352,0,0,1.7635203706804352,259.59724955557135,22.499828987855842)" fill="#ffffff"> <path d="M18.72 10.32 c0 2.28 1.32 4.12 3.22 4.92 l3.22 4.76 l 2.46 0 l 2.94 4.36 l 3.5 0 l0 4.36 l 2.22 0 l0 4.36 l0 1.84 l0 6.96 l0 1.84 l2.22 0 l3.6 0 c2.94 0.02 5.3 2.3 5.3 5.32 z M9.82 6.84 l0 6.96 l3.58 0 c1.7 0 3.1 1.44 3.1 3.48 c0 2.02 1.4 3.48 3.1 3.48 l 3.58 0 z M23.94 18.16 l8.14 0 l0 1.84 l 10.36 0 l0 15 l9.98 0 l0 1.84 l 7.76 0 l0 4.44 l6.34 0 l0 1.86 l 6.34 0 l0 5.02 z M40.32 20 l 1.26 0 l 5.78 15 l2.38 0 l4.04 11.04 l4.02 11.04 l2.38 0 z M50.32 18.16 l8.14 0 l0 1.84 l 10.36 0 l0 15 l9.98 0 l0 1.84 l 7.76 0 l0 4.44 l6.34 0 l0 1.86 l 6.34 0 l0 5.02 z M72.18 10.32 c0 2.28 1.32 4.12 3.22 4.92 l3.22 4.76 l 2.46 0 l 2.94 4.36 l 3.5 0 l0 4.36 l 2.22 0 l0 4.36 l0 1.84 l0 6.96 l0 1.84 l2.22 0 l3.6 0 c2.94 0.02 5.3 2.3 5.3 5.32 z M63.28 6.84 l0 6.96 l3.58 0 c1.7 0 3.1 1.44 3.1 3.48 c0 2.02 1.4 3.48 3.1 3.48 l 3.58 0 z M85.28 14.5 c0.06 0.14 0.54 1.5 0.08 2.92 c 0.72 1.7 2.74 2.76 5.26 2.78 c 2.18 0 4.16 0.96 5.56 2.48 l1.48 1.48 c0.7 1.24 2.48 2.12 4.08 2.12 c1.74 0.02 2.76 0.66 3.18 1.66 c0.32 0.74 0.06 1.54 0.04 1.56 c 0.42 1.16 1.58 1.42 3.22 1.92 c 1.86 0.56 4 1.02 4.7 2.98 c 0.38 1.02 0.28 2.2 0.24 3.16 c1.16 2.2 4.12 2.26 4.46 2.26 c2.2 0 4.16 0.96 5.56 2.5 l 1.46 1.46 c 0.82 1.2 2.42 2.12 4.1 2.12 c 0.02 0 1.78 0 2.46 1.28 c 0.26 0.5 0.32 1.16 0.14 1.68 c0.4 1.1 1.54 1.36 3.14 1.84 c1.9 0.58 4.04 1.02 4.8 3.04 z M94.44 5 l6.16 15 l 2.4 0 l 1.5 3.92 l 5.9 0 l 1.48 3.92 l 2.4 0 l6.16 15 l1.36 0 z M91.5 14.24 l4.5 0 l 2.24 5.92 z M104.42 18.16 l7.56 0 l0 1.84 l 9.78 0 l0 15 l2.22 0 l0 13.16 z"/> </g> </svg>