Создана страницы faq

This commit is contained in:
Web-serfer 2026-04-11 21:38:18 +05:00
parent ed01ec28ed
commit 12d6c87f39
20 changed files with 89 additions and 158 deletions

View file

@ -1,5 +1,6 @@
---
import Button from '@components/base/Button.astro';
import { Icon } from 'astro-icon/components';
interface PageHeroProps {
badgeText: string;
@ -17,6 +18,7 @@ interface PageHeroProps {
number: string;
text: string;
};
icon?: string; // Название иконки из /src/icons/
}
const {
@ -31,7 +33,8 @@ const {
layout = "default",
sideImage = "",
sideImageAlt = "",
experienceBadge
experienceBadge,
icon
} = Astro.props as PageHeroProps;
const showImage = layout === 'with-image' && sideImage;
@ -43,7 +46,13 @@ const showImage = layout === 'with-image' && sideImage;
<div class="site-container hero-grid">
<div class="hero-content">
<div class="badge animate-load" data-delay="100">
<span class="status-dot"></span>
{icon ? (
<span class="badge-icon">
<Icon name={icon} />
</span>
) : (
<span class="status-dot"></span>
)}
{badgeText}
</div>
@ -207,7 +216,12 @@ const showImage = layout === 'with-image' && sideImage;
margin-bottom: 2.5rem;
}
/* Мерцающая точка */
.badge svg {
color: #eac26e;
flex-shrink: 0;
}
/* Мерцающая точка (только на главной) */
.status-dot {
width: 10px;
height: 10px;
@ -218,6 +232,19 @@ const showImage = layout === 'with-image' && sideImage;
flex-shrink: 0;
}
.badge-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.badge-icon svg {
width: 20px !important;
height: 20px !important;
stroke-width: 2 !important;
}
@keyframes pulse {
0% {
transform: scale(0.95);

View file

@ -7,6 +7,7 @@ interface FaqItem {
const {
sectionSubtitle = "ОТВЕТЫ НА ВОПРОСЫ",
sectionTitle = "Часто задаваемые вопросы",
showTitle = true,
faqItems = [
{
question: "Сколько стоит первичная консультация?",
@ -38,18 +39,20 @@ const {
<section class="faq-section" id="faq">
<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">{sectionSubtitle}</span>
<div class="subtitle-line"></div>
{showTitle && (
<!-- Заголовок секции -->
<div class="section-header">
<div class="subtitle-wrapper animate-on-scroll" data-animation="fade-up">
<div class="subtitle-line"></div>
<span class="subtitle">{sectionSubtitle}</span>
<div class="subtitle-line"></div>
</div>
<h2 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">{sectionTitle}</h2>
<p class="section-description animate-on-scroll" data-animation="fade-up" data-delay="150">
Собрали ответы на самые частые вопросы наших клиентов. Не нашли ответ? Позвоните — проконсультируем бесплатно
</p>
</div>
<h2 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">{sectionTitle}</h2>
<p class="section-description animate-on-scroll" data-animation="fade-up" data-delay="150">
Собрали ответы на самые частые вопросы наших клиентов. Не нашли ответ? Позвоните — проконсультируем бесплатно
</p>
</div>
)}
<!-- Аккордеон FAQ -->
<div class="faq-container">