From f95bd5da2e2c12cf23681fd0553eeeb2d0732f67 Mon Sep 17 00:00:00 2001
From: Ludovic DEHON <tchiot.ludo@gmail.com>
Date: Mon, 7 Aug 2023 09:17:45 +0200
Subject: [PATCH] feat(site): faq page

close #386
---
 assets/styles/app.scss              |  24 ++++++
 components/blogs/BlogsList.vue      |   2 +-
 components/layout/CustomDetails.vue |  99 ++++++++++++++++++++++
 components/layout/Footer.vue        |   1 +
 pages/blogs/[...slug].vue           |  25 ------
 pages/faq.vue                       | 124 ++++++++++++++++++++++++++++
 6 files changed, 249 insertions(+), 26 deletions(-)
 create mode 100644 components/layout/CustomDetails.vue
 create mode 100644 pages/faq.vue

diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index 4fda657dda..3ecc7ff299 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -382,4 +382,28 @@ blockquote.blockquote {
     position:absolute;
 }
 
+.top-breadcrumb {
+    font-size: $font-size-sm;
+    color: var(--bs-primary);
+    font-family: var(--bs-font-monospace);
+    font-weight: 800;
+    text-transform: uppercase;
+    max-width: 700px;
+    .bd-gutter & {
+        margin: 0 auto;
+
+    }
+
+    &:after {
+        content: '';
+        position: absolute;
+        margin-top: calc($font-size-sm / 1.5);
+        margin-left: $spacer;
+        display: inline-block;
+        height: 2px;
+        width: 51px;
+        background: var(--bs-pink);
+    }
+}
+
 @import "./docs";
diff --git a/components/blogs/BlogsList.vue b/components/blogs/BlogsList.vue
index d296735f43..5691c7402d 100644
--- a/components/blogs/BlogsList.vue
+++ b/components/blogs/BlogsList.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="mt-5">
-        <p class="subtitle" data-aos="fade-right">
+        <p class="top-breadcrumb" data-aos="fade-right">
             Blog
         </p>
         <h1 data-aos="fade-left">All things Kestra</h1>
diff --git a/components/layout/CustomDetails.vue b/components/layout/CustomDetails.vue
new file mode 100644
index 0000000000..d6c77dd047
--- /dev/null
+++ b/components/layout/CustomDetails.vue
@@ -0,0 +1,99 @@
+<template>
+    <details data-aos="zoom-in">
+        <summary>
+            <HelpCircleOutline />
+            <h3>{{ title }}</h3>
+            <span class="icon">
+                <ChevronDown />
+                <ChevronUp />
+            </span>
+        </summary>
+        <div>
+            <slot />
+        </div>
+    </details>
+
+</template>
+
+<script setup>
+    import HelpCircleOutline from "vue-material-design-icons/HelpCircleOutline.vue";
+    import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
+    import ChevronUp from "vue-material-design-icons/ChevronUp.vue";
+</script>
+
+<script>
+    export default {
+        props: {
+            title: {
+                type: String,
+                required: true,
+            },
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+
+    @import "../../assets/styles/variable";
+
+    details {
+        background: var(--bs-white);
+        padding: 1rem;
+        border: 1px solid var(--bs-border-color);
+        box-shadow: $box-shadow;
+        border-radius: var(--bs-border-radius);
+        margin-bottom: 1rem;
+
+        summary {
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+
+            > span:first-child {
+                color: var(--bs-purple);
+                font-size: $h3-font-size;
+                margin-right: 1rem;
+            }
+
+            :deep(.material-design-icon > .material-design-icon__svg) {
+                bottom: 0;
+            }
+
+            h3 {
+                font-size: var(--bs-body-font-size);
+                margin-bottom: 0;
+                flex-grow: 1;
+            }
+
+            .chevron-up-icon {
+                display: none;
+            }
+
+        }
+
+        > div {
+            margin-top: 1rem;
+            border-left: 1px solid var(--bs-indigo);
+            padding-left: 1rem;
+            margin-left: 3rem;
+        }
+
+        &[open] summary .icon {
+            .chevron-down-icon {
+                display: none;
+            }
+
+            .chevron-up-icon {
+                display: block;
+            }
+        }
+    }
+
+
+    h6 {
+        font-weight: 700;
+        color: var(--bs-black)
+    }
+
+
+</style>
\ No newline at end of file
diff --git a/components/layout/Footer.vue b/components/layout/Footer.vue
index 44319679b0..cbe3eef4c6 100644
--- a/components/layout/Footer.vue
+++ b/components/layout/Footer.vue
@@ -46,6 +46,7 @@
                                 <li class="mb-2"><NuxtLink href="/plugins/">Plugins documentation</NuxtLink></li>
                                 <li class="mb-2"><NuxtLink href="/docs/terraform">Terraform provider</NuxtLink></li>
                                 <li class="mb-2"><NuxtLink href="/docs/administrator-guide">Administrator guide</NuxtLink></li>
+                                <li class="mb-2"><NuxtLink href="/faq">FAQ</NuxtLink></li>
                             </ul>
                         </div>
                         <div class="col-6 col-lg-2 mb-3">
diff --git a/pages/blogs/[...slug].vue b/pages/blogs/[...slug].vue
index 930d6d60c3..267d8d485b 100644
--- a/pages/blogs/[...slug].vue
+++ b/pages/blogs/[...slug].vue
@@ -86,29 +86,4 @@
     .bd-layout {
         display: block;
     }
-
-    :deep(.subtitle) {
-        font-size: $font-size-sm;
-        color: var(--bs-primary);
-        font-family: var(--bs-font-monospace);
-        font-weight: 800;
-        text-transform: uppercase;
-        max-width: 700px;
-        .bd-gutter & {
-            margin: 0 auto;
-
-        }
-
-        &:after {
-            content: '';
-            position: absolute;
-            margin-top: calc($font-size-sm / 1.5);
-            margin-left: $spacer;
-            display: inline-block;
-            height: 2px;
-            width: 51px;
-            background: var(--bs-pink);
-        }
-    }
-
 </style>
\ No newline at end of file
diff --git a/pages/faq.vue b/pages/faq.vue
new file mode 100644
index 0000000000..767e3558d0
--- /dev/null
+++ b/pages/faq.vue
@@ -0,0 +1,124 @@
+<template>
+    <Head>
+        <Title>Kestra Frequently Asked Questions</Title>
+        <Meta name="description" content="Get responses on all your common questions about Kestra" />
+    </Head>
+    <div>
+        <div class="container mb-5">
+            <div class="mt-5">
+                <p class="top-breadcrumb" data-aos="fade-right">
+                    FAQ
+                </p>
+                <h1 data-aos="fade-left">Kestra Frequently Asked Questions</h1>
+            </div>
+
+            <h2 data-aos="zoom-in">General Questions</h2>
+            <CustomDetails title="What is Kestra?">
+                <p>Kestra is a powerful and easy-to-use data orchestration platform that helps you automate, schedule, and monitor data workflows across various systems and services.</p>
+            </CustomDetails>
+            <CustomDetails title="What is a declarative Orchestrator?">
+                <p>A declarative orchestrator is a system that allows you to define and manage complex workflows using a high-level, descriptive language. Instead of specifying the exact steps and sequences to achieve a specific outcome, a declarative orchestrator lets you define the desired end state and the system figures out how to reach it.</p>
+
+                <p>Kestra is a declarative orchestrator designed for managing data workflows. It uses YAML (Yet Another Markup Language) to define workflows in a human-readable and structured format. Kestra workflows consist of tasks and triggers that represent various data processing operations, connected by data dependencies and flow control structures.</p>
+            </CustomDetails>
+            <CustomDetails title="What are the advantages of a Declarative Orchestrator?">
+                <p>By using a declarative approach, Kestra simplifies the development, maintenance, and scalability of data workflows. It allows you to focus on the high-level goals and objectives of your data workflows, while Kestra takes care of executing the tasks and handling errors, retries, and parallelism.</p>
+
+                <p>Some key benefits of using Kestra as a declarative orchestrator include:</p>
+                <ol>
+                    <li>Improved readability and maintainability: Declarative workflows are easier to understand and modify, making it simpler for teams to collaborate and maintain their data pipelines over time.</li>
+                    <li>Enhanced flexibility: Declarative orchestration enables easy modification and extension of workflows as requirements change, without the need for extensive refactoring.</li>
+                </ol>
+            </CustomDetails>
+            <CustomDetails title="Who can benefit from using Kestra?">
+                <p>Kestra is perfect for data engineers, developers, data scientists, and anyone who needs to process, manage, and orchestrate data workflows across multiple systems.</p>
+            </CustomDetails>
+
+            <h2 data-aos="zoom-in">Features and Functionality</h2>
+            <CustomDetails title="What are some of the key features of Kestra?">
+                <p>Kestra offers a wide range of features, including:</p>
+                <ul>
+                    <li>Intuitive flow creation with a low-code editor</li>
+                    <li>Powerful and flexible task execution with support for parallelism and retries</li>
+                    <li>Comprehensive plugin ecosystem for easy integration with various services and systems</li>
+                    <li>Advanced flow and task monitoring with metrics, logs, and notifications</li>
+                    <li>Highly extensible and customizable architecture</li>
+                </ul>
+            </CustomDetails>
+            <CustomDetails title="Can I create custom plugins for Kestra?">
+                <p>Yes, Kestra allows developers to create custom plugins to add new tasks and integrations that suit their specific requirements.</p>
+            </CustomDetails>
+            <CustomDetails title="What languages are supported in Kestra flows?">
+                <p>Kestra flows are primarily defined in YAML, which provides a simple and human-readable syntax for describing your data workflows. In addition to YAML, you can also use various scripting languages within your tasks, such as Python, JavaScript, or Bash, to perform custom operations and data transformations.</p>
+                <p>Furthermore, Kestra supports Docker, which enables you to execute tasks using any language, expanding the range of possibilities for your workflows. This flexibility allows you to leverage the power of different programming languages within your Kestra flows to suit your specific requirements.</p>
+            </CustomDetails>
+
+            <h2 data-aos="zoom-in">Getting Started</h2>
+            <CustomDetails title="How do I get started with Kestra?">
+                <p>To get started with Kestra, follow the <NuxtLink href="/docs/getting-started">Getting Started Guide</NuxtLink> on the Kestra website. This guide will walk you through the installation and configuration process, as well as provide an introduction to creating your first flows and tasks.</p>
+            </CustomDetails>
+            <CustomDetails title="How to install Kestra?">
+                <p>Kestra is designed to be easy to install and set up. The installation process involves following the <NuxtLink href="/docs/installation/">official documentation</NuxtLink>, which provides step-by-step instructions on how to get started with Kestra on various platforms, including Docker, Kubernetes, and Helm. The Kestra team is also available on their <a target="_blank" href="/slack">Slack channel</a> to provide assistance and answer any questions you might have during the installation process.</p>
+            </CustomDetails>
+            <CustomDetails title="Is there a community or support forum for Kestra?">
+                <p>Yes, Kestra has a growing community and support forum. You can join the <a target="_blank" href="/slack">Kestra Slack channel</a> to ask questions, share your experience, and connect with other users and developers.</p>
+            </CustomDetails>
+
+            <h2 data-aos="zoom-in">Pricing and Licensing</h2>
+            <CustomDetails title="Is Kestra open-source?">
+                <p>Yes, Kestra is an open-source project. The source code is available on <a href="https://github.com/kestra-io/kestra" target="_blank">GitHub</a> under the Apache 2.0 license.</p>
+            </CustomDetails>
+            <CustomDetails title="Are there any costs associated with using Kestra?">
+                <p>Kestra is free to use as an open-source project. However, there might be additional costs related to hosting, infrastructure, and any third-party services you choose to integrate with Kestra.</p>
+            </CustomDetails>
+
+            <h2 data-aos="zoom-in">Enterprise Edition</h2>
+            <CustomDetails title="What additional features does the Kestra Enterprise Edition offer?">
+                <p>The Kestra Enterprise Edition provides enhanced features designed to meet the needs of large-scale and
+                    complex organizations. These features include:</p>
+                <ul>
+                    <li><strong>Improved scalability</strong>: Enterprise Edition allows you to scale up your Kestra deployment to handle a larger number of flows, tasks, and users.</li>
+                    <li><strong>Enhanced security</strong>: Enterprise Edition offers additional security features such as encryption, access control, single sign-on (SSO) integration, fine-grained management permissions, and audit logs.</li>
+                    <li><strong>Dedicated support</strong>: With the Enterprise Edition, you'll have access to dedicated support from the Kestra team to help you resolve any issues and ensure a smooth deployment.</li>
+                    <li><strong>Customizable dashboard</strong>: Enterprise Edition includes a customizable dashboard that provides advanced monitoring and analytics capabilities for better insights into your data workflows.</li>
+                    <li><strong>User management</strong>: Enterprise Edition enables you to easily add and manage users, ensuring that the right people have access to the appropriate resources and workflows within your organization.</li>
+                </ul>
+            </CustomDetails>
+            <CustomDetails title="How can I get access to the Kestra Enterprise Edition?">
+                <p>To get access to the Kestra Enterprise Edition, please contact us through our <a target="_blank" href="https://meetings-eu1.hubspot.com/quentin-sinig/meeting-link-demo">Slack channel</a> or <a target="_blank" href="/slack">Slack channel</a>. We will provide you with the necessary information and guide you through the process of setting up the Enterprise Edition.</p>
+            </CustomDetails>
+            <CustomDetails title="Are there additional costs associated with the Enterprise Edition?">
+                <p>Yes, there are additional licensing fees for using the Kestra Enterprise Edition. The fees depend on the size of your organization and the specific features you require. To get more information about pricing, please get in touch with the Kestra team.</p>
+            </CustomDetails>
+
+            <h2 data-aos="zoom-in">Miscellaneous</h2>
+            <CustomDetails title="How does Kestra compare to other data orchestration platforms?">
+                <p>Kestra stands out from other data orchestration platforms due to its focus on ease of use thanks to declarative language YAML, powerful features, and a growing ecosystem of plugins. The user-friendly interface and robust architecture make it an excellent choice for orchestrating complex data workflows across various systems and services.</p>
+            </CustomDetails>
+            <CustomDetails title="Are there any limitations when using declarative flows in YAML?">
+                <p>YAML's simplicity and readability make it easy to understand and maintain your data workflows. Kestra provides extensive support for various YAML features, such as variables, loops, and conditions, allowing you to create complex workflows without the need for a separate programming language. If you require more advanced functionality, you can always use scripting languages like Python, JavaScript, or Bash within your tasks to extend your flows' capabilities.</p>
+            </CustomDetails>
+            <CustomDetails title="How can I contribute to the Kestra project?">
+                <p>Contributions to the Kestra project are always welcome! You can contribute by submitting bug reports, feature requests, or pull requests on the <a href="https://github.com/kestra-io/kestra" target="_blank">GitHub repository</a>. You can also join the community on Slack to discuss ideas and collaborate with other developers.</p>
+            </CustomDetails>
+        </div>
+    </div>
+    <Newsletter />
+</template>
+
+<script>
+    import CustomDetails from "../components/layout/CustomDetails.vue";
+    import Newsletter from "../components/layout/Newsletter.vue";
+
+    export default {
+        components: {CustomDetails, Newsletter},
+    }
+</script>
+
+
+<style scoped lang="scss">
+
+    h2 {
+        margin-top: 2rem;
+    }
+</style>
\ No newline at end of file