Team Functionality Added #5

* Footer Completed Functionality left

* contributor list changed

* Contact us section done

* Card design pending

* Marquee functionality added

* Our team design mostly ready

* Contact us button added

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.2",
     "react-icons": "^4.11.0",
     "web-vitals": "^2.1.4"
   },

src/App.jsx

@@ -1,10 +1,9 @@
-import {Navbar,Team,ContactUs,Footer} from "./components";
-
+import { Navbar, Team, ContactUs, Footer } from "./components";
 
 function App() {
   return (
     <div>
-      <Navbar/>
+      <Navbar />
       <Team />
       <ContactUs />
       <Footer />

src/components/NavBar.jsx

@@ -1,22 +1,33 @@
-import React from 'react'
-import Logo from '../assets/gdsc-logo.png'
+import React from "react";
+import Logo from "../assets/gdsc-logo.png";
 const Navbar = () => {
   return (
-    <div className='w-[100%]  flex justify-center items-center py-6 relative'>
-        <div className='flex justify-center items-center absolute left-[5vw] gap-1'>
-            <img src={Logo} alt="image" className='h-[3.5rem]'/>
-            <h1 className='font-bold text-lg text-[#767676]'>GDSC AEC</h1>
-        </div>
-      <div style={{boxShadow:' 0 0 10px rgba(0, 0, 0, 0.2)'}}    className='  px-[5em] rounded-full '>
-        <ul className=' flex justify-center items-center  gap-12 drop-shadow-2xl text-sm h-[6.4vh] text-[#535353] transition-all delay-300'>
-            <li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>About us</li>
-            <li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>Event</li>
-            <li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>Our Team</li>
-            <li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>Contact</li>
+    <div className="w-[100%]  flex justify-center items-center py-6 relative">
+      <div className="flex justify-center items-center absolute left-[5vw] gap-1">
+        <img src={Logo} alt="image" className="h-[3.5rem]" />
+        <h1 className="font-bold text-lg text-[#767676]">GDSC AEC</h1>
+      </div>
+      <div
+        style={{ boxShadow: " 0 0 10px rgba(0, 0, 0, 0.2)" }}
+        className="  px-[5em] rounded-full "
+      >
+        <ul className=" flex justify-center items-center  gap-12 drop-shadow-2xl text-sm h-[6.4vh] text-[#535353] transition-all delay-300">
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            About us
+          </li>
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            Event
+          </li>
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            Our Team
+          </li>
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            Contact
+          </li>
         </ul>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Navbar
+export default Navbar;

src/components/contact/ContactUs.jsx

@@ -0,0 +1,43 @@
+import contactus from "../../assets/contactus.png";
+export default function ContactUs() {
+  const contactUsHandler = (e) => {};
+  return (
+    <div className="flex flex-col p-10 pt-[10rem] pb-[10rem] justify-evenly md:flex-row">
+      <img src={contactus} className="max-w-full" alt="Contact Us" />
+
+      <div className="md:pl-10">
+        <h1 className="text-black text-[4.875rem] font-semibold">
+          Get in Touch
+        </h1>
+        <h2 className="text-[#686868] text-[1.4375rem] font-semibold leading-normal font-inter">
+          If you have any questions or inquiries, feel free to ask us.
+        </h2>
+        <form className="flex flex-col">
+          <input
+            className="p-2 m-2 border-2 border-black rounded-lg md:w-1/3 lg:w-full"
+            type="text"
+            name="firstname"
+            placeholder="Your name.."
+          />
+          <input
+            className="p-2 m-2 border-2 border-black rounded-lg md:w-1/3 lg:w-full"
+            type="text"
+            name="email"
+            placeholder="Email"
+          />
+          <textarea
+            className="h-40 p-2 m-2 border-2 border-black rounded-lg md:w-1/3 lg:w-full"
+            name="Message"
+            placeholder="Message"
+          ></textarea>
+          <input
+            className="bg-blue-700 w-[13.6875rem] h-[3.75rem] m-4 rounded-3xl text-white text-[1.375] "
+            type="submit"
+            value="Submit"
+            onClick={contactUsHandler}
+          />
+        </form>
+      </div>
+    </div>
+  );
+}

src/components/index.js

@@ -1,6 +1,6 @@
-import Navbar from './NavBar'
-import Team from './team/Team'
-import ContactUs from './ContactUs'
-import Footer from './Footer'
+import Navbar from "./NavBar";
+import Team from "./team/Team";
+import ContactUs from "./contact/ContactUs";
+import Footer from "./footer/Footer";
 
-export { Navbar, Team, ContactUs, Footer }
+export { Navbar, Team, ContactUs, Footer };

src/components/marqueeCards/Marquee.jsx

@@ -0,0 +1,19 @@
+import Marquee from "react-fast-marquee";
+
+const MarqueeCards = ({ children, direction }) => {
+  const containerStyle = {};
+  return (
+    <Marquee
+      style={{ containerStyle }}
+      direction={direction}
+      gradient={true}
+      gradientWidth={500}
+      speed={100}
+      pauseOnHover={true}
+    >
+      {children}
+    </Marquee>
+  );
+};
+
+export default MarqueeCards;

src/components/team/Card.jsx

@@ -1,24 +1,40 @@
-export default function Card({ name, image, role, linkedin, github, twitter }) {
-  console.log(role.name);
+import { FaLinkedin, FaGithub, FaTwitter } from "react-icons/fa";
+export default function Card({
+  name,
+  image,
+  role,
+  linkedin,
+  github,
+  twitter,
+  colour,
+}) {
+  console.log(image);
+  console.log(colour);
+  const className = `flex flex-col m-6 justify-center gap-2 items-center shadow-[0px_0px_15px_2px_rgba(0,0,0,0.17)] border-b-8 border-b-[${colour}] border-solid
+  w-[18rem] h-[22rem] shrink-0`;
+
   return (
-    <div className="flex flex-col justify-center  w-[18.875rem] h-[24.4375rem] shrink-0">
-      <div className="">{role}</div>
+    <div className={className}>
       <img
-        className="text-[#1C1C1C] text-[1.625rem] not-italic font-medium leading-[normal]"
+        className="text-[#1C1C1C] rounded-[31.25rem] w-[11.25rem] h-[11.25rem]"
         src={image}
         alt="Meh"
       />
-      <h1>{name}</h1>
-      <h2>{role}</h2>
-      <div className="flex flex-row justify-center">
+      <h1 className="text-[#1C1C1C] text-[1.625rem] not-italic font-medium leading-[normal]">
+        {name}
+      </h1>
+      <h2 className="text-neutral-500 text-[1.375rem] not-italic font-medium leading-[normal]">
+        {role}
+      </h2>
+      <div className="flex flex-row gap-[2rem] justify-center">
         <a href={linkedin}>
-          <img src="" />
+          <FaLinkedin size="2rem" />
         </a>
         <a href={github}>
-          <img src="" />
+          <FaGithub size="2rem" />
         </a>
         <a href={twitter}>
-          <img src="" />
+          <FaTwitter size="2rem" />
         </a>
       </div>
     </div>

src/components/team/Team.jsx

@@ -1,17 +1,29 @@
 import * as data from "../../data/data2023.json";
+import Marquee from "../marqueeCards/Marquee";
 import Card from "./Card";
+import ourTeam from "../../assets/ourTeam.png";
 export default function Team() {
   console.log(data.teamMembers[0]);
+  const colourChoices = ["#EA4335", "#34A853", "#4285F4", "#FBBC05"];
   return (
-    <div className="flex 6flex-row justify-evenly">
-      <Card
-        name={data.teamMembers[0].name}
-        role={data.teamMembers[0].role}
-        linkedin={data.teamMembers[0].linkedinUrl}
-        github={data.teamMembers[0].githubUrl}
-        twitter={data.teamMembers[0].twitterUrl}
-        image={data.teamMembers[0].image}
-      />
+    <div
+      style={{ display: "flex", alignItems: "center", flexDirection: "column" }}
+    >
+      <img src={ourTeam} alt="Our Team" />
+      <Marquee direction="left">
+        {data.teamMembers.map((members, index) => (
+          <Card
+            name={members.name}
+            role={members.role}
+            linkedin={members.linkedinUrl}
+            github={members.githubUrl}
+            twitter={members.twitterUrl}
+            image={members.image}
+            key={index}
+            colour={colourChoices[index % 4]}
+          />
+        ))}
+      </Marquee>
     </div>
   );
 }

src/data/data2023.json

@@ -106,7 +106,8 @@
             "githubUrl": "http://github.com/rajdips834",
             "twitterUrl": "https://x.com/rajdips834?t=K0E58jxs0sleVQUDzLAvjw&s=09",
             "websiteUrl": "",
-            "roleType": 3
+            "roleType": 3,
+            "image":"../../assets/coreTeamPictures/rajdipSinha.png"
         },
         {
             "name": "Shivam kumar shaw",