Merge pull request #16 from ucsdds3/feature

Feature

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

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

src/Components/Landing/Star.tsx

@@ -0,0 +1,81 @@
+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,
+}: {
+  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((5 + Math.random() * 5) / 5);
+  const [overlap, setOverlap] = useState(false);
+  const starref = useRef<HTMLDivElement>(null);
+  const check_overlap = (
+    rect1: DOMRect | undefined,
+    rect2: DOMRect | undefined
+  ) => {
+    if (!rect1 || !rect2) return false;
+    return !(
+      rect1.right < rect2.left ||
+      rect1.left > rect2.right ||
+      rect1.bottom < rect2.top ||
+      rect1.top > rect2.bottom
+    );
+  };
+
+  useEffect(() => {
+    setOverlap(
+      check_overlap(
+        rect.current?.getBoundingClientRect(),
+        starref.current?.getBoundingClientRect()
+      )
+    );
+    if (overlap) {
+      setX(Math.floor(Math.random() * 100));
+      setY(10 + Math.floor(Math.random() * 70));
+      setW((5 + Math.random() * 5) / 5);
+    }
+  });
+  return (
+    <>
+      <motion.div
+        variants={AppearingVariants}
+        key={index}
+        className="m-4"
+        style={{
+          top: `${y}%`,
+          left: `${x}%`,
+          position: "absolute",
+          // boxShadow: "0px 0px 40px 20px #ffffff"
+        }}
+      >
+        <div ref={starref}>
+          <motion.img
+            src={star}
+            alt=""
+            variants={starVariants}
+            initial="initial"
+            animate="animate"
+            transition={{
+              delay: index * 0.1,
+              duration: 8 + Math.floor(Math.random() * 4),
+              repeat: Infinity,
+            }}
+            style={{
+              width: `${w}vw`,
+              opacity: 0.4,
+              filter: "drop-shadow(0px 0px 8px white)",
+            }}
+          />
+        </div>
+      </motion.div>
+    </>
+  );
+};
+
+export default Star;

src/Components/Landing/Stars.tsx

@@ -1,65 +1,18 @@
 import { motion } from "framer-motion";
-import star from "/src/Assets/Images/Star.svg";
+import { AppearingVariants } from "./LandingVariants";
+import Star from "./Star";
+import { RefObject } from "react";
 
-const starVariants = {
-  initial: {
-    rotate: 0
-  },
-  animate: {
-    rotate: Array.from({ length: 360 }, (_, i) => i + 10)
-  }
-};
-
-const AppearingVariants = {
-  initial: {
-    opacity: 0
-  },
-  animate: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.1,
-      delayChildren: 0.5
-    }
-  }
-};
-
-const Stars = () => {
+const Stars = ({ rect }: { rect: RefObject<HTMLDivElement> }) => {
   return (
     <motion.div
       variants={AppearingVariants}
       initial="initial"
       animate="animate"
       className="z-[-10]"
     >
-      {Array.from({ length: 10 }, (_, index) => {
-        const randomX = 10 + Math.floor(Math.random() * 80);
-        const randomY = 5 + Math.floor(Math.random() * 80);
-        return (
-          <motion.div
-            variants={AppearingVariants}
-            key={index}
-            style={{
-              top: `${randomY}%`,
-              left: `${randomX}%`,
-              position: "absolute",
-              opacity: 0.2
-            }}
-          >
-            <motion.img
-              src={star}
-              alt=""
-              className="w-[20%]"
-              variants={starVariants}
-              initial="initial"
-              animate="animate"
-              transition={{
-                delay: index * 0.1,
-                duration: 10,
-                repeat: Infinity
-              }}
-            />
-          </motion.div>
-        );
+      {Array.from({ length: 12 }, (_, index) => {
+        return <Star index={index} rect={rect} key={index} />;
       })}
     </motion.div>
   );

src/Components/Landing/TextArea.tsx

@@ -1,40 +1,26 @@
-import { motion } from "framer-motion";
-
-const buttonVariants = {
-  initial: {
-    y: 0
-  },
-  hover: {
-    y: "0.5rem"
-  }
-};
-
-const Text = () => {
+import { forwardRef, LegacyRef } from "react";
+import Button from "../Button";
+const Text = forwardRef((_props, ref: LegacyRef<HTMLDivElement>) => {
   return (
-    <div className="flex flex-col justify-center mt-[20vh]">
+    <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-[7vw] 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">
+        <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>
   );
-};
+});
 export default Text;

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>
   );
 };