Untitled

export default function HomePage() {
  return (
    <div className="bg-gradient-to-br from-white via-gray-100 to-blue-50 min-h-screen flex flex-col items-center justify-center">
      {/* Navigation Bar */}
      <nav className="w-full flex justify-between items-center px-10 py-4 bg-white shadow-md fixed top-0">
        <div className="text-2xl font-bold">Siqi Zheng</div>
        <ul className="flex space-x-6 text-gray-700">
          <li><a href="#about" className="hover:text-blue-500">About</a></li>
          <li><a href="#portfolio" className="hover:text-blue-500">Portfolio</a></li>
          <li><a href="#services" className="hover:text-blue-500">Services</a></li>
          <li><a href="#contact" className="hover:text-blue-500">Contact</a></li>
        </ul>
        <button className="bg-blue-500 text-white px-4 py-2 rounded-lg shadow hover:bg-blue-600">Hire Me</button>
      </nav>

      {/* Hero Section */}
      <section className="text-center mt-24 px-6">
        <h1 className="text-5xl font-extrabold text-gray-800 mb-4">Hi, I'm Siqi Zheng.</h1>
        <p className="text-xl text-gray-600 mb-8">Creative Marketer | Campaign Strategist | Brand Builder</p>
        <div className="flex space-x-4 justify-center">
          <a href="#portfolio" className="bg-blue-500 text-white px-6 py-3 rounded-lg shadow hover:bg-blue-600">View My Portfolio</a>
          <a href="#contact" className="bg-gray-200 text-gray-800 px-6 py-3 rounded-lg shadow hover:bg-gray-300">Let’s Collaborate</a>
        </div>
      </section>
    </div>
  );
}