44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
"use client"
|
||
|
||
import { Button } from "./ui/button"
|
||
import Wave from "react-wavify"
|
||
|
||
export function Banner() {
|
||
return (
|
||
<div className="relative w-full h-[300px] rounded-lg overflow-hidden banner-container hidden md:block">
|
||
<div className="absolute inset-0 bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600">
|
||
<Wave
|
||
fill="url(#gradient)"
|
||
options={{
|
||
height: 50,
|
||
amplitude: 40,
|
||
speed: 0.15,
|
||
points: 3,
|
||
}}
|
||
className="absolute bottom-0"
|
||
>
|
||
<defs>
|
||
<linearGradient id="gradient" gradientTransform="rotate(90)">
|
||
<stop offset="0%" stopColor="rgba(59, 130, 246, 0.5)" /> {/* blue-600 with opacity */}
|
||
<stop offset="50%" stopColor="rgba(139, 92, 246, 0.5)" /> {/* purple-600 with opacity */}
|
||
<stop offset="100%" stopColor="rgba(59, 130, 246, 0.5)" /> {/* blue-600 with opacity */}
|
||
</linearGradient>
|
||
</defs>
|
||
</Wave>
|
||
</div>
|
||
<div className="relative z-10 h-full flex items-center">
|
||
<div className="container mx-auto px-4">
|
||
<div className="max-w-lg text-white">
|
||
<h1 className="text-4xl font-bold mb-4">САМОЕ ЗАВЕТНОЕ!</h1>
|
||
<p className="text-xl mb-6">Исполняйте мечты с Eternos</p>
|
||
<Button variant="secondary" size="lg">
|
||
Подробнее
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|