Add pages about the ReScript Association and donations

data/sidebar_community.json

@@ -5,5 +5,9 @@
     "roadmap",
     "code-of-conduct",
     "translations"
+  ],
+  "ReScript Association": [
+    "association",
+    "donate"
   ]
 }

pages/community/association.mdx

@@ -0,0 +1,36 @@
+---
+title: "About"
+description: "The ReScript Association is dedicated to the development and support of the ReScript programming language."
+canonical: "community/association"
+---
+
+# The ReScript Association
+
+The ReScript Association is dedicated to the development and support of the ReScript programming language
+
+ReScript is a programming language for building complex JavaScript applications and user interfaces. It was designed for professional JavaScript and TypeScript developers, and integrates seamlessly in existing JavaScript projects for gradual adoption.
+
+Goal of ReScript is to provide a viable alternative to gradually typed languages, such as TypeScript. The type system was derived from the OCaml programming language, and refined for JavaScript usage.
+
+It provides one of the fastest compile-to-JS compilation and build toolchain in the JavaScript ecosystem available today.
+
+> ReScript is a robustly typed language that compiles to efficient and human-readable JavaScript.
+
+The ReScript Association provides a legal and financial foundation for Open Source related work within the ReScript project. It takes ownership of essential language infrastructure and is responsible for outside communication to industrial ReScript users, partners and donors.
+
+The organization is non-profit oriented. All its work is independently funded by industrial partners / research institutions / individuals, and openly accessible to the public.
+
+## Board 
+
+<div class="text-center"> 
+  Board (TODO)
+</div>
+
+## Our Actions
+
+The ReScript Association is responsible for the rescript-lang.org documentation platform and its server infrastructure.
+
+Individual ReScript Association members are also contributing to the syntax, compiler, IDE support and standard library.
+
+Apart from technical tasks, the ReScript Association is supporting the ReScript core team by organizing community events (conferences / meetups), managing the ReScript brand / marketing assets, creating yearly donor reports, and promoting the ReScript platform.
+

pages/community/donate.mdx

@@ -0,0 +1,20 @@
+---
+title: "Donate"
+description: "How to donate to the ReScript Association."
+canonical: "/community/donate"
+---
+
+# Donate
+
+Donations will help the ReScript project to maintain and improve the platform and to provide our users with a more accessible ReScript ecosystem.
+
+The ReScript language, its tooling and docmentation, are fully developed by the community. Thus, we rely on donations from organizations and individuals to stay independent. Additional financial resources help us to maintain essential language infrastructure (e.g. rescript-lang.org, syntax, editor-tooling), and to organize events, like the [annual ReScript Retreat](/blog/retreats).
+
+It also enables us to fund important Open Source projects within the ReScript ecosystem.
+
+## How to Donate?
+
+For now we only support SEPA transfers. 
+
+
+<DonationForm />

src/components/Footer.res

@@ -51,9 +51,14 @@ let make = () => {
               </Next.Link>
             </li>
             <li>
-              <a href="https://rescript-association.org" className=linkClass>
+              <Next.Link href="/community/association" className={linkClass}>
                 {React.string("ReScript Association")}
-              </a>
+              </Next.Link>
+            </li>
+            <li>
+              <Next.Link href="/community/donate" className={linkClass}>
+                {React.string("Donate")}
+              </Next.Link>
             </li>
           </ul>
         </Section>

src/components/Markdown.res

@@ -529,6 +529,11 @@ module Video = {
   }
 }
 
+module DonationForm = {
+  @react.component
+  let make = () => <DonationForm />
+}
+
 // Useful for debugging injected values in props
 //  let mdxTestComponent: React.component<{.}> = %raw(`
 //  function(children) {

src/components/Markdown.resi

@@ -169,6 +169,11 @@ module Video: {
   let make: (~src: string, ~caption: string=?) => React.element
 }
 
+module DonationForm: {
+  @react.component
+  let make: unit => React.element
+}
+
 // Used for the MdxJS Provider
 
 /* Sets our preferred branded styles

src/components/MarkdownComponents.res

@@ -21,6 +21,8 @@ type t = {
   urlBox?: React.componentLike<UrlBox.props<string, string, Mdx.MdxChildren.t>, React.element>,
   @as("CodeTab")
   codeTab?: CodeTab.props<Mdx.MdxChildren.t, array<string>> => React.element,
+  @as("DonationForm")
+  donationForm?: React.componentLike<DonationForm.props, React.element>,
   /* Common markdown elements */
   p?: P.props<React.element> => React.element,
   li?: Li.props<React.element> => React.element,
@@ -74,4 +76,5 @@ let default = {
   pre: Pre.make,
   blockquote: Blockquote.make,
   code: Code.make,
+  donationForm: DonationForm.make,
 }

src/layouts/LandingPageLayout.res

@@ -682,15 +682,38 @@ module CuratedResources = {
   }
 }
 
-/*
 module Sponsors = {
   @react.component
-  let make = () =>
-    <div className="mt-24">
-      <h2 className="hl-1 text-center"> {React.string("Sponsors")} </h2>
-    </div>
+  let make = () => {
+    <section className="mt-20 flex flex-col items-center">
+      <h3 className="hl-1 text-gray-80 text-center max-w-576 mx-auto">
+        {React.string("From the community, for the community")}
+      </h3>
+      <div
+        className="flex flex-wrap mx-4 gap-8 justify-center items-center max-w-md lg:mx-auto mt-16 mb-16">
+        <p className="leading-4">
+          {React.string(
+            "We rely on donations from organizations and individuals to stay independent. ",
+          )}
+        </p>
+        <p className="leading-4">
+          {<>
+            {React.string(
+              "Additional financial resources help us to maintain essential language infrastructure, and to organize events, like the ",
+            )}
+            <Next.Link href="/blog/retreats" className="no-underline text-fire hover:underline">
+              {React.string("annual ReScript Retreat")}
+            </Next.Link>
+            {React.string(".")}
+          </>}
+        </p>
+      </div>
+      <Next.Link href="/community/donate">
+        <Button> {React.string("Donate")} </Button>
+      </Next.Link>
+    </section>
+  }
 }
-*/
 
 @react.component
 let make = (~components=MarkdownComponents.default, ~children) => {
@@ -721,6 +744,7 @@ let make = (~components=MarkdownComponents.default, ~children) => {
                     <OtherSellingPoints />
                     <TrustedBy />
                     <CuratedResources />
+                    <Sponsors />
                     children
                   </div>
                 </div>

src/others/DonationForm.res

@@ -0,0 +1,31 @@
+// TODO (fham): Make this a stripe checkout form.
+// 1. Create a rescript-association stripe account
+// 2. Use stripe's library on npm
+
+@react.component
+let make = () => {
+  <div className="max-w-2xl">
+    <div className="mb-6">
+      <div className="py-4 font-mono">
+        <p>
+          <strong> {React.string("IBAN: ")} </strong>
+          {React.string("AT24 2021 9000 2110 4161")}
+        </p>
+        <p>
+          <strong> {React.string("BIC: ")} </strong>
+          {React.string("GIBAATWWXXX")}
+        </p>
+        <p>
+          <strong> {React.string("Bank: ")} </strong>
+          {React.string("Erste Bank der oesterreichischen Sparkassen AG")}
+        </p>
+        <p>
+          <strong> {React.string("Account Name: ")} </strong>
+          {React.string("ReScript Association")}
+        </p>
+      </div>
+    </div>
+
+    <img src="/static/donation_qr_code.svg" className="w-48 mx-auto mt-6" alt="SEPA QR Code" />
+  </div>
+}