Create about page

src/routes/About/Hero.tsx

@@ -0,0 +1,10 @@
+export default function Hero() {
+  return (
+    <div className="grid min-h-[10vh] place-items-center bg-background">
+      <h3 className="text-3xl text-primary">About Us</h3>
+      <p className="text-primary">
+        Little snippet about the server & community.
+      </p>
+    </div>
+  );
+}

src/routes/About/Staff.tsx

@@ -0,0 +1,15 @@
+import StaffCard from "./StaffCard.tsx";
+import staff from "./staff-info.json";
+
+export default function Staff() {
+  return (
+    <div className="bg-primary pb-12 pt-6">
+      <h3 className="mb-12 text-center text-3xl text-secondary">Staff</h3>
+      <div className="mx-36 grid grid-cols-2 gap-x-48 gap-y-16">
+        {staff.map((member: Staff, index) => (
+          <StaffCard staff={member} key={index} />
+        ))}
+      </div>
+    </div>
+  );
+}

src/routes/About/StaffCard.tsx

@@ -0,0 +1,24 @@
+interface Props {
+  staff: Staff;
+}
+
+export default function StaffCard({ staff }: Props) {
+  return (
+    <div className="outer mx-auto max-h-60 rounded-2xl border border-solid border-transparent p-2.5">
+      <div className="inner flex flex-col rounded-lg px-4 py-6 text-secondary">
+        <div className="flex items-center">
+          <img
+            className="mr-3 size-20 rounded-full"
+            src={`/images/${staff.name.toLowerCase()}.png`}
+            alt={staff.name}
+          />
+          <div className="flex flex-col">
+            <h4 className="text-4xl">{staff.name}</h4>
+            <p>{`${staff.preferredLanguage} - ${staff.yearsExp.toString()} years`}</p>
+          </div>
+        </div>
+        <p className="mt-4">{staff.bio}</p>
+      </div>
+    </div>
+  );
+}

src/routes/About/index.tsx

@@ -1,7 +1,11 @@
+import Hero from "./Hero.tsx";
+import Staff from "./Staff.tsx";
+
 export default function About() {
   return (
-    <main className="grid min-h-[25vh] place-items-center bg-primary">
-      <h3 className="text-3xl text-secondary">About Code Cafe</h3>
+    <main className="min-h-[80vh]">
+      <Hero />
+      <Staff />
     </main>
   );
 }

src/routes/About/staff-info.json

@@ -0,0 +1,8 @@
+[
+  {
+    "name": "Cykotech",
+    "preferredLanguage": "C#",
+    "bio": "After spending 10+ years as a culinary professional, I've decided to switch into tech as a Web Developer. I initially started on the Codecademy platform to form my coding foundation. I have since then adopted C# as my primary language.",
+    "yearsExp": 2
+  }
+]

src/types.d.ts

@@ -0,0 +1,6 @@
+interface Staff {
+  name: string;
+  preferredLanguage: string;
+  bio: string;
+  yearsExp: number;
+}