add pricing section to gift page

lindsaykwardell · Nov 21, 2021 · 36f9657 · 36f9657
1 parent 371a062
commit 36f9657
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 6 deletions.
diff --git a/components/Card.vue b/components/Card.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="sm:w-1/2 lg:w-1/3 card-body shadow-md p-3 bg-white">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="postcss" scoped>
+.card-body {
+  position: relative;
+  min-height: 500px;
+}
+</style>
diff --git a/pages/gift-of-healing.vue b/pages/gift-of-healing.vue
@@ -69,10 +69,43 @@
           sit amet lorem efficitur fringilla. Nunc ac rutrum mi. Donec sed
           malesuada nisl.
         </p>
-        <div class="flex justify-center">
-          <DonateButton />
-        </div>
       </section>
+      <div class="flex items-center py-8">
+        <Card class="flex-1 bg-[#fafafa] flex flex-col">
+          <h3>Give Membership</h3>
+          <p class="flex-grow">
+            Give the gift of membership to a friend or family member. This gift
+            covers the cost of a membership for one year.
+          </p>
+          <div class="flex justify-center">
+            <DonateButton />
+          </div>
+        </Card>
+        <Card class="flex-1 h-[550px] flex flex-col">
+          <h3>
+            Gift of Membership <br />
+            + Body Work
+          </h3>
+          <p class="flex-grow">
+            Give the gift of membership and a body work session. This gift
+            covers the cost of a membership for one year and a body work
+            session.
+          </p>
+          <div class="flex justify-center">
+            <DonateButton />
+          </div>
+        </Card>
+        <Card class="flex-1 bg-[#fafafa] flex flex-col">
+          <h3>Gift of Care</h3>
+          <p class="flex-grow">
+            Give the gift of care to a current member of the community. This
+            gift covers the cost of a one-time care session.
+          </p>
+          <div class="flex justify-center">
+            <DonateButton />
+          </div>
+        </Card>
+      </div>
     </StandardTemplate>
 
     <template #footer>
@@ -82,7 +115,5 @@
 </template>
 
 <script>
-export default {
-
-};
+export default {};
 </script>