Home page company and user design changes

scripts/yarn-update

@@ -6,6 +6,10 @@ cd scripts/yarn/
 
 yarn install --check-files
 
+# Clipboard
+cp node_modules/simpleslider-js/dist/simpleSlider.min.js ../../weblate_web/static/vendor/simpleSlider.min.js
+cp node_modules/simpleslider-js/dist/simpleSlider.min.css ../../weblate_web/static/vendor/simpleSlider.min.css
+
 # Source Sans/Code Pro fonts
 mkdir -p ../../weblate_web/static/font-source
 sed '/font-family/ a font-display: swap;' < node_modules/source-sans/source-sans-3.css > ../../weblate_web/static/vendor/font-source/source-sans-3.css

scripts/yarn/package.json

@@ -4,6 +4,7 @@
   "main": "index.js",
   "license": "GPL-3.0+",
   "dependencies": {
+    "simpleslider-js": "1.9.0",
     "source-code-pro": "2.38.0",
     "source-sans": "3.46.0"
   }

scripts/yarn/yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+[email protected]:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/simpleslider-js/-/simpleslider-js-1.9.0.tgz#f850e1d493968ccd1c9d91c15b1b53bbb32049a3"
+  integrity sha512-p2nzUx0/sAJldSDezLah0sAm8orHM+E6BsA/mTaCIPV0UrZj6ZIxKhwj5KF+4iu98gB0SqWBPhZE4hs4drDZrA==
+
 [email protected]:
   version "2.38.0"
   resolved "https://registry.yarnpkg.com/source-code-pro/-/source-code-pro-2.38.0.tgz#85c57689f7386bb9d0515fb00ba4845bfb7b485b"

weblate_web/static/custom.js

@@ -244,3 +244,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-rtl.css

@@ -4719,3 +4719,103 @@ a.invoice-link img {
 .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: right;
+}
+.icon-review img {
+  margin-right: 50px;
+}
+.icon-review p {
+  margin-right: 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;
+  right: 32px;
+  margin-top: 20px;
+}
+.circle-user img {
+  margin: 0px;
+  border-radius: 50%;
+}
+
+.icon-user {
+  display: flex;
+  text-align: right;
+  padding-bottom: 25px;
+}
+.content-user {
+  margin-top: 20px;
+  margin-right: 45px;
+}
+.content-user a {
+  color: #1fa385;
+  line-height: 23px;
+  text-decoration: underline;
+}
+.content-logo {
+  margin: 0px !important;
+}
+
+.slider-slide {
+  display: -webkit-flex;
+  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;
+  background-position: left !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;
+  background-position: right !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;
+}

weblate_web/static/style.css

@@ -4174,7 +4174,7 @@ input.fullwidth {
   }
 }
 
-/* About Us Weblate Team CSS */
+/* About Us Weblate Team */
 
 .content-p {
   width: 69%;
@@ -4709,3 +4709,103 @@ a.invoice-link img {
 .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: -webkit-flex;
+  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;
+  background-position: left !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;
+  background-position: right !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;
+}

weblate_web/templates/base.html

@@ -15,6 +15,10 @@
   <link rel="stylesheet" href="{% if LANGUAGE_BIDI %}{% static "style-rtl.css" %}{% else %}{% static "style.css" %}{% endif %}" />
 {% endcompress %}
 
+{% if request.resolver_match.url_name == 'home' %}
+  <link rel="stylesheet" href="{% static 'vendor/simpleSlider.min.css' %}" />
+{% endif %}
+
   <link rel="stylesheet" href="https://s.weblate.org/cdn/font-source/source-sans-3.css">
   <link rel="stylesheet" href="https://s.weblate.org/cdn/font-source/source-code-pro.css">
 
@@ -131,6 +135,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

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