@extends('layouts.site')
 
@section('content')

  <!-- Page Heading -->
  <section class="text-center py-16 px-4">
    <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Our Services</h1>
    <p class="text-lg text-gray-600 mb-6 max-w-xl mx-auto">
      Explore the tools and legal support options available through JuriFi.
    </p>
  </section>

  <!-- Services Grid -->
  <section class="py-12 bg-sky-500/10">
    <div class="max-w-5xl mx-auto px-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 text-center">
      <div>
        <div class="text-blue-600 text-4xl mb-2">🔒</div>
        <h3 class="font-semibold text-lg">The Vault</h3>
        <p class="text-gray-600 mt-1">Secure digital storage for your important documents.</p>
      </div>
      <div>
        <div class="text-blue-600 text-4xl mb-2">💬</div>
        <h3 class="font-semibold text-lg">Legal Consultations</h3>
        <p class="text-gray-600 mt-1">Chat with attorneys or book a virtual session anytime.</p>
      </div>
      <div>
        <div class="text-blue-600 text-4xl mb-2">📄</div>
        <h3 class="font-semibold text-lg">Document Review</h3>
        <p class="text-gray-600 mt-1">Get contracts, leases, and NDAs reviewed by professionals.</p>
      </div>
      <div>
        <div class="text-blue-600 text-4xl mb-2">🎥</div>
        <h3 class="font-semibold text-lg">Live Webinars</h3>
        <p class="text-gray-600 mt-1">Interactive legal sessions with expert advice and Q&A.</p>
      </div>
      <div>
        <div class="text-blue-600 text-4xl mb-2">📰</div>
        <h3 class="font-semibold text-lg">Newsletter</h3>
        <p class="text-gray-600 mt-1">Stay updated with legal news, guides, and tips monthly.</p>
      </div>
      <div>
        <div class="text-blue-600 text-4xl mb-2">💲</div>
        <h3 class="font-semibold text-lg">Attorney Discounts</h3>
        <p class="text-gray-600 mt-1">Save 10%–40% on hourly attorney fees with our network.</p>
      </div>
    </div>
  </section>

  @endsection