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