💬 Testimonial Sections

<figure class="nxt1">
  <blockquote>“We shipped our redesign in two weeks instead of two months. The components just work, on every screen.”</blockquote>
  <figcaption>
    <span class="nxt1-av" aria-hidden="true">MR</span>
    <span><b>Maya Reyes</b><small>Design Lead, Northwind</small></span>
  </figcaption>
</figure>
<style>
.nxt1, .nxt1 * { box-sizing: border-box; }
.nxt1 { width: 100%; max-width: 480px; margin: 0 auto; padding: clamp(20px, 5vw, 30px); border: 1px solid #ece4d8; border-radius: 18px; background: #fff; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxt1 blockquote { margin: 0 0 20px; font: 400 18px/1.55 Georgia,"Times New Roman",serif; }
.nxt1 figcaption { display: flex; align-items: center; gap: 12px; }
.nxt1-av { flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f0c9a8; color: #6b2a1a; font-weight: 700; font-size: 15px; }
.nxt1 figcaption b { display: block; font-size: 15px; }
.nxt1 figcaption small { color: #6d645a; font-size: 13.5px; }
</style>

<section class="nxt2">
  <h2>Loved by makers</h2>
  <div class="nxt2-grid">
    <figure>
      <blockquote>“Setup took five minutes. I keep finding little touches I love.”</blockquote>
      <figcaption><b>Sam Okafor</b> · Indie developer</figcaption>
    </figure>
    <figure>
      <blockquote>“Our support tickets dropped by a third after the switch.”</blockquote>
      <figcaption><b>Lena Fischer</b> · COO, Brightly</figcaption>
    </figure>
    <figure>
      <blockquote>“Finally a tool my whole team actually opens every day.”</blockquote>
      <figcaption><b>Arjun Mehta</b> · Product manager</figcaption>
    </figure>
  </div>
</section>
<style>
.nxt2, .nxt2 * { box-sizing: border-box; }
.nxt2 { width: 100%; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxt2 h2 { margin: 0 0 18px; text-align: center; font: 700 clamp(22px, 4vw, 30px)/1.2 Georgia,"Times New Roman",serif; }
.nxt2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.nxt2 figure { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; margin: 0; padding: 22px; border: 1px solid #ece4d8; border-radius: 16px; background: #fff; }
.nxt2 blockquote { margin: 0; font-size: 15.5px; line-height: 1.6; }
.nxt2 figcaption { color: #6d645a; font-size: 13.5px; }
.nxt2 figcaption b { color: #2a1f1a; }
</style>

<figure class="nxt3">
  <span class="nxt3-mark" aria-hidden="true">“</span>
  <blockquote>Simplicity is not the absence of clutter — it is the presence of exactly what you need.</blockquote>
  <figcaption><b>Jonah Whitfield</b><span>Founder, Field Notes Studio</span></figcaption>
</figure>
<style>
.nxt3, .nxt3 * { box-sizing: border-box; }
.nxt3 { width: 100%; margin: 0; padding: clamp(28px, 6vw, 56px) 20px; border-radius: 20px; background: #faf6f0; text-align: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxt3-mark { display: block; height: 52px; color: #a24832; font: 900 96px/1 Georgia,"Times New Roman",serif; }
.nxt3 blockquote { max-width: 620px; margin: 0 auto 22px; font: italic 400 clamp(21px, 4vw, 30px)/1.4 Georgia,"Times New Roman",serif; }
.nxt3 figcaption b { display: block; font-size: 15.5px; }
.nxt3 figcaption span { color: #6d645a; font-size: 14px; }
</style>

<div class="nxt4">
  <figure>
    <div class="nxt4-stars" role="img" aria-label="5 out of 5 stars">★★★★★</div>
    <blockquote>“Fast delivery and the quality is outstanding. Ordering again.”</blockquote>
    <figcaption>Hannah K. <span>Verified buyer</span></figcaption>
  </figure>
  <figure>
    <div class="nxt4-stars" role="img" aria-label="4 out of 5 stars">★★★★<i>★</i></div>
    <blockquote>“Great value. The fit runs a little small, so size up.”</blockquote>
    <figcaption>Diego M. <span>Verified buyer</span></figcaption>
  </figure>
</div>
<style>
.nxt4, .nxt4 * { box-sizing: border-box; }
.nxt4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; width: 100%; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxt4 figure { margin: 0; padding: 22px; border-radius: 16px; background: #1d1813; color: #efe8de; }
.nxt4-stars { margin-bottom: 12px; color: #f2b84b; font-size: 20px; letter-spacing: 3px; }
.nxt4-stars i { color: #4a4137; font-style: normal; }
.nxt4 blockquote { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; }
.nxt4 figcaption { font-weight: 700; font-size: 14.5px; }
.nxt4 figcaption span { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(95,138,58,.25); color: #b7d99a; font-size: 11.5px; font-weight: 600; }
</style>

<article class="nxt5">
  <header>
    <span class="nxt5-av" aria-hidden="true">EL</span>
    <span class="nxt5-who"><b>Elena Lu</b><small>@elenabuilds</small></span>
    <span class="nxt5-net" aria-hidden="true">𝕏</span>
  </header>
  <p>Just rebuilt our whole landing page with these blocks. Lighthouse 100 across the board and it looks great on my phone 🔥</p>
  <footer><time datetime="2026-03-14">Mar 14, 2026</time> · <span>♥ 1.2k</span></footer>
</article>
<style>
.nxt5, .nxt5 * { box-sizing: border-box; }
.nxt5 { width: 100%; max-width: 440px; margin: 0 auto; padding: 18px 20px; border: 1px solid #e4e4e7; border-radius: 16px; background: #fff; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #18181b; }
.nxt5 header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.nxt5-av { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; font-weight: 700; font-size: 14px; }
.nxt5-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nxt5-who b { font-size: 15px; }
.nxt5-who small { color: #71717a; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.nxt5-net { font-size: 18px; font-weight: 700; }
.nxt5 p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; }
.nxt5 footer { color: #71717a; font-size: 13.5px; }
</style>

<section class="nxt6">
  <div class="nxt6-metric">
    <strong>3.4×</strong>
    <span>faster checkout after switching</span>
  </div>
  <figure>
    <blockquote>“We tried four tools before this one. It’s the first our customers noticed — conversion jumped the week we launched.”</blockquote>
    <figcaption><span class="nxt6-av" aria-hidden="true">TO</span><span><b>Tomás Ortega</b><small>Head of Growth, Fernway</small></span></figcaption>
  </figure>
</section>
<style>
.nxt6, .nxt6 * { box-sizing: border-box; }
.nxt6 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); width: 100%; overflow: hidden; border: 1px solid #ece4d8; border-radius: 20px; background: #fff; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxt6-metric { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 28px 24px; background: #a24832; color: #fff; }
.nxt6-metric strong { font: 900 clamp(40px, 7vw, 56px)/1 Georgia,"Times New Roman",serif; }
.nxt6-metric span { font-size: 15px; line-height: 1.4; color: #fbe3d8; }
.nxt6 figure { margin: 0; padding: clamp(20px, 4vw, 32px); }
.nxt6 blockquote { margin: 0 0 18px; font: 400 18px/1.55 Georgia,"Times New Roman",serif; }
.nxt6 figcaption { display: flex; align-items: center; gap: 12px; }
.nxt6-av { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #2a1f1a; color: #faf6f0; font-weight: 700; font-size: 14px; }
.nxt6 figcaption b { display: block; font-size: 15px; }
.nxt6 figcaption small { color: #6d645a; font-size: 13.5px; }
@media (max-width: 560px) { .nxt6 { grid-template-columns: 1fr; } }
</style>