Adding new content and layout

This commit is contained in:
sairaj mote 2023-06-25 02:23:42 +05:30
parent 27f191ce31
commit 47d5b8c6ed
7 changed files with 692 additions and 319 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -41,7 +41,7 @@ body[data-theme=dark] {
p,
strong {
font-size: 0.9rem;
font-size: 1rem;
max-width: 70ch;
line-height: 1.6;
color: rgba(var(--text-color), 0.8);
@ -79,6 +79,10 @@ ul {
list-style: none;
}
ol {
padding-left: 1rem;
}
.icon {
width: 1.2rem;
height: 1.2rem;
@ -219,23 +223,30 @@ article > * {
display: flex;
}
#above_fold {
padding-top: 0;
height: calc(100vh - 6rem);
text-align: center;
align-content: center;
}
#above_fold h2 {
margin: auto;
max-width: 46rem;
justify-self: center;
text-align: center;
margin-bottom: 3rem;
}
#above_fold p {
max-width: none;
#above_fold ol {
display: block;
-moz-columns: 2 24rem;
columns: 2 24rem;
-moz-column-gap: 2rem;
column-gap: 2rem;
}
#above_fold ol li {
page-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
margin-bottom: 3rem;
}
#hero_illustration {
width: min(100%, 26rem);
margin: auto;
margin-top: 4rem;
width: min(100%, 26rem);
}
section {
@ -351,6 +362,10 @@ section:nth-of-type(2) {
padding-bottom: 3rem;
}
#projects_section h2 {
margin-bottom: 3rem;
}
.project {
display: grid;
width: 100%;
@ -478,19 +493,49 @@ section:nth-of-type(2) {
}
#methodology_wrapper {
margin-bottom: 0;
display: flex;
flex-direction: column;
margin-top: 3rem;
}
#methodology_wrapper .milestone {
display: grid;
max-width: 42rem;
width: auto;
grid-template-areas: "label title" "label description";
align-items: center;
}
#methodology_wrapper .milestone:not(:last-child) {
padding-bottom: 3rem;
}
#methodology_wrapper .milestone__label {
align-items: flex-start;
justify-content: center;
grid-area: label;
}
#methodology_wrapper .milestone__label::before {
width: 0.1rem;
height: 100%;
}
#methodology_wrapper .milestone__title {
grid-area: title;
margin-top: 0;
padding-left: 3rem;
}
#methodology_wrapper .milestone__description {
grid-area: description;
padding-left: 3rem;
}
#economics_section h2 {
#economic_framework h2 {
margin-bottom: 3rem;
}
#economics_section ul {
#economic_framework ul {
-moz-columns: 3 16rem;
columns: 3 16rem;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
#economics_section li {
#economic_framework ul li {
display: grid;
gap: 0.5rem;
align-items: flex-start;
@ -536,39 +581,47 @@ section:nth-of-type(2) {
}
#partners {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
margin: auto;
justify-content: space-evenly;
margin-top: 3rem;
}
#partners a,
#partners li:not(li:has(a)) {
display: flex;
flex-direction: column;
gap: 0.8rem;
text-align: center;
align-items: center;
padding: 1rem;
text-decoration: none;
width: 100%;
align-items: center;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.5rem;
}
#partners a .icon,
#partners li:not(li:has(a)) .icon {
width: 2rem;
height: 2rem;
}
#partners img {
height: 2rem;
}
#partners span {
font-weight: 500;
color: rgba(var(--text-color), 0.8);
width: 100%;
}
#media_coverage_section .carousel {
#media_coverage_section .masonry {
margin-top: 3rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
#media_coverage_section .carousel > * {
flex-shrink: 0;
width: min(100% - 2rem, 32rem);
#media_coverage_section .masonry iframe {
display: flex;
flex: 1 1 15rem;
border-radius: 0.5rem;
max-width: max(100vw - 2.5rem);
}
#social_links {
@ -604,14 +657,15 @@ section:nth-of-type(2) {
font-weight: 500;
}
#services ul {
-moz-columns: 4 16rem;
columns: 4 16rem;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
#services li {
#services_section ul {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 3rem;
}
#services_section li {
display: flex;
flex: 1 1 20rem;
gap: 1rem;
align-items: center;
padding: max(1rem, 2vw);
@ -621,12 +675,8 @@ section:nth-of-type(2) {
-webkit-animation: slide-up 0.5s ease var(--delay) forwards;
animation: slide-up 0.5s ease var(--delay) forwards;
opacity: 0;
margin-bottom: 0.5rem;
-moz-column-break-inside: avoid;
break-inside: avoid;
page-break-inside: avoid;
}
#services .icon {
#services_section .icon {
height: 2.5rem;
width: 2.5rem;
}

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -39,7 +39,7 @@ body[data-theme="dark"] {
p,
strong {
font-size: 0.9rem;
font-size: 1rem;
max-width: 70ch;
line-height: 1.6;
color: rgba(var(--text-color), 0.8);
@ -67,6 +67,9 @@ img {
ul {
list-style: none;
}
ol {
padding-left: 1rem;
}
.icon {
width: 1.2rem;
height: 1.2rem;
@ -185,21 +188,27 @@ article {
}
}
#above_fold {
padding-top: 0;
height: calc(100vh - 6rem);
text-align: center;
align-content: center;
h2 {
margin: auto;
max-width: 46rem;
justify-self: center;
text-align: center;
margin-bottom: 3rem;
}
p {
max-width: none;
ol {
display: block;
columns: 2 24rem;
column-gap: 2rem;
li {
page-break-inside: avoid;
break-inside: avoid;
margin-bottom: 3rem;
}
}
}
#hero_illustration {
width: min(100%, 26rem);
margin: auto;
margin-top: 4rem;
width: min(100%, 26rem);
}
section {
display: grid;
@ -308,6 +317,11 @@ section {
.carousel:has(.project) {
padding-bottom: 3rem;
}
#projects_section {
h2 {
margin-bottom: 3rem;
}
}
.project {
display: grid;
width: 100%;
@ -430,27 +444,57 @@ section {
}
}
#methodology_wrapper {
margin-bottom: 0;
display: flex;
flex-direction: column;
margin-top: 3rem;
.milestone {
display: grid;
max-width: 42rem;
width: auto;
grid-template-areas: "label title" "label description";
align-items: center;
&:not(:last-child) {
padding-bottom: 3rem;
}
&__label {
align-items: flex-start;
justify-content: center;
grid-area: label;
&::before {
width: 0.1rem;
height: 100%;
}
}
&__title {
grid-area: title;
margin-top: 0;
padding-left: 3rem;
}
&__description {
grid-area: description;
padding-left: 3rem;
}
}
}
#economics_section {
#economic_framework {
h2 {
margin-bottom: 3rem;
}
ul {
columns: 3 16rem;
column-gap: 0.5rem;
}
li {
display: grid;
gap: 0.5rem;
align-items: flex-start;
align-content: flex-start;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.5rem;
padding: max(1rem, 2vw);
page-break-inside: avoid;
break-inside: avoid;
margin-bottom: 0.5rem;
li {
display: grid;
gap: 0.5rem;
align-items: flex-start;
align-content: flex-start;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.5rem;
padding: max(1rem, 2vw);
page-break-inside: avoid;
break-inside: avoid;
margin-bottom: 0.5rem;
}
}
}
@ -484,38 +528,46 @@ section {
}
#partners {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
margin: auto;
justify-content: space-evenly;
margin-top: 3rem;
a,
li:not(li:has(a)) {
display: flex;
flex-direction: column;
gap: 0.8rem;
text-align: center;
align-items: center;
padding: 1rem;
text-decoration: none;
width: 100%;
align-items: center;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.5rem;
.icon {
width: 2rem;
height: 2rem;
}
}
img {
height: 2rem;
}
span {
font-weight: 500;
color: rgba(var(--text-color), 0.8);
width: 100%;
}
}
#media_coverage_section {
.carousel {
.masonry {
margin-top: 3rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
& > * {
flex-shrink: 0;
width: min(calc(100% - 2rem), 32rem);
iframe {
display: flex;
flex: 1 1 15rem;
border-radius: 0.5rem;
max-width: max(100vw - 2.5rem);
}
}
}
@ -555,13 +607,16 @@ section {
}
}
#services {
#services_section {
ul {
columns: 4 16rem;
column-gap: 0.5rem;
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);
@ -570,9 +625,6 @@ section {
font-weight: 500;
animation: slide-up 0.5s ease var(--delay) forwards;
opacity: 0;
margin-bottom: 0.5rem;
break-inside: avoid;
page-break-inside: avoid;
}
.icon {
height: 2.5rem;

View File

@ -20,8 +20,8 @@
</a>
<ul>
<li>
<a href="#/services">
Services
<a href="#/economic_framework">
Economic framework
</a>
</li>
<!-- <li>
@ -32,46 +32,139 @@
</ul>
</header>
<article id="home" class="page">
<!-- <section class="">
<h2>Milestones</h2>
<div id="milestones_wrapper" class="carousel">
<div class="milestone">
<div class="milestone__label">5th April 2023</div>
<h3 class="milestone__title">Tokenroom pilot project launched</h3>
<div class="milestone__description">
<p>
Tokenization is the process of converting rights to an asset into a digital token on a
blockchain.
</p>
<p>
The token represents the rights to the asset and can be traded on a secondary market.
</p>
</div>
</div>
</div>
<div class="carousel-controls flex gap-0-3">
<button class="carousel-control" onclick="scrollCarousel('milestones_wrapper', 'left')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
</svg>
</button>
<button class="carousel-control" onclick="scrollCarousel('milestones_wrapper', 'right')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
</svg>
</button>
</div>
</section> -->
<section id="above_fold" class="gap-4">
<img id="hero_illustration" src="assets/svg/cityscape.svg" alt="">
<div class="grid gap-0-5">
<h2>Real estate tokenization through the power of Blockchain technology.</h2>
<p>A global reference of tokenization aiming financial inclusiveness</p>
<h2>Execution of tokenization projects</h2>
</div>
<ol class="grid gap-3" type="1">
<li class="grid gap-1">
<h3>What is Project B</h3>
<p>
Project B executes tokenization projects based on blockchain technology.
</p>
</li>
<li class="grid gap-1">
<h3>
What is tokenization
</h3>
<p>
Tokenization in blockchain enables the digital representation, transfer, and management of
real-world
assets or values, making transactions more efficient and expanding the possibilities for
decentralized
economic systems.
</p>
<p>
A good tokenization project enables self funding of a new project through investors all over the
world.
</p>
<p>
It also converts customers automatically into investors and vice-versa.
</p>
</li>
<li class="grid gap-1">
<h3>Why Project B for tokenization</h3>
<p>
Project B has evolved a disciplined framework for creation, transfer and management of the
tokens
such
that the valuation of tokens is always backed up by sustainable economics.
</p>
<p>
Project B in collaboration with tools and technologies developed by RanchiMall has made process
of
tokenization extremely simple and very practical to use.
</p>
<p>
In Project B implementation of tokenization, we start with definite and predictable cash flows
at
any
business process and then create the dynamics in a such way that the tokens can appreciate in a
predicatable fastion.
</p>
</li>
</ol>
</section>
<section id="services_section">
<h2>Services</h2>
<ul>
<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" />
</g>
<g>
<g>
<rect height="2" width="2" x="17" y="7" />
<rect height="2" width="2" x="17" y="11" />
<rect height="2" width="2" x="17" y="15" />
<path d="M1,11v10h6v-5h2v5h6V11L8,6L1,11z M13,19h-2v-5H5v5H3v-7l5-3.5l5,3.5V19z" />
<polygon points="10,3 10,4.97 12,6.4 12,5 21,5 21,19 17,19 17,21 23,21 23,3" />
</g>
</g>
</svg>
Real Estate Tokenization
</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" />
<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" />
</svg>
Autonomous Tokenization Projects
</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" />
</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" />
</g>
</svg>
Corporate Tokenization
</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" />
</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" />
</g>
</svg>
Smartcontract Applications
</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" />
<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" />
</g>
</svg>
Startup Tokenization Enablement
</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" />
<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" />
</g>
</svg>
Third party blockchain valuation support
</li>
</ul>
</section>
<section>
<h2>Milestones</h2>
@ -94,7 +187,7 @@
</div>
</section>
<section>
<h4 class="section-header">Blockchain Network Partners </h4>
<h2>Blockchain Partners </h2>
<ul id="partners">
<li>
<svg class="icon" width="64" height="64" viewBox="0 0 64 64" fill="none"
@ -117,7 +210,7 @@
</span>
</li>
<li>
<a href="https://bitcoin.org/en/">
<a href="https://bitcoin.org/en/" target="_blank">
<svg class="icon" viewBox="0 0 64 64" height="64" width="64" version="1.1">
<g transform="translate(0.00630876,-0.00301984)">
<path fill="#f7931a"
@ -132,7 +225,7 @@
</a>
</li>
<li>
<a href="https://polygon.technology/">
<a href="https://polygon.technology/" target="_blank">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" fill="none">
<path
d="M364.03 335.08L475.58 270.68C481.48 267.27 485.15 260.92 485.15 254.1V125.28C485.15 118.47 481.48 112.11 475.58 108.7L364.03 44.3C358.13 40.89 350.79 40.9 344.89 44.3L233.34 108.7C227.44 112.11 223.77 118.46 223.77 125.28V355.47L145.55 400.62L67.33 355.47V265.14L145.55 219.99L197.15 249.77V189.18L155.12 164.92C152.22 163.25 148.91 162.37 145.55 162.37C142.19 162.37 138.88 163.25 135.98 164.92L24.42 229.33C18.52 232.74 14.85 239.09 14.85 245.91V374.72C14.85 381.53 18.52 387.89 24.42 391.3L135.97 455.71C141.87 459.11 149.2 459.11 155.11 455.71L266.66 391.31C272.56 387.9 276.23 381.54 276.23 374.73V144.54L277.64 143.73L354.45 99.39L432.67 144.55V234.87L354.45 280.03L302.93 250.29V310.88L344.88 335.11C350.78 338.51 358.12 338.51 364.02 335.11L364.03 335.08Z"
@ -152,7 +245,7 @@
</a>
</li>
<li>
<a href="https://lightning.network/">
<a href="https://lightning.network/" target="_blank">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="282" height="282"
viewBox="0 0 282 282" fill="none">
<g clip-path="url(#clip0)">
@ -168,7 +261,15 @@
</defs>
</svg>
<span>
Lightening <br> Network
Lightning <br> Network
</span>
</a>
</li>
<li>
<a href="https://www.juuride.com/" target="_blank">
<img src="assets/logos/juu-ride-logo.png" alt="">
<span>
Juu Ride
</span>
</a>
</li>
@ -193,53 +294,59 @@
</div>
<div class="grid gap-1">
<p>
El Salvador is the first country to fully legalize Bitcoin with constitutional protections and
no
taxes on capital gains. They have established a comprehensive regulatory system for digital
assets
and aim to become a physical base for incubating and scaling new digital ideas using blockchain
technology.
El Salvador first and only country to unconditionally legalize Bitcoin, and offer constitutional
protections.
</p>
<p>
By being an early adopter, El Salvador is gaining a first mover advantage in the crypto space
for
itself and its entrepreneurs.
El Salvador has no taxation on capital gains on Bitcoin, as well as technology companies that
leverage the power of new technologies.
</p>
<p>
They are also creating a global community of crypto enthusiasts
and
becoming a focal point for crypto infrastructure worldwide.
El Salvador has created Comprehensive Digital Assets regulatory system.
</p>
<p>
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>
<p>
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>
<p>
El Salvador is also creating a community of global Crypto enthusiasts being focal point of
Crypto infrastructure in the world.
</p>
</div>
</div>
</section>
<section>
<section id="projects_section">
<h2>Projects</h2>
<div class="carousel">
<div class="grid gap-2">
<div class="project">
<div class="project__images grid">
<div class="project__image">
<img src="assets/poc/poc3.jpg" alt="">
<img loading="lazy" src="assets/poc/poc3.jpg" alt="">
</div>
<div class="project__images-wrapper" onclick="showImage(event)">
<button class="thumbnail-button active">
<img src="assets/poc/poc3.jpg" class="thumbnail" alt="">
<img loading="lazy" src="assets/poc/poc3.jpg" class="thumbnail" alt="">
</button>
<button class="thumbnail-button">
<img src="assets/poc/poc1.jpg" class="thumbnail" alt="">
<img loading="lazy" src="assets/poc/poc1.jpg" class="thumbnail" alt="">
</button>
<button class="thumbnail-button">
<img src="assets/poc/poc2.jpg" class="thumbnail" alt="">
<img loading="lazy" src="assets/poc/poc2.jpg" class="thumbnail" alt="">
</button>
<button class="thumbnail-button">
<img src="assets/poc/poc5.jpg" class="thumbnail" alt="">
<img loading="lazy" src="assets/poc/poc5.jpg" class="thumbnail" alt="">
</button>
</div>
</div>
<div class="project__content">
<div class="grid gap-0-5">
<div class="badge justify-self-start">
<span>Proof of Concept</span>
<span>1. Proof of Concept</span>
</div>
<h3 class="project__title">Tokenroom</h3>
</div>
@ -260,6 +367,90 @@
<div class="stat__title">Invested nights consumed</div>
</li>
</ul>
<a class="project__button" href="https://ranchimall.github.io/reale/" target="_blank">Project
site</a>
<!-- <button href="#/tokenroom" class="project__button" onclick="toggleDetails(event)">Show
details</button> -->
</div>
<!-- <div class="project__hidden-details grid hidden">
<h4>Details</h4>
</div> -->
</div>
<div class="project">
<div class="project__images grid">
<div class="project__image">
<img loading="lazy" src="assets/bitsindri/bitsindri-1.webp" alt="">
</div>
<div class="project__images-wrapper" onclick="showImage(event)">
<button class="thumbnail-button active">
<img loading="lazy" src="assets/bitsindri/bitsindri-1.webp" class="thumbnail" alt="">
</button>
<button class="thumbnail-button">
<img loading="lazy" src="assets/bitsindri/bitsindri-2.webp" class="thumbnail" alt="">
</button>
</div>
</div>
<div class="project__content">
<div class="grid gap-0-5">
<div class="badge justify-self-start">
<span>2</span>
</div>
<h3 class="project__title">BIT Sindri blockchain center, India</h3>
</div>
<p class="project__description">
Tokenizes the projects done by students of an engineering college in the following areas
<ol type="1">
<li>
Coding
</li>
<li>
Design
</li>
<li>
Marketing
</li>
<li>
Project Scouting
</li>
<li>
Content Writing and Copyrights
</li>
<li>
Investment and Finance
</li>
</ol>
</p>
<a class="project__button" href="https://ranchimall.github.io/bitsindri/"
target="_blank">Project site</a>
<!-- <button href="#/tokenroom" class="project__button" onclick="toggleDetails(event)">Show
details</button> -->
</div>
<!-- <div class="project__hidden-details grid hidden">
<h4>Details</h4>
</div> -->
</div>
<div class="project">
<div class="project__images grid">
<div class="project__image">
<img loading="lazy" src="assets/logos/juu-ride-logo.png" alt="">
</div>
<div class="project__images-wrapper" onclick="showImage(event)">
<button class="thumbnail-button active">
<img loading="lazy" src="assets/logos/juu-ride-logo.png" class="thumbnail" alt="">
</button>
</div>
</div>
<div class="project__content">
<div class="grid gap-0-5">
<div class="badge justify-self-start">
<span>3</span>
</div>
<h3 class="project__title">Juu Ride, El Salvador</h3>
</div>
<p class="project__description">
Tokenization of shared taxi services
</p>
<a class="project__button" href="https://www.juuride.com/" target="_blank">Project site</a>
<!-- <button href="#/tokenroom" class="project__button" onclick="toggleDetails(event)">Show
details</button> -->
</div>
@ -273,103 +464,70 @@
<h2>
Methodology
</h2>
<ul id="methodology_wrapper" class="carousel"> </ul>
<div class="carousel-controls flex gap-0-3">
<button class="carousel-control" onclick="scrollCarousel('methodology_wrapper', 'left')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
</svg>
</button>
<button class="carousel-control" onclick="scrollCarousel('methodology_wrapper', 'right')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
</svg>
</button>
</div>
<ul id="methodology_wrapper"> </ul>
</section>
<section>
<h4 class="section-header">
Structure
</h4>
<div class="grid gap-1 justify-content-center text-center">
<p>
Client side team (Management, Technology, and Finance)
</p>
<p>
Formal approval from board Or higher management
</p>
<p>
Project B team (Technology, Financial Structure Design)
</p>
<p>
Regulatory Team (KYC, Financial Controls, AML)
</p>
<p>
Allocation of dedicated budget (by client)
</p>
</div>
</section>
<section id="economics_section">
<section class="grid gap-3">
<h2>
Economics
Project team structure
</h2>
<div class="grid gap-1">
<div>Key concepts</div>
<ul>
<li>
<strong>Production Valuation</strong>
<p>
Production valuation encompasses all operational expenses. Token sales must cover these
costs.
</p>
</li>
<li>
<strong>Consumption Valuation</strong>
<p>
Consumption valuation reflects the system's value derived from providing essential goods or
services for consumption. It represents the overall profits and earnings generated by the
system's operation.
</p>
</li>
<li>
<strong>Reserve Pool</strong>
<p>
Reserve Pool is a Bitcoin Multisig address that serves as the bank account for this system.
All
system-related payments and expenses occur there.
</p>
</li>
<li>
<strong>Ownership token</strong>
<p>
Ownership tokens entitle holders to the system's profits.
</p>
</li>
<li>
<strong>Market valuation</strong>
<p>
Market valuation represents the anticipated future consumption valuation.
</p>
</li>
<li>
<strong>System Valuation</strong>
<p>
The higher value between production valuation and consumption valuation.
</p>
</li>
<li>
<strong>Investments</strong>
<p>
Investments help in providing for the initial production valuation and they add to the
reserve
pool.
</p>
</li>
</ul>
<h4>
Create client-side steering team
</h4>
<div class="grid">
<p>
The client-side team should contain members from following teams
</p>
<ol type="1">
<li>
Management
</li>
<li>
Finance
</li>
<li>
Technology
</li>
</ol>
</div>
<div class="grid">
<h4>
Approval from the board or higher management
</h4>
<p>
Before tokenization can begin the higher management or the board must commit resources required
for
the tokenization project.
</p>
<p>
Higher management must also undertake to communicate details of the initiative to employees,
customers and other stake holders.
</p>
<p>
A dedicated budget for the project must be approved.
</p>
</div>
<div class="grid">
<h4>Project B team</h4>
<p>
Project B will perform the initial economic design of the tokenization project.
</p>
<p>
It will setup the technology page consisting of <strong>tokens</strong>,
<strong>Smartcontracts</strong>, <strong>multisigs</strong>, <strong>markets</strong> and
<strong>private key security infrastructure</strong>.
</p>
</div>
<div class="grid">
<h4>
Regulatory Team
</h4>
<p>
The regulatory team will review controls related to KYC (Know Your customer), AML (Anti Money
Laundering) and
National Digital Assets Regulations if applicable.
</p>
</div>
</div>
</section>
<section>
@ -388,12 +546,63 @@
</section>
<section id="media_coverage_section">
<h2>Media coverage</h2>
<div class="carousel">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/CYRTmJnScZY"
<div class="masonry">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube-nocookie.com/embed/4BX8HNfjmag"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/FmWliBxLPAQ"
<iframe loading="lazy" width="560" height="315" src="https://www.youtube-nocookie.com/embed/P80m96KQIz0"
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/CYRTmJnScZY"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr"><a
href="https://twitter.com/ProjectBSV?ref_src=twsrc%5Etfw">@ProjectBSV</a><br><br>Great
experience at <a
href="https://twitter.com/hashtag/tokenroom?src=hash&amp;ref_src=twsrc%5Etfw">#tokenroom</a>
El Zonte.<a href="https://twitter.com/tripathyr?ref_src=twsrc%5Etfw">@tripathyr</a><a
href="https://twitter.com/ranchimallFLO?ref_src=twsrc%5Etfw">@ranchimallFLO</a><a
href="https://twitter.com/hashtag/tokenroom?src=hash&amp;ref_src=twsrc%5Etfw">#tokenroom</a>
<a href="https://twitter.com/hashtag/bitcoin?src=hash&amp;ref_src=twsrc%5Etfw">#bitcoin</a> <a
href="https://t.co/qqICvgf2HJ">pic.twitter.com/qqICvgf2HJ</a>
</p>&mdash; Jorge Rivas 🟠⚡
(@jrivaszep) <a
href="https://twitter.com/jrivaszep/status/1657809757854375937?ref_src=twsrc%5Etfw">May 14,
2023</a>
</blockquote>
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">PS: Token Room is live.<br><br>Book your stay and tokenize it on your bitcoin
address.<a href="https://t.co/gthf25EkWG">https://t.co/gthf25EkWG</a></p>&mdash; RanchiMallFLO
(@ranchimallFLO) <a
href="https://twitter.com/ranchimallFLO/status/1648275128428658689?ref_src=twsrc%5Etfw">April
18, 2023</a>
</blockquote>
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">Tokenized rooms in El Salvador (blender animation) <a
href="https://twitter.com/hashtag/blender?src=hash&amp;ref_src=twsrc%5Etfw">#blender</a> <a
href="https://twitter.com/hashtag/Bitcoin?src=hash&amp;ref_src=twsrc%5Etfw">#Bitcoin</a> <a
href="https://twitter.com/hashtag/ElSalvador?src=hash&amp;ref_src=twsrc%5Etfw">#ElSalvador</a>
<a
href="https://twitter.com/hashtag/animation3d?src=hash&amp;ref_src=twsrc%5Etfw">#animation3d</a>
<a href="https://t.co/PH9f8MA5qc">pic.twitter.com/PH9f8MA5qc</a>
</p>&mdash; Sumer Sarwan
(@SarwanSumer) <a
href="https://twitter.com/SarwanSumer/status/1641761374505435138?ref_src=twsrc%5Etfw">March 31,
2023</a>
</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>
@ -532,90 +741,140 @@
</ul>
</section>
</article>
<article id="services" class="page hidden">
<h2>Services</h2>
<ul>
<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" />
</g>
<g>
<g>
<rect height="2" width="2" x="17" y="7" />
<rect height="2" width="2" x="17" y="11" />
<rect height="2" width="2" x="17" y="15" />
<path d="M1,11v10h6v-5h2v5h6V11L8,6L1,11z M13,19h-2v-5H5v5H3v-7l5-3.5l5,3.5V19z" />
<polygon points="10,3 10,4.97 12,6.4 12,5 21,5 21,19 17,19 17,21 23,21 23,3" />
</g>
</g>
</svg>
Real Estate Tokenization
<article id="economic_framework" class="page hidden">
<h2>
Economic framework deployed
</h2>
<ol type="1">
<li>
The economic framework enforces the discipline to ensure that the valuation of the token is
sustainable.
</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" />
<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" />
</svg>
Autonomous Tokenization Projects
<li>
Guarantees the resources needed to support the token valuation.
</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" />
</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" />
</g>
</svg>
Corporate Tokenization
<li>
Creates a benchmark for minimum token valuation. Which the project can support by itself.
</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" />
</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" />
</g>
</svg>
Smartcontract Applications
<li>
Prevents the token project from becoming a Ponzi scheme.
</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" />
<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" />
</g>
</svg>
Startup Tokenization Enablement
<li>
The economic framework ensures that the token valuation will increase forever if the verifiable
consumption metrics are increasing forever.
</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" />
<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" />
</g>
</svg>
Third party blockchain valuation support
</li>
</ul>
</ol>
<div class="grid gap-1">
<h4>Steps</h4>
<ol type="1">
<li>
<strong>Establish Production & Consumption metrics</strong>
<p></p>
</li>
<li>
<strong>Establish production valuation metrics</strong>
</li>
<li>
<strong> Establish consumption valuation metrics</strong>
</li>
<li>
<strong>Create structure for System valuation</strong>
</li>
<li>
<strong>Design Ownership tokens, and the relation to system ownership & valuation</strong>
</li>
<li>
<strong>Design system for Reserve tokens</strong>
</li>
<li>
<strong>Create incentives for the initial investors</strong>
</li>
<li>
<strong>Link initial tokens to production valuation</strong>
</li>
<li>
<strong>Design valuation of token trading system</strong>
</li>
<li>
<strong>Design ownership token trading system</strong>
</li>
<li>
<strong>Create the reserve pool</strong>
</li>
<li>
<strong>Design safety nets</strong>
</li>
<li>
<strong>Design governance system</strong>
</li>
</ol>
<a href="https://medium.com/ranchimall/economic-system-5c85144e4726">More details about the
framework</a>
</div>
<div class="grid gap-1">
<h4>Key concepts</h4>
<ul>
<li>
<strong>Production Valuation</strong>
<p>
Production valuation encompasses all operational expenses. Token sales must cover these
costs.
</p>
</li>
<li>
<strong>Consumption Valuation</strong>
<p>
Consumption valuation reflects the system's value derived from providing essential goods or
services for consumption. It represents the overall profits and earnings generated by the
system's operation.
</p>
</li>
<li>
<strong>Reserve Pool</strong>
<p>
Reserve Pool is a Bitcoin Multisig address that serves as the bank account for this system.
All
system-related payments and expenses occur there.
</p>
</li>
<li>
<strong>Ownership token</strong>
<p>
Ownership tokens entitle holders to the system's profits.
</p>
</li>
<li>
<strong>Market valuation</strong>
<p>
Market valuation represents the anticipated future consumption valuation.
</p>
</li>
<li>
<strong>System Valuation</strong>
<p>
The higher value between production valuation and consumption valuation.
</p>
</li>
<li>
<strong>Investments</strong>
<p>
Investments help in providing for the initial production valuation and they add to the
reserve
pool.
</p>
</li>
</ul>
</div>
</article>
<article id="news" class="page hidden">
<h2>News</h2>
<ul id="news_list"></ul>
</article>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script>
const { html, render: renderElem } = uhtml;
class Router {
@ -720,28 +979,40 @@
const tokenroomMilestones = [
{
label: '1st April 2023',
title: `Token Room tokens created`,
title: `First tokens for any project created in blockchain`,
},
{
label: '3rd April 2023',
title: 'Created a new financial instrument that raised capital against Bitcoin collateral',
},
{
label: '5th April 2023',
title: `Token Room started`,
title: `Token Room officially launched physically`,
},
{
label: '7th April 2023',
title: `Tokens totally sold`,
title: `Tokens for the first proof of concept sold out`,
},
{
label: '12th April 2023',
title: `Visit by El Salvador's digital asset regulator`,
},
{
label: '17th April 2023',
title: `John's Investment`,
title: `First seed investment`,
},
{
label: '17th April 2023',
title: `Multisig hits more than 15k USD`,
title: `Project official Multisig hits more than 15k USD`,
},
{
label: '',
label: '17th April 2023',
title: `Smartcontract based market launched`,
},
{
label: '23rd April 2023',
title: `Second project BIT Sindri launched`,
}
]
const methodology = [
{
@ -886,7 +1157,7 @@
})
renderElem(newsList, html`${renderedNews}`)
})
router.addRoute('services', () => {
router.addRoute('economic_framework', () => {
})
window.onload = () => {
document.body.classList.remove('hidden')