Added a common style to all CTA boxes

vue/src/assets/main.css

@@ -89,6 +89,11 @@ footer a {
   @apply text-inherit no-underline;
 }
 
+/* Call to action box shown to users without subs */
+.cta-box {
+  @apply p-4 pt-8 border-2 rounded-md border-slate-300 border-dashed shadow-md md:shadow-lg;
+}
+
 /* QUESTION FORM */
 .question-readiness li {
   @apply mb-4;

vue/src/components/HomeCTA.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-8">
+  <div class="mb-8 cta-box">
     <h1 class="mb-4 md:mb-8 text-slate-700 w-full">Find and fill gaps in your knowledge,<br/>one question at a time</h1>
 
     <div class="flex w-full">

vue/src/components/PostAnswerCTA.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-8 pt-8 border-t-2 border-slate-300 border-dashed">
+  <div class="mb-8 cta-box">
     <h3 class="mb-4 text-slate-700 w-full">Get more questions like this to find and fill gaps in your knowledge</h3>
 
     <div class="flex w-full">
@@ -8,7 +8,7 @@
 
       <div class="card flex-grow md:flex-shrink mb-8 text-slate-700">
         <ul id="signup-pitch">
-          <li><i class="pi pi-list-check"></i>questions on your topics of interest</li>
+          <li><i class="pi pi-list-check"></i>questions about your topics of interest</li>
           <li><i class="pi pi-envelope"></i>delivered to your inbox</li>
           <li><i class="pi pi-info-circle"></i>with <em>bite-sized</em> explanations</li>
           <li><i class="pi pi-sparkles"></i>to help you become a better dev</li>

vue/src/components/SubscriptionCTA.vue

@@ -4,7 +4,7 @@
       <div class="flex-shrink md:flex-grow">
       </div>
 
-      <div class="card flex-grow md:flex-shrink">
+      <div class="card flex-grow md:flex-shrink cta-box">
         <h3 class="text-justify md:text-center text-slate-700">Your free subscription to being 1% better every day</h3>
         <ul id="signup-pitch">
           <li><i class="pi pi-question-circle"></i>one question with detailed answers</li>