35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { ThemeToggle } from '@components/ThemeToggle';
|
|
import { WavesIcon } from 'lucide-react';
|
|
|
|
export default function Header() {
|
|
return (
|
|
<header className="relative overflow-hidden bg-gradient-to-r from-cyan-500 via-blue-500 to-cyan-500 h-32">
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div className="swell">
|
|
<div className="wave"></div>
|
|
<div className="wave wave-2"></div>
|
|
<div className="wave wave-3"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative px-4 h-full">
|
|
<div className="absolute right-4 top-3">
|
|
<ThemeToggle />
|
|
</div>
|
|
<div className="container max-w-4xl mx-auto h-full flex flex-col items-center justify-center text-white">
|
|
<div className="flex items-center gap-2">
|
|
<WavesIcon className="h-6 w-6" />
|
|
<h1 className="text-2xl font-bold tracking-tight">
|
|
Blue Ocean Strategy
|
|
</h1>
|
|
</div>
|
|
<p className="text-cyan-100 text-sm">
|
|
Navigate to new market spaces and create uncontested growth
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|