create header component

src/components/layout/header/index.tsx

@@ -0,0 +1,43 @@
+import images from '@/assets/images/images';
+import Navbar from '../navbar';
+import Button from '@/components/uikit/button';
+
+export default function Header() {
+  return (
+    <header
+      className=" bg-cover text-white h-screen relative bg-no-repeat bg-right"
+      style={{ backgroundImage: `url(${images.homeBanner.src})` }}
+    >
+      <div className="absolute inset-0 bg-black opacity-50 z-0 blur-[100px]" />
+      <Navbar />
+      <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{' '}
+          </h1>
+          <h1 className="text-7xl md:text-6xl font-bold">
+            industry for today{' '}
+          </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>
+        </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
+          </a>
+          <a href="#" className="hover:underline">
+            Quality Assurance Systems
+          </a>
+          <a href="#" className="hover:underline">
+            State-of-the-Art Technology
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+}

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)}>