@ugurdemirel/landcraft 0.1.2 → 0.1.4

package/src/components/Features.tsx

@@ -1,153 +0,0 @@
-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

@@ -1,185 +0,0 @@
-import { type ElementType, 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;
-  /** 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;
-}
-
-export const Footer = ({
-  className,
-  brand,
-  logo,
-  logoSrc,
-  logoAlt,
-  logoClassName,
-  description,
-  columns,
-  socials,
-  bottom,
-  languageSwitcher,
-  option = "classic",
-  badge,
-  LinkComponent,
-  ...props
-}: FooterProps) => {
-  const Link = LinkComponent ?? "a";
-
-  const logoNode = (imageClassName = "h-7 w-auto") =>
-    logo ??
-    (logoSrc ? (
-      <img
-        src={logoSrc}
-        alt={logoAlt ?? (typeof brand === "string" ? brand : "Logo")}
-        className={cn(imageClassName, logoClassName)}
-      />
-    ) : null);
-
-  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>
-  );
-
-  const classicBrand = logoNode() ?? brandNode;
-  const minimalBrand = logoNode() ?? brandNode;
-  const editorialBrand = logoNode("h-12 w-auto") ?? (
-    <span className="font-display text-5xl font-bold tracking-[-0.03em] text-foreground sm:text-7xl">
-      {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">
-          {minimalBrand}
-          <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>
-    );
-  }
-
-  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>
-              {editorialBrand}
-              {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}>
-                      <Link href={link.href} className="text-[15px] text-foreground/80 transition-colors duration-150 hover:text-foreground">
-                        {link.label}
-                      </Link>
-                    </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>
-            {languageSwitcher ? <div>{languageSwitcher}</div> : null}
-            <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))" }}>{classicBrand}</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>
-        <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>
-          {languageSwitcher ? <div>{languageSwitcher}</div> : null}
-          <span>© {new Date().getFullYear()} {brand}. All rights reserved.</span>
-        </div>
-      </Container>
-    </footer>
-  );
-};
-Footer.displayName = "Footer";

package/src/components/Hero.tsx

@@ -1,169 +0,0 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
-import { cn } from "../utils/cn";
-import { useTokenForeground } from "../utils/useTokenForeground";
-
-export interface HeroMeta {
-  label: string;
-  icon?: ReactNode;
-}
-
-export interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  variant?: "split" | "centered" | "statement";
-  eyebrow?: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-  primaryAction?: ReactNode;
-  secondaryAction?: ReactNode;
-  media?: ReactNode;
-  /** Small trust/status row shown under the copy or CTAs. */
-  meta?: HeroMeta[];
-}
-
-const titleBase =
-  "font-display font-semibold tracking-[-0.03em] text-balance text-foreground";
-
-export const Hero = forwardRef<HTMLElement, HeroProps>(
-  (
-    { className, variant = "split", eyebrow, title, description, primaryAction, secondaryAction, media, meta, id, ...props },
-    ref,
-  ) => {
-    const isCentered = variant === "centered";
-    const isStatement = variant === "statement";
-    // Statement paints its own background from --color-secondary, so the
-    // readable text color must be derived from THAT token, not the brand.
-    const fg = useTokenForeground(isStatement ? "--color-secondary" : "--color-primary");
-
-    const container =
-      "relative mx-auto flex w-full max-w-6xl flex-col items-center px-5 sm:px-8";
-
-    const eyebrowNode =
-      typeof eyebrow === "string" ? (
-        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary">{eyebrow}</p>
-      ) : eyebrow ? (
-        <div>{eyebrow}</div>
-      ) : null;
-
-    const actionsNode = primaryAction || secondaryAction ? (
-      <div className="flex flex-wrap items-center gap-4">{primaryAction}{secondaryAction}</div>
-    ) : null;
-
-    /** Split — editorial grid: huge type left, media right, meta rule under. */
-    if (variant === "split") {
-      return (
-        <section
-          ref={ref}
-          id={id}
-          className={cn("relative w-full border-b border-border bg-background", className)}
-          {...props}
-        >
-          <div className={cn(container, "items-start gap-14 pt-20 pb-20 sm:pt-28 sm:pb-28 lg:grid lg:grid-cols-[1.05fr_0.95fr] lg:gap-20")}>
-            <div className="max-w-xl">
-              {eyebrowNode}
-              <h1 className={cn(titleBase, "mt-6 text-5xl leading-[1.03] sm:text-6xl lg:text-7xl")}>
-                {title}
-              </h1>
-              {description ? (
-                <p className="mt-7 max-w-md text-pretty leading-relaxed text-muted-foreground sm:text-lg">
-                  {description}
-                </p>
-              ) : null}
-              {actionsNode ? <div className="mt-10">{actionsNode}</div> : null}
-              {meta ? (
-                <ul className="mt-14 flex flex-wrap items-center gap-x-8 gap-y-3 border-t border-border pt-6">
-                  {meta.map((m) => (
-                    <li key={m.label} className="flex items-center gap-2 text-sm text-muted-foreground">
-                      {m.icon ? <span className="text-foreground/35">{m.icon}</span> : null}
-                      {m.label}
-                    </li>
-                  ))}
-                </ul>
-              ) : null}
-            </div>
-            {media ? <div className="w-full self-center">{media}</div> : null}
-          </div>
-        </section>
-      );
-    }
-
-    /** Centered — understated, one statement, generous white space. */
-    if (isCentered) {
-      return (
-        <section
-          ref={ref}
-          id={id}
-          className={cn("relative w-full border-b border-border bg-background", className)}
-          {...props}
-        >
-          <div className={cn(container, "pt-24 pb-20 text-center sm:pt-32 sm:pb-24")}>
-            {eyebrowNode}
-            <h1 className={cn(titleBase, "mt-7 max-w-4xl text-5xl leading-[1.04] sm:text-6xl lg:text-7xl")}>
-              {title}
-            </h1>
-            {description ? (
-              <p className="mx-auto mt-7 max-w-xl text-pretty leading-relaxed text-muted-foreground sm:text-lg">
-                {description}
-              </p>
-            ) : null}
-            {actionsNode ? <div className="mt-10 justify-center">{actionsNode}</div> : null}
-            {meta ? (
-              <ul className="mt-14 flex flex-wrap items-center justify-center gap-x-9 gap-y-3">
-                {meta.map((m, i) => (
-                  <li
-                    key={m.label}
-                    className={cn(
-                      "flex items-center gap-2 text-sm text-muted-foreground",
-                      i > 0 && "sm:border-l sm:border-border sm:pl-9",
-                    )}
-                  >
-                    {m.icon ? <span className="text-foreground/35">{m.icon}</span> : null}
-                    {m.label}
-                  </li>
-                ))}
-              </ul>
-            ) : null}
-            {media ? <div className="mt-16 w-full">{media}</div> : null}
-          </div>
-        </section>
-      );
-    }
-
-    /** Statement — full-bleed ink band. No eyebrow, pure message. */
-    return (
-      <section
-        ref={ref}
-        id={id}
-        className={cn("relative w-full overflow-hidden bg-secondary", className)}
-        style={{ color: fg }}
-        {...props}
-      >
-        <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 inset-x-0 top-0 h-px bg-white/10" />
-        <div className={cn(container, "pt-28 pb-24 text-center sm:pt-36 sm:pb-32")}>
-          <h1
-            className="max-w-5xl font-display text-[2.9rem] font-semibold leading-[1.02] tracking-[-0.04em] text-balance sm:text-7xl lg:text-8xl"
-            style={{ color: fg }}
-          >
-            {title}
-          </h1>
-          {description ? (
-            <p className="mx-auto mt-8 max-w-xl text-pretty leading-relaxed sm:text-lg" style={{ color: fg, opacity: 0.72 }}>
-              {description}
-            </p>
-          ) : null}
-          {actionsNode ? <div className="mt-11 justify-center">{actionsNode}</div> : null}
-          {meta ? (
-            <ul className="mt-16 flex flex-wrap items-center justify-center gap-x-10 gap-y-3">
-              {meta.map((m) => (
-                <li key={m.label} className="flex items-center gap-2 text-sm font-medium" style={{ color: fg, opacity: 0.72 }}>
-                  {m.icon ? <span>{m.icon}</span> : null}
-                  {m.label}
-                </li>
-              ))}
-            </ul>
-          ) : null}
-        </div>
-      </section>
-    );
-  },
-);
-Hero.displayName = "Hero";