Fix: Stats count up

src/Components/Button.tsx

@@ -0,0 +1,35 @@
+import { motion } from "framer-motion";
+export const buttonVariants = {
+  initial: {
+    y: 0,
+  },
+  hover: {
+    y: "0.5vw",
+  },
+};
+const Button = ({
+  onclick,
+  contents,
+}: {
+  onclick: () => void;
+  contents: string;
+}) => {
+  return (
+    <div
+      className="relative md:w-[10vw] md:h-[3vw] w-[25vw] h-[7vw] mt-4"
+      onClick={onclick}
+    >
+      <motion.button
+        className="absolute top-0 w-full h-full border-2 rounded-full p-[0.5vw] bg-black text-white md:text-[1.2vw] text-[4vw]"
+        variants={buttonVariants}
+        initial="initial"
+        animate="initial"
+        whileHover="hover"
+      >
+        {contents}
+      </motion.button>
+      <div className="absolute top-0 translate-y-[1.2vw] md:translate-y-[0.5vw]  border-2 w-full h-full rounded-full bg-white z-[-1]"></div>
+    </div>
+  );
+};
+export default Button;

src/Components/Landing/LandingVariants.tsx

@@ -1,31 +1,24 @@
-export const buttonVariants = {
-  initial: {
-    y: 0
-  },
-  hover: {
-    y: "0.5rem"
-  }
-};
+
 export const starVariants = {
   initial: {
     rotate: 0,
-    scale: 1
+    scale: 1,
   },
   animate: {
     rotate: Array.from({ length: 360 }, (_, i) => i + 10),
-    scale: [1, 1.1, 0.9, 1]
-  }
+    scale: [1, 1.1, 0.9, 1],
+  },
 };
 
 export const AppearingVariants = {
   initial: {
-    opacity: 0
+    opacity: 0,
   },
   animate: {
     opacity: 1,
     transition: {
       staggerChildren: 0.1,
-      delayChildren: 0.5
-    }
-  }
+      delayChildren: 0.5,
+    },
+  },
 };

src/Components/Landing/Star.tsx

@@ -2,16 +2,17 @@ import { motion } from "framer-motion";
 import { AppearingVariants, starVariants } from "./LandingVariants";
 import { useEffect, useRef, useState } from "react";
 import star from "../../Assets/Images/Star.svg";
+
 const Star = ({
   index,
-  rect
+  rect,
 }: {
   index: number;
   rect: React.RefObject<HTMLDivElement>;
 }) => {
   const [x, setX] = useState(Math.floor(Math.random() * 100));
   const [y, setY] = useState(10 + Math.floor(Math.random() * 70));
-  const [w, setW] = useState(3 + Math.floor(Math.random() * 7));
+  const [w, setW] = useState((5 + Math.random() * 5) / 5);
   const [overlap, setOverlap] = useState(false);
   const starref = useRef<HTMLDivElement>(null);
   const check_overlap = (
@@ -37,7 +38,7 @@ const Star = ({
     if (overlap) {
       setX(Math.floor(Math.random() * 100));
       setY(10 + Math.floor(Math.random() * 70));
-      setW(3 + Math.floor(Math.random() * 5));
+      setW((5 + Math.random() * 5) / 5);
     }
   });
   return (
@@ -48,7 +49,7 @@ const Star = ({
         style={{
           top: `${y}%`,
           left: `${x}%`,
-          position: "absolute"
+          position: "absolute",
           // boxShadow: "0px 0px 40px 20px #ffffff"
         }}
       >
@@ -62,12 +63,12 @@ const Star = ({
             transition={{
               delay: index * 0.1,
               duration: 8 + Math.floor(Math.random() * 4),
-              repeat: Infinity
+              repeat: Infinity,
             }}
             style={{
-              width: `${w}vh`,
+              width: `${w}vw`,
               opacity: 0.4,
-              filter: "drop-shadow(0px 0px 8px white)"
+              filter: "drop-shadow(0px 0px 8px white)",
             }}
           />
         </div>

src/Components/Landing/TextArea.tsx

@@ -1,35 +1,24 @@
-import { motion } from "framer-motion";
-import { buttonVariants } from "./LandingVariants";
 import { forwardRef, LegacyRef } from "react";
-
-const Text = forwardRef((props, ref: LegacyRef<HTMLDivElement>) => {
+import Button from "../Button";
+const Text = forwardRef((_props, ref: LegacyRef<HTMLDivElement>) => {
   return (
     <div
       className="flex flex-col justify-center mt-[20vh]"
       id="textarea"
       ref={ref}
     >
       <div className="">
-        <div className="text-[4vh] text-white">DS3</div>
-        <div className="flex text-white text-[5vw] leading-[4vw] ml-[-0.1rem]">
+        <div className=" lg:text-[4vw] text-white">DS3</div>
+        <div className="flex text-white lg:text-[5vw] leading-[4vw] ml-[-0.1rem] text-[6vw]">
           <div className="text-[#F58134]">Learn</div>,
           <div className="text-[#19B5CA] ml-[0.5rem]">Build</div>,
           <div className="text-[#A9A9A9] ml-[0.5rem]">Innovate</div>, With Data
         </div>
-        <div className="mt-4 text-[1vw]">
+        <div className="mt-4 md:text-[1.5vw] text-[4vw] sm:text-[3vw]">
           We are here to expand the horizons of data science as a community
           together.
         </div>
-        <motion.button
-          className="mt-10 w-40 h-14 border-2 rounded-full bg-black text-white text-lg"
-          variants={buttonVariants}
-          initial="initial"
-          animate="initial"
-          whileHover="hover"
-        >
-          Join Us
-        </motion.button>
-        <div className="mt-[-3rem] w-40 h-14 border-2 rounded-full bg-white z-[-1]"></div>
+        <Button contents="JOIN US" onclick={() => {}} />
       </div>
     </div>
   );

src/Components/Page/Footer.tsx

@@ -1,78 +1,22 @@
-import { FaDiscord, FaGithub, FaLinkedinIn } from "react-icons/fa6";
-import { SiGmail } from "react-icons/si";
 import { baseURL } from "../../Utils/info";
+import SocialMedia from "./SocialMedia";
+import Sponsers from "./Sponsers";
 
 const Footer = () => {
-  const btnClass =
-    "btn rounded-full text-white text-lg w-12 p-0 border-none bg-[#202020] hover:bg-[#282828] glow";
-
   return (
     <div className="border-t border-[--border-color] flex py-8 bg-[#181818]">
       <div className="flex flex-col flex-1 gap-3 items-center">
-        <img src={`${baseURL}/src/Assets/Images/big-logo-light.png`} alt="DS3 Logo" className="w-40" />
+        <img
+          src={`${baseURL}/src/Assets/Images/big-logo-light.png`}
+          alt="DS3 Logo"
+          className="w-40"
+        />
         <div className="flex flex-col gap-2 items-center text-sm font-medium">
           <span>© 2024 Data Science Student Society, All Rights Reserved</span>
         </div>
       </div>
-      <div
-        id="quick-link"
-        className="flex flex-1 justify-center gap-x-20 border-x border-[--border-color]"
-      >
-        <div className="flex flex-col gap-y-2 justify-center">
-          <h4 className="text-lg font-bold mb-2 text-white">Information</h4>
-          <a href="" className="hover:underline">
-            About
-          </a>
-          <a href="" className="hover:underline">
-            Events
-          </a>
-        </div>
-        <div className="flex flex-col gap-y-2 justify-center">
-          <h4 className="text-lg font-bold mb-2 text-white">Get Involved</h4>
-          <a href="" className="hover:underline">
-            Projects
-          </a>
-          <a href="" className="hover:underline">
-            Consulting
-          </a>
-        </div>
-      </div>
-      <div
-        id="social-media-links"
-        className="flex flex-col flex-1 items-center justify-center gap-y-8"
-      >
-        <h4 className="text-lg font-bold text-white">Social Links</h4>
-        <div className="flex items-center w-[20vw] justify-evenly">
-          <button
-            onClick={() => window.open("https://discord.gg/fbnAP848V9", "_blank")}
-            className={btnClass}
-            title={"Discord"}
-          >
-            <FaDiscord />
-          </button>
-          <button
-            onClick={() => window.open("mailto:[email protected]", "_blank")}
-            className={btnClass}
-            title={"Mail"}
-          >
-            <SiGmail />
-          </button>
-          <button
-            onClick={() => window.open("https://github.com/TheBoyRoy05/", "_blank")}
-            className={btnClass}
-            title={"Github"}
-          >
-            <FaGithub />
-          </button>
-          <button
-            onClick={() => window.open("https://www.linkedin.com/in/issacroy/", "_blank")}
-            className={btnClass}
-            title={"LinkedIn"}
-          >
-            <FaLinkedinIn />
-          </button>
-        </div>
-      </div>
+      <Sponsers />
+      <SocialMedia />
     </div>
   );
 };

src/Components/Page/SocialMedia.tsx

@@ -0,0 +1,48 @@
+import { FaDiscord, FaGithub, FaLinkedinIn } from "react-icons/fa6";
+import { SiGmail } from "react-icons/si";
+
+const SocialMedia = () => {
+  const btnClass =
+    "btn rounded-full text-white text-lg w-12 p-0 border-none bg-[#202020] hover:bg-[#282828] glow";
+
+  return (
+    <div
+      id="social-media-links"
+      className="flex flex-col flex-1 items-center justify-center gap-y-8"
+    >
+      <h4 className="text-lg font-bold text-white">Social Links</h4>
+      <div className="flex items-center w-[20vw] justify-evenly">
+        <button
+          onClick={() => window.open("https://discord.gg/fbnAP848V9", "_blank")}
+          className={btnClass}
+          title={"Discord"}
+        >
+          <FaDiscord />
+        </button>
+        <button
+          onClick={() => window.open("mailto:[email protected]", "_blank")}
+          className={btnClass}
+          title={"Mail"}
+        >
+          <SiGmail />
+        </button>
+        <button
+          onClick={() => window.open("https://github.com/TheBoyRoy05/", "_blank")}
+          className={btnClass}
+          title={"Github"}
+        >
+          <FaGithub />
+        </button>
+        <button
+          onClick={() => window.open("https://www.linkedin.com/in/issacroy/", "_blank")}
+          className={btnClass}
+          title={"LinkedIn"}
+        >
+          <FaLinkedinIn />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SocialMedia;

src/Components/Page/Sponsers.tsx

@@ -0,0 +1,41 @@
+import { baseURL } from "../../Utils/info";
+
+const Sponsers = () => {
+  return (
+    <div
+      id="sponsers"
+      className="flex-1 flex flex-col justify-center items-center border-x border-[--border-color] px-[2vw]"
+    >
+      <h4 className="text-lg font-bold text-white">Our Sponsers</h4>
+      <div className="flex justify-center gap-x-[2vw]">
+        <img
+          src={`${baseURL}/src/Assets/Images/CSE_logo.png`}
+          alt="CSE @ UCSD"
+          className="w-[4vw] h-auto object-contain"
+        />
+        <img
+          src={`${baseURL}/src/Assets/Images/HDSI_logo_light.png`}
+          alt="HDSI @ UCSD"
+          className="w-[10vw] h-auto object-contain"
+        />
+        <img
+          src={`${baseURL}/src/Assets/Images/palantir-vector-logo.svg`}
+          alt="Palantir"
+          className="w-[8vw] h-auto object-contain"
+        />
+      </div>
+      <p className="mt-[1vw]">
+        View our sponsor packet{" "}
+        <a href="https://www.ds3ucsd.com/documents/DS3_Sponsors_23-24.pdf" className="underline">
+          here
+        </a>{" "}
+        or contact us at{" "}
+        <a href="mailto:[email protected]" className="underline">
+          [email protected]
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default Sponsers;

src/Pages/Home/Home.tsx

@@ -1,8 +1,7 @@
 import Page from "../../Components/Page/Page";
 import AboutUs from "./AboutUs";
-import Events from "./WhereWeBeen";
+import WhereWeBeen from "./WhereWeBeen";
 import Landing from "./Landing";
-import Sponsers from "./Sponsers";
 import Stats from "./Stats";
 
 const Home = () => {
@@ -11,8 +10,7 @@ const Home = () => {
       <Landing />
       <AboutUs />
       <Stats />
-      <Events />
-      <Sponsers />
+      <WhereWeBeen />
     </Page>
   );
 };

src/Pages/Home/Landing.tsx

@@ -11,7 +11,7 @@ const Landing = () => {
     setRendered(true);
   }, []);
   return (
-    <div className="flex flex-col w-[80vw] min-h-[90vh] mx-auto">
+    <div className="flex flex-col lg:w-[80vw] w-[95vw] min-h-[90vh] mx-auto">
       {rendered && <Stars rect={TextAreaRef} />}
       <TextArea ref={TextAreaRef} />