create com button

src/components/layout/navbar/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import images from '@/assets/images/images';
+import { t } from '@/locales/translates';
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -11,13 +12,12 @@ export default function Navbar() {
   const pathname = usePathname();
 
   const links = [
-    { 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' },
-
+    { href: '/', label: t('pages_home_title') as string },
+    { href: '/about', label: t('pages_about_title') as string },
+    { href: '/blog', label: t('pages_contact_title') as string },
+    { href: '/contact', label: t('pages_contact_title') as string },
+    { href: '/product', label: t('pages_product_title') as string },
+    { href: '/project', label: t('pages_project_title') as string },
   ];
 
   const linkClass = (href: string) =>
@@ -26,27 +26,32 @@ export default function Navbar() {
   return (
     <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>
-
+        <Link href="/" className="text-xl font-bold w-auto h-12 ">
+          <Image alt="logo" src={images.logo} className="w-auto h-full object-contain" />
+        </Link>
         <ul className="hidden md:flex space-x-6">
           {links.map(({ href, label }) => (
             <li key={href}>
-              <Link href={href} className={`${linkClass(href)} hover:text-primary-light `}>
+              <Link
+                href={href}
+                className={`${linkClass(href)} hover:text-primary-light `}
+              >
                 {label}
               </Link>
             </li>
           ))}
           <li>
-            <a className='flex gap-2 items-center' href='tel:+098123456789'>
-
-            <span>xx</span>
-            <p>+098 123456789</p>
+            <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)}>
+        <button
+          className="md:hidden text-gray-700"
+          onClick={() => setOpen(!open)}
+        >
           {open ? <p>x</p> : <p>menu</p>}
         </button>
       </div>
@@ -55,7 +60,11 @@ export default function Navbar() {
         <ul className="md:hidden mt-2 space-y-2 px-2">
           {links.map(({ href, label }) => (
             <li key={href}>
-              <Link href={href} className={linkClass(href)} onClick={() => setOpen(false)}>
+              <Link
+                href={href}
+                className={linkClass(href)}
+                onClick={() => setOpen(false)}
+              >
                 {label}
               </Link>
             </li>