3D Mockup Hero Template

Elevate your product's presentation with a sleek hero section featuring a polished 3D mockup.

This design gives your software or application a tangible, high-quality feel, combining compelling copy with a dynamic product visual.

Screenshot of a hero section showcasing a product with a 3D mockup of its interface.

Get Source Code Preview

About the 3D Mockup Hero

Perfect for SaaS platforms, mobile apps, and modern tech startups, this hero section uses a 3D or isometric product mockup to add depth and sophistication. It visually lifts your product off the page, making it look more dynamic and professionally designed than a standard flat screenshot.

Features

Modern & Premium Aesthetic: The 3D visual immediately signals a high-quality, modern product.
Clear Value Proposition: A clean two-column layout effectively communicates what your product does alongside how it looks.
Engaging Visuals: Includes a subtle hover effect on the mockup to add a touch of interactivity.
Responsive Design: The layout fluidly adapts, stacking the text and mockup on mobile devices for a great user experience on any screen.

Code Breakdown

The 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.

This hero's structure is created with Flexbox. A container .d3-mockup-hero-container uses display: flex and align-items: center to manage its two children: a content div and an image div. On wider screens, these two children take up equal space to form the columns. On smaller screens, the flex-direction defaults to column, stacking them vertically.

The "3D" effect is achieved simply by using a high-quality 2D image (like a PNG with a transparent background) of a product mockup. This makes it extremely easy for users to swap the placeholder with their own product visuals. The provided CSS custom properties allow for simple theming of colors, fonts, and spacing.

Code

<style>
    :root {
        --d3mh-padding: 3rem 1.5rem;
        --d3mh-bg-color: #f8f9fa;
        --d3mh-text-color: #343a40;
        --d3mh-headline-color: #1d2d35;
        --d3mh-cta-bg: #5e42a6;
        --d3mh-cta-hover-bg: #4a3486;
        --d3mh-cta-text-color: #ffffff;
        --d3mh-gap: 2rem;
        --d3mh-max-width: 1140px;
    }

.d3-mockup-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(--d3mh-bg-color);
        color: var(--d3mh-text-color);
        padding: var(--d3mh-padding);
        display: flex;
        justify-content: center;
    }
    .d3-mockup-hero * {
         box-sizing: border-box;
    }
    .d3-mockup-hero-container {
        width: 100%;
        max-width: var(--d3mh-max-width);
        display: flex;
        flex-direction: column;
        gap: var(--d3mh-gap);
    }
    .d3-mockup-hero-content {
        text-align: center;
        order: 2; /* Content appears after image on mobile */
    }
    .d3-mockup-hero-title {
        margin: 0 0 1rem 0;
        font-size: clamp(2.5rem, 6vw, 3.5rem);
        color: var(--d3mh-headline-color);
        font-weight: 700;
        line-height: 1.2;
    }
    .d3-mockup-hero-description {
        margin: 0 auto 2rem auto;
        font-size: 1.1rem;
        line-height: 1.6;
        max-width: 500px;
    }
    .d3-mockup-hero-cta {
        display: inline-block;
        background-color: var(--d3mh-cta-bg);
        color: var(--d3mh-cta-text-color);
        padding: 0.9rem 2.2rem;
        border-radius: 6px;
        border: none;
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .d3-mockup-hero-cta:hover {
        background-color: var(--d3mh-cta-hover-bg);
    }
    .d3-mockup-hero-image-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        order: 1; /* Image appears first on mobile */
        perspective: 1000px; /* For potential 3D effects on image */
    }
    .d3-mockup-hero-image {
        width: 100%;
        height: auto;
        max-width: 500px;
        transition: transform 0.4s ease;
    }
    .d3-mockup-hero-image:hover {
        transform: scale(1.05) rotateY(-5deg) rotateX(2deg);
    }
    
    @media (min-width: 992px) {
        .d3-mockup-hero-container {
            flex-direction: row;
            align-items: center;
            gap: calc(var(--d3mh-gap) * 2);
        }
        .d3-mockup-hero-content {
            flex: 1;
            text-align: left;
            order: 1; /* Content on the left on desktop */
        }
        .d3-mockup-hero-description {
            margin-left: 0;
            margin-right: 0;
        }
        .d3-mockup-hero-image-wrapper {
            flex: 1;
            order: 2; /* Image on the right on desktop */
        }
    }
</style>

<section class="d3-mockup-hero">
    <div class="d3-mockup-hero-container">
    
        <div class="d3-mockup-hero-content">
            <h1 class="d3-mockup-hero-title">A New Dimension of Project Management</h1>
            <p class="d3-mockup-hero-description">
                Quantify brings all your team's tasks, timelines, and communications into one beautifully designed space. Stop switching tabs and start shipping faster.
            </p>
            <a href="#" role="button" class="d3-mockup-hero-cta">See it in Action</a>
        </div>
        
        <div class="d3-mockup-hero-image-wrapper">
            
            <img src="https://placehold.co/550x450/A3E4D7/1ABC9C?text=Product+Mockup" alt="A stylized 3D mockup of the Quantify app's dashboard, showing charts and task lists." class="d3-mockup-hero-image">
        </div>

</div>
</section>

View Output