77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
interface Hero174Props {
|
|
pageHeading?: string;
|
|
title?: string;
|
|
description?: string;
|
|
imageSrc?: string;
|
|
imageAlt?: string;
|
|
ctaLabel?: string;
|
|
ctaHref?: string;
|
|
}
|
|
|
|
const defaultProps: Required<Hero174Props> = {
|
|
pageHeading: "مستر دکور",
|
|
title: "طراحی و تولید استند ویترین طلافروشی برای فروش بیشتر",
|
|
description:
|
|
"مستر دکور، تامین کننده تخصصی استند و ملزومات دکور ویترین طلا و جواهر است؛ راهکاری که چیدمان فروشگاه شما را حرفه ای تر می کند و توجه مشتری را دقیقاً روی سرویس های شما نگه می دارد.",
|
|
imageSrc: "/assets/main-pic/mr_decor-mainpic.jpg",
|
|
imageAlt: "نمونه ویترین و دکور فروشگاهی",
|
|
ctaLabel: "مشاهده محصولات",
|
|
ctaHref: "/product",
|
|
};
|
|
|
|
export function Hero174(props: Hero174Props) {
|
|
const {
|
|
pageHeading,
|
|
title,
|
|
description,
|
|
imageSrc,
|
|
imageAlt,
|
|
ctaLabel,
|
|
ctaHref,
|
|
} = {
|
|
...defaultProps,
|
|
...props,
|
|
};
|
|
|
|
return (
|
|
<section className="relative min-h-screen w-full" aria-labelledby="home-hero-page-heading">
|
|
<h1 id="home-hero-page-heading" className="sr-only">
|
|
{pageHeading}
|
|
</h1>
|
|
|
|
<div className="absolute inset-0">
|
|
<Image
|
|
src={imageSrc}
|
|
alt={imageAlt}
|
|
fill
|
|
priority
|
|
quality={100}
|
|
sizes="100vw"
|
|
className="object-cover object-[center_58%]"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/62" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(0,0,0,0.34),transparent_60%)]" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,rgba(0,0,0,0.3),transparent_62%)]" />
|
|
</div>
|
|
|
|
<div className="relative z-10 flex min-h-screen flex-col">
|
|
<div className="flex flex-1 items-center justify-center px-6 pt-24 pb-14 text-center md:px-10">
|
|
<div className="flex max-w-4xl flex-col items-center gap-5">
|
|
<h2 className="text-heading-1 font-bold text-overlay-foreground">{title}</h2>
|
|
<p className="max-w-2xl text-body text-overlay-foreground/90">{description}</p>
|
|
<Button asChild size="lg" className="rounded-full">
|
|
<Link href={ctaHref}>{ctaLabel}</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|