Our team design mostly ready

GDGCampusAEC · Oct 28, 2023 · 1ebbd83 · 1ebbd83
1 parent 50acfbd
commit 1ebbd83
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 38 deletions.
diff --git a/src/assets/ourTeam.png b/src/assets/ourTeam.png
diff --git a/src/components/contact/ContactUs.jsx b/src/components/contact/ContactUs.jsx
@@ -1,37 +1,35 @@
 import contactus from "../../assets/contactus.png";
 export default function ContactUs() {
   return (
-    <div>
-      <div className="flex flex-col p-10 justify-evenly md:flex-row">
-        <img src={contactus} className="max-w-full" alt="Contact Us" />
+    <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>
-          </form>
-        </div>
+      <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>
+        </form>
       </div>
     </div>
   );

diff --git a/src/components/marqueeCards/Marquee.jsx b/src/components/marqueeCards/Marquee.jsx
@@ -1,10 +1,13 @@
 import Marquee from "react-fast-marquee";
 
 const MarqueeCards = ({ children, direction }) => {
+  const containerStyle = {};
   return (
     <Marquee
+      style={{ containerStyle }}
       direction={direction}
-      gradient={false}
+      gradient={true}
+      gradientWidth={500}
       speed={100}
       pauseOnHover={true}
     >

diff --git a/src/components/team/Card.jsx b/src/components/team/Card.jsx
@@ -1,10 +1,19 @@
 import { FaLinkedin, FaGithub, FaTwitter } from "react-icons/fa";
-export default function Card({ name, image, role, linkedin, github, twitter }) {
+export default function Card({
+  name,
+  image,
+  role,
+  linkedin,
+  github,
+  twitter,
+  colour,
+}) {
+  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 gap-2 items-center shadow-[0px_0px_15px_2px_rgba(0,0,0,0.17)] border-b-8 border-b-[#34A853] border-solid
-     w-[18rem] h-[22rem] shrink-0"
-    >
+    <div className={className}>
       <img
         className="text-[#1C1C1C] rounded-[31.25rem] w-[11.25rem] h-[11.25rem]"
         src={image}

diff --git a/src/components/team/Team.jsx b/src/components/team/Team.jsx
@@ -1,11 +1,15 @@
 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="">
+    <div
+      style={{ display: "flex", alignItems: "center", flexDirection: "column" }}
+    >
+      <img src={ourTeam} alt="Our Team" />
       <Marquee direction="left">
         {data.teamMembers.map((members, index) => (
           <Card
@@ -16,6 +20,7 @@ export default function Team() {
             twitter={members.twitterUrl}
             image={members.image}
             key={index}
+            colour={colourChoices[index % 4]}
           />
         ))}
       </Marquee>