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

Новые правки PageHero

Browse source
This commit is contained in:
Web-serfer 2026-04-16 00:10:23 +05:00
parent a56aba6286
commit 3b6e2f2dc9
1 changed files with 95 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

147
frontend/src/components/base/PageHero.astro
View file

@ -50,19 +50,34 @@ const {
const showImage = layout === 'with-image' && sideImage;
---
<section class="hero-section" style:min-height={minHeight} style:--header-offset={headerOffset}>
{bgImage && <img src={bgImage} alt="" class="hero-bg-image" decoding="async" />}
<section
class="hero-section"
style={`min-height: ${minHeight}; padding-top: ${headerOffset}; ${bgImage ? `background-image: url("${bgImage}")` : ''}`}
>
<!-- КРИТИЧЕСКИ: img для LCP - позволяет Lighthouse засечь Largest Contentful Paint -->
{bgImage && (
<img
src={bgImage}
alt=""
class="hero-bg-lcp"
fetchpriority="high"
decoding="async"
width="1920"
height="1080"
/>
)}
<div class="hero-overlay"></div>
<div class="site-container hero-grid">
<div class="hero-content">
<div class="badge animate-load" data-delay="100">
{icon ? (
<span class="badge-icon">
<span class="badge-icon">
<Icon name={icon} />
</span>
) : (
<span class="status-dot"></span>
<span class="status-dot"></span>
)}
{badgeText}
</div>
@ -76,37 +91,46 @@ const showImage = layout === 'with-image' && sideImage;
<p class="hero-description animate-load" data-delay="700">{description}</p>
{btnText && (
<div class="hero-actions animate-load" data-delay="900">
{modalTarget ? (
<Button variant="gold" size="lg" data-modal-target={modalTarget}>
{btnText}
</Button>
) : (
<Button variant="gold" size="lg" href={btnHref}>
{btnText}
</Button>
)}
{btnSecondary && (
<Button variant="outline" size="lg" href={btnSecondaryHref} class={btnSecondaryClass}>
{btnSecondary}
</Button>
)}
</div>
<div class="hero-actions animate-load" data-delay="900">
{modalTarget ? (
<Button variant="gold" size="lg" data-modal-target={modalTarget}>
{btnText}
</Button>
) : (
<Button variant="gold" size="lg" href={btnHref}>
{btnText}
</Button>
)}
{btnSecondary && (
<Button variant="outline" size="lg" href={btnSecondaryHref} class={btnSecondaryClass}>
{btnSecondary}
</Button>
)}
</div>
)}
</div>
{showImage && (
<div class="hero-image-wrapper animate-load" data-delay="400">
<div class="image-composition">
<img src={sideImage} alt={sideImageAlt || "Юрист"} class="main-image" width="380" height="500" />
{experienceBadge && (
<div class="experience-badge animate-load" data-delay="1100">
<span class="exp-number">{experienceBadge.number}</span>
<span class="exp-text">{experienceBadge.text}</span>
</div>
)}
<div class="hero-image-wrapper animate-load" data-delay="400">
<div class="image-composition">
<img
src={sideImage}
alt={sideImageAlt || "Юрист"}
class="main-image"
width="380"
height="500"
loading="eager"
fetchpriority="high"
decoding="async"
/>
{experienceBadge && (
<div class="experience-badge animate-load" data-delay="1100">
<span class="exp-number">{experienceBadge.number}</span>
<span class="exp-text">{experienceBadge.text}</span>
</div>
)}
</div>
</div>
</div>
)}
</div>
</section>
@ -118,8 +142,11 @@ const showImage = layout === 'with-image' && sideImage;
animatedElements.forEach((el) => {
const delay = parseInt((el as HTMLElement).dataset.delay || '0');
// Используем requestAnimationFrame для лучшей производительности
setTimeout(() => {
el.classList.add('is-visible');
requestAnimationFrame(() => {
el.classList.add('is-visible');
});
}, delay);
});
};
@ -131,29 +158,32 @@ const showImage = layout === 'with-image' && sideImage;
}
</script>
<style define:vars={{ bgImage: bgImage ? `url("${bgImage}")` : "none" }}>
<style>
.hero-section {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
background-image: var(--bgImage);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0 !important;
padding-top: var(--header-offset, 80px);
box-sizing: border-box;
overflow: hidden;
}
.hero-bg-image {
/* LCP helper image - скрыт визуально, но видим для Lighthouse */
.hero-bg-lcp {
position: absolute;
width: 1px;
height: 1px;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
pointer-events: none;
z-index: -1;
}
.hero-overlay {
@ -195,7 +225,7 @@ const showImage = layout === 'with-image' && sideImage;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
}
@ -209,7 +239,7 @@ const showImage = layout === 'with-image' && sideImage;
opacity: 0;
transform: translateX(50px) scale(0.95);
transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
transform 1s cubic-bezier(0.4, 0, 0.2, 1);
transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-image-wrapper.animate-load.is-visible {
@ -222,7 +252,7 @@ const showImage = layout === 'with-image' && sideImage;
opacity: 0;
transform: translateY(20px) scale(0.9);
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.experience-badge.animate-load.is-visible {
@ -251,17 +281,29 @@ const showImage = layout === 'with-image' && sideImage;
flex-shrink: 0;
}
/* Мерцающая точка (только на главной) */
/* Мерцающая точка - ИСПРАВЛЕНО: заменил box-shadow на opacity/transform */
.status-dot {
width: 10px;
height: 10px;
background: #22c55e;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
position: relative;
flex-shrink: 0;
}
.status-dot::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #22c55e;
animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
z-index: -1;
}
.badge-icon {
display: flex;
align-items: center;
@ -275,18 +317,15 @@ const showImage = layout === 'with-image' && sideImage;
stroke-width: 2 !important;
}
@keyframes pulse {
/* Оптимизированная анимация pulse - только opacity и transform */
@keyframes pulse-ring {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
opacity: 0.8;
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
transform: scale(2.5);
opacity: 0;
}
}
@ -549,5 +588,9 @@ const showImage = layout === 'with-image' && sideImage;
animation: none;
opacity: 1;
}
.status-dot::before {
animation: none;
}
}
</style>
</style>