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 01/20] 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 02/20] 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 03/20] 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 04/20] 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 4b4056a44b31e0a882ee922cf62624638d129783 Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Thu, 2 Apr 2026 14:17:39 +0200
Subject: [PATCH 05/20] refactor: move card.tsx into ui

---
 src/components/ui/{cards => }/card.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/ui/{cards => }/card.tsx (100%)

diff --git a/src/components/ui/cards/card.tsx b/src/components/ui/card.tsx
similarity index 100%
rename from src/components/ui/cards/card.tsx
rename to src/components/ui/card.tsx

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

---
 src/app/page.tsx           | 44 +++++++++++++++++++++--
 src/components/ui/card.tsx | 74 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ui/card.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7422510..365e080 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,45 @@
-import { Hero } from "@/components/home/hero"
+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 <Hero />
+  return (
+    <main className="container mx-auto px-4 py-8">
+      <h2 className="mb-4 typo-headline-large font-bold bg">Welcome to PoliNetwork</h2>
+      <p className="mb-4">
+        PoliNetwork is a student association dedicated to connecting and supporting students at Politecnico.
+      </p>
+      <div className="bg-red rounded-rectangles w-90 py-8 flex justify-center items-center flex-col gap-2">
+        <p className="text-text-accent-darkbg typo-body-medium">Test with figma variables</p>
+        <div className="bg-background-blur w-20 h-20 rounded-images" />
+        <ButtonWithIcon variant="primary" icon={Users} iconPosition="left" text="Diventa socio" />
+        <ButtonWithIcon variant="tertiary" icon={Users} iconPosition="right" text="Diventa socio" />
+        <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 260de21ac5cca902725d17085811522385b42a31 Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Wed, 11 Mar 2026 23:57:19 +0100
Subject: [PATCH 07/20] Text and icon gradients

---
 src/app/page.tsx           | 14 +++-----------
 src/components/ui/card.tsx | 35 +++++++++++++++++++++++------------
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 365e080..f3feec5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,15 +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 (
@@ -29,7 +21,7 @@ export default function Home() {
 
       <Card className="w-64">
         <CardHeader>
-          <CardTitle>Card Title</CardTitle>
+          <CardTitle>Title</CardTitle>
           <CardAction icon={CropIcon}></CardAction>
         </CardHeader>
         <CardContent>
@@ -38,7 +30,7 @@ export default function Home() {
             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 714bf5a45afe33a8a8512b2172cd64b8e0dc379d Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Thu, 12 Mar 2026 00:13:34 +0100
Subject: [PATCH 08/20] 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 9d80222ef9dbb9442d206e82c6da08ec47fcdd52 Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Tue, 17 Mar 2026 23:01:11 +0100
Subject: [PATCH 09/20] 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 74b88855d8a58a58fc0bd31e437c4ab127b06a3f Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Thu, 2 Apr 2026 14:17:39 +0200
Subject: [PATCH 10/20] refactor: move card.tsx into ui

---
 src/components/ui/{cards => }/card.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/ui/{cards => }/card.tsx (100%)

diff --git a/src/components/ui/cards/card.tsx b/src/components/ui/card.tsx
similarity index 100%
rename from src/components/ui/cards/card.tsx
rename to src/components/ui/card.tsx

From 95497acd889a640e54979d789ae888c312b7e7e3 Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Thu, 2 Apr 2026 16:14:49 +0200
Subject: [PATCH 11/20] chore: biome; fix: imports

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

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ecc1240..9e2bb5a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,13 +5,13 @@ import { ButtonWithIcon } from "@/components/ui/buttonWithIcon"
 export default function Home() {
   return (
     <main className="container mx-auto px-4 py-8">
-      <h2 className="mb-4 typo-headline-large font-bold bg">Welcome to PoliNetwork</h2>
+      <h2 className="typo-headline-large bg mb-4 font-bold">Welcome to PoliNetwork</h2>
       <p className="mb-4">
         PoliNetwork is a student association dedicated to connecting and supporting students at Politecnico.
       </p>
-      <div className="bg-red rounded-rectangles w-90 py-8 flex justify-center items-center flex-col gap-2">
-        <p className="text-text-accent-darkbg typo-body-medium">Test with figma variables</p>
-        <div className="bg-background-blur w-20 h-20 rounded-images" />
+      <div className="flex w-90 flex-col items-center justify-center gap-2 rounded-rectangles bg-red py-8">
+        <p className="typo-body-medium text-text-accent-darkbg">Test with figma variables</p>
+        <div className="h-20 w-20 rounded-images bg-background-blur" />
         <ButtonWithIcon variant="primary" icon={Users} iconPosition="left" text="Diventa socio" />
         <ButtonWithIcon variant="tertiary" icon={Users} iconPosition="right" text="Diventa socio" />
         <ButtonWithIcon variant="tertiaryBlur" icon={Users} iconPosition="left" text="Diventa socio" />
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 212585d..dd0d35e 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/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,
@@ -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",
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card text-card-foreground text-sm ring-foreground/10 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",
         className
       )}
       {...props}
@@ -27,7 +27,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <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]",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
         className
       )}
       {...props}
@@ -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",
+        "bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text font-medium text-transparent text-xl leading-snug group-data-[size=sm]/card:text-base",
         className
       )}
       {...props}
@@ -58,7 +58,7 @@ function CardAction({ className, icon: Icon, ...props }: React.ComponentProps<"d
   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}
     >
       <svg width="0" height="0" className="absolute">

From 8d16fc7865ad12d7111e7fc70002f2efb4439ca3 Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Thu, 9 Apr 2026 13:33:41 +0200
Subject: [PATCH 12/20] aligned card.tsx between all cards

---
 src/components/ui/card.tsx | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index dd0d35e..8dff6cd 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,5 +1,5 @@
-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"
@@ -14,7 +14,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card text-card-foreground text-sm ring-foreground/10 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 h-66 w-78 flex-col gap-4 overflow-hidden rounded-[1.25rem] bg-card text-card-foreground text-sm ring-foreground/10 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",
         className
       )}
       {...props}
@@ -40,7 +40,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-title"
       className={cn(
-        "bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text font-medium text-transparent text-xl leading-snug group-data-[size=sm]/card:text-base",
+        "bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text font-medium text-[1.5rem] text-transparent leading-snug group-data-[size=sm]/card:text-base",
         className
       )}
       {...props}
@@ -52,13 +52,18 @@ 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: "small" | "normal" | "large" }) {
   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-auto justify-self-end", className)}
       {...props}
     >
       <svg width="0" height="0" className="absolute">
@@ -69,13 +74,23 @@ function CardAction({ className, icon: Icon, ...props }: React.ComponentProps<"d
         </linearGradient>
       </svg>
 
-      <Icon size={28} stroke={`url(#${gradientId})`} />
+      <Icon
+        size={iconSize === "small" ? "1.125rem" : iconSize === "normal" ? "2rem" : "3.5rem"}
+        fill={`url(#${gradientId})`}
+        stroke={`url(#${gradientId})`}
+      />
     </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} />
+  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>) {

From 6a72e2709676e0f8f5dcf24f97aa3eeeec0e2f9b Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Thu, 9 Apr 2026 16:35:52 +0200
Subject: [PATCH 13/20] feat: optional gradient

---
 src/components/ui/card.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 8dff6cd..8374591 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -35,12 +35,12 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+function CardTitle({ gradient = true, className, ...props }: React.ComponentProps<"div"> & { gradient?: boolean }) {
   return (
     <div
       data-slot="card-title"
       className={cn(
-        "bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text font-medium text-[1.5rem] text-transparent leading-snug group-data-[size=sm]/card:text-base",
+        `${gradient ? "bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text" : ""} font-medium text-[1.5rem] leading-snug group-data-[size=sm]/card:text-base`,
         className
       )}
       {...props}
@@ -56,8 +56,9 @@ function CardAction({
   className,
   icon: Icon,
   iconSize = "normal",
+  gradient = true,
   ...props
-}: React.ComponentProps<"div"> & { icon: IconType; iconSize: "small" | "normal" | "large" }) {
+}: React.ComponentProps<"div"> & { icon: IconType; iconSize: "small" | "normal" | "large"; gradient?: boolean }) {
   const gradientId = React.useId()
 
   return (
@@ -66,18 +67,20 @@ function CardAction({
       className={cn("col-start-2 row-span-2 row-start-1 self-auto justify-self-end", className)}
       {...props}
     >
-      <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-secondary" stopColor="currentColor" />
-          <stop offset="100%" className="text-blue-primary" stopColor="currentColor" />
-        </linearGradient>
-      </svg>
+      {gradient && (
+        <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-secondary" stopColor="currentColor" />
+            <stop offset="100%" className="text-blue-primary" stopColor="currentColor" />
+          </linearGradient>
+        </svg>
+      )}
 
       <Icon
         size={iconSize === "small" ? "1.125rem" : iconSize === "normal" ? "2rem" : "3.5rem"}
-        fill={`url(#${gradientId})`}
-        stroke={`url(#${gradientId})`}
+        fill={gradient ? `url(#${gradientId})` : "currentColor"}
+        stroke={gradient ? `url(#${gradientId})` : "currentColor"}
       />
     </div>
   )

From 6c2c5cd4063312082e7cedae8143f4b95570b1bf Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Thu, 9 Apr 2026 16:52:33 +0200
Subject: [PATCH 14/20] fix: text transparency to see gradient

---
 src/components/ui/card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 8374591..3f0df53 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -40,7 +40,7 @@ function CardTitle({ gradient = true, className, ...props }: React.ComponentProp
     <div
       data-slot="card-title"
       className={cn(
-        `${gradient ? "bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text" : ""} font-medium text-[1.5rem] leading-snug group-data-[size=sm]/card:text-base`,
+        `${gradient ? "bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent" : ""} font-medium text-[1.5rem] leading-snug group-data-[size=sm]/card:text-base`,
         className
       )}
       {...props}

From cef8d1d6b60b59763f8dd0605d8e6644ab952bb6 Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Thu, 9 Apr 2026 17:11:50 +0200
Subject: [PATCH 15/20] feat: added bg-background-blur to all cards

---
 src/components/ui/card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 3f0df53..9f9323b 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -14,7 +14,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex h-66 w-78 flex-col gap-4 overflow-hidden rounded-[1.25rem] bg-card text-card-foreground text-sm ring-foreground/10 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 h-66 w-78 flex-col gap-4 overflow-hidden rounded-[1.25rem] bg-background-blur text-card-foreground text-sm ring-foreground/10 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",
         className
       )}
       {...props}

From f4d4bcf1ac61b0dc4e48f888220ef33cabe1a089 Mon Sep 17 00:00:00 2001
From: Alessandro Giuseppe Gioia <alessandroogioiaa@gmail.com>
Date: Thu, 9 Apr 2026 19:27:18 +0200
Subject: [PATCH 16/20] feat: add card-caption (#48)

* created cardCaption.tsx

* Updated card-caption to use react-icons

* Adjusted font sizes

* Updated card-caption to use react-icons

* Adjusted font sizes

* chore: biome

* feat: typography

* aligned card.tsx between all cards

* fix: homepage cards layout

* chore: biome
---
 src/app/page.tsx                | 16 ++++++++++++++++
 src/components/card-caption.tsx | 28 ++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 src/components/card-caption.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 62c7213..363ffcd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,6 @@
+import { FaBookBookmark } from "react-icons/fa6"
 import { FiBook, FiBookOpen, FiClipboard, FiFileText, FiPenTool, FiTriangle, FiUploadCloud } from "react-icons/fi"
+import { CardCaption } from "@/components/card-caption"
 import { CardIcon } from "@/components/card-icon"
 import { Hero } from "@/components/home/hero"
 
@@ -55,6 +57,20 @@ export default function Home() {
             ))}
           </div>
         </section>
+        <section className="flex gap-4">
+          <CardCaption
+            title="Title"
+            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>
+        </section>
       </div>
     </main>
   )
diff --git a/src/components/card-caption.tsx b/src/components/card-caption.tsx
new file mode 100644
index 0000000..0fbc179
--- /dev/null
+++ b/src/components/card-caption.tsx
@@ -0,0 +1,28 @@
+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={`typo-headline-medium flex ${iconPosition === "right" ? "justify-between" : "flex-col-reverse"}`}
+      >
+        <CardTitle>{title}</CardTitle>
+        {icon && <CardAction icon={icon} iconSize={iconPosition === "right" ? "normal" : "large"}></CardAction>}
+      </CardHeader>
+      <CardContent className="typo-body-medium">
+        <p>{caption}</p>
+      </CardContent>
+    </Card>
+  )
+}

From 7124c21b992d0ea8501572fc1f1ec493d62d8e85 Mon Sep 17 00:00:00 2001
From: Alessandro Giuseppe Gioia <alessandroogioiaa@gmail.com>
Date: Thu, 9 Apr 2026 21:27:47 +0200
Subject: [PATCH 17/20] feat: add card-path-selection (#56)

* created cardCaption.tsx

* Updated card-caption to use react-icons

* Adjusted font sizes

* Added path selection cards

* chore: biome

* Updated card-caption to use react-icons

* Adjusted font sizes

* Added path selection cards

* chore: biome

* rm: card-caption from this branch

* fix: typography

* fix: imports and home layout

* remove: bg-background-blur
---
 src/app/page.tsx                       |  7 ++++++-
 src/components/card-path-selection.tsx | 14 ++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 src/components/card-path-selection.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 363ffcd..3dde0ef 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,6 +2,7 @@ import { FaBookBookmark } from "react-icons/fa6"
 import { FiBook, FiBookOpen, FiClipboard, FiFileText, FiPenTool, FiTriangle, FiUploadCloud } from "react-icons/fi"
 import { CardCaption } from "@/components/card-caption"
 import { CardIcon } from "@/components/card-icon"
+import { CardPathSelection } from "@/components/card-path-selection"
 import { Hero } from "@/components/home/hero"
 
 const schoolCards = [
@@ -57,7 +58,11 @@ export default function Home() {
             ))}
           </div>
         </section>
-        <section className="flex gap-4">
+        <section className="flex flex-row gap-6">
+          <CardPathSelection caption="Triennale (o Ciclo Unico)"></CardPathSelection>
+          <CardPathSelection caption="Magistrale"></CardPathSelection>
+        </section>
+        <section className="flex flex-row gap-4">
           <CardCaption
             title="Title"
             caption="Beccatevi questo lorem ipsum dolor sit amet: lorem ipsum dolor sit amet"
diff --git a/src/components/card-path-selection.tsx b/src/components/card-path-selection.tsx
new file mode 100644
index 0000000..c603fa5
--- /dev/null
+++ b/src/components/card-path-selection.tsx
@@ -0,0 +1,14 @@
+import type { IconType } from "react-icons"
+import { BsBook } from "react-icons/bs"
+import { Card, CardAction, CardContent } from "./ui/card"
+
+export function CardPathSelection({ caption, icon: Icon = BsBook }: { caption: string; icon?: IconType }) {
+  return (
+    <Card className="h-fit w-136 px-10 py-7.5">
+      <CardContent className="typo-body-large flex flex-row items-center justify-center gap-1.25 whitespace-nowrap font-normal leading-6 tracking-[0.03125rem]">
+        <CardAction icon={Icon} iconSize="small" /> {caption}
+      </CardContent>
+    </Card>
+    //TODO: add hover effect
+  )
+}

From 97a3005ebe12b90e06307e81c3953d4434470db0 Mon Sep 17 00:00:00 2001
From: Alessandro Giuseppe Gioia <alessandroogioiaa@gmail.com>
Date: Thu, 9 Apr 2026 21:30:57 +0200
Subject: [PATCH 18/20] feat: add card-course (#63)

* feat: card-groups initial commit

* fix: spacing between elements

* chore: biome

* fix: homepage layout for cards

* remove: bg-background-blur

* chore: biome
---
 src/app/page.tsx               |  7 +++++++
 src/components/card-course.tsx | 36 ++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 src/components/card-course.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3dde0ef..19367f1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,7 @@
 import { FaBookBookmark } from "react-icons/fa6"
 import { FiBook, FiBookOpen, FiClipboard, FiFileText, FiPenTool, FiTriangle, FiUploadCloud } from "react-icons/fi"
 import { CardCaption } from "@/components/card-caption"
+import { CardCourse } from "@/components/card-course"
 import { CardIcon } from "@/components/card-icon"
 import { CardPathSelection } from "@/components/card-path-selection"
 import { Hero } from "@/components/home/hero"
@@ -58,6 +59,12 @@ export default function Home() {
             ))}
           </div>
         </section>
+        <section>
+          <CardCourse courseName="Ingegneria Informatica" />
+          <CardCourse courseName="Ingegneria Elettrica" />
+          <CardCourse courseName="Ingegneria Gestionale" />
+          <CardCourse courseName="Ingegneria Chimica" />
+        </section>
         <section className="flex flex-row gap-6">
           <CardPathSelection caption="Triennale (o Ciclo Unico)"></CardPathSelection>
           <CardPathSelection caption="Magistrale"></CardPathSelection>
diff --git a/src/components/card-course.tsx b/src/components/card-course.tsx
new file mode 100644
index 0000000..52c1fd8
--- /dev/null
+++ b/src/components/card-course.tsx
@@ -0,0 +1,36 @@
+import type { IconType } from "react-icons"
+import { CiGlobe } from "react-icons/ci"
+import { FaAngleRight } from "react-icons/fa6"
+import { IoLocationOutline } from "react-icons/io5"
+import { Card, CardAction, CardContent } from "./ui/card"
+
+export function CardCourse({
+  courseName,
+  iconLocation: IconLocation = IoLocationOutline,
+  location = "Milano Leonardo",
+  iconLanguage: IconLanguage = CiGlobe,
+  language = "ITA",
+  iconSelect: IconSelect = FaAngleRight,
+}: {
+  courseName: string
+  iconLocation?: IconType
+  location?: "Milano Leonardo" | "Milano Bovisa" | "Cremona" | "Lecco" | "Mantova" | "Piacenza" | "Xi'an" //Magari poi si mette solo string come tipo nel caso si pullino da un DB
+  iconLanguage?: IconType
+  language?: "ITA" | "ENG" //Idem
+  iconSelect?: IconType
+}) {
+  return (
+    <Card className="typo-body-large flex h-fit w-full flex-row px-5 py-3.75 font-normal leading-6 tracking-[0.03125rem]">
+      <CardContent className="basis-1/3 truncate">{courseName}</CardContent>
+      <CardContent className="flex basis-1/3 items-center gap-1.25">
+        <CardAction icon={IconLocation} iconSize="small" /> {location}
+      </CardContent>
+      <CardContent className="flex basis-1/3 items-center gap-1.25">
+        <CardAction icon={IconLanguage} iconSize="small" /> {language}
+      </CardContent>
+      <CardContent className="flex items-center">
+        <CardAction icon={IconSelect} iconSize="small" />
+      </CardContent>
+    </Card>
+  )
+}

From c7bd2bda392cbc7312e6dd14b710f71d583423c4 Mon Sep 17 00:00:00 2001
From: Alessandro Giuseppe Gioia <alessandroogioiaa@gmail.com>
Date: Thu, 9 Apr 2026 21:39:44 +0200
Subject: [PATCH 19/20] feat: add card-course-group (#67)

* feat: card-course-group initial commit

* chore: biome

* fix: make text and icons black

* feat: added cards to homepage; feat: added bg-background-blur to the card

* remove: bg-background-blur

* remove: truncate class

* feat: secondary variant

* chore: biome

* chore: biome
---
 src/app/page.tsx                     |  7 ++++
 src/components/card-course-group.tsx | 60 ++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 src/components/card-course-group.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 19367f1..e6ff587 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,6 +2,7 @@ import { FaBookBookmark } from "react-icons/fa6"
 import { FiBook, FiBookOpen, FiClipboard, FiFileText, FiPenTool, FiTriangle, FiUploadCloud } from "react-icons/fi"
 import { CardCaption } from "@/components/card-caption"
 import { CardCourse } from "@/components/card-course"
+import { CardCourseGroup } from "@/components/card-course-group"
 import { CardIcon } from "@/components/card-icon"
 import { CardPathSelection } from "@/components/card-path-selection"
 import { Hero } from "@/components/home/hero"
@@ -60,6 +61,12 @@ export default function Home() {
           </div>
         </section>
         <section>
+          <CardCourseGroup groupName="Ingegneria Informatica" />
+          <CardCourseGroup groupName="Ingegneria Elettronica" secondary />
+          <CardCourseGroup groupName="Ingegneria Gestionale" />
+          <CardCourseGroup groupName="Ingegneria Meccanica" secondary />
+        </section>
+        <section className="flex gap-4">
           <CardCourse courseName="Ingegneria Informatica" />
           <CardCourse courseName="Ingegneria Elettrica" />
           <CardCourse courseName="Ingegneria Gestionale" />
diff --git a/src/components/card-course-group.tsx b/src/components/card-course-group.tsx
new file mode 100644
index 0000000..17a4934
--- /dev/null
+++ b/src/components/card-course-group.tsx
@@ -0,0 +1,60 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type { IconType } from "react-icons"
+import { FaWhatsapp } from "react-icons/fa"
+import { LiaTelegramPlane } from "react-icons/lia"
+import { cn } from "@/lib/utils"
+import { Card, CardAction, CardTitle } from "./ui/card"
+
+export const cardCourseGroupVariants = cva(
+  "flex h-fit w-full flex-row items-center gap-5 px-7.5 py-6.25 font-normal leading-6 tracking-[0.03125rem]",
+  {
+    variants: {
+      secondary: {
+        true: "bg-[rgba(148,192,237,0.40)]",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      secondary: false,
+    },
+  }
+)
+
+export function CardCourseGroup({
+  groupName,
+  hasWhatsapp = true,
+  iconWhatsApp: IconWhatsApp = FaWhatsapp,
+  hasTelegram = true,
+  iconTelegram: IconTelegram = LiaTelegramPlane,
+  secondary = false,
+}: {
+  groupName: string
+  hasWhatsapp?: boolean
+  iconWhatsApp?: IconType
+  hasTelegram?: boolean
+  iconTelegram?: IconType
+} & VariantProps<typeof cardCourseGroupVariants>) {
+  return (
+    <Card className={cn(cardCourseGroupVariants({ secondary }))}>
+      <CardTitle gradient={false} className="typo-headline-small grow">
+        {groupName}
+      </CardTitle>
+      {hasWhatsapp && (
+        <CardAction
+          gradient={false}
+          className={cn("rounded-full p-3.75", secondary ? "bg-[#51A2FF]" : "bg-[#74D4FF]")}
+          icon={IconWhatsApp}
+          iconSize="normal"
+        />
+      )}
+      {hasTelegram && (
+        <CardAction
+          gradient={false}
+          className={cn("rounded-full p-3.75", secondary ? "bg-[#51A2FF]" : "bg-[#74D4FF]")}
+          icon={IconTelegram}
+          iconSize="normal"
+        />
+      )}
+    </Card>
+  )
+}

From 1fbb83668f7356582ce54d0a70dcf017b08574bd Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Thu, 9 Apr 2026 21:56:18 +0200
Subject: [PATCH 20/20] fix: some of CodeRabbit's proposed fixes

---
 src/components/card-course-group.tsx | 19 +++----------------
 src/components/ui/card.tsx           |  4 ++--
 2 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/src/components/card-course-group.tsx b/src/components/card-course-group.tsx
index 17a4934..2dba99a 100644
--- a/src/components/card-course-group.tsx
+++ b/src/components/card-course-group.tsx
@@ -34,27 +34,14 @@ export function CardCourseGroup({
   hasTelegram?: boolean
   iconTelegram?: IconType
 } & VariantProps<typeof cardCourseGroupVariants>) {
+  const actionClassName = cn("rounded-full p-3.75", secondary ? "bg-[#51A2FF]" : "bg-[#74D4FF]")
   return (
     <Card className={cn(cardCourseGroupVariants({ secondary }))}>
       <CardTitle gradient={false} className="typo-headline-small grow">
         {groupName}
       </CardTitle>
-      {hasWhatsapp && (
-        <CardAction
-          gradient={false}
-          className={cn("rounded-full p-3.75", secondary ? "bg-[#51A2FF]" : "bg-[#74D4FF]")}
-          icon={IconWhatsApp}
-          iconSize="normal"
-        />
-      )}
-      {hasTelegram && (
-        <CardAction
-          gradient={false}
-          className={cn("rounded-full p-3.75", secondary ? "bg-[#51A2FF]" : "bg-[#74D4FF]")}
-          icon={IconTelegram}
-          iconSize="normal"
-        />
-      )}
+      {hasWhatsapp && <CardAction gradient={false} className={actionClassName} icon={IconWhatsApp} iconSize="normal" />}
+      {hasTelegram && <CardAction gradient={false} className={actionClassName} icon={IconTelegram} iconSize="normal" />}
     </Card>
   )
 }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 9f9323b..33a30e8 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -58,7 +58,7 @@ function CardAction({
   iconSize = "normal",
   gradient = true,
   ...props
-}: React.ComponentProps<"div"> & { icon: IconType; iconSize: "small" | "normal" | "large"; gradient?: boolean }) {
+}: React.ComponentProps<"div"> & { icon: IconType; iconSize?: "small" | "normal" | "large"; gradient?: boolean }) {
   const gradientId = React.useId()
 
   return (
@@ -68,7 +68,7 @@ function CardAction({
       {...props}
     >
       {gradient && (
-        <svg width="0" height="0" className="absolute">
+        <svg width="0" height="0" className="absolute" aria-hidden="true" focusable="false">
           <title>Icon gradient helper</title>
           <linearGradient id={gradientId} x1="0%" y1="100%" x2="0%" y2="0%">
             <stop offset="0%" className="text-blue-secondary" stopColor="currentColor" />