From e4c3275102a75145ffa9e387f724ed0d15ce7857 Mon Sep 17 00:00:00 2001
From: sirin <sirinza29@gmail.com>
Date: Sat, 5 Oct 2024 14:30:10 +0700
Subject: [PATCH] style: make business cards + index and deals page more
 responsive

---
 src/app/deals/page.tsx            |  30 ++--
 src/app/page.tsx                  | 231 +++++++++++++++---------------
 src/components/extendableCard.tsx | 121 ++++++++++------
 3 files changed, 211 insertions(+), 171 deletions(-)

diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx
index ff09810..6aff49f 100644
--- a/src/app/deals/page.tsx
+++ b/src/app/deals/page.tsx
@@ -18,6 +18,7 @@ export default function Deals() {
       joinDate: "December 2021",
       location: "Bangkok, Thailand",
       tags: ["AI", "Technology"],
+      imageUri: "/login.png",
       minInvestment: 10000,
       totalInvestor: 58400,
       totalRaised: 9000000,
@@ -29,6 +30,7 @@ export default function Deals() {
       joinDate: "February 2020",
       location: "Cupertino, California, USA",
       tags: ["Consumer Electronics", "Software"],
+      imageUri: "/money.png",
       minInvestment: 10000,
       totalInvestor: 58400,
       totalRaised: 9000000,
@@ -40,6 +42,7 @@ export default function Deals() {
       joinDate: "April 2019",
       location: "Mountain View, California, USA",
       tags: ["Internet", "Search Engine"],
+      imageUri: "/money.png",
       minInvestment: 10000,
       totalInvestor: 5000,
       totalRaised: 1500000000,
@@ -50,6 +53,7 @@ export default function Deals() {
       joinDate: "January 2018",
       location: "California, USA",
       tags: ["Technology", "Software"],
+      imageUri: null,
       minInvestment: 250,
       totalInvestor: 5000,
       totalRaised: 1500000,
@@ -59,18 +63,19 @@ export default function Deals() {
   const filteredData = selectedTag ? data.filter((item) => item.tags.includes(selectedTag)) : data;
 
   return (
-    <div>
-      <div className=" w-1/2 h-[250px] mt-10 ml-[15%]">
+    <div className="container max-w-screen-xl mx-auto px-4">
+      <div className="h-auto mt-10">
         <h1 className="text-4xl font-bold">Investment Opportunities</h1>
         <br />
         <p>Browse current investment opportunities on B2DVenture.</p>
         <p>
           All companies are <u>vetted & pass due diligence.</u>
         </p>
-        {/* filters */}
-        <div className="flex mt-10 gap-3">
+
+        {/* Filters */}
+        <div className="flex flex-wrap mt-10 gap-3">
           <Select onValueChange={(value) => setPostAtFilter(value)}>
-            <SelectTrigger className="w-[180px]">
+            <SelectTrigger className="w-full sm:w-[180px]">
               <Clock3Icon className="ml-2" />
               <SelectValue placeholder="Posted at" />
             </SelectTrigger>
@@ -79,15 +84,14 @@ export default function Deals() {
               <SelectItem value="Yesterday">Yesterday</SelectItem>
             </SelectContent>
           </Select>
+
           <Select onValueChange={(value) => setSelectedTag(value)}>
-            {" "}
-            {/* Tag filtering */}
-            <SelectTrigger className="w-[180px]">
+            <SelectTrigger className="w-full sm:w-[180px]">
               <MessageSquareIcon className="ml-2" />
               <SelectValue placeholder="Tags" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="_">All Tags</SelectItem> {/* Reset filter */}
+              <SelectItem value="_">All Tags</SelectItem>
               <SelectItem value="AI">AI</SelectItem>
               <SelectItem value="Technology">Technology</SelectItem>
               <SelectItem value="Consumer Electronics">Consumer Electronics</SelectItem>
@@ -99,18 +103,20 @@ export default function Deals() {
         <Separator className="mt-10" />
       </div>
 
-      <div className="ml-[15%]">
+      <div className="mt-10">
         <h2 className="text-2xl">Deals</h2>
         <p className="mt-3">The deals attracting the most interest right now</p>
       </div>
-      {/* block for all the deals */}
-      <div className="mx-[15%] mt-10 grid grid-cols-3">
+
+      {/* Block for all the deals */}
+      <div className="mt-10 grid grid-cols-3 gap-4">
         {filteredData.map((item, index) => (
           <ExtendableCard
             key={index}
             name={item.name}
             description={item.description}
             joinDate={item.joinDate}
+            imageUri={item.imageUri}
             location={item.location}
             minInvestment={item.minInvestment}
             totalInvestor={item.totalInvestor}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e370b63..d0faf93 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,127 +8,132 @@ import { ExtendableCard } from "@/components/extendableCard";
 export default function Home() {
   return (
     <main>
-      <div className="flex flex-row bg-slate-100 dark:bg-gray-800">
-        <div className="flex flex-col w-3/5">
-          <span className="px-10 md:px-28 py-10 md:py-20">
-            <p className="text-lg md:text-4xl font-bold">Explore the world of ventures</p>
-            <span className="text-sm md:text-lg">
-              <p>Unlock opportunities and connect with a community of passionate</p>
-              <p>investors and innovators.</p>
-              <p>Together, we turn ideas into impact.</p>
+      <div className="relative mx-auto">
+        {/* Expanded div */}
+        <div className="flex flex-row bg-slate-100 dark:bg-gray-800">
+          <div className="container max-w-screen-xl flex flex-col">
+            <span className="mx-20 px-10 py-10">
+              <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>investors and innovators.</p>
+                <p>Together, we turn ideas into impact.</p>
+              </span>
+              <Button className="scale-75 md:scale-100 font-bold mt-4">
+                <Link href="/deals">Start Investing</Link>
+              </Button>
             </span>
-            <Button className="scale-75 md:scale-100 font-bold mt-4">
-              <Link href="/deals">Start Investing</Link>
-            </Button>
+          </div>
+          <div className="flex justify-center items-center mt-2">
+            <Image
+              src="/money.png"
+              width={0}
+              height={0}
+              sizes="100vw"
+              style={{ width: "50%", height: "auto" }}
+              alt="Money"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="container max-w-screen-xl">
+        <div className="flex flex-row gap-12 justify-start md:justify-center mt-3 md:mt-5">
+          <Card className="border-0 shadow-none">
+            <CardHeader>
+              <CardTitle className="text-lg md:text-2xl">100M+</CardTitle>
+              <CardDescription>Global investor community</CardDescription>
+            </CardHeader>
+          </Card>
+          <Card className="border-0 shadow-none">
+            <CardHeader>
+              <CardTitle className="text-lg md:text-2xl">2,500+</CardTitle>
+              <CardDescription>Ventures supported</CardDescription>
+            </CardHeader>
+          </Card>
+          <Card className="border-0 shadow-none">
+            <CardHeader>
+              <CardTitle className="text-lg md:text-2xl">$2.6B+</CardTitle>
+              <CardDescription>Capital raised</CardDescription>
+            </CardHeader>
+          </Card>
+          <Card className="border-0 shadow-none">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-lg md:text-2xl">Follow Us</CardTitle>
+            </CardHeader>
+            <CardContent className="flex gap-2">
+              <Button className="flex gap-1 border-2 border-border rounded-md p-1 bg-background text-foreground scale-75 md:scale-100">
+                <Image src={"/github.svg"} width={20} height={20} alt="github" className="scale-75 md:scale-100" />
+                Github
+              </Button>
+              <Button className="flex gap-1 border-2 border-border rounded-md p-1 bg-background text-foreground scale-75 md:scale-100">
+                <Image src={"/github.svg"} width={20} height={20} alt="github" className="scale-75 md:scale-100" />
+                Github
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+
+        <Separator className="mb-6" />
+
+        <div className="flex flex-col px-10">
+          <span className="pb-5">
+            <p className="text-xl md:text-2xl font-bold">Hottest Deals</p>
+            <p className="text-md md:text-lg">The deals attracting the most interest right now</p>
           </span>
-        </div>
-        <div className="flex justify-center items-center mt-2">
-          <Image
-            src="/money.png"
-            width={0}
-            height={0}
-            sizes="100vw"
-            style={{ width: "50%", height: "auto" }}
-            alt="Money"
-          />
-        </div>
-      </div>
-
-      <div className="flex flex-row gap-0 md:gap-10 justify-start md:justify-center mt-3 md:mt-5">
-        <Card className="border-0 shadow-none">
-          <CardHeader>
-            <CardTitle className="text-lg md:text-2xl">100M+</CardTitle>
-            <CardDescription>Global investor community</CardDescription>
-          </CardHeader>
-        </Card>
-        <Card className="border-0 shadow-none">
-          <CardHeader>
-            <CardTitle className="text-lg md:text-2xl">2,500+</CardTitle>
-            <CardDescription>Ventures supported</CardDescription>
-          </CardHeader>
-        </Card>
-        <Card className="border-0 shadow-none">
-          <CardHeader>
-            <CardTitle className="text-lg md:text-2xl">$2.6B+</CardTitle>
-            <CardDescription>Capital raised</CardDescription>
-          </CardHeader>
-        </Card>
-        <Card className="border-0 shadow-none">
-          <CardHeader className="pb-2">
-            <CardTitle className="text-lg md:text-2xl">Follow Us</CardTitle>
-          </CardHeader>
-          <CardContent className="flex gap-2">
-            <Button className="flex gap-1 border-2 border-border rounded-md p-1 bg-background text-foreground scale-75 md:scale-100">
-              <Image src={"/github.svg"} width={20} height={20} alt="github" className="scale-75 md:scale-100" />
-              Github
-            </Button>
-            <Button className="flex gap-1 border-2 border-border rounded-md p-1 bg-background text-foreground scale-75 md:scale-100">
-              <Image src={"/github.svg"} width={20} height={20} alt="github" className="scale-75 md:scale-100" />
-              Github
-            </Button>
-          </CardContent>
-        </Card>
-      </div>
-
-      <Separator className="mb-6" />
-
-      <div className="flex flex-col px-10 md:px-28">
-        <span className="pb-5">
-          <p className="text-xl md:text-2xl font-bold">Hottest Deals</p>
-          <p className="text-md md:text-lg">The deals attracting the most interest right now</p>
-        </span>
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-          <Link href={"/overview"}>
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            <Link href={"/overview"}>
+              <ExtendableCard
+                name={"NVDA"}
+                description={"Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology"}
+                joinDate={"December 2021"}
+                location={"Bangkok, Thailand"}
+                tags={[]}
+                minInvestment={10000}
+                totalInvestor={58400}
+                totalRaised={9000000}
+              />
+            </Link>
             <ExtendableCard
-              name={"NVDA"}
-              description={"Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology"}
-              joinDate={"December 2021"}
-              location={"Bangkok, Thailand"}
+              name={"Apple Inc."}
+              description={
+                "Founded in 1976, Apple Inc. is a leading innovator in consumer electronics, software, and online services, known for products like the iPhone, MacBook, and the App Store."
+              }
+              joinDate={"February 2020"}
+              location={"Cupertino, California, USA"}
               tags={[]}
               minInvestment={10000}
               totalInvestor={58400}
               totalRaised={9000000}
             />
-          </Link>
-          <ExtendableCard
-            name={"Apple Inc."}
-            description={
-              "Founded in 1976, Apple Inc. is a leading innovator in consumer electronics, software, and online services, known for products like the iPhone, MacBook, and the App Store."
-            }
-            joinDate={"February 2020"}
-            location={"Cupertino, California, USA"}
-            tags={[]}
-            minInvestment={10000}
-            totalInvestor={58400}
-            totalRaised={9000000}
-          />
-          <ExtendableCard
-            name={"Google LLC"}
-            description={
-              "Founded in 1998, Google LLC specializes in internet-related services and products, including search engines, online advertising, cloud computing, and the Android operating system."
-            }
-            joinDate={"April 2019"}
-            location={"Mountain View, California, USA"}
-            tags={[]}
-            minInvestment={10000}
-            totalInvestor={5000}
-            totalRaised={1500000000}
-          />
-          <ExtendableCard
-            name={"Microsoft Corporation"}
-            description={"Microsoft Corporation is a multinational technology company."}
-            joinDate={"January 2018"}
-            location={"California, USA"}
-            tags={[]}
-            minInvestment={250}
-            totalInvestor={5000}
-            totalRaised={1500000}
-          />
-        </div>
-        <div className="self-center py-5 scale-75 md:scale-100">
-          <Button>
-            <Link href={"/deals"}>View all</Link>
-          </Button>
+            <ExtendableCard
+              name={"Google LLC"}
+              description={
+                "Founded in 1998, Google LLC specializes in internet-related services and products, including search engines, online advertising, cloud computing, and the Android operating system."
+              }
+              joinDate={"April 2019"}
+              location={"Mountain View, California, USA"}
+              tags={[]}
+              minInvestment={10000}
+              totalInvestor={5000}
+              totalRaised={1500000000}
+            />
+            <ExtendableCard
+              name={"Microsoft Corporation"}
+              description={"Microsoft Corporation is a multinational technology company."}
+              joinDate={"January 2018"}
+              location={"California, USA"}
+              tags={[]}
+              minInvestment={250}
+              totalInvestor={5000}
+              totalRaised={1500000}
+            />
+          </div>
+          <div className="self-center py-5 scale-75 md:scale-100">
+            <Button>
+              <Link href={"/deals"}>View all</Link>
+            </Button>
+          </div>
         </div>
       </div>
     </main>
diff --git a/src/components/extendableCard.tsx b/src/components/extendableCard.tsx
index ba5e649..7af4377 100644
--- a/src/components/extendableCard.tsx
+++ b/src/components/extendableCard.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { CalendarDaysIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
 import Image from "next/image";
 
 interface XMap {
@@ -13,62 +14,90 @@ interface ExtendableCardProps {
   joinDate: string;
   location: string;
   tags: XMap | null | never[] | string[];
+  imageUri: string | null;
   minInvestment: number;
   totalInvestor: number;
   totalRaised: number;
+  className?: string;
 }
 
 export function ExtendableCard(props: ExtendableCardProps) {
   return (
-    <div className="flex flex-col h-full group">
-      {/* Image */}
-      <div className="relative">
-        <Image src="/money.png" alt="Card image" width={400} height={300} layout="responsive" objectFit="cover" />
-        {/* Info 0 overlaps Image */}
-        <div className="group-hover:absolute group-hover:bottom-0 group-hover:left-0 group-hover:right-0 p-4 bg-opacity-75 bg-white transition-all duration-300 group-hover:bg-opacity-100 z-10">
-          <div className="font-semibold text-card-foreground transition-colors duration-1000 group-hover:text-primary">
-            {props.name}
+    <div
+      className={cn(
+        "flex flex-col group border-[1px] border-border relative hover:shadow-md rounded-xl h-[450px]",
+        props.className
+      )}>
+      <div className="flex flex-col h-full">
+        {/* Image */}
+        <div className="relative h-3/4 w-full">
+          {props.imageUri ? (
+            <Image
+              src={props.imageUri}
+              alt="Card image"
+              layout="fill"
+              className="rounded-t-xl bg-background dark:bg-background h-full"
+            />
+          ) : (
+            <Image
+              src="/money.png"
+              alt="Card image"
+              layout="fill"
+              className="rounded-t-xl bg-background dark:bg-background h-full"
+            />
+          )}
+        </div>
+        <div className="flex flex-col h-full justify-between">
+          {/* Info 0 overlaps Image */}
+          <div className="bg-background dark:bg-background transition-all ease-out transform group-hover:-translate-y-24 duration-1000 group-hover:bg-opacity-100 z-10 p-4">
+            <div className="font-semibold text-card-foreground transition-colors duration-1000 group-hover:text-primary">
+              {props.name}
+            </div>
+            <p className="text-sm text-muted-foreground line-clamp-3">{props.description}</p>
+          </div>
+
+          {/* Info 1 */}
+          <div>
+            <div className="transition-transform duration-500 transform opacity-100 group-hover:opacity-0 p-4">
+              <div className="flex items-center text-muted-foreground">
+                <span className="flex items-center gap-1">
+                  <CalendarDaysIcon width={20} />
+                  <div className="text-xs">Joined {props.joinDate}</div>
+                </span>
+              </div>
+              <div className="flex items-center text-muted-foreground">
+                <span className="text-xs">{props.location}</span>
+              </div>
+              <div className="flex flex-wrap mt-1 items-center text-muted-foreground">
+                {props.tags.map((tag) => (
+                  <span id="tag" key={tag} className="text-[10px] rounded-md bg-slate-200 dark:bg-slate-700 p-1 mr-1">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Info 2 */}
+          <div className="hidden group-hover:flex group-hover:absolute group-hover:bottom-4 p-4">
+            {/* Info 2 (Visible on hover) */}
+            <div className="transition-transform duration-500 transform translate-y-6 opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
+              <hr className="-ml-4 mb-2" />
+              <p className="text-base">
+                <strong>${props.totalRaised.toLocaleString()}</strong> committed and reserved
+              </p>
+              <hr className="-ml-4 mb-2 mt-2" />
+              <p className="mb-2 text-base">
+                <strong>{props.totalInvestor.toLocaleString()}</strong> investors
+              </p>
+              <hr className="-ml-4 mb-2" />
+              <p className="text-base">
+                <strong>${props.minInvestment.toLocaleString()}</strong> min. investment
+              </p>
+            </div>
           </div>
-          <p className="text-sm text-muted-foreground">{props.description}</p>
         </div>
       </div>
-      {/* Info 1 (Hidden on hover) */}
-      <div className="transition-opacity duration-300 group-hover:opacity-0">
-        <div className="mt-2 flex items-center text-muted-foreground">
-          <span className="flex items-center pt-2 gap-1">
-            <CalendarDaysIcon width={20} />
-            <div className="text-xs md:text-lg">Joined {props.joinDate}</div>
-          </span>
-        </div>
-        <div className="mt-2 flex items-center text-muted-foreground">
-          <span className="text-xs md:text-sm">{props.location}</span>
-        </div>
-        <div className="mt-2 flex flex-wrap items-center text-muted-foreground">
-          {props.tags.map((tag) => (
-            <span
-              id="tag"
-              key={tag}
-              className="text-[10px] md:text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1">
-              {tag}
-            </span>
-          ))}
-        </div>
-      </div>
-      {/* Info 2 (Visible on hover) */}
-      <div className="transition-transform duration-300 transform translate-y-6 opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
-        <hr className="-ml-4 mb-2" />
-        <p className="text-base">
-          <strong>${props.totalRaised.toLocaleString()}</strong> committed and reserved
-        </p>
-        <hr className="-ml-4 mb-2 mt-2" />
-        <p className="mb-2 text-base">
-          <strong>{props.totalInvestor.toLocaleString()}</strong> investors
-        </p>
-        <hr className="-ml-4 mb-2" />
-        <p className="text-base">
-          <strong>${props.minInvestment.toLocaleString()}</strong> min. investment
-        </p>
-      </div>
     </div>
   );
 }