prose fixes

Author: lukeocodes

pages/about.vue

@@ -1,11 +1,9 @@
 <template>
-  <div class="mx-auto prose lg:prose-xl">
-    <h1
-      class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
-    >
-      {{ page.title }}
-    </h1>
-    <nuxt-content :document="page" class="mx-auto prose lg:prose-xl" />
+  <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"
+  >
+    <h1>{{ page.title }}</h1>
+    <nuxt-content :document="page" />
   </div>
 </template>
 

pages/index.vue

@@ -3,7 +3,7 @@
     <Hero
       :heading="page.heading"
       :subheading="page.subheading"
-      :image="require(`~/static/img/home-jumbotron.jpg`)"
+      :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"

pages/products.vue

@@ -1,107 +1,19 @@
 <template>
   <div>
     <Hero
-      :heading="page.title"
-      :image="require(`~/static/img/home-jumbotron.jpg`)"
+      :heading="page.heading"
+      :subheading="page.subheading"
+      :image="page.image"
     />
-    <div class="py-12 bg-white">
-      <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
-        <h3
-          class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
-        >
-          {{ page.title }}
-        </h3>
-        <p class="mt-4 text-lg leading-7 text-gray-500">
-          {{ page.description }}
-        </p>
-
-        <div class="py-12 bg-white">
-          <div class="max-w-xl mx-auto lg:max-w-screen-xl">
-            <div class="lg:grid lg:grid-cols-2 lg:gap-8">
-              <div v-for="(blurb, index) in page.intro.blurbs" :key="index">
-                <div class="flex items-center justify-center">
-                  <img class="h-32" :src="blurb.image" />
-                </div>
-                <div class="mt-5">
-                  <p class="mt-2 text-base leading-6">{{ blurb.text }}.</p>
-                </div>
-              </div>
-            </div>
-            <div class="text-center mt-16">
-              <span class="inline-flex rounded-md shadow-sm">
-                <nuxt-link
-                  to="/products"
-                  class="inline-flex items-center px-6 py-3 border border-gray-300 text-base leading-6 font-medium rounded-md text-orange-600 bg-white hover:text-orange-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50 transition ease-in-out duration-150"
-                >
-                  See all products
-                </nuxt-link>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <Hero />
-    <div class="max-w-screen-xl mx-auto py-24 px-4 sm:px-6 lg:px-8">
-      <div class="sm:flex sm:flex-col sm:align-center">
-        <h1
-          class="text-5xl leading-none font-extrabold text-gray-900 sm:text-center"
-        >
-          Pricing Plans
-        </h1>
-        <p class="mt-5 text-xl leading-7 text-gray-500 sm:text-center">
-          Start building for free, then add a site plan to go live. Account
-          plans unlock additional features.
-        </p>
-      </div>
-      <div
-        class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-1 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-3"
-      >
-        <div
-          v-for="(plan, i) in page.pricing.plans"
-          :key="i"
-          class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"
-        >
-          <div class="p-6">
-            <h2 class="text-lg leading-6 font-medium text-gray-900">
-              {{ plan.plan }}
-            </h2>
-            <p class="mt-4 text-sm leading-5 text-gray-500">
-              {{ plan.description }}
-            </p>
-            <p class="mt-8">
-              <span class="text-4xl leading-10 font-extrabold text-gray-900"
-                >${{ plan.price }}</span
-              >
-              <span class="text-base leading-6 font-medium text-gray-500"
-                >/mo</span
-              >
-            </p>
-            <button
-              type="button"
-              class="mt-8 w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out"
-            >
-              Buy {{ plan.plan }}
-            </button>
-          </div>
-          <div class="pt-6 pb-8 px-6">
-            <h3
-              class="text-xs leading-4 font-medium text-gray-900 tracking-wide uppercase"
-            >
-              What's included
-            </h3>
-            <ul class="mt-6 space-y-4">
-              <li
-                v-for="(item, j) in plan.items"
-                :key="j"
-                class="flex space-x-3"
-              >
-                <span class="text-sm leading-5 text-gray-500">{{ item }}</span>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
+    <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 }}
+      </h2>
+      <p>
+        {{ page.description }}
+      </p>
     </div>
   </div>
 </template>