finish design doctor item & change basic responsive style

components/layout/Footer.js

@@ -8,6 +8,7 @@ import Link from "next/link";
 import LocationF from "../icons/LocationF";
 import CalendarAddF from "../icons/CalendarAddF";
 import StethoscopeF from "../icons/StethoscopeF";
+import Logo from "@/app/component/Logo";
 
 const socialMedias = [
     <Linkedin />,
@@ -44,15 +45,7 @@ function Footer() {
                 {/* Right */}
                 <div className="flex gap-[30px] flex-col items-start">
                     {/* Icon */}
-                    <div className="flex items-center justify-start gap-[5px]">
-                        <Image
-                            alt="logo"
-                            width={30}
-                            height={30}
-                            src='/assets/images/logo.png'
-                        />
-                        <p className="text-[#526CAC] text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
-                    </div>
+                    <Logo />
                     <p
                         className="text-[#616161] text-[14px] font-normal"
                     >724 یک وبسایت نوبت دهی آنلاین می باشد که<br /> بستری آسان برای پزشکان و بیماران فراهم کرده<br /> است.     </p>

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

components/layout/index.js

@@ -8,7 +8,7 @@ function Layout({ children, title }) {
                 <title>{`${title} | نوبت ۷۲۴`}</title>
             </head> */}
             <main className="w-full min-h-screen">
-                <header className="w-full fixed top-10 right-0 padding-responsive z-[10]">
+                <header className="w-full fixed top-10 right-1/2 translate-x-1/2 padding-responsive z-[10]">
                     <Header />
                 </header>
                 <section>