From a7f088fb631f6f1ea196ccd7d4826d9c68f25110 Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Wed, 11 Mar 2026 22:41:52 +0100
Subject: [PATCH 1/4] Card initial commit

---
 src/app/page.tsx           | 14 +++++++-
 src/components/ui/card.tsx | 74 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/card.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ecc1240..e625073 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,7 @@
-import { Users } from "lucide-react"
+import { CropIcon, Users } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { ButtonWithIcon } from "@/components/ui/buttonWithIcon"
+import { Card, CardAction, CardBottomButton, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 
 export default function Home() {
   return (
@@ -17,6 +18,17 @@ export default function Home() {
         <ButtonWithIcon variant="tertiaryBlur" icon={Users} iconPosition="left" text="Diventa socio" />
         <Button variant="link">Link</Button>
       </div>
+
+      <Card className="w-64">
+        <CardHeader>
+          <CardTitle>Card Title</CardTitle>
+          <CardAction icon={CropIcon}></CardAction>
+        </CardHeader>
+        <CardContent>
+          <p>description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.</p>
+        </CardContent>
+        <CardBottomButton variant="tertiary">Button</CardBottomButton>
+      </Card>
     </main>
   )
 }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..630278a
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,74 @@
+import type { LucideIcon } from "lucide-react"
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { Glass } from "../glass"
+import { Button } from "./button"
+
+function Card({ className, size = "default", ...props }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <Glass
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl text-sm has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "gap-1 rounded-t-xl group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props} />
+}
+
+function CardAction({ className, icon: Icon, ...props }: React.ComponentProps<"div"> & { icon: LucideIcon }) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      {...props}
+    >
+      <Icon />
+    </div>
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("group-data-[size=sm]/card:px-3", className)} {...props} />
+}
+
+function CardBottomButton({ className, ...props }: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="card-footer"
+      className={cn("self-end", className)}
+      {...props}
+    />
+  )
+}
+
+export { Card, CardHeader, CardBottomButton, CardTitle, CardAction, CardDescription, CardContent }

From cb61f097a8b285d4dd5aa5b287c924f5161d85a3 Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Wed, 11 Mar 2026 23:57:19 +0100
Subject: [PATCH 2/4] Text and icon gradients

---
 src/app/page.tsx           | 11 +++++++----
 src/components/ui/card.tsx | 35 +++++++++++++++++++++++------------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e625073..f3feec5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 import { CropIcon, Users } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { ButtonWithIcon } from "@/components/ui/buttonWithIcon"
-import { Card, CardAction, CardBottomButton, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardAction, CardBottomButton, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
 export default function Home() {
   return (
@@ -21,13 +21,16 @@ export default function Home() {
 
       <Card className="w-64">
         <CardHeader>
-          <CardTitle>Card Title</CardTitle>
+          <CardTitle>Title</CardTitle>
           <CardAction icon={CropIcon}></CardAction>
         </CardHeader>
         <CardContent>
-          <p>description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.</p>
+          <p>
+            description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut
+            labore et dolore magna aliqua.
+          </p>
         </CardContent>
-        <CardBottomButton variant="tertiary">Button</CardBottomButton>
+        <CardBottomButton variant="tertiary">Label</CardBottomButton>
       </Card>
     </main>
   )
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 630278a..82cfe0e 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,10 +1,14 @@
 import type { LucideIcon } from "lucide-react"
-import type * as React from "react"
+import * as React from "react"
 import { cn } from "@/lib/utils"
 import { Glass } from "../glass"
 import { Button } from "./button"
 
-function Card({ className, size = "default", ...props }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof Glass> & { size?: "default" | "sm" }) {
   return (
     <Glass
       data-slot="card"
@@ -35,7 +39,10 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-title"
-      className={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
+      className={cn(
+        "text-xl leading-snug font-medium group-data-[size=sm]/card:text-base bg-linear-to-b from-blue-600 to-cyan-500 bg-clip-text text-transparent",
+        className
+      )}
       {...props}
     />
   )
@@ -46,13 +53,23 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 function CardAction({ className, icon: Icon, ...props }: React.ComponentProps<"div"> & { icon: LucideIcon }) {
+  const gradientId = React.useId()
+
   return (
     <div
       data-slot="card-action"
-      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end ", className)}
       {...props}
     >
-      <Icon />
+      <svg width="0" height="0" className="absolute">
+        <title>Icon gradient helper</title>
+        <linearGradient id={gradientId} x1="0%" y1="100%" x2="0%" y2="0%">
+          <stop offset="0%" className="text-blue-600" stopColor="currentColor" />
+          <stop offset="100%" className="text-cyan-500" stopColor="currentColor" />
+        </linearGradient>
+      </svg>
+
+      <Icon size={28} stroke={`url(#${gradientId})`} />
     </div>
   )
 }
@@ -62,13 +79,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 function CardBottomButton({ className, ...props }: React.ComponentProps<typeof Button>) {
-  return (
-    <Button
-      data-slot="card-footer"
-      className={cn("self-end", className)}
-      {...props}
-    />
-  )
+  return <Button data-slot="card-footer" className={cn("self-end", className)} {...props} />
 }
 
 export { Card, CardHeader, CardBottomButton, CardTitle, CardAction, CardDescription, CardContent }

From 2e3f23d302dcee1a12eb953729c994d5798646f0 Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Thu, 12 Mar 2026 00:13:34 +0100
Subject: [PATCH 3/4] Used figma classes

---
 src/components/ui/card.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 82cfe0e..516f553 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -40,7 +40,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-title"
       className={cn(
-        "text-xl leading-snug font-medium group-data-[size=sm]/card:text-base bg-linear-to-b from-blue-600 to-cyan-500 bg-clip-text text-transparent",
+        "text-xl leading-snug font-medium group-data-[size=sm]/card:text-base bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent",
         className
       )}
       {...props}
@@ -64,8 +64,8 @@ function CardAction({ className, icon: Icon, ...props }: React.ComponentProps<"d
       <svg width="0" height="0" className="absolute">
         <title>Icon gradient helper</title>
         <linearGradient id={gradientId} x1="0%" y1="100%" x2="0%" y2="0%">
-          <stop offset="0%" className="text-blue-600" stopColor="currentColor" />
-          <stop offset="100%" className="text-cyan-500" stopColor="currentColor" />
+          <stop offset="0%" className="text-blue-secondary" stopColor="currentColor" />
+          <stop offset="100%" className="text-blue-primary" stopColor="currentColor" />
         </linearGradient>
       </svg>
 

From d4975c01da5387e829d5062149dd19940353f286 Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Tue, 17 Mar 2026 23:01:11 +0100
Subject: [PATCH 4/4] Moved card.tsx to components/ui/cards

---
 src/app/page.tsx                       | 17 +----------------
 src/components/ui/{ => cards}/card.tsx |  4 ++--
 2 files changed, 3 insertions(+), 18 deletions(-)
 rename src/components/ui/{ => cards}/card.tsx (97%)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f3feec5..ecc1240 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,6 @@
-import { CropIcon, Users } from "lucide-react"
+import { Users } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { ButtonWithIcon } from "@/components/ui/buttonWithIcon"
-import { Card, CardAction, CardBottomButton, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
 export default function Home() {
   return (
@@ -18,20 +17,6 @@ export default function Home() {
         <ButtonWithIcon variant="tertiaryBlur" icon={Users} iconPosition="left" text="Diventa socio" />
         <Button variant="link">Link</Button>
       </div>
-
-      <Card className="w-64">
-        <CardHeader>
-          <CardTitle>Title</CardTitle>
-          <CardAction icon={CropIcon}></CardAction>
-        </CardHeader>
-        <CardContent>
-          <p>
-            description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut
-            labore et dolore magna aliqua.
-          </p>
-        </CardContent>
-        <CardBottomButton variant="tertiary">Label</CardBottomButton>
-      </Card>
     </main>
   )
 }
diff --git a/src/components/ui/card.tsx b/src/components/ui/cards/card.tsx
similarity index 97%
rename from src/components/ui/card.tsx
rename to src/components/ui/cards/card.tsx
index 516f553..212585d 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/cards/card.tsx
@@ -1,8 +1,8 @@
 import type { LucideIcon } from "lucide-react"
 import * as React from "react"
 import { cn } from "@/lib/utils"
-import { Glass } from "../glass"
-import { Button } from "./button"
+import { Glass } from "../../glass"
+import { Button } from "../button"
 
 function Card({
   className,