103 lines
3.0 KiB
TypeScript
103 lines
3.0 KiB
TypeScript
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>
|
|
); |