Removed unnecessary aria and used semantic html instead

Author: BekahHW

src/components/Welcome.astro

@@ -55,7 +55,7 @@ const resources = [
   Skip to main content
 </a>
 
-<header class="sticky top-0 bg-white dark:bg-gray-900 shadow-sm z-30" role="banner">
+<header class="sticky top-0 bg-white dark:bg-gray-900 shadow-sm z-30">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="flex justify-between h-16">
       <!-- Logo/Brand -->
@@ -66,7 +66,7 @@ const resources = [
       </div>
 
       <!-- Desktop Navigation -->
-      <nav class="hidden md:flex space-x-8 items-center" aria-label="Main navigation" role="navigation">
+      <nav class="hidden md:flex space-x-8 items-center" aria-label="Main navigation">
         <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>
@@ -95,15 +95,15 @@ const resources = [
   </div>
 
   <!-- Mobile Navigation -->
-  <div class="hidden md:hidden" id="mobile-menu" role="navigation" aria-label="Mobile navigation">
+  <nav class="hidden md:hidden" id="mobile-menu" 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 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>
+  </nav>
 </header>
 
 <script>
@@ -178,7 +178,7 @@ const resources = [
 </div>
 
 <!-- Main Content -->
-<main id="main-content" role="main">
+<main id="main-content">
 <!-- Hero Section -->
 <section class="min-h-[80vh] flex flex-col justify-center items-center text-center px-4 relative overflow-hidden" aria-labelledby="hero-heading">
     <div class="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-pink-500/20 z-0" aria-hidden="true"></div>