UI Components – Cronos Library

<section class="relative bg-yellow-50">
    <div class="absolute hidden lg:block top-0 bottom-0 left-0 w-1/2 bg-no-repeat bg-cover" style="background-image: url('https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80');">
        <img class="absolute top-0 right-0 z-10" src="cronos-assets/elements/dark-green-dark-warning-right.svg" alt="">
        <img class="absolute bottom-0 left-0 z-10" src="cronos-assets/elements/dark-green-dark-warning.svg" alt="">
    </div>
    <div class="container mx-auto px-4 py-20">
        <div class="flex flex-wrap items-center -m-4">
            <div class="w-full lg:w-1/2 p-4 ml-auto">
                <div class="max-w-md lg:ml-auto">
                    <h1 class="font-heading font-bold text-4xl mb-4 max-w-md">Lorem ipsum dolor sit amet consectutar domor at elis</h1>
                    <p class="text-gray-500 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                    <div class="flex items-center gap-4 mb-6">
                        <span class="w-12 h-12 flex items-center justify-center rounded-full bg-yellow-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M7 20H20" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M4 20V17L17 4L20 7L7 20H4Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M17 10L14 7" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </span>
                        <h2 class="text-xl">Check of access</h2>
                    </div>
                    <div class="flex items-center gap-4 mb-6">
                        <span class="w-12 h-12 flex items-center justify-center rounded-full bg-yellow-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">

<section class="relative bg-yellow-50">
    <div class="absolute hidden lg:block top-0 bottom-0 right-0 w-1/2 bg-no-repeat bg-cover" style="background-image: url('https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80');">
        <img class="absolute top-0 right-0 z-10" src="cronos-assets/elements/dark-green-dark-warning-right.svg" alt="">
        <img class="absolute bottom-0 left-0 z-10" src="cronos-assets/elements/dark-green-dark-warning.svg" alt="">
    </div>
    <div class="container mx-auto px-4 py-20">
        <div class="flex flex-wrap items-center -m-4">
            <div class="w-full lg:w-1/2 p-4">
                <div class="max-w-md">
                    <h1 class="font-heading font-bold text-4xl mb-4 max-w-md">Lorem ipsum dolor sit amet consectutar domor at elis</h1>
                    <p class="text-gray-500 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                    <div class="flex items-center gap-4 mb-6">
                        <span class="w-12 h-12 flex items-center justify-center rounded-full bg-yellow-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M7 20H20" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M4 20V17L17 4L20 7L7 20H4Z" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M17 10L14 7" stroke="#006251" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </span>
                        <h2 class="text-xl">Check of access</h2>
                    </div>
                    <div class="flex items-center gap-4 mb-6">
                        <span class="w-12 h-12 flex items-center justify-center rounded-full bg-yellow-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">

<section class="bg-no-repeat bg-cover py-20" style="background-image: url('https://images.unsplash.com/photo-1602115175636-1957cf9fa231?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80');">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
                <div class="bg-white p-12">
                    <span class="mb-6 block">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                            <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                    <h2 class="text-xl mb-4">Change of access</h2>
                    <p class="text-gray-500 max-w-md mb-4">Focus on your business with a large number of useful tools to take care of your company's development. Share your difficulties with us, and we will help you.</p>
                    <a class="inline-flex items-center text-green-500 hover:text-green-600 transition duration-200" href="#">
                        <span>Learn More</span>
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M12.8415 12L10.1204 8.8254C9.94067 8.61574 9.96495 8.30009 10.1746 8.12038C10.3843 7.94067 10.6999 7.96495 10.8796 8.17461L13.8796 11.6746C14.0401 11.8619 14.0401 12.1382 13.8796 12.3254L10.8796 15.8254C10.6999 16.0351 10.3843 16.0593 10.1746 15.8796C9.96495 15.6999 9.94067 15.3843 10.1204 15.1746L12.8415 12Z" fill="#006251"></path>
                            </svg>
                        </span>
                    </a>
                </div>
            </div>

<section class="bg-no-repeat bg-cover py-20" style="background-image: url('https://images.unsplash.com/photo-1602115175636-1957cf9fa231?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80');">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
                <div class="bg-white p-12">
                    <span class="mb-6 block">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                            <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                    <h2 class="text-xl mb-4">Change of access</h2>
                    <p class="text-gray-500 max-w-md mb-4">Focus on your business with a large number of useful tools to take care of your company's development. Share your difficulties with us, and we will help you.</p>
                    <a class="inline-flex items-center text-green-500 hover:text-green-600 transition duration-200" href="#">
                        <span>Learn More</span>
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M12.8415 12L10.1204 8.8254C9.94067 8.61574 9.96495 8.30009 10.1746 8.12038C10.3843 7.94067 10.6999 7.96495 10.8796 8.17461L13.8796 11.6746C14.0401 11.8619 14.0401 12.1382 13.8796 12.3254L10.8796 15.8254C10.6999 16.0351 10.3843 16.0593 10.1746 15.8796C9.96495 15.6999 9.94067 15.3843 10.1204 15.1746L12.8415 12Z" fill="#006251"></path>
                            </svg>
                        </span>
                    </a>
                </div>
            </div>

<section class="pb-20 bg-secondary-light">
  <nav class="position-relative navbar navbar-expand-lg navbar-light py-5"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
      <button class="btn p-0 d-lg-none navbar-burger">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
        </svg>
      </button>
      <ul class="d-none d-lg-flex position-absolute top-50 start-50 translate-middle navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
      </ul>
      <div class="d-none d-lg-block"><a class="btn btn-secondary" href="#">Contact Us</a></div>
    </div>
  </nav>
  <div class="container mt-8">
    <div class="row align-items-center mb-12">
      <div class="col-12 col-lg-6 mb-20 mb-lg-0">
        <div class="mw-lg-md">
          <h2 class="mb-5 text-primary">Take care of your performance every day.</h2>
          <p class="lead text-muted lh-lg mb-6">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p><a class="btn btn-primary d-block d-md-inline-block mb-2 mb-md-0 mb-lg-0 me-md-4" href="#">Track your performance</a><a class="btn btn-dark d-block d-md-inline-block" href="#">Learn More</a>
        </div>

<section class="pb-20">
  <nav class="position-relative navbar navbar-expand-lg navbar-light py-5"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
      <button class="btn p-0 d-lg-none navbar-burger">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
        </svg>
      </button>
      <ul class="d-none d-lg-flex position-absolute top-50 start-50 translate-middle navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
      </ul>
      <div class="d-none d-lg-block"><a class="btn btn-secondary" href="#">Contact Us</a></div>
    </div>
  </nav>
  <div class="container mt-8">
    <div class="row align-items-center mb-12">
      <div class="col-12 col-lg-6 mb-20 mb-lg-0">
        <div class="mw-lg-md">
          <h2 class="mb-5 text-primary">Take care of your performance every day.</h2>
          <p class="lead text-muted lh-lg mb-6">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p><a class="btn btn-primary d-block d-md-inline-block mb-2 mb-md-0 mb-lg-0 me-md-4" href="#">Track your performance</a><a class="btn btn-dark d-block d-md-inline-block" href="#">Learn More</a>
        </div>

<section class="pb-20 bg-light">
  <nav class="position-relative navbar navbar-expand-lg navbar-light py-5"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
      <button class="btn p-0 d-lg-none navbar-burger">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
        </svg>
      </button>
      <ul class="d-none d-lg-flex position-absolute top-50 start-50 translate-middle navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
      </ul>
      <div class="d-none d-lg-block"><a class="btn btn-secondary" href="#">Contact Us</a></div>
    </div>
  </nav>
  <div class="container mt-8">
    <div class="row align-items-center mb-12">
      <div class="col-12 col-lg-6 mb-20 mb-lg-0">
        <div class="mw-lg-md">
          <h2 class="mb-5 text-primary">Take care of your performance every day.</h2>
          <p class="lead text-muted lh-lg mb-6">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p><a class="btn btn-primary d-block d-md-inline-block mb-2 mb-md-0 mb-lg-0 me-md-4" href="#">Track your performance</a><a class="btn btn-dark d-block d-md-inline-block " href="#">Learn More</a>
        </div>

<section class="position-relative pb-20 bg-secondary-light overflow-hidden">
  <div class="d-none d-lg-block position-absolute top-0 start-0 bottom-0 col-3 col-xl-4 bg-white"></div>
  <nav class="navbar navbar-expand-lg navbar-light pb-lg-20"  >
    <div class="container"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
      <button class="btn p-0 d-lg-none navbar-burger">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
        </svg>
      </button>
      <ul class="navbar-nav ms-auto d-none d-lg-flex me-10 me-lg-20">
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
      </ul>
      <div class="d-none d-lg-block"><a class="btn" href="#">Sign In</a><a class="btn btn-secondary" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="container position-relative">
    <div class="row">
      <div class="position-relative col-lg-5 h-100 mb-16 mb-lg-0">
        <div class="position-absolute top-0 start-0 bottom-0 end-0 ms-8 me-n2 mt-6 mb-n6 bg-primary"></div><img class="position-relative img-fluid h-100" style="object-fit: cover;" src="https://images.unsplash.com/photo-1593062096033-9a26b09da705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt=""/>
        <div class="position-absolute bottom-0 end-0 d-flex me-3">
          <button class="btn btn-secondary" style="width: 64px; height: 64px;">
            <svg style="width: 12px; height: 9px;" width="12" height="9" viewbox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="position-relative pb-20 bg-light overflow-hidden">
  <div class="d-none d-lg-block position-absolute top-0 start-0 bottom-0 col-3 col-xl-4 bg-white"></div>
  <nav class="navbar navbar-expand-lg navbar-light pb-lg-20"  >
    <div class="container"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
      <button class="btn p-0 d-lg-none navbar-burger">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
        </svg>
      </button>
      <ul class="navbar-nav ms-auto d-none d-lg-flex me-10 me-lg-20">
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
      </ul>
      <div class="d-none d-lg-block"><a class="btn" href="#">Sign In</a><a class="btn btn-secondary" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="container position-relative">
    <div class="row">
      <div class="position-relative col-lg-5 h-100 mb-16 mb-lg-0">
        <div class="position-absolute top-0 start-0 bottom-0 end-0 ms-8 me-n2 mt-6 mb-n6 bg-primary"></div><img class="position-relative img-fluid h-100" style="object-fit: cover;" src="https://images.unsplash.com/photo-1593062096033-9a26b09da705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt=""/>
        <div class="position-absolute bottom-0 end-0 d-flex me-3">
          <button class="btn btn-secondary" style="width: 64px; height: 64px;">
            <svg style="width: 12px; height: 9px;" width="12" height="9" viewbox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="pb-64 bg-light">
  <div class="position-relative pb-64 bg-primary">
    <nav class="position-relative navbar navbar-expand-lg navbar-dark py-5"  >
      <div class="container-fluid"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo-white.svg" alt="" width="132"/></a>
        <button class="btn p-0 d-lg-none navbar-burger text-white">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="currentColor"></path>
          </svg>
        </button>
        <ul class="d-none d-lg-flex position-absolute top-50 start-50 translate-middle navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
        </ul>
        <div class="d-none d-lg-block"><a class="btn btn-dark" href="#">Request Demo</a></div>
      </div>
    </nav>
    <div class="container pt-12 text-center">
      <div class="mw-4xl mx-auto">
        <h1 class="mb-2 text-white">
          Take care of your  <span class="text-secondary">performance</span> <span>every day.</span></h1>
        <p class="mw-2xl mx-auto mb-6 text-white lead lh-lg">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
        <div class="text-center mb-20"><a class="btn btn-secondary d-block d-md-inline-block mb-2 mb-md-0 mb-lg-0 me-md-4" href="#">Track your performance</a><a class="btn btn-dark d-block d-md-inline-block" href="#">Learn More</a></div>

<section class="pb-64 bg-light">
  <div class="position-relative pb-64 bg-primary">
    <nav class="position-relative navbar navbar-expand-lg navbar-dark py-5"  >
      <div class="container-fluid"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo-white.svg" alt="" width="132"/></a>
        <button class="btn p-0 d-lg-none navbar-burger text-white">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="currentColor"></path>
          </svg>
        </button>
        <ul class="d-none d-lg-flex position-absolute top-50 start-50 translate-middle navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
        </ul>
        <div class="d-none d-lg-block"><a class="btn btn-dark" href="#">Request Demo</a></div>
      </div>
    </nav>
    <div class="container pt-12 text-center">
      <div class="mw-4xl mx-auto">
        <h1 class="mb-2 text-white">
          Take care of your  <span class="text-secondary">performance</span> <span>every day.</span></h1>
        <p class="mw-2xl mx-auto mb-6 text-white lead lh-lg">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
        <div class="text-center mb-20"><a class="btn btn-secondary d-block d-md-inline-block mb-2 mb-md-0 mb-lg-0 me-md-4" href="#">Track your performance</a><a class="btn btn-dark d-block d-md-inline-block" href="#">Learn More</a></div>

<section class="pb-20 bg-primary" style="background-image: url('cronos-assets/elements/squares-background.svg'); background-repeat: no-repeat; background-position: center; background-size: cover;" >
  <nav class="position-relative navbar navbar-expand-lg navbar-dark py-5 mb-10 mb-lg-16"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo-white.svg" alt="" width="132"/></a>
      <button class="btn p-0 d-lg-none navbar-burger">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
        </svg>
      </button>
      <ul class="d-none d-lg-flex position-absolute top-50 start-50 translate-middle navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
      </ul>
      <div class="d-none d-lg-block"><a class="btn text-light" href="#">Sign In</a><a class="btn btn-secondary" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="container">
    <div class="mw-2xl mx-auto text-center mb-20 mb-lg-32"><span class="text-light">Develop your skills</span>
      <h1 class="text-white mt-2"><span>Take care of your</span> <span class="d-block text-secondary">performance</span> <span>every day.</span></h1>
    </div>
    <div class="row">
      <div class="col-12 col-lg-4 mb-10 mb-lg-0">
        <div class="d-flex"><span class="mt-n2 me-5">

<section class="pb-20" style="background: linear-gradient(#fff, #FEF8E8);">
  <nav class="position-relative navbar navbar-expand-lg navbar-light py-5 mb-10 mb-lg-16"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
      <button class="btn p-0 d-lg-none navbar-burger">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
        </svg>
      </button>
      <ul class="d-none d-lg-flex position-absolute top-50 start-50 translate-middle navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
      </ul>
      <div class="d-none d-lg-block"><a class="btn" href="#">Sign In</a><a class="btn btn-secondary" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="container">
    <div class="mw-2xl mx-auto text-center mb-20 mb-lg-32"><span class="text-muted">Develop your skills</span>
      <h1 class="mt-2"><span>Take care of your</span><span class="d-block text-secondary">performance</span><span>every day.</span></h1>
    </div>
    <div class="row">
      <div class="col-12 col-lg-4 mb-10 mb-lg-0">
        <div class="d-flex"><span class="mt-n2 me-5">

<section class="pb-20 bg-secondary-light">
  <nav class="position-relative navbar navbar-expand-lg navbar-light py-5 mb-10 mb-lg-16"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
      <button class="btn p-0 d-lg-none navbar-burger">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
        </svg>
      </button>
      <ul class="d-none d-lg-flex position-absolute top-50 start-50 translate-middle navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
      </ul>
      <div class="d-none d-lg-block"><a class="btn" href="#">Sign In</a><a class="btn btn-secondary" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="container">
    <div class="mw-2xl mx-auto text-center mb-20 mb-lg-32"><span class="text-muted">Develop your skills</span>
      <h1 class="mt-2"><span>Take care of your</span><span class="d-block text-secondary">performance</span><span>every day.</span></h1>
    </div>
    <div class="row">
      <div class="col-12 col-lg-4 mb-10 mb-lg-0">
        <div class="d-flex"><span class="mt-n2 me-5">

<section class="position-relative pb-20" style="background-image: url('https://images.unsplash.com/photo-1529260830199-42c24126f198?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1055&amp;q=80'); background-size: cover; background-repeat: no-repeat;">
  <div class="position-absolute top-0 bottom-0 start-0 end-0 bg-dark" style="opacity: 80%;"></div>
  <div class="position-relative">
    <nav class="navbar navbar-expand-lg navbar-dark py-5 mb-10 mb-lg-16"  >
      <div class="container-fluid"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo-white.svg" alt="" width="132"/></a>
        <button class="btn p-0 d-lg-none navbar-burger">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
          </svg>
        </button>
        <ul class="d-none d-lg-flex position-absolute top-50 start-50 translate-middle navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
        </ul>
        <div class="d-none d-lg-block"><a class="btn text-light" href="#">Sign In</a><a class="btn btn-secondary" href="#">Sign Up</a></div>
      </div>
    </nav>
    <div class="container">
      <div class="mw-2xl mx-auto text-center mb-20 mb-lg-32"><span class="text-light">Develop your skills</span>
        <h1 class="text-white mt-2"><span>Take care of your</span><span class="d-block text-secondary">performance</span><span>every day.</span></h1>
      </div>
      <div class="row">

<section class="pb-20 bg-light-light">
  <nav class="navbar navbar-expand-lg navbar-light py-5 mb-10 mb-lg-16"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
      <button class="btn p-0 d-lg-none navbar-burger">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
        </svg>
      </button>
      <ul class="d-none d-lg-flex position-absolute top-50 start-50 translate-middle navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
      </ul>
      <div class="d-none d-lg-block"><a class="btn" href="#">Sign In</a><a class="btn btn-secondary" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="container">
    <div class="mw-2xl mx-auto text-center mb-20 mb-lg-32"><span>Develop your skills</span>
      <h1 class="mt-2"><span>Take care of your</span><span class="d-block text-secondary">performance</span><span>every day.</span></h1>
    </div>
    <div class="row">
      <div class="col-12 col-lg-4 mb-10 mb-lg-0">
        <div class="d-flex"><span class="mt-n2 me-5">

<section class="pb-20">
  <nav class="navbar navbar-expand-lg navbar-light py-5 mb-10 mb-lg-16"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
      <button class="btn p-0 d-lg-none navbar-burger">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
        </svg>
      </button>
      <ul class="d-none d-lg-flex position-absolute top-50 start-50 translate-middle navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
      </ul>
      <div class="d-none d-lg-block"><a class="btn" href="#">Sign In</a><a class="btn btn-secondary" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="container">
    <div class="mw-2xl mx-auto text-center mb-20 mb-lg-32"><span>Develop your skills</span>
      <h1 class="mt-2"><span>Take care of your</span><span class="d-block text-secondary">performance</span><span>every day.</span></h1>
    </div>
    <div class="row">
      <div class="col-12 col-lg-4 mb-10 mb-lg-0">
        <div class="d-flex"><span class="mt-n2 me-5">

<section class="pb-20 pb-lg-10 mb-lg-32 bg-secondary-light">
  <nav class="navbar navbar-light py-5 mb-10 mb-lg-16"  >
    <div class="container">
      <div class="d-flex w-100 justify-content-between"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
        <button class="btn p-0 navbar-burger">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div class="container pt-lg-10">
    <div class="row">
      <div class="col-12 col-lg-6 mb-10">
        <div class="mw-lg-md">
          <h2 class="mb-5 text-primary">Take care of your performance every day.</h2>
          <p class="lead text-muted lh-lg mb-6">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
          <div class="input-group">
            <input class="form-control" type="text" placeholder="mail@example.com"/>
            <button class="btn btn-primary" type="submit">Start for free</button>
          </div>
        </div>
      </div>

<section class="bg-primary pb-20 pb-lg-10 mb-lg-32">
  <nav class="navbar navbar-expand-lg navbar-dark py-5 mb-10 mb-lg-16"  >
    <div class="container"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo-white.svg" alt="" width="132"/></a>
      <button class="btn p-0 d-lg-none navbar-burger text-white">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="currentColor"></path>
        </svg>
      </button>
      <ul class="navbar-nav ms-6 me-auto d-none d-lg-flex">
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
      </ul>
      <div class="d-none d-lg-block"><a class="btn text-light" href="#">Sign In</a><a class="btn btn-secondary" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="container pt-lg-10">
    <div class="row">
      <div class="col-12 col-lg-6 mb-10">
        <div class="mw-lg-md">
          <h2 class="mb-5 text-white">Take care of your performance every day.</h2>
          <p class="mb-6 text-light lead lh-lg">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
          <div class="input-group">

<section class="pb-20 pb-lg-10 mb-lg-32 bg-secondary-light">
  <nav class="navbar navbar-expand-lg navbar-light py-5 mb-10 mb-lg-16"  >
    <div class="container"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
      <button class="btn p-0 d-lg-none navbar-burger">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
        </svg>
      </button>
      <ul class="navbar-nav ms-6 me-auto d-none d-lg-flex">
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
      </ul>
      <div class="d-none d-lg-block"><a class="btn" href="#">Sign In</a><a class="btn btn-primary" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="container pt-lg-10">
    <div class="row">
      <div class="col-12 col-lg-6 mb-10">
        <div class="mw-lg-md">
          <h2 class="mb-5 text-primary">Take care of your performance every day.</h2>
          <p class="lead text-muted lh-lg mb-6">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
          <div class="input-group">