change name in register & add link to most-searched home page & change tag & change design and responsive & fix active link header & must include field num in register & send code msg

components/home/FrequentSearches.js

@@ -1,5 +1,6 @@
 import { frequentSearches } from "@/constans";
 import { Button } from "@mui/material";
+import Link from "next/link";
 
 function FrequentSearches() {
   return (
@@ -10,16 +11,23 @@ function FrequentSearches() {
       <div className="overflow-auto hidden-scroll flex justify-start">
         <ul className="flex items-center justify-start gap-[14px] pl-[14px]">
           {frequentSearches.map((item, idx) => (
-            <li key={idx}>
-              <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] 
-                  !rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7] hover:!bg-[#EFEFEF]"
-              >
-                {item}
-              </Button>
-            </li>
+            <Link href={{
+              pathname: "/doctors",
+              query: {
+                search: item
+              },
+            }}>
+              <li key={idx}>
+                <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] 
+                !rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7] hover:!bg-[#EFEFEF]"
+                >
+                  {item}
+                </Button>
+              </li>
+            </Link>
           ))}
         </ul>
       </div>