UI Improvement

frontend/src/components/Cards/TeamsCard.tsx

@@ -2,6 +2,7 @@ import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import { Typography } from "@material-ui/core";
 import DomainCard from "src/components/Cards/DomainCard";
 import { teamList } from "../../pages/Domains/teamList";
+import AnimateOnScroll from "src/utils/animateonscroll";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -77,18 +78,22 @@ const TeamCard: React.FC<TeamcardProps> = ({ domain, batch }) => {
       <div className={classes.flexbox}>
         {teamList.map((memberData, i) => {
           return memberData.team === domain && memberData.batch === batch ? (
-            <DomainCard
-              key={i}
-              {...{
-                ...memberData,
-                team:
-                  domain === "cp"
-                    ? "Competitive Programmer"
-                    : domain === "dev"
-                    ? "Developer"
-                    : "Designer",
-              }}
-            />
+            <>
+              <AnimateOnScroll>
+                <DomainCard
+                  key={i}
+                  {...{
+                    ...memberData,
+                    team:
+                      domain === "cp"
+                        ? "Competitive Programmer"
+                        : domain === "dev"
+                        ? "Developer"
+                        : "Designer",
+                  }}
+                />
+              </AnimateOnScroll>
+            </>
           ) : null;
         })}
       </div>

frontend/src/components/Nav/index.tsx

@@ -50,6 +50,35 @@ const useStyles = makeStyles((theme: Theme) =>
     pseudolink: {
       cursor: "pointer",
     },
+    topNav: {
+      textAlign: "center",
+      paddingTop: 20,
+      paddingBottom: 20,
+      background: "#171717",
+      color: "white",
+    },
+    divider: {
+      height: 3,
+      width: "100%",
+      background: "#1d1d1d",
+    },
+    list: {
+      marginTop: 10,
+      display: "flex",
+      flexDirection: "column",
+      gap: 8,
+    },
+    link: {
+      textDecoration: "none",
+    },
+    btn: {
+      display: "flex",
+      gap: 20,
+      borderRadius: 5,
+      "&:hover": {
+        background: "#1d1d1d",
+      },
+    },
   })
 );
 const Nav: React.FC = () => {
@@ -76,7 +105,7 @@ const Nav: React.FC = () => {
       role="presentation"
       onClick={toggleDrawer}
     >
-      <List>
+      <List className={classes.list}>
         {linklist.map((linkData, key) => {
           if (linkData.loginReq) {
             return !!token ? (
@@ -85,7 +114,7 @@ const Nav: React.FC = () => {
                 onClick={async () => await handleLogout(linkData.url)}
                 key={key}
               >
-                <ListItem button>
+                <ListItem button className={classes.btn}>
                   <Typography className={classes.other}>
                     {linkData.name}
                   </Typography>
@@ -94,8 +123,9 @@ const Nav: React.FC = () => {
             ) : null;
           }
           return (
-            <Link to={linkData.url} key={key}>
-              <ListItem button>
+            <Link className={classes.link} to={linkData.url} key={key}>
+              <ListItem button className={classes.btn}>
+                <img width={20} height={20} src={linkData.icon} />
                 <Typography className={classes.other}>
                   {linkData.name}
                 </Typography>
@@ -130,6 +160,10 @@ const Nav: React.FC = () => {
         </Toolbar>
       </AppBar>
       <Drawer anchor={"right"} open={drawerOpen} onClose={toggleDrawer}>
+        <div className={classes.topNav}>
+          <Typography>MENU</Typography>
+        </div>
+        <div className={classes.divider}></div>
         {drawerList}
       </Drawer>
     </div>

frontend/src/components/Nav/linklist.ts

@@ -3,11 +3,19 @@ export const linklist = [
     name: "Team",
     url: "/team",
     loginReq: false,
+    icon: "/webix.iiitdmj.ac.in/images/icons/team.png",
   },
   {
     name: "Projects",
     url: "/projects",
     loginReq: false,
+    icon: "/webix.iiitdmj.ac.in/images/icons/projects.png",
+  },
+  {
+    name: "Alumni",
+    url: "/alumni",
+    loginReq: false,
+    icon: "/webix.iiitdmj.ac.in/images/icons/alumni.png",
   },
   {
     name: "Alumni",
@@ -18,15 +26,18 @@ export const linklist = [
     name: "Events",
     url: "/events",
     loginReq: true,
+    icon: "/webix.iiitdmj.ac.in/images/icons/event.png",
   },
   {
     name: "Registration",
     url: "/registration",
     loginReq: true,
+    icon: "/webix.iiitdmj.ac.in/images/icons/registration.png",
   },
   {
     name: "Logout",
     url: "/",
     loginReq: true,
+    icon: "/webix.iiitdmj.ac.in/images/icons/logout.png",
   },
 ];

frontend/src/components/WhyUs/index.tsx

@@ -24,11 +24,74 @@ const WhyUs: React.FC = () => {
         </p>
       </div>
       <div className={styles.vectors}>
-        <img
-          className={styles.aboutImg}
-          src="/webix.iiitdmj.ac.in/images/other/why_us.png"
-          alt="tech"
-        />
+        <div className={styles.circlecontainer}>
+          <div className={styles.outercircle}>
+            <div className={styles.circle}>
+              <img
+                width="80px"
+                height="80px"
+                className={styles.github}
+                src="/webix.iiitdmj.ac.in/images/icons/github.png"
+                alt=""
+              />
+              <img
+                width="80px"
+                height="80px"
+                className={styles.react}
+                src="/webix.iiitdmj.ac.in/images/icons/react.png"
+                alt=""
+              />
+              <img
+                width="80px"
+                height="80px"
+                className={styles.angular}
+                src="/webix.iiitdmj.ac.in/images/icons/angular.png"
+                alt=""
+              />
+              <img
+                width="80px"
+                height="80px"
+                className={styles.vue}
+                src="/webix.iiitdmj.ac.in/images/icons/vue.png"
+                alt=""
+              />
+            </div>
+            <div className={styles.middlewrapper}>
+              <div className={styles.middlecircle}>
+                <div className={styles.circle}>
+                  <img
+                    width="80px"
+                    height="80px"
+                    className={styles.c}
+                    src="/webix.iiitdmj.ac.in/images/icons/c.png"
+                    alt=""
+                  />
+                  <img
+                    width="80px"
+                    height="80px"
+                    className={styles.java}
+                    src="/webix.iiitdmj.ac.in/images/icons/java.png"
+                    alt=""
+                  />
+                  <img
+                    width="80px"
+                    height="80px"
+                    className={styles.python}
+                    src="/webix.iiitdmj.ac.in/images/icons/python.png"
+                    alt=""
+                  />
+                  <img
+                    width="80px"
+                    height="80px"
+                    className={styles.go}
+                    src="/webix.iiitdmj.ac.in/images/icons/go.png"
+                    alt=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );

frontend/src/components/WhyUs/style.module.css

@@ -50,15 +50,156 @@
   justify-content: space-around;
   align-items: center;
   height: 80%;
-}
-.vectors > img {
-  width: 40vw;
+  margin-right: 5vw;
 }
 
 .break {
   margin-bottom: 5vh;
 }
 
+.circlecontainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.outercircle {
+  width: 400px;
+  height: 400px;
+  background-color: #00050b;
+  border-radius: 50%;
+  margin: 50px auto;
+  position: relative;
+  animation: rotate 30s linear infinite;
+  padding: 80px;
+}
+
+.middlewrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #00050b;
+  border-radius: 50%;
+}
+
+.middlecircle {
+  width: 250px;
+  height: 250px;
+  background-color: #00050b;
+  border-radius: 50%;
+  animation: rotate-reverse 15s linear infinite;
+}
+
+.github {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 40px;
+  color: red;
+  border-radius: 50%;
+  box-shadow: 0 0 30px 15px #08ffea;
+}
+
+.react {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 50%);
+  font-size: 40px;
+  color: red;
+  box-shadow: 0 0 30px 15px #08ffea;
+  border-radius: 50%;
+}
+
+.angular {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 40px;
+  color: red;
+  box-shadow: 0 0 30px 15px #08ffea;
+  border-radius: 50%;
+}
+
+.vue {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(50%, -50%);
+  font-size: 40px;
+  color: red;
+  box-shadow: 0 0 30px 15px #08ffea;
+  border-radius: 50%;
+}
+
+.c {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 40px;
+  color: red;
+  box-shadow: 0 0 30px 15px #08ffea;
+  border-radius: 50%;
+}
+
+.java {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 50%);
+  font-size: 40px;
+  color: red;
+  box-shadow: 0 0 30px 15px #08ffea;
+  border-radius: 50%;
+}
+
+.go {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 40px;
+  color: red;
+  box-shadow: 0 0 30px 15px #08ffea;
+  border-radius: 50%;
+}
+
+.python {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(50%, -50%);
+  font-size: 40px;
+  color: red;
+  box-shadow: 0 0 30px 15px #08ffea;
+  border-radius: 50%;
+}
+
+@keyframes rotate {
+  0% {
+      transform: rotate(0deg);
+  }
+
+  100% {
+      transform: rotate(360deg);
+  }
+}
+
+@keyframes rotate-reverse {
+  0% {
+      transform: rotate(0deg);
+  }
+
+  100% {
+      transform: rotate(-360deg);
+  }
+}
+
 @media only screen and (max-width: 1180px) {
   .container {
     margin-top: 15vh;