1.8.1 landing_customer

GeneralApp/urls.py

@@ -7,6 +7,9 @@ from .views import *
 urlpatterns = [
     path('', MainPage, name='main'),
     path('mover_landing_page/', LandingMoverPage, name='mover_landing_page'),
+    path('customer_landing_page/', LandingCustomerPage, name='customer_landing_page'),
+
+
     path('page/<str:url>/', StaticPageView, name='static_page'),
     path('test_code', test_code, name='test_code'),
     path('generate_routes/<int:routes_count>/', generate_routes, name='generate_routes'),

GeneralApp/views.py

@@ -172,6 +172,30 @@ def LandingMoverPage(request):
     return get_inter_http_response(t, Dict, request)
 
 
+def LandingCustomerPage(request):
+
+    from .init_options import init_options
+    init_options()
+
+
+    print(f'LOCALE_PATHS = {str(settings.LOCALE_PATHS)}')
+
+    page, is_created = StaticPage.objects.get_or_create(url='landing_customer')
+
+    Dict = {
+        'page': page,
+    }
+
+
+
+    breadcrumbs_Dict = {
+    }
+    Dict.update({'breadcrumbs': breadcrumbs_Dict})
+
+    t = loader.get_template('pages/p_customer_landing_page.html')
+    return get_inter_http_response(t, Dict, request)
+
+
 def MainPage(request):
     from RoutesApp.forms import RouteForm
 

templates/pages/p_customer_landing_page.html

@@ -0,0 +1,224 @@
+{% extends 'tb_base.html' %}
+{% load static %}
+{% load i18n %}
+
+{% block meta %}
+  <link rel="stylesheet" href="{% static "css/moover.css" %}">
+  <link rel="stylesheet" href="{% static "css/slick.css" %}">
+{#  <link rel="stylesheet" href="{% static "css/slick-theme.css" %}">#}
+  <script src="{% static "js/slick.min.js" %}"></script>
+{% endblock %}
+{#{% block before_close %}#}
+{#  <script src="{% static "js/slick.min.js" %}"></script>#}
+{#  #}
+{#{% endblock %}#}
+
+{% block content %}
+
+  <section class="presentation">
+    <div class="presentation__top">
+      <h1 class="presentation__title title">
+        {% blocktrans %}
+          Сервис попутных посылок
+        {% endblocktrans %}
+      </h1>
+      <div class="presentation__subtitle subtitle h4">
+        {% translate "Отправляй посылки с попутчиками в любую точку, быстро и недорого" %}
+      </div>
+      <a class="presentation__btn btn btn--primary" href="#howtowork">{% translate "Узнать подробнее" %}</a>
+      <div class="presentation__next">
+        {% translate "Как это работает?" %}
+        <div class="presentation__arrows">
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+            <path d="M26 16L16 26L6 16" stroke="#272424" stroke-opacity="0.6" stroke-width="1.5" stroke-linecap="round"
+                  stroke-linejoin="round"/>
+            <path d="M26 6L16 16L6 6" stroke="#272424" stroke-opacity="0.6" stroke-width="1.5" stroke-linecap="round"
+                  stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+    <div class="presentation__bottom" id="howtowork">
+      <div class="title">
+        {% translate "Как это работает" %}
+      </div>
+      <p class="subtitle">
+        {% translate "Маленькая история о том, как работает наш сервис" %}
+      </p>
+      {############cards###############}
+      <div class="presentation__cards cards">
+        <div class="cards__list">
+          <div class="cards__item">
+            <div class="cards__arrow"></div>
+            <img class="cards__img" src="{% static "img/webp/image1.webp" %}" alt="img1"/>
+            <p class="cards__desc">
+              {% translate "Мария, хочет отправить<br class='br1'/> посылку, но её не устраивает<br class='br1'/> цена доставки почтовых<br class='br1'/>" %}
+              {% translate "сервисов и она устала искать в<br class='br1'/> чатах тех, кто сможет перевезти<br class='br1'/> посылку." %}
+            </p>
+          </div>
+          <div class="cards__item">
+            <div class="cards__arrow"></div>
+            <img class="cards__img" src="{% static "img/webp/image2.webp" %}" alt="img1"/>
+            <p class="cards__desc">
+
+              {% translate "Мария, узнаёт о нашем сервисе<br class='br1'/>" %}
+              <a href="/">TripWB.com. </a>
+              {% translate "Регистрируется<br class='br1'/> и очень быстро размещает<br class='br1'/> объявление." %}
+            </p>
+          </div>
+          <div class="cards__item">
+            <div class="cards__arrow"></div>
+            <img class="cards__img" src="{% static "img/webp/image3.webp" %}" alt="img1"/>
+            <p class="cards__desc">
+              {% translate "Попутчик Егор увидел<br class='br1'/> объявление Марии, нажал<br class='br1'/> откликнуться и получил<br class='br1'/> возможность связаться с ней,<br class='br1'/> удобным для него способом." %}
+            </p>
+          </div>
+          <div class="cards__item">
+            <img class="cards__img" src="{% static "img/webp/image4.webp" %}" alt="img1"/>
+            <p class="cards__desc">
+              {% translate "Мария и Егор обговорили детали<br class='br1'/> доставки и потом встретились в<br class='br1'/> удобном для всех месте. После<br class='br1'/> чего Мария передала посылку<br class='br1'/> Егору и он её доставил." %}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  {############easy###############}
+  <section class="easy">
+    <div class="title">
+      {% translate "Один простой шаг, чтобы отправить посылку" %}
+    </div>
+    <div class="subtitle">
+      {% translate "Еще легче, чем писать в чаты и группы в социальных сетях" %}
+    </div>
+    <div class="easy__grid">
+      <div class="easy__item easy__item--fir">
+        <h2>{% translate "Один простой шаг" %}</h2>
+        <p>{% translate "За пару кликов <b>размещаешь объявление</b> на нашем сайте, о том, что необходимо перевезти посылку, а также указываешь удобный способ связи." %}</p>
+        <img src="{% static 'img/webp/sender-card1.webp' %}" alt="sender1">
+      </div>
+      <div class="easy__item easy__item--sec">
+        <div class="easy__arrow easy__arrow--fir"></div>
+        <div class="easy__arrow easy__arrow--sec"></div>
+        <p>{% translate "Попутчики видят твое объявление и&nbsp;оставляют отклики на&nbsp;него." %}</p>
+        <img src="{% static 'img/webp/sender-card2.webp' %}" alt="sender1">
+      </div>
+      <div class="easy__item easy__item--thr">
+        <p>{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</p>
+        <img src="{% static 'img/webp/sender-card3.webp' %}" alt="sender1">
+
+      </div>
+    </div>
+    <div class="subtitle">
+      {% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
+    </div>
+    <a href="#form" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
+  </section>
+  {############use###############}
+  <section class="use">
+    <div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
+    <img src="{% static "img/webp/use.webp" %}" alt="list users" class="use__img">
+    <div class="h3">
+      {% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
+    </div>
+    <a href="#form" class="use__btn btn btn--primary">{% translate "Найти перевозчика" %}</a>
+    <br/>
+    <a href="#registr" class="use__link">{% translate "Зарегистрироваться" %}</a>
+  </section>
+  <section class="use use--diff">
+    <div class="title">{% translate "Чем мы отличаемся от классических почтовых сервисов" %}</div>
+    <img src="{% static "img/webp/diff.webp" %}" alt="list differences" class="use__img">
+  </section>
+  <section class="chatterbox">
+    <div class="title">{% translate "Что о нас говорят люди" %}</div>
+    <div class="chatterbox__slider slick-slider">
+
+      <div class="slick-slide">
+        <div class="chatterbox__slide">
+          <div class="chatterbox__vicon"></div>
+
+        <video src="https://example.com/hexlet.mp4"></video>
+
+        </div>
+      </div>
+      <div class="slick-slide">
+        <div class="chatterbox__slide">
+          <div class="chatterbox__vicon"></div>
+
+        <video src="https://example.com/hexlet.mp4"></video>
+
+        </div>
+      </div>
+      <div class="slick-slide">
+        <div class="chatterbox__slide">
+          <div class="chatterbox__vicon"></div>
+
+        <video src="https://example.com/hexlet.mp4"></video>
+
+        </div>
+      </div>
+      <div class="slick-slide">
+        <div class="chatterbox__slide">
+          <div class="chatterbox__vicon"></div>
+
+
+        </div>
+      </div>
+      <div class="slick-slide">
+        <div class="chatterbox__slide">
+          <div class="chatterbox__vicon"></div>
+
+
+        </div>
+      </div>
+      <div class="slick-slide">
+        <div class="chatterbox__slide">
+          <div class="chatterbox__vicon"></div>
+
+
+        </div>
+      </div>
+    </div>
+    </div>
+    </div>
+    </div>
+    </div>
+    </div>
+    <script type="text/javascript">
+        $(document).ready(function () {
+            $('.slick-slider').slick({
+                centerMode: true,
+                {#centerPadding: '160px',#}
+                slidesToShow: 3,
+                responsive: [
+                    {
+                        breakpoint: 768,
+                        settings: {
+                            arrows: false,
+                            centerMode: true,
+                            centerPadding: '40px',
+                            slidesToShow: 3
+                        }
+                    },
+                    {
+                        breakpoint: 480,
+                        settings: {
+                            arrows: false,
+                            centerMode: true,
+                            centerPadding: '40px',
+                            slidesToShow: 1
+                        }
+                    }
+                ]
+            });
+        });
+    </script>
+  </section>
+
+
+
+
+
+
+
+{% endblock %}