mirror of
https://github.com/LaconicNetwork/laconic.com.git
synced 2026-01-16 23:24:06 +00:00
Add Watchers section (#47)
This commit is contained in:
Fede Álvarez
GitHub
parent
faa5bdaaf8
commit
49fe2c1271
BIN
public/images/products/watchers-mobile.jpg
Normal file
BIN
public/images/products/watchers-mobile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
public/images/products/watchers.jpg
Normal file
BIN
public/images/products/watchers.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
74
src/components/sections/products/watchers/index.tsx
Normal file
74
src/components/sections/products/watchers/index.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import Line from '~/components/icons/line'
|
||||
import { Container } from '~/components/layout/container'
|
||||
import Section from '~/components/layout/section'
|
||||
import Heading from '~/components/primitives/heading'
|
||||
|
||||
import s from './watchers.module.scss'
|
||||
|
||||
const Watchers = () => {
|
||||
return (
|
||||
<Section className={s['section']} id="laconicwatchers">
|
||||
<Container className={s['container']}>
|
||||
<div>
|
||||
<p>
|
||||
Developers can leverage the Laconic SDK to develop Watchers, which
|
||||
are the components of the Laconic Network that makes DApp
|
||||
development fast and frictionless. Watchers are custom caches of
|
||||
IPLD blocks. By providing proofs with our IPLD versions of Ethereum
|
||||
data, a DApp can be fully verifiable with hundreds of megabytes
|
||||
instead of the tens of terabytes an archive node requires,
|
||||
dramatically increasing speed and efficiency, and lowering costs.
|
||||
</p>
|
||||
<p>
|
||||
With the services of a Watcher, a DApp developer can exactly define
|
||||
and customize the API they need. The Watcher runs queries that are
|
||||
efficient and relevant to the DApp. Another key benefit of Watchers
|
||||
is that they are composable, enabling a developer to reference data
|
||||
previously derived from the Ethereum blockchain by means of another
|
||||
Watcher, within their Watcher.
|
||||
</p>
|
||||
<p>A Watcher serves three fundamental purposes:</p>
|
||||
<img
|
||||
className={s.watchers__img__mobile}
|
||||
src="/images/products/watchers-mobile.jpg"
|
||||
alt="network"
|
||||
/>
|
||||
<div className={s.features}>
|
||||
<ol>
|
||||
<li>
|
||||
<p>It queries precisely the data a DApp needs.</p>
|
||||
<Line className={s['line']} height={45} />
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
It transforms the queried data to make it consumable to the
|
||||
DApp.
|
||||
</p>
|
||||
<Line className={s['line']} height={45} />
|
||||
</li>
|
||||
<li>
|
||||
<p>It caches the data for fast and inexpensive access.</p>
|
||||
<Line className={s['line']} height={45} />
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.heading}>
|
||||
<Heading as="h2" variant="lg">
|
||||
Laconic
|
||||
<br className="hide-on-mobile" /> Watchers
|
||||
<br />
|
||||
(SDK)
|
||||
</Heading>
|
||||
<img
|
||||
className={s.watchers__img}
|
||||
src="/images/products/watchers.jpg"
|
||||
alt="network"
|
||||
/>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Watchers
|
||||
159
src/components/sections/products/watchers/watchers.module.scss
Normal file
159
src/components/sections/products/watchers/watchers.module.scss
Normal file
@ -0,0 +1,159 @@
|
||||
@import '~/css/helpers';
|
||||
|
||||
.section {
|
||||
@include respond-to('mobile') {
|
||||
padding: 0;
|
||||
padding-bottom: tovw(88px, 'mobile');
|
||||
}
|
||||
|
||||
position: relative;
|
||||
padding: tovw(124px, 'default', 100px) 0;
|
||||
|
||||
.container {
|
||||
@include respond-to('mobile') {
|
||||
flex-direction: column-reverse;
|
||||
padding: 0 tovw(56px, 'default', 16px);
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
|
||||
.heading {
|
||||
h2 {
|
||||
@include respond-to('mobile') {
|
||||
line-height: 124%;
|
||||
}
|
||||
|
||||
margin-bottom: tovw(40px, 'mobile');
|
||||
text-shadow: 0px 0px 20px rgb(255 255 255 / 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
h2 {
|
||||
@include respond-to('mobile') {
|
||||
width: tovw(200px, 'mobile');
|
||||
}
|
||||
|
||||
text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
|
||||
}
|
||||
|
||||
> p {
|
||||
@include respond-to('mobile') {
|
||||
margin: 0;
|
||||
margin-top: tovw(40px, 'mobile');
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
max-width: 550px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
margin: 0;
|
||||
margin-top: tovw(62px, 'default', 30px);
|
||||
padding-left: tovw(185px, 'default', 45px);
|
||||
line-height: 1.3;
|
||||
font-size: tovw(30px, 'default', 18px);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.features {
|
||||
margin-top: tovw(85px, 'default', 40px);
|
||||
|
||||
ol {
|
||||
@include respond-to('mobile') {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
display: grid;
|
||||
justify-content: space-between;
|
||||
margin: 0 tovw(-50px, 'default');
|
||||
padding: 0;
|
||||
padding-left: tovw(206px, 'default', 45px);
|
||||
list-style: none;
|
||||
list-style-position: outside;
|
||||
font-family: var(--font-tt-hoves);
|
||||
font-size: tovw(24px, 'default', 15px);
|
||||
gap: tovw(68px, 'default', 40px) tovw(35px, 'default', 15px);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
li {
|
||||
@include respond-to('mobile') {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
position: relative;
|
||||
counter-increment: custom;
|
||||
gap: tovw(34px, 'default', 28px);
|
||||
|
||||
&:first-child {
|
||||
counter-reset: custom;
|
||||
}
|
||||
|
||||
&::before {
|
||||
padding-top: tovw(8px, 'default');
|
||||
font-family: var(--font-dm-mono), sans-serif;
|
||||
font-size: tovw(12px, 'default', 10px);
|
||||
content: '0' counter(custom) ' ';
|
||||
}
|
||||
|
||||
p {
|
||||
@include respond-to('mobile') {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
margin: 0;
|
||||
color: var(--color-grey-light);
|
||||
width: tovw(310px, 'default', 100px);
|
||||
}
|
||||
|
||||
.line {
|
||||
@include respond-to('mobile') {
|
||||
margin-top: 0;
|
||||
margin-left: tovw(8px, 'mobile', 25px);
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-top: tovw(10px, 'default', 8px);
|
||||
margin-left: tovw(30px, 'default', 20px);
|
||||
width: tovw(3px, 'default', 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.watchers__img {
|
||||
@include respond-to('mobile') {
|
||||
display: none;
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
top: tovw(190px, 'default', 150px);
|
||||
right: tovw(770px, 'default', 250px);
|
||||
z-index: -1;
|
||||
width: tovw(825px, 'default', 250px);
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
.watchers__img__mobile {
|
||||
@include respond-to('mobile') {
|
||||
display: unset;
|
||||
width: 135%;
|
||||
transform: translateX(-11%);
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -10,9 +10,10 @@ import Related from '~/components/sections/about/related'
|
||||
import AppSection from '~/components/sections/products/app'
|
||||
import Hero from '~/components/sections/products/hero'
|
||||
import Network from '~/components/sections/products/network'
|
||||
// import Partners from '~/components/sections/products/partners'
|
||||
import Stack from '~/components/sections/products/stack'
|
||||
import Token from '~/components/sections/products/token'
|
||||
// import Partners from '~/components/sections/products/partners'
|
||||
import Watchers from '~/components/sections/products/watchers'
|
||||
|
||||
export const getStaticProps = async () => {
|
||||
const [allBlogPosts, categories] = await Promise.all([
|
||||
@ -45,6 +46,7 @@ const Products = ({
|
||||
<PageLayout>
|
||||
<Meta preload={[{ href: '/videos/banner_products.mp4', as: 'fetch' }]} />
|
||||
<Hero />
|
||||
<Watchers />
|
||||
<Stack />
|
||||
<Network />
|
||||
<AppSection />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user