Создана страницы faq
This commit is contained in:
parent
ed01ec28ed
commit
12d6c87f39
20 changed files with 89 additions and 158 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue