Improvisasi #2

package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "bootstrap": "^5.3.3",
     "framer-motion": "^11.0.24",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "styled-components": "^6.1.8"

src/pages/Main.jsx

@@ -11,7 +11,7 @@ export default function Main() {
     <AnimatedPage>
       <SBK/>
       <BGBlack/>
-      <div className="bg-white third-content d-flex flex-column" style={{gap: '250px', marginTop: '200px'}}>
+      <div className="bg-white third-content d-flex flex-column" style={{gap: '250px', paddingTop: '200px'}}>
         <Cards/>
         <LearnBasics/>
       </div>

src/pages/Member.jsx

@@ -25,11 +25,11 @@ export default function Member() {
 
   return (
     <AnimatedPage bgColor='#CECECE'>
-      <div className='d-flex flex-column align-items-center'>
+      <div className='d-flex flex-column align-items-center bg-petinggi pb-5'>
         <Petinggi jabatan='penanggung jawab' nama='devit hari ashari, s.pd.' gambar='devit-cache'
-                  alt='Ustadz Devit Hari Ashari' mt='0' my='3'/>
+                  alt='Ustadz Devit Hari Ashari' mt='5' my='3'/>
         <Petinggi jabatan='pembina' nama='diantika arifianti, s.t.' gambar='devit-cache' alt='Ustadzah Dian' mt='5'
-                  my='4'/>
+                  my='3'/>
       </div>
       <GenSwitch gen={gen} changeGen={changeGen}/>
       <Struktur>

src/partials/member/Petinggi.jsx

@@ -2,7 +2,7 @@ import style from '../../stylesheet/member.module.css'
 
 export default function Petinggi({jabatan, nama, gambar, alt, mt, my}) {
   return (
-    <div className={`position-relative bg-white mt-${mt}`} style={{width: '70%', borderRadius: '8px'}}>
+    <div className={`position-relative bg-white mt-${mt}`} style={{width: '70%', borderRadius: '8px', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)'}}>
       <img
         src={`/pictures/${gambar}.png`}
         alt={alt}

src/partials/member/struktur/StrukturalCard.jsx

@@ -24,7 +24,7 @@ export default function StrukturalCard({jabatan = '', members = [], ikhwan = 3})
       let divs = []
       count = typeof from !== 'undefined' ? count + from : count
       for (let i = from || 0; i < count; i++) {
-        divs.push(typeof members[i] !== 'undefined' ? <Member key={i} member={members[i]}/> : <Member />)
+        divs.push(typeof members[i] !== 'undefined' ? <Member key={i} member={members[i]}/> : <Member/>)
         countNumber++
       }
       return divs
@@ -35,13 +35,16 @@ export default function StrukturalCard({jabatan = '', members = [], ikhwan = 3})
   useEffect(() => console.log(members.length), [members])
   return (
     <div className={`${style.card} d-flex flex-column align-items-center gap-2 pt-2 mt-4`}>
-      <h1 className={style.title}>{jabatan}</h1>
+      <div className='d-flex justify-content-between'>
+
+        <h1 className={style.title}>{jabatan}</h1>
+      </div>
       <MemberImageContainer justifyContent={justifyContent}>
         {few ? getMemberDiv('all') : (
           <>
             <ManyMembersContainer>
               <TwoMembersFromManyContainer>{getMemberDiv(2)}</TwoMembersFromManyContainer>
-              {ikhwan === 3 && members.length === 5 || members.length === 6 ? getMemberDiv(1, countNumber) : <Member />}
+              {ikhwan === 3 && members.length === 5 || members.length === 6 ? getMemberDiv(1, countNumber) : <Member/>}
             </ManyMembersContainer>
             <ManyMembersContainer>
               {getMemberDiv(1, countNumber)}

src/stylesheet/index.css

@@ -318,8 +318,9 @@ div {
     }
 }
 
-.hover-dark:hover {
-    /*filter: contrast(70%);*/
+.bg-petinggi {
+    background-image: url("/pictures/bg-petinggi.png");
+    background-size: 100%;
 }
 
 @media screen and (max-width: 1279px) {