From 8de543fb4e0918377f4decbfc60e9491e84e0418 Mon Sep 17 00:00:00 2001 From: bntnam Date: Sun, 8 Nov 2020 20:58:51 +0700 Subject: [PATCH 1/7] Implemented About social media component From 9cc7ddf35b2983b0c7e8986c896ac997d3016459 Mon Sep 17 00:00:00 2001 From: bntnam Date: Thu, 12 Nov 2020 17:35:25 +0700 Subject: [PATCH 2/7] Implemented Quotes component --- website/www/site/assets/icons/quote-icon.svg | 22 ++++ website/www/site/assets/scss/_calendar.scss | 2 +- website/www/site/assets/scss/_cards.sass | 69 ------------ .../www/site/assets/scss/_quotes-mobile.scss | 99 ++++++++++++++++++ website/www/site/assets/scss/_quotes.scss | 72 +++++++++++++ website/www/site/assets/scss/_typography.scss | 11 ++ website/www/site/assets/scss/_vars.sass | 1 + website/www/site/assets/scss/main.scss | 5 +- website/www/site/data/en/cards.yaml | 18 ---- website/www/site/data/en/quotes.yaml | 23 ++++ website/www/site/layouts/_default/baseof.html | 4 +- website/www/site/layouts/index.html | 61 +++++------ website/www/site/layouts/partials/head.html | 1 + .../site/layouts/partials/hooks/body-end.html | 2 + .../layouts/partials/quotes/quote-mobile.html | 21 ++++ .../site/layouts/partials/quotes/quote.html | 21 ++++ .../site/static/images/quote-paypal-logo.png | Bin 0 -> 16047 bytes website/www/site/static/js/quotes-slider.js | 30 ++++++ 18 files changed, 339 insertions(+), 123 deletions(-) create mode 100644 website/www/site/assets/icons/quote-icon.svg delete mode 100644 website/www/site/assets/scss/_cards.sass create mode 100644 website/www/site/assets/scss/_quotes-mobile.scss create mode 100644 website/www/site/assets/scss/_quotes.scss delete mode 100644 website/www/site/data/en/cards.yaml create mode 100644 website/www/site/data/en/quotes.yaml create mode 100644 website/www/site/layouts/partials/hooks/body-end.html create mode 100644 website/www/site/layouts/partials/quotes/quote-mobile.html create mode 100644 website/www/site/layouts/partials/quotes/quote.html create mode 100644 website/www/site/static/images/quote-paypal-logo.png create mode 100644 website/www/site/static/js/quotes-slider.js diff --git a/website/www/site/assets/icons/quote-icon.svg b/website/www/site/assets/icons/quote-icon.svg new file mode 100644 index 000000000000..0a32eea254ad --- /dev/null +++ b/website/www/site/assets/icons/quote-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/scss/_calendar.scss b/website/www/site/assets/scss/_calendar.scss index 69e2bf81a291..c78c16081571 100644 --- a/website/www/site/assets/scss/_calendar.scss +++ b/website/www/site/assets/scss/_calendar.scss @@ -209,7 +209,7 @@ min-height: 456px; .calendar-card-small { - max-width: 327px; + width: 327px; height: 216px; padding: 24px 20px; diff --git a/website/www/site/assets/scss/_cards.sass b/website/www/site/assets/scss/_cards.sass deleted file mode 100644 index a1562d0dde1d..000000000000 --- a/website/www/site/assets/scss/_cards.sass +++ /dev/null @@ -1,69 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.cards - background-image: url(../images/cards_bg.svg) - background-size: cover - background-repeat: no-repeat - background-position: top - text-align: center - margin-bottom: $pad*2 - - .cards__title - +type-h2 - color: #fff - padding-top: $pad-md - margin-bottom: $pad - - .cards__body - max-width: 550px - +type-body - margin: 0 auto - - .cards__cards - margin-bottom: $pad*2 - +md - display: flex - justify-content: center - align-items: center - - .cards__cards__card - background: #fff - box-shadow: $box-shadow - max-width: 300px - margin: 0 auto $pad - padding: $pad*1.5 - +md - margin: 0 $pad/2 - - .cards__cards__card__body - margin-bottom: $pad - +type-h3 - - .cards__cards__card__user - display: flex - justify-content: center - align-items: center - - .cards__cards__card__user__icon - border-radius: 100% - background: #efefef - width: 40px - height: 40px - - .cards__cards__card__user__name - margin-left: $pad/2 diff --git a/website/www/site/assets/scss/_quotes-mobile.scss b/website/www/site/assets/scss/_quotes-mobile.scss new file mode 100644 index 000000000000..8a31b13483c8 --- /dev/null +++ b/website/www/site/assets/scss/_quotes-mobile.scss @@ -0,0 +1,99 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import "media"; + +.quotes-mobile { + display: none; + position: relative; + padding: $pad-md $pad-s; + background-color: $color-medium-gray; + + .quotes-mobile-title { + @extend .component-title; + + text-align: center; + border: none; + margin-bottom: 64px; + } + + .keen-slider { + width: 327px; + margin: 0 auto; + border-radius: 16px; + background-color: $color-white; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + + .keen-slider__slide { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + width: 100%; + max-width: 327px; + height: 468px; + padding: 55px 24px 24px 24px; + + .quote-text { + @extend .component-quote; + + margin: 108px 0 20px 0; + } + + img { + width: 172px; + } + } + } + + .dots { + display: none; + padding: 10px 0; + justify-content: center; + margin-top: 46px; + } + + .dot { + border: none; + width: 13px; + height: 13px; + background: $color-smoke; + border-radius: 50%; + margin: 0 5px; + padding: 4px; + cursor: pointer; + } + + .dot:focus { + outline: none; + } + + .dot--active { + background: $color-sun; + } +} + +@media (max-width: $tablet) { + .quotes-mobile { + display: inherit; + + .dots { + display: flex; + } + } +} diff --git a/website/www/site/assets/scss/_quotes.scss b/website/www/site/assets/scss/_quotes.scss new file mode 100644 index 000000000000..aef437d283bf --- /dev/null +++ b/website/www/site/assets/scss/_quotes.scss @@ -0,0 +1,72 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import "media"; + +.quotes { + padding: $pad-l $pad; + background-color: $color-medium-gray; + + .quotes-title { + @extend .component-title; + + text-align: center; + border: none; + } + + .quotes-content { + display: flex; + justify-content: center; + + .quote-card { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + width: 100%; + max-width: 381px; + height: 474px; + margin: 86px 36px 0 0; + padding: 55px 20px 24px 20px; + border-radius: 16px; + background-color: $color-white; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + margin-right: 36px; + + .quote-text { + @extend .component-quote; + + margin: 108px 0 20px 0; + } + + img { + width: 172px; + } + } + + :last-child { + margin-right: 0; + } + } +} + +@media (max-width: $tablet) { + .quotes { + display: none; + } +} diff --git a/website/www/site/assets/scss/_typography.scss b/website/www/site/assets/scss/_typography.scss index 99eacfe4ca04..9f66f800f12e 100644 --- a/website/www/site/assets/scss/_typography.scss +++ b/website/www/site/assets/scss/_typography.scss @@ -88,6 +88,17 @@ color: $color-smoke; } +.component-quote { + font-size: 20px; + font-weight: normal; + font-stretch: normal; + font-style: italic; + line-height: 1.44; + letter-spacing: 0.43px; + text-align: center; + color: $color-gray; +} + @media (max-width: $tablet) { .component-title { font-size: 28px; diff --git a/website/www/site/assets/scss/_vars.sass b/website/www/site/assets/scss/_vars.sass index df4276a042b1..24cfaee94731 100644 --- a/website/www/site/assets/scss/_vars.sass +++ b/website/www/site/assets/scss/_vars.sass @@ -24,6 +24,7 @@ $color-gray: #333333 $color-smoke: #8C8B8E $color-sun: #F26628 $color-silver: #C4C4C4 +$color-medium-gray: #FBFBFB $pad-sm: 15px $pad-s: 24px diff --git a/website/www/site/assets/scss/main.scss b/website/www/site/assets/scss/main.scss index e4075a1fe51a..19052457b297 100644 --- a/website/www/site/assets/scss/main.scss +++ b/website/www/site/assets/scss/main.scss @@ -31,7 +31,6 @@ @import "_button.sass"; // Modules. -@import "_cards.sass"; @import "_ctas.sass"; @import "_footer.sass"; @import "_graphic.sass"; @@ -42,4 +41,6 @@ @import "_section-nav.sass"; @import "_page-nav.sass"; @import "_table-wrapper.sass"; -@import "_calendar.scss"; \ No newline at end of file +@import "_calendar.scss"; +@import "_quotes.scss"; +@import "_quotes-mobile.scss"; \ No newline at end of file diff --git a/website/www/site/data/en/cards.yaml b/website/www/site/data/en/cards.yaml deleted file mode 100644 index a2981e7fba86..000000000000 --- a/website/www/site/data/en/cards.yaml +++ /dev/null @@ -1,18 +0,0 @@ -# Licensed under the Apache License, Version 2.0 (the "License"); -# you may not use this file except in compliance with the License. -# You may obtain a copy of the License at -# -# http://www.apache.org/licenses/LICENSE-2.0 -# -# Unless required by applicable law or agreed to in writing, software -# distributed under the License is distributed on an "AS IS" BASIS, -# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -# See the License for the specific language governing permissions and -# limitations under the License. - -- quote: "A framework that delivers the flexibility and advanced functionality our customers need." - name: –Talend -- quote: "Apache Beam has powerful semantics that solve real-world challenges of stream processing." - name: –PayPal -- quote: "Apache Beam represents a principled approach for analyzing data streams." - name: –data Artisans diff --git a/website/www/site/data/en/quotes.yaml b/website/www/site/data/en/quotes.yaml new file mode 100644 index 000000000000..537171a7d4c2 --- /dev/null +++ b/website/www/site/data/en/quotes.yaml @@ -0,0 +1,23 @@ +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +# TODO: +# Placeholder texts should be updated later +- text: A framework that delivers the flexibility and advanced functionality our customers need. + icon: icons/quote-icon.svg + logoUrl: images/quote-paypal-logo.png +- text: A framework that delivers the flexibility and advanced functionality our customers need. + icon: icons/quote-icon.svg + logoUrl: images/quote-paypal-logo.png +- text: A framework that delivers the flexibility and advanced functionality our customers need. + icon: icons/quote-icon.svg + logoUrl: images/quote-paypal-logo.png \ No newline at end of file diff --git a/website/www/site/layouts/_default/baseof.html b/website/www/site/layouts/_default/baseof.html index 6c245c51ac9f..b8b6e26cdfd9 100644 --- a/website/www/site/layouts/_default/baseof.html +++ b/website/www/site/layouts/_default/baseof.html @@ -22,10 +22,12 @@ {{ block "pillars-section" . }}{{ end }} {{ block "graphic-section" . }}{{ end }} {{ block "calendar-section" . }}{{ end }} + {{ block "quotes-section" . }}{{ end }} + {{ block "quotes-mobile-section" . }}{{ end }} {{ block "logos-section" . }}{{ end }} - {{ block "cards-section" . }}{{ end }} {{ block "ctas-section" . }}{{ end }} {{ partial "footer.html" . }} + {{ partial "hooks/body-end.html"}} diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html index bbfdf71b9132..66ada95b9c55 100644 --- a/website/www/site/layouts/index.html +++ b/website/www/site/layouts/index.html @@ -154,6 +154,35 @@

{{ end }} +{{ define "quotes-section" }} +
+
+ They tried it out +
+
+ {{ $data := index $.Site.Data .Site.Language.Lang }} + {{ range $quote := $data.quotes }} + {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text "logoUrl" $quote.logoUrl) }} + {{ end }} +
+
+{{ end }} + +{{ define "quotes-mobile-section" }} +
+
+ They tried it out +
+
+ {{ $data := index $.Site.Data .Site.Language.Lang }} + {{ range $quote := $data.quotes }} + {{ partial "quotes/quote-mobile.html" (dict "icon" $quote.icon "text" $quote.text "logoUrl" $quote.logoUrl) }} + {{ end }} +
+
+
+{{ end }} + {{ define "logos-section" }}
@@ -169,38 +198,6 @@

{{ end }} -{{ define "cards-section" }} -
-
-
- {{ T "home-cards-title" }} -
-
- {{ $data := index $.Site.Data .Site.Language.Lang }} - {{ range $card := $data.cards }} -
-
- {{ $card.quote }} -
-
- {{/* TODO: Implement icons (Original comment from Jekyll) -
-
- */}} -
- {{ $card.name }} -
-
-
- {{ end }} -
-
- {{ T "home-cards-body" }} {{ T "home-contribute" }} {{ T "home-section" }}. -
-
-
-{{ end }} - {{ define "ctas-section" }}
diff --git a/website/www/site/layouts/partials/head.html b/website/www/site/layouts/partials/head.html index b3773320be6d..0720370d24c3 100644 --- a/website/www/site/layouts/partials/head.html +++ b/website/www/site/layouts/partials/head.html @@ -45,6 +45,7 @@ + + diff --git a/website/www/site/layouts/partials/quotes/quote-mobile.html b/website/www/site/layouts/partials/quotes/quote-mobile.html new file mode 100644 index 000000000000..756fe3be39cb --- /dev/null +++ b/website/www/site/layouts/partials/quotes/quote-mobile.html @@ -0,0 +1,21 @@ +{{/* + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. +*/}} + +
+
+ {{ with resources.Get .icon }} + {{ .Content | safeHTML }} + {{ end }} +
+
{{ .text | markdownify }}
+ Quote Logo +
\ No newline at end of file diff --git a/website/www/site/layouts/partials/quotes/quote.html b/website/www/site/layouts/partials/quotes/quote.html new file mode 100644 index 000000000000..45f7ccdd34cf --- /dev/null +++ b/website/www/site/layouts/partials/quotes/quote.html @@ -0,0 +1,21 @@ +{{/* + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. +*/}} + +
+
+ {{ with resources.Get .icon }} + {{ .Content | safeHTML }} + {{ end }} +
+
{{ .text | markdownify }}
+ Quote Logo +
\ No newline at end of file diff --git a/website/www/site/static/images/quote-paypal-logo.png b/website/www/site/static/images/quote-paypal-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..0bf48f2bfd81a23fc81585f0ab0b53d9d8d20acf GIT binary patch literal 16047 zcmeHOWmj8Wl*Tg0#i$n|`rm!}HqGC;`!(9x6Pu@bR&2b_dAfq(GgK-h@3%t;|E!5maWgsdov zG7@qTQA6+K;gKzVJEsY}ymq$Q6!E0ZY-Ie{eVaQx;M#L3sjOVAw>|r#-;YKef-CX= zH~$x|!SrTo*Z^1k{EgC#%AJ7EjLY2zi3l%74uFCNgtsu@>IlShAaGES@KxzPBYG+Y zjatfpL~S2wow5`qbO5apVr>_7I2k9&Q##}Xo_ZcTsH&Q0;EVPcJ@ewkUR9kS12JOXwE&BTo$A2Z|`a(B2bE{u?hk`;f@_bZ6k3tH3w(9 zzmwqI|86yh8iu{}TH&&W>6ivsdst@UN^oZw1wtOfth+s^Y3EoKyIW~Q-;katB?qws zl{6(Z(WY{^LsW*QtV3R6plw#}ZOHgmD{{6tpuP1g97B(dP$zU9YAH!I8QVQ9%JYE6w_?ZkAFV_!1F$ zR=Dtby1Ig+btYpI)+_)1{SzbNvQQ+X3Bd(?sYc+%{j+a^!%?AkbamXcKn{s^S|g?o zVF=1YK90bnS(MRNno_} zyR8rJ7pz_?H~nf8X+GFb^2{lhlO$Cqy9NLPex2Mq82Qr*2=O*ReXPH>2|k7Wt-4y^ z;>@gL(4OM6U*2EwI;sG?zE*X%52d zSZzxtQ;}%^C;gL!&G&R(JKof}Kt8u)?eYGj4)c*D&Y6HZyCq&Ui`8n=ftzn4H@_qK zcR!~f*;0d0mR;#M5nKr+yfr54}An_FJPh z8YxKkUn|smR^PfCd&cCkc)fA!zgn8E0}%x`a>YOE7u;!URI&ovypRl~-ZvyR4IlvD z)Xk=zXk?;1&a%8uH|})F^HL$MfAwlDqCL;MQSZKNd9l7yS|AehK<$X;iSHHzUQC|F zP@iz7&O1868$GnRb;ciG0Z0`i6NL)NY2g%JR!CU~CZP5!5z-wblAIl=l6C`V!FJxj zyCVAxYQn9JL&(O)#I!UHB7X;=`ehUx^o|*Mh5%~a-mR&tOM(UzvUAfhH{bD^sX-4R zy|i(+S^|ojSbZAw=w12LMu$0W;j>tT1L!e(T1xOiKjF?;s5IF(0bBv zr275)jp?(ujA=Q=X3$(PSwnQwK>t`epVsZ^%2Te`+rvbs=*#uYJm(iRTSM}{KUv>m z{h#y0A6@7U|LNR!+I4h&*Q9a?8}+D?jiqo{1NQ>-6te_XtRe|Lpi{m%;FIr)O#Oe= zAofs5u1ptiUsw?FG7d6b)7|6Ek?*lDH&HrU(|Qm#1Gk;-AN>UxHm;M!`mKV9lZs3I zO&<1Bza~GuW2+#Bfjx&@@yCJOaEeEUQG9O-*ICt*C>cF&MjyWYEVYuGzXLSYQ;OR> zJ-bE=hXKCsZEyOJm4K|HbljTaO`*BOc+Jz`3qhCtbr#*a62z=vTXeOHC~u14*6)J} zp~*m}q1`5wA{BU27XWql(!*ee}9uA$dz1MbVx{GC>%+ldLe_Eca(35>S!u2^d z^|vX1cJG-(uG({-wQ~RKMqjruV*JL!S3!`R&7@Vy4f}NS`{^86`%O{`8}1R+H%$re z=&?JK5Y*O^cF38U;*oi{49|}f9`p}c_A4zM32%te1DVj6uz-uczuX)K zc3n=K7@n>?t7~#cAbce_CY}uDa_5Zo-n%KY#DTdRwWn0q9f{clXQSk^McsPs7_=Nj zoc0BH50scdckC6ri0e5f@bMoUvFAxHj%dAZIt1mozOlzNFcwG^p@9}n3&WG>TuYs?lkwJL(O#GHZ3l~^hA#VXN|XB zvPp`j+iCEkbkJeRp{b6G&zvD;mkXfUVcYjlFp3*R& zb}MrEZ3yMC?^UYes%u-7=acI}pD(KGoI~Y-8nk;&MecWCybE!$!wK{*MQ`0^>DHqt zu$?JVdij-Q)UT6TBz@hbnXD$*;GPi2Cpkj)iwWFUPy4m0TuX@ami_qg2zb5$IAI zuA#S)ej7hdH}V3N#1_~lmC*&|8`n!$Qf)?)@cg`;n5Fypr2LRocG8d-P|vo~*lAw+ z%Ra?`l7Vq;$6Q(Ppg^;>Av3-FVm%nAMs{!`=DOK~V?dpv{IC6n=U%2(;-@zZ3h98k zghlnWFff>hPZ5#ZX$ICH)9?VQ_fa0JTXf&DmQ66Q4UU!Fvj1?dH(?x8^xl30ecODa zZ`!yLgZN`SrFx7{RIeHJd`(6!$|ZPc>O{vZ{tyfLw7nyt#-*TP& zDpPEz{pFe8&y+YN=tT0lQ}`ojX4A{t+bP>D86@8&y#8{i)p@z@pDUa{vl>k`h?@Ci z3o$g2#r-?nDM3flwExzgE1j7Bu|9Ek&H$Zft~(f&)Ws3OnDoR^Pl)F3NmEnPjn5eV zI&BKLe%e}#Zf7L_0il72z#~>Eo%cl6v_I-#HeWXO5Y}fbC!F z3p{pK1d;w18a=7(I?X^5cyly=)eex>v9tB2bfn>5ZoPlE4VpNmd8V zPu7>U*A;c+>1;ENervHc)n%@Dk@Vs93tFZdJ3ffFA|h7wF+wCrbidDy$5=SN$+4Yz zZzS$pqIISIq+%r^Hh+%DyBW$K`-k>67zNG9%*Zx6I;mntU2uezkW=dCEd7#Iem8cE z$)BHE6=)<;wNN!8$QA7#FDXID?9;D!uVZ5=9Kp4-hk8QMYyPhH8{rdqcIbNbBDb@?}Y^`i}yl{$X4G zp;f5R?3uYUR^Hh?PE*|hEHUhzTh39K zXu~l%FCy@>J;%a4-fNP;^9ac8^Z)67^#^?nx3s-yZd{8YqtZ&H+xFDFcSoKkrmMzd zMv2dLf1#FsfSf)?sD3Bdb1*<8J*Rtj?3?oYJ-^rI2iq)<%^$^%Ri;V|F4H|!U-W=# zGg)S&@DqUh*jE{rYK}3-wmXr#<(U|+rZ(_KK+`i8SrEUy=qTfnA_j(&%sNVDNq5@E z3%#ySh_KD9!}qBuPCdhCvNClHar{*zqCGs~PK=UuQx!StK_PFgZ^iU*w)Edz!LL7H z*%%#CB}+2UWM%v9;=AjJ4E1hVWYgp_3ukNTyNbWcI^(v43eb0yx$u>$XgX&{u19mx z06bINCdN$1rn?@eOIlFXcL*O{$G4PGek?HWF!V#h#zGt&My5t!y!ILOq)3N<%1TMw zJwv`;yT2BS2N2kX$k+1Gek2+D8c0lB#x-!A4nh4;W)-MJmM1N+UJO1bR09(QyBKP8 z4f!>tfp`@>kQ%hHnx@I<5G+2(0?2&MySc9&wwC`mGl%o2dSn1d|CvUw{OQO2glkO^ zi{QvJ-G>m@81Lv)hHf|^7B{hlf=$+BbGbeA5B&};%nwFn#Kn3=>^Y2g6#opi(b=gd zD`tzn+})Bqoc31tuU-sLp209u6~33`4u2JW$B{ma6`@)X@nLhEI>2qxvmvjo!E z3m{1)E_nTx)YUWW*s5V52IQ&MIto1Q=POY7UaRgpkG)Jm9z0J|oqK=Sx1R9gEFN{- zpR##W^(tYY62|Ba=Y|m)cx==)IUULNP_4SJ`L=FBEtRaaz75m3XXCK7?B}g)Rh|U} z*H*%6%#ECCuyxBBN4eD!gn#V)o3l+H&08w*-WRVIF>g;Zu%!iELO^RzVET8UU5v4p zecMIC(`Q-U=z>_+|b_Hg`JC^Qh zwuuY@=U_$zL1_xV`;Bpr*ErZtO%d=@-+7J0v>)`3fm&bj8OW`xegq8rsigDu4SDAE zePumowAz=#@Tq6&!G>OeLPk_+)FKHo!R&B#nhH|mVRQ$y`RU6`r;Z~BDzUpB_YB%* z%)>b&*7*?chQ3w6)22MB<7x8!D@}o&g|u{EWYg=?T-$)R>&bNC2>iX6!ziwvf2Rra z($$2RKNGQ9Gg7RTd=i_#yqb*$0U2eC3Wn@NralQ2qQaCr;D$Y139r zGqq$`!L$LWUsD{7+Y5buH>)9lEq4+wHGAi zIec4dPl_8bu=~;wn>BOLv`X8=JWwOU#i!ftxuhn1W+`_^^xT<*uoJ~KexB`fDZhv* zRNS09HXeE$sFcQCTGxSxf`7Zi}N*MtsXf$9-r{r3wMYG^{y&vzm~kr2}dSV zu0~Gyez<*WUh{jJg6G4{mR+=UoK`sVY7q4!3bMD)XJ}+ zlMUy#hIlHVTISi!V#>a|R}qB@nc!x-G3si~GeDBh;XA?j0BD42df||9PY8Nz4~GkB z*3llcU*}3js7kY@-~N_J@CI9kyaR7ZRZHLX{rf->MTQa`wuS{o{@$pk+{u)u*7G3c z^WK8)lu6M3h*C|*AZ2He%AO5M>1ar5CQuFwmG8{xXMq5>HpVqyc`to_4)hpj*=biQNW5j71>13lab_FANsymVNL0jrsg6szxW8Ex-|MQ z;)!)OvHDfa)rKM!!G3F@+!^nIr9s!HFUD`#bXZ*bmFa9N%D9SNr_Fo3+VnWGzg%ke zit!-NnR_f@MuzFz>v>;z<_ePWMvPBWP8N)~Z&w2+Uylsmyb%0a zQQxvGdN#}pZ(CAVJ4M1tc@`KJR=_gTb&gJK2Ww6dAxU3R7}t(GSTT;f{w48_RM-QI%`2R3jLx;r={C2MY}hen zRs{t7tk@=3r%=}EX-agNq`l$4_hxKaBcP&x%0*;RdH`dWrk-Z?V-RqgNp57cpw72U zhUhoNw;+6?Q8rQ;^ud3>s}1}txKP*;o%&_s3?W4;NEN$HBtsemwpQ?NS5CXc@B@bP z_V_B@qRgEw)-#1u>;GJeQaU8oPC#lTytweg)^EKWW_q!$Y!1su^P&RGHcT_)^}0AI zRfI~0W3Ld*R}`MVuHJQM1wD3Otjcb_owWZJ;aU3r_zPhaxujSCk;FnT1<9(X8F`+> zS^~iRSsOEOk7HfPu947b;nQ7vwm%ZQ5(_W~>{y37Y`{DWH}cLKNq$9V?Y2p*FjJ6m zvVo=yC0$bCZ=qyZQ#dE`w8kP67e34H&ZpDXnNrmrV`4he%CZ-fH*RNsUS9Cag<`4J z#f=2caZ3sunK=CRG#hRuh~J^->h%2si@(Wpn!r)p0G8hX>n@DX%v)>^#(A#`*|4l# z^}vx7N~6sQ#u6x+n-Sjnluae~lZ|5ZO`&1tr@bF`#E!|}k=tUrcNgE*xfEeKlRxp~ zuDhJYHn0gDd~$<9WPbR)ESoAkdSGxSI?vJ4`np#(HcgDn#&2a8=ThXEx;VE_m^^oV zkaqjhGY>xC>2GyqM(JQE^6a18^VKk zJNk}vbr8>2NId7MCu@TPJ&-GcAk6X+1JI>KH;uScql%jZWHCgf)}|<6As7XKkwN9yTYcFTR85R*PVy$tB~lrO zW|1J?h26m0!o4tIy8H3OcEh9O8(QKQ?K;^)a)|wkAjUr~#}$XPYbK;tJk*Jea{>A+ z50e9!z$%Ouw81dSx2YShTftMoRlS>LVH@q8zU`5#G*=L^#noBvtQ1`7j!uFgXtCPQ z+Z8*c@g&0YP0*i+2Nb5@){)NXiwh)km3%shbv(sQr=&wEGA53B3O;#13(QVHIwx)Y zYmNF=8()oDyLsArW{*gnDapot9~e`<6)TpdFi{u!kV87$&B{P8E3uz(6524r9k=C^ zZV;228CH4qS+ExNrVc0I9+{6jv7hC<&`3~}Dt$4bH9>>mS|tD9&FO=1COPN8o`=0` z|5p@srh$^s$DN&>I&U1M&!+|+`DB?f&tes1gP)C3jZm(0{uuraF5^HdZ>7V)5vdpL z#pz*Q@0C~CB;3`wvXg!#LJp&F+A@bI@Ul~IV})sK5iCG|*>rc`iaQ>Ip(o?w;(vm| zboox~R7!{A3|)v$f=yASCZc-<(7zy8av)0-yo)AAjZNP2+uPv7IGpD0sgF5SIkWVR zB9zzr!`p>JlUpH6LOAyV(1$K_O$c*Q0xr^qZqAa7Upc_PwX94GcGe(N%gqMc80-FtJ)@ywXVi>cD$EL~2EQ6k>)@EPXq(3qk+ z-7>>;Ku2xq{Cru20n=2h2{OBE)94*db@9VPW$WoC=7!Lj?dHt>@apH^C&)Txa@6YP z!714WP6XL){Ki_}j1m?1p73OetNLQA(p_Ax_L=zNd`{UoZ3_DtM#X9xD+>j!WK9A>&gVUSaxIsKgKFNAh`o#QUUP z>mTgjUn(-}^mF+&6_##Oh{>dpLD=%{%^77O`CbuKL$*vGvgtr*{b@$jTM3MfCNM8j z9;mP5V#+50ZjTh+6e$(n{?`C9?bgxo?&_Y#-(#zAkX9|iBT*juPcT(OtD-so$6r9r zD@Z&u%o(-Pd485%td!nB<+QebH^SOl&T=~PpBHgWgckws8-HC$^ zw~~7|8#uc7;x#$Ld0e0wmBJ$+W+2j62%WL-=2>pS7+{xie}`|gLdR^F;lqjWbfUCB zI-Gi3q?9JRdx>aQ+(t<+{Kfh1I4D|P1i`ZL!%Z@r$X*E+NF2*e}%VXneEH)%yw;?TqECNFpd%X0DXJ^ zCKf(nD9)hTq?!9p1@SZpLuO!=!vlwGRsFP>&8HG`M7v30tif|VKXP=#i}FjaIa28c z<1i*NFTFfg_5AWJTtLl%q<3Navl`Gj=ZW!5y7w6vdtxAbc61BPX?t)x7uCY6rZ~eU z{!E#e!>|~6Zc{mGMRljt-!XEGt2H!(j3EkU;)>1*XuYOyY=!4I18Lw zo}=nuaZj`MY3w>oWdr;H^uLwL32t4xBU=M#OjV@afa02;G9Ey&I zinOQ2wAIy6MFzOeur_|1;`tF8l!)-I!hl_g2U8fwrUk$9narcSQNFys{=*bnlRbQ} z>cn__X>z}t8~s{RfcDZd6vfBXuK`B{HosV_XjjwRGT z%yxD(-pQ0PZcpL-DWm;v^~u%hoGlfc<3GFEqe3XtHvE!3g@KL#G^=2$^~*CD*^zl9_xXqP9f=yp6>5_5~$EXlH+S@Jpx*}mz5P~{A^fJ$|vnrl<{M!Dg|l;?Z45p z4=@YvTCT>0&bA!4`V*J^o=$+5SpblG0`qf5&p9^9j)KvnN225uq^i1EX6>y&J^^a= zUHs|UWb^Nj;_kRd?o(d~z7HLIhrbo{z2+5w1XTzaY3^D~08r##YiW7(b+_mCbu_Cn zhq8Oty%B)I&CHEGzAVZSr)G8=)Y!L$Ia>)hi^n0~VzOPiE~C`BG+EzbOFWrZtaWa+Ge$xL#5eV%gulufMki zvJHOf9ip1oF4k;!ji)h&upkBl?af;lp@6I|dC%C~!2Y?^!!|8mMb zZklp!Va5Bio#OqMHov!*yVg}>QCaxbTY+1w%C^g4z&`w1#F=JOL28Pbp3<9h8YItD z>#S)D`&DM?O2s|hXC5tK-Oj0+_ZZx%VODLb0y!~xW0Om-T`a@dAo(pqPlUNb5**=n z&xtjkGHr6H=b?B9KVzh_SQ(^`^?iIQ zKkU1-8Yw)t;}r6&gCS&LFRXr}ShU_O_K8j7QW=u)sam!}&H(4@DOvAHeu12qEq-w; zrVm^;0>i*ijtlh+0U^}z&Vbmma-(sf;~s;oEg@NPuEQ>QGTh2lJXx~t)jnbci98+xQg4(>i||s!6>T=sRu<+j`p`3`n#ymR)k%&M{LKMF6a9*La6w zR@Ysr?J|6KWWDkX<}39VsHTmHNcDQ=Q2l@bGT{95(xfECqtf7wqKMNU?;(Mv!*z;H zSZ6jM{J4h%|NCA_wO$)^gruUl({dw&VaF!bu^A>f{3O8cfL;?e^3lV7)*CwSOyQIf zlni3;&D%ax02lzv&6eT*CRKv>94W}naXz#)5BlY3?)D0gO7@EYnS~v{YpDOGWHmB_ zGM#|T8y88LFb(||&gyU?(}MIXd;^92=ORMZWaXK@Y?X`72%!(U6vcyX5IUkpMRk(A zd?hsp-V^(Y4Lkpy0cYdsR^p-n_lwtsb(EmJ!?LO($e}4=n_`;5m~+$Y@Cd|Piy*HJ z2m?$o`T45s*IEXD4acbgosaB44_WcoOF!kvEOuiAN{5uO32uq3Evx2_QgjQ6UIg&R zMP#fTqjc=0&)cDkOiYFImvvg$B*n#d{u^!0JIl@!`Y~g5xJ?YC!9~~ODR-yPzd@k% zgJ@0gSl=EWc*63TeRN69Wv?;CuKtTZjFWY|hv>(j8Y7>FGss3prUJsR^ta+%*hHVn z%4n-M_e8?CK2CXnC}37w>*3qL-z|f#*TMW;(}5Uss+`>WH?e2%M~Pz(wX%b%g55{h zY8MrKG#%+c#46<}hvq-X=sO5SvCpd70vz5vF`h0=x}k5+7T~&F3_TkmAx(q=#ej zI&y)oL-CJwpj%a5UJ!DVu+sdb<~jiSt^d^>T2+wAfsMhUkpf`wP{{T=WNbXH!B@Mf zROzy>M$fcoE{Tf8 zQ$4;EG=Po4Wmtg5$XE*_cRY^FoI_$opjhXc6fuz0bddSKtgs9S*ED_I4pH39m+OK2eA!2jx-_-RWK`0DsfeeIE?9xl%Wiyod zUsD?z;H|zp>0**Pi^Z`HW0N{Ay#?zkSMja{GA)-p5A`BNol#ci4#CAwOZS6;`-0BM zt0T`L{D_)HsJg;PmlYGjSBfTZ?gnRkoeuyr@k)HrVtw-=)d$IuYU? zICkC=yjpNNNApyj|7R&_pANj=XGfsxO#9q8Sy|pq@ zfV5X3vvoOMJwTy{Kw4e4SGwA%@57nA9bodv+PwX)zc#0r&Cw;2CHaIJRq)==*d#=m zmDMujhzw+tZB1GpmHY6Mt}+b|iCHp3Vj`4AiT{`b0CWnESsDE?zPX(jOskDLOb|ec zJvF?bqa}^WQRUWRl|j#K+3GaDVCpL-8oiYf>Wtdaiml^Pyv{{a8*UlLZ^}`924R^v47?hO)@JDAW{1nC!XLzU z?=vI~7bbp8^y7xHb=-fvI(6-*LsR~mgaouPGm8gDqrLpVO-eY~`^#Oe@H|AH4Yp&B z;d1S^iVxvWOmTHV61kp~1h$rQtcul3$ZTy|p*P-J#LH$EH5m-_OL5^l1Ljx#hec#@&q-!?jqi$T2%`?ZSzG90agBI!YovOgS|gP!zyXd=d^^vH zsp}RTnd)vZ-fhiWJ;PT+qb#iE?8PpuulJ`n%G|_ zO4`-dGur1)bs%Z1Mymwal?x7S5CjI9_#cNa-Pavp{q&eWhS7ul+*t#^u(#&puNnQv zSx=bUoOO;x*vTHF90L%a@or}&F2>7=+E2iF^r}6_mGs=WBDW;)SIbVnm&Nrq>IT$= z-At5K|D)<}q9v?PMUDlW`n^=kx4C?x6=dL^o6ShJqRe}vXaCS2jjlq} z;$nZv{M=|hFhI4+wYw=EVs4-R)+nTN92$ui^=c?rs^-f~b#U^V6V|^*LR}}C;S4x- z1Lcg3a{!GYBbs2VF!XRRB!ER`;~8nm+bUEvG{J5MMrRsZ{NG*!^{Z(yHP;<~vbN1; z{(AKzCgH2}k)N>s%u=etpC5BIU>v@(u89!c{UZAA{jmx(QLM+=P8s9Da^CgwwCzfn z@>Uc@TNM8RSE!#mzT?~BvXE$?0fg>5_D*IDQKbu*Q;Eu2dF(D2zp`mg7(+`)oaV;c zIPIKl7B?JvM4LLF;b6?#a+VI;sitLE5FOfYG~ZuFy15DtE)I~}W(K#%;k=>7aJM~{ z8s2aG?5wtUhcO??+A`=5^9cmzZdvhVI=|9PHUl3t)y*D6cSq69PTBpEKZ&}yZPEX=xuxMcJa%Ny07bQDWqpT_1V-0j0xc>W2F}w#{c8+sEY@nxQyWjHM zb7~?V73~a%Gp}p;cZ}RDr;A(OeA2kqQLa^GAnADTNXLx0R0#egqXUVnhzf0|KD8Xr zke6LrCs<@!Tl`~s=Xb%HZMtWu62xSD1x^#z(t&oL@3s$ZOMHS z%|F1Mo7wzstT6Iu(I0gW^6vYlzzPzQmph||kTjBo=8Oh%$mnPFFBFrC=i3S29w&3w zWYbcTMU>o9-s+Y(PJ0Lv@H*X6iEtWbPn3wp#HP0FBvPv}qW>l<_P^#|-9LT!6-V@2cnc;o~a* z7u){8ojROgY} z9(~iF5H$LgH%L;Ems7y~C)K2p(TvHbKj9#Axk45%YTAbG!Ut1^1`&v=?M6>f_dBLj zexWwj3c6v_PF+~PNJ{zVf?ov>FM@ezLDc&P>&~sVK80{1Z~3hc#c2p=P%1U)5U6mn z{x4=Frrk9q^L2A@nl4)N+ws#y?)z!gn{xCK{Ur0mWjV?$NlL_UgA?m;qZ>}WDyj6Z zO%L_zhVyxjKq>Rl!he-6J*Fr!q-VnOj@D%XMh2=@gVR!$@O9(kyyB&E+JEjodZ1sA zJJAM7)M=?N@$4Q}UbS1Kl}utmuqL^;jveHcE7#p)(!hqP{R5UjLl;8I?!Dv}ux}N! z>Z~nN1^S5TkN1Cg-ZSO(75N?T|BfWK=SA)b+q#)Iv^1+AF8R$gy|`Asl4zZUgWvbf zSd#TGH|`hOyz=s>d6KM4g5>Ynt%XX8G`&yJq8K>j?-9Q3T8pZ0uKoPoeve#U>4q1`2z%=^+PBQh- zq2l$SJzhm3$#nSrD6XqD%G-=;JzT>hiz|YOCBl48*ek|o;`S+8zemUP>k`9T7^fWP zS|HrVTrVq<2k7e>IPCGqy6c0^&lMHY34SUS`;YO=gQE_m3a;30Uo^~Bi#|^5t@^rL z8wTitB$CY6>9$|+eH`da+tw;r zHHC5`@O3)=@>KQnRCVno((USNFLe1-<(zPPiO49Hm6soz1Z&c=_)?;2XJ{RaVuk*) z3N}v>K7LxPG!zetcEbr{6a|rAWW;%Z*TUv7Yng(uhI!rd$^Mp$KhbTmT5%MB@Zz1cg-R@}&+V%xy z7}cAS+TqGrrv#R^5mDlsGstTt4HK|H;jeUl{4`^WR8a zL~T zLA84cs#IyUG-f|s+luGAhUM4+DO6T;`y|c!zKKlG{87KKucDnQsDuLwr}gs&h3vM` z((xU!(UD4YJM>Jvc5D7YriacmaO`OOpZR(2>sh^@g`rQiF>P4h_j{TNwrX4?qzkYB z9f?b+=Nsw8zpCou=0Be=?T>ul=-#pYr5NDojg^2H05bob5!$59oCiIm`ud&yH*;8 zg6Ca`dwBt(sMMa!({2p$(2+<7bK-IEhX!l@H%H(RIgknMV7}J!o9G0MeNSZen&RKn zXM9MepW6P{E?^U`gcITN5$L%!IGJoP^eoiisgwH6uK6xNugQFj0|o7*Os zJYopJ%Ut`@sN(LoP*a>ri>~ULg!30FwAIH|mXW>>m9Ib7vRh$`F`t9-8RjT|GDA;Qp*uN{{ajjOs2HFP99SO59>`VAl*_kuTW{L1)6x(zav9An8l`049)+p6~6 z<9a|3URXUZeg$R|mrX=VD}E~w)OY~u>jQ+By~ zZ#3dTOW47oz!;*E23~vCAbxs$XeYS_M4PG}kl;%zsgK;$esGhTN8|qggh`~g;aTWXz+X;~v9oY;g*rNAF ztOL)aJ_Ri7>dBGB(Ze<7Fh?i75tidS3sST;j0mXT^WiZ08=;R4%S~CZ2#-nWKDjGt zRU>a?U{84<_RnJE?mIWHT}2nW&VS9L+QU#nWGJ(Ph@qOFV*4c;xx4BQ3E&Fvpw?^CDYbQyQxDTx7}3B)3DKpALv}nW%|q>j7E#n zg!>2kZY4F;RBMEQB7-4SEB9wzdK$_4elgkcfa;1B=P zp##2a-z|QOY0SsqfBztgwtFBGLBO4ca)e-#Pc?(yRjI*l!M@e+{NYP)N{!FMWi%@| z7`M*}rfzIg0R<9D+M}V;8_lc}{V;(=C5gT_h;)Ctc+WN8~6D8e^MtoufwWOjy@cl!$O_gyet16AO(e=&j8Ra zC!LR}?bb(h?bi46J+k!(jExRDHUr02-$lbGqlm#`q3@3V*J-a+=YOlPAoD35Yt yiH@sIh^{$>WX72NIrjf2g#XV>Nl&3Y`}<&}R#gQ@|Ax(%!^ul4OI1o31^o}L|JGyx literal 0 HcmV?d00001 diff --git a/website/www/site/static/js/quotes-slider.js b/website/www/site/static/js/quotes-slider.js new file mode 100644 index 000000000000..b352b079342c --- /dev/null +++ b/website/www/site/static/js/quotes-slider.js @@ -0,0 +1,30 @@ +var slider = new KeenSlider("#my-keen-slider", { + loop: true, + created: function (instance) { + var dots_wrapper = document.getElementById("dots"); + var slides = document.querySelectorAll(".keen-slider__slide"); + slides.forEach(function (t, idx) { + var dot = document.createElement("button"); + dot.classList.add("dot"); + dots_wrapper.appendChild(dot); + dot.addEventListener("click", function () { + instance.moveToSlide(idx); + }); + }); + updateClasses(instance); + }, + slideChanged(instance) { + updateClasses(instance); + } +}); + +function updateClasses(instance) { + var slide = instance.details().relativeSlide; + + var dots = document.querySelectorAll(".dot"); + dots.forEach(function (dot, idx) { + idx === slide + ? dot.classList.add("dot--active") + : dot.classList.remove("dot--active"); + }); +} \ No newline at end of file From d018e7b32f992d7f149e68077c79c73292a6e253 Mon Sep 17 00:00:00 2001 From: bntnam Date: Thu, 26 Nov 2020 15:57:06 +0700 Subject: [PATCH 3/7] Implemented Hero component --- .../site/assets/icons/install-button-icon.svg | 22 +++ website/www/site/assets/scss/_graphic.sass | 2 + .../www/site/assets/scss/_hero-mobile.scss | 62 +++++++ website/www/site/assets/scss/_hero.sass | 156 ------------------ website/www/site/assets/scss/_hero.scss | 128 ++++++++++++++ website/www/site/assets/scss/_typography.scss | 36 +++- website/www/site/assets/scss/main.scss | 3 +- website/www/site/i18n/home/en.yaml | 4 - website/www/site/i18n/home/hero/en.yaml | 20 +++ website/www/site/layouts/index.html | 54 ++---- .../site/layouts/partials/hooks/body-end.html | 3 + .../www/site/static/js/hero/hero-desktop.js | 7 + .../www/site/static/js/hero/hero-desktop.json | 1 + .../www/site/static/js/hero/hero-mobile.js | 7 + .../www/site/static/js/hero/hero-mobile.json | 1 + .../site/static/js/hero/lottie-light.min.js | 15 ++ 16 files changed, 316 insertions(+), 205 deletions(-) create mode 100644 website/www/site/assets/icons/install-button-icon.svg create mode 100644 website/www/site/assets/scss/_hero-mobile.scss delete mode 100644 website/www/site/assets/scss/_hero.sass create mode 100644 website/www/site/assets/scss/_hero.scss create mode 100644 website/www/site/i18n/home/hero/en.yaml create mode 100644 website/www/site/static/js/hero/hero-desktop.js create mode 100644 website/www/site/static/js/hero/hero-desktop.json create mode 100644 website/www/site/static/js/hero/hero-mobile.js create mode 100644 website/www/site/static/js/hero/hero-mobile.json create mode 100644 website/www/site/static/js/hero/lottie-light.min.js diff --git a/website/www/site/assets/icons/install-button-icon.svg b/website/www/site/assets/icons/install-button-icon.svg new file mode 100644 index 000000000000..39c3ffcfbd31 --- /dev/null +++ b/website/www/site/assets/icons/install-button-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/scss/_graphic.sass b/website/www/site/assets/scss/_graphic.sass index f01c72a12528..cd171f7db00b 100644 --- a/website/www/site/assets/scss/_graphic.sass +++ b/website/www/site/assets/scss/_graphic.sass @@ -16,6 +16,8 @@ */ .graphic + padding: $pad-l $pad + .graphic__image text-align: center line-height: 0 diff --git a/website/www/site/assets/scss/_hero-mobile.scss b/website/www/site/assets/scss/_hero-mobile.scss new file mode 100644 index 000000000000..343c279f4c90 --- /dev/null +++ b/website/www/site/assets/scss/_hero-mobile.scss @@ -0,0 +1,62 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import "media"; + +.hero-mobile { + position: relative; + margin-bottom: 0; + display: none; + + .hero-content { + position: absolute; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + width: 100%; + max-width: 506px; + + h3 { + @extend .hero-title; + + text-transform: uppercase; + margin: 0 auto 16px auto; + } + + h1 { + @extend .hero-heading; + + width: 300px; + margin: 0 auto 24px auto; + } + + h2 { + @extend .hero-subheading; + + width: 300px; + margin: 0 auto; + } + } +} + +@media (max-width: $mobile) { + .hero-mobile { + display: inherit; + } +} diff --git a/website/www/site/assets/scss/_hero.sass b/website/www/site/assets/scss/_hero.sass deleted file mode 100644 index 63c22b9282a5..000000000000 --- a/website/www/site/assets/scss/_hero.sass +++ /dev/null @@ -1,156 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.hero-bg - background-image: url(../images/hero_bg_flat.svg) - background-repeat: no-repeat - background-size: cover - background-position: top center - margin-top: -50px - +md - background-size: 100% - padding-bottom: $pad - -.hero - padding-top: $pad-xl - margin-bottom: $pad-md - position: relative - z-index: 1 - +md - padding-top: $pad-sm - margin-bottom: $pad-xl - - .hero__content - position: relative - z-index: 1 - - .hero__image - bottom: 0 - content: '' - left: 0 - line-height: 0 - position: absolute - right: 0 - top: 0 - z-index: 0 - img - position: absolute - bottom: 0 - width: 100% - - .hero__title - +type-h1 - color: #fff - max-width: 500px - margin: 0 auto $pad - text-align: center - +md - margin: 0 0 $pad - text-align: left - - .hero__ctas - text-align: center - margin-bottom: $pad-md - +md - margin-bottom: 0 - text-align: left - - &--first - margin-bottom: $pad - +md - margin-bottom: $pad-sm - - .hero__subtitle - +type-h3 - color: #fff - max-width: 540px - margin: 0 auto $pad - font-weight: $font-weight-semibold - text-align: center - +md - margin: 0 0 $pad-md - text-align: left - - .hero__blog - .hero__blog__title - +type-h4 - font-weight: $font-weight-bold - margin-bottom: $pad - text-align: center - +md - color: #fff - text-align: left - margin-bottom: $pad/2 - - .hero__blog__cards - +md - display: flex - margin: 0 -10px - - .hero__blog__cards__card - background-color: #fff - color: inherit - box-shadow: $box-shadow - padding: 20px - display: block - transition: transform 300ms ease, box-shadow 300ms ease - position: relative - max-width: 300px - margin: 0 auto $pad - +md - margin: 0 10px - - &:before - background-image: url(../images/card_border.svg) - background-position: top - background-repeat: no-repeat - background-size: cover - content: ' ' - display: block - height: 2px - position: absolute - width: 100% - left: 0 - top: 0 - - &:hover - text-decoration: none - transform: translateY(-8px) - box-shadow: $box-shadow-hover - - .hero__blog__cards__card__title - +type-body - margin-bottom: $pad - - .hero__blog__cards__card__date - +type-body-sm - font-weight: $font-weight-semibold - text-transform: uppercase - letter-spacing: 1px - - .hero__cols - +md - display: flex - min-height: 500px - - .hero__cols__col - width: 50% - display: flex - align-items: flex-end - - &:first-child - align-items: center diff --git a/website/www/site/assets/scss/_hero.scss b/website/www/site/assets/scss/_hero.scss new file mode 100644 index 000000000000..e204d1bf015d --- /dev/null +++ b/website/www/site/assets/scss/_hero.scss @@ -0,0 +1,128 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import "media"; + +.hero-desktop { + position: relative; + margin-bottom: 0; + width: 100%; + height: 100%; + display: inherit; + margin-top: -30px; + + .hero-content { + position: absolute; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + + h3 { + @extend .hero-title; + + text-transform: uppercase; + margin: 0 auto 24px auto; + } + + h1 { + @extend .hero-heading; + width: 506px; + + margin: 0 auto 36px auto; + } + + h2 { + @extend .hero-subheading; + + width: 344px; + margin: 0 auto 56px auto; + } + + a { + text-decoration: none; + } + + button { + width: 184px; + height: 46px; + padding: 15px 28px 15px 26px; + border-radius: 100px; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + background-color: $color-white; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + border: none; + outline: none; + + span { + text-transform: uppercase; + font-size: 14px; + font-weight: bold; + letter-spacing: 0.6px; + color: $color-sun; + } + } + + button:hover { + background-color: $color-white; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } + + button:focus { + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + } + } +} + +@media (max-width: $tablet) { + .hero-desktop { + margin-top: 70px; + + .hero-content { + h3 { + margin: 0 auto 16px auto; + } + + h1 { + width: 300px; + margin: 0 auto 24px auto; + } + + h2 { + width: 300px; + margin: 0 auto; + } + + button { + display: none; + } + } + } +} + +@media (max-width: $mobile) { + .hero-desktop { + display: none; + } +} diff --git a/website/www/site/assets/scss/_typography.scss b/website/www/site/assets/scss/_typography.scss index 9f66f800f12e..807619cadd05 100644 --- a/website/www/site/assets/scss/_typography.scss +++ b/website/www/site/assets/scss/_typography.scss @@ -14,8 +14,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - - @import "media"; + +@import "media"; .component-title { font-size: 36px; @@ -99,6 +99,33 @@ color: $color-gray; } +.hero-title { + font-size: 16px; + font-weight: normal; + font-style: normal; + line-height: 1.88; + letter-spacing: 0.8px; + color: $color-white; +} + +.hero-heading { + font-size: 46px; + font-weight: 500; + font-style: normal; + line-height: 1; + letter-spacing: normal; + color: $color-white; +} + +.hero-subheading { + font-size: 20px; + font-weight: normal; + font-style: normal; + line-height: 1.44; + letter-spacing: normal; + color: $color-white; +} + @media (max-width: $tablet) { .component-title { font-size: 28px; @@ -106,4 +133,7 @@ .component-large-header { font-size: 24px; } -} \ No newline at end of file + .hero-heading { + font-size: 32px; + } +} diff --git a/website/www/site/assets/scss/main.scss b/website/www/site/assets/scss/main.scss index 19052457b297..21ad104544ec 100644 --- a/website/www/site/assets/scss/main.scss +++ b/website/www/site/assets/scss/main.scss @@ -35,7 +35,8 @@ @import "_footer.sass"; @import "_graphic.sass"; @import "_header.sass"; -@import "_hero.sass"; +@import "_hero.scss"; +@import "_hero-mobile.scss"; @import "_logos.scss"; @import "_pillars.scss"; @import "_section-nav.sass"; diff --git a/website/www/site/i18n/home/en.yaml b/website/www/site/i18n/home/en.yaml index 8a1ac53eecf8..6ae87c04f465 100644 --- a/website/www/site/i18n/home/en.yaml +++ b/website/www/site/i18n/home/en.yaml @@ -10,10 +10,6 @@ # See the License for the specific language governing permissions and # limitations under the License. -- id: home-hero-title - translation: "Apache Beam: An advanced unified programming model" -- id: home-hero-subtitle - translation: "Implement batch and streaming data processing jobs that run on any execution engine." - id: home-learn-more translation: "Learn more" - id: home-try-beam diff --git a/website/www/site/i18n/home/hero/en.yaml b/website/www/site/i18n/home/hero/en.yaml new file mode 100644 index 000000000000..85f4728d86be --- /dev/null +++ b/website/www/site/i18n/home/hero/en.yaml @@ -0,0 +1,20 @@ +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +- id: home-hero-title + translation: Introducing Apache Beam +- id: home-hero-heading + translation: An advanced unified programming model +- id: home-hero-subheading + translation: Implement batch and streaming data processing jobs that run on any execution engine. +- id: home-hero-button + translation: Install Beam diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html index 66ada95b9c55..5808e2bbc740 100644 --- a/website/www/site/layouts/index.html +++ b/website/www/site/layouts/index.html @@ -11,47 +11,19 @@ */}} {{ define "hero-section" }} -
-
-
-
-
-
- {{ T "home-hero-title" }} -
-
- {{ T "home-hero-subtitle" }} -
-
- {{ T "home-learn-more" }} - {{ T "home-try-beam" }} - {{ T "home-download-beam" . }} -
-
- {{ T "home-java-quickstart" }} - {{ T "home-python-quickstart" }} - {{ T "home-go-quickstart" }} -
-
-
-
-
-
- {{ T "home-hero-blog-title" }} -
-
- - {{ range ( where site.RegularPages "Section" "blog" | first 3 ) }} - -
{{ .Title }}
-
{{ .Date.Format "Jan 2, 2006" }}
- - {{ end }} - -
-
-
-
+
+
+

{{ T "home-hero-title" }}

+

{{ T "home-hero-heading" }}

+

{{ T "home-hero-subheading" }}

+ +
+
+
+
+

{{ T "home-hero-title" }}

+

{{ T "home-hero-heading" }}

+

{{ T "home-hero-subheading" }}

{{ end }} diff --git a/website/www/site/layouts/partials/hooks/body-end.html b/website/www/site/layouts/partials/hooks/body-end.html index 71fde2b2d86a..7b2bc8c51298 100644 --- a/website/www/site/layouts/partials/hooks/body-end.html +++ b/website/www/site/layouts/partials/hooks/body-end.html @@ -1,2 +1,5 @@ + + + diff --git a/website/www/site/static/js/hero/hero-desktop.js b/website/www/site/static/js/hero/hero-desktop.js new file mode 100644 index 000000000000..93c677c841a4 --- /dev/null +++ b/website/www/site/static/js/hero/hero-desktop.js @@ -0,0 +1,7 @@ +var animation = bodymovin.loadAnimation({ + container: document.getElementById("hero-desktop"), + renderer: "svg", + loop: false, + autoplay: true, + path: "/js/hero/hero-desktop.json", +}); diff --git a/website/www/site/static/js/hero/hero-desktop.json b/website/www/site/static/js/hero/hero-desktop.json new file mode 100644 index 000000000000..f512ecbfc4ca --- /dev/null +++ b/website/www/site/static/js/hero/hero-desktop.json @@ -0,0 +1 @@ +{"v":"5.7.1","fr":30,"ip":0,"op":120,"w":1440,"h":536,"nm":"opt2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[62.997],"e":[20]},{"t":77}],"ix":10},"p":{"a":0,"k":[2112,250,0],"ix":2},"a":{"a":0,"k":[1228.201,-1.163,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":82,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-35],"e":[-20]},{"t":56}],"ix":10},"p":{"a":0,"k":[-1802,346,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.341176470588,0.043137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 7","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-53],"e":[-34]},{"t":76}],"ix":10},"p":{"a":0,"k":[-1690,996,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-6,"s":[-46],"e":[20]},{"t":67}],"ix":10},"p":{"a":0,"k":[1436,1008,0],"ix":2},"a":{"a":0,"k":[1171.735,-35.884,0],"ix":1},"s":{"a":0,"k":[100,78.683,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":20,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[0.759]},"t":-5,"s":[2],"e":[-27]},{"t":56}],"ix":10},"p":{"a":0,"k":[-188,1280,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 8","sr":1,"ks":{"o":{"a":0,"k":57,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-7,"s":[2],"e":[-43]},{"t":56}],"ix":10},"p":{"a":0,"k":[-66,1694,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,81.692,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-152.112,163.925],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":9,"ty":1,"nm":"Orange Solid 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[720,268,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#ff570b","ip":0,"op":720,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":1,"nm":"Medium Orange Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[720,268,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#f87924","ip":0,"op":720,"st":0,"bm":0}],"markers":[]} \ No newline at end of file diff --git a/website/www/site/static/js/hero/hero-mobile.js b/website/www/site/static/js/hero/hero-mobile.js new file mode 100644 index 000000000000..dd678610c10a --- /dev/null +++ b/website/www/site/static/js/hero/hero-mobile.js @@ -0,0 +1,7 @@ +var animation = bodymovin.loadAnimation({ + container: document.getElementById("hero-mobile"), + renderer: "svg", + loop: false, + autoplay: true, + path: "/js/hero/hero-mobile.json", +}); diff --git a/website/www/site/static/js/hero/hero-mobile.json b/website/www/site/static/js/hero/hero-mobile.json new file mode 100644 index 000000000000..510c68fdae27 --- /dev/null +++ b/website/www/site/static/js/hero/hero-mobile.json @@ -0,0 +1 @@ +{"v":"5.7.1","fr":30,"ip":0,"op":120,"w":375,"h":462,"nm":"opt2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[62.997],"e":[20]},{"t":77}],"ix":10},"p":{"a":0,"k":[1635.5,319,0],"ix":2},"a":{"a":0,"k":[1228.201,-1.163,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":82,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-35],"e":[-20]},{"t":56}],"ix":10},"p":{"a":0,"k":[-2082.5,375,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.341176470588,0.043137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 7","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-53],"e":[-34]},{"t":76}],"ix":10},"p":{"a":0,"k":[-1990.5,983,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-6,"s":[-46],"e":[20]},{"t":67}],"ix":10},"p":{"a":0,"k":[1117.5,959,0],"ix":2},"a":{"a":0,"k":[1171.735,-35.884,0],"ix":1},"s":{"a":0,"k":[100,78.683,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":20,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[0.759]},"t":-5,"s":[2],"e":[-27]},{"t":56}],"ix":10},"p":{"a":0,"k":[-484.5,1051,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 8","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-7,"s":[2],"e":[-43]},{"t":56}],"ix":10},"p":{"a":0,"k":[-542.5,1281,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,81.692,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-152.112,163.925],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":9,"ty":1,"nm":"Orange Solid 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,231,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#ff570b","ip":0,"op":720,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":1,"nm":"Medium Orange Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,231,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#f87924","ip":0,"op":720,"st":0,"bm":0}],"markers":[]} \ No newline at end of file diff --git a/website/www/site/static/js/hero/lottie-light.min.js b/website/www/site/static/js/hero/lottie-light.min.js new file mode 100644 index 000000000000..4da368052ad6 --- /dev/null +++ b/website/www/site/static/js/hero/lottie-light.min.js @@ -0,0 +1,15 @@ +(typeof navigator !== "undefined") && (function(root, factory) { + if (typeof define === "function" && define.amd) { + define(function() { + return factory(root); + }); + } else if (typeof module === "object" && module.exports) { + module.exports = factory(root); + } else { + root.lottie = factory(root); + root.bodymovin = root.lottie; + } +}((window || {}), function(window) { + "use strict";var h,e="http://www.w3.org/2000/svg",A="",s=-999999,i=!0,b=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent),Math.round,Math.pow),k=Math.sqrt,f=(Math.abs,Math.floor),m=(Math.max,Math.min),a={};!function(){var t,e=["abs","acos","acosh","asin","asinh","atan","atanh","atan2","ceil","cbrt","expm1","clz32","cos","cosh","exp","floor","fround","hypot","imul","log","log1p","log2","log10","max","min","pow","random","round","sign","sin","sinh","sqrt","tan","tanh","trunc","E","LN10","LN2","LOG10E","LOG2E","PI","SQRT1_2","SQRT2"],s=e.length;for(t=0;t>>=1;return(t+s)/e};return n.int32=function(){return 0|r.g(4)},n.quick=function(){return r.g(4)/4294967296},n.double=n,b(k(r.S),h),(e.pass||s||function(t,e,s,i){return i&&(i.S&&_(i,r),t.state=function(){return _(r,{})}),s?(o[d]=t,e):t})(n,a,"global"in e?e.global:this==o,e.state)},b(o.random(),h)}([],a);var W=function(){var t={getBezierEasing:function(t,e,s,i,a){var r=a||("bez_"+t+"_"+e+"_"+s+"_"+i).replace(/\./g,"p");if(h[r])return h[r];var n=new o([t,e,s,i]);return h[r]=n}},h={};var l=11,p=1/(l-1),e="function"==typeof Float32Array;function i(t,e){return 1-3*e+3*t}function a(t,e){return 3*e-6*t}function r(t){return 3*t}function f(t,e,s){return((i(e,s)*t+a(e,s))*t+r(e))*t}function m(t,e,s){return 3*i(e,s)*t*t+2*a(e,s)*t+r(e)}function o(t){this._p=t,this._mSampleValues=e?new Float32Array(l):new Array(l),this._precomputed=!1,this.get=this.get.bind(this)}return o.prototype={get:function(t){var e=this._p[0],s=this._p[1],i=this._p[2],a=this._p[3];return this._precomputed||this._precompute(),e===s&&i===a?t:0===t?0:1===t?1:f(this._getTForX(t),s,a)},_precompute:function(){var t=this._p[0],e=this._p[1],s=this._p[2],i=this._p[3];this._precomputed=!0,t===e&&s===i||this._calcSampleValues()},_calcSampleValues:function(){for(var t=this._p[0],e=this._p[2],s=0;sn?-1:1,l=!0;l;)if(i[r]<=n&&i[r+1]>n?(h=(n-i[r])/(i[r+1]-i[r]),l=!1):r+=o,r<0||a-1<=r){if(r===a-1)return s[r];l=!1}return s[r]+(s[r+1]-s[r])*h}var M=j("float32",8);return{getSegmentsLength:function(t){var e,s=Ct.newElement(),i=t.c,a=t.v,r=t.o,n=t.i,h=t._length,o=s.lengths,l=0;for(e=0;es[0]||!(s[0]>t[0])&&(t[1]>s[1]||!(s[1]>t[1])&&(t[2]>s[2]||!(s[2]>t[2])&&void 0))}var o,s=function(){var i=[4,4,14];function a(t){var e,s,i,a=t.length;for(e=0;e=r.t-i){a.h&&(a=r),m=0;break}if(r.t-i>t){m=d;break}d=s&&s<=t||this._caching.lastFrame=t&&(this._caching._lastKeyframeIndex=-1,this._caching.lastIndex=0);var i=this.interpolateValue(t,this._caching);this.pv=i}return this._caching.lastFrame=t,this.pv}function c(t){var e;if("unidimensional"===this.propType)e=t*this.mult,1e-5=this.p.keyframes[this.p.keyframes.length-1].t?(e=this.p.getValueAtTime(this.p.keyframes[this.p.keyframes.length-1].t/i,0),this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length-1].t-.05)/i,0)):(e=this.p.pv,this.p.getValueAtTime((this.p._caching.lastFrame+this.p.offsetTime-.01)/i,this.p.offsetTime));else if(this.px&&this.px.keyframes&&this.py.keyframes&&this.px.getValueAtTime&&this.py.getValueAtTime){e=[],s=[];var a=this.px,r=this.py;a._caching.lastFrame+a.offsetTime<=a.keyframes[0].t?(e[0]=a.getValueAtTime((a.keyframes[0].t+.01)/i,0),e[1]=r.getValueAtTime((r.keyframes[0].t+.01)/i,0),s[0]=a.getValueAtTime(a.keyframes[0].t/i,0),s[1]=r.getValueAtTime(r.keyframes[0].t/i,0)):a._caching.lastFrame+a.offsetTime>=a.keyframes[a.keyframes.length-1].t?(e[0]=a.getValueAtTime(a.keyframes[a.keyframes.length-1].t/i,0),e[1]=r.getValueAtTime(r.keyframes[r.keyframes.length-1].t/i,0),s[0]=a.getValueAtTime((a.keyframes[a.keyframes.length-1].t-.01)/i,0),s[1]=r.getValueAtTime((r.keyframes[r.keyframes.length-1].t-.01)/i,0)):(e=[a.pv,r.pv],s[0]=a.getValueAtTime((a._caching.lastFrame+a.offsetTime-.01)/i,a.offsetTime),s[1]=r.getValueAtTime((r._caching.lastFrame+r.offsetTime-.01)/i,r.offsetTime))}else e=s=n;this.v.rotate(-Math.atan2(e[1]-s[1],e[0]-s[0]))}this.data.p&&this.data.p.s?this.data.p.z?this.v.translate(this.px.v,this.py.v,-this.pz.v):this.v.translate(this.px.v,this.py.v,0):this.v.translate(this.p.v[0],this.p.v[1],-this.p.v[2])}this.frameId=this.elem.globalData.frameId}},precalculateMatrix:function(){if(!this.a.k&&(this.pre.translate(-this.a.v[0],-this.a.v[1],this.a.v[2]),this.appliedTransformations=1,!this.s.effectsSequence.length)){if(this.pre.scale(this.s.v[0],this.s.v[1],this.s.v[2]),this.appliedTransformations=2,this.sk){if(this.sk.effectsSequence.length||this.sa.effectsSequence.length)return;this.pre.skewFromAxis(-this.sk.v,this.sa.v),this.appliedTransformations=3}if(this.r){if(this.r.effectsSequence.length)return;this.pre.rotate(-this.r.v),this.appliedTransformations=4}else this.rz.effectsSequence.length||this.ry.effectsSequence.length||this.rx.effectsSequence.length||this.or.effectsSequence.length||(this.pre.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]),this.appliedTransformations=4)}},autoOrient:function(){}},F([w],i),i.prototype.addDynamicProperty=function(t){this._addDynamicProperty(t),this.elem.addDynamicProperty(t),this._isDirty=!0},i.prototype._addDynamicProperty=w.prototype.addDynamicProperty,{getTransformProperty:function(t,e,s){return new i(t,e,s)}}}();function z(){this.c=!1,this._length=0,this._maxLength=8,this.v=x(this._maxLength),this.o=x(this._maxLength),this.i=x(this._maxLength)}z.prototype.setPathData=function(t,e){this.c=t,this.setLength(e);for(var s=0;s=this._maxLength&&this.doubleArrayLength(),s){case"v":r=this.v;break;case"i":r=this.i;break;case"o":r=this.o}(!r[i]||r[i]&&!a)&&(r[i]=Pt.newElement()),r[i][0]=t,r[i][1]=e},z.prototype.setTripleAt=function(t,e,s,i,a,r,n,h){this.setXYAt(t,e,"v",n,h),this.setXYAt(s,i,"o",n,h),this.setXYAt(a,r,"i",n,h)},z.prototype.reverse=function(){var t=new z;t.setPathData(this.c,this._length);var e=this.v,s=this.o,i=this.i,a=0;this.c&&(t.setTripleAt(e[0][0],e[0][1],i[0][0],i[0][1],s[0][0],s[0][1],0,!1),a=1);var r,n=this._length-1,h=this._length;for(r=a;r=d[d.length-1].t-this.offsetTime)i=d[d.length-1].s?d[d.length-1].s[0]:d[d.length-2].e[0],r=!0;else{for(var c,u,g=m,y=d.length-1,v=!0;v&&(c=d[g],!((u=d[g+1]).t-this.offsetTime>t));)g=u.t-this.offsetTime)p=1;else if(ti+s);else p=h.s*a<=i?0:(h.s*a-i)/s,f=h.e*a>=i+s?1:(h.e*a-i)/s,o.push([p,f])}return o.length||o.push([0,0]),o},G.prototype.releasePathsData=function(t){var e,s=t.length;for(e=0;ee.e){s.c=!1;break}e.s<=c&&e.e>=c+n.addedLength?(this.addSegment(m[i].v[a-1],m[i].o[a-1],m[i].i[a],m[i].v[a],s,h,g),g=!1):(l=mt.getNewSegment(m[i].v[a-1],m[i].v[a],m[i].o[a-1],m[i].i[a],(e.s-c)/n.addedLength,(e.e-c)/n.addedLength,o[a-1]),this.addSegmentFromArray(l,s,h,g),g=!1,s.c=!1),c+=n.addedLength,h+=1}if(m[i].c&&o.length){if(n=o[a-1],c<=e.e){var y=o[a-1].addedLength;e.s<=c&&e.e>=c+y?(this.addSegment(m[i].v[a-1],m[i].o[a-1],m[i].i[0],m[i].v[0],s,h,g),g=!1):(l=mt.getNewSegment(m[i].v[a-1],m[i].v[0],m[i].o[a-1],m[i].i[0],(e.s-c)/y,(e.e-c)/y,o[a-1]),this.addSegmentFromArray(l,s,h,g),g=!1,s.c=!1)}else s.c=!1;c+=n.addedLength,h+=1}if(s._length&&(s.setXYAt(s.v[p][0],s.v[p][1],"i",p),s.setXYAt(s.v[s._length-1][0],s.v[s._length-1][1],"o",s._length-1)),c>e.e)break;i=c.length&&(f=0,c=u[m+=1]?u[m].points:b.v.c?u[m=f=0].points:(l-=o.partialLength,null)),c&&(d=o,g=(o=c[f]).partialLength));z=D[a].an/2-D[a].add,S.translate(-z,0,0)}else z=D[a].an/2-D[a].add,S.translate(-z,0,0),S.translate(-k[0]*D[a].an/200,-k[1]*L/100,0);for(D[a].l/2,F=0;Fe));)s+=1;return this.keysIndex!==s&&(this.keysIndex=s),this.data.d.k[this.keysIndex].s},ct.prototype.buildFinalText=function(t){for(var e,s=L.getCombinedCharacterCodes(),i=[],a=0,r=t.length;athis.minimumFontSize&&M=u(h)&&(n=d(0,c(t-h<0?c(o,1)-(h-t):o-t,1))),r(n));return n*this.a.v},getValue:function(t){this.iterateDynamicProperties(),this._mdf=t||this._mdf,this._currentTextLength=this.elem.textProperty.currentData.l.length||0,t&&2===this.data.r&&(this.e.v=this._currentTextLength);var e=2===this.data.r?1:100/this.data.totalChars,s=this.o.v/e,i=this.s.v/e+s,a=this.e.v/e+s;if(at-this.layers[e].st&&this.buildItem(e),this.completeLayers=!!this.elements[e]&&this.completeLayers;this.checkPendingElements()},wt.prototype.createItem=function(t){switch(t.ty){case 2:return this.createImage(t);case 0:return this.createComp(t);case 1:return this.createSolid(t);case 3:return this.createNull(t);case 4:return this.createShape(t);case 5:return this.createText(t);case 6:return this.createAudio(t);case 13:return this.createCamera(t)}return this.createNull(t)},wt.prototype.createCamera=function(){throw new Error("You're using a 3d camera. Try the html renderer.")},wt.prototype.createAudio=function(t){return new te(t,this.globalData,this)},wt.prototype.buildAllItems=function(){var t,e=this.layers.length;for(t=0;tt?!0!==this.isInRange&&(this.globalData._mdf=!0,this._mdf=!0,this.isInRange=!0,this.show()):!1!==this.isInRange&&(this.globalData._mdf=!0,this.isInRange=!1,this.hide())},renderRenderable:function(){var t,e=this.renderableComponents.length;for(t=0;tthis.animationData.op&&(this.animationData.op=t.op,this.totalFrames=Math.floor(t.op-this.animationData.ip));var e,s,i=this.animationData.layers,a=i.length,r=t.layers,n=r.length;for(s=0;sthis.timeCompleted&&(this.currentFrame=this.timeCompleted),this.trigger("enterFrame"),this.renderFrame()},he.prototype.renderFrame=function(){if(!1!==this.isLoaded)try{this.renderer.renderFrame(this.currentFrame+this.firstFrame)}catch(t){this.triggerRenderFrameError(t)}},he.prototype.play=function(t){t&&this.name!=t||!0===this.isPaused&&(this.isPaused=!1,this.audioController.resume(),this._idle&&(this._idle=!1,this.trigger("_active")))},he.prototype.pause=function(t){t&&this.name!=t||!1===this.isPaused&&(this.isPaused=!0,this._idle=!0,this.trigger("_idle"),this.audioController.pause())},he.prototype.togglePause=function(t){t&&this.name!=t||(!0===this.isPaused?this.play():this.pause())},he.prototype.stop=function(t){t&&this.name!=t||(this.pause(),this.playCount=0,this._completedLoop=!1,this.setCurrentRawFrameValue(0))},he.prototype.goToAndStop=function(t,e,s){s&&this.name!=s||(e?this.setCurrentRawFrameValue(t):this.setCurrentRawFrameValue(t*this.frameModifier),this.pause())},he.prototype.goToAndPlay=function(t,e,s){this.goToAndStop(t,e,s),this.play()},he.prototype.advanceTime=function(t){if(!0!==this.isPaused&&!1!==this.isLoaded){var e=this.currentRawFrame+t*this.frameModifier,s=!1;e>=this.totalFrames-1&&0=this.totalFrames?(this.playCount+=1,this.checkSegments(e%this.totalFrames)||(this.setCurrentRawFrameValue(e%this.totalFrames),this._completedLoop=!0,this.trigger("loopComplete"))):this.setCurrentRawFrameValue(e):this.checkSegments(e>this.totalFrames?e%this.totalFrames:0)||(s=!0,e=this.totalFrames-1):e<0?this.checkSegments(e%this.totalFrames)||(!this.loop||this.playCount--<=0&&!0!==this.loop?(s=!0,e=0):(this.setCurrentRawFrameValue(this.totalFrames+e%this.totalFrames),this._completedLoop?this.trigger("loopComplete"):this._completedLoop=!0)):this.setCurrentRawFrameValue(e),s&&(this.setCurrentRawFrameValue(e),this.pause(),this.trigger("complete"))}},he.prototype.adjustSegment=function(t,e){this.playCount=0,t[1]t[0]&&(this.frameModifier<0&&(this.playSpeed<0?this.setSpeed(-this.playSpeed):this.setDirection(1)),this.timeCompleted=this.totalFrames=t[1]-t[0],this.firstFrame=t[0],this.setCurrentRawFrameValue(.001+e)),this.trigger("segmentStart")},he.prototype.setSegment=function(t,e){var s=-1;this.isPaused&&(this.currentRawFrame+this.firstFramee&&(s=e-t)),this.firstFrame=t,this.timeCompleted=this.totalFrames=e-t,-1!==s&&this.goToAndStop(s,!0)},he.prototype.playSegments=function(t,e){if(e&&(this.segments.length=0),"object"==typeof t[0]){var s,i=t.length;for(s=0;s Date: Mon, 30 Nov 2020 22:46:09 +0700 Subject: [PATCH 4/7] Changed Navbar component --- .../site/assets/icons/navbar-arrow-icon.svg | 23 +++ .../icons/navbar-documentation-icon.svg | 22 +++ website/www/site/assets/scss/_global.sass | 7 +- .../www/site/assets/scss/_navbar-desktop.scss | 176 ++++++++++++++++++ .../{_navbar.sass => _navbar-mobile.sass} | 17 +- .../www/site/assets/scss/_section-nav.sass | 4 +- website/www/site/assets/scss/_vars.sass | 3 + website/www/site/assets/scss/main.scss | 7 +- website/www/site/i18n/navbar/en.yaml | 4 +- website/www/site/layouts/index.html | 11 +- website/www/site/layouts/partials/header.html | 58 +++++- website/www/site/static/js/section-nav.js | 2 +- 12 files changed, 311 insertions(+), 23 deletions(-) create mode 100644 website/www/site/assets/icons/navbar-arrow-icon.svg create mode 100644 website/www/site/assets/icons/navbar-documentation-icon.svg create mode 100644 website/www/site/assets/scss/_navbar-desktop.scss rename website/www/site/assets/scss/{_navbar.sass => _navbar-mobile.sass} (87%) diff --git a/website/www/site/assets/icons/navbar-arrow-icon.svg b/website/www/site/assets/icons/navbar-arrow-icon.svg new file mode 100644 index 000000000000..78724e930331 --- /dev/null +++ b/website/www/site/assets/icons/navbar-arrow-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/navbar-documentation-icon.svg b/website/www/site/assets/icons/navbar-documentation-icon.svg new file mode 100644 index 000000000000..11c165b0feba --- /dev/null +++ b/website/www/site/assets/icons/navbar-documentation-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/scss/_global.sass b/website/www/site/assets/scss/_global.sass index a4dd35517e26..2410e0d64693 100644 --- a/website/www/site/assets/scss/_global.sass +++ b/website/www/site/assets/scss/_global.sass @@ -26,7 +26,6 @@ body .body background: #fff margin: 0 auto - padding-top: 130px &:not(.body--index) .body__contained @@ -67,4 +66,8 @@ body .container-main-content padding: 0 20px - position: relative \ No newline at end of file + position: relative + margin-top: 85px + + @media (min-width: $tablet) + margin-top: 0 \ No newline at end of file diff --git a/website/www/site/assets/scss/_navbar-desktop.scss b/website/www/site/assets/scss/_navbar-desktop.scss new file mode 100644 index 000000000000..de66568fdfe9 --- /dev/null +++ b/website/www/site/assets/scss/_navbar-desktop.scss @@ -0,0 +1,176 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import "media"; + +.navigation-bar-mobile { + display: none; +} + +.navigation-bar-desktop { + display: flex; + height: 96px; + width: 100%; + align-items: center; + justify-content: space-between; + margin-bottom: 30px; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06); + background-color: $color-white; + z-index: 10000; // just to make sure that navbar always on top of other elements + + a { + @extend .component-text; + + color: $color-dark-gray; + letter-spacing: 0.2; + margin-right: 56px; + text-decoration: none; + cursor: pointer; + } + + .navbar-logo { + margin-left: 58px; + + img { + width: 88px; + } + } + + .navbar-links { + display: flex; + align-items: center; + justify-content: space-between; + z-index: 10000; + + :last-child { + margin-right: 0; + } + + .navbar-link { + display: inline-block; + position: relative; + margin-bottom: 2px; + } + + .navbar-link::before { + transition: 0.3; + content: ""; + position: absolute; + background-color: $color-sun; + height: 0%; + width: 100%; + bottom: 0px; + border-radius: 5px; + } + + .navbar-link:hover::before { + height: 2px; + } + + .navbar-dropdown-documentation { + list-style-type: none; + + .dropdown-toggle { + margin: 0; + } + + ul { + width: 209px; + left: -25%; + text-align: center; + border: none; + box-shadow: none; + padding-top: 34px; + padding-bottom: 0; + + a { + @extend .component-text; + + margin-right: 0 !important; + } + } + } + } + + .navbar-dropdown-apache { + margin-right: 90px; + list-style-type: none; + + .dropdown-toggle { + margin: 0; + } + + ul { + width: 209px; + left: 70%; + transform: translateX(-50%); + text-align: center; + border: none; + box-shadow: none; + padding-top: 35px; + padding-bottom: 0; + + a { + @extend .component-text; + + margin-right: 0 !important; + } + } + + .arrow-icon { + position: absolute; + top: 3px; + right: -30px; + } + } + + .navbar-dropdown-apache:hover { + .arrow-icon { + opacity: 0.84; + } + } + + .navbar-dropdown { + .dropdown-menu > li > a { + &:hover, + &:focus { + text-decoration: none; + color: $color-dropdown-link-hover-text; + background-color: $color-dropdown-link-hover-bg; + } + } + } + + .dropdown:hover .dropdown-menu { + display: block; + margin-top: 0; + } +} + +@media (max-width: $tablet) { + .navigation-bar-desktop { + display: none; + } + + .navigation-bar-mobile { + display: block; + } + + .page-nav { + margin-top: 30px; + } +} \ No newline at end of file diff --git a/website/www/site/assets/scss/_navbar.sass b/website/www/site/assets/scss/_navbar-mobile.sass similarity index 87% rename from website/www/site/assets/scss/_navbar.sass rename to website/www/site/assets/scss/_navbar-mobile.sass index f4b4ea6bcae7..762b5e517b9a 100644 --- a/website/www/site/assets/scss/_navbar.sass +++ b/website/www/site/assets/scss/_navbar-mobile.sass @@ -23,6 +23,7 @@ .navbar-header margin-left: $pad + float: none .navbar-brand +md @@ -40,16 +41,17 @@ color: $color-dark-gray .navbar-toggle - float: left + margin-right: 24px .icon-bar - background-color: $color-dark-gray + background-color: $color-sun + height: 3px - @media (max-width: $ak-breakpoint-lg) + @media (max-width: $tablet) display: block .navbar-container - @media (max-width: $ak-breakpoint-lg) + @media (max-width: $tablet) background-color: $color-white bottom: 0 min-height: 100vh @@ -59,12 +61,13 @@ top: 0 transition: transform 100ms linear width: calc(100% - 32px) + right: 0 .navbar-nav > li width: 100% &.closed - transform: translateX(-100%) + transform: translateX(100%) &.open transform: translateX(0) @@ -78,7 +81,7 @@ top: 0 transition: opacity 200ms - @media (max-width: $ak-breakpoint-lg) + @media (max-width: $tablet) display: block &.closed @@ -89,6 +92,6 @@ opacity: 0.5 width: 100% - @media (max-width: $ak-breakpoint-lg) + @media (max-width: $tablet) .navbar-right margin-right: -15px diff --git a/website/www/site/assets/scss/_section-nav.sass b/website/www/site/assets/scss/_section-nav.sass index 61aff9f462ea..d8c4ed195b83 100644 --- a/website/www/site/assets/scss/_section-nav.sass +++ b/website/www/site/assets/scss/_section-nav.sass @@ -97,7 +97,7 @@ @media (max-width: $ak-breakpoint-lg) background-color: $color-light-gray bottom: 0 - left: 0 + right: 0 max-width: 256px position: fixed top: 0 @@ -110,7 +110,7 @@ overflow-y: auto &.closed - transform: translateX(-100%) + transform: translateX(100%) &.open transform: translateX(0) diff --git a/website/www/site/assets/scss/_vars.sass b/website/www/site/assets/scss/_vars.sass index 24cfaee94731..626313d993b2 100644 --- a/website/www/site/assets/scss/_vars.sass +++ b/website/www/site/assets/scss/_vars.sass @@ -26,6 +26,9 @@ $color-sun: #F26628 $color-silver: #C4C4C4 $color-medium-gray: #FBFBFB +$color-dropdown-link-hover-text: #E65D21 +$color-dropdown-link-hover-bg: #FFEDE5 + $pad-sm: 15px $pad-s: 24px $pad: 30px diff --git a/website/www/site/assets/scss/main.scss b/website/www/site/assets/scss/main.scss index 21ad104544ec..7fdebefb7eb0 100644 --- a/website/www/site/assets/scss/main.scss +++ b/website/www/site/assets/scss/main.scss @@ -20,12 +20,12 @@ // Globals. @import "_vars.sass"; +@import "_media.scss"; @import "_breakpoints.sass"; @import "_type.sass"; @import "_global.sass"; -@import "_navbar.sass"; +@import "_navbar-mobile.sass"; @import "_typography.scss"; -@import "_media.scss"; // Components. @import "_button.sass"; @@ -44,4 +44,5 @@ @import "_table-wrapper.sass"; @import "_calendar.scss"; @import "_quotes.scss"; -@import "_quotes-mobile.scss"; \ No newline at end of file +@import "_quotes-mobile.scss"; +@import "navbar-desktop.scss"; \ No newline at end of file diff --git a/website/www/site/i18n/navbar/en.yaml b/website/www/site/i18n/navbar/en.yaml index fd22c3a73821..ae6255e50683 100644 --- a/website/www/site/i18n/navbar/en.yaml +++ b/website/www/site/i18n/navbar/en.yaml @@ -16,10 +16,12 @@ translation: "Get Started" - id: nav-documentation translation: "Documentation" +- id: nav-documentation-general + translation: "General" - id: nav-languages translation: "Languages" - id: nav-runners - translation: "RUNNERS" + translation: "Runners" - id: nav-roadmap translation: "Roadmap" - id: nav-contribute diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html index 5808e2bbc740..c3be9326b7ef 100644 --- a/website/www/site/layouts/index.html +++ b/website/www/site/layouts/index.html @@ -16,7 +16,16 @@

{{ T "home-hero-title" }}

{{ T "home-hero-heading" }}

{{ T "home-hero-subheading" }}

- + + +
diff --git a/website/www/site/layouts/partials/header.html b/website/www/site/layouts/partials/header.html index 73c9867acffc..af8417087c20 100644 --- a/website/www/site/layouts/partials/header.html +++ b/website/www/site/layouts/partials/header.html @@ -10,18 +10,18 @@ limitations under the License. See accompanying LICENSE file. */}} -