-
Notifications
You must be signed in to change notification settings - Fork 81
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(language): introduce language agnostic page (#1000)
- Loading branch information
1 parent
10de8d4
commit c627f84
Showing
13 changed files
with
58,882 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,148 @@ | ||
<template> | ||
<section class="container"> | ||
<div class="row d-flex justify-content-center"> | ||
<div class="col-12 col-md-6 col-lg-4 mb-4"> | ||
<div class="card h-100" data-aos="fade-right"> | ||
<div class="card-body mx-2"> | ||
<div class="d-flex align-items-center gap-3"> | ||
<img src="/landing/features/scheduling/automation/Icon_auto.svg" alt="BackFill pattern svg" | ||
class="mb-2"> | ||
<h6 class="card-heading">Code in any language</h6> | ||
</div> | ||
<p class="card-para"> | ||
Orchestrate custom business logic in Python, R, Java, Julia, Ruby, and any kind of language, thanks to Docker. | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="col-12 col-md-6 col-lg-4 mb-4"> | ||
<div class="card h-100 d-flex" data-aos="fade-right"> | ||
<div class="card-body mx-2"> | ||
<div class="d-flex align-items-center gap-3"> | ||
<img src="/landing/features/scheduling/automation/Icon_auto1.svg" alt="Tune-Based svg" | ||
class="mb-2 "> | ||
<h6 class="card-heading">Script Management with Embedded Code Editor</h6> | ||
</div> | ||
<p class="card-para"> | ||
Our built-in code editor simplifies script editing and management directly within Kestra. | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="col-12 col-md-6 col-lg-4 mb-4"> | ||
<div class="card h-100 d-flex" data-aos="fade-right"> | ||
<div class="card-body mx-2"> | ||
<div class="d-flex align-items-center gap-3"> | ||
<img src="/landing/features/scheduling/automation/Icon_auto2.svg" alt="Event-Driven svg" | ||
class="mb-2"> | ||
<h6 class="card-heading">Separation of Concerns</h6> | ||
</div> | ||
<p class="card-para"> | ||
Kestra's design ensures a clear distinction between orchestration and business logic, keeping your code portable and platform-independent. | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="col-12 col-md-6 col-lg-4 mb-4"> | ||
<div class="card h-100 d-flex" data-aos="fade-right"> | ||
<div class="card-body mx-2 "> | ||
<div class="d-flex align-items-center gap-3"> | ||
<img src="/landing/features/scheduling/automation/Icon_auto3.svg" alt="API-Based svg" | ||
class="mb-2"> | ||
<h6 class="card-heading">Built-in Version Control with Git</h6> | ||
</div> | ||
<p class="card-para"> | ||
Synchronize your code changes between Git and Kestra in both directions — sync code from Git or push your code built in Kestra’s IDE to Git. | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="col-12 col-md-6 col-lg-4 mb-4"> | ||
<div class="card h-100 d-flex " data-aos="fade-right"> | ||
<div class="card-body mx-2 "> | ||
<div class="d-flex align-items-center gap-3"> | ||
<img src="/landing/features/scheduling/automation/Icon_auto4.svg" alt="Subflow svg" | ||
class="mb-2"> | ||
<h6 class="card-heading">Docker enabled by default</h6> | ||
</div> | ||
<p class="card-para"> | ||
No need to worry about building Docker images and managing the container lifecycle — we’ll do that automatically for you. | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</section> | ||
</template> | ||
<script setup> | ||
import Section from '../../layout/Section.vue'; | ||
</script> | ||
<style scoped lang="scss"> | ||
@import "../../../assets/styles/variable"; | ||
.container { | ||
padding: calc($spacer * 4) 0; | ||
background-image: url('/landing/features/scheduling/masking.svg'); | ||
position: relative; | ||
z-index: 99; | ||
&::after{ | ||
content: ""; | ||
position: absolute; | ||
height: calc($spacer * 20); | ||
width: calc($spacer * 23); | ||
right: 19%; | ||
bottom: calc($spacer * 10); | ||
z-index: 10; | ||
background: linear-gradient(180deg, rgba(98, 24, 255, 0), #6117FF 100%); | ||
filter: blur(100px); | ||
} | ||
.heading{ | ||
max-width: 500px; | ||
} | ||
.title { | ||
font-weight: 300; | ||
font-size: $font-size-3xl; | ||
&-animated { | ||
background: linear-gradient(90deg, #E151F7 57.52%, #5C47F5 92.48%); | ||
background-clip: text; | ||
-webkit-background-clip: text; | ||
-webkit-text-fill-color: transparent; | ||
} | ||
} | ||
} | ||
h3 { | ||
text-align: center; | ||
margin-bottom: 0; | ||
} | ||
.card { | ||
background-color: $black-2; | ||
color: $white; | ||
z-index: 99; | ||
box-shadow: none !important; | ||
&-body { | ||
padding: 2rem; | ||
} | ||
&-heading { | ||
font-size: $font-size-xl; | ||
font-weight: 300; | ||
line-height: 2rem; | ||
} | ||
&-para { | ||
font-size: $font-size-sm; | ||
font-weight: 400; | ||
line-height: 1.375; | ||
color: $white-1; | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,204 @@ | ||
<template> | ||
<div class="container-fluid bg-dark-1 my-5"> | ||
<div class="container"> | ||
<div class="git-options" data-aos="zoom-in"> | ||
<div class="options-item"> | ||
<div class="title-bar"> | ||
<h2 class="title">GitOps with Kestra</h2> | ||
<p class="desc">Kestra's Git capabilities ensure your projects are always synchronized and | ||
up-to-date.</p> | ||
</div> | ||
<div class="img-bar"> | ||
<img src="/landing/features/language/git-with-kestra.svg" alt="GitOps with Kestra"> | ||
</div> | ||
</div> | ||
<div class="options-item"> | ||
<div class="card-item"> | ||
<h6 class="title"> | ||
Git Sync for Continuous GitOps | ||
</h6> | ||
<p class="desc"> | ||
Synchronize your code changes between Git and Kestra in both directions — sync code from Git | ||
or push your code built in Kestra’s IDE to Git. Keeps your code up-to-date and enables | ||
seamless collaboration via Pull Requests. | ||
</p> | ||
</div> | ||
<div class="card-item"> | ||
<h6 class="title"> | ||
Flexibility Across Development Environments | ||
</h6> | ||
<p class="desc"> | ||
From the Kestra UI to VS Code extensions and Terraform providers, choose the tools that fit | ||
your deployment pattern. Our platform's API-first approach ensures you can easily interface | ||
with Git, no matter your preferred environment. | ||
</p> | ||
</div> | ||
</div> | ||
<div class="options-footer"> | ||
<h2 class="title"> | ||
Single Source of Truth | ||
</h2> | ||
<p class="desc"> | ||
Whether you're developing directly in the Kestra UI or prefer coding in your favorite IDE, our | ||
Git integration ensures your workflows are version-controlled, reviewable, and easy to deploy. | ||
</p> | ||
<NuxtLink class="btn btn-animated btn-purple-animated " href="https://kestra.io/docs/developer-guide/git" data-aos="zoom-in"> | ||
Learn more | ||
</NuxtLink> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<style scoped lang="scss"> | ||
@import "../../../assets/styles/variable"; | ||
.container-fluid { | ||
position: relative; | ||
z-index: 1; | ||
&::before { | ||
content: ""; | ||
position: absolute; | ||
width: 100%; | ||
height: 100%; | ||
background: url("/landing/features/language/git-with-kestra-bg.svg") no-repeat; | ||
z-index: -1; | ||
background-size: 92% 136%; | ||
top: -12%; | ||
left: 5%; | ||
@include media-breakpoint-down(lg) { | ||
width: 165%; | ||
height: 165%; | ||
top: -76%; | ||
left: -13%; | ||
} | ||
@include media-breakpoint-down(sm) { | ||
top: -90%; | ||
} | ||
} | ||
} | ||
.git-options { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
gap: 2rem; | ||
padding: calc($spacer * 4.688) calc($spacer * 5); | ||
@include media-breakpoint-down(xl) { | ||
padding: calc($spacer * 4.688) 0; | ||
} | ||
.options-item { | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
gap: 2rem; | ||
@include media-breakpoint-down(lg) { | ||
flex-direction: column; | ||
gap: 1rem; | ||
} | ||
.title-bar { | ||
color: $white; | ||
display: flex; | ||
flex-direction: column; | ||
gap: calc($spacer * 1.563); | ||
.title { | ||
font-size: $h2-font-size; | ||
font-weight: 600; | ||
margin: 0; | ||
} | ||
.desc { | ||
font-size: $h6-font-size; | ||
font-weight: 300; | ||
line-height: calc($spacer * 1.625); | ||
margin: 0; | ||
max-width: 68%; | ||
} | ||
@include media-breakpoint-down(lg) { | ||
align-items: center; | ||
.desc { | ||
max-width: 100%; | ||
text-align: center; | ||
} | ||
} | ||
} | ||
.img-bar > img { | ||
max-width: 100%; | ||
} | ||
.card-item { | ||
display: flex; | ||
padding: 2rem; | ||
flex-direction: column; | ||
gap: calc($spacer * 0.5); | ||
border-radius: calc($spacer * 0.5); | ||
color: $white; | ||
background-color: $black-4; | ||
border: 1px solid $black-6; | ||
.title { | ||
font-size: $h6-font-size; | ||
font-weight: 600; | ||
text-align: center; | ||
margin: 0; | ||
} | ||
.desc { | ||
font-size: $font-size-base; | ||
font-weight: 300; | ||
line-height: calc($spacer * 1.5); | ||
margin: 0; | ||
text-align: center; | ||
} | ||
} | ||
} | ||
.options-item:first-child { | ||
padding: 0 calc($spacer * 4.156); | ||
@include media-breakpoint-down(xl) { | ||
padding: 0; | ||
} | ||
} | ||
.options-footer { | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
gap: 2rem; | ||
align-items: center; | ||
color: $white; | ||
padding: 0 calc($spacer * 13.063); | ||
text-align: center; | ||
@include media-breakpoint-down(lg) { | ||
padding: 0; | ||
} | ||
.title { | ||
font-size: $h2-font-size; | ||
font-weight: 300; | ||
margin: 0; | ||
} | ||
.desc { | ||
font-size: $h6-font-size; | ||
font-weight: 300; | ||
line-height: calc($spacer * 1.625); | ||
margin: 0; | ||
} | ||
} | ||
} | ||
</style> |
Oops, something went wrong.