From d8a039690bb7e50176ae09839fe770a8f26ce392 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 28 Mar 2023 17:53:36 +0100
Subject: [PATCH] Add a button to join on discord

---
 src/components/OpenSourceBanner.astro | 28 ++++++++++++++-------------
 src/icons/discord.svg                 | 10 ++++++++++
 2 files changed, 25 insertions(+), 13 deletions(-)
 create mode 100644 src/icons/discord.svg

diff --git a/src/components/OpenSourceBanner.astro b/src/components/OpenSourceBanner.astro
index 6603f6fc4..53ec927b0 100644
--- a/src/components/OpenSourceBanner.astro
+++ b/src/components/OpenSourceBanner.astro
@@ -7,9 +7,9 @@ const starCount = await getFormattedStars('kamranahmedse/developer-roadmap');
 
 <div class='py-6 sm:py-16 border-b border-t text-left sm:text-center bg-white'>
   <div class='max-w-[600px] container'>
-    <h2 class='text-2xl sm:text-5xl font-bold'>Open Source</h2>
+    <h2 class='text-2xl sm:text-5xl font-bold'>Community</h2>
     <p class='text-gray-600 text-sm sm:text-lg leading-relaxed my-2.5 sm:my-5'>
-      The project is OpenSource, <a
+      roadmap.sh is the <a
         href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'
         target='_blank'
         class='font-medium text-gray-600 hover:text-black underline underline-offset-2'
@@ -17,23 +17,25 @@ const starCount = await getFormattedStars('kamranahmedse/developer-roadmap');
       > and is visited by hundreds of thousands of developers every month.
     </p>
 
-    <div class='block mb-1.5 sm:mb-0'>
+    <div class='flex justify-start flex-col sm:flex-row sm:justify-center gap-2 sm:gap-3 mb-1.5 sm:mb-0'>
       <a
         href='https://github.com/kamranahmedse/developer-roadmap'
         target='_blank'
-        class='inline-flex items-center group rounded-md relative'
+        class='inline-flex items-center border border-black py-1.5 px-3 rounded-lg text-sm hover:text-white hover:bg-black bg-white'
       >
-        <span
-          class='inline-flex items-center border border-black py-1.5 px-3 rounded-lg text-sm group-hover:text-white group-hover:bg-black relative bg-white'
-        >
-          <div class='mr-1 -ml-1'>
-            <Icon icon='star' />
-          </div>
+          <Icon icon='star' class='mr-1 -ml-1 fill-current' />
 
           <span class='lowercase'>{starCount}</span>
-          <span class='ml-1.5 group-hover:hidden'>GitHub Stars</span>
-          <span class='ml-2 hidden group-hover:block'>Star us on GitHub</span>
-        </span>
+          <span class='ml-2 hover:block'>GitHub Stars</span>
+      </a>
+
+      <a
+        href='https://discord.gg/cJpEt5Qbwa'
+        target='_blank'
+        class='relative pointer inline-flex items-center border border-black py-1.5 px-3 rounded-lg text-sm hover:text-white hover:bg-black bg-white group'
+      >
+        <Icon icon='discord' class='h-[14px] mr-2 -ml-1 fill-current' />
+        Join on Discord <span class="rounded-sm ml-0.5 px-1.5 py-0.5 text-xs uppercase">/ New</span>
       </a>
     </div>
   </div>
diff --git a/src/icons/discord.svg b/src/icons/discord.svg
new file mode 100644
index 000000000..635ef1e61
--- /dev/null
+++ b/src/icons/discord.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1303_4)">
+<path d="M2.79481 1.71886C2.80349 1.70994 2.81651 1.70101 2.82953 1.68762C3.86686 0.830474 5.25576 0.392973 6.23667 0.183152C7.20455 -0.0266694 8.17242 0.540293 8.48492 1.50012C8.48925 1.51798 8.49792 1.53136 8.5023 1.54922C6.87467 1.71886 5.42067 2.17869 4.24013 2.89744C3.93196 3.08494 3.83214 3.49565 4.01443 3.81708C4.13596 4.0269 4.35296 4.14298 4.57434 4.14298C4.68717 4.14298 4.80438 4.11172 4.90855 4.04923C6.23667 3.23672 7.9988 2.80815 9.99967 2.80815C12.0005 2.80815 13.7627 3.23672 15.0908 4.04923C15.4033 4.23673 15.8026 4.13404 15.9849 3.81708C16.1672 3.49565 16.0674 3.08494 15.7592 2.89744C14.5787 2.17869 13.1247 1.71886 11.4971 1.54922C11.5014 1.53136 11.5101 1.51798 11.5144 1.50012C11.8269 0.540293 12.7948 -0.0266694 13.7627 0.183152C14.7436 0.392973 16.1325 0.830474 17.1698 1.68762C17.1828 1.70101 17.1958 1.70994 17.2045 1.71886C18.1681 2.63851 19.9476 7.31707 19.9476 11.5671C19.9476 11.6831 19.9215 11.7947 19.8651 11.8974C18.8061 13.8126 16.3104 14.5135 15.2818 14.7233C15.1559 14.7501 15.03 14.7635 14.9042 14.7635C14.2879 14.7635 13.6933 14.4599 13.3243 13.9331L13.0986 13.6162C15.3339 13.0715 16.4797 12.0894 16.5448 12.0314C16.8183 11.7903 16.853 11.3707 16.6186 11.0894C16.3842 10.8082 15.9763 10.7724 15.7028 11.009C15.6681 11.0403 13.754 12.6341 9.99967 12.6341C6.22796 12.6341 4.31392 11.0269 4.29655 11.009C4.02311 10.7724 3.61078 10.8082 3.38075 11.0939C3.15071 11.3751 3.1811 11.7947 3.45453 12.0314C3.51964 12.0894 4.66546 13.0715 6.90071 13.6162L6.67501 13.9331C6.30609 14.4599 5.71146 14.7635 5.09517 14.7635C4.9693 14.7635 4.84342 14.7501 4.71755 14.7233C3.68891 14.5135 1.19325 13.8126 0.134222 11.8974C0.0777986 11.7947 0.0517578 11.6831 0.0517578 11.5671C0.0517578 7.31707 1.83127 2.63851 2.79481 1.71886ZM12.8078 10.3573C13.6368 10.3573 14.3096 9.56707 14.3096 8.58941C14.3096 7.61171 13.6368 6.82156 12.8078 6.82156C11.9745 6.82156 11.3018 7.61171 11.3018 8.58941C11.3018 9.56707 11.9745 10.3573 12.8078 10.3573ZM7.20455 10.393C8.04221 10.393 8.72363 9.59386 8.72363 8.60724C8.72363 7.62067 8.04221 6.82156 7.20455 6.82156C6.36251 6.82156 5.68542 7.62067 5.68542 8.60724C5.68542 9.59386 6.36251 10.393 7.20455 10.393Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_1303_4">
+<rect width="20" height="15" fill="currentColor"/>
+</clipPath>
+</defs>
+</svg>