53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import React from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { motion } from 'framer-motion'
|
|
import { ChevronLeftIcon } from 'lucide-react'
|
|
|
|
type PageHeroProps = {
|
|
title: string
|
|
lead: string
|
|
image: string
|
|
}
|
|
|
|
export function PageHero({ title, lead, image }: PageHeroProps) {
|
|
return (
|
|
<section className="relative flex h-[58vh] min-h-[420px] items-end overflow-hidden">
|
|
{image && <img src={image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />}
|
|
|
|
<div className="absolute inset-0 bg-ink/50" aria-hidden="true" />
|
|
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{ background: 'linear-gradient(to top, #27221c 6%, rgba(39,34,28,0.1) 70%)' }}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
<div className="relative mx-auto w-full max-w-site px-6 pb-16 lg:px-10">
|
|
<nav aria-label="مسیر صفحه" className="flex items-center gap-2 text-xs font-light text-ivory/50">
|
|
<Link to="/" className="transition-colors hover:text-copper">
|
|
صفحه اصلی
|
|
</Link>
|
|
<ChevronLeftIcon className="h-3.5 w-3.5" />
|
|
<span className="text-copper">{title}</span>
|
|
</nav>
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 24 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.7, ease: [0.23, 1, 0.32, 1] }}
|
|
className="mt-5 max-w-[700px] text-hero font-bold text-ivory"
|
|
>
|
|
{title}
|
|
</motion.h1>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.7, delay: 0.1, ease: [0.23, 1, 0.32, 1] }}
|
|
className="mt-5 max-w-2xl text-base font-light leading-9 text-ivory/65"
|
|
>
|
|
{lead}
|
|
</motion.p>
|
|
<div className="mt-8 h-px w-28 bg-copper" />
|
|
</div>
|
|
</section>
|
|
)
|
|
} |