Add hero buttons, some style fixes, links (#46)
This commit is contained in:
Fede Álvarez
GitHub
parent
5e92cebfd1
commit
fc9508553c
@ -18,7 +18,7 @@ export const DevelopersLinks = [
|
||||
|
||||
export const ProductsLinks = [
|
||||
{ href: '/products', title: 'Products' },
|
||||
{ href: '/watchers', title: 'Watchers (SDK)' },
|
||||
{ href: '/products/#laconicwatchers', title: 'Watchers (SDK)' },
|
||||
{ href: '/products/#laconicstack', title: 'Laconic Stack' },
|
||||
{ href: '/products/#laconicnetwork', title: 'Laconic Network' },
|
||||
{ href: '/products/#laconicapp', title: 'Laconic App' },
|
||||
|
||||
@ -3,7 +3,6 @@ import Link from 'next/link'
|
||||
import {
|
||||
Discord,
|
||||
Facebook,
|
||||
Instagram,
|
||||
Reddit,
|
||||
Telegram,
|
||||
Twitter
|
||||
@ -52,11 +51,6 @@ const Shares = ({ url }: SharesProps) => {
|
||||
<Facebook />
|
||||
</a>
|
||||
</Link>
|
||||
<Link href={`https://t.me/share/url?url=${encodedUrl}`}>
|
||||
<a target="_blank">
|
||||
<Instagram />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
.container {
|
||||
border-top: 1px solid var(--color-white);
|
||||
padding-top: tovw(96px, 'default', 48px);
|
||||
padding-bottom: tovw(243px, 'default', 95px);
|
||||
padding-bottom: tovw(100px, 'default', 95px);
|
||||
text-align: center;
|
||||
max-width: tovw(856px, 'default', 856px);
|
||||
|
||||
|
||||
@ -133,7 +133,11 @@ const Benefits = () => {
|
||||
LNT rewards for network participation
|
||||
</Benefit>
|
||||
</ul>
|
||||
<ButtonLink className={s['button']} variant="primary" href="/">
|
||||
<ButtonLink
|
||||
className={s['button']}
|
||||
variant="primary"
|
||||
href="https://discord.com/invite/ukhbBemyxY"
|
||||
>
|
||||
Get Started
|
||||
</ButtonLink>
|
||||
</Container>
|
||||
|
||||
@ -21,6 +21,12 @@
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@media screen and (max-width: 375px) {
|
||||
font-size: tovw(42px, 'mobile');
|
||||
}
|
||||
}
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
@include respond-to('mobile') {
|
||||
@ -64,60 +70,21 @@
|
||||
height: tovw(72px, 'default', 56px);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: tovw(16px, 'default', 12px);
|
||||
height: tovw(24px, 'default', 24px);
|
||||
}
|
||||
|
||||
.flag {
|
||||
margin: 0 auto 0 tovw(8px, 'default', 6px);
|
||||
width: tovw(36px, 'default', 36px);
|
||||
height: tovw(20px, 'default', 20px);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
.buttons__container {
|
||||
@include respond-to('mobile') {
|
||||
bottom: 5%;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@include respond-to('mobile-sm') {
|
||||
bottom: 2%;
|
||||
}
|
||||
|
||||
display: grid;
|
||||
position: absolute;
|
||||
bottom: 11%;
|
||||
left: tovw(56px, 'default', 16px);
|
||||
align-items: center;
|
||||
width: calc(100% - (tovw(56px, 'default', 16px) * 2));
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
|
||||
p,
|
||||
li {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.7;
|
||||
font-family: var(--font-dm-mono);
|
||||
font-size: tovw(12px, 'default', 11px);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: tovw(90px, 'default', 40px);
|
||||
gap: tovw(24px, 'default', 20px);
|
||||
width: calc(100% - (tovw(56px, 'default', 16px) * 2));
|
||||
}
|
||||
|
||||
.video {
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import clsx from 'clsx'
|
||||
import { useRef } from 'react'
|
||||
|
||||
import { ArrowDotted } from '~/components/icons/arrow'
|
||||
import Line from '~/components/icons/line'
|
||||
import Section from '~/components/layout/section'
|
||||
import { Button } from '~/components/primitives/button'
|
||||
import { ButtonLink } from '~/components/primitives/button'
|
||||
import Heading from '~/components/primitives/heading'
|
||||
import HighlightedText from '~/components/primitives/highlighted-text'
|
||||
import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
|
||||
@ -42,35 +41,34 @@ const Hero = () => {
|
||||
<Heading as="h1" variant="xl" centered>
|
||||
Build a <br className="hide-on-desktop" />{' '}
|
||||
<HighlightedText>
|
||||
Fast Frictionless, <br /> & Provable
|
||||
</HighlightedText>
|
||||
Fast, Frictionless, <br /> & Provable
|
||||
</HighlightedText>{' '}
|
||||
Web3
|
||||
</Heading>
|
||||
|
||||
<Line className={s['line']} />
|
||||
<p>
|
||||
From months to minutes. Laconic’s multi-chain verifiable data <br />{' '}
|
||||
marketplace accelerates blockchain development, <br />
|
||||
interoperability, and adoption
|
||||
</p>
|
||||
<Button
|
||||
variant="primary"
|
||||
className={clsx(s['mobile__button'], 'hide-on-desktop')}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
<div className={s['scroll']}>
|
||||
<div>
|
||||
<Heading
|
||||
as="span"
|
||||
centered
|
||||
font="dmmono"
|
||||
style={{ display: 'block' }}
|
||||
variant="xs"
|
||||
>
|
||||
Scroll Down
|
||||
</Heading>
|
||||
<ArrowDotted className={s['arrow']} />
|
||||
</div>
|
||||
<div className={s['buttons__container']}>
|
||||
<ButtonLink
|
||||
variant="primary"
|
||||
size="large"
|
||||
className={s['button']}
|
||||
href="https://discord.com/invite/ukhbBemyxY"
|
||||
>
|
||||
JOIN US NOW
|
||||
</ButtonLink>
|
||||
<ButtonLink
|
||||
variant="default"
|
||||
size="large"
|
||||
className={s['button']}
|
||||
href="https://laconic.community/"
|
||||
>
|
||||
CHAT WITH US
|
||||
</ButtonLink>
|
||||
</div>
|
||||
</Section>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user