Footer - Copy this React, Tailwind Component to your project
// components/Header.jsx "use client"; import React, { useState } from "react"; import Link from "next/link"; import Image from "next/image"; import { Menu, X } from "lucide-react"; const Header = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); return ( <header className="sticky top-0 z-50 px-4 lg:px-6 h-20 flex items-center border-b bg-white shadow-sm"> <Link className="flex items-center justify-center" href="/"> <div className="relative w-10 h-10 mr-2"> <Image src="/logo.png" alt="MFToken Logo" width={40} height={40} priority /> </div> <div className="inline-flex flex-col items-center"> <h1 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-teal-700 to-teal-500 tracking-tight"> Istithmar Tarmeez </h1> <div className="mt-1 text-sm font-medium"> <span className="text-gray-600">by</span>{" "} <span className="relative"> <span className="font-semibold text-teal-700"> Arwaa<span className="text-teal-800">Labs</span> </span> <span className="absolute -bottom-0.5 left-0 w-full h-0.5 bg-gradient-to-r from-teal-700 to-teal-500"></span> </span> </div> </div> </Link> <nav className={`${ isMenuOpen ? "flex" : "hidden" } md:flex absolute md:relative top-20 md:top-0 left-0 right-0 flex-col md:flex-row items-start md:items-center md:ml-auto gap-4 p-4 md:p-0 bg-white md:bg-transparent border-b md:border-b-0 shadow-md md:shadow-none`} > {["For Investors", "For Fund Managers", "How It Works", "About"].map( (item, index) => ( <Link key={index} className="text-lg font-semibold text-teal-700 hover:text-white px-4 py-2 rounded-md transition-all duration-300 ease-in-out hover:bg-teal-600 hover:shadow-lg w-full md:w-auto text-center" href="#" > {item} </Link> ) )} </nav> <button className="md:hidden ml-auto p-2 rounded-md hover:bg-teal-100 transition-colors" onClick={() => setIsMenuOpen(!isMenuOpen)} > {isMenuOpen ? ( <X className="h-6 w-6 text-teal-700" /> ) : ( <Menu className="h-6 w-6 text-teal-700" /> )} </button> </header> ); }; export default Header; mAKE THIS BEAUTIDUL BUT TEAL COLOR