diff --git a/packages/website/components/navigation/navigation.js b/packages/website/components/navigation/navigation.js index 4ef263e397..5d6ba6e043 100644 --- a/packages/website/components/navigation/navigation.js +++ b/packages/website/components/navigation/navigation.js @@ -39,7 +39,7 @@ export default function Navigation({ isProductApp }) { const navItems = links.filter(item => item.text.toLowerCase() !== 'account'); const auth = GeneralPageData.navigation.auth; const logoText = GeneralPageData.site_logo.text; - const theme = router.route === '/pricing' || isProductApp ? 'light' : 'dark'; + const theme = isProductApp ? 'light' : 'dark'; const buttonTheme = isProductApp ? 'pink-blue' : ''; const isDocs = router.route.includes('docs'); diff --git a/packages/website/content/pages/pricing.json b/packages/website/content/pages/pricing.json index 47b5f10fd1..76eb2d02a9 100644 --- a/packages/website/content/pages/pricing.json +++ b/packages/website/content/pages/pricing.json @@ -1,33 +1,5 @@ { - "seo": { - "title": "", - "description": "" - }, - "og": { - "site_name": "", - "url": "", - "type": "website", - "image": "" - }, "page_content": [ - [ - { - "id": "pricing_hero_header", - "columns": [ - { - "type": "hero", - "page": "pricing", - "cols": { - "num": "col-6_md-5_sm-10_ti-12", - "push_left": "off-6_md-6_sm-2_ti-0" - }, - "format": "header", - "heading": "Decentralized shouldn't cost more than centralized storage.", - "subheading": "Stop worrying about costs and focus only on the potential of your application. All storage on Web3.Storage is free today." - } - ] - } - ], [ { "type": "section-data", @@ -35,79 +7,82 @@ "variant": "light" }, { - "id": "section_tiers", + "id": "section_pricing_header", "grid": ["middle"], "columns": [ { - "type": "text_block", + "type": "custom", "cols": { - "num": "col-6_sm-8_mi-10_ti-12", + "num": "col-10_sm-8_mi-10_ti-12", "push_left": "off-0_sm-2_mi-1_ti-0" }, - "format": "medium", - "heading": "Storage that grows with you", - "description": [ - "Web3.Storage is designed to scale to meet your storage needs. The economics of Filecoin allow us to offer all storage for free today.", - "The 1 TiB storage tier is open to everyone. If you need more than 1TiB, that's still free today, but we need to know more about your project so we can scale the service to meet your needs.", - "In the future, users will be able to pay to increase their storage capacity. This will remain low-cost, and all limits already increased for free will continue to be respected!" + "customizations": [ + { + "type": "corkscrew", + "id": "intro_1-hero-corkscrew" + }, + { + "type": "coil", + "id": "intro_1-coil" + }, + { + "type": "cross", + "id": "intro_1-cross" + }, + { + "type": "text_block", + "format": "header", + "heading": "Storage that grows with you", + "description": [ + "Web3.Storage is designed for scale and simplicity. Utilize our elastic, hosted data platform that natively integrates decentralized data and authentication protocols. No need to worry about performance or reliability." + ] + } ] - }, + } + ] + }, + { + "id": "section_trusted_by_header", + "grid": ["middle"], + "columns": [ { "type": "custom", "cols": { - "num": "col-6_sm-8_mi-10_ti-12", + "num": "col-10_sm-8_mi-10_ti-12", "push_left": "off-0_sm-2_mi-1_ti-0" }, "customizations": [ { - "type": "triangle", - "id": "section_tiers-triangle" - }, - { - "type": "image_block", - "src": "/images/tiers/holo-graph.png" + "type": "text_block", + "format": "medium", + "subheading": "TRUSTED BY" } ] } ] }, { - "id": "section_tiers-cards", + "id": "section_trusted_by_logos", + "grid": ["middle"], "columns": [ { - "type": "card_list_block", + "type": "custom", "cols": { - "num": "col-12" + "num": "col-10_sm-8_mi-10_ti-12", + "push_left": "off-0_sm-2_mi-1_ti-0" }, - "direction": "column", - "cards": [ + "customizations": [ { - "type": "E", - "label": "FREE", - "title": "Up to 1 TiB", - "description": "", - "cta": { - "text": "START HERE", - "url": "/account", - "theme": "dark", - "event": "", - "ui": "", - "action": "" - } + "type": "image_block", + "src": "/images/logos/nft-storage.svg" }, { - "type": "E", - "label": "STILL FREE", - "title": "> 1 TiB", - "description": "", - "cta": { - "text": "REQUEST MORE STORAGE", - "url": "/account", - "theme": "outline-dark", - "event": "", - "ui": "", - "action": "" - } + "type": "image_block", + "src": "/images/logos/protocol-labs.svg" + }, + { + "type": "image_block", + "src": "/images/logos/filecoin.svg" } ] } diff --git a/packages/website/pages/pricing.js b/packages/website/pages/pricing.js index bc1ddcf8f8..74ec99f151 100644 --- a/packages/website/pages/pricing.js +++ b/packages/website/pages/pricing.js @@ -1,34 +1,394 @@ -import { useEffect } from 'react'; +import Img from 'components/cloudflareImage.js'; +import GradientBackground from 'components/gradientbackground/gradientbackground.js'; +import Scroll2Top from 'components/scroll2top/scroll2top.js'; +import ImageCross from 'public/images/illustrations/cross.png'; +import ImageCoil from 'public/images/illustrations/coil.png'; +import ImageCorkscrew from 'public/images/illustrations/corkscrew.png'; +import ImageTriangle from 'public/images/illustrations/triangle.png'; +import ImageTriangle1 from 'public/images/illustrations/triangle1.png'; +import BlobCluster from 'public/images/illustrations/blob-cluster.png'; +import Cluster1 from 'public/images/index/cluster-1.png'; +import Button from 'ZeroComponents/button/button'; -import TiersPageData from '../content/pages/pricing.json'; -import Scroll2Top from '../components/scroll2top/scroll2top.js'; -import BlockBuilder from '../components/blockbuilder/blockbuilder.js'; -import { initFloaterAnimations } from '../lib/floater-animations.js'; +const PricingHeader = () => ( + <> +
+
+
+
+
+ +
+
+ +
+
+ +
+
+

Storage that grows with you

+
+

+ web3.storage is designed for scale and simplicity. Utilize our elastic, hosted data platform that + natively integrates decentralized data and authentication protocols. No need to worry about + performance or reliability. +

+
+
+
+
+
+
+
+
+
+
+
+
TRUSTED BY
+
+
+
+
+
+
+
+
+
+ NFT Storage +
+
+
+ Protocol Labs +
+
+
+ Filecoin +
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +); -export default function Home() { - const sections = TiersPageData.page_content; - const animations = TiersPageData.floater_animations; - - useEffect(() => { - let pageFloaters = {}; - if (animations) { - initFloaterAnimations(animations).then(result => { - pageFloaters = result; - }); - } - return () => { - if (pageFloaters.hasOwnProperty('destroy')) { - pageFloaters.destroy(); - } - }; - }, [animations]); +const Card = props => { + const { title, price, isBestValue, children, storageAllocation, storageOverageRate, callToAction, callToActionUrl } = + props; + return ( +
+ {!!isBestValue &&
Best Value!
} +
+
+
{title}
+
+ {price} +
/mo
+
+
+ +
+
{storageAllocation}
+
{storageOverageRate}
+ +
{callToAction}
+ +
+
+
+ ); +}; + +const PricingTiers = () => ( + <> +
+
+
+
+ +
  • Easily store your data and make it available on IPFS
    • +
  • + All data is replicated onto the Filecoin storage network for verifiability that your data is safe +
    • +
  • + Use the platform's other services like w3name and w3link to build the next generation of apps +
    • +     + + +
  • + Everything from the Free tier, plus... +
    • +
  • + Additional storage for personal usage or projects requiring lower data volumes +
    • +     + +
  • + Everything from the Lite tier, plus... +
    • +
  • + Our lowest tier price per GiB stored for use cases that require scale +
    • +
  • Early access to additional products that make web3 production-ready
    • +     +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    FOR ENTERPRISE USERS...
    +
    Custom
    +
    + Looking for way more? Anticipate having a complex integration? Just tell us more about your company + and what you're building using the form below, and we'll get back to you shortly. +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + +); + +const FaqSection = () => ( + <> +
    +
    +
    +
    +
    +
    +

    Frequently Asked Questions

    +
    + What advantages does web3.storage have over other IPFS hosted services? +
    +
    +

    + web3.storage runs on Elastic IPFS, an open-source, cloud-native, highly scalable implementation of + IPFS. We wrote it as the solution to address increasing adoption of web3.storage, which previously + used kubo and IPFS Cluster. As a result, web3.storage is designed to give strong performance and + reliability regardless of how much data is being stored on it, meaning that you can rely on it as + you and web3.storage grow. And all data is backed up in Filecoin storage deals, which gives + cryptographic proof that your data is physically being stored without needing to trust web3.storage. +

    +

    + Further, the platform provides other best-in-class implementations of IPFS on performant + infrastructure, from w3link, our IPFS HTTP gateway that can be up to 10x faster than other public + gateways, to w3name, a hosted service for dynamic data use cases. +

    +
    + +
    +
    +
    +
    +
    + +
    +
    FAQ
    +
    + How do I store data on web3.storage that is already available over the IPFS network without having to + download and reupload it myself? +
    +
    + + Paid web3.storage plans give users access to our implementation of the Pinning Service API, which + allows you to store data on web3.storage that is already available over the IPFS network. + +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +); + +const LinkSection = () => ( +
    +
    +
    +
    +
    +
    +

    Open product. Open book.

    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +

    Open product. Open book.

    +
    + +
    +
    +
    +
    +
    +
    +
    +); + +export default function Home() { return ( <>
    - {sections.map((section, index) => ( - - ))} +
    + + + +
    + +
    @@ -41,7 +401,7 @@ export function getStaticProps() { props: { title: 'Pricing - Web3 Storage - Simple file storage with IPFS & Filecoin', description: - 'Web3.Storage is a service that grows with your needs, and offers a significant free tier with no strings attached.', + 'web3.storage is a service that grows with your needs, and offers a significant free tier with no strings attached.', }, }; } diff --git a/packages/website/pages/pricing.scss b/packages/website/pages/pricing.scss index 43df343117..be151aed62 100644 --- a/packages/website/pages/pricing.scss +++ b/packages/website/pages/pricing.scss @@ -5,6 +5,9 @@ .page-pricing { position: relative; .heading { + @include fontSize_Large; + line-height: leading(50, 35); + margin-bottom: 2.25rem; @include mini { @include fontSize_Large; line-height: leading(45, 35); @@ -12,123 +15,408 @@ } } -#pricing_section_1, -#pricing_section_3 { - position: relative; - @include background_Dark; -} - -#pricing_section_1 { - z-index: 5; - top: -1px; +.sectional { + padding: 6rem 0; } -#pricing_section_2 { +#tiered_pricing_section_1, +#tiered_pricing_section_3 { position: relative; - z-index: 2; - padding: 10.25rem 0; @include selection_Light; +} - &:before { - content: ''; - position: absolute; - width: calc($containerWidth + 9rem); - height: calc(100% - 20rem); - top: 10rem; - border-radius: 0.5rem; - opacity: 0.15; - background-color: $waterloo; - pointer-events: none; - @include shadow1; - z-index: 0; - left: calc(50% - #{math.div($containerWidth, 2)} - 4.5rem); - @include medium { - left: 10px; - width: calc(100% - 20px); - } +#tiered_pricing_section_1 { + z-index: 1; + padding-bottom: 5rem; + + .gradient-background-component.light { + width: calc(100% + 2rem); + height: calc(100% + 17rem + 12rem); + top: -19.5rem; + left: -1rem; } -} -#pricing_section_3 { - z-index: 2; - padding-bottom: 12rem; - &:before { - display: none; + &::after { content: ''; position: absolute; left: 0; - top: 1px; + bottom: -1px; width: 100%; height: 12rem; - transform: translateY(-100%); + z-index: -1; background-repeat: no-repeat; - background-size: 100%; + background-size: 119%; background-position: left 0 bottom 0; - background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1636.34' height='122.322' viewBox='0 0 1636.34 122.322'%3e%3cdefs%3e%3cclipPath id='clip-path'%3e%3crect width='1636.34' height='122.322' fill='none'/%3e%3c/clipPath%3e%3c/defs%3e%3cg id='Scroll_Group_1' data-name='Scroll Group 1' clip-path='url(%23clip-path)' style='isolation: isolate'%3e%3cg id='Group_1914' data-name='Group 1914'%3e%3cpath id='Path_18835' data-name='Path 18835' d='M-16101,11198.438v1055.932s338.735-28.635,512.177,140.625,36.063,416.637,329.8,625.462,792.163,107.167,792.163,107.167l2.2-1929.186s-388.361-117.4-797.447-117.4S-16101,11198.438-16101,11198.438Z' transform='translate(16101 -11081.04)' fill='%2303040a'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e "); + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1636.34' height='122.322' viewBox='0 0 1636.34 122.322'%3e%3cdefs%3e%3cclipPath id='clip-path'%3e%3crect width='1636.34' height='122.322' fill='none'/%3e%3c/clipPath%3e%3c/defs%3e%3cg id='Scroll_Group_1' data-name='Scroll Group 1' clip-path='url(%23clip-path)' style='isolation: isolate'%3e%3cg id='Group_1914' data-name='Group 1914'%3e%3cpath id='Path_18835' data-name='Path 18835' d='M-16101,11198.438v1055.932s338.735-28.635,512.177,140.625,36.063,416.637,329.8,625.462,792.163,107.167,792.163,107.167l2.2-1929.186s-388.361-117.4-797.447-117.4S-16101,11198.438-16101,11198.438Z' transform='translate(16101 -11081.04)' fill='%2303040a'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e"); } - @include ultraLarge { - &:before { - height: 12rem; - display: block; - } +} + +#intro_1-hero-corkscrew { + position: absolute; + right: -1rem; + top: 1rem; + transform: rotate(-60deg); + display: block; + width: 441px; + height: 441px; + z-index: -1; +} + +#intro_1-coil { + @include small { + display: none; } - @include xlarge { - padding-bottom: 8rem; + position: absolute; + right: 21rem; + top: 2rem; + left: auto; + z-index: -1; + transform: rotate(322deg); +} + +#intro_1-cross { + display: block; + position: relative; + right: 8rem; + top: -2rem; + left: auto; + bottom: auto; + width: 47px; + height: 47px; +} + +#section_trusted_by_logos .column-content { + position: relative; +} + +#intro_1-triangle_left { + display: block; + position: absolute; + right: auto; + top: 5rem; + left: -8rem; + bottom: auto; + width: 50px; + height: 50px; + transform: rotate(320deg); +} + +#intro_1-triangle_right { + display: block; + position: absolute; + right: -22rem; + top: -5rem; + left: auto; + bottom: auto; + width: 40px; + height: 40px; + transform: rotate(295deg); +} + +#intro_1-cross_right { + display: block; + position: absolute; + right: -28rem; + top: 1rem; + left: auto; + bottom: auto; + width: 77px; + height: 77px; + transform: scaleX(-1); +} + +#section_plan_cards .column-content { + display: flex; + gap: 24px; +} + +@media only screen and (max-width: 1000px) { + #section_plan_cards .column-content { + flex-flow: column nowrap; } - @include medium { - &:before { - width: 200%; - left: -20%; + + #section_plan_cards .pricing-card-body { + margin: 0 0 1rem 0; + width: unset; + + &.adorned { + margin: 41px 0 1rem 0; } } - &:after { - content: ''; - position: absolute; - left: 0; - top: 1px; +} + +.pricing-card { + position: relative; + box-sizing: border-box; + + .pricing-card-body { + display: flex; + flex-flow: column nowrap; + width: 304px; + height: 571px; + background: rgba(255, 255, 255, 0.35); + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.0562744); + border-radius: 10px; + padding: 1rem; + margin: 41px 0 0 0; + + &.adorned { + border-radius: 0 0 10px 10px; + } + } + + .best-value-adornment { + border-radius: 0 0 10px 10px; + height: 41px; width: 100%; - height: 12rem; - transform: translateY(-100%); - background-repeat: no-repeat; - background-size: 100%; - background-position: left 0 bottom 0; + background-color: red; + position: absolute; + background: linear-gradient(269.1deg, #0ab2aa 0%, #4622fc 53.4%, #ff00c4 108.59%); + opacity: 1; + border-radius: 10px 10px 0px 0px; + + font-family: $font_Primary; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 100%; + padding: 0.75rem 1rem; + vertical-align: middle; + + letter-spacing: 0.48px; + color: #ffffff; + } +} + +.pricing-title-row { + display: flex; + margin: 1rem 0.5rem; + flex-flow: row nowrap; + justify-content: space-between; + align-items: baseline; +} +.pricing-title { + font-family: $font_Primary; + font-style: normal; + font-weight: 600; + font-size: 36px; + line-height: 138%; + color: #03040a; +} +.pricing-price { + display: inline-block; + + font-family: $font_Primary; + font-style: normal; + font-weight: 700; + font-size: 30px; + line-height: 70%; + letter-spacing: 0.48px; + color: #03040a; + + .pricing-price-term { + display: inline-block; + color: #404040; + font-weight: 300; + } +} + +.plan-details { + flex: 1 1 auto; + padding: 0 0 0 calc(20px + 15px); + + li { + list-style: none; + line-height: 28px; + position: relative; + margin: 0 0 20px 0; + } + li::before { + content: url('/images/pricing/circle-check.svg'); + display: inline-block; + line-height: 28px; + position: absolute; + left: calc(-20px - 15px); + top: 4px; + } +} + +.plan-summary { + justify-self: end; + padding: 0 1.8rem 1.8rem 1.8rem; + display: flex; + flex-flow: column nowrap; + align-items: center; + + .plan-storage-allocation { + font-family: $font_Primary; + font-style: normal; + font-weight: 700; + font-size: 22px; + line-height: 95%; + letter-spacing: 0.48px; + color: #03040a; + padding-bottom: 0.5rem; + } + .plan-overage-rate { + font-family: $font_Primary; + font-style: italic; + font-weight: 600; + font-size: 14px; + line-height: 150%; + letter-spacing: 0.48px; + color: #03040a; + height: 2rem; + padding-bottom: 0.5rem; + } + .plan-call-to-action { + padding: 10px 20px; + background: #03040a; + border-radius: 20px; + + font-family: $font_Primary; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 138%; + letter-spacing: 0.39px; + color: #fbfbfc; + + height: unset !important; } } -#pricing_section_4 { +li.pricing-bullet-1 { + height: 3.25rem; +} +li.pricing-bullet-2 { + height: 4.75rem; +} +li.pricing-bullet-3 { + height: 3rem; +} + +.pricing-enterprise-users { + display: flex; + flex-flow: row nowrap; + background: rgba(255, 255, 255, 0.35); + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.0562744); + border-radius: 10px; + padding: 2.5rem; + margin: 1rem 0 3rem 0; + + .enterprise-blob { + position: relative; + flex: 0 0 auto; + width: 260px; + height: 260px; + + & > span { + top: -8rem; + left: -9rem; + } + + $blobSize: 460px; + + & > span, + & > span > img { + position: absolute; + max-width: $blobSize !important; + max-height: $blobSize !important; + min-width: $blobSize !important; + min-height: $blobSize !important; + width: $blobSize !important; + height: $blobSize !important; + } + } + + @media only screen and (max-width: 1000px) { + .enterprise-blob { + display: none; + } + } + + .enterprise-content { + flex: 1 1 auto; + display: flex; + flex-flow: column nowrap; + } + + .enterprise-title { + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 131%; + letter-spacing: 0.48px; + color: #03040a; + } + + .enterprise-heading { + font-style: normal; + font-weight: 600; + font-size: 40px; + line-height: 138%; + color: #03040a; + } + + .enterprise-description { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 175%; + color: #000000; + } + + .enterprise-above-call-to-action { + flex: 1 1 auto; + min-height: 1rem; + } + + .enterprise-call-to-action.button.Button { + &::after { + border-color: #03040a; + } + &:hover { + &::after { + border-color: $white; + } + } + .button-contents { + color: #03040a; + padding: 10px 20px; + font-size: 16px; + line-height: 100%; + letter-spacing: 0.39px; + } + } +} + +#section_FAQ_ctas.sectional { + padding: 2rem 0 14rem 0; +} + +#tiered_pricing_section_2 { position: relative; - z-index: 6; - background-color: $seaShell; + z-index: 2; + @include background_Dark; +} + +#tiered_pricing_section_3 { &:before { content: ''; - display: none; + display: block; position: absolute; - top: 2px; - left: 0; width: 100%; - height: 10rem; + height: 20rem; transform: translateY(-100%); background-size: 100%; background-repeat: no-repeat; background-position: left 0 bottom 0; - background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='1365' height='172.072' viewBox='0 0 1365 172.072'%3e%3cpath id='Subtraction_1' data-name='Subtraction 1' d='M1365.5,1490.379H.5V1318.307c2.18,1.03,14.117,6.583,35.282,14.638,11.943,4.545,24.781,9.111,38.157,13.571,16.412,5.472,33.757,10.822,51.551,15.9,44.637,12.743,92.561,23.944,142.44,33.292,29.392,5.508,59.829,10.432,90.465,14.635,33.579,4.607,68.238,8.462,103.013,11.458,23.225,2,46.631,3.5,69.567,4.453,21.313.886,43.042,1.336,64.586,1.336,34.14,0,69.483-1.111,108.051-3.4,35.709-2.115,71.444-5.084,100.157-7.47l4.085-.339.018,0c31.282-2.6,63.629-5.288,95.834-7.255,17.318-1.057,33.294-1.833,48.84-2.372,17.419-.6,33.881-.9,50.327-.9,32.485,0,63.635,1.157,95.23,3.537,16.949,1.277,34.216,2.934,51.319,4.926,17.863,2.08,36.168,4.6,54.408,7.478,29.029,4.588,57.861,10.31,85.7,17.008,25.788,6.206,51.349,13.4,75.973,21.383v30.184h0Z' transform='translate(-0.5 -1318.307)' fill='%23f1f1f1'/%3e%3c/svg%3e "); + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='1365' height='172.072' viewBox='0 0 1365 172.072'%3e%3cpath id='Subtraction_1' data-name='Subtraction 1' d='M1365.5,1490.379H.5V1318.307c2.18,1.03,14.117,6.583,35.282,14.638,11.943,4.545,24.781,9.111,38.157,13.571,16.412,5.472,33.757,10.822,51.551,15.9,44.637,12.743,92.561,23.944,142.44,33.292,29.392,5.508,59.829,10.432,90.465,14.635,33.579,4.607,68.238,8.462,103.013,11.458,23.225,2,46.631,3.5,69.567,4.453,21.313.886,43.042,1.336,64.586,1.336,34.14,0,69.483-1.111,108.051-3.4,35.709-2.115,71.444-5.084,100.157-7.47l4.085-.339.018,0c31.282-2.6,63.629-5.288,95.834-7.255,17.318-1.057,33.294-1.833,48.84-2.372,17.419-.6,33.881-.9,50.327-.9,32.485,0,63.635,1.157,95.23,3.537,16.949,1.277,34.216,2.934,51.319,4.926,17.863,2.08,36.168,4.6,54.408,7.478,29.029,4.588,57.861,10.31,85.7,17.008,25.788,6.206,51.349,13.4,75.973,21.383v30.184h0Z' transform='translate(-0.5 -1318.307)' fill='%23f1f1f1'/%3e%3c/svg%3e"); + z-index: 2; } - @include ultraLarge { - &:before { - display: block; - height: 20rem; - } - } - @include xlarge { - &:before { - height: 14rem; - } - } - @include small { - &:before { - width: 300%; - left: -125%; - } + #section_explore-docs.sectional { + padding: 0 0 6rem 0; } } @@ -236,9 +524,8 @@ } // ------------------------------------------------------------- Section [Tiers] -#section_tiers { - padding-top: 4.25rem; - padding-bottom: 3rem; +#section_pricing_header { + padding: 4.25rem 0 0 0; .text-block { .heading { @include fontSize_Large; @@ -249,30 +536,45 @@ } } -#section_tiers-cards { - padding-top: 0; - padding-bottom: 1rem; - .column-content { - position: relative; - } +#section_pricing_header .text-block.format__header h1 { + font-weight: 600; + font-size: 55px; + line-height: 68px; } -#section_tiers-triangle { - position: absolute; - width: 4.875rem; - top: 8rem; - transform: scaleX(-1) rotate(-100deg); - right: calc(50% - #{math.div($containerWidth, 2)}); - @include small { - right: -5rem; - } - @include mini { - display: none; +#section_pricing_header .text-block.format__header .description { + padding-right: 9rem; +} + +#section_trusted_by_header { + padding: 0; +} + +#section_trusted_by_logos { + position: relative; + z-index: 1; + padding: 1rem 0; +} + +#section_trusted_by_logos .wrapping-logos { + display: flex; + flex-flow: row wrap; + gap: 0 5rem; +} + +@media only screen and (max-width: 1000px) { + #section_trusted_by_logos .wrapping-logos { + gap: 1rem 50rem; } } +#section_trusted_by_logos .image-block img { + width: auto !important; + height: auto !important; +} + // --------------------------------------------------------------- Section [FAQ] -#pricing_section_FAQ_info { +#tiered_pricing_section_FAQ_info { position: relative; padding-bottom: 3rem; color: white; @@ -293,6 +595,14 @@ z-index: 1; } + .column-1 { + margin-right: 5rem; + padding-right: 2rem; + } + .column-2 { + align-self: flex-start; + } + &:before { content: ''; position: absolute; @@ -300,7 +610,6 @@ height: 200%; top: 0; left: -5rem; - background-image: url('/images/index/corkscrew-bg.png'); background-repeat: no-repeat; background-size: 2112px; background-position: center; diff --git a/packages/website/public/images/illustrations/blob-cluster.png b/packages/website/public/images/illustrations/blob-cluster.png new file mode 100644 index 0000000000..f884a13c54 Binary files /dev/null and b/packages/website/public/images/illustrations/blob-cluster.png differ diff --git a/packages/website/public/images/logos/filecoin.svg b/packages/website/public/images/logos/filecoin.svg new file mode 100644 index 0000000000..91285e031c --- /dev/null +++ b/packages/website/public/images/logos/filecoin.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/public/images/logos/nft-storage.svg b/packages/website/public/images/logos/nft-storage.svg new file mode 100644 index 0000000000..82697e6714 --- /dev/null +++ b/packages/website/public/images/logos/nft-storage.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/website/public/images/logos/protocol-labs.svg b/packages/website/public/images/logos/protocol-labs.svg new file mode 100644 index 0000000000..00cac15209 --- /dev/null +++ b/packages/website/public/images/logos/protocol-labs.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/public/images/pricing/circle-check.svg b/packages/website/public/images/pricing/circle-check.svg new file mode 100644 index 0000000000..ce6b6cac9c --- /dev/null +++ b/packages/website/public/images/pricing/circle-check.svg @@ -0,0 +1,4 @@ + + + +