diff --git a/public/images/benefit-bg.jpg b/public/images/benefit-bg.jpg new file mode 100644 index 0000000..96f4310 Binary files /dev/null and b/public/images/benefit-bg.jpg differ diff --git a/public/images/benefit-mobile-01.png b/public/images/benefit-mobile-01.png new file mode 100644 index 0000000..05fd9b1 Binary files /dev/null and b/public/images/benefit-mobile-01.png differ diff --git a/public/images/benefit-mobile-02.png b/public/images/benefit-mobile-02.png new file mode 100644 index 0000000..7d27b22 Binary files /dev/null and b/public/images/benefit-mobile-02.png differ diff --git a/src/components/icons/line.tsx b/src/components/icons/line.tsx index 8f54cf7..e6c0913 100644 --- a/src/components/icons/line.tsx +++ b/src/components/icons/line.tsx @@ -1,19 +1,27 @@ -const Line = ({ className, fill }: { className?: string; fill?: string }) => { +const Line = ({ + className, + fill, + height = 72 +}: { + className?: string + fill?: string + height?: number +}) => { return ( - + diff --git a/src/components/primitives/heading/heading.module.scss b/src/components/primitives/heading/heading.module.scss index bc6c11c..cff539e 100644 --- a/src/components/primitives/heading/heading.module.scss +++ b/src/components/primitives/heading/heading.module.scss @@ -31,7 +31,7 @@ } &--sm { - font-size: tovw(40px, 'default', 36px); + font-size: tovw(40px, 'default', 30px); line-height: 1; } diff --git a/src/components/sections/homepage/benefits/benefit/benefit.module.scss b/src/components/sections/homepage/benefits/benefit/benefit.module.scss new file mode 100644 index 0000000..49e452e --- /dev/null +++ b/src/components/sections/homepage/benefits/benefit/benefit.module.scss @@ -0,0 +1,39 @@ +@import '~/css/helpers'; + +.benefit { + display: flex; + + p { + margin: 0; + margin-left: tovw(28px, 'default', 28px); + } +} + +.icon { + position: relative; + width: tovw(38px, 'default', 38px); + height: tovw(27px, 'default', 27px); + + &::before { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: tovw(38px, 'default', 38px); + height: tovw(27px, 'default', 27px); + content: ''; + opacity: 0.5; + background: linear-gradient( + 134.38deg, + #fff 4.91%, + rgb(255 255 255 / 0) 108.92% + ); + } + + svg { + z-index: 5; + width: tovw(32px, 'default', 32px); + height: tovw(32px, 'default', 32px); + transform: translate(50%, -50%); + } +} diff --git a/src/components/sections/homepage/benefits/benefit/index.tsx b/src/components/sections/homepage/benefits/benefit/index.tsx new file mode 100644 index 0000000..6b5c147 --- /dev/null +++ b/src/components/sections/homepage/benefits/benefit/index.tsx @@ -0,0 +1,19 @@ +import * as React from 'react' + +import s from './benefit.module.scss' + +type BenefitProps = { + children: React.ReactNode + icon: React.ReactNode +} + +const Benefit = ({ children, icon }: BenefitProps) => { + return ( +
  • +
    {icon}
    +

    {children}

    +
    • + ) +} + +export default Benefit diff --git a/src/components/sections/homepage/benefits/benefits.module.scss b/src/components/sections/homepage/benefits/benefits.module.scss new file mode 100644 index 0000000..a074e48 --- /dev/null +++ b/src/components/sections/homepage/benefits/benefits.module.scss @@ -0,0 +1,173 @@ +@import '~/css/helpers'; + +.section { + position: relative; + padding-top: tovw(280px, 'default', 80px); + padding-bottom: tovw(246px, 'default', 200px); + + .grid { + display: grid; + margin-top: tovw(64px, 'default', 44px); + grid-column-gap: tovw(24px, 'default', 24px); + grid-template-columns: repeat(12, 1fr); + grid-template-rows: 1fr; + + .icon { + grid-area: 1 / 1 / 2 / 2; + + svg { + display: block; + width: tovw(23px, 'default', 23px); + } + } + + p { + margin: 0; + line-height: 1.33; + letter-spacing: tovw(-0.3px, 'default', -0.3px); + font-size: tovw(30px, 'default', 18px); + grid-area: 1 / 2 / 2 / 11; + } + } + + @media screen and (max-width: 800px) { + .grid { + display: flex; + + .icon { + display: none; + } + } + + .header { + padding-right: 0; + padding-left: 0; + } + } + + ul { + display: grid; + margin: 0; + padding: 0; + list-style-type: none; + grid-gap: tovw(26px, 'default', 26px) tovw(24px, 'default', 24px); + grid-template-columns: repeat(3, auto); + grid-template-rows: repeat(2, 1fr); + @media screen and (max-width: 800px) { + display: flex; + flex-wrap: wrap; + + li { + width: 100%; + } + } + } +} + +.background { + margin: 0 tovw(-56px, 'default', -56px); + margin-top: tovw(72px, 'default', 60px); + background-image: url('/images/benefit-bg.jpg'); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + height: tovw(1582px, 'default', 900px); + + @media screen and (max-width: 800px) { + margin-top: tovw(-60px, 'mobile'); + background-image: none; + height: auto; + } +} + +.developers, +.users { + margin: 0 0 tovw(305px, 'default', 110px) auto; + padding-top: tovw(138px, 'default', 100px); + padding-right: tovw(69px, 'default', 69px); + width: 100%; + max-width: tovw(1080px, 'default', 730px); + + > ul { + margin-top: tovw(88px, 'default', 72px); + } + + @media screen and (max-width: 800px) { + padding: 0 tovw(13px, 'mobile'); + } +} + +.service { + &__header { + position: relative; + padding-left: tovw(8px, 'default'); + + @media screen and (max-width: 800px) { + padding-left: tovw(32px, 'mobile'); + } + + .line { + position: absolute; + top: 0; + left: tovw(-24px, 'default', -16px); + width: tovw(3px, 'default', 2px); + height: 100%; + + @media screen and (max-width: 800px) { + left: tovw(16px, 'mobile'); + } + } + + span { + position: absolute; + top: 0; + left: tovw(-62px, 'default', -48px); + text-transform: uppercase; + font-family: var(--font-dm-mono); + font-size: tovw(12px, 'default', 12px); + + @media screen and (max-width: 800px) { + top: tovw(4px, 'mobile'); + left: tovw(-5px, 'mobile'); + } + } + + p { + max-width: tovw(557px, 'default', 390px); + color: var(--color-grey-light); + } + } +} + +.users { + margin: 0 auto 0 0; + padding-top: tovw(16px, 'default', 16px); + padding-right: 0; + + &__container { + @media screen and (max-width: 800px) { + padding-right: 0; + padding-left: 0; + } + } +} + +.benefit { + &__image { + display: block; + width: 100%; + + &--01 { + transform: translateY(-14%); + z-index: -1; + margin: 0 0 0 tovw(-16px, 'mobile'); + width: calc(100% + (tovw(16px, 'mobile') * 2)); + pointer-events: none; + user-select: none; + } + + &--02 { + margin-bottom: tovw(67px, 'mobile'); + } + } +} diff --git a/src/components/sections/homepage/benefits/icons.tsx b/src/components/sections/homepage/benefits/icons.tsx new file mode 100644 index 0000000..57ab571 --- /dev/null +++ b/src/components/sections/homepage/benefits/icons.tsx @@ -0,0 +1,358 @@ +const Icon01 = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + + + + + ) +} + +const Icon02 = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + + + + + + + ) +} + +const Icon03 = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + + + + + + + + + + + + + ) +} + +const Icon04 = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + + + + ) +} + +const Icon05 = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + + + + + ) +} + +const Icon06 = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + + + + + + ) +} + +const Icon07 = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + + + + + + ) +} + +const Icon08 = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + + + + + + ) +} + +const Icon09 = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + + + + ) +} + +const Icon10 = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + + + + ) +} + +const Icon11 = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + + + ) +} + +const Icon12 = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + + + + ) +} + +export { + Icon01, + Icon02, + Icon03, + Icon04, + Icon05, + Icon06, + Icon07, + Icon08, + Icon09, + Icon10, + Icon11, + Icon12 +} diff --git a/src/components/sections/homepage/benefits/index.tsx b/src/components/sections/homepage/benefits/index.tsx new file mode 100644 index 0000000..fddcfb9 --- /dev/null +++ b/src/components/sections/homepage/benefits/index.tsx @@ -0,0 +1,140 @@ +import clsx from 'clsx' + +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 Benefit from './benefit' +import s from './benefits.module.scss' +import { + Icon01, + Icon02, + Icon03, + Icon04, + Icon05, + Icon06, + Icon07, + Icon08, + Icon09, + Icon10, + Icon11, + Icon12 +} from './icons' + +const Benefits = () => { + return ( +
    + + + Benefits + +
    +
    + +
    +

    + For DApp developers and users, Laconic is the only solution that + provides accurate, low-cost, multi-chain verifiable data, by + leveraging cryptographic proofs and cutting edge data caching + engineering.
    +
    Laconic is the only blockchain data querying solution that + provides cross-chain cryptographic proofs. +

    +
    +     + Benefit +
    + +
    + 01 + + + For DApp Developers + +

    + Quickly and easily build blockchain applications with the fastest, + most accurate, and lowest cost multi-chain verifiable data + solution. +

    +
    +
      + }> + Only solution providing Cryptographic proof + + }> + Composable, supports broader use cases + + }> + From months to seconds. Quick automated setup. + + }>Broad cross-chain compatibility + }> + Unparalleled flexibility. Supports hash-linked data including + blockchain + + }> + Lower development and data costs. Hundreds of times less than + market + +
    +     + Benefit + + +
    + 02 + + + For DApp Users + +

    + Experience a higher quality of service and better uptime with + Laconic. +

    +
    +
      + }> + Greater data access and control + + }> + In-browser local cache, without need for data avilability layer + + }> + Optimal control of privacy levels + + }>Self-Verify data accuracy + }> + Higher quality of service and uptime + + }> + LNT rewards for network participation + +
    +     +     +
    +
    + ) +} + +export default Benefits diff --git a/src/components/sections/homepage/seen-in/index.tsx b/src/components/sections/homepage/seen-in/index.tsx index 897d90f..8a5f71c 100644 --- a/src/components/sections/homepage/seen-in/index.tsx +++ b/src/components/sections/homepage/seen-in/index.tsx @@ -19,7 +19,7 @@ const SeenIn = () => { return (
    - + Seen In { return (
    - + Trusted By { + )