Merge branch 'module-figma'

.gitignore

@@ -1,2 +1,24 @@
 # Desktop Services Store
-.DS_Store
+.DS_Store
+
+# Virtualenv
+env/
+venv/
+
+# VSCode
+.vscode
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+
+# Django
+migrations/
+staticfiles/
+media/
+
+# Other
+*.sqlite3
+*.*~
+*.*.swp

admin.py

@@ -0,0 +1,16 @@
+from django.contrib import admin
+
+from landing.models import *
+from landing.utils import create_pages_clean_admin
+
+
+@admin.register(LandingPage)
+class LandingPageAdmin(admin.ModelAdmin):
+    list_display = ('title', 'slug')
+    actions = [create_pages_clean_admin]
+
+
+@admin.register(FAQmodel)
+class LandingPageAdmin(admin.ModelAdmin):
+    list_display = ('question',)
+# admin.site.register(LandingPage)

apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class LandingConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'landing'

forms.py

@@ -0,0 +1,79 @@
+import datetime
+
+from django import forms
+
+
+class MyForm(forms.Form):
+    name = forms.CharField(label="", widget=forms.TextInput(
+        attrs={'class': 'form-control', 'placeholder': 'Имя', 'id': 'sendemailname'}))
+    email = forms.CharField(label="", widget=forms.TextInput(
+        attrs={'class': 'form-control', 'placeholder': 'Email', 'type': 'email', 'id': 'sendemailemail'}))
+    message = forms.CharField(label="", widget=forms.Textarea(
+        attrs={'class': 'form-control', 'placeholder': 'Сообщение', 'rows': '3', 'id': 'sendemailmessage'}))
+
+
+SERVICE_CHOICES = (
+    (0, "xxxxxxxxxxxxxxxxxxxxxxxxxxxx"),
+    (1, "xxxxxxxxxxxxxxxxxxxxxxxx"),
+    (2, "xxxxxxxxxxxxxxxxxx"),
+    (3, "xxxxxxxxxxxxxxxxx"),
+    (4, "xxxxxxxxxxxxxxxxxxx"),
+    (5, "xxxxxxxxxxxxx"),
+    (6, "xxxxxx"),
+)
+number_errors = {
+    'required': 'Укажите номер в формате: +79876543210.',
+    'invalid': 'Номер должен быть в формате: +79876543210.'
+}
+service_errors = {
+    'required': 'Выберите хотя бы одну услугу.',
+    'invalid': 'Выберите хотя бы одну услугу.'
+}
+
+
+class OrderForm(forms.Form):
+    name = forms.CharField(
+        label="",
+        widget=forms.TextInput(attrs={
+            'class': 'form-control',
+            'placeholder': 'Имя'
+        })
+    )
+    surname = forms.CharField(
+        label="",
+        widget=forms.TextInput(attrs={
+            'class': 'form-control',
+            'placeholder': 'Фамилия'
+        })
+    )
+    service = forms.MultipleChoiceField(
+        required=True,
+        choices=SERVICE_CHOICES,
+        widget=forms.CheckboxSelectMultiple(),
+        error_messages=service_errors
+    )
+    datetime = forms.DateTimeField(
+        initial=datetime.date.today,
+        widget=forms.DateTimeInput(attrs={
+            'type': 'datetime-local',
+            'class': 'form-control',
+            'placeholder': 'form-control'
+        })
+    )
+    phone = forms.RegexField(
+        regex=r'^\+?1?\d{9,15}$',
+        error_messages=number_errors,
+        widget=forms.TextInput(attrs={
+            'class': 'form-control',
+            'type': 'tel',
+            'placeholder': '+79876543210'
+        })
+    )
+    comment = forms.CharField(
+        label="",
+        required=False, widget=forms.Textarea(attrs={
+            'class': 'form-control',
+            'placeholder': 'Комментарий',
+            'rows': '5'
+        })
+    )

models.py

@@ -0,0 +1,26 @@
+from ckeditor.fields import RichTextField
+from django.db import models
+
+
+class LandingPage(models.Model):
+    title = models.CharField(max_length=150)
+    slug = models.SlugField(unique=True)
+    content = RichTextField(blank=True, null=True)
+
+    def __str__(self) -> str:
+        return self.title
+
+    class Meta:
+        verbose_name = 'Простая страница'
+        verbose_name_plural = 'Простые страницы'
+
+
+class FAQmodel(models.Model):
+    question = models.TextField(blank=True)
+    answer = models.TextField(blank=True)
+
+    def __str__(self) -> str:
+        return self.question
+
+    class Meta:
+        verbose_name = 'FAQ'

static/landing/css/globals.css

@@ -0,0 +1,532 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
+
+:root {
+    --main: #FFFFFF;
+    --accent: #479FF8;
+    --bg: #F8F9FD;
+    --blue-bg: #2C64BF;
+    --dark-blue-bg: #1D4685;
+    --unActive: #D8D8D8;
+
+    --main-text: #3C3C3C;
+    --second-text: #7E7E7E;
+    --danger-text: #EF3232;
+
+
+
+    --font-xl: 36px;
+    --font-xl2: 32px;
+    --font-rt: 24px;
+    --font-md: 16px;
+    --font-sm: 14px;
+
+    --font-bold: 700;
+    --font-thin: 400;
+
+    /* border-radius */
+
+    --br-xl: 15px;
+    --br-md: 10px;
+    --br-sm: 6px;
+
+    /* border */
+
+    --input-border: #D8D8D8;
+
+    /* margin */
+
+    --m-5xl: 50px;
+    --m-4xl: 40px;
+    --m-3xl: 30px;
+    --m-2xl: 24px;
+    --m-xl: 20px;
+    --m-md: 15px;
+    --m-sm: 10px;
+    --m-l: 8px;
+}
+
+h1 {
+    font-size: var(--font-xl);
+}
+
+.hideScrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+.hideScrollbar {
+    -ms-overflow-style: none; 
+    scrollbar-width: none; 
+}
+
+.blue-text {
+    color: var(--accent);
+    position: relative;
+    display: inline-block;
+}
+.clicked-reference{
+    height: 72px;
+}
+.blue-text::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: -25px; 
+    width: 100%;
+    height: 5px;
+    background-color:  var(--accent);
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}
+.underline{
+    text-decoration: underline;
+}
+
+/* Скрываем scrollbar для Chrome, Safari и Opera */
+.example::-webkit-scrollbar {
+    display: none;
+  }
+   
+  /* Скрываем scrollbar для IE, Edge и Firefox */
+  .example {
+    -ms-overflow-style: none;  /* IE и Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+
+ul, li, body{
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    color: var(--main-text);
+    background: var(--bg);
+    font-family: 'Open Sans', sans-serif;
+    box-sizing: border-box;
+}
+
+p {
+    line-height: 1.9;
+}
+
+.container {
+    width: 1340px;
+    margin: auto;
+    position: relative;
+}
+
+.menu-text a {
+    display: flex;
+    align-items: center;
+    margin-left: 50px;
+}
+
+.menu {
+    width: 100%;
+    height: 72px;
+
+    border-radius: var(--br-md);
+    margin-bottom: 50px;
+
+    background: var(--main);
+
+    top: 20px;
+
+    z-index: 1;
+    position: sticky;
+    justify-content: space-between;
+}
+
+.sharix-menu-text {
+    font-size: var(--font-rt);
+    font-weight: var(--font-thin);
+}
+
+.menu-text {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+}
+
+.menu-items {
+    margin-left: 50px;
+}
+
+.ShariX-icon {
+    margin-left: 24px;
+    margin-right: 10px;
+}
+
+.enter-icon {
+    margin-left: 57px;
+    margin-right: 29px;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.flex-row-center {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.title {
+    font-size: var(--font-xl);
+    font-weight: var(--font-bold);
+}
+.popup-burger-text li{
+    width: 200px;
+    height: 50px;
+    margin-top: 25px;
+    margin-bottom: 10px;
+    margin-left: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+.list-none {
+    list-style: none;
+}
+.items-center{
+    display: flex;
+    align-items: center;
+}
+.text-center {
+    text-align: center;
+}
+
+.flex-column {
+    flex-direction: column;
+}
+
+.content-between {
+    display: flex;
+    justify-content: space-between;
+}
+
+footer {
+    width: 100%;
+    margin-top: 50px;
+    margin-bottom: 25px;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    border-radius: var(--br-md);
+    background-color: var(--main);
+}
+
+.footer-text {
+    color: var(--second-text);
+    margin-top: 20px;
+}
+
+.footer-text li {
+    margin-top: 20px;
+}
+
+.footer-row {
+    margin-top: 40px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.wrap-footer{
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+.mt-25{
+    margin-top: 45px;
+}
+.ml-40 {
+    margin-left: 40px;
+}
+.footer-size{
+    font-size: var(--font-sm);
+}
+
+/* BUTTON STYLES */
+
+.proto-button {
+    padding: var(--m-l) var(--m-2xl);
+    border: none;
+    border-radius: var(--br-sm);
+
+    font-size: var(--font-sm);
+    font-weight: var(--font-bold);
+    letter-spacing: 0.4px;
+
+    color: var(--bg);
+    background-color: var(--accent);
+    
+    transition: 0.3s all;
+}
+
+button:hover {
+    background-color: var(--blue-bg);
+}
+
+button:active {
+    background-color: var(--dark-blue-bg);
+}
+
+button:disabled {
+    background-color: var(--unActive);
+}
+
+button:disabled:hover {
+    background-color: var(--unActive);
+}
+
+/* BUTTON STYLES */
+
+.partners-content {
+    justify-content: space-between;
+    margin-bottom: 308px;
+}
+
+.partners-text {
+    width: 645px;
+    line-height: 1.9;
+    text-align: justify;
+}
+
+.information-tasks {
+    padding-left: 20px;
+    padding-bottom: 100px;
+    color: var(--accent);
+}
+
+.information-tasks li {
+    margin-top: 20px;
+}
+
+.disk {
+    list-style-type: circle;
+    margin-left: 20px;
+}
+
+.m-auto {
+    text-align: center;
+}
+
+.content-center {
+    display: flex;
+    justify-content: center;
+}
+
+.footer-top {
+    margin-top: 300px;
+}
+
+.input-group {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    margin: 0.7rem 0;
+
+}
+
+.input-group {
+    margin-bottom: 65px;
+}
+.input-group p{
+    top: -110%;
+    left: -2%;
+    font-weight: 700;
+    color: var(--main-text);
+}
+.input-group:has(textarea) p{
+    top: -40%;
+}
+/* .input-group.active p {
+    top: -110%;
+    left: -2%;
+    font-weight: 700;
+    color: var(--main-text);
+    padding: 4px 2px;
+}
+
+.input-group.active:has(textarea) p{
+    top: -40%;
+} */
+
+.input-group p {
+    margin-left: 10px;
+    position: absolute;
+}
+
+.input-group input {
+    border: 1px solid var(--input-border);
+}
+
+.input-group input:focus {
+    outline: var(--accent) 1px solid;
+}
+
+.input-group .error-input {
+    position: absolute;
+    bottom: -70%;
+    color: var(--danger-text);
+}
+
+.second-input {
+    width: 100%;
+    min-height: 126px;
+    border-radius: var(--br-sm);
+    resize: none;
+}
+
+.second-input:focus {
+    outline: var(--accent) 1px solid;
+}
+
+.footer-image-margin {
+    margin-left: 10px;
+}
+.fixed-width a{
+    width: 100%;
+}
+.contacts-text {
+    width: 705px;
+}
+
+.content-around {
+    justify-content: space-around;
+}
+
+.decoration-none a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.services-footer{
+    width: 174px;
+}
+.burger{
+    width: 26px;
+    height: 16px;
+    margin-right: 25px;
+    display: none;
+
+}
+.line{
+    width: 100%;
+    height: 2px;
+    border-radius: 4px;
+    background-color: #3C3C3C;
+}
+
+.popup{
+    background-color: var(--main);
+    border-radius: 15px;
+}
+.login-btn{
+    background: none;
+    font-size: var(--font-md);
+    border-radius: var(--br-md);
+    border: 1px solid var(--accent);
+}
+.cover-enter-icon{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+@media screen and (max-width: 1340px) {
+    .container {
+        width: 1100px;
+    }
+}
+
+
+@media screen and (max-width: 1100px) {
+    .container {
+        width: 992px;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    .container {
+        width: 768px;
+    }
+    .blue-text::after {
+        display: none;
+    }
+    .clicked-reference{
+        width: 100%;
+        height: 50px;
+    }
+    .popup{
+    width: 200px;
+    padding-top: 15px;
+    padding-right: 25px;
+    padding-left: 25px;
+    padding-bottom: 25px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    position: absolute;
+    top: 80px;
+    right: 0;
+    color: var(--accent);
+    }
+    .menu-text a {
+        margin: 0;
+        }
+    .menu-text {
+    gap: 25px;
+    height: 100%;
+        flex-direction: column;
+        justify-content: space-around;
+    }
+    .clicked-reference{
+        width: 450px;
+        height: 50px;
+    }
+    h1{
+        font-size: var( --font-xl2);
+    }
+
+    .flex-row.adaptive-992 {
+        display: flex;
+        flex-direction: column;
+    }
+    .burger{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .container {
+        width: 576px;
+    }
+    .menu{
+        margin-bottom: 25px;
+    }
+    footer{
+    display: flex;
+    flex-wrap: wrap;
+    }
+
+    .content-around.adaptive-content-768{
+        gap: 50px;
+    }
+}
+@media screen and (max-width:576px) {
+    .container {
+        width: 476px;
+    }
+
+}
+.display-none{
+    display: none !important;
+}

static/landing/css/template.css

@@ -0,0 +1,471 @@
+.text-style p {
+    color: var(--accent);
+}
+
+.servises-block h1 {
+    margin-left: 30px;
+    margin-bottom: 0;
+}
+
+.button-selection {
+    width: 270px;
+    height: 50px;
+
+    margin-left: 15px;
+    margin-top: 15px;
+    padding-left: 15px;
+
+    border-radius: var(--br-md);
+    border: none;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    transition: 0.3s all;
+
+    background: none;
+}
+
+.button-selection svg {
+    margin-right: 10px;
+}
+
+.button-selection:active svg>path {
+    fill: white;
+}
+
+.button-selection:hover {
+    background-color: #EBF5FE;
+}
+
+.button-selection:active {
+    background: #479FF8;
+}
+
+.button-selection p {
+    transition: 0.3s all;
+    font-size: var(--font-md);
+}
+
+.button-selection:active p {
+    color: white;
+    fill: white;
+}
+
+.service-wrapper {
+    width: 100%;
+    justify-content: space-between;
+}
+
+.servises-block {
+    width: 308px;
+    height: 301px;
+    border-radius: var(--br-xl);
+    top: 120px;
+    position: sticky;
+    background: var(--main);
+}
+
+.aboutCompany {
+    width: 982px;
+    margin-left: var(--m-5xl);
+}
+
+.aboutCompany p {
+    color: var(--main-text);
+}
+
+.icon-border {
+    border-radius: var(--br-md);
+}
+
+.under-header {
+    width: 100%;
+    height: 300px;
+    position: relative;
+    align-items: center;
+}
+
+figure.sixteen-nine-img {
+    width: 100%;
+    overflow: hidden;
+    margin: 0;
+    padding-top: 56.25%;
+    position: relative;
+    margin-top: 50px;
+    margin-bottom: 50px;
+
+    background: linear-gradient(288.75deg, #595959 2.2%, #3C3C3C 78.38%);
+    border-radius: var(--br-xl);
+}
+
+figure.sixteen-nine-img img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+}
+
+.employee_avatar {
+    width: 256px;
+    height: 256px;
+
+    background: linear-gradient(288.75deg, #595959 2.2%, #3C3C3C 78.38%);
+    border-radius: var(--br-xl);
+
+    overflow: hidden;
+}
+
+.employees{
+    gap: 42px;
+}
+
+.w-100{
+    width: 100%;
+}
+.substrate{
+    width: 900px;
+    height: 150px;
+    border-radius: 15px;
+
+    background-color: var(--main);
+}
+.substrate-text{
+    margin-left: 25px;
+}
+.adaptive-img-none{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+@media screen and (max-width: 1340px) {
+    .aboutCompany {
+        width: 738px;
+    }
+    .substrate{
+        width: 550px;
+    }
+    .employee_avatar {
+        width: 218px;
+        height: 218px;
+        display: flex;
+        justify-content: center;
+    }
+
+}
+@media screen and (max-width: 1100px) {
+    .aboutCompany {
+        width: 550px;
+    }
+    .substrate{
+        width: 550px;
+        position: absolute;
+        z-index: 1;
+    }
+    .adaptive-img-none{
+        width: 500px;
+    }
+    .employees{
+        overflow-x: auto;
+    }
+}
+@media screen and (max-width: 992px) {
+    .aboutCompany {
+        width: 400px;
+        margin-left: 0;
+    }
+    .servises-block{
+        width: 100%;
+        height: 94px;
+        margin-bottom: 25px;
+        
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex-wrap: nowrap;
+        
+        position: static;
+        
+        overflow: auto;
+    }
+    .substrate{
+        width: 400px;
+        height: 200px;
+    }
+    .adaptive-img-none{
+        position: absolute;
+        right: 0;
+        width: 420px;
+    }
+    .service-wrapper{
+        flex-direction: column;
+    }
+    .aboutCompany {
+        width: 100%;
+        margin-left: 0;
+    }
+    .servises-block button {
+        flex-shrink: 0;
+    }
+    .servises-block h1 {
+        margin-bottom: 20px;
+    }
+}
+@media screen and (max-width: 768px) {
+    .servises-block h1 {
+        margin-bottom: 0;
+    }
+    .new-font-size{
+        font-size: var(--font-rt);
+    }
+    .adaptive-img-none{
+        display: none;
+    }
+    .servises-block{
+        width: 100%;
+        height: 94px;
+        margin-bottom: 25px;
+        
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex-wrap: nowrap;
+        
+        position: static;
+        
+        overflow: auto;
+    }
+
+    .service-wrapper{
+        flex-direction: column;
+    }
+    .aboutCompany{
+        width: 100%;
+        margin-left: 0;
+    }
+    .employees{
+        overflow-x: scroll;
+    }
+    .substrate{
+        background: none;
+        width: 100%;
+    }
+    .under-header {
+        height: 150px;
+        margin-top: 25px;
+        margin-bottom: 50px;
+        color: #EBF5FE;
+        background: linear-gradient(to left, #479FF8, #0081FF);
+        border-radius: 15px;
+    }
+}
+
+
+.data{
+    margin-right: 10px;
+}
+.map{
+    border-radius: var(--br-xl);
+    height: 310px;
+}
+.main-input{
+    width: 100%;
+    height: 40px;
+    border-radius: var(--br-sm);
+    padding-left: 10px;
+    background: var(--main);
+    border: none;
+}
+.email-margin{
+    margin-right: 25px;
+}
+.second-input{
+    width: 99%;
+    height: 130px;
+    background: var(--main);
+    border: solid 1px var(--input-border);
+    padding-top: 0;
+}
+.contacts-data{
+    width: 585px;
+    margin-left: 60px;
+    padding-top: 20px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+.send{
+    margin-top: 30px;
+}
+.footer{
+    margin-top: 100px;
+}
+.comment-input{
+    max-width: 100%;
+}
+.deranged-data{
+    width: 700px;
+}
+
+@media screen and (max-width: 992px) {
+    .contacts-data{
+        margin: 0;
+    }
+    .contacts-text{
+        width: 100%;
+    }
+    .deranged-data{
+        width: 100%;
+    }
+    .contacts-data{
+        width: 100%;
+    }
+    .map{
+        width: 100%;
+    }
+}
+
+.background-popup{
+    width: 100%;
+    height: 100vh;
+
+    left: 0;
+    top: 0;
+
+    background-color: rgba(0, 0, 0, 0.205);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    position: fixed;
+
+    z-index: 100;
+}
+.table-popup{
+    width: 400px;
+    min-height: 400px;
+
+    padding: 25px;
+
+    position: relative;
+
+    background-color: var(--main);
+
+    border-radius: 10px;
+}
+.proposalPopup{
+    
+}
+.redCross{
+    position: absolute;
+    right: 30px;
+    top: 30px;
+}
+.first-proposal{
+    position: relative;
+}
+
+.Service{
+    margin-right: 400px;
+    padding-left: 60px;
+    white-space: nowrap;
+    vertical-align: top;
+}
+.active-table {
+    /* border: 1px solid var(--accent); */
+    border-radius: 10px;
+    /* position: absolute;
+    bottom: 0; */
+}
+.active-table1  {
+    border: 1px solid var(--accent);
+    border-radius: 10px;
+    /* position: absolute;
+    bottom: 0; */
+}
+.clarification {
+    color: var(--second-text);
+}
+.numbers{
+    vertical-align: top;
+}
+
+.information-table{
+    margin-top: 50px;
+    margin-bottom: 50px;
+
+    cursor: pointer;
+}
+.information-table p {
+    font-weight: 400;
+    font-size: 16px;
+}
+.tabular-line{
+    width: 100%;
+    border-radius: var(--br-md);
+    border: 1px solid var(--bg);
+    transition: 0.3s all;
+}
+.modal-table{
+    min-width: 400px;
+    border-radius: 10px;
+    padding: 25px;
+    position: fixed;
+    margin: auto;
+    z-index: 1;
+    background-color: var(--main);
+}
+.tabular-line:hover{
+    border: 1px solid var(--accent);
+}
+.information-table :nth-child(1):hover{
+    border: 1px solid var(--bg);
+}
+.tabular-line >*:nth-child(1){
+    width: 88px;
+    display: flex;
+    justify-content: center;
+}
+.tabular-line >*:nth-child(2){
+    width: 168px;
+}
+.tabular-line >*:nth-child(3){
+    width: 932px;
+}
+.tabular-line >*:nth-child(4){
+    width: 146px;
+    display: flex;
+    align-items: center;
+}
+.tabular-line >*:nth-child(5){
+    width: 146px;
+    display: flex;
+    align-items: center;
+}
+@media screen and (max-width: 1200px) {
+    .tabular-line > *:nth-child(3) {
+        width: 697px;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    .tabular-line > *:nth-child(3) {
+        width: 488px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .tabular-line > *:nth-child(3) {
+        width: 265px;
+    }
+}
+@media screen and (max-width: 576px) {
+    .tabular-line > *:nth-child(3) {
+        width: 144px;
+        margin: 0;
+    }
+}

static/landing/img/RedCross.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.40994 8.00019L15.7099 1.71019C15.8982 1.52188 16.004 1.26649 16.004 1.00019C16.004 0.733884 15.8982 0.478489 15.7099 0.290185C15.5216 0.101882 15.2662 -0.00390625 14.9999 -0.00390625C14.7336 -0.00390625 14.4782 0.101882 14.2899 0.290185L7.99994 6.59019L1.70994 0.290185C1.52164 0.101882 1.26624 -0.00390601 0.999939 -0.00390601C0.733637 -0.00390601 0.478243 0.101882 0.289939 0.290185C0.101635 0.478489 -0.00415253 0.733884 -0.00415254 1.00019C-0.00415254 1.26649 0.101635 1.52188 0.289939 1.71019L6.58994 8.00019L0.289939 14.2902C0.196211 14.3831 0.121816 14.4937 0.0710478 14.6156C0.0202791 14.7375 -0.00585938 14.8682 -0.00585938 15.0002C-0.00585938 15.1322 0.0202791 15.2629 0.0710478 15.3848C0.121816 15.5066 0.196211 15.6172 0.289939 15.7102C0.382902 15.8039 0.493503 15.8783 0.615362 15.9291C0.737221 15.9798 0.867927 16.006 0.999939 16.006C1.13195 16.006 1.26266 15.9798 1.38452 15.9291C1.50638 15.8783 1.61698 15.8039 1.70994 15.7102L7.99994 9.41018L14.2899 15.7102C14.3829 15.8039 14.4935 15.8783 14.6154 15.9291C14.7372 15.9798 14.8679 16.006 14.9999 16.006C15.132 16.006 15.2627 15.9798 15.3845 15.9291C15.5064 15.8783 15.617 15.8039 15.7099 15.7102C15.8037 15.6172 15.8781 15.5066 15.9288 15.3848C15.9796 15.2629 16.0057 15.1322 16.0057 15.0002C16.0057 14.8682 15.9796 14.7375 15.9288 14.6156C15.8781 14.4937 15.8037 14.3831 15.7099 14.2902L9.40994 8.00019Z" fill="#EF3232"/>
+</svg>

static/landing/img/lightning.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8701 6.60001C15.7956 6.42872 15.6746 6.28173 15.5209 6.17569C15.3671 6.06964 15.1867 6.00878 15.0001 6.00001H10.4201L11.6901 1.26001C11.7306 1.11168 11.7363 0.956028 11.7068 0.80514C11.6773 0.654253 11.6134 0.512196 11.5201 0.390007C11.427 0.268992 11.3073 0.170922 11.1704 0.103318C11.0334 0.0357144 10.8828 0.000373726 10.7301 6.64638e-06H3.73012C3.50436 -0.00772659 3.28263 0.0612064 3.10104 0.195579C2.91946 0.329951 2.78872 0.521845 2.73012 0.740007L0.0501216 10.74C0.00967373 10.8883 0.00396998 11.044 0.0334537 11.1949C0.0629375 11.3458 0.126814 11.4878 0.220121 11.61C0.314307 11.7324 0.435547 11.8312 0.574342 11.8989C0.713138 11.9666 0.865716 12.0012 1.02012 12H4.89012L3.08012 18.74C3.02082 18.9573 3.03664 19.1883 3.12502 19.3956C3.21341 19.6028 3.36917 19.7741 3.56708 19.8817C3.76499 19.9894 3.99344 20.027 4.21543 19.9886C4.43741 19.9502 4.63991 19.8379 4.79012 19.67L15.6901 7.67001C15.8199 7.52789 15.9059 7.35134 15.9379 7.16154C15.9698 6.97175 15.9463 6.77677 15.8701 6.60001ZM6.08012 15.28L7.15012 11.28C7.19057 11.1317 7.19627 10.976 7.16679 10.8251C7.13731 10.6743 7.07343 10.5322 6.98012 10.41C6.88696 10.289 6.76733 10.1909 6.63039 10.1233C6.49345 10.0557 6.34284 10.0204 6.19012 10.02H2.35012L4.49012 2.00001H9.42012L8.15012 6.74001C8.10935 6.89106 8.10459 7.04958 8.13623 7.20281C8.16786 7.35604 8.23501 7.49971 8.33228 7.62226C8.42955 7.74482 8.55421 7.84284 8.69625 7.90845C8.8383 7.97405 8.99375 8.00541 9.15012 8.00001H12.7201L6.08012 15.28Z" fill="#479FF8"/>
+</svg>

static/landing/img/mark.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8701 9.23495C19.7063 7.53035 19.1039 5.89722 18.1215 4.49457C17.1391 3.09193 15.8102 1.96759 14.2643 1.23103C12.7183 0.494468 11.008 0.170794 9.29977 0.291524C7.59158 0.412254 5.94376 0.973274 4.51677 1.91995C3.29083 2.73971 2.26167 3.8208 1.50321 5.08558C0.744745 6.35035 0.275816 7.76741 0.130105 9.23495C-0.0128319 10.6929 0.170558 12.1644 0.666971 13.5426C1.16338 14.9209 1.96037 16.1713 3.00011 17.2033L9.18344 23.3983C9.2919 23.5076 9.42093 23.5944 9.5631 23.6537C9.70527 23.7129 9.85776 23.7434 10.0118 23.7434C10.1658 23.7434 10.3183 23.7129 10.4604 23.6537C10.6026 23.5944 10.7316 23.5076 10.8401 23.3983L17.0001 17.2033C18.0398 16.1713 18.8368 14.9209 19.3332 13.5426C19.8297 12.1644 20.013 10.6929 19.8701 9.23495ZM10.0001 14.3333C12.5774 14.3333 14.6667 12.244 14.6667 9.66664C14.6667 7.08931 12.5774 4.99997 10.0001 4.99997C7.42273 4.99997 5.33339 7.08931 5.33339 9.66664C5.33339 12.244 7.42273 14.3333 10.0001 14.3333Z" fill="#3C3C3C"/>
+</svg>

static/landing/img/phone.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.544 22.1316C13.9484 21.8703 13.3608 21.592 12.7828 21.293C12.4333 21.1118 12.0844 20.9221 11.8912 20.7895L9.96403 19.5514C7.7141 18.0807 5.74719 16.1488 4.09284 14.0236L3.75243 13.5863C2.74539 12.2928 1.84405 10.9193 1.07115 9.47205C0.569335 8.53294 0.153902 7.62411 0.0305788 6.69128C-0.10411 5.67557 0.211869 4.65186 0.865423 3.86593L1.63662 2.93825C1.9759 2.52956 2.34643 2.14717 2.75221 1.80536C3.70867 0.999995 4.77027 0.482709 5.64489 1.36238L7.30322 2.96397C8.42335 4.09056 10.1396 5.96251 9.01951 7.08911L6.94916 8.21399C6.52066 8.44663 6.14898 8.77872 5.88813 9.19255C5.39995 9.96533 5.49543 10.6627 6.27003 11.4886C6.35698 11.5812 6.44223 11.6755 6.52463 11.7721L7.6084 13.0353C8.96665 14.618 10.5556 15.9881 12.3327 17.073C12.5504 17.2062 12.7612 17.3291 12.9613 17.44C13.2807 17.6172 13.6592 17.6497 14.0047 17.5331C14.5651 17.3434 15.051 16.9753 15.3789 16.4809C16.2535 15.1633 16.6087 13.2382 18.2761 14.4077L21.541 16.6775C21.7792 16.8432 21.9974 17.037 22.1895 17.2554C22.9646 18.1379 23.2602 18.6489 22.7368 19.6726C22.635 19.8709 22.4123 20.2465 22.2389 20.3854L22.2253 20.4014C21.4484 21.3182 20.5192 22.0927 19.4792 22.6911L18.8234 22.9495L18.4091 23.0455C18.2448 23.0832 18.0761 23.1015 17.9078 23.0953C16.9326 23.0604 16.208 22.8763 15.2038 22.4214L14.5457 22.1327L14.544 22.1316Z" fill="#3C3C3C"/>
+</svg>

static/landing/img/sharix-footer-logo.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9851 6.37755C11.8645 6.37755 10.744 5.22161 9.25002 3.80852L6.2707 1.13153C5.93455 0.829509 5.40915 1.08423 5.4216 1.54394L5.14147 8.94537C5.15641 9.47543 5.57225 9.34686 6.01298 9.07394L8.12951 8.04657C9.87253 7.40492 10.7615 8.42865 10.8685 9.20252C11.1175 11.0001 10.246 11.2573 8.005 12.1561C6.58195 12.7274 5.14147 13.6977 3.64746 15.4953C2.35638 17.0491 1.46246 19.2021 1.05783 21.2714C0.679343 23.2073 2.20698 25 4.23012 25H21.7699C23.793 25 25.3207 23.2073 24.9422 21.2714C24.5363 19.2021 23.6436 17.0491 22.3525 15.4953C20.8585 13.6977 19.418 12.7261 17.995 12.1561C15.754 11.2573 14.8825 11.0001 15.1315 9.20252C15.2385 8.42865 16.1275 7.40492 17.8705 8.04657L19.987 9.07394C20.4278 9.34686 20.8436 9.47543 20.8585 8.94537L20.5784 1.54394C20.5908 1.08423 20.0655 0.828296 19.7293 1.13153L16.75 3.80852C15.256 5.22161 14.1355 6.37755 13.0149 6.37755H12.9875H12.9851Z" stroke="#5F9DF1" stroke-width="1.5" stroke-miterlimit="10"/>
+</svg>

static/landing/scripts/burger.js

@@ -0,0 +1,33 @@
+function Burger(){
+    const burgerMenu = document.getElementById('burgerMenu');
+    const popup = document.getElementById('popup');
+    const login = document.getElementById('login');
+    function togglePopup(){
+        if(popup.classList.contains('display-none')){
+            popup.classList.remove('display-none')
+        }
+        else{
+            popup.classList.add('display-none')
+        }
+    }
+    burgerMenu.addEventListener("click", togglePopup)
+
+    function checkWidth() {
+        if(window.innerWidth < 992){
+            login.classList.remove('display-none')
+            popup.classList.add('display-none');
+            burgerMenu.classList.remove('display-none');
+            }
+            else{
+            popup.classList.remove('display-none');
+            burgerMenu.classList.add('display-none');
+            login.classList.add('display-none')
+            }
+    }
+    checkWidth()
+
+    window.addEventListener('resize', checkWidth);
+}
+window.onload = function() {
+    Burger();
+};

static/landing/scripts/input.js

@@ -0,0 +1,67 @@
+const validationFieldIDS = ['name', 'email', 'phone']
+const BUTTON_ID = 'send_button'
+
+function getGroupInputs(){
+    return document.querySelectorAll('[input-group="true"]')
+}
+
+function getInput(children){
+    return Array.from(children).find((item) => item.nodeName === 'INPUT' || item.nodeName === "TEXTAREA")
+}
+
+function initInput(){
+    const elems = getGroupInputs()
+    for(const elem of elems){
+        const input = getInput(elem.children)
+        if(input && elem){
+            elem.onclick = (e) => {
+                input.focus();
+                if(elem.classList.contains('active') ){
+                    if(!input.value) {
+                        input.blur()
+                        elem.classList.remove('active')
+                    }
+                }else{
+                    elem.classList.add('active')
+                }
+            }
+            input.addEventListener('blur', () => {
+                if(!input.value) {
+                    elem.classList.remove('active')
+                }
+            })
+        }     
+    }
+}
+
+function initValidate(){
+    const button = document.getElementById(BUTTON_ID)
+    const elems = Array.from(getGroupInputs()).filter((elem) => validationFieldIDS.includes(elem.id))
+    function validateFields(){
+        let validatedCount = 0
+        for(const elem of elems){
+            const input = getInput(elem.children)
+            if(input.value){
+                validatedCount++
+            }
+        }
+    
+        if(validationFieldIDS.length !== validatedCount){
+            button.disabled = true
+        }else{
+            button.disabled = false
+        }
+    }
+    
+    for(const elem of elems){
+        const input = getInput(elem.children)
+        input.addEventListener('input', validateFields)
+    }
+
+    validateFields()
+}
+
+
+initValidate()
+
+initInput()

static/landing/scripts/service.js

@@ -0,0 +1,25 @@
+function validateInput(id){
+    const div = document.getElementById(id)
+    const input = div.children[1]
+    const error = div.children[2]
+
+    input.addEventListener('input', (e) => {
+        if(!e.target.value && !div.classList.contains('active')){
+            error.innerHTML = "Поле обязательно к заполению"
+        }else{
+            error.innerHTML = ""
+        }
+    })
+
+    input.addEventListener('blur', (e) => {
+        if(!e.target.value){
+            error.innerHTML = "Поле обязательно к заполению"
+        }else{
+            error.innerHTML = ""
+        }
+    })
+}
+
+validateInput('name')
+validateInput('email')
+validateInput('phone')

static/landing/scripts/servises.js

@@ -0,0 +1,106 @@
+let items = [
+    {
+        id: 1,
+        title: "Дружбан-Плюс",
+        text: "Это система управления государством, источником власти в которой является сам народ. Именно народ решает, какие законы и нормы необходимы для гармоничного существования и развитиягосударства. Таким образом, каждый человек в демократическом обществе получает определенныйнабор свобод и обязательств сформированных с учетом интересов всего сообщества. Исходя извышесказанного, можно заключить, что демократия – это возможность для каждого человекасвободно участвовать в непосредственном управлении своим государством, обществом и личнойсудьбой в конечном счете.",
+        cost: "50 000 рублей"
+    },
+    {
+        id: 2,
+        title: "Дружбан-Прем",
+        text: "Это система управления государством, источником власти в которой является сам народ. Именно народ решает, какие законы и нормы необходимы для гармоничного существования и развитиягосударства. Таким образом, каждый человек в демократическом обществе получает определенныйнабор свобод и обязательств сформированных с учетом интересов всего сообщества. Исходя извышесказанного, можно заключить, что демократия – это возможность для каждого человекасвободно участвовать в непосредственном управлении своим государством, обществом и личнойсудьбой в конечном счете.",
+        cost: "50 000 рублей"
+    }
+]
+const redCross = document.getElementById('redCross')
+const informationTable = document.getElementById('informationTable')
+const backgroundPopup = document.getElementById('backgroundPopup')
+const contentPopup = document.getElementById('contentPopup')
+const proposalPopup = document.getElementById('proposalPopup')
+const tablePopup = document.getElementById('tablePopup')
+tablePopup.addEventListener('click',function(e){
+    e.stopPropagation()
+})
+function resize() {
+
+    informationTable.innerHTML=` 
+    <div class="tabular-line flex-row">
+                <b>#</b>
+                <b>Название</b>
+                <b>Описание</b>
+                <b>Стоимость</b>
+            </div>
+    `
+    for ( let item of items){
+
+
+
+        let div = document.createElement('div')
+        div.classList.add("tabular-line")
+        div.classList.add("flex-row")
+        let id = document.createElement('p')
+        let title = document.createElement('p')
+        let textContent = document.createElement('p')
+        textContent.classList.add('desc')
+
+        let cost = document.createElement('b')
+    
+        div.id = item.id
+        id.innerHTML= item.id
+        title.innerHTML = item.title
+        textContent.innerHTML = item.text.slice(0, 150) + '...'
+        cost.innerHTML = item.cost
+    
+    
+        div.appendChild(id)
+        div.appendChild(title)
+        div.appendChild(textContent)
+        div.appendChild(cost)
+    
+        if( window.screen.width < 576){
+            textContent.innerHTML = `<p class="blue-text">Подробнее...</p>`
+            backgroundPopup.addEventListener('click', function(e){
+                e.stopPropagation()
+                backgroundPopup.classList.add('display-none')
+                document.body.style.overflow = 'auto'
+            })
+            redCross.addEventListener('click', function(){
+                backgroundPopup.classList.add('display-none')
+                document.body.style.overflow = 'auto'
+
+            })
+            textContent.addEventListener('click', function(e){
+                document.body.style.overflow = 'hidden'
+                e.stopPropagation()
+                backgroundPopup.classList.remove('display-none')
+
+                proposalPopup.textContent = item.title
+                contentPopup.textContent = item.text
+            })
+        }
+
+        div.addEventListener('click', function(){
+            let arr = Array.from(informationTable.children)
+            for (let item of arr){
+            if(item.classList.contains('active') && item.id !== div.id){
+                item.classList.remove('active')
+                const child = Array.from(item.children).find(elem=>elem.classList.contains('desc'))
+                child.innerHTML = child.innerHTML.slice(0, 150) + '...'
+            }
+           }
+            if(div.classList.contains('active')){
+                div.classList.remove('active')
+                textContent.innerHTML = item.text.slice(0, 150) + '...'
+            }
+            else{
+                div.classList.add('active')
+                textContent.innerHTML = item.text
+            }
+        })
+        
+        informationTable.appendChild(div)
+    }
+}
+resize()
+
+window.addEventListener('resize', resize) 

templates/landing/base.html

@@ -0,0 +1,31 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="ru" class="h-100">
+<head>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q1E14C3NE6"></script>
+    <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-Q1E14C3NE6');
+    </script>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" type="image/png" href="{% static 'landing/img/letterlogo.png' %}">
+    <link href="{% static 'landing/css/template.css' %}" rel="stylesheet">
+    <link href="{% static 'landing/css/globals.css' %}" rel="stylesheet">
+    
+    <title></title>
+
+</head>
+<body class="h-100">
+    {% block content %}
+    {% endblock %}
+    <script>
+        document.getElementById("date-year").innerHTML = new Date().getFullYear();
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+</body>
+</html>

templates/landing/footer.html

@@ -0,0 +1,43 @@
+{% load static %} 
+
+<footer >
+    <div  class="flex-row content-between content-around wrap-footer footer-size adaptive-content-768">
+        <div  class="flex-column services-footer">
+            <h4>О компании</h4>
+            <ul class="list-none footer-text cursor-pointer">
+                <li><a href="{% url 'faq' %}">Партнерам</a></li>
+                <li><a href="{% url 'price' %}">Тарифы</a></li>
+                <li><a href="{% url 'contact' %}">Контакты</a></li>
+            </ul>
+        </div>
+        <div class="flex-column services-footer">
+            <h4>О сервисе</h4>
+            <ul class="list-none footer-text cursor-pointer decoration-none">
+                <li>Преимущества</li>
+                    <li>Правовая информация</li>
+                <li>Правила оказания услуг</li>
+            </ul>
+        </div>
+        <div class="flex-column services-footer">
+            <h4><a href="{% url 'price' %}">Услуги</a></h4>
+            <ul class="list-none footer-text cursor-pointer">
+                <li>Услуга 1</li>
+                <li>Услуга 2</li>
+                <li>Услуга 3</li>
+            </ul>
+        </div>
+        <div class="flex-column services-footer">
+            <h4>О приложении</h4>
+            <ul class="list-none footer-text cursor-pointer">
+                <li>Скачать приложение</li>
+                <li>Подключиться</li>
+                <li><a href="/my/">Войти</a></li>
+            </ul>
+        </div>
+    </div>
+    <div class="text-center w-100 footer-row">
+        <p>2025 © powered by</p>
+        <img class="footer-image-margin" src="{% static 'landing/img/sharix-footer-logo.svg' %}"
+             alt="sharix-footer-logo">
+    </div>
+</footer>

templates/landing/header.html

@@ -0,0 +1,48 @@
+{% load static %} 
+    
+    <div class="under-header flex-row content-between">
+        <div class="substrate">
+            <h1 class="substrate-text mt-25" style="margin-bottom: 0;">Шаблон лендинга ShariX Open!</h1>
+            <p class="substrate-text" >Измените его! Для входа в админ панель ищите конпку ВОЙТИ!</p>
+        </div>
+        <img class="adaptive-img-none" src="{% static 'landing/img/two-persons.png' %}" alt="two-persons">
+    </div>
+    
+    <header class="menu flex-row-center">
+        <div class="flex-row-center sharix-menu-text">
+            <img class="ShariX-icon" src="{% static 'landing/img/sharix-logo 1.svg' %}" alt="sharix-logo">
+            <p>ShariX OpenTemplate</p>
+        </div>
+        <div id="popup" class="popup">
+            <ul id="menu" class="menu-text decoration-none fixed-width">
+                <a class="cursor-pointer clicked-reference " href="{% url 'main' %}">
+                    <li class="blue-text">О нас</li>
+                </a>
+                <a class="cursor-pointer clicked-reference" href="{% url 'price' %}">
+                    <li>Услуги</li>
+                </a>
+                <a class="cursor-pointer clicked-reference" href="{% url 'faq' %}">
+                    <li>Партнерам</li>
+                </a>
+                <a class="cursor-pointer clicked-reference" href="{% url 'contact' %}">
+                    <li>Контакты</li>
+                </a>
+                <a class="cursor-pointer clicked-reference" href="/my/">
+                    <li>Войти</li>
+                </a>
+                <div class="cover-enter-icon">
+                <button id="login" class="blue-text clicked-reference login-btn display-none">Регистрация</button>
+                <a href="/my/"><img class="enter-icon" src="{% static 'landing/img/enter.svg' %}" alt="sharix-logo"></a>
+                </div>
+            </ul>
+        </div>
+        <div id="burgerMenu" class="flex-row-center display-none">
+            <div  class="burger">
+                <div class="line"></div>
+                <div class="line"></div>
+                <div class="line"></div>
+            </div>
+        </div>
+
+    </header>
+    

templates/landing/index.html

@@ -0,0 +1,12 @@
+{% extends 'landing/base.html' %} 
+
+{% block content %}
+
+{% include 'landing/header.html' %}
+
+<div class="container" style="min-height: 500px;">
+    {% block container %}
+    {% endblock container %}
+</div>
+{% include 'landing/footer.html' %}
+{% endblock %}

templates/landing/pages/about.html

@@ -0,0 +1,37 @@
+{% extends 'landing/main.html' %}
+{% include 'landing/menu.html' %}
+
+{% block about %}
+
+  <h3>&nbsp;</h3>
+
+  <h1>О КОМПАНИИ</h1>
+
+  <h4><span style="font-size:20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, culpa cum vel veniam, quaerat assumenda unde deserunt mollitia architecto nemo alias ullam omnis odit labore</span></h4>
+
+  <h2>&nbsp;</h2>
+
+  <h1>НАШИ ПРЕИМУЩЕСТВА</h1>
+
+  <h4><span style="font-size:20px">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</span></h4>
+
+  <h4><span style="font-size:20px">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></h4>
+
+  <h4><span style="font-size:20px">Lorem ipsum, dolor sit amet consectetur adipisicing </span></h4>
+
+  <h4><span style="font-size:20px">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</span></h4>
+
+  <h4><span style="font-size:20px">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></h4>
+
+  <h4><span style="font-size:20px">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></h4>
+
+  <h2>&nbsp;</h2>
+
+  {% comment %} <h1>ПАКЕТНОЕ ОБСЛУЖИВАНИЕ</h1>
+
+  <h4><span style="font-size:20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat impedit quas iure eos pariatur deserunt facilis architecto animi ipsum, atque, distinctio iusto dolores deleniti q</span></h4>
+
+  <h4><span style="font-size:20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias aliquam amet ulla</span></h4>
+
+  <h4><span style="font-size:20px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam quas iusto autem fugiat aut architecto quidem sit totam fugit adipisci? Odio, dolor</span></h4> {% endcomment %}
+{% endblock %}

templates/landing/pages/contact.html

@@ -0,0 +1,53 @@
+{% extends 'landing/index.html' %}
+{% load static %} 
+{% block container %}
+
+<div class="flex-row adaptive-992">
+    <div class="deranged-data">
+        <h1>Свяжитесь с нами!</h1>
+        <p class="contacts-text">Здесь вы найдете всю необходимую информацию для связи с нашей компанией.
+            Мы стремимся к тому, чтобы наше сотрудничество было максимально комфортным
+             и продуктивным для всех наших клиентов и
+            партнеров.</p>
+        <div class="flex-row">
+            <img class="data" src="{% static 'landing/img/arobase.svg' %}" alt="arobase">
+            <p class="email-margin">email@sharix.org</p>
+            <img class="data" src="{% static 'landing/img/phone.svg' %}" alt="phone">
+            <p>+7 999 999 99 00</p>
+        </div>
+        <div class="flex-row">
+            <img class="data" src="{% static 'landing/img/mark.svg' %}" alt="mark">
+            <p>г. Москва, ул. Большая Ордынка 5к3</p>
+        </div>
+        <iframe class="map"
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2245.7839946590307!2d37.622450612216845!3d55.744881992489226!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54aff269a51d7%3A0xc01707669cafbe93!2z0YPQuy4g0JHQvtC70YzRiNCw0Y8g0J7RgNC00YvQvdC60LAsIDUsINCc0L7RgdC60LLQsCwgMTE1MDM1!5e0!3m2!1sru!2sru!4v1706554474958!5m2!1sru!2sru"
+            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
+            referrerpolicy="no-referrer-when-downgrade"></iframe>
+    </div>
+    <div class="contacts-data">
+        <div id="name" input-group="true" class="input-group">
+            <p>Как Вас зовут?</p>
+            <input autocomplete="off" class="main-input" type="text">
+            <label class="error-input"></label>
+        </div>
+        <div id="email" input-group="true" class="input-group">
+            <p>E-mail</p>
+            <input autocomplete="off" id="email" class="main-input" type="text">
+            <label class="error-input"></label>
+        </div>
+        <div id="phone" input-group="true" class="input-group">
+            <p>Телефон</p>
+            <input autocomplete="off" id="phone" class="main-input" type="text">
+            <label class="error-input"></label>
+        </div>
+        <div id="comment" input-group="true" class="input-group">
+            <p>Комментарий</p>
+            <textarea class="second-input comment-input"></textarea>
+            <label class="error-input"></label>
+        </div>
+        <button id="send_button" class=" proto-button send cursor-pointer">Отправить</button>
+    </div>
+</div>
+
+
+{% endblock %}

templates/landing/pages/faq.html

@@ -0,0 +1,79 @@
+{% extends 'landing/index.html' %} {% load static %} {% block container %}
+<style>
+  .accordion-button:not(.collapsed) {
+    color: #000000;
+    background-color: #ffffff;
+    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
+  }
+  .accordion-button:focus {
+    z-index: 3;
+    border-color: #ffffff;
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem transparent;
+  }
+</style>
+<div class="row" style="min-height: 500px">
+  <div class="container-fluid">
+    <div class="row mt-5">
+      <h2>ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ/ПАРТНЕРАМ</h2>
+      <div class="accordion accordion-flush" id="accordionFlushExample">
+        {% for item in faq %}
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="flush-headingOne">
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{item.id}}" aria-expanded="false" aria-controls="flush-collapse{{item.id}}">
+                <h5>{{ item.question }}</h5>
+              </button>
+            </h2>
+            <div id="flush-collapse{{item.id}}" class="accordion-collapse collapse" aria-labelledby="flush-heading{{item.id}}" data-bs-parent="#accordionFlushExample">
+              <div class="accordion-body" style="font-size: 18px">
+                {{ item.answer }}
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+    <div class="row">
+      <hr />
+      <h2>ЗАДАТЬ СВОЙ ВОПРОС</h2>
+    </div>
+    <form method="post" class="contacts-data">
+      {% csrf_token %}
+      <div class="row">
+        {% if form.captcha.errors %}
+        <div
+          class="alert alert-danger mt-3 w-100"
+          role="alert"
+        >
+        Неверный ответ на CAPTCHA
+        </div>
+        {% endif %}
+        <div class="input-group">
+          {{ form.name }} {{ form.email }} {{ form.message }}
+        </div>
+        <div class="input-group">
+          <span class="my-3">{{ form.captcha}} </span>
+
+          <button
+            class="proto-button send cursor-pointer"
+            id="btnsend"
+            type="submit"
+            
+          >
+            Отправить
+          </button>
+        </div>
+      </div>
+    </form>
+    <script>
+      //Скрипт для отображения капчи после заполнения всех полей
+      var captchaImage = document.getElementsByClassName("captcha")[0];
+      var captcha = document.getElementById("id_captcha_1");
+      captchaImage.style.height = "80px";
+      captchaImage.style.marginBottom = "20px";
+      captcha.className += " form-control";
+      captcha.placeholder = "Ответ на капчу";
+    </script>
+  </div>
+</div>
+{% endblock %}

templates/landing/pages/in_work.html

@@ -0,0 +1,18 @@
+{% extends 'landing/index.html' %}
+{% load static %} 
+{% block container %}
+
+<div class="row" style="min-height: 500px;">
+    
+    <div class="col-12 col-sm-6 col-md-5 col-lg-4 col-xxl-3">
+        {% include 'landing/menu.html' %}
+    </div>
+
+    <div class="col-12 col-sm-6 col-md-7 col-lg-8 col-xxl-9" style="overflow-wrap: break-word;">
+        {{ mainpage.content|safe }}
+
+        <h1 class="display-6 my-5">Страница в разработке!</h1>
+        
+    </div>
+</div>
+{% endblock %}

templates/landing/pages/main.html

@@ -0,0 +1,55 @@
+{% extends 'landing/index.html' %}
+{% load static %} 
+{% block container %}
+{% include 'landing/menu.html' %}
+
+<div class="aboutCompany">
+    <h1>О компании</h1>
+    <p>В данном разделе должны быть представлены основные сведения о компании, ее история, миссия, цели
+        и ценности. Также можно упомянуть основные достижения и проекты, в которых участвовала компания,
+        и описать ее преимущества и уникальные предложения. Важно, чтобы информация была представлена
+        ясно и лаконично, чтобы посетители сайта могли
+        быстро ознакомиться с основными аспектами деятельности компании.</p>
+        <p>
+        <iframe width="720" height="405" src="https://rutube.ru/play/embed/13dc8e0f0dab202617a6372b84a82bd1/" frameBorder="0" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
+        </p>
+    <h1>Еще заголовок</h1>
+    <figure class="sixteen-nine-img">
+        <img alt="image-place">
+    </figure>
+        
+
+    <h1>Наша команда</h1>
+    <p>В данном разделе представлены сведения о ключевых сотрудниках компании, их профессиональном опыте
+        и достижениях. Здесь можно рассказать о руководителях отделов, высококвалифицированных
+        специалистах и других сотрудниках, которые вносят значительный вклад в развитие компании. Важно,
+        чтобы информация была представлена в понятной форме и давала представление о том, какие кадры
+        работают в компании и как они способствуют ее успеху.</p>
+    <div class="employees flex-row content-between image-place">
+        <div>
+            <div class="employee_avatar">
+                <img class="icon-border" src="{% static 'landing/img/first-employee.png' %}" alt="first-employee">
+            </div>
+            <h2>Имя Фамилия</h2>
+            <p>Должность</p>
+        </div>
+        <div>
+            <div class="employee_avatar">
+                <img class="icon-border" src="{% static 'landing/img/second-employee.png' %}" alt="first-employee">
+            </div>
+            <h2>Имя Фамилия</h2>
+            <p>Должность</p>
+        </div>
+        <div>
+            <div class="employee_avatar">
+                <img class="icon-border" src="{% static 'landing/img/third-employee.png' %}" alt="first-employee">
+            </div>
+            <h2>Имя Фамилия</h2>
+            <p>Должность</p>
+        </div>
+    </div>
+    <p>Тут можно еще написать текст про компанию, это будет интересно потенциальным пользователям.</p>
+</div>
+</div>
+
+{% endblock %}

templates/landing/pages/order.html

@@ -0,0 +1,71 @@
+{% extends 'landing/index.html' %}
+{% load static %}
+{% block container %}
+
+<div class="row">
+    <div class="col-12 col-md-3"></div>
+    <div class="col-12 col-md-6 my-5" style=" min-height: 500px;">
+        <h2 class="w-100 text-center">ЗАКАЖИТЕ ОНЛАЙН</h2>
+        <h5 class="w-100 text-center">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias ab nemo nisi harum. Laboriosam pariatur facilis accusamus, suscipit assumenda odio.</h5>
+        <form method="post" style="font-family: Forum;" class="row g-2">
+            {% csrf_token %}
+           
+            <div class="col-md-6">
+                {{ form.name }}
+            </div>
+            <div class="col-md-6">
+                {{ form.surname }}
+            </div>
+            <div class="col-md-12">
+                <label for="exampleInputEmail1" class="form-label">Выберите услугу/услуги</label>
+                {{ form.service }}
+            </div>
+            <div class="col-md-6">
+                <label for="exampleInputEmail1" class="form-label">Желаемая дата оказания услуг</label>
+                {{ form.datetime }}
+            </div>
+            <div class="col-md-6">
+                <label for="exampleInputEmail1" class="form-label">Номер телефона</label>
+                {{ form.phone }}
+            </div>
+            <div class="col-md-6">
+                {{ form.comment }}
+            </div>
+            <div class="col-md-6">
+                {{ form.captcha}}
+            </div>
+            {% if form.errors %}
+            <div class="alert alert-danger mt-3 w-100"  role="alert">
+                <ul>
+                    {% if form.captcha.errors %}
+                        <li>Неверный ответ на CAPTCHA</li>
+                    {% endif %}
+                    {% if form.service.errors %}
+                        <li>Выберите хотя бы одну услугу</li>
+                    {% endif %}
+                    {% if form.phone.errors %}
+                        <li>Номер должен быть в формате: +79876543210</li>
+                    {% endif %}
+                </ul>
+                
+            </div>
+            {% endif %}
+            <div class="col-md-12">
+                <button class="btn btn-light mt-3 w-100" id="btnsend" type="submit" style="color: #060936;
+                margin: 0px;
+                box-shadow: 1px 1px 2px gray;">Отправить</button>
+            </div>
+        </form>
+    </div>
+    <div class="col-12 col-md-3"></div>
+    <script>
+        //Скрипт для отображения капчи после заполнения всех полей
+        var captchaImage = document.getElementsByClassName('captcha')[0]
+        var captcha = document.getElementById('id_captcha_1')
+        captchaImage.style.height = "80px";
+        captchaImage.style.marginBottom = "20px";
+        captcha.className += " form-control";
+        captcha.placeholder = "Ответ на капчу";
+    </script>
+</div>
+{% endblock %}

templates/landing/pages/price.html

@@ -0,0 +1,101 @@
+{% extends 'landing/index.html' %}
+{% load static %} 
+{% block container %}
+
+<h1>Уважаемые господа!</h1>
+<p>Здесь можно описать основные направления деятельности компании, перечень услуг, которые она оказывает, а
+    также примеры проектов, выполненных компанией в рамках этих услуг. Важно, чтобы информация была
+    представлена ясно и понятно, с подробным описанием услуг и их преимуществ для клиентов. Также можно
+    указать цены на услуги, если это применимо, или описать систему ценообразования компании.</p>
+    
+<div id="informationTable" class="information-table">
+    <h2>СТОИМОСТЬ УСЛУГ</h2>
+            <table class="table table-striped">
+                <thead>
+                  <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">Услуга</th>
+                    <th scope="col">Цена</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <th scope="row">1</th>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>Lorem, ipsum.</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">2</th>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>Lorem, ipsum.</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">3</th>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>Lorem, ipsum.</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">4</th>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>Lorem, ipsum.</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">5</th>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>Lorem, ipsum.</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">6</th>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>Lorem, ipsum.</td>
+                  </tr>
+                </tbody>
+              </table>
+              
+              <h2>&nbsp;</h2>
+              
+            <h2>ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ</h2>
+            <table class="table table-striped">
+                <thead>
+                  <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">Услуга</th>
+                    <th scope="col">Цена</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <th scope="row">1</th>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>Lorem, ipsum.</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">2</th>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>Lorem, ipsum.</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">3</th>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>Lorem, ipsum.</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">4</th>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>Lorem, ipsum.</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">5</th>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>Lorem, ipsum.</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">6</th>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>Lorem, ipsum.</td>
+                  </tr>
+                </tbody>
+              </table>
+            {% include 'landing/ser_btn.html' %}
+</div>
+{% endblock %}

templates/landing/pages/simple.html

@@ -0,0 +1,15 @@
+{% extends 'landing/index.html' %}
+{% load static %} 
+{% block container %}
+
+<div class="row" style="min-height: 500px;">
+    
+    <div class="col-12 col-sm-6 col-md-5 col-lg-4 col-xxl-3 order-1 order-md-0">
+        {% include 'landing/menu.html' %}
+    </div>
+
+    <div class="col-12 col-sm-6 col-md-7 col-lg-8 col-xxl-9 order-0 order-md-1" style="overflow-wrap: break-word;">
+        {{ mainpage.content|safe }}
+    </div>
+</div>
+{% endblock %}

templates/landing/ser_btn.html

@@ -0,0 +1,7 @@
+{% load static %} 
+<a href="{% url 'order' %}">
+    <div style="float: right; width: 120px; height: auto; transform: rotate(5deg); cursor: pointer;">
+        <span style="position:relative; right: -30px; top: 75px; color: white; font-size: 18px; font-family: Lobster; ">Заказать</span>
+        <img src="{% static 'landing/img/orderimg.png' %}"  alt="">
+    </div>
+</a>

tests.py

@@ -0,0 +1 @@
+# Create your tests here.

urls.py

@@ -0,0 +1,28 @@
+from django.urls import path
+
+from .views import *
+
+urlpatterns = [
+
+    # path('', include('django.contrib.flatpages.urls')),
+    path('', index_html, name='main'),
+    path('order/', order_html, name='order'),
+    path('faq/', faq_html, name='faq'),
+    path('price/', price_html, name='price'),
+    path('contact/', contact_html, name='contact'),
+    # pages
+    path('clean-car/', page_html, name='clean-car'),
+    path('clean-fit/', page_html, name='clean-fit'),
+    path('clean-office/', page_html, name='clean-office'),
+    path('clean-tcj/', page_html, name='clean-tcj'),
+    path('clean-area/', page_html, name='clean-area'),
+    path('clean-facades/', page_html, name='clean-facades'),
+    path('clean-apartments/', page_html, name='clean-apartments'),
+    path('clean-cottages/', page_html, name='clean-cottages'),
+    path('clean-out/', page_html, name='clean-out'),
+    path('clean-renovation/', page_html, name='clean-renovation'),
+
+    # path('services/<str:page>/', services_html, name="services"),
+    # path('', views.flatpage, {'url': ''}, name='about'),
+    # path('test/', views.flatpage, {'url': '/test/'}, name='test'),
+]

utils.py

@@ -0,0 +1,28 @@
+from landing.models import LandingPage
+
+
+def create_pages_clean():
+    if not LandingPage.objects.filter(slug='order'):
+        LandingPage.objects.create(title="Главная", slug="main", content="")
+        LandingPage.objects.create(title="Заказ онлайн", slug="order", content="")
+        LandingPage.objects.create(title="FAQ", slug="faq", content="")
+        LandingPage.objects.create(title="Цены", slug="price", content="")
+        LandingPage.objects.create(title="Контакты", slug="contact", content="")
+    if not LandingPage.objects.filter(slug__startswith="clean"):
+        LandingPage.objects.create(title="Уборка автосалонов", slug="clean-car", content="")
+        LandingPage.objects.create(title="Уборка фитнес клубов", slug="clean-fit", content="")
+        LandingPage.objects.create(title="Уборка офисов, ТЦ и БЦ", slug="clean-office", content="")
+        LandingPage.objects.create(title="Уборка ТСЖ", slug="clean-tcj", content="")
+        LandingPage.objects.create(title="Уборка прилегающей территории", slug="clean-area", content="")
+        LandingPage.objects.create(title="Мойка фасадов и остекления", slug="clean-facades", content="")
+        LandingPage.objects.create(title="Комплексная уборка квартир", slug="clean-apartments", content="")
+        LandingPage.objects.create(title="Комплексная уборка коттеджей", slug="clean-cottages", content="")
+        LandingPage.objects.create(title="Генеральная уборка", slug="clean-out", content="")
+        LandingPage.objects.create(title="Уборка после ремонта", slug="clean-renovation", content="")
+
+
+def create_pages_clean_admin(modeladmin, request, queryset):
+    create_pages_clean()
+
+
+create_pages_clean_admin.short_description = "Созадть страницы по умолчанию"

views.py

@@ -0,0 +1,139 @@
+# Create your views here.
+from django.core.mail import EmailMessage, get_connection
+from django.http import HttpResponseRedirect
+from django.shortcuts import render
+
+import core.settings as settings
+from landing.forms import *
+from .models import *
+
+
+def send_email_mess(body, sub):
+    with get_connection(
+            host=settings.EMAIL_HOST,
+            port=settings.EMAIL_PORT,
+            username=settings.EMAIL_HOST_USER,
+            password=settings.EMAIL_HOST_PASSWORD,
+            use_tls=settings.EMAIL_USE_TLS,
+            use_ssl=settings.EMAIL_USE_SSL
+    ) as connection:
+        # print(form.cleaned_data)
+        subject = sub
+        email_from = settings.EMAIL_HOST_USER
+        recipient_list = [settings.EMAIL_TO]
+        message = body
+        EmailMessage(subject, message, email_from, recipient_list, connection=connection).send()
+
+
+def index_html(request):
+    if request.POST:
+        form = MyForm(request.POST)
+        if form.is_valid():
+            body = f"""
+            Имя: {form.cleaned_data['name']}\n
+            Email: {form.cleaned_data['email']}\n
+            Комментарий: {form.cleaned_data['message']}
+            """
+            send_email_mess(body, "Пользователь оставил отзыв")
+    else:
+        form = MyForm()
+
+    menu = LandingPage.objects.filter(slug__startswith='clean')
+    context = {
+        # "mainpage":LandingPage.objects.get(slug="main"),
+        "menu": menu,
+        "form": form
+    }
+    return render(request, 'landing/pages/main.html', context=context)
+
+
+def page_html(request):
+    if request.POST:
+        form = MyForm(request.POST)
+        if form.is_valid():
+            print(form.cleaned_data)
+    else:
+        form = MyForm()
+    slug = (request.path[1:-1])
+    if not LandingPage.objects.filter(slug=slug):
+        menu = LandingPage.objects.filter(slug__startswith='clean')
+        print(menu)
+        if not LandingPage.objects.filter(slug__startswith='clean'):
+            menu = LandingPage.objects.filter(slug__startswith='clean')
+            context = {
+                "form": form
+            }
+        else:
+            context = {
+                "form": form,
+                "menu": menu
+            }
+        return render(request, 'landing/pages/in_work.html', context=context)
+    else:
+        menu = LandingPage.objects.filter(slug__startswith='clean')
+        print(menu)
+        context = {
+            "mainpage": LandingPage.objects.get(slug=slug),
+            "form": form,
+            "menu": menu
+        }
+        return render(request, 'landing/pages/simple.html', context=context)
+
+
+def send_email(request):
+    if request.method == 'POST':
+        print(request.POST['email'])
+
+    return HttpResponseRedirect('/')
+
+
+# simple page
+def contact_html(request):
+    return render(request, 'landing/pages/contact.html')
+
+
+def price_html(request):
+    return render(request, 'landing/pages/price.html')
+
+
+def order_html(request):
+    if request.POST:
+        form = OrderForm(request.POST)
+        if form.is_valid():
+            services = ""
+            for item in form.cleaned_data['service']:
+                services += f"{SERVICE_CHOICES[int(item)][1]}, "
+            body = f"""
+            Имя: {form.cleaned_data['name']}\n
+            Фамилия: {form.cleaned_data['surname']}\n
+            Номер телефона: {form.cleaned_data['phone']}\n
+            Выбранные услуги: {services}\n
+            Желаемое время оказания услуги: {form.cleaned_data['datetime']}\n
+            Комментарий: {form.cleaned_data['comment'] or "Комментарий отсутствует"}
+            """
+            send_email_mess(body, "ЗАКАЗ")
+    else:
+        form = OrderForm()
+    context = {
+        "form": form
+    }
+    return render(request, 'landing/pages/order.html', context)
+
+
+def faq_html(request):
+    if request.POST:
+        form = MyForm(request.POST)
+        if form.is_valid():
+            body = f"""
+            Имя: {form.cleaned_data['name']}\n
+            Email: {form.cleaned_data['email']}\n
+            Вопрос: {form.cleaned_data['message']}
+            """
+            send_email_mess(body, "Пользователь задал вопрос")
+    else:
+        form = MyForm()
+    context = {
+        "form": form,
+        "faq": FAQmodel.objects.all()
+    }
+    return render(request, 'landing/pages/faq.html', context)