Default Component - Copy this React, Tailwind Component to your project

'use client'; import Image from 'next/image'; import Link from 'next/link'; import React, { useState } from 'react'; import { IoIosArrowDown } from 'react icons/io'; import { FaArrowRight } from 'react icons/fa6'; import { FiMenu } from 'react icons/fi'; import { MdKeyboardArrowRight } from 'react icons/md'; import { BsDash, BsPlus } from 'react icons/bs'; import { RxCross2 } from 'react icons/rx'; function Navbar() { const [menuOpen, setMenuOpen] = useState(false); const [openMenu, setOpenMenu] = useState(null); const [isSecond, setIsSecond] = useState(false); const handleMouseSecond = () => { setIsSecond(true); }; const handleMouseLeaveSecond = () => { setIsSecond(false); }; const toggleDropdown = (menu) => { setOpenMenu(openMenu === menu ? null : menu); }; return ( <> <div className="bg white px 5 sticky top 0 md:px 14 xl:px 32 py 4 md:py 2 z [999] " > <div className="flex items center justify between"> <div className="w 1/2 lg:w auto"> <Link href="/"> <Image src="/sky more it logo.webp" height={200} width={200} alt="logo" className="h [4rem] w auto " /> </Link> </div> <div className="hidden lg:flex items center gap 6 md:gap 10"> <ul className="font semibold font sans text [#141d38] flex items center gap 4 md:gap 8 text sm md:text [15px]"> <li> <Link href="/">HOME</Link> </li> <li> <Link href="/about">ABOUT US</Link> </li> <li> <Link href="/about">Our Courses </Link> </li> <li onMouseEnter={handleMouseSecond}> <Link href="/services" className="relative uppercase flex items center gap 1 " > Services <IoIosArrowDown className="text lg" /> </Link> </li> <li> <Link href="/about us"> Resources </Link> </li> <li className=""> <Link href="/blog">BLOG</Link> {/* Dropdown Menu */} </li> <li> <Link href="/contact">CONTACT US</Link> </li> </ul> </div> {/* Make Appointment Button */} <div className="btn wrapper hidden lg:block"> <a className="th btn th_btn style3" href="https://wordpress.themeholy.com/webteck/services/">MAKE APPOINTMENT <i className="fa fa arrow right ms 2"></i></a> </div> <div className="lg:hidden"> <button onClick={() => setMenuOpen(!menuOpen)} className="text white p 3 rounded md bg [#001A6E] text 2xl"> <FiMenu /> </button> </div> </div> {menuOpen && ( <div className="fixed inset 0 bg black bg opacity 50 z 10" onClick={() => setMenuOpen(false)} ></div> )} <div className={`fixed top 0 left 0 w 80 h full bg white border r [3px] border [#001A6E] shadow lg transform ${menuOpen ? 'translate x 0' : ' translate x full' } transition transform duration 500 ease in out z 20`} > <div className="flex items center justify between bg orange 50 py 5 px 5"> <Image src="/logo.svg" height={200} width={200} alt="logo" className="h auto w auto max h 12 md:max h 16" /> </div> {menuOpen && ( <button onClick={() => setMenuOpen(false)} className="fixed top 5 left [270px] text xl bg [#001A6E] rounded full p 2 text white z 30" > <RxCross2 /> </button> )} <ul className="mt 20 space y 4 px 5 font semibold text [#141d38]"> <li className="flex items center border b border pink 200 pb 3"> <MdKeyboardArrowRight className="text xl" /> <Link href="/" onClick={() => setMenuOpen(false)}> HOME </Link> </li> <li className="flex items center border b border pink 200 pb 3"> <MdKeyboardArrowRight className="text xl" /> <Link href="/about us" onClick={() => setMenuOpen(false)}> ABOUT US </Link> </li> <li className="flex flex col border b border pink 200 pb 3"> <div className="flex items center justify between"> <div className="flex items center "> <MdKeyboardArrowRight className="text xl" /> <Link href="/services" onClick={() => setMenuOpen(false)}> SERVICES </Link> </div> <button onClick={() => toggleDropdown('services')} className="text xl bg gray 100 rounded full" > {openMenu === 'services' ? <BsDash /> : <BsPlus />} </button> </div> {openMenu === 'services' && ( <ul className="mt 2 space y 2 pl 8 transition transform ease in out duration 700"> <li className='border y border pink 200 py 3'> <Link href="/services/web development" >Web Development</Link> </li> <li className='border b border pink 200 pb 3'> <Link href="/services/mobile development">Mobile Development</Link> </li> <li > <Link href="/services/seo">SEO</Link> </li> </ul> )} </li> <li className="flex flex col border b border pink 200 pb 3"> <div className="flex items center justify between"> <div className="flex items center"> <MdKeyboardArrowRight className="text xl" /> <Link href="/blog" onClick={() => setMenuOpen(false)}> BLOG </Link> </div> <button onClick={() => toggleDropdown('blog')} className="text xl bg gray 100 rounded full" > {openMenu === 'blog' ? <BsDash /> : <BsPlus />} </button> </div> {openMenu === 'blog' && ( <ul className="mt 2 space y 2 pl 8 transition all duration 300"> <li className='border y border pink 200 py 3'> <Link href="/blog/tech">Tech</Link> </li> <li className='border b border pink 200 pb 3'> <Link href="/blog/lifestyle">Lifestyle</Link> </li> <li > <Link href="/blog/travel">Travel</Link> </li> </ul> )} </li> <li className="flex items center"> <MdKeyboardArrowRight className="text xl" /> <Link href="/contact" onClick={() => setMenuOpen(false)}> CONTACT US </Link> </li> </ul> </div> </div> { isSecond && ( <> <div className="flex gap 3 justify center bg [#faf6eb] font medium border t border [#001A6E] px 5 pb 5 absolute top [155px] left 0 w full z [999]" onMouseLeave={handleMouseLeaveSecond} > <ul className=" mt 2 w [20rem] dark:bg gray 800"> <li className="border b border [#001A6E] "> <Link href="/webdesign" className="flex gap 3 px 4 py 4 font semibold text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Website Design{" "} <img src="/responsive design.png" className="w 7 " alt="" /> </Link> </li> <li> <Link href="/ecommerce" className="block px 4 py 3 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > eCommerce Website </Link> </li> <li> <Link href="/webapp" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Web Application Development </Link> </li> <li> <Link href="/cms" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > CMS Web Development </Link> </li> <li> <Link href="/business" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Small Business Website </Link> </li> <li> <Link href="/corporate" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Corporate Website </Link> </li> </ul> <ul className=" mt 2 w [20rem] dark:bg gray 800"> <li className="border b border [#001A6E] "> <Link href="/app" className="flex gap 2 px 4 py 4 font semibold text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Mobile App Development{" "} <img src="/smartphone.png" className="w 7 " alt="" /> </Link> </li> <li> <Link href="/android" className="block px 4 py 3 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Android App Development </Link> </li> <li> <Link href="/ios" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > IOS App Development </Link> </li> <li> <Link href="/hybrid" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Hybrid App Development </Link> </li> <li> <Link href="/mobile" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Mobile App Testing </Link> </li> <li> <Link href="/quality" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Quality Assurance </Link> </li> </ul> <ul className=" mt 2 w [20rem] dark:bg gray 800"> <li className="border b border [#001A6E] "> <Link href="/marketing" className="flex gap 3 px 4 py 4 font semibold text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Digital Marketing Service{" "} <img src="/social media.png" className="w 7 " alt="" /> </Link> </li> <li> <Link href="/seo" className="block px 4 py 3 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Seo Services </Link> </li> <li> <Link href="/ppc" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > PPC Management </Link> </li> <li> <Link href="/social" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Social Media Marketing </Link> </li> <li> <Link href="/local" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Local Seo Services </Link> </li> <li> <Link href="/content" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Content Marketing Services </Link> </li> </ul> <ul className=" mt 2 w [20rem] dark:bg gray 800"> <li className="border b border [#001A6E] "> <Link href="/branding" className="flex gap 3 px 4 py 4 font semibold text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Design & Branding <img src="/graphic design.png" className="w 7" alt="" /> </Link> </li> <li> <Link href="/logo" className="block px 4 py 3 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Logo Design </Link> </li> <li> <Link href="/identity" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Corporate Identity Design </Link> </li> <li> <Link href="/brochure" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Brochure Design </Link> </li> <li> <Link href="/animated" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Animated Videos </Link> </li> <li> <Link href="/creative" className="block px 4 py 2 text gray 800 hover:bg orange 50 dark:text white dark:hover:bg gray 700" > Creative Agency </Link> </li> </ul> </div> </> ) } </> ); } export default Navbar; this is muy navbar i want more attractive anddrop down menu attractive and responsvie