9562db84e3
- Add seed data for 3 Shumiland articles (Сезон пригод, Капсула часу, Травень) - Create public/images/blog/ with placeholder hero images - Full Lexical body content for each post - Add makeLexical() helper for paragraph formatting in seed Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import Link from 'next/link'
|
|
|
|
interface HeroBlockProps {
|
|
title?: string | null
|
|
subtitle?: string | null
|
|
ctaLabel?: string | null
|
|
ctaHref?: string | null
|
|
backgroundImage?: { url?: string | null } | string | null
|
|
}
|
|
|
|
export function HeroBlockComponent({
|
|
title,
|
|
subtitle,
|
|
ctaLabel,
|
|
ctaHref,
|
|
backgroundImage,
|
|
}: HeroBlockProps) {
|
|
const bgUrl = typeof backgroundImage === 'object' ? backgroundImage?.url : null
|
|
|
|
return (
|
|
<section className="relative flex min-h-[400px] items-center overflow-hidden bg-[#396817]">
|
|
{bgUrl && (
|
|
<img
|
|
src={bgUrl}
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute inset-0 h-full w-full object-cover"
|
|
/>
|
|
)}
|
|
<div className="relative z-10 mx-auto w-full max-w-[1204px] px-8 py-[80px]">
|
|
<div className="flex flex-col gap-[38px]">
|
|
<h1
|
|
className="text-[32px] leading-[1.2] font-bold text-white uppercase md:text-[48px] lg:text-[80px]"
|
|
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
|
|
>
|
|
{title}
|
|
</h1>
|
|
{subtitle && (
|
|
<p
|
|
className="max-w-[629px] text-[16px] leading-[1.5] font-medium text-white lg:text-[20px]"
|
|
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
|
|
>
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
{ctaLabel && ctaHref && (
|
|
<Link
|
|
href={ctaHref}
|
|
className="self-start rounded-[64px] bg-[#f28b4a] px-[30px] py-[10px] text-[20px] font-bold text-white transition-shadow hover:shadow-[0_0_20px_0_#f28b4a]"
|
|
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
|
|
>
|
|
{ctaLabel}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|