templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4.     <div class="container-fluid position-relative p-0">
  5.         <div id="header-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
  6.             <div class="carousel-inner">
  7.                 <div class="carousel-item active">
  8.                     <img class="w-100" src="{{asset('assets/img/ban.png')}}" alt="Image">
  9.                     <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
  10.                         <div class="p-3" style="max-width: 900px;">
  11.                             <h5 class="text-white text-uppercase mb-3 animated slideInDown">Creativité & Innovation</h5>
  12.                             <h1 class="display-1 text-white mb-md-4 animated zoomIn">Logiciel, Apparail & Industrie</h1>
  13.                             <a href="{{ path('product') }}" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft">Voir nos produits</a>
  14.                             <a href="{{ path('contact') }}" class="btn btn-outline-light py-md-3 px-md-5 animated slideInRight">Contactez nous</a>
  15.                         </div>
  16.                     </div>
  17.                 </div>
  18.                 <div class="carousel-item">
  19.                     <img class="w-100" src="{{asset('assets/img/ban.png')}}" alt="Image">
  20.                     <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
  21.                         <div class="p-3" style="max-width: 900px;">
  22.                             <h5 class="text-white text-uppercase mb-3 animated slideInDown">Creativité & Innovation</h5>
  23.                             <h1 class="display-1 text-white mb-md-4 animated zoomIn">Logiciel, Apparail & Industrie</h1>
  24.                             <a href="{{ path('product') }}" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft">Voir nos produits</a>
  25.                             <a href="{{ path('contact') }}" class="btn btn-outline-light py-md-3 px-md-5 animated slideInRight">Contactez nous</a>
  26.                         </div>
  27.                     </div>
  28.                 </div>
  29.             </div>
  30.             <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
  31.                 data-bs-slide="prev">
  32.                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  33.                 <span class="visually-hidden">Previous</span>
  34.             </button>
  35.             <button class="carousel-control-next" type="button" data-bs-target="#header-carousel"
  36.                 data-bs-slide="next">
  37.                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  38.                 <span class="visually-hidden">Next</span>
  39.             </button>
  40.         </div>
  41.     </div>
  43.     <!-- Facts Start -->
  44.     <div class="container-fluid facts py-5 pt-lg-0">
  45.         <div class="container py-5 pt-lg-0">
  46.             <div class="row gx-0">
  47.                 <div class="col-lg-4 wow zoomIn" data-wow-delay="0.1s">
  48.                     <div class="bg-primary shadow d-flex align-items-center justify-content-center p-4" style="height: 150px;">
  49.                         <div class="bg-white d-flex align-items-center justify-content-center rounded mb-2" style="width: 60px; height: 60px;">
  50.                             <i class="fa fa-users text-primary"></i>
  51.                         </div>
  52.                         <div class="ps-4">
  53.                             <h5 class="text-white mb-0">Satisfactions des clients</h5>
  54.                             <h1 class="text-white mb-0" data-toggle="counter-up">99</h1>
  55.                         </div>
  56.                     </div>
  57.                 </div>
  58.                 <div class="col-lg-4 wow zoomIn" data-wow-delay="0.3s">
  59.                     <div class="bg-light shadow d-flex align-items-center justify-content-center p-4" style="height: 150px;">
  60.                         <div class="bg-primary d-flex align-items-center justify-content-center rounded mb-2" style="width: 60px; height: 60px;">
  61.                             <i class="fa fa-check text-white"></i>
  62.                         </div>
  63.                         <div class="ps-4">
  64.                             <h5 class="text-primary mb-0">Projets réalisés</h5>
  65.                             <h1 class="mb-0" data-toggle="counter-up">14</h1>
  66.                         </div>
  67.                     </div>
  68.                 </div>
  69.                 <div class="col-lg-4 wow zoomIn" data-wow-delay="0.6s">
  70.                     <div class="bg-primary shadow d-flex align-items-center justify-content-center p-4" style="height: 150px;">
  71.                         <div class="bg-white d-flex align-items-center justify-content-center rounded mb-2" style="width: 60px; height: 60px;">
  72.                             <i class="fa fa-award text-primary"></i>
  73.                         </div>
  74.                         <div class="ps-4">
  75.                             <h5 class="text-white mb-0">Partenaires</h5>
  76.                             <h1 class="text-white mb-0" data-toggle="counter-up">9</h1>
  77.                         </div>
  78.                     </div>
  79.                 </div>
  80.             </div>
  81.         </div>
  82.     </div>
  83.     <!-- Facts Start -->
  86.     <!-- Blog Start -->
  87.  <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  88.     <div class="container py-5">
  89.         <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  90.             <h5 class="fw-bold text-primary text-uppercase">Nos produits</h5>
  91.             <h1 class="mb-0">Top ventes</h1>
  92.         </div><br>
  93.         <div class="row g-5">
  94.             <div class="row px-xl-5 pb-3">
  95.         {% for product in top_products %}
  96.             <div class="col-lg-3 col-md-6 col-sm-12 pb-1">
  97.             
  98.                 <div class="card product-item border-0 mb-4">
  99.                     <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
  100.                         <img class="img-fluid w-100" src="/uploads/{{product.image}}" alt="{{product.name}}" alt="">
  101.                     </div>
  102.                     <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
  103.                         <h6 class="text-truncate mb-3">{{ product.name}}</h6>
  104.                         <span class="product-subtitle text-center">{{product.subtitle}}</span>
  105.                         <div class="d-flex justify-content-center">
  106.                             <h6>{{(product.price / 100 )|number_format(2,',', '.')}} FCFA</h6>
  107.                         </div>
  108.                     </div>
  109.                     <div class="card-footer d-flex justify-content-between bg-light border">
  110.                         <a href="{{ path('product_show', {slug: product.slug}) }}" class="btn btn-sm text-dark p-0"><i class="fas fa-eye text-primary mr-1"></i>View Detail</a>
  111.                         <a href="{{ path('add_to_cart', {id: product.id}) }}" class="btn btn-sm text-dark p-0"><i class="fas fa-shopping-cart text-primary mr-1"></i>Ajout panier</a>
  112.                     </div>
  113.                 </div>
  114.            
  115.             </div>
  116.         {% endfor %}
  117.         </div>
  118.  
  119.         </div>
  120.     </div>
  121. </div>
  122. <!-- Blog Start -->
  124.     <!-- About Start -->
  125.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  126.         <div class="container py-5">
  127.             <div class="row g-5">
  128.                 <div class="col-lg-7">
  129.                     <div class="section-title   position-relative pb-3 mb-5">
  130.                         <h5 class="fw-bold text-primary text-uppercase">Sur nous</h5>
  131.                         <h1 class="mb-0">De meilleurs réalisations avec Nautx</h1>
  132.                     </div><br>
  133.                     <p class="mb-4">NAUTX la société a été crée en 2022 pour montrer un autre visage de l’Afrique et de révolutionner le continent par le biais de la recherche et du développement technologique, dans le but ultime de changer les mentalités et de faire valoir le savoir-faire et l’expertise Africaine</p>
  134.                     <div class="row g-0 mb-3">
  135.                         <div class="col-sm-6 wow zoomIn" data-wow-delay="0.2s">
  136.                             <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Primé</h5>
  137.                             <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Staff Professionnels</h5>
  138.                         </div>
  139.                         <div class="col-sm-6 wow zoomIn" data-wow-delay="0.4s">
  140.                             <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>24/7 Disponible</h5>
  141.                             <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Qualité</h5>
  142.                         </div>
  143.                     </div>
  144.                     <div class="d-flex align-items-center mb-4 wow fadeIn" data-wow-delay="0.6s">
  145.                         <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
  146.                             <i class="fa fa-phone-alt text-white"></i>
  147.                         </div>
  148.                         <div class="ps-4">
  149.                             <h5 class="mb-2">Pour toutes question vous pouvez contacter</h5>
  150.                             <h4 class="text-primary mb-0">+221 77 135 20 29</h4>
  151.                         </div>
  152.                     </div>
  153.                 </div>
  154.                 <div class="col-lg-5" style="min-height: 500px;">
  155.                     <div class="position-relative h-100">
  156.                         <img class="position-absolute w-100 h-100 rounded wow zoomIn" data-wow-delay="0.9s" src="{{asset('assets/img/aboutB.jpeg')}}" style="object-fit: cover;">
  157.                     </div>
  158.                 </div>
  159.             </div>
  160.         </div>
  161.     </div>
  162.     <!-- About End -->
  163.     <img class="w-100" src="{{asset('assets/img/banni.png')}}" alt="Image">
  165.         <!-- Features Start -->
  166.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  167.         <div class="container py-5">
  168.             <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  169.                 <h5 class="fw-bold text-primary text-uppercase">Pourquoi nous choisir</h5>
  170.                 <h1 class="mb-0">L’énoncé de vision de NAUTX est de faire avancer l’Afrique et d’améliorer le quotidien des populations</h1>
  171.             </div>
  172.             <div class="row g-5">
  173.                 <div class="col-lg-4">
  174.                     <div class="row g-5">
  175.                         <div class="col-12 wow zoomIn" data-wow-delay="0.2s">
  176.                             <div class="bg-primary rounded d-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
  177.                                 <i class="fa fa-cubes text-white"></i>
  178.                             </div>
  179.                             <h4>L’innovation</h4>
  180.                             <p class="mb-0">L’innovation désigne l’introduction sur le marché d'un produit ou d'un procédé nouveau ou significativement amélioré par rapport à ceux précédemment élaborés par l'unité légale</p>
  181.                         </div>
  182.                         <div class="col-12 wow zoomIn" data-wow-delay="0.6s">
  183.                             <div class="bg-primary rounded d-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
  184.                                 <i class="fa fa-award text-white"></i>
  185.                             </div>
  186.                             <h4>Prendre un risque</h4>
  187.                             <p class="mb-0">MPrendre un risque , c'est prendre une décision en espérant en tirer une issue positive sans exclure la possibilité d'une issue négative.  Elle est malgré tout mise en œuvre dans l'espoir d'obtenir un bénéfice en retou</p>
  188.                         </div>
  189.                     </div>
  190.                 </div>
  191.                 <div class="col-lg-4  wow zoomIn" data-wow-delay="0.9s" style="min-height: 350px;">
  192.                     <div class="position-relative h-100">
  193.                         <img class="position-absolute w-100 h-100 rounded wow zoomIn" data-wow-delay="0.1s" src="{{asset('assets/img/about1.png')}}" style="object-fit: cover;">
  194.                     </div>
  195.                 </div>
  196.                 <div class="col-lg-4">
  197.                     <div class="row g-5">
  198.                         <div class="col-12 wow zoomIn" data-wow-delay="0.4s">
  199.                             <div class="bg-primary rounded d-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
  200.                                 <i class="fa fa-users-cog text-white"></i>
  201.                             </div>
  202.                             <h4>L’intégrité</h4>
  203.                             <p class="mb-0">L’intégrité , est la motivation première à être conforme à ce que l'on est réellement. L'intégrité est donc le qualificatif donné à ce mécanisme de conformité à soi-même (en n'excluant pas ce qui n'est pas humain)</p>
  204.                         </div>
  205.                         <div class="col-12 wow zoomIn" data-wow-delay="0.8s">
  206.                             <div class="bg-primary rounded d-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
  207.                                 <i class="fa fa-phone-alt text-white"></i>
  208.                             </div>
  209.                             <h4>L’inclusivité</h4>
  210.                             <p class="mb-0">L’inclusivité , Cela signifie inclure tout le monde. Aussi simple que ça. On parle aussi de l’acte de promouvoir, de favoriser et de défendre l’intégration de minorités.</p>
  211.                         </div>
  212.                     </div>
  213.                 </div>
  214.             </div>
  215.         </div>
  216.     </div>
  217.     <!-- Features Start -->
  220.     <!-- Service Start -->
  221.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  222.         <div class="container py-5">
  223.             <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  224.                 <h5 class="fw-bold text-primary text-uppercase">Nos services</h5>
  225.                 <h1 class="mb-0">Solution par Problème</h1>
  226.             </div>
  227.             <div class="row g-5">
  228.                 <div class="col-lg-4 col-md-6 wow zoomIn" data-wow-delay="0.3s">
  229.                     <div class="service-item bg-light rounded d-flex flex-column align-items-center justify-content-center text-center">
  230.                         <div class="service-icon">
  231.                             <i class="fa fa-shield-alt text-white"></i>
  232.                         </div>
  233.                         <h4 class="mb-3">Hardware & Software</h4>
  234.                         <p class="m-0">Conception et Réalisation, Développement et mise en œuvre de micrologiciels et de cartes électroniques pour tous types d'utilisation .</p>
  235.                         </a>
  236.                     </div>
  237.                 </div>
  238.                 <div class="col-lg-4 col-md-6 wow zoomIn" data-wow-delay="0.6s">
  239.                     <div class="service-item bg-light rounded d-flex flex-column align-items-center justify-content-center text-center">
  240.                         <div class="service-icon">
  241.                             <i class="fa fa-chart-pie text-white"></i>
  242.                         </div>
  243.                         <h4 class="mb-3">Design industriel</h4>
  244.                         <p class="m-0">Création de dessins techniques et de modèles 3D de dispositif ou de produits industriels pour la visualisation et la simulation avant la production.</p>
  245.                         </a>
  246.                     </div>
  247.                 </div>
  248.                 <div class="col-lg-4 col-md-6 wow zoomIn" data-wow-delay="0.9s">
  249.                     <div class="service-item bg-light rounded d-flex flex-column align-items-center justify-content-center text-center">
  250.                         <div class="service-icon">
  251.                             <i class="fa fa-code text-white"></i>
  252.                         </div>
  253.                         <h4 class="mb-3">Développement de sites web</h4>
  254.                         <p class="m-0">Création et mise en œuvre de sites web pour les entreprises et les organisations.</p>
  255.                         </a>
  256.                     </div>
  257.                 </div>
  258.                 <div class="col-lg-4 col-md-6 wow zoomIn" data-wow-delay="0.3s">
  259.                     <div class="service-item bg-light rounded d-flex flex-column align-items-center justify-content-center text-center">
  260.                         <div class="service-icon">
  261.                             <i class="fab fa-android text-white"></i>
  262.                         </div>
  263.                         <h4 class="mb-3">Installation électrique</h4>
  264.                         <p class="m-0">Développement de prototypes de produits pour les entreprises et les start-ups innovantes et accompagnement pour une production en chaîne.</p>
  265.                         </a>
  266.                     </div>
  267.                 </div>
  268.                 <div class="col-lg-4 col-md-6 wow zoomIn" data-wow-delay="0.6s">
  269.                     <div class="service-item bg-light rounded d-flex flex-column align-items-center justify-content-center text-center">
  270.                         <div class="service-icon">
  271.                             <i class="fa fa-search text-white"></i>
  272.                         </div>
  273.                         <h4 class="mb-3">SEO Optimization</h4>
  274.                         <p class="m-0">Amet justo dolor lorem kasd amet magna sea stet eos vero lorem ipsum dolore sed</p>
  275.                         </a>
  276.                     </div>
  277.                 </div>
  278.                 <div class="col-lg-4 col-md-6 wow zoomIn" data-wow-delay="0.9s">
  279.                     <div class="position-relative bg-primary rounded h-100 d-flex flex-column align-items-center justify-content-center text-center p-5">
  280.                         <h3 class="text-white mb-3">Appelez pour toutes questions</h3>
  281.                         <h2 class="text-white mb-0">+221 77 135 20 29</h2>
  282.                     </div>
  283.                 </div>
  284.             </div>
  285.         </div>
  286.     </div>
  287.     <!-- Service End -->
  289.     <!-- Blog Start -->
  290.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  291.         <div class="container py-5">
  292.             <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  293.                 <h5 class="fw-bold text-primary text-uppercase">Blog</h5>
  294.                 <h1 class="mb-0">Suivez nos activités</h1>
  295.             </div>
  296.             <div class="row g-5">
  297.                 <div class="col-lg-4 wow slideInUp" data-wow-delay="0.3s">
  298.                     <div class="blog-item bg-light rounded overflow-hidden">
  299.                         <div class="blog-img position-relative overflow-hidden">
  300.                             <img class="img-fluid" src="{{asset('assets/img/bloc1.jpg')}}" alt="">
  301.                         </div>
  302.                         <div class="p-4">
  303.                             <div class="d-flex mb-3">
  304.                                 <small class="me-3"><i class="far fa-user text-primary me-2"></i>Boubacar Santara</small>
  305.                                 <small><i class="far fa-calendar-alt text-primary me-2"></i>15 Mars, 2023</small>
  306.                             </div>
  307.                             <h4 class="mb-3">Nautx Eca Hackathon</h4>
  308.                             <p>NAUTX remporte le « Grand Prix » au Hackathon ECA pour une solution innovante en matière de changement climatique</p>
  309.                             <a class="text-uppercase" href="{{ path('hack') }}">Voir plus <i class="bi bi-arrow-right"></i></a>
  310.                         </div>
  311.                     </div>
  312.                 </div>
  313.                 <div class="col-lg-4 wow slideInUp" data-wow-delay="0.6s">
  314.                     <div class="blog-item bg-light rounded overflow-hidden">
  315.                         <div class="blog-img position-relative overflow-hidden">
  316.                             <img class="img-fluid" src="{{asset('assets/img/bloc2.png')}}" alt="">
  317.                         </div>
  318.                         <div class="p-4">
  319.                             <div class="d-flex mb-3">
  320.                                 <small class="me-3"><i class="far fa-user text-primary me-2"></i>Boubacar Santara</small>
  321.                                 <small><i class="far fa-calendar-alt text-primary me-2"></i>1" Mars, 2022</small>
  322.                             </div>
  323.                             <h4 class="mb-3">Com22 Coding Camp Sénégal</h4>
  324.                             <p>Autonomise les filles au Sénégal grâce à un camp de codage pour filles africaines connectées</p>
  325.                             <a class="text-uppercase" href="{{ path('coding') }}">Voir plus <i class="bi bi-arrow-right"></i></a>
  326.                         </div>
  327.                     </div>
  328.                 </div>
  329.                 <div class="col-lg-4 wow slideInUp" data-wow-delay="0.9s">
  330.                     <div class="blog-item bg-light rounded overflow-hidden">
  331.                         <div class="blog-img position-relative overflow-hidden">
  332.                             <img class="img-fluid" src="{{asset('assets/img/tolukeur.jpg')}}" alt="">
  333.                         </div>
  334.                         <div class="p-4">
  335.                             <div class="d-flex mb-3">
  336.                                 <small class="me-3"><i class="far fa-user text-primary me-2"></i>Nautx</small>
  337.                                 <small><i class="far fa-calendar-alt text-primary me-2"></i>Mai, 2022</small>
  338.                             </div>
  339.                             <h4 class="mb-3">TOOLU KËR</h4>
  340.                             <p>L'innovation technologie pour l'environnement et l'écosystème " Toolu Kër "</p>
  341.                             <a class="text-uppercase" href="{{ path('tolu') }}">Voir plus <i class="bi bi-arrow-right"></i></a>
  342.                         </div>
  343.                     </div>
  344.                 </div>
  345.             </div>
  346.         </div>
  347.     </div>
  348.     <!-- Blog Start -->
  350.     <!-- Vendor Start -->
  351.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  352.         <div class="container py-5 mb-5">
  353.             <div class="bg-white">
  354.                 <div class="owl-carousel vendor-carousel">
  355.                     <img src="{{asset('assets/img/logoAG.png')}}" alt="">
  356.                     <img src="{{asset('assets/img/badis.png')}}" alt="">
  357.                     <img src="{{asset('assets/img/sabs.png')}}" alt="">
  358.                     <img src="{{asset('assets/img/millenium.png')}}" alt="">
  359.                     <img src="{{asset('assets/img/tolukeurlogo.png')}}" alt="">
  360.                     <img src="{{asset('assets/img/yaxanallogo.png')}}" alt="">
  361.                 </div>
  362.             </div>
  363.         </div>
  364.     </div>
  365.     <!-- Vendor End -->
  368. {% endblock %}