Problem-Solution Hero Template

Hook visitors instantly by speaking directly to their challenges with this problem-solution hero layout.

This marketing-driven approach grabs attention by highlighting a common pain point in the headline, then immediately positioning your service as the ideal solution.

Screenshot of a hero section with a headline stating a problem and text offering a solution.

Get Source Code Preview

About the Problem-Solution Hero

This hero section is built on a classic copywriting formula that works exceptionally well for SaaS, tech, and service-based businesses. By first agitating a known problem, it makes the visitor feel understood. Then, by presenting the solution, it frames the product not just as a tool, but as a resolution to their frustration, which is a powerful motivator for conversion.

Features

Conversion-Focused Copy: Structured specifically to lead with a pain point and follow with a solution-oriented call to action.
Minimalist Design: A clean, text-centric layout that puts the focus entirely on the compelling message.
No Images Needed: This lightweight design is effective without any imagery, ensuring fast load times.
Fully Responsive: The centered text and clear hierarchy look great on any device.

Code Breakdown

This component is divided into CSS and HTML blocks. The CSS styling belongs in your document's head section, while the HTML structure goes in the body.

The layout uses Flexbox to center the content within the .problem-solution-hero section. A key design element is the visual distinction between the "Problem" headline and the "Solution" subheading. This is achieved by using different font sizes, weights, and colors. In the example, the problem statement in the h1 is large and bold, while the solution paragraph is calmer, visually leading the user from a state of agitation to one of resolution. CSS custom properties at the top of the CSS file make it easy to adjust all colors and font styles to match your brand.

Code

<style>
    :root {
        --psh-padding: 4rem 1.5rem;
        --psh-min-height: 450px;
        --psh-bg-color: #ffffff;
        --psh-text-color: #495057;
        --psh-headline-color: #212529;
        --psh-cta-bg: #28a745;
        --psh-cta-hover-bg: #218838;
        --psh-cta-text-color: #ffffff;
        --psh-max-width: 800px;
    }

.problem-solution-hero {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
        width: 100%;
        background-color: var(--psh-bg-color);
        color: var(--psh-text-color);
        padding: var(--psh-padding);
        min-height: var(--psh-min-height);

display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .problem-solution-hero * {
         box-sizing: border-box;
    }
    .problem-solution-hero-content {
        max-width: var(--psh-max-width);
    }
    .problem-solution-hero-problem {
        margin: 0 0 1rem 0;
        font-size: clamp(2rem, 6vw, 3.25rem);
        color: var(--psh-headline-color);
        font-weight: 700;
        line-height: 1.25;
    }
    .problem-solution-hero-solution {
        margin: 0 0 2.5rem 0;
        font-size: clamp(1.1rem, 3vw, 1.25rem);
        line-height: 1.6;
    }
    .problem-solution-hero-cta {
        display: inline-block;
        background-color: var(--psh-cta-bg);
        color: var(--psh-cta-text-color);
        padding: 1rem 2.5rem;
        border: none;
        border-radius: 6px;
        font-size: 1.1rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .problem-solution-hero-cta:hover {
        background-color: var(--psh-cta-hover-bg);
    }
</style>

<section class="problem-solution-hero">
    <div class="problem-solution-hero-content">
        <h1 class="problem-solution-hero-problem">Tired of disorganized customer feedback data?</h1>
        <p class="problem-solution-hero-solution">
            Our platform consolidates feedback from email, social media, and surveys into one intelligent dashboard, so you can stop chasing tickets and start building what your customers actually want.
        </p>
        <a href="#" role="button" class="problem-solution-hero-cta">See How it Works</a>
    </div>
</section>

View Output