Skip to content

Commit

Permalink
feat/homepage-anim (#423)
Browse files Browse the repository at this point in the history 
* feat(home): new animation & mobile handling

closes #364
  • Loading branch information
@brian-mulier-p
brian-mulier-p authored Aug 11, 2023
1 parent 37c4b59 commit d2d57bd
Show file tree
Hide file tree
Showing 24 changed files with 226 additions and 1,157 deletions.
13 changes: 13 additions & 0 deletions assets/styles/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ body {
}

:root {
--spacer: #{$spacer};
--#{$prefix}font-size-lg: #{$font-size-lg};
--#{$prefix}font-size-sm: #{$font-size-sm};
}
Expand Down Expand Up @@ -406,4 +407,16 @@ blockquote.blockquote {
}
}

@include media-breakpoint-down(lg) {
.desktop {
display: none;
}
}

@include media-breakpoint-up(lg) {
.mobile {
display: none;
}
}

@import "./docs";
2 changes: 2 additions & 0 deletions components/enterprise/Customers.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@
content: '';
position: absolute;
left: 50%;
bottom: calc(-1 * var(--spacer));
transform: translateX(-50%);
top: 2.5rem;
display: inline-block;
height: 2px;
Expand Down
222 changes: 181 additions & 41 deletions components/home/Header.vue
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,38 @@
<template>
<div class="main">
<div class="hero container text-center">
<p class="overline" data-aos="fade-left">OPEN SOURCE DECLARATIVE DATA ORCHESTRATION</p>
<h1 data-aos="fade-right">Automate Everything<br>Everywhere All at Once<span class="dot">.</span></h1>
<div class="text-center cta">
<a href="https://demo.kestra.io/ui/login?auto" target="_blank" class="btn btn-lg btn-secondary me-2" data-aos="zoom-in">
<Console /> Live Demo
</a>
<a href="#" class="btn btn-lg btn-primary" data-aos="zoom-in" data-bs-toggle="modal" data-bs-target="#home-intro">
<PlayCircleOutline /> Product Video
</a>
<div class="hero container">
<div class="text-block">
<p class="overline" data-aos="fade-left">OPEN SOURCE DECLARATIVE<br/>DATA ORCHESTRATION</p>
<h1 data-aos="fade-right">Automate <br />Everything <br class="desktop" />Everywhere <br />All at Once.</h1>
<ClientOnly>
<a class="mobile video" href="https://www.youtube.com/watch?v=h-P0eK2xN58">
<img src="/landing/home/video.png" alt="Kestra introduction video picture"/>
<div class="play-button">
<img src="/landing/home/play-button-bg.png" alt="Play button" />
<PlayOutline />
</div>
</a>
</ClientOnly>
<div class="buttons">
<a href="https://demo.kestra.io/ui/login?auto" target="_blank" class="btn btn-secondary me-2" data-aos="zoom-in">
<Console /> Try the live demo
</a>
<NuxtLink href="/docs" class="btn btn-primary">
<LightningBolt /> Get started
</NuxtLink>
</div>
</div>
<div class="desktop">
<ClientOnly>
<HeaderAnimation class="animation"/>
</ClientOnly>
</div>

<img class="img-fluid" src="/landing/home/animation.svg" alt="Kestra's flow animation from source to visualization" />
</div>

<div class="container text-center">
<p class="companies-title" data-aos="zoom-in">
Loved & trusted by leading enterprises worldwide
</p>

</div>

<div class="container-fluid pt-4 pb-4">
Expand All @@ -40,76 +53,203 @@
</template>

<script>
import Magnify from "vue-material-design-icons/Magnify.vue";
import Console from "vue-material-design-icons/Console.vue"
import PlayCircleOutline from "vue-material-design-icons/PlayCircleOutline.vue"
import PlayOutline from "vue-material-design-icons/PlayOutline.vue"
import LightningBolt from "vue-material-design-icons/LightningBolt.vue"
import GithubButton from "../layout/GithubButton.vue";
import Companies from "../layout/Companies.vue";
import HeaderAnimation from './HeaderAnimation.vue';
import ContentCopy from "vue-material-design-icons/ContentCopy.vue";
import Check from "vue-material-design-icons/Check.vue";
export default {
components: {Console, Magnify, PlayCircleOutline, GithubButton, Companies, HeaderAnimation},
components: {Console, PlayOutline, LightningBolt, GithubButton, Companies, HeaderAnimation},
data() {
return {
videoVisible: false
}
},
}
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/variable";
.main {
background: linear-gradient(160.34deg, rgba(130, 0, 255, 0.3) 5.3%, rgba(130, 0, 255, 0) 75.43%), #040114;
background-size: 100% 100% !important;
background: url("/landing/home/header-bg.png") center no-repeat;
@include media-breakpoint-down(lg) {
background: url("/landing/home/header-bg-mob.png") center no-repeat;
}
> * {
z-index:2;
position: relative;
}
&:after {
background: url("/landing/home/header-bg.svg") center bottom no-repeat;
content:'';
position: absolute;
width: 100%;
height: 702px;
margin-top: -702px;
z-index: 1;
}
color: var(--bs-white);
padding-top: 80px;
margin-top: -80px;
.hero {
h1 {
max-width: 1024px;
display: flex;
padding-top: calc(var(--spacer) * 6);
justify-content: center;
align-items: center;
max-width: none;
.text-block {
text-align: left;
display: flex;
flex-direction: column;
gap: $spacer;
@include media-breakpoint-down(lg) {
text-align: center;
align-items: center;
}
.overline {
color: #E1C2FF;
line-height: 1.875rem;
margin-bottom: 0;
&::after {
content: "";
position: relative;
top: calc(var(--spacer) / 2);
width: 15%;
height: 3px;
background: var(--bs-pink);
display: block;
}
}
.buttons {
display: flex;
flex-direction: column;
gap: $spacer;
width: 80%;
a {
margin: 0 !important;
}
@include media-breakpoint-down(lg) {
gap: calc(0.5 * var(--spacer));
width: 100%;
}
}
h1 {
font-size: 2.875rem;
}
}
.animation {
position: relative;
width: 50vw;
&::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: #7A00F4;
mix-blend-mode: lighten;
filter: blur(97px);
}
}
p {
max-width: 1024px;
.video {
position: relative;
margin-bottom: $spacer;
.play-button {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20%;
* {
display: block;
}
img {
width: 100%;
}
span {
color: white;
position: absolute;
// offsets the play button so it looks centered
top: 48%;
left: 55%;
transform: translate(-50%, -50%);
text-align: left;
height: 40%;
width: 40%;
:deep(svg) {
bottom: unset;
height: 100%;
width: 100%;
}
}
}
> img {
width: 80vw;
border-radius: 2.5690073% / 4.3147884%;
box-shadow: 0 0 14.263729095458984px 0 rgba(139, 22, 202, 0.30),
0 14.263729095458984px 32.09339141845703px 0 rgba(139, 22, 202, 0.29),
0 57.9463996887207px 57.9463996887207px 0 rgba(139, 22, 202, 0.26),
0 130.15652465820312px 77.55902862548828px 0 rgba(139, 22, 202, 0.15),
0 230.8941192626953px 92.71424102783203px 0 rgba(139, 22, 202, 0.04),
0 361.0506286621094px 100.73758697509766px 0 rgba(139, 22, 202, 0.01);
}
}
.cta {
padding-bottom: 0;
@include media-breakpoint-down(lg) {
flex-direction: column;
.text-block {
width: 80vw;
p.overline {
margin: 0 auto;
font-size: $font-size-sm;
line-height: 1.25rem;
&::after {
display: none !important;
}
}
h1 {
font-size: 1.625rem;
line-height: 1.5;
font-weight: 700;
.dot {
font-size: 2.7rem;
line-height: 0;
}
}
}
}
}
.animation {
max-width: 1300px;
margin: 0 auto;
}
.companies-title {
position: relative;
&:after {
content: '';
position: absolute;
left: 50%;
top: 2.5rem;
bottom: calc(-1 * var(--spacer));
transform: translateX(-50%);
display: inline-block;
height: 2px;
width: 51px;
Expand Down
57 changes: 29 additions & 28 deletions components/home/HeaderAnimation.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
<template>
<VueLottie
ref="lottie"
class="animation"
v-if="animationData"
:animation-data="animationData"
:assets-path="assetsPath"
:loop="false"
:auto-play="false"
:speed="2"
@complete="complete"
@domLoaded="play"
/>
<div class="wrapper">
<VueLottie
ref="lottie"
class="animation"
v-if="animationData"
:animation-data="animationData"
:assets-path="assetsPath"
:loop="false"
:auto-play="false"
@complete="complete"
@domLoaded="play"
/>
<a href="#" data-aos="zoom-in" data-bs-toggle="modal" data-bs-target="#home-intro"/>
</div>
</template>

<script>
Expand All @@ -21,8 +23,8 @@
components: {VueLottie},
data() {
return {
animationData: undefined,
assetsPath: undefined,
animationData: undefined
}
},
mounted() {
Expand All @@ -38,22 +40,21 @@
this.$refs.lottie.play();
},
transform() {
// let logoCopy = [...logo];
// const random = Math.floor(Math.random()*logoCopy.length)
// let logo1 = logoCopy[random];
// logoCopy = logoCopy.filter((valur, key) => key !== random);
//
// let logo2 = logoCopy[Math.floor(Math.random()*logoCopy.length)];
const data = {... animationData.default};
// this.assetsPath = logo1.substring(0, logo1.lastIndexOf("/") + 1);
// data.assets[0].p = logo1.replace(/^.*[\\\/]/, '');
// data.assets[1].p = logo2.replace(/^.*[\\\/]/, '');
this.animationData = data;
this.animationData = {...animationData.default};
}
}
}
</script>
<style scoped lang="scss">
.wrapper {
position: relative;
a {
position: absolute;
left: 16%;
top: 38%;
width: 36%;
height: 28%;
}
}
</style>
2 changes: 1 addition & 1 deletion components/home/animation.json
View file

Large diffs are not rendered by default.

Loading

1 comment on commit d2d57bd

@vercel
Copy link

@vercel vercel bot commented on d2d57bd Aug 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

kestra-io – ./

kestra-io.vercel.app
kestra-io-kestra.vercel.app
kestra-io-git-main-kestra.vercel.app

Please sign in to comment.