Files
jkhsakha-web/src/components/Blocks/Banner/Banner.tsx
2026-03-24 09:21:38 +09:00

44 lines
2.1 KiB
TypeScript

import { condensedFont } from "@/app/layout";
import ButtonLink from "@/components/UI/ButtonLink";
import { BannerProps } from "@/types/elements";
import { IconFilePencil, IconId, IconUser } from "@tabler/icons-react";
export const revalidate = 60;
export default async function Banner({ title, subtitle, backgroundImage, logoImage }: BannerProps) {
return (
<section className="relative w-full">
<div className="hero bg-base-200 min-h-8 h-min overflow-hidden" >
<div className="absolute inset-0 overflow-hidden">
<div className="w-full h-full " style={{
backgroundImage: `url(${backgroundImage})`
}}></div>
</div>
<div className="absolute inset-0 bg-black opacity-40"></div>
<div className="hero-content px-0 gap-8 max-w-5xl py-8 flex flex-col lg:flex-row justify-center">
<a role="button" href="/" className="flex justify-center items-center max-w-48 w-full">
<img
src={logoImage}
className="object-cover w-auto h-full"
/>
</a>
<div className="space-y-2">
<p className="text-white text-xl text-center sm:text-left">
{subtitle}
</p>
<h1 className={`text-3xl font-semibold text-white ${condensedFont.className} text-center sm:text-left`}>{title}</h1>
</div>
<div className="flex flex-col space-y-4">
<ButtonLink href="https://lk.jkhsakha.ru" label="Личный кабинет" iconLeft={<IconUser />} />
<ButtonLink href="/uznat-licevoj-schet-po-adresu" label="Узнать лицевой счет" iconLeft={<IconId />} />
<ButtonLink href="/obrashhenie-grazhdan" label="Подать обращение" iconLeft={<IconFilePencil />} />
</div>
</div>
</div>
</section>
)
}