feat: add testimonials marquee to landing page

app/page.tsx

@@ -5,6 +5,7 @@ import { Hero } from "@/components/app/landing/hero";
 import { InstallCommand } from "@/components/app/docs/install-command";
 import { LandingComponentCard } from "@/components/app/landing/landing-component-card";
 import { SiteFooter } from "@/components/app/chrome/site-footer";
+import { Testimonials } from "@/components/app/landing/testimonials";
 import { WorkCta } from "@/components/app/landing/work-cta";
 
 const CURATED: { category: string; slug: string }[] = [
@@ -112,6 +113,8 @@ export default function Home() {
         </div>
       </section>
 
+      <Testimonials />
+
       <WorkCta />
 
       <SiteFooter />

components/app/landing/testimonial-card.tsx

@@ -0,0 +1,92 @@
+import { enrichTweet } from "react-tweet";
+import type { Tweet } from "react-tweet/api";
+import { cn } from "@/lib/utils";
+
+function VerifiedBadge() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      aria-label="Verified account"
+      className="h-[1.05em] w-[1.05em] shrink-0 text-[#1d9bf0]"
+      fill="currentColor"
+    >
+      <path d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.68.88-3.34 2.19c-1.39-.46-2.9-.2-3.91.81s-1.27 2.52-.81 3.91c-1.31.66-2.19 1.91-2.19 3.34s.88 2.67 2.19 3.34c-.46 1.39-.2 2.91.81 3.91s2.52 1.27 3.91.81c.66 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.46 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z" />
+    </svg>
+  );
+}
+
+export function TestimonialCard({
+  tweet,
+  compact = false,
+}: {
+  tweet: Tweet;
+  compact?: boolean;
+}) {
+  const t = enrichTweet(tweet);
+  const verified = t.user.is_blue_verified || t.user.verified;
+  // Swap Twitter's 48px `_normal` avatar for the crisper 73px `_bigger`.
+  const avatar = t.user.profile_image_url_https.replace("_normal", "_bigger");
+
+  return (
+    <a
+      href={t.url}
+      target="_blank"
+      rel="noreferrer noopener"
+      className={cn(
+        "group block rounded-3xl border border-border bg-card transition-colors duration-200 hover:border-border-strong",
+        compact ? "h-full w-[330px] whitespace-normal p-4" : "p-5",
+      )}
+    >
+      <div className="flex items-center gap-3">
+        {/* biome-ignore lint/performance/noImgElement: external Twitter avatar, not worth a next/image remotePatterns entry */}
+        <img
+          src={avatar}
+          alt=""
+          width={40}
+          height={40}
+          loading="lazy"
+          className={cn(
+            "shrink-0 rounded-full object-cover",
+            compact ? "h-9 w-9" : "h-10 w-10",
+          )}
+        />
+        <div className="min-w-0">
+          <div className="flex items-center gap-1">
+            <span className="truncate font-medium text-foreground">
+              {t.user.name}
+            </span>
+            {verified ? <VerifiedBadge /> : null}
+          </div>
+          <span className="block truncate text-sm text-muted-foreground">
+            @{t.user.screen_name}
+          </span>
+        </div>
+      </div>
+
+      <p
+        className={cn(
+          "mt-3 whitespace-pre-wrap text-foreground",
+          compact
+            ? "line-clamp-4 text-sm leading-relaxed"
+            : "mt-4 text-[15px] leading-relaxed",
+        )}
+      >
+        {t.entities.map((item, i) => {
+          if (item.type === "media") return null;
+          if (item.type === "text") {
+            return (
+              // biome-ignore lint/suspicious/noArrayIndexKey: tweet parts are positional and stable
+              <span key={i}>{item.text}</span>
+            );
+          }
+          return (
+            // biome-ignore lint/suspicious/noArrayIndexKey: tweet parts are positional and stable
+            <span key={i} className="text-accent">
+              {item.text}
+            </span>
+          );
+        })}
+      </p>
+    </a>
+  );
+}

components/app/landing/testimonials.tsx

@@ -0,0 +1,72 @@
+import type { Tweet } from "react-tweet/api";
+import { getTweet } from "react-tweet/api";
+import { TestimonialCard } from "@/components/app/landing/testimonial-card";
+import { Marquee } from "@/components/motion/marquee";
+
+// Public tweets shown as social proof. IDs only — the content is pulled from
+// Twitter's syndication API on the server and rendered statically, so no
+// async component streams into the client (which trips a React 19 / Next 15
+// Flight bug: "chunk.reason.enqueueModel is not a function").
+const TWEET_IDS = [
+  "2070915664668512304",
+  "2073135185370227162",
+  "2072978320036348221",
+  "2070129442157191185",
+  "2071327003790184684",
+  "2069456887184318562",
+  "2066804142719275062",
+  "2071206392925765751",
+  "2069415701874720806",
+  "2073188569506587028",
+  "2069333890506936655",
+  "2071800087940870242",
+  "2069108073839435853",
+  "2071704269816811735",
+  "2069459958857650245",
+  "2071569532796256411",
+];
+
+export async function Testimonials() {
+  const tweets = await Promise.all(
+    TWEET_IDS.map(async (id) => {
+      try {
+        return await getTweet(id);
+      } catch {
+        return undefined;
+      }
+    }),
+  );
+  const found = tweets.filter((t): t is Tweet => t != null);
+  if (found.length === 0) return null;
+
+  // Split into two rows that scroll in opposite directions.
+  const mid = Math.ceil(found.length / 2);
+  const rowOne = found.slice(0, mid);
+  const rowTwo = found.slice(mid);
+
+  return (
+    <section className="pb-16">
+      <div className="mx-auto mb-8 max-w-7xl border-t border-border px-4 pt-12">
+        <p className="font-pixel text-xs font-medium uppercase text-muted-foreground">
+          Testimonials
+        </p>
+        <h2 className="mt-2 font-pixel text-3xl font-medium leading-tight text-foreground md:text-4xl">
+          Loved by builders.
+        </h2>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <Marquee direction="left" speed={60} gap="1rem" fade>
+          {rowOne.map((tweet) => (
+            <TestimonialCard key={tweet.id_str} tweet={tweet} compact />
+          ))}
+        </Marquee>
+        <Marquee direction="right" speed={60} gap="1rem" fade>
+          {rowTwo.map((tweet) => (
+            <TestimonialCard key={tweet.id_str} tweet={tweet} compact />
+          ))}
+        </Marquee>
+      </div>
+    </section>
+  );
+}

components/motion/marquee.tsx

@@ -33,7 +33,9 @@ export function Marquee({
         fade && vertical && "[mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]",
         className,
       )}
-      style={{ "--gap": gap } as React.CSSProperties}
+      // gap on the wrapper too, so the seam between the two tracks matches the
+      // spacing between items and the loop stays even.
+      style={{ "--gap": gap, gap } as React.CSSProperties}
     >
       {[0, 1].map((dup) => (
         <div

package.json

@@ -46,6 +46,7 @@
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-tweet": "^3.3.1",
     "react-use-measure": "^2.1.7",
     "shiki": "^4.2.0",
     "tailwind-merge": "^3.6.0"