<section class="uk-hero uk-hero-centered">
    <span class="uk-hero-pill">✨ New · v2.0 released</span>
    <h1 class="uk-hero-title">Build beautiful UI faster</h1>
    <p class="uk-hero-sub">Production-ready components built with Bootstrap 5.</p>
    <div class="uk-hero-actions">
        <a href="#" class="uk-hero-btn uk-hero-btn-primary">Get Started</a>
        <a href="#" class="uk-hero-btn uk-hero-btn-ghost">Learn More</a>
    </div>
</section>

<style>
    .uk-hero-centered {
        text-align: center;
        padding: 4rem 2rem;
        background: linear-gradient(180deg, #eef2f8 0%, #f9fafc 100%);
    }
    .uk-hero-pill {
        display: inline-block;
        background: #fff;
        border: 1px solid #e2e8f0;
        color: #1e3a8a;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 999px;
        margin-bottom: 1.25rem;
    }
    .uk-hero-title {
        font-size: 2.75rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: #0b1b2f;
        margin: 0 0 0.75rem;
    }
    .uk-hero-sub {
        max-width: 560px;
        margin: 0 auto 1.75rem;
        color: #64748b;
        font-size: 1.05rem;
        line-height: 1.6;
    }
    .uk-hero-actions {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        flex-wrap: wrap;
    }
    .uk-hero-btn {
        padding: 0.7rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 700;
        font-size: 0.9rem;
        text-decoration: none;
        transition: all 0.15s;
    }
    .uk-hero-btn-primary {
        background: #1e3a8a;
        color: #fff;
    }
    .uk-hero-btn-primary:hover { background: #0f2a5c; color: #fff; }
    .uk-hero-btn-ghost {
        background: transparent;
        border: 1.5px solid #cbd5e1;
        color: #0b1b2f;
    }
    .uk-hero-btn-ghost:hover { border-color: #1e3a8a; color: #1e3a8a; }
</style>

<section class="uk-hero uk-hero-split">
    <div class="uk-hero-split-text">
        <h1 class="uk-hero-title">Ship products, not pixel-perfect debates.</h1>
        <p class="uk-hero-sub">Everything you need to launch.</p>
        <div class="uk-hero-actions">
            <a href="#" class="uk-hero-btn uk-hero-btn-primary">Start Free Trial</a>
            <a href="#" class="uk-hero-btn uk-hero-btn-ghost">Watch Demo</a>
        </div>
    </div>
    <div class="uk-hero-split-visual">
        <div class="uk-hero-mockup">...</div>
    </div>
</section>

<style>
    .uk-hero-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: center;
        padding: 3.5rem 2.5rem;
        background: #f9fafc;
    }
    @media (max-width: 768px) {
        .uk-hero-split { grid-template-columns: 1fr; padding: 2.5rem 1.5rem; }
    }
</style>

<section class="uk-hero uk-hero-gradient">
    <div class="uk-hero-glow"></div>
    <h1 class="uk-hero-title">Design at the speed of thought</h1>
    <p class="uk-hero-sub">A complete toolkit for product teams that move fast.</p>
    <div class="uk-hero-actions">
        <a href="#" class="uk-hero-btn" style="background:#fff;color:#1e3a8a;">Get Started</a>
        <a href="#" class="uk-hero-btn" style="background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.5);">View Docs</a>
    </div>
</section>

<style>
    .uk-hero-gradient {
        position: relative;
        text-align: center;
        padding: 4.5rem 2rem;
        background: linear-gradient(135deg, #1e3a8a 0%, #6366f1 60%, #a855f7 100%);
        color: #fff;
        overflow: hidden;
    }
    .uk-hero-glow {
        position: absolute;
        top: -100px; right: -100px;
        width: 400px; height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
        pointer-events: none;
    }
</style>

<section class="uk-hero uk-hero-image"
         style="background-image:linear-gradient(rgba(11,27,47,0.65),rgba(11,27,47,0.75)),url('hero.jpg');">
    <h1 class="uk-hero-title">Built for modern teams</h1>
    <p class="uk-hero-sub">Collaborate, ship, and grow with confidence.</p>
    <div class="uk-hero-actions">
        <a href="#" class="uk-hero-btn uk-hero-btn-primary">Start Free</a>
    </div>
</section>

<style>
    .uk-hero-image {
        text-align: center;
        padding: 5rem 2rem;
        color: #fff;
        background-size: cover;
        background-position: center;
        border-radius: 1rem;
    }
</style>

<section class="uk-hero uk-hero-minimal">
    <h1 class="uk-hero-title">Simple. Fast. Beautiful.</h1>
    <p class="uk-hero-sub">No fluff. Just the essentials.</p>
    <div class="uk-hero-actions">
        <a href="#" class="uk-hero-btn uk-hero-btn-primary">Try It Free</a>
    </div>
</section>

<style>
    .uk-hero-minimal {
        text-align: center;
        padding: 4.5rem 2rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
    }
</style>

<section class="uk-hero uk-hero-app">
    <div class="uk-hero-app-text">
        <h1 class="uk-hero-title">Your new favorite app</h1>
        <p class="uk-hero-sub">Available on iOS, Android, and the web.</p>
        <div class="uk-hero-stores">
            <a href="#" class="uk-hero-store">
                <i class="fab fa-apple"></i>
                <div>
                    <div class="uk-hero-store-top">Download on the</div>
                    <div class="uk-hero-store-bottom">App Store</div>
                </div>
            </a>
            <a href="#" class="uk-hero-store">
                <i class="fab fa-google-play"></i>
                <div>
                    <div class="uk-hero-store-top">Get it on</div>
                    <div class="uk-hero-store-bottom">Google Play</div>
                </div>
            </a>
        </div>
    </div>
    <div class="uk-hero-app-visual">
        <div class="uk-hero-phone"><div class="uk-hero-phone-notch"></div></div>
    </div>
</section>

<style>
    .uk-hero-app {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
        padding: 3rem 2.5rem;
        background: linear-gradient(180deg, #eef2f8 0%, #f9fafc 100%);
    }
    @media (max-width: 768px) {
        .uk-hero-app { grid-template-columns: 1fr; }
    }
    .uk-hero-stores { display: flex; gap: 0.75rem; flex-wrap: wrap; }
    .uk-hero-store {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.6rem 1rem;
        background: #0b1b2f;
        color: #fff;
        border-radius: 0.65rem;
        text-decoration: none;
        transition: transform 0.15s;
    }
    .uk-hero-store:hover { transform: translateY(-2px); color: #fff; }
    .uk-hero-store i { font-size: 1.5rem; }
    .uk-hero-store-top { font-size: 0.65rem; opacity: 0.7; }
    .uk-hero-store-bottom { font-size: 0.9rem; font-weight: 700; }
    .uk-hero-phone {
        width: 200px; height: 380px;
        background: #0b1b2f;
        border-radius: 2rem;
        margin: 0 auto;
        padding: 12px;
        position: relative;
        box-shadow: 0 30px 60px rgba(11, 27, 47, 0.25);
    }
    .uk-hero-phone::after {
        content: '';
        position: absolute;
        inset: 12px;
        background: linear-gradient(135deg, #6366f1, #a855f7);
        border-radius: 1.5rem;
    }
    .uk-hero-phone-notch {
        position: absolute;
        top: 18px; left: 50%;
        transform: translateX(-50%);
        width: 70px; height: 18px;
        background: #0b1b2f;
        border-radius: 999px;
        z-index: 2;
    }
</style>