[Feature] Add an announcement section

src/components/new-landing-page/announcement/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const Announcement = (): JSX.Element => {
+  return (
+    <div className="announcement-container">
+      <img src="/announcement.png" />
+      <div className="announcement__text">
+        <h2>Stewarding Hawaii’s cultural and natural resources for generations</h2>
+        <p>Livable Hawaii Kai Hui</p>
+        <a href="#">Learn more</a>
+      </div>
+    </div>
+  )
+}
+
+export default Announcement

src/components/new-landing-page/index.tsx

@@ -3,6 +3,7 @@ import { Layout } from '../shared/layout'
 import useHeader from './useHeader'
 
 import GetUpdates from '../shared/get-updates'
+import Announcement from './announcement'
 import Hero from './hero'
 import Leaders from './leaders'
 import Causes from './causes'
@@ -29,7 +30,7 @@ const NewLandingPage = ({ location }: PageProps): JSX.Element => {
       additionalClassNames="new-landing-page"
       header={header}
       announcement={
-        <div style={{ width: '100%', height: '200px', backgroundColor: 'red' }} />
+        <Announcement />
       }
     >
       <SEO />

src/styles/components/_all.scss

@@ -14,6 +14,7 @@
 @import './issue-breadcrumbs';
 @import './popper';
 @import './get-updates';
+@import './announcement';
 @import './causes';
 @import './technologies';
 @import './join-section';

src/styles/components/announcement.scss

@@ -0,0 +1,20 @@
+.announcement-container {
+  width: 100%;
+  height: 250px;
+  background-color: #164176;
+  display: flex;
+  flex-direction: row;
+  padding: 0 100px;
+  gap: 60px;
+  align-items: center;
+
+  .announcement__text {
+    display: flex;
+    flex-direction: column;
+    color: white;
+
+    a {
+      color: white;
+    }
+  }
+}