Initial commit

src/components/ui/TextBox.tsx

@@ -0,0 +1,53 @@
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+
+interface TextBoxProps {
+  tag?: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  className?: string;
+}
+
+const TextBox = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  className,
+}: TextBoxProps) => (
+  <div className={`flex flex-col items-center gap-2 w-content-width mx-auto ${className || ""}`}>
+    {tag && (
+      <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+        <p>{tag}</p>
+      </div>
+    )}
+
+    <TextAnimation
+      text={title}
+      variant="slide-up"
+      gradientText={true}
+      tag="h2"
+      className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-balance text-center"
+    />
+
+    <TextAnimation
+      text={description}
+      variant="slide-up"
+      gradientText={false}
+      tag="p"
+      className="md:max-w-7/10 text-lg md:text-xl leading-snug text-balance text-center"
+    />
+
+    {(primaryButton || secondaryButton) && (
+      <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+        {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />}
+        {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
+      </div>
+    )}
+  </div>
+);
+
+export default TextBox;