feat: update the docs home page

components/common/Button.vue

@@ -0,0 +1,43 @@
+<template>
+    <NuxtLink v-if="href" :href="href" :class="`btn btn-${type}`" @click="onClick">
+        <slot></slot>
+    </NuxtLink>
+    <button v-else :class="`btn btn-${type}`" @click="onClick">
+        <slot></slot>
+    </button>
+</template>
+
+<script setup>
+    const props = defineProps({
+        type: {
+            type: String,
+            default: ''
+        },
+        href: {
+            type: String,
+            default: undefined
+        },
+        onClick: {
+            type: Function,
+            default: () => () => {}
+        }
+    })
+</script>
+
+<style lang="scss" scoped>
+    @import "../../assets/styles/_variable.scss";
+
+    .btn {
+        border-radius: 0.25rem;
+        padding: 0.5rem 1rem;
+        text-decoration: none;
+        font-size: $font-size-sm;
+        color: $white;
+        background-color: $black-9;
+        border: 1px solid $black-3;
+    }
+
+    .btn-primary {
+        background-color: $primary;
+    }
+</style>

components/content/BigChildCards.vue

@@ -0,0 +1,76 @@
+
+<template>
+    <h2 class="big-title">{{title}}</h2>
+    <div class="big-card-grid">
+        <NuxtLink :href="item._path" class="big-card" v-for="item in orderedNavigation" :key="item._path">
+            <h4 class="card-title">{{ item.title }}</h4>
+            <p class="card-text">{{ item.description }}</p>
+        </NuxtLink>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {computed} from "vue";
+    import {hash} from "ohash";
+    import {useAsyncData} from "#imports";
+
+const props = defineProps<{
+    directory: string
+    title: string
+}>()
+
+const {data: navigation} = await useAsyncData(
+        `BigChildCard-${hash(props.directory)}`,
+        () => queryContent(props.directory + "/").find()
+    );
+
+const orderedNavigation = computed(() => {
+    return navigation.value?.sort((a, b) => {
+        const aOrder = a.order?.toString() || "0";
+        const bOrder = b.order?.toString() || "0";
+        return aOrder.localeCompare(bOrder);
+    });
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/styles/_variable.scss";
+.big-card-grid{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+
+}
+
+h2.big-title {
+    padding: 0;
+    font-size: $font-size-xl;
+    border: none;
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+    font-weight: 600;
+}
+
+.big-card{
+    padding: 2rem;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    background: linear-gradient(180deg, #21242E 0%, #1A1C24 100%);
+    color: white;
+    border: 1px solid #21242E;
+    border-image-source: linear-gradient(180deg, #2B313E 0%, #131725 100%);
+    transition: all 0.3s;
+    h4 {
+        padding-top: 0;
+        font-size: $font-size-xl;
+        font-weight: normal;
+    }
+    p{
+        font-size: $font-size-sm;
+        line-height: 1.5em;
+    }
+    &:hover{
+        background: linear-gradient(180deg, rgba(#21242E, .9) 0%, rgba(#1A1C24,.9) 100%), #fff;
+    }
+}
+</style>

components/content/ChildCard.vue

@@ -39,7 +39,7 @@
     }
 
     currentPage = currentPage.endsWith("/") ? currentPage.slice(0, -1) : currentPage;
-    const currentPageDir = currentPage.split('/').reverse()[0];
+    const currentPageDir = currentPage.split('/').pop();
 
     const {data: navigation} = await useAsyncData(
         `ChildCard-${hash(currentPage)}`,

components/content/HomePageButtons.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="docs-button-row">
+        <Button v-for="(button, index) in buttons" :key="button.label" :href="button.href" :type="index===0?'primary':''">
+            {{ button.label }}
+        </Button>
+    </div>
+</template>
+
+<script setup>
+    import Button from "../common/Button.vue";
+    const props = defineProps({
+        buttons: {
+            type: Array,
+            default: []
+        }
+    })
+</script>
+
+<style lang="scss" scoped> 
+.docs-button-row {
+    display: flex;
+    justify-content: flex-start;
+    gap:.5rem;
+    margin-bottom: 3rem;
+}
+</style>

components/content/HomePageHeader.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="home-page-header">
+        <h2>{{ title }}</h2>
+        <NuxtImg src="/docs/ui/kestra-logo-big.png" alt="Kestra Logo" class="kestra-logo" />
+        <slot/>
+    </div>
+</template>
+
+<script setup>
+    const props = defineProps({
+        title: {
+            type: String,
+            default: ''
+        }
+    })
+</script>
+
+<style lang="scss" scoped>
+    @import "../../assets/styles/_variable.scss";
+
+    .home-page-header {
+        h2 {
+            padding-top: 0;
+            font-size: $font-size-xl;
+            font-weight: 600;
+        }
+
+        :deep(p){
+            font-size: $font-size-sm;
+            line-height: 1.5em;
+        }
+
+        .kestra-logo {
+            float: right;
+            width: 132px;
+            margin: 3rem;
+            margin-top: 0;
+        }
+    }
+</style>

components/content/SupportLinks.vue

@@ -0,0 +1,82 @@
+<template>
+    <h2 class="support-title">{{ title }}</h2>
+    <div class="support-links-row">
+        <a v-for="(button, index) in buttons" :key="button.label" :href="button.href" class="support-link">
+            <component :is="button.icon" />
+            <h3>{{ button.label }}</h3>
+            <p>{{ button.description }}</p>
+        </a>
+    </div>
+</template>
+
+<script setup lang="ts">
+import GithubIcon from 'vue-material-design-icons/Github.vue';
+import SlackIcon from 'vue-material-design-icons/Slack.vue';
+import LifebuoyIcon from 'vue-material-design-icons/Lifebuoy.vue';
+
+defineProps<{
+    title: string
+}>()
+
+const buttons = [{
+    label: "Community Slack",
+    description: "Discuss topics with other users and kestra Team",
+    href: "https://kestra.io/slack",
+    icon: SlackIcon,
+},
+{
+    label: "GitHub",
+    description: "Give our open-source project a star",
+    href: "https://github.com/kestra-io/kestra",
+    icon: GithubIcon,
+},
+{
+    label: "Help Center",
+    description: "Contact support for help with your Enterprise account",
+    href: "https://kestra.io/demo",
+    icon: LifebuoyIcon,
+}]
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/styles/_variable.scss";
+
+h2.support-title{
+    border: none;
+    font-size: $font-size-xl;
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+    padding: 0;
+    font-weight: 600;
+}
+.support-links-row{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    margin-bottom: 3rem;
+}
+.support-link{
+    padding: 1rem;
+    border-radius: .5rem;
+    border: 1px solid $black-3;
+    span{
+        font-size: 24px;
+        color: $white;
+        margin-bottom: 1rem;
+    }
+    h3{
+        font-size: $font-size-lg;
+        padding: 0;
+        margin: 0
+    }
+    p{
+        margin-top: .5rem;
+        font-size: $font-size-sm;
+        color: $white-1;
+        line-height: 1.6em;
+    }
+    &:hover{
+        border-color: $primary-1;
+    }
+}
+</style>

components/content/WhatsNew.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+        <h2>{{title}}</h2>
+        <div class="list-of-posts">
+            <template v-for="(post, index) of posts" :key="post._path" >
+                <hr v-if="index > 0" />
+                <NuxtLink :to="post._path" class="post-card">
+                    <img :src="post.image" class="card-img-left" alt="blog.title" />
+                    <div class="card-body">
+                        <div class="card-details">
+                            <span class="card-category">{{ post.category }}</span>
+                            <span class="card-date">{{ dateTimeFormat.format(new Date(post.date)) }}</span>
+                        </div>
+                        <p class="card-title">{{ post.title }}</p>
+                    </div>
+                </NuxtLink>
+            </template>
+        </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    required: true
+  }
+})
+
+const dateTimeFormat = new Intl.DateTimeFormat('en-US', {
+    dateStyle: 'long',
+  })
+
+const {data: posts} = await useAsyncData(
+    `Blog-Page-Short-List`,
+    () => queryContent("/blogs/").sort({date:-1}).limit(4).find()
+);
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/styles/_variable.scss";
+h2{
+    font-size: $font-size-xl;
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+    padding: 0;
+    font-weight: 600;
+}
+.list-of-posts hr{
+    width: 100%;
+    border: none;
+    border-top: 1px solid $black-3;
+    margin: 0;
+}
+
+.post-card{
+    display: flex;
+    gap: 1rem;
+    align-items: start;
+    padding: .5rem 0;
+    &:hover{
+        background-image: radial-gradient(circle, rgba($primary,.3) 0%, #13172500 30%);
+        background-position: -280px center;
+        background-repeat: no-repeat;
+    }
+}
+
+.card-img-left{
+    width: 125px;
+    height: 70px;
+    object-fit: cover;
+    border-radius: .25rem;
+    border: 1px solid $black-3;
+}
+.card-body{
+    display: flex;
+    flex-direction: column;
+}
+.card-details{
+    font-size: $font-size-xs;
+}
+.card-category{
+    color: $purple-36;
+    margin-right: 1rem;
+}
+.card-date{
+    color: $white-3;
+}
+.card-title{
+    font-size: $font-size-sm;
+    font-weight: normal;
+}
+</style>

components/docs/NavToc.vue

@@ -337,7 +337,8 @@
         }
     }
     .bd-social-list, .bd-toc-collapse {
-        background-color: $black-4;
+        background-color: rgba($black-4, .7);
+        padding-bottom: 1rem;
 
         @include media-breakpoint-down(lg) {
             border-top-width: 0 !important;