New Footer Design Updates

Author: Jatin Yadav

components/Footer.js

@@ -1,5 +1,7 @@
 import React from "react";
 import dynamic from "next/dynamic";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGithub, faProductHunt, faTwitter } from '@fortawesome/free-brands-svg-icons';
 
 const ThemeToggle = dynamic(() => import("./ThemeToggle"), {
   ssr: false,
@@ -10,38 +12,43 @@ const Footer = () => {
   return (
     <>
       <div className="footer" role="footer" >
-        <footer className="copyright">
-          <div className="footer-question">
-            <h4>
-              Made by{" "}
-              <a
-                href="https://swapnilsparsh.github.io"
-                target="_blank"
-                rel="noreferrer"
-                aria-label="Follow Swapnil Srivastava on Github"
+
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignContent: 'center', margin: 'auto 5rem', padding: '1rem 0rem' }} >
+          <p style={{ color: "white" }} aria-label="Copyright by DevEmpire">Copyright © DevEmpire {year}.</p>
+          <p>
+            Made by{" "}
+            <a
+              href="https://swapnilsparsh.github.io"
+              target="_blank"
+              rel="noreferrer"
+              aria-label="Follow Swapnil Srivastava on Github"
               // title="Github (External Link)"
-              >
-                {" "}
-                Swapnil Srivastava
-              </a>{" "}
+              style={{ color: 'white' }}>
+              {" "}
+              Swapnil
+            </a>{" "}
 
-              and
+            &
 
-              <a
-                href="https://jatiinyadav.github.io"
-                target="_blank"
-                rel="noreferrer"
-                aria-label="Follow Jatin Yadav on Github"
+            <a
+              href="https://jatiinyadav.github.io"
+              target="_blank"
+              rel="noreferrer"
+              aria-label="Follow Jatin Yadav on Github"
               // title="Github (External Link)"
-              >
-                {" "}
-                Jatin Yadav
-              </a>
-            </h4>
-            <br />
-            <p style={{ color: "white" }} aria-label="Copyright by DevEmpire">Copyright © {year} DevEmpire</p>
+              style={{ color: 'white' }}>
+              {" "}
+              Jatin
+            </a>
+          </p>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignContent: 'center', gap: '1rem', cursor: 'pointer', color: 'white' }}>
+            <p style={{ marginTop: '.1rem' }}>SUPPORT</p>
+            <p style={{ marginTop: '.1rem' }}>|</p> 
+            <a href="https://github.com/swapnilsparsh/DevEmpire" target="_blank"><FontAwesomeIcon icon={faGithub} size="xl" inverse /></a>
+            <a href="https://www.producthunt.com/products/developer-empire?utm_source=badge-featured&utm_medium=badge#developer-empire" target="_blank"><FontAwesomeIcon icon={faProductHunt} size="xl" inverse /></a>
+            <a href="https://twitter.com/intent/tweet?text=Check%20out%20this%20awesome%20website%20having%20a%20collection%20of%20all%20the%20campus%20ambassador%20and%20fellowship%20programs&url=https://devempire.netlify.app&via=swapnilsparsh" target="_blank"><FontAwesomeIcon icon={faTwitter} size="xl" inverse /></a>
           </div>
-        </footer>
+        </div>
 
       </div>
     </>

styles/globals.css

@@ -921,7 +921,6 @@ input.search {
   width: inherit;
   border-radius: inherit;
   overflow: hidden;
-  -webkit-mask-image: -webkit-radial-gradient(white, black);
 }
 
 .container .card-js .content .glow-button .glowing-button::before {
@@ -1100,10 +1099,6 @@ input.search {
   background-color: var(--navbar-color);
   background-repeat: no-repeat;
   background-size: 100%;
-  padding: 2rem 0rem 2rem 0rem;
-  display: grid;
-  grid-template-columns: auto auto;
-  width: 100%;
 }
 
 .footer-question {
@@ -1290,7 +1285,7 @@ input.search {
 .back-to-top .top {
   position: fixed;
   cursor: pointer;
-  bottom: 20px;
+  bottom: 7px;
   right: 15px;
   font-size: 16px;
   color: var(--native1);