templates/pages/index.html.twig line 1

  1. {% extends "base.html.twig" %}
  3. {% block title %}Construction neuve - Rénovation - Nicolas Behr, Maître d'œuvre à Auxerre{% endblock %}
  5. {% block body %}
  6.     <main>
  7.         {% for message in app.flashes('success') %}
  8.             <div class="container">
  9.                 <div class="alert alert-success" role="alert">
  10.                     <p class="title">Succès</p>
  11.                     <p class="message">{{ message }}</p>
  12.                 </div>
  13.             </div>
  14.         {% endfor %}
  15.         <section class="home">
  16.             <div class="home__content">
  17.                 <div class="home__content__text">
  18.                     <div class="title">
  19.                         <div class="trait"></div>
  20.                         <h1>Réalisons ensemble la maison<br> dont vous avez <span>toujours rêvé</span></h1>
  21.                     </div>
  22.                     <div class="home__content__text__button">
  23.                         <a href="#presentation" class="btn">En savoir plus</a>
  24.                         <a href="#contact" class="p-contact">
  25.                             <img src="{{ asset('images/icons/icon-fleche-noire.svg') }}" alt="Pictogramme flêche dans un rond noir">
  26.                             <span>prendre contact</span>
  27.                         </a>
  28.                     </div>
  30.                     <div class="home__content__text__scroll">
  31.                         <svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" viewBox="0 0 47 47">
  32.                             <g id="souris-scroll" transform="translate(-60 -984)">
  33.                                 <circle id="Ellipse_1" data-name="Ellipse 1" cx="23.5" cy="23.5" r="23.5" transform="translate(60 984)" fill="#fff"/>
  34.                                 <path id="Ellipse_1_-_Contour" data-name="Ellipse 1 - Contour" d="M23.5,1a22.506,22.506,0,0,0-8.758,43.232A22.506,22.506,0,0,0,32.258,2.768,22.358,22.358,0,0,0,23.5,1m0-1A23.5,23.5,0,1,1,0,23.5,23.5,23.5,0,0,1,23.5,0Z" transform="translate(60 984)" fill="#1d1d1d"/>
  35.                                 <g id="Groupe_11" data-name="Groupe 11">
  36.                                     <rect id="Rectangle_7" data-name="Rectangle 7" width="19" height="27" rx="9.5" transform="translate(74 994)" fill="#fff"/>
  37.                                     <path id="Rectangle_7_-_Contour" data-name="Rectangle 7 - Contour" d="M9.5,1A8.51,8.51,0,0,0,1,9.5v8a8.5,8.5,0,0,0,17,0v-8A8.51,8.51,0,0,0,9.5,1m0-1A9.5,9.5,0,0,1,19,9.5v8a9.5,9.5,0,0,1-19,0v-8A9.5,9.5,0,0,1,9.5,0Z" transform="translate(74 994)" fill="#1d1d1d"/>
  38.                                     <path id="Tracé_26" class="trait-scroll" data-name="Tracé 26" d="M83.5,1005.095a.5.5,0,0,1-.5-.5v-6.485a.5.5,0,0,1,1,0v6.485A.5.5,0,0,1,83.5,1005.095Z" fill="#1d1d1d"/>
  39.                                 </g>
  40.                             </g>
  41.                         </svg>
  42.                         <span>Scroll</span>
  43.                     </div>
  44.                 </div>
  45.                 <div class="home__content__image">
  46.                     <img src="{{ asset('images/construction-renovation-maison-home.png') }}" alt="Maison avec et piscine et maison container">
  47.                 </div>
  48.             </div>
  49.         </section>
  51.         <section class="metier" id="presentation">
  52.             <div class="container">
  53.                 <div class="metier__carousel">
  54.                     <div class="metier__carousel__item">
  55.                         <div class="image">
  56.                             <img src="{{ asset('images/nicolas-behr.jpg') }}" alt="Nicolas Behr">
  57.                         </div>
  58.                         <div class="texte">
  59.                             <div class="trait"></div>
  60.                             <span class="subtitle boska">Nicolas Behr</span>
  61.                             <h2 class="title">Maître d'œuvre</h2>
  63.                             <p>
  64.                                 Nicolas BEHR vous accompagne de la création à la réception de votre projet.
  65.                                 <br><br>
  66.                                 Diplômé d'une école d'architecture, il a travaillé chez un constructeur pendant 
  67.                                 plusieurs années, puis a décidé de créer son propre atelier.
  68.                                 <br><br>
  69.                                 Pour vos projets de rénovation, de réhabilitation, d'agencement intérieur, 
  70.                                 d'agrandissement ou de bâtiment neuf, Nicolas BEHR sera être force de proposition, 
  71.                                 créatif et à l'écoute pour élaborer avec vous, votre projet privé ou tertiaire sur mesure.
  72.                                 <br><br>
  73.                                 Sensible à une architecture de qualité, l'atelier attache autant à l'esthétique 
  74.                                 de l'ouvrage qu'à sa fonctionnalité. Le savoir-faire apporté sera indispensable 
  75.                                 au vu des démarches administratives nécessaires, de la bonne réalisation de 
  76.                                 l'ouvrage et de l'importance de la maîtrise des coûts et du choix des bons partenaires. 
  77.                                 L'atelier porte une attention particulière au choix des intervenants.
  78.                                 <br><br>
  79.                                 Nicolas BEHR a contribué à de nombreux programmes architecturaux : maisons neuves, 
  80.                                 agrandissements, rénovations, logements collectifs et bâtiments tertiaires.
  81.                                 <br><br>
  82.                                 Retrouvez-le prochainement dans son nouvel atelier qui vous accueillera avant 
  83.                                 l'été 2023 à Auxerre.
  84.                             </p>
  86.                             <img src="{{ asset('images/idv-nicolas-behr.svg') }}" class="idv" alt="Idv nicolas Behr">
  87.                         </div>
  88.                     </div>
  89.                 </div>
  91.                 <div class="metier__etapes">
  92.                     <div class="metier__etapes__etape bggris">
  93.                         <div class="number-title">
  94.                             <div class="number">*1</div>
  95.                             <h3>Élaborer</h3>
  96.                         </div>
  97.                         <div class="trait"></div>
  98.                         <p>
  99.                             Ce projet est le vôtre. Ensemble, nous allons échanger quant à vos attentes ainsi qu'être 
  100.                             force de propositions de créations et aménagements possibles. Il est important d'appréhender 
  101.                             la faisabilité du projet dans sa globalité; une fois réalisé, une représentation technique 
  102.                             des lieux sous forme de plans permettra d'avancer dans la création de votre projet.
  103.                         </p>
  104.                     </div>
  106.                     <div class="metier__etapes__etape">
  107.                         <div class="number-title">
  108.                             <div class="number">*2</div>
  109.                             <h3>Créer</h3>
  110.                         </div>
  111.                         <div class="trait"></div>
  112.                         <p>
  113.                             Créer ce que vous avez toujours imaginé sera une phase importante. Un dessin architectural 
  114.                             vous sera proposé sous forme d'esquisse en veillant à respecter vos critères préalablement 
  115.                             définis. Les qualifications et l'expérience de l'atelier seront mises à votre disposition 
  116.                             pour votre projet sur-mesure. Des outils précis vous permettront également de donner vie 
  117.                             à votre projet pour passer à sa réalisation.
  118.                         </p>
  119.                     </div>
  121.                     <div class="metier__etapes__etape mleft">
  122.                         <div class="number-title">
  123.                             <div class="number">*3</div>
  124.                             <h3>Réaliser</h3>
  125.                         </div>
  126.                         <div class="trait"></div>
  127.                         <p>
  128.                             Votre projet sera réalisé en veillant à respecter les règles d'urbanisme en vigueur. 
  129.                             Un dossier complet (coupes, façades, élévations, plans cotés, implantations, cahier 
  130.                             des charges,...) sera nécessaire à la bonne mise en œuvre du bâtiment. L'atelier 
  131.                             réalisera également les documents administratifs nécessaires (permis, déclaration 
  132.                             préalables,...) à l'acceptation des services instructeurs.
  133.                         </p>
  134.                     </div>
  136.                     <div class="metier__etapes__etape bggris">
  137.                         <div class="number-title">
  138.                             <div class="number">*4</div>
  139.                             <h3>Accompagner</h3>
  140.                         </div>
  141.                         <div class="trait"></div>
  142.                         <p>
  143.                             Nicolas BEHR vous accompagnera tout au long de votre projet... Jusqu'à la réception de 
  144.                             celui-ci. Recherche des partenaires, planning prévisionnel, implantation et suivi de 
  145.                             chantier mis en œuvre. Un reportage photo sera prévu pour confirmer la conformité 
  146.                             des ouvrages. Les factures seront contrôlées et validées avec le maître d'ouvrage. 
  147.                             La réception sera accompagnée d'une aide administrative.
  148.                         </p>
  149.                     </div>
  150.                 </div>
  151.             </div>
  152.         </section>
  154.         <section class="projets" id="projet">
  155.             <div class="container">
  156.                 <div class="projets__wrapper">
  157.                     <div class="projets__wrapper__images">
  158.                         <img src="{{ asset('images/blank-project-content.png') }}" id="blank" class="blank" alt="Maison moderne blanche avec piscine">
  159.                         <img src="{{ asset('images/projet-construction-unique.png') }}" id="construction-neuve-img" class="projets__wrapper__images__image active" alt="Maison moderne blanche avec piscine">
  160.                         <img src="{{ asset('images/agrandissement.png') }}" id="agrandissement-img" class="projets__wrapper__images__image" alt="Agrandissement maison ancienne">
  161.                         <img src="{{ asset('images/renovation.png') }}" id="renovation-img" class="projets__wrapper__images__image" alt="Rénovation maison ancienne">
  162.                         <img src="{{ asset('images/conseil.png') }}" id="conseil-img" class="projets__wrapper__images__image" alt="Conseil pour la construction d'une maison">
  163.                         <img src="{{ asset('images/bioclimatique.png') }}" id="bioclimatique-img" class="projets__wrapper__images__image" alt="Maison à basse consomation">
  164.                         <img src="{{ asset('images/administratif.png') }}" id="administratif-img" class="projets__wrapper__images__image" alt="Aide administrative pour rénovation ou construction de maison">
  165.                     </div>
  167.                     <div class="projets__wrapper__content-text">
  168.                         <div class="subtitle boska">Prestations</div>
  169.                         <h2 class="title">Parce que votre projet <span>est unique</span></h2>
  170.                         <p>
  171.                             Rénover une grange, un corps de ferme, une maison de ville, un appartement ou bien encore, partir d’une page blanche… Nous avons 
  172.                             toutes et tous des projets, des envies, des rêves bien distincts. Mon rôle ? M’adapter à vos envies pour que vous puissiez réaliser 
  173.                             le lieu d’habitation dont vous avez toujours rêvé. Du suivi complet au simple conseil, vous êtes libre de choisir quelle formule 
  174.                             vous conviendra le mieux.
  175.                         </p>
  177.                         <div class="projets__wrapper__content-text__tabs" data-controller="projet">
  178.                             <div class="projets__wrapper__content-text__tabs__tab open">
  179.                                 <div class="projets__wrapper__content-text__tabs__tab__head" id="construction-neuve">
  180.                                     <div class="icon-title">
  181.                                         <img src="{{ asset('images/icons/icon-construction.svg') }}" alt="Pictogramme construction">
  182.                                         <h3>Construction neuve</h3>
  183.                                     </div>
  184.                                     <div class="plus">
  185.                                         <!-- <img src="{{ asset('images/icons/cross-left.svg') }}" alt="flêche gauche">
  186.                                         <img src="{{ asset('images/icons/cross-right.svg') }}" alt="flêche droite"> -->
  187.                                         <svg xmlns="http://www.w3.org/2000/svg" width="29.477" height="31.838" viewBox="0 0 29.477 31.838">
  188.                                             <g id="plus" transform="translate(-1555.014 -3176.094)">
  189.                                                 <path id="Tracé_30" data-name="Tracé 30" d="M1586.927,3192.469h-12.6v-13.375h1.456v11.919h11.147Z" transform="translate(-2.436 -3)" fill="#1d1d1d"/>
  190.                                                 <path id="Tracé_31" data-name="Tracé 31" class="gauche" d="M12.6,13.375H0V0H1.456V11.919H12.6Z" transform="translate(1567.616 3207.932) rotate(180)" fill="#1d1d1d"/>
  191.                                             </g>
  192.                                         </svg>
  194.                                     </div>
  195.                                 </div>
  196.                                 <div class="projets__wrapper__content-text__tabs__tab__content">
  197.                                     <div class="text">
  198.                                         <p>
  199.                                             L'atelier cumule un forte expérience dans la construction de bâtiments neufs dans l'Yonne essentiellement.<br>
  200.                                             Vous souhaitez partir d'une page blanche ? Dessinons ensemble votre projet idéal.<br>
  201.                                             Adaptation au sol, au terrain, respect de l'urbanisme, création du bâtiment, plans, 3D, espace extérieurs et intérieurs, 
  202.                                             nous adapterons votre habitation à l'environnement.<br>
  203.                                             Une maison lumineuse aux dernières normes énergétiques, d'un aspect moderne, traditionnelle ou futuriste... Vivez l'expérience 
  204.                                             du vrai sur-mesure : choix des matériaux, choix des marques, choix des couleurs, sélection des artisans,...<br>
  205.                                             Nicolas BEHR vous accompagnera dans toutes les démarches et sera votre interlocuteur unique de la conception à la remise des clefs.
  206.                                         </p>
  207.                                         <img src="{{ asset('images/projet-construction-unique.png') }}" class="mobile" alt="Maison moderne blanche avec piscine">
  208.                                     </div>
  209.                                 </div>
  210.                             </div>
  212.                             <div class="projets__wrapper__content-text__tabs__tab">
  213.                                 <div class="projets__wrapper__content-text__tabs__tab__head" id="agrandissement">
  214.                                     <div class="icon-title">
  215.                                         <img src="{{ asset('images/icons/icon-agrandissement.svg') }}" alt="Pictogramme construction">
  216.                                         <h3>Agrandissement</h3>
  217.                                     </div>
  218.                                     <div class="plus">
  219.                                         <!-- <img src="{{ asset('images/icons/cross-left.svg') }}" alt="flêche gauche">
  220.                                         <img src="{{ asset('images/icons/cross-right.svg') }}" alt="flêche droite"> -->
  221.                                         <svg xmlns="http://www.w3.org/2000/svg" width="29.477" height="31.838" viewBox="0 0 29.477 31.838">
  222.                                             <g id="plus" transform="translate(-1555.014 -3176.094)">
  223.                                                 <path id="Tracé_30" data-name="Tracé 30" d="M1586.927,3192.469h-12.6v-13.375h1.456v11.919h11.147Z" transform="translate(-2.436 -3)" fill="#1d1d1d"/>
  224.                                                 <path id="Tracé_31" data-name="Tracé 31" class="gauche" d="M12.6,13.375H0V0H1.456V11.919H12.6Z" transform="translate(1567.616 3207.932) rotate(180)" fill="#1d1d1d"/>
  225.                                             </g>
  226.                                         </svg>
  228.                                     </div>
  229.                                 </div>
  230.                                 <div class="projets__wrapper__content-text__tabs__tab__content">
  231.                                     <div class="text">
  232.                                         <p>
  233.                                             Vos besoins évoluent ? Votre achat nécessite un agrandissement ? Votre foyer s'agrandit ?<br>
  234.                                             Sur-mesure et sans limite, nous allons, ensemble, lier créativité et fonctionnalité pour l'élaboration de votre projet.<br>
  235.                                             Du vitrage à la hauteur sous plafond, au simple agrandissement, l'atelier vous accompagne 
  236.                                             dans toutes vos démarches ainsi que dans la réalisation de l'ouvrage.<br>
  237.                                             Esquisse, PLU ou RNU, implantation, faisabilité technique, ... Lors de la phase de création, 
  238.                                             Nicolas BEHR vous proposera des plans ainsi que des visuels 3D afin de vous permettre une parfaite projection.
  239.                                         </p>
  240.                                         <img src="{{ asset('images/agrandissement.png') }}" class="mobile" alt="Agrandissement maison ancienne">
  241.                                     </div>
  242.                                 </div>
  243.                             </div>
  245.                             <div class="projets__wrapper__content-text__tabs__tab">
  246.                                 <div class="projets__wrapper__content-text__tabs__tab__head" id="renovation">
  247.                                     <div class="icon-title">
  248.                                         <img src="{{ asset('images/icons/icon-renovation.svg') }}" alt="Pictogramme construction">
  249.                                         <h3>Rénovation</h3>
  250.                                     </div>
  251.                                     <div class="plus">
  252.                                         <!-- <img src="{{ asset('images/icons/cross-left.svg') }}" alt="flêche gauche">
  253.                                         <img src="{{ asset('images/icons/cross-right.svg') }}" alt="flêche droite"> -->
  254.                                         <svg xmlns="http://www.w3.org/2000/svg" width="29.477" height="31.838" viewBox="0 0 29.477 31.838">
  255.                                             <g id="plus" transform="translate(-1555.014 -3176.094)">
  256.                                                 <path id="Tracé_30" data-name="Tracé 30" d="M1586.927,3192.469h-12.6v-13.375h1.456v11.919h11.147Z" transform="translate(-2.436 -3)" fill="#1d1d1d"/>
  257.                                                 <path id="Tracé_31" data-name="Tracé 31" class="gauche" d="M12.6,13.375H0V0H1.456V11.919H12.6Z" transform="translate(1567.616 3207.932) rotate(180)" fill="#1d1d1d"/>
  258.                                             </g>
  259.                                         </svg>
  261.                                     </div>
  262.                                 </div>
  263.                                 <div class="projets__wrapper__content-text__tabs__tab__content">
  264.                                     <div class="text">
  265.                                         <p>
  266.                                             Vous souhaitez rénover et aménager un ancien bâtiment ?<br>
  267.                                             Vous n'avez que 4 murs ? Un toit ?<br>
  268.                                             Vous souhaitez apporter de nouvelles ouvertures naturelles ?<br>
  269.                                             Vous souhaitez aménager des combles ou tout simplement réorganiser l'agencement de votre habitation ?<br>
  270.                                             L'atelier rénovera votre intérieur, du simple projet à celui plus complexe, cumulant charme et confort de vie du bâtiment rénové. Après une 
  271.                                             prise de cotes obligatoires, nous pourrons créer votre intérieur ou réorganiser celui-ci.<br>
  272.                                             Nicolas BEHR réalisera les démarches administratives nécessaires et vous accompagnera dans la conception du projet jusqu'à sa réception.
  273.                                         </p>
  274.                                         <img src="{{ asset('images/renovation.png') }}" class="mobile" alt="Rénovation maison ancienne">
  275.                                     </div>
  276.                                 </div>
  277.                             </div>
  279.                             <div class="projets__wrapper__content-text__tabs__tab">
  280.                                 <div class="projets__wrapper__content-text__tabs__tab__head" id="conseil">
  281.                                     <div class="icon-title">
  282.                                         <img src="{{ asset('images/icons/icon-conseil.svg') }}" alt="Pictogramme construction">
  283.                                         <h3>Conseil</h3>
  284.                                     </div>
  285.                                     <div class="plus">
  286.                                         <!-- <img src="{{ asset('images/icons/cross-left.svg') }}" alt="flêche gauche">
  287.                                         <img src="{{ asset('images/icons/cross-right.svg') }}" alt="flêche droite"> -->
  288.                                         <svg xmlns="http://www.w3.org/2000/svg" width="29.477" height="31.838" viewBox="0 0 29.477 31.838">
  289.                                             <g id="plus" transform="translate(-1555.014 -3176.094)">
  290.                                                 <path id="Tracé_30" data-name="Tracé 30" d="M1586.927,3192.469h-12.6v-13.375h1.456v11.919h11.147Z" transform="translate(-2.436 -3)" fill="#1d1d1d"/>
  291.                                                 <path id="Tracé_31" data-name="Tracé 31" class="gauche" d="M12.6,13.375H0V0H1.456V11.919H12.6Z" transform="translate(1567.616 3207.932) rotate(180)" fill="#1d1d1d"/>
  292.                                             </g>
  293.                                         </svg>
  295.                                     </div>
  296.                                 </div>
  297.                                 <div class="projets__wrapper__content-text__tabs__tab__content">
  298.                                     <div class="text">
  299.                                         <p>
  300.                                             Vous êtes en manque d'idées quant aux possibilités concernant votre projet architectural ? <br>
  301.                                             Vous souhaitez réaliser vos travaux mais avez besoin d'une étude de faisabilité, de plans ou d'esquisses ? <br>
  302.                                             L'atelier met à disposition son expérience ainsi que les bons outils pour que vous puissiez réaliser votre projet.
  303.                                         </p>
  304.                                         <img src="{{ asset('images/conseil.png') }}" class="mobile" alt="Conseil pour la construction d'une maison">
  305.                                     </div>
  306.                                 </div>
  307.                             </div>
  309.                             <div class="projets__wrapper__content-text__tabs__tab">
  310.                                 <div class="projets__wrapper__content-text__tabs__tab__head" id="bioclimatique">
  311.                                     <div class="icon-title">
  312.                                         <img src="{{ asset('images/icons/icon-esquisse.svg') }}" alt="Pictogramme construction">
  313.                                         <h3>Bioclimatique </h3>
  314.                                     </div>
  315.                                     <div class="plus">
  316.                                         <!-- <img src="{{ asset('images/icons/cross-left.svg') }}" alt="flêche gauche">
  317.                                         <img src="{{ asset('images/icons/cross-right.svg') }}" alt="flêche droite"> -->
  318.                                         <svg xmlns="http://www.w3.org/2000/svg" width="29.477" height="31.838" viewBox="0 0 29.477 31.838">
  319.                                             <g id="plus" transform="translate(-1555.014 -3176.094)">
  320.                                                 <path id="Tracé_30" data-name="Tracé 30" d="M1586.927,3192.469h-12.6v-13.375h1.456v11.919h11.147Z" transform="translate(-2.436 -3)" fill="#1d1d1d"/>
  321.                                                 <path id="Tracé_31" data-name="Tracé 31" class="gauche" d="M12.6,13.375H0V0H1.456V11.919H12.6Z" transform="translate(1567.616 3207.932) rotate(180)" fill="#1d1d1d"/>
  322.                                             </g>
  323.                                         </svg>
  325.                                     </div>
  326.                                 </div>
  327.                                 <div class="projets__wrapper__content-text__tabs__tab__content">
  328.                                     <div class="text">
  329.                                         <p>
  330.                                             Engagé dans une démarche environnementale, l'atelier peut vous accompagner pour donner à votre futur bâtiment 
  331.                                             des performances énergétiques élevés. Style épuré, bâti autrement isolé, matériaux biosoursés, mise 
  332.                                             en oeuvre adaptée, courbe du soleil, ...
  333.                                             <br>
  334.                                             Des conseils adaptés et une mise en œuvre complète.
  335.                                         </p>
  336.                                         <img src="{{ asset('images/bioclimatique.png') }}" class="mobile" alt="Maison à basse consomation">
  337.                                     </div>
  338.                                 </div>
  339.                             </div>
  341.                             <div class="projets__wrapper__content-text__tabs__tab">
  342.                                 <div class="projets__wrapper__content-text__tabs__tab__head" id="administratif">
  343.                                     <div class="icon-title">
  344.                                         <img src="{{ asset('images/icons/icon-administratif.svg') }}" alt="Pictogramme construction">
  345.                                         <h3>Administratif</h3>
  346.                                     </div>
  347.                                     <div class="plus">
  348.                                         <!-- <img src="{{ asset('images/icons/cross-left.svg') }}" alt="flêche gauche">
  349.                                         <img src="{{ asset('images/icons/cross-right.svg') }}" alt="flêche droite"> -->
  350.                                         <svg xmlns="http://www.w3.org/2000/svg" width="29.477" height="31.838" viewBox="0 0 29.477 31.838">
  351.                                             <g id="plus" transform="translate(-1555.014 -3176.094)">
  352.                                                 <path id="Tracé_30" data-name="Tracé 30" d="M1586.927,3192.469h-12.6v-13.375h1.456v11.919h11.147Z" transform="translate(-2.436 -3)" fill="#1d1d1d"/>
  353.                                                 <path id="Tracé_31" data-name="Tracé 31" class="gauche" d="M12.6,13.375H0V0H1.456V11.919H12.6Z" transform="translate(1567.616 3207.932) rotate(180)" fill="#1d1d1d"/>
  354.                                             </g>
  355.                                         </svg>
  357.                                     </div>
  358.                                 </div>
  359.                                 <div class="projets__wrapper__content-text__tabs__tab__content">
  360.                                     <div class="text">
  361.                                         <p>
  362.                                             Nicolas BEHR vous propose de vous accompagner dans vos démarches administratives.
  363.                                             Réalisation de permis de construire et de déclarations préalables.
  364.                                         </p>
  365.                                         <img src="{{ asset('images/administratif.png') }}" class="mobile" alt="Aide administrative pour rénovation ou construction de maison">
  366.                                     </div>
  367.                                 </div>
  368.                             </div>
  369.                         </div>
  370.                     </div>
  371.                 </div>
  372.             </div>
  373.         </section>
  375.         <section class="temoignages">
  376.             <img src="{{ asset('images/icons/forme-rond.svg') }}" class="forme-rond" alt="Cercle blanc">
  377.             <div class="temoignages__wrapper">
  378.                 <div class="temoignages__wrapper__temoignage">
  379.                     <div class="container">
  380.                         <span class="subtitle boska">Témoignages</span>
  381.                         <h2 class="title">Vous avez la <span>parole</span></h2>
  383.                         <div class="temoignages__wrapper__temoignage__tabs">
  384.                             <div class="temoignages__wrapper__temoignage__tabs__head">
  385.                                 <a href="john" class="temoignages__wrapper__temoignage__tabs__head__name active">Florian <span class="other-color">B</span>.</a>
  386.                                 <a href="alexandra" class="temoignages__wrapper__temoignage__tabs__head__name">Maxime <span class="other-color">D</span>.</a>
  387.                                 <a href="victor" class="temoignages__wrapper__temoignage__tabs__head__name">Victor <span class="other-color">A</span>.</a>
  388.                             </div>
  389.                             <div class="temoignages__wrapper__temoignage__tabs__tab" data-controller="temoignage">
  390.                                 <div class="trait"></div>
  391.                                 <div class="temoignages__wrapper__temoignage__tabs__tab__content open" id="john">
  392.                                     <p>
  393.                                         Nous avons fait appel à Nicolas Behr. Il a été à l'écoute, de bon conseil et surtout motivé (vu la configuration du terrain et les contraintes du PLU) 
  394.                                         pour réussir à créer avec nous le projet de nos rêves. Concernant la construction en elle-même, il était très agréable et rassurant de faire 
  395.                                         des réunions de chantier pour suivre l'avancée des travaux. Les délais ont été respectés et nous vivons désormais dans notre maison 😊
  396.                                     </p>
  397.                                     <img src="{{ asset('images/icons/5-etoiles.svg') }}" alt="5 etoiles rouges">
  398.                                 </div>
  400.                                 <div class="temoignages__wrapper__temoignage__tabs__tab__content" id="alexandra">
  401.                                     <p>
  402.                                         Nous avons fait construire notre maison avec Nicolas. Ses conseils avisés et son professionnalisme nous ont permis 
  403.                                         d’obtenir notre chez nous idéal.
  404.                                         Nicolas s’est toujours montré très disponible et attentif tout au long de notre projet.
  405.                                         C’est avec sérénité que nous ferions à nouveau appel à lui pour un futur projet.
  406.                                     </p>
  407.                                     <img src="{{ asset('images/icons/5-etoiles.svg') }}" alt="5 etoiles rouges">
  408.                                 </div>
  410.                                 <div class="temoignages__wrapper__temoignage__tabs__tab__content" id="victor">
  411.                                     <p>
  412.                                         Très bon professionnel à l écoute de ces clients. M. BEHR a su retranscrire nos envies pour réaliser notre projet et qui plus est il 
  413.                                         est présent pour le suivi et l accompagnement du projet. Dur plusieurs interlocuteurs, il est le seul à avoir réellement travaillé 
  414.                                         écouter et concrétiser nos envies. De plus, il nous a mis en rapport avec un cuisiniste qui a les mêmes valeurs de travail. 
  415.                                         Excellent professionnel que je recommande vivement et pleinement.
  416.                                     </p>
  417.                                     <img src="{{ asset('images/icons/5-etoiles.svg') }}" alt="5 etoiles rouges">
  418.                                 </div>
  419.                             </div>
  420.                         </div>
  421.                     </div>
  422.                 </div>
  423.                 <div class="temoignages__wrapper__image">
  424.                     <img src="{{ asset('images/maison-client.jpg') }}" alt="Maison moderne blanche avec terrasse en bois et piscine">
  425.                 </div>
  426.             </div>
  427.         </section>
  429.         <section class="facebook" id="realisation">
  430.             <div class="container">
  431.                 <span class="subtitle boska">Actualités</span>
  432.                 <h2 class="title">Du cœur à <span>l'ouvrage</span></h2>
  433.                 <div class="facebook__wrapper">
  434.                     {% for fbPost in data.data %}
  435.                         <div class="facebook__wrapper__item">
  436.                             <div class="facebook__wrapper__item__text">
  437.                                 <div class="fb-date">
  438.                                     <span>Fb*</span>
  439.                                     <span class="date">{{ fbPost.created_time|format_datetime('full', pattern="EEEE d MMMM yyyy", locale="fr") }}</span>
  440.                                 </div>
  441.                                 <div class="trait"></div>
  442.                                 <p>
  443.                                     {% if fbPost.message is defined %}
  444.                                         {{ fbPost.message }}
  445.                                     {% endif %}
  446.                                 </p>
  447.                                 <a href="{{ fbPost.permalink_url }}" target="_blank" class="btn btn-red">Voir la publication</a>
  448.                             </div>
  449.                             <div class="facebook__wrapper__item__image">
  450.                                 {% if fbPost.full_picture is defined %}
  451.                                     <img src="{{ fbPost.full_picture }}" alt="Photo publication facebook">
  452.                                 {% endif %}
  453.                             </div>
  454.                         </div>
  455.                     {% endfor %}
  456.                 </div>
  457.             </div>
  458.         </section>
  460.         <section class="contact" id="contact">
  461.             <div class="container">
  462.                 <div class="row">
  463.                     <div class="col-6">
  464.                         <span class="subtitle boska">Contact</span>
  465.                         <h2 class="title">
  466.                             Prêt(e) à réaliser <br>
  467.                             <span>votre rêve ?</span>
  468.                         </h2>
  469.                         <p>
  470.                             Vous avez une question ?<br>
  471.                             La réponse se trouve peut-être déjà dans notre FAQ.
  472.                         </p>
  473.                         <a href="{{ path('app_faq') }}" class="btn">Questions fréquentes</a>
  474.                     </div>
  475.                     <div class="col-6">
  476.                         {{ form_start(form) }}
  477.                             {{ form_label(form.subject) }}
  478.                             <div class="choice-list">
  479.                                 {% for child in form.subject %}
  480.                                     <div class="form-choice">
  481.                                         {{ form_widget(child) }}
  482.                                         {{ form_label(child) }}
  483.                                     </div>
  484.                                 {% endfor %}
  485.                             </div>
  486.                             {{ form_row(form.name) }}
  487.                             {{ form_row(form.city) }}
  488.                             {{ form_row(form.phone) }}
  489.                             {{ form_row(form.email) }}
  490.                             {{ form_row(form.message) }}
  492.                             {{ form_widget(form) }}
  493.                             <button class="btn" type="submit">Envoyer</button>
  494.                         {{ form_end(form) }}
  495.                     </div>
  496.                 </div>
  497.             </div>
  498.         </section>
  499.     </main>
  500. {% endblock %}