@extends('layouts.frontend')

@section('title', 'Public cible')

@section('content')
<!-- En-tête -->
<section class="hero-section">
    <div class="container text-center">
        <h1 class="display-4 fw-bold mb-4">Public cible</h1>
        <p class="lead mb-4">Découvrez les groupes que nous accompagnons et soutenons à travers nos activités</p>
        <nav aria-label="fil d'ariane">
            <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item"><a href="/" class="text-white text-decoration-none">Accueil</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">Public cible</li>
            </ol>
        </nav>
    </div>
</section>

    <!-- Services Section -->
    <section class="services-section">
            <section class="py-5 bg-light">
        <div class="container">
            <div class="row mb-5">
                <div class="col-md-6">
                    <img src="{{ asset('images/cible.jpg') }}" alt="Notre Impact" class="img-fluid rounded">
                </div>
                <div class="col-md-6" style="text-align: justify;">
                    <h2 class="fw-bold" style="color: var(--primary-color);">Notre public cible</h2>
                    <p class="lead">{!! $company->cible !!}</p>
                </div>
            </div>
        </div>
    </section>
    </section>

    <section class="py-5" style="background-color: var(--primary-color); color: white;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8 mb-4 mb-lg-0">
                    <h2 class="fw-bold">Quid Salon Agripeace&nbsp;?</h2>
                    <p class="lead mb-0">Un cadre de rencontre nationale, régionale et internationale adaptée aux décideurs.</p>

                </div>
                <div class="col-lg-4 text-lg-end">
                    <a href="{{ route('contact') }}" class="btn btn-light btn-lg me-2 mb-2 mb-md-0">Contactez-nous</a>
                </div>
            </div>
        </div>
    </section>

@endsection