Sync with main

package.json

@@ -48,6 +48,7 @@
 		"gatsby-transformer-remark": "6.12.3",
 		"gatsby-transformer-sharp": "5.12.3",
 		"jquery": "^3.6.0",
+		"lottie-react": "^2.4.0",
 		"qs": "^6.11.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

src/components/footer.js

@@ -87,11 +87,6 @@ const navigation = {
 				url: "/privacy/",
 				type: "internal",
 			},
-			{
-				text: "Team",
-				url: "/team/",
-				type: "internal",
-			},
 		],
 	},
 };

src/components/sections/home-hero-section.js

@@ -1,26 +1,26 @@
-import * as React from "react"
+import * as React from "react";
 import Button from "../buttons/button";
 
 export default class HomeHeroSection extends React.Component {
-    render() {
-        return (
-            <section className={'home-hero-section'}>
-                <div className={'container'}>
-                    <div className={'row justify-content-center'}>
-                        <div className={'col-auto'}>
-                            <h1>{this.props.heroData.title}</h1>
-                        </div>
-                        <div className={'col-auto'}>
-                            <div className={'text'} dangerouslySetInnerHTML={{__html: this.props.heroData.text}}/>
-                        </div>
-                        <div className={'col-12 justify-content-center d-flex'}>
-                            {this.props.heroData.buttons.map((button,index) => (
-                                <Button key={index} class={button.class} type={button.type} text={button.text} url={button.url}/>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-            </section>
-        )
-    }
+	render() {
+		return (
+			<section className={"home-hero-section"}>
+				<div className={"container"}>
+					<div className={"row justify-content-center"}>
+						<div className={"col-auto"}>
+							<h1>{this.props.heroData.title}</h1>
+						</div>
+						<div className={"col-auto"}>
+							<div className={"text"} dangerouslySetInnerHTML={{ __html: this.props.heroData.text }} />
+						</div>
+						<div className={"col-12 justify-content-center d-flex"}>
+							{this.props.heroData.buttons.map((button, index) => (
+								<Button key={index} class={button.class} type={button.type} text={button.text} url={button.url} />
+							))}
+						</div>
+					</div>
+				</div>
+			</section>
+		);
+	}
 }

src/components/sections/two-column-h2.js

@@ -1,8 +1,12 @@
 import * as React from "react";
 import Image from "../imageComponent";
 import { Link } from "gatsby";
+import Lottie from "lottie-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import handleViewport, { useInViewport } from "react-in-viewport";
 
 const TwoColumnH2 = ({
+	className,
 	direction,
 	title,
 	image,
@@ -13,17 +17,43 @@ const TwoColumnH2 = ({
 	buttonSecondaryUrl,
 	buttonSecondaryClass,
 	buttonSecondaryTitle,
+	anim,
+	animVersion,
+	animSegment,
 }) => {
+	const lottieRef = useRef(null);
+
+	const myRef = useRef();
+
+	const { inViewport, enterCount, leaveCount } = useInViewport(myRef);
+
+	enterCount === 1 && lottieRef.current && lottieRef.current.play();
+	console.log(anim);
 	return (
-		<section className={`two-column-h2 ${direction}`}>
+		<section className={`two-column-h2 ${direction} ${className}`}>
 			<div className={"row align-items-center"}>
-				<div className={`col col-12 col-lg-6 ${direction === "rtl" ? "order-lg-2" : "order-lg-1"}`}>
-					<Image alt={title} filename={image} />
+				<div className={`col col-12 col-lg-6 anim-col ${animVersion === 2 && "px-2"} ${direction === "rtl" ? "order-lg-2" : "order-lg-1"}`}>
+					{anim && (
+						<Lottie
+							width='100%'
+							height='100%'
+							resizeMode='cover'
+							className={`lottie-anim-${animVersion}`}
+							lottieRef={lottieRef}
+							quality={"high"}
+							animationData={anim}
+							loop={false}
+							autoplay={false}
+							renderer={"canvas"}
+						/>
+					)}
+					{!anim && <Image alt={title} filename={image} />}
 				</div>
 				<div className={`d-table-cell align-middle col col-12 col-lg-6 ${direction === "rtl" ? "order-lg-1" : "order-lg-2"}`}>
 					<div className={"text"}>
 						<h2 className={"with-decor mt-4 mt-lg-0"}>{title}</h2>
 						<div className='paragraph' dangerouslySetInnerHTML={{ __html: text }} />
+						<div className={"lottie-anchor"} ref={myRef} />
 						<div className={"flex mt-4"}>
 							<Link to={buttonPrimaryUrl} className={`button button-simple me-4 ${buttonPrimaryClass}`}>
 								{buttonPrimaryTitle}

src/datas/careers/content.js

@@ -1,58 +1,63 @@
-import perkAnimation1 from '../../images/illustrations/career-1/data.json'
-import perkAnimation2 from '../../images/illustrations/career-2/data.json'
-import perkAnimation3 from '../../images/illustrations/career-3/data.json'
-import perkAnimation4 from '../../images/illustrations/career-4/data.json'
-
+import perkAnimation1 from "../../images/illustrations/career-1/data.json";
+import perkAnimation2 from "../../images/illustrations/career-2/data.json";
+import perkAnimation3 from "../../images/illustrations/career-3/data.json";
+import perkAnimation4 from "../../images/illustrations/career-4/data.json";
 
 export const content = {
-    title : 'Careers',
-    subtitle: 'We’re on a mission to change the way that blockchains and decentralized applications are built—making them more secure, sovereign and scalable.',
-    text: 'Join our team of leading engineers, researchers and entrepreneurs in pioneering the first modular blockchain design.',
-    button: {
-        text: 'Current openings',
-        url: 'https://jobs.lever.co/celestia/'
-    },
-    perks:{
-        title: 'Perks',
-        perks: [{
-                title: 'Employment benefits',
-                image: 'careers/careers-1.svg',
-                animation: perkAnimation1
-            },{
-                title: '4 weeks annual vacation',
-                image: 'careers/careers-2.svg',
-                animation: perkAnimation2
-            },{
-                title: 'Meaningful long-term compensation package',
-                image: 'careers/careers-3.svg',
-                animation: perkAnimation3
-            },{
-                title: 'Flexible and remote work environment',
-                image: 'careers/careers-4.svg',
-                animation: perkAnimation4
-            }
-        ]
-    }
-}
+	title: "Careers",
+	subtitle:
+		"We’re on a mission to change the way that blockchains and decentralized applications are built—making them more secure, sovereign and scalable.",
+	text: "Join our team of leading engineers, researchers and entrepreneurs in pioneering the first modular blockchain design.",
+	button: {
+		text: "Current openings",
+		url: "https://jobs.lever.co/celestia/",
+	},
+	perks: {
+		title: "Perks",
+		perks: [
+			{
+				title: "Employment benefits",
+				image: "careers/careers-1.svg",
+				animation: perkAnimation1,
+			},
+			{
+				title: "4 weeks annual vacation",
+				image: "careers/careers-2.svg",
+				animation: perkAnimation2,
+			},
+			{
+				title: "Meaningful long-term compensation package",
+				image: "careers/careers-3.svg",
+				animation: perkAnimation3,
+			},
+			{
+				title: "Flexible and remote work environment",
+				image: "careers/careers-4.svg",
+				animation: perkAnimation4,
+			},
+		],
+	},
+};
 
 export const FooterBoxes = [
-    {
-        title: 'Join our growing ecosystem',
-        text: 'View job openings and career opportunities in our ecosystem.',
-        button: {
-            text: 'Current openings',
-            href: 'https://celestia.pallet.com/jobs',
-            id: 'career',
-            type: 'simple'
-        }
-    },{
-        title: 'Build on testnet',
-        text: 'Join a growing modular ecosystem of developers building on testnet.',
-        button: {
-            text: 'Get started',
-            href: 'https://docs.celestia.org/',
-            id: 'operator',
-            type: 'simple'
-        }
-    }
-]
+	{
+		title: "Join our growing ecosystem",
+		text: "View job openings and career opportunities in our ecosystem.",
+		button: {
+			text: "Current openings",
+			href: "https://celestia.pallet.com/jobs",
+			id: "career",
+			type: "simple",
+		},
+	},
+	{
+		title: "Build on testnet",
+		text: "Join a growing modular ecosystem of developers building on testnet.",
+		button: {
+			text: "Get started",
+			href: "https://docs.celestia.org/",
+			id: "operator",
+			type: "simple",
+		},
+	},
+];

src/datas/glossary/content.js

@@ -1,21 +1,45 @@
 export const FooterBoxes = [
-    {
-        title: 'Journey into modular',
-        text: 'Start your deep dive on modular blockchains.',
-        button: {
-            text: 'Learn modular',
-            href: '/learn/',
-            id: 'career',
-            type: 'simple'
-        }
-    },{
-        title: 'Build on testnet',
-        text: 'Join a growing modular ecosystem of developers building on testnet.',
-        button: {
-            text: 'Get started',
-            href: 'https://docs.celestia.org/',
-            id: 'operator',
-            type: 'simple'
-        }
-    }
-]
+	{
+		title: "Journey into modular",
+		text: "Start your deep dive on modular blockchains.",
+		button: {
+			text: "Learn modular",
+			href: "/learn/",
+			id: "career",
+			type: "simple",
+		},
+	},
+	{
+		title: "Build on testnet",
+		text: "Join a growing modular ecosystem of developers building on testnet.",
+		button: {
+			text: "Get started",
+			href: "https://docs.celestia.org/",
+			id: "operator",
+			type: "simple",
+		},
+	},
+];
+
+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: "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",
+		},
+	},
+];

src/datas/home/hero-section.js

@@ -1,6 +1,6 @@
 export const heroData = {
 	title: "The first modular blockchain network",
-	text: "Celestia is a modular data availability network that securely scales with the number of users, making it easy for anyone to launch their own blockchain.",
+	text: "Celestia is a modular data availability network that makes it easy for anyone to securely launch their own blockchain.",
 	buttons: [
 		{
 			text: "Build modular",

src/datas/run-a-node/join-the-network.js

@@ -9,7 +9,7 @@ export const joinTheNetwork = {
 			image: "run-a-node/beginner-image.png",
 			link: {
 				text: "Deploy on Vimana",
-				url: "https://docs.vistara.dev/the-vistara-workflow/getting-started",
+				url: "https://docs.vistara.dev/guides/getting-started",
 			},
 		},
 		{