UI Components – Saturn Library

<section class="relative xl:pt-20 overflow-hidden">
  <img class="absolute top-0 left-0 -mt-24 md:-mt-0" src="saturn-assets/images/applications/blue-left-light.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-3/5 px-4">
          <div class="max-w-md md:max-w-xl lg:max-w-2xl mx-auto py-20 lg:py-32 lg:mx-0">
            <span class="inline-block py-1 px-3 mb-5 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">👋 MEET SATURN UI LIBRARY</span>
            <h1 class="font-heading text-5xl xs:text-6xl xl:text-7xl font-bold mb-5">
              <span>Ready to Deliver</span>
              <span class="block leading-snug font-serif italic">Wonderfull</span>
              <span>digital product</span>
            </h1>
            <p class="max-w-md text-xl text-gray-500 font-semibold mb-15">Nisi eu pellentesque felis volutpat aliquet pulvinar sed. Vitae fames vestibulum urna vel odio mauris urna orci est.</p>
            <div class="flex items-center">
              <a class="inline-block transform hover:scale-102 transition duration-200 mr-4 md:mr-6" href="#">
                <img class="block h-12" src="saturn-assets/images/applications/button-logo1.png" alt="">
              </a>
              <a class="inline-block transform hover:scale-102 transition duration-200" href="#">
                <img class="block h-12" src="saturn-assets/images/applications/button-logo2.png" alt="">
              </a>
            </div>
          </div>
        </div>

<section class="relative py-20 md:py-32 overflow-hidden">
  <img class="absolute top-0 left-0" src="saturn-assets/images/contact/light-left-blue.png" alt="">
  <img class="absolute bottom-0 right-0 -mb-20" src="saturn-assets/images/contact/light-orange-right.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-2xl mx-auto mb-22 text-center">
      <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">READY TO SUPPORT</span>
      <h1 class="font-heading text-5xl xs:text-6xl font-bold text-gray-900 mb-4">
        <span>Get in touch with us for</span>
        <span class="font-serif italic">collaboration</span>
      </h1>
      <p class="text-xl text-gray-500 font-semibold">We help people to grow their business using saturn ui library with professional and powerfull solution.</p>
    </div>
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap justify-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-10 lg:mb-0">
          <div class="max-w-lg mx-auto h-full bg-white border-2 border-gray-100 rounded-3xl">
            <div class="pt-4 px-4 pb-9 border-b border-gray-100">
              <div class="relative mb-10">
                <img class="block h-56 w-full rounded-lg" src="saturn-assets/images/contact/furniture-picture.png" alt="">
                <div class="absolute bottom-0 right-0 -mb-12 mr-4">
                  <div class="relative w-24 h-24 flex items-center justify-center">
                    <div class="absolute top-0 left-0 w-full h-full rounded-full bg-green-400 bg-opacity-30 animate-pulse animate-scaleChange"></div>
                    <div class="relative flex items-center justify-center w-15 h-15 rounded-full bg-green-400">
                      <img src="saturn-assets/images/contact/icon-pointer.svg" alt="">

<section class="relative pt-20 lg:pt-24 overflow-hidden">
  <img class="absolute bottom-0 left-0" src="saturn-assets/images/content/light-blue-left.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
          <div class="max-w-md md:max-w-lg mx-auto lg:mx-0">
            <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">RICH TEXT MODULE</span>
            <h1 class="font-heading text-4xl xs:text-6xl md:text-7xl font-bold text-gray-900 mb-12">
              <span class="block">Saturn</span>
              <span>is a beautiful</span>
              <span class="block font-serif italic">UI Library</span>
            </h1>
            <p class="max-w-md text-lg xs:text-3xl font-semibold text-gray-400 mb-6">Arcu ultrices sit non magna enim id semper quam venenatis. Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</p>
            <p class="max-w-md text-lg xs:text-3xl font-semibold text-gray-400">Augue justo at convallis vitae nunc maecenas est. Viverra duis feugiat posuere vitae tincidunt.</p>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md md:max-w-lg mx-auto lg:mr-0">
            <h3 class="text-xl xs:text-3xl font-semibold text-gray-800 mb-6">Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</h3>
            <ul class="mb-6">
              <li class="flex mb-6 items-center">
                <img class="w-6 h-6 mr-4" src="saturn-assets/images/content/check-green.svg" alt="">
                <span class="text-base xs:text-lg font-semibold text-gray-900">Design Style well organized</span>

<section class="relative py-20 md:py-32 overflow-hidden">
  <img class="absolute top-0 left-1/2 transform -translate-x-1/2 w-full max-w-4xl" src="saturn-assets/images/cta/circle-triple.svg" alt="">
  <img class="absolute top-0 left-0" src="saturn-assets/images/cta/blue-light-left-top.png" alt="">
  <img class="absolute top-0 right-0" src="saturn-assets/images/cta/orange-right-bottom.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-sm sm:max-w-md md:max-w-2xl mx-auto">
      <h1 class="font-heading text-4xl xs:text-5xl md:text-6xl font-bold text-gray-900 mb-10">
        <span>Get ready to build your</span>
        <span class="font-serif italic">product</span>
      </h1>
      <p class="text-lg text-gray-600 mb-10">Adipiscing neque id sit in odio at lorem.</p>
      <div class="md:flex mb-10 items-center">
        <div class="flex mb-6 md:mb-0 md:mr-6 items-center">
          <img src="saturn-assets/images/cta/avatar2.png" alt="">
          <img class="-ml-2" src="saturn-assets/images/cta/avatar3.png" alt="">
          <img class="-ml-2" src="saturn-assets/images/cta/avatar4.png" alt="">
          <img class="-ml-2" src="saturn-assets/images/cta/avatar5.png" alt="">
          <img class="-ml-2" src="saturn-assets/images/cta/avatar1.png" alt="">
        </div>
        <div>
          <span class="block text-2xl font-bold leading-none">250+</span>
          <span class="block text-xs text-gray-500 font-semibold">Startup founders</span>
        </div>
      </div>

<section class="py-20 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 pb-20 md:pb-28">
        <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
          <div class="max-w-md mx-auto lg:mx-0">
            <h3 class="max-w-sm font-heading text-5xl md:text-6xl font-bold text-gray-900 mb-6">
              <span>Ready to get</span>
              <span class="font-serif italic">started</span>
              <span>?</span>
            </h3>
            <p class="max-w-sm text-gray-500 mb-16">If there are questions you want to ask, we will answer all your question</p>
            <div class="sm:flex mb-2 items-center">
              <input class="w-full mb-3 sm:mb-0 sm:mr-4 pb-4 bg-transparent border-b border-gray-200 text-sm text-gray-900 placeholder-gray-400 outline-none" type="email" placeholder="Enter your email">
              <button class="relative group inline-block flex-shrink-0 w-full sm:w-auto py-3 px-5 text-sm font-semibold text-orange-50 bg-orange-900 rounded-full overflow-hidden" type="submit">
                <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                <span class="relative">Subscribe</span>
              </button>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md mx-auto lg:mr-0">
            <p class="text-2xl font-semibold text-gray-900 mb-16">Maybe your question is have been answered, check this out.</p>

<section class="relative py-20 md:py-24 overflow-hidden">
  <img class="absolute top-0 left-0" src="saturn-assets/images/team/light-blue.png" alt="">
  <img class="absolute bottom-0 right-0 mr-32" src="saturn-assets/images/team/light-orange.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-2xl lg:max-w-3xl mx-auto xl:max-w-7xl">
      <div class="flex flex-wrap mb-20 -mx-4 items-center">
        <div class="w-full xl:w-1/2 px-4">
          <div>
            <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold text-gray-900 mb-8">
              <span>Get to know our amazing</span>
              <span class="font-serif italic">Team</span>
            </h1>
          </div>
        </div>
        <div class="w-full xl:w-1/2 px-4">
          <div class="max-w-md xl:ml-auto">
            <p class="text-lg text-gray-500 mb-6">Mi turpis turpis in justo pellentesque id nibh praesent. Posuere vel sit dignissim eu nisl.</p>
            <a class="inline-flex py-4 px-6 items-center text-sm text-orange-900 font-semibold bg-white border border-gray-200 hover:border-orange-900 rounded-full transition duration-200" href="#">
              <span class="mr-4">See More Team</span>
              <span>
                <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.83 5.28999L2.59 1.04999C2.49704 0.956266 2.38644 0.881872 2.26458 0.831103C2.14272 0.780334 2.01202 0.754196 1.88 0.754196C1.74799 0.754196 1.61729 0.780334 1.49543 0.831103C1.37357 0.881872 1.26297 0.956266 1.17 1.04999C0.983753 1.23736 0.879211 1.49081 0.879211 1.75499C0.879211 2.01918 0.983753 2.27263 1.17 2.45999L4.71 5.99999L1.17 9.53999C0.983753 9.72736 0.879211 9.98081 0.879211 10.245C0.879211 10.5092 0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961 11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207 11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83 6.70999C6.92373 6.61703 6.99813 6.50643 7.04889 6.38457C7.09966 6.26271 7.1258 6.13201 7.1258 5.99999C7.1258 5.86798 7.09966 5.73728 7.04889 5.61542C6.99813 5.49356 6.92373 5.38296 6.83 5.28999Z" fill="currentColor"></path>
                </svg>
              </span>

<section class="relative py-20 md:py-24 overflow-hidden">
  <img class="absolute top-0 left-0" src="saturn-assets/images/newsletter/light-left-top-double.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto px-8 md:px-16 py-12 sm:py-20 bg-gray-900 rounded-4xl">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="max-w-lg mx-auto">
            <h4 class="font-heading text-4xl sm:text-5xl text-white font-semibold">Sign up for our newsletter</h4>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-lg lg:ml-auto">
            <p class="text-lg font-semibold text-gray-50 mb-10">Get insider access to our company by subscribing to our newsletter and stay informed about our products, services, and initiatives.</p>
            <div class="sm:flex mb-2 items-center">
              <input class="w-full mb-3 sm:mb-0 sm:mr-4 py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="email" placeholder="pat@saturn.dev">
              <button class="relative group inline-block flex-shrink-0 w-full sm:w-auto py-3 px-5 text-sm font-semibold text-orange-50 hover:text-orange-900 bg-orange-900 rounded-md transition duration-300 overflow-hidden" type="submit">
                <div class="absolute top-0 right-full w-full h-full bg-white transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                <div class="relative flex items-center justify-center">
                  <span class="mr-4">Subscribe</span>
                  <svg width="8" height="11" viewBox="0 0 8 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.82994 5.04001L2.58994 0.80001C2.49698 0.706281 2.38638 0.631887 2.26452 0.581118C2.14266 0.530349 2.01195 0.504211 1.87994 0.504211C1.74793 0.504211 1.61723 0.530349 1.49537 0.581118C1.37351 0.631887 1.26291 0.706281 1.16994 0.80001C0.983692 0.987372 0.87915 1.24082 0.87915 1.50501C0.87915 1.7692 0.983692 2.02265 1.16994 2.21001L4.70994 5.75001L1.16994 9.29001C0.983692 9.47737 0.87915 9.73082 0.87915 9.99501C0.87915 10.2592 0.983692 10.5126 1.16994 10.7C1.26338 10.7927 1.3742 10.866 1.49604 10.9158C1.61787 10.9655 1.74834 10.9908 1.87994 10.99C2.01155 10.9908 2.14201 10.9655 2.26385 10.9158C2.38569 10.866 2.4965 10.7927 2.58994 10.7L6.82994 6.46001C6.92367 6.36705 6.99806 6.25645 7.04883 6.13459C7.0996 6.01273 7.12574 5.88202 7.12574 5.75001C7.12574 5.618 7.0996 5.48729 7.04883 5.36543C6.99806 5.24357 6.92367 5.13297 6.82994 5.04001Z" fill="currentColor"></path>
                  </svg>
                </div>
              </button>

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative pt-24 pb-24 lg:pb-20 lg:pt-32 overflow-hidden">
  <img class="absolute top-0 left-0" src="saturn-assets/images/testimonials/blue-light.png" alt="">
  <img class="absolute top-0 right-0" src="saturn-assets/images/testimonials/orange-light.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="max-w-xl mb-24 mx-auto text-center">
        <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">TESTIMONIALS</span>
        <h1 class="font-heading text-4xl xs:text-6xl font-bold text-gray-900 mb-6">
          <span>Customer said about</span>
          <span class="font-serif italic">Saturn</span>
        </h1>
      </div>
    </div>
  </div>
  <div class="relative" style="height:600px;">
    <div class="overflow-hidden h-full">
        <div class="absolute left-1/2 transform -translate-x-1/2">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
                <div x-ref="slide1" class="flex-shrink-0 h-full w-full p-5">
                    <div class="flex mb-8 justify-center">
                      <div class="w-full max-w-sm flex-shrink-0 mr-8">
                        <div class="p-6 bg-white rounded-4xl shadow-lg">
                          <div class="flex mb-6 items-center">
                            <img class="block w-15 h-15 rounded-full" src="saturn-assets/images/testimonials/avatar-group-3.png" alt="">

<section class="py-20 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="pb-10 mb-10 border-b border-gray-700 items-center">
        <div class="flex flex-wrap -mx-4 items-center">
          <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-0">
            <a class="inline-block" href="#">
              <img class="h-15" src="saturn-assets/logos/logo-saturn-light.svg" alt="">
            </a>
          </div>
          <div class="w-full lg:w-1/2 px-4">
            <div class="sm:flex -mb-4 items-center lg:justify-end">
              <span class="inline-block text-white mb-4 mr-8">Ready to get collaborate?</span>
              <a class="relative group inline-block w-full sm:w-auto py-3 px-5 mb-4 text-center text-sm font-semibold text-orange-50 hover:text-orange-900 bg-orange-900 rounded-md overflow-hidden transition duration-300" href="#">
                <div class="absolute top-0 right-full w-full h-full bg-white transform group-hover:translate-x-full group-hover:scale-105 transition duration-500"></div>
                <span class="relative">Get Started</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 mb-18">
        <div class="w-full lg:w-2/5 px-4 mb-12 lg:mb-0">
          <div class="xs:max-w-xs">

<section class="relative py-20 md:py-32 overflow-hidden">
  <img class="absolute top-0 right-0 md:mt-10 -mr-20 md:-mr-0" src="saturn-assets/images/stats/star-circle.svg" alt="">
  <img class="absolute bottom-0 left-0" src="saturn-assets/images/stats/left-blue-light.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-24 items-end">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="max-w-md md:max-w-lg">
            <span class="inline-block py-1 px-3 mb-5 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">PRODUCT OVERVIEW</span>
            <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold">
              <span>Build</span>
              <span class="font-serif italic">Exclusively</span>
            </h1>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md lg:ml-auto lg:pb-3">
            <p class="text-xl text-gray-500 font-semibold">Nisi eu pellentesque felis volutpat aliquet pulvinar sed. Vitae fames vestibulum urna vel odio mauris urna orci est.</p>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="relative w-full md:w-1/3 px-4 pb-9 md:pb-0 mb-12 lg:mb-0">
          <div class="hidden md:block absolute top-1/2 right-0 w-px h-28 bg-gray-200 transform -translate-y-1/2"></div>

<section class="relative py-20 md:py-24 bg-gray-100 overflow-hidden">
  <img class="absolute top-0 left-0" src="saturn-assets/images/team/light-blue.png" alt="">
  <img class="absolute bottom-0 right-0" src="saturn-assets/images/team/light-orange.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-md md:max-w-2xl mx-auto xl:max-w-7xl">
      <div class="flex flex-wrap mb-20 -mx-4 items-center">
        <div class="w-full xl:w-1/2 px-4">
          <div>
            <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold text-gray-900 mb-8">
              <span>Get to know our amazing</span>
              <span class="font-serif italic">Team</span>
            </h1>
          </div>
        </div>
        <div class="w-full xl:w-1/2 px-4">
          <div class="max-w-lg xl:ml-auto">
            <p class="text-lg text-gray-500">Mi turpis turpis in justo pellentesque id nibh praesent. Posuere vel sit dignissim eu nisl gravida. Fringilla sodales lobortis eget citudin fringilla.</p>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 -mb-12">
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-12">
          <div class="max-w-xs md:max-w-none mx-auto">
            <div class="flex flex-col items-center">

<section x-data="{ toggle: true }" class="relative py-20 overflow-hidden bg-gray-50">
  <img class="absolute top-0 right-0 -mr-32 md:-mr-0" src="saturn-assets/images/pricing/circle-star.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-2xl lg:max-w-5xl mx-auto mb-24 text-center">
      <h1 class="font-heading text-4xl sm:text-6xl lg:text-7xl font-bold text-gray-900 mb-8">
        <span>Choose a plan for a more</span>
        <span class="font-serif italic">advanced</span>
        <span>business</span>
      </h1>
      <div class="flex items-center justify-center">
        <div x-on:click="toggle = !toggle" class="relative inline-flex p-1 w-12 h-7 items-center justify-end bg-gray-100 rounded-full">
          <span :class="{'left-1/2': toggle}" class="absolute left-1 w-5 h-5 bg-orange-900 rounded-full transition-all duration-500"></span>
        </div>
        <span x-show="!toggle" class="ml-3 text-xl text-gray-900">Monthly pricing (save 20%)</span>
        <span x-show="toggle" class="visibility-item ml-3 text-xl text-gray-900">Annual pricing (save 20%)</span>
      </div>
    </div>
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 lg:pt-16 mb-8 lg:mb-0">
          <div class="max-w-sm mx-auto p-10 bg-gray-50 border border-gray-100 rounded-3xl">
            <div class="flex mb-4 items-center justify-center w-10 h-10 bg-gray-100 rounded-full">
              <img src="saturn-assets/images/pricing/icon1.svg" alt="">
            </div>

<section class="relative py-20 overflow-hidden">
  <img class="absolute top-0 left-0 mt-44" src="saturn-assets/images/faq/light-orange-left.png" alt="">
  <img class="absolute top-0 right-0 mt-10 -mr-20 sm:-mr-0" src="saturn-assets/images/faq/star-right.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-4xl mx-auto">
      <div class="text-center mb-24">
        <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">FREQUENTLY ASK QUESTION</span>
        <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold">
          <span>You ask? We</span>
          <span class="font-serif italic">answer</span>
        </h1>
      </div>
      <div class="flex cursor-pointer mb-8 p-8 group w-full items-start justify-between rounded-3xl border border-gray-100 text-left" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
        <div class="max-w-xl pr-5">
          <h3 class="text-xl font-semibold" :class="accordion ? 'text-orange-900' : 'text-black'">Do you provide a complete design style?</h3>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <p class="mt-3 text-lg text-gray-500">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
          </div>
        </div>
        <div>
          <span :class="{ 'hidden': !accordion }" class="relative top-4 hidden">
            <svg width="17" height="3" viewBox="0 0 17 3" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.4619 0.045166H1.46194C1.19673 0.045166 0.942374 0.150523 0.754838 0.338059C0.567302 0.525596 0.461945 0.77995 0.461945 1.04517C0.461945 1.31038 0.567302 1.56474 0.754838 1.75227C0.942374 1.93981 1.19673 2.04517 1.46194 2.04517H15.4619C15.7272 2.04517 15.9815 1.93981 16.1691 1.75227C16.3566 1.56474 16.4619 1.31038 16.4619 1.04517C16.4619 0.77995 16.3566 0.525596 16.1691 0.338059C15.9815 0.150523 15.7272 0.045166 15.4619 0.045166Z" fill="#FF460C"></path>
            </svg>

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative py-20 md:py-32 overflow-hidden">
  <img class="absolute top-0 left-0 mt-4 -ml-20 md:-ml-0" src="saturn-assets/images/content/stars-left-top.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="text-center mb-18">
      <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">SOCIAL MEDIA</span>
      <h1 class="font-heading text-4xl xs:text-6xl md:text-7xl font-bold text-gray-900 mb-4">
        <span>Follow us on</span>
        <span class="font-serif italic">instagram</span>
      </h1>
      <p class="text-gray-500">Risus viverra justo sagittis vestibulum metus.</p>
    </div>
    <div class="relative max-w-sm sm:max-w-7xl mx-auto">
      <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="absolute z-10 top-1/2 left-0 transform -translate-y-1/2 flex items-center justify-center w-12 h-12 bg-white rounded-full border border-gray-200 hover:border-orange-900 transition duration-200">
        <img src="saturn-assets/images/instagram-photos/left-arrow.svg" alt="">
      </button>
      <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="absolute z-10 top-1/2 right-0 transform -translate-y-1/2 flex items-center justify-center w-12 h-12 bg-white rounded-full border border-gray-200 hover:border-orange-900 transition duration-200">
        <img src="saturn-assets/images/instagram-photos/right-arrow.svg" alt="">
      </button>
      <div class="px-6">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-5">
                    <div class="flex -mx-4">
                      <div class="w-full md:w-1/3 lg:w-1/4 px-4">

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative py-6 bg-white z-50">
    <div class="container px-4 mx-auto">
      <div class="flex items-center relative">
        <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-block text-lg font-bold" href="#">
          <img class="h-10" src="saturn-assets/logos/logo-saturn-dark.svg" alt="" width="auto">
        </a>
        <div class="lg:hidden ml-auto">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex w-12 h-12 items-center justify-center bg-gray-100 hover:bg-gray-200 rounded-md transition duration-200">
            <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>
        <ul class="hidden lg:flex lg:w-auto lg:space-x-12">
          <li class="group relative">
            <a class="inline-block text-sm text-gray-900 hover:text-orange-900 font-medium" href="#">Featured</a>
            <div class="hidden group-hover:block absolute top-full left-0 min-w-max max-w-xs p-4 z-50">
              <div class="-mb-2 ml-8 w-4 h-4 rounded-sm bg-white border-l border-t border-gray-200 transform rotate-45"></div>
              <div class="w-full max-w-xs bg-white border border-gray-100 rounded-3xl pt-4 pb-4 px-4">
                <div class="pb-3 mb-3 border-b border-gray-100"><a class="block py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Featured</a><a class="block py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Solutions</a></div>
                <div class="pb-3 mb-3 border-b border-gray-100">

<section class="relative py-20 md:py-32 overflow-hidden">
  <img class="absolute top-0 right-0 -mt-24" src="saturn-assets/images/contact/light-orange-right.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="max-w-2xl mb-24">
        <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">CONTACT US</span>
        <h1 class="max-w-md font-heading text-5xl xs:text-6xl font-bold text-gray-900 mb-4">
          <span>Don’t hesitate</span>
          <span class="font-serif italic">to talk with us</span>
        </h1>
        <p class="text-xl text-gray-500 font-semibold">Relax, we are ready to support 24/7 for you</p>
      </div>
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
          <div class="flex mb-16 items-center">
            <div class="flex flex-shrink-0 mr-5 sm:mr-8 items-center justify-center p-1 w-16 sm:w-20 h-16 sm:h-20 rounded-full bg-yellow-200">
              <img src="saturn-assets/images/contact/icon-email.svg" alt="">
            </div>
            <div>
              <span class="sm:text-lg text-gray-500">Email</span>
              <span class="block text-lg sm:text-2xl font-semibold text-gray-900">hello@yourdomain.com</span>
            </div>
          </div>
          <div class="flex items-center">

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative overflow-hidden">
  <div class="hidden xl:block absolute top-0 left-0 h-full w-full max-w-2xl xl:max-w-3xl 2xl:max-w-4xl">
    <img class="block h-full w-full object-cover" src="saturn-assets/images/sign-up/image-vr-woman.png" alt="">
    <div class="absolute bottom-0 w-full left-0 px-20 pb-18">
      <div class="max-w-2xl p-10 backdrop-blur-md backdrop-filter bg-black bg-opacity-30 rounded-5xl">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 h-full w-full p-5">
                    <h5 class="text-3xl text-white font-semibold mb-2">Selina Destin</h5>
                    <span class="block text-sm text-white font-semibold mb-6">Web Development Agency</span>
                    <p class="max-w-lg text-2xl text-white mb-15">"Untitled has become essential in starting every new project, we can't imagine working without it."</p>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 h-full w-full p-5">
                    <h5 class="text-3xl text-white font-semibold mb-2">Kristin Watson</h5>
                    <span class="block text-sm text-white font-semibold mb-6">Medical Assistant</span>
                    <p class="max-w-lg text-2xl text-white mb-15">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna."</p>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 h-full w-full p-5">
                    <h5 class="text-3xl text-white font-semibold mb-2">Darrell Steward</h5>
                    <span class="block text-sm text-white font-semibold mb-6">Marketing Coordinator</span>
                    <p class="max-w-lg text-2xl text-white mb-15">"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                </div>
            </div>
        </div>

<section class="relative py-20 overflow-hidden" x-data="{ showContent: false }">
  <img class="absolute top-0 right-0 xl:mt-10 -mr-24 lg:-mr-0" src="saturn-assets/images/blog/star-circle-right.svg" alt="">
  <img class="hidden sm:block absolute bottom-0 left-0 -mb-48 lg:mb-0" src="saturn-assets/images/blog/blue-light-left.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-xl lg:max-w-7xl mx-auto">
      <div class="max-w-2xl mx-auto mb-15 text-center">
        <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">OUR BLOG</span>
        <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold">
          <span>News &amp;</span>
          <span class="font-serif italic">Articles</span>
        </h1>
      </div>
      <div class="flex flex-wrap -mx-4 mb-18">
        <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
          <a class="block group w-full" href="#">
            <img class="block w-full mb-5" src="saturn-assets/images/blog/article-big.png" alt="">
            <span class="block text-gray-500 mb-5">Jul 20, 2022</span>
            <h4 class="text-3xl font-semibold text-gray-900 group-hover:text-orange-900 mb-5">Consectures Dummy Content Velit officia consequat duis enim velit</h4>
            <p class="max-w-xl text-lg text-gray-500">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit xercitation veniam consequat sunt nostrud amet.</p>
          </a>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <a class="md:flex group mb-8" href="#">
            <img class="w-48 h-40" src="saturn-assets/images/blog/article-small-2.png" alt="">

<div class="fixed bottom-0 inset-x-0 z-50 overflow-hidden" :class="{ 'hidden': !open }" x-data="{ open: true }">
  <div class="relative py-18 bg-gray-900">
    <img class="absolute bottom-0 right-0" src="saturn-assets/images/cookies/cookies-dark-right.svg" alt="">
    <div class="relative container px-4 mx-auto">
      <div class="max-w-5xl mx-auto">
        <div class="flex flex-wrap -mx-4 items-center">
          <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
            <h4 class="text-xl text-gray-50 font-semibold mb-4">Cookies on this site</h4>
            <p class="text-gray-400">
              <span>By clicking "Accept all" you consent to cookies being stored on your device to improve website navigation, analyze website usage and assist with our marketing efforts. View our</span>
              <a class="inline-block text-orange-900 hover:text-orange-700" href="#">Personal Data Policy</a>
              <span>for more information.</span>
            </p>
          </div>
          <div class="w-full lg:w-1/3 px-4">
            <div class="flex items-center lg:justify-end"><a class="inline-block mr-4 py-3 px-5 text-sm font-semibold text-orange-50 border border-gray-700 rounded-md hover:border-orange-900 transition duration-200" href="#">Manage Cookies</a><a x-on:click.prevent="open = false" class="inline-block py-3 px-5 text-sm font-semibold text-orange-50 hover:text-orange-900 bg-orange-900 hover:bg-orange-50 rounded-md transition duration-200" href="#">Accept all</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="relative pt-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-md lg:max-w-7xl mx-auto">
      <div class="relative z-10 flex flex-wrap -mx-4 mb-14 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
          <div class="max-w-2xl mx-auto lg:mx-0">
            <span class="inline-block py-1 px-3 mb-5 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">👋 MEET SATURN UI LIBRARY</span>
            <h1 class="font-heading text-5xl xs:text-6xl xl:text-7xl font-bold">
              <span>Manage your</span>
              <span class="block leading-snug font-serif italic">products</span>
              <span>with saturn</span>
            </h1>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="flex lg:justify-end">
            <div class="mr-5 pt-2">
              <div class="w-12 xs:w-24 h-px bg-orange-500"></div>
            </div>
            <div>
              <div class="flex items-center mb-5">
                <img class="mr-1.5 h-4" src="saturn-assets/images/applications/star.svg" alt="">
                <img class="mr-1.5 h-4" src="saturn-assets/images/applications/star.svg" alt="">
                <img class="mr-1.5 h-4" src="saturn-assets/images/applications/star.svg" alt="">