AI Image Generator

import React from 'react';

export default function App() {
  return (
    <div className="landing">
      <header className="header">
        <nav className="nav">
          <div className="logo">Imagina AI</div>
          <div className="nav-links">
            <a href="#features">Features</a>
            <a href="#pricing">Pricing</a>
            <a href="#faq">FAQ</a>
            <button className="btn-primary">Get Started</button>
          </div>
        </nav>
        <div className="hero">
          <div className="hero-content">
            <h1>Generate Stunning Images with AI</h1>
            <p>Create unique, high-quality images from text descriptions in seconds. Powered by advanced machine learning.</p>
            <div className="cta-buttons">
              <button className="btn-primary">Start Free Trial</button>
              <button className="btn-secondary">Watch Demo</button>
            </div>
            <div className="hero-stats">
              <span>🌍 50K+ Users</span>
              <span>🖼️ 1M+ Images Created</span>
              <span>⭐ 4.9/5 Rating</span>
            </div>
          </div>
          <div className="hero-image">
            <img src="https://placehold.co/600x400/1a1a2e/e6e6fa?text=AI+Image+Generation" alt="AI Generated Art" />
          </div>
        </div>
      </header>

      <section id="features" className="features">
        <h2>Why Choose Imagina AI?</h2>
        <div className="feature-grid">
          <div className="feature-card">
            <div className="feature-icon">⚡</div>
            <h3>Lightning Fast</h3>
            <p>Generate images in under 2 seconds with our optimized engine.</p>
          </div>
          <div className="feature-card">
            <div className="feature-icon">🎨</div>
            <h3>Multiple Styles</h3>
            <p>From photorealistic to anime, choose from 50+ art styles.</p>
          </div>
          <div className="feature-card">
            <div className="feature-icon">🔒</div>
            <h3>Private & Secure</h3>
            <p>Your data and creations are encrypted and never shared.</p>
          </div>
          <div className="feature-card">
            <div className="feature-icon">📱</div>
            <h3>Mobile Friendly</h3>
            <p>Create anywhere, anytime with our responsive web app.</p>
          </div>
        </div>
      </section>

      <section id="pricing" className="pricing">
        <h2>Simple Pricing</h2>
        <div className="pricing-cards">
          <div className="pricing-card">
            <h3>Starter</h3>
            <div className="price">$9<span>/month</span></div>
            <ul>
              <li>100 images per month</li>
              <li>Standard resolution</li>
              <li>Basic styles</li>
              <li>Email support</li>
            </ul>
            <button className="btn-primary">Choose Plan</button>
          </div>
          <div className="pricing-card popular">
            <div className="badge">Most Popular</div>
            <h3>Pro</h3>
            <div className="price">$29<span>/month</span></div>
            <ul>
              <li>500 images per month</li>
              <li>HD resolution</li>
              <li>All styles</li>
              <li>Priority support</li>
            </ul>
            <button className="btn-primary">Choose Plan</button>
          </div>
          <div className="pricing-card">
            <h3>Enterprise</h3>
            <div className="price">$99<span>/month</span></div>
            <ul>
              <li>Unlimited images</li>
              <li>4K resolution</li>
              <li>Custom styles</li>
              <li>24/7 support</li>
            </ul>
            <button className="btn-primary">Choose Plan</button>
          </div>
        </div>
      </section>

      <section id="faq" className="faq">
        <h2>Frequently Asked Questions</h2>
        <div className="faq-list">
          <div className="faq-item">
            <h4>How does the AI generate images?</h4>
            <p>Our AI uses a diffusion model trained on millions of images to generate new content from text prompts.</p>
          </div>
          <div className="faq-item">
            <h4>Can I use the images commercially?</h4>
            <p>Yes, all images generated with a paid plan are royalty-free and can be used for commercial purposes.</p>
          </div>
          <div className="faq-item">
            <h4>What image formats are supported?</h4>
            <p>We support PNG, JPEG, and WebP downloads. Higher tiers include vector SVG.</p>
          </div>
          <div className="faq-item">
            <h4>Can I cancel my subscription anytime?</h4>
            <p>Absolutely. You can cancel anytime from your dashboard. No hidden fees.</p>
          </div>
        </div>
      </section>

      <footer className="footer">
        <p>&copy; 2023 Imagina AI. All rights reserved.</p>
        <div className="footer-links">
          <a href="#">Privacy Policy</a>
          <a href="#">Terms of Service</a>
        </div>
      </footer>
    </div>
  );
}