@ugurdemirel/landcraft 0.1.2 → 0.1.4

package/src/components/Pricing/variants/Bento.tsx

@@ -0,0 +1,72 @@
+import { cn } from "../../../utils/cn";
+import { getContrastText } from "../../../utils/contrast";
+import { PriceValue, PlanButton } from "../parts";
+import { Check } from "../../../icons";
+import type { PricingVariantProps } from "../types";
+
+interface BentoProps extends PricingVariantProps {
+  className?: string;
+}
+
+export const PricingBento = ({ className, plans, billing, onSelect, ...props }: BentoProps) => {
+  return (
+    <div className={cn("w-full", className)} {...props}>
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        {plans.map((plan) => {
+          const isHighlighted = plan.highlighted && !plan.customColor;
+          const bg = plan.customColor || (isHighlighted ? "rgb(var(--color-primary))" : undefined);
+          const fg = plan.customColor
+            ? getContrastText(plan.customColor, "#111111", "#ffffff")
+            : isHighlighted
+              ? "rgb(var(--color-on-primary))"
+              : undefined;
+          return (
+            <div
+              key={plan.name}
+              className={cn(
+                "flex h-full flex-col rounded-xl p-8",
+                bg
+                  ? "lg:col-span-2"
+                  : "border border-border bg-surface",
+              )}
+              style={bg ? { backgroundColor: bg, color: fg } : undefined}
+            >
+              <div className="flex flex-wrap items-start justify-between gap-4">
+                <div>
+                  <h3 className={cn("font-display text-xl font-semibold tracking-tight", bg ? "text-current" : "text-foreground")}>
+                    {plan.name}
+                  </h3>
+                  {plan.description ? (
+                    <p className={cn("mt-1.5 text-sm", bg ? undefined : "text-muted-foreground")}>
+                      {plan.description}
+                    </p>
+                  ) : null}
+                </div>
+                <div className={cn("font-display", bg ? "text-current" : "text-foreground")}>
+                  <PriceValue value={billing === "monthly" ? plan.monthly : plan.yearly} billing={billing} dim={!bg} />
+                </div>
+              </div>
+              <ul
+                className={cn(
+                  "mt-7 grid grid-cols-1 gap-x-8 gap-y-2.5 text-sm sm:grid-cols-2",
+                  bg ? "lg:max-w-2xl" : undefined,
+                )}
+              >
+                {plan.features.map((feature) => (
+                  <li key={feature} className={cn("flex items-start gap-2.5", bg ? "text-current" : "text-muted-foreground")}>
+                    <Check className={cn("mt-0.5 h-4 w-4 shrink-0", bg ? "text-current" : "text-primary")} />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+              <div className="mt-8">
+                <PlanButton plan={plan} billing={billing} onSelect={onSelect} dark={!bg} />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+PricingBento.displayName = "PricingBento";

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

@@ -0,0 +1,79 @@
+import { cn } from "../../../utils/cn";
+import { getContrastText } from "../../../utils/contrast";
+import { PriceValue, BillingToggle, PlanButton } from "../parts";
+import { Check } from "../../../icons";
+import type { PricingVariantProps } from "../types";
+
+interface CardsProps extends PricingVariantProps {
+  className?: string;
+  onBillingChange: (billing: "monthly" | "yearly") => void;
+}
+
+export const PricingCards = ({ className, plans, billing, onSelect, onBillingChange, ...props }: CardsProps) => {
+  return (
+    <div className={cn("w-full", className)} {...props}>
+      <BillingToggle billing={billing} onChange={onBillingChange} />
+      <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
+        {plans.map((plan) => {
+          const isHighlighted = plan.highlighted && !plan.customColor;
+          const bg = plan.customColor || (isHighlighted ? "rgb(var(--color-primary))" : undefined);
+          const fg = plan.customColor
+            ? getContrastText(plan.customColor, "#111111", "#ffffff")
+            : isHighlighted
+              ? "rgb(var(--color-on-primary))"
+              : undefined;
+          return (
+            <div
+              key={plan.name}
+              className={cn(
+                "relative flex flex-col rounded-xl p-7",
+                bg ? "shadow-raised" : "border border-border bg-surface",
+                !bg && isHighlighted && "border-primary",
+              )}
+              style={bg ? { backgroundColor: bg, color: fg } : undefined}
+            >
+              {isHighlighted ? (
+                <span
+                  className={cn(
+                    "absolute -top-3 left-7 rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider",
+                    !bg && "bg-primary text-on-primary",
+                  )}
+                  style={
+                    bg
+                      ? { backgroundColor: "rgb(var(--color-on-primary))", color: "rgb(var(--color-primary))" }
+                      : undefined
+                  }
+                >
+                  Most popular
+                </span>
+              ) : null}
+              <h3 className={cn("font-display text-lg font-semibold tracking-tight", bg ? "text-current" : "text-foreground")}>
+                {plan.name}
+              </h3>
+              {plan.description ? (
+                <p className={cn("mt-1.5 text-sm", bg ? undefined : "text-muted-foreground")}>
+                  {plan.description}
+                </p>
+              ) : null}
+              <div className={cn("mt-6 flex items-baseline font-display", bg ? "text-current" : "text-foreground")}>
+                <PriceValue value={billing === "monthly" ? plan.monthly : plan.yearly} billing={billing} dim={!bg} />
+              </div>
+              <ul className={cn("mt-7 flex-1 space-y-2.5 text-sm", bg ? "text-current" : "text-muted-foreground")}>
+                {plan.features.map((feature) => (
+                  <li key={feature} className="flex items-start gap-2.5">
+                    <Check className={cn("mt-0.5 h-4 w-4 shrink-0", bg ? "text-current" : "text-primary")} />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+              <div className="mt-8">
+                <PlanButton plan={plan} billing={billing} onSelect={onSelect} dark={!bg} />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+PricingCards.displayName = "PricingCards";

package/src/components/Pricing/variants/Compact.tsx

@@ -0,0 +1,69 @@
+import { cn } from "../../../utils/cn";
+import { PlanButton } from "../parts";
+import { Check } from "../../../icons";
+import type { PricingVariantProps } from "../types";
+
+interface CompactProps extends PricingVariantProps {
+  className?: string;
+}
+
+export const PricingCompact = ({ className, plans, billing, onSelect, ...props }: CompactProps) => {
+  const price = (v: number | null) => (v === null ? "Custom" : `$${v}`);
+
+  return (
+    <div className={cn("w-full", className)} {...props}>
+      <div className="divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface">
+        {plans.map((plan) => {
+          const value = billing === "monthly" ? plan.monthly : plan.yearly;
+          const isHighlighted = plan.highlighted && !plan.customColor;
+          const bg = plan.customColor ? "rgb(var(--color-surface))" : isHighlighted ? "rgb(var(--color-primary-soft))" : undefined;
+          const fg = plan.customColor ? plan.customColor : isHighlighted ? "rgb(var(--color-primary))" : undefined;
+          return (
+            <div
+              key={plan.name}
+              className={cn(
+                "group flex flex-col gap-5 p-5 transition-colors duration-200 hover:bg-surface-strong sm:flex-row sm:items-center sm:justify-between",
+                isHighlighted && "bg-primary-soft/60",
+              )}
+              style={bg ? { backgroundColor: bg } : undefined}
+            >
+              <div className="min-w-0">
+                <div className="flex items-center gap-2.5">
+                  <h3 className="font-display text-lg font-semibold tracking-tight text-foreground">
+                    {plan.name}
+                  </h3>
+                  {isHighlighted ? (
+                    <span className="rounded-full bg-primary px-2.5 py-0.5 text-[11px] font-semibold text-on-primary uppercase tracking-wider">
+                      Popular
+                    </span>
+                  ) : null}
+                </div>
+                {plan.description ? (
+                  <p className="mt-1 truncate text-sm text-muted-foreground">{plan.description}</p>
+                ) : null}
+              </div>
+              <div className="flex items-center gap-6">
+                <ul className="hidden items-center gap-4 lg:flex">
+                  {plan.features.slice(0, 3).map((f) => (
+                    <li key={f} className="flex items-center gap-1.5 text-sm text-muted-foreground" style={{ color: fg }}>
+                      <Check className="h-3.5 w-3.5 text-current" />
+                      {f}
+                    </li>
+                  ))}
+                </ul>
+                <div className="font-display text-2xl font-semibold tracking-tight text-foreground">
+                  {price(value)}
+                  {value !== null ? (
+                    <span className="text-sm font-normal text-muted-foreground">/{billing === "monthly" ? "mo" : "yr"}</span>
+                  ) : null}
+                </div>
+                <PlanButton plan={plan} billing={billing} onSelect={onSelect} />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+PricingCompact.displayName = "PricingCompact";

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