fix: home page search

client/src/components/homeSection/Hero/Hero.tsx

@@ -3,10 +3,11 @@ import { Button } from "../../ui/button/Button";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { TextField } from "../../ui/textField/TextField.tsx";
+import { useMediaQuery } from "../../../hooks/useMediaQuery.tsx";
 
 export const Hero = () => {
   const navigate = useNavigate();
-
+  const isMobile = useMediaQuery("(max-width: 640px)");
   const [subject, setSubject] = useState<string>("english");
 
   const onSearch = () => {
@@ -40,8 +41,10 @@ export const Hero = () => {
         <div className="relative flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 max-w-2xl lg:max-w-3xl mx-auto mb-16 sm:mb-20 lg:mb-24">
           <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 hidden lg:block w-[620px] h-[80px] bg-[#27222EB3] rounded-[60px] -z-10"></div>
           <TextField
+            type="search"
+            autoComplete="off"
             containerClassName="w-[200px] sm:w-[300px] md:w-[400px]"
-            placeholder="What do you want to learn?"
+            placeholder={isMobile ? "Search..." : "What do you want to learn?"}
             variant="hero"
             onValueChange={setSubject}
           />

client/src/components/ui/textField/TextField.tsx

@@ -97,7 +97,7 @@ const inputStyles = cva(
         primary: "text-light-100 placeholder:text-dark-400",
         secondary: "text-light-500 placeholder:text-light-500",
         primarySmall: "text-light-100 placeholder:text-dark-400",
-        hero: "text-light-500 placeholder:text-light-500",
+        hero: "text-light-500 placeholder:text-light-500 placeholder:text-xs",
       },
       state: {
         default: "",

client/src/hooks/useMediaQuery.tsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+export function useMediaQuery(query: string) {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const m = window.matchMedia(query);
+    const onChange = () => setMatches(m.matches);
+    onChange();
+    m.addEventListener("change", onChange);
+    return () => m.removeEventListener("change", onChange);
+  }, [query]);
+
+  return matches;
+}