Ai Powered Product Hero

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

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