✨ (donate) add faq button (#2946)

https://owid.slack.com/archives/C060QED1YJV/p1700824298501669?thread_ts=1700764200.030039&cid=C060QED1YJV
owid · Nov 24, 2023 · a42ab92 · a42ab92
2 parents 0e9f749 + 70a8418
commit a42ab92
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/site/DonatePage.tsx b/site/DonatePage.tsx
@@ -4,6 +4,8 @@ import { SiteHeader } from "./SiteHeader.js"
 import { SiteFooter } from "./SiteFooter.js"
 import { IMAGES_DIRECTORY, OwidGdocInterface } from "@ourworldindata/utils"
 import { ArticleBlocks } from "./gdocs/ArticleBlocks.js"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+import { faArrowDown } from "@fortawesome/free-solid-svg-icons"
 
 export const DonatePage = (props: {
     baseUrl: string
@@ -61,6 +63,15 @@ export const DonatePage = (props: {
                                 <em>Global Change Data Lab</em> and the{" "}
                                 <em>Our World in Data</em> team
                             </p>
+                            <p className="article-block__text">
+                                <a
+                                    href="#fa-qs-about-donations"
+                                    className="donate-page__faq-link"
+                                >
+                                    Learn more about donations in the FAQs
+                                    <FontAwesomeIcon icon={faArrowDown} />
+                                </a>
+                            </p>
                         </div>
                         <div className="col-start-7 span-cols-6 col-lg-start-7 span-lg-cols-6 col-md-start-6 span-md-cols-7 span-sm-cols-12">
                             <div className="donate-form-container">

diff --git a/site/css/donate.scss b/site/css/donate.scss
@@ -19,6 +19,18 @@
     }
     .article-block__text {
         @include body-2-regular;
+        margin-bottom: 24px;
+    }
+}
+
+.donate-page__faq-link {
+    @include body-3-medium;
+    @include owid-link-90;
+    display: inline-block;
+
+    svg {
+        margin-left: 6px;
+        font-size: 10px;
     }
 }