fix: update store listing and icons

Author: ReenigneArcher

_data/store_products.yml

@@ -1,11 +1,13 @@
 ---
 - id: virtual-hid-driver
-  name: Virtual HID Driver
-  category: Windows software
-  tagline: Modern virtual gamepads for Sunshine on Windows
+  name: Virtual HID Broker License
+  category: Windows and macOS software
+  tagline: Virtual gamepads for compatible apps on Windows and macOS
   description: >-
-    Unlock expanded virtual controller support in Sunshine with a user-mode driver built and maintained alongside
-    the rest of the LizardByte input stack.
+    Activate Virtual HID Broker to let compatible applications create virtual gamepads on Windows and macOS.
+    Windows uses a user-mode driver and local broker; macOS uses a signed broker. Both packages include
+    Virtual HID Control for creating and testing virtual gamepads. Virtual HID Broker does not bypass
+    anti-cheat restrictions on virtual gamepad input.
   cover:
     src: https://raw.githubusercontent.com/LizardByte/libvirtualhid/refs/heads/master/libvirtualhid-poster-1440x2160.png
     alt: A green outline of a game controller on a vertical dark green background
@@ -25,19 +27,20 @@
       caption: Virtual controllers appear in the familiar Windows Game Controllers panel.
   badges:
     - label: Windows
-      icon: fa-brands fa-windows
+      icon_img: https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/icons/windows.svg
+    - label: macOS
+      icon_img: https://cdn.jsdelivr.net/npm/simple-icons@16/icons/macos.svg
     - label: Sunshine compatible
-      icon: fa-solid fa-sun
   prices:
     - amount: $14.99
       label: per year
     - amount: $49.99
       label: lifetime
-  price_note: One license can be activated on up to five machines.
+  price_note: One license can be activated on up to five machines. The yearly option includes a free trial.
   features:
-    - Generic, Xbox One, Xbox Series, DualShock 4, DualSense, and Switch Pro-style profiles
-    - Support for advanced controller features when the selected controller and game provide them
-    - Ongoing driver maintenance and improvements alongside Sunshine and other LizardByte software
+    - Generic, Xbox 360, Xbox One, Xbox Series, DualShock 4, DualSense, and Switch Pro-style profiles
+    - Support for advanced controller features when the selected controller, platform, and game provide them
+    - Ongoing broker and Windows driver maintenance alongside Sunshine and other LizardByte software
   details:
     label: Learn more
     url: https://app.lizardbyte.dev/libvirtualhid/virtual-hid-driver
@@ -46,4 +49,4 @@
       url: https://buy.polar.sh/polar_cl_zj6Io5NVukXfZSl97ULtFvImfI5L1jbL2cSnc0Y72Pt
       store: Polar
       external: true
-      icon: fa-solid fa-cart-shopping
+      icon: shopping-cart

_includes/store-product-card.html

@@ -14,7 +14,9 @@
                 <ul class="store-product-badges list-unstyled" aria-label="Product compatibility">
                     {% for badge in product.badges %}
                         <li class="store-product-badge">
-                            {% if badge.icon %}<i class="{{ badge.icon }}" aria-hidden="true"></i>{% endif %}
+                            {% if badge.icon_img %}
+                                <img class="store-product-badge-icon" src="{{ badge.icon_img }}" alt="" width="16" height="16">
+                            {% endif %}
                             {{ badge.label }}
                         </li>
                     {% endfor %}
@@ -36,7 +38,7 @@ <h3 class="store-product-title">{{ product.name }}</h3>
                     <ul class="store-product-features">
                         {% for feature in product.features %}
                             <li>
-                                <i class="fa-solid fa-circle-check" aria-hidden="true"></i>
+                                <i data-lucide="circle-check" aria-hidden="true"></i>
                                 <span>{{ feature }}</span>
                             </li>
                         {% endfor %}
@@ -58,7 +60,7 @@ <h3 class="store-product-title">{{ product.name }}</h3>
 
                 {% if product.price_note %}
                     <p class="store-product-price-note">
-                        <i class="fa-solid fa-display" aria-hidden="true"></i>
+                        <i data-lucide="monitor" aria-hidden="true"></i>
                         {{ product.price_note }}
                     </p>
                 {% endif %}
@@ -73,7 +75,7 @@ <h3 class="store-product-title">{{ product.name }}</h3>
                                 rel="noopener"
                             {% endif %}
                         >
-                            {% if offer.icon %}<i class="{{ offer.icon }}" aria-hidden="true"></i>{% endif %}
+                            {% if offer.icon %}<i data-lucide="{{ offer.icon }}" aria-hidden="true"></i>{% endif %}
                             {{ offer.label }}
                             <span class="visually-hidden">
                                 for {{ product.name }}{% if offer.store %} from {{ offer.store }}{% endif %}
@@ -83,15 +85,15 @@ <h3 class="store-product-title">{{ product.name }}</h3>
                     {% if product.details %}
                         <a class="btn btn-outline-theme" href="{{ product.details.url }}">
                             {{ product.details.label }}
-                            <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
+                            <i data-lucide="arrow-right" aria-hidden="true"></i>
                         </a>
                     {% endif %}
                 </div>
 
                 {% for offer in product.offers %}
                     {% if offer.store %}
                         <p class="store-product-seller">
-                            <i class="fa-solid fa-lock" aria-hidden="true"></i>
+                            <i data-lucide="lock" aria-hidden="true"></i>
                             Checkout provided by {{ offer.store }}
                         </p>
                     {% endif %}
@@ -123,7 +125,7 @@ <h4 id="{{ product.id }}-screenshots">Screenshots</h4>
                             loading="lazy"
                         >
                         <span class="store-screenshot-expand" aria-hidden="true">
-                            <i class="fa-solid fa-expand"></i>
+                            <i data-lucide="expand" aria-hidden="true"></i>
                         </span>
                     </button>
                 {% endfor %}

assets/css/store.scss

@@ -16,6 +16,13 @@ layout: null
   padding-top: 4.75rem;
 }
 
+.storefront svg.lucide {
+  flex-shrink: 0;
+  height: 1em;
+  vertical-align: -0.125em;
+  width: 1em;
+}
+
 .storefront-intro {
   max-width: 48rem;
 }
@@ -59,7 +66,7 @@ layout: null
   border-left: 1px solid var(--store-border);
 }
 
-.storefront-assurance i {
+.storefront-assurance svg.lucide {
   color: var(--link-col);
   font-size: 1.1rem;
 }
@@ -145,6 +152,12 @@ layout: null
   padding: 0.4rem 0.7rem;
 }
 
+.store-product-badge-icon {
+  filter: invert(1);
+  height: 1em;
+  width: 1em;
+}
+
 .store-product-content {
   display: flex;
   flex: 1;
@@ -186,7 +199,7 @@ layout: null
   line-height: 1.35;
 }
 
-.store-product-features i {
+.store-product-features svg.lucide {
   color: var(--link-col);
   margin-top: 0.25rem;
 }
@@ -233,8 +246,8 @@ layout: null
   margin: 0.55rem 0 0.75rem;
 }
 
-.store-product-price-note i,
-.store-product-seller i {
+.store-product-price-note svg.lucide,
+.store-product-seller svg.lucide {
   margin-right: 0.35rem;
 }
 
@@ -327,6 +340,11 @@ layout: null
   width: 1.8rem;
 }
 
+.store-screenshot-expand svg.lucide {
+  height: 1rem;
+  width: 1rem;
+}
+
 .store-screenshot-thumbnail:hover .store-screenshot-expand,
 .store-screenshot-thumbnail:focus-visible .store-screenshot-expand {
   opacity: 1;
@@ -397,6 +415,13 @@ layout: null
   text-align: center;
 }
 
+.storefront-empty svg.lucide {
+  display: block;
+  height: 2rem;
+  margin: 0 auto 1rem;
+  width: 2rem;
+}
+
 @media (min-width: 992px) {
   .store-product-card-featured .store-product-summary {
     display: grid;

store.html

@@ -19,7 +19,7 @@
     <div class="container py-lg-2">
         <header class="storefront-intro mx-auto mb-4 text-center">
             <h1 class="storefront-kicker mb-2">
-                <i class="fa-solid fa-bag-shopping" aria-hidden="true"></i>
+                <i data-lucide="shopping-bag" aria-hidden="true"></i>
                 LizardByte Store
             </h1>
             <h2 class="display-6 fw-bolder mb-3">Tools built for better streaming</h2>
@@ -31,15 +31,15 @@ <h2 class="display-6 fw-bolder mb-3">Tools built for better streaming</h2>
 
         <ul class="storefront-assurance list-unstyled" aria-label="Store information">
             <li>
-                <i class="fa-solid fa-code" aria-hidden="true"></i>
+                <i data-lucide="code" aria-hidden="true"></i>
                 <span>Built by LizardByte</span>
             </li>
             <li>
-                <i class="fa-solid fa-shield-halved" aria-hidden="true"></i>
+                <i data-lucide="shield-check" aria-hidden="true"></i>
                 <span>Trusted checkout providers</span>
             </li>
             <li>
-                <i class="fa-solid fa-life-ring" aria-hidden="true"></i>
+                <i data-lucide="life-buoy" aria-hidden="true"></i>
                 <span>Documentation and support</span>
             </li>
         </ul>
@@ -54,7 +54,7 @@ <h2 class="display-6 fw-bolder mb-3">Tools built for better streaming</h2>
             </div>
         {% else %}
             <div class="storefront-empty">
-                <i class="fa-solid fa-box-open fa-2x mb-3" aria-hidden="true"></i>
+                <i data-lucide="package-open" aria-hidden="true"></i>
                 <h3 class="h4 fw-bold">More products are on the way</h3>
                 <p class="text-muted mb-0">Check back soon for new LizardByte products.</p>
             </div>