Initial commit

editor/components/hero/hero.editor.tsx

@@ -0,0 +1,70 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { LayoutTemplate } from "lucide-react";
+import { Hero, type HeroProps } from "@/editor/components/hero/hero";
+
+export const heroEditor: ComponentConfig<HeroProps> = {
+  label: "Hero",
+  icon: <LayoutTemplate size={16} />,
+  category: "hero",
+  defaultProps: {
+    tagline: "Spring 2026",
+    heading: "Made for the way you move",
+    subheading:
+      "A considered wardrobe of essentials, cut from natural fibers and designed to last.",
+    primaryCta: { label: "Shop the collection", href: "/collections" },
+    secondaryCta: { label: "Our story", href: "/about" },
+    imageUrl:
+      "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=2400&q=80",
+    align: "left",
+    height: "lg",
+    tone: "dark",
+  },
+  fields: {
+    tagline: { label: "Tagline", type: "text", contentEditable: true },
+    heading: { label: "Heading", type: "textarea", contentEditable: true },
+    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
+    primaryCta: {
+      label: "Primary CTA",
+      type: "object",
+      objectFields: {
+        label: { label: "Label", type: "text", contentEditable: true },
+        href: { label: "Link", type: "text" },
+      },
+    },
+    secondaryCta: {
+      label: "Secondary CTA",
+      type: "object",
+      objectFields: {
+        label: { label: "Label", type: "text", contentEditable: true },
+        href: { label: "Link", type: "text" },
+      },
+    },
+    imageUrl: { label: "Background image URL", type: "text" },
+    align: {
+      label: "Alignment",
+      type: "radio",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Center", value: "center" },
+      ],
+    },
+    height: {
+      label: "Height",
+      type: "select",
+      options: [
+        { label: "Medium", value: "md" },
+        { label: "Large", value: "lg" },
+        { label: "Full", value: "full" },
+      ],
+    },
+    tone: {
+      label: "Tone",
+      type: "radio",
+      options: [
+        { label: "Light", value: "light" },
+        { label: "Dark", value: "dark" },
+      ],
+    },
+  },
+  render: (props) => <Hero {...props} />,
+};

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>
+  );
+}