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

New assets, general styles

Browse Source
This commit is contained in:
Fede Álvarez 2022-05-24 20:39:57 +02:00
parent 293d900f05
commit 96f3c2651d
8 changed files with 57 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 519 KiB

17
src/components/common/header/header.module.scss
View File

@ -38,26 +38,9 @@
}
position: relative;
// &::after {
// position: absolute;
// top: 50%;
// left: tovw(-16px, 'default', -16px);
// transform: translateY(-50%);
// transition: opacity var(--duration-normal) var(--ease);
// opacity: 0;
// background: var(--color-white);
// width: tovw(7px, 'default', 7px);
// height: tovw(7px, 'default', 7px);
// content: '';
// }
}
li.active {
// &::after {
// opacity: 1;
// }
a {
font-weight: bold;
}

76
src/components/sections/careers/hero/hero.module.scss
View File

@ -21,56 +21,44 @@
}
}
.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;
.hero__container {
@include respond-to('mobile') {
min-height: unset;
}
video {
display: flex;
place-content: center;
min-height: tovw(750px, 'default', 366px);
.hero {
@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__mobile {
@include respond-to('mobile') {
display: flex;
margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
tovw(16px, 'mobile', 20px);
width: 200%;
margin: auto;
width: tovw(1380px, 'default', 700px);
padding-left: tovw(60px, 'default', 20px);
margin-top: tovw(-30px, 'default', -30px);
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;
&__mobile {
@include respond-to('mobile') {
display: flex;
margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
tovw(-20px, 'mobile', -20px);
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%
);
}
display: none;
}
}
}
.body {
@ -81,7 +69,7 @@
display: flex;
justify-content: space-between;
align-items: center;
align-items: flex-start;
margin-top: tovw(16px, 'default', 10px);
h1 {

36
src/components/sections/careers/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'
@ -16,31 +14,23 @@ interface Props {
}
const Hero = ({ data }: Props) => {
const heroVideoRef = useRef<HTMLVideoElement>(null)
return (
<Section className={s['section']} disableFadeIn>
<div className={s.gradient} />
<div className={s.video_container}>
<video
autoPlay
ref={heroVideoRef}
controls={false}
loop
muted
playsInline={true}
preload="true"
>
<source src="/videos/banner-products.webm" type="video/webm" />
<source src="/videos/banner-products.mp4" type="video/mp4" />
</video>
<div className={s.hero__container}>
<img
className={s.hero}
loading="eager"
alt="hero"
src="/images/careers/careers.png"
/>
<img
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/careers/careers.png"
/>
</div>
<img
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/products/products.jpg"
/>
<Container className={s['container']}>
<div className={s.body}>
<div>

4
src/components/sections/partners/hero/hero.module.scss
View File

@ -126,7 +126,7 @@
}
display: grid;
width: 80%;
width: tovw(440px, 'default', 270px);
margin-top: tovw(55px, 'default', 40px);
padding: 0;
list-style: none;
@ -144,7 +144,7 @@
display: flex;
position: relative;
counter-increment: custom;
gap: tovw(24px, 'default', 18px);
gap: tovw(20px, 'default', 12px);
&:first-child {
counter-reset: custom;

8
src/components/sections/partners/hero/index.tsx
View File

@ -63,16 +63,16 @@ const Hero = () => {
</p>
<ol>
<li>
<Link href="https://google.com">Validators</Link>
<Link href="#validators">Validators</Link>
</li>
<li>
<Link href="https://google.com">Service providers</Link>
<Link href="#providers">Service providers</Link>
</li>
<li>
<Link href="https://google.com">Developers</Link>
<Link href="#developers">Developers</Link>
</li>
<li>
<Link href="https://google.com">Investors</Link>
<Link href="#investors">Investors</Link>
</li>
</ol>
</div>

10
src/components/sections/partners/opportunities/index.tsx
View File

@ -10,7 +10,7 @@ const Opportunities = () => {
return (
<Section className={s['section']}>
<Container className={s['container']}>
<div className={s.block}>
<div className={s.block} id="validators">
<div className={s['header']}>
<Heading as="h2" variant="lg">
Validators
@ -46,7 +46,7 @@ const Opportunities = () => {
</li>
</ul>
</div>
<div className={s.block}>
<div className={s.block} id="providers">
<div className={s['header']}>
<Heading as="h2" variant="lg">
Service Providers
@ -82,7 +82,7 @@ const Opportunities = () => {
</li>
</ul>
</div>
<div className={s.block}>
<div className={s.block} id="developers">
<div className={s['header']}>
<Heading as="h2" variant="lg">
Developers
@ -118,7 +118,7 @@ const Opportunities = () => {
</li>
</ul>
</div>
<div className={s.block}>
<div className={s.block} id="investors">
<div className={s['header']}>
<Heading as="h2" variant="lg">
Investors
@ -154,7 +154,7 @@ const Opportunities = () => {
</li>
</ul>
</div>
<div className={s.block}>
<div className={s.block} id="testnet">
<div className={s['header']}>
<Heading as="h2" variant="lg">
Incentivized Testnet

1
src/css/global.scss
View File

@ -57,6 +57,7 @@ html {
font-variant-ligatures: common-ligatures;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-height) + 30px);
&.no-animation {
* {