style(project): add eslint prettier with airbnb style guide to lint t…

…he whole project and also change the .js files to .jsx for the linter to work properly and autoFormatOnSave

BREAKING CHANGE:

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['plugin:react/recommended', 'airbnb', 'prettier'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: ['react', 'prettier'],
+  rules: {
+    'prettier/prettier': 'error',
+    'react/react-in-jsx-scope': 'off',
+    'func-names': 'off',
+    'react/prop-types': 'off',
+    'react/jsx-props-no-spreading': 'off',
+  },
+};

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+    "singleQuote": true
+
+}

components/aboutUs/AboutUs.jsx

@@ -0,0 +1,83 @@
+import { motion } from 'framer-motion';
+import {
+  HiOutlineLightBulb,
+  HiOutlineUserGroup,
+  HiOutlineSparkles,
+} from 'react-icons/hi';
+
+function AboutUs() {
+  return (
+    <motion.section
+      initial="hidden"
+      animate="visible"
+      variants={{
+        hidden: {
+          scale: 0.8,
+          opacity: 0,
+        },
+        visible: {
+          scale: 1,
+          opacity: 1,
+          transition: {
+            delay: 0.2,
+          },
+        },
+      }}
+      className="py-20 mt-20"
+    >
+      {/* <!-- Heading --> */}
+      <div className="sm:w-3/4 lg:w-5/12 mx-auto px-2">
+        <h1 className="text-3xl text-center text-bookmark-blue">About Us</h1>
+      </div>
+      {/* <!-- Cards --> */}
+      <div className="container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 max-w-screen-lg mt-16">
+        {/* <!-- Card 1 --> */}
+        <div className=" transition duration-500 hover:scale-105 dark:bg-gray-900 flex flex-col rounded-md shadow-xl lg:mb-16">
+          <div className="p-10 flex flex-col items-center">
+            <HiOutlineLightBulb className="w-12 h-12" />
+            <div className="mr-4 ml-4 flex flex-col items-center">
+              <h3 className="mt-5 mb-2 text-bookmark-blue text-lg">
+                Concept of DSC
+              </h3>
+              <p className="mb-2 text-bookmark-grey font-light text-justify">
+                The DSC program is a grassroots channel through which Google
+                provides development skills, mobile and web development skills
+                for students, towards employability.
+              </p>
+            </div>
+          </div>
+        </div>
+        {/* <!-- Card 2 --> */}
+        <div className=" transition duration-500 hover:scale-105 dark:bg-gray-900 flex flex-col rounded-md shadow-xl lg:my-8">
+          <div className="p-10 flex flex-col items-center">
+            <HiOutlineSparkles className="w-12 h-12" />
+            <h3 className="mr-4 ml-4 mt-5 mb-2 text-bookmark-blue text-lg">
+              Why DSC ?
+            </h3>
+            <p className="mb-2 text-bookmark-grey font-light text-justify">
+              For students to learn development skills, solve problems through
+              technology and inspire them to be world class developers and
+              changemakers.
+            </p>
+          </div>
+        </div>
+        {/* <!-- Card 3 --> */}
+        <div className=" transition duration-500 hover:scale-105 dark:bg-gray-900 flex flex-col rounded-md shadow-xl lg:mt-16">
+          <div className="p-10 flex flex-col items-center">
+            <HiOutlineUserGroup className="w-12 h-12" />
+            <h3 className="mr-4 ml-4 mt-5 mb-2 text-bookmark-blue text-lg">
+              Target audience
+            </h3>
+            <p className="mb-2 text-bookmark-grey font-light text-justify">
+              DSC activities are targeted at University students and any others
+              including faculty members who want to learn development skills &
+              work to solve real-life problems.
+            </p>
+          </div>
+        </div>
+      </div>
+    </motion.section>
+  );
+}
+
+export default AboutUs;

components/aboutUs/AboutUsItem.jsx

@@ -0,0 +1,14 @@
+function AboutUsItem({ icon, title, content }) {
+  return (
+    <div className="flex">
+      <div className="border mx-auto max-w-xs flex-col items-start bg-white dark:bg-black shadow-lg rounded-lg py-4 px-8 my-10 transition duration-500 hover:scale-110">
+        <div className="flex justify-center -mt-16">{icon}</div>
+        <h1 className="text-gray-800 dark:text-white text-2xl font-semibold">
+          {title}
+        </h1>
+        <p className="mt-2 text-gray-600 dark:text-white">{content}</p>
+      </div>
+    </div>
+  );
+}
+export default AboutUsItem;

components/header/ActiveLink.jsx

@@ -0,0 +1,17 @@
+import { useRouter } from 'next/router';
+
+function ActiveLink({ router, href, children }) {
+  const handleClick = (event) => {
+    event.preventDefault();
+    router.push(href);
+  };
+
+  const isCurrentPath = router.pathName === href || router.asPath === href;
+  return (
+    <a href={href} className="" onClick={handleClick}>
+      {children}
+    </a>
+  );
+}
+
+export default ActiveLink;

components/header/ExternalLinkNavItem.jsx

@@ -0,0 +1,9 @@
+function ExternalLinkNavItem(props) {
+  return (
+    <li className="pr-4 text-m font-light text-gray-800 dark:text-white p-2 dark:hover:bg-gray-800 hover:bg-gray-200 rounded transition duration-500 hover:scale-110">
+      <a href={props.href}>{props.text}</a>
+    </li>
+  );
+}
+
+export default ExternalLinkNavItem;

components/header/Header.jsx

@@ -0,0 +1,29 @@
+import { FaDiscord } from 'react-icons/fa';
+import Logo from './Logo';
+import NavItem from './NavItem';
+import ThemeToggleButton from './ThemeToggleButton';
+import ActiveLink from './ActiveLink';
+
+function Header() {
+  return (
+    <nav className="flex justify-between p-4 items-center">
+      <Logo />
+      <ul className="flex gap-5 space-x-3 items-center">
+        <div className="hidden md:flex gap-5 space-x-3 items-center">
+          <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>
+        </div>
+        <ThemeToggleButton />
+      </ul>
+    </nav>
+  );
+}
+
+export default Header;