fix this now

[graemefoster]

Please review and improve the following React component code from App.tsx:

import React from 'react';

export const App: React.FC = () => {
  return (
    <main style={{
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      background: 'linear-gradient(135deg, #e0e7ff 0%, #f0fdfa 100%)',
      fontFamily: 'Segoe UI, Arial, sans-serif'
    }}>
      <div style={{
        background: '#fff',
        borderRadius: '16px',
        boxShadow: '0 4px 24px rgba(0,0,0,0.08)',
        padding: '48px 32px',
        textAlign: 'center',
        maxWidth: '400px'
      }}>
        <h1 style={{ color: '#2563eb', marginBottom: '16px' }}>Welcome to Your React App!</h1>
        <p style={{ color: '#334155', fontSize: '1.1rem', marginBottom: '32px' }}>
          This is a demo project powered by GitHub Copilot.<br />
          Start building something amazing.
        </p>
        <img
          src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
          alt="GitHub Logo"
          style={{ width: 64, marginBottom: 16 }}
        />
        <div style={{ color: '#64748b', fontSize: '0.95rem' }}>
          Edit <code>src/App.tsx</code> and save to reload.
        </div>
      </div>
    </main>
  );
};

Suggestions for improvement are welcome.