feat: add card-course-group

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" />

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