Rare Fish Trading

<!-- Hero Section -->
<header class="bg-gradient-to-r from-indigo-600 to-indigo-500 text-white py-20">
  <div class="container mx-auto px-6 lg:px-12 flex flex-col lg:flex-row items-center gap-10">
    <div class="lg:w-1/2">
      <h1 class="text-5xl font-extrabold mb-4">Rare Fish Trading</h1>
      <p class="text-lg mb-6">Discover Rare Aquatic Treasures: Connect with passionate collectors and trade exclusive, hard‑to‑find fish from around the globe—all in a secure, user‑friendly app.</p>
      <a href="#download" class="inline-flex items-center bg-white text-indigo-700 font-medium py-3 px-6 rounded-lg hover:bg-indigo-50 transition">
        <i data-lucide="download" class="w-5 h-5 mr-2"></i>Download the App
      </a>
    </div>
    <div class="lg:w-1/2 w-full">
      <div class="w-full h-64 bg-gradient-to-br from-indigo-100 to-indigo-200 rounded-lg"></div>
    </div>
  </div>
</header>

<!-- Key Features Section -->
<section class="py-16 bg-zinc-50">
  <div class="container mx-auto px-6 lg:px-12">
    <h2 class="text-3xl font-semibold text-center text-indigo-800 mb-12">Key Features</h2>
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
      <div class="bg-white p-6 rounded-xl shadow-sm text-center">
        <i data-lucide="list" class="w-8 h-8 text-indigo-600 mb-4"></i>
        <h3 class="font-medium text-lg text-gray-800 mb-2">Live Market Listings</h3>
        <p class="text-sm text-gray-600">Stay up‑to‑date with real‑time listings of rare fish.</p>
      </div>
      <div class="bg-white p-6 rounded-xl shadow-sm text-center">
        <i data-lucide="shield" class="w-8 h-8 text-indigo-600 mb-4"></i>
        <h3 class="font-medium text-lg text-gray-800 mb-2">Verified Sellers</h3>
        <p class="text-sm text-gray-600">All profiles are vetted for trust and authenticity.</p>
      </div>
      <div class="bg-white p-6 rounded-xl shadow-sm text-center">
        <i data-lucide="droplet" class="w-8 h-8 text-indigo-600 mb-4"></i>
        <h3 class="font-medium text-lg text-gray-800 mb-2">Water‑Condition Tracking</h3>
        <p class="text-sm text-gray-600">Monitor temperature, pH, and salinity in real time.</p>
      </div>
      <div class="bg-white p-6 rounded-xl shadow-sm text-center">
        <i data-lucide="message-circle" class="w-8 h-8 text-indigo-600 mb-4"></i>
        <h3 class="font-medium text-lg text-gray-800 mb-2">Instant Chat</h3>
        <p class="text-sm text-gray-600">Negotiate deals instantly with built‑in messaging.</p>
      </div>
    </div>
  </div>
</section>

<!-- How It Works Section -->
<section class="py-16 bg-white">
  <div class="container mx-auto px-6 lg:px-12">
    <h2 class="text-3xl font-semibold text-center text-indigo-800 mb-12">How It Works</h2>
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
      <div class="flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
          <i data-lucide="user" class="w-8 h-8 text-indigo-600"></i>
        </div>
        <h3 class="font-medium text-lg text-gray-800 mb-2">Create a Profile</h3>
        <p class="text-sm text-gray-600">Sign up and set up your collector hub.</p>
      </div>
      <div class="flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
          <i data-lucide="search" class="w-8 h-8 text-indigo-600"></i>
        </div>
        <h3 class="font-medium text-lg text-gray-800 mb-2">Browse Listings</h3>
        <p class="text-sm text-gray-600">Explore certified rare fish from around the world.</p>
      </div>
      <div class="flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
          <i data-lucide="tag" class="w-8 h-8 text-indigo-600"></i>
        </div>
        <h3 class="font-medium text-lg text-gray-800 mb-2">Place Offers</h3>
        <p class="text-sm text-gray-600">Make bids or negotiate prices instantly.</p>
      </div>
      <div class="flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
          <i data-lucide="truck" class="w-8 h-8 text-indigo-600"></i>
        </div>
        <h3 class="font-medium text-lg text-gray-800 mb-2">Ship Safely</h3>
        <p class="text-sm text-gray-600">Our logistics partners ensure safe delivery.</p>
      </div>
    </div>
  </div>
</section>

<!-- Community & Events Section -->
<section class="py-16 bg-zinc-50">
  <div class="container mx-auto px-6 lg:px-12">
    <h2 class="text-3xl font-semibold text-center text-indigo-800 mb-12">Community &amp; Events</h2>
    <div class="flex flex-col lg:flex-row items-center gap-8">
      <div class="lg:w-1/2">
        <div class="w-full h-48 bg-gradient-to-br from-indigo-100 to-indigo-200 rounded-lg"></div>
      </div>
      <div class="lg:w-1/2 space-y-4">
        <p class="text-lg text-gray-800"><i data-lucide="users" class="w-5 h-5 mr-2 align-text-bottom text-indigo-600"></i>Join virtual aquariums and connect with fellow collectors.</p>
        <p class="text-lg text-gray-800"><i data-lucide="calendar" class="w-5 h-5 mr-2 align-text-bottom text-indigo-600"></i>Attend monthly trade shows and live streams.</p>
        <p class="text-lg text-gray-800"><i data-lucide="award" class="w-5 h-5 mr-2 align-text-bottom text-indigo-600"></i>Earn badges as you grow your collection and reputation.</p>
      </div>
    </div>
  </div>
</section>

<!-- Testimonials Section -->
<section class="py-16 bg-white">
  <div class="container mx-auto px-6 lg:px-12 text-center">
    <h2 class="text-3xl font-semibold text-indigo-800 mb-8">What Collectors Say</h2>
    <blockquote class="italic text-lg text-gray-700 max-w-2xl mx-auto">
      “The best place to find exotic species—secure, trustworthy, and always a new surprise!”
    </blockquote>
    <p class="mt-4 font-medium text-gray-900">— Maya L., hobbyist</p>
    <div class="mt-6 flex justify-center space-x-2">
      <i data-lucide="star" class="w-5 h-5 text-yellow-400"></i>
      <i data-lucide="star" class="w-5 h-5 text-yellow-400"></i>
      <i data-lucide="star" class="w-5 h-5 text-yellow-400"></i>
      <i data-lucide="star" class="w-5 h-5 text-yellow-400"></i>
      <i data-lucide="star" class="w-5 h-5 text-yellow-400"></i>
    </div>
  </div>
</section>

<!-- Call to Action Section -->
<section id="download" class="py-20 bg-indigo-600 text-white text-center">
  <div class="container mx-auto px-6 lg:px-12">
    <h2 class="text-4xl font-bold mb-4">Start Trading Today</h2>
    <p class="mb-8 text-lg">Download the app, register for free, and dive into the world of rare fish trading in just minutes.</p>
    <a href="#" class="inline-flex items-center bg-white text-indigo-700 font-medium py-3 px-8 rounded-full hover:bg-indigo-50 transition">
      <i data-lucide="download" class="w-5 h-5 mr-2"></i>Get the App
    </a>
  </div>
</section>

<!-- Footer -->
<footer class="bg-zinc-800 text-zinc-200 py-10">
  <div class="container mx-auto px-6 lg:px-12 flex flex-col md:flex-row justify-between items-center">
    <p class="text-sm">© 2026 RareFish Trading Ltd. All rights reserved.</p>
    <div class="flex space-x-4 mt-4 md:mt-0">
      <a href="#" class="hover:text-white"><i data-lucide="facebook" class="w-5 h-5"></i></a>
      <a href="#" class="hover:text-white"><i data-lucide="twitter" class="w-5 h-5"></i></a>
      <a href="#" class="hover:text-white"><i data-lucide="instagram" class="w-5 h-5"></i></a>
    </div>
  </div>
</footer>