first commit

frontend/src/components/faq/FaqHero.tsx

@@ -0,0 +1,31 @@
+// 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;