Раздел "Услуги"
This commit is contained in:
Konstantin
@@ -359,6 +359,520 @@ section{
|
||||
fill: #000 !important;
|
||||
}
|
||||
|
||||
.service-category-page,
|
||||
.service-page {
|
||||
background: linear-gradient(180deg, #f8f6f5 0, #fff 460px);
|
||||
color: #14142b;
|
||||
}
|
||||
|
||||
.service-category-hero,
|
||||
.service-hero {
|
||||
padding: 34px 0 76px;
|
||||
}
|
||||
|
||||
.service-breadcrumb {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding: 0;
|
||||
margin: 0 0 38px;
|
||||
list-style: none;
|
||||
color: rgba(20, 20, 43, 0.58);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.service-breadcrumb span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.service-breadcrumb a:hover,
|
||||
.service-text-link:hover,
|
||||
.service-card__link:hover {
|
||||
color: var(--color-dark-gray);
|
||||
}
|
||||
|
||||
.service-eyebrow {
|
||||
margin-bottom: 12px;
|
||||
color: var(--color-dark-gray);
|
||||
font-size: 13px;
|
||||
line-height: 1.25;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.service-category-hero__grid,
|
||||
.service-hero__grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(230px, 360px);
|
||||
gap: 48px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.service-category-hero h1,
|
||||
.service-hero h1 {
|
||||
max-width: 870px;
|
||||
margin: 0;
|
||||
font-size: clamp(44px, 6.3vw, 88px);
|
||||
line-height: 1.02;
|
||||
}
|
||||
|
||||
.service-category-hero__description,
|
||||
.service-category-hero p,
|
||||
.service-hero__copy p {
|
||||
max-width: 700px;
|
||||
margin: 22px 0 0;
|
||||
color: rgba(20, 20, 43, 0.72);
|
||||
font-size: 18px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.service-category-hero__description p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.service-category-hero__aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 210px;
|
||||
padding: 28px;
|
||||
background: var(--color-secondary);
|
||||
color: #14142b;
|
||||
font-size: 16px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.service-category-hero__number {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 86px;
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.service-refine {
|
||||
padding: 0 0 34px;
|
||||
}
|
||||
|
||||
.service-refine__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.service-refine__item {
|
||||
padding: 10px 16px;
|
||||
border: 1px solid rgba(20, 20, 43, 0.18);
|
||||
transition: background-color 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.service-refine__item:hover {
|
||||
background: var(--color-secondary);
|
||||
border-color: var(--color-secondary);
|
||||
color: #14142b;
|
||||
}
|
||||
|
||||
.service-category-content,
|
||||
.service-content-section,
|
||||
.service-related-section {
|
||||
padding: 0 0 84px;
|
||||
}
|
||||
|
||||
.service-category-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
min-width: 0;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(20, 20, 43, 0.1);
|
||||
transition: box-shadow 0.25s, transform 0.25s;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
box-shadow: 0 20px 44px rgba(20, 20, 43, 0.08);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.service-card__image {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 305 / 409;
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
|
||||
.service-card__image img,
|
||||
.service-related-card__image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.35s;
|
||||
}
|
||||
|
||||
.service-card:hover .service-card__image img,
|
||||
.service-related-card:hover .service-related-card__image img {
|
||||
transform: scale(1.035);
|
||||
}
|
||||
|
||||
.service-card__number {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 12px;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 42px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.service-card__body {
|
||||
padding: 22px 20px 24px;
|
||||
}
|
||||
|
||||
.service-card h2,
|
||||
.service-related-card h3 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
line-height: 1.16;
|
||||
}
|
||||
|
||||
.service-card p,
|
||||
.service-related-card p {
|
||||
margin: 14px 0 17px;
|
||||
color: rgba(20, 20, 43, 0.68);
|
||||
font-size: 15px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.service-card__link,
|
||||
.service-text-link,
|
||||
.service-module-card__link {
|
||||
display: inline-flex;
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
color: #14142b;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.service-card__link span,
|
||||
.service-text-link span,
|
||||
.service-module-card__link span {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.service-card__link:hover span,
|
||||
.service-text-link:hover span,
|
||||
.service-module-card:hover .service-module-card__link span {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.service-category-pagination {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.service-category-cta {
|
||||
padding-bottom: 84px;
|
||||
}
|
||||
|
||||
.service-category-cta__inner {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 42px;
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
|
||||
.service-category-cta h2,
|
||||
.service-related-head h2,
|
||||
.service-sidebar h2 {
|
||||
margin: 0;
|
||||
font-size: 32px;
|
||||
line-height: 1.14;
|
||||
}
|
||||
|
||||
.service-category-cta p {
|
||||
max-width: 700px;
|
||||
margin: 12px 0 0;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.service-module-card {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: #14142b;
|
||||
transition: box-shadow 0.25s, transform 0.25s;
|
||||
}
|
||||
|
||||
.service-module-card:hover {
|
||||
color: #14142b;
|
||||
box-shadow: 0 16px 38px rgba(20, 20, 43, 0.12);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.service-module-card img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.service-module-card__link {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.service-hero__grid {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(280px, 410px);
|
||||
}
|
||||
|
||||
.service-hero__grid--single {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.service-hero__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 22px;
|
||||
align-items: center;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.service-hero__visual {
|
||||
max-height: 570px;
|
||||
overflow: hidden;
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
|
||||
.service-hero__visual img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.service-content-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(290px, 370px);
|
||||
gap: 56px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.service-content {
|
||||
min-width: 0;
|
||||
color: rgba(20, 20, 43, 0.78);
|
||||
font-size: 17px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.service-content .service-lead {
|
||||
margin-top: 0;
|
||||
color: #14142b;
|
||||
font-size: 23px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.service-content h2 {
|
||||
margin: 42px 0 15px;
|
||||
color: #14142b;
|
||||
font-size: 32px;
|
||||
line-height: 1.18;
|
||||
}
|
||||
|
||||
.service-content ol {
|
||||
padding-left: 23px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.service-content li {
|
||||
padding-left: 6px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.service-benefits {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin: 28px 0 0;
|
||||
}
|
||||
|
||||
.service-benefits__item {
|
||||
padding: 20px;
|
||||
background: #f8f6f5;
|
||||
border-top: 2px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.service-benefits__item strong,
|
||||
.service-benefits__item span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.service-benefits__item strong {
|
||||
margin-bottom: 10px;
|
||||
color: #14142b;
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.service-benefits__item span {
|
||||
color: rgba(20, 20, 43, 0.68);
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.service-sidebar {
|
||||
position: sticky;
|
||||
top: 96px;
|
||||
}
|
||||
|
||||
.service-sidebar__card {
|
||||
padding: 30px;
|
||||
background: #f8f6f5;
|
||||
border: 1px solid rgba(20, 20, 43, 0.1);
|
||||
}
|
||||
|
||||
.service-sidebar p {
|
||||
margin: 14px 0 24px;
|
||||
color: rgba(20, 20, 43, 0.7);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.service-sidebar .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.service-related-section {
|
||||
padding-top: 72px;
|
||||
border-top: 1px solid rgba(20, 20, 43, 0.1);
|
||||
}
|
||||
|
||||
.service-related-head {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.service-related-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.service-related-card {
|
||||
display: grid;
|
||||
grid-template-columns: 150px minmax(0, 1fr);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(20, 20, 43, 0.1);
|
||||
}
|
||||
|
||||
.service-related-card__image {
|
||||
min-height: 250px;
|
||||
overflow: hidden;
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
|
||||
.service-related-card__body {
|
||||
padding: 19px;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.service-category-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.service-content-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
.service-sidebar {
|
||||
position: static;
|
||||
}
|
||||
.service-related-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.service-category-hero,
|
||||
.service-hero {
|
||||
padding: 24px 0 50px;
|
||||
}
|
||||
.service-breadcrumb {
|
||||
margin-bottom: 28px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.service-category-hero__grid,
|
||||
.service-hero__grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 26px;
|
||||
}
|
||||
.service-category-hero h1,
|
||||
.service-hero h1 {
|
||||
font-size: 46px;
|
||||
}
|
||||
.service-category-hero__aside {
|
||||
min-height: 0;
|
||||
padding: 22px;
|
||||
}
|
||||
.service-category-hero__number {
|
||||
font-size: 68px;
|
||||
}
|
||||
.service-category-content,
|
||||
.service-content-section,
|
||||
.service-related-section {
|
||||
padding-bottom: 58px;
|
||||
}
|
||||
.service-category-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.service-category-cta {
|
||||
padding-bottom: 58px;
|
||||
}
|
||||
.service-category-cta__inner {
|
||||
display: block;
|
||||
padding: 27px 22px;
|
||||
}
|
||||
.service-category-cta .btn {
|
||||
width: 100%;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.service-hero__visual {
|
||||
max-height: 400px;
|
||||
}
|
||||
.service-content {
|
||||
font-size: 16px;
|
||||
}
|
||||
.service-content .service-lead {
|
||||
font-size: 20px;
|
||||
}
|
||||
.service-content h2 {
|
||||
margin-top: 34px;
|
||||
font-size: 27px;
|
||||
}
|
||||
.service-benefits {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.service-related-section {
|
||||
padding-top: 52px;
|
||||
}
|
||||
.service-related-card {
|
||||
grid-template-columns: 110px minmax(0, 1fr);
|
||||
}
|
||||
.service-related-card__image {
|
||||
min-height: 220px;
|
||||
}
|
||||
.service-related-card__body {
|
||||
padding: 15px;
|
||||
}
|
||||
.service-related-card h3 {
|
||||
font-size: 19px;
|
||||
}
|
||||
.service-related-card p {
|
||||
display: none;
|
||||
}
|
||||
.service-related-card .service-card__link {
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.not-found-page {
|
||||
min-height: 60vh;
|
||||
display: flex;
|
||||
|
||||
@@ -61,6 +61,7 @@
|
||||
<ul class="menu left-menu">
|
||||
{{ menu }}
|
||||
{{ blog_menu }}
|
||||
{{ service_menu }}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="d-lg-none">
|
||||
@@ -76,7 +77,7 @@
|
||||
</div>
|
||||
<div class="col-auto"><a class="logo" href="{{ home }}">{{ name|upper }}</a></div>
|
||||
<div class="col d-flex justify-content-end">
|
||||
|
||||
|
||||
<ul class="menu">
|
||||
<li><a href="tel:{{ config_telephone }}"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.1708 16.415C13.6356 16.415 14.5982 16.0216 15.4436 15.0673C15.5106 15.0003 15.5776 14.925 15.6361 14.8581C16.1384 14.2972 16.3728 13.7448 16.3728 13.2174C16.3728 12.6148 16.0212 12.0539 15.2762 11.5349L12.8404 9.84406C12.0954 9.32514 11.2081 9.26656 10.505 9.96128L9.8605 10.6058C9.668 10.7983 9.50057 10.8067 9.31643 10.6895C8.86443 10.4049 7.952 9.60971 7.33257 8.99028C6.67969 8.34578 6.0519 7.62592 5.71708 7.09856C5.60826 6.90604 5.61663 6.747 5.80915 6.55448L6.44531 5.90995C7.14843 5.20682 7.08984 4.31955 6.57087 3.57457L4.88002 1.13874C4.36105 0.393764 3.80022 0.0505719 3.19754 0.0422014C2.6702 0.0338308 2.11774 0.276577 1.55692 0.778806C1.48159 0.84577 1.41462 0.904363 1.34766 0.962963C0.393415 1.81676 0 2.77936 0 4.22747C0 6.62144 1.47321 9.53442 4.1769 12.2381C6.86384 14.925 9.78514 16.415 12.1708 16.415ZM12.1791 15.1259C10.0446 15.1678 7.3075 13.5271 5.13951 11.3676C2.9548 9.19121 1.23884 6.36196 1.28069 4.22747C1.29744 3.30671 1.62389 2.51151 2.27679 1.94231C2.33538 1.89209 2.37723 1.85023 2.43583 1.80838C2.68694 1.59075 2.9548 1.47356 3.19754 1.47356C3.44029 1.47356 3.65792 1.56564 3.81696 1.81676L5.44085 4.25258C5.61663 4.51207 5.63337 4.80503 5.37389 5.06452L4.63728 5.80113C4.05971 6.3787 4.10156 7.08182 4.52009 7.64263C4.99721 8.28721 5.82589 9.22471 6.47042 9.86085C7.10659 10.5053 8.11943 11.4094 8.77229 11.8948C9.33314 12.3134 10.0363 12.3553 10.6139 11.7777L11.3504 11.0411C11.6099 10.7816 11.8945 10.7983 12.1624 10.9658L14.5982 12.5896C14.8409 12.7571 14.9414 12.9663 14.9414 13.2174C14.9414 13.4602 14.8242 13.7281 14.6066 13.9791C14.5564 14.0377 14.5229 14.0796 14.4726 14.1382C13.9034 14.7911 13.1083 15.1091 12.1791 15.1259Z" fill="black" fill-opacity="0.85"/>
|
||||
@@ -98,10 +99,10 @@
|
||||
</svg>
|
||||
<span class="d-none d-lg-inline-block ms-2 text-wishlist">{{ text_wishlist }}</span></a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
@@ -7,20 +7,21 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="row g-2 justify-content-center">
|
||||
{% for banner in banners %}
|
||||
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="item text-center bg-dominik h-100">
|
||||
<img src="{{ banner.image }}" loading="lazy">
|
||||
<div class="banner-text mt-3 mb-3 px-4">
|
||||
<div class="subheading mb-3">{{ banner.title }}</div>
|
||||
<p class="mb-0">{{ banner.text|nl2br }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% for banner in banners %}
|
||||
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<a href="{{ banner.link }}" class="item service-module-card text-center bg-dominik h-100">
|
||||
<img src="{{ banner.image }}" loading="lazy">
|
||||
<div class="banner-text mt-3 mb-3 px-4">
|
||||
<div class="subheading mb-3">{{ banner.title }}</div>
|
||||
<p class="mb-0">{{ banner.text|nl2br }}</p>
|
||||
<span class="service-module-card__link">{{ banner.button ?: 'Подробнее' }} <span>→</span></span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
@@ -1,56 +1,85 @@
|
||||
{{ header }}
|
||||
{{ content_top }}
|
||||
<section class="section py-5">
|
||||
<div class="container-fluid">
|
||||
<ul class="breadcrumb">
|
||||
{% for key,breadcrumb in breadcrumbs %}
|
||||
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if key + 1 < breadcrumbs|length %}<span class="mx-2">•</span>{% endif %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<h1>{{ heading_title }}</h1>
|
||||
<div class="content">
|
||||
{% if thumb or description %}
|
||||
<div class="row">
|
||||
{% if thumb %}
|
||||
<div class="col-sm-2"><img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="img-thumbnail" /></div>
|
||||
{% endif %}
|
||||
{% if description %}
|
||||
<div class="col-sm-10">{{ description }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<hr>
|
||||
{% endif %}
|
||||
{% if categories %}
|
||||
<h3>{{ text_refine }}</h3>
|
||||
<ul>
|
||||
{% for category in categories %}
|
||||
<li><a href="{{ category.href }}">{{ category.name }}</a></li>
|
||||
<main class="service-category-page">
|
||||
<section class="service-category-hero">
|
||||
<div class="container-fluid">
|
||||
<ul class="service-breadcrumb">
|
||||
{% for key,breadcrumb in breadcrumbs %}
|
||||
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if key + 1 < breadcrumbs|length %}<span>•</span>{% endif %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% if services %}
|
||||
<div class="row g-3">
|
||||
{% for service in services %}
|
||||
<div class="col-md-4 col-lg-3 col-sm-6">
|
||||
<div class="product-thumb">
|
||||
{% if service.thumb %}
|
||||
<div class="image"><a href="{{ service.href }}"><img src="{{ service.thumb }}" alt="{{ service.name }}" title="{{ service.name }}" class="img-responsive" /></a></div>
|
||||
{% endif %}
|
||||
<div class="caption">
|
||||
<h4><a href="{{ service.href }}">{{ service.name }}</a></h4>
|
||||
<p class="description">{{ service.description }}</p>
|
||||
</div>
|
||||
<div><a href="{{ service.href }}" class="btn btn-dark">{{ button_more }}</a></div>
|
||||
</div>
|
||||
<div class="service-category-hero__grid">
|
||||
<div>
|
||||
<div class="service-eyebrow">Забота о вашем образе</div>
|
||||
<h1>{{ heading_title }}</h1>
|
||||
{% if description %}
|
||||
<div class="service-category-hero__description">{{ description }}</div>
|
||||
{% else %}
|
||||
<p>Поможем продумать важные детали свадебного образа и подготовиться к вашему особенному дню.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="service-category-hero__aside">
|
||||
<span class="service-category-hero__number">{{ service_total }}</span>
|
||||
<span>направления, чтобы платье стало именно вашим</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% if categories %}
|
||||
<section class="service-refine">
|
||||
<div class="container-fluid">
|
||||
<div class="service-eyebrow">{{ text_refine }}</div>
|
||||
<div class="service-refine__list">
|
||||
{% for category in categories %}
|
||||
<a href="{{ category.href }}" class="service-refine__item">{{ category.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% elseif not categories %}
|
||||
<p>{{ text_empty }}</p>
|
||||
{% endif %}
|
||||
{{ pagination }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<section class="service-category-content">
|
||||
<div class="container-fluid">
|
||||
{% if services %}
|
||||
<div class="service-category-grid">
|
||||
{% for service in services %}
|
||||
<article class="service-card">
|
||||
<a href="{{ service.href }}" class="service-card__image">
|
||||
{% if service.thumb %}
|
||||
<img src="{{ service.thumb }}" alt="{{ service.name }}" title="{{ service.name }}" loading="lazy" />
|
||||
{% endif %}
|
||||
<span class="service-card__number">0{{ loop.index }}</span>
|
||||
</a>
|
||||
<div class="service-card__body">
|
||||
<h2><a href="{{ service.href }}">{{ service.name }}</a></h2>
|
||||
<p>{{ service.description }}</p>
|
||||
<a href="{{ service.href }}" class="service-card__link">{{ button_more }} <span>→</span></a>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="service-category-pagination">{{ pagination }}</div>
|
||||
{% elseif not categories %}
|
||||
<div class="service-category-empty">
|
||||
<h2>{{ text_empty }}</h2>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="service-category-cta">
|
||||
<div class="container-fluid">
|
||||
<div class="service-category-cta__inner">
|
||||
<div>
|
||||
<div class="service-eyebrow">Начнем с примерки</div>
|
||||
<h2>Расскажите, какой образ вы представляете</h2>
|
||||
<p>Консультант ответит на вопросы и поможет подобрать удобное время для визита в салон.</p>
|
||||
</div>
|
||||
<a href="#" onclick="SendRequest(0);return false;" class="btn btn-dark">{{ button_request }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{ content_bottom }}
|
||||
{{ footer }}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
{% for category in categories %}
|
||||
<li><a href="{{ category.href }}">{{ category.name }}</a></li>
|
||||
{% endfor %}
|
||||
@@ -1,52 +1,88 @@
|
||||
{{ header }}
|
||||
{{ content_top }}
|
||||
<section class="section py-5">
|
||||
<div class="container-fluid">
|
||||
<ul class="breadcrumb">
|
||||
{% for key,breadcrumb in breadcrumbs %}
|
||||
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if key + 1 < breadcrumbs|length %}<span class="mx-2">•</span>{% endif %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<h1>{{ heading_title }}</h1>
|
||||
<div class="content">{{ description }}</div>
|
||||
|
||||
{% if products %}
|
||||
<hr>
|
||||
<h3 class="mb-4">{{ text_related_product }}</h3>
|
||||
<div class="row g-3 product-items">
|
||||
{% for product in products %}
|
||||
<div class="col-6 col-lg-4">
|
||||
{% include 'dominik/template/common/product.twig' %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if services %}
|
||||
<hr>
|
||||
<h3 class="mb-4">{{ text_related }}</h3>
|
||||
<div class="row g-3">
|
||||
{% for service in services %}
|
||||
<div class="col-6 col-lg-4">
|
||||
<div class="product-thumb">
|
||||
<div class="image"><a href="{{ service.href }}"><img src="{{ service.thumb }}" alt="{{ service.name }}" title="{{ service.name }}" class="img-responsive" /></a></div>
|
||||
<div class="caption">
|
||||
<h4><a href="{{ service.href }}">{{ service.name }}</a></h4>
|
||||
<p>{{ service.description }}</p>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<button type="button" onclick="location.href = ('{{ service.href }}');"><i class="fa fa-share"></i></button>
|
||||
<button type="button" data-toggle="tooltip" title="{{ service.date_added }}"><i class="fa fa-clock-o"></i></button>
|
||||
<button type="button" data-toggle="tooltip" title="{{ text_views }} {{ service.viewed }}"><i class="fa fa-eye"></i></button>
|
||||
</div>
|
||||
<main class="service-page">
|
||||
<section class="service-hero">
|
||||
<div class="container-fluid">
|
||||
<ul class="service-breadcrumb">
|
||||
{% for key,breadcrumb in breadcrumbs %}
|
||||
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if key + 1 < breadcrumbs|length %}<span>•</span>{% endif %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="service-hero__grid{% if not thumb %} service-hero__grid--single{% endif %}">
|
||||
<div class="service-hero__copy">
|
||||
<div class="service-eyebrow">Услуги свадебного салона</div>
|
||||
<h1>{{ heading_title }}</h1>
|
||||
{% if summary %}<p>{{ summary }}</p>{% endif %}
|
||||
<div class="service-hero__actions">
|
||||
<a href="#" onclick="SendRequest(0);return false;" class="btn btn-dark">{{ button_request }}</a>
|
||||
<a href="{{ category_href }}" class="service-text-link">{{ button_all_services }} <span>→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
{% if thumb %}
|
||||
<div class="service-hero__visual">
|
||||
<img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="service-content-section">
|
||||
<div class="container-fluid">
|
||||
<div class="service-content-layout">
|
||||
<article class="service-content">{{ description }}</article>
|
||||
<aside class="service-sidebar">
|
||||
<div class="service-sidebar__card">
|
||||
<div class="service-eyebrow">Персональная консультация</div>
|
||||
<h2>Обсудим ваш образ</h2>
|
||||
<p>Ответим на вопросы, расскажем о деталях услуги и запишем вас на примерку.</p>
|
||||
<a href="#" onclick="SendRequest(0);return false;" class="btn btn-dark">{{ button_request }}</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% if products %}
|
||||
<section class="service-related-section">
|
||||
<div class="container-fluid">
|
||||
<div class="service-related-head">
|
||||
<div class="service-eyebrow">Дополните образ</div>
|
||||
<h2>{{ text_related_product }}</h2>
|
||||
</div>
|
||||
<div class="row g-3 product-items">
|
||||
{% for product in products %}
|
||||
<div class="col-6 col-lg-4">{% include 'dominik/template/common/product.twig' %}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% if services %}
|
||||
<section class="service-related-section">
|
||||
<div class="container-fluid">
|
||||
<div class="service-related-head">
|
||||
<div class="service-eyebrow">Вам также может подойти</div>
|
||||
<h2>{{ text_related }}</h2>
|
||||
</div>
|
||||
<div class="service-related-grid">
|
||||
{% for service in services %}
|
||||
<article class="service-related-card">
|
||||
<a href="{{ service.href }}" class="service-related-card__image">
|
||||
{% if service.thumb %}<img src="{{ service.thumb }}" alt="{{ service.name }}" title="{{ service.name }}" loading="lazy" />{% endif %}
|
||||
</a>
|
||||
<div class="service-related-card__body">
|
||||
<h3><a href="{{ service.href }}">{{ service.name }}</a></h3>
|
||||
<p>{{ service.description }}</p>
|
||||
<a href="{{ service.href }}" class="service-card__link">{{ button_more }} <span>→</span></a>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
</main>
|
||||
{{ content_bottom }}
|
||||
{{ footer }}
|
||||
|
||||
Reference in New Issue
Block a user