Home page company and user design changes

weblate_web/static/custom.js

@@ -254,3 +254,12 @@ ready(() => {
     "font-size: 20px; font-family: sans-serif",
   );
 });
+
+if (typeof SimpleSlider === "function") {
+  new SimpleSlider(".page-slider", {
+    slidesPerView: {
+      850: 2,
+      1165: 3,
+    },
+  });
+}

weblate_web/static/style.css

@@ -5115,7 +5115,7 @@ html[dir="rtl"] .half-img.rotate img {
   }
 }
 
-/* About Us Weblate Team CSS */
+/* About Us Weblate Team */
 
 .content-p {
   width: 69%;
@@ -5716,3 +5716,129 @@ html[dir="rtl"] .user-text-formatting-payment t {
 .payment-updated {
   display: flow-root;
 }
+
+/*Testimonial and Slider CSS*/
+
+.testimonial {
+  width: 365px;
+  border-radius: 30px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  margin-left: 10px;
+}
+
+.icon-review {
+  text-align: left;
+}
+.icon-review img {
+  margin-left: 50px;
+}
+.icon-review p {
+  margin-left: 35px;
+  margin-top: -25px;
+  width: 70%;
+  font-size: 15px;
+  line-height: 18px;
+  letter-spacing: 0.5px;
+  color: #2a3744;
+}
+
+.circle-user {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: relative;
+  left: 32px;
+  margin-top: 20px;
+}
+.circle-user img {
+  margin: 0px;
+  border-radius: 50%;
+}
+
+.icon-user {
+  display: flex;
+  text-align: left;
+  padding-bottom: 25px;
+}
+.content-user {
+  margin-top: 20px;
+  margin-left: 45px;
+}
+.content-user a {
+  color: #1fa385;
+  line-height: 23px;
+  text-decoration: underline;
+}
+.content-logo {
+  margin: 0px !important;
+}
+
+.slider-slide {
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.simple-slider {
+  height: 400px;
+}
+
+.simple-slider .slider-btn.slider-btn-prev {
+  left: 11px !important;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1) !important;
+  background: white !important;
+  border-radius: 50% !important;
+  width: 50px !important;
+  height: 50px !important;
+}
+
+.simple-slider .slider-btn.slider-btn-next {
+  right: 4px !important;
+  border-radius: 50% !important;
+  width: 50px !important;
+  height: 50px !important;
+  background: white !important;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1) !important;
+}
+
+.simple-slider .slider-btn.slider-btn-next img {
+  padding: 18px;
+  margin: 0px;
+}
+
+.simple-slider .slider-btn.slider-btn-prev img {
+  padding: 18px;
+  margin: 0px;
+}
+
+html[dir="rtl"] .icon-review,
+html[dir="rtl"] .icon-user {
+  text-align: right;
+}
+
+html[dir="rtl"] .icon-review img {
+  margin-left: 0;
+  margin-right: 50px;
+}
+
+html[dir="rtl"] .icon-review p {
+  margin-left: 0;
+  margin-right: 35px;
+}
+
+html[dir="rtl"] .circle-user {
+  left: auto;
+  right: 32px;
+}
+
+html[dir="rtl"] .content-user {
+  margin-left: 0;
+  margin-right: 45px;
+}
+
+.custom-btn {
+  margin-top: 2em;
+}

weblate_web/templates/base.html

@@ -23,6 +23,10 @@
       <link rel="stylesheet" href="{% static "style.css" %}" />
     {% endcompress %}
 
+    {% if request.resolver_match.url_name == "home" %}
+      <link rel="stylesheet" href="{% static 'vendor/simpleSlider.min.css' %}" />
+    {% endif %}
+
     <link rel="stylesheet" href="{% static "weblate_fonts/source-sans-3.css" %}">
     <link rel="stylesheet" href="{% static "weblate_fonts/source-code-pro.css" %}">
 
@@ -167,6 +171,10 @@
       {% include "snippets/languages.html" %}
     </section>
 
+    {% if request.resolver_match.url_name == "home" %}
+      <script src="{% static 'vendor/simpleSlider.min.js' %}"></script>
+    {% endif %}
+
     {% compress js %}
       <script src="{% static "vendor/clipboard.js" %}"></script>
       <script src="{% static "custom.js" %}"></script>

weblate_web/templates/index.html

@@ -69,7 +69,11 @@ <h2 class="section-title hp-style">{% translate "Robust feature set" %}</h2>
         <a class="button inline border rev" href="{% url 'features' %}">{% translate "Explore all features" %}</a>
       </div>
       <div class="wrap supporters">
-        <h2 class="section-title hp-style">{% translate "Users and Supporters" %}</h2>
+        <h2 class="section-title hp-style">{% translate "Companies using Weblate" %}</h2>
+        {% include "snippets/reviews.html" %}
+      </div>
+      <div class="wrap supporters">
+        <h2 class="section-title hp-style">{% translate "Libre projects" %}</h2>
         {% include "snippets/users.html" %}
       </div>
     </div>

weblate_web/templates/snippets/reviews.html

@@ -0,0 +1,80 @@
+{% load i18n static %}
+
+<div>
+  <a href="">
+    <img src="{% static "img/Siemens-logo.png" %}" alt="Siemens" />
+  </a>
+  <a href="">
+    <img src="{% static "img/Dyson-logo.png" %}" alt="Dyson" />
+  </a>
+  <a href="">
+    <img src="{% static "img/YouGov-logo.png" %}" alt="YouGov" />
+  </a>
+</div>
+<br>
+<div class="simple-slider page-slider" dir="ltr">
+  <div class="slider-wrapper" dir="{% if LANGUAGE_BIDI %}rtl{% else %}ltr{% endif %}">
+    <div class="slider-slide is-bright">
+      <div class="testimonial">
+        <div class="icon-review">
+          <img src="{% static "img/Quotes.png" %}" alt="Quotes" />
+          <p>Weblate is a gorgeous app! It really saved my life. Translations are managed within same version control as the code. Weblate is a gorgeous app! It really is my life. Translations are managed within it.</p>
+        </div>
+        <div class="icon-user">
+          <div class="circle-user">
+            <img src="{% static "img/donald.png" %}" alt="Quotes" />
+          </div>
+          <div class="content-user">
+            <p>Donald McCalister</p>
+            <a href="">
+              <p>Dyson Electronics</p>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="slider-slide">
+      <div class="testimonial">
+        <div class="icon-review">
+          <img src="{% static "img/Quotes.png" %}" alt="Quotes" />
+          <p>Weblate is a gorgeous app! It really saved my life. Translations are managed within the same version control system as the code. Weblate is a gorgeous app! It really saved my life. Translations are managed within the same version control system as the code.</p>
+        </div>
+        <div class="icon-user">
+          <div class="content-user">
+            <p>Elvis McCalister</p>
+            <a href="">
+              <p>No Case Study Ltd.</p>
+            </a>
+            <img class="content-logo" src="{% static "img/dyson-group.png" %}" alt="Quotes" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="slider-slide">
+      <div class="testimonial">
+        <div class="icon-review">
+          <img src="{% static "img/Quotes.png" %}" alt="Quotes" />
+          <p>Weblate is a gorgeous app! It really saved my life. Translations are managed within the same version control system as the code. Weblate is a gorgeous app! It really saved my life. Translations are managed within the same version control system as the code.</p>
+        </div>
+        <div class="icon-user">
+          <div class="content-user">
+            <p>Jonathan McCalister</p>
+            <a href="">
+              <p>Siemens Inc.</p>
+            </a>
+            <img class="content-logo" src="{% static "img/siemens-group.png" %}" alt="Quotes" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="slider-btn slider-btn-prev">
+    <img src="{% static "img/chevron.png" %}" alt="Quotes" />
+  </div>
+  <div class="slider-btn slider-btn-next">
+    <img src="{% static "img/chevron1.png" %}" alt="Quotes" />
+  </div>
+</div>
+<div class="custom-btn">
+  <a href="" class="button border small rev inline" target="_blank">{% translate "Browse case studies" %}</a>
+</div>

weblate_web/templates/snippets/users.html

@@ -1,5 +1,14 @@
 {% load i18n static %}
 
+<a href="">
+  <img src="{% static "img/Logo-Turris.png" %}" alt="Turris" />
+</a>
+<a href="">
+  <img src="{% static "img/LogoSonicPi.png" %}" alt="SonicPi" />
+</a>
+<a href="">
+  <img src="{% static "img/LogoPhpMyAdmin.png" %}" alt="PhpMyAdmin" />
+</a>
 <a href="https://l10n.opensuse.org/">
   <img src="{% static "img/logo-opensuse.svg" %}" alt="openSUSE" />
 </a>
@@ -10,7 +19,7 @@
   <img src="{% static "img/logo-fedora.svg" %}" alt="Fedora" />
 </a>
 <a href="https://hosted.weblate.org/engage/freedombox/">
-  <img src="{% static "img/logo-freedombox.svg" %}" alt="Freedombox" />
+  <img src="{% static "img/LogoFreedomBox.png" %}" alt="Freedombox" />
 </a>
 <a href="https://hosted.weblate.org/projects/collabora-online/">
   <img src="{% static "img/logo-collabora.svg" %}" alt="Collabora" />