49 lines
1.9 KiB
TypeScript
49 lines
1.9 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { banners3, banners4 } from "@/lib/data";
|
|
import { Media } from "./Media";
|
|
|
|
export function BannerGrid4() {
|
|
return (
|
|
<section className="container-site mt-12">
|
|
<div className="grid grid-cols-2 gap-3 md:gap-4">
|
|
{banners4.map((banner) => (
|
|
<Link key={banner.href} href={banner.href} className="relative block overflow-hidden rounded-2xl">
|
|
<div className="relative aspect-[21/9] min-h-[140px]">
|
|
<Image src={banner.image} alt="" fill sizes="50vw" className="object-cover object-center" />
|
|
</div>
|
|
<div
|
|
className="pointer-events-none absolute inset-x-0 bottom-0 h-[70%]"
|
|
style={{
|
|
background:
|
|
"linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 45%, transparent 100%)",
|
|
}}
|
|
/>
|
|
<div className="absolute inset-x-0 bottom-3 md:bottom-4 px-3 text-center text-white">
|
|
<p className="text-base md:text-xl font-extrabold leading-none">{banner.title}</p>
|
|
<p dir="ltr" className="mt-0.5 font-carter text-[9px] md:text-[10px] tracking-[0.4em] text-brand uppercase">
|
|
{banner.english}
|
|
</p>
|
|
<p className="mt-0.5 text-sm md:text-base leading-tight text-white/90">{banner.subtitle}</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function BannerRow3() {
|
|
return (
|
|
<section className="container-site mt-12">
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 md:gap-4">
|
|
{banners3.map((banner) => (
|
|
<Link key={banner.href} href={banner.href} className="overflow-hidden rounded-2xl">
|
|
<Media src={banner.image} alt="" className="aspect-[2.4/1]" sizes="33vw" />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|