diff --git a/assets/img/icons/usecases/lightmode/ic_cbdc.png b/assets/img/icons/usecases/lightmode/ic_cbdc.png new file mode 100644 index 0000000000..4c92900b82 Binary files /dev/null and b/assets/img/icons/usecases/lightmode/ic_cbdc.png differ diff --git a/assets/img/icons/usecases/lightmode/ic_custody.png b/assets/img/icons/usecases/lightmode/ic_custody.png new file mode 100644 index 0000000000..8bdd7a244c Binary files /dev/null and b/assets/img/icons/usecases/lightmode/ic_custody.png differ diff --git a/assets/img/icons/usecases/lightmode/ic_defi.png b/assets/img/icons/usecases/lightmode/ic_defi.png new file mode 100644 index 0000000000..944de60d68 Binary files /dev/null and b/assets/img/icons/usecases/lightmode/ic_defi.png differ diff --git a/assets/img/icons/usecases/lightmode/ic_developer_tooling.png b/assets/img/icons/usecases/lightmode/ic_developer_tooling.png new file mode 100644 index 0000000000..c2abd0e6ec Binary files /dev/null and b/assets/img/icons/usecases/lightmode/ic_developer_tooling.png differ diff --git a/assets/img/icons/usecases/lightmode/ic_exchanges.png b/assets/img/icons/usecases/lightmode/ic_exchanges.png new file mode 100644 index 0000000000..7b9bb825cd Binary files /dev/null and b/assets/img/icons/usecases/lightmode/ic_exchanges.png differ diff --git a/assets/img/icons/usecases/lightmode/ic_gaming.png b/assets/img/icons/usecases/lightmode/ic_gaming.png new file mode 100644 index 0000000000..7de8e06ebf Binary files /dev/null and b/assets/img/icons/usecases/lightmode/ic_gaming.png differ diff --git a/assets/img/icons/usecases/lightmode/ic_infrastructure.png b/assets/img/icons/usecases/lightmode/ic_infrastructure.png new file mode 100644 index 0000000000..7267627e0a Binary files /dev/null and b/assets/img/icons/usecases/lightmode/ic_infrastructure.png differ diff --git a/assets/img/icons/usecases/lightmode/ic_interoperability.png b/assets/img/icons/usecases/lightmode/ic_interoperability.png new file mode 100644 index 0000000000..e2bce9cd2a Binary files /dev/null and b/assets/img/icons/usecases/lightmode/ic_interoperability.png differ diff --git a/assets/img/icons/usecases/lightmode/ic_nfts.png b/assets/img/icons/usecases/lightmode/ic_nfts.png new file mode 100644 index 0000000000..852867ea60 Binary files /dev/null and b/assets/img/icons/usecases/lightmode/ic_nfts.png differ diff --git a/assets/img/icons/usecases/lightmode/ic_payments.png b/assets/img/icons/usecases/lightmode/ic_payments.png new file mode 100644 index 0000000000..938be210dc Binary files /dev/null and b/assets/img/icons/usecases/lightmode/ic_payments.png differ diff --git a/assets/img/icons/usecases/lightmode/ic_security.png b/assets/img/icons/usecases/lightmode/ic_security.png new file mode 100644 index 0000000000..2589f68b14 Binary files /dev/null and b/assets/img/icons/usecases/lightmode/ic_security.png differ diff --git a/assets/img/icons/usecases/lightmode/ic_sustainability.png b/assets/img/icons/usecases/lightmode/ic_sustainability.png new file mode 100644 index 0000000000..3b3f4654df Binary files /dev/null and b/assets/img/icons/usecases/lightmode/ic_sustainability.png differ diff --git a/assets/img/icons/usecases/lightmode/ic_wallet.png b/assets/img/icons/usecases/lightmode/ic_wallet.png new file mode 100644 index 0000000000..ea1205e14c Binary files /dev/null and b/assets/img/icons/usecases/lightmode/ic_wallet.png differ diff --git a/assets/img/icons/usecases/lightmode/ic_web_monetization.png b/assets/img/icons/usecases/lightmode/ic_web_monetization.png new file mode 100644 index 0000000000..d6b39f3ab7 Binary files /dev/null and b/assets/img/icons/usecases/lightmode/ic_web_monetization.png differ diff --git a/styles/_pages.scss b/styles/_pages.scss index 1e0afef0ad..51cd3843fb 100644 --- a/styles/_pages.scss +++ b/styles/_pages.scss @@ -172,6 +172,15 @@ background-image: url(../img/backgrounds/use-cases-blue.svg); } + .card-grid { + grid-gap: 8px + } + + .card-grid img { + max-height: 40px; + } + + @each $usecase in "infrastructure", "developer_tooling", "interoperability", @@ -187,11 +196,24 @@ "custody", "defi" { ##{$usecase} { - max-height: 48px; content: url("../img/icons/usecases/ic_#{$usecase}.png"); } } + +@include media-breakpoint-up(lg) { + .card-grid img { + max-height: 48px; + } + + .card-grid { + grid-gap: 48px + } +} + + + + // @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" { // ##{$usecase} { // content: url("../img/icons/#{$usecase}.svg"); diff --git a/styles/light/_light-theme.scss b/styles/light/_light-theme.scss index e1a6a2a3ce..9eab4910e8 100644 --- a/styles/light/_light-theme.scss +++ b/styles/light/_light-theme.scss @@ -569,26 +569,56 @@ pre code { .page-uses { .card-body { - background: #FFFFFF; - - color: #343437 + background: $white; + color: $gray-700; } .modal-footer, .modal-header { - background-color: #FCFCFD; + background-color: $gray-050; } - - - @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" { + @each $usecase in "infrastructure", + "developer_tooling", + "interoperability", + "wallet", + "nfts", + "exchanges", + "gaming", + "security", + "payments", + "web_monetization", + "sustainability", + "cbdc", + "custody", + "defi" { ##{$usecase} { - content: url("../img/icons/lightmode/#{$usecase}.svg"); + content: url("../img/icons/usecases/lightmode/ic_#{$usecase}.png"); } } + .category-header { + color: $gray-700; + } + + .category_count { + background: #D2B2FF; + color: #350080; + } + + + + + + + // @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" { + // ##{$usecase} { + // content: url("../img/icons/lightmode/#{$usecase}.svg"); + // } + // } + // darkened card graphics @each $company,$card-graphic in ( "bitpay": "blue-green", diff --git a/template/page-uses.html.jinja b/template/page-uses.html.jinja index dc65867d69..27a86ae540 100644 --- a/template/page-uses.html.jinja +++ b/template/page-uses.html.jinja @@ -24,7 +24,17 @@ padding-right: 16px; } + h1 { + font-size: 42px; + } + @media (min-width: 992px) { + + h1 { + font-size: 62px; + } + + .container-new { padding-left: 64px; padding-right: 64px; @@ -444,13 +454,11 @@ {% for category_id, category_name in featured_categories.items() %}
- +
{% endfor %} - -

- -

Other Categories 0

+ +

Other Categories 0

{% for category_id, category_name in other_categories.items() %}
@@ -474,7 +482,7 @@
-
+

{% trans %}Powering Innovative Technology{% endtrans %}

{% trans %}XRPL Use Cases{% endtrans %}
@@ -483,14 +491,14 @@
-
+

{% trans %}Powering innovative use cases and projects{% endtrans %}

{% trans %}XRPL Ecosystem{% endtrans %}
-
    +
      {% set uses = [ {"id": "infrastructure", @@ -554,7 +562,7 @@
    • {{use.title}} icon

      {{use.title}}

      -

      {{use.description}}

      +

      {{use.description}}

    • {% endfor %}
    @@ -604,11 +612,13 @@ margin: 0; padding-left: 26px; } + .category-header { font-weight: bold; /*color: $gray-300;*/ color: #c1c1c2; } + .category-checkbox { display: flex; align-items: center; @@ -661,13 +671,11 @@ {% for category_id, category_name in featured_categories.items() %}
    - +
    {% endfor %} -

    - -

    Other Categories 0

    +

    Other Categories 0

    {% for category_id, category_name in other_categories.items() %}