import React from 'react';

const LandingPage = () => {
  return (
    <div style={{
      fontFamily: 'Helvetica, Arial, sans-serif',
      color: '#333',
      maxWidth: '1200px',
      margin: '0 auto',
      padding: '20px',display: 'grid',
      gridTemplateColumns: 'repeat(12, 1fr)',
      gap: '20px',
    }}>
      <header style={{
        gridColumn:'span 12',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: '40px',
      }}>
        <h1 style={{ fontSize: '24px', fontWeight: 'bold' }}>Sitebrew.ai</h1>
        <nav>
          <a href="#" style={{ marginLeft: '20px', textDecoration: 'none', color: '#333' }}>About</a>
          <a href="#" style={{ marginLeft: '20px', textDecoration: 'none', color: '#333' }}>Features</a>
          <a href="#" style={{ marginLeft: '20px', textDecoration: 'none', color: '#333' }}>Contact</a>
        </nav>
      </header>

      <main style={{
        gridColumn: 'span 12',
        display: 'grid',
        gridTemplateColumns: 'repeat(12, 1fr)',
        gap: '20px',
      }}>
        <div style={{ gridColumn: 'span 8' }}>
          <h2 style={{
            fontSize: '64px',
            fontWeight: 'bold',
            lineHeight: '1.2',
            marginBottom: '20px',
          }}>
            Generate a site and share it with the world, in seconds
          </h2>
          <p style={{
            fontSize: '18px',
            lineHeight: '1.6',
            marginBottom: '40px',
          }}>
            Sitebrew.ai empowers you to create stunning websites effortlessly. 
            Our AI-powered platform turns your ideas into reality, allowing you to 
            design, build, and launch your site in mere seconds.
          </p>
          <button style={{
            backgroundColor: '#333',
            color: '#fff',
            border: 'none',
            padding: '15px 30px',
            fontSize: '18px',
            cursor: 'pointer',
          }}>
            Get Started
          </button>
        </div>
        <div style={{
          gridColumn: 'span 4',
          backgroundColor: '#f0f0f0',
          height: '400px',
        }}>
          {/* Placeholder for an image or illustration */}
        </div>
      </main>

      <footer style={{
        gridColumn: 'span 12',
        borderTop: '1px solid #333',
        marginTop: '40px',
        paddingTop: '20px',
        textAlign: 'center',
      }}>
        <p>&copy; 2024 Sitebrew.ai. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default LandingPage;