Add program's terms and conditions

src/components/Modal.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 import ReactModal from 'react-modal'
 import styled from 'styled-components'
 
@@ -13,10 +13,11 @@ export interface ModalProps {
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
   title?: string
+  children?: ReactNode
   className?: string
 }
 
-const Modal: FC<ModalProps> = ({ isOpen, setIsOpen, title, children, className }) => (
+const Modal = ({ isOpen, setIsOpen, title, children, className }: ModalProps) => (
   <ReactModal
     isOpen={isOpen}
     contentLabel={`${title} modal`}

src/components/pages/ambassadors/AmbassadorsInfoSection.tsx

@@ -166,19 +166,35 @@ const AmbassadorsInfoSection = ({ className }: AmbassadorsInfoSectionProps) => (
         </QABox>
         <QABox>
           <Question>What are the program rules?</Question>
-          <Answer>Program rules can be found here.</Answer>
+          <Answer>The rules are described here:</Answer>
+          <ArrowedLink
+            url="https://docs.google.com/document/d/1HG2MrnTIS3oV9eo35giGKr_yAJnDisla"
+            newTab
+            trackingName="ambassadors:program-rules-link"
+            colorArrowOnly
+          >
+            Program rules
+          </ArrowedLink>
         </QABox>
         <QABox>
           <Question>I have an existing community, can I still work with Alephium?</Question>
           <Answer>Yes! Community is about bringing people together and knowledge sharing.</Answer>
         </QABox>
         <QABox>
           <Question>How do I find out if I’ve been accepted?</Question>
-          <Answer>All applicants will be contacted via email with feedback on their application</Answer>
+          <Answer>All applicants will be contacted via email with feedback on their application.</Answer>
+        </QABox>
+        <QABox>
+          <Question>Can I continue in the program after the initial 6 months?</Question>
+          <Answer>
+            Yes. If selected, Ambassadors agree that the contractual relationship between them and Alephium is a 6
+            months duration contractual relationship that renews itself tacitly. The contractual relationship may be
+            terminated by either party at any time upon written notice.
+          </Answer>
         </QABox>
         <QABox>
           <Question>What if I have more questions?</Question>
-          <Answer>If you have any questions about the program, email XXXX@alephium.org.</Answer>
+          <Answer>If you have any questions about the program, email community@alephium.org.</Answer>
         </QABox>
       </FAQContent>
     </AmbassadorsSectionContainer>

src/components/pages/ambassadors/AmbassadorsIntroSection.tsx

@@ -29,7 +29,9 @@ const AmbassadorsIntroSection = ({
           <H2>{title}</H2>
           <H3 secondary>{subtitle}</H3>
           <Description>{description}</Description>
-          <Button>Apply now</Button>
+          <Button url=" https://docs.google.com/forms/d/1z18iEnkS_Y7acIbSmdjeTTtNTevuqlSETgfMoCtYBOA" newTab>
+            Apply now
+          </Button>
         </TextBoxContent>
       </TextBox>
     </Columns>

src/components/pages/ambassadors/ModalTermsAndConditions.tsx

@@ -0,0 +1,27 @@
+import { useStaticQuery, graphql } from 'gatsby'
+import Modal, { ModalProps } from '../../Modal'
+
+const ModalTermsAndConditions = ({ isOpen, setIsOpen }: ModalProps) => {
+  const { modal } = useStaticQuery(graphql`
+    query {
+      modal: allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/modals/ambassadors-terms.md/" } }) {
+        nodes {
+          frontmatter {
+            title
+          }
+          html
+        }
+      }
+    }
+  `)
+
+  const data = modal.nodes[0]
+
+  return (
+    <Modal title={data.frontmatter.title} isOpen={isOpen} setIsOpen={setIsOpen}>
+      <div dangerouslySetInnerHTML={{ __html: data.html }} />
+    </Modal>
+  )
+}
+
+export default ModalTermsAndConditions

src/components/pages/ambassadors/TiersSlider.tsx

@@ -15,9 +15,9 @@ const TiersSlider = () => (
   <SliderContainer>
     <AmbassadorsSectionContainer noVerticalMargin>
       <SlidingContent>
-        <CategoryCard title="Community" color="#137cf4" content={communityTiers} />
-        <CategoryCard title="Content" color="#22a85c" content={contentTiers} />
-        <CategoryCard title="Outreach" color="#e7705b" content={outreachTiers} />
+        <CategoryCard title="Community" color="#4294f3" content={communityTiers} />
+        <CategoryCard title="Content" color="#4ba371" content={contentTiers} />
+        <CategoryCard title="Outreach" color="#f38977" content={outreachTiers} />
       </SlidingContent>
     </AmbassadorsSectionContainer>
   </SliderContainer>
@@ -207,13 +207,13 @@ const TierContentLabel = styled.label`
   border-radius: 4px;
   padding: 2px 4px;
   color: white;
-  margin: 0;
+  margin-bottom: var(--spacing-4);
 `
 
 const TierTitle = styled.h4`
   font-size: 19px;
   font-weight: 500;
-  margin-top: 0;
+  margin-top: var(--spacing-1);
   margin-bottom: var(--spacing-1);
 `
 

src/content/modals/ambassadors-terms.md

@@ -0,0 +1,29 @@
+---
+title: Alephium's Ambassador program - general terms
+---
+
+## Eligibility
+
+Determinations of eligibility, score, and all terms related to the Ambassador Program are at the sole and final discretion of Alephium.
+
+Are not eligible to participate:
+
+- Individuals who have not reached legal majority age in their country of residence,
+- Individuals on sanctions lists or who are in countries listed on SECO’s sanctions list or where crypto-assets have been banned,
+- Alephium & affiliated entities employees, consultants and their families.
+
+## General Terms
+
+- Ambassadors take part in this program at their own risk and expense.
+- If selected, Ambassadors agree that the contractual relationship between them and Alephium is a 6 months duration contractual relationship that renews itself tacitly. The contractual relationship may be terminated by either party at any time upon written notice.
+- Ambassadors will be asked to sign a simple contract with their name, nationality and physical address. Failure to do so will result in forfeiture of the application.
+- If Ambassadors are unable to carry out the Services, they do not bear any liabilities but they will not be entitled to receive any Compensation.
+- Ambassadors are responsible for all taxes.
+- Ambassadors' contributions must not violate any law or compromise any data that is not theirs.
+- Ambassadors are responsible for notifying Alephium of any changes to their contact information. Failure to do so may lead to the forfeiture of any compensation participants may become eligible for and receive.
+
+Alephium reserves the right to discontinue the Program at any time without notice.
+
+## GDPR - Data Protection
+
+Alephium undertakes to store your personal data in a secured manner and to process your personal data with all appropriate care and attention in accordance with the Federal Data Protection Act, the Ordinance on the Federal Data Protection Act and the General Data Protection Regulation from the European Union.

src/pages/ambassadors.tsx

@@ -1,4 +1,4 @@
-import styled, { ThemeProvider } from 'styled-components'
+import styled, { ThemeProvider, useTheme } from 'styled-components'
 import { graphql, PageProps } from 'gatsby'
 
 import GlobalStyle from '../styles/global-style'
@@ -16,6 +16,9 @@ import AmbassadorsLandingSection, {
 } from '../components/pages/ambassadors/AmbassadorsLandingSection'
 import NavigationMenu from '../components/NavigationMenu'
 import Footer from '../components/Footer'
+import SimpleLink from '../components/SimpleLink'
+import ModalTermsAndConditions from '../components/pages/ambassadors/ModalTermsAndConditions'
+import { useEffect, useState } from 'react'
 
 interface HackathonPageProps extends PageProps {
   data: {
@@ -34,6 +37,15 @@ interface HackathonPageProps extends PageProps {
 
 const IndexPage = (props: HackathonPageProps) => {
   const pageContent = props.data.ambassadors.nodes[0].frontmatter
+  const [isModalTermsOpen, setIsModalTermsOpen] = useState(false)
+
+  const params = new URLSearchParams(location.search)
+
+  const openTermsModal = params.get('terms') !== null
+
+  useEffect(() => {
+    if (openTermsModal) setIsModalTermsOpen(true)
+  }, [openTermsModal])
 
   return (
     <ThemeProvider theme={ambassadorsTheme}>
@@ -45,6 +57,12 @@ const IndexPage = (props: HackathonPageProps) => {
         <AmbassadorsIntroSection content={pageContent.introSection} />
         <AmbassadorsInfoSection content={pageContent.hackathonInfo} />
       </Wrapper>
+      <TermsAndConditionsRibbon>
+        <SimpleLink color="#489dbe" openModal={setIsModalTermsOpen}>
+          {"Program's terms and conditions"}
+        </SimpleLink>
+      </TermsAndConditionsRibbon>
+      <ModalTermsAndConditions isOpen={isModalTermsOpen} setIsOpen={setIsModalTermsOpen} />
       <Footer location={props.location} />
     </ThemeProvider>
   )
@@ -103,6 +121,14 @@ const NavigationMenuStyled = styled(NavigationMenu)`
   }
 `
 
+const TermsAndConditionsRibbon = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: var(--spacing-4);
+  background-color: ${({ theme }) => theme.bgSecondary};
+  border-bottom: 1px solid ${({ theme }) => theme.borderPrimary};
+`
+
 export const pageQuery = graphql`
   query {
     ambassadors: allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/ambassadors.md/" } }) {