@ugurdemirel/landcraft 0.1.3 → 0.1.5

package/src/components/Features/FeatureGrid.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from "react";
+import type { FeatureGridProps } from "./types";
+import { FeatureColumns } from "./variants/Columns";
+import { FeatureBento } from "./variants/Bento";
+import { FeatureEditorialRows } from "./variants/EditorialRows";
+
+export const FeatureGrid = forwardRef<HTMLDivElement, FeatureGridProps>(
+  ({ option = "columns", columns = 3, ...props }, ref) => {
+    if (option === "editorialRows") return <FeatureEditorialRows ref={ref} {...props} />;
+    if (option === "bento") return <FeatureBento ref={ref} {...props} />;
+    return <FeatureColumns ref={ref} columns={columns} {...props} />;
+  },
+);
+FeatureGrid.displayName = "FeatureGrid";

package/src/components/Features/Features.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { FeatureCard } from "./FeatureCard";
+import { FeatureGrid } from "./FeatureGrid";
+
+const features = [
+  { icon: <span data-testid="icon-1">⚡</span>, title: "Fast", description: "Go live fast." },
+  { title: "No description title" },
+];
+
+describe("FeatureCard", () => {
+  it("renders title, description and icon", () => {
+    render(<FeatureCard icon={<span data-testid="ic" />} title="Fast" description="Go live fast." />);
+    expect(screen.getByText("Fast")).toBeInTheDocument();
+    expect(screen.getByText("Go live fast.")).toBeInTheDocument();
+    expect(screen.getByTestId("ic")).toBeInTheDocument();
+  });
+
+  it("applies a large heading when large", () => {
+    render(<FeatureCard title="Big" large />);
+    expect(screen.getByText("Big")).toHaveClass("text-2xl");
+  });
+});
+
+describe("FeatureGrid", () => {
+  it("renders all features in columns mode", () => {
+    render(<FeatureGrid features={features} option="columns" />);
+    expect(screen.getByText("Fast")).toBeInTheDocument();
+    expect(screen.getByTestId("icon-1")).toBeInTheDocument();
+  });
+
+  it("renders features in bento mode", () => {
+    render(<FeatureGrid features={features} option="bento" />);
+    expect(screen.getByText("Fast")).toBeInTheDocument();
+  });
+
+  it("renders features as editorial rows with numbering", () => {
+    render(<FeatureGrid features={features} option="editorialRows" />);
+    expect(screen.getByText("Fast")).toBeInTheDocument();
+    // Editorial rows number features starting at 01.
+    expect(screen.getByText("01")).toBeInTheDocument();
+    expect(screen.getByText("02")).toBeInTheDocument();
+  });
+
+  it("applies the requested column count in columns mode", () => {
+    const { container } = render(<FeatureGrid features={features} option="columns" columns={2} />);
+    expect(container.querySelector("div.sm\\:grid-cols-2")).not.toBeNull();
+  });
+});

package/src/components/Features/index.ts

@@ -0,0 +1,3 @@
+export { FeatureCard } from "./FeatureCard";
+export { FeatureGrid } from "./FeatureGrid";
+export type { FeatureItem, FeatureCardProps, FeatureGridProps, FeatureGridOption } from "./types";

package/src/components/Features/parts.ts

@@ -0,0 +1,15 @@
+export const gridCols: Record<2 | 3 | 4, string> = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4",
+};
+
+/** Asymmetric bento layout for up to 6 features. */
+export const bentoSpans: string[] = [
+  "sm:col-span-2 lg:row-span-2",
+  "",
+  "",
+  "lg:col-span-2",
+  "",
+  "lg:col-span-2",
+];

package/src/components/Features/types.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type FeatureGridOption = "columns" | "bento" | "editorialRows";
+
+export interface FeatureItem {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  accent?: string;
+}
+
+export interface FeatureCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Arbitrary CSS color for the icon chip; glyph color computed for contrast. */
+  accent?: string;
+  large?: boolean;
+}
+
+export interface FeatureGridProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  features: FeatureItem[];
+  option?: FeatureGridOption;
+  columns?: 2 | 3 | 4;
+}

package/src/components/Features/variants/Bento.tsx

@@ -0,0 +1,32 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../../utils/cn";
+import { FeatureCard } from "../FeatureCard";
+import { bentoSpans } from "../parts";
+import type { FeatureItem } from "../types";
+
+interface BentoProps extends HTMLAttributes<HTMLDivElement> {
+  features: FeatureItem[];
+}
+
+export const FeatureBento = forwardRef<HTMLDivElement, BentoProps>(
+  ({ className, features, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:auto-rows-[minmax(9rem,auto)]",
+        "w-full",
+        className,
+      )}
+      {...props}
+    >
+      {features.map((feature, i) =>
+        feature ? (
+          <div key={i} className={cn(i < bentoSpans.length && bentoSpans[i])}>
+            <FeatureCard {...feature} large={i === 0} className="h-full" />
+          </div>
+        ) : null,
+      )}
+    </div>
+  ),
+);
+FeatureBento.displayName = "FeatureBento";

package/src/components/Features/variants/Columns.tsx

@@ -0,0 +1,21 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../../utils/cn";
+import { FeatureCard } from "../FeatureCard";
+import { gridCols } from "../parts";
+import type { FeatureItem } from "../types";
+
+interface ColumnsProps extends HTMLAttributes<HTMLDivElement> {
+  features: FeatureItem[];
+  columns: 2 | 3 | 4;
+}
+
+export const FeatureColumns = forwardRef<HTMLDivElement, ColumnsProps>(
+  ({ className, features, columns, ...props }, ref) => (
+    <div ref={ref} className={cn("grid w-full grid-cols-1 gap-4", gridCols[columns], className)} {...props}>
+      {features.map((feature, i) => (
+        <FeatureCard key={i} {...feature} className="h-full" />
+      ))}
+    </div>
+  ),
+);
+FeatureColumns.displayName = "FeatureColumns";

package/src/components/Features/variants/EditorialRows.tsx

@@ -0,0 +1,38 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../../utils/cn";
+import type { FeatureItem } from "../types";
+
+interface EditorialRowsProps extends HTMLAttributes<HTMLDivElement> {
+  features: FeatureItem[];
+}
+
+export const FeatureEditorialRows = forwardRef<HTMLDivElement, EditorialRowsProps>(
+  ({ className, features, ...props }, ref) => (
+    <div ref={ref} className={cn("w-full", className)} {...props}>
+      <div className="divide-y divide-border border-t border-b border-border">
+        {features.map((feature, i) => (
+          <div
+            key={i}
+            className="group flex flex-col gap-3 py-6 transition-colors duration-200 sm:flex-row sm:items-baseline sm:gap-10"
+          >
+            <span className="text-sm font-medium tabular-nums text-muted-foreground/60 sm:w-12">
+              {String(i + 1).padStart(2, "0")}
+            </span>
+            <div className="flex-1 sm:flex sm:items-baseline sm:justify-between sm:gap-10">
+              <h3 className="font-display text-xl font-semibold tracking-tight text-foreground sm:w-2/5">
+                {feature.title}
+              </h3>
+              <p className="mt-1.5 text-sm leading-7 text-muted-foreground sm:mt-0 sm:w-1/2">
+                {feature.description}
+              </p>
+            </div>
+            {feature.icon ? (
+              <span className="hidden text-foreground/30 sm:inline-flex">{feature.icon}</span>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+);
+FeatureEditorialRows.displayName = "FeatureEditorialRows";

package/src/components/Footer/Footer.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Footer } from "./Footer";
+
+const columns = [
+  {
+    title: "Product",
+    links: [
+      { label: "Features", href: "#features" },
+      { label: "Pricing", href: "#pricing" },
+    ],
+  },
+];
+
+describe("Footer", () => {
+  it("renders the brand, column headings and links (classic by default)", () => {
+    render(<Footer brand="Acurio" columns={columns} />);
+    expect(screen.getByText("Acurio")).toBeInTheDocument();
+    expect(screen.getByText("Product")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Features" })).toHaveAttribute(
+      "href",
+      "#features",
+    );
+    expect(screen.getByRole("link", { name: "Pricing" })).toBeInTheDocument();
+  });
+
+  it("renders a description and the bottom copy", () => {
+    render(<Footer brand="Acurio" columns={columns} description="A kit." bottom="Made with care" />);
+    expect(screen.getByText("A kit.")).toBeInTheDocument();
+    expect(screen.getByText("Made with care")).toBeInTheDocument();
+  });
+
+  it("renders the minimal option", () => {
+    render(<Footer brand="Acurio" columns={columns} option="minimal" />);
+    expect(screen.getByRole("link", { name: "Features" })).toBeInTheDocument();
+  });
+
+  it("renders the editorial option with a large wordmark", () => {
+    const { container } = render(<Footer brand="Acurio" columns={columns} option="editorial" />);
+    expect(screen.getByText("Acurio")).toBeInTheDocument();
+    // Editorial uses a large display wordmark.
+    expect(container.querySelector("span.text-5xl")).toBeInTheDocument();
+  });
+
+  it("renders a footer element tag", () => {
+    const { container } = render(<Footer brand="Acurio" columns={columns} />);
+    expect(container.querySelector("footer")).toBeInTheDocument();
+  });
+});

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,11 @@
+import type { FooterProps } from "./types";
+import { FooterClassic } from "./variants/Classic";
+import { FooterMinimal } from "./variants/Minimal";
+import { FooterEditorial } from "./variants/Editorial";
+
+export const Footer = ({ option = "classic", ...props }: FooterProps) => {
+  if (option === "minimal") return <FooterMinimal {...props} />;
+  if (option === "editorial") return <FooterEditorial {...props} />;
+  return <FooterClassic {...props} />;
+};
+Footer.displayName = "Footer";

package/src/components/Footer/index.ts

@@ -0,0 +1,2 @@
+export { Footer } from "./Footer";
+export type { FooterProps, FooterColumn, FooterLink } from "./types";

package/src/components/Footer/parts.tsx

@@ -0,0 +1,101 @@
+import type { ElementType, ReactNode } from "react";
+import { cn } from "../../utils/cn";
+import type { FooterColumn } from "./types";
+
+export function FooterLogoNode({
+  logo,
+  logoSrc,
+  logoAlt,
+  logoClassName,
+  brand,
+  imageClassName = "h-7 w-auto",
+}: {
+  logo?: ReactNode;
+  logoSrc?: string;
+  logoAlt?: string;
+  logoClassName?: string;
+  brand?: ReactNode;
+  imageClassName?: string;
+}) {
+  if (logo) return logo;
+  if (logoSrc) {
+    return (
+      <img
+        src={logoSrc}
+        alt={logoAlt ?? (typeof brand === "string" ? brand : "Logo")}
+        className={cn(imageClassName, logoClassName)}
+      />
+    );
+  }
+  return null;
+}
+
+export function FooterWordmark({ brand }: { brand?: ReactNode }) {
+  return (
+    <span className="flex items-center gap-2 font-display text-lg font-bold tracking-tight">
+      <span aria-hidden className="inline-block h-2.5 w-2.5 rounded-sm bg-current" />
+      {brand}
+    </span>
+  );
+}
+
+export function FooterEditorialWordmark({ brand }: { brand?: ReactNode }) {
+  return (
+    <span className="font-display text-5xl font-bold tracking-[-0.03em] text-foreground sm:text-7xl">
+      {brand}
+    </span>
+  );
+}
+
+export function FooterColumnsBlock({
+  columns,
+  Link,
+  linkClassName,
+}: {
+  columns: FooterColumn[];
+  Link: ElementType;
+  linkClassName: string;
+}) {
+  return (
+    <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
+      {columns.map((column) => (
+        <div key={column.title}>
+          <h3 className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+            {column.title}
+          </h3>
+          <ul className="mt-4 space-y-2.5">
+            {column.links.map((link) => (
+              <li key={link.href}>
+                <Link href={link.href} className={linkClassName}>
+                  {link.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function FooterBottomBar({
+  bottom,
+  languageSwitcher,
+  brand,
+  wrapperClassName,
+  textClassName,
+}: {
+  bottom?: ReactNode;
+  languageSwitcher?: ReactNode;
+  brand?: ReactNode;
+  wrapperClassName: string;
+  textClassName: string;
+}) {
+  return (
+    <div className={wrapperClassName}>
+      <span className={cn(textClassName)}>{bottom}</span>
+      {languageSwitcher ? <div>{languageSwitcher}</div> : null}
+      <span className={cn(textClassName)}>© {new Date().getFullYear()} {brand}. All rights reserved.</span>
+    </div>
+  );
+}

package/src/components/Footer/types.ts

@@ -0,0 +1,32 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+
+export interface FooterLink {
+  label: string;
+  href: string;
+}
+
+export interface FooterColumn {
+  title: string;
+  links: FooterLink[];
+}
+
+export interface FooterProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  brand?: ReactNode;
+  /** Custom logo node (component, <img>, inline SVG…). Replaces the wordmark. */
+  logo?: ReactNode;
+  /** Quick logo image source. */
+  logoSrc?: string;
+  logoAlt?: string;
+  /** Size / position tuning for logo images. Defaults to `h-7 w-auto`. */
+  logoClassName?: string;
+  description?: string;
+  columns: FooterColumn[];
+  socials?: ReactNode;
+  bottom?: ReactNode;
+  /** Optional language switcher rendered in the footer's bottom bar. */
+  languageSwitcher?: ReactNode;
+  option?: "classic" | "minimal" | "editorial";
+  badge?: ReactNode;
+  /** Component used to render footer links. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
+  LinkComponent?: ElementType;
+}

package/src/components/Footer/variants/Classic.tsx

@@ -0,0 +1,59 @@
+import { cn } from "../../../utils/cn";
+import { Container } from "../../Container";
+import type { FooterProps } from "../types";
+import {
+  FooterWordmark,
+  FooterLogoNode,
+  FooterBottomBar,
+} from "../parts";
+
+interface ClassicProps extends FooterProps {}
+
+export function FooterClassic({ className, brand, logo, logoSrc, logoAlt, logoClassName, description, columns, socials, bottom, languageSwitcher, badge, LinkComponent, ...props }: ClassicProps) {
+  const Link = LinkComponent ?? "a";
+  const brandNode = FooterLogoNode({ logo, logoSrc, logoAlt, logoClassName, brand }) ?? <FooterWordmark brand={brand} />;
+
+  return (
+    <footer className={cn("w-full bg-secondary text-on-secondary", className)} {...props}>
+      <Container className="py-16">
+        <div className="grid grid-cols-2 gap-10 md:grid-cols-4 lg:grid-cols-6">
+          <div className="col-span-2">
+            <span style={{ color: "rgb(var(--color-on-secondary))" }}>{brandNode}</span>
+            {description ? (
+              <p className="mt-4 max-w-xs text-sm leading-6 text-on-secondary/60">{description}</p>
+            ) : null}
+            {socials ? <div className="mt-6 flex items-center gap-3">{socials}</div> : null}
+            {badge ? <div className="mt-6">{badge}</div> : null}
+          </div>
+          {columns.map((column) => (
+            <div key={column.title}>
+              <h3 className="text-xs font-semibold uppercase tracking-[0.16em] text-on-secondary/50">
+                {column.title}
+              </h3>
+              <ul className="mt-4 space-y-2.5">
+                {column.links.map((link) => (
+                  <li key={link.href}>
+                    <Link
+                      href={link.href}
+                      className="text-sm text-on-secondary/70 transition-colors duration-150 hover:text-on-secondary"
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <FooterBottomBar
+          bottom={bottom}
+          languageSwitcher={languageSwitcher}
+          brand={brand}
+          wrapperClassName="mt-14 flex flex-col items-center justify-between gap-4 border-t border-white/10 pt-8 text-sm text-on-secondary/50 sm:flex-row"
+          textClassName=""
+        />
+      </Container>
+    </footer>
+  );
+}
+FooterClassic.displayName = "FooterClassic";

package/src/components/Footer/variants/Editorial.tsx

@@ -0,0 +1,47 @@
+import { cn } from "../../../utils/cn";
+import { Container } from "../../Container";
+import type { FooterProps } from "../types";
+import {
+  FooterColumnsBlock,
+  FooterEditorialWordmark,
+  FooterLogoNode,
+  FooterBottomBar,
+} from "../parts";
+
+interface EditorialProps extends FooterProps {}
+
+export function FooterEditorial({ className, brand, logo, logoSrc, logoAlt, logoClassName, description, columns, socials, bottom, languageSwitcher, LinkComponent, ...props }: EditorialProps) {
+  const Link = LinkComponent ?? "a";
+  const brandNode = FooterLogoNode({ logo, logoSrc, logoAlt, logoClassName, brand, imageClassName: "h-12 w-auto" }) ?? <FooterEditorialWordmark brand={brand} />;
+
+  return (
+    <footer className={cn("w-full border-t border-border bg-background", className)} {...props}>
+      <Container className="py-16 sm:py-20">
+        <div className="mb-14 flex flex-col justify-between gap-8 sm:flex-row sm:items-end">
+          <div>
+            {brandNode}
+            {description ? (
+              <p className="mt-3 max-w-sm text-sm leading-6 text-muted-foreground">{description}</p>
+            ) : null}
+          </div>
+          {socials ? <div className="flex items-center gap-3">{socials}</div> : null}
+        </div>
+        <div className="border-t border-border pt-12">
+          <FooterColumnsBlock
+            columns={columns}
+            Link={Link}
+            linkClassName="text-[15px] text-foreground/80 transition-colors duration-150 hover:text-foreground"
+          />
+        </div>
+        <FooterBottomBar
+          bottom={bottom}
+          languageSwitcher={languageSwitcher}
+          brand={brand}
+          wrapperClassName="mt-12 flex flex-col items-center justify-between gap-4 border-t border-border pt-8 text-sm text-muted-foreground sm:flex-row"
+          textClassName=""
+        />
+      </Container>
+    </footer>
+  );
+}
+FooterEditorial.displayName = "FooterEditorial";

package/src/components/Footer/variants/Minimal.tsx

@@ -0,0 +1,33 @@
+import { cn } from "../../../utils/cn";
+import { Container } from "../../Container";
+import type { FooterProps } from "../types";
+import { FooterWordmark, FooterLogoNode } from "../parts";
+
+interface MinimalProps extends FooterProps {}
+
+export function FooterMinimal({ className, brand, logo, logoSrc, logoAlt, logoClassName, columns, languageSwitcher, bottom, LinkComponent, ...props }: MinimalProps) {
+  const Link = LinkComponent ?? "a";
+  const brandNode = FooterLogoNode({ logo, logoSrc, logoAlt, logoClassName, brand }) ?? <FooterWordmark brand={brand} />;
+
+  return (
+    <footer className={cn("w-full border-t border-border bg-background", className)} {...props}>
+      <Container className="flex flex-col items-center justify-between gap-6 py-10 sm:flex-row">
+        {brandNode}
+        <ul className="flex flex-wrap items-center justify-center gap-x-8 gap-y-3">
+          {columns.flatMap((c) => c.links).slice(0, 6).map((link) => (
+            <li key={link.href}>
+              <Link href={link.href} className="text-sm text-muted-foreground transition-colors duration-150 hover:text-foreground">
+                {link.label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+        <div className="flex flex-col items-center gap-3">
+          {languageSwitcher ? <div>{languageSwitcher}</div> : null}
+          <div className="text-sm text-muted-foreground">{bottom}</div>
+        </div>
+      </Container>
+    </footer>
+  );
+}
+FooterMinimal.displayName = "FooterMinimal";

package/src/components/Hero/Hero.test.tsx

@@ -0,0 +1,71 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Hero } from "./Hero";
+
+const base = {
+  title: "Build something great",
+  description: "A short description.",
+  eyebrow: "New release",
+};
+
+describe("Hero", () => {
+  it("renders the headline and description", () => {
+    render(<Hero {...base} />);
+    expect(
+      screen.getByRole("heading", { name: "Build something great" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("A short description.")).toBeInTheDocument();
+  });
+
+  it("renders an eyebrow, primary and secondary actions", () => {
+    render(
+      <Hero
+        {...base}
+        primaryAction={<a href="#a">Primary</a>}
+        secondaryAction={<a href="#b">Secondary</a>}
+      />,
+    );
+    expect(screen.getByText("New release")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Primary" })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Secondary" })).toBeInTheDocument();
+  });
+
+  it("renders the split variant by default with meta row and media", () => {
+    render(
+      <Hero
+        {...base}
+        media={<div data-testid="media" />}
+        meta={[{ label: "4.9/5", icon: <span>★</span> }]}
+      />,
+    );
+    expect(screen.getByTestId("media")).toBeInTheDocument();
+    expect(screen.getByText("4.9/5")).toBeInTheDocument();
+    const section = screen.getByTestId("media").closest("section");
+    expect(section).toHaveClass("bg-background");
+  });
+
+  it("renders the centered variant with centered copy", () => {
+    render(<Hero {...base} variant="centered" media={<div data-testid="m" />} />);
+    const h1 = screen.getByRole("heading", { name: "Build something great" });
+    expect(h1).toBeInTheDocument();
+    expect(screen.getByTestId("m")).toBeInTheDocument();
+  });
+
+  it("renders the statement variant as an ink band with a grain overlay", () => {
+    const { container } = render(<Hero {...base} variant="statement" />);
+    const section = container.querySelector("section");
+    expect(section).toHaveClass("bg-secondary");
+    // Statement paints a grain overlay div.
+    expect(container.querySelector(".grain")).toBeInTheDocument();
+  });
+
+  it("omits the meta row when no meta is supplied", () => {
+    render(<Hero {...base} />);
+    expect(screen.queryByRole("list")).not.toBeInTheDocument();
+  });
+
+  it("forwards an id to the section", () => {
+    const { container } = render(<Hero {...base} id="home" />);
+    expect(container.querySelector("section#home")).not.toBeNull();
+  });
+});

package/src/components/Hero/Hero.tsx

@@ -0,0 +1,12 @@
+import { forwardRef } from "react";
+import type { HeroProps } from "./types";
+import { HeroSplit } from "./variants/Split";
+import { HeroCentered } from "./variants/Centered";
+import { HeroStatement } from "./variants/Statement";
+
+export const Hero = forwardRef<HTMLElement, HeroProps>(({ variant = "split", ...props }, ref) => {
+  if (variant === "centered") return <HeroCentered ref={ref} {...props} />;
+  if (variant === "statement") return <HeroStatement ref={ref} {...props} />;
+  return <HeroSplit ref={ref} {...props} />;
+});
+Hero.displayName = "Hero";

package/src/components/Hero/index.ts

@@ -0,0 +1,2 @@
+export { Hero } from "./Hero";
+export type { HeroProps, HeroMeta, HeroVariant } from "./types";

package/src/components/Hero/parts.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+
+export const heroContainer =
+  "relative mx-auto flex w-full max-w-6xl flex-col items-center px-5 sm:px-8";
+
+export const heroTitleBase =
+  "font-display font-semibold tracking-[-0.03em] text-balance text-foreground";
+
+export function HeroEyebrow({ eyebrow }: { eyebrow?: ReactNode }) {
+  if (typeof eyebrow === "string") {
+    return (
+      <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
+        {eyebrow}
+      </p>
+    );
+  }
+  return eyebrow ? <div>{eyebrow}</div> : null;
+}
+
+export function HeroActions({
+  primaryAction,
+  secondaryAction,
+}: {
+  primaryAction?: ReactNode;
+  secondaryAction?: ReactNode;
+}) {
+  if (!primaryAction && !secondaryAction) return null;
+  return <div className="flex flex-wrap items-center gap-4">{primaryAction}{secondaryAction}</div>;
+}