Merge pull request #11 from leslieyip02/KAN-12-Create-About-Page

KAN-12 Create About Page

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@babel/plugin-syntax-import-attributes": "^7.23.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",

src/App.jsx

@@ -1,5 +1,6 @@
-import { Routes, Route } from 'react-router-dom';
-import { Home, Privacy } from './pages';
+import { useEffect } from 'react';
+import { useLocation, Routes, Route } from 'react-router-dom';
+import { About, Home, Privacy } from './pages';
 import NavigationBar from './layout/NavigationBar';
 import Footer from './layout/Footer';
 import './App.css';
@@ -10,16 +11,33 @@ function App() {
       <NavigationBar />
 
       {/* Main content */}
+      <ScrollToTop />
       <main className='w-full min-h-[100vh]'>
         <Routes>
           <Route path='/' element={<Home />} />
           <Route path='/privacy' element={<Privacy />} />
         </Routes>
+        <Routes>
+          <Route path='/about' element={<About />} />
+        </Routes>
       </main>
 
       <Footer />
     </>
   );
 }
 
+// this is needed so that the page automaticall scrolls to the top
+// when the route changes
+function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
+
+
 export default App;

src/layout/NavigationBar.css

@@ -9,5 +9,6 @@
     md:px-20
     py-4
     bg-white
+    z-50
   ;
 }

src/layout/WindowCard.css

@@ -0,0 +1,35 @@
+.window {
+  @apply
+    rounded-2xl
+    border-outline
+    border-2
+    overflow-hidden
+    drop-shadow-window
+  ;
+}
+
+.action-bar {
+  @apply
+    flex
+    flex-row
+    p-2
+    bg-[#f2f2f2]
+    border-outline
+    border-b-2
+  ;
+}
+
+.action-button {
+  @apply
+    rounded-full
+    w-4
+    h-4
+    mx-1
+  ;
+}
+
+.window-content {
+  @apply
+    bg-white
+  ;
+}

src/layout/WindowCard.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import './WindowCard.css';
+
+interface WindowProps {
+  content: React.ReactNode;
+  heightClass?: string;
+  widthClass?: string;
+}
+
+function WindowCard(props: WindowProps) {
+  return (
+    <div className={
+      `window ${props.heightClass || ''} ${props.widthClass || ''}`
+    }>
+      <div className='action-bar'>
+        <div className='action-button bg-[#ff605c]'></div>
+        <div className='action-button bg-[#ffbd44]'></div>
+        <div className='action-button bg-[#00ca4e]'></div>
+      </div>
+      <div className='window-content'>
+        <div>{props.content}</div>
+      </div>
+    </div>
+  );
+}
+
+export default WindowCard;

src/pages/about/RoleCard.css

@@ -0,0 +1,40 @@
+.role-card {
+  @apply
+    w-48
+    p-4
+    flex
+    flex-col
+    items-start
+    gap-1
+  ;
+}
+
+.role-card>img {
+  @apply
+    rounded-md
+    w-32
+    h-32
+    object-cover
+    object-top
+    self-center
+  ;
+}
+
+.role-label {
+  @apply
+    h-20
+    m-2
+  ;
+}
+
+.role-label>h4 {
+  @apply
+    font-bold
+  ;
+}
+
+.role-label>p {
+  @apply
+    text-sm
+  ;
+}

src/pages/about/RoleCard.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import WindowCard from '../../layout/WindowCard';
+import './RoleCard.css';
+
+interface RoleCardProps {
+  name: string;
+  role: string;
+  imgSrc: string;
+}
+
+function RoleCard(props: RoleCardProps) {
+  const content = (
+    <div className='role-card'>
+      <img src={props.imgSrc}></img>
+      <div className='role-label'>
+        <h4>{props.name}</h4>
+        <p>{props.role}</p>
+      </div>
+    </div>
+  );
+
+  return (
+    <WindowCard content={content}></WindowCard>
+  );
+}
+
+export default RoleCard;

src/pages/about/RolesSection.css

@@ -0,0 +1,26 @@
+.wing {
+  @apply
+    my-8
+  ;
+}
+
+.wing>h1 {
+  @apply
+    text-3xl
+    text-primary
+    text-center
+    font-bold
+  ;
+}
+
+.member-container {
+  @apply
+    p-8
+    md:px-20
+    flex
+    flex-wrap
+    justify-center
+    gap-8
+    md:gap-16
+  ;
+}

src/pages/about/RolesSection.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import RoleCard from './RoleCard';
+import roles from './roles.json' with {type: 'json'};
+import './RolesSection.css';
+
+function RolesSection() {
+  return (
+    <>
+      {
+        Object.entries(roles).map((value) => {
+          const [wing, members] = value;
+          return (
+            <div className='wing' key={wing}>
+              <h1>{wing}</h1>
+              <div className='member-container'>
+                {
+                  members.map((member) => {
+                    const imgSrc: string =
+                      `members/${member.name.replace(/\s/g, '')}.jpg`;
+                    return <RoleCard
+                      name={member.name}
+                      role={member.role}
+                      imgSrc={imgSrc}
+                      key={member.name}
+                    ></RoleCard>;
+                  })
+                }
+              </div>
+            </div>
+          );
+        })
+      }
+    </>
+  );
+}
+
+export default RolesSection;