99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { motion } from "framer-motion";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { useContent } from "@/components/layout/content-provider";
|
|
|
|
interface ButtonItem {
|
|
text: string;
|
|
url: string;
|
|
}
|
|
|
|
interface Hero247Props {
|
|
heading?: string;
|
|
description?: string;
|
|
secondaryButton?: ButtonItem;
|
|
primaryButton?: ButtonItem;
|
|
className?: string;
|
|
}
|
|
|
|
const Hero247 = ({
|
|
className,
|
|
heading,
|
|
description,
|
|
secondaryButton: secondaryButtonProp,
|
|
primaryButton: primaryButtonProp,
|
|
}: Hero247Props) => {
|
|
const content = useContent()
|
|
const defaults = content.pages.home.hero247
|
|
const headingText = heading ?? defaults.heading
|
|
const descriptionText = description ?? defaults.description
|
|
const secondaryButton = secondaryButtonProp ?? { text: defaults.secondaryButton, url: "#rahavarha" }
|
|
const primaryButton = primaryButtonProp ?? { text: defaults.primaryButton, url: "#mozakerat" }
|
|
return (
|
|
<section className={cn("py-32", className)} dir="rtl">
|
|
<div className="container mx-auto flex flex-col items-center px-6">
|
|
<div className="flex flex-col items-center gap-6">
|
|
<motion.h2
|
|
initial={{ y: 100, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{
|
|
duration: 1.5,
|
|
ease: [0.16, 1, 0.3, 1],
|
|
}}
|
|
className="text-heading-2 max-w-3xl text-center font-semibold text-foreground dark:text-foreground"
|
|
>
|
|
{headingText}
|
|
</motion.h2>
|
|
<motion.p
|
|
initial={{ y: 60, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{
|
|
duration: 1.2,
|
|
ease: [0.16, 1, 0.3, 1],
|
|
delay: 0.2,
|
|
}}
|
|
className="text-body max-w-2xl whitespace-pre-line text-center leading-relaxed text-muted-foreground dark:text-muted-foreground"
|
|
>
|
|
{descriptionText}
|
|
</motion.p>
|
|
<div className="flex flex-col gap-4 font-medium md:flex-row md:gap-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 60 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{
|
|
duration: 1.2,
|
|
ease: [0.16, 1, 0.3, 1],
|
|
delay: 0.25,
|
|
}}
|
|
>
|
|
<Button asChild size="lg" variant="primary">
|
|
<Link href={primaryButton.url}>{primaryButton.text}</Link>
|
|
</Button>
|
|
</motion.div>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 60 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{
|
|
duration: 1.2,
|
|
ease: [0.16, 1, 0.3, 1],
|
|
delay: 0.4,
|
|
}}
|
|
>
|
|
<Button asChild size="lg" variant="secondary">
|
|
<Link href={secondaryButton.url}>{secondaryButton.text}</Link>
|
|
</Button>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero247 };
|