feat: add CTA with optional description

src/components/card-caption.tsx

@@ -18,7 +18,7 @@ export function CardCaption({
         className={`typo-headline-medium flex ${iconPosition === "right" ? "justify-between" : "flex-col-reverse"}`}
       >
         <CardTitle className="typo-headline-medium">{title}</CardTitle>
-        {icon && <CardAction icon={icon} iconSize={iconPosition === "right" ? "normal" : "large"}></CardAction>}
+        {icon && <CardAction icon={icon} iconSize={iconPosition === "right" ? "md" : "lg"}></CardAction>}
       </CardHeader>
       <CardContent className="typo-body-medium">
         <p>{caption}</p>

src/components/card-course-group.tsx

@@ -40,8 +40,8 @@ export function CardCourseGroup({
       <CardTitle gradient={false} className="typo-headline-small grow">
         {groupName}
       </CardTitle>
-      {hasWhatsapp && <CardAction gradient={false} className={actionClassName} icon={IconWhatsApp} iconSize="normal" />}
-      {hasTelegram && <CardAction gradient={false} className={actionClassName} icon={IconTelegram} iconSize="normal" />}
+      {hasWhatsapp && <CardAction gradient={false} className={actionClassName} icon={IconWhatsApp} iconSize="md" />}
+      {hasTelegram && <CardAction gradient={false} className={actionClassName} icon={IconTelegram} iconSize="md" />}
     </Card>
   )
 }

src/components/card-course.tsx

@@ -23,13 +23,13 @@ export function CardCourse({
     <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}
+        <CardAction icon={IconLocation} iconSize="xs" /> {location}
       </CardContent>
       <CardContent className="flex basis-1/3 items-center gap-1.25">
-        <CardAction icon={IconLanguage} iconSize="small" /> {language}
+        <CardAction icon={IconLanguage} iconSize="xs" /> {language}
       </CardContent>
       <CardContent className="flex items-center">
-        <CardAction icon={IconSelect} iconSize="small" />
+        <CardAction icon={IconSelect} iconSize="xs" />
       </CardContent>
     </Card>
   )

src/components/card-path-selection.tsx

@@ -6,7 +6,7 @@ export function CardPathSelection({ caption, icon: Icon = BsBook }: { caption: s
   return (
     <Card className="h-fit w-136 px-10 py-7.5" hoverBackground>
       <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}
+        <CardAction icon={Icon} iconSize="xs" /> {caption}
       </CardContent>
     </Card>
   )

src/components/ui/call-to-action.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link"
+import type { IconType } from "react-icons"
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from "./card"
+
+export function CallToAction({
+  title,
+  caption,
+  icon,
+  href,
+}: {
+  title: string
+  caption?: string
+  icon: IconType
+  href: string
+}) {
+  return (
+    <Link href={href}>
+      <Card className="h-fit w-80.75 px-8 py-5.25">
+        <CardHeader className={`flex items-center ${caption ? "gap-2" : "gap-10"}`}>
+          <div className="rounded-[0.625rem] bg-blue-tertiary p-2.5 transition-all duration-500 group-hover/card:p-3">
+            <CardAction icon={icon} gradient={false} iconSize="sm" />
+          </div>
+          <CardTitle className="typo-title-large">{title}</CardTitle>
+        </CardHeader>
+        {caption && (
+          <CardContent className="typo-body-large">
+            <p>{caption}</p>
+          </CardContent>
+        )}
+      </Card>
+    </Link>
+  )
+}

src/components/ui/card.tsx

@@ -61,10 +61,14 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
 function CardAction({
   className,
   icon: Icon,
-  iconSize = "normal",
+  iconSize = "md",
   gradient = true,
   ...props
-}: React.ComponentProps<"div"> & { icon: IconType; iconSize?: "small" | "normal" | "large"; gradient?: boolean }) {
+}: React.ComponentProps<"div"> & {
+  icon: IconType
+  iconSize?: "xs" | "sm" | "md" | "lg"
+  gradient?: boolean
+}) {
   const gradientId = React.useId()
 
   return (
@@ -83,9 +87,18 @@ function CardAction({
       )}
 
       <Icon
-        size={iconSize === "small" ? "1.125rem" : iconSize === "normal" ? "2rem" : "3.5rem"}
-        fill={gradient ? `url(#${gradientId})` : "currentColor"}
-        stroke={gradient ? `url(#${gradientId})` : "currentColor"}
+        size={
+          iconSize === "xs"
+            ? "1.125rem"
+            : iconSize === "sm"
+              ? "1.5rem"
+              : iconSize === "md"
+                ? "2rem"
+                : iconSize === "lg"
+                  ? "3.5rem"
+                  : iconSize
+        }
+        {...(gradient ? { fill: `url(#${gradientId})`, stroke: `url(#${gradientId})` } : { stroke: "currentColor" })}
       />
     </div>
   )