التخطيط والأبعاد

<nav className="flex items-center justify-between px-6 py-3 bg-white shadow-md">
  <div className="flex items-center gap-2">
    <img src="/logo.svg" alt="Logo" className="w-8 h-8" />
    <span className="text-xl font-bold">MyCompany</span>
  </div>
  <div className="flex items-center gap-6">
    <a href="/" className="text-gray-700 hover:text-blue-600">Home</a>
    <a href="/about" className="text-gray-700 hover:text-blue-600">About</a>
    <a href="/services" className="text-gray-700 hover:text-blue-600">Services</a>
    <a href="/contact" className="text-gray-700 hover:text-blue-600">Contact</a>
  </div>
  <div className="flex items-center gap-3">
    <button className="px-4 py-2 text-gray-700">Login</button>
    <button className="px-4 py-2 bg-blue-600 text-white rounded-lg">Get Started</button>
  </div>
</nav>