diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx index 1c8d59a..9bf1e3b 100644 --- a/packages/nextjs/components/Footer.tsx +++ b/packages/nextjs/components/Footer.tsx @@ -17,7 +17,7 @@ export const Footer = () => {
-
+

BuidlGuidl

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx index fe76984..867483f 100644 --- a/packages/nextjs/pages/index.tsx +++ b/packages/nextjs/pages/index.tsx @@ -8,7 +8,6 @@ import { Header } from "~~/components/Header"; import { LearnMoreCard } from "~~/components/LearnMoreCard"; import { MetaHeader } from "~~/components/MetaHeader"; import TrackedLink from "~~/components/TrackedLink"; -import { Address } from "~~/components/scaffold-eth"; type Stats = { builderCount: string; @@ -19,7 +18,22 @@ type Stats = { streamedEthIncrement: number; }; -const Home: NextPage<{ stats: Stats }> = ({ stats }) => { +type Cohort = { + id: string; + name: string; + url: string; + builders: { [key: string]: any }; + balance: string; + totalWithdrawn: string; +}; + +const Home: NextPage<{ + stats: Stats; + cohortsData?: Cohort[]; + totalCohorts: number; + totalHackers: number; + totalEthStreamed: number; +}> = ({ stats, cohortsData, totalCohorts, totalHackers, totalEthStreamed }) => { return ( <> @@ -224,37 +238,108 @@ const Home: NextPage<{ stats: Stats }> = ({ stats }) => { {/* Supporting Devs*/}
-
-
-
-

- Supporting -
up-and-coming
- high-impact devs +
+
+

+ Supporting
up-and-coming
high-impact devs +

+
+

+ Open Developer Streams are a unique way to fund development and give developers at the edges the freedom + to build what they think is most important. +

+

+ Their smart contracts get replenished monthly and allows them to withdraw funds whenever they like by + submitting a few sentences about the work or a PR. +

+

+ This approach produces novel open source solutions and a vibrant learning environment. +

+

SUPPORTED BY

+
+ EF logo +
+
+
+
+
+ developers list +
+
+
+

+ + {/* Cohorts*/} +
+
+
+ {/* Cohorts Text Content */} +
+

+ Partnering with +
ecosystem heroes

- BuidlGuidl streams to developers using our new cohort streams and other custom smart contracts. + Focused Cohort Streams bundle together a group of developer streams and focuses them on a per-determined + objective.

- Our goal is to enrich open learning within the Ethereum developer ecosystem. + These cohorts provided the structure and guidance of an Operator who identifies, adds, and removes + developers from the pool.

+

IN COLLABORATION WITH

+
+ Optimism logo + Aztek logo + Starknet logo +
- Connect with us + Co-fund with us -

SUPPORTED BY

-
- EF logo -
- Optimism logo -
+
+ {/* Cohorts Table */} +
+
+ + + + + + + + + + {cohortsData?.map(cohort => ( + window.open(cohort.url, "_blank")} + > + + + + + ))} + +
NameHackersBalance
{cohort.name}{Object.keys(cohort.builders).length} + {parseFloat(cohort.balance).toFixed(2)} + ETH +
+
+ {/* Badges with Cohorts table data aggregation*/} +
+
+ Cohorts {totalCohorts} +
+
+ Hackers {totalHackers} +
+
+ ETH Streamed {totalEthStreamed} Ξ
@@ -263,7 +348,7 @@ const Home: NextPage<{ stats: Stats }> = ({ stats }) => {
{/* Learn More */} -
+

LEARN MORE

{/* Card Container */} @@ -302,9 +387,29 @@ export const getStaticProps: GetStaticProps<{ stats: Stats }> = async () => { const stats = (await res.json()) as Stats; + // Fetch data for cohorts section + const resCohorts = await fetch(`${process.env.BG_BACKEND_API}/cohorts/stats`); + + if (!resCohorts.ok) throw new Error(`Failed to fetch cohorts, received status ${resCohorts.status}`); + + const cohortsData = (await resCohorts.json()) as Cohort[]; + + // Calculate total number of cohorts + const totalCohorts = cohortsData?.length; + + // Calculate total number of hackers + const totalHackers = cohortsData.reduce((acc, cohort) => acc + Object.keys(cohort.builders).length, 0); + + // Calculate Total ETH Streamed by all cohorts + const totalEthStreamed = cohortsData?.reduce((acc, cohort) => acc + parseFloat(cohort.totalWithdrawn), 0).toFixed(2); + return { props: { stats, + cohortsData, + totalCohorts, + totalHackers, + totalEthStreamed, }, // 6 hours refresh. revalidate: 21600, diff --git a/packages/nextjs/public/assets/aztek-logo.png b/packages/nextjs/public/assets/aztek-logo.png new file mode 100644 index 0000000..c8b6f9f Binary files /dev/null and b/packages/nextjs/public/assets/aztek-logo.png differ diff --git a/packages/nextjs/public/assets/ef-logo.png b/packages/nextjs/public/assets/ef-logo.png index 4c7d7ba..efda8e2 100644 Binary files a/packages/nextjs/public/assets/ef-logo.png and b/packages/nextjs/public/assets/ef-logo.png differ diff --git a/packages/nextjs/public/assets/laptop.svg b/packages/nextjs/public/assets/laptop.svg new file mode 100644 index 0000000..30dd06c --- /dev/null +++ b/packages/nextjs/public/assets/laptop.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/nextjs/public/assets/starknet-logo.svg b/packages/nextjs/public/assets/starknet-logo.svg new file mode 100644 index 0000000..71533a4 --- /dev/null +++ b/packages/nextjs/public/assets/starknet-logo.svg @@ -0,0 +1,22 @@ + + + + + + + + diff --git a/packages/nextjs/public/assets/support-high-impact-devs.png b/packages/nextjs/public/assets/support-high-impact-devs.png new file mode 100644 index 0000000..4517c8b Binary files /dev/null and b/packages/nextjs/public/assets/support-high-impact-devs.png differ diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css index 7547f52..6bf9c8b 100644 --- a/packages/nextjs/styles/globals.css +++ b/packages/nextjs/styles/globals.css @@ -56,6 +56,21 @@ p { @apply shadow-none; } +tbody tr:first-child td:first-child { + border-top-left-radius: 1.5rem; +} + +tbody tr:first-child td:last-child { + border-top-right-radius: 1.5rem; +} + +tbody tr:last-child td:first-child { + border-bottom-left-radius: 1.5rem; +} + +tbody tr:last-child td:last-child { + border-bottom-right-radius: 1.5rem; +} .hero-top-gradient { background: linear-gradient(180deg, #c3dbff 0%, rgba(217, 235, 229, 0.51) 66.15%, rgba(239, 251, 202, 0) 100%); } diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js index 4e27638..4bae5e6 100644 --- a/packages/nextjs/tailwind.config.js +++ b/packages/nextjs/tailwind.config.js @@ -71,6 +71,15 @@ module.exports = { "space-grotesk": ["Space Grotesk", "sans-serif"], "neue-machina": ["PPNeueMachina", "sans-serif"], }, + backgroundColor: { + skin: "#EBECFD", + }, + boxShadow: { + even: "0px 0px 11.65074px 0px rgba(139, 178, 241, 0.50)", + }, + screens: { + xs: "450px", + }, keyframes: { "bounce-interval": { "0%, 12.5%, 25%, 37.5%, 50%": {