UI Components – Asitrastudio Library

<section class="section py-10 has-background-white-ter">
  <div class="container">
    <div class="-mx-2 columns is-mobile is-multiline">
      <div class="column is-12-mobile is-12-tablet is-6-desktop px-2">
        <div class="is-fullheight px-8 px-20-tablet py-20 has-background-white" style="border-radius: 40px;">
          <div class="has-mw-md mx-auto">
            <div class="mb-32">
              <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="subtitle 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">Back to homepage</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 class="has-mw-xs ml-auto has-text-right">
              <span class="is-block is-size-7 has-text-dark">2023</span>
              <p class="has-text-grey">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>

<section class="section py-0 is-relative is-clipped has-background-white">
  <div class="container is-relative">
    <img class="has-mw-4xl -mr-24-desktop-only is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-right-0" src="asitrastudio-assets/download/phone-right-xl.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 py-40-desktop pb-20">
        <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>
        <p class="has-mw-md subtitle mb-12 is-size-6">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 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-hidden-desktop image is-fullwidth has-mw-2xl mx-auto" src="asitrastudio-assets/download/phone-right-xl.png" alt="">
    </div>
  </div>
</section>

<section class="section py-5 has-background-light">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6-desktop is-7-widescreen">
        <div class="has-mw-md has-mw-xl-desktop mx-auto mx-0-desktop py-20 py-40-desktop">
          <span class="is-block mb-4 is-size-7 has-text-weight-medium has-text-dark">Lorem Ipsum</span>
          <div class="has-mw-sm has-mw-none-desktop has-mw-md-tablet mb-12">
            <h1 class="title is-size-2 is-size-1-desktop mb-10" style="letter-spacing: -0.04em;">Keep up with our contant</h1>
            <p class="has-mw-sm subtitle is-size-6">It is a long established fact that a reader will be distracted by the readable content</p>
          </div>
          <div>
            <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>
      </div>
      <div class="column is-5-widescreen is-6-desktop">
        <img class="is-block image is-fullwidth has-mw-md mx-auto has-mw-none-desktop is-covered" style="object-fit: cover; height: 100%; border-radius: 30px;" src="asitrastudio-assets/newsletter/photo1.png" alt="">

<section class="section is-relative is-clipped has-background-white">
  <div class="container is-relative">
    <img class="mt-32 mt-16-widescreen ml-80-widescreen is-absolute is-left-0 is-top-0 is-top-0" style="z-index: 0; border-radius: 30px;" src="asitrastudio-assets/services/map-small.png" alt="">
    <div class="is-relative">
      <h1 class="title is-size-2-mobile is-size-1-tablet mb-20" style="letter-spacing: -0.04em;">Services</h1>
      <div class="has-mw-xl has-mw-none-widescreen mx-auto mb-24 pb-8 is-flex-widescreen is-relative is-align-items-end" style="border-BOTTOM: 1PX SOLID BLACK;">
        <div class="mb-8 mb-0-widescreen">
          <span class="-mb-2 is-block is-size-7 has-text-weight-medium has-text-grey">01</span>
          <h3 class="is-size-3 has-text-dark">De-risking your project</h3>
        </div>
        <div class="has-mw-md mb-8 mb-0-widescreen ml-auto mr-20-widescreen">
          <p class="has-text-right has-text-dark">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>
        <span class="is-block has-text-right">
          <svg width="33" height="33" viewbox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M30 30L3 3" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M30 5.24196V30H5.24196" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
      </div>
      <div class="has-mw-xl has-mw-none-widescreen mx-auto mb-24 pb-8 is-flex-widescreen is-align-items-end" style="border-BOTTOM: 1PX SOLID BLACK;">
        <div class="mb-8 mb-0-widescreen">
          <span class="-mb-2 is-block is-size-7 has-text-weight-medium has-text-grey">02</span>
          <h3 class="is-size-3 has-text-dark">Planning strategies</h3>

<section class="section pt-12 pt-0-desktop pt-20-tablet is-clipped has-background-white">
  <div class="container is-relative">
    <img class="-mr-64-tablet -mr-24-widescreen-only is-absolute is-block is-hidden-mobile is-bottom-0 is-right-0" style="z-index: 1;" src="asitrastudio-assets/cta/woman-cta-right.png" alt="">
    <div class="has-mw-md mx-auto mx-0-tablet has-mw-xl-tablet has-mw-3xl-widescreen py-36-tablet is-relative">
      <span class="is-block mb-4 is-size-7 has-text-grey has-text-weight-medium">Lorem Ipsum</span>
      <h1 class="title is-size-3-mobile is-size-1-tablet mb-14" style="letter-spacing: -0.04em;">
        <span>Share your travels with</span>
        <span class="is-inline-block has-text-grey-dark" style="line-height: 1; border-bottom: 3px solid #646464;">friends &amp; family</span>
      </h1>
      <div class="buttons is-relative" style="z-index: 10;">
        <a class="button is-primary mr-6-tablet 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>
        <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>

<section class="is-relative" x-data="{ mobileNavOpen: false }">
  <nav class="navbar py-2 is-white" role="navigation" aria-label="navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="is-hidden-desktop is-inline-flex is-align-items-center is-justify-content-center navbar-menu-open navbar-burger" href="#">
        <svg width="38" height="16" viewbox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="44" height="2" rx="1" fill="black"></rect><rect y="14" width="44" height="2" rx="1" fill="black"></rect></svg>
      </button>
    </div>
    <div class="navbar-menu" id="navExample">
      <div class="navbar-end">
        <a class="navbar-item">About</a><a class="navbar-item">Services</a><a class="navbar-item">Projects</a><a class="navbar-item">Contact us</a>
        <div class="navbar-item">
          <a class="button is-outlined is-rounded is-dark is-flex is-align-items-center" href="#">
            <span class="mr-3">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>

<section class="is-relative section has-background-white-ter" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container">
    <div class="has-mw-5xl mx-auto has-text-centered">
        <div class="is-clipped">
            <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%); transition: transform 0.5s ease-in-out; white-space: nowrap;'">
                <div class="is-inline-block" style="width: 100%; white-space: normal;">
                    <span class="tag is-dark mb-10">Apartament</span>
                    <p class="is-size-5-mobile is-size-4-tablet mb-10 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="text-secondary-light">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 class="is-flex mb-16 is-align-items-center has-text-left is-justify-content-center">
                      <img class="image mr-4" src="asitrastudio-assets/testimonials/avatar-men.png" alt="">
                      <div>
                        <span class="is-block has-text-weight-medium has-text-dark">Wade Warren</span>
                        <span class="is-block fs-9 text-secondary-light has-text-dark">CEO, Since Industry</span>
                      </div>
                    </div>
                </div>
                <div class="is-inline-block" style="width: 100%; white-space: normal;">
                    <span class="tag is-dark mb-10">Apartament</span>
                    <p class="is-size-5-mobile is-size-4-tablet mb-10 has-text-dark">

<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-desktop mb-8 mb-0-desktop">
        <h1 class="title is-size-2-mobile is-size-1-tablet" style="letter-spacing: -0.04em;">Blog</h1>
      </div>
      <div class="column is-6-desktop 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-tablet-only is-6-desktop mb-8 mb-0-desktop">
        <a class="box p-0 is-block is-relative" href="#" style="overflow: hidden;">
          <img class="is-block image is-fullwidth" style="max-height: 670px; min-height: 600px;" src="asitrastudio-assets/blog/blog-shadow.png" alt="">
          <div class="has-mw-md is-absolute is-bottom-0 is-left-0 p-10">
            <div class="mb-3">
              <span class="tag mr-3 has-text-dark">Interior</span>
              <span class="is-size-7 has-text-white is-inline-block">9 min read</span>

<section class="is-relative is-clipped" x-data="{ open: true }" :class="{ 'is-hidden': !open }">
  <div class="pt-8 pb-9 is-fixed is-bottom-0 is-right-0 has-background-white" 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-7 mb-6 mb-0-desktop">
            <h4 class="mb-4 is-size-5 has-text-weight-medium has-text-dark" style="letter-spacing: -0.01em;">Cookie Consent</h4>
            <p class="is-size-7 has-text-grey mb-4">In order to provide you with a more personal user experience, we and our selected third parties use cookies or similar technologies for technical purposes and, with your consent, for &ldquo;basic interactions &amp; functionalities&rdquo;, &ldquo;experience enhancement&rdquo;, &ldquo;measurement&rdquo; and &ldquo;targeting &amp; advertising&rdquo;. Denying consent may make related features unavailable. You can freely give, deny, or withdraw your consent at any time.Use the &ldquo;I accept&rdquo; button to consent to the use of such technologies.</p>
            <p class="is-size-7 has-text-grey">Use the &ldquo;I don&rsquo;t accept&rdquo; button to continue without accepting.</p>
          </div>
          <div class="column is-5 is-flex is-align-items-center is-justify-content-end"><a x-on:click.prevent="open = false" class="button is-small py-4 is-dark mr-4 is-rounded" href="#">I accept</a><a class="button is-small py-4 is-outlined is-dark is-rounded" href="#">Settings</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section has-background-white">
  <div class="is-fixed-top is-top-0 is-left-0 is-fullwidth is-covered" style="height: 100%">
    <div class="is-flex is-justify-content-center is-align-items-center is-fullwidth is-covered" style="height: 100%">
      <div class="box has-mw-lg mx-auto px-8 px-16-tablet pt-12 pb-6 is-relative has-background-white is-fullwidth has-text-centered">
        <button class="mt-6 mr-8 is-absolute is-top-0 is-right-0 button p-0 is-light has-background-white-ter" style="height: auto;">
          <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="#222222" stroke-width="1"></path>
          </svg>
        </button>
        <div class="has-mw-md mx-auto">
          <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">

<section class="is-relative" x-data="{ mobileNavOpen: false }">
  <nav class="is-relative navbar py-2 is-white" role="navigation" aria-label="navigation">
    <a class="is-hidden-mobile is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);" href="#">
      <img class="image" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
    </a>
    <div class="navbar-brand">
      <a class="navbar-item is-hidden-tablet" href="#">
        <img class="image" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="is-hidden-desktop is-inline-flex is-align-items-center is-justify-content-center navbar-menu-open navbar-burger" href="#" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
        <svg width="44" height="16" viewbox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="44" height="2" rx="1" fill="black"></rect><rect y="14" width="44" height="2" rx="1" fill="black"></rect></svg>
      </button>
    </div>
    <div class="navbar-menu" id="navExample">
      <div class="navbar-start"><a class="navbar-item">About</a><a class="navbar-item">Services</a></div>
      <div class="navbar-end">
        <a class="navbar-item pr-0-desktop-only">Projects</a><a class="navbar-item pr-0-desktop-only">Contact us</a>
        <div class="navbar-item">
          <a class="button px-5-desktop-only is-outlined is-rounded is-dark is-flex is-align-items-center" href="#">
            <span class="mr-3">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>

<section class="section has-background-white-ter" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container">
    <div class="mb-16">
      <div class="mb-8 is-inline-block">
        <h1 class="title is-relative is-inline-block is-size-2 is-size-1-desktop" style="letter-spacing: -0.04em;">
          <span>Selected projects</span>
          <span class="is-absolute is-top-0 is-right-0 -mt-5 -mr-2 is-block is-size-4 has-text-grey has-text-weight-medium">(21)</span>
        </h1>
      </div>
      <ul class="is-flex-tablet -mb-3 is-align-items-center">
        <li class="mb-3 mr-6"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="button is-dark is-rounded px-5 is-size-7" :class="{ 'is-outlined': tab != $refs.tab1.textContent }" href="#" style="max-height: 38px;">All</a></li>
        <li class="mb-3 mr-6"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="button is-dark is-rounded px-5 is-size-7" :class="{ 'is-outlined': tab != $refs.tab2.textContent }" href="#" style="max-height: 38px;">Villa</a></li>
        <li class="mb-3 mr-6"><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" class="button is-dark is-rounded px-5 is-size-7" :class="{ 'is-outlined': tab != $refs.tab3.textContent }" href="#" style="max-height: 38px;">Residance</a></li>
        <li class="mb-3"><a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" class="button is-dark is-rounded px-5 is-size-7" :class="{ 'is-outlined': tab != $refs.tab4.textContent }" href="#" style="max-height: 38px;">Apartaments</a></li>
      </ul>
    </div>
    <div class="columns is-multiline">
      <div class="column is-12-tablet is-6-desktop mb-20 mb-0-desktop">
        <div>
          <a class="button is-ghost is-block px-0 pb-4 mb-8" :class="{ 'is-block': $refs.tab1.textContent == tab || $refs.tab2.textContent == tab, 'is-hidden': $refs.tab1.textContent != tab && $refs.tab2.textContent != tab }" href="#" style="height: auto;">
            <div class="is-flex is-align-items-center mb-2">
              <span class="is-size-7 has-text-grey-light">Apartament</span>
              <span class="mx-4 mb-2 is-inline-block">
                <svg width="3" height="3" viewbox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">

<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="#">Homepage</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Lorem Ipsum</a></li>
        </ul>
      </nav>
    </div>
  </div>
</section>

<section class="section has-background-white-ter">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-4-widescreen is-5-desktop mb-20 mb-0-desktop">
        <div class="has-mw-xs">
          <h1 class="title is-size-2-mobile is-size-1-tablet mb-10" style="letter-spacing: -0.04em;">Meet the team</h1>
        </div>
      </div>
      <div class="column is-7-desktop is-8-widescreen">
        <div class="has-mw-3xl ml-auto-desktop">
          <div class="mb-6 pb-6 is-flex is-align-items-center" style="border-bottom: 1px solid black;">
            <figure class="image is-96x96">
              <img class="image is-fullwidth" src="asitrastudio-assets/team/avatar-medium-1.png" alt="">
            </figure>
            <div class="ml-9">
              <span class="is-block mb-3 has-text-grey is-size-7 has-text-weight-medium">Executive Chairman</span>
              <h4 class="title is-size-5-mobile is-size-4-tablet">Thomas Webb</h4>
            </div>
          </div>
          <div class="mb-6 pb-6 is-flex is-align-items-center" style="border-bottom: 1px solid black;">
            <figure class="image is-96x96">
              <img class="image is-fullwidth" src="asitrastudio-assets/team/avatar-medium-2.png" alt="">
            </figure>
            <div class="ml-9">

<section class="section has-background-white-ter" x-data="{ toggle: false }">
  <div class="container">
    <div class="has-mw-md has-mw-none-desktop mx-auto">
      <div class="mb-20 columns is-multiline is-align-items-end">
        <div class="column is-12-tablet is-6-desktop mb-8 mb-0-desktop">
          <h1 class="title is-size-2 is-size-1-widescreen" style="letter-spacing: -0.04em;">Premium Membership</h1>
        </div>
        <div class="column is-12-tablet is-6-desktop">
          <div class="is-flex-tablet is-align-items-center is-justify-content-end">
            <span class="is-block-mobile is-size-6" :class="{ 'has-text-dark': !toggle, 'has-text-grey': toggle }">Billed monthly</span>
            <div class="my-4-mobile mx-4-tablet is-inline-flex has-background-dark" style="padding: 2px; border-radius: 999px;">
                <button x-on:click="toggle = !toggle" class="button p-0" :class="{ 'is-light has-background-transparent': toggle, 'is-white': !toggle }" style="width: 26px; height: 26px; border-radius: 999px;"></button>
                <button x-on:click="toggle = !toggle" class="button p-0" :class="{ 'is-light has-background-transparent': !toggle, 'is-white': toggle }" style="width: 26px; height: 26px; border-radius: 999px;"></button>
            </div>
            <div class="is-block-mobile is-inline-flex-tablet is-align-items-center">
              <span class="mr-3 is-inline-block is-size-6" :class="{ 'has-text-dark': toggle, 'has-text-grey': !toggle }">Billed yearly</span>
              <span class="tag is-light is-size-7 px-3 py-1 is-inline-block has-text-dark">20% SAVE</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box p-0 has-mw-md has-mw-none-widescreen mx-auto">
        <div class="columns is-multiline">
          <div class="column is-12-tablet is-4-widescreen">

<section class="section has-background-white-ter" x-data="{ showContent: false }">
  <div class="container">
    <div class="mb-20 columns is-multiline is-vcentered">
      <div class="column is-12 is-7-widescreen mb-8 mb-0-widescreen">
        <h1 class="title is-size-2-mobile is-size-1-tablet mb-8" style="letter-spacing: -0.04em;">Open Position</h1>
      </div>
      <div class="column is-12 is-5-widescreen has-text-right"><a x-on:click.prevent="showContent=true" :class="{ 'is-hidden': showContent }" class="button is-outlined is-dark is-rounded" href="#">View all open position</a></div>
    </div>
    <div>
      <a class="mb-8 is-block" href="#" style="border-bottom: 1.5px solid #000000;">
        <div class="mb-3 is-inline-flex is-align-items-center">
          <span class="is-size-7 has-text-grey has-text-weight-medium">Full-time</span>
          <span class="mx-4 -mt-2 is-inline-block">
            <svg width="3" height="3" viewbox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.896 1.772C0.896 1.632 0.924 1.50133 0.98 1.38C1.036 1.25867 1.11067 1.15133 1.204 1.058C1.30667 0.955333 1.41867 0.876 1.54 0.82C1.67067 0.764 1.806 0.736 1.946 0.736C2.086 0.736 2.21667 0.764 2.338 0.82C2.46867 0.876 2.58067 0.955333 2.674 1.058C2.77667 1.15133 2.856 1.25867 2.912 1.38C2.968 1.50133 2.996 1.632 2.996 1.772C2.996 2.052 2.89333 2.29933 2.688 2.514C2.48267 2.72867 2.23533 2.836 1.946 2.836C1.65667 2.836 1.40933 2.72867 1.204 2.514C0.998667 2.29933 0.896 2.052 0.896 1.772Z" fill="#646464"></path>
            </svg>
          </span>
          <span class="is-size-7 has-text-grey has-text-weight-medium">Remote</span>
        </div>
        <div class="pb-4 is-flex is-justify-content-space-between is-align-items-center border-2">
          <h3 class="is-size-4-mobile is-size-3-tablet">Product Manager, Instagram Camera</h3>
          <span class="pl-6 is-rotate-45">
            <svg width="33" height="33" viewbox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M30 3L3 30" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-12" style="letter-spacing: -0.04em;">FAQ</h1>
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop mb-6 mb-0-desktop">
        <div class="has-mw-xl-desktop">
            <div class="pb-6" style="border-bottom: 1px solid black;" x-data="{ accordion: false }">
                <div class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">
                  <h5 class="is-size-6-mobile is-size-5-tablet has-text-dark">What is Cult Wine Investment?</h5>
                  <button x-on:click="accordion = !accordion" class="button p-0 is-rounded is-dark ml-4 is-flex-shrink-0" :class="{ 'is-outlined': !accordion }" style="width: 48px; height: 48px;">
                    <span :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }" class="inline-block transform rotate-0">
                        <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                  </button>
                </div>
                <div x-ref="container" :style="`transition: all 0.5s ease-in-out; ${accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'}`" class="is-clipped">
                    <p class="pr-20 mt-6 mb-0 is-size-6-tablet has-text-dark">Cult Wine Investment involves investing in prestigious and limited-production wines known for their quality and collectability.</p>
                </div>
              </div>
          <div class="pt-12 pb-6" style="border-bottom: 1px solid black;" x-data="{ accordion: false }">
            <div class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">

<section class="section has-background-white-ter">
  <div class="container">
    <div class="has-mw-xl mx-auto has-text-centered">
      <div class="-mb-6 is-flex-tablet is-justify-content-center is-align-items-center">
        <div class="is-flex is-justify-content-center mb-6 mr-6-tablet">
          <div class="mr-6 is-inline-flex py-2 px-4 has-background-white is-justify-content-center is-align-items-center" style="width: 70px; height: 70px; border-radius: 20px;">
            <img class="image is-fullwidth" src="asitrastudio-assets/logo-clouds/win-sm.png" alt="">
          </div>
          <div class="is-inline-flex py-2 px-4 has-background-white is-justify-content-center is-align-items-center" style="width: 70px; height: 70px; border-radius: 20px;">
            <img class="image is-fullwidth" src="asitrastudio-assets/logo-clouds/pp-sm.png" alt="">
          </div>
        </div>
        <div class="is-flex is-justify-content-center mb-6">
          <div class="mr-6 is-inline-flex py-2 px-4 has-background-white is-justify-content-center is-align-items-center" style="width: 70px; height: 70px; border-radius: 20px;">
            <img class="image is-fullwidth" src="asitrastudio-assets/logo-clouds/spotify-sm.png" alt="">
          </div>
          <div class="is-inline-flex py-2 px-3 has-background-white is-justify-content-center is-align-items-center" style="width: 70px; height: 70px; border-radius: 20px;">
            <img class="image is-fullwidth" src="asitrastudio-assets/logo-clouds/visa-sm.png" alt="">
          </div>
        </div>
      </div>
      <div class="mt-10">
        <h2 class="title mb-10 is-size-2" style="letter-spacing: -0.02em;">Meet our partners</h2>
        <p class="has-mw-md mx-auto subtitle">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>

<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-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">
        <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-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-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-dark">
  <div class="container">
    <div class="has-mw-md has-mw-xl-desktop mx-auto mb-16 has-text-centered">
      <h3 class="has-text-white mb-12 is-size-4" style="letter-spacing: -0.02em;">Join our newsletter to stay up to date on features and realases</h3>
      <div class="field is-flex-tablet is-justify-content-center">
        <div class="control mr-0-mobile mr-3 mb-2 mb-0-tablet">
          <input class="input" type="email" placeholder="Enter your email" style="border: 1px solid #2E2E2E">
        </div>
        <div class="control">
          <button class="button is-dark has-text-grey has-background-black-ter is-fullwidth is-rounded" type="submit">Subscribe</button>
        </div>
      </div>
    </div>
    <div class="pt-20" style="border-top: 1px solid #494949;">
      <div class="mb-20 columns is-mobile is-multiline">
        <div class="column is-12 is-4-widescreen mb-12 mb-0-widescreen">
          <a class="is-inline-block is-size-6 has-text-grey-light" href="#">
            <img class="image is-fullwidth" style="height: 21px;" src="asitrastudio-assets/logos/logo-asitra-white.svg" alt="">
          </a>
        </div>
        <div class="column is-6-mobile is-3-tablet mb-8 mb-0-tablet">
          <h5 class="has-text-white mb-4 is-size-6">About</h5>
          <ul>
            <li class="mb-2"><a class="is-inline-block is-size-6 has-text-grey-light" href="#">Contact</a></li>