import React from 'react';import { User, Mail, GitHub, Linkedin } from 'lucide-react';const App = () => {  return (    <div className=\"min-h-screen flex flex-col bg-gray-100\">      <header className=\"bg-blue-600 text-white p-4\">        <h1 className=\"text-2xl font-bold\">John Doe</h1>        <p className=\"text-sm\">Web Developer</p>      </header>      <main className=\"flex-grow container mx-auto px-4 py-8\">        <section className=\"mb-8\">          <h2 className=\"text-xl font-semibold mb-4\">About Me</h2>          <p>            Hello! I'm John, a passionate web developer with experience in            React, Node.js, and database management. I love creating efficient            and user-friendly web applications.          </p>        </section>        <section className=\"mb-8\">          <h2 className=\"text-xl font-semibold mb-4\">Skills</h2>          <ul className=\"list-disc list-inside\">            <li>React</li>            <li>JavaScript</li>            <li>HTML & CSS</li>            <li>Node.js</li>            <li>SQL</li>          </ul>        </section>        <section>          <h2 className=\"text-xl font-semibold mb-4\">Contact</h2>          <div className=\"flex flex-col space-y-2\">            <a href=\"mailto:john@example.com\" className=\"flex items-center\">              <Mail className=\"mr-2\" size={18} />              john@example.com            </a>            <a href=\"https://github.com/johndoe\" className=\"flex items-center\">              <GitHub className=\"mr-2\" size={18} />              github.com/johndoe            </a>            <a href=\"https://linkedin.com/in/johndoe\" className=\"flex items-center\">              <Linkedin className=\"mr-2\" size={18} />              linkedin.com/in/johndoe            </a>          </div>        </section>      </main>      <footer className=\"bg-gray-200 p-4 text-center\">        <p>&copy; 2024 John Doe. All rights reserved.</p>      </footer>    </div>  );};export default App;