diff --git a/services/web/frontend/stylesheets/app/homepage.less b/services/web/frontend/stylesheets/app/homepage.less index a1874b4d01..80ab0d77e0 100644 --- a/services/web/frontend/stylesheets/app/homepage.less +++ b/services/web/frontend/stylesheets/app/homepage.less @@ -507,27 +507,6 @@ } } - .homepage-hero { - display: flex; - align-items: center; - justify-content: center; - height: 585px; - - @media (max-width: @screen-sm-max) { - height: auto; - } - - video { - box-shadow: 0px 60px 25px -15px rgba(16, 24, 40, 0.2); - max-height: 100%; - width: auto; - - @media (max-width: @screen-sm-max) { - width: 100%; - } - } - } - .home-register-newsletter-checkbox { font-size: 0.75rem; margin-top: 10px; diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less index dab3f8e6ff..7f0a097b4c 100644 --- a/services/web/frontend/stylesheets/app/website-redesign.less +++ b/services/web/frontend/stylesheets/app/website-redesign.less @@ -149,6 +149,53 @@ } } + .security-heading-section { + @media (max-width: @screen-sm-max) { + p { + text-align: left; + } + + h2 { + width: 100%; + text-align: left; + } + } + + .heading-and-stickers-container { + display: flex; + justify-content: center; + + .lock-sticker { + width: 70px; + position: absolute; + top: -95px; + right: -90px; + + @media (max-width: @screen-lg) { + right: -145px; + } + + @media (max-width: @screen-sm-max) { + display: none; + } + } + + .arrow-sticker { + width: 140px; + position: absolute; + top: -50px; + right: -55px; + + @media (max-width: @screen-lg) { + right: -110px; + } + @media (max-width: @screen-sm-max) { + display: none; + } + } + } + } + .features-card { display: flex; /* equal heights */ flex-wrap: wrap; @@ -164,6 +211,30 @@ } } + .features-card-video { + video { + box-shadow: 0px 4px 6px 0px rgba(30, 37, 48, 0.12), + 0px 8px 16px 0px rgba(30, 37, 48, 0.12); + max-height: 100%; + width: auto; + } + + video.video-responsive { + width: 100%; + } + + video.video-w-md-90 { + width: 90%; + @media (max-width: @screen-sm-max) { + width: 100%; + } + } + + @media (max-width: @screen-sm-max) { + margin-bottom: 50px; + } + } + .features-card-description, .features-card-description-list { padding-top: 16px; @@ -788,4 +859,25 @@ } } } + + .editor-pdf-video { + display: flex; + align-items: center; + justify-content: center; + height: 585px; + + @media (max-width: @screen-sm-max) { + height: auto; + } + + video { + box-shadow: 0px 60px 25px -15px rgba(16, 24, 40, 0.2); + max-height: 100%; + width: auto; + + @media (max-width: @screen-sm-max) { + width: 100%; + } + } + } } diff --git a/services/web/public/img/website-redesign/arrow-sticker.svg b/services/web/public/img/website-redesign/arrow-sticker.svg new file mode 100644 index 0000000000..f32008999c --- /dev/null +++ b/services/web/public/img/website-redesign/arrow-sticker.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/services/web/public/img/website-redesign/collaborate-sticker.svg b/services/web/public/img/website-redesign/collaborate-sticker.svg new file mode 100644 index 0000000000..51d0d97304 --- /dev/null +++ b/services/web/public/img/website-redesign/collaborate-sticker.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/services/web/public/img/website-redesign/commenting.mp4 b/services/web/public/img/website-redesign/commenting.mp4 new file mode 100644 index 0000000000..4ff617a65b Binary files /dev/null and b/services/web/public/img/website-redesign/commenting.mp4 differ diff --git a/services/web/public/img/website-redesign/compiling.mp4 b/services/web/public/img/website-redesign/compiling.mp4 new file mode 100644 index 0000000000..dee97cad4e Binary files /dev/null and b/services/web/public/img/website-redesign/compiling.mp4 differ diff --git a/services/web/public/img/website-redesign/homepage-hero.mp4 b/services/web/public/img/website-redesign/editor-pdf-video.mp4 similarity index 100% rename from services/web/public/img/website-redesign/homepage-hero.mp4 rename to services/web/public/img/website-redesign/editor-pdf-video.mp4 diff --git a/services/web/public/img/website-redesign/lock-sticker.svg b/services/web/public/img/website-redesign/lock-sticker.svg new file mode 100644 index 0000000000..1a55003232 --- /dev/null +++ b/services/web/public/img/website-redesign/lock-sticker.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/services/web/public/img/website-redesign/pen-sticker.svg b/services/web/public/img/website-redesign/pen-sticker.svg new file mode 100644 index 0000000000..391d337158 --- /dev/null +++ b/services/web/public/img/website-redesign/pen-sticker.svg @@ -0,0 +1,4 @@ + + + + diff --git a/services/web/public/img/website-redesign/support-sticker.svg b/services/web/public/img/website-redesign/support-sticker.svg new file mode 100644 index 0000000000..da3c75b05e --- /dev/null +++ b/services/web/public/img/website-redesign/support-sticker.svg @@ -0,0 +1,4 @@ + + + +