@extends('layouts.app')
@section('title','About Us - Journey of Life GCC')
@section('content')
<section style="background:#e0f2fe;padding:3rem 0">
  <div class="container">
    <h1 style="font-size:2.5rem;font-weight:800;color:#1e3a8a">About Journey of Life GCC</h1>
    <p style="color:#6b7280;margin-top:0.5rem">Empowering lives through knowledge since 1993</p>
  </div>
</section>
<section class="about-section">
  <div class="container">
    <div class="about-content">
      <div>
        <span class="section-badge">Our Story</span>
        <h2 class="section-title">30+ Years of Dedication</h2>
        <p class="section-text">Journey of Life GCC has been serving the community since 1993, providing <span class="highlight-text">free Islamic education</span> and personal development programs to thousands of learners.</p>
        <p class="section-text">Our mission is to make quality Islamic knowledge accessible to everyone, regardless of their background or financial situation.</p>
        <a href="{{ route('contact') }}" class="btn btn-primary" style="margin-top:1rem;display:inline-flex;align-items:center;gap:0.5rem;padding:0.875rem 2rem;border-radius:8px;background:#3b82f6;color:white;text-decoration:none;font-weight:600">Contact Us</a>
      </div>
      <div>
        <img src="/images/about.jpg" alt="About us" style="width:100%;border-radius:15px" onerror="this.style.display='none'">
      </div>
    </div>
  </div>
</section>
@endsection