feat: update about page fix #15

jgcarrillo · Apr 15, 2022 · e5fd407 · e5fd407
1 parent ad1134f
commit e5fd407
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 0 deletions.
diff --git a/resources/js/Pages/About.vue b/resources/js/Pages/About.vue
@@ -8,6 +8,12 @@
         <h3 class="font-lora text-4xl font-bold mb-8">Know more about the project</h3>
     </div>
 
+    <div class="text-center text-gray-800 bg-gray-50 p-10 md:py-14">
+       <p class="text-sm font-lora md:text-3xl md:px-24">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A sequi suscipit vel! Beatae consequuntur delectus dolore dolorem error, et expedita itaque minima nostrum officia quibusdam quis, reiciendis sapiente similique temporibus?</p>
+    </div>
+
+    <the-pricing></the-pricing>
+
     <the-footer></the-footer>
 </template>
 
@@ -16,11 +22,13 @@ import { defineComponent } from 'vue';
 import { Head, Link } from '@inertiajs/inertia-vue3';
 import TheNavbar from "./TheNavbar";
 import TheFooter from "./TheFooter";
+import ThePricing from "./ThePricing";
 
 export default defineComponent({
     components: {
         Head,
         Link,
+        ThePricing,
         TheNavbar,
         TheFooter
     }

diff --git a/resources/js/Pages/ThePricing.vue b/resources/js/Pages/ThePricing.vue
@@ -0,0 +1,73 @@
+<template>
+    <div class="max-w-3xl mx-auto py-10">
+
+        <div class="flex flex-col md:flex-row px-2 md:px-0">
+            <div
+                class="w-full md:w-1/3 bg-white rounded-lg shadow hover:shadow-xl transition duration-500 ease-in-out p-6 md:mr-4 mb-10 md:mb-0"
+            >
+                <h3 class="text-gray-800 text-lg font-monse">Base</h3>
+                <p class="text-gray-800 mt-1 font-lora"><span class="font-bold text-black text-4xl">$69</span> /Month</p>
+                <p class="text-sm text-gray-800 mt-2 font-monse">For most businesses that want to optimize web queries.</p>
+                <div class="text-sm text-gray-800 mt-4 font-monse">
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> All limited links</p>
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> Own analytics platform</p>
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> Chat support</p>
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> Optimize hashtags</p>
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> Unlimited users</p>
+                </div>
+                <button
+                    class="w-full font-monse border border-yellow-300 rounded hover:bg-yellow-300 hover:shadow-xl transition duration-500 ease-in-out py-4 mt-4"
+                >
+                    Choose Plan
+                </button>
+            </div>
+            <div
+                class="w-full md:w-1/3 bg-yellow-400 rounded-lg shadow hover:shadow-xl transition duration-500 ease-in-out p-6 md:mr-4 mb-10 md:mb-0"
+            >
+                <h3 class="text-lg font-monse">Popular</h3>
+                <p class="mt-1"><span class="font-bold text-4xl font-lora">$99</span> /Month</p>
+                <p class="text-sm opacity-75 mt-2 font-monse">For most businesses that want to optimize web queries.</p>
+                <div class="text-sm mt-4 font-monse">
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> All limited links</p>
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> Own analytics platform</p>
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> Chat support</p>
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> Optimize hashtags</p>
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> Unlimited users</p>
+                </div>
+                <button
+                    class="w-full font-monse bg-white rounded opacity-75 hover:opacity-100 hover:shadow-xl hover:bg-white transition duration-500 ease-in-out py-4 mt-4"
+                >
+                    Choose Plan
+                </button>
+            </div>
+            <div
+                class="w-full md:w-1/3 bg-white rounded-lg shadow hover:shadow-xl transition duration-500 ease-in-out p-6 mb-10 md:mb-0"
+            >
+                <h3 class="text-gray-800 text-lg font-monse">Enterprise</h3>
+                <p class="text-gray-800 mt-1"><span class="font-bold text-black text-4xl font-lora">$299</span> /Month</p>
+                <p class="text-sm text-gray-800 mt-2 font-monse">For most businesses that want to optimize web queries.</p>
+                <div class="text-sm text-gray-800 mt-4 font-monse">
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> All limited links</p>
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> Own analytics platform</p>
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> Chat support</p>
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> Optimize hashtags</p>
+                    <p class="my-2"><span class="fa fa-check-circle mr-2 ml-1"></span> Unlimited users</p>
+                </div>
+                <button
+                    class="w-full font-monse border border-yellow-300 rounded hover:bg-yellow-300 hover:shadow-xl transition duration-500 ease-in-out py-4 mt-4"
+                >
+                    Choose Plan
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+});
+</script>
+
+<style></style>