add: Bagian Anggota

package.json

@@ -10,10 +10,8 @@
     "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"
   },

src/App.jsx

@@ -6,7 +6,7 @@ import './stylesheet/main.css'
 import Navbar from "./partials/core/Navbar.jsx";
 import Footer from "./partials/core/Footer.jsx";
 
-function App() {
+export default function App() {
   return (
     <Router>
         <Navbar/>
@@ -18,6 +18,4 @@ function App() {
         <Footer/>
     </Router>
   )
-}
-
-export default App
+}

src/pages/Main.jsx

@@ -1,12 +1,12 @@
-import '../stylesheet/index.css'
 import AnimatedPage from "../partials/animation/AnimatedPage.jsx";
 import SBK from "../partials/main/SBK.jsx";
 import BGBlack from "../partials/main/BGBlack.jsx";
 import Cards from "../partials/main/Cards.jsx";
 import AnotherFeaturesOfSBK from "../partials/main/AnotherFeaturesOfSBK.jsx";
 import LearnBasics from "../partials/main/LearnBasics.jsx";
+import '../stylesheet/index.css'
 
-function Main() {
+export default function Main() {
   return (
     <AnimatedPage>
       <SBK/>
@@ -16,6 +16,4 @@ function Main() {
       <LearnBasics />
     </AnimatedPage>
   )
-}
-
-export default Main
+}

src/pages/Member.jsx

@@ -1,25 +1,30 @@
-import Petinggi from "../partials/member/Petinggi.jsx";
-import AnimatedPage from "../partials/animation/AnimatedPage.jsx";
+import Petinggi from "../partials/member/Petinggi.jsx"
+import AnimatedPage from "../partials/animation/AnimatedPage.jsx"
+import GenSwitch from "../partials/member/GenSwitch.jsx"
+import {useSearchParams} from "react-router-dom"
+import {useState} from "react"
+import Struktur from "../partials/member/Struktur.jsx"
+import Gen12 from "../partials/member/Gen12.jsx"
+import Gen13 from "../partials/member/Gen13.jsx"
+
+export default function Member() {
+  const [query] = useSearchParams()
+  const [gen, setGen] = useState(parseInt(query.get('gen')))
+  const changeGen = (gen) => {
+    window.history.replaceState({}, '', `/member?gen=${gen}`)
+    setGen(gen)
+  }
 
-function Member() {
   return (
-    <AnimatedPage>
-      <Petinggi jabatan='penanggung jawab' nama='devit hari ashari, s.pd.' marginTop='2' gambar='devit-cache.png'
-                alt='Ustadz Devit Hari Ashari'/>
-      <hr/>
-      <Petinggi jabatan='pembina' nama='diantika arifianti, s.t.' marginTop='3' gambar='devit-cache.png' alt='Ustadzah Dian'/>
-      <div className="d-flex justify-content-center fs-3 mb-2">
-        <button type="button" className="active">
-          Gen 12
-        </button>
-        <button type="button">Gen 13</button>
-      </div>
-      <div className="member-container p-4 pt-5 mt-5">
-        {/*?php include 'pages/gen12.php' ?*/}
-      </div>
+    <AnimatedPage bgColor='#CECECE'>
+      <Petinggi jabatan='penanggung jawab' nama='devit hari ashari, s.pd.' gambar='devit-cache'
+                alt='Ustadz Devit Hari Ashari' mt='0' my='3'/>
+      <Petinggi jabatan='pembina' nama='diantika arifianti, s.t.' gambar='devit-cache' alt='Ustadzah Dian' mt='5' my='4'/>
+      <GenSwitch gen={gen} changeGen={changeGen} />
+      <Struktur>
+        {gen === 12 ? (<Gen12/>) : (<Gen13/>)}
+      </Struktur>
     </AnimatedPage>
 
   )
-}
-
-export default Member
+}

src/pages/Mikrotik.jsx

@@ -1,7 +1,5 @@
 import AnimatedPage from "../partials/animation/AnimatedPage.jsx";
 
-function Mikrotik() {
+export default function Mikrotik() {
   return <AnimatedPage></AnimatedPage>
-}
-
-export default Mikrotik
+}

src/partials/animation/AnimatedPage.jsx

@@ -6,18 +6,17 @@ const animation = {
   exit: {opacity: 0, x: 100}
 }
 
-function AnimatedPage({children, onScroll}) {
+export default function AnimatedPage({children, onScroll, bgColor = 'white'}) {
   return (
     <motion.div
       variants={animation}
       initial='initial'
       animate='animate'
       exit='exit'
       onScroll={onScroll}
+      style={{backgroundColor: bgColor}}
     >
       {children}
     </motion.div>
   )
-}
-
-export default AnimatedPage
+}

src/partials/core/Footer.jsx

@@ -1,11 +1,9 @@
-function Footer() {
+export default function Footer() {
   return (
     <footer>
       <p>Social</p>
       <hr className="bg-white"/>
       <p>Copyright© SBK 2024</p>
     </footer>
   )
-}
-
-export default Footer
+}

src/partials/core/Navbar.jsx

@@ -1,4 +1,4 @@
-function Navbar() {
+export default function Navbar() {
     return (
         <nav>
             <a href="/">
@@ -11,7 +11,7 @@ function Navbar() {
             <div className="position-absolute top-50 start-50 translate-middle d-flex">
                 <a href="/mikrotik">mikrotik</a>
                 <a href="#">learn basic</a>
-                <a href="/member">member</a>
+                <a href="/member?gen=13">member</a>
                 <a href="#">xtra</a>
             </div>
             <a href="#">
@@ -20,6 +20,4 @@ function Navbar() {
         </nav>
 
     )
-}
-
-export default Navbar
+}

src/partials/main/AnotherFeaturesOfSBK.jsx

@@ -1,6 +1,6 @@
 import {useState} from "react";
 
-function AnotherFeaturesOfSBK() {
+export default function AnotherFeaturesOfSBK() {
   const parallax = () => {
     const scroll = window.scrollY - 1711
     setClipLong(`polygon(0 0, ${20 + scroll / 15}% 0, ${3 + scroll / 15}% 100%, 0 100%)`)
@@ -17,29 +17,27 @@ function AnotherFeaturesOfSBK() {
           <div className="container position-relative">
             <span className="overlay bg-1" style={{clipPath: clipLong}}/>
             <h1 className='text-white'>sBK store</h1>
-            <a href="#">Let’s go shopping -&gt;</a>
+            <a href="#">Let’s go shopping →</a>
           </div>
           <div className="container position-relative">
             <span className="overlay bg-5" style={{clipPath: clipShort}}/>
             <h1 className='text-white'>member</h1>
-            <a href="#">know us -&gt;</a>
+            <a className='text-white' href="#">know us →</a>
           </div>
         </div>
         <div className="d-grid grid-4">
           <div className="container position-relative">
             <span className="overlay bg-3" style={{clipPath: clipShort}}/>
             <h1>sBK xtra</h1>
-            <a href="#">check another things -&gt;</a>
+            <a href="#">check another things →</a>
           </div>
           <div className="container position-relative">
             <span className="overlay bg-4" style={{clipPath: clipLong}}/>
             <h1>mIKROTIK academy</h1>
-            <a href="#">learn more -&gt;</a>
+            <a href="#">learn more →</a>
           </div>
         </div>
       </div>
     </div>
   )
-}
-
-export default AnotherFeaturesOfSBK
+}

src/partials/main/BGBlack.jsx

@@ -1,5 +1,3 @@
-function BGBlack() {
+export default function BGBlack() {
   return (<div className="bg-black second-content w-100"/>)
-}
-
-export default BGBlack
+}

src/partials/main/Card.jsx

@@ -1,21 +1,19 @@
-function Card({judul, isi, gambar, reverse = false}) {
+export default function Card({judul, isi, gambar, reverse = false}) {
   return reverse ? (
     <div className="a-first container">
       <div className="text">
         <h1 className="fs-2 text-capitalize">{judul}</h1>
         <p className="cmb-1">{isi}</p>
       </div>
-      <img src={`/pictures/${gambar}`} alt={judul} className="icon w-100"/>
+      <img src={`/pictures/${gambar}.png`} alt={judul} className="icon w-100"/>
     </div>
   ) : (
     <div className="p-first container">
-      <img src={`/pictures/${gambar}`} alt={judul} className="icon w-100"/>
+      <img src={`/pictures/${gambar}.png`} alt={judul} className="icon w-100"/>
       <div className="text">
         <h1 className="fs-2 text-capitalize">{judul}</h1>
         <p className="cmb-1">{isi}</p>
       </div>
     </div>
   )
-}
-
-export default Card
+}

src/partials/main/Cards.jsx

@@ -1,6 +1,6 @@
 import Card from "./Card.jsx";
 
-function Cards() {
+export default function Cards() {
   return (
     <div className="bg-white third-content">
       <Card
@@ -11,12 +11,12 @@ function Cards() {
           Belajar coding dapat membuka berbagai peluang karir di bidang
           teknologi dan juga dapat meningkatkan keterampilan pemecahan masalah
           dalam kehidupan.'
-        gambar='bg-2.png'
+        gambar='bg-2'
       />
       <Card
         judul='computer & network ability'
         isi='Dapatkan pengalaman belajar, keterampilan, pengetahuan, dan sikap kompeten lebih banyak  dalam merakit, menginstall program,  merawat dan memperbaiki komputer serta jaringannya.'
-        gambar='bg-3.png'
+        gambar='bg-3'
         reverse={true}
       />
       <Card
@@ -27,10 +27,8 @@ function Cards() {
               Belajar coding dapat membuka berbagai peluang karir di bidang
               teknologi dan juga dapat meningkatkan keterampilan pemecahan masalah
               dalam kehidupan.'
-        gambar='bg-4.png'
+        gambar='bg-4'
       />
     </div>
   )
-}
-
-export default Cards
+}

src/partials/main/LearnBasics.jsx

@@ -1,12 +1,12 @@
-function LearnBasics() {
+export default function LearnBasics() {
   return (
     <div className="container grid-center position-relative">
       <img src="/pictures/cache-1.png" alt="Konten"/>
       <div className="csb-1">
         <div className="d-grid grid-1">
-          <div className="text bg-2">
-            <h1 className="title">learn basics</h1>
-            <p className="text-white mt-2">
+          <div className="text mt-0 bg-2">
+            <h1 className="title fw-semibold">learn basics</h1>
+            <p className="text-white mt-1">
               Belajar dasar jaringan dengan materi yang praktis dan interaktif
             </p>
           </div>
@@ -17,6 +17,4 @@ function LearnBasics() {
       </div>
     </div>
   )
-}
-
-export default LearnBasics
+}

src/partials/main/SBK.jsx

@@ -1,4 +1,4 @@
-function SBK() {
+export default function SBK() {
   return (
     <div className="w-100 h-100 bgi-1">
       <div className="a-first container">
@@ -13,6 +13,4 @@ function SBK() {
       </div>
     </div>
   )
-}
-
-export default SBK
+}