style: update link colors and hover states for documentation and support links

src/components/NavLinks.tsx

@@ -14,6 +14,7 @@ export function NavLinks() {
     ['How it Works', '/#howitworks'],
     ['Coming Soon', '/#comingsoon'],
     ['FAQs', '/#faqs'],
+    ['Docs', 'https://threefold.info/mycelium_network/docs/'],
   ].map(([label, href], index) => (
     <Link
       key={label}
@@ -31,13 +32,17 @@ export function NavLinks() {
         }, 50)
       }}
       onClick={(e) => {
-        e.preventDefault()
-        const targetId = href.substring(2)
-        const targetElement = document.getElementById(targetId)
-        if (targetElement) {
-          targetElement.scrollIntoView({ behavior: 'smooth' })
+        if (href.startsWith('/#')) {
+          e.preventDefault();
+          const targetId = href.substring(2);
+          const targetElement = document.getElementById(targetId);
+          if (targetElement) {
+            targetElement.scrollIntoView({ behavior: 'smooth' });
+          }
         }
       }}
+      target={href.startsWith('http') ? '_blank' : undefined}
+      rel={href.startsWith('http') ? 'noopener noreferrer' : undefined}
     >
       <AnimatePresence>
         {hoveredIndex === index && (