@extends('layouts.app')

@section('title', 'À Propos - InovaTech Global Services')

@section('content')
<section class="bg-brand-dark text-white py-5 text-center">
    <div class="container py-3">
        <h1 class="fw-bold display-5">À Propos d'INOVATECH</h1>
        <p class="lead text-white-50">Innovation, Réactivité &amp; Engagement au service du Numérique</p>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <h2 class="fw-bold text-brand-dark mb-3">Votre Partenaire Technologique Global</h2>
                <p class="text-secondary">
                    <strong>INOVATECH GLOBAL SERVICES</strong> est une entreprise spécialisée dans la création de solutions informatiques, la formation pratique et la fourniture d'équipements numériques.
                </p>
                <p class="text-secondary">
                    Notre mission est de vous accompagner de A à Z : depuis la conception de vos applications et la réservation de vos noms de domaine, jusqu'à l'hébergement sécurisé, la maintenance continue et la formation de vos équipes.
                </p>
            </div>
            <div class="col-lg-6">
                <div class="row g-3">
                    <div class="col-6">
                        <div class="p-4 bg-light rounded shadow-sm text-center border">
                            <h3 class="fw-bold text-brand-blue display-6">6+</h3>
                            <p class="mb-0 text-muted small">Projets Déployés</p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-4 bg-light rounded shadow-sm text-center border">
                            <h3 class="fw-bold text-brand-orange display-6">100%</h3>
                            <p class="mb-0 text-muted small">Disponibilité &amp; Suivi</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold text-brand-dark">Quelques-unes de nos Réalisations</h2>
            <p class="text-muted">Des plateformes web actives développées et gérées par INOVATECH</p>
            <div class="mx-auto" style="width: 60px; height: 3px; background-color: var(--brand-orange);"></div>
        </div>

        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm p-3">
                    <div class="card-body">
                        <i class="bi bi-globe text-brand-blue fs-2 mb-2"></i>
                        <h4 class="h5 fw-bold">Nafisseimo</h4>
                        <p class="text-muted small">Plateforme immobilière <a href="http://nafisseimo.com" target="_blank" class="text-decoration-underline">nafisseimo.com</a></p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm p-3">
                    <div class="card-body">
                        <i class="bi bi-car-front-fill text-brand-orange fs-2 mb-2"></i>
                        <h4 class="h5 fw-bold">Fisna Location Cars</h4>
                        <p class="text-muted small">Application de réservation et gestion de véhicules <a href="http://fisnalocationcars.com" target="_blank" class="text-decoration-underline">fisnalocationcars.com</a></p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm p-3">
                    <div class="card-body">
                        <i class="bi bi-card-checklist text-brand-blue fs-2 mb-2"></i>
                        <h4 class="h5 fw-bold">EMC Auto École</h4>
                        <p class="text-muted small">Système de gestion et suivi pour auto-école <a href="http://141.227.151.184/emc" target="_blank" class="text-decoration-underline">emc auto ecole</a></p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm p-3">
                    <div class="card-body">
                        <i class="bi bi-shop text-brand-orange fs-2 mb-2"></i>
                        <h4 class="h5 fw-bold">Délice du Sine Saloum</h4>
                        <p class="text-muted small">Site vitrine &amp; présentation de produits régionaux <a href="https://delices.fwh.is/?i=2" target="_blank" class="text-decoration-underline">délices du sine saloum</a></p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm p-3">
                    <div class="card-body">
                        <i class="bi bi-briefcase-fill text-brand-blue fs-2 mb-2"></i>
                        <h4 class="h5 fw-bold">Babel Service</h4>
                        <p class="text-muted small">Plateforme de prestations et services <a href="http://141.227.151.184/babel" target="_blank" class="text-decoration-underline">babelservice</a></p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm p-3">
                    <div class="card-body">
                        <i class="bi bi-laptop text-brand-orange fs-2 mb-2"></i>
                        <h4 class="h5 fw-bold">Pobdioxla</h4>
                        <p class="text-muted small">Solution numérique web <a href="https://pobdioxla.com" target="_blank" class="text-decoration-underline">pobdioxla.com</a></p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm p-3">
                    <div class="card-body">
                        <i class="bi bi-book-half text-brand-blue fs-2 mb-2"></i>
                        <h4 class="h5 fw-bold">Bibliothèque</h4>
                        <p class="text-muted small">Vente de livres <a href="https://bibliotheque.inovatechgs.com/" target="_blank" class="text-decoration-underline">bibliotheque.inovatechgs.com</a></p>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</section>
@endsection