Refactor .gitignore and update UI components in invest and home pages

.gitignore

@@ -26,7 +26,8 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*.local
+.env*.
+.env
 
 # vercel
 .vercel

src/app/invest/page.tsx

@@ -35,11 +35,11 @@ export default function Invest() {
             <h1 className="mt-3 font-bold text-3xl">NVIDIA</h1>
           </div>
           <p className="mt-2"> World's first non-metal sustainable battery</p>
-          <div className="flex mt-3">
+          <div className="flex flex-wrap mt-3">
             {["Technology", "Gaming"].map((tag) => (
               <span
                 key={tag}
-                className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1"
+                className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1"
               >
                 {tag}
               </span>

src/app/page.tsx

@@ -1,7 +1,13 @@
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { BusinessCard } from "@/components/businessCard";
 import { Separator } from "@/components/ui/separator";
 import { ExtendableCard } from "@/components/extendable-card";
@@ -14,7 +20,9 @@ export default function Home() {
           <span className="px-28 py-20">
             <p className="text-4xl font-bold">Explore the world of ventures</p>
             <span className="text-lg">
-              <p>Unlock opportunities and connect with a community of passionate</p>
+              <p>
+                Unlock opportunities and connect with a community of passionate
+              </p>
               <p>investors and innovators.</p>
               <p>Together, we turn ideas into impact.</p>
             </span>
@@ -76,12 +84,16 @@ export default function Home() {
       <div className="flex flex-col px-28">
         <span className="pb-5">
           <p className="text-2xl font-bold">Hottest Deals</p>
-          <p className="text-lg">The deals attracting the most interest right now</p>
+          <p className="text-lg">
+            The deals attracting the most interest right now
+          </p>
         </span>
         <div className="grid grid-cols-4 gap-4">
           <BusinessCard
             name={"NVDA"}
-            description={"Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology"}
+            description={
+              "Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology"
+            }
             joinDate={"December 2021"}
             location={"Bangkok, Thailand"}
             tags={null}
@@ -108,6 +120,7 @@ export default function Home() {
             name={"Microsoft Corporation"}
             description={
               "Founded in 1975, Microsoft Corporation is a multinational technology company that develops, manufactures, and licenses software, hardware, and services, including Windows, Office, and Azure."
+
             }
             joinDate={"January 2018"}
             location={""}
@@ -120,7 +133,18 @@ export default function Home() {
           </Button>
         </div>
       </div>
-      <ExtendableCard/>
+      <ExtendableCard
+        name={"Microsoft Corporation"}
+        description={
+          "Microsoft Corporation is a multinational technology company."
+        }
+        joinDate={"January 2018"}
+        location={"California, USA"}
+        tags={null}
+        minInvestment={250}
+        totalInvestor={5000}
+        totalRaised={1500000}
+      />
     </main>
   );
 }

src/components/extendable-card.tsx

@@ -1,5 +1,5 @@
-import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
-import Link from "next/link";
+"use client";
+import { CalendarDaysIcon } from "lucide-react";
 
 interface XMap {
   // tagName: colorCode
@@ -12,11 +12,14 @@ interface ExtendableCardProps {
   joinDate: string;
   location: string;
   tags: XMap | null;
+  minInvestment: number;
+  totalInvestor: number;
+  totalRaised: number;
 }
 
 export function ExtendableCard(props: ExtendableCardProps) {
   return (
-    <div className="group relative w-full max-w-sm overflow-hidden rounded-lg bg-card shadow-md transition-all hover:shadow-lg">
+    <div className="group relative w-full max-w-sm overflow-hidden rounded-lg bg-card shadow-md transition-all duration-500 hover:shadow-lg">
       <div className="aspect-[4/3] overflow-hidden">
         <img
           src="/placeholder.svg"
@@ -31,36 +34,51 @@ export function ExtendableCard(props: ExtendableCardProps) {
         <h3 className="text-lg font-semibold text-card-foreground transition-colors duration-500 group-hover:text-primary">
           {props.name}
         </h3>
-        <div className="mt-2 flex items-center text-muted-foreground">
-          <span className="text-sm">{props.joinDate}</span>
+
+        {/* Default content (visible when not hovered) */}
+        <div className="mt-2 flex items-center text-muted-foreground group-hover:hidden">
+          <span className="flex items-center pt-2 gap-1">
+            <CalendarDaysIcon width={20} />
+            Joined {props.joinDate}
+          </span>
         </div>
-        <div className="mt-2 flex items-center text-muted-foreground">
+        <div className="mt-2 flex items-center text-muted-foreground group-hover:hidden">
           <span className="text-sm">{props.location}</span>
         </div>
-        <div className="mt-4 hidden group-hover:block">
-          <p className="text-sm text-muted-foreground">
-            {props.description}
-          </p>
+        <div className="mt-2 flex flex-wrap items-center text-muted-foreground group-hover:hidden">
+          {["Technology", "Gaming"].map((tag) => (
+            <span
+              key={tag}
+              className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1"
+            >
+              {tag}
+            </span>
+          ))}
+        </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">
+          <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">
-              <Avatar>
-                <AvatarImage src="/placeholder-user.jpg" alt="@jaredpalmer" />
-                <AvatarFallback>JP</AvatarFallback>
-              </Avatar>
               <div>
-                <p className="text-sm font-medium text-card-foreground">
-                  Jared Palmer
+                <hr className="w-screen -ml-4 mb-2" />
+                <p>
+                  <strong>${props.totalRaised.toLocaleString()}</strong>{" "}
+                  committed and reserved
+                </p>
+                <hr className="w-screen -ml-4 mb-2 mt-2" />
+                <p className="mb-2">
+                  <strong>{props.totalInvestor.toLocaleString()}</strong>{" "}
+                  investors
+                </p>
+                <hr className="w-screen -ml-4 mb-2" />
+                <p>
+                  <strong>${props.minInvestment.toLocaleString()}</strong> min.
+                  investment
                 </p>
-                <p className="text-xs text-muted-foreground">Photographer</p>
               </div>
             </div>
-            <Link
-              href="#"
-              className="inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-              prefetch={false}
-            >
-              Learn More
-            </Link>
           </div>
         </div>
       </div>