changes

2026-08-25 23:51:18 +02:00
parent 1eaf90ebbf
commit e98a903e28
19 changed files with 381 additions and 260 deletions
@@ -0,0 +1,51 @@
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+import { Outfit } from "next/font/google";
+
+const outfit = Outfit({ subsets: ["latin"], weight: ["500", "700", "800"] });
+
+export interface PageHeaderProps {
+  title: React.ReactNode;
+  subtitle?: string;
+  breadcrumbs?: { label: string; href: string }[];
+}
+
+export function PageHeader({ title, subtitle, breadcrumbs }: PageHeaderProps) {
+  return (
+    <div className="w-full bg-slate-50 border-b border-border pt-24 pb-16 lg:pt-32 lg:pb-24">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        
+        {/* Breadcrumbs */}
+        {breadcrumbs && breadcrumbs.length > 0 && (
+          <nav className="flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-text-muted mb-8">
+            <Link href="/" className="hover:text-primary transition-colors">Główna</Link>
+            {breadcrumbs.map((crumb, index) => (
+              <div key={crumb.href} className="flex items-center gap-2">
+                <ChevronRight className="size-3" />
+                {index === breadcrumbs.length - 1 ? (
+                  <span className="text-primary">{crumb.label}</span>
+                ) : (
+                  <Link href={crumb.href} className="hover:text-primary transition-colors">
+                    {crumb.label}
+                  </Link>
+                )}
+              </div>
+            ))}
+          </nav>
+        )}
+
+        <div className="max-w-3xl">
+          <h1 className={`${outfit.className} text-4xl sm:text-5xl lg:text-6xl font-extrabold text-primary uppercase tracking-tight leading-[1.05]`}>
+            {title}
+          </h1>
+          {subtitle && (
+            <p className="mt-6 text-lg text-text-muted max-w-2xl leading-relaxed border-l-[3px] border-accent pl-4">
+              {subtitle}
+            </p>
+          )}
+        </div>
+
+      </div>
+    </div>
+  );
+}