worked on issue #101 -Linking our Team cards to Linkedin

Akshatchaube01 · Jun 21, 2024 · b0d0784 · b0d0784
2 parents f760590 + a3aa145
commit b0d0784
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/AboutUs.css b/src/components/AboutUs.css
@@ -224,3 +224,22 @@ h1::before {
 }
 
 
+.marquee {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .marquee-content {
+    display: flex;
+    animation: marquee 15s linear infinite;
+  }
+
+  @keyframes marquee {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
diff --git a/src/components/AboutUs.jsx b/src/components/AboutUs.jsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect, useState, useMemo } from "react";
+import axios from "axios";
 import Particles, { initParticlesEngine } from "@tsparticles/react";
 import { loadFull } from "tsparticles";
 import Tilty from "react-tilty";
@@ -17,13 +18,27 @@ import { particles } from "./Particles.jsx";
 import BackToTop from "./BottomToTop";
 
 const AboutUs = () => {
+  const [contributors, setContributors] = useState([]);
 
   useEffect(() => {
     initParticlesEngine(async (engine) => {
       await loadFull(engine);
     });
   }, []);
 
+  useEffect(() => {
+    const fetchContributors = async () => {
+      try {
+        const response = await axios.get('https://api.github.com/repos/Akshatchaube01/TimeWarp/contributors');
+        setContributors(response.data);
+      } catch (error) {
+        console.error("Error fetching contributors:", error);
+      }
+    };
+
+    fetchContributors();
+  }, []);
+
   const teamMembers = [
     {
       memberName: "Akshat Chaube",
@@ -67,41 +82,46 @@ const AboutUs = () => {
     e.currentTarget.querySelector(".hovereffect").style.transform="scale(0)";
    }
   return (
-    <div className="about-container md:m-16 mt-8 p-8">
+    <div className="about-container md:m-16 mt-8 p-25 ">
       <Particles id="tsparticles" options={useMemo(() => particles, [])} />
       <BackToTop />
-      <div className="about-content flex items-center mb-24 gap-x-12">
+      <div className="about-content  items-center mb-24 ">
+      <span className="image-container image-container-one grid justify-center">
+          <Tilty>
+            <img
+              src={aboutImage}
+              alt="About us"
+              className="ml-10 shadow-sm shadow-sky-600 about-image w-[350px] rounded-full hover:scale-[0.9] transition"
+            />
+          </Tilty>
+        </span>
         <div className="text-container flex-1">
           <h1 className="rounded-md about-title text-4xl text-center italic font-bold p-2 mb-8 mt-[100px] bg-gradient-to-r from-sky-500">
             About Us
           </h1>
+
           <p className="about-text italic text-lg font-light text-justify mb-4">
             {about.topTxt}
           </p>
           <p className="about-text italic text-lg font-light text-justify">
             {about.bottomTxt}
           </p>
         </div>
-        <div className="image-container image-container-one mr-8">
-          <Tilty> <img
-            src={aboutImage}
-            alt="About us"
-            className="ml-8 shadow-sm shadow-sky-600 about-image w-[500px] rounded-full hover:scale-[1.1] transition"
-          />
-          </Tilty>
-        </div>
+
       </div>
 
-      <div className="our-vision flex mb-28">
-        <div className="image-container image-container-two">
-          <Tilty><img
-            src={carImage}
-            alt="About us"
-            className=" shadow-sm shadow-sky-600 about-image w-[500px] rounded-full hover:scale-[1.1] transition"
-          /></Tilty>
+      <div className="our-vision  mb-28 ">
+        <div className="image-container image-container-two grid justify-center ml-25">
+          <Tilty>
+            <img
+              src={carImage}
+              alt="About us"
+              className="shadow-sm shadow-sky-600 about-image w-[350px] rounded-full hover:scale-[0.9] transition mb-10"
+            />
+          </Tilty>
         </div>
         <div className="text-container mx-auto flex-1 text-left">
-          <h1 className="about-title rounded-md text-4xl text-center italic font-bold p-2  mb-8 bg-gradient-to-l from-sky-500">
+          <h1 className="about-title rounded-md text-4xl text-center italic font-bold p-2 mb-8 bg-gradient-to-l from-sky-500">
             Our Vision
           </h1>
           <p className="about-text italic text-lg font-light text-justify">
@@ -145,6 +165,43 @@ const AboutUs = () => {
         </section>
       </div>
 
+      {/* OUR CONTRIBUTORS */}
+      <div className="w-full">
+        <section className="our-team-section max-w-6xl mx-auto px-4 sm:px-6 lg:px-4 py-12">
+          <div className="rounded-md about-title text-4xl text-center italic font-bold p-2 mb-[5%] mt-[100px] bg-gradient-to-r from-sky-500 ">
+            <h1 className="our-team-heading font-bold text-3xl md:text-4xl lg:text-5xl font-heading text-white">
+              Our Contributors
+            </h1>
+          </div>
+          <div className="marquee">
+            <div className="marquee-content">
+              {contributors.map((contributor, index) => (
+                <Tilty
+                  key={index}
+                  className="inline-block bg-sky-900/50 backdrop-blur-sm shadow-sky-100 rounded-lg shadow-lg p-12 flex flex-col justify-center items-center m-2"
+                  glare
+                  scale={1.05}
+                  maxGlare={0.5}
+                >
+                  <div className="mb-8">
+                    <img
+                      className="object-center object-cover rounded-full h-36 w-36"
+                      src={contributor.avatar_url}
+                      alt={contributor.login}
+                    />
+                  </div>
+                  <div className="text-center">
+                    <p className="text-xl text-white font-bold mb-2">
+                      {contributor.login}
+                    </p>
+                  </div>
+                </Tilty>
+              ))}
+            </div>
+          </div>
+        </section>
+      </div>
+
       <Footer />
     </div>
   );

diff --git a/src/components/ContactUs.jsx b/src/components/ContactUs.jsx
@@ -93,7 +93,7 @@ const Contact = () => {
 
         <motion.div
           variants={slideIn("left", "tween", 0.2, 1)}
-          className="flex-[0.75] bg-black-100 p-8 rounded-2xl"
+          className=" bg-black-100 p-8 rounded-2xl"
         >
           <p
             className={

diff --git a/src/components/Privacy.jsx b/src/components/Privacy.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import "./privacy.css";
+import Tilty from "react-tilty";
 
 const Privacy = () => {
   return (
@@ -32,20 +33,24 @@ const Privacy = () => {
           </ul>
         </div>
         <div className="flex flex-col justify-center">
+          <Tilty>
           <img
             src="https://termshub.io/v3/assets/images/products/privacy_policy_hero.svg"
             alt="Privacy"
             className="rounded-lg"
           />
+          </Tilty>
         </div>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
         <div className="flex flex-col justify-center">
+        <Tilty>
           <img
             src="https://static.vecteezy.com/system/resources/previews/005/843/413/original/abstract-cyber-security-privacy-information-network-concept-padlock-protection-digital-network-personal-data-cyber-data-or-information-privacy-idea-internet-link-on-hi-tech-blue-future-background-vector.jpg"
             alt="Data Protection"
             className="rounded-lg shadow-lg"
-          />
+          /> 
+          </Tilty>
         </div>
         <div>
           <h2 className="rounded-md about-title text-2xl text-center italic font-semibold bg-gradient-to-r from-sky-500 ">
@@ -121,20 +126,24 @@ const Privacy = () => {
         </div>
 
         <div className="flex flex-col justify-center">
+        <Tilty>
           <img
             src="https://www.nojitter.com/sites/default/files/ribkhan___0.jpg"
             alt="Information Sharing"
             className="rounded-lg shadow-lg"
           />
+          </Tilty>
         </div>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
         <div className="flex flex-col justify-center">
+          <Tilty>
           <img
             src="https://media.gettyimages.com/id/1345282963/photo/education-and-light-bulb-concept.jpg?s=2048x2048&w=gi&k=20&c=RcmHc2qcf_k_HHq0Qbl0a1_GlDdfKK05rsLf8LYw2Z4="
             alt="User Rights"
             className="rounded-lg shadow-lg"
           />
+          </Tilty>
         </div>
         <div>
           <h2 className="rounded-md about-title text-2xl text-center italic font-semibold bg-gradient-to-r from-sky-500  mb-8">

diff --git a/src/components/Terms.jsx b/src/components/Terms.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import './terms.css';
+import Tilty from "react-tilty";
 
 import termsImage from '../assets/terms.png'
 
@@ -22,20 +23,25 @@ const Terms = () => {
                     </ul>
                 </div>
                 <div className="flex flex-col justify-center">
-                    <img
+                    <Tilty>                    <img
                         src={termsImage}
                         alt="Terms"
                         className="rounded-lg"
                     />
+                    </Tilty>
+
+
                 </div>
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-4">
                 <div className="flex flex-col justify-center">
+                <Tilty>
                     <img
                         src="https://d1n03xfl93cx9q.cloudfront.net/wp-content/uploads/2022/09/what-is-the-future-of-IT-managed-services.jpg"
                         alt="Usage"
                         className="rounded-lg shadow-lg"
                     />
+                    </Tilty>
                 </div>
                 <div>
                     <h2 className="rounded-md about-title text-2xl text-center italic font-semibold bg-gradient-to-r from-green-500">Usage of Service</h2>
@@ -67,20 +73,24 @@ const Terms = () => {
                     </ul>
                 </div>
                 <div className="flex flex-col justify-center">
+                <Tilty>
                     <img
                         src="https://img.freepik.com/premium-photo/business-team-collaboration-showing-unity-with-their-hands-stacked-together_49071-4483.jpg?w=1380"
                         alt="User Responsibilities"
                         className="rounded-lg shadow-lg"
                     />
+                    </Tilty>
                 </div>
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
                 <div className="flex flex-col justify-center">
+                <Tilty>
                     <img
                         src="https://termshub.io/v3/assets/images/products/privacy_policy_hero.svg"
                         alt="Changes to Policy"
                         className="rounded-lg"
                     />
+                    </Tilty>
                 </div>
                 <div>
                     <h2 className="rounded-md about-title text-2xl text-center italic font-semibold bg-gradient-to-r from-green-500 mb-8">Changes to Terms</h2>