components/Header.jsx

import Link from 'next/link';

export default function Header() {
  return (
    <header className="bg-white shadow-sm sticky top-0 z-50">
      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center">
            <Link href="/" className="text-2xl font-bold text-primary-600">
              ChromaVector
            </Link>
          </div>
          <div className="hidden md:flex items-center space-x-8">
            <Link href="#services" className="text-gray-700 hover:text-primary-600 transition-colors">
              Services
            </Link>
            <Link href="#advantages" className="text-gray-700 hover:text-primary-600 transition-colors">
              Advantages
            </Link>
            <Link href="#demo" className="text-gray-700 hover:text-primary-600 transition-colors">
              Demo
            </Link>
            <Link href="#contact" className="text-gray-700 hover:text-primary-600 transition-colors">
              Contact
            </Link>
          </div>
          <div className="flex items-center">
            <a 
              href="https://huggingface.co/spaces/akhaliq/anycoder" 
              target="_blank" 
              rel="noopener noreferrer"
              className="text-sm text-gray-500 hover:text-primary-600 transition-colors"
            >
              Built with anycoder
            </a>
          </div>
        </div>
      </nav>
    </header>
  );
}