check lighthous

components/doctors/listDoctors/index.js

@@ -57,11 +57,12 @@ function ListDoctors({
       <div className="mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px]">
         {doctors && doctors.length ? (
           <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[24px]">
-            {doctors?.map((doctor) => (
+            {doctors?.map((doctor, idx) => (
               <ItemDoctor
                 key={doctor.id}
                 doctor={doctor}
                 loading={loading}
+                priority={idx < 3}
                 setDoctors={setDoctors}
               />
             ))}

components/home/FrequentSearches.js

@@ -13,26 +13,25 @@ function FrequentSearches() {
       <div className="overflow-auto hidden-scroll flex justify-start max-w-[620px]">
         <ul className="flex items-center justify-start gap-[14px] pl-[14px]">
           {childrenList.map((item, idx) => (
-            <Link
-              key={item.id || idx}
-              href={{
-                pathname: "/doctors",
-                query: {
-                  specialty: item.name,
-                },
-              }}
-            >
-              <li>
+            <li key={item.id || idx}>
+              <Link
+                href={{
+                  pathname: "/doctors",
+                  query: {
+                    specialty: item.name,
+                  },
+                }}
+              >
                 <Button
                   variant="contained"
                   color="secondary"
-                  className="!py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px] sm:!px-[14px] md:!px-[15px] lg:!px-[16px] !text-[12px] lg:!text-[14px] 
+                  className="!py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px] sm:!px-[14px] md:!px-[15px] lg:!px-[16px] !text-[12px] lg:!text-[14px]
                 !rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7] hover:!bg-[#EFEFEF]"
                 >
                   {item.name}
                 </Button>
-              </li>
-            </Link>
+              </Link>
+            </li>
           ))}
         </ul>
       </div>

components/home/TextHeader.js

@@ -7,11 +7,11 @@ async function TextHeader() {
 
   return (
     <div className="z-[50]">
-      <h1 className="text-[#F17732] text-center font-kalame text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold">
+      <h1 className="text-[#F17732] text-center text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold">
         با {matchedCity?.site_name}
       </h1>
       <h2
-        className="text-[#525252] text-center mt-2.5 font-kalame text-[16px] sm:text-[25px] md:text-[31px] lg:text-[36px] 
+        className="text-[#525252] text-center mt-2.5 text-[16px] sm:text-[25px] md:text-[31px] lg:text-[36px]
             font-bold flex items-center gap-0.5 sm:gap-1 md:gap-2"
       >
         <div className="max-w-[18px] sm:max-w-[22px]">

components/home/index.js

@@ -1,11 +1,19 @@
 // Components
+import Image from "next/image";
 import SearchBar from "./search";
 import TextHeader from "./TextHeader";
 import FrequentSearches from "./FrequentSearches";
 
 function HomePage() {
   return (
-    <div className="bg-banner-home after:z-[2] !bg-bottom !bg-no-repeat !bg-cover md:!min-h-[115vh]">
+    <div className="bg-banner-home after:z-[2] md:!min-h-[115vh]">
+      <Image
+        src="/assets/images/banner-home.png"
+        alt=""
+        fill
+        priority
+        className="!object-cover !object-bottom -z-10"
+      />
       <div className="padding-responsive z-20 min-h-screen py-[120px] flex items-center justify-center flex-col gap-[40px]">
         <TextHeader />
         <SearchBar />

components/layout/footer/index.js

@@ -122,6 +122,7 @@ function Footer({ matchedCity }) {
                 <Link
                   href={matchedCity?.socialMedia[item.name] || "/"}
                   className="min-h-fit"
+                  aria-label={item.name}
                 >
                   {item.icon}
                 </Link>