feat: continue on Home page

kestra-io · Apr 11, 2023 · 537f87e · 537f87e
1 parent 394a35b
commit 537f87e
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 15 deletions.
diff --git a/components/home/Features.vue b/components/home/Features.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="container">
-        <Section subtitle="Features" title="The data orchestrator of choice: Kestra">
+        <Section subtitle="Stand Out with Kestra's Exclusive Features" title="Enhanced Workflow Efficiency">
             <div class="row card-group mb-2">
                 <div class="col-md-4 mb-4">
                     <div class="card shadow-lg" data-aos="fade-zoom-in">

diff --git a/components/home/Header.vue b/components/home/Header.vue
@@ -49,7 +49,7 @@
             }
         },
         created() {
-             stargazers().then(value => this.stargazersText = value);
+             stargazers().then(value => this.stargazersText = value); 
         },
         computed: {
             companies() {

diff --git a/components/home/How.vue b/components/home/How.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="container">
         <Section
-            title="Powerful Event Based Workflow Automation"
-            subtitle="How?"
+            title="High-Performance Automation and Integration for Optimized Data Operations"
+            subtitle="Master Data Workflows"
         >
             <div class="row mb-5">
                 <div class="col-md-6 p-5">
@@ -58,10 +58,22 @@
                     <h5>Monitor and optimize your workflows</h5>
                     <p>Track the performance of your workflows, identify bottlenecks, and optimize them for speed and efficiency.</p>
                 </div>
-                <div class="col-md-6">
+                <div class="col-md-6 row mb-5">
                     <img class="img-fluid" src="/landing/home/how-5.svg" alt="" />
                 </div>
             </div>
+
+            <div class="text-center">
+                <p class="last-words">
+                    By using Kestra as your orchestrator, you can easily automate complex workflows, integrate with your existing data stack, and improve the speed and efficiency of your data processing.
+                </p>
+                <a href="/docs/getting-started" class="btn btn-lg btn-primary me-2">
+                    Get started
+                </a>
+                <a href="https://demo.kestra.io" target="_blank" class="btn btn-lg btn-secondary">
+                    Live demo
+                </a>
+            </div>
         </Section>
     </div>
 </template>
@@ -73,3 +85,15 @@
         components: {Section}
     }
 </script>
+
+<style lang="scss" scoped>
+    @import "../../assets/styles/variable";
+
+    .last-words {
+        color: #343434;
+        padding-left: calc($spacer * 8);
+        padding-right: calc($spacer * 8);
+        font-size: large;
+    }
+
+</style>
diff --git a/components/home/Plugins.vue b/components/home/Plugins.vue
@@ -2,7 +2,7 @@
     <div class="container-fluid">
         <Section
             title="Over 300 plugins"
-            subtitle="Plugins"
+            subtitle="Expand Your Workflow Capabilities"
             baseline="Plugins are at the core of Kestra's extensibility. Many plugins are available from the Kestra core team, and creating your own is easy. With plugins, you can add new functionality to Kestra."
         >
             <ul class="nav nav-pills">
@@ -48,7 +48,7 @@
             </div>
 
             <div class="text-center mt-5">
-                <a class="btn btn-lg btn-primary " href="#">See all plugins</a>
+                <a class="btn btn-lg btn-primary " href="/plugins">See all plugins</a>
             </div>
         </Section>
     </div>

diff --git a/components/home/UseCase.vue b/components/home/UseCase.vue
@@ -2,8 +2,8 @@
     <div class="container-fluid bg-body-tertiary">
         <div class="container">
             <Section
-                title="Power your data workflows with Kestra"
-                subtitle="Solutions"
+                title="Uncover a Wide Range of Use Cases to Leverage Kestra's Potential"
+                subtitle="Maximize Data Workflow Capabilities"
             >
                 <ul class="nav nav-pills">
                     <li class="nav-item">
@@ -36,8 +36,8 @@
                             </li>
                         </ol>
                     </div>
-                    <div class="col-md-6">
-                        <h1>TODO</h1>
+                    <div class="col-md-6 use-case-img">
+                        <img src="/landing/home/dashboard.png" width="600"/>
                     </div>
                 </div>
 
@@ -90,7 +90,7 @@
                 </div>
 
                 <div class="text-center mt-5">
-                    <a class="btn btn-lg btn-primary " href="#">See more</a>
+                    <a class="btn btn-lg btn-primary " href="/solutions">See more</a>
                 </div>
             </Section>
         </div>
@@ -176,5 +176,10 @@
                 bottom: -3rem;
             }
         }
+
+        .use-case-img {
+            padding-top: calc($spacer * 6);
+            vertical-align: middle;
+        }
     }
 </style>
diff --git a/public/landing/home/dashboard.png b/public/landing/home/dashboard.png
diff --git a/utils/github.js b/utils/github.js
@@ -1,12 +1,9 @@
 export async function stargazers() {
-    return "TODO"
-    /*
     return await fetch("https://api.github.com/repos/kestra-io/kestra")
         .then((response) => {
             return response.json();
         })
         .then(value => {
             return Intl.NumberFormat('en-US').format(value.stargazers_count);
         })
-    */
 }