templates/front_end/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Acceuil SCI CAWALLY !{% endblock %}
  5. {% block body %}
  6.     <!-- Header Start -->
  7.     <div class="container-fluid header bg-white p-0">
  8.         <div class="row g-0 align-items-center flex-column-reverse flex-md-row">
  9.             <div class="col-md-6 p-5 mt-lg-5">
  10.                 <h1 class="display-5 animated fadeIn  mb-4">Trouvez une <span class="text-primary">Maison parfaite</span> Pour vivre avec votre famille</h1>
  11.                 <p class="animated fadeIn mb-4 pb-2">Trouvez facilement votre bien immobilier en quelques clics.</p>
  12.                 <a href="{{ path('frontend_property') }}" class="btn btn-primary py-3 px-5 me-3 animated fadeIn">Voir Plus</a>
  13.             </div>
  14.             <div class="col-md-6 animated fadeIn">
  15.                 <div class="owl-carousel header-carousel">
  16.                     <div class="owl-carousel-item">
  17.                         <img class="img-fluid header-img" src="{{ absolute_url('build/images/SCI-CAWALLY-Projet-de-construction.jpeg') }}" alt="">
  18.                     </div>
  19.                     <div class="owl-carousel-item">
  20.                         <img class="img-fluid header-img" src="{{ absolute_url('build/images/SCI-CAWALLY-Projet.jpeg') }}" alt="">
  21.                     </div>
  22.                 </div>
  23.             </div>
  24.         </div>
  25.     </div>
  26.     <!-- Header End -->
  29.     <!-- Search Start -->
  30.     <div class="container-fluid bg-primary mb-5 wow fadeIn" data-wow-delay="0.1s" style="padding: 35px;">
  31.         <div class="container">
  32.             {{ form_start(Form) }}
  33.             <div class="row g-2">
  34.                 <div class="col-md-10">
  35.                     <div class="row g-2">
  36.                         <div class="col-md-4">
  37.                             {{ form_widget(Form.city)}}
  38.                         </div>
  39.                         <div class="col-md-4">
  40.                             {{ form_widget(Form.categorie) }}
  41.                         </div>
  42.                         <div class="col-md-4">
  43.                             {{ form_widget(Form.isToSal)}}
  44.                         </div>
  45.                     </div>
  46.                 </div>
  47.                 <div class="col-md-2">
  48.                     <button class="btn btn-dark btn-sm border-0 w-100 py-3">Recherche</button>
  49.                 </div>
  50.             </div>
  51.             {{ form_end(Form) }}
  52.         </div>
  53.     </div>
  54.     <!-- Search End -->
  57.     <!-- Category Start -->
  58.     <div class="container-xxl py-5">
  59.         <div class="container">
  60.             <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
  61.                 <h1 class="mb-3">Les catégories de bien disponible</h1>
  62.             </div>
  63.             <div class="row g-4">
  64.                 <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.1s">
  65.                     <a class="cat-item d-block bg-light text-center link rounded p-3" href="{{ path('frontend_property') }}">
  66.                         <div class="rounded p-4">
  67.                             <div class="icon mb-3">
  68.                                 <img class="img-fluid" src="{{ absolute_url('build/images/icon-apartment.png')}}" alt="Icon">
  69.                             </div>
  70.                             <h6>Apartment</h6>
  71.                             <span>123 Propriétés</span>
  72.                         </div>
  73.                     </a>
  74.                 </div>
  75.                 <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.3s">
  76.                     <a class="cat-item d-block bg-light text-center link  rounded p-3" href="">
  77.                         <div class="rounded p-4">
  78.                             <div class="icon mb-3">
  79.                                 <img class="img-fluid" src="{{ absolute_url('build/images/icon-villa.png')}}" alt="Icon">
  80.                             </div>
  81.                             <h6>Villa</h6>
  82.                             <span>12 Propriétés</span>
  83.                         </div>
  84.                     </a>
  85.                 </div>
  86.                 <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.5s">
  87.                     <a class="cat-item d-block bg-light text-center link  rounded p-3" href="{{ path('frontend_property') }}">
  88.                         <div class="rounded p-4">
  89.                             <div class="icon mb-3">
  90.                                 <img class="img-fluid" src="{{ absolute_url('build/images/icon-house.png')}}" alt="Icon">
  91.                             </div>
  92.                             <h6>Maison</h6>
  93.                             <span>123 Propriétés</span>
  94.                         </div>
  95.                     </a>
  96.                 </div>
  97.                 <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.7s">
  98.                     <a class="cat-item d-block bg-light text-center link  rounded p-3" href="{{ path('frontend_property') }}">
  99.                         <div class="rounded p-4">
  100.                             <div class="icon mb-3">
  101.                                 <img class="img-fluid" src="{{ absolute_url('build/images/icon-housing.png')}} " alt="Icon">
  102.                             </div>
  103.                             <h6>Bureaux</h6>
  104.                             <span>123 Propriétés</span>
  105.                         </div>
  106.                     </a>
  107.                 </div>
  108.                 <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.1s">
  109.                     <a class="cat-item d-block bg-light text-center link  rounded p-3" href="{{ path('frontend_property') }}">
  110.                         <div class="rounded p-4">
  111.                             <div class="icon mb-3">
  112.                                 <img class="img-fluid" src="{{ absolute_url('build/images/icon-building.png')}}" alt="Icon">
  113.                             </div>
  114.                             <h6>Immeubles</h6>
  115.                             <span>123 Propriétés</span>
  116.                         </div>
  117.                     </a>
  118.                 </div>
  119.                 <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.3s">
  120.                     <a class="cat-item d-block bg-light text-center link  rounded p-3" href="{{ path('frontend_property') }}">
  121.                         <div class="rounded p-4">
  122.                             <div class="icon mb-3">
  123.                                 <img class="img-fluid" src="{{ absolute_url('build/images/icon-neighborhood.png')}}" alt="Icon">
  124.                             </div>
  125.                             <h6>Duplexes</h6>
  126.                             <span>123 Properties</span>
  127.                         </div>
  128.                     </a>
  129.                 </div>
  130.                 <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.5s">
  131.                     <a class="cat-item d-block bg-light text-center link  rounded p-3" href="{{ path('frontend_property') }}">
  132.                         <div class="rounded p-4">
  133.                             <div class="icon mb-3">
  134.                                 <img class="img-fluid" src="{{ absolute_url('build/images/icon-condominium.png')}}" alt="Icon">
  135.                             </div>
  136.                             <h6>Magasins</h6>
  137.                             <span>123 Propriétés</span>
  138.                         </div>
  139.                     </a>
  140.                 </div>
  141.                 <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.7s">
  142.                     <a class="cat-item d-block bg-light text-center link  rounded p-3" href="{{ path('frontend_property') }}">
  143.                         <div class="rounded p-4">
  144.                             <div class="icon mb-3">
  145.                                 <img class="img-fluid" src="{{ absolute_url('build/images/icon-luxury.png')}}" alt="Icon">
  146.                             </div>
  147.                             <h6>Garages</h6>
  148.                             <span>123 Propriétés</span>
  149.                         </div>
  150.                     </a>
  151.                 </div>
  152.             </div>
  153.         </div>
  154.     </div>
  155.     <!-- Category End -->
  158.     <!-- About Start -->
  159.     <div class="container-xxl py-5">
  160.         <div class="container">
  161.             <div class="row g-5 align-items-center">
  162.                 <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
  163.                     <div class="about-img position-relative overflow-hidden p-5 pe-0">
  164.                         <img class="img-fluid w-100" src="{{ absolute_url('build/images/about.jpg')}}">
  165.                     </div>
  166.                 </div>
  167.                 <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
  168.                     <h1 class="mb-4">Un endroit pour trouver la propriété parfaite</h1>
  169.                     <p class="mb-4">Avec nous c’est la satisfaction assuré ! </p>
  170.                     <p><i class="fa fa-check text-primary me-3"></i>Professionnalisme </p>
  171.                     <p><i class="fa fa-check text-primary me-3"></i>Fiabilité </p>
  172.                     <p><i class="fa fa-check text-primary me-3"></i>Des propriétés de bonne qualité </p>
  173.                     <a class="btn btn-primary py-3 px-5 mt-3" href="">Voir plus</a>
  174.                 </div>
  175.             </div>
  176.         </div>
  177.     </div>
  178.     <!-- About End -->
  181.     <!-- Property List Start -->
  182.     <div class="container-xxl py-5">
  183.         <div class="container">
  184.             <div class="row g-0 gx-5 align-items-end">
  185.                 <div class="col-lg-6">
  186.                     <div class="text-start mx-auto mb-5 wow slideInLeft" data-wow-delay="0.1s">
  187.                         <h1 class="mb-3">Liste de nos Propriétés</h1>
  188.                         <p>Vous Trouverez les plus belles propriétés immobilières dans cette liste.</p>
  189.                     </div>
  190.                 </div>
  191.                 <div class="col-lg-6 text-start text-lg-end wow slideInRight" data-wow-delay="0.1s">
  192.                     <ul class="nav nav-pills d-inline-flex justify-content-end mb-5">
  193.                         <li class="nav-item me-2">
  194.                             <a class="btn btn-outline-primary active" data-bs-toggle="pill" href="#tab-1">En vedette</a>
  195.                         </li>
  196.                         <li class="nav-item me-2">
  197.                             <a class="btn btn-outline-primary" data-bs-toggle="pill" href="#tab-2">À vendre</a>
  198.                         </li>
  199.                         <li class="nav-item me-0">
  200.                             <a class="btn btn-outline-primary" data-bs-toggle="pill" href="#tab-3">À louer</a>
  201.                         </li>
  202.                     </ul>
  203.                 </div>
  204.             </div>
  205.             <div class="tab-content">
  206.                 <div id="tab-1" class="tab-pane fade show p-0 active">
  207.                     <div class="row g-4">
  208.                         {% for properties in property %}
  209.                         <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
  210.                             <div class="property-item rounded overflow-hidden">
  211.                                 <div class="position-relative overflow-hidden">
  212.                                     <a href="{{ path('frontend_property') }}"><img class="img-fluid img-miniature" src="{{ absolute_url('uploads/' ~ properties.firstimage)}}" alt=""></a>
  213.                                     <div class="bg-primary rounded text-white position-absolute start-0 top-0 m-4 py-1 px-3">{% if properties.isToSale == 1 %} À vendre{% else %} À Louer{% endif %}</div>
  214.                                     <div class="bg-white rounded-top text-primary position-absolute start-0 bottom-0 mx-4 pt-1 px-3">{{ properties.propertyTypes.title }}</div>
  215.                                 </div>
  216.                                 <div class="p-4  pb-0">
  217.                                     <h5 class="text-primary mb-3">{{ properties.price|number_format() }} FCFA</h5>
  218.                                     <a class="d-block text-truncate h5 mb-2" href="{{ path('frontend_property') }}">{{ properties.title }}</a>
  219.                                     <p><i class="fa fa-map-marker-alt text-primary me-2"></i>123 Street, New York, USA</p>
  220.                                 </div>
  221.                                 <div class="d-flex border-top">
  222.                                     <small class="flex-fill text-center border-end py-2"><i class="fa fa-ruler-combined text-primary me-2"></i>{{ properties.surface }} m²</small>
  223.                                     <small class="flex-fill text-center border-end py-2"><i class="fa fa-bed text-primary me-2"></i>{{ properties.room }} pièces</small>
  224.                                     <small class="flex-fill text-center py-2"><i class="fa fa-bath text-primary me-2"></i>{{ properties.shower}} douches</small>
  225.                                 </div>
  226.                             </div>
  227.                         </div>
  228.                         {% endfor %}
  229.                         <div class="col-12 text-center wow fadeInUp" data-wow-delay="0.1s">
  230.                             <a class="btn btn-primary py-3 px-5" href="{{ path('frontend_property') }}">Voir Plus de propriétés </a>
  231.                         </div>
  232.                     </div>
  233.                 </div>
  234.                 <div id="tab-2" class="tab-pane fade show p-0">
  235.                     <div class="row g-4">
  236.                         {% for properties in propertyTosel %}
  237.                         <div class="col-lg-4 col-md-6">
  238.                             <div class="property-item rounded overflow-hidden">
  239.                                 <div class="position-relative overflow-hidden">
  240.                                     <a href="{{ path('frontend_property') }}"><img class="img-fluid img-miniature" src="{{ absolute_url('uploads/' ~ properties.firstimage)}}" alt=""></a>
  241.                                     <div class="bg-primary rounded text-white position-absolute start-0 top-0 m-4 py-1 px-3">À vendre</div>
  242.                                     <div class="bg-white rounded-top text-primary position-absolute start-0 bottom-0 mx-4 pt-1 px-3">{{ properties.propertyTypes.title }}</div>
  243.                                 </div>
  244.                                 <div class="p-4 pb-0">
  245.                                     <h5 class="text-primary mb-3">{{ properties.price|number_format() }} FCFA</h5>
  246.                                     <a class="d-block h5 text-truncate mb-2" href="{{ path('frontend_property') }}">{{ properties.title }}</a>
  247.                                     <p><i class="fa fa-map-marker-alt text-primary me-2"></i>{{ properties.quatier }}, {{ properties.city }}</p>
  248.                                 </div>
  249.                                 <div class="d-flex border-top">
  250.                                     <small class="flex-fill text-center border-end py-2"><i class="fa fa-ruler-combined text-primary me-2"></i>{{ properties.surface }} m²</small>
  251.                                     <small class="flex-fill text-center border-end py-2"><i class="fa fa-bed text-primary me-2"></i>{{ properties.room }} Pièces</small>
  252.                                     <small class="flex-fill text-center py-2"><i class="fa fa-bath text-primary me-2"></i>{{ properties.shower}} douche(s)</small>
  253.                                 </div>
  254.                             </div>
  255.                         </div>
  256.                         {% endfor %}
  257.                         <div class="col-12 text-center">
  258.                             <a class="btn btn-primary py-3 px-5" href="{{ path('frontend_property') }}">Voir Plus de propriétés</a>
  259.                         </div>
  260.                     </div>
  261.                 </div>
  262.                 <div id="tab-3" class="tab-pane fade show p-0">
  263.                     <div class="row g-4">
  264.                         {% for properties in propertyTorent %}
  265.                         <div class="col-lg-4 col-md-6">
  266.                             <div class="property-item rounded overflow-hidden">
  267.                                 <div class="position-relative overflow-hidden">
  268.                                     <a href="{{ path('frontend_property') }}"><img class="img-fluid img-miniature" src="{{ absolute_url('uploads/' ~ properties.firstimage)}}" alt=""></a>
  269.                                     <div class="bg-primary rounded text-white position-absolute start-0 top-0 m-4 py-1 px-3">À louer</div>
  270.                                     <div class="bg-white rounded-top text-primary position-absolute start-0 bottom-0 mx-4 pt-1 px-3">{{ properties.propertyTypes.title }}</div>
  271.                                 </div>
  272.                                 <div class="p-4 pb-0">
  273.                                     <h5 class="text-primary mb-3">{{ properties.price|number_format() }} FCFA</h5>
  274.                                     <a class="d-block text-truncate h5 mb-2" href="{{ path('frontend_property') }}">{{ properties.title }}</a>
  275.                                     <p><i class="fa fa-map-marker-alt text-primary me-2"></i>{{ properties.quatier}}, {{ properties.city }}</p>
  276.                                 </div>
  277.                                 <div class="d-flex border-top">
  278.                                     <small class="flex-fill text-center border-end py-2"><i class="fa fa-ruler-combined text-primary me-2"></i>{{ properties.surface }} m²</small>
  279.                                     <small class="flex-fill text-center border-end py-2"><i class="fa fa-bed text-primary me-2"></i>{{ properties.room }} Pièces</small>
  280.                                     <small class="flex-fill text-center py-2"><i class="fa fa-bath text-primary me-2"></i>{{ properties.shower }} douches</small>
  281.                                 </div>
  282.                             </div>
  283.                         </div>
  284.                         {% endfor %}
  285.                         <div class="col-12 text-center">
  286.                             <a class="btn btn-primary py-3 px-5" href="{{ path('frontend_property') }}">Voir Plus de propriétés</a>
  287.                         </div>
  288.                     </div>
  289.                 </div>
  290.             </div>
  291.         </div>
  292.     </div>
  293.     <!-- Property List End -->
  295.     <!-- Call to Action Start -->
  296.     <div class="container-xxl py-5">
  297.         <div class="container">
  298.             <div class="bg-light rounded p-3">
  299.                 <div class="bg-white rounded p-4" style="border: 1px dashed rgba(0, 185, 142, .3)">
  300.                     <div class="row g-5 align-items-center">
  301.                         <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
  302.                             <img class="img-fluid rounded w-100" src=" {{ absolute_url('build/images/agent2.jpg')}} " alt="">
  303.                         </div>
  304.                         <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
  305.                             <div class="mb-4">
  306.                                 <h1 class="mb-3">Contactez  notre agent certifié</h1>
  307.                                 <p>Eirmod sed ipsum dolor sit rebum magna erat. Tempor lorem kasd vero ipsum sit sit diam justo sed vero dolor duo.</p>
  308.                             </div>
  309.                             <a href="tel:225 07 58 48 32 71" class="btn btn-primary py-3 px-4 me-2"><i class="fa fa-phone-alt me-2"></i>Appel Téléphonique</a>
  310.                             <a href="" class="btn btn-dark py-3 px-4"><i class="fa fa-calendar-alt me-2"></i>Obtenir un rendez-vous</a>
  311.                         </div>
  312.                     </div>
  313.                 </div>
  314.             </div>
  315.         </div>
  316.     </div>
  317.     <!-- Call to Action End -->
  319.     <!-- Team End -->
  322.     <!-- Testimonial Start -->
  323.     <div class="container-xxl py-5">
  324.         <div class="container">
  325.             <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
  326.                 <h1 class="mb-3">Ce que nos clients disent!</h1>
  327.                 <p>Vous troverez ci-dessous les temoignages de nos clients.</p>
  328.             </div>
  329.             <div class="owl-carousel testimonial-carousel wow fadeInUp" data-wow-delay="0.1s">
  330.                 <div class="testimonial-item bg-light rounded p-3">
  331.                     <div class="bg-white border rounded p-4">
  332.                         <p>Un personnel jeune, dynamique et professionnel .   </p>
  333.                         <div class="d-flex align-items-center">
  334.                             <img class="img-fluid flex-shrink-0 rounded" src="{{ absolute_url('build/images/user.jpg')}} " style="width: 45px; height: 45px;">
  335.                             <div class="ps-3">
  336.                                 <h6 class="fw-bold mb-1">Client </h6>
  337.                                 <small>Profession</small>
  338.                             </div>
  339.                         </div>
  340.                     </div>
  341.                 </div>
  342.                 <div class="testimonial-item bg-light rounded p-3">
  343.                     <div class="bg-white border rounded p-4">
  344.                         <p>Ils m'ont aider à trouver ma maison de rêves en un ci peut de temps. Ils sont vraiment éfficace .</p>
  345.                         <div class="d-flex align-items-center">
  346.                             <img class="img-fluid flex-shrink-0 rounded" src="{{ absolute_url('build/images/user.jpg')}}" style="width: 45px; height: 45px;">
  347.                             <div class="ps-3">
  348.                                 <h6 class="fw-bold mb-1">Client </h6>
  349.                                 <small>Profession</small>
  350.                             </div>
  351.                         </div>
  352.                     </div>
  353.                 </div>
  354.                 <div class="testimonial-item bg-light rounded p-3">
  355.                     <div class="bg-white border rounded p-4">
  356.                         <p>Les agens immobilier sont aimable, profesionnel et donne de très bons conseils.  </p>
  357.                         <div class="d-flex align-items-center">
  358.                             <img class="img-fluid flex-shrink-0 rounded" src="{{ absolute_url('build/images/user.jpg')}}" style="width: 45px; height: 45px;">
  359.                             <div class="ps-3">
  360.                                 <h6 class="fw-bold mb-1">Client</h6>
  361.                                 <small>Profession</small>
  362.                             </div>
  363.                         </div>
  364.                     </div>
  365.                 </div>
  366.             </div>
  367.         </div>
  368.     </div>
  369. {% endblock %}