28 lines
1.0 KiB
TypeScript
28 lines
1.0 KiB
TypeScript
import { Link } from '@inertiajs/react';
|
|
import { ChevronsRight, Home } from 'lucide-react';
|
|
|
|
interface Props {
|
|
innerPage: Page;
|
|
}
|
|
|
|
const Hero = ({ innerPage }: Props) => {
|
|
return (
|
|
<div className="relative overflow-y-hidden bg-[rgba(255,222,99,0.06)] pt-[212px] pb-[100px]">
|
|
<div className="relative z-10 flex flex-col items-center justify-center space-y-2">
|
|
<h1 className="text-4xl font-bold md:text-[44px]">{innerPage.name}</h1>
|
|
<div className="text-muted-foreground flex items-center gap-1">
|
|
<Link href="/">
|
|
<Home size={18} />
|
|
</Link>
|
|
<ChevronsRight size={14} />
|
|
<span className="text-sm">{innerPage.slug}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="after:pointer-events-none after:absolute after:top-1/2 after:right-0 after:h-[200px] after:w-[200px] after:-translate-y-1/2 after:rounded-full after:bg-[rgba(0,167,111,1)] after:blur-[140px] after:content-['']"></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|