modify eslint

.prettierrc.json

@@ -1,4 +1,6 @@
 {
-    "singleQuote": true
-
+    "singleQuote": true,
+    "trailingComma": "all",
+    "printWidth": 100,
+    "tabWidth": 2
 }

components/header/DiscordJoinCommunity.jsx

@@ -0,0 +1,18 @@
+import { FaDiscord } from 'react-icons/fa';
+
+function DiscordJoinCommunity() {
+  const style = { color: 'white', fontSize: '1em' };
+
+  return (
+    <a href="https://discord.gg/F2QF5eG9">
+      <div className="flex gap-2 items-center bg-google-blue hover:bg-google-blue font-bold p-2 rounded transition duration-500 hover:scale-110">
+        <FaDiscord style={style} />
+        <h1 style={style} className="text-red">
+          Join Community
+        </h1>
+      </div>
+    </a>
+  );
+}
+
+export default DiscordJoinCommunity;

components/header/Header.jsx

@@ -1,8 +1,7 @@
-import { FaDiscord } from 'react-icons/fa';
+import DiscordJoinCommunity from './DiscordJoinCommunity';
 import Logo from './Logo';
 import NavItem from './NavItem';
 import ThemeToggleButton from './ThemeToggleButton';
-import ActiveLink from './ActiveLink';
 
 function Header() {
   return (
@@ -13,12 +12,7 @@ function Header() {
           <NavItem text="Events" href="/events" />
           <NavItem text="Team" href="/team" />
           <NavItem text="Projects" href="https://github.com/dscbitshyd" />
-          <a href="https://discord.gg/F2QF5eG9">
-            <button className="flex gap-2 items-center bg-google-blue hover:bg-google-blue text-white dark:text-white font-bold p-2 rounded transition duration-500 hover:scale-110">
-              <FaDiscord />
-              <h1 className="text-red">Join Community</h1>
-            </button>
-          </a>
+          <DiscordJoinCommunity />
         </div>
         <ThemeToggleButton />
       </ul>

components/hero/Hero.jsx

@@ -1,14 +1,15 @@
 import { motion } from 'framer-motion';
 import Image from 'next/image';
-import { FaDiscord } from 'react-icons/fa';
-
 import {
   RiFacebookCircleLine,
   RiLinkedinBoxLine,
   RiInstagramLine,
   RiMediumLine,
   RiYoutubeLine,
+  RiMailLine,
 } from 'react-icons/ri';
+import DiscordJoinCommunity from '../header/DiscordJoinCommunity';
+
 import GoogleRectangle from './GoogleRectangle';
 import SocialIcon from './SocialIcon';
 
@@ -27,7 +28,7 @@ function Hero() {
             lg:mt-20
           "
       >
-        <div className="flex flex-1 flex-col items-center lg:items-start">
+        <div className="flex flex-1 flex-col items-center lg:items-start gap-2">
           <motion.h2
             initial={{ scale: 0.8, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
@@ -93,14 +94,15 @@ function Hero() {
                 href="www.instagram.com"
                 icon={<RiYoutubeLine size={50} />}
               />
+              <SocialIcon
+                href="www.instagram.com"
+                icon={<RiMailLine size={50} />}
+              />
             </motion.div>
           </div>
-          <a href="https://discord.gg/F2QF5eG9">
-            <div className="md:hidden mt-5 flex gap-2 items-center bg-blue-500 hover:bg-blue-700 text-white font-bold p-2 rounded transition duration-500 hover:scale-110">
-              <FaDiscord />
-              <h1>Join Community</h1>
-            </div>
-          </a>
+          <div className="block lg:hidden md:hidden">
+            <DiscordJoinCommunity />
+          </div>
         </div>
         {/* <!-- The Dome --> */}
         <motion.div

components/team/BusinessDivision.jsx

@@ -6,7 +6,7 @@ function BusinessDivision() {
       <h1 className="text-2xl font-light p-8">Business Division</h1>
       <div className="grid-cols-1 md:flex gap-16 justify-center items-center">
         <TeamItem
-          url="/Mani DSC.jpg"
+          url="/Mani Venkat DSC.jpeg"
           name="Mani Venkat"
           position="Business Lead"
           github="www.github.com/saiankit"

pages/events.jsx

@@ -1,40 +1,7 @@
+/* eslint-disable jsx-a11y/alt-text */
 import Head from 'next/head';
 import { motion } from 'framer-motion';
 import Header from '../components/header/Header';
-import Hero from '../components/hero/Hero';
-import Team from '../components/team/Team';
-
-// Our custom easing
-const easing = [0.6, -0.05, 0.01, 0.99];
-
-// animate: defines animation
-// initial: defines initial state of animation or stating point.
-// exit: defines animation when component exits
-
-// Custom variant
-const fadeInUp = {
-  initial: {
-    y: 60,
-    opacity: 0,
-    transition: { duration: 0.6, ease: easing },
-  },
-  animate: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      duration: 0.6,
-      ease: easing,
-    },
-  },
-};
-
-const stagger = {
-  animate: {
-    transition: {
-      staggerChildren: 0.1,
-    },
-  },
-};
 
 export default function Events() {
   return (
@@ -69,8 +36,7 @@ export default function Events() {
         >
           <div className="flex">
             <h1 className="text-5xl font-bold tracking-wide mx-auto">
-              Stay Tuned! DSC is supercharged for providing many events
-              throughout the year!
+              Stay Tuned! DSC is supercharged for providing many events throughout the year!
             </h1>
             <img src="/events.svg" height={300} width={300} />
           </div>