templates/home/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Les Amis D'Isidore{% endblock %}
  5. {% block body %}
  7.     <section class="flex items-start justify-between uppercase text-5xl md:text-7xl">
  8.         <img class="w-2/5 h-auto hidden md:block" src="{{ asset('img/homepage/home_isidore.png') }}"  alt="ISIDORE" title="Logo de l'association Les Amis d'Isidore">
  9.         <div class="md:mt-28">
  10.             <img class="w-5/12 h-auto md:hidden float-left" src="{{ asset('img/homepage/home_isidore.png') }}" alt="ISIDORE" title="Logo de l'association Les Amis d'Isidore">
  11.             <h1 class="flex flex-col gap-y-12 h-fit text-right font-vogue">
  12.                 <span class="">les</span>
  13.                 <span class="">amis</span>
  14.                 <span class="">d'isidore</span>
  15.             </h1>
  16.             <div class="mt-20 md:mt-40 text-right">
  17.                 <a class="rounded-md bg-text py-3 px-4 md:py-6 md:px-8 text-xl md:text-3xl font-medium text-light shadow-sm hover:bg-light hover:text-black uppercase duration-300 transition-all ease-in-out"
  18.                    href="{{ path('app_legends', {giant: 'isidore'}) }}">
  19.                     la légende
  20.                 </a>
  21.             </div>
  22.         </div>
  23.     </section>
  25.     <section class="pt-24 pb-32 text-center">
  27.         <h2 class="uppercase text-4xl md:text-6xl font-medium">Présentation</h2>
  28.         <article class="text-xl md:text-2xl mt-10 w-4/5 mx-auto flex flex-col gap-2">
  29.             <p>
  30.                 En 2000, à l'initiative de Claude BLONDEL (Adjoint à l'animation), naît le géant municipal Isidore Court'Orelle.
  31.             </p>
  32.             <p>
  33.                 L'association Les Amis d'Isidore verra le jour le 12/01/2001.
  34.             </p>
  35.             <p>
  36.                 Celle-ci fait vivre les géants Lezennois Isidore, Ernest et P'tit Claude lors de sorties et de rassemblements.
  37.             </p>
  38.         </article>
  40.     </section>
  42.     <section class="pt-24 pb-32 text-center">
  44.         <h2 class="uppercase text-4xl md:text-6xl font-medium">Nos géants</h2>
  46.         <div class="grid grid-cols-1 gap-y-4 md:flex md:flex-row md:justify-around mt-20">
  47.             <article class="flex flex-col items-center md:w-1/4 hover:scale-110 ease-in-out duration-300">
  48.                 <img class="rounded-3xl" src="{{ asset('img/homepage/isidore.png') }}" alt="Photo du géant Isidore" title="Photo du géant Isidore">
  49.                 <h3 class="mt-2 uppercase text-2xl font-vogue font-bold">Isidore</h3>
  50.                 <p>Carrier Lezennois du XVIIIe siècle.</p>
  51.             </article>
  52.             <article class="flex flex-col items-center md:w-1/4 hover:scale-110 ease-in-out duration-300">
  53.                 <img class="rounded-3xl" src="{{ asset('img/homepage/ptitclaude.png') }}" alt="Photo du géant Pt'tit-Claude" title="Photo du géant Pt'tit-Claude">
  54.                 <h3 class="mt-2 uppercase text-2xl font-vogue font-bold">P'tit Claude</h3>
  55.                 <p>Fier sous-marinier rendant hommage à Claude Blondel.</p>
  56.             </article>
  57.             <article class="flex flex-col items-center md:w-1/4 hover:scale-110 ease-in-out duration-300">
  58.                 <img class="rounded-3xl" src="{{ asset('img/homepage/ernest.png') }}" alt="Photo du géant Ernest" title="Photo du géant Ernest">
  59.                 <h3 class="mt-2 uppercase text-2xl font-vogue font-bold">Ernest</h3>
  60.                 <p>Peintre du XVIIe siècle, incarnant l'art et la créativité.</p>
  61.             </article>
  62.         </div>
  64.     </section>
  67.     <section class="pt-24 pb-32 text-center">
  69.         <h2 class="uppercase text-4xl md:text-6xl font-medium">L'équipe</h2>
  70. {#        <a class="text-left hover:underline" href="">En savoir plus...</a>#}
  72.         <div class="flex flex-col md:flex-row mt-20 items-center justify-around font-medium">
  74.             <article>
  75.                 <h3 class="text-3xl md:text-5xl font-bold uppercase font-vogue">Les porteurs</h3>
  76.                 <ul class="mt-5">
  77.                     {% for porteur in porteurs %}
  78.                         <li>{{ porteur.surname }} {{ porteur.name|first|upper }}.</li>
  79.                     {% endfor %}
  80.                 </ul>
  81.             </article>
  83.             <div class="flex flex-col gap-36 font-medium mt-36 md:mt-0">
  84.                 <article class="px-10">
  85.                     <h3 class="text-3xl md:text-5xl font-bold uppercase font-vogue">Le bureau</h3>
  86.                     <ul class="mt-5 capitalize">
  87.                         <li class="flex flex-row justify-between">
  88.                             <span>Présidente :</span>
  89.                             <span>Claire VANCAEMELBECKE</span>
  90.                         </li>
  91.                         <li class="flex flex-row justify-between">
  92.                             <span>Vice-Président :</span>
  93.                             <span>Édouard BABIK</span>
  94.                         </li>
  95.                         <li class="flex flex-row justify-between">
  96.                             <span>Trésorier :</span>
  97.                             <span>Mathys VANCAEMELBECKE</span>
  98.                         </li>
  99.                         <li class="flex flex-row justify-between">
  100.                             <span>Secrétaire :</span>
  101.                             <span>Clara BOUXOM</span>
  102.                         </li>
  103.                     </ul>
  104.                 </article>
  106.                 <article>
  107.                     <h3 class="text-3xl md:text-5xl font-bold uppercase font-vogue">Mentions d'honneur</h3>
  108.                     <ul class="mt-5">
  109.                         <li><p>
  110.                                 Claude BLONDEL
  111.                                 <span class="text-xs md:text-sm font-semibold">
  112.                                     (Père spirituel d'Isidore)
  113.                                 </span>
  114.                             </p></li>
  115.                         <li><p>
  116.                                 Laurent BLONDEL
  117.                                 <span class="text-xs md:text-sm font-semibold">
  118.                                     (Parrain de P'tit Claude)
  119.                                 </span>
  120.                             </p></li>
  121.                         <li><p>
  122.                                 Christine BLONDEL
  123.                                 <span class="text-xs md:text-sm font-semibold">
  124.                                     (Marraine de P'tit Claude)
  125.                                 </span>
  126.                             </p></li>
  127.                         <li><p>
  128.                                 Brigitte GODEFROY
  129.                                 <span class="text-xs md:text-sm font-semibold">
  130.                                     (Marraine d'Isidore)
  131.                                 </span>
  132.                             </p></li>
  133.                         <li><p>
  134.                                 Arnaud DELBARRE
  135.                                 <span class="text-xs md:text-sm font-semibold">
  136.                                     (Parrain d'Isidore)
  137.                                 </span>
  138.                             </p></li>
  139.                         <li><p>
  140.                                 Michel RIPERT
  141.                                 <span class="text-xs md:text-sm font-semibold">
  142.                                     (Webmaster ancien site)
  143.                                 </span>
  144.                             </p></li>
  145.                         <li><p>
  146.                                 Mario BATTISTELLA
  147.                                 <span class="text-xs md:text-sm font-semibold">
  148.                                     (Prés. 2001-20xx)
  149.                                 </span>
  150.                             </p></li>
  151.                         <li><p>
  152.                                 Marc MINET
  153.                                 <span class="text-xs md:text-sm font-semibold">
  154.                                     (Prés. 20xx-2013)
  155.                                 </span>
  156.                             </p></li>
  157.                         <li><p>
  158.                                 Thierry LEIGNEL
  159.                                 <span class="text-xs md:text-sm font-semibold">
  160.                                     (Prés. 2013-2023)
  161.                                 </span>
  162.                             </p></li>
  163.                     </ul>
  164.                 </article>
  166.             </div>
  167.         </div>
  169.     </section>
  172.     <section class="pt-24 pb-32 text-center" id="goout">
  174.         <h2 class="uppercase text-4xl md:text-6xl">Nos prochaines sorties</h2>
  176.         <div class="relative mt-12 w-full fade-in-out" style="mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);">
  177.             {{ include('partials/_carrousel.html.twig') }}
  178.         </div>
  180.         <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-8 md:gap-0 md:flex md:flex-row md:justify-around mt-16 md:mt-20">
  181.             {% for outing in outings %}
  182.                 <article class="md:w-1/4 flex justify-center">
  183.                     <div class="w-fit">
  184.                         <h3 class="text-xl md:text-3xl">{{ outing.name }}</h3>
  185.                         <p class="text-xs text-right">{{ outing.date | date('d/m/Y') }}</p>
  186.                         <p class="text-lg md:text-xl hover:underline">
  187.                             <a href="https://www.google.fr/maps/place/{{ outing.place | replace({' ':'-'}) }}"
  188.                                target="_blank">
  189.                                 <ion-icon name="location"></ion-icon> {{ outing.place }}
  190.                             </a>
  191.                         </p>
  192.                     </div>
  193.                 </article>
  194.             {% endfor %}
  195.         </div>
  197.     </section>
  200.     <section class="justify-center pt-24 pb-32 text-center" id="contact">
  202.         <h2 class="uppercase text-4xl md:text-6xl">Comment nous contacter ?</h2>
  203.         <p class="mt-10 text-xl">N'hésitez pas à nous envoyer un mail ou un message sur nos réseaux !</p>
  204.         <div class="mt-10">
  205.             <a class="rounded-md bg-text py-2 px-3 font-medium text-light shadow-sm hover:bg-light hover:text-black uppercase duration-300 transition-all ease-in-out"
  206.                  href="mailto:lesamisdisidore@gmail.com">
  207.                 lesamisdisidore@gmail.com
  208.             </a>
  209.         </div>
  211.         <div class="flex flex-row justify-around mt-20">
  212.             <a class="flex items-center"
  213.                href="https://www.facebook.com/LesamisdIsidore/" target="_blank">
  214.                 <ion-icon class="text-6xl hover:text-light duration-300 transition-all ease-in-out" name="logo-facebook"></ion-icon>
  215.             </a>
  216.             <a class="flex items-center"
  217.                href="https://www.instagram.com/lesamisdisidore/" target="_blank">
  218.                 <ion-icon class="text-6xl hover:text-light duration-300 transition-all ease-in-out" name="logo-instagram"></ion-icon>
  219.             </a>
  221.         </div>
  223.     </section>
  225. {% endblock %}