31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
|
// FaqHero.tsx
|
||
|
|
import type { FaqHeroContent } from './faqContent';
|
||
|
|
|
||
|
|
interface FaqHeroProps {
|
||
|
|
content: FaqHeroContent;
|
||
|
|
}
|
||
|
|
|
||
|
|
const FaqHero = ({ content }: FaqHeroProps) => {
|
||
|
|
return (
|
||
|
|
<section class="relative h-[50vh] min-h-[400px] w-full flex items-center justify-center overflow-hidden">
|
||
|
|
<div class="absolute inset-0">
|
||
|
|
<img
|
||
|
|
src="/images/faq/faq_hero.avif"
|
||
|
|
alt="Hilfsbereiter Chauffeur Service"
|
||
|
|
class="absolute inset-0 w-full h-full object-cover object-top brightness-50"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
|
||
|
|
<div class="relative z-10 text-center p-6">
|
||
|
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white drop-shadow-lg">
|
||
|
|
{content.title}
|
||
|
|
</h1>
|
||
|
|
<p class="mt-4 text-lg md:text-xl text-gray-200 max-w-2xl mx-auto">
|
||
|
|
{content.subtitle}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default FaqHero;
|