Refactor Navbar and Search components: enhance Navbar with mobile menu functionality and improved styling, update Search component to utilize new Button component for better UI consistency, and optimize search input layout for a more engaging user experience.

src/components/atoms/Button/index.tsx

@@ -4,6 +4,7 @@ import { FC } from "react";
 type Props = {
   children: React.ReactNode;
   className?: string;
+  theme?: "primary" | "glass";
   onClick?: () => void;
   href?: string;
 };
@@ -13,12 +14,13 @@ export const Button: FC<Props> = ({
   className = "",
   onClick,
   href,
+  theme = "primary",
 }) => {
   const Component = (href ? Link : "button") as any;
 
   return (
     <Component
-      className={`rounded-md bg-primary px-5 py-2.5 text-sm font-medium text-white transition hover:bg-primary-900 ${className}`}
+      className={`${styles[theme]} cursor-pointer ${className}`}
       onClick={onClick}
       {...(href && { href })}
     >
@@ -26,3 +28,10 @@ export const Button: FC<Props> = ({
     </Component>
   );
 };
+
+const styles = {
+  primary:
+    "block relative bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white px-8 py-4 rounded-xl font-semibold text-lg shadow-2xl transition-all duration-300 hover:scale-105",
+  glass:
+    "p-3 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 transition-all duration-300 hover:bg-white/20 hover:scale-105",
+};

src/components/atoms/SearchInput/index.tsx

@@ -30,17 +30,17 @@ export const SearchInput: FC<Props> = ({
   }, [value]);
 
   return (
-    <div className={`relative text-gray-600 inline-block ${className}`}>
+    <div>
       <input
         type="search"
         name="search"
-        className="bg-white h-10 px-5 pr-10 rounded-full text-md md:text-sm focus:outline-none w-52 focus:w-[400px] transition-all max-w-[90vw]"
         value={value}
         placeholder={placeholder}
+        className={className}
         onChange={(e) => setValue(e.target.value)}
         autoFocus={autoFocus}
       />
-      <button type="submit" className="absolute right-0 top-0 mt-3 mr-4">
+      <button type="submit" className="absolute right-0 top-1 mt-3 mr-4">
         <IoSearch />
       </button>
     </div>