LaconicNetwork/laconic-dot-com
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New assets, general styles

Browse Source
This commit is contained in:
Fede Álvarez 2022-06-14 11:06:35 +02:00
parent 1e73411877
commit ea95c606a2
14 changed files with 77 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/benefit-mobile-01-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

BIN
public/images/benefit-mobile-02-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

BIN
public/videos/banner-about-light.mp4
View File

Binary file not shown.

BIN
public/videos/banner-about-light.webm
View File

Binary file not shown.

BIN
public/videos/banner-careers.mp4 Normal file
View File

Binary file not shown.

BIN
public/videos/banner-careers.webm Normal file
View File

Binary file not shown.

2
src/components/sections/about/hero/hero.module.scss
View File

@ -43,7 +43,7 @@
position: relative;
align-self: center;
width: 102%;
width: 101%;
min-height: tovw(875px, 'default', 414px);
margin-top: tovw(-165px, 'default');
padding-top: tovw(30px, 'default', 20px);

2
src/components/sections/about/hero/index.tsx
View File

@ -28,6 +28,8 @@ const Hero = ({ data }: Props) => {
const [mp4Source, setMp4Source] = useState('')
useEffect(() => {
if (!theme) return
if (theme === 'dark') {
setWebmSource('/videos/banner-about.webm')
setMp4Source('/videos/banner-about.mp4')

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

@ -33,6 +33,7 @@
min-height: tovw(790px, 'default', 380px);
margin-top: tovw(-30px, 'default');
padding-top: tovw(30px, 'default', 20px);
mix-blend-mode: lighten;
video {
@include respond-to('mobile') {
@ -52,12 +53,12 @@
background: radial-gradient(
ellipse,
rgb(3 3 3 / 0) 40%,
rgb(3 3 3 / 1) 62%,
rgb(3 3 3 / 1) 70%,
rgb(3 3 3 / 1) 100%
);
transform: translateX(-25%);
width: 200%;
height: 100%;
transform: translateX(-20%) translateY(-3%);
width: 400%;
height: 102%;
content: '';
}
}
@ -204,6 +205,7 @@
rgb(251 251 251 / 1) 62%,
rgb(251 251 251 / 1) 100%
);
transform: translateX(-20%);
}
}

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

@ -24,8 +24,8 @@ const Hero = ({ data }: Props) => {
useEffect(() => {
if (theme === 'dark') {
setWebmSource('/videos/banner-careers-light.webm')
setMp4Source('/videos/banner-careers-light.mp4')
setWebmSource('/videos/banner-careers.webm')
setMp4Source('/videos/banner-careers.mp4')
}
if (theme === 'light') {

1
src/components/sections/homepage/benefits/benefits.module.scss
View File

@ -243,7 +243,6 @@
.benefit {
&__image {
filter: invert(100%) saturate(0%);
mix-blend-mode: darken;
}
}

79
src/components/sections/homepage/benefits/icons.tsx
View File

@ -10,18 +10,18 @@ const Icon01 = ({ className, fill }: { className?: string; fill?: string }) => {
cx="12.5"
cy="12.5"
r="9.5"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
/>
<path
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
strokeLinecap="square"
d="M19.414 20 27 27.586"
/>
<path
d="M8 11.652 12.546 16 23 6"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
strokeLinecap="round"
/>
@ -41,19 +41,19 @@ const Icon02 = ({ className, fill }: { className?: string; fill?: string }) => {
cx="16"
cy="16"
r="12"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
/>
<circle
cx="16"
cy="16"
r="6"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
/>
<circle cx="16" cy="16" r="2" fill={fill || 'var(--color-white)'} />
<circle cx="7" cy="24" r="3" fill={fill || 'var(--color-white)'} />
<circle cx="25" cy="8" r="4" fill={fill || 'var(--color-white)'} />
<circle cx="16" cy="16" r="2" fill={fill || 'var(--color-accent-boke)'} />
<circle cx="7" cy="24" r="3" fill={fill || 'var(--color-accent-boke)'} />
<circle cx="25" cy="8" r="4" fill={fill || 'var(--color-accent-boke)'} />
</svg>
)
}
@ -69,22 +69,27 @@ const Icon03 = ({ className, fill }: { className?: string; fill?: string }) => {
<g clipPath="url(#icon03)">
<path
d="M7.515 24.485a12 12 0 1 1 16.97 0"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
strokeLinecap="square"
strokeLinejoin="round"
/>
<path
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
strokeLinecap="round"
d="M5 15h3M16 4v3M7.414 8l2.122 2.121M24 15h3"
/>
<circle cx="16" cy="16" r="2" fill={fill || 'var(--color-white)'} />
<circle
cx="16"
cy="16"
r="2"
fill={fill || 'var(--color-accent-boke)'}
/>
<path
d="m21 9-6 6 2 2 4-8Z"
fill={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-white)'}
fill={fill || 'var(--color-accent-boke)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeLinecap="round"
strokeLinejoin="round"
/>
@ -108,13 +113,13 @@ const Icon04 = ({ className, fill }: { className?: string; fill?: string }) => {
>
<path
d="M14 13.967a5.745 5.745 0 0 1 4.1-1.73c1.538 0 3.012.622 4.1 1.73l4.101 4.18A5.969 5.969 0 0 1 28 22.325a5.97 5.97 0 0 1-1.699 4.18 5.744 5.744 0 0 1-4.1 1.73 5.744 5.744 0 0 1-4.101-1.73l-2.05-2.09"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
strokeLinejoin="round"
/>
<path
d="M18.059 18.27a5.744 5.744 0 0 1-4.1 1.73 5.744 5.744 0 0 1-4.1-1.73l-4.102-4.18A5.97 5.97 0 0 1 4.06 9.91a5.97 5.97 0 0 1 1.698-4.179A5.744 5.744 0 0 1 9.858 4c1.538 0 3.013.623 4.1 1.731l2.05 2.09"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
strokeLinejoin="round"
/>
@ -132,19 +137,19 @@ const Icon05 = ({ className, fill }: { className?: string; fill?: string }) => {
>
<path
d="M4 22h5l6-6m11-6h-5l-3 3"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
strokeLinecap="square"
/>
<path
d="M4 10h5l12 12h5"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
strokeLinecap="square"
/>
<path
d="m23 6 4 4-4 4M23 18l4 4-4 4"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
strokeLinecap="round"
/>
@ -162,7 +167,7 @@ const Icon06 = ({ className, fill }: { className?: string; fill?: string }) => {
>
<path
d="M2.293 12.293a1 1 0 1 0 1.414 1.414l-1.414-1.414ZM6 10h1a1 1 0 0 0-1.707-.707L6 10Zm-2.293 3.707 3-3-1.414-1.414-3 3 1.414 1.414ZM5 10v14h2V10H5Z"
fill={fill || 'var(--color-white)'}
fill={fill || 'var(--color-accent-boke)'}
/>
<rect
x="9"
@ -170,7 +175,7 @@ const Icon06 = ({ className, fill }: { className?: string; fill?: string }) => {
width="4"
height="13"
rx="2"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
/>
<rect
@ -179,12 +184,12 @@ const Icon06 = ({ className, fill }: { className?: string; fill?: string }) => {
width="4"
height="13"
rx="2"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
/>
<path
d="m23 10 6 6M29 10l-6 6"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
/>
</svg>
@ -203,10 +208,10 @@ const Icon07 = ({ className, fill }: { className?: string; fill?: string }) => {
cx="16.001"
cy="14.143"
r="1.857"
fill={fill || 'var(--color-white)'}
fill={fill || 'var(--color-accent-boke)'}
/>
<path
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
d="M16.072 14.144v5.571"
/>
@ -214,12 +219,12 @@ const Icon07 = ({ className, fill }: { className?: string; fill?: string }) => {
cx="16"
cy="16"
r="12"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
/>
<path
d="M22 16c0 3.457-.757 6.538-1.93 8.718C18.872 26.94 17.388 28 16 28c-1.389 0-2.873-1.06-4.07-3.282C10.758 22.538 10 19.458 10 16c0-3.457.757-6.538 1.93-8.718C13.128 5.06 14.612 4 16 4c1.389 0 2.873 1.06 4.07 3.282C21.242 9.462 22 12.542 22 16ZM4 16h6M22 16h6"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
/>
</svg>
@ -236,17 +241,17 @@ const Icon08 = ({ className, fill }: { className?: string; fill?: string }) => {
>
<path
d="M27 8.5c0 .89-.83 2.017-2.931 2.98C22.055 12.403 19.203 13 16 13c-3.204 0-6.055-.597-8.069-1.52C5.831 10.517 5 9.39 5 8.5c0-.89.83-2.017 2.931-2.98C9.945 4.597 12.796 4 16 4c3.203 0 6.055.597 8.069 1.52C26.169 6.483 27 7.61 27 8.5ZM27 16c0 2.761-4.925 5-11 5S5 18.761 5 16"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
/>
<path
d="M5 9v15c0 2.761 4.925 5 11 5s11-2.239 11-5V9"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
strokeLinecap="round"
/>
<circle cx="24" cy="15" r="1" fill={fill || 'var(--color-white)'} />
<circle cx="24" cy="23" r="1" fill={fill || 'var(--color-white)'} />
<circle cx="24" cy="15" r="1" fill={fill || 'var(--color-accent-boke)'} />
<circle cx="24" cy="23" r="1" fill={fill || 'var(--color-accent-boke)'} />
</svg>
)
}
@ -261,14 +266,14 @@ const Icon09 = ({ className, fill }: { className?: string; fill?: string }) => {
>
<path
d="M8.222 12h15.556c.462 0 1.222.58 1.222 1.833v11.334C25 26.419 24.24 27 23.778 27H8.222C7.76 27 7 26.42 7 25.167V13.833C7 12.581 7.76 12 8.222 12Z"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10 12V6.375c0-.895.316-1.754.879-2.386C11.44 3.356 12.204 3 13 3h6c.796 0 1.559.356 2.121.989.563.632.879 1.49.879 2.386V7.5"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
strokeLinecap="square"
strokeLinejoin="round"
@ -287,14 +292,14 @@ const Icon10 = ({ className, fill }: { className?: string; fill?: string }) => {
>
<path
d="m12 14.667 4 4L29.333 5.333"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M28 16v9.333A2.667 2.667 0 0 1 25.333 28H6.667A2.667 2.667 0 0 1 4 25.333V6.667A2.667 2.667 0 0 1 6.667 4h14.666"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
@ -313,7 +318,7 @@ const Icon11 = ({ className, fill }: { className?: string; fill?: string }) => {
>
<path
d="m16 5.2 3.306 6.478.231.453.503.08 7.183 1.143-5.14 5.146-.36.36.08.502 1.133 7.185-6.483-3.298-.453-.231-.453.23-6.483 3.299 1.133-7.185.08-.502-.36-.36-5.14-5.146 7.183-1.143.503-.08.23-.453L16 5.2Z"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
/>
</svg>
@ -330,12 +335,12 @@ const Icon12 = ({ className, fill }: { className?: string; fill?: string }) => {
>
<path
d="M16 25.544 3.386 12.188 9.422 6h13.156l6.036 6.188L16 25.544ZM3 12h25"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
/>
<path
d="m14 6-3 6 5 13M18 6l3 6-5 13"
stroke={fill || 'var(--color-white)'}
stroke={fill || 'var(--color-accent-boke)'}
strokeWidth="2"
/>
</svg>

24
src/components/sections/homepage/benefits/index.tsx
View File

@ -1,4 +1,5 @@
import clsx from 'clsx'
import { useTheme } from 'next-themes'
import * as React from 'react'
import { Arrow } from '~/components/icons/arrow'
@ -54,6 +55,25 @@ interface Props {
}
const Benefits = ({ data }: Props) => {
const { theme } = useTheme()
const mobileImg01Ref = React.useRef<HTMLImageElement>(null)
const mobileImg02Ref = React.useRef<HTMLImageElement>(null)
React.useEffect(() => {
if (!mobileImg01Ref.current) return
if (!mobileImg02Ref.current) return
mobileImg01Ref.current.src =
theme === 'dark'
? '/images/benefit-mobile-01.jpg'
: '/images/benefit-mobile-01-light.png'
mobileImg02Ref.current.src =
theme === 'dark'
? '/images/benefit-mobile-02.jpg'
: '/images/benefit-mobile-02-light.png'
}, [theme])
const ballRef = React.useRef<HTMLDivElement>(null)
const gridRef = React.useRef<HTMLDivElement>(null)
const userRef = React.useRef<HTMLDivElement>(null)
@ -110,9 +130,9 @@ const Benefits = ({ data }: Props) => {
s['benefit__image--01'],
'hide-on-desktop'
)}
ref={mobileImg01Ref}
alt="Benefit"
loading="lazy"
src="/images/benefit-mobile-01.jpg"
/>
<div className={s['background']}>
<Container className={s['developers']}>
@ -139,9 +159,9 @@ const Benefits = ({ data }: Props) => {
s['benefit__image--02'],
'hide-on-desktop'
)}
ref={mobileImg02Ref}
alt="Benefit"
loading="lazy"
src="/images/benefit-mobile-02.jpg"
/>
<Container className={s['users__container']}>
<Container className={s['users']}>

2
src/css/global.scss
View File

@ -16,6 +16,7 @@
// Colors
&[data-theme='dark'] {
--color-accent: #0000f4;
--color-accent-boke: #fbfbfb;
--color-black: #040404;
--color-white: #fbfbfb;
--color-grey: #565656;
@ -25,6 +26,7 @@
&[data-theme='light'] {
--color-accent: #0000f4;
--color-accent-boke: #0000f4;
--color-black: #fbfbfb;
--color-white: #040404;
--color-grey: #565656;