LaconicNetwork/laconic.com
6
0
Fork 0
mirror of https://github.com/LaconicNetwork/laconic.com.git synced 2026-09-07 23:34:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

New heros etc

Browse Source
This commit is contained in:
Fede Álvarez
2022-06-29 19:11:25 +02:00
parent 03d1d94131
commit 2abb05965e
35 changed files with 218 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/about/hero/hero.module.scss
+5 -6
View File
@@ -43,11 +43,10 @@
position: relative;
align-self: center;
width: 101%;
min-height: tovw(875px, 'default', 414px);
margin-top: tovw(-180px, 'default');
margin-bottom: tovw(-165px, 'default');
width: 115%;
max-height: tovw(380px, 'default', 180px);
padding-top: tovw(30px, 'default', 20px);
margin-bottom: 50px;
mix-blend-mode: lighten;
video {
@@ -69,11 +68,11 @@
background: radial-gradient(
ellipse,
rgb(3 3 3 / 0) 50%,
rgb(3 3 3 / 1) 72%,
rgb(3 3 3 / 1) 70%,
rgb(3 3 3 / 1) 100%
);
width: 101%;
height: 100%;
height: tovw(390px, 'default', 200px);
content: '';
}
}
src/components/sections/blog/hero/hero.module.scss
+2 -3
View File
@@ -10,10 +10,9 @@
rgb(0 0 244 / 0.9) 1.63%,
rgb(0 0 244 / 0) 65.89%
);
padding-top: tovw(185px, 'default', 104px);
padding-bottom: tovw(92px, 'default', 40px);
padding-top: tovw(220px, 'default', 160px);
padding-bottom: tovw(40px, 'default', 20px);
max-width: 100%;
min-height: calc(var(--vh) * 100);
text-align: center;
@media screen and (max-width: 800px) {
src/components/sections/blog/search/search.module.scss
+1 -1
View File
@@ -4,7 +4,7 @@
display: flex;
align-items: flex-end;
justify-content: space-between;
padding-top: tovw(108px, 'default', 64px);
padding-top: tovw(70px, 'default', 30px);
@media screen and (max-width: 800px) {
flex-direction: column-reverse;
src/components/sections/careers/hero/hero.module.scss
+6 -8
View File
@@ -28,11 +28,9 @@
position: relative;
align-self: center;
width: 75%;
margin-left: tovw(165px, 'default', 125px);
min-height: tovw(790px, 'default', 380px);
margin-top: tovw(-45px, 'default');
padding-top: tovw(30px, 'default', 20px);
width: 105%;
max-height: tovw(470px, 'default', 210px);
margin-bottom: tovw(50px, 'default', 40px);
mix-blend-mode: lighten;
video {
@@ -56,9 +54,9 @@
rgb(3 3 3 / 1) 70%,
rgb(3 3 3 / 1) 100%
);
transform: translateX(-20%) translateY(-3%);
width: 400%;
height: 102%;
transform: translateX(-30%) translateY(-3%);
width: 650%;
height: tovw(495px, 'default', 200px);
content: '';
}
}
src/components/sections/community/hero/hero.module.scss
+23 -16
View File
@@ -18,6 +18,7 @@
gap: tovw(155px, 'default', 80px) tovw(130px, 'default', 30px);
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
padding-bottom: tovw(115px, 'default', 55px);
.hero__container {
@include respond-to('mobile') {
@@ -49,9 +50,9 @@
}
position: absolute;
right: tovw(630px, 'default', 80px);
right: tovw(570px, 'default', 80px);
z-index: -3;
padding-top: tovw(250px, 'default', 90px);
padding-top: tovw(150px, 'default', 90px);
video {
@include respond-to('mobile') {
@@ -59,9 +60,15 @@
}
z-index: -1;
width: tovw(1750px, 'default', 800px);
width: tovw(1900px, 'default', 800px);
pointer-events: none;
user-select: none;
mask-image: radial-gradient(
ellipse,
rgb(3 3 3 / 1) 5%,
rgb(3 3 3 / 1) 30%,
rgb(3 3 3 / 0) 60%
);
}
&::after {
@@ -78,19 +85,19 @@
height: 100%;
}
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
background: radial-gradient(
ellipse,
rgb(3 3 3 / 0) 25%,
rgb(3 3 3 / 0.9648) 60%,
rgb(3 3 3 / 1) 95%
);
width: 100%;
height: 80%;
content: '';
// position: absolute;
// bottom: 0;
// left: 0;
// z-index: 1;
// background: radial-gradient(
// ellipse,
// rgb(3 3 3 / 0) 25%,
// rgb(3 3 3 / 0.9648) 60%,
// rgb(3 3 3 / 1) 95%
// );
// width: 100%;
// height: 100%;
// content: '';
}
}
src/components/sections/contact/hero/hero.module.scss
+40 -7
View File
@@ -24,16 +24,49 @@
justify-content: center;
}
.hero__container {
.video_container {
@include respond-to('mobile') {
min-height: tovw(400px, 'mobile', 510px);
min-height: unset;
}
display: flex;
place-content: center;
margin-top: tovw(-210px, 'default', -220px);
margin-bottom: tovw(-60px, 'default', -70px);
min-height: tovw(925px, 'default', 485px);
position: relative;
align-self: center;
width: 120%;
max-height: tovw(650px, 'default', 320px);
margin-bottom: tovw(240px, 'default', 180px);
margin-top: tovw(-175px, 'default', -185px);
mix-blend-mode: lighten;
video {
@include respond-to('mobile') {
display: none;
}
width: 100%;
margin: auto;
z-index: 1;
mask-size: 250% 100%;
mask-position: center center;
mask-repeat: no-repeat;
mask-image: radial-gradient(
ellipse,
rgb(3 3 3 / 1) 40%,
rgb(3 3 3 / 0) 85%,
rgb(3 3 3 / 0) 100%
);
}
}
.hero__container {
@include respond-to('mobile') {
display: flex;
place-content: center;
margin-top: tovw(-210px, 'default', -220px);
margin-bottom: tovw(-60px, 'default', -70px);
min-height: tovw(925px, 'default', 485px);
}
display: none;
.hero {
@include respond-to('mobile') {
src/components/sections/contact/hero/index.tsx
+29 -13
View File
@@ -1,5 +1,5 @@
import { useTheme } from 'next-themes'
import { useEffect, useRef } from 'react'
import { useEffect, useRef, useState } from 'react'
import { Arrow } from '~/components/icons/arrow'
import Line from '~/components/icons/line'
@@ -24,17 +24,26 @@ interface Props {
const Hero = ({ data }: Props) => {
const { theme } = useTheme()
const contactHeroRef = useRef<HTMLImageElement>(null)
const [webmSource, setWebmSource] = useState('')
const [mp4Source, setMp4Source] = useState('')
useEffect(() => {
if (theme === 'dark') {
setWebmSource('/videos/banner-contact.webm')
setMp4Source('/videos/banner-contact.mp4')
}
if (theme === 'light') {
setWebmSource('/videos/banner-contact-light.webm')
setMp4Source('/videos/banner-contact-light.mp4')
}
}, [theme])
const contactHeroMobileRef = useRef<HTMLImageElement>(null)
useEffect(() => {
if (!contactHeroRef.current) return
if (!contactHeroMobileRef.current) return
contactHeroRef.current.src =
theme === 'dark'
? '/images/contact/banner-contact.png'
: '/images/contact/banner-contact-light.png'
contactHeroMobileRef.current.src =
theme === 'dark'
? '/images/contact/banner-contact.png'
@@ -44,13 +53,20 @@ const Hero = ({ data }: Props) => {
return (
<Section className={s['section']} disableFadeIn>
<div className={s.gradient} />
<div className={s['video_container']}>
<video
key={mp4Source}
autoPlay
controls={false}
muted
playsInline={true}
preload="true"
>
<source src={webmSource} type="video/webm" />
<source src={mp4Source} type="video/mp4" />
</video>
</div>
<div className={s.hero__container}>
<img
ref={contactHeroRef}
className={s.hero}
loading="eager"
alt="hero"
/>
<img
ref={contactHeroMobileRef}
className={s.hero__mobile}
src/components/sections/newsroom/hero/hero.module.scss
+10 -19
View File
@@ -28,10 +28,9 @@
position: relative;
align-self: center;
width: 70%;
min-height: tovw(770px, 'default', 370px);
margin-top: tovw(-30px, 'default');
padding-top: tovw(30px, 'default', 20px);
width: 85%;
max-height: tovw(450px, 'default', 210px);
margin-bottom: tovw(120px, 'default', 80px);
mix-blend-mode: lighten;
video {
@@ -42,23 +41,15 @@
width: 100%;
margin: auto;
z-index: 1;
}
&::after {
position: absolute;
top: tovw(10px, 'default', 10px);
left: 0;
z-index: 1;
mix-blend-mode: overlay;
background: radial-gradient(
mask-size: 250% 100%;
mask-position: center center;
mask-repeat: no-repeat;
mask-image: radial-gradient(
ellipse,
rgb(3 3 3 / 0) 50%,
rgb(3 3 3 / 1) 72%,
rgb(3 3 3 / 1) 100%
rgb(3 3 3 / 1) 40%,
rgb(3 3 3 / 0) 85%,
rgb(3 3 3 / 0) 100%
);
width: 101%;
height: 90%;
content: '';
}
}
src/components/sections/partners/hero/hero.module.scss
+53 -3
View File
@@ -21,14 +21,46 @@
}
}
.video_container {
@include respond-to('mobile') {
min-height: unset;
}
position: relative;
align-self: center;
width: 101%;
max-height: tovw(450px, 'default', 200px);
margin-bottom: tovw(65px, 'default', 60px);
mix-blend-mode: lighten;
video {
@include respond-to('mobile') {
display: none;
}
width: 100%;
margin: auto;
z-index: 1;
mask-size: 250% 100%;
mask-position: center center;
mask-repeat: no-repeat;
mask-image: radial-gradient(
ellipse,
rgb(3 3 3 / 1) 40%,
rgb(3 3 3 / 0) 85%,
rgb(3 3 3 / 0) 100%
);
}
}
.hero__container {
@include respond-to('mobile') {
display: flex;
place-content: center;
min-height: tovw(400px, 'mobile', 480px);
}
display: flex;
place-content: center;
min-height: tovw(650px, 'default', 320px);
display: none;
.hero {
@include respond-to('mobile') {
@@ -186,3 +218,21 @@
height: tovw(740px, 'default', 740px);
}
}
[data-theme='light'] {
.video_container {
mix-blend-mode: darken;
&::after {
display: none;
}
}
.hero__container {
mix-blend-mode: darken;
}
.gradient {
display: none;
}
}
src/components/sections/partners/hero/index.tsx
+46 -7
View File
@@ -1,3 +1,6 @@
import { useTheme } from 'next-themes'
import { useEffect, useRef, useState } from 'react'
import { Arrow } from '~/components/icons/arrow'
import { Container } from '~/components/layout/container'
import Section from '~/components/layout/section'
@@ -15,21 +18,57 @@ interface Props {
}
const Hero = ({ data }: Props) => {
const { theme } = useTheme()
const [webmSource, setWebmSource] = useState('')
const [mp4Source, setMp4Source] = useState('')
useEffect(() => {
if (theme === 'dark') {
setWebmSource('/videos/banner-partners.webm')
setMp4Source('/videos/banner-partners.mp4')
}
if (theme === 'light') {
setWebmSource('/videos/banner-partners-light.webm')
setMp4Source('/videos/banner-partners-light.mp4')
}
}, [theme])
const partnersHeroMobileRef = useRef<HTMLImageElement>(null)
useEffect(() => {
if (!partnersHeroMobileRef.current) return
partnersHeroMobileRef.current.src =
theme === 'dark'
? '/images/partners/partners.png'
: '/images/partners/partners.png'
}, [theme])
return (
<Section className={s['section']} disableFadeIn>
<div className={s.gradient} />
<div className={s['video_container']}>
<video
key={mp4Source}
autoPlay
controls={false}
loop
muted
playsInline={true}
preload="true"
>
<source src={webmSource} type="video/webm" />
<source src={mp4Source} type="video/mp4" />
</video>
</div>
<div className={s.hero__container}>
<img
className={s.hero}
loading="eager"
alt="hero"
src="/images/partners/partners.png"
/>
<img
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/partners/partners.png"
ref={partnersHeroMobileRef}
/>
</div>
<Container className={s['container']}>
src/components/sections/products/hero/hero.module.scss
+3 -21
View File
@@ -28,11 +28,9 @@
align-self: center;
position: relative;
width: 82%;
min-height: tovw(925px, 'default', 435px);
margin-top: tovw(-175px, 'default');
margin-bottom: tovw(-180px, 'default');
padding-top: tovw(30px, 'default', 20px);
width: 102%;
max-height: tovw(380px, 'default', 210px);
margin-bottom: tovw(110px, 'default', 20px);
mix-blend-mode: lighten;
video {
@@ -42,22 +40,6 @@
width: 100%;
}
&::after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: radial-gradient(
ellipse,
rgb(3 3 3 / 0) 60%,
rgb(3 3 3 / 1) 75%,
rgb(3 3 3 / 1) 100%
);
width: 100%;
height: 100%;
content: '';
}
}
.hero__mobile {