Real-world Project: Portfolio Website

<!-- Hero Section -->
<section class="flex min-h-screen items-center bg-gradient-to-br from-blue-600 to-purple-700">
  <div class="container mx-auto px-6 text-center text-white">
    <h1 class="text-4xl font-bold md:text-6xl">
      আমি <span class="text-yellow-300">Anamol Hasan</span>
    </h1>
    <p class="mt-4 text-lg text-blue-100 md:text-xl">
      Full Stack Developer
    </p>
    <div class="mt-8 flex justify-center gap-4">
      <a href="#projects" class="rounded-lg bg-white px-6 py-3 font-semibold text-blue-600 hover:bg-blue-50 transition-colors">
        Projects
      </a>
      <a href="#contact" class="rounded-lg border border-white px-6 py-3 font-semibold hover:bg-white/10 transition-colors">
        Contact
      </a>
    </div>
  </div>
</section>

<!-- Projects Section -->
<section id="projects" class="bg-gray-50 py-16">
  <div class="container mx-auto px-6">
    <h2 class="text-3xl font-bold text-center">আমার Projects</h2>
    <div class="mt-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
      <!-- Card 1 -->
      <div class="rounded-xl bg-white p-6 shadow-md hover:shadow-lg transition-shadow">
        <h3 class="text-xl font-semibold">Project 1</h3>
        <p class="mt-2 text-gray-600">Description goes here.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 hover:underline">View →</a>
      </div>
    </div>
  </div>
</section>

<!-- Contact Section -->
<section id="contact" class="py-16">
  <div class="container mx-auto max-w-lg px-6">
    <h2 class="text-3xl font-bold text-center">যোগাযোগ</h2>
    <form class="mt-8 space-y-4">
      <input
        type="text"
        placeholder="আপনার নাম"
        class="w-full rounded-lg border border-gray-300 px-4 py-3 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
      <input
        type="email"
        placeholder="ইমেইল"
        class="w-full rounded-lg border border-gray-300 px-4 py-3 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
      <textarea
        rows="4"
        placeholder="বার্তা"
        class="w-full rounded-lg border border-gray-300 px-4 py-3 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
      ></textarea>
      <button
        type="submit"
        class="w-full rounded-lg bg-blue-600 py-3 font-semibold text-white hover:bg-blue-700 transition-colors"
      >
        পাঠান
      </button>
    </form>
  </div>
</section>