diff --git a/package.json b/package.json index 71b504b..8b77feb 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "next-compose-plugins": "^2.2.1", "next-sitemap": "^2.5.19", "prettier": "2.6.2", - "sass": "1.49.11", + "sass": "1.50.0", "stylelint": "^14.6.1", "stylelint-config-prettier": "^9.0.3", "stylelint-config-standard": "^25.0.0", diff --git a/public/images/community/hero/arrow.svg b/public/images/community/hero/arrow.svg index a9a0b7e..a954b97 100644 --- a/public/images/community/hero/arrow.svg +++ b/public/images/community/hero/arrow.svg @@ -1,3 +1,3 @@ - - + + \ No newline at end of file diff --git a/public/images/products/logos/advanced.svg b/public/images/products/logos/advanced.svg new file mode 100644 index 0000000..59de143 --- /dev/null +++ b/public/images/products/logos/advanced.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/public/images/products/logos/atomicform.svg b/public/images/products/logos/atomicform.svg new file mode 100644 index 0000000..fb1616a --- /dev/null +++ b/public/images/products/logos/atomicform.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/images/products/logos/cerc.svg b/public/images/products/logos/cerc.svg new file mode 100644 index 0000000..c41d6f2 --- /dev/null +++ b/public/images/products/logos/cerc.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/images/products/logos/cosmos.svg b/public/images/products/logos/cosmos.svg new file mode 100644 index 0000000..7794447 --- /dev/null +++ b/public/images/products/logos/cosmos.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/images/products/logos/eden.svg b/public/images/products/logos/eden.svg new file mode 100644 index 0000000..3b1bd16 --- /dev/null +++ b/public/images/products/logos/eden.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/images/products/logos/fission.svg b/public/images/products/logos/fission.svg new file mode 100644 index 0000000..6b1b6b2 --- /dev/null +++ b/public/images/products/logos/fission.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/images/products/logos/interchain.svg b/public/images/products/logos/interchain.svg new file mode 100644 index 0000000..c0337ea --- /dev/null +++ b/public/images/products/logos/interchain.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/images/products/logos/lemniscap.svg b/public/images/products/logos/lemniscap.svg new file mode 100644 index 0000000..9ad9851 --- /dev/null +++ b/public/images/products/logos/lemniscap.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/images/products/logos/protocol.svg b/public/images/products/logos/protocol.svg new file mode 100644 index 0000000..0117216 --- /dev/null +++ b/public/images/products/logos/protocol.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/images/products/logos/uniswap.svg b/public/images/products/logos/uniswap.svg new file mode 100644 index 0000000..774a61e --- /dev/null +++ b/public/images/products/logos/uniswap.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/images/products/network-mobile.jpg b/public/images/products/network-mobile.jpg new file mode 100644 index 0000000..a407aa8 Binary files /dev/null and b/public/images/products/network-mobile.jpg differ diff --git a/public/images/products/network.jpg b/public/images/products/network.jpg new file mode 100644 index 0000000..1dec786 Binary files /dev/null and b/public/images/products/network.jpg differ diff --git a/public/images/products/nw-01.png b/public/images/products/nw-01.png new file mode 100644 index 0000000..e1d24bc Binary files /dev/null and b/public/images/products/nw-01.png differ diff --git a/public/images/products/nw-02.png b/public/images/products/nw-02.png new file mode 100644 index 0000000..cd9f7fe Binary files /dev/null and b/public/images/products/nw-02.png differ diff --git a/public/images/products/nw-03.png b/public/images/products/nw-03.png new file mode 100644 index 0000000..3e17d7a Binary files /dev/null and b/public/images/products/nw-03.png differ diff --git a/public/images/products/stack-small.png b/public/images/products/stack-small.png new file mode 100644 index 0000000..1bac54b Binary files /dev/null and b/public/images/products/stack-small.png differ diff --git a/public/images/products/stack.png b/public/images/products/stack.png new file mode 100644 index 0000000..4598d17 Binary files /dev/null and b/public/images/products/stack.png differ diff --git a/public/images/products/tk-01.png b/public/images/products/tk-01.png new file mode 100644 index 0000000..5307d8b Binary files /dev/null and b/public/images/products/tk-01.png differ diff --git a/public/images/products/tk-02.png b/public/images/products/tk-02.png new file mode 100644 index 0000000..d46cdd5 Binary files /dev/null and b/public/images/products/tk-02.png differ diff --git a/public/images/products/tk-03.png b/public/images/products/tk-03.png new file mode 100644 index 0000000..07b9df8 Binary files /dev/null and b/public/images/products/tk-03.png differ diff --git a/public/images/products/tk-04.png b/public/images/products/tk-04.png new file mode 100644 index 0000000..cf92f40 Binary files /dev/null and b/public/images/products/tk-04.png differ diff --git a/public/images/products/token-mobile.jpg b/public/images/products/token-mobile.jpg new file mode 100644 index 0000000..53c06bd Binary files /dev/null and b/public/images/products/token-mobile.jpg differ diff --git a/public/images/products/token.jpg b/public/images/products/token.jpg new file mode 100644 index 0000000..d3b4c8e Binary files /dev/null and b/public/images/products/token.jpg differ diff --git a/public/videos/banner_products.mp4 b/public/videos/banner_products.mp4 new file mode 100644 index 0000000..6d07c95 Binary files /dev/null and b/public/videos/banner_products.mp4 differ diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx index a5185ef..5fe0998 100644 --- a/src/components/common/footer/index.tsx +++ b/src/components/common/footer/index.tsx @@ -20,9 +20,10 @@ import { import s from './footer.module.scss' export const Footer = () => { + const router = useRouter() + const [show, setShow] = useState(true) const [is404, setIs404] = useState(false) - const router = useRouter() useEffect(() => { if ( diff --git a/src/components/primitives/highlighted-text/index.tsx b/src/components/primitives/highlighted-text/index.tsx index 32e8581..2dbb377 100644 --- a/src/components/primitives/highlighted-text/index.tsx +++ b/src/components/primitives/highlighted-text/index.tsx @@ -1,8 +1,12 @@ -import { FC } from 'react' +import * as React from 'react' import s from './highlighted-text.module.scss' -const HighlightedText: FC = ({ children }) => { +type HighlightedTextProps = { + children?: React.ReactNode | string +} + +const HighlightedText = ({ children }: HighlightedTextProps) => { return {children} } diff --git a/src/components/sections/products/app/app.module.scss b/src/components/sections/products/app/app.module.scss new file mode 100644 index 0000000..3029888 --- /dev/null +++ b/src/components/sections/products/app/app.module.scss @@ -0,0 +1,91 @@ +@import '~/css/helpers'; + +.section { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: calc(var(--vw) * 60); + margin: tovw(100px, 'default', 50px) 0; + + @media screen and (max-width: 800px) { + height: calc(var(--vw) * 95); + background-image: url('/images/pre-footer-mobile.png'); + background-position: 50%; + background-size: cover; + } + + .container { + position: relative; + z-index: 2; + display: flex; + align-items: center; + flex-direction: column; + + @media screen and (max-width: 800px) { + padding: 0 tovw(16px, 'tablet', 16px); + } + + h2 { + @media screen and (max-width: 800px) { + font-size: tovw(32px, 'mobile'); + } + } + + p { + font-size: tovw(30px, 'default', 15px); + line-height: 1.35; + width: tovw(856px, 'default', 300px); + text-align: center; + + @media screen and (max-width: 800px) { + line-height: 1.5; + margin-top: tovw(16px, 'mobile'); + } + } + } + + &::after, + &::before { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + content: ''; + transform: translate(-50%, -50%); + pointer-events: none; + background: linear-gradient( + 0deg, + var(--color-black) 15%, + rgb(9 9 121 / 0) 45%, + var(--color-black) 100% + ); + @media screen and (max-width: 800px) { + content: normal; + } + } + + &::before { + width: 120%; + height: 110%; + background: radial-gradient( + ellipse, + rgb(3 3 3 / 0) 25%, + rgb(3 3 3 / 0.965) 60%, + rgb(3 3 3 / 1) 100% + ); + filter: blur(tovw(80px, 'default', 40px)); + } + + .video { + position: absolute; + z-index: -1; + top: 0; + left: 0; + width: 100%; + height: 100%; + user-select: none; + pointer-events: none; + } +} diff --git a/src/components/sections/products/app/index.tsx b/src/components/sections/products/app/index.tsx new file mode 100644 index 0000000..b6e0f12 --- /dev/null +++ b/src/components/sections/products/app/index.tsx @@ -0,0 +1,37 @@ +// import { Arrow } from '~/components/icons/arrow' +import clsx from 'clsx' + +import { Container } from '~/components/layout/container' +import Section from '~/components/layout/section' +import Heading from '~/components/primitives/heading' + +import s from './app.module.scss' + +const AppSection = () => { + return ( +
+ + + + Laconic App + +

+ Laconic Wallet leverages an in-browser IPFS payment channel, enabling + users of the network to transact quickly and easily with LNT and ERC20 + tokens. +

+ +
+ ) +} + +export default AppSection diff --git a/src/components/sections/products/hero/hero.module.scss b/src/components/sections/products/hero/hero.module.scss new file mode 100644 index 0000000..ced3eb3 --- /dev/null +++ b/src/components/sections/products/hero/hero.module.scss @@ -0,0 +1,182 @@ +@import '~/css/helpers'; + +.section { + display: flex; + flex-direction: column; + justify-content: center; + max-width: 100%; + min-height: calc(var(--vh) * 100); + padding: tovw(100px, 'default', 50px) 0; + + @media screen and (max-width: 800px) { + width: 100vw; + margin-bottom: tovw(88px, 'mobile'); + padding: 0; + } + + .container { + @media screen and (max-width: 800px) { + padding: 0 tovw(16px, 'tablet', 16px); + } + } + + video { + margin: 0 tovw(180px, 'default', 90px); + mix-blend-mode: screen; + + @media screen and (max-width: 800px) { + display: flex; + width: 300%; + place-self: center; + } + } + + .body { + display: flex; + flex-direction: column; + margin-top: tovw(16px, 'default', 10px); + gap: tovw(89px, 'default', 56px); + + h1 { + margin: 0; + text-shadow: 0 0 tovw(45px, 'default', 45px) rgb(255 255 255 / 0.4); + + @media screen and (max-width: 800px) { + font-size: tovw(50px, 'mobile'); + } + } + + ol { + font-family: var(--font-tt-hoves); + font-size: tovw(24px, 'default', 16px); + line-height: 1.3; + display: grid; + justify-content: space-between; + margin: 0; + padding: 0; + list-style: none; + grid-template-columns: repeat(3, 1fr); + gap: tovw(40px, 'default', 20px) tovw(35px, 'default', 15px); + + @media screen and (max-width: 900px) { + padding-bottom: tovw(25px, 'mobile', 56px); + border-bottom: tovw(1px, 'mobile') solid var(--color-white); + grid-template-columns: repeat(2, 1fr); + } + + li { + display: flex; + counter-increment: custom; + gap: tovw(34px, 'default', 12px); + + &:first-child { + counter-reset: custom; + } + + &::before { + font-family: var(--font-dm-mono), sans-serif; + font-size: tovw(12px, 'default', 10px); + padding-top: tovw(5px, 'default'); + content: '0' counter(custom) ' '; + } + } + } + + .text__container { + display: grid; + grid-template-columns: 1fr 1.15fr; + gap: tovw(113px, 'default', 40px); + + @media screen and (max-width: 800px) { + display: flex; + flex-direction: column; + } + + p:first-child { + font-size: tovw(30px, 'default', 18px); + line-height: 1.65; + width: tovw(546px, 'default', 150px); + + @media screen and (max-width: 800px) { + line-height: 1.5; + width: 100%; + max-width: 550px; + } + } + + > div { + display: flex; + flex-direction: column; + gap: tovw(50px, 'default', 35px); + + div { + display: flex; + padding-top: tovw(22px, 'default', 18px); + border-top: tovw(1px, 'default') solid var(--color-grey-light); + gap: tovw(140px, 'default', 20px); + + @media screen and (max-width: 800px) { + justify-content: space-between; + border-top: unset; + gap: tovw(20px, 'mobile', 30px); + } + + h2 { + width: tovw(100px, 'default', 20px); + + @media screen and (max-width: 800px) { + width: tovw(20px, 'mobile'); + } + } + + p { + font-size: tovw(24px, 'default', 16px); + line-height: 1.35; + width: tovw(416px, 'default', 200px); + margin: 0; + color: var(--color-grey-light); + + @media screen and (max-width: 800px) { + width: tovw(180px, 'mobile', 250px); + } + } + } + } + } + + div:first-child { + display: flex; + justify-content: space-between; + + .arrow { + display: none; + + @media screen and (max-width: 800px) { + position: relative; + display: unset; + align-self: flex-end; + width: tovw(18px, 'mobile', 18px); + padding-bottom: tovw(10px, 'mobile', 10px); + } + } + } + } + + .gradient { + position: absolute; + z-index: -1; + top: 0; + left: 0; + width: 100%; + height: tovw(740px, 'default', 740px); + background: linear-gradient( + 180deg, + rgb(0 0 244 / 0.9) 1.63%, + rgb(0 0 244 / 0) 99.89% + ); + + @media screen and (max-width: 800px) { + height: 45%; + } + } +} diff --git a/src/components/sections/products/hero/index.tsx b/src/components/sections/products/hero/index.tsx new file mode 100644 index 0000000..7051353 --- /dev/null +++ b/src/components/sections/products/hero/index.tsx @@ -0,0 +1,66 @@ +import { Arrow } from '~/components/icons/arrow' +import { Container } from '~/components/layout/container' +import Section from '~/components/layout/section' +import Heading from '~/components/primitives/heading' + +import s from './hero.module.scss' + +const Hero = () => { + return ( +
+
+ + +
+
+ + Products + + +
+
+

+ For DApp developers and users (e.g. traders), Laconic is the only + data solution that provides accurate, low-cost, multi-chain, + verifiable data, by leveraging cryptographic proofs, cutting-edge + data-caching engineering, and a secure verifiable data + marketplace: +

+
+
    +
  1. Watchers
    2. +
  2. Laconic Stack
    3. +
  3. Laconic Network
    4. +
  4. Laconic App
    5. +
  5. Laconic Network Token (LNT)
    6. +
+
+ + DeFi + +

+ Laconic enables simpler and more efficient DApp development, + and the most flexible views of the Ethereum state. +

+
+
+ + NFTs + +

+ In addition to any cross-chain history or metadata associated + with an NFT, Laconic allows this data to be proven to + end-users quickly and succinctly, simplifying deployments. +

+
+
+
+
+ +
+ ) +} + +export default Hero diff --git a/src/components/sections/products/network/index.tsx b/src/components/sections/products/network/index.tsx new file mode 100644 index 0000000..592af83 --- /dev/null +++ b/src/components/sections/products/network/index.tsx @@ -0,0 +1,58 @@ +// import { Arrow } from '~/components/icons/arrow' +import { Container } from '~/components/layout/container' +import Section from '~/components/layout/section' +import Heading from '~/components/primitives/heading' + +import s from './network.module.scss' + +const Network = () => { + return ( +
+ +
+ + Laconic Network + +

+ An open, interoperable, verifiable data marketplace and ecosystem of + service providers, DApp operators, and users providing low-cost, + decentralized, and disintermediated horizontal scaling solutions for + projects leveraging Laconic Stack. +

+ network +
+
+ +

+ Seamlessly connects DApps and bridges with data service + providers +

+
+
+ +

Leverages state-channel-based payment infrastructure

+
+
+ +

+ Provides highest quality services at the lowest prices via + marketplace model +

+
+
+
+ network + +
+ ) +} + +export default Network diff --git a/src/components/sections/products/network/network.module.scss b/src/components/sections/products/network/network.module.scss new file mode 100644 index 0000000..a6a7c89 --- /dev/null +++ b/src/components/sections/products/network/network.module.scss @@ -0,0 +1,120 @@ +@import '~/css/helpers'; + +.section { + position: relative; + padding: tovw(124px, 'default', 100px) 0; + + @media screen and (max-width: 800px) { + padding: 0; + padding-bottom: tovw(18px, 'mobile'); + } + + .container { + position: relative; + display: flex; + + @media screen and (max-width: 800px) { + padding: 0 tovw(16px, 'tablet', 16px); + } + + div:first-child { + width: 100%; + + h2 { + @media screen and (max-width: 800px) { + width: tovw(200px, 'mobile'); + } + } + + > p { + font-size: tovw(30px, 'default', 18px); + line-height: 1.3; + width: tovw(720px, 'default', 350px); + margin: 0; + margin-top: tovw(62px, 'default', 30px); + + @media screen and (max-width: 800px) { + line-height: 1.5; + width: 100%; + max-width: 550px; + margin: 0; + margin-top: tovw(40px, 'mobile'); + } + } + + .features { + display: grid; + margin-top: tovw(125px, 'default', 60px); + grid-template-columns: repeat(2, tovw(360px, 'default', 225px)); + gap: tovw(64px, 'default', 40px) 0; + + @media screen and (max-width: 800px) { + display: flex; + flex-direction: column; + } + + > div { + display: grid; + grid-template-columns: auto 1fr; + gap: tovw(23px, 'default', 16px); + + @media screen and (max-width: 800px) { + margin: 0 tovw(10px, 'mobile'); + } + + img { + flex: 1; + width: tovw(55px, 'default', 45px); + } + + p { + font-size: tovw(24px, 'default', 15px); + line-height: 1.6; + width: tovw(268px, 'default', 100px); + margin: 0; + margin-top: tovw(20px, 'default', 16px); + color: var(--color-grey-light); + + @media screen and (max-width: 800px) { + width: 100%; + } + } + + &:last-child { + p { + width: tovw(300px, 'default', 85px); + + @media screen and (max-width: 800px) { + width: 100%; + } + } + } + } + } + } + + .network__img { + position: absolute; + z-index: -1; + bottom: tovw(-190px, 'default', -750px); + left: tovw(550px, 'default', 50px); + width: tovw(1050px, 'default', 550px); + mix-blend-mode: screen; + + @media screen and (max-width: 800px) { + display: none; + } + } + + .network__img__mobile { + display: none; + + @media screen and (max-width: 800px) { + display: unset; + width: 100%; + margin: tovw(60px, 'mobile') 0 tovw(20px, 'mobile') 0; + mix-blend-mode: screen; + } + } + } +} diff --git a/src/components/sections/products/partners/index.tsx b/src/components/sections/products/partners/index.tsx new file mode 100644 index 0000000..7ab31f8 --- /dev/null +++ b/src/components/sections/products/partners/index.tsx @@ -0,0 +1,153 @@ +import { Suspense } from 'react' +import Marquee from 'react-fast-marquee' + +import { Container } from '~/components/layout/container' +import Section from '~/components/layout/section' +import Heading from '~/components/primitives/heading' + +import s from './partners.module.scss' + +const Partners = () => { + return ( +
+ +
+ + Partners + + 04 +
+ +
+ + Fission + Lemniscap + Cerc + Advanced Blockchain + Atomic Form + Fission + Lemniscap + Cerc + Advanced Blockchain + Atomic Form + +
+ +
+ + Trusted By + + 05 +
+ +
+ + Uniswap + Interchain + Cosmos + Protocol + Eden + Uniswap + Interchain + Cosmos + Protocol + Eden + +
+ +
+ +
+ ) +} + +export default Partners diff --git a/src/components/sections/products/partners/partners.module.scss b/src/components/sections/products/partners/partners.module.scss new file mode 100644 index 0000000..5af4a82 --- /dev/null +++ b/src/components/sections/products/partners/partners.module.scss @@ -0,0 +1,82 @@ +@import '~/css/helpers'; + +.section { + position: relative; + margin: tovw(135px, 'default', 70px) 0; + padding: tovw(104px, 'default', 95px) 0; + + @media screen and (max-width: 800px) { + margin-top: 0; + } + + .container { + @media screen and (max-width: 800px) { + padding: 0 tovw(16px, 'tablet', 16px); + } + + .header { + display: flex; + justify-content: space-between; + padding-bottom: tovw(36px, 'default', 24px); + border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light); + + &:nth-child(3) { + margin-top: tovw(182px, 'default', 100px); + } + + span { + font-family: var(--font-dm-mono), sans-serif; + font-size: tovw(18px, 'default', 12px); + padding-top: tovw(35px, 'default', 14px); + color: var(--color-grey-light); + } + } + + .gradient { + position: absolute; + z-index: -1; + right: 0; + bottom: tovw(160px, 'default', 160px); + left: 0; + width: 100%; + height: tovw(500px, 'default', 180px); + margin-left: 0; + content: ''; + user-select: none; + pointer-events: none; + opacity: 0.4; + background: linear-gradient( + 180deg, + rgb(229 229 229 / 0) 0%, + rgb(241 241 241 / 0.4) 48.91%, + rgb(241 241 241 / 0) 89.23% + ); + + @media screen and (max-width: 800px) { + bottom: tovw(1px, 'mobile', 90px); + height: tovw(230px, 'mobile', 440px); + } + } + } +} + +.marquee { + display: flex; + user-select: none; + + > img { + width: tovw(240px, 'default', 220px); + margin-right: tovw(53px, 'default', 40px); + pointer-events: none; + } + + &__container { + margin-top: tovw(60px, 'default', 43px); + + @media screen and (max-width: 800px) { + width: unset !important; + margin: tovw(60px, 'default', 43px) tovw(-18px, 'mobile') 0 + tovw(-18px, 'mobile'); + } + } +} diff --git a/src/components/sections/products/stack/index.tsx b/src/components/sections/products/stack/index.tsx new file mode 100644 index 0000000..0e330c5 --- /dev/null +++ b/src/components/sections/products/stack/index.tsx @@ -0,0 +1,58 @@ +// import { Arrow } from '~/components/icons/arrow' +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 Link from '~/components/primitives/link' +import { stackData } from './stack' +import s from './stack.module.scss' + +const Stack = () => { + return ( +
+ +
+ + Laconic Stack + +

+ Laconic Stack is a set of essential and verifiable technologies and + services that significantly simplify DApp development and make DApps + accessible to a wider audience of developers. +

+
+
+
    + {stackData.map((item) => ( +
  1. +
    + + {item.title} + + {item.content} +
    + +
    2. + ))} +
+
+
+ stack + stack +
+
+ +
+ ) +} + +export default Stack diff --git a/src/components/sections/products/stack/stack.module.scss b/src/components/sections/products/stack/stack.module.scss new file mode 100644 index 0000000..e4009fc --- /dev/null +++ b/src/components/sections/products/stack/stack.module.scss @@ -0,0 +1,160 @@ +@import '~/css/helpers'; + +.section { + position: relative; + padding: tovw(124px, 'default', 100px) 0; + + @media screen and (max-width: 800px) { + padding: 0; + padding-bottom: tovw(88px, 'mobile'); + } + + .container { + @media screen and (max-width: 800px) { + padding: 0 tovw(16px, 'tablet', 16px); + } + } + + .header { + display: flex; + + @media screen and (max-width: 800px) { + flex-direction: column; + } + + h2 { + width: tovw(360px, 'default', 250px); + + @media screen and (max-width: 800px) { + width: unset; + } + } + + p { + font-size: tovw(30px, 'default', 18px); + line-height: 1.35; + width: tovw(746px, 'default', 300px); + + @media screen and (max-width: 800px) { + line-height: 1.5; + width: 100%; + max-width: 550px; + margin: 0; + margin-top: tovw(40px, 'mobile'); + } + } + } + + div:nth-child(2) { + margin-top: tovw(165px, 'default', 80px); + + ol { + font-family: var(--font-tt-hoves); + font-size: tovw(24px, 'default', 15px); + display: grid; + justify-content: space-between; + margin: 0 tovw(-50px, 'default'); + padding: 0; + list-style: none; + list-style-position: outside; + grid-template-columns: repeat(3, 1fr); + gap: tovw(68px, 'default', 40px) tovw(35px, 'default', 15px); + + @media screen and (max-width: 800px) { + display: flex; + flex-direction: column; + margin: 0; + } + + li { + position: relative; + display: flex; + counter-increment: custom; + gap: tovw(34px, 'default', 28px); + + @media screen and (max-width: 800px) { + width: 100%; + } + + &:first-child { + counter-reset: custom; + } + + &::before { + font-family: var(--font-dm-mono), sans-serif; + font-size: tovw(12px, 'default', 10px); + padding-top: tovw(8px, 'default'); + content: '0' counter(custom) ' '; + } + + div { + display: flex; + flex-direction: column; + gap: tovw(22px, 'default', 18px); + + span { + font-size: tovw(24px, 'default', 18px); + line-height: 1.33; + color: var(--color-grey-light); + } + } + + .line { + position: absolute; + bottom: 0; + width: tovw(3px, 'default', 2px); + margin-bottom: tovw(42px, 'default', 42px); + margin-left: tovw(25px, 'default', 20px); + + @media screen and (max-width: 800px) { + margin-bottom: tovw(8px, 'mobile'); + } + } + } + } + } + + div:last-child { + .stack__img { + width: 100%; + margin-top: tovw(293px, 'default', 88px); + image-rendering: optimizequality; + @media screen and (max-width: 1450px) { + display: none; + } + } + + .stack__img__small { + display: none; + + @media screen and (max-width: 1450px) { + display: unset; + } + } + + .gradient { + position: absolute; + z-index: -1; + right: 0; + bottom: tovw(530px, 'default', 300px); + left: 0; + width: 100%; + height: tovw(500px, 'default', 180px); + margin-left: 0; + content: ''; + user-select: none; + pointer-events: none; + opacity: 0.4; + background: linear-gradient( + 180deg, + rgb(229 229 229 / 0) 0%, + rgb(241 241 241 / 0.5) 48.91%, + rgb(241 241 241 / 0) 89.23% + ); + + @media screen and (max-width: 800px) { + display: none; + } + } + } +} diff --git a/src/components/sections/products/stack/stack.ts b/src/components/sections/products/stack/stack.ts new file mode 100644 index 0000000..a769188 --- /dev/null +++ b/src/components/sections/products/stack/stack.ts @@ -0,0 +1,23 @@ +export const stackData = [ + { + title: 'Core', + content: 'Ethereum node, ipld-eth-server, and relational database' + }, + { + title: 'Watcher Service', + content: + 'Allows services or browsers to subscribe to data Supplementary Services' + }, + { + title: 'Tracing Service', + content: 'Generates and caches traces' + }, + { + title: 'Eth State Diff Service', + content: 'Serves state diffs from an offline geth database' + }, + { + title: 'Pending Transaction Service', + content: 'Ethereum node, ipld-eth-server, and relational database' + } +] diff --git a/src/components/sections/products/token/index.tsx b/src/components/sections/products/token/index.tsx new file mode 100644 index 0000000..1df3d17 --- /dev/null +++ b/src/components/sections/products/token/index.tsx @@ -0,0 +1,59 @@ +// import { Arrow } from '~/components/icons/arrow' +import { Container } from '~/components/layout/container' +import Section from '~/components/layout/section' +import Heading from '~/components/primitives/heading' + +import s from './token.module.scss' + +const Token = () => { + return ( +
+ +
+ + Laconic Network Token + +

+ With a fixed total supply, Laconic Network Token (LNT) serves + multiple functions in the Network design, most saliently by securing + incentive alignment across network stakeholders. LNT also allows for + seamless payments across services, regardless of blockchain or DApp. +

+ token +
+
+ +

Distribute rewards to staked users

+
+
+ +

Pay dividends to Partners

+
+
+ +

Provide service discounts

+
+
+ +

+ Distribute funds to community members for Network maintenance + and development +

+
+
+
+ token + +
+ ) +} + +export default Token diff --git a/src/components/sections/products/token/token.module.scss b/src/components/sections/products/token/token.module.scss new file mode 100644 index 0000000..8b48ba7 --- /dev/null +++ b/src/components/sections/products/token/token.module.scss @@ -0,0 +1,120 @@ +@import '~/css/helpers'; + +.section { + position: relative; + padding: tovw(124px, 'default', 100px) 0; + + @media screen and (max-width: 800px) { + padding: 0; + padding-bottom: tovw(18px, 'mobile'); + } + + .container { + position: relative; + display: flex; + + @media screen and (max-width: 800px) { + padding: 0 tovw(16px, 'tablet', 16px); + } + + h2 { + @media screen and (max-width: 800px) { + width: tovw(320px, 'mobile'); + } + } + + div:first-child { + width: 100%; + + > p { + font-size: tovw(30px, 'default', 18px); + line-height: 1.3; + width: tovw(814px, 'default', 350px); + margin: 0; + margin-top: tovw(62px, 'default', 30px); + + @media screen and (max-width: 800px) { + line-height: 1.5; + width: 100%; + max-width: 550px; + margin: 0; + margin-top: tovw(40px, 'mobile'); + } + } + + .features { + display: grid; + margin-top: tovw(125px, 'default', 60px); + grid-template-columns: repeat(2, tovw(360px, 'default', 190px)); + gap: tovw(64px, 'default', 40px) 0; + + @media screen and (max-width: 800px) { + display: flex; + flex-direction: column; + } + + > div { + display: grid; + grid-template-columns: auto 1fr; + gap: tovw(23px, 'default', 15px); + + @media screen and (max-width: 800px) { + margin: 0 tovw(10px, 'mobile'); + } + + img { + flex: 1; + width: tovw(55px, 'default', 45px); + } + + p { + font-size: tovw(24px, 'default', 15px); + line-height: 1.6; + width: tovw(220px, 'default', 115px); + margin: 0; + margin-top: tovw(20px, 'default', 16px); + color: var(--color-grey-light); + + @media screen and (max-width: 800px) { + width: 100%; + } + } + + &:last-child { + p { + width: tovw(265px, 'default', 150px); + + @media screen and (max-width: 800px) { + width: 100%; + } + } + } + } + } + } + + .token__img { + position: absolute; + z-index: -1; + bottom: tovw(-150px, 'default', -750px); + left: tovw(630px, 'default', 50px); + width: tovw(950px, 'default', 550px); + mix-blend-mode: screen; + + @media screen and (max-width: 800px) { + display: none; + } + } + + .token__img__mobile { + display: none; + + @media screen and (max-width: 800px) { + display: unset; + width: 100%; + margin: tovw(60px, 'mobile') 0 tovw(5px, 'mobile') 0; + mix-blend-mode: screen; + } + } + } +} diff --git a/src/pages/about.tsx b/src/pages/about.tsx index 84e98fa..19fdd32 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -6,7 +6,7 @@ import Team from '~/components/sections/about/team' import { Page } from './_app' -const Community: Page = () => { +const About: Page = () => { return ( @@ -17,4 +17,4 @@ const Community: Page = () => { ) } -export default Community +export default About diff --git a/src/pages/products.tsx b/src/pages/products.tsx new file mode 100644 index 0000000..5c3e796 --- /dev/null +++ b/src/pages/products.tsx @@ -0,0 +1,26 @@ +import { Meta } from '~/components/common/meta' +import { PageLayout } from '~/components/layout/page' +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 { Page } from './_app' + +const Products: Page = () => { + return ( + + + + + + + + + + ) +} + +export default Products diff --git a/yarn.lock b/yarn.lock index afc9042..caaf08d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -233,16 +233,16 @@ integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== "@types/react-dom@^17.0.14": - version "17.0.14" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.14.tgz#c8f917156b652ddf807711f5becbd2ab018dea9f" - integrity sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ== + version "17.0.15" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.15.tgz#f2c8efde11521a4b7991e076cb9c70ba3bb0d156" + integrity sha512-Tr9VU9DvNoHDWlmecmcsE5ZZiUkYx+nKBzum4Oxe1K0yJVyBlfbq7H3eXjxXqJczBKqPGq3EgfTru4MgKb9+Yw== dependencies: - "@types/react" "*" + "@types/react" "^17" -"@types/react@*", "@types/react@^17.0.43": - version "17.0.43" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55" - integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A== +"@types/react@^17", "@types/react@^17.0.43": + version "17.0.44" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7" + integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -2840,10 +2840,10 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1: resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== -sass@1.49.11: - version "1.49.11" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.11.tgz#1ffeb77faeed8b806a2a1e021d7c9fd3fc322cb7" - integrity sha512-wvS/geXgHUGs6A/4ud5BFIWKO1nKd7wYIGimDk4q4GFkJicILActpv9ueMT4eRGSsp1BdKHuw1WwAHXbhsJELQ== +sass@1.50.0: + version "1.50.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.50.0.tgz#3e407e2ebc53b12f1e35ce45efb226ea6063c7c8" + integrity sha512-cLsD6MEZ5URXHStxApajEh7gW189kkjn4Rc8DQweMyF+o5HF5nfEz8QYLMlPsTOD88DknatTmBWkOcw5/LnJLQ== dependencies: chokidar ">=3.0.0 <4.0.0" immutable "^4.0.0"