diff --git a/css/main.css b/css/main.css index e232161..40734b5 100644 --- a/css/main.css +++ b/css/main.css @@ -25,6 +25,7 @@ body { --green: #1cad59; --yellow: rgb(220, 165, 0); --inline-padding: max(1rem, 6vw); + background-color: rgba(var(--background-color), 1); } body[data-theme=dark] { @@ -260,6 +261,70 @@ section:nth-of-type(4) p { transform: translateX(-50%); } +.carousel { + display: flex; + overflow-x: auto; + border-radius: 0.5rem; + margin-top: 1.5rem; + scroll-snap-type: x mandatory; + scroll-padding: 0 calc(1 * var(--inline-padding)); + margin: 3rem calc(-1 * var(--inline-padding)); + padding: 1rem calc(1 * var(--inline-padding)); + scrollbar-width: none; +} +.carousel::-webkit-scrollbar { + display: none; +} + +.milestone { + position: relative; + display: flex; + flex-direction: column; + gap: 1rem; + width: min(100% - 1rem, 28rem); + flex-shrink: 0; + scroll-snap-align: start; + padding-right: 3rem; +} +.milestone:last-of-type { + padding-right: 0; +} +.milestone:last-of-type .milestone__label::before { + display: none; +} +.milestone__label { + display: flex; + align-items: center; + 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; +} +.milestone__label::before { + position: absolute; + content: ""; + display: block; + width: 100%; + height: 0.1rem; + background-color: rgba(var(--text-color), 0.3); + z-index: -1; +} +.milestone__title { + margin-top: 3rem; +} + +.carousel-control { + display: flex; + border: none; + background: none; + padding: 0.8rem; + border: solid thin rgba(var(--text-color), 0.5); + border-radius: 50%; + cursor: pointer; +} + #poc_images { display: grid; gap: 1vw; @@ -268,16 +333,19 @@ section:nth-of-type(4) p { #poc_images .span-2 { grid-column: span 2; } +#poc_images .poc-wrapper { + overflow: hidden; + border-radius: 0.5rem; +} #poc_images img { height: 24vmax; -o-object-fit: cover; object-fit: cover; - border-radius: 0.5rem; - transition: filter 0.2s ease; - filter: brightness(0.8); + transition: transform 0.3s; } #poc_images img:hover { - filter: brightness(1); + transform: scale(1.05); + transition: transform 0.5s; } #poc_stats { @@ -507,7 +575,7 @@ section:nth-of-type(4) p { } } @media screen and (max-width: 768px) { - #poc_images img:nth-of-type(5) { + #poc_images .poc-wrapper:nth-of-type(5) { grid-area: 3/2/4/3; } .hide-on-small { @@ -529,6 +597,11 @@ section:nth-of-type(4) p { display: none !important; } } +@media screen and (any-hover: none) { + .carousel-controls { + display: none; + } +} @media screen and (any-hover: hover) { #main_header ul a:hover::after { width: 1rem; diff --git a/css/main.min.css b/css/main.min.css index 9612728..e1c5062 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--inline-padding: max(1rem, 6vw)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}h1{font-size:max(1.8rem,4vw)}h2{font-size:max(1.5rem,3vw)}h3{font-size:max(1.2rem,2vw)}h4{font-size:max(1rem,1.3vw)}img{-o-object-fit:contain;object-fit:contain}ul{list-style:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.flex-column{flex-direction:column}.flex-1{flex:1}.grid{display:grid}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.gap-4{gap:4rem}.text-center{text-align:center}article{padding-top:4rem}article>*{padding:max(1rem,2vw) var(--inline-padding)}#main_header{display:flex;align-items:center;justify-content:space-between;position:fixed;left:0;right:0;top:0;background-color:rgba(var(--foreground-color), 0.5);z-index:2;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);padding:max(1rem,2vw) var(--inline-padding)}#main_header a{color:rgba(var(--text-color), 0.9);text-decoration:none}#main_header ul{list-style:none;display:flex;gap:.8rem}#main_header ul a{font-weight:500;font-size:.9rem}#main_header ul a::after{content:"";display:block;width:0;height:.15rem;background:var(--accent-color);transition:width .3s;margin:auto}#main_header ul a.active::after{width:1rem}#main_header ul .icon{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}#above_fold p{max-width:none}#hero_illustration{width:min(100%,26rem);margin:auto}section{display:grid;position:relative;min-height:90vh;align-content:center}section:nth-of-type(2){overflow:hidden}section:nth-of-type(4){text-align:center}section:nth-of-type(4) p{max-width:none}.section-header{display:flex;flex-direction:column;text-align:center;margin-bottom:3rem}.section-header::after{content:"•••";line-height:.5}#bitcoin_lineart{position:absolute;opacity:.2;height:80vh;width:auto;align-self:center;right:0}#el_salvador_section{position:relative;overflow:hidden}#el_salvador_map{position:absolute;opacity:.06;top:0;width:max(100vh,90vw);height:auto;left:50%;transform:translateX(-50%)}#poc_images{display:grid;gap:1vw;grid-template-columns:1fr 1fr}#poc_images .span-2{grid-column:span 2}#poc_images img{height:24vmax;-o-object-fit:cover;object-fit:cover;border-radius:.5rem;transition:filter .2s ease;filter:brightness(0.8)}#poc_images img:hover{filter:brightness(1)}#poc_stats{list-style:none;display:flex;gap:1rem;border:solid thin rgba(var(--text-color), 0.5);padding:max(1.5rem,2vw) max(1rem,2vw);border-radius:1rem;margin:auto}#poc_stats .stat{display:flex;flex-direction:column;gap:.5rem;flex:1}#poc_stats .stat__number{font-size:max(1.5rem,2.5vw);font-weight:700}#poc_stats .stat__title{font-size:.9rem}#economics_section ul{-moz-columns:3 16rem;columns:3 16rem;-moz-column-gap:.5rem;column-gap:.5rem}#economics_section li{display:grid;gap:.5rem;align-items:flex-start;align-content:flex-start;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem;padding:max(1rem,2vw);text-align:center;page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;margin-bottom:.5rem}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));gap:3rem 1.5rem}.team-member{display:flex;flex-direction:column;text-align:center}.team-member img{-o-object-fit:cover;object-fit:cover;width:100%;aspect-ratio:3/3.5;border-radius:1rem;margin-bottom:1.2rem}.team-member__name{font-weight:700;font-size:1rem;line-height:1.2}.team-member__title{line-height:normal;font-weight:500;font-size:.9rem}#partners{display:flex;flex-wrap:wrap;gap:1rem;margin:auto;justify-content:space-evenly}#partners a,#partners li:not(li:has(a)){display:flex;flex-direction:column;gap:.8rem;text-align:center;align-items:center;padding:1rem;text-decoration:none}#partners a .icon,#partners li:not(li:has(a)) .icon{width:2rem;height:2rem}#partners span{font-weight:500;color:rgba(var(--text-color), 0.8)}#social_links{display:flex;flex-wrap:wrap;gap:.5rem;justify-items:center;width:100%;grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}#social_links li{width:100%;justify-content:center;box-shadow:0 0 0 0 rgba(var(--text-color), 1);transition:box-shadow .1s ease;flex:1 1 8rem;border-radius:.5rem}#social_links li:hover{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1)}#social_links a{display:flex;width:100%;gap:.5rem;text-decoration:none;color:rgba(var(--text-color), 0.9);padding:1rem;justify-content:center;border-radius:inherit;background-color:rgba(var(--text-color), 0.06);font-weight:500}#services ul{-moz-columns:4 16rem;columns:4 16rem;-moz-column-gap:.5rem;column-gap:.5rem}#services li{display:grid;aspect-ratio:1/1;padding:max(1rem,2vw);border:solid thin rgba(var(--text-color), 0.2);border-radius:.5rem;text-align:center;font-weight:500;align-content:flex-end;align-items:flex-end;-webkit-animation:slide-up .5s ease var(--delay) forwards;animation:slide-up .5s ease var(--delay) forwards;opacity:0;margin-bottom:.5rem;-moz-column-break-inside:avoid;break-inside:avoid;page-break-inside:avoid}#news_list{display:grid;gap:.5rem}#news_list li{container:news-item/inline-size}.news-item{display:grid;grid-template-columns:auto 1fr;grid-template-areas:" icon ." "icon ." "icon ." "icon .";gap:.5rem 1rem;border:solid thin rgba(var(--text-color), 0.5);border-radius:.5rem;padding:max(1rem,2vw);text-decoration:none;color:rgba(var(--text-color), 0.9);-webkit-animation:slide-up .5s ease var(--delay) forwards;animation:slide-up .5s ease var(--delay) forwards;opacity:0}.news-item__icon{grid-area:icon}.news-item__icon .icon{height:2rem;width:2rem}.news-item__date{background-color:rgba(var(--text-color), 0.1);margin-right:auto;padding:.1rem .5rem;border-radius:.3rem;font-weight:500;font-size:.8rem}@-webkit-keyframes slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@container news-item (max-width: 400px){.news-item{grid-template-areas:none;grid-template-columns:1fr}.news-item__icon{grid-area:unset}}@media screen and (max-width: 768px){#poc_images img:nth-of-type(5){grid-area:3/2/4/3}.hide-on-small{display:none !important}}@media screen and (min-width: 768px){body{--inline-padding: max(1rem, 12vw)}#bitcoin_lineart{opacity:.6;left:calc(100% - 50vw)}#poc_images{grid-template-columns:repeat(4, 1fr)}.hide-on-large{display:none !important}}@media screen and (any-hover: hover){#main_header ul a:hover::after{width:1rem}}.hidden{display:none} \ No newline at end of file +*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--inline-padding: max(1rem, 6vw);background-color:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}h1{font-size:max(1.8rem,4vw)}h2{font-size:max(1.5rem,3vw)}h3{font-size:max(1.2rem,2vw)}h4{font-size:max(1rem,1.3vw)}img{-o-object-fit:contain;object-fit:contain}ul{list-style:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.flex-column{flex-direction:column}.flex-1{flex:1}.grid{display:grid}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.gap-4{gap:4rem}.text-center{text-align:center}article{padding-top:4rem}article>*{padding:max(1rem,2vw) var(--inline-padding)}#main_header{display:flex;align-items:center;justify-content:space-between;position:fixed;left:0;right:0;top:0;background-color:rgba(var(--foreground-color), 0.5);z-index:2;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);padding:max(1rem,2vw) var(--inline-padding)}#main_header a{color:rgba(var(--text-color), 0.9);text-decoration:none}#main_header ul{list-style:none;display:flex;gap:.8rem}#main_header ul a{font-weight:500;font-size:.9rem}#main_header ul a::after{content:"";display:block;width:0;height:.15rem;background:var(--accent-color);transition:width .3s;margin:auto}#main_header ul a.active::after{width:1rem}#main_header ul .icon{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}#above_fold p{max-width:none}#hero_illustration{width:min(100%,26rem);margin:auto}section{display:grid;position:relative;min-height:90vh;align-content:center}section:nth-of-type(2){overflow:hidden}section:nth-of-type(4){text-align:center}section:nth-of-type(4) p{max-width:none}.section-header{display:flex;flex-direction:column;text-align:center;margin-bottom:3rem}.section-header::after{content:"•••";line-height:.5}#bitcoin_lineart{position:absolute;opacity:.2;height:80vh;width:auto;align-self:center;right:0}#el_salvador_section{position:relative;overflow:hidden}#el_salvador_map{position:absolute;opacity:.06;top:0;width:max(100vh,90vw);height:auto;left:50%;transform:translateX(-50%)}.carousel{display:flex;overflow-x:auto;border-radius:.5rem;margin-top:1.5rem;scroll-snap-type:x mandatory;scroll-padding:0 calc(1*var(--inline-padding));margin:3rem calc(-1*var(--inline-padding));padding:1rem calc(1*var(--inline-padding));scrollbar-width:none}.carousel::-webkit-scrollbar{display:none}.milestone{position:relative;display:flex;flex-direction:column;gap:1rem;width:min(100% - 1rem,28rem);flex-shrink:0;scroll-snap-align:start;padding-right:3rem}.milestone:last-of-type{padding-right:0}.milestone:last-of-type .milestone__label::before{display:none}.milestone__label{display:flex;align-items:center;background-color:rgba(var(--text-color), 1);color:rgba(var(--foreground-color), 1);padding:.4rem .5rem;align-self:flex-start;border-radius:.3rem;font-size:.9rem}.milestone__label::before{position:absolute;content:"";display:block;width:100%;height:.1rem;background-color:rgba(var(--text-color), 0.3);z-index:-1}.milestone__title{margin-top:3rem}.carousel-control{display:flex;border:none;background:none;padding:.8rem;border:solid thin rgba(var(--text-color), 0.5);border-radius:50%;cursor:pointer}#poc_images{display:grid;gap:1vw;grid-template-columns:1fr 1fr}#poc_images .span-2{grid-column:span 2}#poc_images .poc-wrapper{overflow:hidden;border-radius:.5rem}#poc_images img{height:24vmax;-o-object-fit:cover;object-fit:cover;transition:transform .3s}#poc_images img:hover{transform:scale(1.05);transition:transform .5s}#poc_stats{list-style:none;display:flex;gap:1rem;border:solid thin rgba(var(--text-color), 0.5);padding:max(1.5rem,2vw) max(1rem,2vw);border-radius:1rem;margin:auto}#poc_stats .stat{display:flex;flex-direction:column;gap:.5rem;flex:1}#poc_stats .stat__number{font-size:max(1.5rem,2.5vw);font-weight:700}#poc_stats .stat__title{font-size:.9rem}#economics_section ul{-moz-columns:3 16rem;columns:3 16rem;-moz-column-gap:.5rem;column-gap:.5rem}#economics_section li{display:grid;gap:.5rem;align-items:flex-start;align-content:flex-start;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem;padding:max(1rem,2vw);text-align:center;page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;margin-bottom:.5rem}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));gap:3rem 1.5rem}.team-member{display:flex;flex-direction:column;text-align:center}.team-member img{-o-object-fit:cover;object-fit:cover;width:100%;aspect-ratio:3/3.5;border-radius:1rem;margin-bottom:1.2rem}.team-member__name{font-weight:700;font-size:1rem;line-height:1.2}.team-member__title{line-height:normal;font-weight:500;font-size:.9rem}#partners{display:flex;flex-wrap:wrap;gap:1rem;margin:auto;justify-content:space-evenly}#partners a,#partners li:not(li:has(a)){display:flex;flex-direction:column;gap:.8rem;text-align:center;align-items:center;padding:1rem;text-decoration:none}#partners a .icon,#partners li:not(li:has(a)) .icon{width:2rem;height:2rem}#partners span{font-weight:500;color:rgba(var(--text-color), 0.8)}#social_links{display:flex;flex-wrap:wrap;gap:.5rem;justify-items:center;width:100%;grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}#social_links li{width:100%;justify-content:center;box-shadow:0 0 0 0 rgba(var(--text-color), 1);transition:box-shadow .1s ease;flex:1 1 8rem;border-radius:.5rem}#social_links li:hover{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1)}#social_links a{display:flex;width:100%;gap:.5rem;text-decoration:none;color:rgba(var(--text-color), 0.9);padding:1rem;justify-content:center;border-radius:inherit;background-color:rgba(var(--text-color), 0.06);font-weight:500}#services ul{-moz-columns:4 16rem;columns:4 16rem;-moz-column-gap:.5rem;column-gap:.5rem}#services li{display:grid;aspect-ratio:1/1;padding:max(1rem,2vw);border:solid thin rgba(var(--text-color), 0.2);border-radius:.5rem;text-align:center;font-weight:500;align-content:flex-end;align-items:flex-end;-webkit-animation:slide-up .5s ease var(--delay) forwards;animation:slide-up .5s ease var(--delay) forwards;opacity:0;margin-bottom:.5rem;-moz-column-break-inside:avoid;break-inside:avoid;page-break-inside:avoid}#news_list{display:grid;gap:.5rem}#news_list li{container:news-item/inline-size}.news-item{display:grid;grid-template-columns:auto 1fr;grid-template-areas:" icon ." "icon ." "icon ." "icon .";gap:.5rem 1rem;border:solid thin rgba(var(--text-color), 0.5);border-radius:.5rem;padding:max(1rem,2vw);text-decoration:none;color:rgba(var(--text-color), 0.9);-webkit-animation:slide-up .5s ease var(--delay) forwards;animation:slide-up .5s ease var(--delay) forwards;opacity:0}.news-item__icon{grid-area:icon}.news-item__icon .icon{height:2rem;width:2rem}.news-item__date{background-color:rgba(var(--text-color), 0.1);margin-right:auto;padding:.1rem .5rem;border-radius:.3rem;font-weight:500;font-size:.8rem}@-webkit-keyframes slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@container news-item (max-width: 400px){.news-item{grid-template-areas:none;grid-template-columns:1fr}.news-item__icon{grid-area:unset}}@media screen and (max-width: 768px){#poc_images .poc-wrapper:nth-of-type(5){grid-area:3/2/4/3}.hide-on-small{display:none !important}}@media screen and (min-width: 768px){body{--inline-padding: max(1rem, 12vw)}#bitcoin_lineart{opacity:.6;left:calc(100% - 50vw)}#poc_images{grid-template-columns:repeat(4, 1fr)}.hide-on-large{display:none !important}}@media screen and (any-hover: none){.carousel-controls{display:none}}@media screen and (any-hover: hover){#main_header ul a:hover::after{width:1rem}}.hidden{display:none} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 42c34c6..edee18a 100644 --- a/css/main.scss +++ b/css/main.scss @@ -23,6 +23,7 @@ body { --green: #1cad59; --yellow: rgb(220, 165, 0); --inline-padding: max(1rem, 6vw); + background-color: rgba(var(--background-color), 1); } body[data-theme="dark"] { @@ -226,6 +227,69 @@ section { left: 50%; transform: translateX(-50%); } +.carousel { + display: flex; + overflow-x: auto; + border-radius: 0.5rem; + margin-top: 1.5rem; + scroll-snap-type: x mandatory; + scroll-padding: 0 calc(1 * var(--inline-padding)); + margin: 3rem calc(-1 * var(--inline-padding)); + padding: 1rem calc(1 * var(--inline-padding)); + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } +} +.milestone { + position: relative; + display: flex; + flex-direction: column; + gap: 1rem; + width: min(calc(100% - 1rem), 28rem); + flex-shrink: 0; + scroll-snap-align: start; + padding-right: 3rem; + &:last-of-type { + padding-right: 0; + .milestone__label { + &::before { + display: none; + } + } + } + &__label { + display: flex; + align-items: center; + 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; + &::before { + position: absolute; + content: ""; + display: block; + width: 100%; + height: 0.1rem; + background-color: rgba(var(--text-color), 0.3); + z-index: -1; + } + } + &__title { + margin-top: 3rem; + } +} +.carousel-control { + display: flex; + border: none; + background: none; + padding: 0.8rem; + border: solid thin rgba(var(--text-color), 0.5); + border-radius: 50%; + cursor: pointer; +} #poc_images { display: grid; gap: 1vw; @@ -233,14 +297,17 @@ section { .span-2 { grid-column: span 2; } + .poc-wrapper { + overflow: hidden; + border-radius: 0.5rem; + } img { height: 24vmax; object-fit: cover; - border-radius: 0.5rem; - transition: filter 0.2s ease; - filter: brightness(0.8); + transition: transform 0.3s; &:hover { - filter: brightness(1); + transform: scale(1.05); + transition: transform 0.5s; } } } @@ -452,7 +519,7 @@ section { } @media screen and (max-width: 768px) { #poc_images { - img { + .poc-wrapper { &:nth-of-type(5) { grid-area: 3/2/4/3; } @@ -477,7 +544,11 @@ section { display: none !important; } } - +@media screen and (any-hover: none) { + .carousel-controls { + display: none; + } +} @media screen and (any-hover: hover) { #main_header { ul { diff --git a/index.html b/index.html index cd1aa7e..f46777a 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,40 @@
+
@@ -86,11 +120,21 @@ A tokenized room at El Zonte beach, El Salvador

- - - - - +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
  • @@ -110,31 +154,25 @@
-

+

Methodology -

-
-

- The process involves identifying a token project and creating an initial white paper. The economic - system is designed to ensure the token gains valuation through regular operations without relying - solely - on consistent investments. -

-

- A core group of individuals knowledgeable in business and technology is - formed. A small pilot is conducted to test the technology and address financial issues. - Regulatory - infrastructure and permissions are established. Market proof of concept is created to attract more - participants over time. -

-

- Once the proof of concept is successful, the initial token system is upgraded to - a larger system with bigger investors. -

-

- Finally, as the token gains critical mass and becomes - self-sufficient, the core management is decentralized. -

+ + +
+ +
@@ -504,13 +542,8 @@ } const router = new Router({ routingStart(state) { - if ("scrollRestoration" in history) { - history.scrollRestoration = "manual"; - } - window.scrollTo(0, 0); }, routingEnd(state) { - console.log(state) const pages = document.querySelectorAll('.page') pages.forEach(page => { if (page.id === (state.page === '' ? 'home' : state.page)) { @@ -533,14 +566,63 @@ ${`${name}

${name},

${title}

- - ` + + ` }) renderElem(teamMembersList, html`${renderedTeamMembers}`) document.getElementById('team_members').addEventListener('click', e => { }) + const renderedMethodology = methodology.map((step, index) => { + const { title, content } = step + return html` +
+
${index + 1}
+

${title}

+

${content}

+
+ ` + }) + renderElem(document.getElementById('methodology_wrapper'), html`${renderedMethodology}`) }) + const methodology = [ + { + title: `Identify a token project`, + content: `The first step is to identify a problem or need that can be solved with a token. This could be anything from providing access to a new market to simplifying the process of managing assets.`, + }, + { + title: 'Create the initial white paper', + content: ` The white paper is a document that describes the token project in detail. It should include information about the problem or need that the token is trying to solve, the economic system of the token, and the team behind the project.`, + }, + { + title: 'Design the economic system', + content: `The economic system of the token is important because it determines how the token will gain value. The system should be designed in a way that incentivize people to hold and use the token.`, + }, + { + title: 'Form a core group of people', + content: `The core group of people should be experts in the areas of business, technology, and law. They will be responsible for developing the token project and ensuring that it is successful.`, + }, + { + title: 'Create a very small pilot', + content: `The pilot project is a small-scale test of the token project. This is a good way to test the technology and financial issues before launching the full project.`, + }, + { + title: 'Create regulatory infrastructure and permissions', + content: `Depending on the jurisdiction, there may be regulatory requirements that need to be met before launching a token project. It is important to research these requirements and obtain the necessary permissions.`, + }, + { + title: 'Create market proof of concept', + content: `The market proof of concept is a demonstration that there is demand for the token project. This can be done by creating a community of users and generating interest in the project.`, + }, + { + title: 'Roll over the initial token system into a grander token system with bigger investors', + content: `Once the market proof of concept is established, the initial token system can be rolled over into a grander token system with bigger investors. This will allow the project to raise the capital it needs to grow.`, + }, + { + title: 'Decentralize the core management after the token gains critical mass and self-sufficiency', + content: `Once the token project has gained critical mass and is self-sufficient, the core management can be decentralized. This will allow the project to continue to grow and evolve without the need for centralized control.`, + } + ] const teamMembers = [ { @@ -652,6 +734,18 @@ document.body.classList.remove('hidden') router.routeTo(window.location.hash) } + + function scrollCarousel(containerId, direction) { + direction = direction === 'left' ? -1 : 1 + const container = document.getElementById(containerId) + const containerWidth = container.offsetWidth / 2 + const scrollAmount = containerWidth * direction + container.scrollBy({ + left: scrollAmount, + behavior: 'smooth' + }) + } +