extract components from website

apps/website/components/shared/HeroSection.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import Heading from '@/components/ui/Heading';
+import Button from '@/components/ui/Button';
+
+interface HeroSectionProps {
+  title: string;
+  description?: string;
+  icon?: LucideIcon;
+  backgroundPattern?: React.ReactNode;
+  stats?: Array<{
+    icon: LucideIcon;
+    value: string | number;
+    label: string;
+  }>;
+  actions?: Array<{
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary';
+  }>;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const HeroSection = ({
+  title,
+  description,
+  icon: Icon,
+  backgroundPattern,
+  stats,
+  actions,
+  children,
+  className = ''
+}: HeroSectionProps) => (
+  <section className={`relative overflow-hidden ${className}`}>
+    {/* Background Pattern */}
+    {backgroundPattern && (
+      <div className="absolute inset-0">
+        {backgroundPattern}
+      </div>
+    )}
+
+    <div className="relative max-w-7xl mx-auto px-6 py-10">
+      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
+        {/* Main Content */}
+        <div className="max-w-2xl">
+          {Icon && (
+            <div className="flex items-center gap-3 mb-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
+                <Icon className="w-6 h-6 text-primary-blue" />
+              </div>
+              <Heading level={1} className="text-3xl lg:text-4xl">
+                {title}
+              </Heading>
+            </div>
+          )}
+          {!Icon && (
+            <Heading level={1} className="text-3xl lg:text-4xl mb-4">
+              {title}
+            </Heading>
+          )}
+          {description && (
+            <p className="text-gray-400 text-lg leading-relaxed">
+              {description}
+            </p>
+          )}
+
+          {/* Stats */}
+          {stats && stats.length > 0 && (
+            <div className="flex flex-wrap gap-6 mt-6">
+              {stats.map((stat, index) => (
+                <div key={index} className="flex items-center gap-2">
+                  <div className="w-2 h-2 rounded-full bg-primary-blue animate-pulse" />
+                  <span className="text-sm text-gray-400">
+                    <span className="text-white font-semibold">{stat.value}</span> {stat.label}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Actions or Custom Content */}
+        {actions && actions.length > 0 && (
+          <div className="flex flex-col gap-4">
+            {actions.map((action, index) => (
+              <Button
+                key={index}
+                variant={action.variant || 'primary'}
+                onClick={action.onClick}
+                className="flex items-center gap-2 px-6 py-3"
+              >
+                {action.label}
+              </Button>
+            ))}
+          </div>
+        )}
+
+        {children}
+      </div>
+    </div>
+  </section>
+);