Testimonials

rohit
Feb 13, 2026 4
Live Preview

Live Editor

<section class="testi-section">

  <!-- Header -->
  <div class="sec-head">
    <div class="eyebrow">Testimonials</div>
    <h2 class="sec-title">What our users<br><em>are saying</em></h2>
    <p class="sec-sub">Thousands of teams trust us every day. Here's what they think.</p>
  </div>

  <!-- Columns -->
  <div class="cols-wrap">

    <!-- ── COL 1 ── -->
    <div class="col">
      <div class="col-track">

        <div class="t-card featured">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">This tool completely changed how our team ships product. We went from 3-week cycles to pushing features daily. Absolutely game-changing.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#7c6bff,#a78bfa)">A</div>
            <div class="author-info">
              <div class="author-name">Arjun Mehta</div>
              <div class="author-role">CTO · Stackflow Inc.</div>
            </div>
            <span class="verified">✓ Verified</span>
          </div>
        </div>

        <div class="t-card gold">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">Honestly the best investment we made this year. The analytics alone saved us 10 hours a week of manual reporting.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#f5c842,#e8a020)">S</div>
            <div class="author-info">
              <div class="author-name">Sara Lin</div>
              <div class="author-role">Head of Growth · Novu</div>
            </div>
            <span class="verified gold-v">✓ Pro</span>
          </div>
        </div>

        <div class="t-card">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">Setup took 10 minutes. The onboarding is the smoothest I've ever experienced with any SaaS product. Kudos to the team.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#ff6b35,#ff9a5c)">R</div>
            <div class="author-info">
              <div class="author-name">Riya Sharma</div>
              <div class="author-role">Product Manager · Loom</div>
            </div>
            <span class="verified">✓ Verified</span>
          </div>
        </div>

        <div class="t-card green">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">We replaced 4 tools with this one. Our stack is leaner, our team is happier, and our customers can feel the difference.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#34d399,#059669)">M</div>
            <div class="author-info">
              <div class="author-name">Marcus Wei</div>
              <div class="author-role">Founder · Buildfast</div>
            </div>
            <span class="verified green-v">✓ Team</span>
          </div>
        </div>

        <!-- duplicate -->
        <div class="t-card featured">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">This tool completely changed how our team ships product. We went from 3-week cycles to pushing features daily. Absolutely game-changing.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#7c6bff,#a78bfa)">A</div>
            <div class="author-info">
              <div class="author-name">Arjun Mehta</div>
              <div class="author-role">CTO · Stackflow Inc.</div>
            </div>
            <span class="verified">✓ Verified</span>
          </div>
        </div>
        <div class="t-card gold">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">Honestly the best investment we made this year. The analytics alone saved us 10 hours a week of manual reporting.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#f5c842,#e8a020)">S</div>
            <div class="author-info">
              <div class="author-name">Sara Lin</div>
              <div class="author-role">Head of Growth · Novu</div>
            </div>
            <span class="verified gold-v">✓ Pro</span>
          </div>
        </div>
        <div class="t-card">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">Setup took 10 minutes. The onboarding is the smoothest I've ever experienced with any SaaS product. Kudos to the team.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#ff6b35,#ff9a5c)">R</div>
            <div class="author-info">
              <div class="author-name">Riya Sharma</div>
              <div class="author-role">Product Manager · Loom</div>
            </div>
            <span class="verified">✓ Verified</span>
          </div>
        </div>
        <div class="t-card green">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">We replaced 4 tools with this one. Our stack is leaner, our team is happier, and our customers can feel the difference.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#34d399,#059669)">M</div>
            <div class="author-info">
              <div class="author-name">Marcus Wei</div>
              <div class="author-role">Founder · Buildfast</div>
            </div>
            <span class="verified green-v">✓ Team</span>
          </div>
        </div>

      </div>
    </div>

    <!-- ── COL 2 ── -->
    <div class="col">
      <div class="col-track">

        <div class="t-card">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">Customer support is unreal. They resolved our issue in under 8 minutes on a Sunday. Never seen anything like it.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#60a5fa,#3b82f6)">P</div>
            <div class="author-info">
              <div class="author-name">Priya Nair</div>
              <div class="author-role">Engineering Lead · Razorpay</div>
            </div>
            <span class="verified">✓ Verified</span>
          </div>
        </div>

        <div class="t-card gold">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">The component library is so well thought out. I've never had to fight the design system — it just makes sense.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#f472b6,#ec4899)">J</div>
            <div class="author-info">
              <div class="author-name">Jess Kim</div>
              <div class="author-role">Lead Designer · Figma</div>
            </div>
            <span class="verified gold-v">✓ Pro</span>
          </div>
        </div>

        <div class="t-card featured">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">We onboarded 12 new engineers using this platform. The learning curve was basically zero. That's rare and genuinely impressive.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#7c6bff,#5b4fcf)">T</div>
            <div class="author-info">
              <div class="author-name">Tom Bradley</div>
              <div class="author-role">VP Eng · Notion</div>
            </div>
            <span class="verified">✓ Enterprise</span>
          </div>
        </div>

        <div class="t-card green">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">Switched from a competitor and the difference in performance was night and day. Our page loads are 3x faster now.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#34d399,#10b981)">K</div>
            <div class="author-info">
              <div class="author-name">Kavya Reddy</div>
              <div class="author-role">Full Stack Dev · Swiggy</div>
            </div>
            <span class="verified green-v">✓ Team</span>
          </div>
        </div>

        <!-- duplicate -->
        <div class="t-card">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">Customer support is unreal. They resolved our issue in under 8 minutes on a Sunday. Never seen anything like it.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#60a5fa,#3b82f6)">P</div>
            <div class="author-info">
              <div class="author-name">Priya Nair</div>
              <div class="author-role">Engineering Lead · Razorpay</div>
            </div>
            <span class="verified">✓ Verified</span>
          </div>
        </div>
        <div class="t-card gold">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">The component library is so well thought out. I've never had to fight the design system — it just makes sense.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#f472b6,#ec4899)">J</div>
            <div class="author-info">
              <div class="author-name">Jess Kim</div>
              <div class="author-role">Lead Designer · Figma</div>
            </div>
            <span class="verified gold-v">✓ Pro</span>
          </div>
        </div>
        <div class="t-card featured">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">We onboarded 12 new engineers using this platform. The learning curve was basically zero. That's rare and genuinely impressive.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#7c6bff,#5b4fcf)">T</div>
            <div class="author-info">
              <div class="author-name">Tom Bradley</div>
              <div class="author-role">VP Eng · Notion</div>
            </div>
            <span class="verified">✓ Enterprise</span>
          </div>
        </div>
        <div class="t-card green">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">Switched from a competitor and the difference in performance was night and day. Our page loads are 3x faster now.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#34d399,#10b981)">K</div>
            <div class="author-info">
              <div class="author-name">Kavya Reddy</div>
              <div class="author-role">Full Stack Dev · Swiggy</div>
            </div>
            <span class="verified green-v">✓ Team</span>
          </div>
        </div>

      </div>
    </div>

    <!-- ── COL 3 ── -->
    <div class="col">
      <div class="col-track">

        <div class="t-card gold">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">ROI within 3 weeks of switching. I don't say this lightly — this is the best product decision I've made in 5 years of running a startup.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#fbbf24,#d97706)">D</div>
            <div class="author-info">
              <div class="author-name">Dev Kapoor</div>
              <div class="author-role">CEO · Hyperlaunch</div>
            </div>
            <span class="verified gold-v">✓ Pro</span>
          </div>
        </div>

        <div class="t-card">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">I've tried every tool in this space. Nothing comes close to this for ease of use and depth of features. Truly exceptional.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#818cf8,#6366f1)">N</div>
            <div class="author-info">
              <div class="author-name">Nina Patel</div>
              <div class="author-role">Senior Dev · Vercel</div>
            </div>
            <span class="verified">✓ Verified</span>
          </div>
        </div>

        <div class="t-card green">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">Our design and dev teams finally speak the same language. The collaboration features are exactly what a hybrid team needs.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#6ee7b7,#059669)">L</div>
            <div class="author-info">
              <div class="author-name">Lena Müller</div>
              <div class="author-role">Design Lead · Shopify</div>
            </div>
            <span class="verified green-v">✓ Team</span>
          </div>
        </div>

        <div class="t-card featured">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">From prototype to production in 48 hours. I built our entire MVP with this and got our first 100 users before the week was out.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#7c6bff,#a78bfa)">H</div>
            <div class="author-info">
              <div class="author-name">Hassan Ali</div>
              <div class="author-role">Indie Maker · ProductHunt</div>
            </div>
            <span class="verified">✓ Verified</span>
          </div>
        </div>

        <!-- duplicate -->
        <div class="t-card gold">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">ROI within 3 weeks of switching. I don't say this lightly — this is the best product decision I've made in 5 years of running a startup.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#fbbf24,#d97706)">D</div>
            <div class="author-info">
              <div class="author-name">Dev Kapoor</div>
              <div class="author-role">CEO · Hyperlaunch</div>
            </div>
            <span class="verified gold-v">✓ Pro</span>
          </div>
        </div>
        <div class="t-card">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">I've tried every tool in this space. Nothing comes close to this for ease of use and depth of features. Truly exceptional.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#818cf8,#6366f1)">N</div>
            <div class="author-info">
              <div class="author-name">Nina Patel</div>
              <div class="author-role">Senior Dev · Vercel</div>
            </div>
            <span class="verified">✓ Verified</span>
          </div>
        </div>
        <div class="t-card green">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">Our design and dev teams finally speak the same language. The collaboration features are exactly what a hybrid team needs.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#6ee7b7,#059669)">L</div>
            <div class="author-info">
              <div class="author-name">Lena Müller</div>
              <div class="author-role">Design Lead · Shopify</div>
            </div>
            <span class="verified green-v">✓ Team</span>
          </div>
        </div>
        <div class="t-card featured">
          <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
          <p class="quote">From prototype to production in 48 hours. I built our entire MVP with this and got my first 100 users before the week was out.</p>
          <div class="author">
            <div class="av" style="background:linear-gradient(135deg,#7c6bff,#a78bfa)">H</div>
            <div class="author-info">
              <div class="author-name">Hassan Ali</div>
              <div class="author-role">Indie Maker · ProductHunt</div>
            </div>
            <span class="verified">✓ Verified</span>
          </div>
        </div>

      </div>
    </div>

  </div>
</section>
 :root {
    --bg:       #080810;
    --card:     #0f0f1e;
    --card2:    #0c1420;
    --accent:   #7c6bff;
    --gold:     #f5c842;
    --text:     #eeeef8;
    --muted:    #5a5878;
    --border:   rgba(255,255,255,0.06);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    font-family: 'Manrope', sans-serif;
    color: var(--text);
    overflow-x: hidden;
  }

  /* ══════════════════════════
     SECTION
  ══════════════════════════ */
  .testi-section {
    width: 100%;
    padding: 100px 0 110px;
    position: relative;
    overflow: hidden;
  }

  /* Bg glow */
  .testi-section::before {
    content: '';
    position: absolute;
    width: 800px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(124,107,255,0.08) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  /* ── Header ── */
  .sec-head {
    text-align: center;
    margin-bottom: 64px;
    position: relative; z-index: 2;
    padding: 0 24px;
  }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; letter-spacing: 0.38em;
    text-transform: uppercase; color: var(--accent);
    font-weight: 600; margin-bottom: 18px;
  }
  .eyebrow::before, .eyebrow::after {
    content: '';
    width: 36px; height: 1px;
    background: linear-gradient(to right, transparent, var(--accent));
  }
  .eyebrow::after { transform: scaleX(-1); }

  .sec-title {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 400;
    line-height: 1.08;
    color: var(--text);
    margin-bottom: 14px;
  }
  .sec-title em {
    font-style: italic;
    color: var(--accent);
  }

  .sec-sub {
    font-size: 15px; color: var(--muted);
    font-weight: 300; line-height: 1.7;
    max-width: 420px; margin: 0 auto;
  }

  /* ══════════════════════════
     COLUMNS WRAPPER — 400px
  ══════════════════════════ */
  .cols-wrap {
    height: 400px;
    overflow: hidden;
    position: relative;
    display: flex;
    gap: 18px;
    padding: 0 56px;
  }

  /* Top fade */
  .cols-wrap::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 100px; z-index: 10; pointer-events: none;
    background: linear-gradient(to bottom, var(--bg), transparent);
  }
  /* Bottom fade */
  .cols-wrap::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 120px; z-index: 10; pointer-events: none;
    background: linear-gradient(to top, var(--bg), transparent);
  }

  /* ── Column ── */
  .col {
    flex: 1; min-width: 0;
    overflow: hidden;
  }

  .col-track {
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: scrollUp linear infinite;
    will-change: transform;
  }

  .col:nth-child(1) .col-track { animation-duration: 26s; }
  .col:nth-child(2) .col-track { animation-duration: 34s; animation-delay: -8s; }
  .col:nth-child(3) .col-track { animation-duration: 22s; animation-delay: -4s; }

  /* Pause on hover — pure CSS */
  .col:hover .col-track { animation-play-state: paused; }

  @keyframes scrollUp {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
  }

  /* ══════════════════════════
     TESTIMONIAL CARD
  ══════════════════════════ */
  .t-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: border-color 0.35s;
    cursor: default;
    flex-shrink: 0;
  }
  .t-card:hover {
    border-color: rgba(124,107,255,0.28);
  }

  /* Accent variants */
  .t-card.gold   { border-color: rgba(245,200,66,0.1); }
  .t-card.gold:hover { border-color: rgba(245,200,66,0.35); }
  .t-card.green  { border-color: rgba(52,211,153,0.1); }
  .t-card.green:hover { border-color: rgba(52,211,153,0.35); }

  /* Top row: stars */
  .stars {
    display: flex; gap: 3px;
  }
  .star {
    font-size: 13px; color: var(--gold);
  }
  .star.dim { color: var(--muted); }

  /* Quote text */
  .quote {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(238,238,248,0.75);
    font-weight: 300;
    position: relative;
  }
  .quote::before {
    content: '\201C';
    font-family: 'DM Serif Display', serif;
    font-size: 52px;
    line-height: 0;
    vertical-align: -0.4em;
    color: var(--accent);
    opacity: 0.35;
    margin-right: 2px;
  }

  /* Author row */
  .author {
    display: flex; align-items: center; gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }

  .av {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    font-weight: 700; color: #fff;
    font-family: 'DM Serif Display', serif;
  }

  .author-info { flex: 1; min-width: 0; }
  .author-name {
    font-size: 13px; font-weight: 600;
    color: var(--text); letter-spacing: 0.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .author-role {
    font-size: 11px; color: var(--muted);
    font-weight: 400; letter-spacing: 0.04em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Verified badge */
  .verified {
    font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 100px;
    background: rgba(124,107,255,0.1);
    border: 1px solid rgba(124,107,255,0.25);
    color: var(--accent); white-space: nowrap;
  }
  .verified.gold-v {
    background: rgba(245,200,66,0.08);
    border-color: rgba(245,200,66,0.25);
    color: var(--gold);
  }
  .verified.green-v {
    background: rgba(52,211,153,0.08);
    border-color: rgba(52,211,153,0.25);
    color: #34d399;
  }

  /* Featured card — slightly bigger quote */
  .t-card.featured {
    background: linear-gradient(145deg, #110f2a, #0d0d20);
    border-color: rgba(124,107,255,0.3);
    box-shadow: 0 0 40px rgba(124,107,255,0.06);
  }
  .t-card.featured .quote { font-size: 15px; }

  /* ── Responsive ── */
  @media (max-width: 900px) {
    .cols-wrap { padding: 0 24px; gap: 12px; }
    .col:nth-child(3) { display: none; }
  }
  @media (max-width: 560px) {
    .cols-wrap { padding: 0 16px; }
    .col:nth-child(2) { display: none; }
  }
Categories

Testimonials

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
