> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ethioreview.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget component gallery

> Live previews of all 12 EthioReview rating widget layouts.

Sample rating data is used for every preview. In your app, pass live data from the widget API or set `layout` on `ReviewWidget`.

<div className="erw-docs-showcase not-prose">
  <section className="erw-docs-section" id="hero-banner">
    <header className="erw-docs-section-header">
      <h3 className="erw-docs-section-title">Hero review banner</h3>
      <p className="erw-docs-section-desc">Full-width featured rating block with CTA — great for landing pages.</p>
      <code className="erw-docs-layout-key">layout="hero-banner"</code>
    </header>

    <div className="erw-docs-preview">
      <div className="erw-root erw-hero erw-card">
        <div className="erw-hero-inner">
          <div className="erw-flex-col erw-gap-3">
            <span className="erw-logo">
              <span className="erw-logo-mark" style={{ width: 22, height: 22, fontSize: 9.9 }} aria-hidden>E</span>
              <span className="erw-logo-wordmark" style={{ fontSize: 18.7 }}>EthioReview</span>
            </span>

            <div className="erw-inline-flex" style={{ flexWrap: "wrap", gap: 12 }}>
              <span className="erw-bold" style={{ fontSize: "1.875rem" }}>Excellent</span>

              <div className="erw-stars" style={{ gap: 4 }} aria-hidden>
                <div className="erw-star-tile" style={{ width: 36, height: 36 }}>
                  <div className="erw-star-fill" style={{ width: "100%" }} />

                  <div className="erw-star-icon">
                    <svg width="22.32" height="22.32" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                    </svg>
                  </div>
                </div>

                <div className="erw-star-tile" style={{ width: 36, height: 36 }}>
                  <div className="erw-star-fill" style={{ width: "100%" }} />

                  <div className="erw-star-icon">
                    <svg width="22.32" height="22.32" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                    </svg>
                  </div>
                </div>

                <div className="erw-star-tile" style={{ width: 36, height: 36 }}>
                  <div className="erw-star-fill" style={{ width: "100%" }} />

                  <div className="erw-star-icon">
                    <svg width="22.32" height="22.32" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                    </svg>
                  </div>
                </div>

                <div className="erw-star-tile" style={{ width: 36, height: 36 }}>
                  <div className="erw-star-fill" style={{ width: "100%" }} />

                  <div className="erw-star-icon">
                    <svg width="22.32" height="22.32" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                    </svg>
                  </div>
                </div>

                <div className="erw-star-tile" style={{ width: 36, height: 36 }}>
                  <div className="erw-star-fill" style={{ width: "80%" }} />

                  <div className="erw-star-icon">
                    <svg width="22.32" height="22.32" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                    </svg>
                  </div>
                </div>
              </div>
            </div>

            <p className="erw-text-sm erw-muted">
              Rated <span className="erw-semibold" style={{ color: "var(--erw-fg)" }}>4.8 / 5</span> by <span className="erw-semibold" style={{ color: "var(--erw-fg)" }}>20,921</span> verified customers
            </p>
          </div>

          <span className="erw-cta">Read all reviews →</span>
        </div>
      </div>
    </div>
  </section>

  <section className="erw-docs-section" id="trust-score">
    <header className="erw-docs-section-header">
      <h3 className="erw-docs-section-title">TrustScore summary</h3>
      <p className="erw-docs-section-desc">Label, stars, score and total reviews in a single line.</p>
      <code className="erw-docs-layout-key">layout="trust-score"</code>
    </header>

    <div className="erw-docs-preview">
      <div className="erw-root erw-trust-score erw-card">
        <div className="erw-trust-score-row">
          <span className="erw-bold" style={{ fontSize: "1.5rem" }}>Excellent</span>

          <div className="erw-stars" style={{ gap: 4 }} aria-hidden>
            <div className="erw-star-tile" style={{ width: 34, height: 34 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="21.08" height="21.08" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 34, height: 34 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="21.08" height="21.08" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 34, height: 34 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="21.08" height="21.08" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 34, height: 34 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="21.08" height="21.08" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 34, height: 34 }}>
              <div className="erw-star-fill" style={{ width: "80%" }} />

              <div className="erw-star-icon">
                <svg width="21.08" height="21.08" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>
          </div>

          <span className="erw-semibold" style={{ fontSize: "1.125rem" }}>
            4.8 <span className="erw-text-sm erw-muted" style={{ fontWeight: 400 }}>out of 5</span>
          </span>
        </div>

        <div className="erw-inline-flex erw-gap-2 erw-text-sm erw-muted">
          <span className="erw-semibold" style={{ color: "var(--erw-fg)" }}>20,921</span>
          <span>reviews on</span>

          <span className="erw-logo">
            <span className="erw-logo-mark" style={{ width: 18, height: 18, fontSize: 8.1 }} aria-hidden>E</span>
            <span className="erw-logo-wordmark" style={{ fontSize: 15.3 }}>EthioReview</span>
          </span>
        </div>
      </div>
    </div>
  </section>

  <section className="erw-docs-section" id="rating-breakdown">
    <header className="erw-docs-section-header">
      <h3 className="erw-docs-section-title">Rating breakdown card</h3>
      <p className="erw-docs-section-desc">Per-star distribution with counts.</p>
      <code className="erw-docs-layout-key">layout="rating-breakdown"</code>
    </header>

    <div className="erw-docs-preview">
      <div className="erw-root erw-breakdown erw-card">
        <div className="erw-breakdown-header">
          <h3 className="erw-bold" style={{ fontSize: "1.25rem", margin: 0 }}>
            4.7 <span className="erw-muted" style={{ fontSize: "1rem", fontWeight: 400 }}>out of 5</span>
          </h3>

          <span className="erw-logo">
            <span className="erw-logo-mark" style={{ width: 16, height: 16, fontSize: 7.2 }} aria-hidden>E</span>
            <span className="erw-logo-wordmark" style={{ fontSize: 13.6 }}>EthioReview</span>
          </span>
        </div>

        <div className="erw-breakdown-bars">
          <div className="erw-rating-bar">
            <span className="erw-rating-bar-label">5 stars</span>

            <div className="erw-rating-bar-track">
              <div className="erw-rating-bar-value erw-bar-5" style={{ width: "48.51%" }} />
            </div>

            <span className="erw-rating-bar-count">(212)</span>
          </div>

          <div className="erw-rating-bar">
            <span className="erw-rating-bar-label">4 stars</span>

            <div className="erw-rating-bar-track">
              <div className="erw-rating-bar-value erw-bar-4" style={{ width: "32.04%" }} />
            </div>

            <span className="erw-rating-bar-count">(140)</span>
          </div>

          <div className="erw-rating-bar">
            <span className="erw-rating-bar-label">3 stars</span>

            <div className="erw-rating-bar-track">
              <div className="erw-rating-bar-value erw-bar-3" style={{ width: "9.84%" }} />
            </div>

            <span className="erw-rating-bar-count">(43)</span>
          </div>

          <div className="erw-rating-bar">
            <span className="erw-rating-bar-label">2 stars</span>

            <div className="erw-rating-bar-track">
              <div className="erw-rating-bar-value erw-bar-2" style={{ width: "4.81%" }} />
            </div>

            <span className="erw-rating-bar-count">(21)</span>
          </div>

          <div className="erw-rating-bar">
            <span className="erw-rating-bar-label">1 star</span>

            <div className="erw-rating-bar-track">
              <div className="erw-rating-bar-value erw-bar-1" style={{ width: "4.81%" }} />
            </div>

            <span className="erw-rating-bar-count">(21)</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section className="erw-docs-section" id="vertical-stacked">
    <header className="erw-docs-section-header">
      <h3 className="erw-docs-section-title">Vertical stacked card</h3>
      <p className="erw-docs-section-desc">Portrait-format widget for sidebars and product pages.</p>
      <code className="erw-docs-layout-key">layout="vertical-stacked"</code>
    </header>

    <div className="erw-docs-preview">
      <div className="erw-root erw-vertical erw-card">
        <div className="erw-flex-center">
          <span className="erw-logo">
            <span className="erw-logo-mark" style={{ width: 20, height: 20, fontSize: 9 }} aria-hidden>E</span>
            <span className="erw-logo-wordmark" style={{ fontSize: 17 }}>EthioReview</span>
          </span>
        </div>

        <div className="erw-vertical-score">4.8</div>
        <div className="erw-vertical-label">Excellent</div>

        <div className="erw-flex-center" style={{ marginTop: 12 }}>
          <div className="erw-stars" style={{ gap: 4 }} aria-hidden>
            <div className="erw-star-tile" style={{ width: 24, height: 24 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="14.88" height="14.88" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 24, height: 24 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="14.88" height="14.88" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 24, height: 24 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="14.88" height="14.88" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 24, height: 24 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="14.88" height="14.88" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 24, height: 24 }}>
              <div className="erw-star-fill" style={{ width: "80%" }} />

              <div className="erw-star-icon">
                <svg width="14.88" height="14.88" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>
          </div>
        </div>

        <div className="erw-text-sm erw-muted" style={{ marginTop: 12 }}>
          Based on <span className="erw-semibold" style={{ color: "var(--erw-fg)" }}>20,921</span> reviews
        </div>

        <div className="erw-vertical-bars">
          <div className="erw-rating-bar">
            <span className="erw-rating-bar-label">5 stars</span>

            <div className="erw-rating-bar-track">
              <div className="erw-rating-bar-value erw-bar-5" style={{ width: "77.48%" }} />
            </div>

            <span className="erw-rating-bar-count">(16210)</span>
          </div>

          <div className="erw-rating-bar">
            <span className="erw-rating-bar-label">4 stars</span>

            <div className="erw-rating-bar-track">
              <div className="erw-rating-bar-value erw-bar-4" style={{ width: "14.91%" }} />
            </div>

            <span className="erw-rating-bar-count">(3120)</span>
          </div>

          <div className="erw-rating-bar">
            <span className="erw-rating-bar-label">3 stars</span>

            <div className="erw-rating-bar-track">
              <div className="erw-rating-bar-value erw-bar-3" style={{ width: "4.68%" }} />
            </div>

            <span className="erw-rating-bar-count">(980)</span>
          </div>

          <div className="erw-rating-bar">
            <span className="erw-rating-bar-label">2 stars</span>

            <div className="erw-rating-bar-track">
              <div className="erw-rating-bar-value erw-bar-2" style={{ width: "1.72%" }} />
            </div>

            <span className="erw-rating-bar-count">(360)</span>
          </div>

          <div className="erw-rating-bar">
            <span className="erw-rating-bar-label">1 star</span>

            <div className="erw-rating-bar-track">
              <div className="erw-rating-bar-value erw-bar-1" style={{ width: "1.20%" }} />
            </div>

            <span className="erw-rating-bar-count">(251)</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<div className="erw-docs-showcase not-prose">
  <section className="erw-docs-section" id="micro-badge">
    <header className="erw-docs-section-header">
      <h3 className="erw-docs-section-title">Micro badge</h3>
      <p className="erw-docs-section-desc">Compact inline badge with stars, review count and logo.</p>
      <code className="erw-docs-layout-key">layout="micro-badge"</code>
    </header>

    <div className="erw-docs-preview">
      <div className="erw-root erw-micro-badge erw-card">
        <div className="erw-stars" style={{ gap: 4 }} aria-hidden>
          <div className="erw-star-tile" style={{ width: 26, height: 26 }}>
            <div className="erw-star-fill" style={{ width: "100%" }} />

            <div className="erw-star-icon">
              <svg width="16.12" height="16.12" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
              </svg>
            </div>
          </div>

          <div className="erw-star-tile" style={{ width: 26, height: 26 }}>
            <div className="erw-star-fill" style={{ width: "100%" }} />

            <div className="erw-star-icon">
              <svg width="16.12" height="16.12" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
              </svg>
            </div>
          </div>

          <div className="erw-star-tile" style={{ width: 26, height: 26 }}>
            <div className="erw-star-fill" style={{ width: "100%" }} />

            <div className="erw-star-icon">
              <svg width="16.12" height="16.12" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
              </svg>
            </div>
          </div>

          <div className="erw-star-tile" style={{ width: 26, height: 26 }}>
            <div className="erw-star-fill" style={{ width: "70%" }} />

            <div className="erw-star-icon">
              <svg width="16.12" height="16.12" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
              </svg>
            </div>
          </div>

          <div className="erw-star-tile" style={{ width: 26, height: 26 }}>
            <div className="erw-star-fill" style={{ width: "70%" }} />

            <div className="erw-star-icon">
              <svg width="16.12" height="16.12" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
              </svg>
            </div>
          </div>
        </div>

        <span className="erw-text-sm erw-muted" style={{ fontWeight: 500 }}>437 reviews</span>

        <span className="erw-divider-v" style={{ height: 20 }} />

        <span className="erw-logo">
          <span className="erw-logo-mark" style={{ width: 18, height: 18, fontSize: 8.1 }} aria-hidden>E</span>
          <span className="erw-logo-wordmark" style={{ fontSize: 15.3 }}>EthioReview</span>
        </span>
      </div>
    </div>
  </section>

  <section className="erw-docs-section" id="inline-pill">
    <header className="erw-docs-section-header">
      <h3 className="erw-docs-section-title">Inline rating pill</h3>
      <p className="erw-docs-section-desc">Minimal one-line pill for footers, product cards or nav bars.</p>
      <code className="erw-docs-layout-key">layout="inline-pill"</code>
    </header>

    <div className="erw-docs-preview">
      <div className="erw-root erw-inline-pill erw-card">
        <div className="erw-stars" style={{ gap: 2 }} aria-hidden>
          <div className="erw-star-tile" style={{ width: 16, height: 16 }}>
            <div className="erw-star-fill" style={{ width: "100%" }} />

            <div className="erw-star-icon">
              <svg width="9.92" height="9.92" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
              </svg>
            </div>
          </div>

          <div className="erw-star-tile" style={{ width: 16, height: 16 }}>
            <div className="erw-star-fill" style={{ width: "100%" }} />

            <div className="erw-star-icon">
              <svg width="9.92" height="9.92" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
              </svg>
            </div>
          </div>

          <div className="erw-star-tile" style={{ width: 16, height: 16 }}>
            <div className="erw-star-fill" style={{ width: "100%" }} />

            <div className="erw-star-icon">
              <svg width="9.92" height="9.92" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
              </svg>
            </div>
          </div>

          <div className="erw-star-tile" style={{ width: 16, height: 16 }}>
            <div className="erw-star-fill" style={{ width: "100%" }} />

            <div className="erw-star-icon">
              <svg width="9.92" height="9.92" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
              </svg>
            </div>
          </div>

          <div className="erw-star-tile" style={{ width: 16, height: 16 }}>
            <div className="erw-star-fill" style={{ width: "80%" }} />

            <div className="erw-star-icon">
              <svg width="9.92" height="9.92" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
              </svg>
            </div>
          </div>
        </div>

        <span className="erw-semibold erw-tabular">4.8</span>
        <span className="erw-muted">· 20,921 reviews</span>

        <span className="erw-divider-v" style={{ height: 12 }} />

        <span className="erw-logo">
          <span className="erw-logo-mark" style={{ width: 14, height: 14, fontSize: 6.3 }} aria-hidden>E</span>
          <span className="erw-logo-wordmark" style={{ fontSize: 11.9 }}>EthioReview</span>
        </span>
      </div>
    </div>
  </section>

  <section className="erw-docs-section" id="review-carousel">
    <header className="erw-docs-section-header">
      <h3 className="erw-docs-section-title">Review carousel card</h3>
      <p className="erw-docs-section-desc">Featured customer quotes with verified ratings.</p>
      <code className="erw-docs-layout-key">layout="review-carousel"</code>
    </header>

    <div className="erw-docs-preview">
      <div className="erw-root erw-carousel erw-card">
        <div className="erw-carousel-header">
          <div className="erw-inline-flex erw-gap-3">
            <span className="erw-logo">
              <span className="erw-logo-mark" style={{ width: 20, height: 20, fontSize: 9 }} aria-hidden>E</span>
              <span className="erw-logo-wordmark" style={{ fontSize: 17 }}>EthioReview</span>
            </span>

            <span className="erw-divider-v" style={{ height: 16 }} />

            <div className="erw-stars" style={{ gap: 4 }} aria-hidden>
              <div className="erw-star-tile" style={{ width: 22, height: 22 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="13.64" height="13.64" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 22, height: 22 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="13.64" height="13.64" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 22, height: 22 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="13.64" height="13.64" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 22, height: 22 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="13.64" height="13.64" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 22, height: 22 }}>
                <div className="erw-star-fill" style={{ width: "80%" }} />

                <div className="erw-star-icon">
                  <svg width="13.64" height="13.64" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>
            </div>

            <span className="erw-semibold erw-tabular">4.8</span>
          </div>

          <span className="erw-text-xs erw-muted">Excellent · 20,921 reviews</span>
        </div>

        <div className="erw-carousel-grid">
          <article className="erw-carousel-item">
            <div className="erw-quote-icon">❝</div>

            <div className="erw-stars" style={{ gap: 2 }} aria-hidden>
              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>
            </div>

            <h4 className="erw-carousel-item-title">Outstanding service</h4>
            <p className="erw-carousel-item-body">Fast delivery, fair prices, and the support team actually responds.</p>

            <footer className="erw-carousel-item-footer">
              <span className="erw-avatar" style={{ width: 28, height: 28 }}>ST</span>

              <div style={{ fontSize: 11, lineHeight: 1.3 }}>
                <div className="erw-semibold">Selam T.</div>
              </div>
            </footer>
          </article>

          <article className="erw-carousel-item">
            <div className="erw-quote-icon">❝</div>

            <div className="erw-stars" style={{ gap: 2 }} aria-hidden>
              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>
            </div>

            <h4 className="erw-carousel-item-title">Highly recommend</h4>
            <p className="erw-carousel-item-body">Used them three times now and every order has been smooth.</p>

            <footer className="erw-carousel-item-footer">
              <span className="erw-avatar" style={{ width: 28, height: 28 }}>DM</span>

              <div style={{ fontSize: 11, lineHeight: 1.3 }}>
                <div className="erw-semibold">Daniel M.</div>
              </div>
            </footer>
          </article>

          <article className="erw-carousel-item">
            <div className="erw-quote-icon">❝</div>

            <div className="erw-stars" style={{ gap: 2 }} aria-hidden>
              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
                <div className="erw-star-fill" style={{ width: "0%" }} />

                <div className="erw-star-icon">
                  <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>
            </div>

            <h4 className="erw-carousel-item-title">Really good experience</h4>
            <p className="erw-carousel-item-body">Great platform overall. Loved how easy it was to find verified businesses.</p>

            <footer className="erw-carousel-item-footer">
              <span className="erw-avatar" style={{ width: 28, height: 28 }}>HG</span>

              <div style={{ fontSize: 11, lineHeight: 1.3 }}>
                <div className="erw-semibold">Hanna G.</div>
              </div>
            </footer>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section className="erw-docs-section" id="comparison-strip">
    <header className="erw-docs-section-header">
      <h3 className="erw-docs-section-title">Comparison strip</h3>
      <p className="erw-docs-section-desc">At-a-glance KPI strip — average, 5-star %, totals and verification.</p>
      <code className="erw-docs-layout-key">layout="comparison-strip"</code>
    </header>

    <div className="erw-docs-preview">
      <div className="erw-root erw-comparison erw-card">
        <div className="erw-inline-flex" style={{ justifyContent: "space-between", marginBottom: 16, width: "100%" }}>
          <div className="erw-inline-flex erw-gap-3">
            <span className="erw-logo">
              <span className="erw-logo-mark" style={{ width: 18, height: 18, fontSize: 8.1 }} aria-hidden>E</span>
              <span className="erw-logo-wordmark" style={{ fontSize: 15.3 }}>EthioReview</span>
            </span>

            <span className="erw-divider-v" style={{ height: 16 }} />

            <div className="erw-stars" style={{ gap: 2 }} aria-hidden>
              <div className="erw-star-tile" style={{ width: 18, height: 18 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="11.16" height="11.16" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 18, height: 18 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="11.16" height="11.16" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 18, height: 18 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="11.16" height="11.16" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 18, height: 18 }}>
                <div className="erw-star-fill" style={{ width: "100%" }} />

                <div className="erw-star-icon">
                  <svg width="11.16" height="11.16" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>

              <div className="erw-star-tile" style={{ width: 18, height: 18 }}>
                <div className="erw-star-fill" style={{ width: "80%" }} />

                <div className="erw-star-icon">
                  <svg width="11.16" height="11.16" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                  </svg>
                </div>
              </div>
            </div>
          </div>

          <span className="erw-text-xs erw-muted">Last 90 days</span>
        </div>

        <div className="erw-comparison-stats">
          <div className="erw-comparison-stat">
            <div className="erw-comparison-stat-value">4.8</div>
            <div className="erw-comparison-stat-label">Avg. rating</div>
          </div>

          <div className="erw-comparison-stat">
            <div className="erw-comparison-stat-value">77%</div>
            <div className="erw-comparison-stat-label">5-star reviews</div>
          </div>

          <div className="erw-comparison-stat">
            <div className="erw-comparison-stat-value">20,921</div>
            <div className="erw-comparison-stat-label">Total reviews</div>
          </div>

          <div className="erw-comparison-stat">
            <div className="erw-comparison-stat-value">100%</div>
            <div className="erw-comparison-stat-label">Verified</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<div className="erw-docs-showcase not-prose">
  <section className="erw-docs-section" id="circular-score">
    <header className="erw-docs-section-header">
      <h3 className="erw-docs-section-title">Circular score</h3>
      <p className="erw-docs-section-desc">Radial score gauge for dashboards and stat panels.</p>
      <code className="erw-docs-layout-key">layout="circular-score"</code>
    </header>

    <div className="erw-docs-preview">
      <div className="erw-root erw-circular erw-card">
        <span className="erw-logo">
          <span className="erw-logo-mark" style={{ width: 18, height: 18, fontSize: 8.1 }} aria-hidden>E</span>
          <span className="erw-logo-wordmark" style={{ fontSize: 15.3 }}>EthioReview</span>
        </span>

        <div className="erw-circular-ring">
          <svg viewBox="0 0 120 120" aria-hidden>
            <circle cx="60" cy="60" r="52" fill="none" stroke="var(--erw-track)" strokeWidth="10" />

            <circle cx="60" cy="60" r="52" fill="none" stroke="var(--erw-primary)" strokeWidth="10" strokeLinecap="round" strokeDasharray="326.726" strokeDashoffset="13.069" />
          </svg>

          <div className="erw-circular-center">
            <span className="erw-circular-score">4.8</span>
            <span className="erw-text-xs erw-muted" style={{ marginTop: 4, textTransform: "uppercase", letterSpacing: "0.05em" }}>out of 5</span>
          </div>
        </div>

        <div className="erw-text-xs erw-muted">
          From <span className="erw-semibold" style={{ color: "var(--erw-fg)" }}>20,921</span> reviews
        </div>
      </div>
    </div>
  </section>

  <section className="erw-docs-section" id="verified-business">
    <header className="erw-docs-section-header">
      <h3 className="erw-docs-section-title">Verified business card</h3>
      <p className="erw-docs-section-desc">Trust-mark card showing your business is verified on EthioReview.</p>
      <code className="erw-docs-layout-key">layout="verified-business"</code>
    </header>

    <div className="erw-docs-preview">
      <div className="erw-root erw-verified erw-card">
        <div className="erw-verified-body">
          <div className="erw-verified-icon">🛡</div>

          <div style={{ flex: 1 }}>
            <div className="erw-inline-flex erw-gap-2">
              <h4 className="erw-semibold" style={{ margin: 0, fontSize: "1rem" }}>Verified Business</h4>
              <span className="erw-verified-badge">Trusted</span>
            </div>

            <p className="erw-text-xs erw-muted" style={{ margin: "2px 0 0" }}>Independently rated on EthioReview</p>

            <div className="erw-inline-flex erw-gap-2" style={{ marginTop: 12 }}>
              <div className="erw-stars" style={{ gap: 3 }} aria-hidden>
                <div className="erw-star-tile" style={{ width: 20, height: 20 }}>
                  <div className="erw-star-fill" style={{ width: "100%" }} />

                  <div className="erw-star-icon">
                    <svg width="12.4" height="12.4" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                    </svg>
                  </div>
                </div>

                <div className="erw-star-tile" style={{ width: 20, height: 20 }}>
                  <div className="erw-star-fill" style={{ width: "100%" }} />

                  <div className="erw-star-icon">
                    <svg width="12.4" height="12.4" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                    </svg>
                  </div>
                </div>

                <div className="erw-star-tile" style={{ width: 20, height: 20 }}>
                  <div className="erw-star-fill" style={{ width: "100%" }} />

                  <div className="erw-star-icon">
                    <svg width="12.4" height="12.4" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                    </svg>
                  </div>
                </div>

                <div className="erw-star-tile" style={{ width: 20, height: 20 }}>
                  <div className="erw-star-fill" style={{ width: "100%" }} />

                  <div className="erw-star-icon">
                    <svg width="12.4" height="12.4" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                    </svg>
                  </div>
                </div>

                <div className="erw-star-tile" style={{ width: 20, height: 20 }}>
                  <div className="erw-star-fill" style={{ width: "80%" }} />

                  <div className="erw-star-icon">
                    <svg width="12.4" height="12.4" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                    </svg>
                  </div>
                </div>
              </div>

              <span className="erw-text-sm erw-semibold erw-tabular">4.8</span>
              <span className="erw-text-xs erw-muted">· Excellent · 20,921 reviews</span>
            </div>
          </div>
        </div>

        <div className="erw-verified-footer">
          <span className="erw-logo">
            <span className="erw-logo-mark" style={{ width: 14, height: 14, fontSize: 6.3 }} aria-hidden>E</span>
            <span className="erw-logo-wordmark" style={{ fontSize: 11.9 }}>EthioReview</span>
          </span>

          <span className="erw-link">See profile →</span>
        </div>
      </div>
    </div>
  </section>

  <section className="erw-docs-section" id="floating-badge">
    <header className="erw-docs-section-header">
      <h3 className="erw-docs-section-title">Floating badge</h3>
      <p className="erw-docs-section-desc">Sticky corner badge — drop it bottom-right on any page.</p>
      <code className="erw-docs-layout-key">layout="floating-badge"</code>
    </header>

    <div className="erw-docs-preview">
      <div className="erw-root erw-floating erw-card">
        <span className="erw-floating-score">4.8</span>

        <div className="erw-flex-col">
          <div className="erw-stars" style={{ gap: 2 }} aria-hidden>
            <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 14, height: 14 }}>
              <div className="erw-star-fill" style={{ width: "80%" }} />

              <div className="erw-star-icon">
                <svg width="8.68" height="8.68" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>
          </div>

          <span className="erw-text-xs erw-muted" style={{ marginTop: 2 }}>20,921 reviews</span>
        </div>

        <span className="erw-divider-v" style={{ height: 24 }} />

        <span className="erw-logo">
          <span className="erw-logo-mark" style={{ width: 14, height: 14, fontSize: 6.3 }} aria-hidden>E</span>
        </span>
      </div>
    </div>
  </section>

  <section className="erw-docs-section" id="dark-promo">
    <header className="erw-docs-section-header">
      <h3 className="erw-docs-section-title">Dark promo card</h3>
      <p className="erw-docs-section-desc">High-contrast promo card with CTA for marketing pages.</p>
      <code className="erw-docs-layout-key">layout="dark-promo"</code>
    </header>

    <div className="erw-docs-preview">
      <div className="erw-root erw-dark-promo">
        <div style={{ opacity: 0.9 }}>
          <span className="erw-logo">
            <span className="erw-logo-mark" style={{ width: 18, height: 18, fontSize: 8.1 }} aria-hidden>E</span>
            <span className="erw-logo-wordmark" style={{ fontSize: 15.3 }}>EthioReview</span>
          </span>
        </div>

        <div className="erw-dark-promo-score">4.8<span>/ 5</span></div>

        <div style={{ marginTop: 12 }}>
          <div className="erw-stars" style={{ gap: 4 }} aria-hidden>
            <div className="erw-star-tile" style={{ width: 26, height: 26 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="16.12" height="16.12" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 26, height: 26 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="16.12" height="16.12" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 26, height: 26 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="16.12" height="16.12" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 26, height: 26 }}>
              <div className="erw-star-fill" style={{ width: "100%" }} />

              <div className="erw-star-icon">
                <svg width="16.12" height="16.12" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>

            <div className="erw-star-tile" style={{ width: 26, height: 26 }}>
              <div className="erw-star-fill" style={{ width: "80%" }} />

              <div className="erw-star-icon">
                <svg width="16.12" height="16.12" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
                </svg>
              </div>
            </div>
          </div>
        </div>

        <p className="erw-dark-promo-text">
          Loved by <span className="erw-semibold" style={{ opacity: 1 }}>20,921+</span> verified customers across Ethiopia.
        </p>

        <span className="erw-cta erw-cta-full" style={{ marginTop: 20 }}>Read the reviews</span>
      </div>
    </div>
  </section>
</div>

[Back to widget components →](/integrations/widget/components)