Improve link and font accessibility

Author: BekahHW

src/components/Welcome.astro

@@ -67,11 +67,11 @@ const resources = [
 
       <!-- Desktop Navigation -->
       <nav class="hidden md:flex space-x-8 items-center" aria-label="Main navigation" role="navigation">
-        <a href="/#tips" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 px-3 py-2 text-sm font-medium">Weekly Tips</a>
-        <a href="/#shoutouts" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 px-3 py-2 text-sm font-medium">Shoutouts</a>
-        <a href="/#courses" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 px-3 py-2 text-sm font-medium">Courses</a>
-        <a href="/#resources" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 px-3 py-2 text-sm font-medium">Resources</a>
-        <a href="/about" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 px-3 py-2 text-sm font-medium">About</a>
+        <a href="/#tips" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 px-3 py-2 text-sm font-medium rounded-md">Weekly Tips</a>
+        <a href="/#shoutouts" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 px-3 py-2 text-sm font-medium rounded-md">Shoutouts</a>
+        <a href="/#courses" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 px-3 py-2 text-sm font-medium rounded-md">Courses</a>
+        <a href="/#resources" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 px-3 py-2 text-sm font-medium rounded-md">Resources</a>
+        <a href="/about" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 px-3 py-2 text-sm font-medium rounded-md">About</a>
       </nav>
 
       <!-- Mobile menu button -->
@@ -97,11 +97,11 @@ const resources = [
   <!-- Mobile Navigation -->
   <div class="hidden md:hidden" id="mobile-menu" role="navigation" aria-label="Mobile navigation">
     <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-      <a href="/#tips" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800">Weekly Tips</a>
-      <a href="/#shoutouts" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800">Shoutouts</a>
-      <a href="/#courses" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800">Courses</a>
-      <a href="/#resources" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800">Resources</a>
-      <a href="/about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800">About</a>
+      <a href="/#tips" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-purple-500">Weekly Tips</a>
+      <a href="/#shoutouts" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-purple-500">Shoutouts</a>
+      <a href="/#courses" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-purple-500">Courses</a>
+      <a href="/#resources" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-purple-500">Resources</a>
+      <a href="/about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-purple-500">About</a>
     </div>
   </div>
 </header>
@@ -191,14 +191,14 @@ const resources = [
       <h1 id="hero-heading" class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-purple-700 to-pink-700 bg-clip-text text-transparent">
         Open Source Communities
       </h1>
-      <p class="text-xl md:text-2xl text-gray-900 dark:text-black mb-8 max-w-2xl mx-auto">
+      <p class="text-xl md:text-2xl text-gray-800 mb-8 max-w-2xl mx-auto">
         A place for contributors and maintainers to grow, support, and celebrate each other.
       </p>
       <div class="flex flex-wrap gap-4 justify-center">
-        <a href="#tips" class="px-6 py-3 rounded-lg bg-gradient-to-r from-purple-700 to-pink-700 text-white font-medium hover:opacity-90 transition-all">
+        <a href="#tips" class="px-6 py-3 rounded-lg bg-gradient-to-r from-purple-700 to-pink-700 text-white font-medium hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all">
           Get Weekly Tips
         </a>
-        <a href="#shoutouts" class="px-6 py-3 rounded-lg border-2 border-purple-700 text-purple-700 dark:text-black-300 font-medium hover:bg-purple-600/10 transition-all">
+        <a href="#shoutouts" class="px-6 py-3 rounded-lg border-2 border-purple-700 text-purple-700 font-medium hover:bg-purple-600/10 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all">
           Give a Shoutout
         </a>
       </div>
@@ -247,7 +247,7 @@ const resources = [
   <!-- Community Shoutouts Section -->
   <section id="shoutouts" class="py-20 px-4 bg-gray-50 dark:bg-gray-900">
     <div class="max-w-6xl mx-auto">
-      <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center flex items-center justify-center gap-3 text-purple-700 dark:text-purple-300 font-medium">
+      <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center flex items-center justify-center gap-3 text-purple-700 dark:text-purple-300">
         <span>Community Shoutouts</span>
         <span class="text-4xl">🙌</span>
       </h2>
@@ -265,7 +265,7 @@ const resources = [
                 target="_blank"
                 rel="noopener noreferrer"
                 aria-label="Submit a shoutout (opens in new window)"
-                class="px-6 py-3 rounded-lg bg-gradient-to-r from-purple-700 to-pink-700 text-white font-medium hover:opacity-90 transition-all"
+                class="px-6 py-3 rounded-lg bg-gradient-to-r from-purple-700 to-pink-700 text-white font-medium hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all"
               >
                 Submit a Shoutout
               </a>
@@ -283,11 +283,11 @@ const resources = [
                 <p class="text-gray-800 dark:text-gray-200 mb-4">"{shoutout.message}"</p>
                 <div class="flex justify-between items-end">
                   <div>
-                    <p class="font-medium text-purple-700 dark:text-purple-300 font-medium">{shoutout.from}</p>
+                    <p class="font-medium text-purple-700 dark:text-purple-300">{shoutout.from}</p>
                     <p class="text-sm text-gray-700 dark:text-gray-300">to {shoutout.to}</p>
                   </div>
                   {shoutout.githubLink && (
-                    <a href={shoutout.githubLink} target="_blank" rel="noopener noreferrer" aria-label={`View ${shoutout.to} on GitHub`} class="text-purple-700 hover:text-purple-900 dark:text-purple-300 dark:hover:text-purple-200">
+                    <a href={shoutout.githubLink} target="_blank" rel="noopener noreferrer" aria-label={`View ${shoutout.to} on GitHub`} class="text-purple-700 hover:text-purple-900 dark:text-purple-300 dark:hover:text-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 rounded">
                       <span class="sr-only">GitHub</span>
                       <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                         <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
@@ -317,7 +317,7 @@ const resources = [
             target="_blank"
             rel="noopener noreferrer"
             aria-label={`${course.title}: ${course.description} (opens in new window)`}
-            class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition-all hover:scale-[1.02] group"
+            class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition-all hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 group"
           >
             <div class="p-8">
               <div class="flex items-center gap-4 mb-4">
@@ -341,7 +341,7 @@ const resources = [
   <!-- Resources Section -->
   <section id="resources" class="py-20 px-4 bg-gray-50 dark:bg-gray-900">
     <div class="max-w-6xl mx-auto">
-      <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center flex items-center justify-center gap-3 text-purple-700 dark:text-purple-300 font-medium">
+      <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center flex items-center justify-center gap-3 text-purple-700 dark:text-purple-300">
         <span>Other Great OSS Resources</span>
         <span class="text-4xl">🌐</span>
       </h2>
@@ -352,7 +352,7 @@ const resources = [
             target="_blank"
             rel="noopener noreferrer"
             aria-label={`Visit ${resource.name} (opens in new window)`}
-            class="bg-white dark:bg-gray-800 rounded-lg p-4 flex justify-center items-center border-2 border-transparent hover:border-purple-500 transition-all hover:shadow-md"
+            class="bg-white dark:bg-gray-800 rounded-lg p-4 flex justify-center items-center border-2 border-transparent hover:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all hover:shadow-md"
           >
             <span class="font-medium text-gray-900 dark:text-white">{resource.name}</span>
           </a>