@ugurdemirel/landcraft 0.1.0

package/src/components/Newsletter.tsx

@@ -0,0 +1,180 @@
+import { useState, type FormEvent, type HTMLAttributes } from "react";
+import { cn } from "../utils/cn";
+import { ArrowRight, Check, Mail } from "../icons";
+
+export interface NewsletterProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit"> {
+  option?: "inline" | "card" | "underline";
+  placeholder?: string;
+  buttonLabel?: string;
+  successMessage?: string;
+  note?: string;
+  onSubmit?: (email: string) => void;
+}
+
+const inputBase =
+  "w-full rounded-lg border border-border bg-surface px-4 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background";
+
+export const Newsletter = ({
+  className,
+  option = "inline",
+  placeholder = "you@company.com",
+  buttonLabel = "Join",
+  successMessage = "You’re on the list!",
+  note,
+  onSubmit,
+  ...props
+}: NewsletterProps) => {
+  const [email, setEmail] = useState("");
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    const value = email.trim();
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+      setError("Please enter a valid email.");
+      return;
+    }
+    setError(null);
+    setDone(true);
+    onSubmit?.(value);
+  };
+
+  const success = (
+    <p className="flex items-center gap-2 rounded-lg border border-accent/40 bg-accent/10 px-4 py-3.5 text-sm font-medium text-accent" role="status">
+      <Check className="h-4 w-4" />
+      {successMessage}
+    </p>
+  );
+
+  if (option === "card") {
+    return (
+      <form onSubmit={handleSubmit} className={cn("w-full", className)} {...props}>
+        {done ? (
+          success
+        ) : (
+          <div className="rounded-xl border border-border bg-surface p-7">
+            <div className="mb-5 flex items-center gap-3">
+              <span className="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-primary-soft text-primary">
+                <Mail className="h-4 w-4" />
+              </span>
+              <p className="font-display text-lg font-semibold tracking-tight text-foreground">
+                Monthly digest
+              </p>
+            </div>
+            <label htmlFor="newsletter-email" className="sr-only">
+              Your email address
+            </label>
+            <div className="flex flex-col gap-3 sm:flex-row">
+              <input
+                id="newsletter-email"
+                type="email"
+                autoComplete="email"
+                value={email}
+                onChange={(e) => {
+                  setEmail(e.target.value);
+                  if (error) setError(null);
+                }}
+                placeholder={placeholder}
+                className={cn(inputBase, "h-11")}
+              />
+              <button
+                type="submit"
+                className="inline-flex h-11 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary px-5 text-sm font-semibold text-on-primary transition-colors duration-200 hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              >
+                {buttonLabel}
+                <ArrowRight className="h-4 w-4 opacity-60" />
+              </button>
+            </div>
+            {error ? (
+              <p className="mt-2 text-sm font-medium text-red-500" role="alert">{error}</p>
+            ) : note ? (
+              <p className="mt-3 text-xs leading-5 text-muted-foreground">{note}</p>
+            ) : null}
+          </div>
+        )}
+      </form>
+    );
+  }
+
+  if (option === "underline") {
+    return (
+      <form onSubmit={handleSubmit} className={cn("w-full", className)} {...props}>
+        {done ? (
+          success
+        ) : (
+          <div className="flex items-end gap-3 border-b border-foreground/20 pb-3 transition-colors duration-200 focus-within:border-foreground">
+            <label htmlFor="newsletter-email" className="sr-only">
+              Your email address
+            </label>
+            <input
+              id="newsletter-email"
+              type="email"
+              autoComplete="email"
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value);
+                if (error) setError(null);
+              }}
+              placeholder={placeholder}
+              className="w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
+            />
+            <button
+              type="submit"
+              className="inline-flex shrink-0 cursor-pointer items-center gap-1.5 text-sm font-semibold text-foreground transition-colors duration-150 hover:text-primary"
+            >
+              {buttonLabel}
+              <ArrowRight className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5" />
+            </button>
+          </div>
+        )}
+        {error ? (
+          <p className="mt-2 text-sm font-medium text-red-500" role="alert">{error}</p>
+        ) : note ? (
+          <p className="mt-2 text-xs leading-5 text-muted-foreground">{note}</p>
+        ) : null}
+      </form>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={cn("w-full", className)} {...props}>
+      {done ? (
+        success
+      ) : (
+        <>
+          <label htmlFor="newsletter-email" className="sr-only">
+            Your email address
+          </label>
+          <div className="flex flex-col gap-3 sm:flex-row">
+            <input
+              id="newsletter-email"
+              type="email"
+              autoComplete="email"
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value);
+                if (error) setError(null);
+              }}
+              placeholder={placeholder}
+              className={cn(inputBase, "h-11")}
+            />
+            <button
+              type="submit"
+              className="inline-flex h-11 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary px-5 text-sm font-semibold text-on-primary transition-colors duration-200 hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            >
+              {buttonLabel}
+              <ArrowRight className="h-4 w-4 opacity-60" />
+            </button>
+          </div>
+          {error ? (
+            <p className="mt-2 text-sm font-medium text-red-500" role="alert">{error}</p>
+          ) : note ? (
+            <p className="mt-2 text-xs leading-5 text-muted-foreground">{note}</p>
+          ) : null}
+        </>
+      )}
+    </form>
+  );
+};
+Newsletter.displayName = "Newsletter";

package/src/components/Pricing.tsx

@@ -0,0 +1,336 @@
+import { useState, type HTMLAttributes } from "react";
+import { cn } from "../utils/cn";
+import { getContrastText } from "../utils/contrast";
+import { useTokenForeground } from "../utils/useTokenForeground";
+import { ArrowRight, Check } from "../icons";
+
+export interface Plan {
+  name: string;
+  description?: string;
+  monthly: number | null;
+  yearly: number | null;
+  features: string[];
+  cta?: string;
+  href?: string;
+  highlighted?: boolean;
+  customColor?: string;
+}
+
+export interface PricingProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  plans: Plan[];
+  option?: "cards" | "bento" | "compact";
+  defaultBilling?: "monthly" | "yearly";
+  onSelect?: (plan: Plan, billing: "monthly" | "yearly") => void;
+}
+
+function PriceValue({
+  value,
+  billing,
+  dim,
+}: {
+  value: number | null;
+  billing: "monthly" | "yearly";
+  /** False when rendered on a colored background where opacity would kill contrast. */
+  dim?: boolean;
+}) {
+  if (value === null) {
+    return <span>Custom</span>;
+  }
+  return (
+    <>
+      <span className="text-[2.6rem] font-semibold tracking-tight sm:text-[3rem]">${value}</span>
+      <span className={cn("text-sm font-normal", dim && "opacity-60")}>
+        /{billing === "monthly" ? "mo" : "yr"}
+      </span>
+    </>
+  );
+}
+
+function BillingToggle({
+  billing,
+  onChange,
+  dark,
+}: {
+  billing: "monthly" | "yearly";
+  onChange: (b: "monthly" | "yearly") => void;
+  dark?: boolean;
+}) {
+  // The accent token is a background color, but its shipped "on-accent"
+  // pairing isn't guaranteed to be contrast-safe (e.g. white on amber).
+  // Derive the badge text color from the actual accent value instead.
+  const accentText = useTokenForeground("--color-accent");
+  return (
+    <div className="mb-10 flex items-center justify-center gap-4">
+      <span
+        className={cn(
+          "text-sm font-medium transition-colors",
+          billing === "monthly" ? (dark ? "text-white" : "text-foreground") : "text-muted-foreground",
+        )}
+      >
+        Monthly
+      </span>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={billing === "yearly"}
+        aria-label="Billing period"
+        onClick={() => onChange(billing === "monthly" ? "yearly" : "monthly")}
+        className={cn(
+          "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          billing === "yearly" ? "bg-primary" : "bg-border",
+        )}
+      >
+        <span
+          className={cn(
+            "inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform duration-200",
+            billing === "yearly" ? "translate-x-6" : "translate-x-1",
+          )}
+        />
+      </button>
+      <span
+        className={cn(
+          "flex items-center gap-2 text-sm font-medium transition-colors",
+          billing === "yearly" ? (dark ? "text-white" : "text-foreground") : "text-muted-foreground",
+        )}
+      >
+        Yearly
+        <span
+          className="rounded-full bg-accent px-2 py-0.5 text-xs font-semibold"
+          style={{ color: accentText }}
+        >
+          −2 ay
+        </span>
+      </span>
+    </div>
+  );
+}
+
+export const Pricing = ({
+  className,
+  plans,
+  option = "cards",
+  defaultBilling = "monthly",
+  onSelect,
+  ...props
+}: PricingProps) => {
+  const [billing, setBilling] = useState<"monthly" | "yearly">(defaultBilling);
+
+  const price = (plan: Plan) => (billing === "monthly" ? plan.monthly : plan.yearly);
+  const priceLabel = (v: number | null) => (v === null ? "Custom" : `$${v}`);
+
+  const planButton = (plan: Plan, dark?: boolean) => {
+    const isHighlighted = plan.highlighted && !plan.customColor;
+    const fg = plan.customColor ? getContrastText(plan.customColor, "#111111", "#ffffff") : undefined;
+    return (
+      <button
+        type="button"
+        onClick={() => onSelect?.(plan, billing)}
+        className={cn(
+          "inline-flex h-11 cursor-pointer items-center justify-center gap-2 rounded-lg px-5 text-sm font-semibold transition-colors duration-200",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          isHighlighted || plan.customColor
+            ? "hover:brightness-95"
+            : dark
+              ? "bg-white text-black hover:bg-white/90"
+              : "border border-border text-foreground hover:bg-surface",
+        )}
+        style={
+          plan.customColor
+            ? { backgroundColor: plan.customColor, color: fg }
+            : isHighlighted
+              ? {
+                  backgroundColor: "rgb(var(--color-primary))",
+                  color: "rgb(var(--color-on-primary))",
+                }
+              : undefined
+        }
+      >
+        {plan.cta || "Start"}
+        <ArrowRight className="h-4 w-4 opacity-60" />
+      </button>
+    );
+  };
+
+  if (option === "compact") {
+    return (
+      <div className={cn("w-full", className)} {...props}>
+        <div className="divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface">
+          {plans.map((plan) => {
+            const isHighlighted = plan.highlighted && !plan.customColor;
+            const bg = plan.customColor ? "rgb(var(--color-surface))" : isHighlighted ? "rgb(var(--color-primary-soft))" : undefined;
+            const fg = plan.customColor ? plan.customColor : isHighlighted ? "rgb(var(--color-primary))" : undefined;
+            return (
+              <div
+                key={plan.name}
+                className={cn(
+                  "group flex flex-col gap-5 p-5 transition-colors duration-200 hover:bg-surface-strong sm:flex-row sm:items-center sm:justify-between",
+                  isHighlighted && "bg-primary-soft/60",
+                )}
+                style={bg ? { backgroundColor: bg } : undefined}
+              >
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2.5">
+                    <h3 className="font-display text-lg font-semibold tracking-tight text-foreground">
+                      {plan.name}
+                    </h3>
+                    {isHighlighted ? (
+                      <span className="rounded-full bg-primary px-2.5 py-0.5 text-[11px] font-semibold text-on-primary uppercase tracking-wider">
+                        Popular
+                      </span>
+                    ) : null}
+                  </div>
+                  {plan.description ? (
+                    <p className="mt-1 truncate text-sm text-muted-foreground">{plan.description}</p>
+                  ) : null}
+                </div>
+                <div className="flex items-center gap-6">
+                  <ul className="hidden items-center gap-4 lg:flex">
+                    {plan.features.slice(0, 3).map((f) => (
+                      <li key={f} className="flex items-center gap-1.5 text-sm text-muted-foreground" style={{ color: fg }}>
+                        <Check className="h-3.5 w-3.5 text-current" />
+                        {f}
+                      </li>
+                    ))}
+                  </ul>
+                  <div className="font-display text-2xl font-semibold tracking-tight text-foreground">
+                    {priceLabel(price(plan))}
+                    {price(plan) !== null ? (
+                      <span className="text-sm font-normal text-muted-foreground">/{billing === "monthly" ? "mo" : "yr"}</span>
+                    ) : null}
+                  </div>
+                  {planButton(plan)}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  if (option === "bento") {
+    return (
+      <div className={cn("w-full", className)} {...props}>
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          {plans.map((plan) => {
+            const isHighlighted = plan.highlighted && !plan.customColor;
+            const bg = plan.customColor || (isHighlighted ? "rgb(var(--color-primary))" : undefined);
+            const fg = plan.customColor
+              ? getContrastText(plan.customColor, "#111111", "#ffffff")
+              : isHighlighted
+                ? "rgb(var(--color-on-primary))"
+                : undefined;
+            return (
+              <div
+                key={plan.name}
+                className={cn(
+                  "flex h-full flex-col rounded-xl p-8",
+                  bg
+                    ? "lg:col-span-2"
+                    : "border border-border bg-surface",
+                )}
+                style={bg ? { backgroundColor: bg, color: fg } : undefined}
+              >
+                <div className="flex flex-wrap items-start justify-between gap-4">
+                  <div>
+                    <h3 className={cn("font-display text-xl font-semibold tracking-tight", bg ? "text-current" : "text-foreground")}>
+                      {plan.name}
+                    </h3>
+                    {plan.description ? (
+                      <p className={cn("mt-1.5 text-sm", bg ? undefined : "text-muted-foreground")}>
+                        {plan.description}
+                      </p>
+                    ) : null}
+                  </div>
+                  <div className={cn("font-display", bg ? "text-current" : "text-foreground")}>
+                    <PriceValue value={price(plan)} billing={billing} dim={!bg} />
+                  </div>
+                </div>
+                <ul
+                  className={cn(
+                    "mt-7 grid grid-cols-1 gap-x-8 gap-y-2.5 text-sm sm:grid-cols-2",
+                    bg ? "lg:max-w-2xl" : undefined,
+                  )}
+                >
+                  {plan.features.map((feature) => (
+                    <li key={feature} className={cn("flex items-start gap-2.5", bg ? "text-current" : "text-muted-foreground")}>
+                      <Check className={cn("mt-0.5 h-4 w-4 shrink-0", bg ? "text-current" : "text-primary")} />
+                      {feature}
+                    </li>
+                  ))}
+                </ul>
+                <div className="mt-8">{planButton(plan, !bg)}</div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("w-full", className)} {...props}>
+      <BillingToggle billing={billing} onChange={setBilling} />
+      <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
+        {plans.map((plan) => {
+          const isHighlighted = plan.highlighted && !plan.customColor;
+          const bg = plan.customColor || (isHighlighted ? "rgb(var(--color-primary))" : undefined);
+          const fg = plan.customColor
+            ? getContrastText(plan.customColor, "#111111", "#ffffff")
+            : isHighlighted
+              ? "rgb(var(--color-on-primary))"
+              : undefined;
+          return (
+            <div
+              key={plan.name}
+              className={cn(
+                "relative flex flex-col rounded-xl p-7",
+                bg ? "shadow-raised" : "border border-border bg-surface",
+                !bg && isHighlighted && "border-primary",
+              )}
+              style={bg ? { backgroundColor: bg, color: fg } : undefined}
+            >
+              {isHighlighted ? (
+                <span
+                  className={cn(
+                    "absolute -top-3 left-7 rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider",
+                    !bg && "bg-primary text-on-primary",
+                  )}
+                  style={
+                    bg
+                      ? { backgroundColor: "rgb(var(--color-on-primary))", color: "rgb(var(--color-primary))" }
+                      : undefined
+                  }
+                >
+                  Most popular
+                </span>
+              ) : null}
+              <h3 className={cn("font-display text-lg font-semibold tracking-tight", bg ? "text-current" : "text-foreground")}>
+                {plan.name}
+              </h3>
+              {plan.description ? (
+                <p className={cn("mt-1.5 text-sm", bg ? undefined : "text-muted-foreground")}>
+                  {plan.description}
+                </p>
+              ) : null}
+              <div className={cn("mt-6 flex items-baseline font-display", bg ? "text-current" : "text-foreground")}>
+                <PriceValue value={price(plan)} billing={billing} dim={!bg} />
+              </div>
+              <ul className={cn("mt-7 flex-1 space-y-2.5 text-sm", bg ? "text-current" : "text-muted-foreground")}>
+                {plan.features.map((feature) => (
+                  <li key={feature} className="flex items-start gap-2.5">
+                    <Check className={cn("mt-0.5 h-4 w-4 shrink-0", bg ? "text-current" : "text-primary")} />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+              <div className="mt-8">{planButton(plan, !bg)}</div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+Pricing.displayName = "Pricing";

package/src/components/Prose.tsx

@@ -0,0 +1,55 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../utils/cn";
+
+export type ProseSize = "sm" | "md" | "lg" | "xl" | "2xl";
+
+export interface ProseProps extends HTMLAttributes<HTMLElement> {
+  /** Content scale. `lg` (prose-lg) is the comfortable blog default. */
+  size?: ProseSize;
+  /** Renders raw HTML (CMS / MDX output). Mutually exclusive with children. */
+  html?: string;
+  /** When true, removes the reading-width cap. */
+  wide?: boolean;
+}
+
+const sizes: Record<ProseSize, string> = {
+  sm: "prose-sm",
+  md: "prose",
+  lg: "prose-lg",
+  xl: "prose-xl",
+  "2xl": "prose-2xl",
+};
+
+/**
+ * Blog / article / documentation body text.
+ *
+ * Wraps Tailwind Typography (`@tailwindcss/typography`) and re-skins its
+ * colors, type scale and code blocks through the same design tokens as every
+ * other component, so dark palettes and font swaps work out of the box.
+ */
+export const Prose = forwardRef<HTMLElement, ProseProps>(
+  ({ className, size = "lg", html, wide = false, children, ...props }, ref) => (
+    <article
+      ref={ref}
+      className={cn(
+        "prose prose-neutral",
+        sizes[size],
+        !wide && "max-w-3xl",
+        className,
+      )}
+      {...(html ? { dangerouslySetInnerHTML: { __html: html } } : null)}
+      {...props}
+    >
+      {html ? null : children}
+    </article>
+  ),
+);
+Prose.displayName = "Prose";
+
+/** Intro / stand-first paragraph styled with the `prose` lead class. */
+export const ProseLead = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("lead", className)} {...props} />
+  ),
+);
+ProseLead.displayName = "ProseLead";

package/src/components/Section.tsx

@@ -0,0 +1,106 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+import { Container } from "./Container";
+
+export type EyebrowStyle = "caps" | "soft" | "plain";
+
+export interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  eyebrow?: ReactNode;
+  eyebrowStyle?: EyebrowStyle;
+  title?: ReactNode;
+  description?: ReactNode;
+  align?: "left" | "center";
+}
+
+const eyebrowBase = "inline-flex items-center gap-2 text-xs font-semibold tracking-[0.18em] uppercase";
+
+const eyebrowStyles: Record<EyebrowStyle, string> = {
+  caps: cn(eyebrowBase, "text-foreground/50"),
+  soft: cn(
+    eyebrowBase,
+    "rounded-full px-3 py-1 text-primary tracking-widest bg-primary-soft uppercase",
+  ),
+  plain: cn(eyebrowBase, "text-primary"),
+};
+
+export const SectionHeader = forwardRef<HTMLDivElement, SectionHeaderProps>(
+  (
+    { className, eyebrow, eyebrowStyle = "caps", title, description, align = "center", children, ...props },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      className={cn(
+        "mb-14 max-w-2xl",
+        align === "center" && "mx-auto text-center",
+        className,
+      )}
+      {...props}
+    >
+      {eyebrow ? <p className={eyebrowStyles[eyebrowStyle]}>{eyebrow}</p> : null}
+      {title ? (
+        <h2 className="mt-5 font-display text-balance text-[1.9rem] font-semibold leading-[1.08] tracking-tight text-foreground sm:text-4xl">
+          {title}
+        </h2>
+      ) : null}
+      {description ? (
+        <p className="mt-4 text-pretty text-base leading-7 text-muted-foreground sm:text-lg">
+          {description}
+        </p>
+      ) : null}
+      {children}
+    </div>
+  ),
+);
+SectionHeader.displayName = "SectionHeader";
+
+export interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  size?: "sm" | "md" | "lg";
+  eyebrow?: ReactNode;
+  eyebrowStyle?: EyebrowStyle;
+  title?: ReactNode;
+  description?: ReactNode;
+  align?: "left" | "center";
+  containerClassName?: string;
+}
+
+const paddings: Record<NonNullable<SectionProps["size"]>, string> = {
+  sm: "py-14",
+  md: "py-20 sm:py-24",
+  lg: "py-24 sm:py-32",
+};
+
+export const Section = forwardRef<HTMLElement, SectionProps>(
+  (
+    {
+      className,
+      containerClassName,
+      size = "md",
+      eyebrow,
+      eyebrowStyle,
+      title,
+      description,
+      align = "center",
+      children,
+      id,
+      ...props
+    },
+    ref,
+  ) => (
+    <section ref={ref} id={id} className={cn("w-full", paddings[size], className)} {...props}>
+      <Container className={containerClassName}>
+        {eyebrow || title || description ? (
+          <SectionHeader
+            eyebrow={eyebrow}
+            eyebrowStyle={eyebrowStyle}
+            title={title}
+            description={description}
+            align={align}
+          />
+        ) : null}
+        {children}
+      </Container>
+    </section>
+  ),
+);
+Section.displayName = "Section";