diff --git a/public/index.html b/public/index.html index 7ce82f8..6b0b8ca 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ diff --git a/public/lodestar-2019.png b/public/lodestar-2019.png new file mode 100644 index 0000000..b073f25 Binary files /dev/null and b/public/lodestar-2019.png differ diff --git a/public/lodestar-diversity-2024.png b/public/lodestar-diversity-2024.png new file mode 100644 index 0000000..f928ce2 Binary files /dev/null and b/public/lodestar-diversity-2024.png differ diff --git a/public/team.png b/public/team.png index 2dadc65..5cf86d4 100644 Binary files a/public/team.png and b/public/team.png differ diff --git a/public/zig-bun.png b/public/zig-bun.png new file mode 100644 index 0000000..d21f9f8 Binary files /dev/null and b/public/zig-bun.png differ diff --git a/public/zig.png b/public/zig.png new file mode 100644 index 0000000..6bbeeed Binary files /dev/null and b/public/zig.png differ diff --git a/src/components/Community/index.scss b/src/components/Community/index.scss index 3cc7b51..b523c55 100644 --- a/src/components/Community/index.scss +++ b/src/components/Community/index.scss @@ -68,7 +68,7 @@ align-items: flex-start; } - .typescript { + .zig { background: $secondary; text-align: left; img { @@ -106,7 +106,7 @@ color: $gray-300; max-width: unset; margin-block-start: 0.5rem; - margin-block-end: 0.5rem; + margin-block-end: 2rem; } img { margin-top: 5vh; @@ -114,7 +114,7 @@ } .button-group { a { - @media #{$mq-md} { margin-right: 0 .5rem;} + @media #{$mq-md} { margin-right: 0.5rem;} } } } diff --git a/src/components/Community/index.tsx b/src/components/Community/index.tsx index b8593ee..3a0c4c5 100644 --- a/src/components/Community/index.tsx +++ b/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 ( @@ -42,16 +42,25 @@ export const Community: React.FC = () => {

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.

- - - +
+ + + + + + +
@@ -61,11 +70,10 @@ export const Community: React.FC = () => { whileInView="onscreen" viewport={{ once: true }} > - -

Written in the world’s most popular programming language

+ +

Written for simplicity, control, and performance

- 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.

{ > - +

A vibrant community

@@ -84,18 +92,18 @@ export const Community: React.FC = () => {

- +
diff --git a/src/components/Contributors/index.scss b/src/components/Contributors/index.scss index db31bc2..4491173 100644 --- a/src/components/Contributors/index.scss +++ b/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 { diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 021e79a..6fabe7a 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -24,13 +24,13 @@ export const Footer: React.FC = () => {
diff --git a/src/components/GeneralInfo/index.tsx b/src/components/GeneralInfo/index.tsx index 8940043..8df6bff 100644 --- a/src/components/GeneralInfo/index.tsx +++ b/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 ( @@ -53,27 +53,54 @@ export const GeneralInfo: React.FC = () => {

- Don't trust, verify: Run your own node. + Advancing Ziglang and Ethereum ecosystems.

diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx index 5ee2c1a..4d2a2bc 100644 --- a/src/components/Hero/index.tsx +++ b/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 ( @@ -41,12 +41,11 @@ export const Hero: React.FC = () => { ))}

- 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.

diff --git a/src/components/Lightclients/index.scss b/src/components/Lightclients/index.scss deleted file mode 100644 index b53d2ce..0000000 --- a/src/components/Lightclients/index.scss +++ /dev/null @@ -1,103 +0,0 @@ -@import 'src/styles/breakpoints.scss'; -@import 'src/styles/colors.scss'; -@import 'src/styles/typography.scss'; - -.lightclients { - @media #{$mq-xl} { - max-width: 90%; - margin: 0 auto; - position: relative; - left: 50%; - transform: translateX(-50%); - } - @media #{$mq-md} { - margin: 5vh $margin-sm; - } - margin: 0 16px; - flex-direction: column; - display: flex; - overflow-x: hidden; - - img { - width: 100%; - } - - .title { - @extend %h1; - font-size: 56px; - line-height: 64px; - color: $gray-100; - font-weight: 600; - margin-block-end: 0; - text-align: center; - } - - &--intro { - h1 { - @extend %h1; - color: white; - margin-block-end: 0; - } - p { - @media #{$mq-lg} { - max-width: 48rem; - } - @extend %body-lg; - color: $gray-300; - - a { - color: $gray-300; - transition: 0.3s; - &:hover { - color: $primary; - } - } - } - } - &--details { - @media #{$mq-md} { - grid-template-columns: repeat(2, 25rem); - } - display: grid; - grid-template-columns: 1fr; - - .column { - h2 { - @extend %body-lg; - color: $gray-100; - margin-block-end: 0.5rem; - } - p { - @extend %body; - margin-block-start: 0.3rem; - margin-block-end: 0.3rem; - color: $gray-300; - } - } - } - &--button { - width: 100%; - margin: 3vh 0; - align-self: center; - justify-self: center; - } - - .large-link { - @extend %body-lg; - text-decoration: none; - color: $white; - border: 4px solid $secondary; - border-radius: 50px; - padding: 1.2rem 3.2rem; - margin-bottom: 0.5rem; - text-align: center; - transition: all 0.15s ease-out; - &:hover { - filter: brightness(0.7); - } - &:first-of-type { - border: none; - background: $primary; - } - } -} diff --git a/src/components/Lightclients/index.tsx b/src/components/Lightclients/index.tsx deleted file mode 100644 index 102c77b..0000000 --- a/src/components/Lightclients/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React, { Fragment } from 'react'; -import './index.scss'; - -export const Lightclients: React.FC = () => { - return ( - -
- - -
-
-

In practice, light clients:

-

Rely on the sync committee.

-

Provide a degree of verifiability.

-

Stay updated inexpensively.

-
-
-

Direct benefits

-

Provides direct access to the blockchain.

-

Supports true censorship resistance.

-

Minimizes hardware requirements.

-
-
- -
- - ); -}; diff --git a/src/components/Research/index.tsx b/src/components/Research/index.tsx index 1f1781c..9cc1c17 100644 --- a/src/components/Research/index.tsx +++ b/src/components/Research/index.tsx @@ -19,7 +19,7 @@ export const Research: React.FC = () => { } }, [controls, inView]); - const splitSentence = splitText(`Join the many developers who are improving Lodestar and our JavaScript libraries in experimental ways.`); + const splitSentence = splitText(`Join the many developers who are improving the Ethereum protocol through various methods of participation.`); return ( @@ -41,28 +41,28 @@ export const Research: React.FC = () => {
diff --git a/src/components/Stake/index.scss b/src/components/Stake/index.scss index 42e7ebd..d537943 100644 --- a/src/components/Stake/index.scss +++ b/src/components/Stake/index.scss @@ -44,6 +44,11 @@ row-gap: 1rem; padding: 1.5rem 1rem; + .button-group { + a { + @media #{$mq-md} { margin-right: 0.5rem;} + } + } .column { display: flex; flex-direction: column; diff --git a/src/components/Stake/index.tsx b/src/components/Stake/index.tsx index 8781847..49902d0 100644 --- a/src/components/Stake/index.tsx +++ b/src/components/Stake/index.tsx @@ -15,18 +15,24 @@ export const Stake: React.FC = () => { >
-

Stake with Lodestar

+

Host your own private RPC endpoint, earn rewards for validating the network.

- Run Lodestar. Earn rewards. And do your part in securing a $100 - billion network. There are multiple ways to stake with Lodestar. + Bootstrap your own full Ethereum node with Lodestar using node setup software. Using a performant minority client makes the Ethereum network safer.

diff --git a/src/components/Timeline/index.scss b/src/components/Timeline/index.scss index 1cbc74c..2a7eb84 100644 --- a/src/components/Timeline/index.scss +++ b/src/components/Timeline/index.scss @@ -42,7 +42,7 @@ column-gap: 0.5rem; padding: 3rem 2rem; } - display: grid; + display: inline; grid-template-columns: 1fr; row-gap: 1rem; padding: 3rem 1rem 1.5rem 1rem; @@ -56,10 +56,18 @@ .show-img { display: inline-flex; position: relative; + height: 100%; width: 100%; + padding: 1rem 1rem 1rem 0rem; + overflow: hidden; + object-fit: cover; + object-position: center; + @media #{$mq-md} { width: unset; max-width: 400px; + max-height: 400px; + object-fit: contain; } @media #{$mq-lg} { max-width: unset; @@ -95,7 +103,9 @@ } .tabs-container { - display: flex; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + width: 40%; } .unselected { diff --git a/src/components/Timeline/index.tsx b/src/components/Timeline/index.tsx index 1e09070..efdbde8 100644 --- a/src/components/Timeline/index.tsx +++ b/src/components/Timeline/index.tsx @@ -25,7 +25,7 @@ const Tab: React.FC = ({name, isActive, id, onClick}) => { export const Timeline: React.FC = () => { - const [activeTab, setActiveTab] = useState(0); + const [activeTab, setActiveTab] = useState(7); //@ts-ignore const handleClick = e => { diff --git a/src/components/Timeline/tabData.ts b/src/components/Timeline/tabData.ts index 6553f84..9552c92 100644 --- a/src/components/Timeline/tabData.ts +++ b/src/components/Timeline/tabData.ts @@ -24,6 +24,14 @@ export const tabs = [ name: "2023", id: "5", }, + { + name: "2024", + id: "6", + }, + { + name: "2025", + id: "7", + }, ] export const tabContent = [ @@ -37,6 +45,7 @@ export const tabContent = [ id: "1", year: "2019", caption: "ChainSafe receives a grant to develop tooling such as SSZ, BLS, and SHA256-AS for Ethereum Consensus (eth2) in the JS ecosystem.", + imgUrl: "/lodestar-2019.png" }, { id: "2", @@ -59,7 +68,19 @@ export const tabContent = [ { id: "5", year: "2023", - caption: "Lodestar proposes the first block on the new 1.4M validator public testnet, Holesky", + caption: "Lodestar proposes the first block on the new 1.4M validator public testnet, Holesky.", imgUrl: "/holesky-dark.png" }, + { + id: "6", + year: "2024", + caption: "Shipped Dencun hard fork with over 2% of mainnet share.", + imgUrl: "/lodestar-diversity-2024.png" + }, + { + id: "7", + year: "2025", + caption: "Lodestar is rewriting core modules in Zig and switching to Bun as the primary runtime for Lodestar v2.0.", + imgUrl: "/zig-bun.png" + }, ]; diff --git a/src/components/Tools/index.tsx b/src/components/Tools/index.tsx index 3511325..7990370 100644 --- a/src/components/Tools/index.tsx +++ b/src/components/Tools/index.tsx @@ -23,7 +23,7 @@ export const Tools: React.FC = () => {
-

Supporting the Ethereum developer ecosystem

+

Supporting the Ethereum Developer Ecosystem

{

- Lodestar is making it possible for JavaScript to participate + Lodestar is building robust Ethereum software with Zig, supporting tools in JavaScript

{ > -

For stakers, node operators, and data consumers

+

Building with Zig

- Using Lodestar to secure the Ethereum network brings us closer to - a world with greater resiliency, sovereignty, and sustainability + Zig is designed to be the simplest tool for writing optimal low-level software without surprises or hidden costs. Its combination of simplicity, control, and performance makes it a perfect fit for building robust Ethereum infrastructure. +

-

For researchers, builders, and experimenters

+

Supporting JavaScript

- We provide the tools to empower the largest group of developers - to generate value on Ethereum and progress development of the protocol + Zig's future supports built-in browser and server support for WebAssembly through its compiler architecture. We'll continue supporting our TypeScript libraries and shipping WASM builds for critical modules.

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index a37f572..f928ef3 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -11,7 +11,6 @@ import { Contributors } from '../../components/Contributors'; import { Footer } from '../../components/Footer'; import { Header } from '../../components/Header'; import { Stake } from '../../components/Stake'; -import { Lightclients } from '../../components/Lightclients'; import { Timeline } from '../../components/Timeline'; import { Tools } from '../../components/Tools'; @@ -22,7 +21,6 @@ export const Home: React.FC = () => { - diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 8321b2c..35498b9 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -8,8 +8,8 @@ $primary: #4e33ff; $primary-dark: hsl(248, 100%, 50%); -$secondary: hsl(0, 0, 18%); -$secondary-dark: hsl(0, 0, 10%); +$secondary: hsl(0, 0%, 18%); +$secondary-dark: hsl(0, 0%, 10%); $gray-100: hsl(35, 38%, 94%); //#F5F0E9