@ugurdemirel/landcraft 0.1.0

package/src/components/Card.tsx

@@ -0,0 +1,80 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+
+export type CardVariant = "outlined" | "elevated" | "inset";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: CardVariant;
+  /** Softens the whole card with hover lift + border tint. */
+  interactive?: boolean;
+}
+
+const variants: Record<CardVariant, string> = {
+  outlined: "border border-border bg-surface",
+  elevated: "border border-border bg-surface shadow-soft",
+  inset: "bg-surface-strong",
+};
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = "outlined", interactive = false, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-xl transition-[border-color,box-shadow,transform] duration-200",
+        variants[variant],
+        interactive &&
+          "cursor-pointer hover:-translate-y-0.5 hover:border-foreground/20 hover:shadow-raised",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  icon?: ReactNode;
+}
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ className, icon, children, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col gap-2 p-6 pb-0", className)} {...props}>
+      {icon ? <div className="mb-1.5">{icon}</div> : null}
+      {children}
+    </div>
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn("font-display text-lg font-semibold tracking-tight text-foreground", className)}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm leading-6 text-muted-foreground", className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-5", className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center gap-3 border-t border-border/70 p-6 pt-5", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";

package/src/components/Container.tsx

@@ -0,0 +1,86 @@
+import { forwardRef, type ElementType, type HTMLAttributes } from "react";
+import { cn } from "../utils/cn";
+
+export type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
+
+export interface ContainerProps extends HTMLAttributes<HTMLElement> {
+  /** Render as a specific element (section, header, …). */
+  as?: ElementType;
+  /**
+   * Maximum content width:
+   * `sm` → prose · `md` → reading · `lg` → plans/splits ·
+   * `xl` → default marketing page · `full` → edge-to-edge.
+   */
+  size?: ContainerSize;
+  /** Responsive gutters (px-5 / sm:px-8). Disable for flush content. */
+  gutters?: boolean;
+}
+
+const sizes: Record<Exclude<ContainerSize, "full">, string> = {
+  sm: "max-w-xl",
+  md: "max-w-3xl",
+  lg: "max-w-5xl",
+  xl: "max-w-6xl",
+};
+
+/**
+ * Shared layout wrapper — the single source of the container + gutter rules
+ * used across Section, Footer, CTA, templates…
+ */
+export const Container = forwardRef<HTMLElement, ContainerProps>(
+  ({ className, as, size = "xl", gutters = true, ...props }, ref) => {
+    const Tag = (as ?? "div") as ElementType;
+    return (
+      <Tag
+        ref={ref as never}
+        className={cn(
+          "mx-auto w-full",
+          size !== "full" && sizes[size],
+          gutters && "px-5 sm:px-8",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+Container.displayName = "Container";
+
+export type StackGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20;
+
+const gaps: Record<StackGap, string> = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  5: "gap-5",
+  6: "gap-6",
+  8: "gap-8",
+  10: "gap-10",
+  12: "gap-12",
+  16: "gap-16",
+  20: "gap-20",
+};
+
+export interface StackProps extends HTMLAttributes<HTMLDivElement> {
+  gap?: StackGap;
+  horizontal?: boolean;
+}
+
+/** Vertical (or horizontal) rhythm helper using flex gaps. */
+export const Stack = forwardRef<HTMLDivElement, StackProps>(
+  ({ className, gap = 4, horizontal = false, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "flex",
+        horizontal ? "flex-row flex-wrap items-center" : "flex-col",
+        gaps[gap],
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Stack.displayName = "Stack";

package/src/components/FAQ.tsx

@@ -0,0 +1,163 @@
+import { useState, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+import { Plus } from "../icons";
+
+export interface FaqItem {
+  question: string;
+  answer: string;
+}
+
+export interface FAQProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  items: FaqItem[];
+  option?: "accordion" | "split" | "cards";
+  allowMultiple?: boolean;
+  defaultOpen?: number[];
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+}
+
+export const FAQ = ({
+  className,
+  items,
+  option = "accordion",
+  allowMultiple = false,
+  defaultOpen = [],
+  eyebrow,
+  title,
+  description,
+  ...props
+}: FAQProps) => {
+  const [openSet, setOpenSet] = useState<Set<number>>(
+    () => new Set(allowMultiple ? defaultOpen : defaultOpen.slice(0, 1)),
+  );
+
+  const toggle = (index: number) => {
+    setOpenSet((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        if (!allowMultiple) next.clear();
+        next.add(index);
+      }
+      return next;
+    });
+  };
+
+  const headerRow = (label: string) => (
+    <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">{label}</p>
+  );
+
+  /** cards — always-open pairs in a quiet hairline grid. */
+  if (option === "cards") {
+    return (
+      <div className={cn("w-full", className)} {...props}>
+        {eyebrow ? <div className="mb-10">{headerRow(String(eyebrow))}</div> : null}
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          {items.map((item, i) => (
+            <div
+              key={item.question}
+              className="flex flex-col rounded-xl border border-border bg-surface p-7"
+            >
+              <div className="flex items-baseline gap-4">
+                <span className="font-display text-sm font-semibold tabular-nums text-foreground/35">
+                  {String(i + 1).padStart(2, "0")}
+                </span>
+                <h3 className="font-display text-lg font-semibold tracking-tight text-foreground">
+                  {item.question}
+                </h3>
+              </div>
+              <p className="mt-4 border-t border-border pt-4 text-sm leading-6 text-muted-foreground">
+                {item.answer}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  /** accordion — single-column, hairline divided. */
+  const accordion = (
+    <div className="divide-y divide-border rounded-2xl border border-border bg-surface">
+      {items.map((item, index) => {
+        const open = openSet.has(index);
+        return (
+          <div key={item.question}>
+            <h3>
+              <button
+                type="button"
+                aria-expanded={open}
+                onClick={() => toggle(index)}
+                className="flex w-full cursor-pointer items-center justify-between gap-4 px-6 py-5 text-left text-[15px] font-medium text-foreground transition-colors duration-150 hover:bg-surface-strong/60 focus-visible:outline-none"
+              >
+                {item.question}
+                <Plus
+                  className={cn(
+                    "h-4.5 w-4.5 shrink-0 text-foreground/45 transition-transform duration-200 sm:h-5 sm:w-5",
+                    open && "rotate-45 text-primary",
+                  )}
+                />
+              </button>
+            </h3>
+            {open ? (
+              <p className="px-6 pb-6 text-sm leading-7 text-muted-foreground">{item.answer}</p>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  if (option === "split") {
+    return (
+      <div className={cn("grid w-full gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:gap-20", className)} {...props}>
+        <div className="lg:sticky lg:top-24 lg:self-start">
+          {eyebrow ? headerRow(String(eyebrow)) : null}
+          {title ? (
+            <h2 className="mt-4 font-display text-3xl 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">{description}</p>
+          ) : null}
+        </div>
+        <div className="divide-y divide-border">
+          {items.map((item, index) => {
+            const open = openSet.has(index);
+            return (
+              <div key={item.question}>
+                <h3>
+                  <button
+                    type="button"
+                    aria-expanded={open}
+                    onClick={() => toggle(index)}
+                    className="flex w-full cursor-pointer items-center justify-between gap-4 py-5 text-left text-base font-semibold text-foreground transition-colors duration-150 focus-visible:outline-none"
+                  >
+                    {item.question}
+                    <Plus
+                      className={cn(
+                        "h-4.5 w-4.5 shrink-0 text-foreground/45 transition-transform duration-200 sm:h-5 sm:w-5",
+                        open && "rotate-45 text-primary",
+                      )}
+                    />
+                  </button>
+                </h3>
+                {open ? <p className="pb-6 text-sm leading-7 text-muted-foreground">{item.answer}</p> : null}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("mx-auto w-full max-w-3xl", className)} {...props}>
+      {accordion}
+    </div>
+  );
+};
+FAQ.displayName = "FAQ";

package/src/components/Features.tsx

@@ -0,0 +1,153 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+import { getContrastText } from "../utils/contrast";
+
+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 const FeatureCard = forwardRef<HTMLDivElement, FeatureCardProps>(
+  ({ className, icon, title, description, accent, large = false, ...props }, ref) => {
+    const chipStyle = accent
+      ? { backgroundColor: accent, color: getContrastText(accent, "#111111", "#ffffff") }
+      : undefined;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "group relative flex h-full flex-col rounded-xl border border-border bg-surface p-7 transition-colors duration-200 hover:border-foreground/15",
+          className,
+        )}
+        {...props}
+      >
+        {icon ? (
+          <div
+            className={cn(
+              "mb-5 inline-flex h-10 w-10 items-center justify-center rounded-lg text-[1.05rem]",
+              !accent && "bg-primary-soft text-primary",
+            )}
+            style={chipStyle}
+          >
+            {icon}
+          </div>
+        ) : null}
+        <h3 className={cn("font-display font-semibold tracking-tight text-foreground", large ? "text-2xl" : "text-lg")}>
+          {title}
+        </h3>
+        {description ? (
+          <p className={cn("mt-2.5 text-pretty leading-relaxed text-muted-foreground", large ? "text-[15px]" : "text-sm")}>
+            {description}
+          </p>
+        ) : null}
+      </div>
+    );
+  },
+);
+FeatureCard.displayName = "FeatureCard";
+
+export interface FeatureGridProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  features: FeatureItem[];
+  option?: "columns" | "bento" | "editorialRows";
+  columns?: 2 | 3 | 4;
+}
+
+const gridCols: Record<NonNullable<FeatureGridProps["columns"]>, 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. */
+const bentoSpans: string[] = [
+  "sm:col-span-2 lg:row-span-2",
+  "",
+  "",
+  "lg:col-span-2",
+  "",
+  "lg:col-span-2",
+];
+
+export const FeatureGrid = forwardRef<HTMLDivElement, FeatureGridProps>(
+  ({ className, features, option = "columns", columns = 3, ...props }, ref) => {
+    if (option === "editorialRows") {
+      return (
+        <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>
+      );
+    }
+
+    if (option === "bento") {
+      return (
+        <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)]",
+            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>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid grid-cols-1 gap-4",
+          gridCols[columns],
+          className,
+        )}
+        {...props}
+      >
+        {features.map((feature, i) => (
+          <FeatureCard key={i} {...feature} className="h-full" />
+        ))}
+      </div>
+    );
+  },
+);
+FeatureGrid.displayName = "FeatureGrid";

package/src/components/Footer.tsx

@@ -0,0 +1,145 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+import { Container } from "./Container";
+
+export interface FooterLink {
+  label: string;
+  href: string;
+}
+
+export interface FooterColumn {
+  title: string;
+  links: FooterLink[];
+}
+
+export interface FooterProps extends HTMLAttributes<HTMLElement> {
+  brand?: ReactNode;
+  description?: string;
+  columns: FooterColumn[];
+  socials?: ReactNode;
+  bottom?: ReactNode;
+  option?: "classic" | "minimal" | "editorial";
+  badge?: ReactNode;
+}
+
+export const Footer = ({
+  className,
+  brand,
+  description,
+  columns,
+  socials,
+  bottom,
+  option = "classic",
+  badge,
+  ...props
+}: FooterProps) => {
+  const brandNode = (
+    <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>
+  );
+
+  if (option === "minimal") {
+    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}>
+                <a href={link.href} className="text-sm text-muted-foreground transition-colors duration-150 hover:text-foreground">
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+          <div className="text-sm text-muted-foreground">{bottom}</div>
+        </Container>
+      </footer>
+    );
+  }
+
+  if (option === "editorial") {
+    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>
+              <span className="font-display text-5xl font-bold tracking-[-0.03em] text-foreground sm:text-7xl">
+                {brand}
+              </span>
+              {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="grid grid-cols-2 gap-8 border-t border-border pt-12 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}>
+                      <a href={link.href} className="text-[15px] text-foreground/80 transition-colors duration-150 hover:text-foreground">
+                        {link.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+          <div className="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">
+            <span>{bottom}</span>
+            <span>© {new Date().getFullYear()} {brand}. All rights reserved.</span>
+          </div>
+        </Container>
+      </footer>
+    );
+  }
+
+  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}>
+                    <a
+                      href={link.href}
+                      className="text-sm text-on-secondary/70 transition-colors duration-150 hover:text-on-secondary"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <div className="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">
+          <span>{bottom}</span>
+          <span>© {new Date().getFullYear()} {brand}. All rights reserved.</span>
+        </div>
+      </Container>
+    </footer>
+  );
+};
+Footer.displayName = "Footer";