feat: add card-path-selection

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"

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
+  )
+}