Создана страницы faq
This commit is contained in:
Web-serfer
parent
ed01ec28ed
commit
12d6c87f39
20 changed files with 89 additions and 158 deletions
|
|
@ -57,6 +57,7 @@ const categories = ['Все', ...new Set(posts.map((post: any) => post.data.cate
|
|||
text: "ПОЛЕЗНЫХ СТАТЕЙ"
|
||||
}}
|
||||
bgImage="/images/blog/blogBg.avif"
|
||||
icon="edit"
|
||||
/>
|
||||
|
||||
<BlogCategories categories={categories} activeCategory="Все" currentPage={currentPage} />
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ import CasesList from "@components/cases/CasesList.astro";
|
|||
text: "ВЫИГРАННЫХ ДЕЛ"
|
||||
}}
|
||||
bgImage="/images/cases/casesBg.avif"
|
||||
icon="briefcase"
|
||||
/>
|
||||
<CasesList />
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ const isAuthorized = false; // Измените на true, чтобы увиде
|
|||
text: "МИНУТ НА СВЯЗИ"
|
||||
}}
|
||||
bgImage="/images/contacts/conBg.avif"
|
||||
icon="phone"
|
||||
/>
|
||||
|
||||
<!-- Карточки контактов -->
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import { SITE_URL } from '@constants';
|
||||
import PageHero from '@components/base/PageHero.astro';
|
||||
import DocCard from '@components/documents/DocCard.astro';
|
||||
import DocCategories from '@components/documents/DocCategories.astro';
|
||||
import Pagination from '@components/base/Pagination.astro';
|
||||
|
|
@ -34,25 +35,17 @@ const categories = getCategories();
|
|||
{ label: 'Документы' }
|
||||
]}
|
||||
>
|
||||
<PageHero
|
||||
badgeText="ДОКУМЕНТЫ"
|
||||
titleWhite="Документы для"
|
||||
titleGold="скачивания"
|
||||
description="Здесь вы можете скачать все необходимые документы, договоры, памятки и шаблоны в удобном формате"
|
||||
bgImage=""
|
||||
icon="file"
|
||||
/>
|
||||
|
||||
<section class="documents-section">
|
||||
<div class="site-container">
|
||||
<!-- Заголовок секции -->
|
||||
<div class="section-header">
|
||||
<div class="subtitle-wrapper animate-on-scroll" data-animation="fade-up">
|
||||
<div class="subtitle-line"></div>
|
||||
<span class="subtitle">ДОКУМЕНТЫ</span>
|
||||
<div class="subtitle-line"></div>
|
||||
</div>
|
||||
<div class="title-wrapper animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||||
<h1 class="title">
|
||||
Документы для скачивания
|
||||
</h1>
|
||||
</div>
|
||||
<p class="section-description animate-on-scroll" data-animation="fade-up" data-delay="150">
|
||||
Здесь вы можете скачать все необходимые документы, договоры, памятки и шаблоны в удобном формате
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Фильтры по категориям -->
|
||||
<DocCategories categories={categories} activeCategory={activeCategory} />
|
||||
|
||||
|
|
@ -99,12 +92,11 @@ const categories = getCategories();
|
|||
}
|
||||
|
||||
.documents-section {
|
||||
padding: 6rem 1.5rem 4rem;
|
||||
padding: 2rem 1.5rem 4rem;
|
||||
background: var(--gradient-docs-bg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.documents-section::before {
|
||||
|
|
@ -125,64 +117,6 @@ const categories = getCategories();
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Заголовок секции */
|
||||
.section-header {
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subtitle-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.subtitle-line {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--color-accent-docs), transparent);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--color-accent-docs);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--color-light-docs);
|
||||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
color: var(--color-gray-docs);
|
||||
font-size: 1.1rem;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Сетка документов */
|
||||
.documents-grid {
|
||||
display: grid;
|
||||
|
|
@ -191,23 +125,6 @@ const categories = getCategories();
|
|||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
/* Анимации при скроллинге */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
[data-animation="fade-up"] {
|
||||
transform: translateY(40px);
|
||||
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.animate-on-scroll.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Пагинация */
|
||||
:global(.pagination) {
|
||||
padding: 2rem 0 4rem;
|
||||
|
|
@ -222,60 +139,16 @@ const categories = getCategories();
|
|||
|
||||
@media (max-width: 768px) {
|
||||
.documents-section {
|
||||
padding: 4rem 1rem 3rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 2rem 1rem 3rem;
|
||||
}
|
||||
|
||||
.documents-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-on-scroll {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const setupAnimations = () => {
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const el = entry.target as HTMLElement;
|
||||
const delay = parseInt(el.dataset.delay || '0');
|
||||
|
||||
setTimeout(() => {
|
||||
el.classList.add('is-visible');
|
||||
}, delay);
|
||||
|
||||
observer.unobserve(el);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
};
|
||||
|
||||
const setupFilter = () => {
|
||||
const buttons = document.querySelectorAll('.category-btn');
|
||||
const cards = document.querySelectorAll('.doc-card');
|
||||
|
|
@ -300,11 +173,9 @@ const categories = getCategories();
|
|||
});
|
||||
};
|
||||
|
||||
setupAnimations();
|
||||
setupFilter();
|
||||
|
||||
document.addEventListener('astro:after-swap', () => {
|
||||
setupAnimations();
|
||||
setupFilter();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import { SITE_URL } from '@constants';
|
||||
import PageHero from '@components/base/PageHero.astro';
|
||||
import Faq from '@components/faq/FaqItem.astro';
|
||||
import Pagination from '@components/base/Pagination.astro';
|
||||
|
||||
|
|
@ -102,11 +103,26 @@ const currentFaqItems = allFaqItems.slice(startIndex, endIndex);
|
|||
{ label: 'Частые вопросы' }
|
||||
]}
|
||||
>
|
||||
<PageHero
|
||||
badgeText="ОТВЕТЫ НА ВОПРОСЫ"
|
||||
titleWhite="Часто задаваемые"
|
||||
titleGold="вопросы"
|
||||
description="Собрали ответы на самые частые вопросы наших клиентов. Не нашли ответ? Позвоните — проконсультируем бесплатно"
|
||||
layout="with-image"
|
||||
sideImage="/images/faq/faqImg.avif"
|
||||
sideImageAlt="Автоюрист Сургут"
|
||||
experienceBadge={{
|
||||
number: "98%",
|
||||
text: "УСПЕШНЫХ ДЕЛ"
|
||||
}}
|
||||
bgImage="/images/faq/faqBg.avif"
|
||||
icon="question"
|
||||
/>
|
||||
|
||||
<section class="faq-page-section">
|
||||
<Faq
|
||||
sectionSubtitle="ОТВЕТЫ НА ВОПРОСЫ"
|
||||
sectionTitle="Часто задаваемые вопросы"
|
||||
faqItems={currentFaqItems}
|
||||
showTitle={false}
|
||||
/>
|
||||
|
||||
{totalPages > 1 && (
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ const paginatedReviews = reviewsData.slice(startIndex, endIndex);
|
|||
text: "ДОВОЛЬНЫХ КЛИЕНТОВ"
|
||||
}}
|
||||
bgImage="/images/reviews/revBg.avif"
|
||||
icon="chat"
|
||||
/>
|
||||
|
||||
<section class="reviews-page">
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ import ServiceCategories from "@components/services/ServiceCategories.astro";
|
|||
text: "НАПРАВЛЕНИЙ ПРАКТИКИ"
|
||||
}}
|
||||
bgImage="/images/services/servicesBg.avif"
|
||||
icon="shield"
|
||||
/>
|
||||
<ServiceCategories />
|
||||
<Pagination
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue