feat(ui): update donate page

uniconnect-app/app/app/donate/page.tsx

+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
 export default function DonatePage() {
-  return <div>DonatePage</div>;
+  return (
+    <div className='container mx-auto px-4 py-8'>
+      <h1 className='text-4xl font-bold mb-8'>Donate Items</h1>
+      <Card className='max-w-2xl mx-auto'>
+        <CardHeader>
+          <CardTitle>Donation Form</CardTitle>
+          <CardDescription>
+            Help fellow students by donating your unused items
+          </CardDescription>
+        </CardHeader>
+        <CardContent className='space-y-4'>
+          <div className='space-y-2'>
+            <label htmlFor='item-name'>Item Name</label>
+            <Input id='item-name' placeholder='Enter the name of the item' />
+          </div>
+          <div className='space-y-2'>
+            <label htmlFor='item-description'>Description</label>
+            <Input
+              id='item-description'
+              placeholder='Briefly describe the item'
+            />
+          </div>
+          <div className='space-y-2'>
+            <label htmlFor='item-category'>Category</label>
+            <Select>
+              <SelectTrigger id='item-category'>
+                <SelectValue placeholder='Select a category' />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value='textbooks'>Textbooks</SelectItem>
+                <SelectItem value='electronics'>Electronics</SelectItem>
+                <SelectItem value='clothing'>Clothing</SelectItem>
+                <SelectItem value='furniture'>Furniture</SelectItem>
+                <SelectItem value='other'>Other</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className='space-y-2'>
+            <label htmlFor='item-condition'>Condition</label>
+            <Select>
+              <SelectTrigger id='item-condition'>
+                <SelectValue placeholder="Select the item's condition" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value='new'>New</SelectItem>
+                <SelectItem value='like-new'>Like New</SelectItem>
+                <SelectItem value='good'>Good</SelectItem>
+                <SelectItem value='fair'>Fair</SelectItem>
+                <SelectItem value='poor'>Poor</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button className='w-full'>Submit Donation</Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
 }