Merge pull request 'Add more info to homepage' (#27) from dev into main

Reviewed-on: #27

pflaenzli/pflaenzli/static/base.css

@@ -26,6 +26,11 @@
     --bs-body-font-family: 'Lato', sans-serif;
     --pfl-heading-font-family: 'Aleo', serif;
 
+    --trade-icon: url('/static/home/info/trade.png');
+    --plant-1-icon: url('/static/home/info/plant-1.png');
+    --plant-2-icon: url('/static/home/info/plant-2.png');
+    --frame-1-icon: url('/static/home/info/frame-1.png');
+    --frame-2-icon: url('/static/home/info/frame-2.png');
 }
 
 :root[data-bs-theme='dark'] {
@@ -48,6 +53,12 @@
     --bs-heading-color: #fff;
     --pfl-logo: url('/static/dark.png');
     --pfl-home-background: url('/static/home/home-dark.webp');
+
+    --trade-icon: url('/static/home/info/dark-trade.png');
+    --plant-1-icon: url('/static/home/info/dark-plant-1.png');
+    --plant-2-icon: url('/static/home/info/dark-plant-2.png');
+    --frame-1-icon: url('/static/home/info/dark-frame-1.png');
+    --frame-2-icon: url('/static/home/info/dark-frame-2.png');
 }
 
 .btn-pfl {
@@ -120,6 +131,7 @@ a {
     background-image: var(--pfl-home-background);
     background-size: cover;
     background-position: center;
+    background-attachment: fixed;
 }
 
 .home-opaque {
@@ -187,4 +199,36 @@ h4,
 h5 {
     font-family: var(--pfl-heading-font-family);
     font-weight: 500;
+}
+
+.info-container {
+    max-width: 768px;
+}
+
+.info-icon {
+    width: 25rem;
+    height: 25rem;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.plant-1-icon {
+    background-image: var(--plant-1-icon);
+}
+
+.plant-2-icon {
+    background-image: var(--plant-2-icon);
+}
+
+.frame-1-icon {
+    background-image: var(--frame-1-icon);
+}
+
+.frame-2-icon {
+    background-image: var(--plant-2-icon);
+}
+
+.trade-icon {
+    background-image: var(--trade-icon);
 }

pflaenzli/pflaenzli/templates/app/index.html

@@ -1,10 +1,10 @@
-{% extends 'base.html' %}
+{% extends "base.html" %}
 {% load static %}
 {% load i18n %}
 {% block title %}Home{% endblock %}
 {% block meta %}
   <meta name="description"
-        content="{% trans 'Pflänz.li is a platform to trade plants.' %}">
+        content="{% trans "Pflänz.li is a platform to trade plants." %}">
 {% endblock %}
 {% block background %}home-background{% endblock %}
 {% block content %}
@@ -12,20 +12,83 @@
     <div class="container-fluid py-5 position-relative row d-flex align-items-center justify-content-center">
       <div class="home-background"></div>
       <div class="pfl-home-logo xl-align-self-center col-lg h-100 mb-3"></div>
-      <div class="col-lg">
+      <div class="col-lg text-center text-lg-start">
         <h1 class="display-5 fw-bold">{% trans "Welcome to Pflänz.li" %}</h1>
         <p class="fs-4">
           {% trans "This is a platform to trade plants. You can offer plants and setup a wishlist what you want to trade it for." %}
         </p>
         <hr />
         <p>{% trans "To offer your plants, please register first." %}</p>
-        <a href="{% url 'list_offers' %}"
+        <a href="{% url "list_offers" %}"
            class="btn btn-pfl btn-lg mb-3"
            type="button">{% trans "Show offers" %}</a>
-        <a href="{% url 'register_user' %}"
+        <a href="{% url "register_user" %}"
            class="btn btn-pfl-secondary btn-lg mb-3"
            type="button">{% trans "Register" %}</a>
       </div>
     </div>
   </div>
+  <div class="p-5 mb-4 bg-body-tertiary rounded-3 home-opaque">
+    <h2 class="h1 mx-auto text-center mb-3">{% trans 'How does Pflänz.li work?' %}</h2>
+    <div class="info-container mx-auto">
+      <div class="row d-flex align-items-center">
+        <div class="col-md-6 order-md-1">
+          <div class="info-icon plant-1-icon w-100"></div>
+        </div>
+        <div class="col-md-6 order-md-2 text-center">
+          <h2>1. {% trans "Your plant" %}</h2>
+          <p>
+            {% trans 'You have a plant that you would like to trade for another plant? Great, that is exactly what Pflänz.li is for!' %}
+          </p>
+        </div>
+      </div>
+      <div class="row d-flex align-items-center">
+        <div class="col-md-6 order-md-2">
+          <div class="info-icon frame-1-icon w-100"></div>
+        </div>
+        <div class="col-md-6 order-md-1 text-center">
+          <h2>2. {% trans "Offer your plant " %}</h2>
+          <p>
+            {% trans 'Create an offer on Pflänz.li so others can see what you offer. You can also setup your wishlist to show others what you would like to trade for.' %}
+          </p>
+        </div>
+      </div>
+      <div class="row d-flex align-items-center">
+        <div class="col-md-6 order-md-1">
+          <div class="info-icon frame-2-icon w-100"></div>
+        </div>
+        <div class="col-md-6 order-md-2 text-center">
+          <h2>3. {% trans "Find your dream plant" %}</h2>
+          <p>{% trans "Use the search functions of Pflänz.li to find a suitable plant near you." %}</p>
+        </div>
+      </div>
+      <div class="row d-flex align-items-center">
+        <div class="col-md-6 order-md-2 d-flex">
+          <div class="info-icon trade-icon w-100"></div>
+        </div>
+        <div class="col-md-6 order-md-1 text-center">
+          <h2>4. {% trans "Trade" %}</h2>
+          <p>
+            {% trans "When you have found someone with a plant who is willing to trade, you can directly discuss the details of the trade, like when and where." %}
+          </p>
+        </div>
+      </div>
+      <div class="row d-flex align-items-center">
+        <div class="col-md-6 order-md-1">
+          <div class="info-icon plant-2-icon w-100"></div>
+        </div>
+        <div class="col-md-6 order-md-2 text-center">
+          <h2>5. {% trans "Your new plant" %}</h2>
+          <p>
+            {% trans "Congratulations, you just got a new plant! Take good care of it and maybe you can use it to trade in the future." %}
+          </p>
+        </div>
+      </div>
+      <hr>
+      <div class="row d-flex justify-content-center mx-auto mt-4">
+        <h3 class="text-center mb-3">{% trans "If you have other questsions, check out the FAQ!" %}</h3>
+        <a class="btn btn-pfl w-25" href="{% url "faq" %}">FAQ</a>
+      </div>
+    </div>
+  </div>
 {% endblock %}