mirror of
https://github.com/acid-info/free.technology.git
synced 2025-02-23 15:08:28 +00:00
feat: add BU milestones
This commit is contained in:
parent
07cb631c19
commit
c2f9255714
@ -1,4 +1,5 @@
|
||||
import { breakpoints, uiConfigs } from '@/configs/ui.configs'
|
||||
import { BUMenuBar } from '@/pages/[bu]'
|
||||
import styled from '@emotion/styled'
|
||||
import { Tag } from '../Tag'
|
||||
|
||||
@ -8,16 +9,6 @@ type Props = {
|
||||
}
|
||||
|
||||
const BUMenuFilter = ({ activeMenus, setActiveMenus }: Props) => {
|
||||
const menus = [
|
||||
'Testimonials',
|
||||
'About',
|
||||
'Milestones',
|
||||
'Team',
|
||||
'Jobs',
|
||||
'Challenges',
|
||||
'Media',
|
||||
]
|
||||
|
||||
const toggleMenu = (menu: string) => {
|
||||
if (activeMenus.includes(menu)) {
|
||||
setActiveMenus((preveMenus) => preveMenus.filter((item) => item !== menu))
|
||||
@ -36,7 +27,7 @@ const BUMenuFilter = ({ activeMenus, setActiveMenus }: Props) => {
|
||||
>
|
||||
All
|
||||
</Tag>
|
||||
{menus.map((menu: string) => (
|
||||
{BUMenuBar.map((menu: string) => (
|
||||
<Tag
|
||||
active={activeMenus.includes(menu)}
|
||||
key={menu + '-tag'}
|
||||
|
@ -3,7 +3,7 @@ import styled from '@emotion/styled'
|
||||
|
||||
type Props = {
|
||||
title: string
|
||||
description: React.ReactNode
|
||||
description?: React.ReactNode
|
||||
}
|
||||
|
||||
const BUSection = ({ title, description }: Props) => {
|
||||
@ -12,7 +12,7 @@ const BUSection = ({ title, description }: Props) => {
|
||||
<TitleContainer>
|
||||
<Title>{title}</Title>
|
||||
</TitleContainer>
|
||||
<Content>{description}</Content>
|
||||
{description && <Content>{description}</Content>}
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
137
src/components/BU/Milestones/BUMilestones.tsx
Normal file
137
src/components/BU/Milestones/BUMilestones.tsx
Normal file
@ -0,0 +1,137 @@
|
||||
import styled from '@emotion/styled'
|
||||
import BUSection from '../BUSection'
|
||||
|
||||
type Props = {
|
||||
data: any
|
||||
}
|
||||
|
||||
const BUMilestones = ({ data }: Props) => {
|
||||
return (
|
||||
<Container>
|
||||
<BUSection
|
||||
title={'Milestones'}
|
||||
description={
|
||||
<ScrollableContainer>
|
||||
{data.map((item: any, index: number) => (
|
||||
<Item key={'milestone-' + index}>
|
||||
<GreyBox key={item.milestone}>
|
||||
<Year>{item.year}</Year>
|
||||
<h3>{item.title}</h3>
|
||||
</GreyBox>
|
||||
<TimelineContainer>
|
||||
<Step>
|
||||
<StepNumber>{index + 1}</StepNumber>
|
||||
</Step>
|
||||
<Bar />
|
||||
</TimelineContainer>
|
||||
</Item>
|
||||
))}
|
||||
</ScrollableContainer>
|
||||
}
|
||||
/>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px;
|
||||
`
|
||||
|
||||
const ScrollableContainer = styled.div`
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
margin-left: auto;
|
||||
width: 50vw;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
||||
const Item = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
|
||||
&:first-of-type {
|
||||
span {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const GreyBox = styled.div`
|
||||
display: flex;
|
||||
width: 268px;
|
||||
height: 356px;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
border-radius: 2px;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
flex-shrink: 0;
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`
|
||||
|
||||
const Year = styled.div`
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
`
|
||||
|
||||
const TimelineContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const Bar = styled.hr`
|
||||
background-color: #000;
|
||||
opacity: 0.2;
|
||||
width: 284px;
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
z-index: 0;
|
||||
left: 30px;
|
||||
`
|
||||
|
||||
const Step = styled.span`
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.18);
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
`
|
||||
|
||||
const StepNumber = styled.p`
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
`
|
||||
|
||||
export default BUMilestones
|
@ -5,4 +5,6 @@ export { default as BUMenus } from './BUMenus'
|
||||
export { default as BUSection } from './BUSection'
|
||||
export { default as BUVideo } from './BUVideo'
|
||||
export { default as BUMedia } from './Media/BUMedia'
|
||||
export { default as BUMilestones } from './Milestones/BUMilestones'
|
||||
export { default as BUTeam } from './Team/BUTeam'
|
||||
export { default as BUTestimonials } from './Testimonials/BUTestimonials'
|
||||
|
@ -64,6 +64,24 @@ const BU_DATA: any = {
|
||||
about: {
|
||||
description: `The network facilitates human-to-human, machine-to-human, and machine-to-machine communication in both directions, giving it an enormous scope of potential applications — from internode communications to in-game messaging and everything in between. Currently, there are three Waku client implementations: nwaku (reference implementation in Nim), Go-Waku (for Go applications), and JS-Waku (for browsers).\n\nWaku v1 was a fork of the Whisper protocol, but persistent scalability issues forced an entire protocol rewrite, birthing Waku v2 in 2021. At a high level, Waku v2 implements Pub/Sub over libp2p, extending the networking framework’s capabilities to include retrieving historical messages for mostly offline devices, adaptive nodes, and bandwidth preservation for resource-restricted devices.\n\nKey to Waku’s design is its modularity. When integrating Waku with an app, developers can select which protocols to implement according to their use case and users’ hardware availability, enabling devices with limited resources to contribute as peers in the network. The Relay protocol is the foundation of Waku and handles Pub/Sub messaging. Among the other protocols complementing Relay are Store, which enables historic message retrieval; Filter, which preserves bandwidth for nodes with limited resources; and Light Push, which allows nodes with short connections and limited bandwidth to publish messages to the Waku network.`,
|
||||
},
|
||||
milestones: [
|
||||
{
|
||||
year: '2023',
|
||||
title: 'Scaling to support 10,000 and 1 million nodes',
|
||||
},
|
||||
{
|
||||
year: '2023',
|
||||
title: 'Autosharding, DoS protection, bandwidth capping',
|
||||
},
|
||||
{
|
||||
year: '2024',
|
||||
title: 'Node operator incentivisation',
|
||||
},
|
||||
{
|
||||
year: '2024+',
|
||||
title: 'Use case-specific SDKs',
|
||||
},
|
||||
],
|
||||
},
|
||||
codex: {
|
||||
hero: {
|
||||
|
@ -4,10 +4,11 @@ import {
|
||||
BUMedia,
|
||||
BUMenuFilter,
|
||||
BUMenus,
|
||||
BUMilestones,
|
||||
BUTeam,
|
||||
BUTestimonials,
|
||||
BUVideo,
|
||||
} from '@/components/BU'
|
||||
import BUTestimonials from '@/components/BU/Testimonials/BUTestimonials'
|
||||
import { ChallengeList } from '@/components/Challenges'
|
||||
import { JobList } from '@/components/Jobs'
|
||||
import { SEO } from '@/components/SEO'
|
||||
@ -16,6 +17,16 @@ import { SubPageLayout } from '@/layouts/SubPageLayout'
|
||||
import { useState } from 'react'
|
||||
import { JOB_BOARD_MAPPING, getJobs } from '../../utils/getJobs'
|
||||
|
||||
export const BUMenuBar = [
|
||||
'Testimonials',
|
||||
'About',
|
||||
'Milestones',
|
||||
'Team',
|
||||
'Jobs',
|
||||
'Challenges',
|
||||
'Media',
|
||||
]
|
||||
|
||||
const Page = ({ bu, jobs, issues }: any) => {
|
||||
const [activeMenus, setActiveMenus] = useState<string[]>([])
|
||||
|
||||
@ -36,6 +47,9 @@ const Page = ({ bu, jobs, issues }: any) => {
|
||||
{activeMenus.length === 0 || activeMenus.includes('About') ? (
|
||||
<BUAbout data={BU_DATA[bu]?.about} />
|
||||
) : null}
|
||||
{activeMenus.length === 0 || activeMenus.includes('Milestones') ? (
|
||||
<BUMilestones data={BU_DATA[bu]?.milestones} />
|
||||
) : null}
|
||||
{activeMenus.length === 0 || activeMenus.includes('Team') ? (
|
||||
<BUTeam />
|
||||
) : null}
|
||||
|
Loading…
x
Reference in New Issue
Block a user