@extends('layouts.mainsite')

@section('title', 'Home ')

@section('menusection') 


<section class="bg-[var(--light)] py-20">
    <div class="max-w-6xl mx-auto px-6 text-center">
      <h2 class="text-4xl font-extrabold text-[var(--primary)] mb-4">Courier Made Smarter, Not Heavier</h2>
      <p class="text-lg text-gray-700 mb-6">No warehouses. No wait. Just fast, efficient delivery powered by real-time technology.</p>
      <a href="#services" class="bg-[var(--secondary)] hover:bg-yellow-500 text-white px-6 py-3 rounded-full font-semibold shadow-lg transition">Explore Services</a>
    </div>
  </section>

  <!-- Our Services -->
  <section id="services" class="py-20 bg-white">
    <div class="max-w-6xl mx-auto px-6">
      <h3 class="text-3xl font-bold text-center text-[var(--primary)] mb-12">Our Services</h3>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="p-6 border rounded-xl shadow hover:shadow-lg transition">
          <h4 class="text-xl font-semibold mb-2 text-[var(--primary)]">On-Demand Pickup</h4>
          <p class="text-gray-600">Request a pickup anytime from your location — no need to visit a warehouse.</p>
        </div>
        <div class="p-6 border rounded-xl shadow hover:shadow-lg transition">
          <h4 class="text-xl font-semibold mb-2 text-[var(--primary)]">Live Tracking</h4>
          <p class="text-gray-600">Track your parcel in real-time with GPS updates and ETA notifications.</p>
        </div>
        <div class="p-6 border rounded-xl shadow hover:shadow-lg transition">
          <h4 class="text-xl font-semibold mb-2 text-[var(--primary)]">Direct-to-Door Delivery</h4>
          <p class="text-gray-600">From sender to receiver with no middle storage – fast, secure, and reliable.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Pricing -->
  <section id="pricing" class="py-20 bg-[var(--light)]">
    <div class="max-w-6xl mx-auto px-6 text-center">
      <h3 class="text-3xl font-bold text-[var(--primary)] mb-10">Pricing Plans</h3>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="bg-white p-6 border rounded-xl shadow hover:shadow-xl">
          <h4 class="text-xl font-bold text-[var(--primary)] mb-2">Basic</h4>
          <p class="text-gray-700 mb-4">Ideal for occasional senders</p>
          <p class="text-2xl font-bold text-[var(--secondary)]">LKR 300</p>
        </div>
        <div class="bg-white p-6 border rounded-xl shadow hover:shadow-xl">
          <h4 class="text-xl font-bold text-[var(--primary)] mb-2">Standard</h4>
          <p class="text-gray-700 mb-4">Most popular for daily deliveries</p>
          <p class="text-2xl font-bold text-[var(--secondary)]">LKR 500</p>
        </div>
        <div class="bg-white p-6 border rounded-xl shadow hover:shadow-xl">
          <h4 class="text-xl font-bold text-[var(--primary)] mb-2">Business</h4>
          <p class="text-gray-700 mb-4">Bulk delivery solutions for companies</p>
          <p class="text-2xl font-bold text-[var(--secondary)]">Custom Quote</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Blogs -->
  <section id="blogs" class="py-20 bg-white">
    <div class="max-w-6xl mx-auto px-6">
      <h3 class="text-3xl font-bold text-center text-[var(--primary)] mb-12">Latest Blog Posts</h3>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="border p-4 rounded-xl shadow hover:shadow-md">
          <h4 class="text-lg font-semibold text-[var(--primary)] mb-2">5 Reasons Why You Don't Need Warehouses</h4>
          <p class="text-gray-600 text-sm">Learn how the gig-economy is disrupting traditional logistics.</p>
        </div>
        <div class="border p-4 rounded-xl shadow hover:shadow-md">
          <h4 class="text-lg font-semibold text-[var(--primary)] mb-2">Real-Time Tracking = Real Peace of Mind</h4>
          <p class="text-gray-600 text-sm">Discover the benefits of visibility in courier logistics.</p>
        </div>
        <div class="border p-4 rounded-xl shadow hover:shadow-md">
          <h4 class="text-lg font-semibold text-[var(--primary)] mb-2">How SriCourier Empowers Local Drivers</h4>
          <p class="text-gray-600 text-sm">A look into how our system supports freelancers.</p>
        </div>
      </div>
    </div>
</section>

@endsection