wickes-css2 2.98.0-develop.1 → 2.98.0-develop.10

package/src/components/donation-cart-new.hbs

@@ -0,0 +1,38 @@
+<div class="donation-cart-new">
+  <div class="donation-cart-new__details">
+    <div class="donation-cart-new__options">
+      <p class="donation-cart-new__description">
+        Select the amount you would like to donate:
+      </p>
+      <div class="donation-cart-new__holder">
+        {{#each options}}
+          <button
+              class="btn
+                   {{#if active}}btn-selected {{else}} btn-secondary{{/if}}
+                   donation-cart-new__btn"
+              data-value="{{value}}"
+          >
+            <span class="btn__text">{{title}}</span>
+          </button>
+        {{/each}}
+      </div>
+      <div class="donation-cart-new__cost donation-cart-new__cost-hide">
+        <div class="donation-cart-new__price">
+          <span class="donation-cart-new__currency">£</span>
+          <span class="donation-cart-new__value"></span>
+          donation has been added to your basket.
+        </div>
+        <button class="btn order-item__remove" data-action="remove">
+          <span class="btn__text">
+            <i class="fas fa-trash"></i>
+          </span>
+        </button>
+      </div>
+
+      <hr class="donation-cart-new__divider" />
+      <p class="donation-cart-new__charity-info">
+        Charity Reg No: 1110621 & Scot SC044347
+      </p>
+    </div>
+  </div>
+</div>

package/src/components/modal.hbs

@@ -1,6 +1,6 @@
 <!-- Bootstrap 4 modal dialog markup https://getbootstrap.com/docs/4.1/components/modal/ -->
 
-<div class="modal modal-box {{#if fullWidth}}modal-box_full{{/if}} {{#if wide}}modal-box_wide{{/if}}{{classMod}}"
+<div class="modal  modal-box {{#if fullWidth}}modal-box_full{{/if}} {{#if wide}}modal-box_wide{{/if}}{{classMod}}"
      id="{{id}}" role="dialog" tabindex="-1" data-backdrop="{{backdrop}}" data-keyboard={{#if keyboard}}{{keyboard}}{{else}}false{{/if}}
 >
   <div class="modal-dialog modal-box__container {{#if centered}}modal-dialog-centered{{/if}}" role="document">
@@ -38,6 +38,9 @@
             {{/block}}
 
           </div>
+          <div class="modal-footer modal-box__footer">
+            {{#block "footer"}}{{/block}}
+          </div>
         </div>
       </div>
     </div>

package/src/components/my-account/active-orders/list-orders.hbs

@@ -4,7 +4,7 @@
   {{/if}}
 
   {{#each orders}}
-    {{> my-account/active-orders/order switch-vat=../switch-vat}}
+    {{> my-account/active-orders/order switch-vat=../switch-vat billieText=../billieText}}
   {{/each}}
 
   {{#if linkText}}

package/src/components/my-account/active-orders/order.hbs

@@ -3,6 +3,8 @@
 
   {{> my-account/active-orders/order-details switch-vat=switch-vat}}
 
+  {{> my-account/active-orders/payment-status}}
+
   {{#if totalConsignments}}
     {{> my-account/active-orders/consignment-info}}
   {{/if}}

package/src/components/my-account/active-orders/payment-status.hbs

@@ -0,0 +1,17 @@
+<div class="payment-status payment-status--{{paymentStatus.status}}">
+  <span class="payment-status__logo">
+    <img class="payments-status__image" src="./img/billie.svg" alt="Billie">
+  </span>
+  <div class="payment-status__content">
+    {{#if paymentStatus.paymentTitle}}
+      <div class="payment-status__title">
+        <span>{{paymentStatus.paymentTitle}}</span>
+      </div>
+    {{/if}}
+    {{#if paymentStatus.paymentText}}
+      <div class="payment-status__text">
+        <span>{{paymentStatus.paymentText}}</span>
+      </div>
+    {{/if}}
+  </div>
+</div>

package/src/components/my-account/payment-status.hbs

@@ -0,0 +1,19 @@
+{{#if paymentStatus}}
+  <div class="payment-status payment-status--{{paymentStatus.status}}">
+    <span class="payment-status__logo">
+      <img class="payments-status__image" src="./img/billie.svg" alt="Billie">
+    </span>
+    <div class="payment-status__content">
+      {{#if paymentStatus.paymentTitle}}
+        <span class="payment-status__title">
+          {{paymentStatus.paymentTitle}}
+        </span>
+      {{/if}}
+      {{#if paymentStatus.paymentText}}
+        <span class="payment-status__text">
+          {{paymentStatus.paymentText}}
+        </span>
+      {{/if}}
+    </div>
+  </div>
+{{/if}}

package/src/components/my-account/saving-totaliser.hbs

@@ -0,0 +1,52 @@
+<div class="saving-totaliser {{#if this-last-year}}saving-totaliser--this-last-year{{/if}} {{#if this-year-only}}saving-totaliser--this-year-only{{/if}} {{#if no-savings}}saving-totaliser--no-savings{{/if}}">
+  <div class="saving-totaliser__title heading-3">Your TradePro savings</div >
+  <div class="saving-totaliser__wrapper">
+    <div class="saving-totaliser__cell">
+      <div class="saving-totaliser__saved">
+        <div class="saving-totaliser__cell-title saving-totaliser__saving-title">Since joining TradePro you've saved</div>
+        <div class="heading-1">{{#if no-savings}}£0.00{{else}}£3,920.37{{/if}}</div>
+      </div>
+      <div class="saving-totaliser__encourage">
+        {{#unless no-savings}}
+          <div>
+            <div class="saving-totaliser__attencion heading-2">Impressive!</div>
+            <div>Continue shopping with us to save even more.</div>
+          </div>
+        {{else}}
+          <div>
+            <div class="saving-totaliser__attencion heading-2">Looks like you've not used your discount yet. </div>
+            <div>Start shopping with us to start your building your TradePro savings.</div>
+            <a href="#" class="btn btn-primary">
+              <span class="btn__text">Explore offers</span>
+            </a>
+          </div>
+        {{/unless}}
+      </div>
+      <div class="saving-totaliser__saving-icon icon">
+        <i class="fas fa-piggy-bank"></i>
+      </div>
+    </div>
+     {{#unless no-savings}}
+      <div class="saving-totaliser__wrapper2">
+        <div class="saving-totaliser__cell">
+          <div class="saving-totaliser__cell-title heading-5">This month</div>
+          <div class="mb-0 heading-3">£18.43</div>
+        </div>
+        <div class="saving-totaliser__cell saving-totaliser__split-cell">
+          <div class="saving-totaliser__semi-cell">
+            <div class="saving-totaliser__cell-title heading-5">This year</div>
+            <div class="mb-0 heading-3">£471.34</div>
+          </div>
+          {{#unless this-year-only}}
+            <div class="saving-totaliser__divider"></div>
+            <div class="saving-totaliser__semi-cell">
+              <div class="saving-totaliser__cell-title heading-5">Last year</div>
+              <div class="mb-0 heading-3">£2,381.10</div>
+            </div>
+          {{/unless}}
+        </div>
+      </div>
+    {{/unless}}
+  </div>
+  <div class="saving-totaliser__note">Savings are calculated from the verification date of your TradePro account and are based on your TradePro Discount for online orders only.</div>
+</div>

package/src/components/order-summary.hbs

@@ -58,6 +58,9 @@
         ></klarna-placement>
       </div>
     {{/if}}
+    {{#if billie-placement}}
+      {{> billie-online-messaging basketStyles=true}}
+    {{/if}}
     {{#if clearpay-placement}}
       {{> clearpay applyMargin=true hasKlarna=true}}
     {{/if}}

package/src/components/payment-loader.hbs

@@ -1,23 +1,61 @@
 <div class="payment-loader {{#if hidden}}payment-loader--hidden{{/if}}">
-    <div class="payment-loader__modal">
-        {{#if paypal-logo}}
-            <div class="paypal-checkout-logo">
-                <img class="paypal-checkout-logo-pp" alt="pp" src="./img/paypal_logo_loader_pp.svg">
-                <img class="paypal-checkout-logo-paypal" alt="paypal" src="./img/paypal_logo_loader_paypal.svg">
-            </div>
-        {{else if klarna-logo}}
-            <div class="klarna-checkout-logo">
-                <div class="klarna-spinner-logo"></div>
-            </div>
-        {{else if google-logo}}
-            <div class="google-checkout-logo">
-              <div class="google-spinner-logo"></div>
-            </div>
-        {{else if clearpay-logo}}
-          <div class="clearpay-checkout-logo">
-            <div class="clearpay-spinner-logo"></div>
-          </div>
-        {{/if}}
-        <div class="spinner {{#if klarna-logo}}klarna-spinner{{/if}}"></div>
-    </div>
+  <div class="payment-loader__modal">
+  {{#if spinnerTypes}}
+    {{#each spinnerTypes}}
+      {{#if (eq this "paypal-logo")}}
+        <div class="paypal-checkout-logo">
+          <img class="paypal-checkout-logo-pp" alt="pp" src="./img/paypal_logo_loader_pp.svg">
+          <img class="paypal-checkout-logo-paypal" alt="paypal" src="./img/paypal_logo_loader_paypal.svg">
+        </div>
+      {{else if (eq this "klarna-logo")}}
+        <div class="klarna-checkout-logo">
+          <div class="klarna-spinner-logo"></div>
+        </div>
+
+      {{else if (eq this "google-logo")}}
+        <div class="google-checkout-logo">
+          <div class="google-spinner-logo"></div>
+        </div>
+
+      {{else if (eq this "clearpay-logo")}}
+        <div class="clearpay-checkout-logo">
+          <div class="clearpay-spinner-logo"></div>
+        </div>
+
+      {{else if (eq this "billie-logo")}}
+        <div class="billie-checkout-logo">
+          <div class="billie-spinner-logo"></div>
+        </div>
+      {{/if}}
+    {{/each}}
+  {{else}}
+    {{#if paypal-logo}}
+      <div class="paypal-checkout-logo">
+        <img class="paypal-checkout-logo-pp" alt="pp" src="./img/paypal_logo_loader_pp.svg">
+        <img class="paypal-checkout-logo-paypal" alt="paypal" src="./img/paypal_logo_loader_paypal.svg">
+      </div>
+    {{/if}}
+    {{#if klarna-logo}}
+      <div class="klarna-checkout-logo">
+        <div class="klarna-spinner-logo"></div>
+      </div>
+    {{/if}}
+    {{#if google-logo}}
+      <div class="google-checkout-logo">
+        <div class="google-spinner-logo"></div>
+      </div>
+    {{/if}}
+    {{#if clearpay-logo}}
+      <div class="clearpay-checkout-logo">
+        <div class="clearpay-spinner-logo"></div>
+      </div>
+    {{/if}}
+    {{#if billie-logo}}
+      <div class="billie-checkout-logo">
+        <div class="billie-spinner-logo"></div>
+      </div>
+    {{/if}}
+  {{/if}}
+    <div class="spinner {{#if klarna-logo}}klarna-spinner{{/if}}"></div>
+  </div>
 </div>

package/src/components/payments-checkout-v2.hbs

@@ -1,14 +1,20 @@
 <div class="payments-checkout">
   <p class="payments-checkout__title">Ways to Pay</p>
   <ul class="payments-checkout__list">
-    <li class="payments-checkout__item">
-      <span class="payments-checkout-klarna">
+    {{#if billieIcon}}
+      <li class="payments-checkout__item">
+        <img class="payments-checkout__image" src="./img/payment/footer/billie.svg" alt="Billie">
+      </li>
+    {{else}}
+      <li class="payments-checkout__item">
+        <span class="payments-checkout-klarna">
           <klarna-placement
-            data-key="sidebar-promotion-auto-size"
-            data-locale="en-GB"
+              data-key="sidebar-promotion-auto-size"
+              data-locale="en-GB"
           ></klarna-placement>
-      </span>
-    </li>
+        </span>
+      </li>
+    {{/if}}
     {{#each payments-checkout-list}}
       <li class="payments-checkout__item">
         <img class="payments-checkout__image" src="{{src}}" alt="{{payment}}">

package/src/components/payments-checkout.hbs

@@ -1,5 +1,10 @@
 <div class="payments-checkout">
     <ul class="payments-checkout__list">
+      {{#if billieIcon}}
+        <li class="payments-checkout__item">
+          <img class="payments-checkout__image" src="./img/payment/checkout/billie.svg" alt="billie">
+        </li>
+      {{else}}
         <li class="payments-checkout__item">
             <span class="payments-checkout-klarna">
                 <klarna-placement
@@ -8,6 +13,7 @@
                 ></klarna-placement>
             </span>
         </li>
+      {{/if}}
         {{#if clearPayIcon}}
           <li class="payments-checkout__item">
             <img class="payments-checkout__image" src="./img/payment/checkout/clearpay.svg" alt="clearpay">

package/src/components/payments.hbs

@@ -1,14 +1,20 @@
 <div class="payways">
   <p class="payways__title">Ways to Pay</p>
   <ul class="payways__list">
-    <li class="payways__item">
+    {{#if billieIcon}}
+      <li class="payways__item">
+        <img class="payways__image" src="./img/payment/footer/billie.svg" alt="Billie">
+      </li>
+    {{else}}
+      <li class="payways__item">
       <span class="payways-klarna">
           <klarna-placement
-            data-key="sidebar-promotion-auto-size"
-            data-locale="en-GB"
+              data-key="sidebar-promotion-auto-size"
+              data-locale="en-GB"
           ></klarna-placement>
       </span>
-    </li>
+      </li>
+    {{/if}}
     {{#each payments-list}}
       <li class="payways__item">
         <img class="payways__image" src="{{src}}" alt="{{payment}}">

package/src/components/price-block-v2.hbs

@@ -116,16 +116,21 @@
                 </div>
             {{/if}}
             {{#if klarna-placement}}
-                <div class="pdp-price__klarna-payment">
-                    <klarna-placement
-                        data-key="credit-promotion-badge"
-                        data-locale="en-GB"
-                        data-purchase-amount="12000"
-                    ></klarna-placement>
-                </div>
+              <div class="pdp-price__klarna-payment">
+                <klarna-placement
+                    data-key="credit-promotion-badge"
+                    data-locale="en-GB"
+                    data-purchase-amount="12000"
+                ></klarna-placement>
+              </div>
+            {{/if}}
+            {{#if billie-placement}}
+            <div class="pdp-price__billie-payment">
+              {{> billie-online-messaging}}
+            </div>
             {{/if}}
             {{#if clearpay-placement}}
-                {{> clearpay}}
+              {{> clearpay}}
             {{/if}}
         </div>
         {{#if currentlyInStock}}

package/src/components/smart-banner.hbs

@@ -1,4 +1,4 @@
-<div class="smart-banner show">
+<div class="smart-banner">
     <div>
         <button class="close notification__close smart-banner__action-close" type="button">
             <span class="icon"><i class="far fa-times"></i></span>

package/src/components/wismo-payment.hbs

@@ -37,6 +37,22 @@
             </div>
           </div>
       {{/each}}
+    {{else if payment-billie}}
+      {{#each wismo-order-payment-billie.items}}
+        {{#if this.isPaymentStatus}}
+          <div class="wrap-item">
+            <div class="wrap-item__name">{{{this.name}}}</div>
+            <div class="wrap-item__value">
+              {{> my-account/payment-status paymentStatus=this.paymentStatus}}
+            </div>
+          </div>
+        {{else}}
+          <div class="wrap-item">
+            <div class="wrap-item__name">{{{this.name}}}</div>
+            <div class="wrap-item__value">{{{this.value}}}</div>
+          </div>
+        {{/if}}
+      {{/each}}
     {{else if payment-clearpay}}
       {{#each wismo-order-payment-clearpay.items}}
         <div class="wrap-item">

package/src/data/data_shopping-cart-v2.json

@@ -1145,6 +1145,57 @@
         }
       }
     },
+    "charityDonationNew": {
+      "title": "Charity Donation",
+      "checkoutOrder": {
+        "charity": {
+          "title": "Would you like to make a donation to our chosen charity, Campaign Against Living Miserably (CALM)?",
+          "descr": "All charity donations are non-refundable.",
+          "message": "For more information about our charity partner",
+          "subLink": "https://www.wickes.co.uk/the-brain-tumour-charity",
+          "total": "Total",
+          "img": "img/calm-primary-logo.png",
+          "price": "£1",
+          "options": [
+            {
+              "title": "£1",
+              "value": "1",
+              "active": false
+            },
+            {
+              "title": "£3",
+              "value": "3",
+              "active": false
+            },
+            {
+              "title": "£5",
+              "value": "5",
+              "active": true
+            },
+            {
+              "title": "£10",
+              "value": "10",
+              "active": false
+            },
+            {
+              "title": "£15",
+              "value": "15",
+              "active": false
+            },
+            {
+              "title": "£50",
+              "value": "50",
+              "active": false
+            },
+            {
+              "title": "£100",
+              "value": "100",
+              "active": false
+            }
+          ]
+        }
+      }
+    },
     "charityDonationMultiple": {
       "title": "Charity Donation",
       "img": "img/young-minds-long.png",

package/src/data/data_wismo.json

@@ -151,6 +151,59 @@
       }
     ]
   },
+  "wismo-order-payment-billie" : {
+    "items": [
+      {
+        "name": "Billing address:",
+        "value": "Mr John Smith<br>19 Colonial Way, Watford, WD24 4JL,<br>United Kingdom"
+      },
+      {
+        "name": "Delivery address:",
+        "value": "Mr John Smith <br>19 Colonial Way, Watford, WD24 4JL,<br> United Kingdom"
+      },
+      {
+        "name": "Payment details:",
+        "isPaymentStatus": true,
+        "paymentStatus": {
+          "status": "success",
+          "paymentTitle": "Billie have received full payment"
+        }
+      },
+      {
+        "name": "Voucher:",
+        "value": "-"
+      },
+      {
+        "name": "Charity Donation",
+        "value": "3"
+      },
+      {
+        "name": "Payment details:",
+        "isPaymentStatus": true,
+        "paymentStatus": {
+          "status": "partial",
+          "paymentTitle": "Billie have received a part payment.",
+          "paymentText": "Full payment is due 30 days from final dispatch or collection date."
+        }
+      },
+      {
+        "name": "Payment details:",
+        "isPaymentStatus": true,
+        "paymentStatus": {
+          "status": "overdue",
+          "paymentTitle": "Your payment to Billie is overdue"
+        }
+      },
+      {
+        "name": "Payment details:",
+        "isPaymentStatus": true,
+        "paymentStatus": {
+          "status": "default",
+          "paymentText": "Payment due 30 days from final dispatch or collection date."
+        }
+      }
+    ]
+  },
   "wismo-order-transaction": {
     "orders": [
       {

package/src/data/my-account/data_my-account.json

@@ -53,6 +53,10 @@
               "statusTitle": "Processing",
               "statusIcon": "fas fa-sync"
             },
+            "paymentStatus": {
+              "status": "default",
+              "paymentText": "Payment due 30 days from final dispatch or collection date."
+            },
             "totalPrice": "72,986.40",
             "totalItemCount": 14,
             "orderDate": "22nd January 2025 10:35 am",
@@ -99,6 +103,59 @@
               "statusTitle": "Processing",
               "statusIcon": "fas fa-sync"
             },
+            "paymentStatus": {
+              "status": "overdue",
+              "paymentTitle": "Your payment to Billie is overdue"
+            },
+            "totalPrice": "316.73",
+            "totalItemCount": 8,
+            "orderDate": "22nd January 2025 10:35 am",
+            "totalConsignments": 1,
+            "shipmentDetails": [
+              {
+                "shipmentIcon": "fas fa-shipping-fast",
+                "shipmentTitle": "Supplier Delivery",
+                "shipmentInfo": "Dispatched. The supplier will be in contact with you after receiving order confirmation.",
+                "itemsCount": 4
+              }
+            ]
+          },
+          {
+            "orderId": "940524222",
+            "orderTooltipText": "We are mindful of the environment, and we try to plan our routes with sustainability in mind. We are trying to get your order to you as quickly as we can, therefore you're order may come on multiple vans",
+            "orderStatus": {
+              "statusTitle": "Processing",
+              "statusIcon": "fas fa-sync"
+            },
+            "paymentStatus": {
+              "status": "partial",
+              "paymentTitle": "Billie have received a part payment.",
+              "paymentText": "Full payment is due 30 days from final dispatch or collection date."
+            },
+            "totalPrice": "316.73",
+            "totalItemCount": 8,
+            "orderDate": "22nd January 2025 10:35 am",
+            "totalConsignments": 1,
+            "shipmentDetails": [
+              {
+                "shipmentIcon": "fas fa-shipping-fast",
+                "shipmentTitle": "Supplier Delivery",
+                "shipmentInfo": "Dispatched. The supplier will be in contact with you after receiving order confirmation.",
+                "itemsCount": 4
+              }
+            ]
+          },
+          {
+            "orderId": "940524222",
+            "orderTooltipText": "We are mindful of the environment, and we try to plan our routes with sustainability in mind. We are trying to get your order to you as quickly as we can, therefore you're order may come on multiple vans",
+            "orderStatus": {
+              "statusTitle": "Processing",
+              "statusIcon": "fas fa-sync"
+            },
+            "paymentStatus": {
+              "status": "success",
+              "paymentTitle": "Billie have received full payment"
+            },
             "totalPrice": "316.73",
             "totalItemCount": 8,
             "orderDate": "22nd January 2025 10:35 am",

package/src/elements/radiobutton.hbs

@@ -17,3 +17,10 @@
     <div class="form-row__error">{{error}}</div>
   {{/if}}
 </label>
+{{#if tooltip}}
+  {{#if tooltip.className}}
+    {{> info-icon title=tooltip data-placement=tooltip-placement }}
+  {{else}}
+    {{> info-icon title=tooltip data-placement="top" }}
+  {{/if}}
+{{/if}}

package/src/img/billie-logo.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="30" viewBox="0 0 48 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="30" rx="3" fill="#1C1C1E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5745 12.7948C14.5745 13.2295 14.5266 13.7053 14.4352 14.1499L14.4366 14.1484C15.296 14.8239 15.8041 15.849 15.8041 16.9337C15.8041 18.8962 14.1782 20.4934 12.1821 20.4934H7.3335V12.8713C7.3335 11.8929 7.74866 10.9469 8.47308 10.2772C9.14808 9.65419 10.0278 9.31152 10.9497 9.31152C11.028 9.31152 11.1079 9.31436 11.1862 9.31861C13.0532 9.43472 14.5745 10.9937 14.5745 12.7948ZM10.6956 18.8283H12.1792C13.2404 18.8283 14.1042 17.9787 14.1042 16.9351C14.1042 16.414 13.8907 15.9439 13.5452 15.6013C12.8906 16.8275 11.9571 17.8852 10.6956 18.8283ZM12.7962 13.6854C12.8427 13.4221 12.8789 13.1092 12.8789 12.7934C12.8789 11.8574 12.0718 11.0433 11.0803 10.9824C10.5417 10.9484 10.0292 11.1296 9.63733 11.4921C9.24533 11.8546 9.02908 12.3445 9.02908 12.8727V13.6854H12.7962ZM12.1792 15.0405H9.02908H9.02616V18.3199C10.5461 17.3669 11.5898 16.3164 12.2852 15.0434C12.2503 15.0405 12.2141 15.0405 12.1792 15.0405ZM21.5625 9.50834V18.7759C21.5625 19.9993 22.2535 20.6889 23.4221 20.6889C23.8982 20.6889 24.3453 20.5756 24.6618 20.4354L24.2582 19.1695C24.1436 19.2106 23.9984 19.2389 23.8402 19.2389C23.5222 19.2389 23.4076 19.0704 23.4076 18.7193V9.31152L21.5625 9.50834ZM26.0136 9.50834V18.7759C26.0136 19.9993 26.7046 20.6889 27.8732 20.6889C28.3493 20.6889 28.7964 20.5756 29.1129 20.4354L28.7093 19.1695C28.5947 19.2106 28.4495 19.2389 28.2912 19.2389C27.9733 19.2389 27.8587 19.0704 27.8587 18.7193V9.31152L26.0136 9.50834ZM40.6247 17.3204H35.8922C36.0344 18.8213 36.7472 19.3084 37.746 19.3084C38.4152 19.3084 38.9712 19.1002 39.6273 18.6556L40.3822 19.6709C39.6404 20.2557 38.7287 20.6578 37.5877 20.6578C35.2491 20.6578 33.9948 19.1427 33.9948 16.8191C33.9948 14.4955 35.207 12.8841 37.3453 12.8841C39.4837 12.8841 40.6667 14.2746 40.6667 16.5968C40.6667 16.7885 40.6486 17.0165 40.634 17.2001C40.6306 17.2429 40.6274 17.2834 40.6247 17.3204ZM38.8246 16.0729C38.8246 14.8622 38.3832 14.1401 37.3555 14.1401C36.5004 14.1401 35.9589 14.6965 35.8587 16.1564H38.8246V16.0729ZM19.5973 10.4228C19.5973 11.0204 19.1256 11.4933 18.4418 11.4933V11.4919C17.7711 11.4919 17.3007 11.0331 17.3007 10.4214C17.3007 9.80971 17.7566 9.33677 18.4418 9.33677C19.127 9.33677 19.5973 9.82528 19.5973 10.4228ZM17.5457 12.9199V20.392H19.3908V12.7245L17.5457 12.9199ZM32.4562 10.4228C32.4562 11.0204 31.9844 11.4933 31.3007 11.4933V11.4919C30.63 11.4919 30.1596 11.0331 30.1596 10.4214C30.1596 9.80971 30.6169 9.33677 31.3007 9.33677C31.9844 9.33677 32.4562 9.82528 32.4562 10.4228ZM30.3571 12.9199V20.392H32.2022V12.7245L30.3571 12.9199Z" fill="white"/>
+</svg>

package/src/img/billie-modal.svg

@@ -0,0 +1,4 @@
+<svg width="64" height="40" viewBox="0 0 64 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64" height="40" rx="3" fill="#1C1C1E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4325 17.0594C19.4325 17.639 19.3686 18.2734 19.2467 18.8661L19.2486 18.8643C20.3945 19.7648 21.0719 21.1317 21.0719 22.5779C21.0719 25.1946 18.9041 27.3243 16.2426 27.3243H9.77783V17.1614C9.77783 15.8568 10.3314 14.5956 11.2973 13.7026C12.1973 12.8719 13.3703 12.415 14.5994 12.415C14.7038 12.415 14.8104 12.4188 14.9148 12.4245C17.4041 12.5793 19.4325 14.6579 19.4325 17.0594ZM14.2606 25.104H16.2388C17.6537 25.104 18.8054 23.9713 18.8054 22.5798C18.8054 21.885 18.5208 21.2583 18.0602 20.8014C17.1873 22.4364 15.9426 23.8466 14.2606 25.104ZM17.0614 18.2469C17.1234 17.8958 17.1717 17.4786 17.1717 17.0575C17.1717 15.8096 16.0956 14.724 14.7736 14.6428C14.0555 14.5975 13.3722 14.8392 12.8496 15.3225C12.3269 15.8058 12.0386 16.459 12.0386 17.1633V18.2469H17.0614ZM16.2388 20.0537H12.0386H12.0347V24.4263C14.0613 23.1556 15.4529 21.7548 16.3801 20.0575C16.3336 20.0537 16.2853 20.0537 16.2388 20.0537ZM28.7498 12.6775V25.0342C28.7498 26.6654 29.6712 27.5848 31.2293 27.5848C31.8642 27.5848 32.4603 27.4338 32.8823 27.2468L32.3442 25.559C32.1913 25.6138 31.9977 25.6515 31.7867 25.6515C31.3628 25.6515 31.2099 25.4268 31.2099 24.9587V12.415L28.7498 12.6775ZM34.6846 12.6775V25.0342C34.6846 26.6654 35.6059 27.5848 37.1641 27.5848C37.7989 27.5848 38.3951 27.4338 38.8171 27.2468L38.2789 25.559C38.1261 25.6138 37.9325 25.6515 37.7215 25.6515C37.2976 25.6515 37.1447 25.4268 37.1447 24.9587V12.415L34.6846 12.6775ZM54.1661 23.0935H47.8561C48.0457 25.0947 48.9961 25.7442 50.3278 25.7442C51.2201 25.7442 51.9614 25.4666 52.8363 24.8738L53.8428 26.2275C52.8537 27.0073 51.6382 27.5434 50.1168 27.5434C46.9986 27.5434 45.3263 25.5233 45.3263 22.4251C45.3263 19.327 46.9425 17.1785 49.7936 17.1785C52.6447 17.1785 54.2222 19.0325 54.2222 22.1287C54.2222 22.3844 54.1979 22.6884 54.1785 22.9331C54.1739 22.9903 54.1697 23.0441 54.1661 23.0935ZM51.7659 21.4301C51.7659 19.8159 51.1775 18.8531 49.8072 18.8531C48.6671 18.8531 47.9451 19.595 47.8115 21.5416H51.7659V21.4301ZM26.1296 13.8968C26.1296 14.6935 25.5006 15.324 24.5889 15.324V15.3221C23.6946 15.3221 23.0675 14.7105 23.0675 13.8949C23.0675 13.0793 23.6753 12.4487 24.5889 12.4487C25.5025 12.4487 26.1296 13.1001 26.1296 13.8968ZM23.3942 17.2263V27.189H25.8543V16.9657L23.3942 17.2263ZM43.2747 13.8968C43.2747 14.6935 42.6457 15.324 41.7341 15.324V15.3221C40.8398 15.3221 40.2126 14.7105 40.2126 13.8949C40.2126 13.0793 40.8224 12.4487 41.7341 12.4487C42.6457 12.4487 43.2747 13.1001 43.2747 13.8968ZM40.4759 17.2263V27.189H42.9361V16.9657L40.4759 17.2263Z" fill="white"/>
+</svg>

package/src/img/billie-pdp.svg

@@ -0,0 +1,11 @@
+<svg width="50" height="26" viewBox="0 0 50 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1640_11325)">
+<path d="M47.0833 0.5H2.91667C1.30584 0.5 0 1.80584 0 3.41667V22.5833C0 24.1942 1.30584 25.5 2.91667 25.5H47.0833C48.6942 25.5 50 24.1942 50 22.5833V3.41667C50 1.80584 48.6942 0.5 47.0833 0.5Z" fill="#1C1C1E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8347 10.754C15.8347 11.1888 15.7868 11.6645 15.6954 12.1091L15.6968 12.1077C16.5563 12.7831 17.0643 13.8083 17.0643 14.8929C17.0643 16.8554 15.4384 18.4527 13.4423 18.4527H8.59375V10.8305C8.59375 9.85209 9.00892 8.90617 9.73333 8.23644C10.4083 7.61342 11.2881 7.27075 12.2099 7.27075C12.2883 7.27075 12.3682 7.27359 12.4465 7.27784C14.3134 7.39394 15.8347 8.95292 15.8347 10.754ZM11.9558 16.7875H13.4395C14.5007 16.7875 15.3644 15.9379 15.3644 14.8943C15.3644 14.3733 15.151 13.9032 14.8055 13.5605C14.1508 14.7868 13.2173 15.8444 11.9558 16.7875ZM14.0564 11.6447C14.1029 11.3813 14.1392 11.0684 14.1392 10.7526C14.1392 9.81667 13.3321 9.0025 12.3406 8.94159C11.802 8.90759 11.2895 9.08884 10.8976 9.45134C10.5056 9.81384 10.2893 10.3038 10.2893 10.8319V11.6447H14.0564ZM13.4395 12.9998H10.2893H10.2864V16.2792C11.8063 15.3262 12.8501 14.2756 13.5454 13.0026C13.5106 12.9998 13.4743 12.9998 13.4395 12.9998ZM22.8228 7.46757V16.7351C22.8228 17.9585 23.5138 18.6481 24.6823 18.6481C25.1585 18.6481 25.6056 18.5348 25.9221 18.3946L25.5185 17.1288C25.4038 17.1698 25.2587 17.1981 25.1004 17.1981C24.7825 17.1981 24.6678 17.0296 24.6678 16.6785V7.27075L22.8228 7.46757ZM27.2738 7.46757V16.7351C27.2738 17.9585 27.9648 18.6481 29.1334 18.6481C29.6096 18.6481 30.0567 18.5348 30.3732 18.3946L29.9696 17.1288C29.8549 17.1698 29.7098 17.1981 29.5515 17.1981C29.2336 17.1981 29.1189 17.0296 29.1189 16.6785V7.27075L27.2738 7.46757ZM41.8849 15.2796H37.1524C37.2947 16.7805 38.0074 17.2676 39.0063 17.2676C39.6754 17.2676 40.2314 17.0594 40.8876 16.6148L41.6425 17.6301C40.9007 18.2149 39.989 18.617 38.848 18.617C36.5093 18.617 35.2551 17.1019 35.2551 14.7783C35.2551 12.4548 36.4673 10.8433 38.6056 10.8433C40.7439 10.8433 41.927 12.2338 41.927 14.556C41.927 14.7478 41.9088 14.9758 41.8943 15.1593C41.8908 15.2022 41.8877 15.2426 41.8849 15.2796ZM40.0848 14.0321C40.0848 12.8214 39.6435 12.0993 38.6158 12.0993C37.7607 12.0993 37.2192 12.6558 37.119 14.1157H40.0848V14.0321ZM20.8576 8.38205C20.8576 8.97959 20.3858 9.4525 19.7021 9.4525V9.45109C19.0313 9.45109 18.561 8.99233 18.561 8.38063C18.561 7.76893 19.0168 7.296 19.7021 7.296C20.3873 7.296 20.8576 7.78451 20.8576 8.38205ZM18.806 10.8792V18.3513H20.6511V10.6838L18.806 10.8792ZM33.7164 8.38205C33.7164 8.97959 33.2447 9.4525 32.5609 9.4525V9.45109C31.8903 9.45109 31.4198 8.99233 31.4198 8.38063C31.4198 7.76893 31.8772 7.296 32.5609 7.296C33.2447 7.296 33.7164 7.78451 33.7164 8.38205ZM31.6173 10.8792V18.3513H33.4624V10.6838L31.6173 10.8792Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1640_11325">
+<rect width="50" height="25" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>