AI-Powered Product Hero Template

Showcase your AI product with a hero section that provides an AI prompt.

This template provides a ready-made user interface for an AI tool, including an input field for a prompt, a generate button, and a designated output area for the AI's response.

A hero section with a futuristic theme for an AI product, featuring a prompt input field.

Get Source Code Preview

About the AI-Powered Product Hero

This hero section provides an interactive demonstration of how an AI product might work. It uses placeholder JavaScript that can easily be replaced with your own call to an AI API endpoint (like OpenAI, Google Gemini, etc.). The design is modern and tech-focused, perfect for any AI startup, SaaS tool, or generative platform.

Features

"AI-Ready" UI: Includes a fully-styled prompt input, a generate button, and an output display area.
Interactive Demo: A self-contained JavaScript snippet simulates an AI response to show the interface in action. This can easily be replaced with your own fetch() call to an actual AI API endpoint. The entire user interface for sending a prompt and displaying a result is already built.
Futuristic Aesthetic: Uses a dark theme with glowing accents and background patterns to visually communicate the "AI" theme.
Developer-Friendly: Designed for easy integration with a real AI backend.

Code Breakdown

This component consists of CSS for the head, HTML for the body, and a JavaScript block to be placed just before the closing tag.

The layout is a single centered column, focusing attention on the interaction. The form contains the main prompt-input and generate-button. The ai-output-area div is initially hidden and will be shown by the JavaScript when a response is "generated".

The main functionality is provided by JavaScript. The included script is a placeholder demonstration. It listens for the form submission, prevents the default page reload, and then displays a pre-written, "canned" response in the output area after a short delay to simulate processing. To make this functional, a developer would replace the placeholder logic inside the form.addEventListener function with their own fetch() call to an actual AI API endpoint. The front-end user interface is already built to handle the loading states and display the result.

Code

<style>
    :root {
        --ai-padding: 4rem 1.5rem;
        --ai-bg-color: #0c0a09;
        --ai-grid-color: rgba(120, 113, 108, 0.1);
        --ai-text-color: #a8a29e;
        --ai-headline-color: #fafaf9;
        --ai-accent-color: #a78bfa;
        --ai-input-bg: #1c1917;
        --ai-input-border: #44403c;
        --ai-input-focus-border: var(--ai-accent-color);
        --ai-cta-bg: linear-gradient(90deg, #a78bfa, #7c3aed);
        --ai-cta-hover-bg: linear-gradient(90deg, #c4b5fd, #8b5cf6);
        --ai-cta-text-color: #ffffff;
        --ai-max-width: 800px;
    }
    .ai-powered-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(--ai-bg-color);
        background-image: linear-gradient(var(--ai-grid-color) 1px, transparent 1px), linear-gradient(to right, var(--ai-grid-color) 1px, var(--ai-bg-color) 1px);
        background-size: 40px 40px;
        padding: var(--ai-padding);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .ai-powered-hero * {
         box-sizing: border-box;
    }
    .aph-content {
        max-width: var(--ai-max-width);
    }
    .aph-content .title {
        color: var(--ai-headline-color);
        font-size: clamp(2.25rem, 5vw, 3.25rem);
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 1rem;
    }
    .aph-content .title .highlight {
        color: var(--ai-accent-color);
    }
    .aph-content .subtitle {
        color: var(--ai-text-color);
        margin: 0 auto 2.5rem;
        max-width: 600px;
        line-height: 1.6;
    }
    .ai-prompt-form {
        display: flex;
        gap: 0.75rem;
    }
    .ai-prompt-form .prompt-input {
        flex-grow: 1;
        background-color: var(--ai-input-bg);
        border: 1px solid var(--ai-input-border);
        color: var(--ai-headline-color);
        padding: 0.9rem 1.25rem;
        font-size: 1rem;
        border-radius: 8px;
    }
    .ai-prompt-form .prompt-input:focus {
        outline: none;
        border-color: var(--ai-input-focus-border);
        box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.3);
    }
    .ai-prompt-form .generate-button {
        background-image: var(--ai-cta-bg);
        color: var(--ai-cta-text-color);
        border: none;
        padding: 0.9rem 1.5rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .ai-prompt-form .generate-button:hover {
        background-image: var(--ai-cta-hover-bg);
        box-shadow: 0 0 20px rgba(167, 139, 250, 0.5);
    }
     .ai-prompt-form .generate-button.loading {
        cursor: not-allowed;
        opacity: 0.7;
    }
    .ai-output-area {
        margin-top: 2rem;
        padding: 1.5rem;
        background-color: var(--ai-input-bg);
        border: 1px solid var(--ai-input-border);
        border-radius: 8px;
        text-align: left;
        color: #d4d4d8;
        line-height: 1.6;
        display: none; /* Hidden by default */
    }
    .ai-output-area.active {
        display: block;
    }
</style>

<section class="ai-powered-hero">
    <div class="aph-content">
        <h1 class="title">Generate Brilliant Copy with <span class="highlight">NeuronWriter</span></h1>
        <p class="subtitle">Tell our AI what you need and get polished, ready-to-use content in seconds.</p>

<form class="ai-prompt-form" id="aiPromptForm">
            <label for="ai-prompt-input" class="sr-only">Your Prompt</label>
            <input type="text" id="ai-prompt-input" class="prompt-input" placeholder="e.g., A catchy slogan for a coffee shop" required>
            <button type="submit" class="generate-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg>
                <span>Generate</span>
            </button>
        </form>

</div>
</section>

<script>
(function() {
    const aiForm = document.getElementById('aiPromptForm');
    if (!aiForm) return;

const generateButton = aiForm.querySelector('.generate-button');
    const outputArea = document.getElementById('aiOutputArea');

aiForm.addEventListener('submit', function(e) {
        e.preventDefault(); // Prevent actual form submission

// -- DEVELOPER INSTRUCTION --
        // To make this functional, replace this placeholder logic 
        // with a fetch() call to your AI API endpoint.

// --- Start of Placeholder Logic ---
        const promptInput = document.getElementById('ai-prompt-input');
        
        // 1. Simulate a loading state
        generateButton.classList.add('loading');
        generateButton.disabled = true;
        generateButton.querySelector('span').textContent = 'Generating...';
        outputArea.classList.remove('active');

// 2. Simulate a delay for AI processing
        setTimeout(() => {
            // This is the canned response.
            // A real API call would populate this dynamically.
            const cannedResponse = "Of course! Here are a few catchy slogans for a coffee shop: <br><br>1. <strong>Perk Up Your Day.</strong><br>2. <strong>Life Begins After Coffee.</strong><br>3. <strong>Your Daily Grind, Perfected.</strong>";
            
            outputArea.innerHTML = cannedResponse;
            outputArea.classList.add('active');

// 3. Reset the button and form
            generateButton.classList.remove('loading');
            generateButton.disabled = false;
            generateButton.querySelector('span').textContent = 'Generate';
            // promptInput.value = ''; // Optional: clear the input after generation
        }, 1500);
        // --- End of Placeholder Logic ---
    });

})();
</script>

View Output