diff --git a/json/_datocms_migration_refrence/__apiExplorerQueries/productsPageQuery.js b/json/_datocms_migration_refrence/__apiExplorerQueries/productsPageQuery.js index f8115f2..1ecb7f7 100644 --- a/json/_datocms_migration_refrence/__apiExplorerQueries/productsPageQuery.js +++ b/json/_datocms_migration_refrence/__apiExplorerQueries/productsPageQuery.js @@ -21,6 +21,7 @@ query MyQuery { heroItem03 heroItem04 heroItem05 + heroItem06 heroS01Desc heroS01Heading heroS02Desc diff --git a/json/site_content/productsPage.json b/json/site_content/productsPage.json index d45cded..bc482b2 100644 --- a/json/site_content/productsPage.json +++ b/json/site_content/productsPage.json @@ -22,6 +22,7 @@ "heroItem03": "Laconic Network", "heroItem04": "Laconic App", "heroItem05": "Laconic Network Token (LNT)", + "heroItem06": "Laconic RPC", "heroS01Desc": "Laconic enables simple and efficient DApp development, and the most flexible views of the Ethereum state.", "heroS01Heading": "DeFi", "heroS02Desc": "Laconic exposes cross-chain history and metadata associated with an NFT, enabling provably accurate data for DApps and Marketplaces.", @@ -95,7 +96,21 @@ "tokenMobileImg": { "url": "/images/site_content/productsPage/tokenMobileImg.jpg" }, - "tokenMobileImgLight": { + "rpcDesc": "Highly performant RPC services", + "rpcHeading": "Laconic RPC", + "rpcImg": { + "url": "/images/site_content/productsPage/tokenImg.jpg" + }, + "rpcImgLight": { + "url": "/images/site_content/productsPage/tokenImgLight.jpg" + }, + "rpcItem01": "On bare metal", + "rpcItem02": "Very fast", + "rpcItem03": "Cheaper than the competition", + "rpcMobileImg": { + "url": "/images/site_content/productsPage/tokenMobileImg.jpg" + }, + "rpcMobileImgLight": { "url": "/images/site_content/productsPage/tokenMobileImgLight.jpg" }, "watchersHeading": "Laconic
Watchers
(SDK)", @@ -119,4 +134,4 @@ "watchersP02": "" } } -} \ No newline at end of file +} diff --git a/src/components/common/footer/footer.tsx b/src/components/common/footer/footer.tsx index 59f7283..dcbd492 100644 --- a/src/components/common/footer/footer.tsx +++ b/src/components/common/footer/footer.tsx @@ -22,7 +22,8 @@ export const ProductsLinks = [ { href: '/products/#laconicstack', title: 'Laconic Stack' }, { href: '/products/#laconicnetwork', title: 'Laconic Network' }, { href: '/products/#laconicapp', title: 'Laconic App' }, - { href: '/products/#laconictoken', title: 'Laconic Network Token (LNT)' } + { href: '/products/#laconictoken', title: 'Laconic Network Token (LNT)' }, + { href: '/products/#laconicrpc', title: 'Laconic RPC' } ] export const AboutLinks = [ diff --git a/src/components/common/header/header.ts b/src/components/common/header/header.ts index e0b41ce..262f0b8 100644 --- a/src/components/common/header/header.ts +++ b/src/components/common/header/header.ts @@ -16,7 +16,8 @@ export const defaultHeaderLinks = [ { href: '/products#laconicstack', title: 'Stack' }, { href: '/products#laconicnetwork', title: 'Network' }, { href: '/products#laconicapp', title: 'App' }, - { href: '/products#laconictoken', title: 'Network Token (LNT)' } + { href: '/products#laconictoken', title: 'Network Token (LNT)' }, + { href: '/products#laconicrpc', title: 'Laconic RPC' } ] }, { diff --git a/src/components/sections/products/hero/index.tsx b/src/components/sections/products/hero/index.tsx index 4a61536..b52a4e7 100644 --- a/src/components/sections/products/hero/index.tsx +++ b/src/components/sections/products/hero/index.tsx @@ -17,6 +17,7 @@ interface Props { heroItem03: string heroItem04: string heroItem05: string + heroItem06: string heroS01Heading: string heroS01Desc: string heroS02Heading: string @@ -90,6 +91,7 @@ const Hero = ({ data }: Props) => {
  • {data?.heroItem03}
  • {data?.heroItem04}
  • {data?.heroItem05}
    • +
  • {data?.heroItem06}
    • diff --git a/src/components/sections/products/rpc/index.tsx b/src/components/sections/products/rpc/index.tsx new file mode 100644 index 0000000..2dd2b84 --- /dev/null +++ b/src/components/sections/products/rpc/index.tsx @@ -0,0 +1,88 @@ +// import { Arrow } from '~/components/icons/arrow' +import { useTheme } from 'next-themes' +import { useEffect, useRef } from 'react' + +import { Container } from '~/components/layout/container' +import Section from '~/components/layout/section' +import Heading from '~/components/primitives/heading' + +import s from './rpc.module.scss' + +interface Props { + data: { + rpcHeading: string + rpcDesc: string + rpcItem01: string + rpcItem02: string + rpcItem03: string + rpcImg: { + url: string + } + rpcImgLight: { + url: string + } + rpcMobileImg: { + url: string + } + rpcMobileImgLight: { + url: string + } + } +} + +const RPC = ({ data }: Props) => { + const { theme } = useTheme() + + const rpcImgRef = useRef(null) + const rpcImgMobileRef = useRef(null) + + useEffect(() => { + if (!rpcImgRef.current) return + if (!rpcImgMobileRef.current) return + + rpcImgRef.current.src = + theme === 'dark' ? data?.rpcImg?.url : data?.rpcImgLight?.url + rpcImgMobileRef.current.src = + theme === 'dark' + ? data?.rpcMobileImg?.url + : data?.rpcMobileImgLight?.url + }, [theme, data]) + + return ( +
    + +
    + + {data?.rpcHeading} + +

    {data?.rpcDesc}

    +
    + rpc +
    +

    LNT will also be used to:

    +
    +
    + item +

    {data?.rpcItem01}

    +
    +
    + item +

    {data?.rpcItem02}

    +
    +
    + item +

    {data?.rpcItem03}

    +
    +
    +
    + rpc +     +
    + ) +} + +export default RPC diff --git a/src/components/sections/products/rpc/rpc.module.scss b/src/components/sections/products/rpc/rpc.module.scss new file mode 100644 index 0000000..8214c04 --- /dev/null +++ b/src/components/sections/products/rpc/rpc.module.scss @@ -0,0 +1,152 @@ +@import '~/css/helpers'; + +.section { + @include respond-to('mobile') { + padding: 0; + } + + position: relative; + padding: tovw(20px, 'default', 20px) 0 tovw(124px, 'default', 100px) 0; + margin-top: tovw(-20px, 'default', -20px); + + .container { + @include respond-to('mobile') { + padding: 0 tovw(56px, 'default', 16px); + } + + display: flex; + position: relative; + + h2 { + @include respond-to('mobile') { + width: tovw(320px, 'mobile'); + } + + text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4); + } + + div:first-child { + width: 100%; + + > p { + @include respond-to('mobile') { + margin: 0; + margin-top: tovw(20px, 'mobile', 40px); + width: 100%; + max-width: 550px; + line-height: 1.5; + } + + margin: 0; + margin-top: tovw(62px, 'default', 30px); + width: tovw(814px, 'default', 350px); + line-height: 1.3; + font-size: tovw(30px, 'default', 18px); + + &:nth-child(4) { + margin-top: tovw(80px, 'default', 35px); + } + } + + .features { + @include respond-to('mobile') { + display: flex; + flex-direction: column; + margin-top: tovw(40px, 'default', 40px); + } + + display: grid; + margin-top: tovw(60px, 'default', 60px); + gap: tovw(64px, 'default', 40px) 0; + grid-template-columns: repeat(2, tovw(360px, 'default', 190px)); + + > div { + @include respond-to('mobile') { + margin: 0 tovw(10px, 'mobile'); + } + + display: grid; + gap: tovw(23px, 'default', 15px); + grid-template-columns: auto 1fr; + + img { + flex: 1; + width: tovw(55px, 'default', 45px); + } + + p { + @include respond-to('mobile') { + width: 100%; + margin-top: tovw(8px, 'default', 8px); + max-width: tovw(350px, 'default', 350px); + } + + margin: 0; + margin-top: tovw(6px, 'default', 6px); + width: tovw(220px, 'default', 115px); + line-height: 1.6; + color: var(--color-grey-light); + font-size: tovw(24px, 'default', 15px); + } + + &:last-child { + p { + @include respond-to('mobile') { + width: 100%; + } + + width: tovw(265px, 'default', 150px); + } + } + } + } + } + + .token__img { + @include respond-to('mobile') { + display: none; + } + + position: absolute; + bottom: tovw(-150px, 'default', -750px); + left: tovw(630px, 'default', 50px); + z-index: -1; + width: tovw(950px, 'default', 500px); + mix-blend-mode: screen; + } + + .mobile_img_container { + @include respond-to('mobile') { + display: unset; + min-height: tovw(235px, 'mobile', 430px); + } + + display: none; + + .token__img__mobile { + @include respond-to('mobile') { + display: unset; + margin: tovw(30px, 'mobile') 0 tovw(5px, 'mobile') 0; + width: 100%; + mix-blend-mode: screen; + max-width: tovw(400px, 'default', 400px); + } + + display: none; + } + } + } +} + +[data-theme='light'] { + .features { + img { + filter: invert(100%); + } + } + + .token__img, + .token__img__mobile { + mix-blend-mode: darken !important; + } +} diff --git a/src/lib/cms/queries/products.js b/src/lib/cms/queries/products.js index c3b1bfd..ccb659a 100644 --- a/src/lib/cms/queries/products.js +++ b/src/lib/cms/queries/products.js @@ -9,6 +9,7 @@ const ProductsHero = { heroItem03 heroItem04 heroItem05 + heroItem06 heroS01Desc heroS01Heading heroS02Desc @@ -145,11 +146,37 @@ const ProductsToken = { ` } +const ProductsRPC = { + query: ` + { + productsPage { + rpcHeading + rpcDesc + rpcImg { + url + } + rpcImgLight { + url + } + rpcItem01 + rpcItem02 + rpcItem03 + rpcMobileImg { + url + } + rpcMobileImgLight { + url + } + } + } + ` +} export { ProductsApp, ProductsHero, ProductsNetwork, ProductsStack, ProductsToken, + ProductsRPC, ProductsWatchers } diff --git a/src/pages/products.tsx b/src/pages/products.tsx index 9aba80e..575db12 100644 --- a/src/pages/products.tsx +++ b/src/pages/products.tsx @@ -24,6 +24,7 @@ import Hero from '~/components/sections/products/hero' import Network from '~/components/sections/products/network' import Stack from '~/components/sections/products/stack' import Token from '~/components/sections/products/token' +import RPC from '~/components/sections/products/rpc' import Watchers from '~/components/sections/products/watchers' import { FooterQuery } from '~/lib/cms/queries/footer' import { HeaderQuery } from '~/lib/cms/queries/header' @@ -33,6 +34,7 @@ import { ProductsNetwork, ProductsStack, ProductsToken, + ProductsRPC, ProductsWatchers } from '~/lib/cms/queries/products' @@ -64,6 +66,7 @@ export const getStaticProps = async () => { networkData, appData, tokenData, + rpcData, footerData, headerData ] = await Promise.all([ @@ -73,6 +76,7 @@ export const getStaticProps = async () => { request(ProductsNetwork), request(ProductsApp), request(ProductsToken), + request(ProductsRPC), request(FooterQuery), request(HeaderQuery) ]) @@ -89,6 +93,7 @@ export const getStaticProps = async () => { networkData: networkData?.productsPage, appData: appData?.productsPage, tokenData: tokenData?.productsPage, + rpcData: rpcData?.productsPage, footerData: footerData?.footer, headerData: headerData?.header, categories, @@ -109,6 +114,7 @@ const Products = ({ networkData, appData, tokenData, + rpcData, footerData, headerData }: InferGetStaticPropsType) => { @@ -121,6 +127,7 @@ const Products = ({ + )