feature: create write for kestra page (#698)

* feat: compose components for write-with-kestra * feat: add page data * feat: update component props * feat: add styles * feat: update icon value * feat: update target for cta button * feat: update padding * feat: fix styles * feat: add card group * feat: update action link * feat: add link * fix: eol * feat: update description * feat: update margin * feat: update divider margin * feat: update link * feat: update icons * feat: update margin * update write for us * update color values * make responsive * feat: use css variables * feat: remove arrow icon margin * feat: use padding * feat: update divider color * feat: update icon and color * feat: update position relative
kestra-io · Jan 4, 2024 · 6d21c66 · 6d21c66
1 parent e71f347
commit 6d21c66
Show file tree

Hide file tree

Showing 21 changed files with 810 additions and 52 deletions.
diff --git a/app.vue b/app.vue
@@ -5,19 +5,34 @@
 </template>
 
 <script setup lang="ts">
-    useHead({
-        htmlAttrs: {
-            lang: 'en'
+useHead({
+    htmlAttrs: {
+        lang: "en",
+    },
+    link: [
+        {
+            rel: "icon",
+            type: "image/png",
+            href: "/favicon-192x192.png",
         },
-        link: [
-            {
-                rel: 'icon',
-                type: 'image/png',
-                href: '/favicon-192x192.png'
-            }
-        ],
-        titleTemplate: (titleChunk) => {
-            return titleChunk  && titleChunk != 'Kestra, Open Source Declarative Data Orchestration' ? `${titleChunk} | Kestra` : 'Kestra, Open Source Declarative Data Orchestration';
-        }
-    })
+    ],
+    titleTemplate: (titleChunk) => {
+        return titleChunk &&
+            titleChunk != "Kestra, Open Source Declarative Data Orchestration"
+            ? `${titleChunk} | Kestra`
+            : "Kestra, Open Source Declarative Data Orchestration";
+    },
+});
 </script>
+
+<style lang="scss">
+.text-gradient {
+    background: var(
+        --Text_gradient,
+        linear-gradient(90deg, #e151f7 2%, #5c47f5 65%)
+    );
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+</style>
diff --git a/assets/styles/_variable.scss b/assets/styles/_variable.scss
@@ -14,6 +14,7 @@ $gray-600: #7081b9;
 $gray-700: #303e67;
 $gray-800: #2c3652;
 $gray-900: #1d2c48;
+
 $black: #26282D;
 $black-1 : #070708;
 $black-2 : #161617;
@@ -22,6 +23,9 @@ $black-5 : #070708;
 $black-6 : #3D3D3F;
 $black-3 : #252526;
 
+$green: #03DABA;
+$green-1: #BFE1B0;
+
 $blue: #1761FD;
 $indigo: #8405FF;
 $indigo-1 : #1B0229;
@@ -30,7 +34,6 @@ $pink: #FD3C97;
 $red: #E36065;
 $orange: #FCB37C;
 $yellow: #FCE07C;
-$green: #03DABA;
 $teal: #03D87F;
 $cyan: #60C5FE;
 $light-cyan: #E6F6F6;
@@ -166,6 +169,18 @@ $min-contrast-ratio: 2.5;
 
 $baseline-max-width: 730px;
 $container-max-width: 760px;
+$width-800: 800px;
+
+$rem-1: 1rem;
+$rem-2: 2rem;
+$rem-3: 3rem;
+$rem-4: 4rem;
+$rem-5: 5rem;
+$rem-6: 6rem;
+$rem-7: 7rem;
+$rem-8: 8rem;
+$rem-9: 9rem;
+$rem-10: 10rem;
 
 // bootstrap
 @import "bootstrap/scss/functions";

diff --git a/components/layout/Footer.vue b/components/layout/Footer.vue
@@ -37,6 +37,7 @@
                             <ul class="list-unstyled">
                                 <li class="mb-2"><NuxtLink href="/community">Community Overview</NuxtLink></li>
                                 <li class="mb-2"><NuxtLink href="/blogs">Blog</NuxtLink></li>
+                                <li class="mb-2"><NuxtLink href="/write-for-us">Write for Us</NuxtLink></li>
                                 <li class="mb-2"><a href="https://kestra.io/slack" target="_blank">Slack</a></li>
                                 <li class="mb-2"><a href="https://github.com/kestra-io" target="_blank">Github</a></li>
                             </ul>

diff --git a/components/use-cases/Card.vue b/components/use-cases/Card.vue
@@ -2,10 +2,7 @@
     <div class="container hero header" data-aos="fade-right">
         <div class="row">
             <div class="col-md-6">
-                <h1 class="title fw-light">
-                    Orchestrate Your <br /><span>Retail Ecosystem</span>
-                    <br />with Kestra
-                </h1>
+                <h1 class="title fw-light" v-html="content.tag"></h1>
                 <p class="description fw-light pb-4">
                     {{ content.description }}
                 </p>
@@ -22,7 +19,11 @@
                     </template>
                 </div>
             </div>
-            <div class="col-lg-6 image" data-aos="zoom-in">
+            <div
+                class="col-lg-6 image"
+                :class="content.image.style"
+                data-aos="zoom-in"
+            >
                 <img
                     class="zoom img-fluid"
                     :src="content.image.href"
@@ -60,25 +61,23 @@ export default {
     p {
         font-size: $font-size-xl;
     }
-    padding-top: 8rem;
+    padding-top: $rem-8;
     padding-bottom: 0;
+    @include media-breakpoint-down(sm) {
+        padding-top: $rem-4;
+    }
 }
 
 .title {
     font-size: $h1-font-size;
-    span {
-        background: var(
-            --Text_gradient,
-            linear-gradient(90deg, #e151f7 2%, #5c47f5 65%)
-        );
-        background-clip: text;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }
+}
+
+.title-sm {
+    font-size: $h2-font-size;
 }
 
 .description {
-    padding-bottom: 2rem;
+    padding-bottom: $rem-2;
 }
 
 .btn-dark {
@@ -88,8 +87,13 @@ export default {
 }
 
 .image {
-    margin-top: -176px;
+    &-retail {
+        margin-top: -176px;
+    }
 
+    &-community {
+        margin-top: -80px;
+    }
     @include media-breakpoint-down(lg) {
         margin-top: 0;
     }

diff --git a/components/use-cases/Examples.vue b/components/use-cases/Examples.vue
@@ -1,10 +1,15 @@
 <template>
     <div class="container example">
-        <h1 data-aos="fade-left" class="title text-center mb-5 fw-light">
-            Use Cases in <span>Retail</span>
-        </h1>
-        <div class="row card-group card-centered no-shadow mb-2">
-            <template v-for="(item, index) in items">
+        <h1
+            data-aos="fade-left"
+            class="title text-center mb-5 fw-light"
+            v-html="content.tag"
+        ></h1>
+        <div
+            class="row card-group card-centered no-shadow mb-2"
+            :class="content.cardGroup"
+        >
+            <template v-for="(item, index) in content.items">
                 <div class="col-md-4 mb-4">
                     <div
                         class="card"
@@ -34,9 +39,14 @@ export default {
     name: "Examples",
 
     props: {
-        items: {
-            type: Array,
+        content: {
+            type: Object,
             required: true,
+            default: () => ({
+                tag: "",
+                items: [],
+                icon: "",
+            }),
         },
     },
 };

diff --git a/components/use-cases/Footer.vue b/components/use-cases/Footer.vue
@@ -9,7 +9,7 @@
                     class="d-flex gap-2 flex-wrap justify-content-center align-items-center mt-4"
                 >
                     <template v-for="action in content.cta">
-                        <NuxtLink :href="action.href">
+                        <NuxtLink :href="action.href" :target="action.target">
                             <button class="btn" :class="action.style">
                                 {{ action.text }}
                             </button>

diff --git a/components/use-cases/Line.vue b/components/use-cases/Line.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container">
+    <div class="container divider">
         <hr />
     </div>
 </template>
@@ -9,3 +9,24 @@ export default {
     name: "Line",
 };
 </script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/variable";
+
+hr {
+    margin: 0;
+    border: none;
+    height: 1px;
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.divider {
+    margin-top: $rem-5;
+    margin-bottom: $rem-5;
+
+    &-md {
+        margin-top: $rem-4;
+        margin-bottom: $rem-4;
+    }
+}
+</style>
diff --git a/components/write-for-us/CardGroup.vue b/components/write-for-us/CardGroup.vue
@@ -0,0 +1,73 @@
+<template>
+    <div v-for="(item, index) in content.items" data-aos="fade-right">
+        <div class="card process-card">
+            <div class="row p-3">
+                <div>
+                    <h6 class="fw-light d-flex align-items-center m-0">
+                        <span class="item-number">0{{ index + 1 }}</span>
+                        <span class="item ms-2">{{ item.title }}</span>
+                    </h6>
+                    <span>{{ item.description }}</span>
+                </div>
+            </div>
+        </div>
+        <div v-if="index !== content.items.length - 1">
+            <div class="row">
+                <div class="col-1 arrow">
+                    <img
+                        class="icon"
+                        :src="content.icon"
+                        :alt="content.title"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "CardGroup",
+
+    props: {
+        content: {
+            type: Object,
+            required: true,
+            default: () => ({
+                items: [],
+                title: "",
+                icon: "",
+            }),
+        },
+    },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/variable";
+
+.process-card {
+    background: $black-3;
+    color: white;
+    box-shadow: none;
+}
+
+.item-number {
+    font-size: $font-size-3xl;
+    color: $green-1;
+}
+
+.item {
+    font-size: $h3-font-size;
+}
+
+.title {
+    font-size: $font-size-2xl;
+}
+.icon {
+    height: $rem-4;
+}
+.arrow {
+    padding-left: 2.75rem
+}
+</style>
diff --git a/components/write-for-us/Faqs.vue b/components/write-for-us/Faqs.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="container base-container mt-5">
+        <h3
+            data-aos="fade-left"
+            class="title fw-light pb-2"
+            v-html="content.title"
+        ></h3>
+        <div v-for="item in content.items">
+            <CustomDetails :title="item.title" class="card">
+                <p>
+                    {{ item.description }}
+                </p>
+            </CustomDetails>
+        </div>
+    </div>
+</template>
+
+<script>
+import CustomDetails from "~/components/layout/CustomDetails.vue";
+
+export default {
+    name: "Faqs",
+
+    components: { CustomDetails },
+
+    props: {
+        content: {
+            type: Object,
+            required: true,
+            default: () => ({
+                items: [],
+            }),
+        },
+    },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/variable";
+
+.base-container {
+    max-width: $width-800;
+}
+
+.card {
+    background: $black-3;
+    box-shadow: none;
+    color: white;
+    border: 1px solid $black-3;
+}
+</style>