first push

src/components/About.vue

@@ -0,0 +1,83 @@
+<template> 
+  <div id="promo-overlay" class="z-40" v-for="(qa, index) in questions">
+    <div class=" p-3 m-3">
+      <h2 class="text-xl">
+        <a :href="index" v-on:click.prevent="open_answer(qa)">
+          {{ qa.q }}
+        </a>   
+      </h2>
+      <div ref="a-${index}" :class="{hidden:qa.show}" class="p-5 promo-overlay">
+        <span v-html="qa.a"></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import moment from 'moment-timezone';
+
+export default {
+  data() {
+    return {
+      questions: [],
+      new_msg: "",
+      the_day: "",
+      isHidden: true,
+      questions: [ 
+        { q: "What is DigiSnaxx?", a:"DigiSnaxx is an events calendar, and community board. We aggregate events and news from the Twin Cities Metro Area.", show:false  },
+        { q: "Who built DigiSnaxx?", a:"'Twas I <a href='https://canin.dreamfreely.org' target='_blank'>Canin Carlos</a>.", show:false  }, 
+        { q: "How can you support this project?", a:"Share the QR code & URL! <br/><br/>To learn about my other projects, support me as an innovator, or <b>join the DigiSnaxx Business Community, <a href='https://canin.dreamfreely.org/the-dbc' target='_blank'>click here</a></b>.<br/><br/>Or, let me know ...<br/><br/><iframe class='airtable-embed' src='https://airtable.com/embed/appzQxsifc8AnD1zA/shr317pX2OVA7zfIk' frameborder='0' onmousewheel='' width='100%' height='533' style='background: transparent; border: 1px solid #ccc;'></iframe>", show:false  }, 
+        { q: "Submit a calendar!", a:'<iframe class="airtable-embed" src="https://airtable.com/embed/shrfUvOiFdaHI8xoz?backgroundColor=teal" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>', show:false }, 
+        { q: "What's the status of the calendar I submitted?", a:'<iframe class="airtable-embed" src="https://airtable.com/embed/shr6IRnNvHtDEcokM?backgroundColor=teal&layout=card&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>', show: false},      
+        // { q: "Next question?", a:"Next answer", show: true},
+      ]
+    }
+  },
+
+
+  methods: {
+      open_answer(q) {
+          q.show = !q.show
+      },
+  },
+}
+</script>
+    
+    <style scoped>
+    .question {
+      background-color: aquamarine;
+      color: black;
+    }
+
+    .answer {
+      background-color: coral ;
+    }
+
+    p {
+      padding: 1rem 1rem 1rem 0rem;
+      text-align: center;
+    }
+
+    h1 {
+      font-weight: 500;
+      font-size: 2.6rem;
+      top: -10px;
+    }
+    
+    h3 {
+      font-size: 1.2rem;
+    }
+    
+    @media (min-width: 1024px) {
+      .gform-mini {
+        display: none;
+      }
+    }
+
+    @media (max-width: 1024px) {
+      .gform-lg {
+        display: none;
+      }
+    }
+    </style>