Updated Search page

src/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

src/pages/Search.tsx

@@ -1,3 +1,6 @@
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
 import Link from "next/link"
 export default function Search(){
     return(
@@ -7,8 +10,16 @@ export default function Search(){
                     <Link href={'/'}>Upload Document</Link>
                 </div>
             </div>
-            <div>
-                Search Document
+            <div className="flex flex-col items-center justify-center gap-5">
+                <div className="text-5xl font-bold text-gray-400">Search <span className="text-blue-500">Document</span></div>
+                <div className="flex gap-4">
+                    <Input type="search" className="w-80"/>
+                    <Button className="border-2 border-blue-500 bg-white text-blue-500 font-bold hover:text-white hover:bg-blue-500">Search</Button>
+                    
+                </div>
+                <div>
+                    <Textarea placeholder="Response." disabled rows={5} cols={50}/>
+                </div>
             </div>
         </div>
     )

src/pages/index.tsx

@@ -25,9 +25,11 @@ export default function Home() {
         </div>
       </div>
       <div className='flex flex-col gap-10 justify-center items-center pt-10 h-full mx-auto'>
-        <div className='flex'>
+        <div className='flex flex-col'>
           <h1 className='text-gray-400 text-5xl md:text-7xl font-bold'>Here <span className='text-blue-600 dark:text-blue-500'> .Chat</span></h1>
+          <h2 className="text-sm">Semantic Search your document in over 100 languages</h2>
         </div>
+      
         <div className=''>
           <div className="flex gap-2">
             <div className="">