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/header.js b/src/components/header.js index 6b159eb9e..17caa73b5 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -11,9 +11,9 @@ const navigation = [ type: "internal", submenus: [ { - text: "What is Celestia?", + text: "Celestia Underneath", subtext: "Start here", - url: "/what-is-celestia/", + url: "/underneath/", icon: "menu/logo.svg", type: "internal", class: "plausible-event-name=What_Is_Celestia_Button--Header", diff --git a/src/datas/build/faq.js b/src/datas/build/faq.js index 7a2ef9053..ef39d474e 100644 --- a/src/datas/build/faq.js +++ b/src/datas/build/faq.js @@ -15,7 +15,7 @@ export const faqs = { { id: 3, question: "What is Celestia?", - 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.', + 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/celestia-underneath/content.js b/src/datas/underneath/content.js similarity index 100% rename from src/datas/celestia-underneath/content.js rename to src/datas/underneath/content.js diff --git a/src/datas/celestia-underneath/data-availability.js b/src/datas/underneath/data-availability.js similarity index 92% rename from src/datas/celestia-underneath/data-availability.js rename to src/datas/underneath/data-availability.js index 5dba8b138..e0051a68d 100644 --- a/src/datas/celestia-underneath/data-availability.js +++ b/src/datas/underneath/data-availability.js @@ -5,7 +5,7 @@ export const dataAvailability = {

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: "celestia-underneath/celestia-underneath-da-image.png", + src: "underneath/celestia-underneath-da-image.png", alt: "From monolithic to modular", }, button: { diff --git a/src/datas/celestia-underneath/from-monolith.js b/src/datas/underneath/from-monolith.js similarity index 91% rename from src/datas/celestia-underneath/from-monolith.js rename to src/datas/underneath/from-monolith.js index b2149fed9..a5025dbbd 100644 --- a/src/datas/celestia-underneath/from-monolith.js +++ b/src/datas/underneath/from-monolith.js @@ -6,7 +6,7 @@ export const fromMonolith = {

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: "celestia-underneath/celestia-underneath-from-monolith.png", + src: "underneath/celestia-underneath-from-monolith.png", alt: "From monolithic to modular", }, }; diff --git a/src/datas/celestia-underneath/hero-data.js b/src/datas/underneath/hero-data.js similarity index 95% rename from src/datas/celestia-underneath/hero-data.js rename to src/datas/underneath/hero-data.js index 3be1ca77a..a49b1f167 100644 --- a/src/datas/celestia-underneath/hero-data.js +++ b/src/datas/underneath/hero-data.js @@ -7,7 +7,7 @@ export const heroData = {

With abundant blockspace and new ways to create apps, you have a blank canvas to build whatever with Celestia underneath.

`, image: { - src: "celestia-underneath/celestia-underneath-hero.png", + src: "underneath/celestia-underneath-hero.png", alt: "Celestia Underneath Hero", }, cards: [ diff --git a/src/datas/celestia-underneath/seoContent.js b/src/datas/underneath/seoContent.js similarity index 100% rename from src/datas/celestia-underneath/seoContent.js rename to src/datas/underneath/seoContent.js diff --git a/src/datas/celestia-underneath/why-celestia.js b/src/datas/underneath/why-celestia.js similarity index 89% rename from src/datas/celestia-underneath/why-celestia.js rename to src/datas/underneath/why-celestia.js index b34cb0d0d..588e1d883 100644 --- a/src/datas/celestia-underneath/why-celestia.js +++ b/src/datas/underneath/why-celestia.js @@ -9,7 +9,7 @@ export const whyCelestia = {

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

`, image: { - src: "celestia-underneath/celestia-underneath-why-celestia-1.png", + src: "underneath/celestia-underneath-why-celestia-1.png", alt: "From monolithic to modular", }, }, @@ -20,7 +20,7 @@ export const whyCelestia = {

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

`, image: { - src: "celestia-underneath/celestia-underneath-why-celestia-2.png", + src: "underneath/celestia-underneath-why-celestia-2.png", alt: "From monolithic to modular", }, }, @@ -31,7 +31,7 @@ export const whyCelestia = {

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: "celestia-underneath/celestia-underneath-why-celestia-3.png", + src: "underneath/celestia-underneath-why-celestia-3.png", alt: "From monolithic to modular", }, }, diff --git a/src/datas/what-is-celestia/content.js b/src/datas/what-is-celestia/content.js deleted file mode 100644 index 0d00a6322..000000000 --- a/src/datas/what-is-celestia/content.js +++ /dev/null @@ -1,24 +0,0 @@ -export const FooterBoxes2 = [ - { - title: "Build whatever", - text: "With Celestia underneath, a customizable blockchain becomes as easy to deploy as a smart contract.", - link: { - text: "Build modular", - href: "/build/", - type: "internal", - id: "build", - class: "plausible-event-name=Build_Your_App_Button--What_Is_Celestia_Page-Start_Using_Section", - }, - }, - { - title: "Explore Celestia", - text: "Explore Celestia’s ecosystem of apps and services, run a light node, or learn about Tia.", - link: { - text: "Explore", - href: "/#explore-celestia", - type: "anchor", - id: "explore", - class: "plausible-event-name=Explore_What_You_Can_Do_Button--What_Is_Celestia_Page-Start_Using_Section", - }, - }, -]; 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/images/celestia-underneath/celestia-underneath-da-image.png b/src/images/underneath/celestia-underneath-da-image.png similarity index 100% rename from src/images/celestia-underneath/celestia-underneath-da-image.png rename to src/images/underneath/celestia-underneath-da-image.png diff --git a/src/images/celestia-underneath/celestia-underneath-da.png b/src/images/underneath/celestia-underneath-da.png similarity index 100% rename from src/images/celestia-underneath/celestia-underneath-da.png rename to src/images/underneath/celestia-underneath-da.png diff --git a/src/images/celestia-underneath/celestia-underneath-from-monolith.png b/src/images/underneath/celestia-underneath-from-monolith.png similarity index 100% rename from src/images/celestia-underneath/celestia-underneath-from-monolith.png rename to src/images/underneath/celestia-underneath-from-monolith.png diff --git a/src/images/celestia-underneath/celestia-underneath-hero.png b/src/images/underneath/celestia-underneath-hero.png similarity index 100% rename from src/images/celestia-underneath/celestia-underneath-hero.png rename to src/images/underneath/celestia-underneath-hero.png diff --git a/src/images/celestia-underneath/celestia-underneath-why-celestia-1.png b/src/images/underneath/celestia-underneath-why-celestia-1.png similarity index 100% rename from src/images/celestia-underneath/celestia-underneath-why-celestia-1.png rename to src/images/underneath/celestia-underneath-why-celestia-1.png diff --git a/src/images/celestia-underneath/celestia-underneath-why-celestia-2.png b/src/images/underneath/celestia-underneath-why-celestia-2.png similarity index 100% rename from src/images/celestia-underneath/celestia-underneath-why-celestia-2.png rename to src/images/underneath/celestia-underneath-why-celestia-2.png diff --git a/src/images/celestia-underneath/celestia-underneath-why-celestia-3.png b/src/images/underneath/celestia-underneath-why-celestia-3.png similarity index 100% rename from src/images/celestia-underneath/celestia-underneath-why-celestia-3.png rename to src/images/underneath/celestia-underneath-why-celestia-3.png 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/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/celestia-underneath.js b/src/pages/underneath.js similarity index 97% rename from src/pages/celestia-underneath.js rename to src/pages/underneath.js index dfe1bd020..cba8e0d63 100644 --- a/src/pages/celestia-underneath.js +++ b/src/pages/underneath.js @@ -2,15 +2,15 @@ import React, { useState, useEffect, useRef } from "react"; import Image from "../components/imageComponent"; import Button from "../components/buttons/button"; -import { heroData } from "../datas/celestia-underneath/hero-data"; -import { fromMonolith } from "../datas/celestia-underneath/from-monolith"; -import { dataAvailability } from "../datas/celestia-underneath/data-availability"; -import { whyCelestia } from "../datas/celestia-underneath/why-celestia"; -import { FooterBoxes2 } from "../datas/celestia-underneath/content"; +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/celestia-underneath/seoContent"; +import { seoContent } from "../datas/underneath/seoContent"; import Seo from "../components/seo"; const 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/main.scss b/src/scss/main.scss index 939fc0b3e..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,7 +39,7 @@ @import "pages/page-run-a-node.scss"; @import "pages/page-what-is-tia.scss"; @import "pages/page-faq.scss"; -@import "pages/page-celestia-underneath.scss"; +@import "pages/page-underneath.scss"; @import "components/technology.scss"; diff --git a/src/scss/pages/page-celestia-underneath.scss b/src/scss/pages/page-underneath.scss similarity index 100% rename from src/scss/pages/page-celestia-underneath.scss rename to src/scss/pages/page-underneath.scss 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