@extends('layouts.public')
@section('content')
<x-page-hero kicker="Lahore" title="About Edspire Global" :lede="$site['position']" :crumbs="$crumbs" />
<section class="mx-auto grid max-w-6xl gap-8 px-5 py-16 lg:grid-cols-[.85fr_1.15fr] lg:py-20">
    <div class="panel overflow-hidden" id="founder">
        @if(!empty($site['founder_photo']))
            <img src="{{ $site['founder_photo'] }}" alt="{{ $site['founder_name'] }}, {{ $site['founder_role'] }} of Edspire Global" class="founder-photo" width="1200" height="900">
        @endif
        <div class="bg-ink px-6 py-8 text-cream">
            <p class="kicker text-[#c4a06a]">{{ $site['founder_role'] }}</p>
            @if(empty($site['founder_photo']))
                <p class="mt-6 grid h-16 w-16 place-items-center rounded-2xl border border-white/15 text-xl font-semibold">TG</p>
            @endif
            <h2 class="mt-5 text-3xl font-semibold tracking-tight">{{ $site['founder_name'] }}</h2>
        </div>
        <div class="px-6 py-6">
            <p class="text-sm leading-7">{{ $site['founder_bio'] }}</p>
        </div>
    </div>
    <div>
        @if($page?->body)<div class="prose-owner">{!! $page->body !!}</div>@endif
        <a href="{{ route('collision') }}" class="leak mt-6 flex items-center justify-between gap-4">
            <span>
                <span class="block text-[11px] uppercase tracking-[0.16em] text-brass">Name collision</span>
                <span class="mt-2 block font-semibold">This is not a study-abroad consultancy.</span>
            </span>
            <i data-lucide="arrow-right" class="h-4 w-4 shrink-0"></i>
        </a>
    </div>
</section>
<section class="bg-cream py-16 lg:py-20">
    <div class="mx-auto max-w-6xl px-5">
        <p class="kicker">The buying criterion</p>
        <h2 class="section-title mt-3 max-w-3xl">Not a workshop. Not a franchise.</h2>
        <div class="mt-10">@include('components.compare')</div>
    </div>
</section>
@endsection