updated the UI and Team information

components/cards/CourseCard.js

@@ -10,12 +10,6 @@ function CourseCard({ imgURL, courseName, courseDescription }) {
       <div className={styles.courseInfo}>
         <p className={styles.courseName}>{courseName}</p>
         <p className={styles.courseDescription}>{courseDescription}</p>
-        <div className={styles.knowMore}>
-          <Link href="youtube.com">
-            learn more
-            <Image src={arrow} alt="" className={styles.arrow} />
-          </Link>
-        </div>
       </div>
     </div>
   );

components/cards/CourseCard.module.scss

@@ -25,26 +25,6 @@
   }
   .courseDescription {
     font-size: 1rem;
-  }
-  .knowMore {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    a {
-      margin: 10px 0;
-      color: rgb(0, 87, 141);
-    }
-    .arrow {
-      height: 1rem;
-      width: auto;
-    }
-  }
-  .knowMore:hover {
-    transform: translateX(-2.5px);
-    transition: 0.2s ease-in-out;
-    .arrow {
-      transform: translateX(5px);
-      transition: 0.2s ease-in-out;
-    }
+    margin-bottom: 20px;
   }
 }

components/cards/EventCard.js

@@ -0,0 +1,43 @@
+import styles from "./EventCard.module.scss";
+import demoDay from "../../images/demoDay.png";
+import speaker from "../../images/speaker.png";
+import studyJam from "../../images/studyJam.jpg";
+import winterSchool from "../../images/winterSchool.png";
+import solutionChallange from "../../images/solutionChallenge.png";
+import sellular from "../../images/sellular.png";
+import Image from "next/image";
+import Link from "next/link";
+
+const EventCard = ({ props }) => {
+  const image = props.image;
+  const title = props.title;
+  const date = props.date;
+  const content = props.content;
+  const href = props.href;
+
+  const selectImg = (image) => {
+    if (image === "winterSchool") {
+      return winterSchool;
+    } else if (image === "demoDay") {
+      return demoDay;
+    } else if (image === "speaker") {
+      return speaker;
+    } else if (image === "solutionChallenge") {
+      return solutionChallange;
+    } else if (image === "sellular") {
+      return sellular;
+    } else {
+      return studyJam;
+    }
+  };
+  return (
+    <Link href={href} className={styles.eventCard}>
+      <Image className={styles.eventCardImage} src={selectImg(image)} alt="" />
+      <p className={styles.eventCardDate}>{date}</p>
+      <p className={styles.eventCardTitle}>{title}</p>
+      <p className={styles.eventCardContent}>{content}</p>
+    </Link>
+  );
+};
+
+export default EventCard;

pages/events/Past.module.scss → components/cards/EventCard.module.scss

@@ -1,26 +1,7 @@
-#pastEvents {
-  display: flex;
-  flex-wrap: wrap;
-
-  justify-content: center;
-}
-@keyframes slideUp {
-  0% {
-    transform: translateY(10vh);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0vh);
-    opacity: 1;
-  }
-}
-
 .eventCard {
   width: 250px;
   height: auto;
   margin: 10px 15px;
-  background-color: white;
-  filter: drop-shadow(0 2px 3px rgba(114, 114, 114, 0.386));
   animation: slideUp 0.8s 0s forwards;
   .eventCardImage {
     width: 230px;
@@ -32,23 +13,27 @@
   }
   p {
     text-align: center;
-    margin: 0;
-    width: 100%;
+    margin: 2px auto;
+    width: 90%;
   }
   .eventCardDate {
     color: rgb(45, 45, 45);
+    font-weight: 600;
+    font-size: 0.9rem;
   }
   .eventCardTitle {
-    font-size: 1.3rem;
-    background-color: rgba(0, 0, 0, 0.058);
+    font-size: 1.2rem;
+    color: black;
+    font-weight: 600;
   }
   .eventCardContent {
     color: rgb(67, 67, 67);
+    font-size: 0.9rem;
     margin-bottom: 10px;
   }
 }
 
 .eventCard:hover {
   background-color: rgb(250, 250, 250);
-  filter: drop-shadow(0 2px 3px rgba(1, 0, 0, 0.476));
+  filter: drop-shadow(0 2px 3px rgba(1, 0, 0, 0.1));
 }

components/team/Card.js → components/cards/MemberCard.js

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import styles from "./Card.module.scss";
+import styles from "./MemberCard.module.scss";
 
 function Card({ name, role, imageURL }) {
   return (

components/team/Card.module.scss → components/cards/MemberCard.module.scss

@@ -1,15 +1,16 @@
 .studentCard {
-  width: 300px;
+  width: 240px;
   height: auto;
   margin-bottom: 5%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  border-radius: 50px;
+  border-radius: 30px;
+  margin: 5px 20px;
 
   filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.185));
   img {
-    height: 300px;
+    height: 240px;
     width: auto;
     border-radius: 50%;
     object-fit: cover;

components/floatingObjects/Floaters.module.scss

@@ -69,7 +69,8 @@
     border-bottom: 10vh solid #f00;
   }
   .animation_3 {
-    top: 60vh;
+    top: 20vh;
+    right: -30vw;
     height: 19vh;
     width: 19vh;
   }

components/homepage/Info.js

@@ -6,6 +6,8 @@ import idea from "../../images/idea.png";
 import team from "../../images/team6.gif";
 import events from "../../images/team2.gif";
 import Link from "next/link";
+import content from "../../content/content.json";
+import { useEffect, useState } from "react";
 
 const Card = ({ imageURL, title, content, color }) => {
   return (
@@ -31,7 +33,7 @@ const LearnMoreCard = ({
   return (
     <div
       className={styles.LearnMoreCard}
-      style={{ flexDirection: reverse ? "row" : "row-reverse" }}
+      id={reverse ? styles.LearnMoreCardReverse : ""}
     >
       <Image src={imageURL} alt={title} />
       <div>
@@ -52,26 +54,20 @@ const Info = () => {
         <Card
           color={"#F4B400"}
           imageURL={idea}
-          content={
-            "Google developer student clubs is an initiative launched by Google to bring together students interested in Google Developer Technologies and associated skills in a peer-to-peer learning environment."
-          }
+          content={content.homePage.aboutWhat}
           title={"What is GDSC?"}
         />
         <Card
           color={"#DB4437"}
           imageURL={question}
           title={"Why GDSC"}
-          content={
-            "Google developer student clubs is an initiative launched by Google to bring together students interested in Google Developer Technologies and associated skills in a peer-to-peer learning environment."
-          }
+          content={content.homePage.aboutWhy}
         />
         <Card
           color={"#4285F4"}
           imageURL={group}
           title={"Who is it for?"}
-          content={
-            "Google developer student clubs is an initiative launched by Google to bring together students interested in Google Developer Technologies and associated skills in a peer-to-peer learning environment."
-          }
+          content={content.homePage.aboutWho}
         />
       </section>
 
@@ -82,19 +78,15 @@ const Info = () => {
           title={"Meet our team!"}
           buttonMessage={"Our Team"}
           linkTo={"teams"}
-          message={
-            "klaeff fabefbefkea  ufeu uehfheau hh uhfu  hf fuhfuf rhfr uih  hurh  ru wru ur rhru urwrhwuoiefo "
-          }
+          message={content.homePage.meetOurTeam}
         />
         <LearnMoreCard
           reverse={false}
           imageURL={team}
           buttonMessage={"Visit Events"}
           title={"Learn about our Events"}
           linkTo={"events"}
-          message={
-            "klaeff fabefbefkea  ufeu uehfheau hh uhfu  hf fuhfuf rhfr uih  hurh  ru wru ur rhru urwrhwuoiefo "
-          }
+          message={content.homePage.ourEvents}
         />
       </section>
     </div>

components/homepage/Info.module.scss

@@ -12,7 +12,7 @@
 }
 
 .infoCard {
-  height: 60vh;
+  min-height: 60vh;
   margin-top: 2vh;
   border-radius: 10px;
 
@@ -37,14 +37,14 @@
   }
 }
 .LearnMoreCard {
-  width: 80%;
-  height: 60vh;
+  width: 70%;
+  max-height: 60vh;
   display: flex;
   flex-direction: row;
-  margin: 0 10%;
+  margin: 0 auto;
   img {
-    height: inherit;
-    width: auto;
+    height: auto;
+    width: 50%;
   }
   div {
     display: flex;
@@ -79,12 +79,15 @@
     }
   }
 }
+#LearnMoreCardReverse {
+  flex-direction: row-reverse;
+}
 
 #learnMoreContainer {
   margin: 5vh 0;
 }
 
-@media only screen and (max-width: 450px) {
+@media only screen and (max-width: 600px) {
   #infoCards {
     flex-direction: column;
   }
@@ -95,9 +98,10 @@
     }
   }
   .LearnMoreCard {
-    height: 30vh;
+    min-height: 30vh;
+    flex-direction: column;
     img {
-      width: 40vw;
+      width: 100%;
       height: auto;
     }
     div {
@@ -110,10 +114,14 @@
         width: 100%;
       }
       .infoButton {
-        width: 90%;
+        width: 50%;
+        margin: 0 auto;
         height: 1.8rem;
         font-size: 1rem;
       }
     }
   }
+  #LearnMoreCardReverse {
+    flex-direction: column;
+  }
 }

components/homepage/Landing.js

@@ -1,7 +1,8 @@
 import Image from "next/image";
 import styles from "./Landing.module.scss";
 import gdscLogo from "../../images/gdscLogo.png";
-import planet from "../../images/team4.gif";
+import team from "../../images/team4.gif";
+import content from "../../content/content.json";
 
 function Landing() {
   return (
@@ -10,14 +11,14 @@ function Landing() {
         <div id={styles.landingPageWrapper}>
           <div id={styles.gdscIntro}>
             <Image className={styles.gdscColoredLogo} src={gdscLogo} alt="" />
-            <p>
-              A community of developers, designers and tech nerds who desire to
-              learn, educate and grow. At GDSC NIT AP, we provide a platform for
-              individuals to learn, develop, collaborate, exchange ideas and
-              grow together
-            </p>
+            <p>{content.homePage.about}</p>
           </div>
-          <Image id={styles.teamwork} src={planet} alt="teamwork" />
+          <Image
+            priority={true}
+            id={styles.teamwork}
+            src={team}
+            alt="teamwork"
+          />
         </div>
       </section>
       <section id={styles.landingPageDesign} />