Initial commit

editor/components/cta/cta.tsx

@@ -0,0 +1,83 @@
+import { Link } from "react-router";
+import { cn } from "@/editor/lib/utils";
+import { Typography } from "@/editor/theme/Typography";
+
+export type CTAProps = {
+  tagline: string;
+  heading: string;
+  subheading: string;
+  primaryCta: { label: string; href: string };
+  secondaryCta: { label: string; href: string };
+  imageUrl: string;
+  align: "left" | "center";
+};
+
+export function CTA({
+  tagline,
+  heading,
+  subheading,
+  primaryCta,
+  secondaryCta,
+  imageUrl,
+  align,
+}: CTAProps) {
+  return (
+    <section className="relative overflow-hidden py-24 md:py-32">
+      <div className="absolute inset-0 -z-10">
+        {imageUrl ? (
+          <>
+            <img
+              src={imageUrl}
+              alt=""
+              className="h-full w-full object-cover"
+            />
+            <div className="absolute inset-0 bg-black/45" />
+          </>
+        ) : (
+          <div className="h-full w-full bg-foreground" />
+        )}
+      </div>
+      <div
+        className={cn(
+          "container mx-auto flex max-w-4xl flex-col px-6 text-white",
+          align === "center" ? "items-center text-center" : "items-start",
+        )}
+      >
+        {tagline ? (
+          <p className="mb-4 text-xs uppercase tracking-[0.2em] text-white/80">
+            {tagline}
+          </p>
+        ) : null}
+        <Typography variant="h2">{heading}</Typography>
+        {subheading ? (
+          <Typography variant="subtitle1" className="mt-5 max-w-xl text-white/80">
+            {subheading}
+          </Typography>
+        ) : null}
+        <div
+          className={cn(
+            "mt-10 flex flex-wrap gap-3",
+            align === "center" && "justify-center",
+          )}
+        >
+          {primaryCta?.label ? (
+            <Link
+              to={primaryCta.href || "#"}
+              className="inline-flex items-center justify-center rounded-full bg-white px-6 py-3 text-sm font-medium tracking-wide text-black hover:opacity-90"
+            >
+              {primaryCta.label}
+            </Link>
+          ) : null}
+          {secondaryCta?.label ? (
+            <Link
+              to={secondaryCta.href || "#"}
+              className="inline-flex items-center justify-center rounded-full border border-white px-6 py-3 text-sm font-medium tracking-wide text-white hover:bg-white/10"
+            >
+              {secondaryCta.label}
+            </Link>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}