diff --git a/services/web/frontend/stylesheets/app/cms-page.less b/services/web/frontend/stylesheets/app/cms-page.less
index 4191d5170c..e4af549ab5 100644
--- a/services/web/frontend/stylesheets/app/cms-page.less
+++ b/services/web/frontend/stylesheets/app/cms-page.less
@@ -458,3 +458,34 @@
}
}
}
+
+.website-redesign {
+ // mobile breakpoint is md in website redesign
+ @media (max-width: @screen-sm-max) {
+ .col-xs-padding-sm {
+ .col-xs-12:not(:first-child) {
+ padding-top: @padding-sm;
+ }
+ }
+ .col-xs-padding-md {
+ .col-xs-12:not(:first-child) {
+ padding-top: @padding-md;
+ }
+ }
+ .col-xs-padding-lg {
+ .col-xs-12:not(:first-child) {
+ padding-top: @padding-lg;
+ }
+ }
+ .col-xs-padding-xl {
+ .col-xs-12:not(:first-child) {
+ padding-top: @padding-xl;
+ }
+ }
+ .col-xs-padding-xxl {
+ .col-xs-12:not(:first-child) {
+ padding-top: @padding-xxl;
+ }
+ }
+ }
+}
diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less
index f7e5c7e8bf..7b792b7fef 100644
--- a/services/web/frontend/stylesheets/app/website-redesign.less
+++ b/services/web/frontend/stylesheets/app/website-redesign.less
@@ -1,11 +1,21 @@
.website-redesign {
p,
+ h1,
h2,
h3,
- a {
+ h4,
+ a,
+ strong,
+ span {
font-family: 'Noto Sans', sans-serif;
}
+ h1 {
+ font-size: 3rem;
+ font-weight: 600;
+ line-height: 4rem;
+ }
+
h2 {
font-weight: 600;
font-size: 2.25rem;
@@ -133,6 +143,11 @@
}
.features-card-description {
+ h3 {
+ font-size: 1.875rem; // 30px
+ line-height: 2.5rem; // 40px
+ }
+
p {
margin-bottom: 10px;
}
@@ -143,11 +158,10 @@
margin: 0;
li {
- margin-bottom: 8px;
+ margin-bottom: 16px;
+ display: flex;
@media (max-width: @screen-sm-max) {
- display: flex;
-
i {
height: 25px; // force height if text wraps to multiple lines
}
@@ -157,6 +171,18 @@
height: 20px; // force height if text wraps to multiple lines
}
}
+
+ h4 {
+ display: flex;
+ margin-top: 0;
+ margin-bottom: 8px;
+ font-size: 20px;
+ font-weight: 600;
+ }
+
+ p {
+ margin-bottom: 0;
+ }
}
}
}
@@ -166,6 +192,7 @@
.top-image-card {
> img.img-responsive {
width: 100%;
+ border-radius: 8px;
}
.top-image-card-title {
@@ -178,6 +205,7 @@
color: var(--neutral-90);
display: inline-flex;
justify-content: space-between;
+ text-decoration: none;
}
i.material-symbols-rounded {
@@ -207,8 +235,12 @@
color: var(--white);
border-radius: 8px;
+ @media (max-width: @screen-sm-max) {
+ padding: 48px 24px 48px 24px;
+ }
+
.cta-card-title {
- font-size: 52px;
+ font-size: 3.25rem; // 52px
font-weight: 500;
font-family: 'DM Mono', monospace;
margin-bottom: 8px;
@@ -220,12 +252,85 @@
span.lime-color {
color: #7ee787;
}
+
+ @media (max-width: @screen-sm-max) {
+ font-size: 2.25rem; // 36px
+ }
}
- .cta-card-buttons {
- margin-top: 24px;
+ .cta-card-quote {
+ font-size: 1.875rem; // 30px
+ font-weight: 600;
+ line-height: 2.5rem; // 40px
+ letter-spacing: 0em;
+ text-align: center;
+ }
+ }
+
+ .quote-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 48px;
+ background: #2f4858;
+ color: white;
+ border-radius: 16px;
+
+ .quote-card-quote {
+ font-size: 1.875rem; // 30px
+ font-weight: 600;
+ line-height: 2.5rem; // 40px
+ letter-spacing: 0em;
+ text-align: center;
+
+ @media (max-width: @screen-sm-max) {
+ font-size: 1.5rem; // 24px
+ line-height: 2rem; // 32px
+ }
+ }
+
+ .quote-card-img {
+ margin-top: 32px;
+ margin-bottom: 16px;
+ }
+
+ @media (max-width: @screen-sm-max) {
+ padding: 56px 24px 56px 24px;
+ }
+ }
+
+ .integrations-card {
+ h3 {
display: flex;
- gap: 12px;
+ align-items: center;
+
+ @media (max-width: @screen-sm-max) {
+ .label-premium {
+ margin-left: auto;
+ height: 20px;
+ }
+ }
+ }
+
+ .integrations-icons {
+ img {
+ width: 6rem; // 96px
+ height: 6rem; // 96px
+ }
+
+ .first-row,
+ .second-row {
+ display: flex;
+ }
+
+ .first-row {
+ justify-content: space-between;
+ }
+
+ .second-row {
+ margin-top: 40px;
+ justify-content: space-evenly;
+ }
}
}
@@ -288,6 +393,12 @@
font-weight: 500;
line-height: 1.5rem;
margin: 0;
+
+ ~ h1,
+ ~ h2,
+ ~ h3 {
+ margin-top: 8px;
+ }
}
.green-link {
@@ -322,6 +433,8 @@
top: 4px;
vertical-align: middle;
margin-right: 8px;
+ width: 25px;
+ height: 25px;
}
.green-round-background {
@@ -376,4 +489,34 @@
}
}
}
+
+ .circle-img {
+ height: 64px;
+ max-width: 64px;
+ }
+
+ .premium-badge {
+ .premium-badge-img {
+ margin-left: 10px;
+ }
+
+ @media (max-width: @screen-xs-max) {
+ display: flex;
+ .premium-badge-img {
+ width: 87px;
+ margin-left: auto;
+ }
+ }
+ }
+
+ .responsive-button-container {
+ display: flex;
+ margin-top: 24px;
+ gap: 16px;
+
+ @media (max-width: @screen-sm-max) {
+ flex-direction: column;
+ width: 100%;
+ }
+ }
}
diff --git a/services/web/public/img/advocates/aicheler.jpg b/services/web/public/img/advocates/aicheler.jpg
new file mode 100644
index 0000000000..9fa5dc3ff6
Binary files /dev/null and b/services/web/public/img/advocates/aicheler.jpg differ
diff --git a/services/web/public/img/third-party-icons/dropbox-round.svg b/services/web/public/img/third-party-icons/dropbox-round.svg
new file mode 100644
index 0000000000..7bb7372b5c
--- /dev/null
+++ b/services/web/public/img/third-party-icons/dropbox-round.svg
@@ -0,0 +1,23 @@
+
diff --git a/services/web/public/img/third-party-icons/mendeley.svg b/services/web/public/img/third-party-icons/mendeley.svg
new file mode 100644
index 0000000000..1d08234b73
--- /dev/null
+++ b/services/web/public/img/third-party-icons/mendeley.svg
@@ -0,0 +1,3 @@
+
diff --git a/services/web/public/img/third-party-icons/mendely.png b/services/web/public/img/third-party-icons/mendely.png
deleted file mode 100644
index 5f98fa81b4..0000000000
Binary files a/services/web/public/img/third-party-icons/mendely.png and /dev/null differ
diff --git a/services/web/public/img/third-party-icons/zotero.png b/services/web/public/img/third-party-icons/zotero.png
deleted file mode 100644
index c6c4221605..0000000000
Binary files a/services/web/public/img/third-party-icons/zotero.png and /dev/null differ
diff --git a/services/web/public/img/third-party-icons/zotero.svg b/services/web/public/img/third-party-icons/zotero.svg
new file mode 100644
index 0000000000..497c1c0720
--- /dev/null
+++ b/services/web/public/img/third-party-icons/zotero.svg
@@ -0,0 +1,9 @@
+