@ugurdemirel/landcraft 0.1.0

package/src/components/Stats.tsx

@@ -0,0 +1,181 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+import { ArrowUp, ArrowDown } from "../icons";
+
+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?: "editorial" | "hairline" | "cells" | "ticker";
+  columns?: 2 | 3 | 4;
+}
+
+const valueBase =
+  "font-display font-semibold tabular-nums tracking-[-0.02em] text-foreground";
+
+const suffixBase = "ml-1 font-sans text-sm font-normal tracking-normal text-muted-foreground";
+
+const gridCols: Record<NonNullable<StatsProps["columns"]>, string> = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4",
+};
+
+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>
+  );
+}
+
+export const Stats = forwardRef<HTMLDListElement, StatsProps>(
+  ({ className, stats, option = "editorial", columns = 4, ...props }, ref) => {
+    if (option === "ticker") {
+      return (
+        <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>
+      );
+    }
+
+    if (option === "cells") {
+      return (
+        <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>
+      );
+    }
+
+    if (option === "hairline") {
+      return (
+        <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>
+      );
+    }
+
+    // editorial — label above, oversized number, hairline rule under.
+    return (
+      <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>
+    );
+  },
+);
+Stats.displayName = "Stats";

package/src/components/Testimonials.tsx

@@ -0,0 +1,205 @@
+import { forwardRef, useState, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+import { getContrastText } from "../utils/contrast";
+import { ChevronLeft, ChevronRight, Quote, Star } from "../icons";
+
+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;
+}
+
+const initials = (name: string) =>
+  name
+    .split(" ")
+    .map((p) => p[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+
+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>
+    );
+  },
+);
+
+/** Holds per-option rendering + controls together. */
+export interface TestimonialsProps extends HTMLAttributes<HTMLDivElement> {
+  items: Testimonial[];
+  option?: "grid" | "carousel" | "marquee";
+  title?: string;
+}
+
+export const Testimonials = ({ className, items, option = "grid", ...props }: TestimonialsProps) => {
+  if (option === "carousel") {
+    return <Carousel items={items} className={className} {...props} />;
+  }
+
+  if (option === "marquee") {
+    const doubled = [...items, ...items];
+    return (
+      <div className={cn("w-full overflow-hidden", className)} {...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>
+    );
+  }
+
+  return (
+    <div className={cn("columns-1 gap-4 md:columns-2 lg:columns-3", className)} {...props}>
+      {items.map((item, i) => (
+        <TestimonialCard key={i} testimonial={item} />
+      ))}
+    </div>
+  );
+};
+Testimonials.displayName = "Testimonials";
+
+function Carousel({
+  items,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { items: Testimonial[] }) {
+  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)} {...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>
+  );
+}

package/src/icons.tsx

@@ -0,0 +1,290 @@
+import type { SVGProps } from "react";
+
+/**
+ * Minimal 1.5px stroke icon set (Lucide/Heroicons inspired).
+ * No emojis — the library ships a single, consistent icon vocabulary.
+ *
+ * Usage:
+ *   <ArrowRight className="h-4 w-4" />
+ */
+
+type IconProps = SVGProps<SVGSVGElement>;
+
+const base: IconProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 1.5,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true as never,
+};
+
+export const ArrowRight = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M5 12h14" />
+    <path d="m13 6 6 6-6 6" />
+  </svg>
+);
+
+export const ArrowUpRight = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M7 17 17 7" />
+    <path d="M8 7h9v9" />
+  </svg>
+);
+
+export const ArrowDown = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M12 5v14" />
+    <path d="m6 13 6 6 6-6" />
+  </svg>
+);
+
+export const ArrowUp = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M12 19V5" />
+    <path d="m6 11 6-6 6 6" />
+  </svg>
+);
+
+export const Check = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+);
+
+export const Plus = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M12 5v14" />
+    <path d="M5 12h14" />
+  </svg>
+);
+
+export const X = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M18 6 6 18" />
+    <path d="m6 6 12 12" />
+  </svg>
+);
+
+export const Menu = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M4 7h16" />
+    <path d="M4 12h16" />
+    <path d="M4 17h16" />
+  </svg>
+);
+
+export const ChevronDown = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+);
+
+export const ChevronRight = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="m9 6 6 6-6 6" />
+  </svg>
+);
+
+export const ChevronLeft = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="m15 6-6 6 6 6" />
+  </svg>
+);
+
+export const Zap = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z" />
+  </svg>
+);
+
+export const ShieldCheck = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M12 3 5 6v5c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V6l-7-3z" />
+    <path d="m9 12 2 2 4-4" />
+  </svg>
+);
+
+export const Layers = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="m12 2 9 5-9 5-9-5 9-5z" />
+    <path d="m3 12 9 5 9-5" />
+    <path d="m3 17 9 5 9-5" />
+  </svg>
+);
+
+export const Smartphone = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <rect width="14" height="20" x="5" y="2" rx="2.5" />
+    <path d="M12 18h.01" />
+  </svg>
+);
+
+export const Gauge = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" />
+    <path d="m12 14 4-4" />
+    <path d="M12 10.5 9 13.5" />
+  </svg>
+);
+
+export const BarChart = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M3 20h18" />
+    <path d="M7 20V8" />
+    <path d="M12 20V4" />
+    <path d="M17 20v-7" />
+  </svg>
+);
+
+export const Users = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2" />
+    <circle cx="9" cy="7" r="4" />
+    <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+  </svg>
+);
+
+export const Star = (props: IconProps) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden {...props}>
+    <path d="M12 2.5c.33 0 .63.19.77.5l1.98 4.01 4.42.64c.62.09.87.85.42 1.29l-3.2 3.12.76 4.4c.11.62-.55 1.1-1.1.8L12 15.13l-3.95 2.08c-.56.29-1.21-.18-1.1-.8l.76-4.4-3.2-3.12a.78.78 0 0 1 .42-1.29l4.42-.64L11.23 3c.14-.31.44-.5.77-.5z" />
+  </svg>
+);
+
+export const Quote = (props: IconProps) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden {...props}>
+    <path d="M10.5 5C7 5 4.5 7.5 4.5 11c0 3.3 2.2 5.5 5.2 5.5.2 0 .4 0 .5-.1-.2 1.5-1.3 2.6-2.9 3.2a.75.75 0 1 0 .4 1.4c3.6-1 5.8-3.8 5.8-7.7V7.5C13 6.1 11.9 5 10.5 5zm9 0C16 5 13.5 7.5 13.5 11c0 3.3 2.2 5.5 5.2 5.5.2 0 .4 0 .5-.1-.2 1.5-1.3 2.6-2.9 3.2a.75.75 0 1 0 .4 1.4c3.6-1 5.8-3.8 5.8-7.7V7.5C22 6.1 20.9 5 19.5 5z" />
+  </svg>
+);
+
+export const Globe = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <circle cx="12" cy="12" r="9" />
+    <path d="M3 12h18" />
+    <path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z" />
+  </svg>
+);
+
+export const Mail = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <rect width="18" height="14" x="3" y="5" rx="2" />
+    <path d="m3 7 9 6 9-6" />
+  </svg>
+);
+
+export const Lock = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <rect width="18" height="11" x="3" y="11" rx="2" />
+    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+  </svg>
+);
+
+export const Clock = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <circle cx="12" cy="12" r="9" />
+    <path d="M12 7v5l3 2" />
+  </svg>
+);
+
+export const DollarSign = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M12 2v20" />
+    <path d="M17 5.5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+  </svg>
+);
+
+export const Code = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="m16 18 6-6-6-6" />
+    <path d="m8 6-6 6 6 6" />
+  </svg>
+);
+
+export const Terminal = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="m5 17 5-5-5-5" />
+    <path d="M13 19h6" />
+  </svg>
+);
+
+export const Send = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="m3 11 18-8-7 18-3-7-8-3z" />
+    <path d="M11 14 21 3" />
+  </svg>
+);
+
+export const Play = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="m8 5 11 7-11 7V5z" />
+  </svg>
+);
+
+export const ExternalLink = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M15 3h6v6" />
+    <path d="M10 14 21 3" />
+    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+  </svg>
+);
+
+export const Sliders = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M4 6h10" />
+    <path d="M18 6h2" />
+    <circle cx="16" cy="6" r="2" />
+    <path d="M4 12h2" />
+    <path d="M10 12h10" />
+    <circle cx="8" cy="12" r="2" />
+    <path d="M4 18h10" />
+    <path d="M18 18h2" />
+    <circle cx="16" cy="18" r="2" />
+  </svg>
+);
+
+export const Database = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <ellipse cx="12" cy="5" rx="8" ry="3" />
+    <path d="M4 5v7c0 1.66 3.58 3 8 3s8-1.34 8-3V5" />
+    <path d="M4 12v7c0 1.66 3.58 3 8 3s8-1.34 8-3v-7" />
+  </svg>
+);
+
+export const Box = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M21 8 12 3 3 8v8l9 5 9-5V8z" />
+    <path d="m3 8 9 5 9-5" />
+    <path d="M12 13v8" />
+  </svg>
+);
+
+export const Cpu = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <rect width="16" height="16" x="4" y="4" rx="2" />
+    <rect width="8" height="8" x="8" y="8" rx="1" />
+    <path d="M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2" />
+  </svg>
+);
+
+export const Palette = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M12 3a9 9 0 1 0 0 18c1.66 0 2-1.34 2-2 0-.66-.27-1.16-.58-1.66-.3-.48-.42-.84-.42-1.34 0-.83.67-1.5 1.5-1.5h3.2A4.3 4.3 0 0 0 21 10 9 9 0 0 0 12 3z" />
+    <circle cx="7.5" cy="10.5" r="0.8" fill="currentColor" stroke="none" />
+    <circle cx="12" cy="7.5" r="0.8" fill="currentColor" stroke="none" />
+    <circle cx="16.5" cy="10.5" r="0.8" fill="currentColor" stroke="none" />
+  </svg>
+);
+
+export const Rocket = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
+    <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
+    <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
+    <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
+    <circle cx="15.5" cy="8.5" r="1.5" fill="currentColor" stroke="none" />
+  </svg>
+);