Untitled

export default function GauravWebsite() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-black via-purple-900 to-blue-900 text-white overflow-hidden">
      {/* Navbar */}
      <nav className="flex justify-between items-center px-8 py-5 backdrop-blur-md bg-white/10 border-b border-white/10">
        <h1 className="text-3xl font-extrabold tracking-wide">GAURAV</h1>
        <div className="flex gap-6 text-sm md:text-base">
          <a href="#home" className="hover:text-pink-400 transition">Home</a>
          <a href="#about" className="hover:text-pink-400 transition">About</a>
          <a href="#skills" className="hover:text-pink-400 transition">Skills</a>
          <a href="#contact" className="hover:text-pink-400 transition">Contact</a>
        </div>
      </nav>

      {/* Hero Section */}
      <section
        id="home"
        className="flex flex-col justify-center items-center text-center px-6 py-24"
      >
        <div className="bg-white/10 backdrop-blur-lg rounded-3xl p-10 shadow-2xl border border-white/10 max-w-4xl">
          <h2 className="text-5xl md:text-7xl font-black mb-6 bg-gradient-to-r from-pink-400 via-yellow-300 to-cyan-400 bg-clip-text text-transparent animate-pulse">
            Welcome To Gaurav's Website
          </h2>
          <p className="text-lg md:text-2xl text-gray-200 leading-relaxed mb-8">
            Creative • AI Lover • Video Editor • Graphic Designer • Content Creator
          </p>
          <button className="px-8 py-4 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 text-lg font-bold shadow-lg hover:scale-105 transition duration-300">
            Explore More
          </button>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="px-8 py-20">
        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-10 items-center">
          <div>
            <h3 className="text-4xl font-bold mb-5 text-cyan-300">About Me</h3>
            <p className="text-gray-300 text-lg leading-8">
              Hi, I am Gaurav. I love creating amazing AI projects, editing videos,
              designing graphics, and exploring new technology. This modern website
              is specially designed with colorful effects and a premium interface.
            </p>
          </div>

          <div className="bg-white/10 p-8 rounded-3xl shadow-2xl border border-white/10 hover:scale-105 transition duration-300">
            <h4 className="text-2xl font-bold mb-4 text-pink-300">Why This Website Looks Cool?</h4>
            <ul className="space-y-3 text-gray-200">
              <li>✨ Modern Gradient Design</li>
              <li>🔥 Smooth Hover Animations</li>
              <li>🎨 Attractive Colors</li>
              <li>⚡ Responsive Interface</li>
              <li>💎 Premium Look</li>
            </ul>
          </div>
        </div>
      </section>

      {/* Skills Section */}
      <section id="skills" className="px-8 py-20 bg-black/20 backdrop-blur-lg">
        <h3 className="text-4xl font-bold text-center mb-14 text-yellow-300">
          My Skills
        </h3>

        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
          {[
            "AI Tools",
            "Video Editing",
            "Graphic Designing",
            "Content Writing",
          ].map((skill, index) => (
            <div
              key={index}
              className="bg-white/10 rounded-3xl p-8 text-center shadow-xl border border-white/10 hover:-translate-y-2 hover:bg-white/20 transition duration-300"
            >
              <div className="text-5xl mb-4">🚀</div>
              <h4 className="text-2xl font-bold">{skill}</h4>
            </div>
          ))}
        </div>
      </section>

      {/* Contact */}
      <section id="contact" className="px-8 py-20 text-center">
        <div className="max-w-3xl mx-auto bg-white/10 rounded-3xl p-10 shadow-2xl border border-white/10">
          <h3 className="text-4xl font-bold mb-6 text-pink-400">Contact Me</h3>
          <p className="text-gray-300 text-lg mb-8">
            Want to connect with me? Let's create something amazing together.
          </p>

          <div className="flex flex-col md:flex-row gap-5 justify-center">
            <input
              type="text"
              placeholder="Your Name"
              className="px-5 py-3 rounded-xl bg-black/30 border border-white/20 focus:outline-none focus:ring-2 focus:ring-pink-500 w-full"
            />
            <input
              type="email"
              placeholder="Your Email"
              className="px-5 py-3 rounded-xl bg-black/30 border border-white/20 focus:outline-none focus:ring-2 focus:ring-cyan-500 w-full"
            />
          </div>

          <textarea
            placeholder="Your Message"
            rows="5"
            className="mt-5 w-full px-5 py-3 rounded-xl bg-black/30 border border-white/20 focus:outline-none focus:ring-2 focus:ring-yellow-400"
          ></textarea>

          <button className="mt-6 px-10 py-4 rounded-full bg-gradient-to-r from-cyan-500 to-blue-600 font-bold text-lg hover:scale-105 transition duration-300 shadow-lg">
            Send Message
          </button>
        </div>
      </section>

      {/* Footer */}
      <footer className="text-center py-6 border-t border-white/10 text-gray-400 bg-black/20">
        © 2026 Gaurav Website | Designed with ❤️ using React & Tailwind CSS
      </footer>
    </div>
  );
}