feat: Added discord link

package.json

@@ -14,6 +14,7 @@
     "youtube": "https://www.youtube.com/@SimeonRadivoev",
     "issues": "https://github.com/simeonradivoev/gameflow-deck/issues",
     "store": "https://github.com/simeonradivoev/gameflow-store",
+    "discord": "https://discord.gg/R9KakhY67d",
     "license": "https://github.com/simeonradivoev/gameflow-deck/blob/master/LICENSE",
     "packages": "https://www.npmjs.com/search?q=maintainer%3Asimeonradivoev%20keywords%3Agameflow",
     "aboutus": "https://simeonradivoev.com",

src/components/Community.astro

@@ -0,0 +1,24 @@
+---
+import { Discord } from "simple-icons-astro";
+import pkg from "../../package.json";
+---
+
+<div class="hero bg-base-300 min-h-[30vh]">
+  <div class="hero-content flex-col text-center">
+    <div class="text-accent/60 text-lg">Discord</div>
+    <div class="text-4xl font-semibold">Join Our Community</div>
+    <div class="text-2xl font-semibold">
+      Have a suggestion, feedback or just a question?
+    </div>
+    <div class="flex flex-wrap gap-2 justify-center md:justify-start">
+      <a
+        class="bg-primary rounded-full text-primary-content p-2 px-4 hover:bg-accent hover:text-accent-content cursor-pointer flex gap-2"
+        href={pkg.socials.discord}
+        target="_blank"
+      >
+        <Discord />
+        Join Us
+      </a>
+    </div>
+  </div>
+</div>

src/components/Footer.astro

@@ -17,6 +17,7 @@ import pkg from "../../package.json";
     <a class="link link-hover" href={pkg.socials.aboutus}>About us</a>
     <a class="link link-hover" href={pkg.socials.packages}>Packages</a>
     <a class="link link-hover" href={pkg.socials.store}>Store</a>
+    <a class="link link-hover" href={pkg.socials.discord}>Discord</a>
     <a class="link link-hover" href={pkg.sponsor.url}>Sponsor</a>
   </nav>
   <nav>

src/components/Header.astro

@@ -1,5 +1,5 @@
 ---
-import { Github } from "simple-icons-astro";
+import { Github, Discord } from "simple-icons-astro";
 import { HandCoins } from "@lucide/astro";
 import Icon from "../assets/icon.svg";
 import pkg from "../../package.json";
@@ -21,9 +21,14 @@ import { releaseData } from "../scripts/getters";
       href={pkg.sponsor.url}
       ><HandCoins />
     </a>
+    <a
+      class="hidden md:flex gap-2 bg-base-300 cursor-pointer rounded-full p-1 px-3 text-xl hover:bg-accent hover:text-accent-content"
+      href={pkg.socials.discord}
+      ><Discord />
+    </a>
     <a
       title="Sponsor"
-      class="hidden sm:hidden md:flex gap-2 bg-base-300 cursor-pointer rounded-full p-1 px-3 text-xl hover:bg-accent hover:text-accent-content"
+      class="hidden md:flex gap-2 bg-base-300 cursor-pointer rounded-full p-1 px-3 text-xl hover:bg-accent hover:text-accent-content"
       href={pkg.socials.github}
       ><Github />GitHub
     </a>

src/components/Integrations.astro

@@ -1,39 +1,49 @@
 ---
 import { Puzzle } from "@lucide/astro";
+import { Rclone } from "simple-icons-astro";
 import { emulators } from "../scripts/getters";
 ---
 
 <div class="divider sm:my-8 md:my-16"><Puzzle size={48} />Integrations</div>
-<div class="grid sm:grid-cols-1 md:grid-cols-2 gap-8 p-8">
-  <ul
-    class="grid sm:grid-cols-2 md:lg:grid-cols-3 lg:grid-cols-4 gap-2 sm:border-b-3 sm:border-b-base-content/10 sm:pb-8 md:border-r-3 md:border-r-base-content/10 md:pr-8 items-start"
+<ul class="flex flex-wrap gap-2 justify-center-safe px-16">
+  <a
+    href="https://romm.app/"
+    target="_blank"
+    class="bg-base-300 rounded-full p-2 flex items-center justify-center gap-2 hover:bg-base-100"
   >
-    <li class="bg-base-300 rounded-full p-2 flex items-center justify-center">
-      ROMM
-    </li>
-    <li class="bg-base-300 rounded-full p-2 flex items-center justify-center">
-      Emulator JS
-    </li>
-    <li class="bg-base-300 rounded-full p-2 flex items-center justify-center">
-      RClone
-    </li>
-    <li class="bg-base-300 rounded-full p-2 flex items-center justify-center">
-      UMU
-    </li>
-  </ul>
-
-  <ul class="grid sm:grid-cols-1 md:lg:grid-cols-2 lg:grid-cols-3 gap-2">
-    {
-      emulators.map((e) => (
-        <a
-          class="bg-base-300 rounded-full p-2 flex items-center justify-center gap-2 hover:bg-base-100"
-          href={e.homepage}
-          target="_blank"
-        >
-          <img class="size-8" src={e.logo} />
-          <div>{e.name}</div>
-        </a>
-      ))
-    }
-  </ul>
-</div>
+    <img
+      class="size-8"
+      src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/romm.svg"
+    />ROMM
+  </a>
+  <a
+    href="https://emulatorjs.org/"
+    target="_blank"
+    class="bg-base-300 rounded-full p-2 flex items-center justify-center gap-2 hover:bg-base-100"
+  >
+    <img
+      class="size-8"
+      src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/emulatorjs.svg"
+    />
+    Emulator JS
+  </a>
+  <a
+    href="https://rclone.org/"
+    target="_blank"
+    class="bg-base-300 rounded-full p-2 flex items-center justify-center gap-2 hover:bg-base-100"
+  >
+    <Rclone size="32" />RClone
+  </a>
+  {
+    emulators.map((e) => (
+      <a
+        class="bg-base-300 rounded-full p-2 flex items-center justify-center gap-2 hover:bg-base-100"
+        href={e.homepage}
+        target="_blank"
+      >
+        <img class="size-8" src={e.logo} />
+        <div>{e.name}</div>
+      </a>
+    ))
+  }
+</ul>

src/components/Welcome.astro

@@ -8,6 +8,7 @@ import Integrations from "./Integrations.astro";
 import Keywords from "./Keywords.astro";
 import Footer from "./Footer.astro";
 import Features from "./Features.astro";
+import Community from "./Community.astro";
 ---
 
 <Header />
@@ -26,9 +27,10 @@ import Features from "./Features.astro";
   </div>
   <Features />
   <Integrations />
-  <div>
-    <Screenshots />
+  <div class="py-16">
+    <Community />
   </div>
+  <Screenshots />
 </div>
 <Keywords />
 <Footer />