new changes

pbdsce · Nov 18, 2023 · 0b23e0b · 0b23e0b
1 parent 831f7d5
commit 0b23e0b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/src/assets/scss/members/members.scss b/src/assets/scss/members/members.scss
@@ -39,11 +39,11 @@
     background-color: rgba(255, 255, 255, 0.079);
     border-radius: 7px;
     // min-height: 350px;
-    width: 337px;
+    width: 330px;
     display: flex;
     align-items: flex-end;
     justify-content: center;
-    height: 400px;
+    height: 330px;
     overflow: hidden;
     // margin-bottom: 5%;
     position: relative;

diff --git a/src/components/Members/Members.js b/src/components/Members/Members.js
@@ -3,7 +3,20 @@ import SectionHeader from '../sections/partials/SectionHeader'
 import Hero2 from "../sections/Hero2";
 import data from "../../core.json";
 import "../../assets/scss/members/members.scss";
-import {Link} from "react-router-dom"
+import { Link } from "react-router-dom"
+
+export const Card = ({img, name, role}) => {
+    return (
+        <Link to="https://pointblank.vercel.app/kitarp29" className="members-container">
+            <img src={img} alt="logo" className='members-img' />
+            <div className='members-img-overlay'></div>
+            <div className='members-info-container'>
+                <h2>{name}</h2>
+                <h3>{role}</h3>
+            </div>
+        </Link>
+    )
+}
 
 const Members = () => {
 
@@ -17,17 +30,16 @@ const Members = () => {
 
             <div className="container">
                 <SectionHeader style={{ marginTop: "-30px" }} data={sectionHeader} className="center-content" />
+                <h3 style = {{marginLeft:"10px"}}>Leads</h3>
+                <div className='members-parent-container'>
+                    {data.filter((x)=>x.role==="Lead").map((item, key) => (
+                        <Card img={item.img} key={key} name={item.name} role={item.role} />
+                    ))}
+                </div>
+                <h3 style = {{marginLeft:"10px"}}>Members</h3>
                 <div className='members-parent-container'>
-                    {data.map((item,key)=>(
-                        <Link to="https://pointblank.vercel.app/kitarp29" className="members-container" key={key}>
-                            <img src={item.img} alt="logo" className='members-img'/>
-                            <div className='members-img-overlay'></div>
-                        <div className='members-info-container'>
-
-                            <h2>{item.name}</h2>
-                            <h3>{item.role}</h3>
-                        </div>
-                    </Link>
+                    {data.filter((x)=>x.role==="Member").map((item, key) => (
+                        <Card img={item.img} key={key} name={item.name} role={item.role} />
                     ))}
                 </div>
             </div>