feat: add CardSplit component

src/components/card-split/index.tsx

@@ -0,0 +1,31 @@
+import { Glass } from "@/components/glass"
+import { cn } from "@/lib/utils"
+import { CardSplitPrimaryContent } from "./primary-content"
+import { CardSplitSecondaryContent } from "./secondary-content"
+import type { CardSplitProps } from "./types"
+
+export function CardSplit({ textPrimary, textSecondary, textSecondarySmall, className }: CardSplitProps) {
+  const hasPrimaryContent = Boolean(textPrimary)
+  const hasSecondaryContent = Boolean(textSecondary || textSecondarySmall)
+
+  return (
+    <Glass
+      className={cn(
+        "inline-flex max-w-full overflow-hidden rounded-rectangles border-white/50 bg-background-blur p-0 text-card-foreground",
+        className
+      )}
+    >
+      <div className="flex flex-col gap-10 px-10 py-5 sm:grid sm:grid-cols-[auto_auto] sm:items-center">
+        {textPrimary ? <CardSplitPrimaryContent text={textPrimary} /> : null}
+
+        {hasSecondaryContent && (
+          <CardSplitSecondaryContent
+            textSecondary={textSecondary}
+            textSecondarySmall={textSecondarySmall}
+            hasPrimaryContent={hasPrimaryContent}
+          />
+        )}
+      </div>
+    </Glass>
+  )
+}

src/components/card-split/primary-content.tsx

@@ -0,0 +1,7 @@
+export function CardSplitPrimaryContent({ text }: { text: string }) {
+  return (
+    <p className="typo-display-medium bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text font-normal text-transparent">
+      {text}
+    </p>
+  )
+}

src/components/card-split/secondary-content.tsx

@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils"
+
+type CardSplitSecondaryContentProps = {
+  textSecondary?: string
+  textSecondarySmall?: string
+  hasPrimaryContent: boolean
+}
+
+export function CardSplitSecondaryContent({
+  textSecondary,
+  textSecondarySmall,
+  hasPrimaryContent,
+}: CardSplitSecondaryContentProps) {
+  return (
+    <div className={cn("flex flex-col gap-1", hasPrimaryContent ? "sm:min-w-fit" : "")}>
+      {textSecondary && <p className="typo-headline-small text-text-primary">{textSecondary}</p>}
+      {textSecondarySmall && <p className="typo-body-medium text-text-primary">{textSecondarySmall}</p>}
+    </div>
+  )
+}

src/components/card-split/types.ts

@@ -0,0 +1,6 @@
+export type CardSplitProps = {
+  textPrimary?: string
+  textSecondary?: string
+  textSecondarySmall?: string
+  className?: string
+}