Design changes

This commit is contained in:
sairaj mote 2023-06-26 11:51:25 +05:30
parent 2f4c2c57a9
commit 07817c0e89
4 changed files with 709 additions and 190 deletions

View File

@ -18,7 +18,7 @@ body {
body { body {
--accent-color: #3d5afe; --accent-color: #3d5afe;
--secondary-color: #ffac2e; --secondary-color: #ffac2e;
--text-color: 20, 20, 20; --text-color: 36, 36, 36;
--foreground-color: 252, 253, 255; --foreground-color: 252, 253, 255;
--background-color: 241, 243, 248; --background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
@ -218,14 +218,14 @@ article > * {
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
background-color: rgba(var(--text-color), 0.5); background-color: rgba(var(--foreground-color), 0.5);
z-index: 10; z-index: 10;
-webkit-backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem);
backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);
padding: max(1rem, 1.5vw) var(--inline-padding); padding: max(1rem, 1.5vw) var(--inline-padding);
} }
#main_header a { #main_header a {
color: rgba(var(--foreground-color), 0.9); color: rgba(var(--text-color), 0.9);
text-decoration: none; text-decoration: none;
} }
#main_header ul { #main_header ul {
@ -242,7 +242,7 @@ article > * {
display: block; display: block;
width: 0; width: 0;
height: 0.15rem; height: 0.15rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--accent-color), 1);
transition: width 0.3s; transition: width 0.3s;
margin: auto; margin: auto;
margin-top: 0.1rem; margin-top: 0.1rem;
@ -256,36 +256,65 @@ article > * {
} }
#above_fold { #above_fold {
background: linear-gradient(rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0.8156862745)), url("../assets/representational/shubham-s-web3-pXdzCRJNum0-unsplash.jpg") no-repeat center center; padding-top: 5rem;
background-size: cover;
color: rgba(var(--foreground-color), 1);
padding-top: 40vh;
} }
#above_fold p { #above_fold #title_text {
color: rgba(var(--foreground-color), 0.9); position: relative;
overflow: hidden;
padding-bottom: 5rem;
text-align: center;
margin-bottom: 3rem;
}
#above_fold #title_text:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(45deg, rgba(255, 152, 152, 0.3137254902) 25%, transparent 25%, transparent 75%, rgba(255, 152, 152, 0.3137254902) 75%), linear-gradient(45deg, rgba(255, 152, 152, 0.3137254902) 25%, transparent 25%, transparent 75%, rgba(255, 152, 152, 0.3137254902) 75%);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
z-index: -1;
}
#above_fold #title_text:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.9725490196) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.9725490196) 75%), linear-gradient(45deg, rgba(255, 255, 255, 0.9725490196) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.9725490196) 75%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
z-index: -1;
} }
#above_fold h2 { #above_fold h2 {
margin-bottom: 3rem; position: relative;
margin: auto;
margin-top: 5rem;
} }
#above_fold ol { #above_fold ol {
display: block; display: block;
-moz-columns: 2 24rem;
columns: 2 24rem;
-moz-column-gap: 2rem;
column-gap: 2rem;
padding-left: 0; padding-left: 0;
} }
#above_fold ol li { #above_fold ol li {
page-break-inside: avoid; page-break-inside: avoid;
-moz-column-break-inside: avoid; -moz-column-break-inside: avoid;
break-inside: avoid; break-inside: avoid;
margin-bottom: 3rem; margin-bottom: 5rem;
color: rgba(var(--foreground-color), 1); border-bottom: solid thin rgba(var(--text-color), 1);
padding-bottom: 5rem;
justify-content: center;
justify-self: center;
text-align: center;
}
#above_fold ol p {
text-align: justify;
} }
#hero_illustration { #hero_illustration {
margin: auto; margin: auto;
margin-top: 4rem;
width: min(100%, 26rem); width: min(100%, 26rem);
} }
@ -332,9 +361,47 @@ section:nth-of-type(2) {
background: linear-gradient(to left, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0.8156862745)), url("../assets/representational/esau-gonzalez-bQefbdSC4ko-unsplash.jpg") no-repeat center center fixed; background: linear-gradient(to left, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0.8156862745)), url("../assets/representational/esau-gonzalez-bQefbdSC4ko-unsplash.jpg") no-repeat center center fixed;
background-size: cover; background-size: cover;
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
justify-content: flex-end;
text-align: right;
}
#el_salvador_section h2,
#el_salvador_section h4 {
text-align: right;
justify-content: flex-end;
} }
#el_salvador_section p { #el_salvador_section p {
color: rgba(var(--foreground-color), 0.9); color: rgba(var(--foreground-color), 0.9);
text-align: right;
}
#el_salvador_section .milestone {
display: grid;
max-width: 42rem;
width: auto;
gap: 1rem 2rem;
grid-template-areas: "title label" "description label";
align-items: center;
padding-right: 0;
justify-content: flex-end;
}
#el_salvador_section .milestone:not(:last-child) {
padding-bottom: 3rem;
}
#el_salvador_section .milestone__label {
align-items: flex-start;
justify-content: center;
grid-area: label;
justify-self: flex-end;
}
#el_salvador_section .milestone__label::before {
width: 0.1rem;
height: 100%;
}
#el_salvador_section .milestone__title {
grid-area: title;
margin-top: -0.1em;
}
#el_salvador_section .milestone__description {
grid-area: description;
} }
#projectb_milestones_section { #projectb_milestones_section {
@ -591,11 +658,40 @@ section:nth-of-type(2) {
#project_team__components { #project_team__components {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 3rem 1.5rem;
} }
#project_team__components > * { #project_team__components > * {
align-content: flex-start; align-content: flex-start;
flex: 1 1 24rem; }
#project_team__components .milestone {
display: grid;
max-width: 42rem;
width: auto;
gap: 1rem 2rem;
grid-template-areas: "label title" "label description";
align-items: center;
padding-right: 0;
}
#project_team__components .milestone:not(:last-child) {
padding-bottom: 3rem;
}
#project_team__components .milestone__label {
align-items: flex-start;
justify-content: center;
grid-area: label;
background-color: rgba(var(--text-color), 1);
color: rgba(var(--foreground-color), 1);
}
#project_team__components .milestone__label::before {
width: 0.1rem;
height: 100%;
background-color: rgba(var(--text-color), 0.5);
}
#project_team__components .milestone__title {
grid-area: title;
margin-top: -0.1em;
}
#project_team__components .milestone__description {
grid-area: description;
} }
#economic_framework { #economic_framework {
@ -604,13 +700,13 @@ section:nth-of-type(2) {
#economic_framework h2 { #economic_framework h2 {
margin: 3rem 0 1rem 0; margin: 3rem 0 1rem 0;
} }
#economic_framework ul { #economic_framework ul:not(.milestones) {
-moz-columns: 3 16rem; -moz-columns: 2 16rem;
columns: 3 16rem; columns: 2 16rem;
-moz-column-gap: 0.5rem; -moz-column-gap: 0.5rem;
column-gap: 0.5rem; column-gap: 0.5rem;
} }
#economic_framework ul li { #economic_framework ul:not(.milestones) li {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
align-items: flex-start; align-items: flex-start;
@ -623,6 +719,69 @@ section:nth-of-type(2) {
break-inside: avoid; break-inside: avoid;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
#economic_framework #technologies_needed {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 3rem;
}
#economic_framework #technologies_needed li {
display: flex;
flex: 1 1 20rem;
gap: 1rem;
align-items: center;
padding: max(1rem, 2vw);
border: solid thin rgba(var(--text-color), 0.2);
border-radius: 0.5rem;
font-weight: 500;
-webkit-animation: slide-up 0.5s ease var(--delay) forwards;
animation: slide-up 0.5s ease var(--delay) forwards;
opacity: 0;
background: transparent;
}
#economic_framework #technologies_needed .icon {
height: 2.5rem;
width: 2.5rem;
}
#economic_framework .milestones {
display: grid;
justify-content: flex-start;
justify-items: flex-start;
}
#economic_framework .milestones--title-only .milestone {
grid-template-areas: "label title";
}
#economic_framework .milestones--description-only .milestone {
grid-template-areas: "label description";
}
#economic_framework .milestone {
display: grid;
max-width: 42rem;
width: auto;
gap: 1rem 2rem;
align-items: center;
justify-content: flex-start;
padding-right: 0;
}
#economic_framework .milestone:not(:last-child) {
padding-bottom: 3rem;
}
#economic_framework .milestone__label {
grid-area: label;
align-items: flex-start;
justify-content: center;
background-color: rgba(var(--text-color), 1);
color: rgba(var(--foreground-color), 1);
}
#economic_framework .milestone__label::before {
width: 0.1rem;
height: 100%;
background-color: rgba(var(--text-color), 0.5);
}
#economic_framework .milestone__title {
grid-area: title;
margin-top: -0.1em;
}
#team_members { #team_members {
display: grid; display: grid;

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -16,7 +16,7 @@ body {
body { body {
--accent-color: #3d5afe; --accent-color: #3d5afe;
--secondary-color: #ffac2e; --secondary-color: #ffac2e;
--text-color: 20, 20, 20; --text-color: 36, 36, 36;
--foreground-color: 252, 253, 255; --foreground-color: 252, 253, 255;
--background-color: 241, 243, 248; --background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
@ -182,12 +182,12 @@ article {
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
background-color: rgba(var(--text-color), 0.5); background-color: rgba(var(--foreground-color), 0.5);
z-index: 10; z-index: 10;
backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);
padding: max(1rem, 1.5vw) var(--inline-padding); padding: max(1rem, 1.5vw) var(--inline-padding);
a { a {
color: rgba(var(--foreground-color), 0.9); color: rgba(var(--text-color), 0.9);
text-decoration: none; text-decoration: none;
} }
ul { ul {
@ -202,7 +202,7 @@ article {
display: block; display: block;
width: 0; width: 0;
height: 0.15rem; height: 0.15rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--accent-color), 1);
transition: width 0.3s; transition: width 0.3s;
margin: auto; margin: auto;
margin-top: 0.1rem; margin-top: 0.1rem;
@ -220,34 +220,99 @@ article {
} }
} }
#above_fold { #above_fold {
background: linear-gradient(#00000080, #000000d0), // background: linear-gradient(#00000080, #000000d0),
url("../assets/representational/shubham-s-web3-pXdzCRJNum0-unsplash.jpg") // url("../assets/representational/shubham-s-web3-pXdzCRJNum0-unsplash.jpg")
no-repeat center center; // no-repeat center center;
background-size: cover; // background-size: cover;
color: rgba(var(--foreground-color), 1); // color: rgba(var(--foreground-color), 1);
padding-top: 40vh; // p {
p { // color: rgba(var(--foreground-color), 0.9);
color: rgba(var(--foreground-color), 0.9); // }
padding-top: 5rem;
#title_text {
position: relative;
overflow: hidden;
padding-bottom: 5rem;
text-align: center;
margin-bottom: 3rem;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
45deg,
#ff989850 25%,
transparent 25%,
transparent 75%,
#ff989850 75%
),
linear-gradient(
45deg,
#ff989850 25%,
transparent 25%,
transparent 75%,
#ff989850 75%
);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
z-index: -1;
}
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
45deg,
#fffffff8 25%,
transparent 25%,
transparent 75%,
#fffffff8 75%
),
linear-gradient(
45deg,
#fffffff8 25%,
transparent 25%,
transparent 75%,
#fffffff8 75%
);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
z-index: -1;
}
} }
h2 { h2 {
margin-bottom: 3rem; position: relative;
margin: auto;
margin-top: 5rem;
// background: linear-gradient(to left, #00000010, #00000080);
} }
ol { ol {
display: block; display: block;
columns: 2 24rem;
column-gap: 2rem;
padding-left: 0; padding-left: 0;
li { li {
page-break-inside: avoid; page-break-inside: avoid;
break-inside: avoid; break-inside: avoid;
margin-bottom: 3rem; margin-bottom: 5rem;
color: rgba(var(--foreground-color), 1); // color: rgba(var(--foreground-color), 1);
border-bottom: solid thin rgba(var(--text-color), 1);
padding-bottom: 5rem;
justify-content: center;
justify-self: center;
text-align: center;
}
p {
text-align: justify;
} }
} }
} }
#hero_illustration { #hero_illustration {
margin: auto; margin: auto;
margin-top: 4rem;
width: min(100%, 26rem); width: min(100%, 26rem);
} }
section { section {
@ -292,8 +357,46 @@ section {
no-repeat center center fixed; no-repeat center center fixed;
background-size: cover; background-size: cover;
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
justify-content: flex-end;
text-align: right;
h2,
h4 {
text-align: right;
justify-content: flex-end;
}
p { p {
color: rgba(var(--foreground-color), 0.9); color: rgba(var(--foreground-color), 0.9);
text-align: right;
}
.milestone {
display: grid;
max-width: 42rem;
width: auto;
gap: 1rem 2rem;
grid-template-areas: "title label" "description label";
align-items: center;
padding-right: 0;
justify-content: flex-end;
&:not(:last-child) {
padding-bottom: 3rem;
}
&__label {
align-items: flex-start;
justify-content: center;
grid-area: label;
justify-self: flex-end;
&::before {
width: 0.1rem;
height: 100%;
}
}
&__title {
grid-area: title;
margin-top: -0.1em;
}
&__description {
grid-area: description;
}
} }
} }
#projectb_milestones_section { #projectb_milestones_section {
@ -548,10 +651,39 @@ section {
#project_team__components { #project_team__components {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 3rem 1.5rem;
& > * { & > * {
align-content: flex-start; align-content: flex-start;
flex: 1 1 24rem; }
.milestone {
display: grid;
max-width: 42rem;
width: auto;
gap: 1rem 2rem;
grid-template-areas: "label title" "label description";
align-items: center;
padding-right: 0;
&:not(:last-child) {
padding-bottom: 3rem;
}
&__label {
align-items: flex-start;
justify-content: center;
grid-area: label;
background-color: rgba(var(--text-color), 1);
color: rgba(var(--foreground-color), 1);
&::before {
width: 0.1rem;
height: 100%;
background-color: rgba(var(--text-color), 0.5);
}
}
&__title {
grid-area: title;
margin-top: -0.1em;
}
&__description {
grid-area: description;
}
} }
} }
#economic_framework { #economic_framework {
@ -559,8 +691,8 @@ section {
h2 { h2 {
margin: 3rem 0 1rem 0; margin: 3rem 0 1rem 0;
} }
ul { ul:not(.milestones) {
columns: 3 16rem; columns: 2 16rem;
column-gap: 0.5rem; column-gap: 0.5rem;
li { li {
display: grid; display: grid;
@ -575,6 +707,72 @@ section {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
} }
#technologies_needed {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 3rem;
li {
display: flex;
flex: 1 1 20rem;
gap: 1rem;
align-items: center;
padding: max(1rem, 2vw);
border: solid thin rgba(var(--text-color), 0.2);
border-radius: 0.5rem;
font-weight: 500;
animation: slide-up 0.5s ease var(--delay) forwards;
opacity: 0;
background: transparent;
}
.icon {
height: 2.5rem;
width: 2.5rem;
}
}
.milestones {
display: grid;
justify-content: flex-start;
justify-items: flex-start;
&--title-only {
.milestone {
grid-template-areas: "label title";
}
}
&--description-only {
.milestone {
grid-template-areas: "label description";
}
}
}
.milestone {
display: grid;
max-width: 42rem;
width: auto;
gap: 1rem 2rem;
align-items: center;
justify-content: flex-start;
padding-right: 0;
&:not(:last-child) {
padding-bottom: 3rem;
}
&__label {
grid-area: label;
align-items: flex-start;
justify-content: center;
background-color: rgba(var(--text-color), 1);
color: rgba(var(--foreground-color), 1);
&::before {
width: 0.1rem;
height: 100%;
background-color: rgba(var(--text-color), 0.5);
}
}
&__title {
grid-area: title;
margin-top: -0.1em;
}
}
} }
#team_members { #team_members {

View File

@ -21,21 +21,21 @@
<ul> <ul>
<li> <li>
<a href="#/economic_framework"> <a href="#/economic_framework">
Economic framework Execution steps
</a> </a>
</li> </li>
</ul> </ul>
</header> </header>
<article id="home" class="page"> <article id="home" class="page">
<section id="above_fold" class="gap-4"> <section id="above_fold" class="gap-4">
<!-- <img id="hero_illustration" src="assets/svg/cityscape.svg" alt=""> --> <div id="title_text" class="grid gap-0-5">
<div class="grid gap-0-5">
<h2 class="reveal"> <h2 class="reveal">
<span> <span>
Execution of tokenization projects All about execution of tokenization projects
</span> </span>
</h2> </h2>
</div> </div>
<!-- <img id="hero_illustration" src="assets/svg/cityscape.svg" alt=""> -->
<ol class="grid gap-3" type="1"> <ol class="grid gap-3" type="1">
<li class="grid gap-1"> <li class="grid gap-1">
<h3>What is Project B</h3> <h3>What is Project B</h3>
@ -322,32 +322,60 @@
<h4 class="reveal"><span>Why</span></h4> <h4 class="reveal"><span>Why</span></h4>
<h2 class="reveal"><span>El Salvador?</span></h2> <h2 class="reveal"><span>El Salvador?</span></h2>
</div> </div>
<div class="grid gap-1"> <ul class="grid">
<p> <li class="milestone">
El Salvador first and only country to unconditionally legalize Bitcoin, and offer constitutional <div class="milestone__label">1</div>
protections. <h3 class="milestone__title">Bitcoin legalized</h3>
</p> <p class="milestone__description">
<p> El Salvador first and only country to unconditionally legalize Bitcoin, and offer
El Salvador has no taxation on capital gains on Bitcoin, as well as technology companies that constitutional
leverage the power of new technologies. protections.
</p> </p>
<p> </li>
El Salvador has created Comprehensive Digital Assets regulatory system. <li class="milestone">
</p> <div class="milestone__label">2</div>
<p> <h3 class="milestone__title">No capital gains tax</h3>
El Salvador can form the physical base where new digital ideas an be incubated, and then scaled <p class="milestone__description">
up all over the world using blockchain dynamics. El Salvador has no taxation on capital gains on Bitcoin, as well as technology companies
</p> that
<p> leverage the power of new technologies.
El Salvador is creating first mover advantage in Crypto space for itself as a country, and for </p>
entrepreneurs who operate out of El Salvador. As we saw in case of Bitcoin, first mover </li>
advantage is often a permanent advantage in Crypto space. <li class="milestone">
</p> <div class="milestone__label">3</div>
<p> <h3 class="milestone__title">Digital assets regulation</h3>
El Salvador is also creating a community of global Crypto enthusiasts being focal point of <p class="milestone__description">
Crypto infrastructure in the world. El Salvador has created Comprehensive Digital Assets regulatory system.
</p> </p>
</div> </li>
<li class="milestone">
<div class="milestone__label">4</div>
<h3 class="milestone__title">Best physical launchpad</h3>
<p class="milestone__description">
El Salvador can form the physical base where new digital ideas an be incubated, and then
scaled
up all over the world using blockchain dynamics.
</p>
</li>
<li class="milestone">
<div class="milestone__label">5</div>
<h3 class="milestone__title">First mover advantage for new ideas</h3>
<p class="milestone__description">
El Salvador is creating first mover advantage in Crypto space for itself as a country, and
for
entrepreneurs who operate out of El Salvador. As we saw in case of Bitcoin, first mover
advantage is often a permanent advantage in Crypto space.
</p>
</li>
<li class="milestone">
<div class="milestone__label">6</div>
<h3 class="milestone__title">Emerging focal point of crypto community</h3>
<p class="milestone__description">
El Salvador is also creating a community of global Crypto enthusiasts being focal point of
Crypto infrastructure in the world.
</p>
</li>
</ul>
</div> </div>
</section> </section>
<section id="projects_section"> <section id="projects_section">
@ -496,66 +524,77 @@
</section> </section>
<section class="grid gap-3"> <section class="grid gap-3">
<h2 class="reveal"><span>Project team structure</span> </h2> <h2 class="reveal"><span>Project team structure</span> </h2>
<div id="project_team__components"> <ul id="project_team__components">
<div class="grid gap-1"> <li class="grid gap-1 milestone">
<h3> <div class="milestone__label">1</div>
<h3 class="milestone__title">
Create client-side steering team Create client-side steering team
</h3> </h3>
<p> <div class="grid milestone__description">
The client-side team should contain members from following teams <p>
</p> The client-side team should contain members from following teams
<ol type="1"> </p>
<li> <ol type="1">
Management <li>
</li> Management
<li> </li>
Finance <li>
</li> Finance
<li> </li>
Technology <li>
</li> Technology
</ol> </li>
</div> </ol>
<div class="grid gap-1"> </div>
<h3> </li>
<li class="grid gap-1 milestone">
<div class="milestone__label">2</div>
<h3 class="milestone__title">
Approval from the board or higher management Approval from the board or higher management
</h3> </h3>
<p> <div class="grid milestone__description gap-1">
Before tokenization can begin the higher management or the board must commit resources required <p>
for Before tokenization can begin the higher management or the board must commit resources
the tokenization project. required
</p> for
<p> the tokenization project.
Higher management must also undertake to communicate details of the initiative to employees, </p>
customers and other stake holders. <p>
</p> Higher management must also undertake to communicate details of the initiative to employees,
<p> customers and other stake holders.
A dedicated budget for the project must be approved. </p>
</p> <p>
</div> A dedicated budget for the project must be approved.
<div class="grid gap-1"> </p>
<h3>Project B team</h3> </div>
<p> </li>
Project B will perform the initial economic design of the tokenization project. <li class="grid gap-1 milestone">
</p> <div class="milestone__label">3</div>
<p> <h3 class="milestone__title">Project B team role</h3>
It will setup the technology page consisting of <strong>tokens</strong>, <div class="grid milestone__description gap-1">
<strong>Smartcontracts</strong>, <strong>multisigs</strong>, <strong>markets</strong> and <p>
<strong>private key security infrastructure</strong>. Project B will perform the initial economic design of the tokenization project.
</p> </p>
</div> <p>
<div class="grid gap-1"> It will setup the technology page consisting of <strong>tokens</strong>,
<h3> <strong>Smartcontracts</strong>, <strong>multisigs</strong>, <strong>markets</strong> and
Regulatory Team <strong>private key security infrastructure</strong>.
</p>
</div>
</li>
<li class="grid gap-1 milestone">
<div class="milestone__label">4</div>
<h3 class="milestone__title">
Regulatory team role
</h3> </h3>
<p> <p class="milestone__description">
The regulatory team will review controls related to <strong>KYC</strong> (Know Your customer), The regulatory team will review controls related to <strong>KYC</strong> (Know Your customer),
<strong>AML</strong> (Anti Money <strong>AML</strong> (Anti Money
Laundering) and Laundering) and
<strong>National Digital Assets Regulations</strong> if applicable. <strong>National Digital Assets Regulations</strong> if applicable.
</p> </p>
</div> </li>
</div> </u>
</section> </section>
<section> <section>
<h2 class="reveal"><span>Team</span></h4> <h2 class="reveal"><span>Team</span></h4>
@ -621,18 +660,6 @@
href="https://twitter.com/SarwanSumer/status/1641761374505435138?ref_src=twsrc%5Etfw">March 31, href="https://twitter.com/SarwanSumer/status/1641761374505435138?ref_src=twsrc%5Etfw">March 31,
2023</a> 2023</a>
</blockquote> </blockquote>
<iframe loading="lazy" width="560" height="315" src="https://www.youtube-nocookie.com/embed/M4AD4uIwndk"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<iframe loading="lazy" width="560" height="315" src="https://www.youtube-nocookie.com/embed/TrIbxCBXKAk"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<iframe loading="lazy" width="560" height="315" src="https://www.youtube-nocookie.com/embed/FmWliBxLPAQ"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div> </div>
</section> </section>
<section id="socials_section"> <section id="socials_section">
@ -769,81 +796,216 @@
</section> </section>
</article> </article>
<article id="economic_framework" class="page hidden"> <article id="economic_framework" class="page hidden">
<h2 class="reveal"><span>Economic framework deployed</span></h2> <h2>Tokenization = Economic Framework + Blockchain Technology</h2>
<div> <div class="grid gap-2">
<ol type="1"> <h3>Blockchain technology that Project B will implement</h3>
<li> <ul id="technologies_needed">
<li style="--delay: 0s">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<g>
<path d="M0,0h24v24H0V0z" fill="none"></path>
</g>
<g>
<g>
<rect height="2" width="2" x="17" y="7"></rect>
<rect height="2" width="2" x="17" y="11"></rect>
<rect height="2" width="2" x="17" y="15"></rect>
<path d="M1,11v10h6v-5h2v5h6V11L8,6L1,11z M13,19h-2v-5H5v5H3v-7l5-3.5l5,3.5V19z"></path>
<polygon points="10,3 10,4.97 12,6.4 12,5 21,5 21,19 17,19 17,21 23,21 23,3"></polygon>
</g>
</g>
</svg>
Token transfer system
</li>
<li style="--delay: 0.1s">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<rect fill="none" height="24" width="24"></rect>
<path
d="M9,4c-4.42,0-8,3.58-8,8c0,4.42,3.58,8,8,8s8-3.58,8-8C17,7.58,13.42,4,9,4z M9,18c-3.31,0-6-2.69-6-6s2.69-6,6-6 s6,2.69,6,6S12.31,18,9,18z M12,10.5h-2v5H8v-5H6V9h6V10.5z M20.25,3.75L23,5l-2.75,1.25L19,9l-1.25-2.75L15,5l2.75-1.25L19,1 L20.25,3.75z M20.25,17.75L23,19l-2.75,1.25L19,23l-1.25-2.75L15,19l2.75-1.25L19,15L20.25,17.75z">
</path>
</svg>
Smart contract system
</li>
<li style="--delay: 0.2s">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<g>
<rect fill="none" height="24" width="24"></rect>
</g>
<g>
<path
d="M17,11V3H7v4H3v14h8v-4h2v4h8V11H17z M7,19H5v-2h2V19z M7,15H5v-2h2V15z M7,11H5V9h2V11z M11,15H9v-2h2V15z M11,11H9V9h2 V11z M11,7H9V5h2V7z M15,15h-2v-2h2V15z M15,11h-2V9h2V11z M15,7h-2V5h2V7z M19,19h-2v-2h2V19z M19,15h-2v-2h2V15z">
</path>
</g>
</svg>
Token and smart contract explorer
</li>
<li style="--delay: 0.3s">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<g>
<rect fill="none" height="24" width="24"></rect>
</g>
<g>
<path
d="M20,4H4C2.89,4,2,4.9,2,6v12c0,1.1,0.89,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.11,4,20,4z M20,18H4V8h16V18z M18,17h-6v-2 h6V17z M7.5,17l-1.41-1.41L8.67,13l-2.59-2.59L7.5,9l4,4L7.5,17z">
</path>
</g>
</svg>
Bitcoin based messaging system
</li>
<li style="--delay: 0.4s">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<g>
<rect fill="none" height="24" width="24"></rect>
<path
d="M15.5,13.5c0,2-2.5,3.5-2.5,5h-2c0-1.5-2.5-3-2.5-5c0-1.93,1.57-3.5,3.5-3.5h0C13.93,10,15.5,11.57,15.5,13.5z M13,19.5h-2 V21h2V19.5z M19,13c0,1.68-0.59,3.21-1.58,4.42l1.42,1.42C20.18,17.27,21,15.23,21,13c0-2.74-1.23-5.19-3.16-6.84l-1.42,1.42 C17.99,8.86,19,10.82,19,13z M16,5l-4-4v3c0,0,0,0,0,0c-4.97,0-9,4.03-9,9c0,2.23,0.82,4.27,2.16,5.84l1.42-1.42 C5.59,16.21,5,14.68,5,13c0-3.86,3.14-7,7-7c0,0,0,0,0,0v3L16,5z">
</path>
</g>
</svg>
Bitcoin based multisig account
</li>
<li style="--delay: 0.5s">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<g>
<rect fill="none" height="24" width="24"></rect>
<path
d="M14,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8L14,2z M6,20V4h7v4h5v12H6z M11,19h2v-1h1 c0.55,0,1-0.45,1-1v-3c0-0.55-0.45-1-1-1h-3v-1h4v-2h-2V9h-2v1h-1c-0.55,0-1,0.45-1,1v3c0,0.55,0.45,1,1,1h3v1H9v2h2V19z">
</path>
</g>
</svg>
Tools to protect private keys
</li>
</div>
</ul>
<h3 class="reveal"><span>Why is economic framework needed</span></h3>
<ul class="milestones milestones--description-only">
<li class="milestone">
<div class="milestone__label">1</div>
<p class="milestone__description">
The economic framework enforces the discipline to ensure that the valuation of the token is The economic framework enforces the discipline to ensure that the valuation of the token is
sustainable. sustainable.
</li> </p>
<li> </li>
<li class="milestone">
<div class="milestone__label">2</div>
<p class="milestone__description">
Guarantees the resources needed to support the token valuation. Guarantees the resources needed to support the token valuation.
</li> </p>
<li> </li>
<li class="milestone">
<div class="milestone__label">3</div>
<p class="milestone__description">
Creates a benchmark for minimum token valuation. Which the project can support by itself. Creates a benchmark for minimum token valuation. Which the project can support by itself.
</li> </p>
<li> </li>
<li class="milestone">
<div class="milestone__label">4</div>
<p class="milestone__description">
Prevents the token project from becoming a Ponzi scheme. Prevents the token project from becoming a Ponzi scheme.
</li> </p>
<li> </li>
<li class="milestone">
<div class="milestone__label">5</div>
<p class="milestone__description">
The economic framework ensures that the token valuation will increase forever if the verifiable The economic framework ensures that the token valuation will increase forever if the verifiable
consumption metrics are increasing forever. consumption metrics are increasing forever.
</p>
</li>
</ul>
<div class="grid gap-2">
<h3>Economic framework that Project B will follow</h3>
<ul class="milestones milestones--title-only">
<li class="milestone">
<div class="milestone__label">1</div>
<h4 class="milestone__description">
Establish Production & Consumption metrics
</h4>
</li> </li>
</ol> <li class="milestone">
</div> <div class="milestone__label">2</div>
<div class="grid gap-1"> <h4 class="milestone__description">
<h4>Steps</h4> Establish production valuation metrics
<ol type="1"> </h4>
<li>
Establish Production & Consumption metrics
</li> </li>
<li> <li class="milestone">
Establish production valuation metrics <div class="milestone__label">3</div>
<h4 class="milestone__description">
Establish consumption valuation metrics
</h4>
</li> </li>
<li> <li class="milestone">
Establish consumption valuation metrics <div class="milestone__label">4</div>
<h4 class="milestone__description">
Create structure for System valuation
</h4>
</li> </li>
<li> <li class="milestone">
Create structure for System valuation <div class="milestone__label">5</div>
<h4 class="milestone__description">
Design Ownership tokens, and the relation to system ownership & valuation
</h4>
</li> </li>
<li> <li class="milestone">
Design Ownership tokens, and the relation to system ownership & valuation <div class="milestone__label">6</div>
<h4 class="milestone__description">
Design system for Reserve tokens
</h4>
</li> </li>
<li> <li class="milestone">
Design system for Reserve tokens <div class="milestone__label">7</div>
<h4 class="milestone__description">
Create incentives for the initial investors
</h4>
</li> </li>
<li> <li class="milestone">
Create incentives for the initial investors <div class="milestone__label">8</div>
<h4 class="milestone__description">
Link initial tokens to production valuation
</h4>
</li> </li>
<li> <li class="milestone">
Link initial tokens to production valuation <div class="milestone__label">9</div>
<h4 class="milestone__description">
Design valuation of token trading system
</h4>
</li> </li>
<li> <li class="milestone">
Design valuation of token trading system <div class="milestone__label">10</div>
<h4 class="milestone__description">
Design ownership token trading system
</h4>
</li> </li>
<li> <li class="milestone">
Design ownership token trading system <div class="milestone__label">11</div>
<h4 class="milestone__description">
Create the reserve pool
</h4>
</li> </li>
<li> <li class="milestone">
Create the reserve pool <div class="milestone__label">12</div>
<h4 class="milestone__description">
Design safety nets
</h4>
</li> </li>
<li> <li class="milestone">
Design safety nets <div class="milestone__label">13</div>
<h4 class="milestone__description">
Design governance system
</h4>
</li> </li>
<li> </ul>
Design governance system
</li>
</ol>
<a class="button justify-self-start" href="https://medium.com/ranchimall/economic-system-5c85144e4726" <a class="button justify-self-start" href="https://medium.com/ranchimall/economic-system-5c85144e4726"
target="_blank">More target="_blank">More
details</a> details</a>
</div> </div>
<div class="grid gap-1"> <div class="grid gap-2">
<h4>Key concepts</h4> <h3>Key definitions</h3>
<ul> <ul>
<li> <li>
<strong>Production Valuation</strong> <strong>Production Valuation</strong>