Initial commit

components/PageHeader.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface PageHeaderProps {
+    title: string;
+    description?: string;
+    image?: string;
+}
+
+const PageHeader: React.FC<PageHeaderProps> = ({ 
+    title, 
+    description,
+    image = "/media/images/headers/header-about.png"
+}) => {
+  return (
+    <div className="relative w-full h-[400px] md:h-[500px] bg-brand-dark text-white flex flex-col justify-center items-center text-center overflow-hidden">
+      <div className="absolute inset-0 z-0">
+        <img 
+          src={image} 
+          alt={title} 
+          className="w-full h-full object-cover opacity-30"
+        />
+        <div className="absolute inset-0 bg-gradient-to-b from-brand-dark/80 to-brand-dark/40" />
+      </div>
+
+      <div className="relative z-10 container mx-auto px-6 mt-16">
+        <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">{title}</h1>
+        {description && (
+            <p className="text-gray-300 text-lg max-w-2xl mx-auto leading-relaxed">
+                {description}
+            </p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PageHeader;