Add team page starter

src/App.tsx

@@ -9,6 +9,7 @@ import AttendTGPPage from "./pages/Attend/TravelGrantProgram";
 import Workshops from "./pages/Program/Workshops";
 import CommunityDayPage from "./pages/Program/CommunityDay";
 import Sponsorship from "./pages/Sponsorship";
+import Team from "./pages/Team";
 import OurConferenceVenuePage from "./pages/Attend/OurConferenceVenue";
 import ProgramPage from "./pages/Program/Program";
 import RegisterPage from "./pages/Attend/Register";
@@ -41,6 +42,7 @@ export default function App() {
           <Route path="program/community-day" element={<CommunityDayPage />} />
           <Route path="program/product-showcase" element={<ProductShowcasePage />} />
           <Route path="sponsorship" element={<Sponsorship />} />
+          <Route path="team" element={<Team />} />
           <Route path="*" element={<NoPage />} />
         </Route>
       </Routes>

src/documents/team.md

@@ -3,13 +3,13 @@
 Blurb and statement of thanks to the people and the organisation that supports their efforts here
 
 
-![Name](img/name.png)
+![Name](/imgs/venues-map.png)
 Name <br />
 Role <br />
 [Company](weblink)
 <!-- I want the picture and logo to sit side by side
 Also I want to not mess around with sub folders and it would be super cool if I could also have the picture as a circle with a border around it--->
 
 ## Supporting companies
-![Company logo](img/logo-company.png)
+![Company logo](/imgs/venues-map.png)
 

src/pages/Team.tsx

@@ -0,0 +1,77 @@
+import { useState, useEffect } from "react";
+import Markdown from "markdown-to-jsx";
+
+import MarkDownDoc from "../documents/team.md";
+
+import Blockquote from "../components/Blockquote";
+
+const ProductShowcasePage = () => {
+  const [mddText, setMddText] = useState("");
+
+  // Fetch Terms of Use
+  useEffect(() => {
+    fetch(MarkDownDoc)
+      .then((res) => res.text())
+      .then((text) => setMddText(text));
+  });
+  return (
+    <>
+      <section
+        style={{
+          backgroundImage: "url('/imgs/Soar_AUT_2.png')",
+          backgroundSize: "cover",
+          backgroundPosition: "center 0px",
+        }}
+        className="relative flex items-center justify-center h-64 bg-gray-100 bg-no-repeat bg-cover bg-center"
+      ></section>
+      <section className="container px-6 py-8 mx-auto lg:py-16">
+        <div>
+          <Markdown
+            options={{
+              overrides: {
+                h1: {
+                  props: {
+                    className:
+                      "text-3xl font-medium text-gray-800 md:text-2xl lg:text-3xl",
+                  },
+                },
+                h2: {
+                  props: {
+                    className:
+                      "text-2xl font-semibold text-gray-700 capitalize",
+                  },
+                },
+                h3: {
+                  props: {
+                    className: "text-xl font-semibold text-gray-700 capitalize",
+                  },
+                },
+                ul: {
+                  props: {
+                    className: "list-disc list-outside ms-8",
+                  },
+                },
+                ol: {
+                  props: {
+                    className: "list-decimal list-outside ms-8",
+                  },
+                },
+                blockquote: {
+                  component: Blockquote,
+                },
+                a: {
+                  props: {
+                    className: "text-blue-500 underline",
+                    target: "_blank",
+                  },
+                },
+              },
+            }}
+            children={mddText}
+          />
+        </div>
+      </section>
+    </>
+  );
+};
+export default ProductShowcasePage;