chore: update website to zig roadmap june 2025

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="An open-source Ethereum consensus client written in Typescript."
+      content="An open-source Ethereum consensus client written with Zig and TypeScript architectures."
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicons/apple-touch-icon.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

src/components/Community/index.scss

@@ -68,7 +68,7 @@
     align-items: flex-start;
   }
 
-  .typescript {
+  .zig {
     background: $secondary;
     text-align: left;
     img {
@@ -106,15 +106,15 @@
       color: $gray-300;
       max-width: unset;
       margin-block-start: 0.5rem;
-      margin-block-end: 0.5rem;
+      margin-block-end: 2rem;
     }
     img {
       margin-top: 5vh;
     }
   }
   .button-group {
     a {
-      @media #{$mq-md} { margin-right: 0 .5rem;} 
+      @media #{$mq-md} { margin-right: 0.5rem;} 
     }
   }
 }

src/components/Community/index.tsx

@@ -21,7 +21,7 @@ export const Community: React.FC = () => {
     }
   }, [controls, inView]);
 
-  const splitSentence = splitText(`Lodestar is an alternative consensus client.`);
+  const splitSentence = splitText(`Lodestar is a performant minority consensus client.`);
 
   return (
     <Fragment>
@@ -42,16 +42,25 @@ export const Community: React.FC = () => {
             </motion.h1>
             <p>
               Ethereum's decentralized network has greater resilience supporting
-              multi-client architecture. Running alternative clients reduces your
-              risk during correlated failures.
+              multi-client architecture. Running alternative clients like Lodestar reduces your
+              risk during correlated failures and provides the network with greater resilience in recovering networks.
             </p>
-            <a
-              href="https://dankradfeist.de/ethereum/2022/03/24/run-the-majority-client-at-your-own-peril.html"
-              target="__blank"
-              rel="noopener noreferrer"
-            >
-              <Button dark>Read on</Button>
-            </a>
+              <div className='button-group'>
+                <a
+                href="https://blog.chainsafe.io/lodestar-holesky-rescue-retrospective/"
+                target="__blank"
+                rel="noopener noreferrer"
+                >
+                <Button primary>Recovering Holesky</Button>
+                </a>
+                <a
+                  href="https://dankradfeist.de/ethereum/2022/03/24/run-the-majority-client-at-your-own-peril.html"
+                  target="__blank"
+                  rel="noopener noreferrer"
+                >
+                <Button dark>Why Run A Minority Client?</Button>
+                </a>
+              </div>
             <img src="/stronger.png" alt="" />
           </div>
         </div>
@@ -61,11 +70,10 @@ export const Community: React.FC = () => {
           whileInView="onscreen"
           viewport={{ once: true }}
         >
-          <motion.div className="card typescript" variants={slideUpVariant}>
-            <h1>Written in the world’s most popular programming language</h1>
+          <motion.div className="card zig" variants={slideUpVariant}>
+            <h1>Written for simplicity, control, and performance</h1>
             <p>
-              Lodestar is written in TypeScript, a superset of JavaScript, making it an accessible entry
-              point into Ethereum development.
+              Lodestar is building Ethereum infrastructure on Zig, a promising new systems level programming language with C interoperability, faster compilations and safe memory management.
             </p>
             <a
               href="https://github.com/ChainSafe/lodestar"
@@ -74,7 +82,7 @@ export const Community: React.FC = () => {
             >
               <Button primary>Source Code</Button>
             </a>
-            <img src="/TS.png" alt="" />
+            <img src="/zig.png" alt="" />
           </motion.div>
           <motion.div className="card social" variants={slideUpVariant}>
             <h1>A vibrant community</h1>
@@ -84,18 +92,18 @@ export const Community: React.FC = () => {
             </p>
             <div className="button-group">
               <a
-                href="https://discord.com/invite/yjyvFRP"
+                href="https://discord.gg/642wB3XC3Q"
                 target="__blank"
                 rel="noopener noreferrer"
               >
                 <Button dark>Join Discord</Button>
               </a>
               <a
-                href="https://twitter.com/lodestar_eth"
+                href="https://x.com/lodestar_eth"
                 target="__blank"
                 rel="noopener noreferrer"
               >
-                <Button dark>Follow us on Twitter</Button>
+                <Button dark>Follow us on X/Twitter</Button>
               </a>
             </div>
           </motion.div>

src/components/Contributors/index.scss

@@ -65,7 +65,8 @@
   }
   .button-group {
     a {
-      @media #{$mq-md} { margin-right: 0.5rem;} 
+      @media #{$mq-md} { margin-right: 0.5rem} ;
+
     }
   }
   .grid {

src/components/Footer/index.tsx

@@ -24,13 +24,13 @@ export const Footer: React.FC = () => {
           </a>
           <div className='icons'>
             <a
-              href='https://discord.com/invite/xSAwrnCWcg'
+              href='https://discord.gg/642wB3XC3Q'
               target='_blank'
               rel='noopener noreferrer'>
               <DiscordLogo size={28} />
             </a>
             <a
-              href='https://twitter.com/lodestar_eth'
+              href='https://x.com/lodestar_eth'
               target='_blank'
               rel='noopener noreferrer'>
               <TwitterLogo size={28} />

src/components/GeneralInfo/index.tsx

@@ -20,7 +20,7 @@ export const GeneralInfo: React.FC = () => {
     }
   }, [controls, inView]);
 
-  const splitSentence = splitText(`Lodestar is a consensus beacon node and validator client for the Ethereum blockchain. Lodestar's tools and libraries enable Ethereum protocol development for the JavaScript ecosystem.`);
+  const splitSentence = splitText(`Lodestar is a consensus beacon node and validator client for the Ethereum blockchain. Lodestar's tools and libraries enable Ethereum protocol development for Ziglang and JavaScript ecosystems.`);
 
   return (
     <Fragment>
@@ -53,27 +53,54 @@ export const GeneralInfo: React.FC = () => {
         <div className="general--setup" id="install">
           <div className="general--setup--left">
             <h1 className="title">
-              Don't trust, verify: Run your own node.
+              Advancing Ziglang and Ethereum ecosystems.
             </h1>
             <div className="text-wrapper">
               <h2>
-                Running your own full Ethereum node ensures your own independence.
-                Validate with a minority client like Lodestar to make the Ethereum network safer.
+                We're helping to improve the Zig ecosystem by contributing upstream, building Ethereum tooling and integrating with C libraries. These are some of our active project contributions:
               </h2>
               <div className='button-group'>
                 <a
-                  href="https://hackmd.io/@philknows/rJegZyH9q"
+                  href="https://github.com/ChainSafe/blst-z"
+                  target="__blank"
+                  rel="noopener noreferrer"
+                              >
+                  <Button primary>blst-z</Button>
+                </a>
+                <a
+                  href="https://github.com/ChainSafe/bun-ffi-z"
                   target="__blank"
                   rel="noopener noreferrer"
                 >
-                <Button dark>Quick Start Guide</Button>
+                  <Button dark>bun-ffi-z</Button>
                 </a>
                 <a
-                  href="https://github.com/ChainSafe/lodestar-quickstart"
+                  href="https://github.com/ChainSafe/hashtree-z"
                   target="__blank"
                   rel="noopener noreferrer"
                 >
-                  <Button primary>Quick Start Repository</Button>
+                  <Button primary>hashtree-z</Button>
+                </a>
+                <a
+                  href="https://github.com/ChainSafe/ssz-z"
+                  target="__blank"
+                  rel="noopener noreferrer"
+                              >
+                  <Button dark>ssz-z</Button>
+                </a>
+                <a
+                  href="https://github.com/ChainSafe/zbuild"
+                  target="__blank"
+                  rel="noopener noreferrer"
+                >
+                  <Button primary>zbuild</Button>
+                </a>
+                <a
+                  href="https://github.com/ChainSafe/zig-discv5"
+                  target="__blank"
+                  rel="noopener noreferrer"
+                              >
+                  <Button dark>zig-discv5</Button>
                 </a>
               </div>
             </div>

src/components/Hero/index.tsx

@@ -21,7 +21,7 @@ export const Hero: React.FC = () => {
     }
   }, [controls, inView]);
 
-  const splitSentence = splitText(`Ethereum meets JavaScript.`);
+  const splitSentence = splitText(`Ethereum meets Performance.`);
 
   return (
     <Fragment>
@@ -41,12 +41,11 @@ export const Hero: React.FC = () => {
               ))}
           </motion.h1>
           <p>
-            Lodestar is an open-source Ethereum consensus client written in
-            Typescript.
+            Lodestar is an open-source Ethereum consensus client written with Zig and JavaScript architecture.
           </p>
           <div className="button-group">
             <a
-              href="https://chainsafe.github.io/lodestar/"
+              href="https://chainsafe.github.io/lodestar/run/getting-started/installation"
               target="_blank"
               rel="noopener noreferrer"
             >