🚧 Redesign environment

src/components/Stats.vue

@@ -6,10 +6,10 @@
     <div class="relative z-10 max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8 lg:py-20">
       <div class="max-w-4xl mx-auto text-center">
         <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
-          Trusted by developers from over 80 planets
+          Why wait to join us ?
         </h2>
         <p class="mt-3 text-xl text-indigo-200 sm:mt-4">
-          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus repellat laudantium.
+          The success of our platform is reflected in our figures
         </p>
       </div>
       <dl class="mt-10 text-center sm:max-w-3xl sm:mx-auto sm:grid sm:grid-cols-3 sm:gap-8">

src/templates/modules/documentation/base/Environment.vue

@@ -21,17 +21,51 @@
     <p>
       When you create a new project, you can choose between three types of environment :
     </p>
+
+    <!--  -->
     <div>
-      <h3>json</h3>
-      <CodeHighlight :code="json" />
-    </div>
-    <div>
-      <h3>yaml</h3>
-      <CodeHighlight :code="yaml" />
+      <div class="sm:hidden">
+        <label for="tabs" class="sr-only">Select a tab</label>
+        <select id="tabs" name="tabs" class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
+          <option
+            v-for="tab in tabs"
+            :key="tab.name"
+            :selected="tab.current">
+            {{ tab.name }}
+          </option>
+        </select>
+      </div>
+      <div class="hidden sm:block space-y-5 ">
+        <nav class="flex space-x-4" aria-label="Tabs">
+          <button
+            v-for="tab in tabs"
+            @click.prevent="changeTab(tab.id)"
+            :class="[tab.id === activeTab ? 'bg-indigo-100 text-indigo-700' : 'text-gray-500 hover:text-gray-700', 'px-3 py-2 font-medium text-sm rounded-md cursor-pointer focus:outline-none']"
+            :aria-current="activeTab || undefined"
+            :key="tab.name">
+            {{ tab.name }}
+          </button>
+        </nav>
+        <div v-if="activeTab === 'yaml'">
+          <CodeHighlight :code="yaml" />
+        </div>
+        <div v-if="activeTab === 'json'">
+          <CodeHighlight :code="json" />
+        </div>
+      </div>
     </div>
 
-    <h2>Retrieving environment variables</h2>
-    <CodeHighlight :code="getClient" />
+    <!--<div>-->
+    <!--  <h3>json</h3>-->
+    <!--  <CodeHighlight :code="json" />-->
+    <!--</div>-->
+    <!--<div>-->
+    <!--  <h3>yaml</h3>-->
+    <!--  <CodeHighlight :code="yaml" />-->
+    <!--</div>-->
+
+    <!--<h2>Retrieving environment variables</h2>-->
+    <!--<CodeHighlight :code="getClient" />-->
 
   </Documentation>
 </template>
@@ -44,6 +78,18 @@ import LinkExternal from '../../../../components/LinkExternal.vue'
 import AlertWarn from '../../../../components/AlertWarn.vue'
 import AlertSuccess from '../../../../components/AlertSuccess.vue'
 import AlertInfo from '../../../../components/AlertInfo.vue'
+import { ref } from 'vue'
+
+const tabs = [
+  { id: 'yaml', name: 'YAML', href: '#' },
+  { id: 'json', name: 'JSON', href: '#' },
+]
+
+const activeTab = ref('yaml')
+
+function changeTab (identifier: string) {
+  activeTab.value = identifier
+}
 
 const json = `
 {