Refactor UI components, remove unused imports ,update hover animation duration and create notification page

src/app/invest/page.tsx

@@ -18,7 +18,6 @@ import { ShareIcon, StarIcon } from "lucide-react";
 import { Toaster, toast } from "react-hot-toast";
 import useSession from "@/lib/supabase/useSession";
 import { redirect } from "next/navigation";
-import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
   TooltipContent,

src/app/notification/page.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+
+export default function Notification() {
+  const sampleNotifications = [
+    { message: "New message from John Doe", time: "5 minutes ago" },
+    { message: "Your order has been shipped", time: "2 hours ago" },
+    { message: "Meeting reminder: Team sync at 3 PM", time: "1 day ago" },
+  ];
+  return (
+    <div>
+      <div className="ml-56 mt-16 ">
+        <h1 className="font-bold text-3xl h-0">Notifications</h1>
+        <div className=" w-full mt-20 ">
+          {/* Cards */}
+          <Card className=" border-slate-800 w-3/4 p-6">
+            <CardContent>
+              <Card>
+                <CardContent>1</CardContent>
+              </Card>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/extendableCard.tsx

@@ -57,7 +57,7 @@ export function ExtendableCard(props: ExtendableCardProps) {
         </div>
 
         {/* Hover content (appears when hovered) */}
-        <div className="mt-4 max-h-0 overflow-hidden opacity-0 group-hover:max-h-[500px] group-hover:opacity-100 transition-all duration-500 ease-in-out">
+        <div className="mt-4 max-h-0 overflow-hidden opacity-0 group-hover:max-h-[500px] group-hover:opacity-100 transition-all duration-1000 ease-in-out">
           <p className="text-sm text-muted-foreground">{props.description}</p>
           <div className="mt-4 flex items-center justify-between">
             <div className="flex items-center space-x-2">