diff --git a/gatsby-node.js b/gatsby-node.js index 3cd344fd6..42ac7ead3 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -12,4 +12,10 @@ exports.createPages = async ({ graphql, actions }) => { toPath: `/build`, isPermanent: true, }); + + createRedirect({ + fromPath: `/what-is-celestia`, + toPath: `/underneath`, + isPermanent: true, + }); }; diff --git a/src/components/framework-tabs.js b/src/components/framework-tabs.js index ea7d84fec..86e8be4ca 100644 --- a/src/components/framework-tabs.js +++ b/src/components/framework-tabs.js @@ -1,13 +1,38 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; +import { useLocation } from "@reach/router"; import IconCard from "./modules/icon-card"; import { AnchorLink } from "gatsby-plugin-anchor-links"; -const FrameworkTabs = ({ content, categories, anchorId, section }) => { - const [selectedTab, setSelectedTab] = useState("All"); +const FrameworkTabs = ({ content, categories, anchorId, section, type }) => { + const location = useLocation(); + const urlParams = new URLSearchParams(location.search); + const initialFrameworkCategory = urlParams.get("framework_category") || "All"; + const initialRollupCategory = urlParams.get("rollup_category") || "All"; + const [selectedFrameworkTab, setSelectedFrameworkTab] = useState(initialFrameworkCategory); + const [selectedRollupTab, setSelectedRollupTab] = useState(initialRollupCategory); const allUniqueCategories = [...new Set(categories.items.flatMap((item) => item.category))]; - console.log(allUniqueCategories); + useEffect(() => { + if (type === "framework" && initialFrameworkCategory !== selectedFrameworkTab) { + setSelectedFrameworkTab(initialFrameworkCategory); + } + if (type === "rollup" && initialRollupCategory !== selectedRollupTab) { + setSelectedRollupTab(initialRollupCategory); + } + }, [initialFrameworkCategory, initialRollupCategory, type]); + + const handleTabClick = (category, tabType) => { + if (tabType === "framework") { + setSelectedFrameworkTab(category); + } else if (tabType === "rollup") { + setSelectedRollupTab(category); + } + const newUrl = `${location.pathname.replace(/\/$/, "")}?framework_category=${ + tabType === "framework" ? category : selectedFrameworkTab + }&rollup_category=${tabType === "rollup" ? category : selectedRollupTab}`; + window.history.pushState({}, "", newUrl); + }; return (
@@ -17,25 +42,23 @@ const FrameworkTabs = ({ content, categories, anchorId, section }) => { {categories.description &&
{categories.description}
}
- {allUniqueCategories.map(function (category) { - return ( -
setSelectedTab(category)} - > - {category} -
- ); - })} + {allUniqueCategories.map((category) => ( +
handleTabClick(category, type)} + > + {category} +
+ ))}
{categories.items - .filter((item) => item.category.includes(selectedTab)) + .filter((item) => item.category.includes(type === "framework" ? selectedFrameworkTab : selectedRollupTab)) .map((item) => ( What is Celestia? page for an overview.', + text: 'Celestia is a modular consensus and data network, built to enable anyone to easily deploy their own blockchain with minimal overhead. Head to the What is Celestia? page for an overview.', }, ], }; diff --git a/src/datas/faq/faqs.js b/src/datas/faq/faqs.js index a7c0a902f..3a8134500 100644 --- a/src/datas/faq/faqs.js +++ b/src/datas/faq/faqs.js @@ -1,31 +1,37 @@ export const faqs = [ - { - id: 1, - question: 'What is Celestia?', - text: 'Celestia is a new technology that powers, scales, and secures web3 applications. To achieve this, Celestia introduces a new blockchain architecture to solve the core scaling challenges of today’s blockchains. This new architecture is what we call modular blockchains.

Visit the what is Celestia page to learn more.', - },{ - id: 2, - question: 'What is a modular blockchain?', - text: 'Modular blockchains are a new paradigm in blockchain design. Instead of one blockchain doing everything, modular blockchains specialize and optimize to perform a given task. This specialization provides breakthroughs in scalability, flexibility, and interoperability, enabling developers to build blockchain applications for mass adoption.

Want to dive in on modular blockchains? Explore Learn Modular.', - },{ - id: 3, - question: 'How does Celestia scale?', - text: 'Celestia introduces a new feature called data availability sampling. This feature allows Celestia to safely increase its block size as more light nodes join the network. Importantly, block size increases don’t reduce Celestia’s security or decentralization, unlike traditional blockchains.', - },{ - id: 4, - question: 'What programming languages and VMs are supported by Celestia?', - text: 'Because of Celestia’s modular architecture, it can support any programming language or VM. Currently supported languages include Solidity (EVM), Rust & Golang (Cosmos SDK). Developers are free to use any existing language and VM or define their own.', - },{ - id: 5, - question: 'Where can developers get started?', - text: 'Developers can head to the docs to get started with building on Celestia.', - },{ - id: 6, - question: 'How do I run a node on Celestia?', - text: 'Celestia supports multiple testnets that users can run nodes on in preparation for mainnet. Information on running testnet nodes is available in our documentation.', - },{ - id: 7, - question: 'Will Celestia have a token and if so, what will it be used for?', - text: 'Celestia is designed to have a token used to secure the network via Proof of Stake and to pay for transaction fees on the network, and eventually a fee burn mechanism similar to EIP-1559 in Ethereum.', - }, -] + { + id: 1, + question: "What is Celestia?", + text: 'Celestia is a new technology that powers, scales, and secures web3 applications. To achieve this, Celestia introduces a new blockchain architecture to solve the core scaling challenges of today’s blockchains. This new architecture is what we call modular blockchains.

Visit the what is Celestia page to learn more.', + }, + { + id: 2, + question: "What is a modular blockchain?", + text: 'Modular blockchains are a new paradigm in blockchain design. Instead of one blockchain doing everything, modular blockchains specialize and optimize to perform a given task. This specialization provides breakthroughs in scalability, flexibility, and interoperability, enabling developers to build blockchain applications for mass adoption.

Want to dive in on modular blockchains? Explore Learn Modular.', + }, + { + id: 3, + question: "How does Celestia scale?", + text: "Celestia introduces a new feature called data availability sampling. This feature allows Celestia to safely increase its block size as more light nodes join the network. Importantly, block size increases don’t reduce Celestia’s security or decentralization, unlike traditional blockchains.", + }, + { + id: 4, + question: "What programming languages and VMs are supported by Celestia?", + text: "Because of Celestia’s modular architecture, it can support any programming language or VM. Currently supported languages include Solidity (EVM), Rust & Golang (Cosmos SDK). Developers are free to use any existing language and VM or define their own.", + }, + { + id: 5, + question: "Where can developers get started?", + text: 'Developers can head to the docs to get started with building on Celestia.', + }, + { + id: 6, + question: "How do I run a node on Celestia?", + text: 'Celestia supports multiple testnets that users can run nodes on in preparation for mainnet. Information on running testnet nodes is available in our documentation.', + }, + { + id: 7, + question: "Will Celestia have a token and if so, what will it be used for?", + text: "Celestia is designed to have a token used to secure the network via Proof of Stake and to pay for transaction fees on the network, and eventually a fee burn mechanism similar to EIP-1559 in Ethereum.", + }, +]; diff --git a/src/datas/what-is-celestia/content.js b/src/datas/underneath/content.js similarity index 65% rename from src/datas/what-is-celestia/content.js rename to src/datas/underneath/content.js index 0d00a6322..921b2c646 100644 --- a/src/datas/what-is-celestia/content.js +++ b/src/datas/underneath/content.js @@ -5,9 +5,8 @@ export const FooterBoxes2 = [ link: { text: "Build modular", href: "/build/", - type: "internal", + type: "external", id: "build", - class: "plausible-event-name=Build_Your_App_Button--What_Is_Celestia_Page-Start_Using_Section", }, }, { @@ -16,9 +15,8 @@ export const FooterBoxes2 = [ link: { text: "Explore", href: "/#explore-celestia", - type: "anchor", + type: "external", id: "explore", - class: "plausible-event-name=Explore_What_You_Can_Do_Button--What_Is_Celestia_Page-Start_Using_Section", }, }, ]; diff --git a/src/datas/underneath/data-availability.js b/src/datas/underneath/data-availability.js new file mode 100644 index 000000000..e0051a68d --- /dev/null +++ b/src/datas/underneath/data-availability.js @@ -0,0 +1,17 @@ +export const dataAvailability = { + title: "Removing the DA bottleneck", + text: ` +

Data availability (DA) has been a core scaling bottleneck for crypto applications. So far, rollups have tried to avoid the DA bottleneck by recruiting a committee or centralized server for DA.

+

Now, Celestia provides high data throughput that is verifiable for any user through a light node. This is possible because of data availability sampling. As the light node network grows, Celestia can scale to the data throughput needed for millions of rollups without compromising end-user security.

+ `, + image: { + src: "underneath/celestia-underneath-da-image.png", + alt: "From monolithic to modular", + }, + button: { + class: "simple", + type: "external", + text: "Start light node", + url: "/run-a-light-node/", + }, +}; diff --git a/src/datas/underneath/from-monolith.js b/src/datas/underneath/from-monolith.js new file mode 100644 index 000000000..1ed1bafc3 --- /dev/null +++ b/src/datas/underneath/from-monolith.js @@ -0,0 +1,12 @@ +export const fromMonolith = { + title: "Monolithic to modular", + text: ` +

Bitcoin was the first blockchain and decentralized app. But Bitcoin wasn’t made for others to build apps on, so developers began building their own basic L1s.

+

Then Ethereum built the first blockchain you could program for apps. However, developers continued launching L1s with increasing development times and costs.

+

Now, Celestia introduces a new modular architecture that makes it easy for anyone to securely launch their own blockchain. Without needing to recruit a committee, you can deploy your own chain with Celestia underneath in just one click.

+ `, + image: { + src: "underneath/celestia-underneath-from-monolith.png", + alt: "From monolithic to modular", + }, +}; diff --git a/src/datas/underneath/hero-data.js b/src/datas/underneath/hero-data.js new file mode 100644 index 000000000..570494916 --- /dev/null +++ b/src/datas/underneath/hero-data.js @@ -0,0 +1,39 @@ +export const heroData = { + title: "Celestia underneath", + subtitle: "Build whatever", + description: ` +

Celestia is a modular blockchain built to securely scale any ecosystem.

+

Modular

+

Celestia’s modular design easily plugs into any rollup framework or chain to provide permissionless, high-throughput data availability. With Celestia underneath, deploy an Ethereum L2 in 1-click or transform nearly any VM into your own sovereign blockchain.

+

Secure

+

Celestia provides high data throughput that is verifiable for any user through a light node. Light nodes allow anyone to directly verify data availability and interact with Celestia without centralized gateways or RPC providers.

+

Scale

+

With low-cost DA and abundant throughput, you have a blank canvas to build whatever with Celestia underneath.

+ `, + image: { + src: "underneath/celestia-underneath-hero.png", + alt: "Celestia Underneath Hero", + }, + cards: [ + { + title: "Ethereum L2", + text: "Use leading rollup frameworks to deploy an Ethereum L2.", + button: { + class: "external", + type: "external", + text: "Simply deploy", + url: "/build?framework_category=Ethereum#build", + }, + }, + { + title: "Sovereign rollup", + text: "Deploy your own customizable sovereign chain.", + button: { + class: "external", + type: "external", + text: "Build whatever", + url: "/build/?framework_category=Sovereign#build", + }, + }, + ], +}; diff --git a/src/datas/underneath/seoContent.js b/src/datas/underneath/seoContent.js new file mode 100644 index 000000000..90dd45a3d --- /dev/null +++ b/src/datas/underneath/seoContent.js @@ -0,0 +1,5 @@ +export const seoContent = { + title: "Celestia Underneath | celestia.org", + description: "Celestia is a modular blockchain specialized in ordering transactions and making their data available (DA). ", + image: "", +}; diff --git a/src/datas/underneath/why-celestia.js b/src/datas/underneath/why-celestia.js new file mode 100644 index 000000000..274c67721 --- /dev/null +++ b/src/datas/underneath/why-celestia.js @@ -0,0 +1,39 @@ +export const whyCelestia = { + title: "Why Celestia?", + content: [ + { + title: "Blockspace as a canvas", + text: ` +

Celestia sits underneath, so you can customize your application however you like.

+

Modify the VM of your chain to unlock novel use cases or higher performance. Building a game? Express any type of game logic as a rollup on Celestia, even fully onchain gameplay.

+

Or deploy with any existing blockchain framework and upgrade as new modular capabilities come online.

+ `, + image: { + src: "underneath/celestia-underneath-why-celestia-1.png", + alt: "From monolithic to modular", + }, + }, + { + title: "Deploy fast", + text: ` +

Using a rollups-as-a-service (RaaS) provider, you can one-click deploy a rollup with access to all necessary infrastructure out-of-the-box, like a block explorer, account abstraction, RPCs, and high-uptime sequencing.

+

With Celestia underneath, a customizable blockchain becomes as easy to deploy as a smart contract.

+ `, + image: { + src: "underneath/celestia-underneath-why-celestia-2.png", + alt: "From monolithic to modular", + }, + }, + { + title: "Access abundant throughput", + text: ` +

Celestia keeps DA abundant and low-cost with DAS so that developers can create new kinds of expressive apps like onchain games and generative NFTs.

+

Low fees also provide new options to monetize. For example, an app can take a percentage of transaction fees on its own rollup. With these new monetization options, teams can support user growth by subsidizing onboarding costs or eliminating specific user fees.

+ `, + image: { + src: "underneath/celestia-underneath-why-celestia-3.png", + alt: "From monolithic to modular", + }, + }, + ], +}; diff --git a/src/datas/what-is-celestia/seoContent.js b/src/datas/what-is-celestia/seoContent.js deleted file mode 100644 index d53c9d23b..000000000 --- a/src/datas/what-is-celestia/seoContent.js +++ /dev/null @@ -1,6 +0,0 @@ -export const seoContent = { - title: "What is Celestia? | celestia.org", - ogTitle: "What is Celestia? | celestia.org", - description: "A complete beginner's guide to how Celestia works, its key benefits, and how anyone in the world will be able to create their own blockchain in minutes.", - image: "/what-is-celestia-og-image.jpg", -}; \ No newline at end of file diff --git a/src/datas/what-is-celestia/toc.js b/src/datas/what-is-celestia/toc.js deleted file mode 100644 index 6ce6b48ea..000000000 --- a/src/datas/what-is-celestia/toc.js +++ /dev/null @@ -1,32 +0,0 @@ -export const tableOfContent = [ - { - depth: 1, - id: "what-is-celestia", - value: "What is Celestia?", - }, - { - depth: 1, - id: "why-celestia", - value: "Why Celestia?", - }, - { - depth: 1, - id: "what-is-data-availability", - value: "What is data availability?", - }, - { - depth: 1, - id: "what-is-data-availability-sampling", - value: "What is data availability sampling?", - }, - { - depth: 1, - id: "what-i-a-modular-blockchain", - value: "What is a modular blockchain?", - }, - { - depth: 1, - id: "start-using-celestia", - value: "Start using Celestia!", - }, -]; diff --git a/src/fonts/subset-Inter-Medium.woff b/src/fonts/subset-Inter-Medium.woff new file mode 100644 index 000000000..495faef7f Binary files /dev/null and b/src/fonts/subset-Inter-Medium.woff differ diff --git a/src/fonts/subset-Inter-Medium.woff2 b/src/fonts/subset-Inter-Medium.woff2 new file mode 100644 index 000000000..871ce4ce5 Binary files /dev/null and b/src/fonts/subset-Inter-Medium.woff2 differ diff --git a/src/images/underneath/celestia-underneath-da-image.png b/src/images/underneath/celestia-underneath-da-image.png new file mode 100644 index 000000000..d305a1fcd Binary files /dev/null and b/src/images/underneath/celestia-underneath-da-image.png differ diff --git a/src/images/underneath/celestia-underneath-da.png b/src/images/underneath/celestia-underneath-da.png new file mode 100644 index 000000000..56905d3d2 Binary files /dev/null and b/src/images/underneath/celestia-underneath-da.png differ diff --git a/src/images/underneath/celestia-underneath-from-monolith.png b/src/images/underneath/celestia-underneath-from-monolith.png new file mode 100644 index 000000000..ea672148f Binary files /dev/null and b/src/images/underneath/celestia-underneath-from-monolith.png differ diff --git a/src/images/underneath/celestia-underneath-hero.png b/src/images/underneath/celestia-underneath-hero.png new file mode 100644 index 000000000..f8c7f1a39 Binary files /dev/null and b/src/images/underneath/celestia-underneath-hero.png differ diff --git a/src/images/underneath/celestia-underneath-why-celestia-1.png b/src/images/underneath/celestia-underneath-why-celestia-1.png new file mode 100644 index 000000000..9de06ecc8 Binary files /dev/null and b/src/images/underneath/celestia-underneath-why-celestia-1.png differ diff --git a/src/images/underneath/celestia-underneath-why-celestia-2.png b/src/images/underneath/celestia-underneath-why-celestia-2.png new file mode 100644 index 000000000..564191ba5 Binary files /dev/null and b/src/images/underneath/celestia-underneath-why-celestia-2.png differ diff --git a/src/images/underneath/celestia-underneath-why-celestia-3.png b/src/images/underneath/celestia-underneath-why-celestia-3.png new file mode 100644 index 000000000..a53652929 Binary files /dev/null and b/src/images/underneath/celestia-underneath-why-celestia-3.png differ diff --git a/src/images/what-is-celestia/celestia-connections.png b/src/images/what-is-celestia/celestia-connections.png deleted file mode 100644 index a64f2fa6f..000000000 Binary files a/src/images/what-is-celestia/celestia-connections.png and /dev/null differ diff --git a/src/images/what-is-celestia/celestia-data-availability-sampling.png b/src/images/what-is-celestia/celestia-data-availability-sampling.png deleted file mode 100644 index c4505011c..000000000 Binary files a/src/images/what-is-celestia/celestia-data-availability-sampling.png and /dev/null differ diff --git a/src/images/what-is-celestia/celestia-data-availability.png b/src/images/what-is-celestia/celestia-data-availability.png deleted file mode 100644 index 3d39313dd..000000000 Binary files a/src/images/what-is-celestia/celestia-data-availability.png and /dev/null differ diff --git a/src/images/what-is-celestia/celestia-infographics-paths-mobile.png b/src/images/what-is-celestia/celestia-infographics-paths-mobile.png deleted file mode 100644 index fba1dff4c..000000000 Binary files a/src/images/what-is-celestia/celestia-infographics-paths-mobile.png and /dev/null differ diff --git a/src/images/what-is-celestia/celestia-infographics-paths.png b/src/images/what-is-celestia/celestia-infographics-paths.png deleted file mode 100644 index 1efc8281f..000000000 Binary files a/src/images/what-is-celestia/celestia-infographics-paths.png and /dev/null differ diff --git a/src/images/what-is-celestia/celestia-modular-infographics-mobile.png b/src/images/what-is-celestia/celestia-modular-infographics-mobile.png deleted file mode 100644 index 0a9f24fb0..000000000 Binary files a/src/images/what-is-celestia/celestia-modular-infographics-mobile.png and /dev/null differ diff --git a/src/images/what-is-celestia/celestia-modular-infographics.png b/src/images/what-is-celestia/celestia-modular-infographics.png deleted file mode 100644 index 036ff65d4..000000000 Binary files a/src/images/what-is-celestia/celestia-modular-infographics.png and /dev/null differ diff --git a/src/images/what-is-celestia/celestia-modular.png b/src/images/what-is-celestia/celestia-modular.png deleted file mode 100644 index 1c82c235d..000000000 Binary files a/src/images/what-is-celestia/celestia-modular.png and /dev/null differ diff --git a/src/images/what-is-celestia/celestia-modularizm.png b/src/images/what-is-celestia/celestia-modularizm.png deleted file mode 100644 index 4589796b6..000000000 Binary files a/src/images/what-is-celestia/celestia-modularizm.png and /dev/null differ diff --git a/src/images/what-is-celestia/celestia-monolithic-modular-approach.png b/src/images/what-is-celestia/celestia-monolithic-modular-approach.png deleted file mode 100644 index 2760563b2..000000000 Binary files a/src/images/what-is-celestia/celestia-monolithic-modular-approach.png and /dev/null differ diff --git a/src/images/what-is-celestia/celestia-tell-me-about-celestia.png b/src/images/what-is-celestia/celestia-tell-me-about-celestia.png deleted file mode 100644 index 2046cc71b..000000000 Binary files a/src/images/what-is-celestia/celestia-tell-me-about-celestia.png and /dev/null differ diff --git a/src/images/what-is-celestia/celestia-transactions.png b/src/images/what-is-celestia/celestia-transactions.png deleted file mode 100644 index f5015909a..000000000 Binary files a/src/images/what-is-celestia/celestia-transactions.png and /dev/null differ diff --git a/src/images/what-is-celestia/celestia-what-are-rollups.png b/src/images/what-is-celestia/celestia-what-are-rollups.png deleted file mode 100644 index e41e6d3ad..000000000 Binary files a/src/images/what-is-celestia/celestia-what-are-rollups.png and /dev/null differ diff --git a/src/images/what-is-celestia/celestia-what-is-modular.png b/src/images/what-is-celestia/celestia-what-is-modular.png deleted file mode 100644 index ddd981551..000000000 Binary files a/src/images/what-is-celestia/celestia-what-is-modular.png and /dev/null differ diff --git a/src/images/what-is-celestia/monolithic-modular-aproach.png b/src/images/what-is-celestia/monolithic-modular-aproach.png deleted file mode 100644 index c83fe5153..000000000 Binary files a/src/images/what-is-celestia/monolithic-modular-aproach.png and /dev/null differ diff --git a/src/pages/build.js b/src/pages/build.js index c8bce9a41..65fdd0ad3 100644 --- a/src/pages/build.js +++ b/src/pages/build.js @@ -52,9 +52,9 @@ const Build = () => {
- + -
+

{discover.title}

{discover.description &&
{discover.description}
} @@ -79,7 +79,7 @@ const Build = () => { - + diff --git a/src/pages/index.js b/src/pages/index.js index 20639dd53..d78db1f89 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -56,12 +56,12 @@ const IndexPage = () => { direction={"ltr"} title={"Access abundance"} text={` -

Tap into the abundant throughput enabled by data availability sampling (DAS), the first architecture that scales while maintaining verifiability for any user.

+

Tap into the abundant throughput enabled by data availability sampling (DAS), the first architecture that scales while maintaining verifiability for any user.

Anyone can directly verify and contribute to Celestia by running a light node.

`} image={"graph-scale.png"} buttonPrimaryTitle={"Learn Celestia"} - buttonPrimaryUrl={"/what-is-celestia/"} + buttonPrimaryUrl={"/underneath/"} anim={lottiAnim1} animVersion={1} /> diff --git a/src/pages/markdown-pages/what-is-da/What is data availability.md b/src/pages/markdown-pages/what-is-da/What is data availability.md index b0832fb35..629a95b17 100644 --- a/src/pages/markdown-pages/what-is-da/What is data availability.md +++ b/src/pages/markdown-pages/what-is-da/What is data availability.md @@ -46,32 +46,32 @@ The difference might not seem important, but DA and long-term data storage actua Now there are specialized providers known as data availability layers (DA layers) that supply DA to other chains. Let’s look at two distinct types of DA layers: -- Data availability committees: a small, permissioned committee that is trusted to provide DA. -- DA layers with data availability sampling (DAS): a decentralized network that provides DA and allows anyone to efficiently verify via DAS. +- Data availability committees: a small, permissioned committee that is trusted to provide DA. +- DA layers with data availability sampling (DAS): a decentralized network that provides DA and allows anyone to efficiently verify via DAS. And a DA layer with DAS is what Celestia is… #### Celestia’s DA layer -So, what does Celestia’s DA layer actually do? Well, Celestia provides abundant DA to address the scaling bottleneck. And it does this with data availability sampling (DAS). +So, what does Celestia’s DA layer actually do? Well, Celestia provides abundant DA to address the scaling bottleneck. And it does this with data availability sampling (DAS). DAS is a new technology that enables Celestia to securely increase its blockspace with more users (light nodes). And the way rollups use Celestia is simple. All they really need to do is use Celestia’s DA layer to publish and temporarily access their transaction data. Now, with ~95% percent lower DA costs, developers can focus on improving their app without the burden of high fees or unnecessary gas cost optimizations. Ultimately, low-cost DA unlocks new capabilities for developers to build fully onchain apps, like onchain games or generative art. See the cost savings for your chain with Celestia underneath. -The other important aspect of DAS is that it enables users to secure and directly verify Celestia. Without DAS, DA layers have to give up verifiability and security for higher throughput. So users have to trust validators or committees to ensure the chain is running correctly. With DAS, users can secure and directly verify Celestia’s DA layer with proofs instead of a trusted committee. +The other important aspect of DAS is that it enables users to secure and directly verify Celestia. Without DAS, DA layers have to give up verifiability and security for higher throughput. So users have to trust validators or committees to ensure the chain is running correctly. With DAS, users can secure and directly verify Celestia’s DA layer with proofs instead of a trusted committee. #### How developers can build on Celestia’s DA layer You can launch your chain as easily as a smart contract with Celestia underneath. Here’s how you can start: -- Deploy fast with an Ethereum L2 using leading rollup frameworks. -- Transform nearly any VM into its own sovereign chains. -- One-click deployment on managed infrastructure using a Rollups-as-a-Service provider. +- Deploy fast with an Ethereum L2 using leading rollup frameworks. +- Transform nearly any VM into its own sovereign chains. +- One-click deployment on managed infrastructure using a Rollups-as-a-Service provider. #### To sum it all up -- Data availability is a core scaling bottleneck for crypto applications and is the vast majority of costs that rollups and Layer 2s pay. -- Data availability is about proving that data was published by allowing anyone to download it for a short period of time. -- A DA layer is a blockchain that rollups and L2s publish their transaction data to. -- Celestia’s DA layer eliminates data availability as a core scaling bottleneck, dropping costs for developers by ~95% and enabling them to build fully-onchain apps. +- Data availability is a core scaling bottleneck for crypto applications and is the vast majority of costs that rollups and Layer 2s pay. +- Data availability is about proving that data was published by allowing anyone to download it for a short period of time. +- A DA layer is a blockchain that rollups and L2s publish their transaction data to. +- Celestia’s DA layer eliminates data availability as a core scaling bottleneck, dropping costs for developers by ~95% and enabling them to build fully-onchain apps. diff --git a/src/pages/underneath.js b/src/pages/underneath.js new file mode 100644 index 000000000..16a77cf0c --- /dev/null +++ b/src/pages/underneath.js @@ -0,0 +1,509 @@ +import React, { useState, useEffect, useRef } from "react"; +import Image from "../components/imageComponent"; +import Button from "../components/buttons/button"; + +import { heroData } from "../datas/underneath/hero-data"; +import { fromMonolith } from "../datas/underneath/from-monolith"; +import { dataAvailability } from "../datas/underneath/data-availability"; +import { whyCelestia } from "../datas/underneath/why-celestia"; +import { FooterBoxes2 } from "../datas/underneath/content"; + +import Layout from "../components/layout"; + +import { seoContent } from "../datas/underneath/seoContent"; +import Seo from "../components/seo"; + +const CelestiaUnderneath = () => { + const [isCard1Visible, setIsCard1Visible] = useState(false); + const [isCard2Visible, setIsCard2Visible] = useState(false); + const circleRefs = useRef([]); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + if (entry.target.classList.contains("card-1")) { + setIsCard1Visible(true); + } else if (entry.target.classList.contains("card-2")) { + setIsCard2Visible(true); + } + } + }); + }, + { threshold: 0.5 } // Adjust the threshold as needed + ); + + const card1Element = document.querySelector(".card-1"); + const card2Element = document.querySelector(".card-2"); + + if (card1Element) { + observer.observe(card1Element); + } + if (card2Element) { + observer.observe(card2Element); + } + + return () => { + if (card1Element) { + observer.unobserve(card1Element); + } + if (card2Element) { + observer.unobserve(card2Element); + } + }; + }, []); + + useEffect(() => { + const updateCircleRadius = () => { + const viewportWidth = window.innerWidth; + let radius = 3; // default radius + + if (viewportWidth < 576) { + radius = 5; + } else if (viewportWidth >= 1600) { + radius = 2.2; + } else { + radius = 3; + } + + circleRefs.current.forEach((circle) => { + if (circle) { + circle.setAttribute("r", radius); + } + }); + }; + + updateCircleRadius(); + window.addEventListener("resize", updateCircleRadius); + + return () => { + window.removeEventListener("resize", updateCircleRadius); + }; + }, []); + + return ( + + +
+
+
+
+

{heroData.title}

+
+
+ {/*

{heroData.subtitle}

*/} +
+
+
+ {/* card 1 */} +
+
+
+ + + +
+
+
+

{heroData.cards[0].title}

+

{heroData.cards[0].text}

+
+
+
+
+
+
+ + {/* main image */} +
+
+ + + +
+ {heroData.image.alt} +
+ + + +
+
+ + {/* card 2 */} +
+
+
+ + + + + + + +
+
+
+

{heroData.cards[1].title}

+

{heroData.cards[1].text}

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

{fromMonolith.title}

+
+
+
+
+
+
+
+ {fromMonolith.image.alt} +
+
+
+
+
+
+
+
+ + + (circleRefs.current[0] = el)}> + + + + + + + (circleRefs.current[1] = el)}> + + + + + + + (circleRefs.current[2] = el)}> + + + + + + + (circleRefs.current[3] = el)}> + + + + + + + (circleRefs.current[4] = el)}> + + + + + + + (circleRefs.current[5] = el)}> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

{dataAvailability.title}

+
+
+
+
+
+ {dataAvailability.image.alt} +
+
+
+
+
+
+
+
+ +
+
+

{whyCelestia.title}

+
+
+
+
+
+ {whyCelestia.content[0].image.alt} +
+
+

{whyCelestia.content[0].title}

+
+
+
+
+
+
+ {whyCelestia.content[1].image.alt} +
+

{whyCelestia.content[1].title}

+
+
+
+
+
+
+
+ {whyCelestia.content[2].image.alt} +
+
+
+
+

{whyCelestia.content[2].title}

+
+
+
+
+
+
+
+
+ + {/* +
+
+
+

{joinTheNetwork.title}

+ {joinTheNetwork.description &&
{joinTheNetwork.description}
} +
+ {joinTheNetwork.items.map(function (item) { + return ( + + ); + })} +
+
+
+
+ +
+
+
+
+

{lightNode.title}

+
+ {lightNode.description &&
{lightNode.description}
} +
+ {lightNode.items.map(function (item) { + return ( + + ); + })} +
+
+
+
*/} +
+
+ + ); +}; + +export default CelestiaUnderneath; diff --git a/src/pages/what-is-celestia.js b/src/pages/what-is-celestia.js deleted file mode 100644 index 2ce78e4ad..000000000 --- a/src/pages/what-is-celestia.js +++ /dev/null @@ -1,299 +0,0 @@ -import React, { useState, useEffect, useRef } from "react"; -import Layout from "../components/layout"; -import { FooterBoxes2 } from "../datas/what-is-celestia/content"; -import { tableOfContent } from "../datas/what-is-celestia/toc"; -import { StaticImage } from "gatsby-plugin-image"; -import { AnchorLink } from "gatsby-plugin-anchor-links"; - -import { seoContent } from "../datas/what-is-celestia/seoContent"; -import Seo from "../components/seo"; - -import celestia_tell_me_about_celestia from "../images/what-is-celestia/celestia-tell-me-about-celestia.png"; -import data_availability_sampling from "../images/what-is-celestia/celestia-data-availability-sampling.png"; -import celestia_data_availability from "../images/what-is-celestia/celestia-data-availability.png"; -import celestia_what_is_modular from "../images/what-is-celestia/celestia-what-is-modular.png"; - -const WhatIsCelestia = () => { - const [showTocCategories, setShowTocCategories] = useState(false); - const [selectedItem, setSelectedItem] = useState(0); - const sectionRefs = useRef([]); - // const handleItemClick = (index) => { - // setSelectedItem(index); - // }; - - useEffect(() => { - const observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - const sectionIndex = sectionRefs.current.indexOf(entry.target); - setSelectedItem(sectionIndex); - } - }); - }, - { rootMargin: "-30% 0px -40% 0px", threshold: 0 } - ); - - const currentRefs = sectionRefs.current; - currentRefs.forEach((ref) => observer.observe(ref)); - - return () => { - if (currentRefs) { - currentRefs.forEach((ref) => { - if (ref instanceof Element) { - observer.unobserve(ref); - } - }); - } - }; - }, []); - - return ( - - -
-
-
-
(sectionRefs.current[0] = el)} - id={`${tableOfContent[0].id.replace(/\s+/g, "-").toLowerCase()}`} - > -

What is Celestia?

-
-
-
-
-
setShowTocCategories(!showTocCategories)} - onKeyDown={(event) => { - if (event.key === "Enter") { - setShowTocCategories(!showTocCategories); - } - }} - tabIndex={0} - role='button' - > - Jump to... -
- - - -
-
-
-
Table of Contents
-
-
- {tableOfContent.map((item, index) => { - return ( -
handleItemClick(index)} - // onKeyDown={(event) => { - // if (event.key === "Enter") { - // handleItemClick(index); - // } - // }} - tabIndex={0} - role='button' - > - - {item.value} - -
- ); - })} -
-
-
-
-
-
-
-
-
-

- Celestia is a modular data availability (DA) network that securely scales with the number of users, - making it easy for anyone to launch their own blockchain. -

-

- Rollups and L2s use Celestia as a network for publishing and making transaction data available for - anyone to download. For them, Celestia provides high-throughput DA that can be verified easily with a - light node. -

-

- And by making the blockchain stack modular, anyone can launch their own blockchain without needing a - validator set. -

-
-
-
- {""} -
-
-
-
- -
(sectionRefs.current[1] = el)} - className={"whats-it-like-to-build-on-Celestia"} - id={`${tableOfContent[1].id.replace(/\s+/g, "-").toLowerCase()}`} - > -
-

Why Celestia?

-
-
-
-
-
-
-

Deploy fast

-

- Deploy your own customizable blockchain as easily as a smart contract. -

-
-
-
-
-

Use any VM

-

- Transform nearly any virtual machine into your own sovereign chain. -

-
-
-
-
-

Access abundant throughput

-

- Unlock dynamic throughput that scales with the number of users. -

-
-
-
-
-
- - -
-
- -
- -
(sectionRefs.current[2] = el)} - className={"what-is-data-availability"} - id={`${tableOfContent[2].id.replace(/\s+/g, "-").toLowerCase()}`} - > -
-
-
- {""} -
-
-
-

What is data availability and why does it matter?

-

- Data availability answers the question, has the data for this blockchain been published? It is - critical to the security of any blockchain because it ensures that anyone can inspect the ledger of - transactions and verify it. -

-

Users of a monolithic blockchain usually download all the data to check that it is available.

-

- As blocks get bigger, it becomes impractical for normal users to download all the data meaning that - they can’t verify the chain. Modular chains solve this problem by making it possible for users to - verify very large blocks using a technology called data availability sampling. -

-
-
-
- -
(sectionRefs.current[3] = el)} - className={"data-availability-sampling"} - id={`${tableOfContent[3].id.replace(/\s+/g, "-").toLowerCase()}`} - > -

Now what's data availability sampling?

-
-
- {""} -
-
-

- Data availability sampling (DAS) is the new primitive that enables Celestia light nodes to verify DA - efficiently. Instead of downloading all data, light nodes only download a tiny portion of each block. -

-

- Importantly, DAS allows Celestia to scale with the number of users (light nodes). So, as the light node - network grows over time, Celestia can scale to the data throughput needed for millions of rollups without - compromising on security for end users. -

-
- -
(sectionRefs.current[4] = el)} - className={"what-is-a-modular-blockchain"} - id={`${tableOfContent[4].id.replace(/\s+/g, "-").toLowerCase()}`} - > -

And what is a modular blockchain?

-
-
- {""} -
-
-

- Modular blockchains are a new paradigm in blockchain design. Instead of one blockchain doing everything, - modular blockchains specialize and optimize to perform a given function. This specialization provides - breakthroughs in scalability, flexibility, and interoperability, enabling developers to build blockchain - applications for mass adoption. -

-
-
(sectionRefs.current[5] = el)} - className={"start-using-celestia"} - id={`${tableOfContent[5].id.replace(/\s+/g, "-").toLowerCase()}`} - /> -
-
-
-
-
- - ); -}; - -export default WhatIsCelestia; diff --git a/src/scss/fonts.scss b/src/scss/fonts.scss index 4014c613b..8062ec493 100644 --- a/src/scss/fonts.scss +++ b/src/scss/fonts.scss @@ -14,6 +14,14 @@ font-display: swap; } +@font-face { + font-family: "Inter"; + src: url("../fonts/subset-Inter-Medium.woff2") format("woff2"), url("../fonts/subset-Inter-Medium.woff") format("woff"); + font-weight: medium; + font-style: normal; + font-display: swap; +} + @font-face { font-family: "Inter"; src: url("../fonts/subset-Inter-Bold.woff2") format("woff2"), url("../fonts/subset-Inter-Bold.woff") format("woff"); diff --git a/src/scss/main.scss b/src/scss/main.scss index 0e8710f19..7e4a36645 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -32,7 +32,6 @@ @import "pages/page-technology.scss"; @import "pages/page-careers.scss"; @import "pages/page-glossary.scss"; -@import "pages/page-what-is-celestia.scss"; @import "pages/page-ecosystem"; @import "pages/page-build.scss"; @import "pages/page-press.scss"; @@ -40,6 +39,7 @@ @import "pages/page-run-a-node.scss"; @import "pages/page-what-is-tia.scss"; @import "pages/page-faq.scss"; +@import "pages/page-underneath.scss"; @import "components/technology.scss"; diff --git a/src/scss/pages/page-run-a-node.scss b/src/scss/pages/page-run-a-node.scss index 004a65012..adb7e4c03 100644 --- a/src/scss/pages/page-run-a-node.scss +++ b/src/scss/pages/page-run-a-node.scss @@ -164,7 +164,6 @@ .icon-card { border-radius: 8px; border: 1px solid rgba(120, 120, 120, 0.15); - background: rgba(255, 255, 255, 0.5); box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.03); backdrop-filter: blur(22px); diff --git a/src/scss/pages/page-underneath.scss b/src/scss/pages/page-underneath.scss new file mode 100644 index 000000000..9962833e7 --- /dev/null +++ b/src/scss/pages/page-underneath.scss @@ -0,0 +1,539 @@ +.celestia-underneath { + h2.subtitle { + margin-bottom: 40px; + font-size: 64px; + @include media-breakpoint-down(xl) { + font-size: 52px; + margin-bottom: 20px; + } + @include media-breakpoint-down(lg) { + font-size: 36px; + margin-bottom: 10px; + } + @include media-breakpoint-down(md) { + font-size: 26px; + margin-bottom: 20px; + line-height: 1.2em; + } + } + + main { + padding: 0px; + z-index: 0; + // background: url(../images/BG/home.png) no-repeat scroll top 1800px left transparent; + + @include media-breakpoint-down(xl) { + background-position: top 2000px left; + } + @include media-breakpoint-down(lg) { + background-position: top 2000px left; + } + @include media-breakpoint-down(md) { + background-position: top 3400px left; + } + @include media-breakpoint-down(sm) { + background-position: top 3300px left; + } + } + + .celestia-underneath-hero { + padding: 80px 0px 0px; + position: relative; + overflow-x: hidden; + z-index: 1; + @include media-breakpoint-down(lg) { + padding: 64px 0px 72px; + } + @include media-breakpoint-down(md) { + padding: 64px 0px 56px; + } + h1.main { + font-size: 120px; + max-width: 100%; + margin-bottom: 113px; + @include media-breakpoint-down(xl) { + font-size: 88px; + letter-spacing: 1px; + line-height: 90px; + margin-bottom: 80px; + } + @include media-breakpoint-down(lg) { + font-size: 72px; + letter-spacing: 0.8px; + line-height: 74px; + margin-bottom: 64px; + } + @include media-breakpoint-down(md) { + font-size: 56px; + letter-spacing: 0.62px; + line-height: 58px; + margin-bottom: 56px; + } + @include media-breakpoint-down(sm) { + font-size: 44px; + letter-spacing: 0.4px; + line-height: 44px; + } + } + .text-box { + & p:not(:last-child), + & div:not(:last-child) { + margin-bottom: 20px; + } + .text-slim { + color: #000; + font-weight: 300; + + h3 { + font-family: $ruberoid; + font-weight: bold; + font-size: 32px; + line-height: 1.2em; + color: #000; + @include media-breakpoint-down(sm) { + font-size: 24px; + } + } + } + } + .image-box { + padding-top: 200px; + padding-bottom: 200px; + position: relative; + + @include media-breakpoint-down(xl) { + padding-top: 300px; + } + @include media-breakpoint-down(lg) { + padding-top: 220px; + } + @include media-breakpoint-down(md) { + padding-top: 64px; + padding-bottom: 56px; + } + @include media-breakpoint-down(sm) { + padding-top: 48px; + padding-bottom: 40px; + } + .image-wrapper { + position: relative; + z-index: 0; + @include media-breakpoint-down(md) { + padding-top: 60px; + padding-bottom: 40px; + } + .dotted-line-1 { + position: absolute; + @include media-breakpoint-down(md) { + right: 0; + left: 50%; + top: 0px; + transform: translateX(calc(-50% + 3px)); + width: 2px; + overflow: visible; + } + } + .dotted-line-2 { + position: absolute; + @include media-breakpoint-down(md) { + right: 50%; + top: 63%; + width: 2px; + transform: translateX(calc(-50% + 6px)); + overflow: visible; + } + } + } + .gatsby-image-wrapper { + overflow: visible; + &:before { + z-index: -1; + content: ""; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + position: absolute; + height: 150%; + width: 150%; + background: radial-gradient(50% 50% at 50% 50%, #d5baff 0%, rgba(255, 255, 255, 0) 80%); + @include media-breakpoint-down(md) { + background: radial-gradient(50% 50% at 50% 50%, #d5baff 0%, rgba(255, 255, 255, 0) 65%); + height: 200%; + width: 200%; + } + } + } + .fade-in-card-1 { + opacity: 0; + &.visible { + animation: fadeIn 700ms forwards; + animation-delay: 400ms; + } + } + .fade-in-line-1 { + opacity: 0; + &.visible { + animation: fadeIn 700ms forwards; + animation-delay: 800ms; + } + } + .fade-in-card-2 { + opacity: 0; + &.visible { + animation: fadeIn 700ms forwards; + animation-delay: 400ms; + } + } + .fade-in-line-2 { + opacity: 0; + &.visible { + animation: fadeIn 700ms forwards; + animation-delay: 800ms; + } + } + + @keyframes fadeIn { + to { + opacity: 1; + } + } + + .card-1 { + position: absolute; + right: 50%; + top: 50px; + transform: translateX(calc(-50% + 64px)); + z-index: 1; + @include media-breakpoint-down(xl) { + right: 50%; + transform: translateX(calc(-50% + 54px)); + top: 140px; + } + @include media-breakpoint-down(lg) { + top: 60px; + } + @include media-breakpoint-down(md) { + position: relative; + top: unset; + right: 0; + left: unset; + transform: unset; + width: 100%; + z-index: 0; + } + .dotted-line { + position: absolute; + right: -30%; + top: 50%; + transform: translateY(calc(-50% + 44px)); + + @include media-breakpoint-down(lg) { + top: 55%; + right: -33%; + } + } + .text-card { + .text-card-wrapper { + position: relative; + padding: 24px; + max-width: 300px; + font-family: $inter; + background-color: #fff; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); + border-radius: 14px; + @include media-breakpoint-down(md) { + max-width: 100%; + } + + h3 { + font-family: $ruberoid; + font-weight: bold; + font-size: 20px; + line-height: 1.1em; + color: #000; + margin-bottom: 10px; + } + + p { + font-size: 14px; + color: #666; + margin-bottom: 8px; + } + } + } + } + .card-2 { + position: absolute; + right: 32.5%; + top: 64%; + width: 100%; + z-index: 1; + @include media-breakpoint-down(xl) { + right: 52%; + top: 68%; + } + @include media-breakpoint-down(lg) { + top: 80%; + right: unset; + left: 50%; + transform: translateX(-50%); + width: fit-content; + } + @include media-breakpoint-down(md) { + position: relative; + top: unset; + right: unset; + left: unset; + transform: unset; + width: 100%; + } + .dotted-line { + position: absolute; + right: 20%; + bottom: 50%; + transform: translateY(calc(-50% + 72px)); + @include media-breakpoint-down(xl) { + right: 0%; + } + @include media-breakpoint-down(lg) { + right: unset; + left: 50%; + bottom: 87%; + transform: translateX(calc(-50% + 5px)); + width: 2px; + overflow: visible; + } + } + .text-card { + .text-card-wrapper { + position: relative; + padding: 24px; + max-width: 300px; + font-family: $inter; + background-color: #fff; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); + border-radius: 14px; + @include media-breakpoint-down(md) { + max-width: 100%; + } + + h3 { + font-family: $ruberoid; + font-weight: bold; + font-size: 20px; + line-height: 1.1em; + color: #000; + margin-bottom: 10px; + } + + p { + font-size: 14px; + color: #666; + margin-bottom: 8px; + } + } + } + } + } + + main { + padding-top: 50px; + @include media-breakpoint-down(xl) { + padding-top: 20px; + } + } + section { + padding-top: 50px; + padding-bottom: 50px; + @include media-breakpoint-down(sm) { + padding-top: 40px; + padding-bottom: 40px; + } + } + } + + .celestia-underneath-from-monolith { + padding-top: 0px; + padding-bottom: 40px; + position: relative; + z-index: 1; + + h2.subtitle { + margin-bottom: 26px; + text-wrap: balance; + @include media-breakpoint-up(md) { + margin-bottom: 16px; + } + @include media-breakpoint-up(lg) { + text-align: center; + margin-bottom: 64px; + } + } + .scroll-wrapper { + overflow-x: auto; + padding-bottom: 12px; + & .image-wrapper { + @include media-breakpoint-down(sm) { + min-width: 230vw; + } + @include media-breakpoint-up(sm) { + min-width: unset; + } + } + } + } + .celestia-underneath-da { + z-index: 1; + position: relative; + padding-top: 0px; + padding-bottom: 0px; + @include media-breakpoint-down(md) { + padding-top: 80px; + padding-bottom: 0px; + } + h2.subtitle { + line-height: 0.92em; + text-align: center; + text-wrap: pretty; + max-width: 550px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + .image-box { + padding: 0px 50px; + @include media-breakpoint-down(lg) { + padding: 0px 20px; + padding-bottom: 56px; + } + @include media-breakpoint-down(md) { + padding-bottom: 20px; + } + @include media-breakpoint-down(sm) { + padding: 0px 60px; + padding-bottom: 40px; + } + } + .text-box { + padding: 0px 50px; + @include media-breakpoint-down(xl) { + padding: 0px 0px; + } + @include media-breakpoint-down(lg) { + padding: 0px 20px; + max-width: 70vw; + margin-left: auto; + margin-right: auto; + } + @include media-breakpoint-down(md) { + max-width: 100%; + margin-top: 20px; + margin-left: 0px; + margin-right: 0px; + } + @include media-breakpoint-down(sm) { + margin-top: 0px; + margin-bottom: 40px; + } + .button { + margin-top: 20px; + } + } + .position-relative { + @include media-breakpoint-up(xxl) { + margin-top: -5vw; + } + @include media-breakpoint-up(xxxl) { + margin-top: -8vw; + } + } + + .container { + margin-top: -9vw; + @include media-breakpoint-down(xxl) { + margin-top: -7vw; + } + @include media-breakpoint-down(xl) { + margin-top: -5vw; + } + @include media-breakpoint-down(md) { + margin-top: unset; + } + } + .image-wrapper { + @include media-breakpoint-down(lg) { + max-width: 50vw; + margin-left: auto; + margin-right: auto; + } + @include media-breakpoint-down(md) { + max-width: 70vw; + } + @include media-breakpoint-down(sm) { + max-width: 100%; + } + } + } + .celestia-underneath-why-celestia { + position: relative; + z-index: 1; + padding-top: 160px; + padding-bottom: 140px; + @include media-breakpoint-down(lg) { + padding-top: 100px; + padding-bottom: 160px; + } + + h2.subtitle { + text-align: center; + margin-bottom: 64px; + @include media-breakpoint-down(lg) { + margin-bottom: 40px; + } + } + + .grid-item { + height: 100%; + display: flex; + flex-direction: column; + padding: 40px; + background: #ffffff; + border: 1px solid #e2e2e2; + border-radius: 14px; + .image-wrapper { + padding: 20px; + @include media-breakpoint-down(sm) { + padding: 0px; + } + } + @include media-breakpoint-down(md) { + padding: 22px; + } + .title { + font-family: $ruberoid; + font-style: normal; + font-weight: bold; + font-size: 24px; + line-height: 1.2; + letter-spacing: -0.642857px; + color: #000000; + margin-top: 10px; + margin-bottom: 24px; + @include media-breakpoint-down(md) { + margin-bottom: 20px; + } + } + &.horizontal { + flex-direction: row; + .image-wrapper { + padding: 0px; + width: 100%; + @include media-breakpoint-down(lg) { + padding: 20px; + } + } + } + } + } +} diff --git a/src/scss/pages/page-what-is-celestia.scss b/src/scss/pages/page-what-is-celestia.scss deleted file mode 100644 index 20e4a2c97..000000000 --- a/src/scss/pages/page-what-is-celestia.scss +++ /dev/null @@ -1,684 +0,0 @@ -.what-is-celestia { - padding-top: 0px; - position: relative; - z-index: 50; - @include media-breakpoint-down(sm) { - padding-top: 20px; - } - - h2, - h3 { - font-size: 36px; - font-style: normal; - line-height: 1.22em; - letter-spacing: -0.643px; - margin-bottom: 20px; - @include media-breakpoint-down(md) { - font-size: 32px; - } - @include media-breakpoint-down(sm) { - font-size: 26px; - letter-spacing: 0.1px; - } - } - - main { - padding: 0; - } - - .lead-text { - font-family: $inter; - font-size: 18px; - color: #000000; - letter-spacing: -0.1px; - line-height: 27px; - width: 80%; - max-width: 840px; - margin-bottom: 50px; - - @include media-breakpoint-down(sm) { - font-size: 15px; - line-height: 23px; - width: 100%; - margin-bottom: 25px; - } - } - - .card-section { - background-color: rgba(106, 37, 215, 0.05); - background-size: 45%; - border: 1px solid rgba(186, 186, 186, 0.2); - border-radius: 20px; - -webkit-backdrop-filter: blur(50px); - backdrop-filter: blur(50px); - overflow: hidden; - padding: 0; - margin: 0 0 120px 0; - @include media-breakpoint-down(lg) { - margin-bottom: 64px; - } - .text-box { - // max-width: 630px; - padding: 70px 20px 70px 70px; - @include media-breakpoint-down(lg) { - padding: 50px 40px 50px 50px; - max-width: 100%; - } - @include media-breakpoint-down(sm) { - padding: 35px; - } - .subtitle { - font-family: $inter; - font-size: 24px; - font-weight: 600; - color: #000000; - letter-spacing: -0.15px; - line-height: 32px; - margin-bottom: 8px; - @include media-breakpoint-down(sm) { - font-size: 18px; - line-height: 20px; - } - } - p { - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 32px; - color: #000000; - font-family: $inter; - @include media-breakpoint-down(sm) { - font-size: 18px; - line-height: 26px; - } - } - } - .image-box--cover { - height: inherit; - background-repeat: no-repeat; - background-image: url(../images/what-is-celestia/celestia-modular-infographics.png); - background-position: 92% 70%; - background-size: 90%; - @include media-breakpoint-down(xxl) { - height: 470px; - background-position: 100% 65%; - background-size: 95%; - } - @include media-breakpoint-down(xl) { - height: 470px; - background-position: 100% 110%; - background-size: 95%; - } - @include media-breakpoint-down(lg) { - height: 650px; - background-position: 92% 100%; - background-size: 85%; - } - @include media-breakpoint-down(md) { - height: 500px; - background-position: 80% 100%; - background-size: 90%; - } - @include media-breakpoint-down(sm) { - background-position: -30% 100%; - background-size: 120%; - height: 400px; - } - } - } - - .hero-section { - padding: 80px 0 80px 0; - h1 { - margin-bottom: 0px; - max-width: 100%; - } - } - - .tell-me-about-celestia { - padding: 0; - @include media-breakpoint-down(lg) { - margin-bottom: 70px; - } - .title { - max-width: 250px; - } - .image-box--different { - height: inherit; - .image-wrapper { - width: 100%; - height: 100%; - } - } - } - - .what-is-a-modular-blockchain { - padding: 100px 0 0 0; - @include media-breakpoint-down(lg) { - margin-bottom: 70px; - padding-top: 40px; - } - .title { - margin-bottom: 0px; - } - } - - .data-availability-sampling { - padding: 100px 0 0 0; - .image-box--different { - padding: 0 30px; - } - @include media-breakpoint-down(lg) { - margin-bottom: 70px; - padding-top: 40px; - .image-box--different { - padding: 10px 10px; - } - } - .title { - margin-bottom: 0px; - } - } - - .what-is-data-availability { - padding: 100px 0 0 0; - @include media-breakpoint-down(lg) { - margin-bottom: 70px; - } - .image-box--analogy { - display: flex; - justify-content: center; - align-items: center; - height: inherit; - padding: 0 47px; - @include media-breakpoint-down(lg) { - background-position: 50%; - padding: 0px 20px; - .image-wrapper { - width: 100%; - height: 100%; - max-width: 450px; - } - } - } - } - - .what-are-rollups { - margin-bottom: 80px; - padding: 0; - @include media-breakpoint-down(lg) { - margin-bottom: 70px; - } - .image-box--different { - height: inherit; - @include media-breakpoint-down(lg) { - padding: 0 20px; - } - .image-wrapper { - width: 100%; - height: 100%; - } - } - } - - .modular-blockchain-section { - margin-bottom: 120px; - padding: 0; - @include media-breakpoint-down(lg) { - margin-bottom: 80px; - } - .image-box--modular { - display: flex; - justify-content: center; - align-items: center; - height: inherit; - padding: 0 47px; - .image-wrapper { - width: 100%; - height: 100%; - max-width: 524px; - } - @include media-breakpoint-down(lg) { - background-position: 50%; - padding: 0 16px; - .image-wrapper { - width: 100%; - max-width: 600px; - } - } - } - } - - .whats-it-like-to-build-on-Celestia { - padding: 80px 0 0 0; - @include media-breakpoint-down(sm) { - padding: 0 0 80px 0; - } - .title { - margin-bottom: 0px; - } - .why-use-card { - height: 100%; - background: rgba(255, 255, 255, 0.35); - -webkit-backdrop-filter: blur(45px); - backdrop-filter: blur(35px); - border: 1px solid #e9e5f0; - border-radius: 15px; - padding: 35px; - transition: background-color ease-in-out 200ms; - &:hover { - background: #ffffff; - } - @include media-breakpoint-down(md) { - background: #ffffff; - } - } - .why-use-title { - font-family: $inter; - font-size: 20px; - line-height: 20px; - color: #000000; - letter-spacing: -0.3px; - font-weight: 600; - } - .why-use-text { - font-family: $inter; - font-size: 15px; - line-height: 23px; - color: #414141; - letter-spacing: -0.1px; - &:last-of-type { - margin-bottom: 0; - } - } - .col-z-index { - z-index: 1; - } - - .image-box--why { - display: flex; - justify-content: center; - align-items: center; - height: inherit; - z-index: 0; - @include media-breakpoint-down(md) { - margin-bottom: 40px; - } - .gatsby-image-wrapper { - height: 64%; - transform: translateX(-20%) scale(1); - overflow: visible; - @include media-breakpoint-down(xl) { - height: 52%; - transform: translateX(-30%); - width: 125%; - } - @include media-breakpoint-down(lg) { - transform: translateX(-32%); - width: 120%; - } - @include media-breakpoint-down(md) { - height: 100%; - transform: translateX(0); - width: 100%; - margin-right: 20px; - } - img { - object-position: right; - @include media-breakpoint-down(xl) { - width: 140%; - } - @include media-breakpoint-down(lg) { - width: 120%; - } - @include media-breakpoint-down(md) { - width: 100%; - } - } - } - } - - .link-wrapper { - margin-top: 20px; - .link { - font-family: $ruberoid; - font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 1em; - padding: 8px 0; - margin: -8px 0; - color: #000000; - transition: all 0.2s ease-in-out; - box-shadow: none; - &:hover { - color: #393939; - & svg { - margin-left: 16px; - } - } - } - svg { - margin-left: 8px; - transition: all 0.2s ease-in-out; - will-change: margin; - margin-bottom: 2px; - } - } - } - - .celestia-community { - padding: 0px; - .section-title { - text-align: center; - font-size: 52px; - font-weight: bold; - line-height: 1.1em; - margin-bottom: 70px; - @include media-breakpoint-down(md) { - font-size: 42px; - } - @include media-breakpoint-down(sm) { - font-size: 36px; - margin-bottom: 60px; - } - } - .modularism-not-maximalism { - margin-bottom: 120px; - padding: 0; - @include media-breakpoint-down(lg) { - margin-bottom: 80px; - } - @include media-breakpoint-down(sm) { - margin-bottom: 40px; - } - - .image-box--availability { - display: flex; - justify-content: center; - align-items: center; - height: inherit; - padding: 0 47px; - .image-wrapper { - width: 100%; - height: 100%; - max-width: 420px; - } - @include media-breakpoint-down(lg) { - background-position: 50%; - padding: 0 30px; - .image-wrapper { - width: 90%; - max-width: 450px; - } - } - } - } - - .layer-0-social-consensus { - margin-bottom: 80px; - padding: 0; - @include media-breakpoint-down(lg) { - margin-bottom: 60px; - } - .image-box--rollups { - display: flex; - justify-content: center; - align-items: center; - height: inherit; - padding: 0 47px; - @include media-breakpoint-down(lg) { - background-position: 50%; - padding: 0 12px; - .image-wrapper { - width: 100%; - height: 100%; - max-width: 500px; - } - } - } - } - } - - .toc-2 { - position: sticky; - top: 100px; - left: 0; - width: 100%; - float: left; - margin-bottom: 40px; - - .category-menu { - @include media-breakpoint-down(lg) { - max-height: 0; - overflow: hidden; - transition: 500ms all ease-in-out; - margin-top: 0; - - &.show { - max-height: 200vh; - margin-top: 25px; - margin-bottom: 25px; - } - } - } - - .mobile-toc { - font-family: $ruberoid; - font-weight: bold; - font-size: 18px; - color: #000000; - letter-spacing: 0; - display: none; - cursor: pointer; - background: rgba(246, 246, 246, 0.7); - backdrop-filter: blur(10px); - border-radius: 6px; - padding: 25px; - margin-bottom: 10px; - - @include media-breakpoint-down(lg) { - display: flex; - align-items: center; - } - - #mobile-category { - width: 22px; - height: 22px; - float: right; - display: inline-block; - transition: 300ms all ease-in-out; - } - - .dropdown-button { - width: 26px; - height: 26px; - padding: 6px; - display: flex; - justify-content: center; - align-items: center; - background-color: #ededed; - border-radius: 4px; - margin-left: auto; - } - - &.show { - #mobile-category { - transform: rotate(180deg); - } - } - } - - .toc-inner { - background: rgba(246, 246, 246, 0.7); - border-radius: 6px; - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - padding: 35px; - overflow: auto; - - @include media-breakpoint-down(xl) { - padding: 35px 35px 35px 16px; - } - - @include media-breakpoint-down(lg) { - padding: 0 20px; - } - - .toc-title { - font-family: $ruberoid; - font-size: 16px; - font-style: normal; - font-weight: bold; - line-height: normal; - margin-bottom: 20px; - margin-left: 9px; - @include media-breakpoint-down(lg) { - display: none; - } - } - - .category-menu { - .group { - &:first-of-type { - .group-title { - margin-top: 0; - padding-top: 0; - border: none; - } - } - - &:nth-child(1) { - .group-title { - margin-top: 0; - padding-top: 0; - border: none; - } - } - } - } - - .group-title { - font-family: $ruberoid; - font-weight: bold; - font-size: 18px; - color: #000000; - letter-spacing: 0; - cursor: pointer; - margin-bottom: 10px; - - border-top: 1px solid #dcdcdc; - padding-top: 25px; - margin-top: 10px; - - svg { - width: 22px; - height: 22px; - float: right; - display: inline-block; - transition: 300ms all ease-in-out; - } - } - - .subcategory-title { - font-weight: 500; - font-family: $ruberoid; - margin-bottom: 10px; - font-size: 15px; - cursor: pointer; - - &:hover { - color: $purple; - } - } - - .subcategory-items { - max-height: 0; - overflow: hidden; - - &.opened { - max-height: unset; - } - } - - .group-items { - transition: 300ms all ease-in-out; - .article-title { - font-family: $ruberoid; - font-weight: 500; - font-size: 13px; - color: #414141; - letter-spacing: 0; - margin-bottom: 10px; - padding-left: 10px; - - &:hover { - color: $purple; - } - - .toc-item { - div:first-of-type { - a { - margin-top: 10px; - } - } - } - } - } - } - - .article-link { - &.active { - font-weight: bold; - } - } - - a { - font-family: $ruberoid; - font-weight: 500; - font-size: 13px; - letter-spacing: 0; - padding: 12px 0 12px 25px; - display: inline-block; - color: #414141; - line-height: 1.3em; - position: relative; - &:before { - height: 100%; - width: 3px; - background: #eaeaea; - position: absolute; - left: 8px; - content: ""; - z-index: 1; - } - } - - div.selected { - position: relative; - a { - font-weight: bold; - color: $purple; - } - &:before { - height: 100%; - width: 3px; - background: $purple; - position: absolute; - left: 8px; - border-radius: 9999px; - content: ""; - z-index: 2; - } - } - } -} - -.what-is-celestia + footer { - @include media-breakpoint-down(lg) { - padding-top: 400px; - } - @include media-breakpoint-down(md) { - padding-top: 600px; - } -} diff --git a/static/what-is-celestia-og-image.jpg b/static/what-is-celestia-og-image.jpg deleted file mode 100644 index b61744fd2..000000000 Binary files a/static/what-is-celestia-og-image.jpg and /dev/null differ