finish design doctor item & change basic responsive style

components/layout/Header.js

@@ -1,6 +1,6 @@
+import Logo from "@/app/component/Logo";
 import { listNav } from "@/constans";
 import { Button } from "@mui/material";
-import Image from "next/image";
 import Link from "next/link";
 
 function Header() {
@@ -9,15 +9,7 @@ function Header() {
             className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
         >
             <div className="h-20 px-4 py-8 flex overflow-hidden justify-between items-center flex-nowrap">
-                <div className="flex items-center justify-start gap-[5px]">
-                    <Image
-                        src='/assets/images/logo.png'
-                        width={30}
-                        height={30}
-                        alt="logo"
-                    />
-                    <p className="text-[#526CAC] text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
-                </div>
+                <Logo />
                 <ul className="flex items-center justify-center gap-10">
                     {listNav.map(nav => (
                         <li