feat(home): AB test home with search

lacommunaute/pages/urls.py

@@ -15,6 +15,7 @@
 
 urlpatterns = [
     path("", views.HomeView.as_view(), name="home"),
+    path("ws/", views.HomeWithSearchView.as_view(), name="home_with_search"),
     path("accessibilite/", views.accessibilite, name="accessibilite"),
     path("mentions-legales/", views.mentions_legales, name="mentions_legales"),
     path("politique-de-confidentialite/", views.politique_de_confidentialite, name="politique_de_confidentialite"),

lacommunaute/pages/views.py

@@ -38,6 +38,17 @@ def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
         return context
 
 
+class HomeWithSearchView(TemplateView):
+    template_name = "pages/home_with_search.html"
+
+    def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
+        context = super().get_context_data(**kwargs)
+        context["forums_category"] = Forum.objects.filter(kind=ForumKind.PUBLIC_FORUM, parent__type=1).order_by(
+            "-updated"
+        )[:4]
+        return context
+
+
 def accessibilite(request):
     return render(request, "pages/accessibilite.html")
 

lacommunaute/static/stylesheets/itou_communaute.scss

@@ -40,7 +40,7 @@
     border-radius: 50%;
     overflow: hidden;
 
-    > img {
+    >img {
       width: 100%;
       height: auto;
       object-fit: cover;
@@ -110,7 +110,7 @@ span.highlighted {
 .input-group-rounded-pill {
   border-radius: 50rem !important;
 
-  > input {
+  >input {
     border-top-left-radius: 50rem !important;
     border-bottom-left-radius: 50rem !important;
   }
@@ -162,13 +162,13 @@ span.highlighted {
     }
   }
 
-  > div {
+  >div {
     padding: 16px 8px;
     margin: 0;
     margin-bottom: 8px;
     min-height: 140px;
 
-    > span {
+    >span {
       display: block;
     }
 
@@ -188,7 +188,7 @@ span.highlighted {
 }
 
 .definition {
-  > div {
+  >div {
     padding: 16px 8px 0 16px;
     margin-bottom: 8px;
 
@@ -209,7 +209,7 @@ span.highlighted {
       padding-top: 40%;
     }
 
-    > iframe {
+    >iframe {
       position: absolute;
       top: 0;
       left: 0;
@@ -222,3 +222,44 @@ span.highlighted {
 .rating .ri-star-fill {
   color: rgb(254, 208, 0);
 }
+
+.s-home-search {
+  background-position: center left, center right;
+  background-repeat: no-repeat;
+  background-color: var(--bs-communaute);
+  background-image: url(../images/search-bg-left.png),
+    url(../images/search-bg-right.png);
+}
+
+.s-home-search__row {
+  display: flex;
+  align-content: center;
+  min-height: 23rem;
+}
+
+.s-home-search__form {
+  background-color: var(--bs-white);
+  padding: 1rem;
+  border-radius: 8px;
+}
+
+.s-home-search__form .input-group-text,
+.s-home-search__form .form-control {
+  border-color: var(--bs-white) !important;
+}
+
+
+.s-home-search__form .input-group-text {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+@media only screen and (max-width: 992px) {
+  .s-home-search {
+    background-image: none;
+  }
+
+  .s-home-search__row {
+    min-height: initial;
+  }
+}

lacommunaute/templates/pages/home_with_search.html

@@ -0,0 +1,97 @@
+{% extends "layouts/base.html" %}
+{% load static %}
+{% load i18n %}
+{% load date_filters %}
+{% block title %}Accueil{{ block.super }}{% endblock %}
+{% block meta_description %}
+    Entraide, information et apprentissage pour les professionnels de l'Insertion par l'Activité Economique. Améliorer sa pratique professionnelle d’accompagnateurs de personnes éloignées de l’emploi.
+{% endblock meta_description %}
+{% block body_class %}p-home{% endblock %}
+{% block content %}
+    <section class="s-home-search py-5 pt-lg-0">
+        <div class="s-home-search__container container container-max-md">
+            <div class="s-home-search__row row">
+                <div class="s-home-search__col col-12">
+                    <h1 class="text-center text-white">
+                        L'espace d'entraide
+                        <br>
+                        des professionnels de l'inclusion
+                    </h1>
+                    <p class="text-center text-white small">
+                        Améliorer votre pratique professionnelle d’accompagnateurs de personnes éloignées de l’emploi.
+                    </p>
+                    <form role="search" class="s-home-search__form" action="{% url 'search:index' %}" name="homepage_search">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="input-group input-group-lg flex-nowrap">
+                                    <input class="form-control" type="search" placeholder="{% trans 'Search in forum' %}" aria-label="{% trans 'Search in forum' %}" name="q">
+                                    <div class="input-group-text bg-white p-0">
+                                        <button class="btn btn-ico btn-primary" aria-label="{% trans 'Search in forum' %}">
+                                            <i class="ri-search-line font-weight-bold" aria-hidden="true"></i>
+                                            <span class="d-none d-sm-inline-flex me-0 me-sm-1">{% trans 'Search' %}</span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="bg-communaute py-5 pt-lg-0">
+        <div class="container container-max-lg">
+            <div class="row">
+                <div class="col-4">
+                    <div class="c-box mx-3">
+                        <p class="text-center">Je veux poser une question</p>
+                    </div>
+                </div>
+                <div class="col-4">
+                    <div class="c-box mx-3">
+                        <p class="text-center">Je veux réaliser un diagnostic</p>
+                    </div>
+                </div>
+                <div class="col-4">
+                    <div class="c-box mx-3">
+                        <p class="text-center">Je veux chercher un emploi inclusif</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="s-article-figure-01">
+        <div class="s-article-figure-01__container container container-max-lg">
+            <div class="row">
+                <div class="col-12 d-flex align-items-center justify-content-center">
+                    <h2 class="h1 text-center">Les dernières fiches pratiques mises à jour</h2>
+                </div>
+            </div>
+            <div class="s-article-figure-01__row row">
+                <div class="s-article-figure-01__col s-article-figure-01__col--figure col-12 col-md-3 col-lg-4 d-flex align-items-center justify-content-center">
+                    <figure class="w-50 w-md-100">
+                        <img src="{% static "images/illustration-01.png" %}" class="img-fluid img-fitcover" alt="">
+                    </figure>
+                </div>
+                <div class="s-article-figure-01__col s-article-figure-01__col--article col-12 col-md-9 col-lg-8 d-flex align-items-center">
+                    <article>
+                        <ul class="list-group list-group-flush list-group-link">
+                            {% for forum in forums_category %}
+                                <li class="list-group-item list-group-item-action">
+                                    <div>
+                                        <span class="badge badge-xs bg-info-lighter text-info mb-3">{{ forum.parent.name }}</span>
+                                        <br>
+                                        <a href="{% url 'forum_extension:forum' forum.slug forum.pk %}" class="matomo-event btn-link stretched-link" data-matomo-category="engagement" data-matomo-action="view" data-matomo-option="forum">
+                                            {{ forum.name }}
+                                        </a>
+                                        <p class="fs-sm mb-0 mt-1">{{ forum.short_description }}</p>
+                                    </div>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </article>
+                </div>
+            </div>
+        </div>
+    </section>
+{% endblock %}

locale/fr/LC_MESSAGES/django.po

@@ -212,6 +212,9 @@ msgstr "Rechercher"
 msgid "Search in"
 msgstr "Rechercher dans"
 
+msgid "Search in forum"
+msgstr "Rechercher dans la communauté"
+
 #: lacommunaute/templates/machina/board_base.html:28
 msgid "Advanced search"
 msgstr "Recherche avancée"
@@ -980,19 +983,19 @@ msgid "Discussion area"
 msgstr "Espace d'échanges"
 
 msgid "Documents"
-msgstr "Documentation"
+msgstr "Fiches pratiques"
 
 msgid "See all questions"
 msgstr "Voir toutes les questions"
 
 msgid "See all docs"
-msgstr "Voir toute la documentation"
+msgstr "Voir toute les fiches pratiques"
 
 msgid "See all news"
 msgstr "Voir toutes les actualités"
 
 msgid "New topic on doc"
-msgstr "Poser une question sur cette documentation"
+msgstr "Poser une question sur cette fiche"
 
 msgid "Cancel"
 msgstr "Annuler"