diff --git a/pflaenzli/pflaenzli/static/base.css b/pflaenzli/pflaenzli/static/base.css index 0a3ecad..eae0f86 100644 --- a/pflaenzli/pflaenzli/static/base.css +++ b/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); } \ No newline at end of file diff --git a/pflaenzli/pflaenzli/static/home/info/dark-frame-1.png b/pflaenzli/pflaenzli/static/home/info/dark-frame-1.png new file mode 100644 index 0000000..b495c08 Binary files /dev/null and b/pflaenzli/pflaenzli/static/home/info/dark-frame-1.png differ diff --git a/pflaenzli/pflaenzli/static/home/info/dark-frame-2.png b/pflaenzli/pflaenzli/static/home/info/dark-frame-2.png new file mode 100644 index 0000000..1dbe549 Binary files /dev/null and b/pflaenzli/pflaenzli/static/home/info/dark-frame-2.png differ diff --git a/pflaenzli/pflaenzli/static/home/info/dark-plant-1.png b/pflaenzli/pflaenzli/static/home/info/dark-plant-1.png new file mode 100644 index 0000000..0749b38 Binary files /dev/null and b/pflaenzli/pflaenzli/static/home/info/dark-plant-1.png differ diff --git a/pflaenzli/pflaenzli/static/home/info/dark-plant-2.png b/pflaenzli/pflaenzli/static/home/info/dark-plant-2.png new file mode 100644 index 0000000..92c96d2 Binary files /dev/null and b/pflaenzli/pflaenzli/static/home/info/dark-plant-2.png differ diff --git a/pflaenzli/pflaenzli/static/home/info/dark-trade.png b/pflaenzli/pflaenzli/static/home/info/dark-trade.png new file mode 100644 index 0000000..2fbbf98 Binary files /dev/null and b/pflaenzli/pflaenzli/static/home/info/dark-trade.png differ diff --git a/pflaenzli/pflaenzli/static/home/info/frame-1.png b/pflaenzli/pflaenzli/static/home/info/frame-1.png new file mode 100644 index 0000000..3f59f06 Binary files /dev/null and b/pflaenzli/pflaenzli/static/home/info/frame-1.png differ diff --git a/pflaenzli/pflaenzli/static/home/info/frame-2.png b/pflaenzli/pflaenzli/static/home/info/frame-2.png new file mode 100644 index 0000000..edbb6b3 Binary files /dev/null and b/pflaenzli/pflaenzli/static/home/info/frame-2.png differ diff --git a/pflaenzli/pflaenzli/static/home/info/hand-1.png b/pflaenzli/pflaenzli/static/home/info/hand-1.png new file mode 100644 index 0000000..fcfea87 Binary files /dev/null and b/pflaenzli/pflaenzli/static/home/info/hand-1.png differ diff --git a/pflaenzli/pflaenzli/static/home/info/hand-2.png b/pflaenzli/pflaenzli/static/home/info/hand-2.png new file mode 100644 index 0000000..79ccc80 Binary files /dev/null and b/pflaenzli/pflaenzli/static/home/info/hand-2.png differ diff --git a/pflaenzli/pflaenzli/static/home/info/plant-1.png b/pflaenzli/pflaenzli/static/home/info/plant-1.png new file mode 100644 index 0000000..db657aa Binary files /dev/null and b/pflaenzli/pflaenzli/static/home/info/plant-1.png differ diff --git a/pflaenzli/pflaenzli/static/home/info/plant-2.png b/pflaenzli/pflaenzli/static/home/info/plant-2.png new file mode 100644 index 0000000..66f7ff8 Binary files /dev/null and b/pflaenzli/pflaenzli/static/home/info/plant-2.png differ diff --git a/pflaenzli/pflaenzli/static/home/info/trade.png b/pflaenzli/pflaenzli/static/home/info/trade.png new file mode 100644 index 0000000..15a40e3 Binary files /dev/null and b/pflaenzli/pflaenzli/static/home/info/trade.png differ diff --git a/pflaenzli/pflaenzli/templates/app/index.html b/pflaenzli/pflaenzli/templates/app/index.html index ce5e1ab..6aff0e6 100644 --- a/pflaenzli/pflaenzli/templates/app/index.html +++ b/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 %} + content="{% trans "Pflänz.li is a platform to trade plants." %}"> {% endblock %} {% block background %}home-background{% endblock %} {% block content %} @@ -12,20 +12,83 @@
-
+

{% trans "Welcome to Pflänz.li" %}

{% trans "This is a platform to trade plants. You can offer plants and setup a wishlist what you want to trade it for." %}


{% trans "To offer your plants, please register first." %}

- {% trans "Show offers" %} - {% trans "Register" %}
+
+

{% trans 'How does Pflänz.li work?' %}

+
+
+
+
+
+
+

1. {% trans "Your plant" %}

+

+ {% trans 'You have a plant that you would like to trade for another plant? Great, that is exactly what Pflänz.li is for!' %} +

+
+
+
+
+
+
+
+

2. {% trans "Offer your plant " %}

+

+ {% 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.' %} +

+
+
+
+
+
+
+
+

3. {% trans "Find your dream plant" %}

+

{% trans "Use the search functions of Pflänz.li to find a suitable plant near you." %}

+
+
+
+
+
+
+
+

4. {% trans "Trade" %}

+

+ {% 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." %} +

+
+
+
+
+
+
+
+

5. {% trans "Your new plant" %}

+

+ {% trans "Congratulations, you just got a new plant! Take good care of it and maybe you can use it to trade in the future." %} +

+
+
+
+
+

{% trans "If you have other questsions, check out the FAQ!" %}

+ FAQ +
+
+
{% endblock %}