Skip to content

Commit

Permalink
feat(language): introduce language agnostic page (#1000)
Browse files Browse the repository at this point in the history
  • Loading branch information
@t-chatoyan
t-chatoyan authored Mar 12, 2024
1 parent 10de8d4 commit c627f84
Show file tree
Hide file tree
Showing 13 changed files with 58,882 additions and 0 deletions.
148 changes: 148 additions & 0 deletions components/features/language/Features.vue
View file
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>
204 changes: 204 additions & 0 deletions components/features/language/GitOptions.vue
View file
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>
Loading

0 comments on commit c627f84

Please sign in to comment.