From f41a4220ddf4d688c9b10e279795e66436ad258a Mon Sep 17 00:00:00 2001
From: Vitor <marthendalnunes@gmail.com>
Date: Fri, 23 Jun 2023 14:06:49 -0300
Subject: [PATCH] feat: add discord pill to main page

---
 app/(general)/page.tsx                 | 14 +++++++++++---
 components/layout/dashboard-footer.tsx |  8 +++++---
 components/layout/footer.tsx           |  8 +++++---
 config/site.ts                         |  2 ++
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/(general)/page.tsx b/app/(general)/page.tsx
index a7e937d4..bfb01fa3 100644
--- a/app/(general)/page.tsx
+++ b/app/(general)/page.tsx
@@ -2,7 +2,7 @@
 
 import { motion } from 'framer-motion'
 import Image from 'next/image'
-import { FaGithub } from 'react-icons/fa'
+import { FaDiscord, FaGithub } from 'react-icons/fa'
 import Balancer from 'react-wrap-balancer'
 
 import { WalletAddress } from '@/components/blockchain/wallet-address'
@@ -51,7 +51,7 @@ export default function Home() {
             <motion.p className="mt-6 text-center text-gray-500 dark:text-gray-200 md:text-xl" variants={FADE_DOWN_ANIMATION_VARIANTS}>
               <Balancer className="text-xl font-semibold">{siteConfig.description}</Balancer>
             </motion.p>
-            <motion.div className="mx-auto mt-6 flex items-center justify-center space-x-5" variants={FADE_DOWN_ANIMATION_VARIANTS}>
+            <motion.div className="mx-auto mt-6 flex flex-wrap items-center justify-center gap-y-3 space-x-4" variants={FADE_DOWN_ANIMATION_VARIANTS}>
               <a
                 className="group flex max-w-fit items-center justify-center space-x-2 rounded-full border border-black bg-black px-5 py-2 text-sm text-white transition-colors hover:bg-white hover:text-black"
                 href={DEPLOY_URL}
@@ -64,12 +64,20 @@ export default function Home() {
               </a>
               <a
                 className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-gray-300 bg-white px-5 py-2 text-sm text-gray-600 shadow-md transition-colors hover:border-gray-800"
-                href="https://github.com/turbo-eth/template-web3-app"
+                href={siteConfig.links.github}
                 rel="noopener noreferrer"
                 target="_blank">
                 <FaGithub />
                 <p>Star on GitHub</p>
               </a>
+              <a
+                className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-indigo-400 bg-indigo-500 px-5 py-2 text-sm text-white shadow-md transition-colors hover:border-indigo-600"
+                href={siteConfig.links.discord}
+                rel="noopener noreferrer"
+                target="_blank">
+                <FaDiscord />
+                <p>Join us on Discord</p>
+              </a>
             </motion.div>
             <span className="tag mt-6">⚡️TurboETH is in active development.</span>
           </motion.div>
diff --git a/components/layout/dashboard-footer.tsx b/components/layout/dashboard-footer.tsx
index 4af77e00..7a66333a 100644
--- a/components/layout/dashboard-footer.tsx
+++ b/components/layout/dashboard-footer.tsx
@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react'
 
-import { FaGithub, FaTwitter } from 'react-icons/fa'
+import { FaDiscord, FaGithub, FaTwitter } from 'react-icons/fa'
 
 import { siteConfig } from '@/config/site'
 import { cn } from '@/lib/utils'
@@ -16,14 +16,16 @@ export function DashboardFooter({ className, ...props }: HTMLAttributes<HTMLElem
       <a className="link my-2 text-xs" href="https://districtlabs.com/" rel="noreferrer" target={'_blank'}>
         Built by District Labs
       </a>
-      <div className="mt-2 flex items-center">
+      <div className="mt-2 flex items-center space-x-2">
         <LinkComponent href={`${siteConfig.links.github}`}>
           <FaGithub />
         </LinkComponent>
-        <div className="mx-2" />
         <LinkComponent href={`${siteConfig.links.twitter}`}>
           <FaTwitter />
         </LinkComponent>
+        <LinkComponent href={`${siteConfig.links.discord}`}>
+          <FaDiscord />
+        </LinkComponent>
       </div>
     </footer>
   )
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 86669d71..23198fa4 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react'
 
-import { FaGithub, FaTwitter } from 'react-icons/fa'
+import { FaDiscord, FaGithub, FaTwitter } from 'react-icons/fa'
 
 import { siteConfig } from '@/config/site'
 import { cn } from '@/lib/utils'
@@ -16,14 +16,16 @@ export function Footer({ className, ...props }: HTMLAttributes<HTMLElement>) {
       <a className="link my-2 text-xs" href="https://districtlabs.com/" rel="noreferrer" target={'_blank'}>
         Built by District Labs
       </a>
-      <div className="mt-2 flex items-center">
+      <div className="mt-2 flex items-center space-x-2">
         <LinkComponent href={`${siteConfig.links.github}`}>
           <FaGithub />
         </LinkComponent>
-        <div className="mx-2" />
         <LinkComponent href={`${siteConfig.links.twitter}`}>
           <FaTwitter />
         </LinkComponent>
+        <LinkComponent href={`${siteConfig.links.discord}`}>
+          <FaDiscord />
+        </LinkComponent>
       </div>
     </footer>
   )
diff --git a/config/site.ts b/config/site.ts
index 7ed03f83..f57b60f8 100644
--- a/config/site.ts
+++ b/config/site.ts
@@ -9,6 +9,7 @@ interface SiteConfig {
   previewImg: string
   localeDefault: string
   links: {
+    discord: string
     twitter: string
     github: string
   }
@@ -24,6 +25,7 @@ export const siteConfig: SiteConfig = {
   previewImg: `${SITE_CANONICAL}/preview.png`,
   localeDefault: 'en',
   links: {
+    discord: 'https://discord.gg/U4jy7Xfh76',
     twitter: 'https://twitter.com/district_labs',
     github: 'https://github.com/turbo-eth',
   },