1 files changed, 52 insertions, 10 deletions
diff --git a/src/components/mao-home.js b/src/components/mao-home.js
index 5238319..9f8daf4 100644
--- a/src/components/mao-home.js
+++ b/src/components/mao-home.js
@@ -22,6 +22,23 @@ class MaoHome extends PageViewElement {
     return html`
     ${SharedStyles}
 
+    <style>
+      paper-card {
+        width: 100%;
+      }
+
+      .home-grid {
+        display: grid;
+        grid-gap: 1px;
+        grid-template-columns: 1fr;
+      }
+
+      @media (min-width: 460px) {
+        .home-grid {
+          grid-template-columns: 1fr 1fr;
+        }
+    </style>
+
       <section class="img-section">
         <div class="container">
           <img src="http://www.advancedroofingandsheetmetal.com/wp-content/uploads/2016/02/community-school-naples.jpg" alt="Maths">
@@ -29,17 +46,42 @@ class MaoHome extends PageViewElement {
         </div>
       </section>
 
-      <section class="img-section">
-        <div class="container">
-          <img src="https://i.imgur.com/BkbHV33.jpg" alt="Maths">
-          <div class="centered">Because... Math Is Beautiful</div>
-        </div>
-      </section>
+      <section>
+        <div class="home-grid">
+          <paper-card elevation=0>
+            <div class="card-content">
+              <h2 class="underline">
+                Announcements
+              </h2>
+              <p>
+                Welcome to the beta release of the website. We have high hopes for this website.
+              </p>
+              <p>
+                If you haven't yet, please add this to your home screen. It will act like an app. Cool!
+              </p>
+            </div>
+          </paper-card>
 
-      <section class="img-section">
-        <div class="container">
-          <img src="https://nerdymamma.com/wp-content/uploads/2017/01/Six-Simple-Phrases-to-Encourage-Girls-to-Love-Science-Math-3.jpg" alt="Maths">
-          <div class="centered">CSN Encourages Math Through MAØ</div>
+          <paper-card elevation=0>
+            <div class="card-content">
+              <h2 class="underline">
+                Meeting Dates
+              </h2>
+              <p>
+                We will meet once a week on an undecided date.
+              </p>
+            </div>
+
+            <div class="card-actions">
+              <div>
+                <h3>Upcoming Dates</h3>
+                <ul>
+                  <li>Club Presentations:\tSeptember 5th</li>
+                  <li>Club Fair (Sign Up!):\tSeptember 6th</li>
+                </ul>
+              </div>
+            </div>
+          </paper-card>
         </div>
       </section>
     `;