Add new dependencies and update package-lock.json

app/search.tsx

@@ -14,17 +14,21 @@ interface SearchComponentProps {
 export function SearchComponent({ handleSubmit, input, handleInputChange, isLoading }: SearchComponentProps) {
   return (
     <form onSubmit={handleSubmit} className="max-w-4xl mx-auto pt-12">
-      <div className="relative flex items-center">
+      <div className="relative flex items-center group">
         <Input
           type="text"
           value={input}
           onChange={handleInputChange}
-          placeholder="Ask anything..."
-          className="pr-24 h-14 text-lg rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-zinc-800 transition-colors"
+          placeholder="What do you want to know?"
+          className="pr-16 h-16 text-lg rounded-2xl border-2 border-gray-300 dark:border-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-lg transition-all duration-200 focus:border-orange-400 focus:shadow-xl focus:shadow-orange-100/50 dark:focus:shadow-orange-900/20 placeholder:text-gray-400 dark:placeholder:text-gray-400"
           disabled={isLoading}
         />
         <button
           type="submit"
+          disabled={isLoading || !input.trim()}
+          variant="orange"
+          size="icon"
+          className="absolute right-3 h-10 w-10 rounded-xl shadow-md hover:shadow-lg transition-all duration-200"
           disabled={isLoading || !input || input.trim() === ''}
           className="absolute right-2 p-0 flex items-center justify-center rounded-lg bg-[#ff4d00] hover:bg-[#e64400] disabled:bg-gray-300 disabled:cursor-not-allowed active:scale-95 group"
         >

components/ui/input.tsx

@@ -8,9 +8,13 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
+
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow,border-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-orange-400 focus-visible:ring-orange-400/20 focus-visible:ring-2 focus:border-orange-400 focus:ring-orange-400/20 focus:ring-2",
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:outline-none focus-visible:ring-0 focus-visible:border-gray-200 dark:focus-visible:border-gray-700",
+        "focus-visible:outline-none focus-visible:ring-0 focus-visible:border-gray-200 dark:focus-visible:border-gray-700"
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "hover:border-gray-300 dark:hover:border-gray-500",
         className
       )}
       {...props}