redi/astro_avtourist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Новые изменения

Browse source
This commit is contained in:
Web-serfer 2026-04-08 21:11:36 +05:00
parent 32bcc76021
commit c39b0c0821
9 changed files with 512 additions and 362 deletions
Download patch file Download diff file Expand all files Collapse all files

209
frontend/src/components/base/CTA.astro Normal file
View file

@ -0,0 +1,209 @@
---
import Button from '@components/base/Button.astro';
interface CTAProps {
icon?: 'chat' | 'consult' | 'help' | 'phone';
title: string;
description: string;
btnText?: string;
btnHref?: string;
variant?: 'default' | 'consultation';
}
const {
icon = 'chat',
title,
description,
btnText,
btnHref = "#contact",
variant = 'default'
} = Astro.props as CTAProps;
const iconPaths: Record<string, string> = {
chat: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
consult: '<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>',
help: '<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>',
phone: '<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>'
};
---
<section class="cta-section">
<div class="cta-section__overlay"></div>
<div class="site-container">
<div class="cta-section__inner animate-on-scroll" data-animation="fade-up">
<div class="cta-section__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" set:html={iconPaths[icon] || iconPaths.chat}></svg>
</div>
<h3 class="cta-section__title">{title}</h3>
<p class="cta-section__desc">{description}</p>
{btnText && (
<Button variant="gold" size="lg" href={btnHref} class="cta-section__btn">
{btnText}
</Button>
)}
</div>
</div>
</section>
<style>
.cta-section {
padding: 0;
position: relative;
overflow: visible;
margin-bottom: 3rem;
}
.site-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.cta-section__inner {
padding: 3.5rem 2.5rem;
background: linear-gradient(135deg, #0a2540 0%, #1e3050 100%);
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
text-align: center;
}
.cta-section__overlay {
position: absolute;
top: -50%;
right: -20%;
width: 60%;
height: 150%;
background: radial-gradient(circle, rgba(234, 194, 110, 0.15) 0%, transparent 70%);
pointer-events: none;
}
.cta-section__icon {
width: 64px;
height: 64px;
margin: 0 auto 1.5rem;
background: rgba(234, 194, 110, 0.15);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #eac26e;
}
.cta-section__icon svg {
width: 32px;
height: 32px;
}
.cta-section__title {
font-size: clamp(1.5rem, 3vw, 1.75rem);
font-weight: 700;
color: #ffffff;
margin: 0 0 0.75rem 0;
position: relative;
z-index: 1;
}
.cta-section__desc {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.75);
margin: 0 0 2rem 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
line-height: 1.6;
}
.cta-section__btn {
position: relative;
z-index: 1;
}
/* Анимации */
.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);
}
@media (max-width: 768px) {
.cta-section {
margin-bottom: 2rem;
}
.cta-section__inner {
padding: 2.5rem 1.5rem;
}
.cta-section__title {
font-size: 1.5rem;
}
.cta-section__desc {
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.cta-section {
margin-bottom: 1.5rem;
}
.cta-section__inner {
padding: 2rem 1.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
.animate-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
}
</style>
<script>
const setupAnimations = () => {
const observerOptions = {
root: null,
rootMargin: '0px 0px -50px 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);
});
};
setupAnimations();
document.addEventListener('astro:after-swap', setupAnimations);
</script>

178
frontend/src/components/base/Pagination.astro Normal file
View file

@ -0,0 +1,178 @@
---
export interface PaginationProps {
currentPage: number;
totalPages: number;
baseUrl: string;
showPrevNext?: boolean;
}
const {
currentPage,
totalPages,
baseUrl,
showPrevNext = true
} = Astro.props as PaginationProps;
const getPageUrl = (page: number) => {
if (page === 1) return baseUrl;
return `${baseUrl}/page/${page}`;
};
const getPages = () => {
const pages: (number | string)[] = [];
for (let i = 1; i <= totalPages; i++) {
if (i === 1 || i === totalPages || (i >= currentPage - 1 && i <= currentPage + 1)) {
pages.push(i);
} else if (pages[pages.length - 1] !== '...') {
pages.push('...');
}
}
return pages;
};
---
<nav class="pagination">
<div class="pagination__wrapper">
{showPrevNext && (
<!-- Кнопка Назад -->
<a
href={currentPage > 1 ? getPageUrl(currentPage - 1) : '#'}
class={`pagination__btn pagination__btn--prev ${currentPage === 1 ? 'disabled' : ''}`}
aria-disabled={currentPage === 1}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m15 18-6-6 6-6"/>
</svg>
</a>
)}
<!-- Номера страниц -->
<div class="pagination__pages">
{getPages().map((page) => (
page === '...' ? (
<span class="pagination__ellipsis">…</span>
) : (
<a
href={getPageUrl(page as number)}
class={`pagination__page ${page === currentPage ? 'active' : ''}`}
aria-current={page === currentPage ? 'page' : undefined}
>
{page}
</a>
)
))}
</div>
{showPrevNext && (
<!-- Кнопка Вперед -->
<a
href={currentPage < totalPages ? getPageUrl(currentPage + 1) : '#'}
class={`pagination__btn pagination__btn--next ${currentPage === totalPages ? 'disabled' : ''}`}
aria-disabled={currentPage === totalPages}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m9 18 6-6-6-6"/>
</svg>
</a>
)}
</div>
</nav>
<style>
.pagination {
padding: 3rem 0;
display: flex;
justify-content: center;
}
.pagination__wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
}
.pagination__btn {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 0.75rem;
border: 2px solid #e2e8f0;
background: #ffffff;
color: #64748b;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
}
.pagination__btn:not(.disabled):hover {
border-color: #d4af37;
color: #d4af37;
transform: translateY(-2px);
}
.pagination__btn.disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.pagination__btn svg {
width: 1.25rem;
height: 1.25rem;
}
.pagination__pages {
display: flex;
align-items: center;
gap: 0.375rem;
}
.pagination__page {
display: flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
height: 2.75rem;
border-radius: 0.75rem;
border: 2px solid transparent;
background: #ffffff;
color: #64748b;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pagination__page:hover {
border-color: #d4af37;
color: #d4af37;
}
.pagination__page.active {
background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%);
border-color: #d4af37;
color: #1e293b;
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}
.pagination__ellipsis {
color: #94a3b8;
padding: 0 0.25rem;
font-size: 1.25rem;
user-select: none;
}
@media (max-width: 640px) {
.pagination__pages {
gap: 0.25rem;
}
.pagination__page,
.pagination__btn {
width: 2.25rem;
height: 2.25rem;
min-width: 2.25rem;
}
}
</style>