<section class="hero-fullheight">
    <div class="container h-100">
        <div class="row h-100 align-items-center justify-content-center">
            <div class="col-lg-8 text-center">
                <h1 class="display-3 fw-bold mb-4">Full-Height Hero Section</h1>
                <p class="lead mb-5">Capture your visitor's attention immediately with a full-screen hero section that makes a bold statement.</p>
                <div class="d-flex justify-content-center gap-3">
                    <a href="#" class="btn btn-primary btn-lg px-4 py-2">Get Started</a>
                    <a href="#" class="btn btn-outline-secondary btn-lg px-4 py-2">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.hero-fullheight {
    height: 100vh;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
}
.hero-fullheight h1, .hero-fullheight p {
    color: #212529;
}
.hero-fullheight .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
</style>

<section class="hero-fullheight-img">
    <div class="container h-100">
        <div class="row h-100 align-items-center justify-content-center">
            <div class="col-lg-8 text-center">
                <h1 class="display-3 fw-bold mb-4">Stunning Background Image</h1>
                <p class="lead mb-5">A full-screen hero with a background image makes a powerful visual impact and sets the mood for your site.</p>
                <div class="d-flex justify-content-center gap-3">
                    <a href="#" class="btn btn-outline-light btn-lg px-4 py-2">Primary Action</a>
                    <a href="#" class="btn btn-light btn-lg px-4 py-2">Secondary Action</a>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.hero-fullheight-img {
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('your-background-image.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    display: flex;
    align-items: center;
}
.hero-fullheight-img .btn-outline-light {
    color: #ffffff;
    border-color: #ffffff;
}
.hero-fullheight-img .btn-light {
    color: #212529;
    background-color: #ffffff;
    border-color: #ffffff;
}
</style>

<section class="hero-basic">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <h1 class="display-4 fw-bold">Welcome to our platform</h1>
                <p class="lead my-4">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                <a href="#" class="btn btn-primary btn-lg">Get Started</a>
            </div>
        </div>
    </div>
</section>

<style>
.hero-basic {
    padding: 5rem 0;
    background-color: #f8f9fa;
}
.hero-basic h1, .hero-basic p {
    color: #212529;
}
.hero-basic .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
</style>

<section class="hero-img-bg">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <h1 class="display-4 fw-bold">Capture Attention with Images</h1>
                <p class="lead my-4">A hero section with a background image creates visual interest and helps set the mood for your website.</p>
                <div class="d-flex gap-3">
                    <a href="#" class="btn btn-primary btn-lg">Primary Action</a>
                    <a href="#" class="btn btn-outline-light btn-lg">Secondary Action</a>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.hero-img-bg {
    padding: 5rem 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('your-image-url.jpg');
    background-size: cover;
    background-position: center;
    color: white;
}
.hero-img-bg .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
</style>

<section class="hero-centered">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h1 class="display-4 fw-bold">Centered Hero Layout</h1>
                <p class="lead my-4">A centered hero design focuses attention on your core message and creates a balanced visual appearance.</p>
                <div class="d-flex justify-content-center gap-3">
                    <a href="#" class="btn btn-primary btn-lg">Get Started</a>
                    <a href="#" class="btn btn-outline-secondary btn-lg">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.hero-centered {
    padding: 5rem 0;
    text-align: center;
    background-color: #f8f9fa;
}
.hero-centered h1, .hero-centered p {
    color: #212529;
}
.hero-centered .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
</style>