From 0b7a9736438ec12eec7c1a78a60844a2d80c2a34 Mon Sep 17 00:00:00 2001
From: sirin <sirinza29@gmail.com>
Date: Sat, 5 Oct 2024 03:59:17 +0700
Subject: [PATCH] fix: make extendableCard and deals page more responsive

---
 src/app/deals/page.tsx            |  2 +-
 src/components/extendableCard.tsx | 76 ++++++++++++++-----------------
 2 files changed, 34 insertions(+), 44 deletions(-)

diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx
index 85a375b..ff09810 100644
--- a/src/app/deals/page.tsx
+++ b/src/app/deals/page.tsx
@@ -104,7 +104,7 @@ export default function Deals() {
         <p className="mt-3">The deals attracting the most interest right now</p>
       </div>
       {/* block for all the deals */}
-      <div className="ml-[15%] mt-10 grid grid-cols-3">
+      <div className="mx-[15%] mt-10 grid grid-cols-3">
         {filteredData.map((item, index) => (
           <ExtendableCard
             key={index}
diff --git a/src/components/extendableCard.tsx b/src/components/extendableCard.tsx
index f14665b..ba5e649 100644
--- a/src/components/extendableCard.tsx
+++ b/src/components/extendableCard.tsx
@@ -1,8 +1,9 @@
 "use client";
+
 import { CalendarDaysIcon } from "lucide-react";
+import Image from "next/image";
 
 interface XMap {
-  // tagName: colorCode
   [tag: string]: string;
 }
 
@@ -19,33 +20,30 @@ interface ExtendableCardProps {
 
 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 duration-500 hover:shadow-lg ">
-      <div className="aspect-[4/3] overflow-hidden">
-        <img
-          src="/money.png"
-          alt="Card image"
-          width="400"
-          height="300"
-          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
-          style={{ aspectRatio: "400/300", objectFit: "cover" }}
-        />
-      </div>
-      <div className="p-1 md:p-4">
-        <div className="text-sm md:text-lg font-semibold text-card-foreground transition-colors duration-500 group-hover:text-primary">
-          {props.name}
+    <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>
+          <p className="text-sm text-muted-foreground">{props.description}</p>
         </div>
-
-        {/* Default content (visible when not hovered) */}
-        <div className="mt-2 flex items-center text-muted-foreground group-hover:hidden">
+      </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 group-hover:hidden">
+        <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 group-hover:hidden">
+        <div className="mt-2 flex flex-wrap items-center text-muted-foreground">
           {props.tags.map((tag) => (
             <span
               id="tag"
@@ -55,29 +53,21 @@ export function ExtendableCard(props: ExtendableCardProps) {
             </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-1000 ease-in-out">
-          <p className="text-xs md: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">
-              <div>
-                <hr className="w-screen -ml-4 mb-2" />
-                <p className="text-xs md:text-base">
-                  <strong>${props.totalRaised.toLocaleString()}</strong> committed and reserved
-                </p>
-                <hr className="w-screen -ml-4 mb-2 mt-2" />
-                <p className="mb-2 text-xs md:text-base">
-                  <strong>{props.totalInvestor.toLocaleString()}</strong> investors
-                </p>
-                <hr className="w-screen -ml-4 mb-2" />
-                <p className="text-xs md:text-base">
-                  <strong>${props.minInvestment.toLocaleString()}</strong> min. investment
-                </p>
-              </div>
-            </div>
-          </div>
-        </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>
   );