components

components/ui/Heading.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { cn } from './utils';
+
+export function Heading({ 
+  level = 2, 
+  children, 
+  className, 
+  subtitle,
+  align = 'left'
+}: { 
+  level?: 1 | 2 | 3 | 4; 
+  children: React.ReactNode; 
+  className?: string;
+  subtitle?: string;
+  align?: 'left' | 'center' | 'right';
+}) {
+  const Tag = `h${level}` as any;
+  
+  const sizes = {
+    1: 'text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold leading-[1.1]',
+    2: 'text-3xl md:text-5xl lg:text-6xl font-bold leading-tight',
+    3: 'text-2xl md:text-3xl lg:text-4xl font-bold',
+    4: 'text-xl md:text-2xl font-bold',
+  };
+
+  const alignments = {
+    left: 'text-left',
+    center: 'text-center mx-auto',
+    right: 'text-right',
+  };
+
+  return (
+    <div className={cn('mb-8 md:mb-16', alignments[align], className)}>
+      {subtitle && (
+        <span className="inline-block text-accent font-bold tracking-widest uppercase text-xs md:text-sm mb-3 md:mb-4 animate-fade-in">
+          {subtitle}
+        </span>
+      )}
+      <Tag className={cn(sizes[level as keyof typeof sizes], 'text-primary')}>
+        {children}
+      </Tag>
+    </div>
+  );
+}