@ugurdemirel/landcraft 0.1.3 → 0.1.5

package/src/components/Section.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Section, SectionHeader } from "./Section";
+
+describe("Section", () => {
+  it("renders a section element with padding for the size", () => {
+    render(<Section size="lg">Body</Section>);
+    const section = screen.getByText("Body").closest("section");
+    expect(section).toBeInTheDocument();
+    expect(section).toHaveClass("py-24");
+  });
+
+  it("renders children", () => {
+    render(<Section>Body</Section>);
+    expect(screen.getByText("Body")).toBeInTheDocument();
+  });
+
+  it("forwards an id", () => {
+    render(<Section id="pricing">Pricing</Section>);
+    expect(screen.getByText("Pricing").closest("section")).toHaveAttribute("id", "pricing");
+  });
+
+  it("renders a SectionHeader with eyebrow/title/description when provided", () => {
+    render(
+      <Section eyebrow="E" title="T" description="D">
+        Body
+      </Section>,
+    );
+    expect(screen.getByText("E")).toBeInTheDocument();
+    expect(screen.getByText("T")).toBeInTheDocument();
+    expect(screen.getByText("D")).toBeInTheDocument();
+  });
+});
+
+describe("SectionHeader", () => {
+  it("renders eyebrow, title and description", () => {
+    render(<SectionHeader eyebrow="E" title="T" description="D" />);
+    expect(screen.getByText("E")).toBeInTheDocument();
+    expect(screen.getByText("T")).toBeInTheDocument();
+    expect(screen.getByText("D")).toBeInTheDocument();
+  });
+
+  it("centers by default and aligns left when requested", () => {
+    const { rerender } = render(<SectionHeader title="T" />);
+    expect(screen.getByText("T").parentElement).toHaveClass("text-center");
+
+    rerender(<SectionHeader title="T" align="left" />);
+    // left is the base; center adds mx-auto text-center.
+    expect(screen.getByText("T").parentElement).not.toHaveClass("text-center");
+  });
+});

package/src/components/Slot.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Slot } from "./Slot";
+
+describe("Slot", () => {
+  it("renders the single child with merged props", () => {
+    render(
+      <Slot className="btn" data-testid="slot">
+        <span>Hello</span>
+      </Slot>,
+    );
+    const el = screen.getByTestId("slot");
+    expect(el.tagName).toBe("SPAN");
+    expect(el).toHaveClass("btn");
+  });
+
+  it("forwards an onClick to the child and calls both handlers", () => {
+    const slotClick = vi.fn();
+    const childClick = vi.fn();
+    render(
+      <Slot onClick={slotClick}>
+        <button onClick={childClick}>Go</button>
+      </Slot>,
+    );
+    const btn = screen.getByRole("button", { name: "Go" });
+    btn.click();
+    expect(childClick).toHaveBeenCalledTimes(1);
+    expect(slotClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders nothing when there is no single valid child", () => {
+    const { container } = render(<Slot>text only</Slot>);
+    // A plain string is not a valid React element, so Slot returns null.
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("merges className with the child", () => {
+    render(
+      <Slot className="slot-class">
+        <div className="child-class">x</div>
+      </Slot>,
+    );
+    expect(screen.getByText("x")).toHaveClass("slot-class child-class");
+  });
+});

package/src/components/Stats/Stats.test.tsx

@@ -0,0 +1,47 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Stats } from "./Stats";
+
+const stats = [
+  { value: "12.4K", label: "Active users", delta: 18.2 },
+  { value: "98", suffix: "%", label: "Satisfaction", accent: true },
+  { value: "1.8", suffix: "ms", label: "Response" },
+];
+
+describe("Stats", () => {
+  it("renders labels and values with the editorial option by default", () => {
+    render(<Stats stats={stats} />);
+    expect(screen.getByText("Active users")).toBeInTheDocument();
+    expect(screen.getByText("12.4K")).toBeInTheDocument();
+    expect(screen.getByText("Satisfaction")).toBeInTheDocument();
+  });
+
+  it("renders a suffix inline with the value", () => {
+    render(<Stats stats={[stats[1]]} />);
+    expect(screen.getByText("%")).toBeInTheDocument();
+  });
+
+  it("renders delta badges for statistics that have a delta", () => {
+    render(<Stats stats={[stats[0]]} />);
+    expect(screen.getByText("18.2%")).toBeInTheDocument();
+  });
+
+  it("renders all option layouts", () => {
+    const { rerender } = render(<Stats stats={stats} option="editorial" />);
+    expect(screen.getByText("Active users")).toBeInTheDocument();
+
+    rerender(<Stats stats={stats} option="hairline" />);
+    expect(screen.getByText("Active users")).toBeInTheDocument();
+
+    rerender(<Stats stats={stats} option="cells" />);
+    expect(screen.getByText("Active users")).toBeInTheDocument();
+
+    rerender(<Stats stats={stats} option="ticker" />);
+    expect(screen.getByText("Active users")).toBeInTheDocument();
+  });
+
+  it("uses a downward delta badge for negative changes", () => {
+    render(<Stats stats={[{ value: "1.8", label: "Response", delta: -24.6 }]} />);
+    expect(screen.getByText("24.6%")).toBeInTheDocument();
+  });
+});

package/src/components/Stats/Stats.tsx

@@ -0,0 +1,16 @@
+import { forwardRef } from "react";
+import type { StatsProps } from "./types";
+import { StatsEditorial } from "./variants/Editorial";
+import { StatsHairline } from "./variants/Hairline";
+import { StatsCells } from "./variants/Cells";
+import { StatsTicker } from "./variants/Ticker";
+
+export const Stats = forwardRef<HTMLDListElement, StatsProps>(
+  ({ option = "editorial", ...props }, ref) => {
+    if (option === "ticker") return <StatsTicker ref={ref} {...props} />;
+    if (option === "cells") return <StatsCells ref={ref} {...props} />;
+    if (option === "hairline") return <StatsHairline ref={ref} {...props} />;
+    return <StatsEditorial ref={ref} {...props} />;
+  },
+);
+Stats.displayName = "Stats";

package/src/components/Stats/index.ts

@@ -0,0 +1,2 @@
+export { Stats } from "./Stats";
+export type { StatsProps, StatsOption, Stat } from "./types";

package/src/components/Stats/parts.tsx

@@ -0,0 +1,29 @@
+import { cn } from "../../utils/cn";
+import { ArrowUp, ArrowDown } from "../../icons";
+
+export const valueBase =
+  "font-display font-semibold tabular-nums tracking-[-0.02em] text-foreground";
+
+export const suffixBase = "ml-1 font-sans text-sm font-normal tracking-normal text-muted-foreground";
+
+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",
+};
+
+export function DeltaBadge({ delta }: { delta: number }) {
+  const isUp = delta >= 0;
+  const Icon = isUp ? ArrowUp : ArrowDown;
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums",
+        isUp ? "bg-accent/10 text-accent" : "bg-danger-soft text-danger",
+      )}
+    >
+      <Icon className="h-3 w-3" />
+      {Math.abs(delta)}%
+    </span>
+  );
+}

package/src/components/Stats/types.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type StatsOption = "editorial" | "hairline" | "cells" | "ticker";
+
+export interface Stat {
+  value: string;
+  label: string;
+  /** Small unit rendered inline with the value, e.g. "ms" or "₺". */
+  suffix?: string;
+  /** Trend change in percent — renders an up/down badge. */
+  delta?: number;
+  /** Optional supporting copy. */
+  sub?: string;
+  icon?: ReactNode;
+  /** Highlights the value with the primary token. */
+  accent?: boolean;
+}
+
+export interface StatsProps extends HTMLAttributes<HTMLDListElement> {
+  stats: Stat[];
+  option?: StatsOption;
+  columns?: 2 | 3 | 4;
+}

package/src/components/Stats/variants/Cells.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../../utils/cn";
+import { valueBase, suffixBase, gridCols } from "../parts";
+import type { Stat } from "../types";
+
+interface CellsProps extends HTMLAttributes<HTMLDListElement> {
+  stats: Stat[];
+  columns?: 2 | 3 | 4;
+}
+
+export const StatsCells = forwardRef<HTMLDListElement, CellsProps>(
+  ({ className, stats, columns = 4, ...props }, ref) => (
+    <dl ref={ref} className={cn("grid grid-cols-1 gap-4", gridCols[columns], className)} {...props}>
+      {stats.map((stat) => (
+        <div
+          key={stat.label}
+          className="flex min-h-[8.5rem] flex-col justify-between rounded-xl border border-border bg-surface p-6"
+        >
+          <dd className={cn(valueBase, "text-3xl", stat.accent ? "text-primary" : undefined)}>
+            {stat.value}
+            {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}
+          </dd>
+          <div className="mt-5 flex items-center justify-between gap-3">
+            <dt className="text-sm text-muted-foreground">{stat.label}</dt>
+            {stat.icon ? (
+              <span className="text-foreground/30">{stat.icon}</span>
+            ) : null}
+          </div>
+        </div>
+      ))}
+    </dl>
+  ),
+);
+StatsCells.displayName = "StatsCells";

package/src/components/Stats/variants/Editorial.tsx

@@ -0,0 +1,41 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../../utils/cn";
+import { valueBase, suffixBase, gridCols, DeltaBadge } from "../parts";
+import type { Stat } from "../types";
+
+interface EditorialProps extends HTMLAttributes<HTMLDListElement> {
+  stats: Stat[];
+  columns?: 2 | 3 | 4;
+}
+
+/** editorial — label above, oversized number, hairline rule under. */
+export const StatsEditorial = forwardRef<HTMLDListElement, EditorialProps>(
+  ({ className, stats, columns = 4, ...props }, ref) => (
+    <dl ref={ref} className={cn("grid grid-cols-1 gap-x-10 gap-y-12", gridCols[columns], className)} {...props}>
+      {stats.map((stat) => (
+        <div key={stat.label} className="border-t border-border pt-6">
+          <div className="flex items-center justify-between gap-3">
+            <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              {stat.label}
+            </dt>
+            {typeof stat.delta === "number" ? <DeltaBadge delta={stat.delta} /> : null}
+          </div>
+          <dd
+            className={cn(
+              valueBase,
+              "mt-4 text-5xl sm:text-6xl",
+              stat.accent ? "text-primary" : undefined,
+            )}
+          >
+            {stat.value}
+            {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}
+          </dd>
+          {stat.sub ? (
+            <p className="mt-3 max-w-xs text-[13px] leading-5 text-muted-foreground">{stat.sub}</p>
+          ) : null}
+        </div>
+      ))}
+    </dl>
+  ),
+);
+StatsEditorial.displayName = "StatsEditorial";

package/src/components/Stats/variants/Hairline.tsx

@@ -0,0 +1,31 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../../utils/cn";
+import { valueBase, suffixBase, gridCols } from "../parts";
+import type { Stat } from "../types";
+
+interface HairlineProps extends HTMLAttributes<HTMLDListElement> {
+  stats: Stat[];
+  columns?: 2 | 3 | 4;
+}
+
+export const StatsHairline = forwardRef<HTMLDListElement, HairlineProps>(
+  ({ className, stats, columns = 4, ...props }, ref) => (
+    <dl ref={ref} className={cn("grid grid-cols-1 gap-y-10", gridCols[columns], className)} {...props}>
+      {stats.map((stat, i) => (
+        <div
+          key={stat.label}
+          className={cn("text-center", columns > 1 && i > 0 && "sm:border-l sm:border-border")}
+        >
+          <dd className={cn(valueBase, "text-5xl", stat.accent ? "text-primary" : undefined)}>
+            {stat.value}
+            {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}
+          </dd>
+          <dt className="mt-3 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+            {stat.label}
+          </dt>
+        </div>
+      ))}
+    </dl>
+  ),
+);
+StatsHairline.displayName = "StatsHairline";

package/src/components/Stats/variants/Ticker.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../../utils/cn";
+import { valueBase, suffixBase, DeltaBadge } from "../parts";
+import type { Stat } from "../types";
+
+interface TickerProps extends HTMLAttributes<HTMLDListElement> {
+  stats: Stat[];
+}
+
+export const StatsTicker = forwardRef<HTMLDListElement, TickerProps>(
+  ({ className, stats, ...props }, ref) => (
+    <dl ref={ref} className={cn("flex w-full items-stretch overflow-x-auto rounded-2xl border border-border bg-surface", className)} {...props}>
+      {stats.map((stat, i) => (
+        <div
+          key={stat.label}
+          className={cn("flex min-w-[11rem] flex-1 flex-col gap-3 p-6", i > 0 && "border-l border-border")}
+        >
+          <div className="flex items-center justify-between gap-3">
+            <dt className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+              {stat.label}
+            </dt>
+            {typeof stat.delta === "number" ? <DeltaBadge delta={stat.delta} /> : null}
+          </div>
+          <dd className={cn(valueBase, "text-3xl", stat.accent ? "text-primary" : undefined)}>
+            {stat.value}
+            {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}
+          </dd>
+          {stat.sub ? (
+            <p className="text-[13px] leading-5 text-muted-foreground">{stat.sub}</p>
+          ) : null}
+        </div>
+      ))}
+    </dl>
+  ),
+);
+StatsTicker.displayName = "StatsTicker";

package/src/components/Testimonials/TestimonialCard.tsx

@@ -0,0 +1,61 @@
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn";
+import { getContrastText } from "../../utils/contrast";
+import { Quote, Star } from "../../icons";
+import { initials } from "./parts";
+import type { TestimonialCardProps } from "./types";
+
+export const TestimonialCard = forwardRef<HTMLElement, TestimonialCardProps>(
+  function TestimonialCard({ className, testimonial, ...props }, ref) {
+    const { quote, author, role, company, avatar, accent, rating } = testimonial;
+    const badgeStyle = accent
+      ? { backgroundColor: accent, color: getContrastText(accent, "#111111", "#ffffff") }
+      : undefined;
+
+    return (
+      <figure
+        ref={ref}
+        className={cn(
+          "mb-4 flex flex-col break-inside-avoid rounded-2xl border border-border bg-surface p-7",
+          className,
+        )}
+        {...props}
+      >
+        <div className="mb-5 flex items-center justify-between">
+          <Quote className={cn("h-6 w-6", accent ? undefined : "text-primary/30")} style={accent ? { color: accent } : undefined} />
+          {rating ? (
+            <span className="flex items-center gap-0.5 text-amber-500" aria-label={`${rating} / 5`}>
+              {Array.from({ length: 5 }).map((_, i) => (
+                <Star key={i} className="h-3.5 w-3.5" />
+              ))}
+            </span>
+          ) : null}
+        </div>
+        <blockquote className="flex-1 text-[15px] leading-7 text-foreground/85">{quote}</blockquote>
+        <figcaption className="mt-6 flex items-center gap-3">
+          {avatar ? (
+            avatar
+          ) : (
+            <span
+              style={badgeStyle}
+              className={cn(
+                "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-xs font-bold",
+                !accent && "bg-primary-soft text-primary",
+              )}
+            >
+              {initials(author)}
+            </span>
+          )}
+          <div>
+            <div className="text-sm font-semibold text-foreground">{author}</div>
+            {(role || company) && (
+              <div className="text-xs text-muted-foreground">
+                {[role, company].filter(Boolean).join(" · ")}
+              </div>
+            )}
+          </div>
+        </figcaption>
+      </figure>
+    );
+  },
+);

package/src/components/Testimonials/Testimonials.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { TestimonialCard } from "./TestimonialCard";
+import { Testimonials } from "./Testimonials";
+
+const items = [
+  { quote: "Great product.", author: "Ayşe Yıldız", role: "Founder", company: "Lumina", rating: 5 },
+  { quote: "Saved us hours.", author: "Mehmet Demir", company: "Nova" },
+];
+
+describe("TestimonialCard", () => {
+  it("renders quote, author, role and company", () => {
+    render(<TestimonialCard testimonial={items[0]} />);
+    expect(screen.getByText("Great product.")).toBeInTheDocument();
+    expect(screen.getByText("Ayşe Yıldız")).toBeInTheDocument();
+    expect(screen.getByText("Founder · Lumina")).toBeInTheDocument();
+  });
+
+  it("renders initials for the default avatar", () => {
+    render(<TestimonialCard testimonial={items[0]} />);
+    expect(screen.getByText("AY")).toBeInTheDocument();
+  });
+});
+
+describe("Testimonials", () => {
+  it("renders all items in the grid (default) option", () => {
+    render(<Testimonials items={items} option="grid" />);
+    expect(screen.getByText("Great product.")).toBeInTheDocument();
+    expect(screen.getByText("Saved us hours.")).toBeInTheDocument();
+  });
+
+  it("renders the marquee option (items are duplicated for the loop)", () => {
+    render(<Testimonials items={items} option="marquee" />);
+    expect(screen.getAllByText("Great product.").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Saved us hours.").length).toBeGreaterThan(0);
+  });
+
+  it("renders a carousel that advances on next and cycles", () => {
+    render(<Testimonials items={items} option="carousel" />);
+    expect(screen.getByText("Great product.")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Next testimonial" }));
+    expect(screen.getByText("Saved us hours.")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Next testimonial" }));
+    expect(screen.getByText("Great product.")).toBeInTheDocument();
+  });
+});

package/src/components/Testimonials/Testimonials.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from "react";
+import type { TestimonialsProps } from "./types";
+import { TestimonialsGrid } from "./variants/Grid";
+import { TestimonialsMarquee } from "./variants/Marquee";
+import { TestimonialsCarousel } from "./variants/Carousel";
+
+export const Testimonials = forwardRef<HTMLDivElement, TestimonialsProps>(
+  ({ option = "grid", ...props }, ref) => {
+    if (option === "carousel") return <TestimonialsCarousel ref={ref} {...props} />;
+    if (option === "marquee") return <TestimonialsMarquee ref={ref} {...props} />;
+    return <TestimonialsGrid ref={ref} {...props} />;
+  },
+);
+Testimonials.displayName = "Testimonials";

package/src/components/Testimonials/index.ts

@@ -0,0 +1,3 @@
+export { Testimonials } from "./Testimonials";
+export { TestimonialCard } from "./TestimonialCard";
+export type { TestimonialsProps, TestimonialCardProps, TestimonialsOption, Testimonial } from "./types";

package/src/components/Testimonials/parts.ts

@@ -0,0 +1,7 @@
+export const initials = (name: string) =>
+  name
+    .split(" ")
+    .map((p) => p[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();

package/src/components/Testimonials/types.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type TestimonialsOption = "grid" | "carousel" | "marquee";
+
+export interface Testimonial {
+  quote: string;
+  author: string;
+  role?: string;
+  company?: string;
+  avatar?: ReactNode;
+  /** Arbitrary CSS color for the initials avatar. */
+  accent?: string;
+  rating?: number;
+}
+
+export interface TestimonialCardProps extends HTMLAttributes<HTMLElement> {
+  testimonial: Testimonial;
+}
+
+export interface TestimonialsProps extends HTMLAttributes<HTMLDivElement> {
+  items: Testimonial[];
+  option?: TestimonialsOption;
+  title?: string;
+}

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

@@ -0,0 +1,94 @@
+"use client";
+import { forwardRef, useState, type HTMLAttributes } from "react";
+import { cn } from "../../../utils/cn";
+import { getContrastText } from "../../../utils/contrast";
+import { ChevronLeft, ChevronRight, Quote } from "../../../icons";
+import { initials } from "../parts";
+import type { Testimonial } from "../types";
+
+interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+  items: Testimonial[];
+}
+
+export const TestimonialsCarousel = forwardRef<HTMLDivElement, CarouselProps>(
+  ({ className, items, ...props }, ref) => {
+    const [index, setIndex] = useState(0);
+    const item = items[index % items.length];
+    const badgeStyle = item.accent
+      ? { backgroundColor: item.accent, color: getContrastText(item.accent, "#111111", "#ffffff") }
+      : undefined;
+
+    const go = (dir: 1 | -1) => setIndex((i) => (i + dir + items.length) % items.length);
+
+    return (
+      <div className={cn("mx-auto w-full max-w-3xl", className)} ref={ref} {...props}>
+        <figure className="relative rounded-2xl border border-border bg-surface p-10 text-center sm:p-14">
+          <Quote
+            className={cn("mx-auto mb-6 h-8 w-8", item.accent ? undefined : "text-primary/25")}
+            style={item.accent ? { color: item.accent } : undefined}
+            aria-hidden
+          />
+          <blockquote className="font-display text-balance text-xl font-medium leading-relaxed tracking-tight text-foreground sm:text-2xl">
+            {item.quote}
+          </blockquote>
+          <figcaption className="mt-8 flex items-center justify-center gap-3">
+            {item.avatar ? (
+              item.avatar
+            ) : (
+              <span
+                style={badgeStyle}
+                className={cn(
+                  "inline-flex h-11 w-11 items-center justify-center rounded-full text-xs font-bold",
+                  !item.accent && "bg-foreground text-background",
+                )}
+              >
+                {initials(item.author)}
+              </span>
+            )}
+            <div className="text-left">
+              <div className="text-sm font-semibold text-foreground">{item.author}</div>
+              <div className="text-xs text-muted-foreground">
+                {[item.role, item.company].filter(Boolean).join(" · ")}
+              </div>
+            </div>
+          </figcaption>
+        </figure>
+
+        <div className="mt-6 flex items-center justify-center gap-4">
+          <button
+            type="button"
+            aria-label="Previous testimonial"
+            onClick={() => go(-1)}
+            className="inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border border-border bg-surface text-foreground transition-colors duration-150 hover:border-foreground/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+          <div className="flex items-center gap-1.5">
+            {items.map((_, i) => (
+              <button
+                key={i}
+                type="button"
+                aria-label={`Testimonial ${i + 1}`}
+                aria-current={i === index}
+                onClick={() => setIndex(i)}
+                className={cn(
+                  "h-1.5 cursor-pointer rounded-full transition-all duration-200",
+                  i === index ? "w-6 bg-foreground" : "w-1.5 bg-foreground/25 hover:bg-foreground/50",
+                )}
+              />
+            ))}
+          </div>
+          <button
+            type="button"
+            aria-label="Next testimonial"
+            onClick={() => go(1)}
+            className="inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border border-border bg-surface text-foreground transition-colors duration-150 hover:border-foreground/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    );
+  },
+);
+TestimonialsCarousel.displayName = "TestimonialsCarousel";

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";