@ugurdemirel/landcraft 0.1.3 → 0.1.4

package/src/components/Testimonials/variants/Grid.tsx

@@ -0,0 +1,19 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../../utils/cn";
+import { TestimonialCard } from "../TestimonialCard";
+import type { Testimonial } from "../types";
+
+interface GridProps extends HTMLAttributes<HTMLDivElement> {
+  items: Testimonial[];
+}
+
+export const TestimonialsGrid = forwardRef<HTMLDivElement, GridProps>(
+  ({ className, items, ...props }, ref) => (
+    <div className={cn("columns-1 gap-4 md:columns-2 lg:columns-3", className)} ref={ref} {...props}>
+      {items.map((item, i) => (
+        <TestimonialCard key={i} testimonial={item} />
+      ))}
+    </div>
+  ),
+);
+TestimonialsGrid.displayName = "TestimonialsGrid";

package/src/components/Testimonials/variants/Marquee.tsx

@@ -0,0 +1,28 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../../utils/cn";
+import { TestimonialCard } from "../TestimonialCard";
+import type { Testimonial } from "../types";
+
+interface MarqueeProps extends HTMLAttributes<HTMLDivElement> {
+  items: Testimonial[];
+}
+
+export const TestimonialsMarquee = forwardRef<HTMLDivElement, MarqueeProps>(
+  ({ className, items, ...props }, ref) => {
+    const doubled = [...items, ...items];
+    return (
+      <div className={cn("w-full overflow-hidden", className)} ref={ref} {...props}>
+        <div className="mask-fade-x">
+          <div className="flex w-max animate-marquee gap-4 pr-4 motion-reduce:animate-none">
+            {doubled.map((item, i) => (
+              <div key={i} className="w-[19rem] shrink-0 sm:w-[24rem]">
+                <TestimonialCard testimonial={item} className="m-0" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+TestimonialsMarquee.displayName = "TestimonialsMarquee";

package/src/utils/useTokenForeground.ts

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect, useState } from "react";
 import { getContrastText } from "./contrast";
 

package/src/components/Blog.tsx

@@ -1,251 +0,0 @@
-import { forwardRef, type ElementType, 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";
-  /** Component used to render the card link. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
-  LinkComponent?: ElementType;
-}
-
-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", LinkComponent, ...props }, ref) => {
-    const Link = LinkComponent ?? "a";
-
-    if (option === "row") {
-      return (
-        <Link
-          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>
-        </Link>
-      );
-    }
-
-    const author = post.author;
-    return (
-      <Link
-        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>
-      </Link>
-    );
-  },
-);
-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;
-  /** Component used to render the "show all" link and post cards. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
-  LinkComponent?: ElementType;
-}
-
-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,
-      LinkComponent,
-      ...props
-    },
-    ref,
-  ) => {
-    const visible = limit ? posts.slice(0, limit) : posts;
-    const Link = LinkComponent ?? "a";
-
-    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 ? (
-                <Link
-                  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" />
-                </Link>
-              ) : 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" LinkComponent={LinkComponent} />
-              ))}
-            </div>
-          ) : (
-            <div className={cn("grid grid-cols-1 gap-4", gridCols[columns])}>
-              {visible.map((post) => (
-                <BlogCard key={post.title} post={post} option="card" LinkComponent={LinkComponent} />
-              ))}
-            </div>
-          )}
-        </Container>
-      </section>
-    );
-  },
-);
-BlogSection.displayName = "BlogSection";

package/src/components/CTA.tsx

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

package/src/components/FAQ.tsx

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