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

  <!-- About Section -->
  <section class="text-center py-16 px-4">
    <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">About</h1>
    <p class="text-lg text-gray-600 max-w-2xl mx-auto mb-10">
      JuriFi offers affordable, on-demand legal support using secure digital tools designed for ease and accessibility.
    </p>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiYAAAGGCAIAAADAWN1iAAEAAElEQVR4nOx9d7hsVZHvr1bYu3OfeO" 
         alt="Jurifi Mascot" class="mx-auto w-48 h-auto mb-10" />
  </section>

  <!-- Mission & Vision -->
  <section class="py-16 px-4 max-w-6xl mx-auto grid md:grid-cols-2 gap-10">
    <div class="bg-white shadow-lg border rounded-lg p-6">
      <h2 class="text-2xl font-bold text-gray-800 mb-2">Our Mission</h2>
      <p class="text-gray-600">
        To democratize access to legal services through innovation, education, and human-first design.
      </p>
    </div>
    <div class="bg-white shadow-lg border rounded-lg p-6">
      <h2 class="text-2xl font-bold text-gray-800 mb-2">Our Vision</h2>
      <p class="text-gray-600">
        To become the go-to legal companion for families, freelancers, and small businesses.
      </p>
    </div>
  </section>

  @endsection