{% extends 'base.html.twig' %}
{% block body %}
<main role="main" class="container-fluid">
<div id="accueil">
<div class="gauche">
<img class="persos" src="{{ asset('build/images/accueil-persos.svg') }}" alt="personnages" loading="lazy">
<img class="soleil" src="{{ asset('build/images/accueil-soleil.svg') }}" alt="soleil" loading="lazy">
</div>
<div class="texte">
<h1>
<div class="visually-hidden">
23 Juin -
</div>
Créateurs <br>de site <br class="mobile">web
</h1>
<img class="triangles" src="{{ asset('build/images/accueil-triangles.svg') }}" alt="" loading="lazy">
<img class="triangles mobile" src="{{ asset('build/images/accueil-triangles-mobile.svg') }}" alt="" loading="lazy">
<h2 class="sous-titre">
<span>Développez votre visibilité</span> avec un site web sur-mesure
</h2>
<p>
Vous n’avez pas besoin d’être un pro en informatique pour trouver des clients sur internet. 23 Juin
aide les <b>petites et moyennes entreprises</b> comme vous à créer un site web <b>professionnel</b>,
<b>simple d’utilisation</b> et qui vous ressemble vraiment.
</p>
</div>
<img class="fond-feuilles" src="{{ asset('build/images/accueil-feuilles.svg') }}" alt="fond-feuilles" loading="lazy">
</div>
<div id="services">
<div class="container">
<h2 class="titre-flottant">Nos <br>services</h2>
<div class="contenu">
<h3 class="titre-section">
<span>Nos services</span>
Vos clients sont juste là, à portée de clic
<span class="trait"></span>
</h3>
<p class="orange">
<b>
Cette année, 98% des Français prévoient de faire des achats en ligne. Mais si vous n’avez
pas de site internet, ils ne sauront sans doute jamais que vous existez.
</b>
</p>
<br>
<p>
Quel que soit votre projet, les développeurs de 23 Juin vous aident à créer un site web <b>rapide
et sécurisé</b>, dont vous serez fier.
</p>
</div>
<div class="liste-services">
<div>
<div class="vignette">
<h4>Site <br>vitrine</h4>
<p>Boostez la visibilité de votre entreprise.</p>
</div>
<img src="{{ asset('build/images/services-boxshadow.svg') }}" alt="" class="box-shadow" loading="lazy">
</div>
<div>
<div class="vignette">
<h4>Maintenance & refonte</h4>
<p>Actualisez et optimisez votre site web.</p>
</div>
<img src="{{ asset('build/images/services-boxshadow.svg') }}" alt="" class="box-shadow" loading="lazy">
</div>
<div>
<div class="vignette">
<h4>Boutique <br>en ligne</h4>
<p>Trouvez de nouveaux clients où vous le souhaitez.</p>
</div>
<img src="{{ asset('build/images/services-boxshadow.svg') }}" alt="" class="box-shadow" loading="lazy">
</div>
<div>
<div class="vignette">
<h4>Développe­ment <br>sur-mesure</h4>
<p>Ajoutez des fonctionnalités à votre site.</p>
</div>
<img src="{{ asset('build/images/services-boxshadow.svg') }}" alt="" class="box-shadow" loading="lazy">
</div>
<div>
<div class="vignette">
<h4>Site <br>sur-mesure</h4>
<p>Exprimez vos besoins sans limite.</p>
</div>
<img src="{{ asset('build/images/services-boxshadow.svg') }}" alt="" class="box-shadow" loading="lazy">
</div>
</div>
</div>
<img src="{{ asset('build/images/services-bananier.svg') }}" alt="" class="bananier" loading="lazy">
<img src="{{ asset('build/images/services-pissenlit.svg') }}" alt="" class="pissenlit" loading="lazy">
</div>
<img src="{{ asset('build/images/equipe-fond.png') }}" alt="" class="equipe-fond-top" loading="lazy">
<div id="equipe">
<div class="container">
<h2 class="titre-flottant">Qui <br>sommes <br>nous ?</h2>
<div class="contenu">
<h3 class="titre-section">
<span>Qui sommes-nous ?</span>
L’humain <br>d’abord <br>la technique <br>ensuite
<span class="trait"></span>
</h3>
</div>
</div>
<div class="blocs">
<div class="bloc">
<div class="texte d-block d-lg-none">
<h4>Le 23 Juin ...</h4>
</div>
<div class="vignette">
<h4>C’est d’abord <br>un constat</h4>
<p>
Le digital est devenu incontournable. <b>81% des Français achètent sur internet</b>. Et on
compte chaque seconde, plus de 32 achats en ligne.
<br> <br>
Pourtant, les petites et moyennes entreprises ont du mal à profiter des <b>opportunités
inédites</b> qu’offre internet. Souvent par manque de temps, de budget, ou de
connaissances.
</p>
</div>
<img src="{{ asset('build/images/equipe-after.svg') }}" alt="" class="after d-none d-lg-block" loading="lazy">
</div>
<div class="bloc orange">
<div class="texte d-none d-lg-block">
<h4>Le 23 Juin ...</h4>
</div>
<div class="vignette">
<h4 class="">C’est ensuite <br>une envie</h4>
<p>
Celle d’aider les petites et moyennes entreprises à <b>surmonter ces blocages</b> pour
booster
leur visibilité en ligne.
<br><br>
On pense que développer, ça ne veut pas seulement dire coder un beau site web, puis vous
laisser vous débrouiller avec.
<br><br>
Alors on vous propose un <b>accompagnement personnalisé</b>. Avant, pendant et après votre
projet.
</p>
</div>
<img src="{{ asset('build/images/equipe-boxshadow.svg') }}" alt="" class="boxshadow" loading="lazy">
</div>
<div class="bloc">
<div class="vignette">
<img src="{{ asset('build/images/equipe-pissenlit.svg') }}" alt="" loading="lazy">
<h4>C'est enfin <br>une rencontre</h4>
<p>
Celle de Léa, anciennement bibliothécaire, et Julien, développeur dans
une agence web.
<br><br>
Elle s’occupe du Front, c’est-à-dire toute la partie “visible” de votre site, et lui du
Back, autrement dit, tout ce qu’il se passe lorsqu’un visiteur interagit avec votre
site.
<br><br>
Et ensemble, ils peuvent vous aider à réaliser n’importe quel projet web, à un <b>coût
maîtrisé</b>.
<br><br>
Retrouvez leurs profils sur <img src="{{ asset('build/images/malt.png') }}" class="malt"
alt="" loading="lazy">Malt : <a
href="https://www.malt.fr/profile/juliendenechere" target="_blank">Julien</a> & <a
href="https://www.malt.fr/profile/leadenechere" target="_blank">Léa</a>
</p>
</div>
<img src="{{ asset('build/images/equipe-after.svg') }}" alt="" class="after d-block d-lg-none" loading="lazy">
</div>
</div>
</div>
<div id="technologies">
<div class="container">
<h2 class="titre-flottant">Techno­logies</h2>
<div class="contenu">
<h3 class="titre-section">
<span>Technologies</span>
Un éventail de <br class="desktop">connais­sances <br class="desktop">pour répondre <br
class="desktop">à vos besoins
<span class="trait"></span>
</h3>
</div>
</div>
<div class="container bottom">
<div class="row">
<div class="col-12 col-lg-5 texte-dynamique">
<img src="{{ asset('build/images/techno-deco.svg') }}" alt="" loading="lazy">
<div class="contenu active" data-target="symfony">
<h4>
Symfony
<span class="trait"></span>
</h4>
<p>
Symfony est un <b>framework</b> qui représente un ensemble de composants (aussi appelés
librairies) PHP autonomes qui peuvent être utilisés dans des projets web privé ou open
source.</p>
</div>
<div class="contenu" data-target="api">
<h4>
API Rest
<span class="trait"></span>
</h4>
<p>
Une API, ou interface de programmation d'application, est un ensemble de définitions et
de protocoles qui facilite la création et l'intégration de logiciels
d'applications.</p>
</div>
<div class="contenu" data-target="php">
<h4>
PHP
<span class="trait"></span>
</h4>
<p>
PHP est un <b>langage de programmation</b> libre, principalement utilisé pour produire
des
pages Web dynamiques via un serveur HTTP.</p>
</div>
<div class="contenu" data-target="prestashop">
<h4>
Prestashop
<span class="trait"></span>
</h4>
<p>
PrestaShop est un CMS open source pour équiper les sites d'<b>e-commerce</b>. Elle est
faite pour
gérer à la fois le catalogue de produits, les commandes, les promotions, et les
livraisons.</p>
</div>
<div class="contenu" data-target="sass">
<h4>
SASS
<span class="trait"></span>
</h4>
<p>
Sass est un langage de script préprocesseur qui est <b>compilé ou interprété en CSS</b>.
</p>
</div>
<div class="contenu" data-target="ajax">
<h4>
Ajax
<span class="trait"></span>
</h4>
<p>
Ajax est une méthode utilisant différentes technologies dont la particularité est de
permettre d'effectuer des requêtes
au serveur web de <b>modifier partiellement la page web affichée</b> sur le
poste client sans avoir à afficher une nouvelle page complète.
</p>
</div>
<div class="contenu" data-target="wordpress">
<h4>
Wordpress
<span class="trait"></span>
</h4>
<p>
WordPress est un système de gestion de contenu gratuit, libre et open-source. Il permet
essentiellement de réaliser des blogs ou des <b>sites vitrines</b>.
Ce logiciel écrit en PHP repose sur une base de données MySQL.
</p>
</div>
<div class="contenu" data-target="css3">
<h4>
CSS3
<span class="trait"></span>
</h4>
<p>
Le CSS correspond à un langage informatique permettant de mettre en forme, de <b>styliser
des pages web</b> (HTML ou XML).
</p>
</div>
<div class="contenu" data-target="sql">
<h4>
SQL
<span class="trait"></span>
</h4>
<p>
SQL est un langage de programmation permettant de
manipuler les <b>bases de données</b>. Ce langage
permet principalement de communiquer avec les bases de données afin de gérer les données
qu’elles contiennent.
</p>
</div>
<div class="contenu" data-target="jquery">
<h4>
JQuery
<span class="trait"></span>
</h4>
<p>
jQuery est une bibliothèque <b>JavaScript</b> libre créée pour faciliter
l'écriture de scripts côté client dans le code HTML des pages web.
</p>
</div>
</div>
<div class="col-12 col-lg-7 liste">
<div id="api">API Rest</div>
<div id="php">PHP</div>
<div id="prestashop">Prestashop</div>
<div id="sass">SASS</div>
<div id="ajax">AJAX</div>
<div id="wordpress">Wordpress</div>
<div id="css3">CSS3</div>
<div id="sql">SQL</div>
<div id="jquery">JQUERY</div>
<div id="symfony" class="active">Symphony</div>
</div>
</div>
</div>
</div>
{% include '_partials/realisations.html.twig' %}
<div id="expertise">
<div class="container">
<img src="{{ asset('build/images/expertise-triangles.svg') }}" class="triangles" alt="" loading="lazy">
<h2 class="titre-flottant">
Notre <br>Expertise
</h2>
<div class="contenu">
<h3 class="titre-section">
<span>Notre expertise</span>
Partez à la <br>découverte <br>du web en toute <br>sécurité
<span class="trait"></span>
</h3>
<p>
Si vous n’êtes pas à l’aise derrière un clavier, lancer votre site web peut sembler intimidant.
Comment savoir quel budget prévoir ? Avez-vous besoin d’un site vitrine ou d’une boutique en
ligne ? Plutôt Wordpress ou Prestashop ?
</p>
</div>
<div class="competences">
<ul>
<li>Rapide</li>
<li>Performant</li>
<li>Sécurisé</li>
<li>Simple d'utilisation</li>
</ul>
</div>
</div>
</div>
{% include '_partials/contact.html.twig' %}
</main>
{% endblock %}