Merge pull request #117 from nr2f1/support-us-banner

feat: support banner

website/src/app/[lang]/page.tsx

@@ -1,4 +1,5 @@
 import HomePageHero from '@components/homepage-hero';
+import SupportBanner from '@components/support-banner';
 import WhatWeDo from '@components/what-we-do';
 import type { PagePropsWithLocale } from '@shared/types/page-with-locale-params';
 import type { NextPage } from 'next';
@@ -12,6 +13,7 @@ const Page: NextPage<PagePropsWithLocale> = async ({ params }) => {
       <HomePageHero lang={lang} />
       <WhatWeDo lang={lang} />
       <HomePageBanner lang={lang} />
+      <SupportBanner lang={lang} />
     </>
   );
 };

website/src/components/banner/index.module.scss

@@ -10,6 +10,7 @@
 
   @include breakpoints.small-screen {
     padding: 0;
+    margin-block-end: var(--spacing-8);
   }
 
   &__row {

website/src/components/support-banner/index.module.scss

@@ -0,0 +1,71 @@
+@use '@styles/text-styles';
+@use '@styles/layout';
+@use '@styles/breakpoints';
+
+.support-banner {
+  padding: 0 var(--spacing-16) var(--spacing-24);
+
+  @include breakpoints.medium-screen {
+    padding: 0 var(--spacing-12) var(--spacing-12);
+  }
+
+  @include breakpoints.small-screen {
+    padding: 0;
+  }
+
+  h2,
+  p {
+    margin: 0;
+  }
+
+  section {
+    border-radius: var(--border-radius-xl, 16px);
+    padding: var(--spacing-24) var(--spacing-16);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    @include breakpoints.medium-screen {
+      padding: var(--spacing-12);
+    }
+
+    @include breakpoints.small-screen {
+      padding: var(--spacing-6);
+      border-radius: 0;
+    }
+  }
+
+  h2 {
+    @include text-styles.header-1;
+    color: var(--foreground-inverse-primary);
+    margin-block-end: var(--spacing-6);
+
+    @include breakpoints.medium-screen {
+      @include text-styles.header-1--mobile;
+      color: var(--foreground-inverse-primary);
+    }
+
+    @include breakpoints.small-screen {
+      @include text-styles.header-1--mobile;
+      color: var(--foreground-inverse-primary);
+    }
+  }
+
+  p {
+    @include text-styles.text-base;
+    color: var(--foreground-inverse-primary);
+    margin-block-end: var(--spacing-6);
+    max-width: 576px;
+
+    @include breakpoints.medium-screen {
+      max-width: 672px;
+    }
+  }
+
+  a {
+    @include breakpoints.small-screen {
+      display: flex;
+      width: 100%;
+    }
+  }
+}

website/src/components/support-banner/index.tsx

@@ -0,0 +1,34 @@
+import styles from './index.module.scss';
+
+import type { AvailableLocale } from '@i18n/locales';
+
+interface SupportBannerProps {
+  lang: AvailableLocale;
+}
+
+const SupportBanner: React.FC<SupportBannerProps> = ({ lang }) => {
+  return (
+    <div className={styles['support-banner']}>
+      <div className="content-wrapper">
+        <section
+          style={{
+            backgroundImage:
+              'url(https://pataruco.s3.amazonaws.com/public/support-us-image.png), linear-gradient(90deg, rgba(0, 0, 0, 0.60) 36.61%, rgba(0, 0, 0, 0.00) 100%)',
+          }}
+        >
+          <h2>Support our work</h2>
+          <p>
+            There are plenty of ways to help. You can support us by donating,
+            volunteering a few hours a month or helping us fundraise. Help us
+            fulfill our mission!
+          </p>
+          <a href="/" className="button button--accent-on-dark">
+            Support us
+          </a>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default SupportBanner;

website/src/styles/_layout.scss

@@ -1,6 +1,7 @@
 $content-max-width: 1152px;
 $content-max-width-7x1: 1280px;
 $content-max-width-2x1: 672px;
+$content-max-width-xl: 672px;
 
 .large-content-wrapper {
   max-width: 1400px;