From bbbaeedd3ebbdae82cea6cc7f8c6ec37683f2175 Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Thu, 9 Apr 2026 15:39:36 +0200
Subject: [PATCH 1/2] feat: add CardSplit component to enhance layout options

---
 src/app/page.tsx              |  4 ++++
 src/components/card-split.tsx | 37 +++++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 src/components/card-split.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 62c7213..93a53ef 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 import { FiBook, FiBookOpen, FiClipboard, FiFileText, FiPenTool, FiTriangle, FiUploadCloud } from "react-icons/fi"
 import { CardIcon } from "@/components/card-icon"
+import { CardSplit } from "@/components/card-split"
 import { Hero } from "@/components/home/hero"
 
 const schoolCards = [
@@ -35,6 +36,9 @@ export default function Home() {
   return (
     <main className="w-full">
       <Hero />
+      <div className="mx-auto w-fit py-12">
+        <CardSplit textLeft="5x1000" textRight="Sostienici!" textSmall="CF: 97927490157" />
+      </div>
       <div className="mx-auto flex max-w-6xl flex-col gap-12">
         <section>
           <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3">
diff --git a/src/components/card-split.tsx b/src/components/card-split.tsx
new file mode 100644
index 0000000..51a9a1f
--- /dev/null
+++ b/src/components/card-split.tsx
@@ -0,0 +1,37 @@
+import { Glass } from "@/components/glass"
+import { cn } from "@/lib/utils"
+
+type CardSplitProps = {
+  textLeft?: string
+  textRight?: string
+  textSmall?: string
+  className?: string
+}
+
+export function CardSplit({ textLeft, textRight, textSmall, className }: CardSplitProps) {
+  const hasRightContent = Boolean(textRight || textSmall)
+
+  return (
+    <Glass
+      className={cn(
+        "inline-flex max-w-full rounded-rectangles border-white/50 bg-background-blur px-10 py-5 backdrop-blur-xl",
+        className
+      )}
+    >
+      <div className="flex flex-col gap-10 sm:grid sm:grid-cols-[auto_auto] sm:items-center">
+        {textLeft && (
+          <p className="typo-display-medium bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text font-normal text-transparent">
+            {textLeft}
+          </p>
+        )}
+
+        {hasRightContent && (
+          <div className={cn("flex flex-col gap-1", textLeft ? "sm:min-w-fit" : "")}>
+            {textRight && <p className="typo-headline-small text-text-primary">{textRight}</p>}
+            {textSmall && <p className="typo-body-medium text-text-primary">{textSmall}</p>}
+          </div>
+        )}
+      </div>
+    </Glass>
+  )
+}

From c7620c0844858097a578b589cc1aa6a156e2134e Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Thu, 9 Apr 2026 15:48:08 +0200
Subject: [PATCH 2/2] feat: refactor CardSplit component to use new props
 structure and separate content components

---
 src/app/page.tsx                              |  2 +-
 src/components/card-split.tsx                 | 37 -------------------
 src/components/card-split/index.tsx           | 31 ++++++++++++++++
 src/components/card-split/primary-content.tsx |  7 ++++
 .../card-split/secondary-content.tsx          | 20 ++++++++++
 src/components/card-split/types.ts            |  6 +++
 6 files changed, 65 insertions(+), 38 deletions(-)
 delete mode 100644 src/components/card-split.tsx
 create mode 100644 src/components/card-split/index.tsx
 create mode 100644 src/components/card-split/primary-content.tsx
 create mode 100644 src/components/card-split/secondary-content.tsx
 create mode 100644 src/components/card-split/types.ts

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 93a53ef..1837485 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -37,7 +37,7 @@ export default function Home() {
     <main className="w-full">
       <Hero />
       <div className="mx-auto w-fit py-12">
-        <CardSplit textLeft="5x1000" textRight="Sostienici!" textSmall="CF: 97927490157" />
+        <CardSplit textPrimary="5x1000" textSecondary="Sostienici!" textSecondarySmall="CF: 97927490157" />
       </div>
       <div className="mx-auto flex max-w-6xl flex-col gap-12">
         <section>
diff --git a/src/components/card-split.tsx b/src/components/card-split.tsx
deleted file mode 100644
index 51a9a1f..0000000
--- a/src/components/card-split.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Glass } from "@/components/glass"
-import { cn } from "@/lib/utils"
-
-type CardSplitProps = {
-  textLeft?: string
-  textRight?: string
-  textSmall?: string
-  className?: string
-}
-
-export function CardSplit({ textLeft, textRight, textSmall, className }: CardSplitProps) {
-  const hasRightContent = Boolean(textRight || textSmall)
-
-  return (
-    <Glass
-      className={cn(
-        "inline-flex max-w-full rounded-rectangles border-white/50 bg-background-blur px-10 py-5 backdrop-blur-xl",
-        className
-      )}
-    >
-      <div className="flex flex-col gap-10 sm:grid sm:grid-cols-[auto_auto] sm:items-center">
-        {textLeft && (
-          <p className="typo-display-medium bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text font-normal text-transparent">
-            {textLeft}
-          </p>
-        )}
-
-        {hasRightContent && (
-          <div className={cn("flex flex-col gap-1", textLeft ? "sm:min-w-fit" : "")}>
-            {textRight && <p className="typo-headline-small text-text-primary">{textRight}</p>}
-            {textSmall && <p className="typo-body-medium text-text-primary">{textSmall}</p>}
-          </div>
-        )}
-      </div>
-    </Glass>
-  )
-}
diff --git a/src/components/card-split/index.tsx b/src/components/card-split/index.tsx
new file mode 100644
index 0000000..a5c3831
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/card-split/primary-content.tsx b/src/components/card-split/primary-content.tsx
new file mode 100644
index 0000000..22079f6
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/card-split/secondary-content.tsx b/src/components/card-split/secondary-content.tsx
new file mode 100644
index 0000000..f1b44a4
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/card-split/types.ts b/src/components/card-split/types.ts
new file mode 100644
index 0000000..1ad4557
--- /dev/null
+++ b/src/components/card-split/types.ts
@@ -0,0 +1,6 @@
+export type CardSplitProps = {
+  textPrimary?: string
+  textSecondary?: string
+  textSecondarySmall?: string
+  className?: string
+}