@ugurdemirel/landcraft 0.1.4 → 0.1.9

package/src/components/CTA/variants/Inverse.tsx

@@ -1,50 +0,0 @@
-"use client";
-import { forwardRef } from "react";
-import { cn } from "../../../utils/cn";
-import { Container } from "../../Container";
-import { useTokenForeground } from "../../../utils/useTokenForeground";
-import { CTAActions } from "../parts";
-import type { CTAProps } from "../types";
-
-/** inverse — ink panel with a wide left-aligned split. */
-export const CTAInverse = forwardRef<HTMLElement, CTAProps>(
-  ({ className, title, description, action, secondaryAction, align = "left", id, ...props }, ref) => {
-    const fg = useTokenForeground("--color-secondary");
-
-    return (
-      <section ref={ref} id={id} className={cn("w-full py-6 pb-20", className)} {...props}>
-        <Container>
-          <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>
-              <CTAActions action={action} secondaryAction={secondaryAction} align={align} />
-            </div>
-          </div>
-        </Container>
-      </section>
-    );
-  },
-);
-CTAInverse.displayName = "CTAInverse";

package/src/components/CTA/variants/Panel.tsx

@@ -1,60 +0,0 @@
-"use client";
-import { forwardRef } from "react";
-import { cn } from "../../../utils/cn";
-import { Container } from "../../Container";
-import { useTokenForeground } from "../../../utils/useTokenForeground";
-import { CTAActions } from "../parts";
-import type { CTAProps } from "../types";
-
-/** panel — brand gradient panel, rounded corners. */
-export const CTAPanel = forwardRef<HTMLElement, CTAProps>(
-  ({ className, title, description, action, secondaryAction, align = "left", id, ...props }, ref) => {
-    const fg = useTokenForeground("--color-primary");
-
-    return (
-      <section ref={ref} id={id} className={cn("w-full py-6 pb-20", className)} {...props}>
-        <Container>
-          <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>
-              <CTAActions action={action} secondaryAction={secondaryAction} align={align} />
-            </div>
-          </div>
-        </Container>
-      </section>
-    );
-  },
-);
-CTAPanel.displayName = "CTAPanel";

package/src/components/CTA/variants/Surface.tsx

@@ -1,34 +0,0 @@
-import { forwardRef } from "react";
-import { cn } from "../../../utils/cn";
-import { Container } from "../../Container";
-import { CTAActions } from "../parts";
-import type { CTAProps } from "../types";
-
-/** surface — quiet paper band: hairline rule, big display type, actions right. */
-export const CTASurface = forwardRef<HTMLElement, CTAProps>(
-  ({ className, title, description, action, secondaryAction, align = "left", id, ...props }, ref) => (
-    <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>
-          <CTAActions action={action} secondaryAction={secondaryAction} align={align} />
-        </div>
-      </Container>
-    </section>
-  ),
-);
-CTASurface.displayName = "CTASurface";

package/src/components/Card.tsx

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

@@ -1,86 +0,0 @@
-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/FAQ.tsx

@@ -1,48 +0,0 @@
-import type { FAQProps } from "./types";
-import { FaqCards } from "./variants/Cards";
-import { FaqAccordion } from "./variants/Accordion";
-import { FaqSplit } from "./variants/Split";
-
-export const FAQ = ({
-  className,
-  items,
-  option = "accordion",
-  allowMultiple = false,
-  defaultOpen = [],
-  eyebrow,
-  title,
-  description,
-  ...props
-}: FAQProps) => {
-  if (option === "cards") {
-    return <FaqCards className={className} items={items} eyebrow={eyebrow} {...props} />;
-  }
-
-  if (option === "split") {
-    return (
-      <FaqSplit
-        className={className}
-        items={items}
-        allowMultiple={allowMultiple}
-        defaultOpen={defaultOpen}
-        eyebrow={eyebrow}
-        title={title}
-        description={description}
-        {...props}
-      />
-    );
-  }
-
-  // accordion
-  return (
-    <div className="mx-auto w-full max-w-3xl">
-      <FaqAccordion
-        className={className}
-        items={items}
-        allowMultiple={allowMultiple}
-        defaultOpen={defaultOpen}
-      />
-    </div>
-  );
-};
-FAQ.displayName = "FAQ";

package/src/components/FAQ/index.ts

@@ -1,2 +0,0 @@
-export { FAQ } from "./FAQ";
-export type { FAQProps, FAQOption, FaqItem } from "./types";

package/src/components/FAQ/parts.tsx

@@ -1,74 +0,0 @@
-"use client";
-import { useState } from "react";
-import { cn } from "../../utils/cn";
-import { Plus } from "../../icons";
-import type { FaqItem } from "./types";
-
-export function useFaqState(allowMultiple: boolean, defaultOpen: number[]) {
-  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;
-    });
-  };
-
-  return { openSet, toggle, isOpen: (i: number) => openSet.has(i) };
-}
-
-export function FaqItemRow({
-  item,
-  open,
-  onToggle,
-  style,
-}: {
-  item: FaqItem;
-  open: boolean;
-  onToggle: () => void;
-  style: "boxed" | "bare";
-}) {
-  return (
-    <div>
-      <h3>
-        <button
-          type="button"
-          aria-expanded={open}
-          onClick={onToggle}
-          className={
-            style === "boxed"
-              ? "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"
-              : "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={style === "boxed" ? "px-6 pb-6 text-sm leading-7 text-muted-foreground" : "pb-6 text-sm leading-7 text-muted-foreground"}>
-          {item.answer}
-        </p>
-      ) : null}
-    </div>
-  );
-}
-
-export function FaqEyebrow({ label }: { label: string }) {
-  return (
-    <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">{label}</p>
-  );
-}

package/src/components/FAQ/types.ts

@@ -1,18 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-
-export type FAQOption = "accordion" | "split" | "cards";
-
-export interface FaqItem {
-  question: string;
-  answer: string;
-}
-
-export interface FAQProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  items: FaqItem[];
-  option?: FAQOption;
-  allowMultiple?: boolean;
-  defaultOpen?: number[];
-  eyebrow?: ReactNode;
-  title?: ReactNode;
-  description?: ReactNode;
-}

package/src/components/FAQ/variants/Accordion.tsx

@@ -1,46 +0,0 @@
-"use client";
-import { cn } from "../../../utils/cn";
-import { useFaqState, FaqItemRow } from "../parts";
-import type { FAQProps } from "../types";
-
-interface AccordionProps extends FAQProps {
-  allowMultiple?: boolean;
-  defaultOpen?: number[];
-  bare?: boolean;
-}
-
-export const FaqAccordion = ({
-  className,
-  items,
-  allowMultiple = false,
-  defaultOpen = [],
-  bare = false,
-  option,
-  title,
-  eyebrow,
-  description,
-  ...props
-}: AccordionProps) => {
-  const { isOpen, toggle } = useFaqState(allowMultiple, defaultOpen);
-
-  return (
-    <div
-      className={cn(
-        !bare && "divide-y divide-border rounded-2xl border border-border bg-surface",
-        className,
-      )}
-      {...props}
-    >
-      {items.map((item, index) => (
-        <FaqItemRow
-          key={item.question}
-          item={item}
-          open={isOpen(index)}
-          onToggle={() => toggle(index)}
-          style={bare ? "bare" : "boxed"}
-        />
-      ))}
-    </div>
-  );
-};
-FaqAccordion.displayName = "FaqAccordion";

package/src/components/FAQ/variants/Cards.tsx

@@ -1,40 +0,0 @@
-import { cn } from "../../../utils/cn";
-import { FaqEyebrow } from "../parts";
-import type { FAQProps } from "../types";
-
-interface CardsProps extends FAQProps {}
-
-export const FaqCards = ({
-  className,
-  items,
-  eyebrow,
-  title,
-  description,
-  option,
-  ...props
-}: CardsProps) => (
-  <div className={cn("w-full", className)} {...props}>
-    {eyebrow ? <div className="mb-10"><FaqEyebrow label={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>
-);
-FaqCards.displayName = "FaqCards";

package/src/components/FAQ/variants/Split.tsx

@@ -1,44 +0,0 @@
-import { cn } from "../../../utils/cn";
-import { FaqEyebrow } from "../parts";
-import { FaqAccordion } from "./Accordion";
-import type { FAQProps } from "../types";
-
-interface SplitProps extends FAQProps {
-  allowMultiple?: boolean;
-  defaultOpen?: number[];
-}
-
-export const FaqSplit = ({
-  className,
-  items,
-  allowMultiple = false,
-  defaultOpen = [],
-  eyebrow,
-  title,
-  description,
-  option,
-  ...props
-}: SplitProps) => (
-  <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 ? <FaqEyebrow label={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">
-      <FaqAccordion
-        items={items}
-        allowMultiple={allowMultiple}
-        defaultOpen={defaultOpen}
-        bare
-      />
-    </div>
-  </div>
-);
-FaqSplit.displayName = "FaqSplit";

package/src/components/Features/FeatureCard.tsx

@@ -1,44 +0,0 @@
-import { forwardRef } from "react";
-import { cn } from "../../utils/cn";
-import { getContrastText } from "../../utils/contrast";
-import type { FeatureCardProps } from "./types";
-
-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";

package/src/components/Features/FeatureGrid.tsx

@@ -1,14 +0,0 @@
-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/index.ts

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

package/src/components/Features/parts.ts

@@ -1,15 +0,0 @@
-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",
-];