create com button

src/components/layout/header/index.tsx

@@ -1,11 +1,12 @@
 import images from '@/assets/images/images';
 import Navbar from '../navbar';
 import Button from '@/components/uikit/button';
+import { t } from '@/locales/translates';
 
 export default function Header() {
   return (
     <header
-      className=" bg-cover text-white h-screen relative bg-no-repeat bg-right"
+      className=" bg-cover text-white h-screen relative bg-no-repeat bg-right w-full"
       style={{ backgroundImage: `url(${images.homeBanner.src})` }}
     >
       <div className="absolute inset-0 bg-black opacity-50 z-0 blur-[100px]" />
@@ -13,28 +14,33 @@ export default function Header() {
       <div className="container mx-auto bg-cover bg-center text-white flex justify-between items-center flex-col relative z-10 h-[80%] py-20">
         <div className=" w-full flex flex-col justify-start ">
           <h1 className="text-7xl md:text-6xl font-light">
-            Excellence innovating{' '}
+            {t('com_home_banner_title') as string}
           </h1>
           <h1 className="text-7xl md:text-6xl font-bold">
-            industry for today{' '}
+            {t('com_home_banner_title_bold') as string}
           </h1>
-          <p className="mb-8 mt-5 text-base font-normal">
-            At the heart of our operations is a commitment to delivering
-            superior products through cutting- <br/>edge technology and innovative
-            processes.
-          </p>
-          <Button className='w-48'>Explore More</Button>
+          <p
+            className="mb-8 mt-5 text-base font-normal"
+            dangerouslySetInnerHTML={{
+              __html: t('com_home_banner_description') as string,
+            }}
+          />
+          <div>
+            <Button variant="solid" endIcon={'x'}>
+              {t('com_home_banner_button') as string}
+            </Button>
+          </div>
         </div>
 
         <div className="w-full flex justify-center gap-8 text-sm border-t-[1px] border-white/10 pt-12 ">
           <a href="#" className="hover:underline">
-            Advanced Manufacturing Solutions
+            {t('com_home_Banner_link1') as string}
           </a>
           <a href="#" className="hover:underline">
-            Quality Assurance Systems
+            {t('com_home_Banner_link2') as string}
           </a>
           <a href="#" className="hover:underline">
-            State-of-the-Art Technology
+            {t('com_home_Banner_link3') as string}
           </a>
         </div>
       </div>

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>