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

New assets

Browse Source
This commit is contained in:
Fede Álvarez 2022-05-24 03:00:28 +02:00
parent 58f247da27
commit 6d179ca7cd
12 changed files with 198 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/careers/curiosity.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

BIN
public/images/careers/elegance.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
public/images/careers/precision.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
public/images/careers/self.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
public/images/contact/contact.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 419 KiB

BIN
public/images/press/press.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 569 KiB

4
src/components/sections/careers/values/index.tsx
View File

@ -36,7 +36,7 @@ const Network = ({ data }: Props) => {
<Section className={s['section']} id="laconicnetwork">
<Container className={s['container']}>
<div>
<img
{/* <img
className={s.network__img__mobile}
src="/images/products/network-mobile.jpg"
alt="network"
@ -45,7 +45,7 @@ const Network = ({ data }: Props) => {
className={s.network__img}
src="/images/products/network.jpg"
alt="network"
/>
/> */}
<div>
<Heading as="h2" variant="lg">
{data?.valuesHeading}

103
src/components/sections/careers/values/values.module.scss
View File

@ -11,18 +11,22 @@
.container {
@include respond-to('mobile') {
width: 100%;
padding: 0 tovw(56px, 'default', 16px);
}
position: relative;
display: flex;
justify-content: flex-end;
position: relative;
width: tovw(1076px, 'default', 400px);
div:first-child {
@include respond-to('mobile') {
width: 100%;
}
width: 100%;
h2 {
@include respond-to('mobile') {
width: tovw(200px, 'mobile');
@ -38,37 +42,56 @@
}
display: grid;
margin: 0 tovw(-60px, 'default', -260px);
margin-top: tovw(95px, 'default', 50px);
gap: tovw(55px, 'default', 30px) tovw(40px, 'default', 20px);
grid-template-columns: repeat(2, tovw(405px, 'default', 212px));
grid-template-columns: repeat(2, 1fr);
> div {
display: grid;
gap: tovw(23px, 'default', 16px);
grid-template-columns: auto 1fr;
h3 {
line-height: 1.3;
font-size: tovw(40px, 'default', 25px);
}
img {
flex: 1;
width: tovw(55px, 'default', 45px);
}
p {
@include respond-to('mobile') {
width: 100%;
font-size: tovw(18px, 'default', 18px);
padding-right: tovw(10px, 'default', 10px);
place-self: center;
width: tovw(50px, 'mobile', 80px);
}
margin: 0;
margin-top: tovw(20px, 'default', 16px);
line-height: 1.6;
color: var(--color-grey-light);
font-size: tovw(24px, 'default', 15px);
flex: 1;
width: tovw(165px, 'default', 110px);
mix-blend-mode: screen;
}
> div {
@include respond-to('mobile') {
place-self: flex-start;
}
display: flex;
flex-direction: column;
place-content: space-between;
place-self: center;
height: 85%;
h3 {
line-height: 1.3;
font-size: tovw(40px, 'default', 25px);
}
p {
@include respond-to('mobile') {
width: 100%;
font-size: tovw(18px, 'default', 18px);
padding-right: tovw(10px, 'default', 10px);
padding-top: tovw(10px, 'mobile');
}
margin: 0;
line-height: 1.6;
color: var(--color-grey-light);
font-size: tovw(24px, 'default', 15px);
}
}
&:last-child {
@ -84,29 +107,29 @@
}
}
.network__img {
@include respond-to('mobile') {
display: none;
}
// .network__img {
// @include respond-to('mobile') {
// display: none;
// }
position: absolute;
bottom: tovw(-300px, 'default', -300px);
z-index: -1;
right: tovw(750px, 'default', 50px);
width: tovw(920px, 'default', 350px);
mix-blend-mode: screen;
}
// position: absolute;
// bottom: tovw(-300px, 'default', -300px);
// z-index: -1;
// right: tovw(750px, 'default', 50px);
// width: tovw(920px, 'default', 350px);
// mix-blend-mode: screen;
// }
.network__img__mobile {
@include respond-to('mobile') {
display: unset;
margin: tovw(60px, 'mobile') 0 tovw(40px, 'mobile') 0;
width: 100%;
mix-blend-mode: screen;
}
// .network__img__mobile {
// @include respond-to('mobile') {
// display: unset;
// margin: tovw(60px, 'mobile') 0 tovw(40px, 'mobile') 0;
// width: 100%;
// mix-blend-mode: screen;
// }
display: none;
}
// display: none;
// }
}
.gradient {

104
src/components/sections/contact/hero/hero.module.scss
View File

@ -24,61 +24,71 @@
justify-content: center;
}
.video_container {
// .video_container {
// @include respond-to('mobile') {
// margin-top: unset;
// }
// display: flex;
// align-self: center;
// position: relative;
// margin-top: tovw(-165px, 'default');
// margin-bottom: tovw(-140px, 'default');
// padding-top: tovw(30px, 'default', 20px);
// width: 82%;
// mix-blend-mode: lighten;
// video {
// @include respond-to('mobile') {
// display: none;
// }
// 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 {
@include respond-to('mobile') {
margin-top: unset;
display: none;
}
display: flex;
align-self: center;
position: relative;
margin-top: tovw(-165px, 'default');
margin-bottom: tovw(-140px, 'default');
padding-top: tovw(30px, 'default', 20px);
width: 82%;
mix-blend-mode: lighten;
place-self: center;
width: tovw(1516px, 'default', 800px);
mix-blend-mode: screen;
video {
&__mobile {
@include respond-to('mobile') {
display: none;
display: flex;
margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
tovw(16px, 'mobile', 20px);
width: 200%;
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(
0deg,
rgb(255 255 255 / 0) 0%,
rgb(0 0 0) 25%
);
}
width: 100%;
display: none;
}
&::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 {
@include respond-to('mobile') {
display: flex;
margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
tovw(16px, 'mobile', 20px);
width: 200%;
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(
0deg,
rgb(255 255 255 / 0) 0%,
rgb(0 0 0) 25%
);
}
display: none;
}
.body {

20
src/components/sections/contact/hero/index.tsx
View File

@ -1,5 +1,3 @@
import { useRef } from 'react'
import { Arrow } from '~/components/icons/arrow'
import Line from '~/components/icons/line'
import { Discord } from '~/components/icons/socials'
@ -21,13 +19,19 @@ interface Props {
}
const Hero = ({ data }: Props) => {
const heroVideoRef = useRef<HTMLVideoElement>(null)
// const heroVideoRef = useRef<HTMLVideoElement>(null)
return (
<Section className={s['section']} disableFadeIn>
<div className={s.gradient} />
<div className={s.video_container}>
<video
{/* <div className={s.video_container}> */}
<img
className={s.hero}
loading="eager"
alt="hero"
src="/images/contact/contact.png"
/>
{/* <video
autoPlay
ref={heroVideoRef}
controls={false}
@ -38,13 +42,13 @@ const Hero = ({ data }: Props) => {
>
<source src="/videos/banner-products.webm" type="video/webm" />
<source src="/videos/banner-products.mp4" type="video/mp4" />
</video>
</div>
</video> */}
{/* </div> */}
<img
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/products/products.jpg"
src="/images/contact/contact.png"
/>
<Container className={s['container']}>
<div className={s.body}>

99
src/components/sections/newsroom/hero/hero.module.scss
View File

@ -21,56 +21,65 @@
}
}
.video_container {
align-self: center;
position: relative;
margin-top: tovw(-165px, 'default');
margin-bottom: tovw(-140px, 'default');
padding-top: tovw(30px, 'default', 20px);
width: 82%;
mix-blend-mode: lighten;
// .video_container {
// align-self: center;
// position: relative;
// margin-top: tovw(-165px, 'default');
// margin-bottom: tovw(-140px, 'default');
// padding-top: tovw(30px, 'default', 20px);
// width: 82%;
// mix-blend-mode: lighten;
video {
// video {
// @include respond-to('mobile') {
// display: none;
// }
// 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 {
@include respond-to('mobile') {
display: none;
}
place-self: center;
width: tovw(1300px, 'default', 700px);
mix-blend-mode: screen;
&__mobile {
@include respond-to('mobile') {
display: none;
display: flex;
margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0;
width: 135%;
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(
0deg,
rgb(255 255 255 / 0) 0%,
rgb(0 0 0) 25%
);
}
width: 100%;
display: none;
}
&::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 {
@include respond-to('mobile') {
display: flex;
margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
tovw(16px, 'mobile', 20px);
width: 200%;
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(
0deg,
rgb(255 255 255 / 0) 0%,
rgb(0 0 0) 25%
);
}
display: none;
}
.body {

16
src/components/sections/newsroom/hero/index.tsx
View File

@ -1,5 +1,3 @@
import { useRef } from 'react'
import { Arrow } from '~/components/icons/arrow'
import Line from '~/components/icons/line'
import { Container } from '~/components/layout/container'
@ -17,12 +15,18 @@ import s from './hero.module.scss'
// }
const Hero = () => {
const heroVideoRef = useRef<HTMLVideoElement>(null)
// const heroVideoRef = useRef<HTMLVideoElement>(null)
return (
<Section className={s['section']} disableFadeIn>
<div className={s.gradient} />
<div className={s.video_container}>
<img
className={s.hero}
loading="eager"
alt="hero"
src="/images/press/press.png"
/>
{/* <div className={s.video_container}>
<video
autoPlay
ref={heroVideoRef}
@ -35,12 +39,12 @@ const Hero = () => {
<source src="/videos/banner-products.webm" type="video/webm" />
<source src="/videos/banner-products.mp4" type="video/mp4" />
</video>
</div>
</div> */}
<img
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/products/products.jpg"
src="/images/press/press.png"
/>
<Container className={s['container']}>
<div className={s.body}>