Merge branch 'master' of https://git.cypherstack.com/diego/stack-wallet-website

Reviewed-on: diego/stack-wallet-website#18

_includes/footer.html

@@ -26,7 +26,7 @@
         <div class="container">
             <div class="row">
                 <div class="col">
-                    <p>Copyright © 2024 Stack Wallet LLC</p>
+                    <p>Copyright © 2022 Stack Wallet LLC</p>
                 </div>
                 <div class="col">
                     <p><a href="/feed.xml">RSS Feed</a></p>

_posts/2024-05-14-coming-out-of-beta.md

@@ -0,0 +1,38 @@
+---
+layout: post
+title: "We're coming out of beta!"
+summary: "OMG people it's finally happening!"
+tags: [dev]
+author: 
+img: "/blog/assets/stack-out-of-beta.png"
+---
+
+Wow, I (Diego), am not very good at getting these things out. It's been almost a year. It's harder to do than I thought. Let me make it up to you though.
+
+We're coming out of beta!
+
+That's right. And it's not sometime in the nebulous future. It’s now. Like right now.
+
+By the time this post goes up, you should be able to download Stack Wallet version 2.0.0 for all platforms. You can find the Windows, Linux, MacOS downloads, and .apks [here](https://github.com/cypherstack/stack_wallet/releases/tag/build_222). You can also find mobile version on the Apple App Store, the Google Play Store, and F-Droid.
+
+It’s been a long journey. More than two years, and there have been countless challenges and hundreds upon hundreds of bugs.
+
+Now that’s not to say there won’t be bugs in this release. I know there will be some. But we’ve reached a point of stability in regards to syncing, testing, transacting, and features that I feel Stack is ready for to come out of its shell.
+
+There’s more to do. We’ve got a big Monero/Wownero rework coming which will, among other things, bring polyseed and XMR/WOW on Windows. There’s a few more known UI bugs, as well as a few other things. But we’ll get there. Rest assured. :)
+
+Now what’s in this release? Well, we added Bitcoin Frost for mobile devices (desktop coming soon). We added this in collaboration with our good friend Kayaba from Serai, and we’re submitting to the HRF Bounties in hopes of nabbing that prize. Frost is...an interesting and difficult piece of software, but I think we gave it our famous UI/UX polish that makes it about as good as it can be for now.
+
+We’ve also added Solana, Peercoin, Taproot support for BTC, and expanded the Tor functionality to cover pretty much all coins. The only exceptions are XMR/WOW (coming with the refactor), and Epic Cash.
+
+Now for all of you Stack Duo users who have waited so patiently for many, many months. We are, this very moment, working on a system that will allow us to release Duo alongside Stack Wallet instantly. Up until this point we’ve been manually pulling all relevant changes from Stack to Duo with each release. This has become infeasible to continue. So we’re working on a powerful system that will bring both apps (as well as potentially a few others) into the same repo. We (and you if you’re tech savvy enough) will be able to run a few simple commands when we’re doing our builds for distribution that will just add the necessary functionality, change the names and images, and everything else necessary.
+
+As always you can check our Github to see progress made on things in real time.
+
+Wowee what a trip! I’m so proud of the Stack Wallet team, and so grateful to the small community we’ve built. I’m also stoked to be a part of a growing group of open-source applications that all help and build off of each other. People like Foundation Devices (thanks for the tor stuff), Cake Wallet (thanks for working with us on the Monero stuff), Serai (thanks for the Frost stuff), Peercoin (thanks for coinlib and taproot and making a new Dart package to replace the ancient Bitcoin ones there), Firo (for trusting us with being the first mobile Spark wallet), and so many more.
+
+What’s next? Beyond the Duo stuff we’ve got several smaller things that we’ve wanted for a long time. Things like RBF, CPFP, and PSBTs for Bitcoin, CashTokens for BCH, MWEB and Runes for LTC, Spark Assets for Firo. The list goes on and on.
+
+We hope you’re excited about it as we are. Thanks for sticking with us on this journey so far. 
+
+~ Diego “rehrar” Salazar

css/style.css

@@ -367,8 +367,8 @@ h1, h2, h3 {
     display: inline-block; 
     position: relative;
     padding: 1rem 0;
-    margin-left: 1rem;
+    margin-left: 1.8rem;
-    margin-right: 1rem;
+    margin-right: 1.8rem;
 }
 
 .main-menu li.nav-item a { 
@@ -432,7 +432,7 @@ h1, h2, h3 {
     background: #F7F7F7; 
     visibility: hidden; 
     opacity: 0; 
-    min-width: 15rem; 
+    width: 30rem; 
     position: absolute; 
     transition: all 0.5s ease; 
     margin-top: 1rem; 
@@ -445,29 +445,78 @@ h1, h2, h3 {
     -moz-box-shadow: 0px 0px 10px 0px rgba(84,104,119,0.3);
     box-shadow: 0px 0px 10px 0px rgba(84,104,119,0.3);
     border-radius: 8px;
+    padding: 1rem;
+}
+
+.main-menu li.nav-item ul.dropdown .row {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+}
+
+.main-menu li.nav-item ul.dropdown .row:last-child {
+    margin-bottom: 0;
+}
+
+.main-menu li.nav-item ul.dropdown .col {
+    -ms-flex-preferred-size: 50%;
+    flex-basis: 50%;
+    max-width: 50%;
+    padding: 0;
 }
 
 .main-menu li.nav-item ul.dropdown li {
     width: 100%;
 }
 
+.main-menu li.nav-item ul.dropdown .systemlink a {
+    padding: 1rem 1rem 1rem 3rem;
+    position: relative;
+    border-radius: 8px;
+}
+
+.main-menu li.nav-item ul.dropdown .systemlink a svg, .main-menu li.nav-item ul.dropdown .systemlink a img {
+    width: 1.5rem;
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+}
+
+.main-menu li.nav-item ul.dropdown .systemlink a .systext p.system-title {
+    font-size: 1rem;
+    border-bottom: 2px solid rgba(0,0,0,0);
+    display: inline-block;
+    line-height: 1.3;
+}
+
+.main-menu li.nav-item ul.dropdown .systemlink .systext p.system-about {
+    font-weight: 400;
+    font-size: 0.75rem;
+    margin-top: 0.25rem;
+    line-height: 1.5;
+}
+
+.main-menu li.nav-item ul.dropdown .droptitle {
+    font-weight: 700;
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+    margin-top:0.5rem;
+    color: #232323;
+}
+
 .main-menu li.nav-item ul.dropdown li a {
-    display: block; 
+    display: flex;
     padding: 1rem; 
     font-size: 1rem;
     -webkit-transition: background-color ease-out .3s; 
     -moz-transition: background-color ease-out .3s; 
     -o-transition: background-color ease-out .3s; 
     transition: background-color ease-out .3s;
-    vertical-align: middle;
+    -webkit-box-align: start;
-}
+    -ms-flex-align: start;
-
+    align-items: flex-start;
-.main-menu li.nav-item ul.dropdown li:nth-of-type(1) a {
-    border-radius: 8px 8px 0 0;
-}
-
-.main-menu li.nav-item ul.dropdown li:nth-of-type(3) a {
-    border-radius: 0 0 8px 8px;
 }
 
 .main-menu li.nav-item ul.dropdown li a:hover, .main-menu li.nav-item ul.dropdown li a:active, .main-menu li.nav-item ul.dropdown li a:focus {
@@ -480,6 +529,12 @@ h1, h2, h3 {
     display: block;
 }
 
+.main-menu li.nav-item ul.dropdown .systemlink a:hover .systext p.system-title, .main-menu li.nav-item ul.dropdown .systemlink a:active .systext p.system-title, .main-menu li.nav-item ul.dropdown .systemlink a:focus .systext p.system-title {
+    border-bottom: 2px solid #232323;
+    color: #232323;
+    transition: border-bottom-color .1s ease-in-out;
+}
+
 .main-menu li.nav-item ul.dropdown li a span {
     vertical-align: middle;
 }
@@ -628,7 +683,6 @@ header .container {
     } */
     
     .slide-nav {
-        text-align: center;
         position: absolute;
         top: 99%;
         width: 100%;
@@ -643,6 +697,7 @@ header .container {
         opacity: -1;
         z-index: 100;
         box-shadow: 0 4px 5px rgba(0,0,0,0.25);
+        padding: 1rem 0;
     }
         
     .slide-nav::-webkit-scrollbar { 
@@ -670,16 +725,20 @@ header .container {
     }
         
     #list1:checked ~ .dropdown-content, #list2:checked ~ .dropdown-content, #list3:checked ~ .dropdown-content, #list4:checked ~ .dropdown-content {
-        display: block;
+        display: flex;
         position: inherit;
         opacity: 1;
         visibility: visible;
         box-shadow: none;
     }
 
+    .slide-nav .mob-item {
+        padding: 0 1.5rem;
+    }
+        
     .slide-nav .mob-item > a, .slide-nav .mob-item > label {
         font-weight: 700;
-        font-size: 1.2rem;
+        font-size: 1rem;
         display: block;
         padding: 1rem 0;
         text-decoration: none;
@@ -687,7 +746,7 @@ header .container {
         -moz-transition: all ease-out .2s;
         -o-transition: all ease-out .2s;
         transition: all ease-out .2s;
-        text-align: center;
+        border-top: 1px solid #CFCFCF;
     }
         
     .slide-nav .mob-item label {
@@ -700,7 +759,7 @@ header .container {
         display: inline-block;
         position: absolute;
         top: 1.5rem;
-        left: 2rem;
+        right: 1rem;
         width: 3px;
         height: 1rem;
         background-color: #232323;
@@ -717,10 +776,10 @@ header .container {
     }
         
     .slide-nav .mob-item input:checked + label:after {
-        background-color: #0056D2;
+        background-color: #232323;
     }
         
-    .slide-nav .mob-item .dropdown-content li a {
+    /*.slide-nav .mob-item .dropdown-content li a {
         font-weight: 700;
         font-size: 1rem;
         display: block;
@@ -733,10 +792,67 @@ header .container {
         text-align: left;
         padding-left: 6rem;
         border-bottom: 1px solid #fff;
-    }
+    }*/
         
     .slide-nav .mob-item > a:hover, .slide-nav .mob-item > a:focus, .slide-nav .mob-item > a:active, .slide-nav .mob-item > label:hover, .slide-nav .mob-item > label:focus, .slide-nav .mob-item > label:active, .slide-nav .mob-item > input:checked + label, .slide-nav .mob-item .dropdown-content li a:hover, .slide-nav .mob-item .dropdown-content li a:focus, .slide-nav .mob-item .dropdown-content li a:active {
-        color: #0056D2;
+        color: #232323;
+    }
+
+    .slide-nav .mob-item .dropdown-content.row {
+        -webkit-box-align: start;
+        -ms-flex-align: start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        margin-bottom: 1rem;
+    }
+
+    .slide-nav .mob-item .dropdown-content li.systemlink {
+        -ms-flex-preferred-size: 50%;
+        flex-basis: 50%;
+        max-width: 50%;
+        padding: 0;
+    }
+
+    .slide-nav .mob-item .dropdown-content li a {
+        padding: 1rem 1rem 1rem 3rem;
+        border-radius: 8px;
+        position: relative;
+        display: flex;
+        font-size: 1rem;
+        -webkit-transition: background-color ease-out .3s;
+        -moz-transition: background-color ease-out .3s;
+        -o-transition: background-color ease-out .3s;
+        transition: background-color ease-out .3s;
+        -webkit-box-align: start;
+        -ms-flex-align: start;
+        align-items: flex-start;
+        text-decoration: none;
+    }
+
+    .slide-nav .mob-item .dropdown-content li a:hover, .slide-nav .mob-item .dropdown-content li a:active, .slide-nav .mob-item .dropdown-content li a:focus {
+        background-color: rgba(35,35,35,.05);
+    }
+
+    .slide-nav .mob-item .dropdown-content li a svg, .slide-nav .mob-item .dropdown-content li a img {
+        width: 1.5rem;
+        position: absolute;
+        top: 1rem;
+        left: 1rem;
+    }
+
+    .slide-nav .mob-item .dropdown-content li a .systext p.system-title {
+        font-size: 1rem;
+        border-bottom: 2px solid rgba(0,0,0,0);
+        display: inline-block;
+        line-height: 1.3;
+        font-weight: 700;
+    }
+
+    .slide-nav .mob-item .dropdown-content li .systext p.system-about {
+        font-weight: 400;
+        font-size: 0.8rem;
+        margin-top: 0.25rem;
+        line-height: 1.5;
     }
 
     .logo-mobile img {
@@ -753,6 +869,17 @@ header .container {
 
 }
 
+@media only screen and (max-width: 32rem) {
+    
+    .slide-nav .mob-item .dropdown-content li.systemlink {
+        -ms-flex-preferred-size: 100%;
+        flex-basis: 100%;
+        max-width: 100%;
+        padding: 0;
+    }
+
+}
+
 
 /*intro*/
 
@@ -795,15 +922,37 @@ header .container {
     line-height: 1.5;
 }
 
-#intro .download-btn {
+#intro .download-btn a {
-    margin-top: 1rem;
+    display: inline-block;
-    -ms-flex-pack: justify;
+    text-decoration: none;
-    -webkit-box-pack: justify;
+    font-size: 1rem;
-    justify-content: start;
+    font-weight: 700;
+    color: #ffffff;
+    background-color: #232323;
+    border-radius: 4rem;
+    padding: 1rem 2rem;
+    line-height: 1.5;
+    margin-top: 2rem;
+    letter-spacing: 0.5px;
+    -webkit-transition: all ease-out .3s;
+    -moz-transition: all ease-out .3s;
+    -o-transition: all ease-out .3s;
+    transition: all ease-out .3s;
+}
+
+#intro .download-btn a svg {
+    vertical-align: middle;
+    margin-left: 1rem;
+}
+
+#intro .download-btn a
+
+#intro .download-btn a:hover, #intro .download-btn a:active, #intro .download-btn a:focus {
+    background-color: #383838;
 }
 
 
-#intro .download-badge {
+.download-badge {
 	width: 12rem;
 	height: 4rem;
 	display: block;
@@ -811,25 +960,25 @@ header .container {
 	margin-right: 1rem;
 }
 
-#intro .download-ios {
+.download-ios {
     background: url(../img/app-store-badge.svg);
     background-size: contain;
     background-repeat: no-repeat;
 }
 
-#intro .download-playstore {
+.download-playstore {
     background: url(../img/google-play-badge.svg);
     background-size: contain;
     background-repeat: no-repeat;
 }
 
-#intro .download-android {
+.download-android {
     background: url(../img/android-apk-badge.svg);
     background-size: contain;
     background-repeat: no-repeat;
 }
 
-#intro .download-fdroid {
+.download-fdroid {
     background: url(../img/fdroid-badge.svg);
     background-size: contain;
     background-repeat: no-repeat;
@@ -956,7 +1105,7 @@ header .container {
     }
     
     #intro .download-btn a {
-        margin: 0.5rem 3rem 0 3rem;
+        margin: 2rem 3rem 0 3rem;
         display: inline-block;
     }
     
@@ -982,8 +1131,165 @@ header .container {
     padding: 3rem 0;
 }
 
+#intro .download-btn a span {
+    display: none;
 }
     
+} 
+
+/*downloads*/
+
+#download .container {
+    position: relative;
+    padding-top: 10rem;
+    padding-bottom: 6rem;
+}
+
+#download .container:before {
+    content: 'download';
+    display; block;
+    color: gainsboro;
+    font-family: 'Noto Sans', sans-serif;
+    font-weight: 700;
+    font-size: 10rem;
+    position: absolute;
+    top: 0;
+    left: -12rem;
+    z-index: -1;
+    line-height: 1;
+    opacity: 0.5;
+}
+
+#download .row.system-cards {
+    -ms-flex-pack: justify;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-top: 3rem;
+}
+
+#download .row.system-cards .card {
+    -ms-flex-preferred-size: 32%;
+    flex-basis: 32%;
+    max-width: 22.5rem;
+    margin-bottom: 1.75rem;
+    background: #ffffff;
+    border-radius: 32px;
+    padding: 2rem;
+}
+
+@media only screen and (max-width: 75rem) {
+    #download .row.system-cards .card {
+        -ms-flex-preferred-size: 32%;
+        flex-basis: 32%;
+        max-width: 19.33rem;
+        margin-bottom: 1.5rem;
+    }
+
+    #download .card h3 {
+        font-size: 1.3rem;
+    }
+
+    #download .card p {
+        height: 6rem;
+    }
+}
+
+@media only screen and (max-width: 62rem) {
+    #download .row.system-cards .card {
+        -ms-flex-preferred-size: 48%;
+        flex-basis: 48%;
+        max-width: 48%;
+        margin-bottom: 1.5rem;
+    }
+}
+
+@media only screen and (max-width: 40rem) {
+    #download .row.system-cards .card {
+        -ms-flex-preferred-size: 100%;
+        flex-basis: 100%;
+        max-width: 100%;
+        margin-bottom: 1.5rem;
+    }
+}
+
+#download .card.feature-icon img, #download .card.feature-icon svg {
+    width: 3rem;
+    margin-bottom: 2rem;
+}
+
+#download .card h3, #download .card-long h3 {
+    font-size: 1.5rem;
+    font-family: 'Noto Sans', sans-serif;
+    font-weight: 700;
+    line-height: 1.2;
+}
+
+#download .card p {
+    font-size: 1rem;
+    font-family: 'Noto Sans', sans-serif;
+    font-weight: 400;
+    margin-top: 0.75rem;
+    line-height: 1.6;
+}
+
+#download .card a {
+    text-decoration: none;
+    color: #3030D0;
+    font-weight: 700;
+    margin-top: 2rem;
+    display: inline-block;
+    line-height: 1.3;
+    -webkit-transition: all ease-out .3s;
+    -moz-transition: all ease-out .3s;
+    -o-transition: all ease-out .3s;
+    transition: all ease-out .3s;
+}
+
+#download .card.feature-icon a svg {
+    margin: 0 0 0 0.25rem;
+    width: 1.125rem;
+    vertical-align: middle;
+}
+
+#download .card a:hover, #download .card a:active, #download .card a:focus {
+    color: #5959d9;
+}
+
+@media only screen and (max-width: 75rem) {
+
+    #download .card h3 {
+        font-size: 1.3rem;
+    }
+
+    #download .card p {
+        height: 4rem;
+    }
+
+    #download .card a {
+        margin-top: 1rem;
+    }
+}
+
+@media only screen and (max-width: 48rem) {
+
+    #download .card h3 {
+        font-size: 1.2rem;
+    }
+
+    #download .card p {
+        height: 5rem;
+    }
+}
+
+@media only screen and (max-width: 40rem) {
+
+    #download .card p {
+        height: auto;
+    }
+
+}
+
+
 /*features*/
 
 #features .container {
@@ -1008,27 +1314,12 @@ header .container {
 
 #feature .container {
     position: relative;
-    padding-top: 13rem;
+    padding-top: 8rem;
-}
-
-#feature .container:before {
-    content: 'features';
-    display; block;
-    color: gainsboro;
-    font-family: 'Noto Sans', sans-serif;
-    font-weight: 700;
-    font-size: 10rem;
-    position: absolute;
-    top: 0;
-    right: -12rem;
-    z-index: -1;
-    line-height: 1;
-    opacity: 0.5;
 }
 
 @media only screen and (max-width: 100rem) {
     
-    #features .container:before {
+    #features .container:before, #download .container:before {
         left: -2rem;
     }
 
@@ -1044,11 +1335,11 @@ header .container {
         display: none;
     }
 
-    #features .container:before {
+    #features .container:before, #download .container:before {
         font-size: 8rem;
     }
 
-    #features .container {
+    #features .container, #download .container {
         padding-top: 8rem;
     }
         
@@ -1059,12 +1350,12 @@ header .container {
 
 @media only screen and (max-width: 48rem) {
 
-    #features .container:before {
+    #features .container:before, #download .container:before {
         font-size: 8rem;
         left: 1.5rem;
     }
 
-    #features .container {
+    #features .container, .download .container {
         padding-top: 8rem;
     }
         
@@ -1075,12 +1366,12 @@ header .container {
 
 @media only screen and (max-width: 37rem) {
 
-    #features .container:before {
+    #features .container:before, #download .container:before {
         font-size: 4rem;
         right: 1.5rem;
     }
 
-    #features .container {
+    #features .container, #download .container {
         padding-top: 4rem;
     }
         

img/android-sys.svg

@@ -0,0 +1,3 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M183.217 161.652C177.674 161.652 173.217 157.167 173.217 151.588C173.217 146.009 177.674 141.524 183.217 141.524C188.761 141.524 193.217 146.009 193.217 151.588C193.217 157.167 188.761 161.652 183.217 161.652ZM72.7826 161.652C67.2391 161.652 62.7826 157.167 62.7826 151.588C62.7826 146.009 67.2391 141.524 72.7826 141.524C78.3261 141.524 82.7826 146.009 82.7826 151.588C82.7826 157.167 78.3261 161.652 72.7826 161.652ZM186.804 101.05L206.804 66.2638C208 64.2948 207.239 61.6695 205.283 60.5756C203.326 59.3723 200.717 60.138 199.63 62.107L179.413 97.3305C163.978 90.2202 146.587 86.2821 128 86.2821C109.413 86.2821 92.1304 90.2202 76.5869 97.3305L56.3695 62.107C55.1739 60.138 52.6739 59.3723 50.7174 60.5756C48.7609 61.7789 48 64.2948 49.1957 66.2638L69.1956 101.05C34.8478 119.865 11.4783 154.76 8 196H248C244.522 154.76 221.152 119.755 186.804 101.05Z" fill="#60BF7F"/>
+</svg>

img/apple-sys.svg

@@ -0,0 +1,4 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M189.822 135.355C190.03 117.732 199.254 101.457 214.283 92.2304C204.748 78.6502 189.408 70.357 172.824 69.8387C155.411 67.9727 138.413 80.3089 129.603 80.3089C120.792 80.3089 106.8 70.046 92.0819 70.357C72.6997 70.979 55.0795 81.7602 45.5438 98.7613C25.436 133.593 40.465 184.7 59.64 212.897C69.2793 226.684 80.5769 242.027 95.295 241.508C109.702 240.886 115.092 232.282 132.505 232.282C149.918 232.282 154.789 241.508 169.818 241.094C185.262 240.886 195.005 227.306 204.333 213.311C211.277 203.463 216.564 192.682 220.088 181.175C201.742 173.4 189.719 155.363 189.719 135.459L189.822 135.355Z" fill="#232323"/>
+<path d="M161.423 51.2829C169.818 41.1237 173.964 28.1655 173.031 15C160.179 16.3476 148.259 22.4639 139.656 32.2084C131.261 41.8493 126.908 54.3928 127.737 67.1437C140.797 67.2473 153.234 61.4421 161.423 51.2829Z" fill="#232323"/>
+</svg>

img/windows-sys.svg

@@ -0,0 +1,3 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.011 56.4067L110.153 45.1743V123.967H29L29.011 56.4067ZM29.011 200.593L110.153 211.837V134.006H29L29.011 200.593ZM119.074 213.031L227 228V134.006H119.074V213.031ZM119.074 43.9692V123.967H227V29L119.074 43.9692Z" fill="#232323"/>
+</svg>

index.html

@@ -9,11 +9,21 @@ permalink: /index.html
               <div class="intro-info col">
                   <h1>Stack Wallet</h1>
                   <p>The first open-source, non-custodial, privacy-preserving cryptocurrency wallet for all crypto fans</p>
-                  <div class="row download-btn">
+                  <div class="download-btn">
-                    <a href="https://apps.apple.com/us/app/stack-wallet-by-cypher-stack/id1634811534"><svg class="download-badge download-ios" role="img" alt="" aria-label="" rel="noopener"></svg></a>
+                    <a href="/index.html#download">
-                    <a href="https://play.google.com/store/apps/details?id=com.cypherstack.stackwallet"><svg class="download-badge download-playstore" role="img" alt="" aria-label="" rel="noopener"></svg></a>
+                        Download <span>Stack Wallet</span>
-                    <a href="https://github.com/cypherstack/stack_wallet/releases/latest"><svg class="download-badge download-android" role="img" alt="" aria-label="" rel="noopener"></svg></a>
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <a href="https://fdroid.stackwallet.com/"><svg class="download-badge download-fdroid" role="img" alt="" aria-label="" rel="noopener"></svg></a>
+                            <g clip-path="url(#clip0_9795_104203)">
+                            <path d="M17.9352 14.1844L13.1023 19.0172C12.6898 19.4344 12.2305 19.5 12.0008 19.5C11.772 19.5 11.3141 19.4348 10.9391 19.0595L6.06641 14.1844C5.48047 13.5984 5.48047 12.6492 6.06641 12.0633C6.65234 11.4773 7.60156 11.4773 8.1875 12.0633L10.5008 14.3812V6C10.5008 5.17078 11.1725 4.5 12.0008 4.5C12.8291 4.5 13.5008 5.17078 13.5008 6V14.3812L15.8155 12.0666C16.4014 11.4806 17.3506 11.4806 17.9366 12.0666C18.5225 12.6525 18.5211 13.5984 17.9352 14.1844Z" fill="white"/>
+                            <path opacity="0.1" d="M12 0C5.37188 0 0 5.37188 0 12C0 18.6281 5.37188 24 12 24C18.6281 24 24 18.6281 24 12C24 5.37188 18.6281 0 12 0ZM17.9344 14.1844L13.1016 19.0172C12.6891 19.4344 12.2297 19.5 12 19.5C11.7712 19.5 11.3133 19.4348 10.9383 19.0595L6.06562 14.1844C5.47969 13.5984 5.47969 12.6492 6.06562 12.0633C6.65156 11.4773 7.60078 11.4773 8.18672 12.0633L10.5 14.3812V6C10.5 5.17078 11.1717 4.5 12 4.5C12.8283 4.5 13.5 5.17078 13.5 6V14.3812L15.8147 12.0666C16.4006 11.4806 17.3498 11.4806 17.9358 12.0666C18.5217 12.6525 18.5203 13.5984 17.9344 14.1844Z" fill="white"/>
+                            </g>
+                            <defs>
+                            <clipPath id="clip0_9795_104203">
+                            <rect width="24" height="24" fill="white"/>
+                            </clipPath>
+                            </defs>
+                        </svg>
+                    </a>
                   </div>
                   
               </div>
@@ -24,6 +34,104 @@ permalink: /index.html
         </div>
       </section>
 
+      <section id="download" class="section">
+        <div class="container">
+            <div class="row between-xs system-cards">
+                <div class="card col feature-icon">
+                    <img src="/img/google-sys.png">
+                    <h3>Stack on Google Play</h3>
+                    <p>Stack Wallet is available on Google Play for Android smartphones.</p>
+                    <a href="https://play.google.com/store/apps/details?id=com.cypherstack.stackwallet">
+                        Download Stack
+                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g>
+                              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.49988 4.65039L6.44238 5.70789L9.87738 9.15039L6.44238 12.5929L7.49988 13.6504L11.9999 9.15039L7.49988 4.65039Z" fill="#3030D0"></path>
+                            </g>
+                        </svg>
+                    </a>
+                </div>
+                <div class="card col feature-icon">
+                    <img src="/img/apple-sys.svg">
+                    <h3>Stack on App Store</h3>
+                    <p>Get the mobile app for your iPhone or iPad.</p>
+                    <a href="https://apps.apple.com/us/app/stack-wallet-by-cypher-stack/id1634811534">
+                        Download Stack
+                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g>
+                              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.49988 4.65039L6.44238 5.70789L9.87738 9.15039L6.44238 12.5929L7.49988 13.6504L11.9999 9.15039L7.49988 4.65039Z" fill="#3030D0"></path>
+                            </g>
+                        </svg>
+                    </a>
+                </div>
+                <div class="card col feature-icon">
+                    <img src="/img/android-sys.svg">
+                    <h3>Stack on Android APK</h3>
+                    <p>For advanced users, Stack Wallet is available on Android APK.</p>
+                    <a href="https://github.com/cypherstack/stack_wallet/releases/latest">
+                        Download Stack
+                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g>
+                              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.49988 4.65039L6.44238 5.70789L9.87738 9.15039L6.44238 12.5929L7.49988 13.6504L11.9999 9.15039L7.49988 4.65039Z" fill="#3030D0"></path>
+                            </g>
+                        </svg>
+                    </a>
+                </div>
+                <div class="card col feature-icon">
+                    <img src="/img/fdroid-sys.png">
+                    <h3>Stack on F-Droid</h3>
+                    <p>Download Stack from F-Droid.</p>
+                    <a href="https://fdroid.stackwallet.com/">
+                        Download Stack
+                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g>
+                              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.49988 4.65039L6.44238 5.70789L9.87738 9.15039L6.44238 12.5929L7.49988 13.6504L11.9999 9.15039L7.49988 4.65039Z" fill="#3030D0"></path>
+                            </g>
+                        </svg>
+                    </a>
+                </div>
+                <div class="card col feature-icon">
+                    <img src="/img/windows-sys.svg">
+                    <h3>Stack on Windows</h3>
+                    <p>Stack Wallet is available on Windows.</p>
+                    <a class="sub-nav-item " href="https://github.com/cypherstack/stack_wallet/releases/latest" target="_blank">
+                        Download Stack
+                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g>
+                              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.49988 4.65039L6.44238 5.70789L9.87738 9.15039L6.44238 12.5929L7.49988 13.6504L11.9999 9.15039L7.49988 4.65039Z" fill="#3030D0"></path>
+                            </g>
+                        </svg>
+                    </a>
+                </div>
+                <div class="card col feature-icon">
+                    <img src="/img/linux-sys.svg">
+                    <h3>Stack on Linux</h3>
+                    <p>Start using Stack Wallet on Linux.</p>
+                    <a class="sub-nav-item " href="https://github.com/cypherstack/stack_wallet/releases/latest" target="_blank">
+                        Download Stack
+                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g>
+                              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.49988 4.65039L6.44238 5.70789L9.87738 9.15039L6.44238 12.5929L7.49988 13.6504L11.9999 9.15039L7.49988 4.65039Z" fill="#3030D0"></path>
+                            </g>
+                        </svg>
+                    </a>
+                </div>
+                <div class="card col feature-icon">
+                    <img src="/img/apple-sys.svg">
+                    <h3>Stack on macOS</h3>
+                    <p>Download Stack Wallet on macOS.</p>
+                    <a class="sub-nav-item " href="https://github.com/cypherstack/stack_wallet/releases/latest" target="_blank">
+                        Download Stack
+                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g>
+                              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.49988 4.65039L6.44238 5.70789L9.87738 9.15039L6.44238 12.5929L7.49988 13.6504L11.9999 9.15039L7.49988 4.65039Z" fill="#3030D0"></path>
+                            </g>
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </div>
+     </section>
+
       <section id="features" class="section">
         <div class="container" id="intro-info">
                <div class="row open">