Add fundable projects page

docusaurus.config.ts

@@ -110,6 +110,13 @@ const config: Config = {
           className: "custom_navbar_item",
           label: "Blog",
           position: "left",
+        },
+              {
+          to: "/fundable/",
+          className: "custom_navbar_item",
+          label: "Fundable projects",
+          position: "right",
+          className:"fundable_projects"
         },
         {
           to: "/contact/",

src/components/footer/Footer.tsx

@@ -65,6 +65,16 @@ export default function Footer() {
                   </li>
                 </ul>
               </div>
+            <div className="col flex-horizontally-centered">
+                <ul>
+                  <li>
+                    <Link href={"/fundable"}>Fundable projects</Link>
+                  </li>
+                  <li>
+                    <Link href={"/contact"}>Contact us</Link>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
         </div>

src/components/fundable/GetAQuoteForm.tsx

@@ -0,0 +1,90 @@
+import styles from "./styles.module.css";
+
+export default function GetAQuoteForm() {
+    return (
+      <>
+        <form
+          action="https://formspree.io/f/xjvndwdq"
+          method="POST"
+          className={styles.contact_form}
+        >
+          <div className="form-group">
+             <div>
+              <label className={styles.form_label}>Project name</label>
+            </div>
+             <div className={styles.input_container}>
+              <input
+                type="text"
+                className={styles.small_input}
+                name="Project name"
+                id="Project name"
+              />
+            </div>
+            <div>
+              <label className={styles.form_label}>Your name</label>
+            </div>
+            <div className={styles.input_container}>
+              <input
+                type="text"
+                className={styles.small_input}
+                name="name"
+                id="name"
+              />
+            </div>
+          </div>
+          <div className="form-group">
+            <div>
+              <label className={styles.form_label}>Your company</label>
+            </div>
+            <div className={styles.input_container}>
+              <input className={styles.small_input} name="company" id="company" />
+            </div>
+          </div>
+          <div className="form-group">
+            <div>
+              <label className={styles.form_label}>Your email</label>
+            </div>
+            <div className={styles.input_container}>
+              <input
+                type="text"
+                className={styles.small_input}
+                name="email"
+                id="email"
+              />
+            </div>
+          </div>
+          <div className="form-group">
+            <div>
+              <label className={styles.form_label}>Your phone number</label>
+            </div>
+            <div className={styles.input_container}>
+              <input
+                type="text"
+                className={styles.small_input}
+                name="phone-number"
+                id="phone-number"
+              />
+            </div>
+          </div>
+          <div className="form-group">
+            <div>
+              <label className={styles.form_label}>Your message to us</label>
+            </div>
+            <div>
+              <textarea
+                className={styles.large_input}
+                placeholder="Please explain your interests in funding this project"
+                name="message"
+                id="message"
+              ></textarea>
+            </div>
+          </div>
+          <div>
+          <div className={"flex-full-centered" + " "+ styles.send_button_container}>
+            <input type="submit" value="SEND" className={"link-to-button" + " " + styles.send_button} />
+          </div>
+          </div>
+        </form>
+      </>
+    );
+  }

src/components/fundable/GetAQuotePage.tsx

@@ -0,0 +1,69 @@
+
+import styles from "./styles.module.css";
+import GetAQuoteForm from "./GetAQuoteForm"
+import { LargeProjectCardContent } from "./LargeProjectCard";
+import { useHistory, useLocation } from "@docusaurus/router";
+import Layout from "@theme/Layout";
+import { Route } from 'react-router-dom';
+import { getCategoryFromProjectPageName } from ".";
+import FundableProjects from ".";
+
+function GetAQuoteComponent({ project }) {
+    return (
+        <div className={styles.get_a_quote_dialog}>
+            <div className={"row" + " " + "flex-horizontally-centered"}>
+
+                <div className="col col--6">
+                    <LargeProjectCardContent project={project} />
+                </div>
+                <div className="col col--6">
+                    <h1 className={"padding-none text--center"}> Get a quote</h1>
+                    <div className="flex-horizontally-centered"><GetAQuoteForm /></div>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default function GetAQuotePage() {
+    const location = useLocation();
+    const history = useHistory();
+
+    const handleClose = () => {
+        history.push('/fundable');
+
+    }
+    return (
+        <Layout>
+            <FundableProjects />
+            <Route
+                path="/fundable/:pageName/GetAQuote"
+                render={({ match }) => {
+                    const { pageName } = match.params; /* extract the dynamic part from the url i.e. the pageName*/
+                    const projectsByCategory = getCategoryFromProjectPageName(pageName);
+                    const project = projectsByCategory.find((project) => project.pageName === pageName);
+                    if (!project) return null;
+
+                    return (
+                        <div className={styles.modal_overlay} >
+                            <div
+                                className={styles.modal_content}
+                                onClick={(e) => e.stopPropagation()}
+                            >
+                                <button
+                                    className="close-button"
+                                    style={{
+                                        position: "absolute",
+                                        top: "10px",
+                                        right: "10px",
+                                    }}
+                                    onClick={handleClose}
+                                />
+                                <GetAQuoteComponent project={project} />
+                            </div>
+                        </div>
+                    );
+                }}
+            />
+        </Layout>
+    )
+}

src/components/fundable/IconContainer.tsx

@@ -0,0 +1,26 @@
+import styles from "./styles.module.css";
+import Link from "@docusaurus/Link";
+import GHPicture from "@site/static/img/socialmedias/GH.svg";
+import LinkedInPicture from "@site/static/img/socialmedias/LinkedIn.svg";
+import BlueskyPicture from "@site/static/img/socialmedias/Bluesky.svg";
+import MastodonPicture from "@site/static/img/socialmedias/Mastodon.svg";
+
+export default function IconContainer({ project }) {
+    const icons = project.icons
+    return (
+
+
+        <div className={styles.icon_container}>
+            {icons.map((Icon, index) => (
+                <div key={index} className={styles.iconWrapper}>
+                    <Icon height={"42px"} width={"42px"}
+                        alt={
+                            "Icon for the fundable project."
+                        } />
+                </div>
+            ))}
+        </div>
+    );
+
+
+}

src/components/fundable/LargeProjectCard.tsx

@@ -0,0 +1,66 @@
+import styles from "./styles.module.css";
+import React from "react";
+import IconContainer from "./IconContainer";
+import LinkToGetAQuote from "./LinkToGetAQuote";
+import { useHistory, useLocation } from "@docusaurus/router";
+
+export function LargeProjectCardContent({ project }) {
+    const history = useHistory();
+    const location = useLocation();
+
+    function openDialog() {
+        const pageName = project.pageName;
+
+        history.push({
+            pathname: `/fundable/${pageName}/GetAQuote`,
+            state: { from: location.pathname, scrollY: window.scrollY },
+        });
+    }
+    return (
+        <div className={"container"} onClick={openDialog}>
+            <div className={"row-padding-none"}>
+                <div className="col col--12">
+                    <div className={styles.large_project_card_title}>{project.title}</div>
+                </div>
+            </div>
+            <div className="row">
+                <div className="col col--12">
+                    <div className={styles.large_project_card_text_container}>
+                        <div className={styles.large_project_card_section_title}>Overview</div>
+                        <div className={styles.large_project_card_description_container}>
+                            <div className={styles.large_project_card_description}>
+                                <project.description />
+                            </div>
+                        </div>
+                        <div className={styles.large_project_card_section_title}>Option A</div>
+                        <div className={styles.large_project_card_option}>
+                            {project.optionA}
+                        </div>
+                        <div className={styles.large_project_card_section_title}>Option B</div>
+                        <div className={styles.large_project_card_option}>
+                            {project.optionB}
+                        </div>
+                        <div className={styles.large_project_card_section_title}>Custom Option</div>
+                        <div className={styles.large_project_card_option}>
+                            {project.customOption}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default function LargeProjectCard({ project }) {
+    return (
+        <div className={styles.large_project_card}>
+            <LargeProjectCardContent project={project} />
+            <div className="row">
+                <div className="col col--12">
+                    <div className={styles.large_project_card_contact_text}>Are you interested in this project? Either entirely or partially, contact us for more information on how to help us fund it.</div>
+                    <div><LinkToGetAQuote label={"GET A QUOTE"} pageName={project.pageName} /></div>
+                </div>
+            </div>
+        </div>
+
+    );
+}

src/components/fundable/LargeProjectCardPage.tsx

@@ -0,0 +1,79 @@
+import { useHistory, useLocation } from "@docusaurus/router";
+import { useEffect } from "react";
+import styles from "./styles.module.css";
+import LargeProjectCard from "./LargeProjectCard";
+import { getCategoryFromProjectPageName } from ".";
+import FundableProjects from ".";
+import Layout from "@theme/Layout";
+import { Route } from 'react-router-dom';
+
+
+export default function LargeProjectCardPage() {
+  const location = useLocation();
+  const history = useHistory();
+
+  useEffect(() => {
+    if (location.state?.fromFundable) {
+      window.scrollTo({ top: location.state.scrollY ?? 0, behavior: 'auto' });
+    }
+  }, []);
+
+  const handleOverlayClick = () => {
+    const scrollY = location.state?.scrollY;
+    setTimeout(() => {
+      if (scrollY !== undefined) {
+        window.scrollTo({ top: scrollY, behavior: 'auto' });
+      }
+    }, 0);
+    history.replace('/fundable');
+  };
+
+  const handleClose = () => {
+    const scrollY = location.state?.scrollY;
+    if (location.state?.fromFundable) {
+      history.replace('/fundable');
+
+      setTimeout(() => {
+        if (scrollY !== undefined) {
+          window.scrollTo({ top: scrollY, behavior: 'auto' });
+        }
+      }, 0);
+    } else {
+      history.goBack();
+    }
+  }
+  return (
+    <Layout>
+      <FundableProjects />
+      <Route
+        path="/fundable/:pageName"
+        render={({ match }) => {
+          const { pageName } = match.params; /* extract the dynamic part from the url i.e. the pageName*/
+          const projectsByCategory = getCategoryFromProjectPageName(pageName);
+          const project = projectsByCategory.find((project) => project.pageName === pageName);
+          if (!project) return null;
+
+          return (
+            <div className={styles.modal_overlay} onClick={handleOverlayClick}>
+              <div
+                className={styles.modal_content}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <button
+                  className="close-button"
+                  style={{
+                    position: "absolute",
+                    top: "10px",
+                    right: "10px",
+                  }}
+                  onClick={handleClose}
+                />
+                <LargeProjectCard project={project} />
+              </div>
+            </div>
+          );
+        }}
+      />
+    </Layout>
+  )
+}

src/components/fundable/LinkToGetAQuote.tsx

@@ -0,0 +1,16 @@
+import styles from "./styles.module.css";
+import Link from "@docusaurus/Link";
+
+export default function LinkToGetAQuote({label, pageName}) {
+  const pathname = "/fundable/"+ pageName+ "/GetAQuote"
+  return (
+    <div className="flex-full-centered">
+      <Link
+        className={"link-to-button" + " " + styles.link_to_get_a_quote}
+        href={pathname}
+      >
+        {label}
+      </Link>
+    </div>
+  );
+}