95 lines
4 KiB
HTML
95 lines
4 KiB
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." %}">
|
|
{% endblock %}
|
|
{% block background %}home-background{% endblock %}
|
|
{% block content %}
|
|
<div class="p-5 mb-4 bg-body-tertiary rounded-3 home-opaque">
|
|
<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 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" %}"
|
|
class="btn btn-pfl btn-lg mb-3"
|
|
type="button">{% trans "Show offers" %}</a>
|
|
<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 %}
|