Files
www_projectmycelium_com/src/components/Header.tsx
sasha-astiadi 2a141cbc91 Based on the git diff, here's an appropriate commit message:
feat: update brand logo assets

- Added new logo_1.png image file to public/images directory
- Simplified logomark.svg by removing complex gradient patterns and clip paths
- Reduced SVG markup complexity for better performance and maintainability

This is a "feat" type commit since it modifies user-visible brand assets. The message clearly describes both the addition of a new logo file and the simplification of the existing SVG logomark,
2025-10-27 13:58:51 +01:00

67 lines
2.2 KiB
TypeScript

import { Link } from 'react-router-dom'
import { Dropdown } from './ui/Dropdown'
import { ChevronDownIcon } from '@heroicons/react/20/solid'
import { Container } from './Container'
import { Button } from './Button'
import pmyceliumLogo from '../images/logos/logo_1.png'
export function Header() {
return (
<header>
<nav>
<Container className="relative z-50 flex justify-between py-4">
<div className="relative z-10 flex items-center gap-16">
<Link to="/" aria-label="Home">
<img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />
</Link>
<div className="hidden lg:flex lg:gap-10">
<Dropdown
buttonContent={
<>
Cloud
<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
</>
}
items={[
{ name: 'Cloud', href: '/cloud' },
{ name: 'Compute', href: '/compute' },
{ name: 'Storage', href: '/storage' },
{ name: 'GPU', href: '/gpu' },
]}
/>
<Link
to="/network"
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
>
Network
</Link>
<Link
to="/agents"
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
>
Agents
</Link>
</div>
</div>
<div className="flex items-center gap-6">
<div className="flex items-center gap-6 max-lg:hidden">
<Button
to="https://myceliumcloud.tf"
variant="outline"
as="a"
target="_blank"
rel="noopener noreferrer"
>
Start Deployment
</Button>
<Button to="/download" variant="solid" color="cyan">
Get Mycelium Connector
</Button>
</div>
</div>
</Container>
</nav>
</header>
)
}