@extends('layouts.app')

@section('title', 'Services & Solutions - 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">Nos Services &amp; Solutions</h1>
        <p class="lead text-white-50">Un accompagnement global pour votre transformation numérique</p>
    </div>
</section>

<div class="container py-5">
    <!-- 1. Informatique & Développement -->
    <div class="row align-items-center mb-5 pb-4 border-bottom" id="informatique">
        <div class="col-md-6 mb-4 mb-md-0">
            <span class="badge bg-brand-blue mb-2 px-3 py-2">Ingénierie & Web</span>
            <h2 class="fw-bold text-brand-dark">Développement Web &amp; Logiciel</h2>
            <p class="text-secondary">
                Nous concevons des plateformes web sur-mesure, performantes et sécurisées. De la vitrine au système de gestion complexe, nous répondons aux besoins spécifiques de chaque secteur.
            </p>
            <ul class="list-unstyled">
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-orange me-2"></i> Sites vitrines, e-commerce et applications sur-mesure</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-orange me-2"></i> Portails de gestion (auto-école, location, réservation)</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-orange me-2"></i> Optimisation des performances et sécurité web</li>
            </ul>
        </div>
        <div class="col-md-6 text-center">
            <div class="p-4 bg-light rounded-3 shadow-sm border">
                <i class="bi bi-code-square display-1 text-brand-blue"></i>
            </div>
        </div>
    </div>

    <!-- 2. Hébergement, Domaine & Maintenance -->
    <div class="row align-items-center mb-5 pb-4 border-bottom flex-md-row-reverse" id="hebergement">
        <div class="col-md-6 mb-4 mb-md-0">
            <span class="badge bg-brand-orange mb-2 px-3 py-2">Infrastructure IT</span>
            <h2 class="fw-bold text-brand-dark">Hébergement, Domaines &amp; Maintenance</h2>
            <p class="text-secondary">
                Nous ne nous contentons pas de créer vos projets : nous assurons leur disponibilité continue, la réservation de vos noms de domaine et la maintenance technique.
            </p>
            <ul class="list-unstyled">
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-blue me-2"></i> Vente et gestion de noms de domaine (.com, .sn, etc.)</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-blue me-2"></i> Hébergement web haute disponibilité et sécurisé</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-blue me-2"></i> Suivi technique, sauvegardes régulières et maintenance continue</li>
            </ul>
        </div>
        <div class="col-md-6 text-center">
            <div class="p-4 bg-light rounded-3 shadow-sm border">
                <i class="bi bi-hdd-network-fill display-1 text-brand-orange"></i>
            </div>
        </div>
    </div>

    <!-- 5. Infographie -->
    <div class="row align-items-center" id="infographie">
        <div class="col-md-6 text-center mb-4 mb-md-0">
            <div class="p-4 bg-light rounded-3 shadow-sm border">
                 <i class="bi bi-palette-fill display-1 text-brand-blue"></i>
            </div>
        </div>
        <div class="col-md-6">
            <span class="badge bg-brand-blue mb-2 px-3 py-2">Design</span>
            <h2 class="fw-bold text-brand-dark">Infographie et Sérigrahie</h2>
            <p class="text-secondary">
                conception de visuels impactants pour vos supports de communication.
            </p>
            <ul class="list-unstyled">
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-orange me-2"></i> Identité visuelle: Logos, charte graphique, cartes de visite et en-têtes.</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-orange me-2"></i> Supports de communication : Flyers, affiches, bannières web et visuels pour réseaux sociaux.</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-orange me-2"></i> Textile sur mesure : T-shirts, polo, t-shirts de travail, tote bags, casquettes et maillots sportifs.</li>
                
            </ul>
        </div>
    </div>

    <!-- Maintenance info -->
    <div class="row align-items-center mb-5 pb-4 border-bottom" id="informatique">
        <div class="col-md-6 mb-4 mb-md-0">
            <span class="badge bg-brand-blue mb-2 px-3 py-2">Maintenance Informatique</span>
            <h2 class="fw-bold text-brand-dark"> Maintenance et installation</h2>
            <p class="text-secondary">
                Instalation de systèmes d'exploitation, logiciels et périphériques. Maintenance préventive et corrective pour assurer la performance et la sécurité de vos équipements.
            </p>
            <ul class="list-unstyled">
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-orange me-2"></i> Installation et configuration de systèmes d'exploitation et de logiciels</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-orange me-2"></i> Maintenance préventive et corrective</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-orange me-2"></i> Sécurité informatique</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-orange me-2"></i> Activation de windows et microsoft office</li>
            </ul>
        </div>
        <div class="col-md-6 text-center">
            <div class="p-4 bg-light rounded-3 shadow-sm border">
                <i class="bi bi-code-square display-1 text-brand-blue"></i>
            </div>
        </div>
    </div>

    <!-- 3. Formation -->
    <div class="row align-items-center mb-5 pb-4 border-bottom" id="formation">
        <div class="col-md-6 mb-4 mb-md-0">
            <span class="badge bg-brand-blue mb-2 px-3 py-2">Compétences</span>
            <h2 class="fw-bold text-brand-dark">Formations Professionnelles</h2>
            <p class="text-secondary">
                Nous accompagnons les étudiants, professionnels et entreprises dans le renforcement de leurs compétences informatiques et technologiques.
            </p>
            <ul class="list-unstyled">
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-orange me-2"></i> Maîtrise des outils bureautiques et suites office</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-orange me-2"></i> Initiation et perfectionnement au développement web</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-orange me-2"></i> Ateliers pratiques et suivi individuel</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-orange me-2"></i> Formation et prise en mains aux outils de l'IA</li>
            </ul>
        </div>
        <div class="col-md-6 text-center">
            <div class="p-4 bg-light rounded-3 shadow-sm border">
                <i class="bi bi-easel2-fill display-1 text-brand-blue"></i>
            </div>
        </div>
    </div>

    <!-- 4. Vente de Matériel -->
    <div class="row align-items-center mb-5 pb-4 border-bottom flex-md-row-reverse" id="vente">
        <div class="col-md-6 mb-4 mb-md-0">
            <span class="badge bg-brand-orange mb-2 px-3 py-2">Équipements</span>
            <h2 class="fw-bold text-brand-dark">Vente de Matériel Informatique</h2>
            <p class="text-secondary">
                Fourniture d'équipements informatiques, d'ordinateurs et d'accessoires de qualité adaptés aux besoins professionnels et individuels.
            </p>
            <ul class="list-unstyled">
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-blue me-2"></i> Ordinateurs portables et de bureau</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-blue me-2"></i> Équipements réseau et périphériques</li>
                <li class="mb-2"><i class="bi bi-check-circle-fill text-brand-blue me-2"></i> Conseils d'achat et configuration initiale</li>
            </ul>
        </div>
        <div class="col-md-6 text-center">
            <div class="p-4 bg-light rounded-3 shadow-sm border">
                <i class="bi bi-cart-check-fill display-1 text-brand-orange"></i>
            </div>
        </div>
    </div>

    
</div>
@endsection