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/7] 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/7] 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/7] 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/7] 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,

From c7e7edc30038c62c220d42216e11b8b3817ddb0e Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Tue, 17 Mar 2026 23:03:47 +0100
Subject: [PATCH 5/7] created cardCaption.tsx

---
 src/components/ui/cards/cardCaption.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/components/ui/cards/cardCaption.tsx

diff --git a/src/components/ui/cards/cardCaption.tsx b/src/components/ui/cards/cardCaption.tsx
new file mode 100644
index 0000000..79b9a25
--- /dev/null
+++ b/src/components/ui/cards/cardCaption.tsx
@@ -0,0 +1,16 @@
+import type { LucideIcon } from "lucide-react"
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from "./card"
+
+export function CardCaption({ title, description, icon }: { title: string; description: string; icon: LucideIcon }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardAction icon={icon}></CardAction>
+      </CardHeader>
+      <CardContent>
+        <p>{description}</p>
+      </CardContent>
+    </Card>
+  )
+}

From ba908ea33598a6fad4c43f0d6d7c7497c14d4502 Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Wed, 18 Mar 2026 00:15:54 +0100
Subject: [PATCH 6/7] Updated card-caption to use react-icons

---
 package.json                            |  3 ++-
 pnpm-lock.yaml                          | 12 ++++++++++++
 src/app/page.tsx                        | 16 +++++++++++++++
 src/components/card-caption.tsx         | 26 +++++++++++++++++++++++++
 src/components/ui/{cards => }/card.tsx  | 21 ++++++++++++++------
 src/components/ui/cards/cardCaption.tsx | 16 ---------------
 6 files changed, 71 insertions(+), 23 deletions(-)
 create mode 100644 src/components/card-caption.tsx
 rename src/components/ui/{cards => }/card.tsx (76%)
 delete mode 100644 src/components/ui/cards/cardCaption.tsx

diff --git a/package.json b/package.json
index a42c193..c3efba7 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-hook-form": "^7.68.0",
+    "react-icons": "^5.6.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^4.2.1"
@@ -44,7 +45,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   },
-  "packageManager": "pnpm@10.17.1",
+  "packageManager": "pnpm@10.32.1",
   "engines": {
     "node": ">=24.5.2"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d138111..e3ff7d2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,6 +56,9 @@ importers:
       react-hook-form:
         specifier: ^7.68.0
         version: 7.68.0(react@19.2.3)
+      react-icons:
+        specifier: ^5.6.0
+        version: 5.6.0(react@19.2.3)
       tailwind-merge:
         specifier: ^3.4.0
         version: 3.4.0
@@ -1035,6 +1038,11 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
 
+  react-icons@5.6.0:
+    resolution: {integrity: sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==}
+    peerDependencies:
+      react: '*'
+
   react-remove-scroll-bar@2.3.8:
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
@@ -1904,6 +1912,10 @@ snapshots:
     dependencies:
       react: 19.2.3
 
+  react-icons@5.6.0(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+
   react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.2.3):
     dependencies:
       react: 19.2.3
diff --git a/src/app/page.tsx b/src/app/page.tsx
index ecc1240..3d84309 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,6 @@
 import { Users } from "lucide-react"
+import { FaBookBookmark } from "react-icons/fa6"
+import { CardCaption } from "@/components/card-caption"
 import { Button } from "@/components/ui/button"
 import { ButtonWithIcon } from "@/components/ui/buttonWithIcon"
 
@@ -17,6 +19,20 @@ export default function Home() {
         <ButtonWithIcon variant="tertiaryBlur" icon={Users} iconPosition="left" text="Diventa socio" />
         <Button variant="link">Link</Button>
       </div>
+      <div className="flex gap-4">
+        <CardCaption
+          title="CardCaption 1"
+          caption="Beccatevi questo lorem ipsum dolor sit amet: lorem ipsum dolor sit amet"
+          icon={FaBookBookmark}
+          iconPosition="right"
+        ></CardCaption>
+        <CardCaption
+          title="CardCaption 2"
+          caption="Beccatevi questo lorem ipsum dolor sit amet: lorem ipsum dolor sit amet"
+          icon={FaBookBookmark}
+          iconPosition="top"
+        ></CardCaption>
+      </div>
     </main>
   )
 }
diff --git a/src/components/card-caption.tsx b/src/components/card-caption.tsx
new file mode 100644
index 0000000..78ede55
--- /dev/null
+++ b/src/components/card-caption.tsx
@@ -0,0 +1,26 @@
+import type { IconType } from "react-icons"
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from "./ui/card"
+
+export function CardCaption({
+  title,
+  caption,
+  icon,
+  iconPosition = "right",
+}: {
+  title: string
+  caption: string
+  icon?: IconType
+  iconPosition?: "top" | "right"
+}) {
+  return (
+    <Card>
+      <CardHeader className={`flex ${iconPosition === "right" ? "justify-between" : "flex-col-reverse"}`}>
+        <CardTitle>{title}</CardTitle>
+        {icon && <CardAction icon={icon} iconSize={iconPosition === "right" ? "normal" : "large"}></CardAction>}
+      </CardHeader>
+      <CardContent>
+        <p>{caption}</p>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/src/components/ui/cards/card.tsx b/src/components/ui/card.tsx
similarity index 76%
rename from src/components/ui/cards/card.tsx
rename to src/components/ui/card.tsx
index 212585d..5fdc386 100644
--- a/src/components/ui/cards/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,8 +1,8 @@
-import type { LucideIcon } from "lucide-react"
 import * as React from "react"
+import type { IconType } from "react-icons"
 import { cn } from "@/lib/utils"
-import { Glass } from "../../glass"
-import { Button } from "../button"
+import { Glass } from "../glass"
+import { Button } from "./button"
 
 function Card({
   className,
@@ -14,7 +14,7 @@ function Card({
       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",
+        "w-78 h-66 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}
@@ -52,7 +52,12 @@ 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 }) {
+function CardAction({
+  className,
+  icon: Icon,
+  iconSize = "normal",
+  ...props
+}: React.ComponentProps<"div"> & { icon: IconType; iconSize: "normal" | "large" }) {
   const gradientId = React.useId()
 
   return (
@@ -69,7 +74,11 @@ function CardAction({ className, icon: Icon, ...props }: React.ComponentProps<"d
         </linearGradient>
       </svg>
 
-      <Icon size={28} stroke={`url(#${gradientId})`} />
+      <Icon
+        size={iconSize === "normal" ? "2rem" : "3.5rem"}
+        fill={`url(#${gradientId})`}
+        stroke={`url(#${gradientId})`}
+      />
     </div>
   )
 }
diff --git a/src/components/ui/cards/cardCaption.tsx b/src/components/ui/cards/cardCaption.tsx
deleted file mode 100644
index 79b9a25..0000000
--- a/src/components/ui/cards/cardCaption.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { LucideIcon } from "lucide-react"
-import { Card, CardAction, CardContent, CardHeader, CardTitle } from "./card"
-
-export function CardCaption({ title, description, icon }: { title: string; description: string; icon: LucideIcon }) {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{title}</CardTitle>
-        <CardAction icon={icon}></CardAction>
-      </CardHeader>
-      <CardContent>
-        <p>{description}</p>
-      </CardContent>
-    </Card>
-  )
-}

From 53c372f7a57645a774fbe0a6341a66c36c5891a1 Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Wed, 18 Mar 2026 00:33:26 +0100
Subject: [PATCH 7/7] Adjusted font sizes

---
 src/app/page.tsx           |  2 +-
 src/components/ui/card.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3d84309..03a15b9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -21,7 +21,7 @@ export default function Home() {
       </div>
       <div className="flex gap-4">
         <CardCaption
-          title="CardCaption 1"
+          title="Title"
           caption="Beccatevi questo lorem ipsum dolor sit amet: lorem ipsum dolor sit amet"
           icon={FaBookBookmark}
           iconPosition="right"
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 5fdc386..22bd15a 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-secondary to-blue-primary bg-clip-text text-transparent",
+        "text-[1.5rem] 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}
@@ -84,7 +84,13 @@ function CardAction({
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="card-content" className={cn("group-data-[size=sm]/card:px-3", className)} {...props} />
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("text-[.875rem] group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
 }
 
 function CardBottomButton({ className, ...props }: React.ComponentProps<typeof Button>) {