diff --git a/public/images/gradient_line_dark.png b/public/images/gradient_line_dark.png new file mode 100644 index 0000000..68a35a4 Binary files /dev/null and b/public/images/gradient_line_dark.png differ diff --git a/public/images/gradient_line_lite.png b/public/images/gradient_line_lite.png new file mode 100644 index 0000000..e401726 Binary files /dev/null and b/public/images/gradient_line_lite.png differ diff --git a/public/images/products/watchers-light.png b/public/images/products/watchers-light.png new file mode 100644 index 0000000..3e4c339 Binary files /dev/null and b/public/images/products/watchers-light.png differ diff --git a/public/videos/banner-about-light.mp4 b/public/videos/banner-about-light.mp4 index 4c3e569..29d0802 100644 Binary files a/public/videos/banner-about-light.mp4 and b/public/videos/banner-about-light.mp4 differ diff --git a/public/videos/banner-about-light.webm b/public/videos/banner-about-light.webm index 54fd154..e16bd66 100644 Binary files a/public/videos/banner-about-light.webm and b/public/videos/banner-about-light.webm differ diff --git a/public/videos/banner-about.mp4 b/public/videos/banner-about.mp4 index 89f9ea8..b32939f 100644 Binary files a/public/videos/banner-about.mp4 and b/public/videos/banner-about.mp4 differ diff --git a/public/videos/banner-about.webm b/public/videos/banner-about.webm index b41adba..49e9be2 100644 Binary files a/public/videos/banner-about.webm and b/public/videos/banner-about.webm differ diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss index cdc8aff..7451ac5 100644 --- a/src/components/common/footer/footer.module.scss +++ b/src/components/common/footer/footer.module.scss @@ -18,7 +18,6 @@ background-image: url('/images/laconic_newsletter_dark.png'); background-position: 50%; background-size: contain; - mix-blend-mode: lighten; display: flex; position: relative; align-items: center; @@ -111,7 +110,7 @@ .line { @include respond-to('mobile') { - display: none; + display: block; } position: absolute; @@ -351,6 +350,16 @@ } } +.gradient_line { + position: absolute; + right: calc(50% - 5px); + top: -40px; + background-image: url('/images/gradient_line_dark.png'); + background-size: contain; + width: 10px; + height: 88px; +} + [data-theme='light'] { .pre__footer { &--section { @@ -359,6 +368,14 @@ } } + .gradient_line { + background-image: url('/images/gradient_line_lite.png'); + right: calc(50% - 1.5px); + width: 3px; + height: 88px; + mix-blend-mode: darken; + } + .footer { a { color: var(--color-white); diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx index 22cb1c6..c1e479f 100644 --- a/src/components/common/footer/index.tsx +++ b/src/components/common/footer/index.tsx @@ -158,6 +158,7 @@ export const Footer = ({ data }: Props) => { <> {show && (
+