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 @@
+