31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
|
|
interface HeroProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
variant?: 'default' | 'primary' | 'secondary';
|
|
}
|
|
|
|
export function Hero({ children, className = '', variant = 'default' }: HeroProps) {
|
|
const baseClasses = 'relative overflow-hidden rounded-2xl border p-8';
|
|
|
|
const variantClasses = {
|
|
default: 'bg-iron-gray border-charcoal-outline',
|
|
primary: 'bg-gradient-to-br from-iron-gray via-iron-gray to-charcoal-outline border-charcoal-outline',
|
|
secondary: 'bg-gradient-to-br from-primary-blue/10 to-purple-600/10 border-primary-blue/20'
|
|
};
|
|
|
|
const classes = [baseClasses, variantClasses[variant], className].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box className={classes}>
|
|
<Box className="absolute top-0 right-0 w-64 h-64 bg-primary-blue/5 rounded-full blur-3xl" />
|
|
<Box className="absolute bottom-0 left-0 w-48 h-48 bg-performance-green/5 rounded-full blur-3xl" />
|
|
<Box className="relative z-10">
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|