Frames

<!-- Phone frame -->
<div class="frame-phone">
  <div class="frame-phone-status-bar text-light">
    <span class="text-nowrap">9:41 AM</span>
    <span class="text-nowrap text-end">
      <i class="ai-wifi me-2"></i>
      <i class="ai-battery-charging"></i>
    </span>
  </div>
  <div class="frame-phone-body">
    <img src="path-to-app-screenshot" alt="App screen" />
  </div>
</div>

// Phone frame
.frame-phone
  .frame-phone-status-bar.text-light
    span.text-nowrap 9:41 AM
    span.text-nowrap.text-end
      i.ai-wifi.me-2
      i.ai-battery-charging
  .frame-phone-body
    img(src="path-to-app-screenshot", alt="App screen")

<!-- Browser frame -->
<div class="frame-browser">
  <div class="frame-browser-toolbar">
    <div class="text-nowrap me-3">
      <span class="frame-browser-button bg-danger"></span>
      <span class="frame-browser-button bg-warning"></span>
      <span class="frame-browser-button bg-success"></span>
    </div>
    <span class="fs-sm">https://example.com</span>
  </div>
  <div class="frame-browser-body">
    <img src="path-to-image" alt="Screenshot"/>
  </div>
</div>

// Browser frame
.frame-browser
  .frame-browser-toolbar
    .text-nowrap.me-3
      span.frame-browser-button.bg-danger
      span.frame-browser-button.bg-warning
      span.frame-browser-button.bg-success
    span.fs-sm https://example.com
  .frame-browser-body
    img(src="path-to-image", alt="Screenshot")

<!-- Carousel inside browser frame -->
<div class="frame-browser tns-carousel-wrapper">
  <div class="frame-browser-toolbar">
    <div class="text-nowrap me-3">
      <span class="frame-browser-button bg-danger"></span>
      <span class="frame-browser-button bg-warning"></span>
      <span class="frame-browser-button bg-success"></span>
    </div>
    <span class="tns-carousel-label fs-sm">https://mobileapp.com</span>
  </div>
  <div class="frame-browser-body">
    <div class="tns-carousel-inner" data-carousel-options='{"mode": "gallery", "controls": false, "nav": false}'>
      <div data-carousel-label="https://mobileapp.com">
        <img src="path-to-first-image" class="rounded" alt="Screenshot"/>
      </div>
      <div data-carousel-label="https://bookingapp.com">
        <img src="path-to-second-image" class="rounded" alt="Screenshot"/>
      </div>
      <div data-carousel-label="https://creativeagency.com">
        <img src="path-to-third-image" class="rounded" alt="Screenshot"/>
      </div>
    </div>
  </div>
  <div class="tns-carousel-pager pt-4 text-nowrap text-center mt-2 mb-n2">
    <button class="active" data-nav data-goto="1"></button>
    <button data-nav data-goto="2"></button>
    <button data-nav data-goto="3"></button>
  </div>
</div>

// Carousel inside browser frame
.frame-browser.tns-carousel-wrapper
  .frame-browser-toolbar
    .text-nowrap.me-3
      span.frame-browser-button.bg-danger
      span.frame-browser-button.bg-warning
      span.frame-browser-button.bg-success
    span.tns-carousel-label.fs-sm https://mobileapp.com
  .frame-browser-body
    .tns-carousel-inner(data-carousel-options="{"mode": "gallery", "controls": false, "nav": false}")
      div(data-carousel-label="https://mobileapp.com")
        img(src="path-to-first-image", alt="Screenshot").rounded
      div(data-carousel-label="https://bookingapp.com")
        img(src="path-to-second-image", alt="Screenshot").rounded
      div(data-carousel-label="https://creativeagency.com")
        img(src="path-to-third-image", alt="Screenshot").rounded
  .tns-carousel-pager.pt-4.text-nowrap.text-center.mt-2.mb-n2
    button(data-nav data-goto="1").active
    button(data-nav data-goto="2")
    button(data-nav data-goto="3")