From 7c58da14e812b312d78a8320665e7eb27d4b168d Mon Sep 17 00:00:00 2001
From: Atif Ali <atif276ali@gmail.com>
Date: Mon, 8 Jan 2024 16:45:11 +0530
Subject: [PATCH] Added community partners

---
 package-lock.json                     | 16 ++++++++++
 package.json                          |  1 +
 src/constants/communityData.js        | 27 +++++++++++++++++
 src/index.css                         |  2 +-
 src/pages/Home/Home.jsx               |  2 ++
 src/partials/Community/Community.jsx  | 42 +++++++++++++++++++++++++++
 src/partials/Community/Community.scss | 23 +++++++++++++++
 7 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 src/constants/communityData.js
 create mode 100644 src/partials/Community/Community.jsx
 create mode 100644 src/partials/Community/Community.scss

diff --git a/package-lock.json b/package-lock.json
index 0768a54..8ed6460 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "antd": "^5.11.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-fast-marquee": "^1.6.2",
         "react-icons": "^4.11.0",
         "react-router-dom": "^6.18.0",
         "react-router-hash-link": "^2.4.3",
@@ -8456,6 +8457,15 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-fast-marquee": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.6.2.tgz",
+      "integrity": "sha512-bXUuW1r+Yzd8ZjsPmMDy8WJMubHAZd/7n0W/IzUQHtd0iBfxWohP6hzCFnEHWMCOtC9wxSAq/BiEnig4kdI2Vw==",
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 18.0.0",
+        "react-dom": ">= 16.8.0 || 18.0.0"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
@@ -16627,6 +16637,12 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-fast-marquee": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.6.2.tgz",
+      "integrity": "sha512-bXUuW1r+Yzd8ZjsPmMDy8WJMubHAZd/7n0W/IzUQHtd0iBfxWohP6hzCFnEHWMCOtC9wxSAq/BiEnig4kdI2Vw==",
+      "requires": {}
+    },
     "react-icons": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
diff --git a/package.json b/package.json
index 3a7a4ef..8644c56 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "antd": "^5.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.2",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.18.0",
     "react-router-hash-link": "^2.4.3",
diff --git a/src/constants/communityData.js b/src/constants/communityData.js
new file mode 100644
index 0000000..c2ac225
--- /dev/null
+++ b/src/constants/communityData.js
@@ -0,0 +1,27 @@
+export const community = [
+  {
+    name: "Example 1",
+    url: "https://pngimg.com/d/github_PNG15.png",
+    link: "/example1",
+  },
+  {
+    name: "Example 2",
+    url: "https://upload.wikimedia.org/wikipedia/commons/c/c2/Postman_%28software%29.png",
+    link: "/example2",
+  },
+  {
+    name: "Example 3",
+    url: "https://pngimg.com/d/github_PNG15.png",
+    link: "/example3",
+  },
+  {
+    name: "Example 4",
+    url: "https://pngimg.com/d/github_PNG15.png",
+    link: "/example4",
+  },
+  {
+    name: "Example 5",
+    url: "https://upload.wikimedia.org/wikipedia/commons/c/c2/Postman_%28software%29.png",
+    link: "/example2",
+  },
+];
diff --git a/src/index.css b/src/index.css
index 436b945..fec5a21 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,7 +11,7 @@ body {
 * {
   font-family: "Inter var", sans-serif !important;
   margin: 0;
-  padding: 0; 
+  padding: 0;
 }
 
 .primary {
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index 5607143..59bb31e 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -8,6 +8,7 @@ import Apply from "partials/Apply/Apply";
 import Projects from "partials/Projects/Projects";
 import Timeline from "partials/Timeline/Timeline";
 import FAQ from "partials/FAQ/FAQ.jsx";
+import Community from "partials/Community/Community";
 
 const Home = () => {
   return (
@@ -16,6 +17,7 @@ const Home = () => {
       <About />
       <Statistics />
       <SOM />
+      <Community />
       <Apply />
       {/* <Projects /> */}
       <Timeline />
diff --git a/src/partials/Community/Community.jsx b/src/partials/Community/Community.jsx
new file mode 100644
index 0000000..21f99df
--- /dev/null
+++ b/src/partials/Community/Community.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+import "./Community.scss";
+import Marquee from "react-fast-marquee";
+
+import { community } from "constants/communityData";
+const Community = () => {
+  return (
+    <div className="scroll">
+      <h1 className="community">Community Partners</h1>
+      <Marquee pauseOnHover speed={70}>
+        {community.map((item) => {
+          return (
+            <a
+              target="_blank"
+              href={item.link}
+              key={item.name}
+              rel="noreferrer"
+            >
+              <img className="image" src={item.url} alt={item.name} />
+            </a>
+          );
+        })}
+      </Marquee>
+      <Marquee pauseOnHover speed={70} direction="right">
+        {community.map((item) => {
+          return (
+            <a
+              target="_blank"
+              href={item.link}
+              key={item.name}
+              rel="noreferrer"
+            >
+              <img className="image" src={item.url} alt={item.name} />
+            </a>
+          );
+        })}
+      </Marquee>
+    </div>
+  );
+};
+
+export default Community;
diff --git a/src/partials/Community/Community.scss b/src/partials/Community/Community.scss
new file mode 100644
index 0000000..b7a6b58
--- /dev/null
+++ b/src/partials/Community/Community.scss
@@ -0,0 +1,23 @@
+.scroll {
+  width: 100%;
+  height: 350px;
+  margin: 10px 0px 70px 0px;
+}
+.image {
+  height: 80px;
+  margin: 35px;
+}
+.community {
+  text-align: center;
+  margin-bottom: 40px;
+}
+@media screen and (max-width: 768px) {
+  .scroll {
+    height: 170px;
+    margin-top: 20px;
+  }
+  .image {
+    height: 50px;
+    margin: 10px;
+  }
+}