Merge branch 'dev' into feature/new-homepage

src/components/footer-box-2.js

@@ -0,0 +1,49 @@
+import * as React from "react";
+
+function FooterBox2({ footerBoxes2 }) {
+	return (
+		<div className="footer-boxes-2">
+			<h2 className="footer-title">Start using Celestia</h2>
+			<div className={"footer-box-wrapper"}>
+				{footerBoxes2 &&
+					footerBoxes2.map((box, index) => {
+						return (
+							<div key={index} className={"footer-box-2"}>
+								<div className={"footer-box-inner"}>
+									{/* <div className={"bg"} /> */}
+									<div className={"inner"}>
+										<div className={"title"}>{box.title}</div>
+										<div className={"text"}>{box.text}</div>
+										<div className={"footer-box-inner-bottom"}>
+											<div className='link-wrapper'>
+												<a id={box.link.id} className='link' href={box.link.href} target='_blank'>
+													{box.link.text}
+													<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'>
+														<path
+															stroke='#7B2BF9'
+															stroke-linecap='square'
+															stroke-width='1.5'
+															d='M3.61218 12.0721L11.0761 4.60823'
+														/>
+														<path
+															stroke='#7B2BF9'
+															stroke-linecap='square'
+															stroke-linejoin='bevel'
+															stroke-width='1.5'
+															d='M11.5254 11.0752V4.00413H4.45432'
+														/>
+													</svg>
+												</a>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						);
+					})}
+			</div>
+		</div>
+	);
+}
+
+export default FooterBox2;

src/components/footer.js

@@ -275,4 +275,4 @@ class Footer extends React.Component {
 	}
 }
 
-export default Footer;
+export default Footer;

src/components/layout.js

@@ -2,12 +2,12 @@ import React from "react";
 import Header from "./header";
 import Footer from "./footer";
 
-export default function Layout({ children, footerBoxes }) {
+export default function Layout({ children, footerBoxes, footerBoxes2 }) {
 	return (
 		<>
 			<Header />
 			{children}
-			<Footer FooterBoxes={footerBoxes} />
+			<Footer FooterBoxes={footerBoxes} FooterBoxes2={footerBoxes2} />
 		</>
 	);
 }

src/components/modules/toc.js

@@ -1,37 +1,19 @@
-import React, {useEffect} from "react"
+import React, { useState } from "react"
 import { AnchorLink } from "gatsby-plugin-anchor-links";
 
 const ToC = ({ headings, frontmatter }) => {
-    useEffect(() => {
-        const observer = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                const id = entry.target.getAttribute('id');
-                if (document.querySelector(`.toc-item`)) {
-                    if (entry.intersectionRatio > 0 ) {
-                        document.querySelector(`.toc-item a[href*="#${id}"]`) && document.querySelector(`.toc-item a[href*="#${id}"]`).parentElement.classList.add('selected');
-                    } else {
-                        document.querySelector(`.toc-item a[href*="#${id}"]`) && document.querySelector(`.toc-item a[href*="#${id}"]`).parentElement.classList.remove('selected');
-                    }
-                }
-            });
-        });
-
-        // Track all sections that have an `id` applied
-        if(document.querySelector(`.toc-item`)){
-            document.querySelectorAll('h4[id]').forEach((section) => {
-                observer.observe(section);
-            });
-        }
+    const [selectedItem, setSelectedItem] = useState(0);
 
-        //});
-    }, []);
+    const handleItemClick = (index) => {
+        setSelectedItem(index);
+    }
 
     return (
         <div className={'toc-item'}>
             {headings.map((heading, index) => {
                 if (heading.depth === 4) {
                     return (
-                        <div key={index} className={index === 1 ? 'selected' : ''}>
+                        <div key={index} className={selectedItem === index ? 'selected' : ''} onClick={() => handleItemClick(index)}>
                             <AnchorLink to={`#${heading.id.replace(/\s+/g, "-").toLowerCase()}`}>
                                 {heading.value}
                             </AnchorLink>
@@ -43,4 +25,4 @@ const ToC = ({ headings, frontmatter }) => {
     );
 }
 
-export default ToC
+export default ToC

src/datas/what-is-celestia/content.js

@@ -1,22 +1,20 @@
-export const FooterBoxes = [
+export const FooterBoxes2 = [
     {
-        title: 'Experiment with testnet',
-        text: 'Join a growing ecosystem of developers building rollups and applications on the Mocha testnet.',
-        button: {
-            text: 'Get started',
-            href: 'https://docs.celestia.org/',
-            id: 'operator',
-            type: 'simple'
+        title: 'Build your app',
+        text: 'Deploy your own chain or smart contract on Celestia’s public testnets',
+        link: {
+            text: 'Find your best option',
+            href: '/developer-portal/',
+            id: 'build',
         }
     },
     {
-        title: 'Join our growing team',
-        text: 'Join our team of leading engineers in pioneering the first modular blockchain network.',
-        button: {
-            text: 'Current openings',
-            href: '/careers',
-            id: 'career',
-            type: 'simple'
+        title: 'Explore what you can do',
+        text: 'Go through Celestia’s world of apps, run your own node, learn about TIA, or even do all three!',
+        link: {
+            text: 'Show me',
+            href: '',
+            id: 'explore',
         }
     }
 ]

src/datas/what-is-celestia/toc.js

@@ -0,0 +1,32 @@
+export const tableOfContent = [
+	{
+		depth: 1,
+		id: "what-is-a-modular-blockchain",
+		value: "What is a modular blockchain?",
+	},
+	{
+		depth: 1,
+		id: "what-is-data-availability",
+		value: "What is data availability?",
+	},
+	{
+		depth: 1,
+		id: "what-are-rollups",
+		value: "What are rollups?",
+	},
+	{
+		depth: 1,
+		id: "whats-it-like-to-build-on-Celestia",
+		value: "What's it like to build on Celestia?",
+	},
+	{
+		depth: 1,
+		id: "modularism-not-maximalism",
+		value: "Modularism, not maximalism",
+	},
+	{
+		depth: 1,
+		id: "layer-0-social-consensus",
+		value: "Layer 0 social consensus",
+	},
+];

src/datas/what-is-tia/content.js

@@ -0,0 +1,21 @@
+export const FooterBoxes = [
+    {
+        title: 'Join our growing ecosystem',
+        text: 'View job openings and career opportunities in the Celestia ecosystem.',
+        button: {
+            text: 'Current openings',
+            href: 'https://celestia.pallet.com/jobs',
+            id: 'operator',
+            type: 'simple'
+        }
+    },{
+        title: 'Build on our developer beta',
+        text: 'Join a growing modular ecosystem of developers building on testnet.',
+        button: {
+            text: 'Get started',
+            href: '/developer-portal/',
+            id: 'operator',
+            type: 'simple'
+        }
+    }
+]

src/datas/what-is-tia/hero-data.js

@@ -0,0 +1,19 @@
+
+export const heroData = {
+	title: "What is TIA?",
+	text: "Learn about TIA, the native token of the Celestia blockchain.",
+	buttons: [
+		{
+			text: "Pay for Data (Developer)",
+			class: "simple",
+			type: "anchor",
+			url: "managing-tia-as-a-rollup",
+		},
+		{
+			text: "Custody & Stake TIA",
+			class: "white",
+			type: "anchor",
+			url: "staking-and-custody",
+		}
+	],
+};

src/datas/what-is-tia/role.js

@@ -0,0 +1,26 @@
+export const role = {
+	title: "TIA's role in Celestia",
+	items: [
+		{
+			id: 1,
+			title: "Pay for data",
+			text: "Data published by rollups and token transfers on Celestia pay fees using TIA.",
+			image: "what-is-tia/what-is-tia-role-1.png",
+			type: "external",
+		},
+		{
+			id: 2,
+			title: "Secure the network",
+			text: "Validators and delegators stake TIA to participate in consensus and secure Celestia.",
+			image: "what-is-tia/what-is-tia-role-2.png",
+			type: "external",
+		},
+		{
+			id: 3,
+			title: "Gas token for rollups",
+			text: "Developers can use TIA as a gas token for their rollups.",
+			image: "what-is-tia/what-is-tia-role-3.png",
+			type: "external",
+		},
+	],
+};

src/datas/what-is-tia/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "What is TIA? | celestia.org",
+	description: "Learn about TIA, the native token of the Celestia blockchain.",
+    image: "",
+};

src/datas/what-is-tia/wallets.js

@@ -0,0 +1,42 @@
+export const wallets = {
+	title: "Wallets",
+    details: "There are multiple wallet options that support TIA. Choose the wallet that fits your requirements.",
+	items: [
+		{
+			id: 1,
+			title: "Keplr Wallet",
+            		device: ["IOS", "Android", "Desktop"],
+			image: "what-is-tia/kepler-icon.jpg",
+            		backdropClass: "opacity-50",
+           		url: "https://www.keplr.app/",
+			type: "external",
+		},
+		{
+			id: 2,
+			title: "Cosmostation",
+            		device: ["IOS", "Android", "Desktop"],
+			image: "what-is-tia/cosmostation-icon.jpg",
+            		backdropClass: "opacity-100",
+            		url: "https://cosmostation.io/products/cosmostation_extension",
+			type: "external",
+		},
+		{
+			id: 3,
+			title: "Leap",
+			device: ["IOS", "Android", "Desktop"],
+			image: "what-is-tia/leap-icon.jpg",
+            		backdropClass: "opacity-100",
+            		url: "https://www.leapwallet.io/",
+			type: "external",
+		},
+		{
+			id: 4,
+			title: "Ledger",
+			device: ["IOS", "Android", "Desktop"],
+			image: "what-is-tia/ledger-icon.jpg",
+            		backdropClass: "opacity-50",
+            		url: "https://www.ledger.com/",
+			type: "external",
+		},
+	],
+};