├── src ├── partials │ ├── footer.html │ └── nav.html ├── scss │ ├── _footer.scss │ ├── base.scss │ ├── _how.scss │ ├── _button.scss │ ├── _usage.scss │ ├── _partners.scss │ ├── reset.scss │ ├── _keys.scss │ └── _hero.scss ├── js │ ├── hero.js │ ├── navbar.js │ ├── partners.js │ └── keypoints.js ├── styles.scss └── index.js ├── .gitignore ├── assets ├── img │ ├── favicon.ico │ ├── dashes.svg │ ├── github.svg │ ├── discord.svg │ ├── helios.svg │ ├── top-hero-illu.svg │ ├── zendesk.svg │ ├── logo.svg │ ├── bg.svg │ ├── keys │ │ ├── top.svg │ │ └── policies.svg │ ├── strapi.svg │ ├── bottom-hero-illu.svg │ └── middle-hero-illu.svg └── fonts │ ├── hack │ ├── Hack-Bold.ttf │ ├── Hack-Italic.ttf │ ├── Hack-Regular.ttf │ ├── Hack-BoldItalic.ttf │ └── _hack.scss │ ├── san-francisco │ ├── SF-UI-Text-Bold.otf │ ├── SF-UI-Text-Medium.otf │ ├── SF-UI-Text-Regular.otf │ ├── SF-UI-Text-Semibold.otf │ └── _san-francisco.scss │ └── hk-grotesk │ ├── hkgrotesk-bold-webfont.woff │ ├── hkgrotesk-bold-webfont.woff2 │ ├── hkgrotesk-regular-webfont.woff │ ├── hkgrotesk-regular-webfont.woff2 │ └── _hk-grotesk.scss ├── .posthtmlrc.js ├── README.md ├── package.json └── index.html /src/partials/footer.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /.idea/ 4 | /.cache 5 | .DS_Store 6 | -------------------------------------------------------------------------------- /src/scss/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | height: 170px; 3 | background: #151B2B; 4 | } 5 | -------------------------------------------------------------------------------- /assets/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdebon/qovery-engine-livestream/HEAD/assets/img/favicon.ico -------------------------------------------------------------------------------- /assets/fonts/hack/Hack-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdebon/qovery-engine-livestream/HEAD/assets/fonts/hack/Hack-Bold.ttf -------------------------------------------------------------------------------- /assets/fonts/hack/Hack-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdebon/qovery-engine-livestream/HEAD/assets/fonts/hack/Hack-Italic.ttf -------------------------------------------------------------------------------- /src/js/hero.js: -------------------------------------------------------------------------------- 1 | export default class Hero { 2 | constructor() { 3 | console.log('init Navbar'); 4 | } 5 | 6 | } 7 | -------------------------------------------------------------------------------- /assets/fonts/hack/Hack-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdebon/qovery-engine-livestream/HEAD/assets/fonts/hack/Hack-Regular.ttf -------------------------------------------------------------------------------- /src/js/navbar.js: -------------------------------------------------------------------------------- 1 | export default class Navbar { 2 | constructor() { 3 | console.log('init Navbar'); 4 | } 5 | 6 | } 7 | -------------------------------------------------------------------------------- /assets/fonts/hack/Hack-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdebon/qovery-engine-livestream/HEAD/assets/fonts/hack/Hack-BoldItalic.ttf -------------------------------------------------------------------------------- /.posthtmlrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('posthtml-include')({ 4 | root: __dirname, 5 | }), 6 | ], 7 | }; -------------------------------------------------------------------------------- /assets/fonts/san-francisco/SF-UI-Text-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdebon/qovery-engine-livestream/HEAD/assets/fonts/san-francisco/SF-UI-Text-Bold.otf -------------------------------------------------------------------------------- /assets/fonts/san-francisco/SF-UI-Text-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdebon/qovery-engine-livestream/HEAD/assets/fonts/san-francisco/SF-UI-Text-Medium.otf -------------------------------------------------------------------------------- /assets/fonts/san-francisco/SF-UI-Text-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdebon/qovery-engine-livestream/HEAD/assets/fonts/san-francisco/SF-UI-Text-Regular.otf -------------------------------------------------------------------------------- /assets/fonts/san-francisco/SF-UI-Text-Semibold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdebon/qovery-engine-livestream/HEAD/assets/fonts/san-francisco/SF-UI-Text-Semibold.otf -------------------------------------------------------------------------------- /assets/fonts/hk-grotesk/hkgrotesk-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdebon/qovery-engine-livestream/HEAD/assets/fonts/hk-grotesk/hkgrotesk-bold-webfont.woff -------------------------------------------------------------------------------- /assets/fonts/hk-grotesk/hkgrotesk-bold-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdebon/qovery-engine-livestream/HEAD/assets/fonts/hk-grotesk/hkgrotesk-bold-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/hk-grotesk/hkgrotesk-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdebon/qovery-engine-livestream/HEAD/assets/fonts/hk-grotesk/hkgrotesk-regular-webfont.woff -------------------------------------------------------------------------------- /assets/fonts/hk-grotesk/hkgrotesk-regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdebon/qovery-engine-livestream/HEAD/assets/fonts/hk-grotesk/hkgrotesk-regular-webfont.woff2 -------------------------------------------------------------------------------- /src/partials/nav.html: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/js/partners.js: -------------------------------------------------------------------------------- 1 | export default class Partners { 2 | 3 | constructor(observer) { 4 | this.observer = observer 5 | this.init() 6 | } 7 | 8 | init() { 9 | const targets = document.querySelectorAll('.q-partners'); 10 | 11 | targets.forEach(li => { 12 | this.observer.observe(li) 13 | }) 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /src/scss/base.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'SanFrancisco', Helvetica; 3 | font-size: 16px; 4 | background: #F9F9FD; 5 | } 6 | 7 | 8 | .container { 9 | padding: 0 32px; 10 | max-width: 1280px; 11 | width: 100%; 12 | margin: auto; 13 | } 14 | 15 | 16 | @media (max-width: 750px) { 17 | 18 | .container { 19 | padding: 0 24px; 20 | } 21 | 22 | } 23 | 24 | -------------------------------------------------------------------------------- /src/js/keypoints.js: -------------------------------------------------------------------------------- 1 | export default class Keypoints { 2 | 3 | constructor(observer) { 4 | this.observer = observer 5 | this.init() 6 | } 7 | 8 | init() { 9 | const targets = document.querySelectorAll('.q-key-points ul li'); 10 | 11 | 12 | targets.forEach(li => { 13 | this.observer.observe(li) 14 | }) 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'scss/reset'; 2 | @import 'scss/base'; 3 | @import 'src/scss/footer'; 4 | @import 'scss/hero'; 5 | @import 'src/scss/button'; 6 | @import 'src/scss/how'; 7 | @import 'scss/usage'; 8 | @import 'scss/keys'; 9 | @import 'scss/partners'; 10 | 11 | @import '../assets/fonts/hk-grotesk/hk-grotesk'; 12 | @import '../assets/fonts/san-francisco/san-francisco'; 13 | @import '../assets/fonts/hack/hack'; 14 | -------------------------------------------------------------------------------- /src/scss/_how.scss: -------------------------------------------------------------------------------- 1 | .q-how { 2 | max-width: 924px; 3 | margin: auto; 4 | padding: 96px 32px; 5 | text-align: center; 6 | 7 | h2 { 8 | font-family: "hk_grotesk", Helvetica; 9 | font-weight: 800; 10 | font-size: 32px; 11 | line-height: 110%; 12 | color: #454658; 13 | margin-bottom: 24px; 14 | } 15 | 16 | p { 17 | font-size: 16px; 18 | line-height: 150%; 19 | color: #454658; 20 | margin-bottom: 32px; 21 | } 22 | } 23 | 24 | -------------------------------------------------------------------------------- /assets/fonts/hack/_hack.scss: -------------------------------------------------------------------------------- 1 | /** Hack which is used for displaying code**/ 2 | @font-face { 3 | font-family: "HackRegular"; 4 | src: url("/assets/fonts/hack/Hack-Regular.ttf"); 5 | } 6 | 7 | @font-face { 8 | font-family: "HackBold"; 9 | src: url("/assets/fonts/hack/Hack-Bold.ttf"); 10 | } 11 | 12 | @font-face { 13 | font-family: "HackBoldItalic"; 14 | src: url("/assets/fonts/hack/Hack-BoldItalic.ttf"); 15 | } 16 | 17 | @font-face { 18 | font-family: "HackItalic"; 19 | src: url("/assets/fonts/hack/Hack-Italic.ttf"); 20 | } 21 | -------------------------------------------------------------------------------- /assets/img/dashes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // here you put all the js you want. 2 | import Keypoints from "./js/keypoints"; 3 | import Partners from "./js/partners"; 4 | 5 | var options = { 6 | rootMargin: '0px', 7 | threshold: 0.2 8 | } 9 | 10 | function callback(entries) { 11 | entries.filter(el => { 12 | if(el.isIntersecting) { 13 | el.target.classList.add('visible'); 14 | } 15 | }) 16 | } 17 | 18 | 19 | let observer = new IntersectionObserver(callback, options); 20 | 21 | const keypoints = new Keypoints(observer); 22 | const partners = new Partners(observer); 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | ``` 3 | npm install 4 | npm run start 5 | ``` 6 | 7 | And then go to `localhost:1234` 8 | 9 | # Handling changes 10 | If you need to change things such as navbar for example, you will find all the reusable component througout the pages in the folder : `/src/partials`. 11 | Change the html here and modifiy the css in the good file in `/src/scss`. 12 | That is almost everything you need to know. 13 | 14 | If you have run : `npm run start`, parcels has an excellent hot reload except if you are on another page than index.html. There is a bug with parcels that requires you to manually refresh the page when you are not working on `index.html`. 15 | # qovery-engine-livestream 16 | -------------------------------------------------------------------------------- /assets/fonts/san-francisco/_san-francisco.scss: -------------------------------------------------------------------------------- 1 | /** San Francisco which is used for the platform **/ 2 | @font-face { 3 | font-family: "SanFrancisco"; 4 | src: url("/assets/fonts/san-francisco/SF-UI-Text-Regular.otf"); 5 | font-weight: 400; 6 | } 7 | 8 | @font-face { 9 | font-family: "SanFrancisco"; 10 | src: url("/assets/fonts/san-francisco/SF-UI-Text-Medium.otf"); 11 | font-weight: 500; 12 | } 13 | 14 | @font-face { 15 | font-family: "SanFrancisco"; 16 | src: url("/assets/fonts/san-francisco/SF-UI-Text-Semibold.otf"); 17 | font-weight: 600; 18 | } 19 | 20 | @font-face { 21 | font-family: "SanFrancisco"; 22 | src: url("/assets/fonts/san-francisco/SF-UI-Text-Bold.otf"); 23 | font-weight: 700; 24 | } 25 | -------------------------------------------------------------------------------- /assets/fonts/hk-grotesk/_hk-grotesk.scss: -------------------------------------------------------------------------------- 1 | /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 9, 2020 */ 2 | 3 | 4 | 5 | @font-face { 6 | font-family: 'hk_grotesk'; 7 | src: url('/assets/fonts/hk-grotesk/hkgrotesk-bold-webfont.woff2') format('woff2'), 8 | url('/assets/fonts/hk-grotesk/hkgrotesk-bold-webfont.woff') format('woff'); 9 | font-weight: 700; 10 | font-style: normal; 11 | 12 | } 13 | 14 | 15 | 16 | 17 | @font-face { 18 | font-family: 'hk_grotesk'; 19 | src: url('/assets/fonts/hk-grotesk/hkgrotesk-regular-webfont.woff2') format('woff2'), 20 | url('/assets/fonts/hk-grotesk/hkgrotesk-regular-webfont.woff') format('woff'); 21 | font-weight: normal; 22 | font-style: normal; 23 | 24 | } 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quick-parcel-project", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "start-multiple-entries": "parcel index.html centered.html what.html ", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "assets": "^3.0.1", 13 | "got": "^11.8.1", 14 | "http2": "^3.3.7", 15 | "js": "^0.1.0", 16 | "parcel-plugin-asset-copier": "^1.1.0", 17 | "parcel-plugin-html-root-syntax": "0.0.3", 18 | "scss": "^0.2.4" 19 | }, 20 | "devDependencies": { 21 | "parcel-bundler": "^1.6.1", 22 | "posthtml-include": "^1.4.3", 23 | "sass": "^1.26.11" 24 | }, 25 | "keywords": [], 26 | "assetsPath": "assets" 27 | } 28 | -------------------------------------------------------------------------------- /src/scss/_button.scss: -------------------------------------------------------------------------------- 1 | .q-btn { 2 | display: inline-flex; 3 | align-items: center; 4 | padding: 8px 16px; 5 | 6 | border-radius: 3px; 7 | color: white; 8 | 9 | font-weight: 600; 10 | font-size: 14px; 11 | line-height: 150%; 12 | 13 | transition: background 150ms ease; 14 | 15 | img { 16 | margin-right: 8px; 17 | } 18 | } 19 | 20 | .q-btn--github { 21 | background: #454658; 22 | 23 | &:hover { 24 | background: darken(#454658, 5); 25 | } 26 | 27 | img { 28 | width: 19px; 29 | } 30 | } 31 | 32 | .q-btn--discord { 33 | background: #6578C0; 34 | 35 | &:hover { 36 | background: darken(#6578C0, 3); 37 | } 38 | 39 | img { 40 | width: 16px; 41 | } 42 | } 43 | 44 | 45 | @media screen and (max-width: 750px) { 46 | .q-btn { 47 | padding: 8px 12px; 48 | font-size: 11px; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /assets/img/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/discord.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/scss/_usage.scss: -------------------------------------------------------------------------------- 1 | .q-usage { 2 | max-width: 964px; 3 | margin: auto; 4 | padding: 0 32px; 5 | margin-bottom: 100px; 6 | 7 | h2 { 8 | font-family: "hk_grotesk", Helvetica; 9 | font-weight: 800; 10 | font-size: 32px; 11 | line-height: 110%; 12 | color: #454658; 13 | margin-bottom: 24px; 14 | text-align: center; 15 | } 16 | 17 | p { 18 | font-size: 16px; 19 | line-height: 150%; 20 | color: #454658; 21 | margin-bottom: 32px; 22 | text-align: center; 23 | } 24 | } 25 | 26 | .q-usage__head { 27 | background: url('/assets/img/bg.svg') no-repeat bottom center; 28 | background-size: 100%; 29 | padding-bottom: 100px; 30 | } 31 | 32 | .q-usage__code-wrapper { 33 | padding: 24px; 34 | background: white; 35 | box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05); 36 | border-radius: 3px; 37 | margin-bottom: 48px; 38 | 39 | .q-tag { 40 | font-weight: bold; 41 | font-size: 12px; 42 | line-height: 150%; 43 | text-transform: uppercase; 44 | color: white; 45 | background: #5D64D2; 46 | border-radius: 3px; 47 | padding: 4px 8px; 48 | margin-bottom: 24px; 49 | display: inline-block; 50 | } 51 | 52 | pre { 53 | overflow: auto; 54 | margin: 0; 55 | } 56 | } 57 | 58 | .q-usage__ctas { 59 | display: flex; 60 | justify-content: center; 61 | align-items: center; 62 | 63 | .q-btn:first-child { 64 | margin-right: 24px; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/scss/_partners.scss: -------------------------------------------------------------------------------- 1 | .q-partners { 2 | margin-bottom: 120px; 3 | 4 | &.visible { 5 | h2 span { 6 | animation: fadeInPartners 800ms ease-in forwards; 7 | } 8 | 9 | ul li a { 10 | animation: fadeInPartners 800ms forwards 500ms; 11 | } 12 | } 13 | 14 | h2 { 15 | font-family: "hk_grotesk", Helvetica; 16 | font-weight: bold; 17 | font-size: 32px; 18 | line-height: 110%; 19 | text-align: center; 20 | margin-bottom: 47px; 21 | overflow: hidden; 22 | 23 | span { 24 | transform: translate3d(0, 100%, 0); 25 | display: block; 26 | } 27 | } 28 | 29 | ul { 30 | margin: auto; 31 | max-width: 700px; 32 | display: flex; 33 | align-items: center; 34 | justify-content: space-between; 35 | 36 | li { 37 | flex: 1 0; 38 | text-align: center; 39 | overflow: hidden; 40 | 41 | a { 42 | display: block; 43 | margin: auto; 44 | max-width: 237px; 45 | transform: translate3d(0, 100%, 0); 46 | } 47 | } 48 | 49 | li:nth-child(2) { 50 | a { 51 | max-width: 139px; 52 | } 53 | } 54 | 55 | li:nth-child(3) { 56 | a { 57 | max-width: 167px; 58 | } 59 | } 60 | } 61 | } 62 | 63 | 64 | @media screen and (max-width: 750px) { 65 | .q-partners { 66 | ul { 67 | display: block; 68 | 69 | li { 70 | img { 71 | display: block; 72 | margin: auto; 73 | margin-bottom: 64px; 74 | } 75 | } 76 | } 77 | } 78 | } 79 | 80 | @keyframes fadeInPartners { 81 | 0% { 82 | transform: translate3d(0, 100%, 0); 83 | } 84 | 85 | 100% { 86 | transform: translate3d(0, 0, 0); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/scss/reset.scss: -------------------------------------------------------------------------------- 1 | /*─────────────────────────────────────────────────────────────────────────────────────────────────*/ 2 | /*─────────────────────────────────────────────────────────────────────────────────────────────────*/ 3 | /*─ 4 | /*─ RESET 5 | /*─ 6 | /*─────────────────────────────────────────────────────────────────────────────────────────────────*/ 7 | /*─────────────────────────────────────────────────────────────────────────────────────────────────*/ 8 | * { 9 | box-sizing: border-box; 10 | } 11 | 12 | html { 13 | -webkit-text-size-adjust: none; /*─ Debug font size on iphone when landscape orientation ─*/ 14 | -webkit-font-smoothing: subpixel-antialiased; /*─ Debug safari font weight when fixed element on the page ─*/ 15 | -webkit-font-smoothing: antialiased; /*─ idem : Debug safari font weight when fixed element on the page ─*/ 16 | } 17 | html, body, nav, header, footer, div, span, 18 | h1, h2, h3, p, 19 | a, img, 20 | ul, li, 21 | table, form, label, input, textarea, select, button { 22 | margin: 0; 23 | padding: 0; 24 | border: 0; 25 | font: inherit; 26 | //font-family: inherit; 27 | font-size: 100%; 28 | } 29 | ul { 30 | list-style: none; 31 | } 32 | li { 33 | list-style: none; 34 | } 35 | input, textarea, select, button { 36 | display: block; 37 | box-sizing: border-box; 38 | border-radius: 0; 39 | outline: none; 40 | border: none; 41 | background: none; 42 | color: inherit; 43 | } 44 | input:focus, 45 | textarea:focus, 46 | button:focus { 47 | outline: none; 48 | } 49 | input[type='submit']:hover, 50 | button:hover { 51 | cursor: pointer; 52 | } 53 | input::-ms-clear { 54 | display: none; /*─ IE11 → remove cross to close ─*/ 55 | } 56 | textarea { 57 | overflow: auto; /*─ Hide scroll bar on IE ─*/ 58 | } 59 | a { 60 | display: block; 61 | color: inherit; 62 | text-decoration: none; 63 | } 64 | img, video, svg, picture { 65 | display: block; 66 | } 67 | img, video { 68 | width: 100%; 69 | height: auto; 70 | } 71 | svg { 72 | width: 100%; 73 | height: 100%; 74 | } 75 | iframe { 76 | position: absolute; 77 | top: 0; 78 | left: 0; 79 | width: 100%; 80 | height: 100%; 81 | } 82 | -------------------------------------------------------------------------------- /src/scss/_keys.scss: -------------------------------------------------------------------------------- 1 | .q-key-points { 2 | margin-bottom: 167px; 3 | 4 | .container { 5 | max-width: 1100px; 6 | } 7 | 8 | &.visible { 9 | ul li { 10 | animation: KeyFadeIn 500ms ease-in forwards; 11 | } 12 | } 13 | 14 | ul { 15 | display: grid; 16 | grid-template-columns: repeat(2, minmax(0, 1fr)); 17 | grid-gap: 64px 24px; 18 | 19 | li { 20 | max-width: 408px; 21 | opacity: 0; 22 | 23 | &.visible { 24 | animation: KeyFadeIn 600ms ease-in forwards; 25 | } 26 | 27 | &:nth-child(even) { 28 | margin-left: auto; 29 | } 30 | 31 | &:nth-child(odd) { 32 | animation-delay: 150ms; 33 | } 34 | 35 | &:nth-child(even) { 36 | animation-delay: 350ms; 37 | } 38 | 39 | 40 | 41 | img { 42 | height: 159px; 43 | width: auto; 44 | margin-bottom: 24px; 45 | } 46 | 47 | h3 { 48 | font-family: hk_grotesk, Helvetica; 49 | font-weight: bold; 50 | font-size: 24px; 51 | line-height: 110%; 52 | margin-bottom: 24px; 53 | } 54 | 55 | p { 56 | font-style: normal; 57 | font-weight: normal; 58 | font-size: 16px; 59 | line-height: 150%; 60 | color: #454658; 61 | margin-bottom: 24px; 62 | 63 | &:last-child { 64 | margin-bottom: 12px; 65 | } 66 | } 67 | } 68 | } 69 | 70 | a { 71 | font-weight: bold; 72 | font-size: 12px; 73 | line-height: 130%; 74 | text-transform: uppercase; 75 | color: #5D64D2; 76 | display: table-cell; 77 | //transition: color 200ms ease; 78 | 79 | &:hover { 80 | color: darken(#5D64D2, 15); 81 | } 82 | } 83 | } 84 | 85 | 86 | @keyframes KeyFadeIn { 87 | 0% { 88 | transform: translate3D(0, 10px, 0); 89 | opacity: 0; 90 | } 91 | 92 | 100% { 93 | transform: none; 94 | opacity: 1; 95 | } 96 | } 97 | 98 | 99 | @media screen and (max-width: 750px) { 100 | .q-key-points { 101 | ul { 102 | grid-template-columns: repeat(1, 1fr); 103 | grid-gap: 64px; 104 | 105 | li { 106 | img { 107 | display: block; 108 | margin: auto; 109 | margin-bottom: 24px; 110 | } 111 | } 112 | } 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /assets/img/helios.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/scss/_hero.scss: -------------------------------------------------------------------------------- 1 | .q-hero { 2 | background: #151B2B; 3 | color: white; 4 | padding-top: 40px; 5 | padding-bottom: 80px; 6 | } 7 | 8 | .q-hero__logo { 9 | width: 158px; 10 | } 11 | 12 | .q-hero__content { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | } 17 | 18 | .q-hero__text { 19 | max-width: 470px; 20 | margin-right: 70px; 21 | opacity: 0; 22 | animation: HeroSlideIn 1s forwards .2s ease; 23 | font-size: 0; 24 | will-change: transform, opacity, box-size; 25 | 26 | h1 { 27 | font-family: hk_grotesk, Helvetica; 28 | font-weight: 800; 29 | font-size: 46px; 30 | line-height: 110%; 31 | margin-bottom: 24px; 32 | display: flex; 33 | align-items: baseline; 34 | 35 | span { 36 | margin-left: 20px; 37 | } 38 | } 39 | 40 | .q-hero__headline { 41 | font-family: hk_grotesk, Helvetica; 42 | font-weight: 600; 43 | font-size: 25px; 44 | line-height: 140%; 45 | margin-bottom: 24px; 46 | } 47 | 48 | .q-hero__summary { 49 | font-size: 16px; 50 | line-height: 150%; 51 | color: #8686B3; 52 | margin-bottom: 48px; 53 | } 54 | } 55 | 56 | .q-hero__images { 57 | max-width: 550px; 58 | position: relative; 59 | animation: HeroWrapperSlideIn 1.3s forwards .5s; 60 | will-change: transform, opacity, box-size; 61 | 62 | 63 | .q-hero__illu { 64 | position: relative; 65 | opacity: 0; 66 | animation: HeroSlideIn .9s forwards .5s; 67 | will-change: transform, opacity, box-size; 68 | 69 | &--1 { 70 | z-index: 10; 71 | } 72 | 73 | &--2 { 74 | z-index: 9; 75 | margin-top: -15%; 76 | animation-delay: .7s; 77 | } 78 | 79 | &--3 { 80 | z-index: 8; 81 | margin-top: -12%; 82 | animation-delay: .9s; 83 | } 84 | 85 | &.q-hero__illu--dashes { 86 | position: absolute; 87 | animation: FadeIn 1s forwards 1.1s; 88 | opacity: 0; 89 | top: -6%; 90 | } 91 | } 92 | } 93 | 94 | @keyframes FadeIn { 95 | 0% { 96 | opacity: 0; 97 | } 98 | 99 | 100% { 100 | opacity: 1; 101 | } 102 | } 103 | 104 | @keyframes HeroWrapperSlideIn { 105 | 0% { 106 | transform: translateY(-1%); 107 | } 108 | 109 | 100% { 110 | transform: translateY(0); 111 | } 112 | } 113 | 114 | 115 | @keyframes HeroSlideIn { 116 | 0% { 117 | transform: translateY(-10%); 118 | opacity: 0; 119 | } 120 | 121 | 100% { 122 | transform: translateY(0); 123 | opacity: 1; 124 | } 125 | } 126 | 127 | .q-hero__ctas { 128 | display: flex; 129 | 130 | .q-btn:first-child { 131 | margin-right: 24px; 132 | } 133 | } 134 | 135 | 136 | @media screen and (max-width: 750px) { 137 | .q-hero__images { 138 | display: none; 139 | } 140 | 141 | .q-hero__logo { 142 | margin-bottom: 32px; 143 | } 144 | 145 | .q-hero__text { 146 | margin-right: 0; 147 | 148 | h1 { 149 | display: block; 150 | 151 | span { 152 | display: block; 153 | margin-top: 24px; 154 | margin-left: 0; 155 | } 156 | } 157 | } 158 | } 159 | -------------------------------------------------------------------------------- /assets/img/top-hero-illu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/zendesk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/img/bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Qovery Engine - The simplest way to deploy your full-stack apps 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 |
41 | 44 |
45 |
46 |

Qovery Engine 47 | 48 | 49 | Star 50 |

51 |

Abstraction layer to deploy microservices applications on any Cloud provider.

52 |

Qovery Engine is an open-source abstraction layer product that turns easy apps deployment on AWS, GCP, Azure and others Cloud providers.

53 |
54 | 55 | github iconSee on Github 56 | 57 | 58 | discord iconJoin us on Discord 59 | 60 |
61 |
62 |
63 | dashes 64 | illustration 65 | illustration 66 | illustration 67 |
68 |
69 | 70 |
71 |
72 | 73 |
74 |

How does it work?

75 | 76 |

Qovery Engine is an open-source abstraction layer product that turns easy apps deployment on AWS, GCP, Azure and others Cloud providers. The Qovery Engine is coded in Rust and takes advantage of Terraform, Helm, Kubectl, Docker to manage resources.

77 | 78 | policies illustration 79 |
80 | 81 |
82 |
83 |

Usage

84 |

Initialize EKS (AWS Kubernetes) and ECR (AWS container registry) on AWS

85 |
86 |
87 | RUST 88 | 
let engine = Engine::new(
 89 |     context, // parameters
 90 |     local_docker, // initialize Docker as a Build Platform
 91 |     ecr, // initialize Elastic Container Registry
 92 |     aws, // initialize AWS account
 93 |     cloudflare, // initialize Cloudflare as DNS Nameservers
 94 | );
 95 |  
 96 | let session = match engine.session() {
 97 |     Ok(session) => session, // get the session
 98 |     Err(config_error) => panic!("configuration error {:?}", config_error),
 99 | };
100 |  
101 | let mut tx = session.transaction();
102 |  
103 | // create EKS (AWS managed Kubernetes cluster)
104 | tx.create_kubernetes(&eks);
105 |  
106 | // create the infrastructure and wait for the result
107 | match tx.commit() {
108 |     TransactionResult::Ok => println!("OK"),
109 |     TransactionResult::Rollback(commit_err) => println!("ERROR but rollback OK"),
110 |     TransactionResult::UnrecoverableError(commit_err, rollback_err) => println!("FATAL ERROR")
111 | };
112 |
113 | 114 |
115 | 116 | github iconSee more on Github 117 | 118 | 119 | discord iconJoin us on Discord 120 | 121 |
122 |
123 | 124 |
125 |
126 | 156 |
157 |
158 | 159 |
160 |

161 | They use Qovery Engine 162 |

163 | 180 |
181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /assets/img/keys/top.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /assets/img/strapi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/bottom-hero-illu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /assets/img/middle-hero-illu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /assets/img/keys/policies.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | --------------------------------------------------------------------------------