System: You are an expert in Web development, including CSS, JavaScript, React, Tailwind, Node.JS and Hugo / Markdown. You are expert at selecting and choosing the best tools, and doing your utmost to avoid unnecessary duplication and complexity.
When making a suggestion, you break things down in to discrete changes, and suggest a small test after each stage to make sure things are on the right track.
Produce code to illustrate examples, or when directed to in the conversation. If you can answer without code, that is preferred, and you will be asked to elaborate if it is required.
Before writing or suggesting code, you conduct a deep-dive review of the existing code and describe how it works between <CODE_REVIEW> tags. Once you have completed the review, you produce a careful plan for the change in <PLANNING> tags. Pay attention to variable names and string literals - when reproducing code make sure that these do not change unless necessary or directed. If naming something by convention surround in double colons and in ::UPPERCASE::.
Finally, you produce correct outputs that provide the right balance between solving the immediate problem and remaining generic and flexible.
You always ask for clarifications if anything is unclear or ambiguous. You stop to discuss trade-offs and implementation options if there are choices to make.
It is important that you follow this approach, and do your best to teach your interlocutor about making effective decisions. You avoid apologising unnecessarily, and review the conversation to never repeat earlier mistakes.
You are keenly aware of security, and make sure at every step that we don't do anything that could compromise data or introduce new vulnerabilities. Whenever there is a potential security risk (e.g. input handling, authentication management) you will do an additional review, showing your reasoning between <SECURITY_REVIEW> tags.
Finally, it is important that everything produced is operationally sound. We consider how to host, manage, monitor and maintain our solutions. You consider operational concerns at every step, and highlight them where they are relevant.
Bonus: if you can use 3djs or WebGL anywhere need a render or dashboard, use it.  

Assume the server is already running at `0.0.0.0:7942`, generate html code that connects to the server.  

Final html code should be included in <INDEX_HTML_CODE></INDEX_HTML_CODE> block.

User: Generate "index.html" that connect to the server. The "index.html" design:
```

# Frontend Design

# Overview
The frontend will be a single HTML page enhanced with CSS for styling and images for illustration. It will detail the product, its benefits, pricing, and include a contact form.

# Structure

1. **HTML Structure**
   - Header section for the creative title and logo.
   - Main content with blocks for product description, problems solved, advantages, pricing, and a contact form.
   - Footer with company information and social media links.

2. **CSS Styles**
   - Use an external or embedded stylesheet to ensure the page is visually appealing.
   - Responsive design to cater to mobile and desktop screens.

3. **JavaScript (optional)**
   - For form validation and interactivity.

# Pseudocode

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SecureGuard: Your Complete Vulnerability Management Solution</title>
    <link rel="stylesheet" href="static/styles.css">
</head>
<body>
    <header>
        <h1>SecureGuard</h1>
        <p>Your Complete Vulnerability Management Solution</p>
    </header>
    
    <main>
        <section id="product">
            <h2>About the Product</h2>
            <p>SecureGuard is a comprehensive tool designed to identify and manage vulnerabilities across your network, ensuring your infrastructure remains secure.</p>
            <img src="static/product-image.jpg" alt="Product image">
        </section>
        
        <section id="problems">
            <h2>Problems We Solve</h2>
            <p>Eliminate security blind spots with real-time monitoring and detailed reporting, allowing proactive measures against potential threats.</p>
        </section>
        
        <section id="advantages">
            <h2>Key Advantages</h2>
            <ul>
                <li>Real-time alerts</li>
                <li>User-friendly interface</li>
                <li>Comprehensive reporting</li>
            </ul>
        </section>
        
        <section id="pricing">
            <h2>Pricing</h2>
            <p>Starting at just <strong>$29.99</strong> per month</p>
            <p>Contact us for enterprise solutions!</p>
        </section>
        
        <section id="contact">
            <h2>Contact Us</h2>
            <form id="contact-form" action="/contact" method="POST">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                
                <label for="message">Message:</label>
                <textarea id="message" name="message" required></textarea>
                
                <button type="submit">Submit</button>
            </form>
        </section>
    </main>
    
    <footer>
        <p>© 2023 SecureGuard. All rights reserved.</p>
        <div>
            <a href="#">Twitter</a>
            <a href="#">LinkedIn</a>
            <a href="#">Facebook</a>
        </div>
    </footer>

    <script>
        // Optional: JavaScript to handle form submission and validation
        document.getElementById('contact-form').onsubmit = function(event) {
            // Perform validation or async requests (e.g., AJAX)
            alert('Form submitted!');
        };
    </script>
</body>
</html>
```

```

Assistant: