Added more content
This commit is contained in:
sairaj mote
parent
7b4d54914f
commit
c396449926
154
css/main.css
154
css/main.css
@ -43,7 +43,7 @@ p,
|
|||||||
strong {
|
strong {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
max-width: 70ch;
|
max-width: 70ch;
|
||||||
line-height: 1.7;
|
line-height: 1.6;
|
||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -97,6 +97,34 @@ ul {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.justify-content-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-self-start {
|
||||||
|
justify-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-self-end {
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-self-center {
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-self-start {
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-self-end {
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-self-center {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-column {
|
.flex-column {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
@ -219,12 +247,6 @@ section {
|
|||||||
section:nth-of-type(2) {
|
section:nth-of-type(2) {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
section:nth-of-type(4) {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
section:nth-of-type(4) p {
|
|
||||||
max-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header {
|
.section-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -325,37 +347,102 @@ section:nth-of-type(4) p {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#poc_images {
|
.carousel:has(.project) {
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1vw;
|
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||||
grid-template-columns: 1fr 1fr;
|
width: 100%;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
border: solid thin rgba(var(--text-color), 0.1);
|
||||||
|
background-color: rgba(var(--foreground-color), 1);
|
||||||
|
box-shadow: 0 0.5rem 1rem rgba(var(--text-color), 0.1);
|
||||||
}
|
}
|
||||||
#poc_images .span-2 {
|
.project__images {
|
||||||
grid-column: span 2;
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
#poc_images .poc-wrapper {
|
.project__image {
|
||||||
overflow: hidden;
|
display: flex;
|
||||||
border-radius: 0.5rem;
|
flex: 1;
|
||||||
|
aspect-ratio: 4/3;
|
||||||
|
min-width: 12rem;
|
||||||
|
height: 30vmax;
|
||||||
}
|
}
|
||||||
#poc_images img {
|
.project__image img {
|
||||||
height: 24vmax;
|
min-height: 30vmax;
|
||||||
|
width: 100%;
|
||||||
-o-object-fit: cover;
|
-o-object-fit: cover;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
transition: transform 0.3s;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
#poc_images img:hover {
|
.project__images-wrapper {
|
||||||
transform: scale(1.05);
|
display: flex;
|
||||||
transition: transform 0.5s;
|
overflow-x: auto;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
.project .thumbnail-button {
|
||||||
|
width: 5rem;
|
||||||
|
aspect-ratio: 4/3;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
.project .thumbnail-button.active {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
.project .thumbnail {
|
||||||
|
-o-object-fit: cover;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.project__content {
|
||||||
|
padding: max(1rem, 2vw);
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.project__link {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(var(--text-color), 1);
|
||||||
|
background-color: rgba(var(--text-color), 0.1);
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
background-color: rgba(var(--text-color), 1);
|
||||||
|
color: rgba(var(--foreground-color), 1);
|
||||||
|
padding: 0.4rem 0.5rem;
|
||||||
|
align-self: flex-start;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
#poc_stats {
|
#poc_stats {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
border: solid thin rgba(var(--text-color), 0.5);
|
margin: 1rem 0;
|
||||||
padding: max(1.5rem, 2vw) max(1rem, 2vw);
|
padding: 1rem;
|
||||||
border-radius: 1rem;
|
background-color: rgba(var(--text-color), 0.06);
|
||||||
margin: auto;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
#poc_stats .stat {
|
#poc_stats .stat {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -364,13 +451,16 @@ section:nth-of-type(4) p {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
#poc_stats .stat__number {
|
#poc_stats .stat__number {
|
||||||
font-size: max(1.5rem, 2.5vw);
|
font-size: max(1.2rem, 1.8vmax);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
#poc_stats .stat__title {
|
#poc_stats .stat__title {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#economics_section h2 {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
#economics_section ul {
|
#economics_section ul {
|
||||||
-moz-columns: 3 16rem;
|
-moz-columns: 3 16rem;
|
||||||
columns: 3 16rem;
|
columns: 3 16rem;
|
||||||
@ -385,7 +475,6 @@ section:nth-of-type(4) p {
|
|||||||
background-color: rgba(var(--text-color), 0.06);
|
background-color: rgba(var(--text-color), 0.06);
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
padding: max(1rem, 2vw);
|
padding: max(1rem, 2vw);
|
||||||
text-align: center;
|
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
-moz-column-break-inside: avoid;
|
-moz-column-break-inside: avoid;
|
||||||
break-inside: avoid;
|
break-inside: avoid;
|
||||||
@ -396,6 +485,7 @@ section:nth-of-type(4) p {
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));
|
||||||
gap: 3rem 1.5rem;
|
gap: 3rem 1.5rem;
|
||||||
|
margin-top: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-member {
|
.team-member {
|
||||||
@ -449,12 +539,22 @@ section:nth-of-type(4) p {
|
|||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#media_coverage_section .carousel {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
#media_coverage_section .carousel > * {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: min(100% - 2rem, 32rem);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
#social_links {
|
#social_links {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
margin-top: 3rem;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||||
}
|
}
|
||||||
#social_links li {
|
#social_links li {
|
||||||
|
|||||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
150
css/main.scss
150
css/main.scss
@ -41,7 +41,7 @@ p,
|
|||||||
strong {
|
strong {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
max-width: 70ch;
|
max-width: 70ch;
|
||||||
line-height: 1.7;
|
line-height: 1.6;
|
||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
@ -81,6 +81,27 @@ ul {
|
|||||||
.justify-content-center {
|
.justify-content-center {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
.justify-content-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.justify-self-start {
|
||||||
|
justify-self: start;
|
||||||
|
}
|
||||||
|
.justify-self-end {
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
.justify-self-center {
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
.align-self-start {
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
.align-self-end {
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
|
.align-self-center {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
.flex-column {
|
.flex-column {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
@ -188,12 +209,6 @@ section {
|
|||||||
&:nth-of-type(2) {
|
&:nth-of-type(2) {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
&:nth-of-type(4) {
|
|
||||||
text-align: center;
|
|
||||||
p {
|
|
||||||
max-width: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.section-header {
|
.section-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -290,42 +305,104 @@ section {
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#poc_images {
|
.carousel:has(.project) {
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
}
|
||||||
|
.project {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1vw;
|
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||||
grid-template-columns: 1fr 1fr;
|
width: 100%;
|
||||||
.span-2 {
|
border-radius: 0.8rem;
|
||||||
grid-column: span 2;
|
border: solid thin rgba(var(--text-color), 0.1);
|
||||||
|
background-color: rgba(var(--foreground-color), 1);
|
||||||
|
box-shadow: 0 0.5rem 1rem rgba(var(--text-color), 0.1);
|
||||||
|
&__images {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
.poc-wrapper {
|
&__image {
|
||||||
overflow: hidden;
|
display: flex;
|
||||||
border-radius: 0.5rem;
|
flex: 1;
|
||||||
}
|
aspect-ratio: 4/3;
|
||||||
img {
|
min-width: 12rem;
|
||||||
height: 24vmax;
|
height: 30vmax;
|
||||||
object-fit: cover;
|
img {
|
||||||
transition: transform 0.3s;
|
min-height: 30vmax;
|
||||||
&:hover {
|
width: 100%;
|
||||||
transform: scale(1.05);
|
object-fit: cover;
|
||||||
transition: transform 0.5s;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&__images-wrapper {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
.thumbnail-button {
|
||||||
|
width: 5rem;
|
||||||
|
aspect-ratio: 4/3;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
&.active {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.thumbnail {
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
&__content {
|
||||||
|
padding: max(1rem, 2vw);
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
&__link {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(var(--text-color), 1);
|
||||||
|
background-color: rgba(var(--text-color), 0.1);
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.badge {
|
||||||
|
background-color: rgba(var(--text-color), 1);
|
||||||
|
color: rgba(var(--foreground-color), 1);
|
||||||
|
padding: 0.4rem 0.5rem;
|
||||||
|
align-self: flex-start;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
#poc_stats {
|
#poc_stats {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
border: solid thin rgba(var(--text-color), 0.5);
|
margin: 1rem 0;
|
||||||
padding: max(1.5rem, 2vw) max(1rem, 2vw);
|
padding: 1rem;
|
||||||
border-radius: 1rem;
|
background-color: rgba(var(--text-color), 0.06);
|
||||||
margin: auto;
|
border-radius: 0.5rem;
|
||||||
.stat {
|
.stat {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
&__number {
|
&__number {
|
||||||
font-size: max(1.5rem, 2.5vw);
|
font-size: max(1.2rem, 1.8vmax);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
&__title {
|
&__title {
|
||||||
@ -334,6 +411,9 @@ section {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
#economics_section {
|
#economics_section {
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
ul {
|
ul {
|
||||||
columns: 3 16rem;
|
columns: 3 16rem;
|
||||||
column-gap: 0.5rem;
|
column-gap: 0.5rem;
|
||||||
@ -346,7 +426,6 @@ section {
|
|||||||
background-color: rgba(var(--text-color), 0.06);
|
background-color: rgba(var(--text-color), 0.06);
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
padding: max(1rem, 2vw);
|
padding: max(1rem, 2vw);
|
||||||
text-align: center;
|
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
break-inside: avoid;
|
break-inside: avoid;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
@ -357,6 +436,7 @@ section {
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));
|
||||||
gap: 3rem 1.5rem;
|
gap: 3rem 1.5rem;
|
||||||
|
margin-top: 3rem;
|
||||||
}
|
}
|
||||||
.team-member {
|
.team-member {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -407,6 +487,17 @@ section {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#media_coverage_section {
|
||||||
|
.carousel {
|
||||||
|
gap: 1rem;
|
||||||
|
& > * {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: min(calc(100% - 2rem), 32rem);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#socials_section {
|
#socials_section {
|
||||||
}
|
}
|
||||||
#social_links {
|
#social_links {
|
||||||
@ -415,6 +506,7 @@ section {
|
|||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
margin-top: 3rem;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||||
li {
|
li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
462
index.html
462
index.html
@ -73,202 +73,6 @@
|
|||||||
<p>A global reference of tokenization aiming financial inclusiveness</p>
|
<p>A global reference of tokenization aiming financial inclusiveness</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section id="payment_section" class="gap-1-5">
|
|
||||||
<div class="grid">
|
|
||||||
<h4>International Payments</h4>
|
|
||||||
<h2>Pay with Bitcoin</h2>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
Explore the world with seamless property rentals,
|
|
||||||
powered by Bitcoin payments from anywhere on the globe!
|
|
||||||
</p>
|
|
||||||
<img id="bitcoin_lineart" src="assets/svg/bitcoin line art.svg" alt="">
|
|
||||||
</section>
|
|
||||||
<section id="el_salvador_section">
|
|
||||||
<img src="assets/svg/el-salvador.svg" alt="" id="el_salvador_map">
|
|
||||||
<div class="grid gap-2">
|
|
||||||
<div class="grid">
|
|
||||||
<h4>Why</h4>
|
|
||||||
<h2>El Salvador?</h2>
|
|
||||||
</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.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
By being an early adopter, El Salvador is gaining a first mover advantage in the crypto space
|
|
||||||
for
|
|
||||||
itself and its entrepreneurs.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
They are also creating a global community of crypto enthusiasts
|
|
||||||
and
|
|
||||||
becoming a focal point for crypto infrastructure worldwide.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h4 class="section-header">Proof of Concept</h4>
|
|
||||||
<div class="grid gap-2">
|
|
||||||
<p>
|
|
||||||
A tokenized room at El Zonte beach, El Salvador
|
|
||||||
</p>
|
|
||||||
<div id="poc_images">
|
|
||||||
<div class="poc-wrapper span-2">
|
|
||||||
<img src="assets/poc/poc3.jpg" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="poc-wrapper span-2">
|
|
||||||
<img src="assets/poc/poc1.jpg" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="poc-wrapper">
|
|
||||||
<img src="assets/poc/poc6.jpg" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="poc-wrapper span-2">
|
|
||||||
<img src="assets/poc/poc2.jpg" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="poc-wrapper">
|
|
||||||
<img src="assets/poc/poc5.jpg" alt="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul id="poc_stats">
|
|
||||||
<li class="stat">
|
|
||||||
<div class="stat__number">1030</div>
|
|
||||||
<div class="stat__title">Nights invested</div>
|
|
||||||
</li>
|
|
||||||
<li class="stat">
|
|
||||||
<div class="stat__number">20</div>
|
|
||||||
<div class="stat__title">Nights consumed</div>
|
|
||||||
</li>
|
|
||||||
<li class="stat">
|
|
||||||
<div class="stat__number">4</div>
|
|
||||||
<div class="stat__title">Invested nights consumed</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h2>
|
|
||||||
Methodology
|
|
||||||
</h2>
|
|
||||||
<div id="methodology_wrapper" class="carousel"> </div>
|
|
||||||
<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>
|
|
||||||
</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">
|
|
||||||
<h4 class="section-header">
|
|
||||||
Economics
|
|
||||||
</h4>
|
|
||||||
<div class="grid gap-1">
|
|
||||||
<div class="text-center">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>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h4 class="section-header">Team</h4>
|
|
||||||
<ul id="team_members"></ul>
|
|
||||||
<dialog id="member_details">
|
|
||||||
<img src="" alt="" id="member_image">
|
|
||||||
<h2 id="member_name">Sairaj Mote</h2>
|
|
||||||
<p id="member_title">
|
|
||||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam voluptatum aliquam unde dignissimos
|
|
||||||
hic non quae dolores quibusdam illo excepturi dolore repellat asperiores, nihil vel libero
|
|
||||||
architecto veniam et dicta?
|
|
||||||
</p>
|
|
||||||
</dialog>
|
|
||||||
</section>
|
|
||||||
<section>
|
<section>
|
||||||
<h4 class="section-header">Blockchain Network Partners </h4>
|
<h4 class="section-header">Blockchain Network Partners </h4>
|
||||||
<ul id="partners">
|
<ul id="partners">
|
||||||
@ -349,8 +153,230 @@
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</section>
|
</section>
|
||||||
|
<section id="payment_section" class="gap-1-5">
|
||||||
|
<div class="grid">
|
||||||
|
<h4>International Payments</h4>
|
||||||
|
<h2>Pay with Bitcoin</h2>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Explore the world with seamless property rentals,
|
||||||
|
powered by Bitcoin payments from anywhere on the globe!
|
||||||
|
</p>
|
||||||
|
<img id="bitcoin_lineart" src="assets/svg/bitcoin line art.svg" alt="">
|
||||||
|
</section>
|
||||||
|
<section id="el_salvador_section">
|
||||||
|
<img src="assets/svg/el-salvador.svg" alt="" id="el_salvador_map">
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<div class="grid">
|
||||||
|
<h4>Why</h4>
|
||||||
|
<h2>El Salvador?</h2>
|
||||||
|
</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.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
By being an early adopter, El Salvador is gaining a first mover advantage in the crypto space
|
||||||
|
for
|
||||||
|
itself and its entrepreneurs.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
They are also creating a global community of crypto enthusiasts
|
||||||
|
and
|
||||||
|
becoming a focal point for crypto infrastructure worldwide.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Projects</h2>
|
||||||
|
<div class="carousel">
|
||||||
|
<div class="project">
|
||||||
|
<div class="project__images grid">
|
||||||
|
<div class="project__image">
|
||||||
|
<img 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="">
|
||||||
|
</button>
|
||||||
|
<button class="thumbnail-button">
|
||||||
|
<img src="assets/poc/poc1.jpg" class="thumbnail" alt="">
|
||||||
|
</button>
|
||||||
|
<button class="thumbnail-button">
|
||||||
|
<img src="assets/poc/poc2.jpg" class="thumbnail" alt="">
|
||||||
|
</button>
|
||||||
|
<button class="thumbnail-button">
|
||||||
|
<img 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>
|
||||||
|
</div>
|
||||||
|
<h3 class="project__title">Tokenroom</h3>
|
||||||
|
</div>
|
||||||
|
<p class="project__description">
|
||||||
|
A tokenized room at El Zonte beach, El Salvador
|
||||||
|
</p>
|
||||||
|
<ul id="poc_stats">
|
||||||
|
<li class="stat">
|
||||||
|
<div class="stat__number">1030</div>
|
||||||
|
<div class="stat__title">Nights invested</div>
|
||||||
|
</li>
|
||||||
|
<li class="stat">
|
||||||
|
<div class="stat__number">20</div>
|
||||||
|
<div class="stat__title">Nights consumed</div>
|
||||||
|
</li>
|
||||||
|
<li class="stat">
|
||||||
|
<div class="stat__number">4</div>
|
||||||
|
<div class="stat__title">Invested nights consumed</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#/tokenroom" class="project__link">Learn more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>
|
||||||
|
Methodology
|
||||||
|
</h2>
|
||||||
|
<div id="methodology_wrapper" class="carousel"> </div>
|
||||||
|
<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>
|
||||||
|
</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">
|
||||||
|
<h2>
|
||||||
|
Economics
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Team</h4>
|
||||||
|
<ul id="team_members"></ul>
|
||||||
|
<dialog id="member_details">
|
||||||
|
<img src="" alt="" id="member_image">
|
||||||
|
<h2 id="member_name">Sairaj Mote</h2>
|
||||||
|
<p id="member_title">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam voluptatum aliquam unde
|
||||||
|
dignissimos
|
||||||
|
hic non quae dolores quibusdam illo excepturi dolore repellat asperiores, nihil vel libero
|
||||||
|
architecto veniam et dicta?
|
||||||
|
</p>
|
||||||
|
</dialog>
|
||||||
|
</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"
|
||||||
|
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"
|
||||||
|
title="YouTube video player" frameborder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||||
|
allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<section id="socials_section">
|
<section id="socials_section">
|
||||||
<h4 class="section-header">Socials</h4>
|
<h2>Socials</h2>
|
||||||
<ul id="social_links">
|
<ul id="social_links">
|
||||||
<li>
|
<li>
|
||||||
<a href="https://twitter.com/ProjectBSV" target="_blank">
|
<a href="https://twitter.com/ProjectBSV" target="_blank">
|
||||||
@ -436,10 +462,16 @@
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://iris.to/projectb" target="_blank">
|
<a href="https://www.youtube.com/@ProjectBSV" target="_blank">
|
||||||
<img class="icon" src="https://iris.to/assets/icon128-e988831c.png" alt="">
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="159" height="110"
|
||||||
|
viewbox="0 0 159 110">
|
||||||
|
<path
|
||||||
|
d="m154 17.5c-1.82-6.73-7.07-12-13.8-13.8-9.04-3.49-96.6-5.2-122 0.1-6.73 1.82-12 7.07-13.8 13.8-4.08 17.9-4.39 56.6 0.1 74.9 1.82 6.73 7.07 12 13.8 13.8 17.9 4.12 103 4.7 122 0 6.73-1.82 12-7.07 13.8-13.8 4.35-19.5 4.66-55.8-0.1-75z"
|
||||||
|
fill="#f00" />
|
||||||
|
<path d="m105 55-40.8-23.4v46.8z" fill="#fff" />
|
||||||
|
</svg>
|
||||||
<span>
|
<span>
|
||||||
Iris
|
Youtube
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@ -465,6 +497,14 @@
|
|||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://iris.to/projectb" target="_blank">
|
||||||
|
<img class="icon" src="https://iris.to/assets/icon128-e988831c.png" alt="">
|
||||||
|
<span>
|
||||||
|
Iris
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
@ -746,6 +786,28 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function showImage(e) {
|
||||||
|
if (e.target.closest('img')) {
|
||||||
|
const image = e.target.closest('img')
|
||||||
|
const imageSrc = image.getAttribute('src')
|
||||||
|
const imageButton = image.parentElement
|
||||||
|
const target = image.closest('.project').querySelector('.project__image img')
|
||||||
|
target.setAttribute('src', imageSrc)
|
||||||
|
imageButton.classList.add('active')
|
||||||
|
imageButton.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
inline: 'center',
|
||||||
|
block: 'nearest'
|
||||||
|
})
|
||||||
|
const siblings = Array.from(imageButton.parentElement.children)
|
||||||
|
siblings.forEach(sibling => {
|
||||||
|
if (sibling !== imageButton) {
|
||||||
|
sibling.classList.remove('active')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user