templates/front/landing.html.twig line 1

Open in your IDE?
  1. {% import "macro/components.html.twig" as comp %}
  2. {% extends "layout.html.twig" %}
  3. {% block body %}
  4.     <div data-aos="fade-in" data-aos-duration="800" class="background he-600 d-flex" style="background-image:url({{ asset('assets/img/background.png') }})">
  5.         <div class="m-auto mawi-850 text-center">
  6.             <p data-aos="fade-in" data-aos-delay="1200" data-aos-duration="800" class="my-0 c-white o-60 fs-13 ls2-300 text-uppercase">VOTRE FROMAGERIE EN LIGNE</p>
  7.             <h1 data-aos="zoom-in" data-aos-delay="500" data-aos-duration="800" class="merriweather fs-62 c-white mab-20 fw-300 lh-68">
  8.                 Fromagers & affineurs
  9.                 de génération en génération
  10.             </h1>
  11.             <a data-aos="fade-in" data-aos-delay="1200" data-aos-duration="800" href="#" class="btn btn-brown bgc-white-h muli text-uppercase fs-13 fw-400">ACHETER MAINTENANT !</a>
  12.         </div>
  13.     </div>
  14.     <div class="pay-100 text-center">
  15.         <img data-aos="fade-in" data-aos-delay="500" data-aos-duration="800" src="{{ asset('assets/img/icon_logo.png') }}" alt="icone logo mons fromage"/>
  16.         <p data-aos="fade-in" data-aos-delay="900" data-aos-duration="800" class=" c-brown fs-13 ls2-300 text-uppercase mat-15 mab-5">mons fromagers & affineurs</p>
  17.         <h2 data-aos="fade-in" data-aos-delay="1200" data-aos-duration="800" class=" fs-35 c-1e1e25 mab-70  merriweather mx-auto mawi-430">
  18.             Découvrez la sélection
  19.             des produits du moment
  20.         </h2>
  21.     </div>
  22.     <div class="pat-10 pab-170 bgc-e4e1d5 ">
  23.         <div class="container ml-0 px-0 mat--100">
  24.             <div class="position-relative">
  25.                 <div  data-aos="fade-left" data-aos-duration="1500" class="position-absolute t-0 b-0 r--75 d-flex flex-column m-auto align-items-center justify-content-center">
  26.                     <div class="prev prev-product mab-30">
  27.                         <div class="br-50 m-auto wi-50 he-50 d-flex c-131111 bc-131111 bc-brown-h  pointer bw-1 bs-solid bgc-brown-h c-white-h fs-19"><i class="fal fa-arrow-left m-auto"></i></div>
  28.                     </div>
  29.                     <div class="next next-product  ">
  30.                         <div class="br-50 m-auto wi-50 he-50 d-flex c-131111 bc-brown-h pointer bc-131111 bw-1 bs-solid bgc-brown-h c-white-h fs-19"><i class="fal fa-arrow-right m-auto"></i></div>
  31.                     </div>
  32.                 </div>
  33.                 <div class="slick-products" data-aos="fade-right" data-aos-duration="1500">
  34.                     {% for key, product in getProducts() %}
  35.                         <div class="par-30">
  36.                             <div class="position-relative">
  37.                                 <img src="{{ asset('assets/img/'~product.img~'') }}" alt="{{product.title}}" class=" objectif-fit w-100 "/>
  38.                                 <div class="bgc-white pa-40 text-center">
  39.                                     <h4 class="c-131111 merriweather fs-20 fw-700">
  40.                                         {{product.title}}
  41.                                     </h4>
  42.                                     <p class="may-30 fs-14 c-4b4444">
  43.                                         {{product.content}}
  44.                                     </p>
  45.                                     <p class="price merriweather fs-29">
  46.                                         {{product.price}}
  47.                                         <span class="font-italic fs-20">
  48.                                             /
  49.                                             {{product.priceType}}
  50.                                         </span>
  51.                                     </p>
  52.                                 </div>
  53.                             </div>
  54.                         </div>
  55.                     {% endfor %}
  56.                 </div>
  57.             </div>
  58.         </div>
  59.     </div>
  60.     <div class="position-relative may--70 zi-9">
  61.         <img src="{{ asset('assets/img/cheese1.png') }}" alt="image cheeses" class="position-absolute b-0 l-0 zi-0 wip-15"/>
  62.         <div class="position-relative">
  63.             <img src="{{ asset('assets/img/quality.png') }}" alt="quality tampon" class="position-absolute b-0 t-0 m-auto r-0 wip-8"/>
  64.             <div class="container">
  65.                 <div class="d-md-flex align-items-end">
  66.                     <div class="col-sm-6">
  67.                         <img src="{{ asset('assets/img/cheese_landing.png') }}"  data-aos="fade-in" data-aos-duration="800" alt="cheese image mons"/>
  68.                     </div>
  69.                     <div class="col-sm-6">
  70.                         <div class="position-relative r-140 bgc-f3f1e9 pal-25 pay-25"  data-aos="fade-left" data-aos-delay="800" data-aos-duration="1000">
  71.                             <p class="my-0 c-brown fs-12 ls2-300 text-uppercase">qui sommes-nous ?</p>
  72.                             <h2 class=" fs-36 c-1e1e25 mb-0  merriweather">
  73.                                 Découvrez la Maison Mons
  74.                             </h2>
  75.                         </div>
  76.                         <div class="pa-30" data-aos="fade-in" data-aos-delay="1000" data-aos-duration="1200">
  77.                             <div class="fw-300">
  78.                                 Fromager et affineur depuis les années 1980, la Maison Mons source, sélectionne, affine, produit et commercialise une large gamme de fromages de très grande qualité pour ravir l’ensemble des clients en France et à travers le monde entier.
  79.                             </div>
  80.                             <div class="fw-700">
  81.                                 Hervé Mons, Meilleur Ouvrier de France et toutes les équipes de la Maison Mons vous invite à la découverte de fromages rares et de grands classiques...
  82.                             </div>
  83.                             <a href="#" data-aos="flip-right" data-aos-delay="1200" data-aos-duration="1200" class="btn btn-border text-uppercase fs-12 pax-25 fw-400 pay-10 mat-20">découvrir la maison</a>
  84.                         </div>
  85.                     </div>
  86.                 </div>
  87.             </div>
  88.         </div>
  89.         <div class="container mr-0 mat-100 px-0">
  90.             <div class="d-sm-flex align-items-stretch">
  91.                 <div class="col-sm-6  bgc-white d-flex" data-aos="fade-left"  data-aos-duration="1200">
  92.                     <div class="pa-30 my-auto">
  93.                         <p class="my-0 c-brown fs-11 ls2-275 text-uppercase">demande d’informations</p>
  94.                         <h3 class="c-1e1e25 font-italic merriweather fs-24 mat-20">Pour plus de renseignements
  95.                             n'hésitez pas à nous contacter !</h3>
  96.                         <a href="#" class="btn btn-brown muli text-uppercase fs-12"><i class="fas fa-envelope c-white mr-3" aria-hidden="true"></i> contactez-nous</a>
  97.                     </div>
  98.                 </div>
  99.                 <div class="col-sm-6 px-0 position-relative" data-aos="fade-left" data-aos-delay="600" data-aos-duration="1200">
  100.                     <img src="{{ asset('assets/img/chevre_landing.png') }}" alt="image chevre mon fromage" class="w-100 objectif-fit"/>
  101.                 </div>
  102.             </div>
  103.         </div>
  104.     </div>
  105.     <div class="bgc-e4e1d5 pab-70 pat-170 position-relative">
  106.         <img  src="{{ asset('assets/img/cheeses.png') }}" alt="image cheeses" class="position-absolute b-0 r-0 zi-0 w-50"/>
  107.         <h2 data-aos="zoom-out"  data-aos-duration="800" class="font-italic fs-34 c-7d7c7c text-center merriweather">" L’Affinage, c’est du <span class="c-brown">vivant</span>, donc de l’<span class="c-brown">émotion</span>"</h2>
  108.         <div class="text-center mab-80" data-aos="zoom-out" data-aos-delay="500" data-aos-duration="800">
  109.             <img src="{{ asset('assets/img/signature_mons.png') }}" alt="signature mons" width="154px"/>
  110.         </div>
  111.         <div class="container">
  112.             <div class="d-flex align-items-center "  data-aos="fade-in" data-aos-duration="800">
  113.                 <hr class="bc-brown my-0 wi-120 ml-0 mar-20" />
  114.                 <h5 class="my-0 c-brown fs-12 ls2-420 text-uppercase">Actualités du moment</h5>
  115.             </div>
  116.             <div class="position-relative" data-aos="fade-up" data-aos-duration="800">
  117.                 <div class="prev prev-post position-absolute  t-0 b-0 l--65 m-auto d-flex m-auto align-items-center ">
  118.                     <div class="br-50 m-auto wi-50 he-50 d-flex c-131111 bc-131111 bc-brown-h  pointer bw-1 bs-solid bgc-brown-h c-white-h fs-19"><i class="fal fa-arrow-left m-auto"></i></div>
  119.                 </div>
  120.                 <div class="next next-post position-absolute t-0 b-0 r--65 m-auto d-flex m-auto align-items-center">
  121.                     <div class="br-50 m-auto wi-50 he-50 d-flex c-131111 bc-brown-h pointer bc-131111 bw-1 bs-solid bgc-brown-h c-white-h fs-19"><i class="fal fa-arrow-right m-auto"></i></div>
  122.                 </div>
  123.                 <div class="slick-post may-15 ">
  124.                     {% for key, post in getPosts() %}
  125.                         <div class="d-sm-flex align-items-stretch">
  126.                             <div class="col-sm-6 px-0 position-relative mab-60">
  127.                                 <img src="{{ asset('assets/img/shadow-left.png') }}" alt="shadow" class="position-absolute zi--1 r-5 b--50 l-5"/>
  128.                                 <img src="{{ asset('assets/img/'~post.img~'') }}" alt="{{post.title}}" class="h-100 objectif-fit"/>
  129.                             </div>
  130.                             <div class="col-sm-6  bgc-white d-flex position-relative mab-60">
  131.                                 <img src="{{ asset('assets/img/shadow-right.png') }}" alt="shadow" class="position-absolute  zi--1 r-5 b--50 l-5"/>
  132.                                 <div class="pa-30 my-auto">
  133.                                     <p class="my-0 c-brown fs-11 ls2-275 text-uppercase">Posté le {{post.date}}</p>
  134.                                     <h3 class="c-131111 merriweather fs-24 mat-20">{{post.title}}</h3>
  135.                                     <p class="c-4b4444 fs-16 may-20">
  136.                                         {{post.content}}
  137.                                     </p>
  138.                                     <a href="#" class="btn btn-border text-uppercase fs-12 pax-25 fw-400 pay-10 wi-138">Détails</a>
  139.                                 </div>
  140.                             </div>
  141.                         </div>
  143.                     {% endfor %}
  144.                 </div>
  145.             </div>
  146.         </div>
  147.     </div>
  148.     <div class="container-fluid"  data-aos="fade-up" data-aos-duration="800" data-aos-delay="400">
  149.         <div class="d-sm-flex max--15">
  150.             <div class="col-sm-auto pl-0 col-image-shop">
  151.                 <img src="{{ asset('assets/img/map.png') }}" alt="map mons boutique" class="objectif-fit"/>
  152.             </div>
  153.             <div class="col-sm-auto par-15">
  154.                 <div class="pay-35 pal-30  col-content-shop">
  155.                     {{ comp.h3("Découvrez les boutiques des fromageries MONS",'35') }}
  156.                     <div class="content-shops mawi-600">
  157.                         <div class="d-sm-flex flex-wrap max--15 align-items-stretch">
  158.                             {% for key, shop in getShops() %}
  159.                                 <div class="col-sm-6 col-shop c-4b4444 fs-13 mab-20 d-flex flex-column">
  160.                                     <div class="shop-info">
  161.                                         <h5 class="c-brown fs-15 fw-700">{{shop.name}}</h5>
  162.                                         <div class="d-flex align-items-start may-5">
  163.                                             <i class="fas fa-map-marker-alt wi-14 mr-2 position-relative t-5 " aria-hidden="true"></i>
  164.                                             {{shop.address}}
  165.                                         </div>
  166.                                         <div class="d-flex align-items-start may-5">
  167.                                             <i class="fas fa-envelope wi-14 mr-2  position-relative t-5" aria-hidden="true"></i>
  168.                                             {{shop.mail}}
  169.                                         </div>
  170.                                         <div class="d-flex align-items-start may-5">
  171.                                             <i class="fas fa-phone wi-14 mr-2  position-relative t-5" aria-hidden="true"></i>
  172.                                             Tél. : {{shop.phone}}
  173.                                         </div>
  174.                                         <div class="d-flex align-items-start may-5">
  175.                                             <i class="fas fa-fax wi-14 mr-2  position-relative t-5" aria-hidden="true"></i>
  176.                                             Fax. : {{shop.fax}}
  177.                                         </div>
  178.                                     </div>
  179.                                     <div class="d-flex align-items-start mat-15 ">
  180.                                         <i class="fas fa-fax wi-14 mr-2  position-relative t-5" aria-hidden="true"></i>
  181.                                         <div>
  182.                                             <span class="fw-700">Horaires d'ouverture</span>
  183.                                             <div>
  184.                                                 {{ shop.hours|raw }}
  185.                                             </div>
  186.                                         </div>
  187.                                     </div>
  188.                                 </div>
  189.                             {% endfor %}
  191.                         </div>
  192.                     </div>
  193.                     <a href="#" class="btn btn-brown text-uppercase fs-12 mat-50 pax-25 fw-400 pay-10">Voir TOUTES les fromageries</a>
  194.                 </div>
  195.             </div>
  196.             <div class="col align-self-end pax-0">
  197.                 <img src="{{ asset('assets/img/brebis.png') }}" alt="image brebis mons"/>
  198.             </div>
  199.         </div>
  200.     </div>
  201. {% endblock %}