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

Homepage Hero (#2)

Browse Source
This commit is contained in:
Nazareno Oviedo
2022-03-29 11:08:49 -03:00
committed by GitHub
parent 00f959973e
commit a2e90828a3
11 changed files with 228 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/hero-mobile.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

src/components/common/footer/footer.module.scss
-12
View File
@@ -63,18 +63,6 @@
height: 100%;
pointer-events: none;
user-select: none;
&::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
background: radial-gradient(circle, transparent 0, #fdbb2d 100%);
height: calc(var(--vh) * 63);
content: '';
filter: blur(30px);
}
}
}
src/components/common/footer/index.tsx
+2 -2
View File
@@ -21,10 +21,10 @@ export const Footer = () => {
<>
<Section className={s['pre__footer--section']}>
<video
autoPlay
// autoPlay
className={clsx('hide-on-mobile', s['video'])}
controls={false}
loop
// loop
muted
preload="true"
>
src/components/icons/arrow.tsx
+12 -3
View File
@@ -25,11 +25,20 @@ const ArrowDotted = ({
<svg
className={className}
fill="none"
viewBox="0 0 42 14"
viewBox="0 0 18 26"
xmlns="http://www.w3.org/2000/svg"
>
<path d="m1 35 6 6 6-6" stroke={fill || '#fff'} />
<path d="M7 41V0" stroke={fill || '#fff'} strokeDasharray="2 2" />
<path
d="m1 16 8 8 8-8"
stroke={fill || 'var(--color-white)'}
strokeWidth="1.5"
/>
<path
d="M9 24V0"
stroke={fill || 'var(--color-white)'}
strokeWidth="1.5"
strokeDasharray="4 4"
/>
</svg>
)
}
src/components/icons/flag.tsx
+15
View File
@@ -0,0 +1,15 @@
const Flag = ({ className, fill }: { className?: string; fill?: string }) => {
return (
<svg
className={className}
fill="none"
viewBox="0 0 36 20"
xmlns="http://www.w3.org/2000/svg"
>
<path fill={fill || 'var(--color-white)'} d="M0 0h36v20H0z" />
<path stroke="#040404" strokeWidth="2" d="M0 7h36M9 0v20" />
</svg>
)
}
export default Flag
src/components/icons/line.tsx
+27
View File
@@ -0,0 +1,27 @@
const Line = ({ className, fill }: { className?: string; fill?: string }) => {
return (
<svg
className={className}
fill="none"
viewBox="0 0 3 72"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke="url(#heroline)" strokeWidth="3" d="M1.5 0v72" />
<defs>
<linearGradient
id="heroline"
x1="0"
y1="0"
x2="0"
y2="72"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={fill || 'var(--color-white)'} stopOpacity="0" />
<stop offset="1" stopColor={fill || 'var(--color-white)'} />
</linearGradient>
</defs>
</svg>
)
}
export default Line
src/components/layout/section/section.module.scss
+3 -19
View File
@@ -1,30 +1,14 @@
@import '~/css/helpers';
.base:not(.variant-unstyled) {
.base {
position: relative;
overflow: hidden;
}
.variant-stripes,
.variant-stripes-center {
background-color: theme('colors.pink');
overflow: hidden;
}
.stripesBase {
top: tovw(-524px);
left: tovw(-342px);
width: tovw(2605px, 'desktop-large');
height: tovw(2460px, 'desktop-large');
@media (prefers-reduced-motion: reduce) {
animation: none;
}
padding: 0 tovw(56px, 'default', 16px);
}
.children {
z-index: 1;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
src/components/primitives/button/button.module.scss
+2 -2
View File
@@ -7,12 +7,12 @@
border-radius: tovw(4px);
background: transparent;
cursor: pointer;
padding: tovw(16px, 'default', 10px) tovw(32px, 'default', 14px);
padding: tovw(16px, 'default', 16px) tovw(32px, 'default', 14px);
text-transform: uppercase;
line-height: 1;
color: var(--color-white);
font-family: var(--font-dm-mono);
font-size: tovw(18px, 'default', 14px);
font-size: tovw(18px, 'default', 18px);
appearance: none;
&:disabled {
src/components/primitives/heading/heading.module.scss
+1 -1
View File
@@ -11,7 +11,7 @@
}
&--xl {
font-size: tovw(110px, 'default', 48px);
font-size: tovw(110px, 'default', 50px);
line-height: 1.1;
letter-spacing: tovw(-3px);
}
src/components/sections/homepage/hero/hero.module.scss
+113 -12
View File
@@ -1,32 +1,128 @@
@import '~/css/helpers';
.section {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: calc(var(--vh) * 118 - var(--header-height));
max-width: 100%;
min-height: calc(var(--vh) * 100);
text-align: center;
@media screen and (max-width: 800px) {
background-image: url('/images/hero-mobile.png');
background-repeat: no-repeat;
background-position: 50% 15%;
background-size: 100%;
}
@supports (aspect-ratio: 16 / 9) {
aspect-ratio: 16 / 9;
}
&::after,
&::before {
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
top: 50%;
left: 50%;
width: 100%;
height: calc(var(--vh) * 95);
height: 100%;
content: '';
}
&::after {
background: radial-gradient(
circle,
rgb(0 0 0 / 0.5) 45%,
hsl(0deg 0% 100% / 0) 100%
transform: translate(-50%, -50%);
pointer-events: none;
background: linear-gradient(
0deg,
black 15%,
rgb(9 9 121 / 0) 50%,
black 100%
);
@supports (aspect-ratio: 16 / 9) {
aspect-ratio: 16 / 9;
}
@media screen and (max-width: 800px) {
content: initial;
}
}
&::before {
background: linear-gradient(0deg, #000 50%, hsl(0deg 0% 100% / 0));
width: 120%;
height: 115%;
background: radial-gradient(
ellipse farthest-corner at center center,
rgb(4 4 4 / 0.25) 45%,
#000 0
);
filter: blur(tovw(80px, 'default', 40px));
}
.line {
width: tovw(3px, 'default', 2px);
height: tovw(72px, 'default', 56px);
margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
}
.arrow {
width: tovw(16px, 'default', 12px);
height: tovw(24px, 'default', 24px);
}
.flag {
width: tovw(36px, 'default', 36px);
height: tovw(20px, 'default', 20px);
margin: 0 auto tovw(8px, 'default', 6px) auto;
}
p {
margin: 0 auto;
}
.scroll {
position: absolute;
bottom: 11%;
left: tovw(56px, 'default', 16px);
display: grid;
align-items: flex-end;
width: calc(100% - (tovw(56px, 'default', 16px) * 2));
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
@media screen and (max-width: 800px) {
grid-template-columns: 1fr;
bottom: 5%;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
p,
li {
font-family: var(--font-dm-mono);
font-size: tovw(12px, 'default', 11px);
line-height: 1.7;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
> div {
&:first-of-type {
display: flex;
justify-self: flex-start;
}
&:last-of-type {
text-align: right;
justify-self: flex-end;
span {
display: inline-block;
width: tovw(55px, 'default', 40px);
}
}
}
}
.video {
@@ -39,4 +135,9 @@
user-select: none;
pointer-events: none;
}
.mobile__button {
width: 100%;
margin: tovw(48px, 'mobile', 40px) 0 0 0;
}
}
src/components/sections/homepage/hero/index.tsx
+53 -6
View File
@@ -1,35 +1,82 @@
import clsx from 'clsx'
import { useEffect, useState } from 'react'
import { ArrowDotted } from '~/components/icons/arrow'
import Flag from '~/components/icons/flag'
import Line from '~/components/icons/line'
import Section from '~/components/layout/section'
import Button from '~/components/primitives/button'
import Heading from '~/components/primitives/heading'
import HighlightedText from '~/components/primitives/highlighted-text'
import s from './hero.module.scss'
const Hero = () => {
const [position, setPosition] = useState({ x: 0, y: 0 })
useEffect(() => {
const setFromEvent = (e: { clientX: any; clientY: any }) =>
setPosition({ x: e.clientX, y: e.clientY })
window.addEventListener('mousemove', setFromEvent)
return () => {
window.removeEventListener('mousemove', setFromEvent)
}
}, [])
return (
<Section className={s['section']}>
<video
autoPlay
// autoPlay
className={clsx('hide-on-mobile', s['video'])}
controls={false}
loop
// loop
muted
preload="true"
>
<source src="/videos/hero-grid.mp4" type="video/mp4" />
</video>
<Heading as="h1" variant="xl" centered>
The <HighlightedText>Multi-chain</HighlightedText> <br /> Verifable Data
The <br className="hide-on-desktop" />{' '}
<HighlightedText>Multi-chain</HighlightedText> <br /> Verifable Data
Marketplace
</Heading>
<Line className={s['line']} />
<p>
From months to minutes. Laconic accelerates <br /> your DApp
development, interoperability, <br /> and user adoption.
</p>
<Heading as="h5" variant="xs" font="dmmono" centered>
Scroll Down
</Heading>
<Button
variant="primary"
className={clsx(s['mobile__button'], 'hide-on-desktop')}
>
Get Started
</Button>
<div className={s['scroll']}>
<div className="hide-on-mobile">
<p>C:</p>
<Flag className={s['flag']} />
</div>
<div>
<Heading as="h5" variant="xs" font="dmmono" centered>
Scroll Down
</Heading>
<ArrowDotted className={s['arrow']} />
</div>
<div className="hide-on-mobile">
<p>Home</p>
<ul>
<li>
H:
<span>{position.x} PX</span>
</li>
<li>
V:
<span>{position.y} PX</span>
</li>
</ul>
</div>
</div>
</Section>
)
}