Initial commit

2026-05-03 20:12:12 -04:00
commit 3a3ca1c72a
169 changed files with 22320 additions and 0 deletions
--- a/editor/components/hero/hero.tsx
+++ b/editor/components/hero/hero.tsx
@@ -0,0 +1,122 @@
+import { Link } from "react-router";
+import { cn } from "@/editor/lib/utils";
+import { Typography } from "@/editor/theme/Typography";
+
+export type HeroProps = {
+  tagline: string;
+  heading: string;
+  subheading: string;
+  primaryCta: { label: string; href: string };
+  secondaryCta: { label: string; href: string };
+  imageUrl: string;
+  align: "left" | "center";
+  height: "md" | "lg" | "full";
+  tone: "light" | "dark";
+};
+
+const heightClass: Record<HeroProps["height"], string> = {
+  md: "min-h-[60vh]",
+  lg: "min-h-[80vh]",
+  full: "min-h-screen",
+};
+
+export function Hero({
+  tagline,
+  heading,
+  subheading,
+  primaryCta,
+  secondaryCta,
+  imageUrl,
+  align,
+  height,
+  tone,
+}: HeroProps) {
+  const isDark = tone === "dark";
+  return (
+    <section
+      className={cn(
+        "relative flex w-full items-end overflow-hidden isolate",
+        heightClass[height],
+      )}
+    >
+      {imageUrl ? (
+        <img
+          src={imageUrl}
+          alt=""
+          className="absolute inset-0 z-0 h-full w-full object-cover"
+        />
+      ) : null}
+      <div
+        className="absolute inset-0 z-[1]"
+        style={{
+          background: isDark
+            ? "linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%)"
+            : "linear-gradient(180deg, rgba(255,255,255,0.0) 30%, rgba(255,255,255,0.85) 100%)",
+        }}
+      />
+
+      <div
+        className={cn(
+          "container relative z-[2] mx-auto flex max-w-7xl flex-col px-6 py-20 md:py-28",
+          align === "center" ? "items-center text-center" : "items-start",
+          isDark ? "text-white" : "text-foreground",
+        )}
+      >
+        {tagline ? (
+          <p
+            className={cn(
+              "mb-5 text-xs uppercase tracking-[0.2em]",
+              isDark ? "text-white/80" : "text-foreground/70",
+            )}
+          >
+            {tagline}
+          </p>
+        ) : null}
+        <Typography variant="h1" className="max-w-3xl">
+          {heading}
+        </Typography>
+        {subheading ? (
+          <Typography
+            variant="subtitle1"
+            className={cn(
+              "mt-6 max-w-xl",
+              isDark ? "text-white/80" : "text-foreground/70",
+            )}
+          >
+            {subheading}
+          </Typography>
+        ) : null}
+
+        <div
+          className={cn(
+            "mt-10 flex flex-wrap gap-3",
+            align === "center" && "justify-center",
+          )}
+        >
+          {primaryCta?.label ? (
+            <Link
+              to={primaryCta.href || "#"}
+              className={cn(
+                "inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-90",
+                isDark ? "bg-white text-black" : "bg-foreground text-background",
+              )}
+            >
+              {primaryCta.label}
+            </Link>
+          ) : null}
+          {secondaryCta?.label ? (
+            <Link
+              to={secondaryCta.href || "#"}
+              className={cn(
+                "inline-flex items-center justify-center rounded-full border px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
+                isDark ? "border-white text-white" : "border-foreground text-foreground",
+              )}
+            >
+              {secondaryCta.label}
+            </Link>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}