diff --git a/public/images/laconic_newsletter_dark.png b/public/images/laconic_newsletter_dark.png new file mode 100644 index 0000000..d0c9827 Binary files /dev/null and b/public/images/laconic_newsletter_dark.png differ diff --git a/public/images/laconic_newsletter_lite.png b/public/images/laconic_newsletter_lite.png new file mode 100644 index 0000000..7abbe7b Binary files /dev/null and b/public/images/laconic_newsletter_lite.png differ diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss index b533a0d..90d4291 100644 --- a/src/components/common/footer/footer.module.scss +++ b/src/components/common/footer/footer.module.scss @@ -15,13 +15,9 @@ } &--section { - @include respond-to('mobile') { - background-image: url('/images/pre-footer-mobile.png'); - background-position: 50%; - background-size: cover; - height: calc(var(--vw) * 95); - } - + background-image: url('/images/laconic_newsletter_dark.png'); + background-position: 50%; + background-size: cover; display: flex; position: relative; align-items: center; @@ -33,42 +29,6 @@ @include respond-to('mobile') { content: normal; } - - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: -1; - background: linear-gradient( - 0deg, - var(--color-black) 15%, - rgb(9 9 121 / 0) 50%, - var(--color-black) 100% - ), - linear-gradient( - 90deg, - var(--color-black) 0%, - rgb(255 255 255 / 0) 10%, - rgb(255 255 255 / 0) 50%, - rgb(255 255 255 / 0) 90%, - var(--color-black) 100% - ); - width: 100%; - height: 101%; - content: ''; - pointer-events: none; - } - - &::before { - background: radial-gradient( - ellipse farthest-corner at center center, - rgb(4 4 4 / 0) 45%, - var(--color-black) 0 - ); - width: 120%; - height: 115%; - filter: blur(tovw(80px, 'default', 40px)); - will-change: filter, transform; } h2 { @@ -85,6 +45,17 @@ pointer-events: none; user-select: none; } + + .img { + position: absolute; + top: 35px; + left: 0; + z-index: -1; + width: 100%; + height: auto; + pointer-events: none; + user-select: none; + } } .form { @@ -397,13 +368,8 @@ [data-theme='light'] { .pre__footer { &--section { - video { - mix-blend-mode: darken; - } - - @include respond-to('mobile') { - background-image: url('/images/pre-footer-mobile-light.png'); - } + background-image: url('/images/laconic_newsletter_lite.png'); + mix-blend-mode: darken; } } diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx index 0e531c5..22cb1c6 100644 --- a/src/components/common/footer/index.tsx +++ b/src/components/common/footer/index.tsx @@ -158,17 +158,6 @@ export const Footer = ({ data }: Props) => { <> {show && (
-