mirror of
https://github.com/LaconicNetwork/laconic.com.git
synced 2026-09-07 00:04:07 +00:00
New heros etc
This commit is contained in:
Fede Álvarez
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -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: '';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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: '';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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: '';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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') {
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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: '';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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']}>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user