80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { useContent } from "@/components/layout/content-provider";
|
|
|
|
interface Hero91Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero91 = ({ className }: Hero91Props) => {
|
|
const content = useContent();
|
|
const { hero91 } = content.pages.home;
|
|
const heroImageSrc = content.images.hero91.image;
|
|
const heroVideoSrc = content.images.hero91.video;
|
|
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"py-24 md:py-32 lg:py-40",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="container mx-auto flex max-w-7xl flex-col items-center gap-8 px-6 lg:flex-row lg:items-center lg:justify-between lg:gap-12">
|
|
<div className="flex flex-col gap-6 lg:w-1/2" dir="rtl">
|
|
<h1 className="text-heading-1 font-bold leading-tight text-foreground whitespace-pre-line">
|
|
{hero91.title}
|
|
</h1>
|
|
<p className="text-body leading-relaxed text-muted-foreground">
|
|
{hero91.description}
|
|
</p>
|
|
<div className="flex flex-col gap-4 font-medium md:flex-row md:gap-4">
|
|
<Button asChild size="lg" variant="primary">
|
|
<Link href="/contact">{hero91.primaryButton}</Link>
|
|
</Button>
|
|
<Button asChild size="lg" variant="secondary">
|
|
<Link href="/consultation">{hero91.secondaryButton}</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"relative w-full max-w-full overflow-hidden rounded-2xl bg-black lg:w-1/2 lg:max-w-[640px] aspect-square",
|
|
"shadow-[0_0_50px_rgba(37,102,90,0.28),0_0_90px_rgba(37,102,90,0.12)] dark:shadow-[0_0_50px_rgba(201,157,77,0.28),0_0_90px_rgba(201,157,77,0.12)]",
|
|
)}
|
|
>
|
|
<div className="absolute inset-0">
|
|
{heroVideoSrc ? (
|
|
<video
|
|
src={heroVideoSrc}
|
|
className="h-full w-full object-cover"
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
preload="metadata"
|
|
/>
|
|
) : (
|
|
<Image
|
|
src={heroImageSrc}
|
|
alt=""
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
unoptimized
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero91 };
|