Full Height Scroll Prompt Hero

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

<style>
    :root {
        --fhh-padding: 3rem 1.5rem;
        --fhh-bg-color: #0f172a; /* Dark Slate */
        --fhh-text-color: #e2e8f0;
        --fhh-headline-color: #ffffff;
        --fhh-prompt-color: #94a3b8;
        --fhh-max-width: 900px;
    }
    .full-height-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(--fhh-bg-color);
        min-height: 100vh; /* This makes the hero full height */
        padding: var(--fhh-padding);
        width: 100%;
        position: relative; /* Needed for absolute positioning of the prompt */

display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .full-height-hero * {
         box-sizing: border-box;
    }
    .fhh-content {
        max-width: var(--fhh-max-width);
        color: var(--fhh-text-color);
    }
    .fhh-content .title {
        color: var(--fhh-headline-color);
        margin: 0 0 1rem 0;
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        font-weight: 800;
        line-height: 1.1;
    }
    .fhh-content .subtitle {
        font-size: 1.25rem;
        line-height: 1.6;
    }
    .scroll-prompt {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        color: var(--fhh-prompt-color);
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        transition: color 0.3s ease;
    }
    .scroll-prompt:hover {
        color: #fff;
    }
    .scroll-prompt .prompt-text {
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }
    .scroll-prompt .prompt-arrow {
        width: 1.5rem;
        height: 1.5rem;
        animation: bounce 2s infinite;
    }
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-10px);
        }
        60% {
            transform: translateY(-5px);
        }
    }
    
    /* Extra content section for demonstrating the scroll effect */
    .scroll-demo-content-fhh {
        padding: 4rem 1.5rem;
        background-color: #fff;
        color: #111827;
    }
    .scroll-demo-content-fhh p {
        max-width: 700px;
        margin: 0 auto 1rem;
        line-height: 1.6;
    }
</style>

<section class="full-height-hero">
    <div class="fhh-content">
        <h1 class="title">The Story Begins Here</h1>
        <p class="subtitle">A new chapter in digital innovation is about to unfold.</p>
    </div>
    <a href="#next-section" class="scroll-prompt">
        <span class="prompt-text">Scroll Down</span>
        <svg class="prompt-arrow" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 5V19M12 19L19 12M12 19L5 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </a>
</section>

<section id="next-section" class="scroll-demo-content-fhh">
    <p>This is the next section of the page. The scroll prompt in the hero section provides a clear visual and functional link to bring the user here.</p>
</section>