Fixed <a> Tag Issues 📝

package.json

@@ -19,7 +19,6 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
-    "react-tsparticles": "^2.12.2",
     "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^2.1.5",
     "tsparticles": "^3.5.0"

src/components/AnimatedBackGround.jsx

@@ -1,6 +1,18 @@
 export default function AnimatedBackGround() {
+  //Make sure this component has the lowest z-index, overwise it would block all others
   return (
-    <ul className="circles">
+    <ul className="circles z-0">
+      {/*Each <li> is an animated square*/}
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
       <li></li>
       <li></li>
       <li></li>

src/components/Hero.jsx

@@ -1,29 +1,30 @@
 import Statistics from "./Stats/Statistics";
 import SocialMediaLinks from "./SocialMediaLinks";
 import EventsPhotoCarousel from "./EventsPhotoCarousel";
+import AnimatedBackGround from "./AnimatedBackGround";
 
 function Hero() {
   return (
-    <section className="hero">
-      <div className="hero-container">
-        <div className="md:w-1/2 flex flex-col items-center justify-between">
-          <h1 className="text-4xl md:text-6xl font-bold leading-tight px-6">
-            The Software Developers Association
-          </h1>
-          <p className="mt-4 text-xl px-6">
-            The premiere software development club for Arizona State University
-            students.
-          </p>
-          <Statistics />
-          <SocialMediaLinks />
+    <>
+      <section className="hero">
+        <AnimatedBackGround />
+        <div className="hero-container z-10">
+          <div className="md:w-1/2 flex flex-col items-center justify-between">
+            <h1 className="text-4xl md:text-6xl font-bold leading-tight px-6">
+              The Software Developers Association
+            </h1>
+            <p className="mt-4 text-xl px-6">
+              The premiere software development club for Arizona State
+              University students.
+            </p>
+            <Statistics />
+            <SocialMediaLinks />
+          </div>
+          <EventsPhotoCarousel />
         </div>
-        <EventsPhotoCarousel />
-      </div>
-    </section>
+      </section>
+    </>
   );
 }
 
 export default Hero;
-
-
-

src/components/SocialMediaLinks.jsx

@@ -2,16 +2,24 @@ import { FaLinkedin } from "react-icons/fa";
 import { RiInstagramFill } from "react-icons/ri";
 import { FaFacebookSquare } from "react-icons/fa";
 import { FaGithub } from "react-icons/fa";
-import { FaSquareXTwitter } from "react-icons/fa6";
 import { CgWebsite } from "react-icons/cg";
+import { FaDiscord } from "react-icons/fa6";
+import { IoLogoFreebsdDevil } from "react-icons/io";
 
 const socialMediaLinks = [
-  { href: "https://www.linkedin.com", icon: <FaLinkedin /> },
-  { href: "https://www.instagram.com", icon: <RiInstagramFill /> },
-  { href: "https://www.facebook.com", icon: <FaFacebookSquare /> },
-  { href: "https://www.github.com", icon: <FaGithub /> },
-  { href: "https://www.twitter.com", icon: <FaSquareXTwitter /> },
-  { href: "https://www.yourwebsite.com", icon: <CgWebsite /> },
+  { href: "https://thesoda.io/", icon: <CgWebsite /> },
+  { href: "https://www.linkedin.com/company/thesoda/", icon: <FaLinkedin /> },
+  { href: "https://www.instagram.com/soda.asu/", icon: <RiInstagramFill /> },
+  {
+    href: "https://discord.gg/the-software-developers-association-762811961238618122",
+    icon: <FaDiscord />,
+  },
+  { href: "https://www.facebook.com/SoDAASU/", icon: <FaFacebookSquare /> },
+  { href: "https://github.com/asusoda", icon: <FaGithub /> },
+  {
+    href: "https://asu.campuslabs.com/engage/organization/soda",
+    icon: <IoLogoFreebsdDevil />,
+  },
 ];
 
 export default function SocialMediaLinks() {

src/pages/Home.jsx

@@ -2,16 +2,15 @@ import InfoCards from "../components/Info/InfoCards";
 import MemberCards from "../components/Team/TeamCards";
 import Hero from "../components/Hero";
 import SponsorsMarquee from "../components/Sponsors/SponsorsMarquee";
-import AnimatedBackGround from "../components/AnimatedBackGround";
 
 function Home() {
   return (
     <section className="home area">
       <Hero />
-      <AnimatedBackGround />
       <SponsorsMarquee />
       <MemberCards />
       <InfoCards />
+      {/* <AnimatedBackGround /> */}
     </section>
   );
 }

src/styles/index.css

@@ -179,7 +179,7 @@ body {
 /* --------- STATS --------- */
 .statistics {
   @apply bg-soda-white max-md:w-screen text-soda-black flex  
-  flex-row gap-5 py-6 max-lg:px-10 px-8 my-3 justify-center flex-wrap sm:rounded-full;
+  flex-row gap-5 py-6 max-lg:px-10 px-8 my-3 justify-center flex-wrap sm:rounded-full z-10;
 }
 
 .stat-container {
@@ -236,7 +236,7 @@ footer {
 
 /* --------- SOCIAL MEDIA LINKS --------- */
 .social-media-links {
-  @apply flex gap-4 text-3xl bg-soda-white rounded-full p-4 text-soda-black justify-center max-w-80;
+  @apply flex gap-4 text-3xl bg-soda-white rounded-full py-4 px-16 text-soda-black justify-center max-w-80 z-10;
 }
 
 /* --------- BUTTON --------- */

vite.config.js

@@ -4,6 +4,9 @@ import tailwindcss from "tailwindcss";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  optimizeDeps: {
+    exclude: ['js-big-decimal']
+  },
   plugins: [react()],
   css: {
     postcss: {