UI Components – Asitrastudio Library

<section class="is-relative section is-clipped has-background-white" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container">
    <div class="columns mb-20">
      <div class="column is-7-desktop mb-8 mb-0-desktop">
        <h1 class="title is-size-3-mobile is-size-2-tablet is-size-1-desktop" style="letter-spacing: -0.04em;">Testimonials</h1>
      </div>
      <div class="column is-5-desktop">
        <div class="is-flex is-justify-content-end is-align-items-center">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="button p-0 is-dark is-outlined is-dark is-rounded mr-8 is-inline-flex is-justify-content-center is-align-items-center" style="width: 74px; height: 74px;">
            <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.7051 7.12817L4.15732 13.6759L10.7051 20.2237" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M22.4941 13.6759H4.33949" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="button p-0 is-dark is-outlined is-dark is-rounded is-inline-flex is-justify-content-center is-align-items-center" style="width: 74px; height: 74px;">
            <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.2949 7.12817L22.8427 13.6759L16.2949 20.2237" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M4.50586 13.6759H22.6605" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%); transition: transform 0.5s ease-in-out;'">

<section class="section has-background-white">
  <div class="container">
    <div class="mb-12 columns is-multiline is-align-items-end">
      <div class="column is-6-tablet is-8-desktop mb-8 mb-0-tablet">
        <div>
          <span class="tag is-light mb-4 has-text-dark">Error</span>
          <h2 class="title is-size-2 is-size-1-desktop mb-10" style="letter-spacing: -0.02em;">Error 404</h2>
          <p class="has-mw-md has-mw-none-widescreen subtittle has-text-dark">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
        </div>
      </div>
      <div class="column is-4-desktop is-6-tablet has-text-right">
        <a class="button is-ghost px-0" href="#" style="height: 38px;">
          <span class="mr-2">Back to homepage</span>
          <svg class="is-rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
    <img class="image is-fullwidth" src="asitrastudio-assets/http-codes/long-banner.png" alt="">
  </div>
</section>

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-20" style="letter-spacing: -0.04em;">Get started quickly</h1>
    <div class="mb-6 px-10 pt-20 pt-10-desktop pb-10 has-background-white" style="border-radius: 40px;">
      <div class="columns is-multiline is-vcentered">
        <div class="column is-7 mb-12 mb-0-desktop">
          <div class="has-mw-md has-mw-lg-desktop mx-auto">
            <h3 class="title mb-6 is-size-3-mobile is-size-2-desktop" style="letter-spacing: -0.02em;">Althhorpe Street Leamigton Spa</h3>
            <p class="has-mw-sm is-size-6 has-text-grey mb-10">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
            <a class="button is-outlined is-dark is-rounded" href="#">
              <span class="mr-2">Get consulation</span>
              <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="column is-5">
          <img class="is-block image is-fullwidth" src="asitrastudio-assets/features/photo-medium-dark.png" alt="" style="border-radius: 40px;">
        </div>
      </div>
    </div>
    <div class="mb-6 px-10 pt-20 pt-10-desktop pb-10 has-background-white" style="border-radius: 40px;">

<section class="section has-background-white-ter">
  <div class="container">
    <a class="mb-24 is-inline-block" href="#">
      <img src="asitrastudio-assets/logos/logo-asi.svg" alt="">
    </a>
    <div class="has-mw-md mx-auto has-text-centered">
      <form action="">
        <h3 class="mb-10 is-size-4 has-text-weight-medium has-text-dark" style="letter-spacing: -0.02em;">Sign in to asitrastudio</h3>
        <a class="button is-white is-rounded mb-2 is-fullwidth" href="#">
          <img src="asitrastudio-assets/sign-in/google.svg" alt="">
          <span class="is-size-7 has-text-dark ml-4">Sign in with Google</span>
        </a>
        <a class="button is-white is-rounded mb-8 is-fullwidth" href="#">
          <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.7478 0C12.7876 0 12.8274 0 12.8695 0C12.9671 1.20593 12.5068 2.107 11.9474 2.75952C11.3985 3.40754 10.6469 4.03603 9.43117 3.94067C9.35007 2.75201 9.81112 1.91777 10.3698 1.26675C10.8879 0.660032 11.8378 0.120142 12.7478 0Z" fill="#222222"></path>
            <path d="M16.4254 12.5517C16.4254 12.5638 16.4254 12.5743 16.4254 12.5855C16.0837 13.6203 15.5964 14.5071 15.0017 15.33C14.4588 16.0772 13.7935 17.0826 12.6056 17.0826C11.5791 17.0826 10.8973 16.4226 9.84534 16.4046C8.73252 16.3865 8.12055 16.9565 7.10309 17.0999C6.98671 17.0999 6.87032 17.0999 6.75618 17.0999C6.00905 16.9917 5.40608 16.4 4.96681 15.8669C3.67153 14.2916 2.6706 12.2566 2.48438 9.65256C2.48438 9.39725 2.48438 9.1427 2.48438 8.8874C2.56322 7.02369 3.46879 5.5084 4.67247 4.77403C5.30772 4.38357 6.181 4.05092 7.1534 4.1996C7.57015 4.26418 7.9959 4.40685 8.36909 4.54801C8.72276 4.68392 9.16504 4.92496 9.58403 4.91219C9.86787 4.90393 10.1502 4.75601 10.4363 4.65164C11.2743 4.34903 12.0958 4.00212 13.1785 4.16506C14.4798 4.36179 15.4034 4.93998 15.9741 5.83203C14.8733 6.53261 14.003 7.58836 14.1517 9.39125C14.2838 11.0289 15.236 11.9871 16.4254 12.5517Z" fill="#222222"></path>
          </svg>
          <span class="is-size-7 has-text-dark ml-4">Sign in with Apple</span>
        </a>
        <div class="mb-8 is-flex is-align-items-center">
          <div class="has-background-light is-fullwidth" style="height: 2px;"></div>
          <span class="mx-5 is-size-7 is-uppercase has-text-weight-medium has-text-grey-light">or</span>
          <div class="has-background-light is-fullwidth" style="height: 2px;"></div>
        </div>

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-20" style="letter-spacing: -0.04em;">Services</h1>
    <div class="has-mw-md has-mw-none-desktop mx-auto">
      <div class="columns is-multiline">
        <div class="column is-12 is-4-desktop mb-6 mb-0-desktop">
          <a class="button is-outlined is-dark is-block px-9 py-14 has-text-weight-normal has-text-left is-relative is-fullwidth is-covered" href="#" style="border-radius: 40px; height: 100%">
            <span class="mt-16 mr-8 is-absolute is-top-0 is-right-0 is-hidden-mobile">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 2L2 22" stroke="currentColor" stroke-width="3.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M22 20.3393V2H3.66071" stroke="currentColor" stroke-width="3.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
            <div class="has-mw-xs has-mw-none-desktop" style="white-space: normal;">
              <span class="is-inline-block mb-6 is-block is-size-3">De-risking your project</span>
              <p>We follow the RIBA Plan of Work 2020 to ensure an orderly framework and project clarity from the outset. First, we conduct feasibility studies and a project review.</p>
            </div>
          </a>
        </div>
        <div class="column is-12 is-4-desktop mb-6 mb-0-desktop">
          <a class="button is-dark is-block px-9 py-14 has-text-weight-normal has-text-left is-relative is-fullwidth is-covered" href="#" style="border-radius: 40px; height: 100%">
            <span class="mt-16 mr-8 is-absolute is-top-0 is-right-0 is-hidden-mobile">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 2L2 22" stroke="currentColor" stroke-width="3.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="section py-5 is-relative has-background-white">
  <div class="container">
    <div class="px-8 px-12-tablet has-background-white is-clipped">
      <div class="has-mw-5xl mx-auto is-relative">
        <img class="has-mw-2xl mr-0-desktop -mr-24-desktop-only is-absolute is-block-tablet is-hidden-touch is-bottom-0 is-right-0" src="asitrastudio-assets/download/phone-right-sm.png" alt="">
        <div class="has-mw-sm has-mw-md-tablet has-mw-lg-desktop mx-auto mx-0-desktop py-20 is-relative">
          <span class="tag is-light mb-4 has-text-dark">Full Time</span>
          <h2 class="title is-size-3-mobile is-size-2-tablet mb-8" style="letter-spacing: -0.02em;">Get our mobile app to make the process faster</h2>
          <div class="has-mw-sm buttons is-flex-wrap-nowrap">
            <a class="mr-6 is-inline-block" href="#">
              <img class="image is-fullwidth" src="asitrastudio-assets/download/app-store.svg" alt="">
            </a>
            <a class="is-inline-block" href="#">
              <img class="image is-fullwidth" src="asitrastudio-assets/download/google.svg" alt="">
            </a>
          </div>
        </div>
        <img class="is-block is-hidden-desktop image is-fullwidth has-mw-2xl mx-auto" src="asitrastudio-assets/download/phone-right-sm.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="section has-background-white-ter">
  <div class="container">
    <a class="mb-24 is-inline-block" href="#">
      <img src="asitrastudio-assets/logos/logo-asi.svg" alt="">
    </a>
    <div class="has-mw-md mx-auto has-text-centered">
      <form action="">
        <h3 class="mb-10 is-size-4 has-text-weight-medium has-text-dark" style="letter-spacing: -0.02em;">Sign up to asitrastudio</h3>
        <a class="button is-light is-outlined is-rounded mb-2 is-fullwidth" href="#">
          <img src="asitrastudio-assets/sign-in/google.svg" alt="">
          <span class="is-size-7 has-text-dark ml-4">Sign up with Google</span>
        </a>
        <a class="button is-light is-outlined is-rounded mb-8 is-fullwidth" href="#">
          <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.7478 0C12.7876 0 12.8274 0 12.8695 0C12.9671 1.20593 12.5068 2.107 11.9474 2.75952C11.3985 3.40754 10.6469 4.03603 9.43117 3.94067C9.35007 2.75201 9.81112 1.91777 10.3698 1.26675C10.8879 0.660032 11.8378 0.120142 12.7478 0Z" fill="#222222"></path>
            <path d="M16.4254 12.5517C16.4254 12.5638 16.4254 12.5743 16.4254 12.5855C16.0837 13.6203 15.5964 14.5071 15.0017 15.33C14.4588 16.0772 13.7935 17.0826 12.6056 17.0826C11.5791 17.0826 10.8973 16.4226 9.84534 16.4046C8.73252 16.3865 8.12055 16.9565 7.10309 17.0999C6.98671 17.0999 6.87032 17.0999 6.75618 17.0999C6.00905 16.9917 5.40608 16.4 4.96681 15.8669C3.67153 14.2916 2.6706 12.2566 2.48438 9.65256C2.48438 9.39725 2.48438 9.1427 2.48438 8.8874C2.56322 7.02369 3.46879 5.5084 4.67247 4.77403C5.30772 4.38357 6.181 4.05092 7.1534 4.1996C7.57015 4.26418 7.9959 4.40685 8.36909 4.54801C8.72276 4.68392 9.16504 4.92496 9.58403 4.91219C9.86787 4.90393 10.1502 4.75601 10.4363 4.65164C11.2743 4.34903 12.0958 4.00212 13.1785 4.16506C14.4798 4.36179 15.4034 4.93998 15.9741 5.83203C14.8733 6.53261 14.003 7.58836 14.1517 9.39125C14.2838 11.0289 15.236 11.9871 16.4254 12.5517Z" fill="#222222"></path>
          </svg>
          <span class="is-size-7 has-text-dark ml-4">Sign up with Apple</span>
        </a>
        <div class="mb-8 is-flex is-align-items-center">
          <div class="has-background-light is-fullwidth" style="height: 2px;"></div>
          <span class="mx-5 is-size-7 is-uppercase has-text-weight-medium has-text-grey-light">or</span>
          <div class="has-background-light is-fullwidth" style="height: 2px;"></div>
        </div>

<section class="section has-background-light">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop mb-16 mb-0-desktop">
        <div class="has-mw-xl mx-auto mx-0-desktop">
          <div class="has-mw-lg mb-10">
            <h1 class="title is-size-2-mobile is-size-1-tablet mb-8" style="letter-spacing: -0.04em;">Let&grave;s talk</h1>
            <p class="subtitle is-size-6">Whereby Embedded is the easiest way to embed video calls directly into your app, website, or anywhere else you need beautiful, custom video chat &ndash; that just works.</p>
          </div>
          <div class="mb-20 columns is-multiline">
            <div class="column is-6">
              <div class="box py-6 has-text-centered" style="border-radius: 20px;">
                <span class="mb-2 is-block has-text-grey-dark">Call us</span>
                <span class="has-text-weight-medium has-text-dark">+48 291 821 114</span>
              </div>
            </div>
            <div class="column is-6">
              <div class="box py-6 has-text-centered" style="border-radius: 20px;">
                <span class="mb-2 is-block has-text-grey-dark">Email us</span>
                <span class="has-text-weight-medium has-text-dark">contact@asitrastudio.co</span>
              </div>
            </div>
          </div>
          <div>

<section class="is-relative is-clipped" x-data="{ open: true }" :class="{ 'is-hidden': !open }">
  <div class="px-8 pt-8 pb-9 is-fixed is-bottom-0 is-right-0 has-background-white is-fullwidth" style="z-index: 50; width: 100%;">
    <div class="is-absolute is-top-0 is-right-0 mt-2 mr-5 mr-12-widescreen">
      <button x-on:click.prevent="open = false" class="button p-0 is-light has-background-white">
        <svg width="15" height="16" viewbox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.5 6.45616L7.42929 6.38545L1.96352 0.919676C1.96351 0.919673 1.96351 0.919669 1.96351 0.919666C1.75876 0.714984 1.4811 0.6 1.19159 0.6C0.902079 0.6 0.624425 0.71498 0.419676 0.919655C0.419669 0.919662 0.419662 0.919669 0.419655 0.919676M7.5 6.45616L0.419655 0.919676M7.5 6.45616L7.57071 6.38545M7.5 6.45616L7.57071 6.38545M0.419655 0.919676C0.21498 1.12442 0.1 1.40208 0.1 1.69159C0.1 1.9811 0.214984 2.25876 0.419666 2.46351M0.419655 0.919676L0.419666 2.46351M0.419666 2.46351C0.419669 2.46351 0.419673 2.46351 0.419676 2.46352M0.419666 2.46351L0.419676 2.46352M0.419676 2.46352L5.88545 7.92929M0.419676 2.46352L5.88545 7.92929M7.57071 6.38545L13.0365 0.919676C13.0365 0.919673 13.0365 0.919669 13.0365 0.919666C13.2412 0.714984 13.5189 0.6 13.8084 0.6C14.0979 0.6 14.3756 0.71498 14.5803 0.919655C14.785 1.12441 14.9 1.40207 14.9 1.69159C14.9 1.9811 14.785 2.25876 14.5803 2.46351C14.5803 2.46351 14.5803 2.46351 14.5803 2.46352L9.11455 7.92929L9.04384 8L9.11455 8.07071L14.5803 13.5365C14.5803 13.5365 14.5803 13.5365 14.5803 13.5365M7.57071 6.38545L14.5803 13.5365M5.95616 8L5.88545 8.07071L0.419676 13.5365C0.419673 13.5365 0.419669 13.5365 0.419666 13.5365C0.214984 13.7412 0.1 14.0189 0.1 14.3084C0.1 14.5979 0.21498 14.8756 0.419655 15.0803C0.624405 15.285 0.902069 15.4 1.19159 15.4C1.4811 15.4 1.75876 15.285 1.96351 15.0803C1.96351 15.0803 1.96351 15.0803 1.96352 15.0803L7.42929 9.61455L7.5 9.54384L7.57071 9.61455L13.0365 15.0803C13.0365 15.0803 13.0365 15.0803 13.0365 15.0803C13.2412 15.285 13.5189 15.4 13.8084 15.4C14.0979 15.4 14.3756 15.285 14.5803 15.0803C14.5803 15.0803 14.5803 15.0803 14.5803 15.0803M5.95616 8L14.5803 15.0803M5.95616 8L5.88545 7.92929M5.95616 8L5.88545 7.92929M14.5803 15.0803C14.785 14.8756 14.9 14.5979 14.9 14.3084C14.9 14.0189 14.785 13.7412 14.5803 13.5365M14.5803 15.0803L14.5803 13.5365" fill="#222222" stroke="black" stroke-width="1"></path>
        </svg>
      </button>
    </div>
    <div class="section py-0">
      <div class="container">
        <div class="columns is-multiline is-vcentered">
          <div class="column is-1-tablet is-align-self-flex-start">
            <svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.082 12.8333C12.0485 12.8333 12.832 12.0498 12.832 11.0833C12.832 10.1168 12.0485 9.33331 11.082 9.33331C10.1155 9.33331 9.33203 10.1168 9.33203 11.0833C9.33203 12.0498 10.1155 12.8333 11.082 12.8333Z" fill="black"></path>
              <path d="M21.582 3.5C22.5485 3.5 23.332 2.7165 23.332 1.75C23.332 0.783502 22.5485 0 21.582 0C20.6155 0 19.832 0.783502 19.832 1.75C19.832 2.7165 20.6155 3.5 21.582 3.5Z" fill="black"></path>
              <path d="M25.082 9.33331C26.0485 9.33331 26.832 8.54981 26.832 7.58331C26.832 6.61681 26.0485 5.83331 25.082 5.83331C24.1155 5.83331 23.332 6.61681 23.332 7.58331C23.332 8.54981 24.1155 9.33331 25.082 9.33331Z" fill="black"></path>
              <path d="M11.082 18.6667C12.0485 18.6667 12.832 17.8832 12.832 16.9167C12.832 15.9502 12.0485 15.1667 11.082 15.1667C10.1155 15.1667 9.33203 15.9502 9.33203 16.9167C9.33203 17.8832 10.1155 18.6667 11.082 18.6667Z" fill="black"></path>
              <path d="M16.918 18.6667C17.8845 18.6667 18.668 17.8832 18.668 16.9167C18.668 15.9502 17.8845 15.1667 16.918 15.1667C15.9515 15.1667 15.168 15.9502 15.168 16.9167C15.168 17.8832 15.9515 18.6667 16.918 18.6667Z" fill="black"></path>
              <path d="M27.9335 12.663C27.9076 12.3933 27.7887 12.141 27.5971 11.9494C27.4055 11.7578 27.1532 11.6389 26.8835 11.613C24.1881 11.3533 21.667 10.1641 19.7523 8.24923C17.8377 6.33436 16.6487 3.8131 16.3893 1.11767C16.3635 0.84795 16.2445 0.595643 16.053 0.40405C15.8614 0.212457 15.6091 0.0935253 15.3393 0.0676667C14.8972 0.0245 14.4515 0 14 0C11.2311 0 8.52431 0.821086 6.22202 2.35943C3.91973 3.89777 2.12532 6.08427 1.06569 8.64243C0.006066 11.2006 -0.271181 14.0155 0.269012 16.7313C0.809205 19.447 2.14258 21.9416 4.10051 23.8995C6.05845 25.8574 8.55301 27.1908 11.2687 27.731C13.9845 28.2712 16.7994 27.9939 19.3576 26.9343C21.9157 25.8747 24.1022 24.0803 25.6406 21.778C27.1789 19.4757 28 16.7689 28 14C28 13.5485 27.9755 13.1028 27.9335 12.663ZM14 25.6667C10.9058 25.6667 7.93835 24.4375 5.75043 22.2496C3.5625 20.0617 2.33334 17.0942 2.33334 14C2.33334 10.9058 3.5625 7.93835 5.75043 5.75042C7.93835 3.5625 10.9058 2.33333 14 2.33333H14.1983C14.6841 5.19838 16.049 7.84141 18.1038 9.89622C20.1586 11.951 22.8016 13.3159 25.6667 13.8017C25.6667 13.8682 25.6667 13.9335 25.6667 14C25.6633 17.0932 24.433 20.0586 22.2458 22.2458C20.0586 24.433 17.0932 25.6633 14 25.6667Z" fill="black"></path>
            </svg>
          </div>
          <div class="column is-7-tablet is-8-desktop">
            <h4 class="mb-4 is-size-5 has-text-weight-medium has-text-dark" style="letter-spacing: -0.01em;">Cookie Consent</h4>

<section class="section has-background-light is-clipped">
  <div class="container is-relative">
    <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-left-0 image" src="asitrastudio-assets/newsletter/avatar-triple1.png" alt="">
    <img class="mb-16 is-block is-hidden-widescreen image" src="asitrastudio-assets/newsletter/avatar-triple1.png" alt="">
    <div>
      <div class="has-mw-sm mx-auto mb-12 has-text-centered">
        <h1 class="title mb-10 is-size-2" style="letter-spacing: -0.02em;">Keep up with our contant</h1>
        <p class="subtitle is-size-6">It is a long established fact that a reader will be distracted by the readable content</p>
      </div>
      <div class="has-mw-xl mx-auto">
        <div class="field is-flex-tablet is-justify-content-center">
          <div class="control is-fullwidth mr-0-mobile mr-3 mb-2 mb-0-tablet">
            <input class="input has-background-white has-text-dark" type="email" placeholder="Enter your email" style="border: none;">
          </div>
          <div class="control">
            <button class="button is-dark is-fullwidth is-rounded" type="submit">Sign Up</button>
          </div>
        </div>
      </div>
    </div>
    <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-right-0 image" src="asitrastudio-assets/newsletter/avatar-triple2.png" alt="">
    <img class="mt-24 ml-auto is-block is-hidden-widescreen image" src="asitrastudio-assets/newsletter/avatar-triple2.png" alt="">
  </div>
</section>

<section class="section py-24 has-background-dark">
  <div class="container">
    <div class="has-mw-xl-desktop has-mw-3xl-widescreen mx-auto has-text-centered">
      <span class="is-block mb-4 has-text-light has-text-weight-medium">Lorem Ipsum</span>
      <h1 class="title is-size-3-mobile is-size-1-tablet has-text-white mb-8" style="letter-spacing: -0.04em;">Share your travels with friends &amp; family</h1>
      <div class="has-mw-xl mx-auto mb-10">
        <p class="is-size-7 has-text-grey-light">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
      </div>
      <a class="button is-primary is-rounded" href="#">
        <span class="mr-2">Get consulation</span>
        <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 1.5L1 9.5" stroke="white" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M9 8.83571V1.5H1.66429" stroke="white" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </div>
  </div>
</section>

<section class="is-relative is-clipped">
  <div class="is-fixed is-bottom-0 is-left-0 is-fullwidth pt-8 pb-10" style="z-index: 50;">
    <div class="is-flex px-6 is-justify-content-center">
      <div class="notification is-warning is-light is-inline-flex py-4 pl-5 pr-6 is-align-items-center" style="border-radius: 20px;">
        <span class="mr-4">
          <svg width="23" height="23" viewbox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.5013 1.91669C6.2169 1.91669 1.91797 6.21562 1.91797 11.5C1.91797 16.7844 6.2169 21.0834 11.5013 21.0834C16.7857 21.0834 21.0846 16.7844 21.0846 11.5C21.0846 6.21562 16.7857 1.91669 11.5013 1.91669ZM12.1817 16.9721C11.9997 17.1443 11.7502 17.25 11.5013 17.25C11.2519 17.25 11.003 17.1443 10.8209 16.9721C10.6483 16.79 10.543 16.5406 10.543 16.2917C10.543 16.0423 10.6483 15.7933 10.8209 15.6113C11.185 15.2566 11.8172 15.2566 12.1817 15.6113C12.3539 15.7933 12.4596 16.0423 12.4596 16.2917C12.4596 16.5505 12.3539 16.79 12.1817 16.9721ZM12.4596 12.4584C12.4596 12.9876 12.0305 13.4167 11.5013 13.4167C10.9721 13.4167 10.543 12.9876 10.543 12.4584V6.70835C10.543 6.17912 10.9721 5.75002 11.5013 5.75002C12.0305 5.75002 12.4596 6.17912 12.4596 6.70835V12.4584Z" fill="#F0B400"></path>
          </svg>
        </span>
        <p>Please check your email to confirm your address befere you can see that</p>
      </div>
    </div>
  </div>
</section>

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet" style="letter-spacing: -0.04em;">About us</h1>
    <div class="columns is-multiline">
      <div class="column is-2-desktop mb-14 mb-0-desktop">
        <a class="button is-ghost px-0" href="#" style="height: 38px;">
          <span class="mr-2">Get to know us</span>
          <svg class="is-rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
      <div class="column is-10-desktop">
        <div class="has-mw-4xl-desktop ml-20-desktop mt-n6">
          <p class="is-size-5 mb-10 has-text-dark" style="text-indent: 6rem;">
            <span>KW70 Fix is a leading real estate investment firm in the World, headquartered in New York with offices in</span>
            <span></span>
            <span>London, Chicago, Barcelona, Vienna, Rome, Las Vegas.</span>
            <span>KW70 Fix initiative seeks out regions and markets with robust underlying catalysts, such as burgeoning technology sectors, a diverse workforce, and a strong entrepreneurial culture.</span>
          </p>
          <ul>
            <li class="mb-8 pb-4 is-flex is-justify-content-space-between is-align-items-end has-text-dark" style="border-bottom: 1.5px solid #000000;">
              <span>It is a long established</span>

<section class="section py-0 is-relative has-background-dark is-clipped">
  <div class="container is-relative">
    <img class="has-mw-4xl has-mw-none-widescreen -mr-24-desktop-only is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-right-0" src="asitrastudio-assets/download/phone-dark-right.png" alt="">
    <div class="is-relative">
      <div class="has-mw-sm has-mw-md-tablet has-mw-lg-desktop mx-auto mx-0-desktop pt-12 pt-20-tablet pt-24-tablet pb-20">
        <span class="tag is-black mb-4">Full Time</span>
        <h2 class="title is-size-3-mobile is-size-2-tablet has-text-white mb-8" style="letter-spacing: -0.02em;">Get our mobile app to make the process faster</h2>
        <div class="has-mw-sm buttons is-flex-wrap-nowrap">
          <a class="mr-6 is-inline-block" href="#">
            <img class="image is-fullwidth" src="asitrastudio-assets/download/app-store.svg" alt="">
          </a>
          <a class="is-inline-block" href="#">
            <img class="image is-fullwidth" src="asitrastudio-assets/download/google.svg" alt="">
          </a>
        </div>
        <div class="has-mw-sm mt-20 is-flex is-align-items-center">
          <img class="mr-8 image" src="asitrastudio-assets/download/qr-code.svg" alt="">
          <span class="has-text-white is-block">Scan the QR code or go to asitrastudio.co/qr</span>
        </div>
      </div>
      <img class="is-hidden-desktop image is-fullwidth has-mw-2xl mx-auto" src="asitrastudio-assets/download/phone-dark-right.png" alt="">
    </div>
  </div>
</section>

<section class="section py-6 has-background-dark">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop">
        <img class="has-mw-lg has-mw-none-desktop mx-auto is-block image is-fullwidth" style="object-fit: cover; height: 100%; border-radius: 40px;" src="asitrastudio-assets/contacts/map-dark.png" alt="">
      </div>
      <div class="column is-12 is-6-desktop">
        <div class="has-mw-lg mx-auto mr-0-desktop py-24-desktop pt-14 pb-16">
          <h1 class="title is-size-2-mobile is-size-1-tablet has-text-white mb-8" style="letter-spacing: -0.04em;">Let&grave;s talk</h1>
          <p class="subtitle has-text-grey-light mb-16 is-size-6">Whereby Embedded is the easiest way to embed video calls directly into your app, website, or anywhere else you need beautiful, custom video chat &ndash; that just works.</p>
          <div class="mb-10 is-flex-tablet">
            <div class="is-flex is-justify-content-center is-align-items-center" style="border: 1px solid #2E2E2E; border-radius: 15.5px; width: 52px; height: 52px;">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.5 19H8C4 19 2 18 2 13V8C2 4 4 2 8 2H16C20 2 22 4 22 8V13C22 17 20 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M15.9945 11H16.0035" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11.9945 11H12.0035" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M7.99451 11H8.00349" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <div class="mt-6 mt-0-tablet ml-6-tablet">
              <span class="has-text-white mb-5 is-block is-size-6 has-text-weight-medium">Chat to us</span>
              <p class="mb-1 is-size-6 has-text-grey-light">Lorem Ipsum is simply dummy text of the</p>
              <span class="has-text-white is-size-6 has-text-weight-medium">contact@asitrastudio.co</span>
            </div>

<section class="is-relative section px-0 has-background-white-ter is-clipped" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container px-5 mb-20">
    <h1 class="title is-size-2 is-size-1-desktop" style="letter-spacing: -0.04em;">Testimonials</h1>
  </div>
  <div class="is-relative">
    <div class="is-relative px-5">
        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%); transition: transform 0.5s ease-in-out;'">
            <div class="is-flex align-items-center">
              <div class="is-flex-shrink-0 is-flex-desktop is-fullwidth has-mw-md has-mw-4xl-desktop mr-12 mr-32-desktop">
                <div class="is-flex-shrink-0 mb-8 mb-0-desktop mr-16-desktop">
                  <img class="image mb-6" style="width: 115px; height: 133px;" src="asitrastudio-assets/testimonials/avatar-square2.png" alt="">
                  <span class="is-block has-text-dark">Wade Warren</span>
                  <span class="is-block is-size-7 has-text-grey">CEO, Since Industry</span>
                </div>
                <div class="has-mw-xl">
                  <p class="is-size-5 has-text-dark">
                    <span>&ldquo;KW70 Fix is a leading real estate investment firm in the World, headquartered in New York with offices in</span>
                    <span></span>
                    <span class="has-text-grey">London, Chicago, Barcelona, Vienna, Rome, Las Vegas.</span>
                    <span>KW70 Fix looks for markets and locations that have strong fundamental drivers such as job and income growth, better quality of life and a business-friendly environment. In those carefully selected&rdquo;</span>
                  </p>
                </div>
              </div>
              <div class="is-flex-shrink-0 is-flex-desktop is-fullwidth has-mw-md has-mw-4xl-desktop mr-12 mr-32-desktop">

<section class="section has-background-white-ter" style="overflow: hidden;" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container">
    <div class="mb-20 columns is-multiline is-vcentered">
      <div class="column is-7-desktop mb-8 mb-0-desktop">
        <h1 class="title is-size-2-mobile is-size-2-tablet is-size-1-desktop" style="letter-spacing: -0.04em;">Meet the team</h1>
      </div>
      <div class="column is-5-desktop">
        <div class="is-flex is-justify-content-end is-align-items-center">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="button p-0 is-dark is-outlined is-dark is-rounded mr-8 is-inline-flex is-justify-content-center is-align-items-center" style="width: 74px; height: 74px;">
            <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.7051 7.12817L4.15732 13.6759L10.7051 20.2237" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M22.4941 13.6759H4.33949" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="button p-0 is-dark is-outlined is-dark is-rounded is-inline-flex is-justify-content-center is-align-items-center" style="width: 74px; height: 74px;">
            <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.2949 7.12817L22.8427 13.6759L16.2949 20.2237" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M4.50586 13.6759H22.6605" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%); transition: transform 0.5s ease-in-out;'">

<section class="is-relative bg-light-light has-background-white">
  <div class="px-5 py-6 border-top border-light">
    <div class="container">
      <nav class="breadcrumb" aria-label="breadcrumbs">
        <ul>
          <li>
            <a href="#">
              <span class="icon is-small">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.51699 2.36667L3.02533 5.86667C2.27533 6.45 1.66699 7.69167 1.66699 8.63334V14.8083C1.66699 16.7417 3.24199 18.325 5.17533 18.325H14.8253C16.7587 18.325 18.3337 16.7417 18.3337 14.8167V8.75C18.3337 7.74167 17.6587 6.45 16.8337 5.875L11.6837 2.26667C10.517 1.45 8.64199 1.49167 7.51699 2.36667Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M10 14.9917V12.4917" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <span>Bulma</span>
            </a>
          </li>
          <li>
            <a href="#">
              <span>Services</span>
            </a>
          </li>
          <li>
            <a href="#">
              <span>Lorem Ipsum</span>

<section class="section has-background-dark">
  <div class="container">
    <a class="mb-24 is-inline-block" href="#">
      <img src="asitrastudio-assets/logos/logo-asitra-white.svg" alt="">
    </a>
    <div class="has-mw-md mx-auto has-text-centered">
      <form action="">
        <h3 class="has-text-white mb-10 is-size-4 has-text-weight-medium has-text-white" style="letter-spacing: -0.02em;">Sign in to asitrastudio</h3>
        <div class="mb-10">
          <input class="input is-light has-text-white mb-4" type="email" placeholder="E-mail" style="border-color: #494949;">
          <div class="mb-10 is-relative">
            <input class="input is-light has-text-white" type="password" placeholder="Password" style="border-color: #494949;">
            <button class="button is-light has-background-dark p-0 mt-5 mr-8 is-absolute is-top-0 is-right-0" style="height: auto;">
              <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.1095 7.89167L7.89283 12.1083C7.33367 11.5492 7.01953 10.7908 7.01953 10C7.01953 9.60845 7.09665 9.22073 7.24649 8.85898C7.39634 8.49723 7.61596 8.16854 7.89283 7.89167C8.1697 7.6148 8.49839 7.39518 8.86014 7.24533C9.22189 7.09549 9.60961 7.01837 10.0012 7.01837C10.7919 7.01837 11.5503 7.33251 12.1095 7.89167Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14.8518 4.80834C13.3935 3.70834 11.7268 3.10834 10.0018 3.10834C7.06016 3.10834 4.31849 4.84167 2.41016 7.84167C1.66016 9.01667 1.66016 10.9917 2.41016 12.1667C3.06849 13.2 3.83516 14.0917 4.66849 14.8083M7.01849 16.275C7.96849 16.675 8.97682 16.8917 10.0018 16.8917C12.9435 16.8917 15.6852 15.1583 17.5935 12.1583C18.3435 10.9833 18.3435 9.00834 17.5935 7.83334C17.3185 7.4 17.0185 6.99167 16.7102 6.60834" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.9263 10.5833C12.8134 11.1646 12.5294 11.699 12.1106 12.1177C11.6919 12.5364 11.1576 12.8204 10.5763 12.9333M7.89297 12.1083L1.66797 18.3333M18.3346 1.66667L12.1096 7.89167" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
          <a class="has-text-white mb-8 is-inline-block is-size-7" href="#">Forgot Password?</a>
          <button class="button is-dark has-background-black-ter is-rounded is-fullwidth" type="submit">Login</button>
        </div>
        <div class="mb-6 is-flex is-align-items-center">

<section class="section has-background-white-ter">
  <div class="container">
    <div class="mb-20 columns is-multiline is-align-items-end">
      <div class="column is-6">
        <h1 class="title is-size-2-mobile is-size-1-tablet" style="letter-spacing: -0.04em;">Blog</h1>
      </div>
      <div class="column is-6 has-text-right">
        <a class="button is-ghost px-0" href="#" style="height: 38px;">
          <span class="mr-2">See our blog</span>
          <svg class="is-rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-12 is-5-widescreen mb-10 mb-0-widescreen">
        <a class="is-block" href="#">
          <img class="box p-0 mb-6 is-block image is-fullwidth" style="object-fit: cover; height: 290px;" src="asitrastudio-assets/blog/blog-third1.png" alt="">
          <div class="has-mw-lg">
            <div class="mb-3">
              <span class="tag is-light mr-3">Interior</span>
              <span class="is-size-7 is-inline-block has-text-grey">9 min read</span>