+
@@ -263,21 +324,26 @@ const Headline: FC = ({ headline, darkTheme, russianView }) => {
+
{contributorsTxt}
diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
index 2a449e9..4178634 100644
--- a/src/components/Modal/Modal.module.scss
+++ b/src/components/Modal/Modal.module.scss
@@ -30,7 +30,7 @@
position: relative;
z-index: 80;
border-radius: 4px;
- background-image: url('/keepsimple_/assets/landingPage/landing-bg.png');
+ background-image: url('/keepsimple_/assets/landingPage/landing-bg.webp');
.header {
.hadBorder {
diff --git a/src/components/SettingsModal/SettingsModal.module.scss b/src/components/SettingsModal/SettingsModal.module.scss
index f309469..7992973 100644
--- a/src/components/SettingsModal/SettingsModal.module.scss
+++ b/src/components/SettingsModal/SettingsModal.module.scss
@@ -87,7 +87,7 @@
max-width: 480px !important;
width: 480px !important;
border-radius: 0;
- background-image: url('/keepsimple_/assets/landingPage/landing-bg.png') !important;
+ background-image: url('/keepsimple_/assets/landingPage/landing-bg.webp') !important;
> div:first-child > span:first-child {
text-transform: uppercase;
@@ -104,7 +104,7 @@
// Dark mode
:global(.darkTheme) {
.ModalWrapper {
- background-image: url('/keepsimple_/assets/landingPage/landing-dark-bg.png') !important;
+ background-image: url('/keepsimple_/assets/landingPage/landing-dark-bg.webp') !important;
> div:first-child > span:first-child {
color: #fff;
diff --git a/src/components/SupporterContainer/SupporterContainer.module.scss b/src/components/SupporterContainer/SupporterContainer.module.scss
index b676bc3..51dcc19 100644
--- a/src/components/SupporterContainer/SupporterContainer.module.scss
+++ b/src/components/SupporterContainer/SupporterContainer.module.scss
@@ -8,7 +8,7 @@
opacity: 0;
.wrapper {
- background-image: url('/keepsimple_/assets/landingPage/landing-bg.png');
+ background-image: url('/keepsimple_/assets/landingPage/landing-bg.webp');
width: 100%;
border: 1px solid #dad6d4;
max-width: 367px;
diff --git a/src/components/SupporterContainer/SupporterContainer.tsx b/src/components/SupporterContainer/SupporterContainer.tsx
index 370e070..0504188 100644
--- a/src/components/SupporterContainer/SupporterContainer.tsx
+++ b/src/components/SupporterContainer/SupporterContainer.tsx
@@ -1,4 +1,5 @@
import cn from 'classnames';
+import Image from 'next/image';
import { FC } from 'react';
import styles from './SupporterContainer.module.scss';
@@ -41,7 +42,7 @@ const SupporterContainer: FC
- 
= ({ usedBy, darkTheme, title }) => {
@@ -30,6 +32,17 @@ const UsedBy: FC = ({ usedBy, darkTheme, title }) => {
triggerOnce: true,
threshold: 0.2,
});
+ const strapiUrl = process.env.NEXT_PUBLIC_STRAPI;
+ const darkImageUrl = usedBy?.dark_image?.data?.attributes?.url;
+ const imageUrl = usedBy?.image?.data?.attributes?.url;
+ const src =
+ darkTheme && darkImageUrl
+ ? `${strapiUrl}${darkImageUrl}`
+ : imageUrl
+ ? `${strapiUrl}${imageUrl}`
+ : '';
+
+ if (!src) return null;
return (
= ({ usedBy, darkTheme, title }) => {
width={1920}
height={250}
className={styles.img}
- src={
- darkTheme
- ? '/keepsimple_/assets/logos-line-large-dark.png'
- : '/keepsimple_/assets/logos-line-large.png'
- }
+ src={src}
alt={'Logos'}
/>
@@ -67,11 +76,7 @@ const UsedBy: FC
{isHabitsItem(item) && (
- = ({
)}
)}
-