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

first commit

Browse source
This commit is contained in:
Web-serfer 2026-03-30 20:21:41 +05:00
commit 4a589825c2
297 changed files with 33019 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

84
frontend/src/components/base/PageTitle.astro Normal file
View file

@ -0,0 +1,84 @@
---
interface Props {
title: string;
subtitle?: string;
badgeText?: string;
highlightText?: string;
highlightInTitle?: boolean; // Если true, то highlightText будет частью заголовка, иначе - частью subtitle
centered?: boolean;
titleColor?: 'white' | 'gray-900'; // Цвет заголовка, по умолчанию 'white' для темных фонов и 'gray-900' для светлых
subtitleColor?: 'gray-400' | 'gray-600'; // Цвет подзаголовка
highlightInSubtitle?: boolean; // Если true, то highlightText будет частью подзаголовка с особым оформлением
contactsFormat?: boolean; // Если true, то используется специальный формат для контактов с выделением в подзаголовке
titleSize?: 'normal' | 'large'; // Размер заголовка: normal (text-4xl md:text-5xl) или large (text-3xl sm:text-4xl md:text-6xl lg:text-8xl)
}
const {
title,
subtitle,
badgeText = "Мнение клиентов",
highlightText,
highlightInTitle = true, // по умолчанию highlightText будет частью заголовка
centered = true,
titleColor = 'white',
subtitleColor = 'gray-400',
highlightInSubtitle = false,
contactsFormat = false,
titleSize = 'large'
} = Astro.props;
// Определение классов цветов
const titleTextColor = titleColor === 'white' ? '[var(--color-white)]' : 'gray-900';
const subtitleTextColor = subtitleColor === 'gray-400' ? '[var(--color-gray-400)]' : 'gray-600';
---
<div class={`mb-12 ${centered ? 'text-center' : ''}`}>
{badgeText && (
<div class="flex items-center justify-center gap-2 px-4 py-2 bg-[var(--color-gold)]/10 border border-[var(--color-gold)]/20 rounded-full text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider mb-6 w-fit mx-auto">
<span class="w-2 h-2 bg-[var(--color-gold)] rounded-full animate-pulse"></span>
{badgeText}
</div>
)}
{highlightInTitle ? (
<h1 class={`${titleSize === 'large' ? 'text-3xl sm:text-4xl md:text-6xl lg:text-8xl' : 'text-4xl md:text-5xl'} font-bold tracking-tight text-${titleTextColor} mb-6 relative inline-block`}>
{title}
{highlightText && <span class="text-[var(--color-gold)]">{highlightText}</span>}
{titleSize === 'large' && (
<span class="absolute -bottom-3 sm:-bottom-4 left-1/2 -translate-x-1/2 w-16 sm:w-24 h-1 bg-gradient-to-r from-transparent via-[var(--color-gold)] to-transparent rounded-full"></span>
)}
</h1>
) : (
<h1 class={`${titleSize === 'large' ? 'text-3xl sm:text-4xl md:text-6xl lg:text-8xl' : 'text-4xl md:text-5xl'} font-bold tracking-tight text-${titleTextColor} mb-6 relative inline-block`}>
{title}
{titleSize === 'large' && (
<span class="absolute -bottom-3 sm:-bottom-4 left-1/2 -translate-x-1/2 w-16 sm:w-24 h-1 bg-gradient-to-r from-transparent via-[var(--color-gold)] to-transparent rounded-full"></span>
)}
</h1>
)}
{subtitle && (
<p class={`text-${subtitleTextColor} ${centered ? 'max-w-2xs sm:max-w-3xl mx-auto' : ''} text-base sm:text-lg md:text-xl lg:text-2xl leading-relaxed font-light`}>
{subtitle}
{contactsFormat && !highlightInTitle && highlightText ? (
<span class="relative inline-block mx-1 sm:mx-2 mt-2 block sm:inline">
<span class="relative z-10 text-[var(--color-gold)] font-bold bg-gradient-to-r from-[var(--color-gold)]/20 to-[var(--color-gold-hover)]/20 px-2 sm:px-3 py-0.5 sm:py-1 rounded-lg sm:rounded-xl border border-[var(--color-gold)]/20 text-sm sm:text-base">
{highlightText}
</span>
</span>
) : (!highlightInTitle && highlightText && highlightInSubtitle) ? (
<span class="relative inline-block mx-1 sm:mx-2 mt-2 block sm:inline">
<span class="relative z-10 text-[var(--color-gold)] font-bold bg-gradient-to-r from-[var(--color-gold)]/20 to-[var(--color-gold-hover)]/20 px-2 sm:px-3 py-0.5 sm:py-1 rounded-lg sm:rounded-xl border border-[var(--color-gold)]/20 text-sm sm:text-base">
{highlightText}
</span>
</span>
) : (!highlightInTitle && highlightText && !highlightInSubtitle) ? (
<span class="relative inline-block mx-1 sm:mx-2 mt-2 block sm:inline">
<span class="relative z-10 text-[var(--color-gold)] font-bold bg-gradient-to-r from-[var(--color-gold)]/20 to-[var(--color-gold-hover)]/20 px-2 sm:px-3 py-0.5 sm:py-1 rounded-lg sm:rounded-xl border border-[var(--color-gold)]/20 text-sm sm:text-base">
{highlightText}
</span>
</span>
) : null}
</p>
)}
</div>