@ugurdemirel/landcraft 0.1.0

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@ugurdemirel/landcraft",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Marketing/landing-page focused React component library built on Tailwind CSS with token-based theming and automatic contrast.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tailwind-preset": "./tailwind.preset.cjs"
+  },
+  "files": [
+    "dist",
+    "tailwind.preset.cjs",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:css",
+    "build:js": "vite build",
+    "build:css": "tailwindcss -i ./src/styles/index.css -o ./dist/styles.css",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist",
+    "prepublishOnly": "pnpm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "tailwindcss": "^3.4.0",
+    "@tailwindcss/typography": "^0.5.15"
+  },
+  "peerDependenciesMeta": {
+    "@tailwindcss/typography": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.5"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "rimraf": "^6.0.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^4.3.0"
+  }
+}

package/src/components/Badge.tsx

@@ -0,0 +1,68 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+import { getContrastText } from "../utils/contrast";
+
+export type BadgeVariant = "solid" | "soft" | "outline" | "dot";
+export type BadgeSize = "sm" | "md";
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  icon?: ReactNode;
+  /** Paints the chip with an arbitrary CSS color; text color is computed for contrast. */
+  customColor?: string;
+}
+
+const base =
+  "inline-flex items-center rounded-full font-medium tracking-tight transition-colors duration-200";
+
+const sizes: Record<BadgeSize, string> = {
+  sm: "px-2.5 py-0.5 text-xs gap-1",
+  md: "px-3 py-1 text-[13px] gap-1.5",
+};
+
+const variants: Record<BadgeVariant, string> = {
+  solid: "bg-primary text-on-primary",
+  soft: "bg-primary-soft text-primary",
+  outline: "text-muted-foreground ring-1 ring-inset ring-border",
+  dot: "text-foreground ring-1 ring-inset ring-border bg-surface",
+};
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  (
+    { className, variant = "soft", size = "md", icon, customColor, style, children, ...props },
+    ref,
+  ) => {
+    const customStyle = customColor
+      ? { ...style, backgroundColor: customColor, color: getContrastText(customColor, "#111111", "#ffffff") }
+      : style;
+
+    return (
+      <span
+        ref={ref}
+        style={customStyle}
+        className={cn(
+          base,
+          sizes[size],
+          customColor ? undefined : variants[variant],
+          className,
+        )}
+        {...props}
+      >
+        {variant === "dot" ? (
+          <span
+            aria-hidden
+            className={cn(
+              "h-1.5 w-1.5 shrink-0 rounded-full",
+              customColor ? "currentColor" : "bg-primary",
+            )}
+            style={customColor ? { backgroundColor: customColor } : undefined}
+          />
+        ) : null}
+        {icon ? <span className="shrink-0 opacity-70">{icon}</span> : null}
+        {children}
+      </span>
+    );
+  },
+);
+Badge.displayName = "Badge";

package/src/components/Blog.tsx

@@ -0,0 +1,243 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+import { ArrowRight, ArrowUpRight } from "../icons";
+import { Badge } from "./Badge";
+import { Container } from "./Container";
+
+export interface BlogAuthor {
+  name: string;
+  avatar?: ReactNode;
+}
+
+export interface BlogPost {
+  title: string;
+  excerpt?: string;
+  /** Display date, e.g. "12 Aug 2026". */
+  date: string;
+  readTime?: string;
+  category?: string;
+  cover?: string;
+  /** Arbitrary CSS color for the cover placeholder accent. */
+  accent?: string;
+  href?: string;
+  author?: BlogAuthor;
+}
+
+function AuthorMark({ name, avatar }: { name: string; avatar?: ReactNode }) {
+  if (avatar) return avatar;
+  const initials = name
+    .split(" ")
+    .map((p) => p[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+  return (
+    <span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-primary-soft text-[11px] font-bold text-primary">
+      {initials}
+    </span>
+  );
+}
+
+export interface BlogCardProps extends HTMLAttributes<HTMLAnchorElement> {
+  post: BlogPost;
+  option?: "card" | "row";
+}
+
+const Cover = ({ post }: { post: BlogPost }) =>
+  post.cover ? (
+    <img src={post.cover} alt="" loading="lazy" className="aspect-[16/10] w-full object-cover" />
+  ) : (
+    <div
+      className="grid aspect-[16/10] w-full place-items-center bg-surface-strong"
+      style={
+        post.accent
+          ? { background: `linear-gradient(135deg, ${post.accent}22, ${post.accent}11)` }
+          : undefined
+      }
+    >
+      <span
+        className="font-display text-4xl font-bold tracking-[-0.04em]"
+        style={{ color: post.accent ?? "rgb(var(--color-foreground) / 0.12)" }}
+      >
+        {post.category?.[0]?.toUpperCase()}
+      </span>
+    </div>
+  );
+
+export const BlogCard = forwardRef<HTMLAnchorElement, BlogCardProps>(
+  ({ className, post, option = "card", ...props }, ref) => {
+    if (option === "row") {
+      return (
+        <a
+          ref={ref}
+          href={post.href ?? "#"}
+          className={cn("group flex cursor-pointer items-baseline gap-5 py-6", className)}
+          {...props}
+        >
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-3">
+              {post.category ? <Badge variant="soft" size="sm">{post.category}</Badge> : null}
+              <span className="text-xs tabular-nums text-muted-foreground">
+                {post.date}
+                {post.readTime ? ` · ${post.readTime}` : ""}
+              </span>
+            </div>
+            <h3 className="mt-2.5 font-display text-xl font-semibold tracking-tight text-foreground transition-transform duration-200 group-hover:translate-x-1 sm:text-2xl">
+              {post.title}
+            </h3>
+          </div>
+          <span className="text-foreground/30 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-foreground">
+            <ArrowUpRight className="h-5 w-5" />
+          </span>
+        </a>
+      );
+    }
+
+    const author = post.author;
+    return (
+      <a
+        ref={ref}
+        href={post.href ?? "#"}
+        className={cn(
+          "group flex h-full cursor-pointer flex-col overflow-hidden rounded-xl border border-border bg-surface transition-colors duration-200 hover:border-foreground/20",
+          className,
+        )}
+        {...props}
+      >
+        <div className="overflow-hidden">
+          <Cover post={post} />
+        </div>
+        <div className="flex flex-1 flex-col p-6">
+          <div className="flex items-center justify-between gap-3">
+            {post.category ? <Badge variant="soft" size="sm">{post.category}</Badge> : <span />}
+            {post.readTime ? (
+              <span className="text-xs text-muted-foreground">{post.readTime}</span>
+            ) : null}
+          </div>
+          <h3 className="mt-4 font-display text-lg font-semibold leading-snug tracking-tight text-foreground sm:text-xl">
+            {post.title}
+          </h3>
+          {post.excerpt ? (
+            <p className="mt-2.5 line-clamp-2 text-sm leading-6 text-muted-foreground">
+              {post.excerpt}
+            </p>
+          ) : null}
+          <div className="mt-5 flex items-center justify-between gap-3 border-t border-border pt-4">
+            {author ? (
+              <span className="flex min-w-0 items-center gap-2.5">
+                <AuthorMark name={author.name} avatar={author.avatar} />
+                <span className="truncate text-xs font-medium text-foreground">{author.name}</span>
+              </span>
+            ) : (
+              <span className="text-xs tabular-nums text-muted-foreground">{post.date}</span>
+            )}
+            <ArrowRight className="h-4 w-4 text-foreground/35 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-foreground" />
+          </div>
+        </div>
+      </a>
+    );
+  },
+);
+BlogCard.displayName = "BlogCard";
+
+export interface BlogSectionProps
+  extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  posts: BlogPost[];
+  /** Show only the first N posts. */
+  limit?: number;
+  columns?: 2 | 3;
+  option?: "card" | "row";
+  eyebrow?: ReactNode;
+  eyebrowStyle?: "caps" | "soft" | "plain";
+  title?: ReactNode;
+  description?: ReactNode;
+  showAllLabel?: string;
+  showAllHref?: string;
+}
+
+const gridCols: Record<NonNullable<BlogSectionProps["columns"]>, string> = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+};
+
+export const BlogSection = forwardRef<HTMLElement, BlogSectionProps>(
+  (
+    {
+      className,
+      posts,
+      limit,
+      columns = 3,
+      option = "card",
+      eyebrow,
+      eyebrowStyle = "caps",
+      title,
+      description,
+      showAllLabel,
+      showAllHref,
+      ...props
+    },
+    ref,
+  ) => {
+    const visible = limit ? posts.slice(0, limit) : posts;
+
+    return (
+      <section ref={ref} className={cn("w-full py-20 sm:py-24", className)} {...props}>
+        <Container>
+          {(eyebrow || title || description || showAllHref) && (
+            <div className="mb-12 flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
+              <div className="max-w-2xl">
+                {eyebrow ? (
+                  <p
+                    className={cn(
+                      "text-xs font-semibold uppercase tracking-[0.18em]",
+                      eyebrowStyle === "caps" && "text-foreground/50",
+                      eyebrowStyle === "soft" &&
+                        "inline-flex items-center rounded-full bg-primary-soft px-3 py-1.5 text-primary",
+                      eyebrowStyle === "plain" && "text-primary",
+                    )}
+                  >
+                    {eyebrow}
+                  </p>
+                ) : null}
+                {title ? (
+                  <h2 className="mt-4 font-display text-balance 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>
+              {showAllHref ? (
+                <a
+                  href={showAllHref}
+                  className="group inline-flex shrink-0 cursor-pointer items-center gap-1.5 text-sm font-semibold text-foreground transition-colors duration-150 hover:text-primary"
+                >
+                  {showAllLabel ?? "All posts"}
+                  <ArrowRight className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5" />
+                </a>
+              ) : null}
+            </div>
+          )}
+
+          {option === "row" ? (
+            <div className="divide-y divide-border border-t border-border">
+              {visible.map((post) => (
+                <BlogCard key={post.title} post={post} option="row" />
+              ))}
+            </div>
+          ) : (
+            <div className={cn("grid grid-cols-1 gap-4", gridCols[columns])}>
+              {visible.map((post) => (
+                <BlogCard key={post.title} post={post} option="card" />
+              ))}
+            </div>
+          )}
+        </Container>
+      </section>
+    );
+  },
+);
+BlogSection.displayName = "BlogSection";

package/src/components/Button.tsx

@@ -0,0 +1,94 @@
+import { forwardRef, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+import { getContrastText } from "../utils/contrast";
+
+export type ButtonVariant = "primary" | "dark" | "outline" | "ghost" | "link";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+  /** Paints the button with an arbitrary CSS color; text color is computed for contrast. */
+  customColor?: string;
+  fullWidth?: boolean;
+}
+
+const variants: Record<ButtonVariant, string> = {
+  primary: "bg-primary text-on-primary hover:bg-primary-hover",
+  dark: "bg-secondary text-on-secondary hover:bg-secondary-hover",
+  outline:
+    "border border-border bg-transparent text-foreground hover:border-foreground/30 hover:bg-surface",
+  ghost: "text-foreground hover:bg-surface",
+  link: "px-0 h-auto text-primary hover:text-primary-hover",
+};
+
+const sizes: Record<ButtonSize, string> = {
+  sm: "h-9 px-4 text-[13px] gap-1.5",
+  md: "h-11 px-5 text-sm gap-2",
+  lg: "h-12 px-7 text-[15px] gap-2",
+};
+
+const base =
+  "group inline-flex select-none items-center justify-center rounded-lg font-medium tracking-tight transition-[background-color,border-color,color,box-shadow] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant = "primary",
+      size = "md",
+      iconLeft,
+      iconRight,
+      customColor,
+      fullWidth,
+      style,
+      type = "button",
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const customStyle: CSSProperties | undefined = customColor
+      ? {
+          ...style,
+          backgroundColor: customColor,
+          color: getContrastText(customColor),
+        }
+      : style;
+
+    const isLink = variant === "link";
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        style={customStyle}
+        className={cn(
+          base,
+          sizes[size],
+          customColor ? "hover:brightness-95" : variants[variant],
+          isLink && "underline-offset-4 hover:underline",
+          fullWidth && "w-full",
+          className,
+        )}
+        {...props}
+      >
+        {iconLeft ? <span className={cn("shrink-0", !isLink && "opacity-70")}>{iconLeft}</span> : null}
+        {children}
+        {iconRight ? (
+          <span
+            className={cn(
+              "shrink-0 transition-transform duration-200",
+              !isLink && "opacity-70 group-hover:translate-x-0.5",
+            )}
+          >
+            {iconRight}
+          </span>
+        ) : null}
+      </button>
+    );
+  },
+);
+Button.displayName = "Button";

package/src/components/CTA.tsx

@@ -0,0 +1,155 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+import { useTokenForeground } from "../utils/useTokenForeground";
+import { Container } from "./Container";
+
+export interface CTAProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  secondaryAction?: ReactNode;
+  option?: "panel" | "surface" | "inverse";
+  align?: "left" | "center";
+}
+
+export const CTA = forwardRef<HTMLElement, CTAProps>(
+  (
+    { className, title, description, action, secondaryAction, option = "panel", align = "left", id, ...props },
+    ref,
+  ) => {
+    const isPanel = option === "panel";
+    const isInverse = option === "inverse";
+    // panel → brand gradient; inverse → ink. Readable text must be derived from
+    // the actual painting token so contrast survives any palette.
+    const fg = useTokenForeground(isInverse ? "--color-secondary" : "--color-primary");
+
+    /** surface — quiet paper band: hairline rule, big display type, actions right. */
+    if (option === "surface") {
+      return (
+        <section ref={ref} id={id} className={cn("w-full", className)} {...props}>
+          <Container className="py-20 sm:py-24">
+            <div
+              className={cn(
+                "flex flex-col gap-10 border-t border-border pt-14 sm:flex-row sm:items-end sm:justify-between sm:pt-16",
+                align === "center" && "items-center text-center sm:flex-col sm:items-center",
+              )}
+            >
+              <div className={cn("max-w-3xl", align === "center" && "mx-auto")}>
+                <h2 className="font-display text-4xl font-semibold leading-[1.03] tracking-[-0.03em] text-balance text-foreground sm:text-6xl">
+                  {title}
+                </h2>
+                {description ? (
+                  <p className={cn("mt-5 max-w-xl text-pretty text-base leading-7 text-muted-foreground sm:text-lg", align === "center" && "mx-auto")}>
+                    {description}
+                  </p>
+                ) : null}
+              </div>
+              <div
+                className={cn(
+                  "flex flex-wrap items-center gap-4",
+                  align === "center" && "justify-center",
+                )}
+              >
+                {action}
+                {secondaryAction}
+              </div>
+            </div>
+          </Container>
+        </section>
+      );
+    }
+
+    return (
+      <section ref={ref} id={id} className={cn("w-full py-6 pb-20", className)} {...props}>
+        <Container>
+          {isPanel ? (
+            <div
+              className="relative overflow-hidden rounded-[1.75rem] px-7 py-14 sm:px-14 sm:py-20"
+              style={{
+                background:
+                  "radial-gradient(120% 160% at 0% 0%, rgb(var(--color-primary)), rgb(var(--color-primary-hover)) 55%, rgb(var(--color-primary) / 0.85))",
+                color: fg,
+              }}
+            >
+              <div aria-hidden className="pointer-events-none absolute inset-0 grain opacity-[0.07] mix-blend-overlay" />
+              <div
+                aria-hidden
+                className="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full"
+                style={{ background: "rgb(var(--color-accent))", opacity: 0.35, filter: "blur(60px)" }}
+              />
+              <div
+                className={cn(
+                  "relative flex flex-col gap-9",
+                  align === "center" ? "items-center text-center" : "items-start",
+                )}
+              >
+                <div className={cn("max-w-2xl", align === "center" && "mx-auto")}>
+                  <h2 className="font-display text-balance text-3xl font-semibold leading-[1.06] tracking-[-0.02em] sm:text-5xl">
+                    {title}
+                  </h2>
+                  {description ? (
+                    <p
+                      className={cn(
+                        "mt-4 text-pretty text-base leading-7 sm:text-lg",
+                        align === "center" && "mx-auto max-w-xl",
+                      )}
+                    >
+                      {description}
+                    </p>
+                  ) : null}
+                </div>
+                <div
+                  className={cn(
+                    "flex flex-wrap items-center gap-4",
+                    align === "center" && "justify-center",
+                  )}
+                >
+                  {action}
+                  {secondaryAction}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div
+              className="relative overflow-hidden rounded-[1.75rem] px-7 py-16 sm:px-16 sm:py-20"
+              style={{
+                backgroundColor: "rgb(var(--color-secondary))",
+                color: fg,
+              }}
+            >
+              <div aria-hidden className="pointer-events-none absolute inset-0 grain opacity-[0.09] mix-blend-overlay" />
+              <div
+                className={cn(
+                  "relative flex flex-col items-start gap-10",
+                  align === "center" && "items-center text-center",
+                  "lg:flex-row lg:items-end lg:justify-between",
+                )}
+              >
+                <div className={cn("max-w-3xl", align === "center" && "mx-auto")}>
+                  <h2 className="font-display text-balance text-4xl font-semibold leading-[1.02] tracking-[-0.03em] sm:text-6xl">
+                    {title}
+                  </h2>
+                  {description ? (
+                    <p className={cn("mt-5 max-w-xl text-pretty text-base leading-7 sm:text-lg", align === "center" && "mx-auto")}>
+                      {description}
+                    </p>
+                  ) : null}
+                </div>
+                <div
+                  className={cn(
+                    "flex flex-wrap items-center gap-4",
+                    align === "center" && "justify-center",
+                  )}
+                >
+                  {action}
+                  {secondaryAction}
+                </div>
+              </div>
+            </div>
+          )}
+        </Container>
+      </section>
+    );
+  },
+);
+CTA.displayName = "CTA";