UI Components – Saturn Library

<section class="py-12 py-lg-16 bg-light position-relative overflow-hidden">
  <div class="container">
    <div class="mw-xl mx-auto mb-24 text-center">
      <h2 class="font-heading mb-8">
        <span>Amazing</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Team</span>
      </h2>
      <p class="lead text-secondary">We provide experienced advisors to help your company become more successful in the future.</p>
    </div>
    <div class="mw-sm mx-auto mw-md-none">
      <div class="row mb-n8">
        <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-8">
          <div class="bg-white pt-3 pb-5 px-3">
            <img class="img-fluid d-block mb-4 w-100" src="saturn-assets/images/team/photo-team-1.png" alt="">
            <div class="text-center">
              <span class="d-block fs-6 fw-bold">Cameron Williamson</span>
              <span class="fs-9 text-secondary fw-semibold">Founder</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-8">
          <div class="bg-white pt-3 pb-5 px-3">
            <img class="img-fluid d-block mb-4 w-100" src="saturn-assets/images/team/photo-team-6.png" alt="">
            <div class="text-center">

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-12">
          <div class="mw-lg">
            <span class="badge bg-primary-light px-3 py-2 text-primary mb-8">👋 MEET SATURN UI LIBRARY</span>
            <h2 class="font-heading mb-4">
              <span>Manage your</span>
              <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">products</span>
              <span>with saturn</span>
            </h2>
            <p class="mw-md lead text-secondary mb-0">Nisi eu pellentesque felis volutpat aliquet pulvinar sed. Vitae fames vestibulum urna vel odio mauris urna orci est.</p>
          </div>
        </div>
        <div class="col-lg-6">
          <img class="img-fluid d-block mb-lg-n20" src="saturn-assets/images/stats/image-stat1.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 position-relative overflow-hidden">
  <img class="position-absolute top-0 start-0" src="saturn-assets/images/applications/blue-left-light.png" alt="">
  <img class="d-none d-lg-block position-absolute top-50 end-0 col-6 translate-middle-y" src="saturn-assets/images/applications/group-app-light.png" alt="">
  <div class="position-relative container">
    <div class="mw-lg mx-auto mx-lg-0">
      <span class="badge bg-primary-light px-3 py-2 text-primary mb-8">👋 MEET SATURN UI LIBRARY</span>
      <h2 class="font-heading mb-8">
        <span>Manage your</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">products</span>
        <span>with saturn</span>
      </h2>
      <p class="mw-md lead text-secondary mb-0">Nisi eu pellentesque felis volutpat aliquet pulvinar sed. Vitae fames vestibulum urna vel odio mauris urna orci est.</p>
      <img class="img-fluid d-block mt-n4 mb-2 ms-auto" src="saturn-assets/images/applications/arrow-left.png" alt="">
      <div class="mb-10">
        <form action="">
          <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-4">
            <input class="form-control" type="email" name="" id="" placeholder="Enter email address">
            <button class="flex-shrink-0 btn btn-sm h-100 btn-primary d-flex align-items-center justify-content-center fs-8" type="submit">Start 14-days trial</button>
          </div>
        </form>
      </div>
      <div class="d-flex align-items-center">
        <div>
          <img class="img-fluid" src="saturn-assets/images/applications/avatar-photo1.png" alt="">

<div class="position-fixed bottom-0 w-100 overflow-hidden bg-white">
  <div class="position-relative container">
    <img class="d-none d-sm-block position-absolute bottom-0 start-0 ms-n20" src="saturn-assets/images/cookies/cookies-big.svg" alt="">
    <div class="position-relative py-10 mw-4xl mx-auto">
      <div class="row align-items-center">
        <div class="col-12 col-lg-7 mb-8 mb-lg-0">
          <div class="mx-auto mx-xl-0 mw-md">
            <p class="text-secondary mb-3">By clicking "Accept all cookies" you consent to cookies being stored on your device to improve website.</p>
            <a class="btn btn-link fw-semibold p-0" href="#">
              <span class="me-3">Read Our Data Policy</span>
              <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.92 0.62C12.8185 0.375651 12.6243 0.181475 12.38 0.0799999C12.2598 0.028759 12.1307 0.00157999 12 0H2C1.73478 0 1.48043 0.105357 1.29289 0.292893C1.10536 0.48043 1 0.734784 1 1C1 1.26522 1.10536 1.51957 1.29289 1.70711C1.48043 1.89464 1.73478 2 2 2H9.59L1.29 10.29C1.19627 10.383 1.12188 10.4936 1.07111 10.6154C1.02034 10.7373 0.994202 10.868 0.994202 11C0.994202 11.132 1.02034 11.2627 1.07111 11.3846C1.12188 11.5064 1.19627 11.617 1.29 11.71C1.38296 11.8037 1.49356 11.8781 1.61542 11.9289C1.73728 11.9797 1.86799 12.0058 2 12.0058C2.13201 12.0058 2.26272 11.9797 2.38458 11.9289C2.50644 11.8781 2.61704 11.8037 2.71 11.71L11 3.41V11C11 11.2652 11.1054 11.5196 11.2929 11.7071C11.4804 11.8946 11.7348 12 12 12C12.2652 12 12.5196 11.8946 12.7071 11.7071C12.8946 11.5196 13 11.2652 13 11V1C12.9984 0.869323 12.9712 0.740222 12.92 0.62Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="col-12 col-lg-5">
          <div class="mw-md mw-lg-none mx-auto">
            <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-lg-end gap-4"><a class="btn btn-outline-light text-primary" href="#">Decline</a><a class="btn btn-primary" href="#">Accept all cokies</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>

<section>
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="saturn-assets/logos/logo-saturn-dark.svg" alt="">
      </a>
      <button class="navbar-burger navbar-toggler p-2 rounded-1 border-0 bg-light">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Featured</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Solutions</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Products</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Articles</a></li>
        </ul>
        <div class="ms-auto"><a class="btn btn-sm btn-link fw-semibold" href="#">Sign In</a><a class="btn btn-sm btn-outline-light text-primary" href="#">Create an account</a></div>
      </div>
    </div>
  </nav>

<section class="py-12 py-lg-24 py-xl-32 position-relative overflow-hidden">
  <img class="position-absolute top-0 start-0" src="saturn-assets/images/cta/blue-light-left-top.png" alt="">
  <img class="position-absolute end-0 bottom-0" src="saturn-assets/images/cta/orange-right-bottom.png" alt="">
  <div class="position-relative container">
    <div>
      <h1 class="font-heading mb-10">
        <span>Build stunning websites are going easy with</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">saturn</span>
        <span>ui library</span>
      </h1>
      <p class="mw-xl lead text-secondary fs-6 mb-10">Nisi eu pellentesque felis volutpat aliquet pulvinar sed. Vitae fames vestibulum urna vel odio mauris urna orci est. Eget amet elementum fames nisl eu.</p>
      <div class="d-md-flex align-items-center">
        <a class="btn mb-14 mb-md-0 me-md-16 btn-primary rounded-pill" href="#">
          <span>Learn More</span>
          <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.8299 12.04L10.5899 7.80001C10.497 7.70628 10.3864 7.63189 10.2645 7.58112C10.1427 7.53035 10.012 7.50421 9.87994 7.50421C9.74793 7.50421 9.61723 7.53035 9.49537 7.58112C9.37351 7.63189 9.26291 7.70628 9.16994 7.80001C8.98369 7.98737 8.87915 8.24082 8.87915 8.50501C8.87915 8.7692 8.98369 9.02265 9.16994 9.21001L12.7099 12.75L9.16994 16.29C8.98369 16.4774 8.87915 16.7308 8.87915 16.995C8.87915 17.2592 8.98369 17.5126 9.16994 17.7C9.26338 17.7927 9.3742 17.866 9.49604 17.9158C9.61787 17.9655 9.74834 17.9908 9.87994 17.99C10.0115 17.9908 10.142 17.9655 10.2638 17.9158C10.3857 17.866 10.4965 17.7927 10.5899 17.7L14.8299 13.46C14.9237 13.367 14.9981 13.2564 15.0488 13.1346C15.0996 13.0127 15.1257 12.882 15.1257 12.75C15.1257 12.618 15.0996 12.4873 15.0488 12.3654C14.9981 12.2436 14.9237 12.133 14.8299 12.04Z" fill="#FFF2EE"></path>
          </svg>
        </a>
        <div class="d-flex align-items-center">
          <img class="img-fluid d-block" src="saturn-assets/images/cta/image-small.png" alt="">
          <span class="ms-6 fs-9 text-secondary">Our office is always open to having you anytime</span>
        </div>
      </div>
    </div>

<section class="py-12 py-lg-16 position-relative overflow-hidden">
  <img class="position-absolute bottom-0 end-0 mt-12" src="saturn-assets/images/features/star-element-right.png" alt="">
  <div class="container">
    <div class="mw-md mw-md-xl mx-auto mw-lg-none">
      <div class="row mb-16 align-items-center">
        <div class="col-lg-8">
          <div>
            <span class="badge px-4 py-2 text-primary bg-primary-light mb-8">FEATURES</span>
            <h2 class="font-heading mb-14">
              <span>Delivering Tech</span>
              <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Solutions</span>
            </h2>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="mw-sm ms-lg-auto">
            <p class="fs-7 text-secondary mb-0">We are a team of 20+ who are passionate about making the world a better place.</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-lg-6 mb-6 mb-lg-0">
          <div class="position-relative h-100 p-12 rounded-2 overflow-hidden">
            <img class="position-absolute top-0 end-0 w-100 h-100" style="object-fit: cover;" src="saturn-assets/images/features/blue-photo.png" alt="">

<section class="py-12 py-lg-24 bg-light-light position-relative overflow-hiddepx-8 px-sm-12 px-md-20 py-20 px-8 px-sm-12 px-md-20 py-20 n">
  <img class="position-absolute top-0 end-0 mt-20" src="saturn-assets/images/faq/star-right.svg" alt="">
  <img class="position-absolute top-0 start-0" src="saturn-assets/images/faq/light-blue-left.png" alt="">
  <div class="container position-relative">
    <div class="mw-4xl mx-auto text-center mb-16">
      <span class="badge px-4 py-2 text-primary bg-primary-light mb-5">FREQUENTLY ASK QUESTION</span>
      <h2 class="font-heading mb-20">
        <span>You ask? We</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">answer</span>
      </h2>
    </div>
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-6 mb-6 mb-lg-0">
          <button class="btn py-10 px-8 mb-6 btn-light-light w-100 text-start fw-normal rounded-4 shadow-lg">
            <div class="d-flex gap-4 align-items-start justify-content-between">
              <div class="mw-md">
                <h6 class="fs-6 fw-semibold text-primary mb-5">Do you provide a complete design style?</h6>
                <p class="fs-7 text-secondary mb-0">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus.</p>
              </div>
              <span class="flex-shrink-0">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g filter="url(#filter0_d_231_4037)">
                    <rect x="2" y="1" width="36" height="36" rx="18" fill="#FF460C"></rect>

<section class="py-12 py-lg-24 bg-light position-relative overflow-hidden">
  <img class="position-absolute top-0 end-0 mt-20" src="saturn-assets/images/pricing/circle-star.png" alt="">
  <div class="container position-relative">
    <div class="mw-3xl mx-auto text-center mb-20">
      <h3 class="font-heading mb-8">
        <span>Inspiring possibility and applying</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">innovation</span>
      </h3>
      <p class="fs-7 text-secondary">Lacinia eros at arcu gravida molestie faucibus.</p>
    </div>
    <div class="mw-6xl mx-auto">
      <div class="row justify-content-center align-items-center">
        <div class="col-12 col-lg-4 mb-n6 mb-lg-n0 me-lg-n24">
          <div class="mw-sm mx-auto pt-6 ps-8 pe-8 pe-lg-20 pb-20 pb-lg-8 bg-white border rounded-5">
            <span class="d-block fs-9 fw-semibold text-secondary mb-2">PREMIUM</span>
            <span class="d-flex align-items-end">
              <span class="fs-4 fw-bold lh-1">$150</span>
              <span class="fs-9 fw-semibold">/month</span>
            </span>
            <div class="mt-7 pt-5 border-top">
              <ul class="list-unstyled mb-10">
                <li class="d-flex mb-6 align-items-center">
                  <img src="saturn-assets/images/pricing/green-check.svg" alt="">
                  <span class="ms-2 fs-9 text-secondary">No Discount</span>

<section class="py-12 py-lg-24 bg-light-light position-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none mb-24">
      <div class="row">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div class="mw-sm">
            <h3 class="font-heading mb-6">
              <span>Ready to get</span>
              <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">started?</span>
            </h3>
            <p class="text-secondary mb-16">If there are questions you want to ask, we will answer all your question</p>
            <form action="">
              <div class="d-flex flex-column flex-sm-row gap-4">
                <input class="form-control ps-0 rounded-0 border-0 border-bottom border-light-dark bg-transparent" type="email" name="" id="" placeholder="Enter your email">
                <a class="btn btn-sm btn-primary rounded-pill" href="#">Subscribe</a>
              </div>
            </form>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="mw-md ms-lg-auto">
            <h6 class="fs-5 lh-sm mb-12">Maybe your question is have been answered, check this out.</h6>
            <div>
              <a class="btn btn-link text-start d-flex justify-content-between w-100 px-0 pt-0 pb-5 mb-5 border-top-0 border-start-0 border-end-0 border-bottom border-light-dark text-decoration-none rounded-0" href="#">

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="d-none d-sm-block position-absolute top-0 start-0 mt-24" src="saturn-assets/images/contact/light-left-blue.png" alt="">
  <img class="d-none d-sm-block position-absolute bottom-0 end-0 mb-24" src="saturn-assets/images/contact/light-orange-right.png" alt="">
  <div class="container position-relative">
    <div class="mw-2xl mx-auto mb-16 text-center">
      <span class="badge px-4 py-2 text-primary bg-primary-light mb-8">READY TO SUPPORT</span>
      <h3 class="font-heading mb-4">
        <span>Get in touch with us for</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">collaboration</span>
      </h3>
      <p class="lead text-secondary">We help people to grow their business using saturn ui library with professional and powerfull solution.</p>
    </div>
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row justify-content-between">
        <div class="col-12 col-lg-6 mb-8 mb-lg-0">
          <div class="border rounded-1">
            <div class="position-relative p-4">
              <div class="position-absolute bottom-0 end-0 mb-n10 me-12 rounded-pill bg-success bg-opacity-25 d-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
                <div class="d-flex align-items-center justify-content-center rounded-pill bg-success" style="width: 60px; height: 60px;">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21.15 2.86001C20.768 2.47057 20.2835 2.19723 19.7526 2.07158C19.2217 1.94594 18.6661 1.97313 18.15 2.15001L4 6.88001C3.42932 7.06681 2.93069 7.42616 2.57296 7.90845C2.21522 8.39073 2.01602 8.97218 2.00285 9.57251C1.98968 10.1728 2.16319 10.7625 2.49943 11.26C2.83567 11.7575 3.31806 12.1384 3.88 12.35L9.12 14.35C9.23932 14.3956 9.34796 14.4654 9.43915 14.5548C9.53033 14.6443 9.60211 14.7516 9.65 14.87L11.65 20.12C11.8536 20.674 12.223 21.1518 12.708 21.4882C13.1929 21.8246 13.7698 22.0033 14.36 22H14.43C15.031 21.9891 15.6136 21.7903 16.096 21.4317C16.5783 21.073 16.9364 20.5724 17.12 20L21.85 5.83001C22.022 5.31895 22.0476 4.76995 21.9239 4.2451C21.8002 3.72024 21.5321 3.24046 21.15 2.86001ZM20 5.20001L15.22 19.38C15.1645 19.5595 15.053 19.7165 14.9019 19.828C14.7507 19.9396 14.5679 19.9999 14.38 20C14.1933 20.0031 14.01 19.9492 13.8546 19.8456C13.6992 19.742 13.579 19.5936 13.51 19.42L11.51 14.17C11.365 13.7885 11.1414 13.4418 10.8537 13.1524C10.566 12.863 10.2206 12.6373 9.84 12.49L4.59 10.49C4.4129 10.4251 4.26066 10.3062 4.15479 10.1501C4.04892 9.99399 3.99477 9.80856 4 9.62001C4.00016 9.43215 4.06042 9.24928 4.17198 9.09813C4.28354 8.94699 4.44053 8.83551 4.62 8.78001L18.8 4.05001C18.9628 3.98366 19.1413 3.96588 19.314 3.99883C19.4867 4.03179 19.6462 4.11406 19.7731 4.2357C19.9 4.35734 19.989 4.51314 20.0293 4.68427C20.0695 4.8554 20.0594 5.03453 20 5.20001Z" fill="black"></path>
                  </svg>
                </div>
              </div>

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="position-absolute top-0 start-0 mt-20" src="saturn-assets/images/instagram-photos/star-left-top.svg" alt="">
  <img class="position-absolute top-0 end-0" src="saturn-assets/images/instagram-photos/blue-center-light.png" alt="">
  <div class="container position-relative">
    <div class="mw-4xl mx-auto text-center mb-20">
      <span class="badge px-4 py-2 text-primary bg-primary-light mb-5">SOCIAL MEDIA</span>
      <h2 class="font-heading mb-4">
        <span>Follow us on</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">instagram</span>
      </h2>
      <p class="text-secondary">Risus viverra justo sagittis vestibulum metus.</p>
    </div>
    <div class="mw-sm mw-md-xl mx-auto mw-lg-none">
      <div class="row mb-n8">
        <div class="col-md-6 col-lg-3 mb-8">
          <a class="btn w-100 bg-white p-0 text-start fw-normal rounded-4 border" href="#">
            <div class="d-flex align-items-center justify-content-between p-4">
              <span class="fs-9">@saturn_ui</span>
              <span>
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9.99999 5.83334C9.1759 5.83334 8.37032 6.07771 7.68511 6.53555C6.99991 6.99339 6.46586 7.64413 6.15049 8.40549C5.83513 9.16685 5.75261 10.0046 5.91338 10.8129C6.07416 11.6211 6.47099 12.3636 7.05371 12.9463C7.63643 13.529 8.37886 13.9258 9.18711 14.0866C9.99537 14.2474 10.8331 14.1649 11.5945 13.8495C12.3559 13.5341 13.0066 13.0001 13.4644 12.3149C13.9223 11.6297 14.1667 10.8241 14.1667 10C14.1667 8.89494 13.7277 7.83513 12.9463 7.05373C12.1649 6.27233 11.1051 5.83334 9.99999 5.83334ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61106 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45156 9.99723 7.54803 9.51228C7.64449 9.02733 7.88259 8.58187 8.23222 8.23224C8.58185 7.88261 9.02731 7.64451 9.51226 7.54804C9.99722 7.45158 10.4999 7.50109 10.9567 7.69031C11.4135 7.87953 11.804 8.19996 12.0787 8.61108C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5ZM14.1667 5.00001C14.0018 5.00001 13.8407 5.04888 13.7037 5.14045C13.5666 5.23202 13.4598 5.36216 13.3968 5.51444C13.3337 5.66671 13.3172 5.83426 13.3493 5.99591C13.3815 6.15756 13.4609 6.30605 13.5774 6.42259C13.6939 6.53914 13.8424 6.61851 14.0041 6.65066C14.1657 6.68281 14.3333 6.66631 14.4856 6.60324C14.6378 6.54017 14.768 6.43335 14.8595 6.29631C14.9511 6.15927 15 5.99816 15 5.83334C15 5.61232 14.9122 5.40036 14.7559 5.24408C14.5996 5.0878 14.3877 5.00001 14.1667 5.00001ZM18.2833 6.86667C18.2695 6.15452 18.1342 5.44996 17.8833 4.78334C17.6506 4.17673 17.293 3.62583 16.8336 3.16642C16.3742 2.70701 15.8233 2.34935 15.2167 2.11667C14.55 1.86575 13.8455 1.73048 13.1333 1.71667C12.325 1.66667 12.0583 1.66667 9.99999 1.66667C7.94166 1.66667 7.67499 1.66667 6.86666 1.71667C6.15451 1.73048 5.44994 1.86575 4.78332 2.11667C4.17671 2.34935 3.62582 2.70701 3.1664 3.16642C2.70699 3.62583 2.34934 4.17673 2.11666 4.78334C1.86574 5.44996 1.73046 6.15452 1.71666 6.86667C1.66666 7.68334 1.66666 7.95001 1.66666 10C1.66666 12.05 1.66666 12.3167 1.71666 13.1333C1.73046 13.8455 1.86574 14.5501 2.11666 15.2167C2.34934 15.8233 2.70699 16.3742 3.1664 16.8336C3.62582 17.293 4.17671 17.6507 4.78332 17.8833C5.44994 18.1343 6.15451 18.2695 6.86666 18.2833C7.69999 18.2833 7.94166 18.3333 9.99999 18.3333C12.0583 18.3333 12.325 18.3333 13.1333 18.2833C13.8455 18.2695 14.55 18.1343 15.2167 17.8833C15.8233 17.6507 16.3742 17.293 16.8336 16.8336C17.293 16.3742 17.6506 15.8233 17.8833 15.2167C18.1342 14.5501 18.2695 13.8455 18.2833 13.1333C18.2833 12.3 18.3333 12.05 18.3333 10C18.3333 7.95001 18.3333 7.68334 18.2833 6.86667ZM16.6167 13.0583C16.602 13.5872 16.5036 14.1104 16.325 14.6083C16.1773 15.002 15.9439 15.3578 15.6417 15.65C15.3512 15.9524 14.9947 16.1834 14.6 16.325C14.1008 16.5109 13.5742 16.6123 13.0417 16.625C12.2583 16.625 12.0167 16.6667 9.99166 16.6667C7.96666 16.6667 7.73332 16.6667 6.94999 16.6667C6.41834 16.6529 5.89228 16.5545 5.39166 16.375C4.99804 16.2273 4.64222 15.9939 4.34999 15.6917C4.04762 15.4012 3.81659 15.0447 3.67499 14.65C3.48983 14.1535 3.38845 13.6297 3.37499 13.1C3.37499 12.2667 3.37499 12.0583 3.37499 10.0417C3.37499 8.02501 3.37499 7.78334 3.37499 6.98334C3.38935 6.45101 3.49069 5.92462 3.67499 5.42501C3.81879 5.03387 4.0496 4.68052 4.34999 4.39167C4.64047 4.0893 4.997 3.85827 5.39166 3.71667C5.89082 3.53075 6.41748 3.42936 6.94999 3.41667C7.73332 3.33334 7.97499 3.33334 9.99999 3.33334C12.025 3.33334 12.2667 3.33334 13.05 3.33334C13.5851 3.34695 14.1144 3.44829 14.6167 3.63334C15.0078 3.77714 15.3611 4.00795 15.65 4.30834C15.9524 4.59882 16.1834 4.95535 16.325 5.35001C16.529 5.85714 16.6446 6.39549 16.6667 6.94167C16.6667 7.77501 16.7083 7.98334 16.7083 10C16.7083 12.0167 16.6667 12.2583 16.6667 13.0583H16.6167Z" fill="#959AAA"></path>
                </svg>
              </span>
            </div>

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <div class="container">
    <div class="px-8 px-sm-16 py-20 bg-dark rounded-2">
      <div class="row">
        <div class="col-lg-6 mb-6 mb-lg-0">
          <h4 class="font-heading text-white fw-semibold lh-sm mb-0">Sign up for our newsletter</h4>
        </div>
        <div class="col-lg-6">
          <div>
            <p class="lead text-white mb-10">Get insider access to our company by subscribing to our newsletter and stay informed about our products, services, and initiatives.</p>
            <form action="">
              <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-4">
                <input class="form-control" type="email" name="" id="" placeholder="pat@shuffle.dev">
                <button class="flex-shrink-0 btn btn-sm h-100 btn-primary d-flex align-items-center justify-content-center fs-8" type="submit">
                  <span>Subscribe</span>
                  <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14.8299 12.04L10.5899 7.80001C10.497 7.70628 10.3864 7.63189 10.2645 7.58112C10.1427 7.53035 10.012 7.50421 9.87994 7.50421C9.74793 7.50421 9.61723 7.53035 9.49537 7.58112C9.37351 7.63189 9.26291 7.70628 9.16994 7.80001C8.98369 7.98737 8.87915 8.24082 8.87915 8.50501C8.87915 8.7692 8.98369 9.02265 9.16994 9.21001L12.7099 12.75L9.16994 16.29C8.98369 16.4774 8.87915 16.7308 8.87915 16.995C8.87915 17.2592 8.98369 17.5126 9.16994 17.7C9.26338 17.7927 9.3742 17.866 9.49604 17.9158C9.61787 17.9655 9.74834 17.9908 9.87994 17.99C10.0115 17.9908 10.142 17.9655 10.2638 17.9158C10.3857 17.866 10.4965 17.7927 10.5899 17.7L14.8299 13.46C14.9237 13.367 14.9981 13.2564 15.0488 13.1346C15.0996 13.0127 15.1257 12.882 15.1257 12.75C15.1257 12.618 15.0996 12.4873 15.0488 12.3654C14.9981 12.2436 14.9237 12.133 14.8299 12.04Z" fill="#FFF2EE"></path>
                  </svg>
                </button>
              </div>
              <p class="fs-10 fw-semibold mt-2 mb-0">
                <span class="text-white">We care about your data in our</span>
                <a class="btn btn-sm fs-10 btn-link text-white text-decoration-underline fw-semibold p-0" href="#">privacy policy</a>
              </p>

<section class="py-12 py-lg-24 bg-light position-relative overflow-hidden">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-12">
          <div class="mw-lg">
            <span class="badge bg-primary-light px-3 py-2 text-primary mb-8">👋 MEET SATURN UI LIBRARY</span>
            <h2 class="font-heading mb-4">
              <span>Manage your</span>
              <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">products</span>
            </h2>
            <p class="mw-md lead text-secondary mb-0">Nisi eu pellentesque felis volutpat aliquet pulvinar sed. Vitae fames vestibulum urna vel odio mauris urna orci est.</p>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="d-flex flex-column align-items-start mw-lg">
            <div class="d-flex mb-4 align-items-center justify-content-center px-10 py-8 bg-white rounded-2">
              <img class="img-fluid" src="saturn-assets/images/stats/chat-icon-1.svg" alt="">
              <div class="ms-6">
                <span class="d-block lh-1 fs-4 fw-bold">289</span>
                <span class="lh-1 fs-9 text-secondary">Items Downloaded</span>
              </div>
            </div>
            <div class="d-flex ms-auto mb-4 align-items-center justify-content-center px-10 py-8 bg-white rounded-2">

<section class="py-6 position-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-6 order-last order-lg-first">
          <div class="position-relative h-100">
            <div class="position-absolute top-0 start-0 w-100 h-100 p-10 d-flex align-items-center justify-content-center">
              <div class="mw-md">
                <h3 class="font-heading text-white mb-8">Sign in to your account</h3>
                <div class="d-flex mb-12 mb-sm-24">
                  <svg width="84" height="10" viewBox="0 0 84 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 4.25C0.585786 4.25 0.25 4.58579 0.25 5C0.25 5.41421 0.585786 5.75 1 5.75L1 4.25ZM84 5.00001L76.5 0.669879L76.5 9.33013L84 5.00001ZM1 5.75L77.25 5.75001L77.25 4.25001L1 4.25L1 5.75Z" fill="#FAFBFC"></path>
                  </svg>
                  <p class="lead text-white ms-3 mt-n1 mb-0">Greetings on your return! We kindly request you to enter your details.</p>
                </div>
                <div class="d-sm-flex align-items-center">
                  <div>
                    <img class="img-fluid" src="saturn-assets/images/sign-up/avatar-small-1.png" alt="">
                    <img class="img-fluid ms-n5" src="saturn-assets/images/sign-up/avatar-small-2.png" alt="">
                    <img class="img-fluid ms-n5" src="saturn-assets/images/sign-up/avatar-small-3.png" alt="">
                    <img class="img-fluid ms-n5" src="saturn-assets/images/sign-up/avatar-small-4.png" alt="">
                    <img class="img-fluid ms-n5" src="saturn-assets/images/sign-up/avatar-small-1.png" alt="">
                  </div>
                  <div class="mt-4 mt-sm-0 ms-sm-4">

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row mb-24 align-items-center">
        <div class="col-lg-6 mb-8 mb-lg-0">
          <h2 class="font-heading mb-0">
            <span>Get to know our amazing</span>
            <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Team</span>
          </h2>
        </div>
        <div class="col-lg-6">
          <div class="mw-sm mw-xl-md ms-lg-auto">
            <p class="fs-7 text-secondary mb-6">We provide experienced advisors to help your company become more successful in the future.</p>
            <a class="btn btn-outline-light text-primary rounded-pill" href="#">
              <span>See More Team</span>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.83 11.29L10.59 7.05C10.497 6.95627 10.3864 6.88188 10.2646 6.83111C10.1427 6.78034 10.012 6.7542 9.88 6.7542C9.74799 6.7542 9.61729 6.78034 9.49543 6.83111C9.37357 6.88188 9.26297 6.95627 9.17 7.05C8.98375 7.23736 8.87921 7.49082 8.87921 7.755C8.87921 8.01919 8.98375 8.27264 9.17 8.46L12.71 12L9.17 15.54C8.98375 15.7274 8.87921 15.9808 8.87921 16.245C8.87921 16.5092 8.98375 16.7626 9.17 16.95C9.26344 17.0427 9.37426 17.116 9.4961 17.1658C9.61794 17.2155 9.7484 17.2408 9.88 17.24C10.0116 17.2408 10.1421 17.2155 10.2639 17.1658C10.3857 17.116 10.4966 17.0427 10.59 16.95L14.83 12.71C14.9237 12.617 14.9981 12.5064 15.0489 12.3846C15.0997 12.2627 15.1258 12.132 15.1258 12C15.1258 11.868 15.0997 11.7373 15.0489 11.6154C14.9981 11.4936 14.9237 11.383 14.83 11.29Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="mw-md mx-auto mw-lg-3xl mw-xl-none">

<section class="pt-12 pt-lg-24 position-relative overflow-hidden">
  <img class="position-absolute bottom-0 start-0" src="saturn-assets/images/content/light-blue-left.png" alt="">
  <div class="container position-relative">
    <div class="mw-lg mw-lg-none mx-auto">
      <div class="row">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div>
            <span class="badge px-4 py-2 text-primary bg-primary-light mb-8">RICH TEXT MODULE</span>
            <h2 class="font-heading mb-12">
              <span>Saturn is a beautiful</span>
              <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">UI Library</span>
            </h2>
            <p class="fs-4 fw-semibold text-secondary">Arcu ultrices sit non magna enim id semper quam venenatis. Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi. Augue justo at convallis vitae nunc maecenas est. Viverra duis feugiat posuere vitae tincidunt.</p>
          </div>
        </div>
        <div class="col-lg-6">
          <div>
            <h6 class="fs-6 fw-semibold lh-sm mb-6">Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</h6>
            <ul class="list-unstyled mb-6">
              <li class="mb-6">
                <img src="saturn-assets/images/content/check-green.svg" alt="">
                <span class="ms-4 fs-7 fw-semibold">Design Style well organized</span>
              </li>
              <li class="mb-6">

<section class="pt-12 pt-lg-24 pt-xl-32 position-relative overflow-hidden">
  <img class="position-absolute top-0 start-0" src="saturn-assets/images/applications/blue-left-light.png" alt="">
  <div class="position-relative container">
    <img class="d-none d-md-block position-absolute bottom-0 end-0 col-4 col-xl-5" src="saturn-assets/images/applications/phone-app.png" alt="">
    <div class="mw-lg mw-md-2xl mx-auto mx-md-0 pb-md-24">
      <span class="badge bg-primary-light px-3 py-2 text-primary mb-8">👋 MEET SATURN UI LIBRARY</span>
      <h2 class="font-heading mb-8">
        <span>Ready to Deliver</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Wonderfull</span>
        <span>digital product</span>
      </h2>
      <p class="mw-md lead text-secondary mb-16">Nisi eu pellentesque felis volutpat aliquet pulvinar sed. Vitae fames vestibulum urna vel odio mauris urna orci est.</p>
      <div class="d-flex flex-column flex-md-row gap-4 justify-content-center">
        <a class="btn p-0" href="#">
          <img class="img-fluid" style="height: 48px;" src="saturn-assets/images/applications/button-logo1.png" alt="">
        </a>
        <a class="btn p-0" href="#">
          <img class="img-fluid" style="height: 48px;" src="saturn-assets/images/applications/button-logo2.png" alt="">
        </a>
      </div>
    </div>
  </div>
  <img class="d-block d-md-none img-fluid mt-24 mx-auto" src="saturn-assets/images/applications/phone-app.png" alt="">
</section>

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row align-items-center mb-16">
        <div class="col-lg-7 mb-8 mb-lg-0">
          <h3 class="mw-xl font-heading text-white mb-0">
            <span>Our</span>
            <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">happy</span>
            <span>clients says about us</span>
          </h3>
        </div>
        <div class="col-lg-5">
          <p class="mw-md ms-lg-auto text-light-dark mb-0">Risus viverra justo sagittis vestibulum metus. Massa lacinia eros posuere cursus sed vestibulum massa gravida. Turpis volutpat faucibus hac sed suspendisse convallis vestibulum massa.</p>
        </div>
      </div>
      <div class="row mb-16">
        <div class="col-lg-6 mb-12 mb-lg-0 pb-12 pb-lg-0 position-relative">
          <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 border-end border-secondary"></div>
          <div class="d-lg-none position-absolute bottom-0 start-0 w-100 border-bottom border-secondary"></div>
          <div class="mw-sm">
            <img class="img-fluid d-block mb-8" src="saturn-assets/images/testimonials/quote-white.svg" alt="">
            <h6 class="fs-6 text-white fw-semibold mb-10">Really recommend for agency</h6>
            <p class="fs-7 text-light-dark mb-6">“They are able to help a startup like mine scale and are very responsive to all our unique needs”</p>
            <div class="d-flex align-items-center">

<section>
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="position-relative container" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="saturn-assets/logos/logo-saturn-dark.svg" alt="">
      </a>
      <button class="navbar-burger navbar-toggler p-2 rounded-1 border-0 bg-light">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="d-none d-lg-block position-absolute top-50 start-50 translate-middle">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Featured</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Solutions</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Products</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Articles</a></li>
        </ul>
      </div>
      <div class="collapse navbar-collapse" id="nav01">
        <div class="ms-auto"><a class="btn btn-sm btn-link fw-semibold" href="#">Sign In</a><a class="btn btn-sm btn-outline-light text-primary" href="#">Create an account</a></div>
      </div>