Rating Summary Panel

<div class="container py-5">
  <div class="row g-4">
    <div class="col-md-4">
      <div class="card border-0 shadow-sm p-4 text-center h-100">
        <div class="display-3 fw-bold text-warning">4.8</div>
        <div class="text-warning fs-4">★★★★★</div>
        <p class="text-muted mb-3">Based on 1,204 reviews</p>
        <div class="text-start small">
          <div class="d-flex align-items-center gap-2 mb-1">5★<div class="progress flex-grow-1" style="height:6px">
              <div class="progress-bar bg-success" style="width:82%"></div>
            </div>82%</div>
          <div class="d-flex align-items-center gap-2 mb-1">4★<div class="progress flex-grow-1" style="height:6px">
              <div class="progress-bar bg-success" style="width:12%"></div>
            </div>12%</div>
          <div class="d-flex align-items-center gap-2 mb-1">3★<div class="progress flex-grow-1" style="height:6px">
              <div class="progress-bar bg-warning" style="width:4%"></div>
            </div>4%</div>
          <div class="d-flex align-items-center gap-2 mb-1">2★<div class="progress flex-grow-1" style="height:6px">
              <div class="progress-bar bg-danger" style="width:1%"></div>
            </div>1%</div>
          <div class="d-flex align-items-center gap-2">1★<div class="progress flex-grow-1" style="height:6px">
              <div class="progress-bar bg-danger" style="width:1%"></div>
            </div>1%</div>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="d-flex flex-column gap-3">
        <div class="card border-0 shadow-sm p-4">
          <div class="d-flex justify-content-between">
            <h6 class="mb-0">Loved every feature</h6>
            <div class="text-warning">★★★★★</div>
          </div><small class="text-muted">by Alex — 3 days ago</small>
          <p class="mb-0 mt-2">Onboarding was smooth and the mobile app is buttery.</p>
        </div>
        <div class="card border-0 shadow-sm p-4">
          <div class="d-flex justify-content-between">
            <h6 class="mb-0">Solid choice for teams</h6>
            <div class="text-warning">★★★★☆</div>
          </div><small class="text-muted">by Zara — 1 week ago</small>
          <p class="mb-0 mt-2">Team collaboration features are the standout.</p>
        </div>
      </div>
    </div>
  </div>
</div>