Stats And Reviews Hero

<!DOCTYPE html>
<title>My Example</title>

<style>
    :root {
        --srh-padding: 4rem 1.5rem;
        --srh-bg-color: #f8fafc;
        --srh-text-color: #334155;
        --srh-headline-color: #1e293b;
        --srh-accent-color: #f59e0b;
        --srh-cta-bg: #16a34a;
        --srh-cta-hover-bg: #15803d;
        --srh-cta-text-color: #ffffff;
        --srh-max-width: 1140px;
        --srh-rating: 90%; /* (4.5 / 5) * 100 */
    }
    .stats-reviews-hero {
        box-sizing: border-box;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        background-color: var(--srh-bg-color);
        padding: var(--srh-padding);
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .stats-reviews-hero * {
         box-sizing: border-box;
    }
    .srh-content {
        max-width: var(--srh-max-width);
    }
    .srh-content .title {
        color: var(--srh-headline-color);
        font-size: clamp(2rem, 5vw, 3rem);
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 1rem;
    }
    .srh-content .subtitle {
        color: var(--srh-text-color);
        line-height: 1.6;
        margin: 0 auto 2rem;
        max-width: 600px;
    }
    .srh-stats-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem 2rem;
        margin-bottom: 2rem;
    }
    .srh-stats-bar .stat-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
        color: var(--srh-text-color);
    }
    .srh-stats-bar .stat-item strong {
        color: var(--srh-headline-color);
    }
    .srh-stats-bar .stars-outer {
        position: relative;
        display: inline-flex;
    }
    .srh-stats-bar .stars-inner {
        position: absolute;
        top: 0;
        left: 0;
        white-space: nowrap;
        overflow: hidden;
        width: var(--srh-rating);
    }
    .srh-stats-bar .stars-outer svg, .srh-stats-bar .stars-inner svg {
        width: 1.1em;
        height: 1.1em;
    }
    .srh-stats-bar .stars-outer svg { color: #d1d5db; }
    .srh-stats-bar .stars-inner svg { color: var(--srh-accent-color); }
    
    .srh-content .cta {
        display: inline-block;
        background-color: var(--srh-cta-bg);
        color: var(--srh-cta-text-color);
        padding: 0.9rem 2rem;
        border-radius: 8px;
        font-size: 1.05rem;
        font-weight: 600;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }
    .srh-content .cta:hover {
        background-color: var(--srh-cta-hover-bg);
    }
</style>

<section class="stats-reviews-hero">
    <div class="srh-content">
        <h1 class="title">The Complete Guide to Digital Marketing</h1>
        <p class="subtitle">Learn SEO, content marketing, social media, and more in our best-selling course, trusted by thousands of students.</p>

<div class="srh-stats-bar">
            <div class="stat-item">
                <div class="stars-outer">
                    <div>
                        <svg fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                        <svg fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                        <svg fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                        <svg fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                        <svg fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                    </div>
                    <div class="stars-inner">
                        <svg fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                        <svg fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                        <svg fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                        <svg fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                        <svg fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                    </div>
                </div>
                <span><strong>4.5</strong> (1,250 reviews)</span>
            </div>
            <div class="stat-item">
                <span><strong>25,000+</strong> students enrolled</span>
            </div>
        </div>

<a href="#" role="button" class="cta">View Course Details</a>
    </div>
</section>