templates/home/homepage.html.twig line 1

  1. {% extends 'base.html.twig' %}
  2. {% trans_default_domain "presentation" %}
  4. {% block bgContainer %}
  6. <style>
  7.     #avatarBlock .card:hover {
  8.         background-color: #E6F4FC;
  9.     }
  11.     .text-bg-blue {
  12.         background-color: #30AADE !important;
  13.     }
  15.     .text-bg-orange {
  16.         background-color: #F26528 !important;
  17.     }
  19.     .text-bg-grey {
  20.         background-color: #E6E6E6 !important;
  21.     }
  23.     #presentationPage h1 {
  24.         font-size: 2.6em;
  25.         font-weight: bold;
  26.         line-height: 1.5em;
  27.         color: #FFFFFF;
  28.         margin: -10px auto 25px;
  29.         text-align: center;
  30.     }
  31.     #presentationPage h1.dark {
  32.         color: #4c4e66;
  33.     }
  35.     #presentationPage .mw1100 {
  36.         max-width: 1100px;
  37.         width: 100%;
  38.         margin-left: auto;
  39.         margin-right: auto;
  40.     }
  41.     .ratio.ratio-16x9 {
  42.         width: 50%;
  43.         margin: 0 auto;
  44.     }
  45.     @media (max-width: 1199.98px) {
  46.         .ratio.ratio-16x9 {
  47.             width: 75%;
  48.         }
  49.     }
  50.     @media (max-width: 767.98px) {
  51.         .ratio.ratio-16x9 {
  52.             width: 100%;
  53.         }
  54.     }
  55. </style>
  56. <div id="presentationPage">
  57.     <div class="text-bg-blue pt-5 text-center">
  58.         <h1>{% trans %}Vos enfants peuvent facilement parler anglais{% endtrans %}</h1>
  59.         <img class="d-block m-auto img-fluid mw1100" src="{{ asset('images/presentation/intro-picture.jpg') }}" />
  61.     </div>
  62.     <div class="text-bg-orange py-5 text-center">
  63.         <h1>{% trans %}Mais ces facilités disparaissent à l'adolescence{% endtrans %}<br/>{% trans %}Il faut agir rapidement avant l'entrée au collège{% endtrans %}</h1>
  64.         <div class="ratio ratio-16x9">
  65.         <video controls muted="true" autoplay="true" poster="{{ asset('video/presentation/presentation_09_2019.jpg') }}" id="firstVideo" >
  66.             {% if app.request.locale == 'es' %}
  67.                 <source src="{{ asset('video/presentation/presentation_09_2019-es.mp4') }}" type="video/mp4">
  68.             {% else %}
  69.                 <source src="{{ asset('video/presentation/presentation_09_2019.mp4') }}" type="video/mp4">
  70.             {% endif %}
  71.             
  72.         </video>
  73.         </div>
  74.     </div>
  75.     <div class="py-5 text-center">
  76.         <h1 class="dark">{% trans %}SpeakyPlanet est la Méthode&nbsp;N°1<br/>pour apprendre l'anglais aux enfants de&nbsp;4&nbsp;à&nbsp;12&nbsp;ans{% endtrans %}</h1>
  77.         <div class="clearfix text-start mw1100">
  78.             <img class="float-end" src="{{ asset('images/presentation/speaky-yes.jpg') }}"></img>
  79.             <ul class="mixColors">
  80.                 <li>{% trans with {'%nb%': '150 000'} %}Déjà plus de %nb% familles abonnées{% endtrans %}</li>
  81.                 <li>{% trans with {'%nb%': '120 000'} %}Plus de %nb% mentions "J'aime" sur Facebook{% endtrans %}</li>
  82.                 <li>{% trans with {'%nb%': '97%'} %}%nb% de clients satisfaits{% endtrans %}</li>
  83.                 <li>{% trans with {'%nb%': '89%'} %}%nb% des enfants qui ont pratiqué pendant un an parlent anglais{% endtrans %}</li>
  84.             </ul>
  85.         </div>
  86.         <a type="button" class="btn btn-orange shadow btn-lg" href="{{ path('tunnel_register', {}) }}" >{% trans %}J'inscris mon enfant{% endtrans %}</a>
  87.         <br>
  88.         <style>
  89.             ul.mixColors {
  90.                 list-style: none; /* Remove HTML bullets */
  91.                 padding: 0;
  92.                 margin: 0;
  93.             }
  94.             
  95.             ul.mixColors li:nth-child(even)::before {
  96.                 color: #F26528;
  97.             }
  98.             
  99.             ul.mixColors li::before {
  100.                 content: "•";
  101.                 color: #30AADE;
  102.                 font-size: 1.3em;
  103.                 padding: 0 8px 0 0;
  104.             }
  105.             
  106.             ul.mixColors li {
  107.                 margin: 10px 0;
  108.                 font-size: 1.4em;
  109.             }
  110.         </style>
  111.     </div>
  112.     <div class="py-5 text-center w-75 m-auto">
  113.         <iframe id='AV_widget_iframe' frameBorder="0" width="100%" height="100%" src="//cl.avis-verifies.com/fr/cache/5/7/3/57347797-a6ee-b3f4-1901-db7f06052b70/widget4/57347797-a6ee-b3f4-1901-db7f06052b70horizontal_index.html"></iframe>
  114.         <a type="button" class="btn btn-white shadow btn-lg" href="{{ path('tunnel_gift_register', {}) }}" >{% trans %}Offrir SpeakyPlanet{% endtrans %}</a>
  115.     </div>
  116.     <div id="pedagogie" class="text-bg-orange py-5 text-center">
  117.         <h3><span class="light">{% trans %}LA PÉDAGOGIE PAR LE JEU{% endtrans %}</span></h3>
  118.         <br/>
  119.         <div class="container" ><br/>
  120.             <p style="text-align: center; color: #FFFFFF;">
  121.             {% trans %}Le jeu motive.{% endtrans %}<br/>•
  122.             <br/>{% trans %}Le jeu permet une meilleure concentration.{% endtrans %}<br/>•
  123.             <br/>{% trans %}Le jeu, c’est une formation dans le plaisir.{% endtrans %}<br/>•
  124.             <br/>{% trans %}Le jeu valorise les enfants. Ils se sentent exister.{% endtrans %}
  125.             </p>
  126.             <br/>
  127.         </div>
  128.         <style>
  129.             #presentationPage span.light {
  130.                 color: #ffffff;
  131.             }
  133.             #presentationPage h3 {
  134.                 font-size: 2.8em;
  135.                 line-height: 1.2em;
  136.                 margin: 0 auto;
  137.                 text-align: center;
  138.                 width: 98%;
  139.             }
  141.             #pedagogie p {
  142.                 color: #333;
  143.                 font-size: 1.4em;
  144.                 font-weight: bold;
  145.                 line-height: 1.5em;
  146.             }
  147.         </style>
  148.     </div>
  149.     <div class="text-bg-blue py-5 text-center">
  150.         <h3><span class="light">{% trans %}Pourquoi des jeux en ligne pour apprendre l'anglais&nbsp;?{% endtrans %}</span></h3>
  151.         
  152.         <div id="prtB" class="row py-5 mw1100">
  153.             <div class="col-md-6 col-12 py-2">
  154.                 <div class="card m-2 h-100">
  155.                     <img class="d-block m-auto" src="{{ asset('images/presentation/picto5.png') }}" alt="" />
  156.                     <div class="card-footer">
  157.                         {% trans %}Les jeux en ligne mêlent images, voix et interactivité.{% endtrans %}
  158.                     </div>
  159.                 </div>
  160.             </div>
  161.             
  162.             <div class="col-md-6 col-12 py-2">
  163.                 <div class="card m-2 h-100">
  164.                     <img class="d-block m-auto" src="{{ asset('images/presentation/picto1.png') }}" alt="" />
  165.                     <div class="card-footer">
  166.                         {% trans %}Ils sont le meilleur support pour développer la compréhension orale{% endtrans %}
  167.                     </div>
  168.                 </div>
  169.             </div>
  170.             
  171.             <div class="col-md-6 col-12 py-2">
  172.                 <div class="card m-2 h-100">
  173.                     <img class="d-block m-auto" src="{{ asset('images/presentation/picto3.png') }}" alt="" />
  174.                     <div class="card-footer">
  175.                         {% trans %}Ils procurent des émotions qui favorisent la mémorisation{% endtrans %}
  176.                     </div>
  177.                 </div>
  178.             </div>
  179.             
  180.             <div class="col-md-6 col-12 py-2">
  181.                 <div class="card m-2 h-100">
  182.                     <img class="d-block m-auto" src="{{ asset('images/presentation/picto4.png') }}" alt="" />
  183.                     <div class="card-footer">
  184.                         {% trans %}On peut facilement laisser les enfants en autonomie{% endtrans %}
  185.                     </div>
  186.                 </div>
  187.             </div>
  188.         </div>
  189.         
  190.         <style>
  191.             #prtB .card-footer {
  192.                 background-color: inherit !important;
  193.                 border-top: 0px;
  194.             }
  196.             #prtB .card {
  197.                 border: 0px;
  198.             }
  200.             #prtB .card .card-footer {
  201.                 font-size: 1.4em;
  202.             }
  203.         </style>
  204.         <br/>
  205.         <a type="button" class="btn btn-orange shadow btn-lg" href="{{ path('tunnel_register', {}) }}" >{% trans %}J'inscris mon enfant{% endtrans %}</a>
  206.         <br/>
  207.         <br/>
  208.         <br/>
  209.         <div class="ratio ratio-16x9">
  210.             <iframe src="https://www.youtube.com/embed/Pnn_zW_RpLc?showinfo=0" allowfullscreen></iframe>
  211.         </div>
  212.     </div>
  213.     <div class="py-5 text-center mw1100">
  214.         <h1 class="dark">{% trans %}Depuis 2011, une Méthode moderne qui a fait ses preuves{% endtrans %}</h1>
  215.         <br/>
  216.         <ul class="mixColors text-start px-2 m-auto">
  217.             <li>{% trans %}SpeakyPlanet est axé sur la compréhension orale et l'acquisition de vocabulaire anglais en immersion dans les jeux.{% endtrans %}</li>
  218.             <li>{% trans %}Nos jeux sont conçus spécialement pour les enfants de 4 à 12 ans.{% endtrans %}</li>
  219.             <li>{% trans %}L'apprentissage se fait par imprégnation. En immersion dans les jeux, les enfants absorbent naturellement du vocabulaire.{% endtrans %}</li>
  220.             <li>{% trans with {'%nb%': '3 800'} %}Il y a %nb% mots anglais répartis dans les différents niveaux de difficulté.{% endtrans %}</li>
  221.             <li>{% trans %}Les enfants comprennent et mémorisent le vocabulaire anglais en jouant régulièrement. Tout simplement.{% endtrans %}</li>
  222.             <li>{% trans %}Les mécaniques de jeux, les scénarios pédagogiques et les univers graphiques sont variés. Pour satisfaire tous les goûts et ne pas lasser les enfants.{% endtrans %}</li>
  223.         </ul>
  224.         <br/>
  225.         <a type="button" class="btn btn-orange shadow btn-lg my-2" href="{{ path('tunnel_register', {}) }}" >{% trans %}J'inscris mon enfant{% endtrans %}</a>
  226.         <br/>
  227.         <a type="button" class="btn btn-white shadow btn-lg my-2" href="{{ path('tunnel_gift_register', {}) }}" >{% trans %}Offrir SpeakyPlanet{% endtrans %}</a>
  228.     </div>
  229.     {% if app.request.locale == 'fr' %}
  230.     <div class="text-bg-orange py-5 fw-bold">
  231.         <h3><span class="light fw-bold">Les 10 choses à savoir</span></h3>
  232.         <br/>
  233.         <style>
  234.             #addon p {
  235.                 margin: 0;
  236.                 padding: 10px 30px;
  237.                 counter-increment: section;
  238.                 position: relative;
  239.                 line-height: 1em;
  240.             }
  241.             #addon p:before {
  242.                 content: counter(section)".";
  243.                 right: 100%;
  244.                 margin-right: -20px;
  245.                 position: absolute;
  246.                 text-align: center;
  247.                 font-size: 110%;
  248.                 color: #FFFFFF;
  249.             }
  250.         </style>
  251.         <div id="addon" class="container fs-4 w-75" ><br/>
  252.             <p>Toutes les voix sont enregistrées par des comédiens anglophones natifs.</p>
  253.             <p>Les enfants acquièrent un bon accent anglais. So British! </p>
  254.             <p>Tous les contenus linguistiques sont conçus par des Anglais qui enseignent l'anglais.</p>
  255.             <p>Scénarios pédagogiques validés en partenariat avec les écoles primaires.</p>
  256.             <p>Illustrations de qualité 100% originales et françaises.</p>
  257.             <p>SpeakyPlanet est MADE IN FRANCE (cocorico)</p>
  258.             <p>L'abonnement est à partir de 5,95€ par mois. </p>
  259.             <p>Nettement moins cher qu'un cours particulier ou en groupe. Mais aussi efficace.</p>
  260.             <p>Garantie satisfait ou remboursé de 48h00.</p>
  261.             <p>Désabonnement facile en 2 clics dans le COIN DES PARENTS situé en pied de page du site.</p>
  262.             <br/>
  263.         </div>
  264.     </div>
  265.     {% endif %}
  266.     <div class="text-bg-blue py-5 px-2 text-center">
  267.         <h3 class="mw1100 fw-bold"><span class="light">{% trans %}VOTRE ENFANT JOUE ET APPREND AVEC PLUS DE 600 ACTIVITES LUDIQUES{% endtrans %}</span></h3>
  268.         <br/>
  269.         <div id="carouselIndicators" class="carousel slide" data-bs-ride="carousel">
  270.             <div class="carousel-indicators">
  271.                 <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  272.                 <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
  273.                 <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  274.             </div>
  275.             <div class="carousel-inner">
  276.                 <div class="carousel-item active">
  277.                     <div class="row">
  278.                         <div class="col-md-4">
  279.                             <div class=" card mb-2 h-100">
  280.                                 <img class="card-img-top" src="{{ asset('images/presentation/carousel/heros.jpg') }}" alt="Card image cap">
  281.                                 <div class="card-body">
  282.                                     <p class="card-text">{% trans %}Apprends avec Super héros{% endtrans %}</p>
  283.                                 </div>
  284.                             </div>
  285.                         </div>
  286.                         
  287.                         <div class="col-md-4">
  288.                             <div class=" card mb-2 h-100">
  289.                                 <img class="card-img-top" src="{{ asset('images/presentation/carousel/house.jpg') }}" alt="Card image cap">
  290.                                 <div class="card-body">
  291.                                     <p class="card-text">{% trans %}Enquête dans toutes les pièces de la maison{% endtrans %}</p>
  292.                                 </div>
  293.                             </div>
  294.                         </div>
  295.                         
  296.                         <div class="col-md-4">
  297.                             <div class=" card mb-2 h-100">
  298.                                 <img class="card-img-top" src="{{ asset('images/presentation/carousel/family-1.jpg') }}" alt="Card image cap">
  299.                                 <div class="card-body">
  300.                                     <p class="card-text">{% trans %}Reconnais tous les membres de la famille{% endtrans %}</p>
  301.                                 </div>
  302.                             </div>
  303.                         </div>
  304.                     </div>
  305.                 </div>
  306.                 <div class="carousel-item">
  307.                     <div class="row">
  308.                         <div class="col-md-4">
  309.                             <div class=" card mb-2 h-100">
  310.                                 <img class="card-img-top" src="{{ asset('images/presentation/carousel/greece.jpg') }}" alt="Card image cap">
  311.                                 <div class="card-body">
  312.                                     <p class="card-text">{% trans %}Voyage en Grèce{% endtrans %}</p>
  313.                                 </div>
  314.                             </div>
  315.                         </div>
  316.                         
  317.                         <div class="col-md-4">
  318.                             <div class=" card mb-2 h-100">
  319.                                 <img class="card-img-top" src="{{ asset('images/presentation/carousel/halloween-1.jpg') }}" alt="Card image cap">
  320.                                 <div class="card-body">
  321.                                     <p class="card-text">{% trans %}Apprends le vocabulaire d'Halloween{% endtrans %}</p>
  322.                                 </div>
  323.                             </div>
  324.                         </div>
  325.                         
  326.                         <div class="col-md-4">
  327.                             <div class=" card mb-2 h-100">
  328.                                 <img class="card-img-top" src="{{ asset('images/presentation/carousel/town.jpg') }}" alt="Card image cap">
  329.                                 <div class="card-body">
  330.                                     <p class="card-text">{% trans %}Visite tous les endroits de la ville{% endtrans %}</p>
  331.                                 </div>
  332.                             </div>
  333.                         </div>
  334.                     </div>
  335.                 </div>
  336.                 <div class="carousel-item">
  337.                     <div class="row">
  338.                         <div class="col-md-4">
  339.                             <div class=" card mb-2 h-100">
  340.                                 <img class="card-img-top" src="{{ asset('images/presentation/carousel/farm.jpg') }}" alt="Card image cap">
  341.                                 <div class="card-body">
  342.                                     <p class="card-text">{% trans %}Découvre les animaux de la ferme{% endtrans %}</p>
  343.                                 </div>
  344.                             </div>
  345.                         </div>
  346.                         
  347.                         <div class="col-md-4">
  348.                             <div class=" card mb-2 h-100">
  349.                                 <img class="card-img-top" src="{{ asset('images/presentation/carousel/school.jpg') }}" alt="Card image cap">
  350.                                 <div class="card-body">
  351.                                     <p class="card-text">{% trans %}Vis une aventure sur le chemin de l'école{% endtrans %}</p>
  352.                                 </div>
  353.                             </div>
  354.                         </div>
  355.                         
  356.                         <div class="col-md-4">
  357.                             <div class=" card mb-2 h-100">
  358.                                 <img class="card-img-top" src="{{ asset('images/presentation/carousel/america.jpg') }}" alt="Card image cap">
  359.                                 <div class="card-body">
  360.                                     <p class="card-text">{% trans %}Parcours les États-Unis{% endtrans %}</p>
  361.                                 </div>
  362.                             </div>
  363.                         </div>
  364.                     </div>
  365.                 </div>
  366.             </div>
  367.         </div>
  369.         <style>
  370.             #carouselIndicators .carousel-indicators {
  371.                 margin-bottom: -1.5em;
  372.             }
  373.         </style>
  374.         {# 
  375.         <div class="carousel1">
  376.             <div class="carousel-cell">
  377.             <img class="picture" src="{{ asset('images/presentation/carousel/christmas-1.jpg') }}"/>
  378.             <p>{% trans %}Apprends avec le Père Noël{% endtrans %}</p>
  379.             </div>
  380.             <div class="carousel-cell">
  381.             <img class="picture" src="{{ asset('images/presentation/carousel/farm.jpg') }}"/>
  382.             <p>{% trans %}Découvre les animaux de la ferme{% endtrans %}</p>
  383.             </div>
  384.             </div>
  385.         </div>
  386.         #}
  387.     </div>
  388.     <div id="parents" class="py-5 m-auto mw1100">
  389.         <h1 class="dark">{% trans %}LES PARENTS N'ONT RIEN À FAIRE. ENFIN PRESQUE !{% endtrans %}</h1>
  390.         <br/>
  391.         <h3 class="text-start">{% trans %}La répétition est la base d'un apprentissage efficace. Instaurez un rituel{% endtrans %}</h3>
  392.         <!-- ajouter des pictos -->
  393.         <style>
  394.             ul.star{
  395.                 list-style: none outside none;
  396.                 margin: 0;
  397.             }
  398.             
  399.             ul.star li{
  400.                 text-align: justify;
  401.                 color: #4C4E66;
  402.                 background: url("{{ asset('images/presentation/orangeStar.png') }}") no-repeat scroll 0 2px transparent;
  403.                 margin-top: 8px;
  404.                 padding: 0 0 0 23px;
  405.                 min-height: 20px;
  406.             }
  407.             
  408.             ul.star.blue li{
  409.                 background: url("{{ asset('images/presentation/blueStar.png') }}") no-repeat scroll 0 2px transparent;
  410.             }
  411.         </style>
  412.         <ul class="star">
  413.             <li>{% trans %}Programmez régulièrement des séances SpeakyPlanet{% endtrans %}</li>
  414.             <li>{% trans %}Idéalement 10 à 15 min de jeux tous les jours. Ou 3 fois 30 min par semaine{% endtrans %}</li>
  415.             <li>{% trans %}De préférence après le goûter ou avant le dîner{% endtrans %}</li>
  416.         </ul>
  417.         <br/>
  418.         <h3 class="text-start">{% trans %}Gardez un oeil sur vos enfants{% endtrans %}</h3>
  419.         <ul class="star blue">
  420.             <li>{% trans %}Encouragez-les et félicitez-les{% endtrans %}</li>
  421.             <li>{% trans %}Si vos enfants sentent que l'anglais est important pour vous, il le deviendra pour eux{% endtrans %}</li>
  422.             <li>{% trans %}Défiez vos enfants en leur demandant de gagner une nouvelle médaille à chaque fois qu'ils jouent{% endtrans %}</li>
  423.         </ul>
  424.         <h2 class="starOrange py-4" style="text-align: center;">{% trans %}L'avantage des jeux SpeakyPlanet, c'est que vous n'aurez pas à forcer vos enfants.{% endtrans %}<br/>{% trans %}Ils redemanderont à jouer !{% endtrans %}</h2>
  425.         <br/>
  426.         <div class="text-center">
  427.             <a type="button" class="btn btn-orange shadow btn-lg" href="{{ path('tunnel_register', {}) }}" >{% trans %}J'inscris mon enfant{% endtrans %}</a>
  428.             <div class="btnLabel" style="color:#333">{% trans %}Pour moins de 6€ par mois{% endtrans %}</div>
  429.         </div>
  430.         <style>
  431.             #presentationPage #parents h3 {
  432.                 font-size: 1.125em;
  433.                 color: #4C4E66;
  434.                 margin-bottom: 25px;
  435.             }
  437.             h2.starOrange {
  438.                 color: #F28431;
  439.                 margin: 50px 0 25px 0;
  440.                 font-weight: bold;
  441.             }
  442.         </style>
  443.     </div>
  444.     <div id="easyTo" class="text-bg-blue py-5 text-center">
  445.         <h3><span class="light">{% trans %}FACILE À UTILISER{% endtrans %}</span></h3>
  446.         <br/>
  447.         <div class="container">
  448.             <p class="txtAlignCenter">{% trans %}SpeakyPlanet est accessible sur ordinateur, tablette et smartphone.{% endtrans %}<br/>•<br/>
  449.             {% trans %}Un abonnement permet d'accéder, sur tous les appareils, à tous les jeux et niveaux d'anglais proposés.{% endtrans %}<br/>•
  450.             <br/>{% trans %}Il permet aussi d'apprendre l'allemand et bientôt l'espagnol.{% endtrans %}</p>
  451.         </div>
  452.         <style>
  453.             #easyTo h3 {
  454.                 font-weight: bold;
  455.             }
  457.             #easyTo p {
  458.                 max-width: 1190px;
  459.                 margin: 0 auto;
  460.                 width: 98%;
  461.                 font-size: 1.625em;
  462.                 color: #FFFFFF;
  463.             }
  464.         </style>
  465.     </div>
  466.     <div class="text-bg-grey py-5 text-center fw-bold">
  467.         ILS NOUS FONT CONFIANCE
  469.     </div>
  470.     <div id="smiley" class=" container py-5 text-center">
  472.         <div class="row py-5 m-auto mw1100">
  473.             <div class="col-12 col-sm-6 col-md-3">
  474.                 <div class="card m-2 h-100">
  475.                     <img class="d-block m-auto" src="{{ asset('images/presentation/smiley1.jpg') }}" alt="L'anglais sera un atout pour votre enfant" />
  476.                     <div class="card-footer" style="color: #29ABE2">
  477.                         {% trans %}Pour son avenir{% endtrans %}
  478.                     </div>
  479.                 </div>
  480.             </div>
  481.             
  482.             <div class="col-12 col-sm-6 col-md-3">
  483.                 <div class="card m-2 h-100">
  484.                     <img class="d-block m-auto" src="{{ asset('images/presentation/smiley2.jpg') }}" alt="Votre enfant sera incollable en classe" />
  485.                     <div class="card-footer" style="color: #F26528">
  486.                         {% trans %}Pour avoir<br/>de super notes{% endtrans %}
  487.                     </div>
  488.                 </div>
  489.             </div>
  490.             
  491.             <div class="col-12 col-sm-6 col-md-3">
  492.                 <div class="card m-2 h-100">
  493.                     <img class="d-block m-auto" src="{{ asset('images/presentation/smiley3.jpg') }}" alt="Votre enfant pourra voyager dans le monde entier, ou presque" />
  494.                     <div class="card-footer" style="color: #C1272D">
  495.                         {% trans %}Pour voyager<br/>et communiquer{% endtrans %}
  496.                     </div>
  497.                 </div>
  498.             </div>
  499.             
  500.             <div class="col-12 col-sm-6 col-md-3">
  501.                 <div class="card m-2 h-100">
  502.                     <img class="d-block m-auto" src="{{ asset('images/presentation/smiley4.jpg') }}" alt="Votre enfant pourra découvrir de nombreux contenus en anglais" />
  503.                     <div class="card-footer" style="color: #8CC63F">
  504.                         {% trans %}Pour stimuler son<br/>ouverture sur le monde{% endtrans %}
  505.                     </div>
  506.                 </div>
  507.             </div>
  508.             
  509.             <div class="col-12 col-sm-6 col-md-3">
  510.                 <div class="card mb-2 h-100">
  511.                     <img class="d-block m-auto" src="{{ asset('images/presentation/smiley5.jpg') }}" alt="Pour que votre enfant soit plus assuré en anglais" />
  512.                     <div class="card-footer" style="color: #93278F">
  513.                         {% trans %}Pour prendre<br/>confiance en lui{% endtrans %}
  514.                     </div>
  515.                 </div>
  516.             </div>
  517.             
  518.             <div class="col-12 col-sm-6 col-md-3">
  519.                 <div class="card mb-2 h-100">
  520.                     <img class="d-block m-auto" src="{{ asset('images/presentation/smiley6.jpg') }}" alt="Votre enfant se démarquera des autres" />
  521.                     <div class="card-footer" style="color: #D4145A">
  522.                         {% trans %}Pour sortir du lot{% endtrans %}
  523.                     </div>
  524.                 </div>
  525.             </div>
  526.             
  527.             <div class="col-12 col-sm-6 col-md-3">
  528.                 <div class="card mb-2 h-100">
  529.                     <img class="d-block m-auto" src="{{ asset('images/presentation/smiley7.jpg') }}" alt="Votre enfant aura de l'avance en anglais" />
  530.                     <div class="card-footer" style="color: #FBB03B">
  531.                         {% trans %}Pour prendre<br/>de l'avance{% endtrans %}
  532.                     </div>
  533.                 </div>
  534.             </div>
  535.             
  536.             <div class="col-12 col-sm-6 col-md-3">
  537.                 <div class="card mb-2 h-100">
  538.                     <img class="d-block m-auto" src="{{ asset('images/presentation/smiley8.jpg') }}" alt="Un atout pour la vie professionelle" />
  539.                     <div class="card-footer" style="color: #2E3192">
  540.                         {% trans %}Pour ses études et<br/>sa vie professionnelle{% endtrans %}
  541.                     </div>
  542.                 </div>
  543.             </div>
  544.         </div>
  546.         <style>
  547.             #smiley .card-footer {
  548.                 background-color: inherit !important;
  549.                 border-top: 0px;
  550.             }
  552.             #smiley .card {
  553.                 border: 0px;
  554.             }
  556.             #smiley .card .card-footer {
  557.                 font-weight: bold;
  558.             }
  559.         </style>
  560.         
  561.         <a type="button" class="btn btn-orange shadow btn-lg my-2" href="{{ path('tunnel_register', {}) }}" >{% trans %}J'inscris mon enfant{% endtrans %}</a>
  562.         <br/>
  563.         <a type="button" class="btn btn-white shadow btn-lg my-2" href="{{ path('tunnel_gift_register', {}) }}" >{% trans %}Offrir SpeakyPlanet{% endtrans %}</a>
  564.     </div>
  565.     <div class="text-bg-blue py-5 text-center">
  566.         <h3 class="my-3 mw1100 fw-bold"><span class="light">{% trans %}Votre enfant va devenir super fort en anglais&nbsp;!{% endtrans %}</span> {% trans %}Et il va adorer.{% endtrans %}</h3>
  567.         <a type="button" class="btn btn-white shadow btn-lg" href="{{ path('tunnel_register', {}) }}" >{% trans %}J'inscris mon enfant{% endtrans %}</a>
  569.     </div>
  570.     <div class="py-5 text-justify">
  571.         <div class="content mw1100 m-auto">
  572.             <div class="sl sl1 clearfix my-3">
  573.                 <img class="float-start" src="{{ asset('images/presentation/adult-thumb-1.jpg') }}" alt="Témoignage d'une chroniqueuse sur France 5" />
  574.                 <div class="testim py-4">
  575.                     <p>&#147;{% trans %}Il est possible d'apprendre les langues étrangères sur Internet (...) Mais j'ai trouvé encore mieux, j'ai trouvé SpeakyPlanet&nbsp;!{% endtrans %}&#148;</p>
  576.                     <p class="signature text-end">{% trans %}Elsa Grangier, Chroniqueuse sur France 5{% endtrans %}</p>
  577.                 </div>
  578.             </div>
  579.             <div class="sl sl2 clearfix my-3">
  580.                 <img class="float-start" src="{{ asset('images/presentation/adult-thumb-2.jpg') }}" alt="Un professeur d'anglais soutient SpeakyPlanet pour apprendre l'anglais aux enfants"/>
  581.                 <div class="testim py-4">
  582.                     <p>&#147;{% trans %}Je trouve les jeux SpeakyPlanet très amusants, attractifs, plaisants et adaptés aux enfants de primaire et collège.{% endtrans %}&#148;</p>
  583.                     <p class="signature text-end">{% trans %}Julien, professeur d'anglais{% endtrans %}</p>
  584.                 </div>
  585.             </div>
  586.             <div class="sl sl3 clearfix my-3">
  587.                 <img class="float-start" src="{{ asset('images/presentation/adult-thumb-3.jpg') }}" alt="Une maman donne son avis sur SpeakyPlanet" />
  588.                 <div class="testim py-4">
  589.                     <p>&#147;{% trans %}J'ai eu l'occasion de tester SpeakyPlanet et j'adore tout simplement. C'est intelligent, bien pensé et amusant. J'ai eu un vrai coup de coeur.{% endtrans %}&#148;</p>
  590.                     <p class="signature text-end">{% trans %}Sandra, du blog Maman Geek.com{% endtrans %}</p>
  591.                 </div>
  592.             </div>
  593.         </div>
  594.         <style>
  595.             div.testim {
  596.                 font-family: Cartoonerie, Trebuchet;
  597.                 font-size: 1.875rem;
  598.             }
  599.         </style>
  600.     </div>
  601.     <div class="text-bg-orange py-5 text-center">
  602.         <h2><span class="light fw-bold">{% trans %}Préparer leur avenir, c'est maintenant.{% endtrans %}</span></h2>
  603.         <br/>
  604.         <a type="button" class="btn btn-white shadow btn-lg" href="{{ path('tunnel_register', {}) }}" >{% trans %}J'inscris mon enfant{% endtrans %}</a>
  606.     </div>
  607. </div>
  608. {% endblock %}