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

Merge branch 'maria-desktop'
Merge branch 'desktop' of https://git.cypherstack.com/maria/stack-wallet-website into maria-desktop
2024-07-06 12:13:22 -06:00 · 2024-07-06 12:09:55 -06:00 · 2024-07-06 12:09:31 -06:00 · 2024-07-06 12:00:53 -06:00
9 changed files with 687 additions and 81 deletions
--- a/_includes/header.html
+++ b/_includes/header.html
--- a/css/style.css
+++ b/css/style.css
@ -367,8 +367,8 @@ h1, h2, h3 {
    display: inline-block; 
    position: relative;
    padding: 1rem 0;
-    margin-left: 1rem;
-    margin-right: 1rem;
+    margin-left: 1.8rem;
+    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;
-}
-
-.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;
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    align-items: flex-start;
 }

 .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 {
-    margin-top: 1rem;
-    -ms-flex-pack: justify;
-    -webkit-box-pack: justify;
-    justify-content: start;
+#intro .download-btn a {
+    display: inline-block;
+    text-decoration: none;
+    font-size: 1rem;
+    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;
-}
-
-#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;
+    padding-top: 8rem;
 }

@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;
    }
        
--- a/img/android-sys.svg
+++ b/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>
--- a/img/apple-sys.svg
+++ b/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>
--- a/img/fdroid-sys.png
+++ b/img/fdroid-sys.png
--- a/img/google-sys.png
+++ b/img/google-sys.png
--- a/img/linux-sys.svg
+++ b/img/linux-sys.svg
--- a/img/windows-sys.svg
+++ b/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>
--- a/index.html
+++ b/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">
-                    <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="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>
-                    <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>
-                    <a href="https://fdroid.stackwallet.com/"><svg class="download-badge download-fdroid" role="img" alt="" aria-label="" rel="noopener"></svg></a>
+                  <div class="download-btn">
+                    <a href="/index.html#download">
+                        Download <span>Stack Wallet</span>
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <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">
Author	SHA1	Message	Date
Diego Salazar	176fea264b	Merge branch 'master' of https://git.cypherstack.com/diego/stack-wallet-website	2024-07-06 12:13:22 -06:00
Diego Salazar	76e1c4a0b1	Merge branch 'maria-desktop'	2024-07-06 12:09:55 -06:00
Diego Salazar	41ff9920ce	Merge branch 'desktop' of https://git.cypherstack.com/maria/stack-wallet-website into maria-desktop	2024-07-06 12:09:31 -06:00
Diego Salazar	7dec7ceecb	Redesigned OS support area and added desktop	2024-07-06 12:00:53 -06:00