Support page (#466)

* Support page

* 🚧 (md) move component content to markdown

* ✨ (support) move content into markdoown

Co-authored-by: Yaël GUILLOUX <[email protected]>

nuxtjs.org/components/SectionButton.vue

@@ -25,10 +25,6 @@
 import { defineComponent } from '@nuxtjs/composition-api'
 export default defineComponent({
   props: {
-    ariaLabel: {
-      type: String,
-      required: true
-    },
     to: {
       type: [String, Object],
       required: true
@@ -47,6 +43,10 @@ export default defineComponent({
     iconRight: {
       type: String,
       default: null
+    },
+    ariaLabel: {
+      type: String,
+      default: null
     }
   }
 })

nuxtjs.org/components/SupportEntreprise.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-40">
+    <h2
+      class="
+        text-center text-3xl
+        sm:text-4xl
+        font-semibold
+        tracking-tight
+        font-extrabold
+        text-secondary-darker
+        dark:text-white
+      "
+    >
+      <Markdown slot="title" unwrap="span" />
+    </h2>
+    <p class="text-xl text-secondary-darker dark:text-white text-center mt-2 mb-4">
+      <Markdown slot="description" unwrap="span" />
+    </p>
+    <p class="text-center md:w-2/3 mx-auto">
+      <Markdown slot="subdescription" unwrap="span" />
+    </p>
+    <div class="flex items-center justify-center mt-8">
+      <SectionButton to="#" size="md" class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300 block">
+        <Markdown :node="$scopedSlots.cta" unwrap="span" />
+      </SectionButton>
+      <SectionButton
+        to="#"
+        size="md"
+        class="bg-white text-gray-800 hover:bg-gray-200 focus:bg-gray-300 border-gray-300 border-2 block ml-4"
+      >
+        <Markdown :node="$scopedSlots.secondaryCta" unwrap="span" />
+      </SectionButton>
+    </div>
+  </div>
+</template>

nuxtjs.org/components/SupportPricing.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="mt-8 mb-8 b-16 sm:mt-12 sm:pb-20 lg:pb-28">
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="max-w-lg mx-auto rounded-lg shadow-lg overflow-hidden lg:max-w-none lg:flex">
+        <div class="flex-1 px-6 py-8 lg:p-12 light:bg-white dark:bg-secondary-darkest">
+          <h3 class="text-2xl font-extrabold text-secondary-darker dark:text-white sm:text-3xl">
+            <Markdown slot="title" unwrap="p" />
+          </h3>
+
+          <p class="mt-6 text-base text-gray-500 dark:text-white">
+            <Markdown slot="description" unwrap="p" />
+          </p>
+
+          <div class="mt-6">
+            <div class="flex items-center">
+              <div class="flex-1 border-t-2 border-gray-200"></div>
+            </div>
+            <p class="mt-6 text-secondary-darker dark:text-white">
+              <Markdown slot="subdescription" unwrap="p" />
+            </p>
+          </div>
+        </div>
+
+        <div
+          class="
+            py-8
+            px-6
+            text-center
+            bg-gray-100
+            dark:bg-secondary-darker
+            lg:flex-shrink-0 lg:flex lg:flex-col lg:justify-center lg:p-12
+          "
+        >
+          <div
+            class="mt-4 flex items-center justify-center text-5xl font-extrabold text-secondary-darker dark:text-white"
+          >
+            <Markdown slot="price" unwrap="span" />
+            <span class="ml-3 text-xl font-medium text-gray-500 dark:text-gray-200">
+              <Markdown slot="currency" unwrap="span" />
+            </span>
+          </div>
+
+          <div class="mt-6">
+            <SectionButton
+              to="#"
+              size="md"
+              class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300"
+              aria-label="test"
+            >
+              <Markdown :node="$scopedSlots.cta" unwrap="span" />
+            </SectionButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

nuxtjs.org/content/support.md

@@ -0,0 +1,48 @@
+---
+template: page
+layout:
+  fluid: true
+---
+::page-hero
+title: Consulting NuxtJS Support
+description: "Our NuxtJS team now offers official consulting services for your NuxtJS applications.
+We offer different services depending of your needs, from technical support to custom development. Expect a reply within one business day, we can sign custom NDA and you can get a full refund if you are not satisfied with our service."
+---
+::
+
+::support-pricing
+---title
+Technical support
+
+---description
+Get project audits, app deployments, custom development and technical support from the NuxtJS team.
+
+---subdescription
+We partnered with :img{class="inline-block px-1 -mt-1 dark:hidden" src="/img/support/light/otechie.svg"} :img{class="inline-block px-1 -mt-1 light:hidden" src="/img/support/dark/otechie.svg"} to offer these services so we can focus on helping you as fast as possible.
+
+---price
+250$
+
+---currency
+USD
+
+---cta
+Start chat
+::
+
+::support-entreprise
+---title
+NuxtJS for entreprise
+
+---description
+Available as part of the Tidelift subscription
+
+---subdescription
+NuxtJS and the maintainers of thousands of other packages are working with Tidelift to deliver one enterprise subscription that covers all of the open source you use. If you want the flexibility of open source and the confidence of commercial-grade software, this is for you.
+
+---cta
+Learn more
+
+---secondaryCta
+Request a demo
+::