Testimonial 03

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="testimonial_component">
  <div class="testimonial_glow"></div>
  <div class="testimonial_inner">
    <p class="testimonial_eyebrow">Loved by builders</p>
    <h2 class="testimonial_quote">
      <span class="testimonial_quote_lead">“We shipped our AI pipeline in a weekend. What used to take three engineers now runs itself — </span>
      <span class="testimonial_quote_accent">it feels like unfair leverage.</span>
      <span class="testimonial_quote_tail">”</span>
    </h2>
    <div class="testimonial_footer">
      <div class="testimonial_author">
        <img class="testimonial_avatar" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-testimonial-dark-glow-3-1-12.webp" alt="Portrait of Maya Okonkwo" />
        <div class="testimonial_author_text">
          <p class="testimonial_author_name">Maya Okonkwo</p>
          <p class="testimonial_author_role">Co-founder & CTO, Vectorly</p>
        </div>
      </div>
      <div class="testimonial_rating">
        <p class="testimonial_rating_stars">★★★★★</p>
        <p class="testimonial_rating_label">4.9/5 across 2,400+ teams</p>
      </div>
    </div>
  </div>
</section>

<style>
.testimonial_component {
  position:relative;
  overflow:hidden;
  background:#05060a;
  padding:140px 24px;
  font-family:Inter,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
}

.testimonial_glow {
  pointer-events:none;
  position:absolute;
  left:50%;
  top:-120px;
  width:720px;
  height:720px;
  transform:translateX(-50%);
  border-radius:9999px;
  background:radial-gradient(circle,rgba(0,229,192,0.28) 0%,rgba(0,229,192,0.08) 40%,rgba(5,6,10,0) 70%);
  filter:blur(120px);
  opacity:0.6;
}

.testimonial_inner {
  position:relative;
  z-index:10;
  margin:0 auto;
  max-width:1080px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.testimonial_eyebrow {
  margin:0 0 28px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(0,229,192,0.25);
  background:rgba(0,229,192,0.05);
  border-radius:9999px;
  padding:7px 16px;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#00e5c0;
}

.testimonial_quote {
  margin:0;
  max-width:900px;
  text-align:center;
  font-size:44px;
  font-weight:700;
  line-height:1.18;
  letter-spacing:-0.02em;
  color:#ffffff;
}

.testimonial_quote_lead {
  color:#ffffff;
}

.testimonial_quote_accent {
  color:#00e5c0;
}

.testimonial_quote_tail {
  color:#ffffff;
}

.testimonial_footer {
  margin-top:56px;
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
  gap:20px;
}

.testimonial_author {
  display:flex;
  flex:1 1 340px;
  align-items:center;
  gap:16px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  border-radius:18px;
  padding:20px 24px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.testimonial_avatar {
  width:56px;
  height:56px;
  border-radius:9999px;
  object-fit:cover;
  border:1px solid rgba(0,229,192,0.4);
}

.testimonial_author_text {
  display:flex;
  flex-direction:column;
}

.testimonial_author_name {
  margin:0;
  font-size:16px;
  font-weight:600;
  color:#ffffff;
}

.testimonial_author_role {
  margin:3px 0 0;
  font-size:14px;
  color:#9aa2b1;
}

.testimonial_rating {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  border:1px solid rgba(0,229,192,0.2);
  background:#0a0a0a;
  border-radius:18px;
  padding:20px 26px;
  box-shadow:0 0 40px rgba(0,229,192,0.08);
}

.testimonial_rating_stars {
  margin:0;
  font-size:18px;
  letter-spacing:3px;
  color:#00e5c0;
}

.testimonial_rating_label {
  margin:0;
  font-size:13px;
  color:#9aa2b1;
}
</style>