Announce new discord server

src/components/widgets/Announcement.astro

@@ -3,26 +3,10 @@ import { getPermalink } from '~/utils/permalinks';
 ---
 
 <div
-  class="hidden md:block bg-primary-900 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-primary-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis"
+  class="bg-primary-900 dark:bg-slate-800 text-center dark:border-slate-800 dark:text-slate-400 border-b border-primary-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis"
 >
   <span class="text-xs py-0.5 px-1 bg-primary-800 dark:bg-slate-700 dark:text-slate-300 font-semibold">NEW</span>
   <a
-    href={getPermalink('useful-resources-to-create-websites', 'post')}
-    class="hover:underline text-gray-200 dark:text-slate-400"
-    >Useful tools and resources to create a professional website »</a
-  >
-  <a
-    target="_blank"
-    rel="noopener"
-    class="float-right"
-    title="If you like AstroWind, give us a star."
-    href="https://github.com/onwidget/astrowind"
-  >
-    <img
-      src="https://img.shields.io/github/stars/onwidget/astrowind.svg?style=social&label=Stars&maxAge=86400"
-      alt="Follow @onWidget"
-      width="84"
-      height="20"
-    />
-  </a>
+    href="https://discord.gg/6HKR2YRvNg"
+    class="hover:underline text-gray-200 dark:text-slate-400 px-1">We have a new Discord, check it out here!</a>
 </div>

src/pages/index.astro

@@ -2,6 +2,7 @@
 import { SITE } from "~/config.mjs";
 import Layout from "~/layouts/PageLayout.astro";
 
+import Announcement from "~/components/widgets/Announcement.astro";
 import Hero from "~/components/widgets/Hero.astro";
 import Note from "~/components/widgets/Note.astro";
 import Features from "~/components/widgets/Features.astro";
@@ -20,7 +21,9 @@ const meta = {
 ---
 
 <Layout {meta}>
-  <!-- Hero Widget ******************* -->
+
+  <Announcement></Announcement>
+<!-- Hero Widget ******************* -->
 
   <Hero
     callToAction={{