create header component

src/components/layout/navbar/index.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import images from '@/assets/images/images';
+import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
@@ -9,19 +11,23 @@ export default function Navbar() {
   const pathname = usePathname();
 
   const links = [
-    { href: '/', label: 'درباره' },
-    { href: '/services', label: 'خدمات' },
-    { href: '/blog', label: 'بلاگ' },
-    { href: '/contact', label: 'تماس' },
+    { href: '/', label: 'Home' },
+    { href: '/services', label: 'About US' },
+    { href: '/blog', label: 'Products' },
+    { href: '/contact', label: 'Blog' },
+    { href: '/contact', label: 'Project' },
+    { href: '/contact', label: 'Contact Us' },
+
   ];
 
   const linkClass = (href: string) =>
-    pathname === href ? ' text-red-500 font-semibold' : 'text-gray-500';
+    pathname === href ? ' text-red-500 font-semibold' : 'text-white';
 
   return (
-    <nav className="bg-transparent  px-4 py-3 w-full">
-      <div className="max-w-7xl mx-auto flex items-center justify-between">
-        <Link href="/" className="text-xl font-bold ">لوگو</Link>
+    <nav className="bg-transparent container mx-auto py-11 shrink-0 relative z-10 ">
+      <div className=" flex items-center justify-between">
+        <Link href="/" className="text-xl font-bold ">
+        <Image  alt='logo' src={images.logo} className='w-auto h-auto'/></Link>
 
         <ul className="hidden md:flex space-x-6">
           {links.map(({ href, label }) => (
@@ -31,6 +37,13 @@ export default function Navbar() {
               </Link>
             </li>
           ))}
+          <li>
+            <a className='flex gap-2 items-center' href='tel:+098123456789'>
+
+            <span>xx</span>
+            <p>+098 123456789</p>
+            </a>
+          </li>
         </ul>
 
         <button className="md:hidden text-gray-700" onClick={() => setOpen(!open)}>