84 lines
4.7 KiB
Text
84 lines
4.7 KiB
Text
|
---
|
|||
|
|
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>
|