Chores: Restructure website

src/components/Courses.astro

@@ -0,0 +1,36 @@
+---
+import courses from '../data/courses.json';
+---
+<section id="courses" class="py-20 px-4">
+  <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">
+      <span>Level Up With Our Courses</span>
+      <span class="text-4xl">📚</span>
+    </h2>
+    <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+      {courses.map(course => (
+        <a 
+          href={course.url}
+          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] 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">
+              <div class="text-4xl">{course.icon}</div>
+              <h3 class="text-2xl font-bold text-gray-900 dark:text-white group-hover:text-purple-700 dark:group-hover:text-purple-300 transition-colors">{course.title}</h3>
+            </div>
+            <p class="text-gray-800 dark:text-gray-200 mb-6">{course.description}</p>
+            <div class="flex items-center text-purple-700 dark:text-purple-300 font-medium">
+              <span>Start learning</span>
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+              </svg>
+            </div>
+          </div>
+        </a>
+      ))}
+    </div>
+  </div>
+</section>

src/components/Footer.astro

@@ -0,0 +1,10 @@
+---
+---
+<footer class="bg-gray-900 dark:bg-gray-950 text-gray-300 py-12 px-4">
+  <div class="max-w-7xl mx-auto space-y-4">
+    <div class="text-sm text-center">
+      <p>&copy; 2025 Open Source Communities. All rights reserved.</p>
+      <p class="mt-2">Built with ❤️ by the community.</p>
+    </div>
+  </div>
+</footer>

src/components/Header.astro

@@ -0,0 +1,23 @@
+---
+import Navigation from './Navigation.astro';
+import MobileMenu from './MobileMenu.astro';
+import MobileNav from './MobileNav.astro';
+---
+<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-purple-700 text-white px-4 py-2 rounded-lg z-50 focus:outline-none focus:ring-2 focus:ring-white">
+  Skip to main content
+</a>
+
+<header class="sticky top-0 bg-gray-900 dark:bg-gray-950 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">
+      <div class="flex items-center">
+        <a href="/" class="flex-shrink-0 flex items-center" aria-label="OSS Communities Homepage">
+          <span class="text-xl font-bold bg-gradient-to-r from-purple-700 to-pink-700 bg-clip-text text-transparent">OSS Communities</span>
+        </a>
+      </div>
+      <Navigation />
+      <MobileMenu />
+    </div>
+  </div>
+  <MobileNav />
+</header>

src/components/Hero.astro

@@ -0,0 +1,26 @@
+---
+---
+<section class="min-h-[60vh] 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>
+  <!-- Simple animated element -->
+  <div class="absolute inset-0 z-0" aria-hidden="true">
+    <div class="animate-float absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-blue-400/10 blur-3xl"></div>
+    <div class="animate-float-delayed absolute bottom-1/4 right-1/3 w-96 h-96 rounded-full bg-purple-500/10 blur-3xl"></div>
+  </div>
+  <div class="relative z-10 mx-auto">
+    <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-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 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 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> -->
+  </div>
+</section>

src/components/MobileMenu.astro

@@ -0,0 +1,21 @@
+---
+---
+<div class="md:hidden flex items-center">
+  <button 
+    type="button" 
+    id="mobile-menu-button" 
+    class="text-gray-500 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500"
+    aria-label="Open main menu"
+    aria-expanded="false"
+    aria-controls="mobile-menu"
+  >
+    <span class="sr-only">Open main menu</span>
+    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+    </svg>
+  </button>
+</div>
+
+<script>
+	import "../scripts/mobile-menu.js";
+</script>

src/components/MobileNav.astro

@@ -0,0 +1,9 @@
+---
+---
+<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="/#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>
+</nav>

src/components/Navigation.astro

@@ -0,0 +1,7 @@
+---
+---
+<nav class="hidden md:flex space-x-8 items-center" aria-label="Main navigation">
+  <a href="/#courses" class="text-gray-300 dark:text-gray-200 hover:underline hover:text-purple-300 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-300 dark:text-gray-200 hover:underline hover:text-purple-300 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-300 dark:text-gray-200 hover:underline hover:text-purple-300 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>

src/components/Resources.astro

@@ -0,0 +1,24 @@
+---
+import resources from '../data/resources.json';
+---
+<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">
+      <span>Other Great OSS Resources</span>
+      <span class="text-4xl">🌐</span>
+    </h2>
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto">
+      {resources.map(resource => (
+        <a 
+          href={resource.url}
+          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 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>
+      ))}
+    </div>
+  </div>
+</section>

src/components/Shoutouts.astro

@@ -0,0 +1,60 @@
+---
+import shoutouts from '../data/shoutouts.json';
+---
+<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">
+      <span>Community Shoutouts</span>
+      <span class="text-4xl">🙌</span>
+    </h2>
+
+    <div class="mb-12">
+      <div class="max-w-2xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
+        <div class="p-8">
+          <h3 class="text-2xl font-bold mb-4 text-center text-gray-900 dark:text-white">Give a Shoutout!</h3>
+          <p class="text-gray-800 dark:text-gray-200 text-center mb-6">
+            Recognize someone amazing in the open source community
+          </p>
+          <div class="flex justify-center">
+            <a
+              href="https://airtable.com/embed/YOUR_FORM_ID"
+              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 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all"
+            >
+              Submit a Shoutout
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-2xl font-bold mb-8 text-center text-gray-900 dark:text-white">Recent Shoutouts</h3>
+      <div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
+        {shoutouts.map(shoutout => (
+          <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition-all hover:scale-[1.01]">
+            <div class="p-6">
+              <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">{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 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>
+                    </svg>
+                  </a>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+</section>

src/components/WeeklyTips.astro

@@ -0,0 +1,38 @@
+---
+import { contributorTip, maintainerTip } from '../data/weeklyTips.json';
+---
+<section id="tips" class="py-20 px-4">
+  <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">
+      <span>This Week's Tips</span>
+      <span class="text-4xl">🧠</span>
+    </h2>
+    <div class="grid md:grid-cols-2 gap-8">
+      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition-all hover:scale-[1.02]">
+        <div class="p-6">
+          <div class="flex items-center gap-2 mb-4">
+            <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-2 rounded-lg">
+              <span class="text-xl">👩‍💻</span>
+            </div>
+            <h3 class="text-xl font-bold text-gray-900 dark:text-white">Contributor Tip</h3>
+          </div>
+          <p class="text-gray-800 dark:text-gray-200 mb-4">{contributorTip.content}</p>
+          <p class="text-sm text-gray-700 dark:text-gray-300 italic">#{contributorTip.week} - {contributorTip.date}</p>
+        </div>
+      </div>
+
+      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition-all hover:scale-[1.02]">
+        <div class="p-6">
+          <div class="flex items-center gap-2 mb-4">
+            <div class="bg-gradient-to-r from-purple-600 to-purple-800 text-white p-2 rounded-lg">
+              <span class="text-xl">🛠️</span>
+            </div>
+            <h3 class="text-xl font-bold text-gray-900 dark:text-white">Maintainer Tip</h3>
+          </div>
+          <p class="text-gray-800 dark:text-gray-200 mb-4">{maintainerTip.content}</p>
+          <p class="text-sm text-gray-700 dark:text-gray-300 italic">#{maintainerTip.week} - {maintainerTip.date}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>