@extends('layout.headerAndFooter')

@section('headLinks')
    <link rel="stylesheet" href="{{asset('siteStyle/sectionStyle/topSection.css')}}">
    <link rel="stylesheet" href="{{asset('siteStyle/sectionStyle/introCards.css')}}">
    <link rel="stylesheet" href="{{asset('siteStyle/sectionStyle/ourteamCards.css')}}">
    <link rel="stylesheet" href="{{asset('siteStyle/sectionStyle/readytodo.css')}}">

    <link rel="stylesheet" href="{{asset('siteStyle/agence.css')}}">

    <meta name="description" content="content description">
@stop

@section('title')
    Developpement & Technologies
@stop

@section('content')
    <section class="containerB">
        <div class="topSection">
            <div class="titleAndBtn">
                <div>
                    @include('sections.breadcrumbs', [
                        'parentPageLink' => route("home"),
                        'parentPage' => 'Home',
                        'childPageLink' => route("agence"),
                        'childPage' => "L'agence",
                        'childPageLink2' => "",
                        'childPage2' => '',
                        "fontColor" => "lightFont"
                    ])
                    <h1 class="titleTopSection"><span>Optimisation digitale

                    </span>  sur-mesure</h1>
                    <h2 class="underTitle">Boostez votre performance avec des solutions innovantes : sites web, applications, automation et plus.</h2>
                </div>

                <a class="atirao-button atirao-button--primary atirao-button--large" href="{{route("contact")}}">
                    <span class="txt">Prendre un Rv</span>
                    <span class="bdrl"></span>
                    <span class="bdrr"></span>
                </a>
            </div>
            <div class="image">
                <img src="{{ asset('images/agence/atthetop.webp') }}" alt="">
            </div>
        </div>
    </section>












      <section class="containerB about">
        <style>
          /* Variables et styles pour la section journal */
          .containerB.about {
            --primary-color: #1a1a1a;
            --secondary-color: #f5f5f5;
            --accent-color: #e63946;
            --text-color: #333;
            --border-color: #ddd;
            --serif-font: 'PoppinsRegular';
            --sans-font: 'PoppinsRegular';

            font-family: var(--serif-font);
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--secondary-color);
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px 20px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
          }

          /* En-tête du journal */
          .journal-masthead {
            text-align: center;
            padding: 20px 0;
            border-bottom: 2px solid var(--primary-color);
            margin-bottom: 20px;
          }

          .journal-masthead-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 10px;
          }

          .journal-title {
            font-size: 2rem;
            font-weight: 900;
            letter-spacing: -1px;
            font-family: var(--serif-font);
            margin: 0;
            text-transform: uppercase;
            color: var(--primary-color);
          }

          .journal-subtitle {
            font-size: 1rem;
            font-style: 'PoppinsRegular';
            margin: 5px 0 10px;
          }

          .journal-date-location {
            display: flex;
            justify-content: space-between;
            width: 100%;
            font-family: var(--sans-font);
            font-size: 0.85rem;
            padding: 5px 0;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
          }

          /* Structure adaptée à la classe about-grid */
          .about-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            margin-bottom: 30px;
          }

          .intro-card h2 span,
          .history h2 span.sectionTitle {
            display: inline-block;
            font-size: 1.5rem;
            font-weight: 800;
            /* color: var(--primary-color); */
            margin-bottom: 15px;
            position: relative;
          }

          .intro-card p strong {

            display: block;
            margin-bottom: 15px;
          }

          /* Style des articles */
          .vision-mission {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
          }

          @media (max-width: 768px) {
            .vision-mission {
              grid-template-columns: 1fr;
            }
          }

          .vision h3 span.blue,
          .mission h3 span.red {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 15px;
            display: block;
          }

          .vision h3 span.blue {
            border-bottom: 2px solid #3b82f6; /* Bleu */
            padding-bottom: 5px;
          }

          .mission h3 span.red {
            border-bottom: 2px solid var(--accent-color);
            padding-bottom: 5px;
          }

          .content {
            font-size: 1.1rem;
            line-height: 1.7;
            margin-bottom: 15px;
          }

          /* Style journal pour les images */
          .featured-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            margin: 15px 0;
            filter: grayscale(20%);
          }

          /* Style pour les citations */
          blockquote {
            font-size: 1.3rem;
            line-height: 1.5;
            font-style: italic;
            color: #555;
            padding: 20px;
            margin: 20px 0;
            position: relative;
            text-align: center;
            border-left: 4px solid var(--accent-color);
            background-color: rgba(230, 57, 70, 0.05);
          }

          blockquote::before,
          blockquote::after {
            content: '"';

            line-height: 0;
            position: relative;

          }

          /* Style pour la section history */
          .history {
            padding: 20px;
            border-radius: 8px;
          }

          .history h3 {

            margin-bottom: 20px;
          }

          .history p {
            margin-bottom: 10px;
          }

          /* Styles spécifiques pour la mise en page journal */
          .journal-layout .about-grid:first-child {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 20px;
          }

          .journal-layout .intro-card p {
            font-size: 1.1rem;
            margin-bottom: 15px;
            line-height: 1.7;
          }

          .logo {
            max-width: 120px;
            margin-top: 20px;
          }

          .journal-article-meta {

            margin: 10px 0 15px 0;
          }
        </style>

        <div class="journal-masthead">
            <div class="journal-masthead-inner">
                <h2 class="journal-title">Landing Pages sur-mesure : Convertissez plus, plus vite</h2>
                <p class="journal-subtitle">Dans un monde où l’attention des internautes est une ressource rare, la landing page devient un outil puissant pour booster vos conversions.</p>
            </div>
            <div class="journal-date-location">
                <!-- Date et emplacement, si nécessaire -->
            </div>
        </div>

        <div class="journal-layout">
            <div class="about-grid">
                <div class="intro-card">
                    <h2><span>Landing Pages sur-mesure : Convertissez plus, plus vite</span></h2>
                    <p><strong>Dans un monde où l’attention des internautes est une ressource rare, la landing page devient un outil puissant pour booster vos conversions. Contrairement à un site web classique, une landing page est conçue avec un objectif unique : faire passer l'utilisateur à l'action.</strong></p>
                    <div class="journal-article-meta">
                        <span class="journal-author">Par Sophie Martin</span> |
                        <span class="journal-publish-date">7 Mai 2025</span>
                    </div>
                    <img src="/api/placeholder/800/400" alt="Landing page" class="featured-image">
                    <p>Une **landing page** est une page autonome, souvent liée à une campagne publicitaire, visant à inciter le visiteur à réaliser une action spécifique. La création d'une landing page sur-mesure permet de maximiser les conversions en optimisant chaque élément pour répondre aux attentes spécifiques de votre audience.</p>
                    <p><strong>Chaque élément d’une landing page, du design à l'appel à l’action, est conçu pour répondre aux objectifs spécifiques de la campagne.</strong></p>

                    <blockquote>
                        "Une landing page bien conçue peut transformer votre trafic en résultats concrets."
                    </blockquote>

                    <p>Chez **Atirao**, nous créons des **landing pages personnalisées** qui maximisent la conversion grâce à un design épuré, un message clair et une utilisation stratégique des appels à l’action.</p>
                    <img src="images/logoAtirao/1.png" alt="Logo Atirao" class="logo">
                </div>
            </div>

            <div class="about-grid">
                <div class="vision-mission">
                    <div class="vision">
                        <h3><span class="blue">1. Qu’est-ce qu’une landing page efficace ?</span></h3>
                        <p class="content">Une landing page efficace repose sur un message clair et ciblé, un design épuré et un appel à l’action engageant. Elle doit répondre aux attentes spécifiques de l’utilisateur dès l’arrivée sur la page, avec des éléments comme des témoignages, des preuves sociales et une preuve de crédibilité pour renforcer la confiance.</p>
                    </div>
                    <div class="mission">
                        <h3><span class="red">2. Pourquoi investir dans une landing page personnalisée ?</span></h3>
                        <p class="content">Créer une landing page sur-mesure vous permet de répondre de manière précise aux besoins de votre public, augmentant ainsi le taux de conversion, la qualité des leads et le retour sur investissement de vos campagnes publicitaires. Nos pages sont optimisées pour générer des résultats mesurables et durables.</p>
                    </div>
                </div>
            </div>

            <div class="about-grid">
                <div class="vision-mission">
                    <div class="vision">
                        <h3><span class="blue">3. Notre approche de création de landing pages</span></h3>
                        <p class="content">Nous commençons par analyser vos objectifs et la cible de votre campagne. Ensuite, nous rédigeons un texte optimisé SEO, créons un design responsive, léger et performant, et intégrons des outils marketing pour maximiser les résultats.</p>
                    </div>
                    <div class="mission">
                        <h3><span class="red">4. Suivi et itération pour maximiser les résultats</span></h3>
                        <p class="content">Une fois la page lancée, nous effectuons des tests A/B, suivons les performances et optimisons en fonction des données pour assurer un retour sur investissement maximal.</p>
                    </div>
                </div>
            </div>

            <div class="history">
                <h2><span class="sectionTitle">Exemples d’usages concrets de landing pages</span></h2>
                <h3><em>Des landing pages adaptées à chaque besoin spécifique</em></h3>
                <p><strong>Landing page e-commerce :</strong> Mise en avant d’un produit phare avec témoignages, vidéo et bouton “Acheter maintenant”.</p>
                <p><strong>Page de prise de rendez-vous :</strong> Calendrier intégré, formulaire simplifié, promesse forte.</p>
                <p><strong>Page d’inscription à un événement :</strong> Accroche impactante, bénéfices clairs, formulaire optimisé.</p>
                <p><strong>Page de génération de leads B2B :</strong> Démonstration produit, preuve sociale, CTA vers une prise de contact ou un essai gratuit.</p>
            </div>

            <div class="history">
                <h2><span class="sectionTitle">Passez à l’action : chaque clic compte</span></h2>
                <p><strong>Une landing page n’est pas juste une belle page. C’est une machine à convertir quand elle est bien conçue. </strong> Que vous souhaitiez capter des leads, vendre un service ou lancer un produit, nous vous aidons à créer des landing pages sur-mesure, ultra-performantes, pensées pour transformer votre trafic en résultats concrets.</p>
                <p><strong>Besoin d’une landing page optimisée pour la conversion ?</strong> Parlons-en dès maintenant.</p>
            </div>
        </div>

        {{-- section 2 Refonte de site web : modernisez votre présence en ligne--}}

        <div class="journal-masthead">
            <div class="journal-masthead-inner">
                <h2 class="journal-title">Refonte de site web : modernisez votre présence en ligne</h2>
                <p class="journal-subtitle">Votre site web est souvent le premier point de contact entre votre marque et vos clients. Pourtant, beaucoup d’entreprises sous-estiment son importance stratégique.</p>
            </div>
            <div class="journal-date-location">
                <!-- Date et emplacement, si nécessaire -->
            </div>
        </div>

        <div class="journal-layout">
            <div class="about-grid">
                <div class="intro-card">
                    <h2><span>Refonte de site web : modernisez votre présence en ligne</span></h2>
                    <p><strong>Votre site web est souvent le premier point de contact entre votre marque et vos clients. Pourtant, beaucoup d’entreprises sous-estiment son importance stratégique. Un site lent, mal structuré, visuellement daté ou peu ergonomique nuit à la crédibilité de votre activité… et à vos résultats.</strong></p>
                    <div class="journal-article-meta">
                        <span class="journal-author">Par Sophie Martin</span> |
                        <span class="journal-publish-date">7 Mai 2025</span>
                    </div>
                    <img src="/api/placeholder/800/400" alt="Refonte de site web" class="featured-image">
                    <p><strong>La refonte de site web est bien plus qu’un simple relooking : c’est une opportunité de redynamiser votre image de marque, de booster vos conversions et d’améliorer votre visibilité SEO.</strong></p>

                    <blockquote>
                        "Un site performant aujourd’hui peut devenir obsolète demain. La refonte doit donc s’accompagner d’une vision long terme."
                    </blockquote>

                    <p><strong>Pourquoi envisager une refonte de votre site internet ?</strong></p>
                    <ul>
                        <li>Design dépassé</li>
                        <li>Non responsive</li>
                        <li>Temps de chargement trop long</li>
                        <li>Navigation confuse</li>
                        <li>Contenus obsolètes ou désorganisés</li>
                        <li>Mauvais référencement naturel (SEO)</li>
                        <li>Difficulté à le mettre à jour</li>
                    </ul>

                    <p>Une refonte bien menée permet de corriger ces problèmes en profondeur, tout en insufflant une nouvelle dynamique à votre communication digitale.</p>
                </div>
            </div>

            <div class="about-grid">
                <div class="vision-mission">
                    <div class="vision">
                        <h3><span class="blue">1. Les étapes clés d’une refonte de site réussie</span></h3>
                        <p class="content">Chez nous, chaque projet de refonte est abordé comme un vrai levier stratégique, avec une méthodologie claire et orientée performance :</p>
                        <ul>
                            <li>Audit global du site existant</li>
                            <li>Analyse UX/UI</li>
                            <li>Performance technique (SEO, temps de chargement, mobile)</li>
                            <li>Parcours utilisateur & entonnoirs de conversion</li>
                            <li>Recommandations sur la structure, les contenus, le design</li>
                        </ul>
                    </div>
                    <div class="mission">
                        <h3><span class="red">2. Définition des objectifs</span></h3>
                        <p class="content">Qu’attendez-vous du nouveau site ? Plus de leads ? Une meilleure image ? Une boutique plus performante ?</p>
                        <p class="content">Nous cernons les besoins spécifiques de votre entreprise pour élaborer une solution parfaitement adaptée à vos objectifs stratégiques.</p>
                    </div>
                </div>
            </div>

            <div class="about-grid">
                <div class="vision-mission">
                    <div class="vision">
                        <h3><span class="blue">3. Wireframes & maquettes UX/UI</span></h3>
                        <p class="content">La conception centrée utilisateur est au cœur de notre démarche. Nous utilisons des outils de prototypage interactif tels que Figma ou Adobe XD pour vous donner un aperçu fonctionnel et interactif du futur site.</p>
                    </div>
                    <div class="mission">
                        <h3><span class="red">4. Développement sur-mesure</span></h3>
                        <p class="content">En utilisant des stacks modernes (Laravel, WordPress, React, Tailwind…), nous créons des sites responsive, optimisés pour le SEO et respectant les normes de sécurité et RGPD.</p>
                    </div>
                </div>
            </div>

            <div class="history">
                <h2><span class="sectionTitle">Ce que vous gagnez avec une refonte de qualité</span></h2>
                <h3><em>Une refonte réussie ne se mesure pas seulement au design</em></h3>
                <ul>
                    <li>+ de visibilité sur Google grâce à une structure optimisée</li>
                    <li>+ d’engagement des visiteurs avec une navigation fluide et claire</li>
                    <li>+ de conversions via des CTA bien positionnés et une UX repensée</li>
                    <li>+ de crédibilité avec un site professionnel, moderne et aligné avec votre image de marque</li>
                    <li>+ de flexibilité dans la gestion des contenus (CMS intuitif, autonomie)</li>
                </ul>
                <p> Et surtout : un site qui travaille pour vous, 24h/24, en attirant, convainquant et convertissant vos prospects.</p>
            </div>

            <div class="history">
                <h2><span class="sectionTitle">Cas concrets et résultats mesurables</span></h2>
                <p>Nos clients constatent généralement :</p>
                <ul>
                    <li>Une baisse de 30 à 50 % du taux de rebond</li>
                    <li>Un doublement du temps moyen passé sur le site</li>
                    <li>Une hausse significative des conversions (+25 à +70 %) selon les cas</li>
                    <li>Une remontée SEO sur leurs mots-clés stratégiques</li>
                </ul>
                <p>Par exemple, une entreprise B2B du secteur industriel a multiplié par 3 le nombre de demandes de devis via son site web dans les 2 mois suivant la refonte, simplement en restructurant l’UX, les contenus et les CTA.</p>
            </div>

            <div class="history">
                <h2><span class="sectionTitle">Un site n’est pas figé : il évolue avec votre activité</span></h2>
                <p><strong>Suivi de performances :</strong> Après la mise en ligne, nous assurons un suivi régulier de vos performances pour garantir l'optimisation continue.</p>
                <p><strong>Formation et maintenance :</strong> Nous vous formons à la gestion de votre CMS et offrons une maintenance continue pour suivre l'évolution de vos besoins.</p>
            </div>

            <div class="history">
                <h2><span class="sectionTitle">Modernisez votre vitrine digitale avec un partenaire stratégique</span></h2>
                <p>Votre site web mérite d’être à la hauteur de votre ambition. Avec notre agence, la refonte de site n’est pas un simple relooking : c’est un levier de croissance. Nous allions design, technologie et stratégie pour créer un site qui séduit, rassure et convertit.</p>
                <p><strong>Vous envisagez une refonte de votre site web ?</strong> Discutons ensemble de la meilleure approche.</p>
            </div>
        </div>


        {{-- section 3 Applications web & mobiles, CRM et ERP sur-mesure : développez l'outil dont vous avez besoin--}}

        <div class="journal-masthead">
            <div class="journal-masthead-inner">
                <h2 class="journal-title">Applications web & mobiles, CRM et ERP sur-mesure : développez l'outil dont vous avez besoin</h2>
                <p class="journal-subtitle">Les outils standards ont leurs limites. Lorsqu’une entreprise grandit, ses besoins deviennent plus complexes, plus spécifiques… et les solutions "prêtes à l’emploi" ne suffisent plus. C’est là qu’intervient le développement d’applications web et mobiles sur-mesure, ainsi que la conception de CRM et ERP taillés pour votre métier.</p>
            </div>
            <div class="journal-date-location">
                <!-- Date et emplacement, si nécessaire -->
            </div>
        </div>

        <div class="journal-layout">
            <div class="about-grid">
                <div class="intro-card">
                    <h2><span>Applications web & mobiles, CRM et ERP sur-mesure : développez l'outil dont vous avez besoin</span></h2>
                    <p><strong>Les outils standards ont leurs limites. Lorsqu’une entreprise grandit, ses besoins deviennent plus complexes, plus spécifiques… et les solutions "prêtes à l’emploi" ne suffisent plus. C’est là qu’intervient le développement d’applications web et mobiles sur-mesure, ainsi que la conception de CRM et ERP taillés pour votre métier. Le gain ? Un outil puissant, intuitif, évolutif, conçu pour accélérer vos processus, centraliser vos données et automatiser vos actions.</strong></p>
                    <div class="journal-article-meta">
                        <span class="journal-author">Par Sophie Martin</span> |
                        <span class="journal-publish-date">7 Mai 2025</span>
                    </div>
                    <img src="/api/placeholder/800/400" alt="Applications sur-mesure" class="featured-image">
                    <p><strong>Pourquoi opter pour du sur-mesure ?</strong></p>
                    <p>Chaque organisation est unique. Processus internes, typologie client, organisation des équipes, produits ou services : aucun logiciel tout-en-un ne peut répondre parfaitement à 100 % de vos besoins.</p>
                    <p><strong>Voici ce que permet un développement sur-mesure :</strong></p>
                    <ul>
                        <li>Digitaliser vos processus métiers : gestion des clients, planning, production, logistique, finance, RH, etc.</li>
                        <li>Gagner du temps en automatisant les tâches manuelles répétitives</li>
                        <li>Avoir un outil qui vous ressemble, en parfaite adéquation avec votre fonctionnement</li>
                        <li>Offrir une meilleure expérience utilisateur, avec une interface simple, fluide et optimisée</li>
                        <li>Favoriser la scalabilité, en ajoutant des modules au fur et à mesure de votre croissance</li>
                        <li>Éviter les limites des outils SaaS génériques, souvent rigides, chers à long terme et peu évolutifs</li>
                    </ul>
                </div>
            </div>

            <div class="about-grid">
                <div class="vision-mission">
                    <div class="vision">
                        <h3><span class="blue">Types d’outils que nous développons</span></h3>
                        <p class="content">Nous concevons des applications robustes et performantes, adaptées à tous les types de structures (TPE, PME, ETI, grands groupes) et à divers secteurs (industrie, services, santé, commerce, BTP, etc.) :</p>
                        <ul>
                            <li>CRM sur-mesure : gestion des prospects, relances, pipeline commercial, scoring client, synchronisation email</li>
                            <li>ERP personnalisé : gestion des stocks, production, ressources humaines, comptabilité, fournisseurs</li>
                            <li>Portails client ou extranet : suivi de commandes, documents partagés, support client, statistiques</li>
                            <li>Applications web de gestion : planning, interventions, traçabilité, ticketing, etc.</li>
                            <li>Applications mobiles : accès en mobilité, saisie terrain, notifications push, interface offline</li>
                            <li>Dashboards analytiques : KPIs, rapports personnalisés, datavisualisation en temps réel</li>
                        </ul>
                    </div>
                    <div class="mission">
                        <h3><span class="red">Une méthodologie agile, orientée résultat</span></h3>
                        <p class="content">Notre approche est collaborative, itérative et orientée business :</p>
                        <ul>
                            <li>Atelier de cadrage : compréhension de vos enjeux, objectifs, contraintes techniques</li>
                            <li>Modélisation fonctionnelle : définition des workflows, schémas de base de données, rôles utilisateurs</li>
                            <li>UX/UI Design : maquettes ergonomiques et responsives, validées avec vos équipes</li>
                            <li>Développement modulaire : Backend solide (Laravel, Node.js…), Frontend réactif (React, Vue.js…), API REST ou GraphQL</li>
                            <li>Sécurité : authentification, rôles, logs</li>
                            <li>Recette, formation et accompagnement : on teste ensemble, on vous forme à l’usage, on reste à vos côtés</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="history">
                <h2><span class="sectionTitle">Les bénéfices concrets d’une solution sur-mesure</span></h2>
                <ul>
                    <li>+50 % de productivité grâce à l’automatisation et aux process fluides</li>
                    <li>Moins d’erreurs humaines grâce à des validations et contrôles intégrés</li>
                    <li>Meilleure communication interne grâce à une centralisation des données</li>
                    <li>+ de satisfaction client avec des réponses plus rapides, des suivis clairs, un espace dédié</li>
                    <li>Réduction des coûts sur le long terme (plus de licences SaaS multiples, d’outils cloisonnés)</li>
                </ul>
                <p> Votre outil devient un véritable levier de performance, pas un frein.</p>
            </div>

            <div class="history">
                <h2><span class="sectionTitle">Un outil évolutif, pensé pour la croissance</span></h2>
                <p>Parce qu’un bon outil n’est jamais figé, nous développons vos applications avec une logique modulaire :</p>
                <ul>
                    <li>Vous commencez par l’essentiel, nous le livrons rapidement.</li>
                    <li>Vous ajoutez des fonctionnalités au fil de vos besoins.</li>
                    <li>Vous gardez la main sur vos données et vos règles métiers.</li>
                </ul>
                <p>C’est cette agilité technique et stratégique qui vous permet de rester compétitif, de vous adapter rapidement et de vous différencier.</p>
            </div>

            <div class="history">
                <h2><span class="sectionTitle">Ils ont fait le choix du sur-mesure</span></h2>
                <p>Une société de services terrain a divisé par deux le temps de gestion hebdomadaire de ses plannings grâce à une application mobile métier.</p>
                <p>Un cabinet de conseil a doublé la conversion de ses leads en créant un CRM entièrement adapté à son cycle de vente spécifique.</p>
                <p>Une entreprise e-commerce a augmenté son taux de satisfaction client en mettant en place un extranet permettant le suivi de commandes, la gestion des SAV et l’accès aux factures.</p>
            </div>

            <div class="history">
                <h2><span class="sectionTitle">Et si on construisait l’outil idéal pour votre business ?</span></h2>
                <p>Vous perdez du temps avec des tableaux Excel, vous jonglez entre 4 logiciels, ou vous rêvez d’avoir "tout au même endroit" ? Il est temps de penser efficacité, performance et personnalisation.</p>
                <p>Nous construisons avec vous des outils puissants, évolutifs, et parfaitement alignés avec vos objectifs.</p>
                <p><strong>Discutons de votre projet d’application ou de CRM/ERP sur-mesure.</strong></p>
            </div>
        </div>




        {{-- section 4 Web scraping & automatisation : libérez le potentiel de vos données--}}

        <div class="journal-masthead">
            <div class="journal-masthead-inner">
                <h2 class="journal-title">Automatisation Intelligente : Libérez le potentiel de vos données</h2>
                <p class="journal-subtitle">Transformez vos données en opportunités grâce à l’automatisation intelligente</p>
            </div>
            <div class="journal-date-location">
            </div>
        </div>

        <div class="journal-layout">
            <div class="about-grid">
                <div class="intro-card">
                    <h2><span>Automatisation Intelligente : Libérez le potentiel de vos données</span></h2>
                    <p><strong>Dans un monde où l’information est une ressource stratégique, savoir collecter, analyser et utiliser les bonnes données fait toute la différence. L’automatisation intelligente transforme cette masse d’informations disponibles en opportunités concrètes.</strong></p>
                    <div class="journal-article-meta">
                        <span class="journal-author">Par Jean Dupont</span> |
                        <span class="journal-publish-date">8 Mai 2025</span>
                    </div>
                    <img src="/api/placeholder/800/400" alt="Automatisation Intelligente" class="featured-image">
                    <p>L'automatisation permet de collecter des données en temps réel sur vos concurrents, surveiller les prix, analyser des tendances de marché, et bien plus encore.</p>
                </div>
            </div>

            <div class="about-grid">
                <div class="vision-mission">
                    <div class="vision">
                        <h3><span class="blue">Automatisation Intelligente : Quand les robots travaillent pour vous</span></h3>
                        <p class="content">L’automatisation va au-delà de la simple collecte de données. Elle permet d’automatiser des tâches répétitives, d’intégrer les données dans vos outils internes, et de générer des rapports automatiquement.</p>
                    </div>
                </div>
            </div>

            <div class="about-grid">
                <div class="vision-mission">
                    <div class="vision">
                        <h3><span class="blue">Quelques cas d’usage concrets</span></h3>
                        <p class="content">Nous accompagnons des entreprises dans la création de systèmes d’automatisation personnalisés, voici quelques exemples :</p>
                        <ul>
                            <li><strong>Veille concurrentielle e-commerce :</strong> Récupération quotidienne des prix, stocks et nouveautés des concurrents.</li>
                            <li><strong>Génération de leads B2B :</strong> Extraction de contacts qualifiés depuis des annuaires et marketplaces.</li>
                            <li><strong>Surveillance d’appels d’offres publics :</strong> Détection automatique de nouvelles opportunités correspondant à vos critères.</li>
                            <li><strong>Reporting automatisé :</strong> Génération de rapports avec des données mises à jour en temps réel.</li>
                        </ul>
                    </div>
                    <div class="mission">
                        <h3><span class="red">Éthique, légalité et sécurité</span></h3>
                        <p class="content">L’automatisation intelligente respecte les législations, telles que le RGPD, et utilise des pratiques éthiques pour protéger les données et la sécurité des utilisateurs.</p>
                    </div>
                </div>
            </div>

            <div class="history">
                <h2><span class="sectionTitle">Les bénéfices de l’Automatisation Intelligente</span></h2>
                <h3><em>Des gains de temps et une prise de décision plus rapide</em></h3>
                <p><strong>Investir dans l’automatisation intelligente permet de réduire de manière significative le temps consacré à des tâches chronophages, tout en offrant une meilleure réactivité et une data toujours à jour.</strong></p>
                <ul>
                    <li><strong>Économies de temps :</strong> Réduction de jusqu’à -70 % sur des tâches répétitives.</li>
                    <li><strong>Amélioration des performances :</strong> Grâce à une veille continue, même hors des heures ouvrées.</li>
                    <li><strong>Intégration fluide :</strong> Connexion avec vos outils métiers (CRM, ERP, Google Sheets, Notion…).</li>
                </ul>
            </div>

            <div class="history">
                <h2><span class="sectionTitle">Passez à l’automatisation stratégique</span></h2>
                <p><strong>Ne laissez pas vos équipes faire manuellement ce qu’un robot pourrait accomplir en quelques secondes.</strong> Adoptez dès maintenant des solutions d'automatisation intelligente pour gagner en efficacité et en performance.</p>
            </div>
        </div>


        {{-- section 5 Pourquoi choisir notre agence pour vos projets digitaux--}}
        <div class="journal-masthead">
            <div class="journal-masthead-inner">
                <h2 class="journal-title">Pourquoi choisir notre agence pour vos projets digitaux ?</h2>
                <p class="journal-subtitle">Dans un écosystème digital en perpétuelle évolution, choisir le bon partenaire pour développer vos projets web, vos campagnes digitales ou vos outils métiers n’est pas anodin.</p>
            </div>
            <div class="journal-date-location">
            </div>
        </div>

        <div class="journal-layout">
            <div class="about-grid">
                <div class="intro-card">
                    <h2><span>Pourquoi choisir notre agence pour vos projets digitaux ?</span></h2>
                    <p><strong>Dans un écosystème digital en perpétuelle évolution, choisir le bon partenaire pour développer vos projets web, vos campagnes digitales ou vos outils métiers n’est pas anodin. Il ne s’agit plus simplement d’avoir un beau site ou une application fonctionnelle, mais d’avoir un dispositif digital complet, pensé pour servir vos objectifs business, générer du ROI, et s’intégrer durablement à votre stratégie globale. Chez nous, chaque projet est conçu comme un levier de croissance.</strong></p>
                    <div class="journal-article-meta">
                        <span class="journal-author">Par Jean Dupont</span> |
                        <span class="journal-publish-date">8 Mai 2025</span>
                    </div>
                    <img src="/api/placeholder/800/400" alt="Projets Digitaux" class="featured-image">
                </div>
            </div>

            <div class="about-grid">
                <div class="vision-mission">
                    <div class="vision">
                        <h3><span class="blue"> Une approche orientée résultats</span></h3>
                        <p class="content">Notre priorité, ce ne sont pas les lignes de code ou les pixels : ce sont vos résultats.</p>
                        <p class="content">Vous voulez générer plus de leads ? Nous concevons des parcours utilisateurs qui transforment.</p>
                        <p class="content">Vous voulez automatiser vos processus ? On vous aide à gagner en efficacité opérationnelle.</p>
                        <p class="content">Vous cherchez à scaler vos opérations ? On construit des outils sur-mesure, robustes et évolutifs.</p>
                        <p class="content">Vous manquez de visibilité ? On crée des écosystèmes pensés pour performer en SEO, SEA, social ads, ou en programmatique.</p>
                        <p class="content"><strong>Chaque livrable (site, CRM, application ou stratégie d’acquisition) a un seul but : servir vos KPIs.</strong></p>
                    </div>
                </div>
            </div>

            <div class="about-grid">
                <div class="vision-mission">
                    <div class="vision">
                        <h3><span class="blue"> Une vision stratégique à 360°</span></h3>
                        <p class="content">Nous ne sommes pas de simples exécutants. Nous sommes partenaires de votre stratégie digitale. Cela signifie :</p>
                        <ul>
                            <li><strong>Compréhension approfondie de votre business model</strong></li>
                            <li><strong>Analyse de votre marché, de vos concurrents, de votre cible</strong></li>
                            <li><strong>Recommandations proactives pour maximiser votre performance</strong></li>
                            <li><strong>Coordination globale : branding, SEO, automation, acquisition, conversion</strong></li>
                        </ul>
                        <p class="content">Notre force, c’est cette double compétence : la technique (développement, intégration, automatisation) et le marketing digital (acquisition, positionnement, tunnel de conversion). Résultat : vous gagnez en cohérence et en efficacité.</p>
                    </div>
                </div>
            </div>

            <div class="about-grid">
                <div class="vision-mission">
                    <div class="vision">
                        <h3><span class="blue"> Une équipe experte et polyvalente</span></h3>
                        <p class="content">Notre équipe est composée de développeurs seniors, consultants en performance digitale, UX/UI designers, experts SEO/SEA, growth hackers et chefs de projet rigoureux.</p>
                        <p class="content">Ce mix nous permet d’intervenir à tous les niveaux, que ce soit :</p>
                        <ul>
                            <li><strong>En amont :</strong> conception de stratégie digitale, wireframes, positionnement</li>
                            <li><strong>En production :</strong> développement web, CRM, scraping, automatisation</li>
                            <li><strong>En activation :</strong> campagnes payantes, SEO, social media</li>
                            <li><strong>En suivi :</strong> A/B testing, reporting, analyse ROI, scaling</li>
                        </ul>
                        <p class="content">Vous avez ainsi un interlocuteur unique, mais une force de frappe complète derrière chaque mission.</p>
                    </div>
                </div>
            </div>

            <div class="about-grid">
                <div class="vision-mission">
                    <div class="vision">
                        <h3><span class="blue"> Une méthodologie agile, axée collaboration</span></h3>
                        <p class="content">Nous adoptons une approche agile et itérative, adaptée à vos contraintes de temps, de budget et d’organisation interne.</p>
                        <ul>
                            <li><strong>Kick-off stratégique :</strong> objectifs business, ressources, deadline</li>
                            <li><strong>Sprints courts et points réguliers :</strong> vous gardez la main à chaque étape</li>
                            <li><strong>Recettes fréquentes, tests utilisateurs, validations successives</strong></li>
                            <li><strong>Livrables documentés et exploitables par vos équipes internes</strong></li>
                        </ul>
                        <p class="content">Maintenance & évolutivité : nos solutions sont pensées pour durer et grandir avec vous.</p>
                        <p class="content">Vous ne subissez pas le projet, vous en êtes acteur.</p>
                    </div>
                </div>
            </div>

            <div class="about-grid">
                <div class="vision-mission">
                    <div class="vision">
                        <h3><span class="blue"> Un accompagnement humain, transparent et durable</span></h3>
                        <p class="content">Nous croyons à la confiance et à la transparence. Pas de jargon technique inutile, pas de devis flou. On vous explique, on co-construit, on vous forme si besoin.</p>
                        <p class="content">Et surtout, nous bâtissons des relations de long terme. Nos meilleurs projets, ce sont ceux que nous avons faits en étroite collaboration avec nos clients, sur plusieurs années, en faisant évoluer les dispositifs en même temps que leurs enjeux.</p>
                        <p class="content">Nous ne cherchons pas à vous vendre des “prestations”, mais à devenir un véritable partenaire digital.</p>
                    </div>
                </div>
            </div>

            <div class="history">
                <h2><span class="sectionTitle"> Une expertise multi-secteurs, multi-outils</span></h2>
                <p class="content">Nous avons travaillé avec des :</p>
                <ul>
                    <li>PME industrielles</li>
                    <li>Startups tech</li>
                    <li>Agences marketing</li>
                    <li>Cabinets juridiques</li>
                    <li>Institutions publiques</li>
                    <li>E-commerçants, infopreneurs, consultants indépendants</li>
                </ul>
                <p class="content">Et avec des stacks aussi variées que :</p>
                <ul>
                    <li>Laravel, Symfony, React, Vue.js, Next.js</li>
                    <li>WordPress, Webflow, Shopify, Prestashop</li>
                    <li>HubSpot, Pipedrive, Notion, Airtable</li>
                    <li>Google Tag Manager, Looker Studio, Zapier, Make (ex-Integromat)</li>
                </ul>
                <p class="content">Quel que soit votre environnement ou votre ambition, on s’adapte à votre réalité terrain.</p>
            </div>

            <div class="history">
                <h2><span class="sectionTitle"> Ce que nos clients apprécient</span></h2>
                <ul>
                    <li>Notre réactivité et notre rigueur</li>
                    <li>La clarté de notre communication</li>
                    <li>Nos livrables pensés pour le ROI</li>
                    <li>Notre capacité à s’immerger dans leur métier</li>
                    <li>Et surtout : les résultats concrets obtenus</li>
                </ul>
            </div>

            <div class="history">
                <h2><span class="sectionTitle"> En résumé : pourquoi nous choisir ?</span></h2>
                <ul>
                    <li><strong>C’est un levier de performance</strong></li>
                    <li><strong>C’est un outil de croissance</strong></li>
                    <li><strong>C’est une réponse à vos vrais enjeux business</strong></li>
                    <li><strong>Et c’est une collaboration humaine et durable</strong></li>
                </ul>
            </div>

            <div class="history">
                <h2><span class="sectionTitle"> Prêts à passer à l’action ?</span></h2>
                <p><strong>Vous avez un projet ? Un doute sur votre stratégie digitale ? Besoin d’un audit, d’un accompagnement ou d’un partenaire technique de confiance ?</strong> Parlez-en avec nous.</p>
                <p><strong>Réservez un appel stratégique gratuit ou écrivez-nous dès maintenant. Ensemble, donnons vie à un dispositif digital qui fera vraiment la différence.</strong></p>
            </div>
        </div>



        <script>
          // Script pour ajouter des effets dynamiques à la section journal
          (function() {
            // Animation subtile pour les titres
            const journalHeadlines = document.querySelectorAll('.intro-card h2 span, .vision h3 span.blue, .mission h3 span.red');
            journalHeadlines.forEach((headline, index) => {
              setTimeout(() => {
                headline.style.opacity = '0';
                headline.style.transition = 'opacity 0.8s ease';
                setTimeout(() => {
                  headline.style.opacity = '1';
                }, 100);
              }, index * 200);
            });

            // Fonction pour afficher la date actuelle
            function updateJournalDate() {
              const dateDisplay = document.querySelector('.journal-date');
              if (dateDisplay) {
                const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
                const today = new Date();
                dateDisplay.textContent = today.toLocaleDateString('fr-FR', options);
              }
            }

            // Mettre à jour la date
            updateJournalDate();
          })();
        </script>
      </section>













   @stop

@section('footerScripts')
    <script src="{{asset('siteScripts/home.js')}}"></script>


    <script>
        document.addEventListener('DOMContentLoaded',() => {
            // Function to disable scrolling
            const disableScroll = () => {
                document.body.style.overflow = 'hidden';
            };

            // Function to enable scrolling
            const enableScroll = () => {
                document.body.style.overflow = 'auto';
            };

            const memberCards = document.querySelectorAll('.memberCard');
            const popUp = document.getElementById('popUp');
            const overlay = document.getElementById('overlay');

            memberCards.forEach(memberCard => {
                memberCard.addEventListener('click', function(){
                    popUp.classList.add('show');
                    overlay.classList.add('show');
                    disableScroll();
                })
            });


            document.addEventListener('click', function(event){
                const close = document.getElementById('close');

                const target = event.target;
                const isClickedOutsidePopup = !popUp.contains(event.target) && !Array.from(memberCards).some(card => card.contains(event.target));
                const isClickedinclose = close.id === event.target.id;

                if(isClickedOutsidePopup || isClickedinclose){
                    popUp.classList.remove('show');
                    overlay.classList.remove('show');
                    enableScroll();
                }
            })

        })

    </script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const overlay = document.getElementById('overlay');
        const fullBioButtons = document.querySelectorAll('.arrow-circle-inhover');
        const closeButtons = document.querySelectorAll('.closeBtn');
        const allPopups = document.querySelectorAll('.popUp');

        const disableScroll = () => document.body.style.overflow = 'hidden';
        const enableScroll = () => document.body.style.overflow = 'auto';

        // Ouvrir la popup liée au bouton
        fullBioButtons.forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                const targetId = btn.getAttribute('data-target');
                const popup = document.getElementById(targetId);

                popup.classList.add('show');
                overlay.classList.add('show');
                disableScroll();
            });
        });

        // Fermer toutes les popups
        function closeAllPopups() {
            allPopups.forEach(popup => popup.classList.remove('show'));
            overlay.classList.remove('show');
            enableScroll();
        }

        // Boutons X
        closeButtons.forEach(closeBtn => {
            closeBtn.addEventListener('click', closeAllPopups);
        });

        // Clic sur overlay
        overlay.addEventListener('click', closeAllPopups);
    });
</script>

@stop