finish products page

Author: lukeocodes

pages/products.vue

@@ -1,19 +1,87 @@
 <template>
   <div>
-    <Hero
-      :heading="page.heading"
-      :subheading="page.subheading"
-      :image="page.image"
-    />
+    <Hero :heading="page.title" :image="page.image" />
     <div
       class="px-8 mx-auto mt-12 prose sm:px-6 md:px-4 lg:px-2 xl:px-0 xl:prose-2xl lg:prose-xl md:prose-lg"
     >
       <h2>
-        {{ page.title }}
+        {{ page.heading }}
       </h2>
       <p>
         {{ page.description }}
       </p>
+      <div class="lg:grid lg:grid-cols-2 lg:gap-8">
+        <div
+          v-for="(blurb, index) in page.intro.blurbs"
+          :key="index"
+          class="flex flex-col items-center justify-top"
+        >
+          <img class="h-32" :src="blurb.image" />
+          <p class="mt-2 text-justify">{{ blurb.text }}.</p>
+        </div>
+      </div>
+      <h3>
+        {{ page.main.heading }}
+      </h3>
+      <p>
+        {{ page.main.description }}
+      </p>
+      <div class="-mt-12 -mb-20 lg:grid lg:grid-cols-2 lg:gap-4">
+        <img
+          class="rounded-lg"
+          :src="page.main.image1.image"
+          :alt="page.main.image1.alt"
+        />
+        <img
+          class="rounded-lg"
+          :src="page.main.image2.image"
+          :alt="page.main.image2.alt"
+        />
+      </div>
+      <div class="-mb-10 lg:grid lg:grid-cols-1 lg:gap-4">
+        <img
+          class="rounded-lg"
+          :src="page.main.image3.image"
+          :alt="page.main.image3.alt"
+        />
+      </div>
+      <div class="mb-12 -mt-12">
+        <p
+          v-for="(testimonial, index) in page.testimonials"
+          :key="index"
+          class="inline-block w-full p-6 text-base bg-gray-100 border-l-4 border-gray-300 rounded-lg"
+        >
+          {{ testimonial.quote }}<br />
+          –{{ testimonial.author }}
+        </p>
+      </div>
+    </div>
+    <Hero :image="page.full_image" />
+    <div
+      class="px-8 mx-auto mt-12 prose sm:px-6 md:px-4 lg:px-2 xl:px-0 xl:prose-2xl lg:prose-xl md:prose-lg"
+    >
+      <h3>
+        {{ page.pricing.heading }}
+      </h3>
+      <p>
+        {{ page.pricing.description }}
+      </p>
+      <div class="lg:grid lg:grid-cols-3 lg:gap-8">
+        <div v-for="(plan, i) in page.pricing.plans" :key="i">
+          <h4 class="text-center">
+            {{ plan.plan }}
+          </h4>
+          <p class="text-4xl font-bold text-center text-kaldi">
+            ${{ plan.price }}
+          </p>
+          <p class="text-base">{{ plan.description }}</p>
+          <ul class="text-base">
+            <li v-for="(item, j) in plan.items" :key="j">
+              {{ item }}
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 </template>