Merge pull request #14 from ucsdds3/feature

Homepage Draft 1

package.json

@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "embla-carousel": "^8.3.1",
+    "embla-carousel-auto-scroll": "^8.4.0",
+    "embla-carousel-react": "^8.4.0",
     "framer-motion": "^11.11.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/App.tsx

@@ -1,13 +1,12 @@
-import { Route, Routes } from "react-router-dom"
-import Home from "./Pages/Home/Home"
+import { Route, Routes } from "react-router-dom";
+import Home from "./Pages/Home/Home";
 
 function App() {
-
   return (
     <Routes>
-      <Route path="/new-site" element={<Home />} />
+      <Route path="/" element={<Home />} />
     </Routes>
-  )
+  );
 }
 
-export default App
+export default App;

src/Components/Landing/Stars.tsx

@@ -0,0 +1,68 @@
+import { motion } from "framer-motion";
+import star from "/src/Assets/Images/Star.svg";
+
+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 = () => {
+  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>
+        );
+      })}
+    </motion.div>
+  );
+};
+
+export default Stars;

src/Components/Landing/TextArea.tsx

@@ -0,0 +1,40 @@
+import { motion } from "framer-motion";
+
+const buttonVariants = {
+  initial: {
+    y: 0
+  },
+  hover: {
+    y: "0.5rem"
+  }
+};
+
+const Text = () => {
+  return (
+    <div className="flex flex-col justify-center mt-[20vh]">
+      <div className="">
+        <div className="text-[4vh] text-white">DS3</div>
+        <div className="flex text-white text-[5vw] leading-[4vw] ml-[-0.1rem]">
+          <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">
+          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>
+      </div>
+    </div>
+  );
+};
+export default Text;

src/Components/WhereWeBeen/Carousel.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import AutoScroll from "embla-carousel-auto-scroll";
+import CarouselCard from "./CarouselCard";
+export default function Carousel() {
+  const [speed] = useState(2);
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
+    AutoScroll({
+      playOnInit: true,
+      speed: speed,
+      stopOnInteraction: false,
+      stopOnFocusIn: false
+    })
+  ]);
+  useEffect(() => {
+    if (emblaApi) {
+      console.log(emblaApi.slideNodes()); // Access API
+    }
+  }, [emblaApi]);
+  return (
+    <div className="embla overflow-hidden w-[100%]  mt-5" ref={emblaRef}>
+      <div className="embla__container grid grid-flow-col auto-cols-min ">
+        {Array.from({ length: 10 }, (_, index) => {
+          return <CarouselCard index={index} />;
+        })}
+      </div>
+    </div>
+  );
+}

src/Components/WhereWeBeen/CarouselCard.tsx

@@ -0,0 +1,12 @@
+const CarouselCard = ({ index }: { index: number }) => {
+  return (
+    <div
+      className="opacity-50 embla__slide w-[12vw] h-[10vw] border-2 border-white flex justify-center items-center text-[3vw] ml-[3vw] rounded-lg bg-white"
+      key={index}
+    >
+      {index}
+    </div>
+  );
+};
+
+export default CarouselCard;

src/Pages/Home/AboutUs.tsx

@@ -1,9 +1,30 @@
 const AboutUs = () => {
   return (
-    <div>
-
+    <div className="grid grid-cols-2 gap-24 max-w-[72vw] h-screen py-24">
+      <div className="flex-1 flex flex-col justify-between py-4">
+        <div className="flex flex-col gap-4">
+          <h3 className="text-xl text-gray-200">WHO WE ARE</h3>
+          <h2 className="text-3xl text-white">
+            We share a passion for data, technology, and problem-solving.
+          </h2>
+          <p>We are here to expand the horizons of data science as a community together</p>
+        </div>
+        <button className="w-1/2 text-white rounded-full border-2 border-white p-4">ABOUT</button>
+      </div>
+      <div className="bg-gray-300 w-[30vw] h-[20vw] rounded-lg" />
+      <div className="bg-gray-300 w-[30vw] h-[20vw] rounded-lg" />
+      <div className="flex-1 flex flex-col justify-between py-4">
+        <div className="flex flex-col gap-4">
+          <h3 className="text-xl text-gray-200">WHAT WE DO</h3>
+          <h2 className="text-3xl text-white">
+            Build technical skills, network, and gain practical experience in data science.
+          </h2>
+          <p>We are here to expand the horizons of data science as a community together</p>
+        </div>
+        <button className="w-1/2 text-white rounded-full border-2 border-white p-4">EVENTS</button>
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default AboutUs
+export default AboutUs;

src/Pages/Home/Home.tsx

@@ -1,6 +1,6 @@
 import Page from "../../Components/Page/Page";
 import AboutUs from "./AboutUs";
-import Events from "./Events";
+import Events from "./WhereWeBeen";
 import Landing from "./Landing";
 import Sponsers from "./Sponsers";
 import Stats from "./Stats";

src/Pages/Home/Landing.tsx

@@ -1,9 +1,23 @@
+import { motion } from "framer-motion";
+import dino from "/src/Assets/Images/Dino.svg";
+import TextArea from "../../Components/Landing/TextArea";
+import Stars from "../../Components/Landing/Stars";
+
 const Landing = () => {
   return (
-    <div>
-
+    <div className="flex flex-col w-[80vw] min-h-[90vh] mx-auto">
+      <Stars />
+      <TextArea />
+
+      <div className="absolute bottom-[10vh] right-[10vw] w-[30%] h-1/2">
+        <motion.img
+          src={dino}
+          alt=""
+          className="absolute w-1/2 right-10 opacity-40 bottom-10 rotate-[25deg]"
+        />
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default Landing
+export default Landing;

src/Pages/Home/Sponsers.tsx

@@ -1,9 +1,37 @@
+import { baseURL } from "../../Utils/info";
+
 const Sponsers = () => {
   return (
-    <div>
-
+    <div className="flex flex-col gap-10 w-[80vw]">
+      <div className="flex flex-col gap-8 w-[40vw]">
+        <h2 className="text-5xl text-white">Our Sponsers</h2>
+        <p className="text-gray-300 w-2/3">
+          Interested in hearing how we can help you? Contact us at [email protected] or view our sponsor
+          packet{" "}
+          <a href="https://www.ds3ucsd.com/documents/DS3_Sponsors_23-24.pdf" className="underline">
+            here.
+          </a>
+        </p>
+      </div>
+      <div className="flex gap-10 justify-between">
+        <img
+          src={`${baseURL}/src/Assets/Images/CSE_logo.png`}
+          alt="CSE @ UCSD"
+          className="w-60 h-auto object-contain"
+        />
+        <img
+          src={`${baseURL}/src/Assets/Images/HDSI_logo_light.png`}
+          alt="HDSI @ UCSD"
+          className="w-96 h-auto object-contain"
+        />
+        <img
+          src={`${baseURL}/src/Assets/Images/palantir-vector-logo.svg`}
+          alt="Palantir"
+          className="w-60 h-auto object-contain"
+        />
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default Sponsers
+export default Sponsers;