This is an automated email from the ASF dual-hosted git repository.
tison pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
The following commit(s) were added to refs/heads/main by this push:
new cbfe9ce3474 Implement 'How does Pulsar work' homepage screen (#614)
cbfe9ce3474 is described below
commit cbfe9ce3474d91ce42010e329f7e69225907ef0c
Author: Kiryl Valkovich <[email protected]>
AuthorDate: Mon Jun 26 19:37:47 2023 +0300
Implement 'How does Pulsar work' homepage screen (#614)
Co-authored-by: Anonymitaet <[email protected]>
Co-authored-by: tison <[email protected]>
---
.../pages/HomePage/Features/Features.module.css | 7 +-
.../pages/HomePage/Features/Features.tsx | 8 +-
src/components/pages/HomePage/HomePage.tsx | 2 +
.../HowPulsarWorks/HowPulsarWorks.module.css | 77 ++++++++++++++
.../HomePage/HowPulsarWorks/HowPulsarWorks.tsx | 114 +++++++++++++++++++++
.../HomePage/HowPulsarWorks/img/bookkeeper.svg | 4 +
.../pages/HomePage/HowPulsarWorks/img/brokers.svg | 6 ++
.../HowPulsarWorks/img/illustration-desktop.svg | 95 +++++++++++++++++
.../HowPulsarWorks/img/illustration-mobile.svg | 105 +++++++++++++++++++
.../HowPulsarWorks/img/producer-and-consumer.svg | 4 +
.../HomePage/HowPulsarWorks/img/zookeeper.svg | 5 +
.../pages/HomePage/Users/Users.module.css | 2 +-
12 files changed, 419 insertions(+), 10 deletions(-)
diff --git a/src/components/pages/HomePage/Features/Features.module.css
b/src/components/pages/HomePage/Features/Features.module.css
index 678ac751063..e17f30d1729 100644
--- a/src/components/pages/HomePage/Features/Features.module.css
+++ b/src/components/pages/HomePage/Features/Features.module.css
@@ -9,7 +9,7 @@
.container {
display: flex;
flex-direction: column;
- padding: 5rem 4rem 0 4rem;
+ padding: 5rem 0 0;
max-width: var(--max-content-width);
width: 100%;
box-sizing: content-box;
@@ -40,10 +40,6 @@
}
.feature_title {
- font-weight: 600;
- font-size: 1.25rem;
- line-height: 1.3;
- margin-bottom: 1rem;
}
.feature_text {
@@ -72,6 +68,7 @@
.slider {
display: block;
+ margin-bottom: 3rem;
}
.container {
diff --git a/src/components/pages/HomePage/Features/Features.tsx
b/src/components/pages/HomePage/Features/Features.tsx
index 355ca69b8dc..512672a6cc7 100644
--- a/src/components/pages/HomePage/Features/Features.tsx
+++ b/src/components/pages/HomePage/Features/Features.tsx
@@ -21,9 +21,9 @@ const Features = () => {
return (
<div key={i} className={s.feature_block}>
<Picture className={s.feature_picture} />
- <span className={s.feature_title}>
+ <h3 className={s.feature_title}>
{feature.title}
- </span>
+ </h3>
<span className={s.feature_text}>
{feature.text}
@@ -42,9 +42,9 @@ const Features = () => {
<div key={i}>
<div className={s.feature_block}>
<div className={s.text_container}>
- <span className={s.feature_title}>
+ <h3 className={s.feature_title}>
{feature.title}
- </span>
+ </h3>
<span className={s.feature_text}>
{feature.text}
diff --git a/src/components/pages/HomePage/HomePage.tsx
b/src/components/pages/HomePage/HomePage.tsx
index b7c72408fda..b978e20c9b4 100644
--- a/src/components/pages/HomePage/HomePage.tsx
+++ b/src/components/pages/HomePage/HomePage.tsx
@@ -6,6 +6,7 @@ import ShortInfo from './ShortInfo/ShortInfo';
import Users from './Users/Users';
import s from './HomePage.module.css';
+import HowPulsarWorks from './HowPulsarWorks/HowPulsarWorks';
const HomePage = () => {
@@ -21,6 +22,7 @@ const HomePage = () => {
</div>
<div className={s.OtherScreens}>
<Features />
+ <HowPulsarWorks />
<Users />
</div>
</div>
diff --git
a/src/components/pages/HomePage/HowPulsarWorks/HowPulsarWorks.module.css
b/src/components/pages/HomePage/HowPulsarWorks/HowPulsarWorks.module.css
new file mode 100644
index 00000000000..7c8e785bab4
--- /dev/null
+++ b/src/components/pages/HomePage/HowPulsarWorks/HowPulsarWorks.module.css
@@ -0,0 +1,77 @@
+.HowPulsarWorks {
+ background-color: #fff;
+ padding-bottom: 6rem;;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.Container {
+ width: 100%;
+ max-width: var(--max-content-width);
+ padding: 4rem 3.2rem;
+ box-sizing: content-box;
+}
+
+@media (max-width: 1280px) {
+ .Container {
+ padding: 2.75rem 1rem 1.5rem 1rem;
+ }
+}
+
+.IllustrationDesktop {
+ margin-top: 4rem;
+ margin-bottom: 8rem;
+}
+
+.IllustrationMobile {
+ display: none;
+
+ margin-left: -1rem;
+ margin-right: -1rem;
+ margin-top: 4rem;
+ margin-bottom: -2rem;
+}
+
+.CardImage {
+}
+
+.CardImage svg {
+ height: 2rem;
+ width: auto;
+}
+
+.CardsDesktop {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 3rem;
+}
+
+.CardsMobile {
+ width: calc(100vw - 4rem);
+ padding: 4rem 0;
+ overflow: hidden;
+ display: none;
+}
+
+@media (max-width: 800px) {
+ .HowPulsarWorks {
+ padding-bottom: 0;
+ }
+
+ .CardsDesktop {
+ display: none;
+ }
+
+ .CardsMobile {
+ display: block;
+ }
+
+ .IllustrationDesktop {
+ display: none;
+ }
+
+ .IllustrationMobile {
+ display: block;
+ }
+}
diff --git a/src/components/pages/HomePage/HowPulsarWorks/HowPulsarWorks.tsx
b/src/components/pages/HomePage/HowPulsarWorks/HowPulsarWorks.tsx
new file mode 100644
index 00000000000..4338f9f8225
--- /dev/null
+++ b/src/components/pages/HomePage/HowPulsarWorks/HowPulsarWorks.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import s from './HowPulsarWorks.module.css'
+import ScreenTitle from '../ui/ScreenTitle/ScreenTitle';
+
+// SVGO breaks the illustration. To fix it, we import it as is.
+import illustrationDesktop from '!!raw-loader!./img/illustration-desktop.svg';
+import illustrationMobile from '!!raw-loader!./img/illustration-mobile.svg';
+
+import BookkeeperIcon from './img/bookkeeper.svg';
+import BrokersIcon from './img/brokers.svg';
+import ZookeeperIcon from './img/zookeeper.svg';
+import ProducerAndConsumerIcon from './img/producer-and-consumer.svg';
+import Slider from '@site/src/components/ui/Slider/Slider';
+
+const cards: CardProps[] = [
+ {
+ title: 'Producer & Consumer',
+ image: <ProducerAndConsumerIcon />,
+ children: (
+ <p>
+ A Pulsar client contains a consumer and a producer.
+ A producer writes messages on a topic.
+ A consumer reads messages from a topic and acknowledges specific
messages or all up to a specific message.
+ </p>
+ )
+ },
+ {
+ title: 'Apache Zookeeper',
+ image: <ZookeeperIcon />,
+ children: (
+ <p>
+ Pulsar and BookKeeper use Apache ZooKeeper to save metadata
coordinated between nodes,
+ such as a list of ledgers per topic, segments per ledger, and mapping
of topic bundles to a broker.
+ It’s a cluster of highly available and replicated servers (usually 3).
+ </p>
+ )
+ },
+ {
+ title: 'Pulsar Brokers',
+ image: <BrokersIcon />,
+ children: (
+ <p>
+ Topics (i.e., partitions) are divided among Pulsar brokers.
+ A broker receives messages for a topic and appends them to the topic’s
active virtual file (a.k.a ledger),
+ hosted on the Bookkeeper cluster. Brokers read messages from the cache
(mostly) or BookKeeper and dispatch them to the consumers.
+ Brokers also receive message acknowledgments and persist them to the
BookKeeper cluster as well.
+ Brokers are stateless (don't use/need a disk).
+ </p>
+ )
+ },
+ {
+ title: 'Apache Bookkeeper',
+ image: <BookkeeperIcon />,
+ children: (
+ <p>
+ Apache BookKeeper is a cluster of nodes called bookies.
+ Each virtual file (a.k.a ledger) is divided into consecutive segments,
and each segment is kept on 3 bookies by default
+ (replicated by the client - i.e., the broker).
+ Operators can add bookies rapidly since no data reshuffling (moving)
between them is required.
+ They immediately share the incoming write load.
+ </p>
+ )
+ }
+];
+
+const HowPulsarWorks: React.FC = () => {
+ return (
+ <section className={s.HowPulsarWorks}>
+ <div className={s.Container}>
+ <ScreenTitle>How does Pulsar work</ScreenTitle>
+
+ <div dangerouslySetInnerHTML={{ __html: illustrationDesktop }}
className={s.IllustrationDesktop} />
+ <div dangerouslySetInnerHTML={{ __html: illustrationMobile }}
className={s.IllustrationMobile} />
+
+ <div className={s.CardsDesktop}>
+ {cards.map((card, index) => (
+ <Card key={index} {...card} />
+ ))}
+ </div>
+
+ <div className={s.CardsMobile}>
+ <Slider slidesToShow={1}>
+ {cards.map((card, i) => {
+ return (
+ <Card key={i} {...card} />
+ )
+ })}
+ </Slider>
+ </div>
+ </div>
+ </section>
+ );
+}
+
+type CardProps = {
+ title: string;
+ image: React.ReactNode;
+ children: React.ReactNode;
+};
+
+const Card: React.FC<CardProps> = (props) => {
+ return (
+ <div className={s.Card}>
+ <div className={s.CardImage}>
+ {props.image}
+ </div>
+ <h3 className={s.CardTitle}>{props.title}</h3>
+ <div className={s.CardContent}>{props.children}</div>
+ </div>
+ );
+}
+
+export default HowPulsarWorks;
+
diff --git a/src/components/pages/HomePage/HowPulsarWorks/img/bookkeeper.svg
b/src/components/pages/HomePage/HowPulsarWorks/img/bookkeeper.svg
new file mode 100644
index 00000000000..ab644d3a46a
--- /dev/null
+++ b/src/components/pages/HomePage/HowPulsarWorks/img/bookkeeper.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg";>
+<circle cx="16" cy="16" r="15.5" stroke="black"/>
+<circle cx="16" cy="16" r="8.27586" fill="black"/>
+</svg>
diff --git a/src/components/pages/HomePage/HowPulsarWorks/img/brokers.svg
b/src/components/pages/HomePage/HowPulsarWorks/img/brokers.svg
new file mode 100644
index 00000000000..f6b722b910c
--- /dev/null
+++ b/src/components/pages/HomePage/HowPulsarWorks/img/brokers.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg";>
+<g style="mix-blend-mode:multiply">
+<circle cx="16" cy="16" r="16" fill="#D1ECFF"/>
+</g>
+<circle cx="16" cy="16" r="8.27586" fill="black"/>
+</svg>
diff --git
a/src/components/pages/HomePage/HowPulsarWorks/img/illustration-desktop.svg
b/src/components/pages/HomePage/HowPulsarWorks/img/illustration-desktop.svg
new file mode 100644
index 00000000000..9b4fe348a47
--- /dev/null
+++ b/src/components/pages/HomePage/HowPulsarWorks/img/illustration-desktop.svg
@@ -0,0 +1,95 @@
+<svg viewBox="0 0 1153 602" fill="none" xmlns="http://www.w3.org/2000/svg";>
+<g style="mix-blend-mode:multiply">
+<path d="M543 371L50 490" stroke="#B4F5DE" stroke-width="99.0303"
stroke-linecap="round"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M21.8112 484.007C21.5555 483.903 21.4327 483.611 21.537
483.356C21.6413 483.1 21.9332 482.977 22.1888 483.081L21.8112 484.007ZM533.615
430.682C533.79 430.469 534.106 430.439 534.318 430.615C534.531 430.79 534.561
431.106 534.385 431.318L533.615 430.682ZM137.699 530.734L137.51 531.197L137.699
530.734ZM533.878 431.932C533.701 432.144 533.386 432.173 533.174
431.997C532.961 431.821 532.932 431.505 533.108 431.293L533.878
431.932ZM532.092 432.512C532.269 432.3 532.585 432.272 532.79 [...]
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M1035.56 552.987C1035.56 554.46 1034.36 555.654 1032.89
555.654C1031.42 555.654 1030.22 554.46 1030.22 552.987C1030.22 551.515 1031.42
550.321 1032.89 550.321C1034.36 550.321 1035.56 551.515 1035.56
552.987ZM578.446 431.134C578.446 432.607 577.252 433.8 575.779 433.8C574.306
433.8 573.112 432.607 573.112 431.134C573.112 429.661 574.306 428.467 575.779
428.467C577.252 428.467 578.446 429.661 578.446 431.134ZM1006.23
558.766L1006.33 559.255L1006.23 558.766ZM1032.99 553.476L1006.33 [...]
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M543.285 371.174L1084.08 310.827" stroke="#CAE6FF"
stroke-width="99.0303" stroke-linecap="round"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M543.285 371.174L1084.08 409.858" stroke="#CAE6FF"
stroke-width="99.0303" stroke-linecap="round"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M543.285 371.174L1084.08 508.888" stroke="#CAE6FF"
stroke-width="99.0303" stroke-linecap="round"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M543 371L162.515 60.5151" stroke="#FFF1CC" stroke-width="99.0303"
stroke-linecap="round"/>
+</g>
+<rect y="440" width="99.0303" height="99.0303" rx="49.5151" fill="#19BD82"/>
+<path d="M23.7858 491.423C23.6055 492.031 23.3206 492.539 22.9314
492.947C22.5421 493.355 22.0817 493.659 21.55 493.858C21.0184 494.058 20.4345
494.158 19.7984 494.158C18.868 494.158 18.0611 493.963 17.3775 493.574C16.7035
493.184 16.1813 492.629 15.811 491.908C15.4503 491.186 15.2699 490.322 15.2699
489.316C15.2699 488.309 15.4503 487.445 15.811 486.724C16.1813 486.002 16.7035
485.447 17.3775 485.058C18.0611 484.668 18.8586 484.474 19.77 484.474C20.4155
484.474 20.9994 484.564 21.5216 4 [...]
+<rect x="284" y="546" width="18.5682" height="18.5682" rx="9.28409"
fill="black"/>
+<rect width="12.3788" height="12.3788" transform="translate(287.095 549.095)"
fill="white" fill-opacity="0.01"/>
+<path d="M289.674 555.8L291.737 557.863L296.895 552.705" stroke="white"
stroke-width="0.773674" stroke-linecap="round" stroke-linejoin="round"/>
+<g style="mix-blend-mode:multiply">
+<rect x="475.201" y="6" width="136.167" height="433.257" rx="68.0833"
fill="#D1ECFF"/>
+<path d="M526.953 69.1844C527.675 69.1844 528.292 69.3079 528.804
69.5547C529.317 69.792 529.711 70.1386 529.986 70.5943C530.271 71.0405 530.414
71.5816 530.414 72.2177C530.414 72.8538 530.271 73.3997 529.986 73.8554C529.711
74.3016 529.317 74.6481 528.804 74.895C528.292 75.1323 527.675 75.251 526.953
75.251H524.974V78.5833H523.008V69.1844H526.953ZM526.654 73.6988C527.243 73.6988
527.684 73.5753 527.978 73.3285C528.273 73.0722 528.42 72.7019 528.42
72.2177C528.42 71.724 528.273 71.3538 5 [...]
+<path d="M519.626 169.582V176.645H518.557V169.582H519.626ZM522.545
172.572V173.64H515.624V172.572H522.545ZM529.2 177.614V168.215H532.547C533.657
168.215 534.469 168.447 534.982 168.913C535.494 169.378 535.751 170.009 535.751
170.807C535.751 171.281 535.613 171.713 535.338 172.102C535.062 172.482 534.673
172.724 534.17 172.829V172.843C534.73 172.947 535.172 173.204 535.494
173.612C535.827 174.011 535.993 174.466 535.993 174.979C535.993 175.777 535.694
176.417 535.096 176.902C534.498 177.3 [...]
+<rect x="494.269" y="124.099" width="98.0303" height="98.0303" rx="49.0151"
stroke="black" stroke-dasharray="1.55 1.55"/>
+<path d="M522.822 276.644V267.245H526.168C527.279 267.245 528.091 267.478
528.603 267.943C529.116 268.408 529.372 269.039 529.372 269.837C529.372 270.311
529.235 270.743 528.959 271.133C528.684 271.512 528.295 271.754 527.792
271.859V271.873C528.352 271.978 528.793 272.234 529.116 272.642C529.448 273.041
529.615 273.497 529.615 274.009C529.615 274.807 529.315 275.448 528.717
275.932C528.119 276.406 527.265 276.644 526.154 276.644H522.822ZM523.961
275.576H526.425C527.099 275.576 527.597 2 [...]
+<rect x="494.269" y="223.129" width="98.0303" height="98.0303" rx="49.0151"
stroke="black"/>
+<rect x="493.769" y="321.659" width="99.0303" height="99.0303" rx="49.5151"
fill="black"/>
+</g>
+<path d="M1044.31 216.297V206.898H1048.42C1049.56 206.898 1050.4 207.121
1050.94 207.568C1051.49 208.014 1051.76 208.645 1051.76 209.462C1051.76 209.965
1051.6 210.411 1051.3 210.8C1051 211.19 1050.55 211.436 1049.96
211.541V211.555C1050.62 211.65 1051.12 211.897 1051.47 212.296C1051.82 212.694
1052 213.169 1052 213.72C1052 214.527 1051.7 215.158 1051.12 215.614C1050.54
216.069 1049.69 216.297 1048.57 216.297H1044.31ZM1046.22 214.816H1048.4C1048.93
214.816 1049.32 214.707 1049.58 214.489 [...]
+<rect x="1034.57" y="261.312" width="99.0303" height="99.0303" rx="49.5151"
fill="black"/>
+<path d="M1062.62 315.327V305.929H1065.97C1067.08 305.929 1067.89 306.161
1068.4 306.626C1068.92 307.092 1069.17 307.723 1069.17 308.52C1069.17 308.995
1069.03 309.427 1068.76 309.816C1068.48 310.196 1068.09 310.438 1067.59
310.543V310.557C1068.15 310.661 1068.59 310.918 1068.92 311.326C1069.25 311.724
1069.41 312.18 1069.41 312.693C1069.41 313.49 1069.12 314.131 1068.52
314.615C1067.92 315.09 1067.06 315.327 1065.95 315.327H1062.62ZM1063.76
314.259H1066.22C1066.9 314.259 1067.4 314.122 [...]
+<rect x="1034.57" y="360.343" width="99.0303" height="99.0303" rx="49.5151"
fill="black"/>
+<path d="M1062.62 414.358V404.959H1065.97C1067.08 404.959 1067.89 405.191
1068.4 405.657C1068.92 406.122 1069.17 406.753 1069.17 407.551C1069.17 408.025
1069.03 408.457 1068.76 408.847C1068.48 409.226 1068.09 409.468 1067.59
409.573V409.587C1068.15 409.691 1068.59 409.948 1068.92 410.356C1069.25 410.755
1069.41 411.21 1069.41 411.723C1069.41 412.521 1069.12 413.161 1068.52
413.646C1067.92 414.12 1067.06 414.358 1065.95 414.358H1062.62ZM1063.76
413.29H1066.22C1066.9 413.29 1067.4 413.152 [...]
+<rect x="1034.57" y="459.373" width="99.0303" height="99.0303" rx="49.5151"
fill="black"/>
+<path d="M1062.62 513.388V503.989H1065.97C1067.08 503.989 1067.89 504.222
1068.4 504.687C1068.92 505.152 1069.17 505.783 1069.17 506.581C1069.17 507.056
1069.03 507.488 1068.76 507.877C1068.48 508.257 1068.09 508.499 1067.59
508.603V508.617C1068.15 508.722 1068.59 508.978 1068.92 509.386C1069.25 509.785
1069.41 510.241 1069.41 510.753C1069.41 511.551 1069.12 512.192 1068.52
512.676C1067.92 513.151 1067.06 513.388 1065.95 513.388H1062.62ZM1063.76
512.32H1066.22C1066.9 512.32 1067.4 512.18 [...]
+<rect x="1016.5" y="144.214" width="135.167" height="432.257" rx="67.5833"
stroke="black"/>
+<rect x="948.827" y="585.089" width="98.0303" height="34.589" rx="17.2945"
transform="rotate(179.978 948.827 585.089)" fill="white"/>
+<path d="M867.434 571.417C867.352 571.417 867.282 571.392 867.224
571.343C867.174 571.285 867.149 571.215 867.149 571.132L867.148 568.557L864.611
568.558C864.528 568.558 864.458 568.534 864.4 568.484C864.351 568.426 864.326
568.356 864.326 568.274L864.326 567.878C864.326 567.795 864.35 567.729 864.4
567.68C864.458 567.622 864.528 567.593 864.61 567.593L867.148 567.592L867.147
565.091C867.147 565.009 867.172 564.943 867.221 564.893C867.279 564.835 867.349
564.807 867.432 564.807L867.865 5 [...]
+<rect x="948.827" y="585.089" width="98.0303" height="34.589" rx="17.2945"
transform="rotate(179.978 948.827 585.089)" stroke="black"/>
+<rect x="944.185" y="585.091" width="98.0303" height="34.589" rx="17.2945"
transform="rotate(179.978 944.185 585.091)" fill="white"/>
+<path d="M862.792 571.419C862.71 571.419 862.639 571.394 862.582
571.344C862.532 571.287 862.507 571.216 862.507 571.134L862.506 568.559L859.969
568.56C859.886 568.56 859.816 568.535 859.758 568.486C859.709 568.428 859.684
568.358 859.684 568.275L859.684 567.879C859.684 567.797 859.708 567.731 859.758
567.681C859.816 567.623 859.886 567.595 859.968 567.595L862.506 567.594L862.505
565.093C862.505 565.011 862.53 564.944 862.579 564.895C862.637 564.837 862.707
564.808 862.79 564.808L863.223 [...]
+<rect x="944.185" y="585.091" width="98.0303" height="34.589" rx="17.2945"
transform="rotate(179.978 944.185 585.091)" stroke="black"/>
+<rect x="939.543" y="585.093" width="98.0303" height="34.589" rx="17.2945"
transform="rotate(179.978 939.543 585.093)" fill="white"/>
+<path d="M856.846 571.674L856.646 571.261L863.211 571.259L863.212
572.327L855.821 572.33L855.82 571.319L861.998 563.584L862.197 563.997L855.96
563.999L855.96 562.931L863.023 562.928L863.023 563.939L856.846 571.674ZM867.63
565.063C868.304 565.062 868.898 565.209 869.41 565.503C869.933 565.797 870.341
566.225 870.636 566.785C870.93 567.335 871.078 567.995 871.078 568.764C871.078
569.533 870.931 570.197 870.637 570.758C870.343 571.308 869.935 571.731 869.413
572.026C868.9 572.32 868.307 572 [...]
+<rect x="939.543" y="585.093" width="98.0303" height="34.589" rx="17.2945"
transform="rotate(179.978 939.543 585.093)" stroke="black"/>
+<path d="M293.443 570.645V579H292.481V573.747L292.595 571.544H292.582L289.836
579H288.975L286.228 571.544H286.215L286.329
573.747V579H285.367V570.645H286.924L288.76 575.721L289.392
577.81H289.418L290.063 575.734L291.886 570.645H293.443ZM298.275 579.127C297.676
579.127 297.14 578.996 296.667 578.734C296.203 578.473 295.84 578.097 295.579
577.608C295.317 577.11 295.186 576.519 295.186 575.835C295.186 575.152 295.317
574.565 295.579 574.076C295.84 573.578 296.199 573.198 296.655 572.937C297 [...]
+<rect x="494.016" y="321.669" width="99.0303" height="99.0303" rx="49.5151"
fill="black"/>
+<path d="M523.069 375.684V366.285H526.416C527.527 366.285 528.338 366.518
528.851 366.983C529.364 367.448 529.62 368.08 529.62 368.877C529.62 369.352
529.482 369.784 529.207 370.173C528.932 370.553 528.542 370.795 528.039
370.899V370.913C528.599 371.018 529.041 371.274 529.364 371.682C529.696 372.081
529.862 372.537 529.862 373.05C529.862 373.847 529.563 374.488 528.965
374.972C528.367 375.447 527.512 375.684 526.402 375.684H523.069ZM524.209
374.616H526.672C527.346 374.616 527.845 374.47 [...]
+<g style="mix-blend-mode:multiply">
+<path d="M409.336 271.065L419.356 270.059L418.35 260.04" stroke="black"/>
+</g>
+<path d="M419.356 270.06L198.507 89.5127" stroke="black"/>
+<g style="mix-blend-mode:multiply">
+<path d="M909.283 337.426L915.577 329.566L907.716 323.272" stroke="black"/>
+</g>
+<path d="M915.577 329.566L592.015 365.39" stroke="black"/>
+<g style="mix-blend-mode:multiply">
+<path d="M910.181 404.263L917.786 397.664L911.186 390.058" stroke="black"/>
+</g>
+<path d="M917.786 397.664L592.507 374.638" stroke="black"/>
+<g style="mix-blend-mode:multiply">
+<path d="M913.437 472.896L922.098 467.758L916.96 459.098" stroke="black"/>
+</g>
+<path d="M922.098 467.758L589.762 382.899" stroke="black"/>
+<g style="mix-blend-mode:multiply">
+<path d="M167.084 453.996L161.842 462.593L170.44 467.836" stroke="black"/>
+</g>
+<path d="M161.842 462.594L498.71 380.92" stroke="black"/>
+<g clip-path="url(#clip0_1302_2672)">
+<rect x="275.675" y="129.659" width="131.317" height="36.823" rx="18.4115"
transform="rotate(39.9197 275.675 129.659)" fill="#FFF1CC"/>
+<path d="M284.86 154.963L278.828 162.171L277.998 161.477L281.791
156.944L283.479 155.126L283.468 155.117L275.715 159.567L274.973 158.945L277.985
150.529L277.974 150.52L276.483 152.503L272.69 157.035L271.86 156.341L277.891
149.132L279.235 150.256L277.154 155.961L276.192 158.22L276.214 158.239L278.27
156.913L283.516 153.839L284.86 154.963ZM282.906 165.769C282.389 165.336 282.021
164.836 281.802 164.269C281.59 163.709 281.548 163.123 281.676 162.511C281.81
161.893 282.123 161.289 282.617 16 [...]
+</g>
+<rect x="275.737" y="130.363" width="130.317" height="35.823" rx="17.9115"
transform="rotate(39.9197 275.737 130.363)" stroke="black"/>
+<rect x="434.009" y="415.175" width="145.351" height="34.589" rx="17.2945"
transform="rotate(166.052 434.009 415.175)" fill="#B4F5DE"/>
+<path d="M315.846 421.654L318.112 430.776L317.062 431.037L315.637
425.301L315.164 422.865L315.15 422.869L314.173 431.754L313.233 431.988L308.212
424.592L308.198 424.595L308.92 426.969L310.345 432.705L309.294 432.966L307.029
423.844L308.729 423.422L312.109 428.466L313.367 430.575L313.394 430.568L313.536
428.127L314.146 422.076L315.846 421.654ZM323.422 429.604C322.768 429.766
322.147 429.769 321.56 429.611C320.982 429.452 320.484 429.14 320.066
428.676C319.645 428.204 319.342 427.594 319.1 [...]
+<rect x="434.009" y="415.175" width="145.351" height="34.589" rx="17.2945"
transform="rotate(166.052 434.009 415.175)" stroke="black"/>
+<g style="mix-blend-mode:multiply">
+<path d="M535.583 440.644L534.175 430.673L524.204 432.081" stroke="black"/>
+</g>
+<rect x="113" y="11" width="99.0303" height="99.0303" rx="49.5151"
fill="#FFCD4B"/>
+<path d="M136.685 55.6163C137.406 55.6163 138.023 55.7397 138.536
55.9865C139.048 56.2239 139.442 56.5704 139.718 57.0261C140.003 57.4723 140.145
58.0135 140.145 58.6495C140.145 59.2856 140.003 59.8315 139.718 60.2872C139.442
60.7334 139.048 61.08 138.536 61.3268C138.023 61.5641 137.406 61.6828 136.685
61.6828H134.705V65.0151H132.74V55.6163H136.685ZM136.385 60.1306C136.974 60.1306
137.416 60.0072 137.71 59.7603C138.004 59.504 138.151 59.1337 138.151
58.6495C138.151 58.1559 138.004 57.785 [...]
+<defs>
+<clipPath id="clip0_1302_2672">
+<rect x="275.675" y="129.659" width="131.317" height="36.823" rx="18.4115"
transform="rotate(39.9197 275.675 129.659)" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git
a/src/components/pages/HomePage/HowPulsarWorks/img/illustration-mobile.svg
b/src/components/pages/HomePage/HowPulsarWorks/img/illustration-mobile.svg
new file mode 100644
index 00000000000..b00493d49e5
--- /dev/null
+++ b/src/components/pages/HomePage/HowPulsarWorks/img/illustration-mobile.svg
@@ -0,0 +1,105 @@
+<svg viewBox="0 0 390 584" fill="none" xmlns="http://www.w3.org/2000/svg";>
+<g style="mix-blend-mode:multiply">
+<path d="M149.694 285.964L58.7446 32.8869" stroke="#FFF1CC"
stroke-width="63.2694" stroke-linecap="round"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M33.5353 509.085C32.0625 509.085 30.8686 507.892 30.8686
506.419C30.8686 504.946 32.0625 503.752 33.5353 503.752C35.008 503.752 36.2019
504.946 36.2019 506.419C36.2019 507.892 35.008 509.085 33.5353 509.085ZM111.386
309.392C109.913 309.392 108.72 308.198 108.72 306.725C108.72 305.252 109.913
304.058 111.386 304.058C112.859 304.058 114.053 305.252 114.053 306.725C114.053
308.198 112.859 309.392 111.386 309.392ZM22.7741 484.642L22.3258
484.863L22.7741 484.642ZM33.087 506.64L22.325 [...]
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M150 286L196 540" stroke="#CAE6FF" stroke-width="63.2694"
stroke-linecap="round"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M150 286L129 540" stroke="#CAE6FF" stroke-width="63.2694"
stroke-linecap="round"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M149.695 285.964L61.7109 539.536" stroke="#CAE6FF"
stroke-width="63.2694" stroke-linecap="round"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M149 286L325 82" stroke="#B4F5DE" stroke-width="63.2694"
stroke-linecap="round"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<rect x="383" y="242.466" width="86.9954" height="276.803" rx="43.4977"
transform="rotate(90 383 242.466)" fill="#D1ECFF"/>
+<path d="M326.358 281.544C326.966 281.544 327.486 281.648 327.918
281.856C328.35 282.056 328.682 282.348 328.914 282.732C329.154 283.108 329.274
283.564 329.274 284.1C329.274 284.636 329.154 285.096 328.914 285.48C328.682
285.856 328.35 286.148 327.918 286.356C327.486 286.556 326.966 286.656 326.358
286.656H324.69V289.464H323.034V281.544H326.358ZM326.106 285.348C326.602 285.348
326.974 285.244 327.222 285.036C327.47 284.82 327.594 284.508 327.594
284.1C327.594 283.684 327.47 283.372 327. [...]
+<path d="M256.813 282.696V288.648H255.913V282.696H256.813ZM259.273
285.216V286.116H253.441V285.216H259.273ZM264.641
289.464V281.544H267.461C268.397 281.544 269.081 281.74 269.513 282.132C269.945
282.524 270.161 283.056 270.161 283.728C270.161 284.128 270.045 284.492 269.813
284.82C269.581 285.14 269.253 285.344 268.829 285.432V285.444C269.301 285.532
269.673 285.748 269.945 286.092C270.225 286.428 270.365 286.812 270.365
287.244C270.365 287.916 270.113 288.456 269.609 288.864C269.105 289 [...]
+<rect x="245.098" y="254.829" width="62.2694" height="62.2694" rx="31.1347"
stroke="black" stroke-dasharray="0.99 0.99"/>
+<path d="M195.76 289.464V281.544H198.58C199.516 281.544 200.2 281.74 200.632
282.132C201.064 282.524 201.28 283.056 201.28 283.728C201.28 284.128 201.164
284.492 200.932 284.82C200.7 285.14 200.372 285.344 199.948
285.432V285.444C200.42 285.532 200.792 285.748 201.064 286.092C201.344 286.428
201.484 286.812 201.484 287.244C201.484 287.916 201.232 288.456 200.728
288.864C200.224 289.264 199.504 289.464 198.568 289.464H195.76ZM196.72
288.564H198.796C199.364 288.564 199.784 288.448 200.056 [...]
+<rect x="181.829" y="254.829" width="62.2694" height="62.2694" rx="31.1347"
stroke="black"/>
+<rect x="181.329" y="254.329" width="63.2694" height="63.2694" rx="31.6347"
transform="rotate(90 181.329 254.329)" fill="black"/>
+</g>
+<path d="M239.667 542.998V535.078H243.135C244.095 535.078 244.803 535.266
245.259 535.642C245.715 536.018 245.943 536.55 245.943 537.238C245.943 537.662
245.815 538.038 245.559 538.366C245.303 538.694 244.927 538.902 244.431
538.99V539.002C244.983 539.082 245.407 539.29 245.703 539.626C245.999 539.962
246.147 540.362 246.147 540.826C246.147 541.506 245.899 542.038 245.403
542.422C244.915 542.806 244.199 542.998 243.255 542.998H239.667ZM241.275
541.75H243.111C243.559 541.75 243.891 541.65 [...]
+<rect x="164.539" y="507.863" width="63.2694" height="63.2694" rx="31.6347"
fill="black"/>
+<path d="M178.469 542.998V535.078H181.289C182.225 535.078 182.909 535.274
183.341 535.666C183.773 536.058 183.989 536.59 183.989 537.262C183.989 537.662
183.873 538.026 183.641 538.354C183.409 538.674 183.081 538.878 182.657
538.966V538.978C183.129 539.066 183.501 539.282 183.773 539.626C184.053 539.962
184.193 540.346 184.193 540.778C184.193 541.45 183.941 541.99 183.437
542.398C182.933 542.798 182.213 542.998 181.277 542.998H178.469ZM179.429
542.098H181.505C182.073 542.098 182.493 541. [...]
+<rect x="97.2694" y="507.863" width="63.2694" height="63.2694" rx="31.6347"
fill="black"/>
+<path d="M111.2 542.998V535.078H114.02C114.956 535.078 115.64 535.274 116.072
535.666C116.504 536.058 116.72 536.59 116.72 537.262C116.72 537.662 116.604
538.026 116.372 538.354C116.14 538.674 115.812 538.878 115.388
538.966V538.978C115.86 539.066 116.232 539.282 116.504 539.626C116.784 539.962
116.924 540.346 116.924 540.778C116.924 541.45 116.672 541.99 116.168
542.398C115.664 542.798 114.944 542.998 114.008 542.998H111.2ZM112.16
542.098H114.236C114.804 542.098 115.224 541.982 115.496 [...]
+<rect x="30" y="507.863" width="63.2694" height="63.2694" rx="31.6347"
fill="black"/>
+<path d="M43.9306 542.998V535.078H46.7506C47.6866 535.078 48.3706 535.274
48.8026 535.666C49.2346 536.058 49.4506 536.59 49.4506 537.262C49.4506 537.662
49.3346 538.026 49.1026 538.354C48.8706 538.674 48.5426 538.878 48.1186
538.966V538.978C48.5906 539.066 48.9626 539.282 49.2346 539.626C49.5146 539.962
49.6546 540.346 49.6546 540.778C49.6546 541.45 49.4026 541.99 48.8986
542.398C48.3946 542.798 47.6746 542.998 46.7386 542.998H43.9306ZM44.8906
542.098H46.9666C47.5346 542.098 47.9546 541. [...]
+<rect x="316.5" y="496.5" width="86" height="298" rx="43" transform="rotate(90
316.5 496.5)" stroke="black"/>
+<rect x="81.7009" y="391.93" width="63" height="22" rx="11"
transform="rotate(180 81.7009 391.93)" fill="white"/>
+<path d="M29.5182 383.169C29.4654 383.169 29.4206 383.153 29.3837
383.122C29.3521 383.085 29.3363 383.04 29.3363 382.987L29.3363
381.342H27.715C27.6623 381.342 27.6175 381.326 27.5805 381.295C27.5489 381.258
27.5331 381.213 27.5331 381.16V380.907C27.5331 380.855 27.5489 380.812 27.5805
380.781C27.6175 380.744 27.6623 380.725 27.715 380.725H29.3363L29.3363
379.128C29.3363 379.075 29.3521 379.033 29.3837 379.001C29.4206 378.964 29.4654
378.946 29.5182 378.946H29.795C29.8477 378.946 29.8899 [...]
+<rect x="81.7009" y="391.93" width="63" height="22" rx="11"
transform="rotate(180 81.7009 391.93)" stroke="black"/>
+<rect x="78.0045" y="391.93" width="63" height="22" rx="11"
transform="rotate(180 78.0045 391.93)" fill="white"/>
+<path d="M25.8218 383.169C25.769 383.169 25.7242 383.153 25.6873
383.122C25.6557 383.085 25.6399 383.04 25.6399 382.987L25.6399
381.342H24.0186C23.9659 381.342 23.921 381.326 23.8841 381.295C23.8525 381.258
23.8367 381.213 23.8367 381.16V380.907C23.8367 380.855 23.8525 380.812 23.8841
380.781C23.921 380.744 23.9659 380.725 24.0186 380.725H25.6399L25.6399
379.128C25.6399 379.075 25.6557 379.033 25.6873 379.001C25.7242 378.964 25.769
378.946 25.8218 378.946H26.0986C26.1513 378.946 26.1935 [...]
+<rect x="78.0045" y="391.93" width="63" height="22" rx="11"
transform="rotate(180 78.0045 391.93)" stroke="black"/>
+<rect x="74.3081" y="391.93" width="68" height="22" rx="11"
transform="rotate(180 74.3081 391.93)" fill="white"/>
+<path d="M12.3441 383.878L12.1761 383.53L17.7081 383.53L17.7081 384.43L11.4801
384.43L11.4801 383.578L16.6881 377.062L16.8561 377.41L11.6001 377.41L11.6001
376.51L17.5521 376.51L17.5521 377.362L12.3441 383.878ZM21.3137 378.31C21.8817
378.31 22.3817 378.434 22.8137 378.682C23.2537 378.93 23.5977 379.29 23.8457
379.762C24.0937 380.226 24.2177 380.782 24.2177 381.43C24.2177 382.078 24.0937
382.638 23.8457 383.11C23.5977 383.574 23.2537 383.93 22.8137 384.178C22.3817
384.426 21.8817 384.55 2 [...]
+<rect x="74.3081" y="391.93" width="68" height="22" rx="11"
transform="rotate(180 74.3081 391.93)" stroke="black"/>
+<path d="M192.272 58.08V66H191.36V61.02L191.468 58.932H191.456L188.852
66H188.036L185.432 58.932H185.42L185.528 61.02V66H184.616V58.08H186.092L187.832
62.892L188.432 64.872H188.456L189.068 62.904L190.796 58.08H192.272ZM196.733
66.12C196.165 66.12 195.657 65.996 195.209 65.748C194.769 65.5 194.425 65.144
194.177 64.68C193.929 64.208 193.805 63.648 193.805 63C193.805 62.352 193.929
61.796 194.177 61.332C194.425 60.86 194.765 60.5 195.197 60.252C195.629 60.004
196.121 59.88 196.673 59.88C19 [...]
+<rect x="118.054" y="254.487" width="63.2694" height="63.2694" rx="31.6347"
fill="black"/>
+<path d="M132.484 289.622V281.702H135.304C136.24 281.702 136.924 281.898
137.356 282.29C137.788 282.682 138.004 283.214 138.004 283.886C138.004 284.286
137.888 284.65 137.656 284.978C137.424 285.298 137.096 285.502 136.672
285.59V285.602C137.144 285.69 137.516 285.906 137.788 286.25C138.068 286.586
138.208 286.97 138.208 287.402C138.208 288.074 137.956 288.614 137.452
289.022C136.948 289.422 136.228 289.622 135.292 289.622H132.484ZM133.444
288.722H135.52C136.088 288.722 136.508 288.606 1 [...]
+<g style="mix-blend-mode:multiply">
+<path d="M287.469 132.983L286.99 126.568L280.575 127.046" stroke="black"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M286.99 126.568L165.581 267.565" stroke="black"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M182.136 479.522L187.437 483.168L191.083 477.867" stroke="black"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M187.437 483.168L156.473 315.828" stroke="black"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M131.488 482.143L135.702 487.005L140.563 482.791" stroke="black"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M135.702 487.005L147.835 317.257" stroke="black"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M80.9865 470.089L83.7915 475.879L89.5812 473.074" stroke="black"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M83.7914 475.879L139.621 315.117" stroke="black"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M128.974 241.693L134.79 244.443L137.541 238.627" stroke="black"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M134.79 244.443L68.8457 60.1548" stroke="black"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M147 234.792L152 239L156.064 234" stroke="black"/>
+</g>
+<g clip-path="url(#clip0_1288_1629)">
+<rect x="192" y="219.187" width="100.175" height="22.2401" rx="11.1201"
transform="rotate(-48.6387 192 219.187)" fill="#B4F5DE"/>
+<path d="M208.615 211.112L214.559 216.346L213.956 217.03L210.219
213.74L208.723 212.279L208.715 212.288L212.299 218.913L211.76 219.525L204.734
216.809L204.726 216.818L206.365 218.117L210.103 221.408L209.5 222.092L203.556
216.859L204.531 215.751L209.292 217.625L211.175 218.483L211.191 218.465L210.118
216.705L207.639 212.22L208.615 211.112ZM217.438 213.258C217.063 213.684 216.634
213.983 216.152 214.156C215.675 214.322 215.18 214.345 214.668 214.224C214.15
214.099 213.648 213.822 213.161 2 [...]
+</g>
+<rect x="192.706" y="219.142" width="99.1746" height="21.2401" rx="10.6201"
transform="rotate(-48.6387 192.706 219.142)" stroke="black"/>
+<rect x="107.831" y="201.595" width="103.175" height="21.7374" rx="10.8687"
transform="rotate(-109.858 107.831 201.595)" fill="#FFF1CC"/>
+<path d="M92.7815 114.918L85.3325 117.608L85.0227 116.751L89.7065
115.059L91.7071 114.451L91.703 114.44L84.1707 114.392L83.8935 113.624L89.6567
108.774L89.6526 108.763L87.7254 109.574L83.0416 111.265L82.7318 110.408L90.1808
107.717L90.6822 109.106L86.7474 112.377L85.089 113.614L85.0971 113.636L87.156
113.543L92.2801 113.53L92.7815 114.918ZM86.7348 121.844C86.5418 121.31 86.4859
120.79 86.567 120.285C86.6507 119.787 86.8687 119.342 87.2209 118.951C87.5806
118.558 88.0652 118.251 88.6746 1 [...]
+<rect x="107.831" y="201.595" width="103.175" height="21.7374" rx="10.8687"
transform="rotate(-109.858 107.831 201.595)" stroke="black"/>
+<g style="mix-blend-mode:multiply">
+<path d="M300.683 78.2461C300.959 78.2369 301.19 78.4532 301.199
78.7292C301.208 79.0052 300.992 79.2364 300.716 79.2456L300.683
78.2461ZM151.183 223.258L150.684 223.284L151.183 223.258ZM283.364
79.3228L283.381 79.8225L283.364 79.3228ZM151.45 238.042C151.435 237.766 151.647
237.531 151.923 237.517C152.199 237.503 152.434 237.714 152.448 237.99L151.45
238.042ZM152.346 236.023C152.361 236.298 152.149 236.533 151.873
236.548C151.597 236.562 151.362 236.35 151.348 236.074L152.346 236.023ZM15 [...]
+</g>
+<rect x="293" y="50" width="63.2694" height="63.2694" rx="31.6347"
fill="#19BD82"/>
+<path d="M303.315 83.1067C303.147 83.5547 302.907 83.9427 302.595
84.2707C302.283 84.5907 301.915 84.8347 301.491 85.0027C301.075 85.1707 300.619
85.2547 300.123 85.2547C299.371 85.2547 298.719 85.0907 298.167 84.7627C297.623
84.4267 297.199 83.9547 296.895 83.3467C296.599 82.7387 296.451 82.0147 296.451
81.1747C296.451 80.3347 296.599 79.6107 296.895 79.0027C297.199 78.3947 297.623
77.9267 298.167 77.5987C298.719 77.2627 299.363 77.0947 300.099 77.0947C300.611
77.0947 301.067 77.1667 30 [...]
+<rect x="219" y="88" width="11.863" height="11.863" rx="5.9315" fill="black"/>
+<rect width="7.90867" height="7.90867" transform="translate(220.977 89.9772)"
fill="white" fill-opacity="0.01"/>
+<path d="M222.625 94.2611L223.943 95.5792L227.238 92.2839" stroke="white"
stroke-width="0.494292" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="27.1572" y="1" width="63.2694" height="63.2694" rx="31.6347"
fill="#FFCD4B"/>
+<path d="M37.3839 28.2147C37.9199 28.2147 38.3839 28.3147 38.7759
28.5147C39.1759 28.7067 39.4879 28.9827 39.7119 29.3427C39.9359 29.7027 40.0479
30.1307 40.0479 30.6267C40.0479 31.1227 39.9359 31.5507 39.7119 31.9107C39.4879
32.2707 39.1759 32.5507 38.7759 32.7507C38.3839 32.9427 37.9199 33.0387 37.3839
33.0387H35.5479V36.1347H34.5879V28.2147H37.3839ZM37.2399 32.1387C37.8639
32.1387 38.3199 32.0107 38.6079 31.7547C38.8959 31.4907 39.0399 31.1147 39.0399
30.6267C39.0399 30.1307 38.8959 2 [...]
+<defs>
+<clipPath id="clip0_1288_1629">
+<rect x="192" y="219.187" width="100.175" height="22.2401" rx="11.1201"
transform="rotate(-48.6387 192 219.187)" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git
a/src/components/pages/HomePage/HowPulsarWorks/img/producer-and-consumer.svg
b/src/components/pages/HomePage/HowPulsarWorks/img/producer-and-consumer.svg
new file mode 100644
index 00000000000..1e4a748ac3d
--- /dev/null
+++ b/src/components/pages/HomePage/HowPulsarWorks/img/producer-and-consumer.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 49 32" fill="none" xmlns="http://www.w3.org/2000/svg";>
+<circle cx="16" cy="16" r="16" fill="#FFCD4B"/>
+<circle cx="32.5518" cy="16" r="16" fill="#19BD82"/>
+</svg>
diff --git a/src/components/pages/HomePage/HowPulsarWorks/img/zookeeper.svg
b/src/components/pages/HomePage/HowPulsarWorks/img/zookeeper.svg
new file mode 100644
index 00000000000..fdbacae211b
--- /dev/null
+++ b/src/components/pages/HomePage/HowPulsarWorks/img/zookeeper.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 41 32" fill="none" xmlns="http://www.w3.org/2000/svg";>
+<circle cx="24.8276" cy="16" r="15.5" fill="white" stroke="black"/>
+<circle cx="20.4138" cy="16" r="15.5" fill="white" stroke="black"/>
+<circle cx="16" cy="16" r="15.5" fill="white" stroke="black"/>
+</svg>
diff --git a/src/components/pages/HomePage/Users/Users.module.css
b/src/components/pages/HomePage/Users/Users.module.css
index ac7e646effe..22ced9d2409 100644
--- a/src/components/pages/HomePage/Users/Users.module.css
+++ b/src/components/pages/HomePage/Users/Users.module.css
@@ -1,5 +1,5 @@
.block {
- background: #FFFFFF;
+ background: #F6F6F6;
width: 100%;
overflow: hidden;
display: flex;
