45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { clsx } from 'clsx'
|
|
|
|
export function Gradient({
|
|
className,
|
|
...props
|
|
}: React.ComponentPropsWithoutRef<'div'>) {
|
|
return (
|
|
<div
|
|
{...props}
|
|
className={clsx(
|
|
className,
|
|
'bg-linear-145 from-[#0f112b] from-10% via-[#2a1e5a] via-50% to-[#392468] to-90%',
|
|
)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function GradientBackground() {
|
|
return (
|
|
<div className="relative mx-auto max-w-7xl">
|
|
<div
|
|
className={clsx(
|
|
'absolute -top-44 -right-60 h-60 w-xl transform-gpu md:right-0',
|
|
'bg-linear-145 from-[#0f112b] from-10% via-[#2a1e5a] via-50% to-[#392468] to-90%',
|
|
'rotate-[-10deg] rounded-full blur-3xl',
|
|
)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function GradientLight() {
|
|
return (
|
|
<div className="relative mx-auto max-w-7xl">
|
|
<div
|
|
className={clsx(
|
|
'absolute -top-44 -right-60 h-60 w-xl transform-gpu md:right-0',
|
|
'bg-linear-145 from-[#b79fff] from-10% via-[#a28aff] via-50% to-[#a983fb] to-90%',
|
|
'rotate-[-10deg] rounded-full blur-3xl',
|
|
)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|