Merge pull request #138 from IEEEUCSC/main

Updated

Frontend/src/App.tsx

@@ -1,22 +1,20 @@
 // import React from 'react';
-import { Routes, Route } from 'react-router-dom';
-import Footer from './Components/Footer/Footer';
-import Prizes from './Components/Prizes/Prizes';
-import './App.css';
+import { Routes, Route } from "react-router-dom";
+import Footer from "./Components/Footer/Footer";
+import Prizes from "./Components/Prizes/Prizes";
+import "./App.css";
 // import Navbar from './Components/NavBar/NavBar';
-import Home from './Components/Home/Home';
-import FAQ from './Components/FAQ/FAQ';
+import Home from "./Components/Home/Home";
+import FAQ from "./Components/FAQ/FAQ";
 // import Sponsers from './Components/Sponsers/Sponsers';
-import Timeline from './Components/Timeline/Timeline';
-import Intro from './Components/Introduction/Intro';
-import Registration from './Components/TeamRegistration/TeamRegi';
-import ContactUs from './Components/ContactUs/ContactUs';
-import Card from './Components/Card/Card';
-import Particles from './Components/Particles/ParticleDesign';
-import "@fontsource/ibm-plex-mono"
-import Narbar2 from './Components/NavBar/Navabr2'
-
-
+import Timeline from "./Components/Timeline/Timeline";
+import Intro from "./Components/Introduction/Intro";
+import Registration from "./Components/TeamRegistration/TeamRegi";
+import ContactUs from "./Components/ContactUs/ContactUs";
+import Card from "./Components/Card/Card";
+import Particles from "./Components/Particles/ParticleDesign";
+import "@fontsource/ibm-plex-mono";
+import Narbar2 from "./Components/NavBar/Navabr2";
 
 function App() {
   return (
@@ -25,24 +23,25 @@ function App() {
       <Particles />
       <Routes>
         <Route path="/team" element={<Registration />} />
-        <Route path="/*" element={
-          <div>
-            <Home />
-            <Intro />
-            {/* <Sponsers /> */}
-            <Timeline />
-            <FAQ />
-            <Prizes />
-            <Card />
-            <ContactUs />
-          </div>
-        } />
+        <Route
+          path="/*"
+          element={
+            <div className="homepageComponents">
+              <Home />
+              <Intro />
+              {/* <Sponsers /> */}
+              <Timeline />
+              <FAQ />
+              <Prizes />
+              <Card />
+              <ContactUs />
+            </div>
+          }
+        />
       </Routes>
-
-
       <Footer />
     </div>
   );
 }
 
-export default App;
+export default App;

Frontend/src/Components/Card/Card.css

@@ -13,6 +13,7 @@ body {
 }
 .carouselDiv {
   width: 100%;
+  margin: 0;
 
 }
 #card {

Frontend/src/Components/ContactUs/ContactUs.tsx

@@ -95,7 +95,7 @@ const ContactUs = () => {
           </div>
           <div className="emailDiv">
             <p className="tracking-widest font-pfont">
-              <b className="fas fa-envelope">[email protected]</b>
+              <b className="fas fa-envelope">[email protected]</b>
             </p>
           </div>
         </div>

Frontend/src/Components/Footer/Footer.css

@@ -47,6 +47,18 @@
   transition-duration: 0.6s!important;
 }
 
-#footerLink:hover{
+#footerLink div{
+  font-size: 18px!important;
   transition-duration: 0.6s!important;
+}
+
+#footerLink div:hover{
+  transition-duration: 0.6s!important;
+}
+
+#WIElogo{
+  z-index: +19!important;
+}
+#ucscWIElogo{
+  padding-top: 10px;
 }

Frontend/src/Components/Footer/Footer.tsx

@@ -15,7 +15,7 @@ const Footer = () => {
         {/* Logos */}
         <div className="flex flex-row mt-3 space-x-12 justify-center  md:flex-row items-center mb-6 md:justify-center md:gap-32 md:mb-16">
           {/* First Image */}
-          <div>
+          <div id="WIElogo">
             <a
               href="https://wie.ieee.org/"
               target="_blank"
@@ -40,6 +40,7 @@ const Footer = () => {
           <div>
             <img
               className="inline-block w-24 md:w-32 md:mt-1 md:ml-0.5 md:mr-0.5"
+              id="ucscWIElogo"
               src={ucscwie2}
               alt="wie-logo"
             />
@@ -56,21 +57,33 @@ const Footer = () => {
             </a>
           </div> */}
           <div>
-            <a href="https://www.linkedin.com/company/ieee-wie-student-branch-affinity-group-of-ucsc/" id="footerLink">
+            <a
+              href="https://www.linkedin.com/company/ieee-wie-student-branch-affinity-group-of-ucsc/"
+              id="footerLink"
+              target="_blank"
+            >
               <div className="md:text-2xl md:p-1 hover:text-violet-400 text-white text-center transition-transform transform hover:scale-80 capitalize ">
                 LinkedIn
               </div>
             </a>
           </div>
           <div>
-            <a href="https://www.instagram.com/ucsc.wie?igsh=OHBzd25kZXByazJn" id="footerLink">
+            <a
+              href="https://www.instagram.com/ucsc.wie?igsh=OHBzd25kZXByazJn"
+              id="footerLink"
+              target="_blank"
+            >
               <div className="md:text-2xl md:p-1 hover:text-violet-400 text-white text-center transition-transform transform hover:scale-80 capitalize ">
                 Instagram
               </div>
             </a>
           </div>
           <div>
-            <a href="https://www.facebook.com/profile.php?id=100064681930483&mibextid=ZbWKwL" id="footerLink">
+            <a
+              href="https://www.facebook.com/profile.php?id=100064681930483&mibextid=ZbWKwL"
+              id="footerLink"
+              target="_blank"
+            >
               <div className="md:text-2xl md:p-1 hover:text-violet-400 text-white text-center transition-transform transform hover:scale-80 capitalize ">
                 FaceBook
               </div>

Frontend/src/Components/Home/Home.css

@@ -27,4 +27,8 @@
   #hackaholicsHeading{
     color: #575254;
     text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
+  }
+
+  #regEndText{
+    margin-bottom: 10px;
   }

Frontend/src/Components/Home/Home.tsx

@@ -2,7 +2,7 @@
 import { motion, useAnimation } from "framer-motion";
 import { useEffect } from "react";
 import "./Home.css";
-import Countd from '../Timer/Time';
+import Countd from "../Timer/Time";
 import { HashLink } from "react-router-hash-link";
 
 const containerVariants = {
@@ -42,25 +42,27 @@ const Home = () => {
     controls.start("visible");
   }, [controls]);
 
-    return (
-
-        <motion.main
-            className="flex flex-col h-screen items-center justify-center text-slate-50 font-bold bg-secondary "
-            initial="hidden"
-            animate={controls}
-            variants={containerVariants}
-            id='homeComponent'
-        >
-            <motion.div variants={textVariants}>
-                <div className="text-white font-sfont text-xl md:text-2xl md:tracking-widest tracking-wide text-center hover:text-orange-100 mt-44">
-                    <p>IEEE WIE STUDENT BRANCH</p>
-                    <p>AFFINITY GROUP OF UCSC</p>
-                </div>
-            </motion.div>
+  return (
+    <motion.main
+      className="relative flex flex-col h-screen w-screen min-w-screen items-center justify-center text-slate-50 font-bold bg-secondary "
+      initial="hidden"
+      animate={controls}
+      variants={containerVariants}
+      id="homeComponent"
+    >
+      <motion.div variants={textVariants}>
+        <div className="text-white font-sfont text-xl md:text-2xl md:tracking-widest tracking-wide text-center hover:text-orange-100 mt-44">
+          <p>IEEE WIE STUDENT BRANCH</p>
+          <p>AFFINITY GROUP OF UCSC</p>
+        </div>
+      </motion.div>
 
       <motion.div variants={textVariants}>
         <div className="mt-8 md:mt-5">
-          <h1 className="text-white tracking-widest text-4xl md:text-8xl landing-8 font-pfont" id="hackaholicsHeading">
+          <h1
+            className="text-white tracking-widest text-4xl md:text-8xl landing-8 font-pfont"
+            id="hackaholicsHeading"
+          >
             HACKAHOLICS
           </h1>
         </div>
@@ -81,7 +83,8 @@ const Home = () => {
         <div className="mt-10 md:mt-1 lg:mt-10 md:mr-4">
           <div className="">
             <a
-              href="https://github.com/IEEEUCSC"
+              href="https://drive.google.com/file/d/1aMsU3lKo7J8cgbkKQpbs1GwqPJA8Ynag/view?usp=sharing"
+              target="_blank"
               className="relative items-center justify-start inline-block p-6 px-6 py-3 overflow-hidden font-medium rounded-full group"
             >
               <span className="w-32 h-32 rotate-45 translate-x-12 -translate-y-2 absolute left-0 top-0 bg- opacity-[3%]"></span>
@@ -96,9 +99,11 @@ const Home = () => {
 
         <div className="mt-10 md:mt-1 lg:mt-10 md:mr-4">
           <div className="">
-
-             <HashLink smooth to="/team" className="relative items-center justify-start inline-block p-6 px-6 py-3 overflow-hidden font-medium rounded-full group" >
-
+            <HashLink
+              smooth
+              to="/team"
+              className="relative items-center justify-start inline-block p-6 px-6 py-3 overflow-hidden font-medium rounded-full group"
+            >
               <span className="w-32 h-32 rotate-45 translate-x-12 -translate-y-2 absolute left-0 top-0 bg- opacity-[3%]"></span>
               <span className="absolute top-0 left-0 w-48 h-48 -mt-1 transition-all duration-500 ease-in-out rotate-45 -translate-x-56 -translate-y-24 bg-purple-200 opacity-100 group-hover:-translate-x-8"></span>
               <span className="relative w-full text-left text-white-100 transition-colors duration-200 ease-in-out group-hover:text-secondary tracking-wider">
@@ -109,8 +114,10 @@ const Home = () => {
           </div>
         </div>
       </motion.div>
-      <Countd targetDate={new Date('2024-02-07T00:00:00')}/> 
-      {/* Deadline time and Date */}
+      <div className="flex flex-row md:mt-10 mt-8 md:mb-5 mb-4 tracking-wider font-sfont font-medium">
+        Team Registration ends in
+      </div>
+      <Countd targetDate={new Date("2024-02-16T00:00:00")} />
     </motion.main>
   );
 };

Frontend/src/Components/Particles/ParticleDesign.tsx

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import type { Container, Engine } from "tsparticles-engine";
 import Particles from "react-tsparticles";
 import { loadSlim } from "tsparticles-slim";
-
+// import "./Particles.css";
 const ParticleDesign = () => {
     const particlesInit = useCallback(async (engine: Engine) => {
         console.log(engine);
@@ -13,7 +13,7 @@ const ParticleDesign = () => {
         await console.log(container);
     }, []);
     return (
-        <div className="-z-20">
+        <div className="-z-20" id="partclesContainor">
             <Particles
                 id="tsparticles"
                 init={particlesInit}

Frontend/src/Components/TeamRegistration/TeamRegi.tsx

@@ -91,7 +91,7 @@ export default function Registration() {
               {/* display flex */}
               <div className="col-md-3 text-center">
                 <div className="d-flex flex-column align-items-center">
-                  <a href="/" target="_blank">
+                  <a href="https://drive.google.com/file/d/1aMsU3lKo7J8cgbkKQpbs1GwqPJA8Ynag/view" target="_blank">
                     <button className="btn  btn-primary py-2 px-4 text-white">
                       Delegate Book
                     </button>

Frontend/src/Components/Timeline/Timeline.scss

@@ -265,3 +265,7 @@
     width: 83%;
   }
 }
+
+* {
+  box-sizing: border-box;
+}

Frontend/src/Components/Timer/Time.tsx

@@ -24,7 +24,7 @@ const Countdown: React.FC<{ targetDate: Date }> = ({ targetDate }) => {
     }, [targetDate, calculateTimeRemaining]);
 
     return (
-        <div className="flex flex-col md:flex-row items-center content-center justify-center h-screen">
+        <div className="flex flex-col md:flex-row items-center content-center justify-center">
             <div className="grid grid-cols-4 md:gap-4 gap-2 font-bold font-pfont m-2">
                 <div className="border border-violet-950 py-3 rounded-lg bg-secondary bg-opacity-90 tracking-widest text-white text-center md:text-3xl text-xl items-center content-center justify-center shadow-lg shadow-indigo-950">
                     {timeRemaining.days}