Bootstrap 5 Components

<section class="overflow-hidden">
  <div class="row">
    <div class="col-lg-6">
      <div class="mw-md py-12 py-md-24 py-lg-40 px-5 mx-auto">
        <h4 class="font-heading mb-4">Login</h4>
        <p class="mb-8">
          <span class="text-light-dark">New to Solstice?</span>
          <a class="d-inline-block text-dark border-0 fw-bold" href="#">Create new account</a>
        </p>
        <form action="">
          <label class="form-label" for="">Email</label>
          <input class="form-control mb-4" type="email" placeholder="john@email.com">
          <label class="form-label" for="">Password</label>
          <div class="position-relative">
            <input class="form-control" type="email" placeholder="Enter password">
            <button class="btn p-0 border-0 position-absolute top-50 end-0 me-4 translate-middle-y">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.25 9.15C18.94 5.52 15.56 3.43 12 3.43C10.22 3.43 8.49 3.95 6.91 4.92C5.33 5.9 3.91 7.33 2.75 9.15C1.75 10.72 1.75 13.27 2.75 14.84C5.06 18.48 8.44 20.56 12 20.56C13.78 20.56 15.51 20.04 17.09 19.07C18.67 18.09 20.09 16.66 21.25 14.84C22.25 13.28 22.25 10.72 21.25 9.15ZM12 16.04C9.76 16.04 7.96 14.23 7.96 12C7.96 9.77 9.76 7.96 12 7.96C14.24 7.96 16.04 9.77 16.04 12C16.04 14.23 14.24 16.04 12 16.04Z" fill="#A3A3A3"></path>
                <path d="M12.0004 9.14C10.4304 9.14 9.15039 10.42 9.15039 12C9.15039 13.57 10.4304 14.85 12.0004 14.85C13.5704 14.85 14.8604 13.57 14.8604 12C14.8604 10.43 13.5704 9.14 12.0004 9.14Z" fill="#A3A3A3"></path>
              </svg>
            </button>
          </div>
          <div class="mt-3 mb-8 text-end"><a class="d-inline-block small fw-semibold p-0" href="#">Forgot Password?</a></div>
          <button class="btn mb-4 py-3 lh-lg w-100 btn-primary border-primary-dark">Login</button>

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <div class="container">
    <div class="mw-lg mw-lg-6xl mx-auto">
      <div class="row align-items-center">
        <div class="col-12 col-lg-6 col-xl-7 order-last order-lg-first">
          <img class="img-fluid" src="solstice-assets/images/newsletter/illustration-circle-secondary.png" alt="">
        </div>
        <div class="col-12 col-lg-6 col-xl-5 mb-12 mb-lg-0">
          <div class="mw-sm mx-auto me-lg-0">
            <span class="badge mb-4 d-inline-flex align-items-center bg-primary-light text-primary border border-info">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.62293 3.37707C8.567 3.32115 8.50813 3.21714 8.50077 3.02581C8.62835 3.19081 8.77541 3.3237 8.91729 3.42581C8.95382 3.45211 8.99065 3.47685 9.02752 3.5H9.015C8.79742 3.5 8.68271 3.43685 8.62293 3.37707ZM10.485 3.5H10.469C10.508 3.47551 10.547 3.44928 10.5856 3.42134C10.7259 3.31979 10.8723 3.18774 10.9993 3.02426C10.9922 3.21658 10.9331 3.321 10.8771 3.37707C10.8173 3.43685 10.7026 3.5 10.485 3.5Z" fill="#FF7100" stroke="#FF7100"></path>
                <path d="M9.015 4.75C8.04 4.75 7.25 3.96 7.25 2.985V1.5C7.25 1.225 7.025 1 6.75 1H3.5C2.12 1 1 2.115 1 3.49V6.975C1 8.355 2.12 9.475 3.5 9.475H4.25C4.39 9.475 4.57 9.565 4.65 9.675L5.4 10.67C5.73 11.11 6.27 11.11 6.6 10.67L7.35 9.675C7.445 9.55 7.595 9.475 7.75 9.475H8.505C9.885 9.475 11 8.36 11 6.98V5.25C11 4.975 10.775 4.75 10.5 4.75H9.015ZM4 6C3.72 6 3.5 5.775 3.5 5.5C3.5 5.225 3.72 5 4 5C4.275 5 4.5 5.225 4.5 5.5C4.5 5.775 4.28 6 4 6ZM6 6C5.72 6 5.5 5.775 5.5 5.5C5.5 5.225 5.72 5 6 5C6.275 5 6.5 5.225 6.5 5.5C6.5 5.775 6.28 6 6 6Z" fill="#FF7100"></path>
              </svg>
              <span class="ms-1">Newsletter</span>
            </span>
            <h3 class="font-heading text-white mb-6">Subscribe</h3>
            <p class="text-secondary-light mb-10">Fuel your curiosity by joining a vibrant community of learners.</p>
            <form action="">
              <input class="form-control mb-4 border-info" type="email" placeholder="Email address">
              <button class="btn py-4 w-100 btn-primary border-primary-dark">
                <span class="me-2">Subscribe</span>
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4.99996 10H15.4166M15.4166 10L10.4166 5M15.4166 10L10.4166 15" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="py-12 py-md-16 py-lg-24 bg-secondary overflow-hidden">
  <div class="container mb-24">
    <div class="mw-2xl mx-auto text-center">
      <h3 class="font-heading text-white mb-0">For those seeking an enjoyable way to learn</h3>
    </div>
  </div>
  <div class="d-flex mb-14 justify-content-center">
    <div class="flex-shrink-0 h-full w-100 mw-sm mx-4 p-8 bg-white border border-light rounded-3 shadow">
      <div class="d-flex mb-20 align-items-center">
        <img class="img-fluid pt-1 bg-primary-light rounded" src="solstice-assets/images/testimonials/man-avatar1.png" alt="">
        <div class="ms-4 p-2 bg-light-light bg-opacity-50 rounded-1">
          <span class="fw-bold">Steven Klein,</span>
          <span class="text-light-dark">Student</span>
        </div>
      </div>
      <div>
        <p class="fs-5 text-dark-light mb-0">“I've been more productive with Solstice and my academic performance is getting better every semester.”</p>
      </div>
    </div>
    <div class="flex-shrink-0 h-full w-100 mw-sm mx-4 p-8 bg-white border border-light rounded-3 shadow">
      <div class="d-flex mb-20 align-items-center">
        <img class="img-fluid pt-1 bg-primary-light rounded" src="solstice-assets/images/testimonials/woman-avatar2.png" alt="">
        <div class="ms-4 p-2 bg-light-light bg-opacity-50 rounded-1">
          <span class="fw-bold">Hanna Stanton,</span>

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <div class="container">
    <div class="mw-lg mw-lg-6xl mx-auto">
      <div class="row">
        <div class="col-12 col-lg-5 col-xl-6 mb-12 mb-lg-0">
          <div class="mw-sm mw-xl-md d-flex flex-column align-items-start h-100">
            <span class="badge mb-6 d-inline-flex align-items-center bg-primary-light text-primary border border-warning">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.5 1.215H3.5C2 1.215 1 2.215 1 3.715V6.715C1 8.215 2 9.215 3.5 9.215H5.5L7.725 10.695C8.055 10.915 8.5 10.68 8.5 10.28V9.215C10 9.215 11 8.215 11 6.715V3.715C11 2.215 10 1.215 8.5 1.215ZM7.75 5.625H4.25C4.045 5.625 3.875 5.455 3.875 5.25C3.875 5.045 4.045 4.875 4.25 4.875H7.75C7.955 4.875 8.125 5.045 8.125 5.25C8.125 5.455 7.955 5.625 7.75 5.625Z" fill="#FF7100"></path>
              </svg>
              <span class="ms-1 lh-base">Contact Support</span>
            </span>
            <h3 class="font-heading text-white mb-4">How can we help you today?</h3>
            <p class="text-secondary-light mb-10">Submit your info and we’ll get back to you as soon as possible.</p>
            <div class="mw-sm mt-auto p-8 bg-info rounded-2">
              <p class="display-3 fw-semibold text-secondary mb-6">Click here to report an incident</p>
              <a class="btn btn-sm d-inline-flex flex-wrap align-items-center btn-light text-secondary bg-white border border-warning-light" href="#">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.9261 14.2967L10.9457 14.2791L10.9633 14.2595C11.0647 14.1468 11.1612 14.0141 11.2308 13.836C11.2923 13.6864 11.3333 13.515 11.3333 13.3334C11.3333 13.1492 11.2911 12.9755 11.2282 12.8244C11.164 12.6704 11.0747 12.531 10.9633 12.4072L10.9457 12.3876L10.9261 12.37C10.8023 12.2586 10.6629 12.1693 10.5089 12.1051C10.1859 11.9705 9.81406 11.9705 9.49099 12.1051C9.33705 12.1693 9.19764 12.2586 9.07381 12.37L9.05425 12.3876L9.03665 12.4072C8.9252 12.531 8.8359 12.6704 8.77175 12.8244C8.70878 12.9755 8.66663 13.1492 8.66663 13.3334C8.66663 13.515 8.70762 13.6864 8.76915 13.836C8.83871 14.0141 8.93524 14.1468 9.03665 14.2595L9.05425 14.2791L9.07381 14.2967C9.19763 14.4081 9.33704 14.4974 9.49099 14.5616C9.64213 14.6245 9.81578 14.6667 9.99996 14.6667C10.1841 14.6667 10.3578 14.6245 10.5089 14.5616C10.6629 14.4974 10.8023 14.4081 10.9261 14.2967ZM2.16663 10C2.16663 5.6845 5.68443 2.16669 9.99996 2.16669C14.3155 2.16669 17.8333 5.6845 17.8333 10C17.8333 14.3155 14.3155 17.8334 9.99996 17.8334C5.68443 17.8334 2.16663 14.3155 2.16663 10ZM9.99996 5.54169C9.38215 5.54169 8.87496 6.04888 8.87496 6.66669V10.8334C8.87496 11.4512 9.38215 11.9584 9.99996 11.9584C10.6178 11.9584 11.125 11.4512 11.125 10.8334V6.66669C11.125 6.04888 10.6178 5.54169 9.99996 5.54169Z" fill="#530031" stroke="#530031"></path>
                </svg>
                <span class="ms-2">Report</span>
              </a>
            </div>
          </div>

<section class="pb-12 pb-md-20 bg-secondary overflow-hidden">
  <div class="container">
    <div class="row mb-n6">
      <div class="d-none d-xl-block col-xl-3 mb-6">
        <div class="rounded-3" style="height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      </div>
      <div class="d-none d-xl-block col-xl-3 mb-6">
        <div class="rounded-3" style="height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      </div>
      <div class="col-6 col-xl-3 mb-6">
        <div class="rounded-3" style="height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      </div>
      <div class="col-6 col-xl-3 mb-6">
        <div class="rounded-3" style="height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      </div>
      <div class="col-6 col-xl-3 order-last order-xl-0 mb-6">
        <div class="bg-white bg-opacity-10 rounded-3" style="height: 340px;"></div>
      </div>
      <div class="col-12 col-xl-6 mb-6">
        <div class="d-flex h-100 align-items-center position-relative" style="min-height: 340px;">
          <div class="position-absolute top-0 h-100 start-0 w-100">
            <div class="row position-relative">
              <div class="position-absolute top-0 py-40 start-0 w-100" style="background: linear-gradient(0deg, rgba(248, 248, 248, 0.00) 0%, #530031 100%);"></div>
              <div class="col-6">

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <div class="container">
    <div class="mw-md mw-md-none mx-auto">
      <div class="row">
        <div class="col-12 col-md-4 mb-10 mb-md-0">
          <div class="pt-10 border-3 border-top border-primary">
            <h4 class="text-white mb-1">101K+</h4>
            <p class="text-secondary-light mb-0">Users studying around the globe</p>
          </div>
        </div>
        <div class="col-12 col-md-4 mb-10 mb-md-0">
          <div class="pt-10 border-3 border-top border-primary">
            <h4 class="text-white mb-1">352K+</h4>
            <p class="text-secondary-light mb-0">Registered Users</p>
          </div>
        </div>
        <div class="col-12 col-md-4 mb-10 mb-md-0">
          <div class="pt-10 border-3 border-top border-primary">
            <h4 class="text-white mb-1">94K+</h4>
            <p class="text-secondary-light mb-0">Registered Users</p>
          </div>
        </div>
      </div>
    </div>

<section class="overflow-hidden">
  <div class="row">
    <div class="col-lg-6">
      <div class="mw-md py-12 py-md-24 py-lg-40 px-5 mx-auto">
        <h4 class="font-heading mb-4">Sign up</h4>
        <p class="mb-8">
          <span class="text-light-dark">Already have an account?</span>
          <a class="d-inline-block text-dark border-0 fw-bold" href="#">Login</a>
        </p>
        <form action="">
          <label class="form-label" for="">Email</label>
          <input class="form-control mb-4" type="email" placeholder="john@email.com">
          <label class="form-label" for="">Password</label>
          <div class="position-relative">
            <input class="form-control mb-8" type="email" placeholder="Enter password">
            <button class="btn p-0 border-0 position-absolute top-50 end-0 me-4 translate-middle-y">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.25 9.15C18.94 5.52 15.56 3.43 12 3.43C10.22 3.43 8.49 3.95 6.91 4.92C5.33 5.9 3.91 7.33 2.75 9.15C1.75 10.72 1.75 13.27 2.75 14.84C5.06 18.48 8.44 20.56 12 20.56C13.78 20.56 15.51 20.04 17.09 19.07C18.67 18.09 20.09 16.66 21.25 14.84C22.25 13.28 22.25 10.72 21.25 9.15ZM12 16.04C9.76 16.04 7.96 14.23 7.96 12C7.96 9.77 9.76 7.96 12 7.96C14.24 7.96 16.04 9.77 16.04 12C16.04 14.23 14.24 16.04 12 16.04Z" fill="#A3A3A3"></path>
                <path d="M12.0004 9.14C10.4304 9.14 9.15039 10.42 9.15039 12C9.15039 13.57 10.4304 14.85 12.0004 14.85C13.5704 14.85 14.8604 13.57 14.8604 12C14.8604 10.43 13.5704 9.14 12.0004 9.14Z" fill="#A3A3A3"></path>
              </svg>
            </button>
          </div>
          <button class="btn mb-4 py-3 lh-lg w-100 btn-primary border-primary-dark">Sign Up</button>
          <a class="btn w-100 d-flex flex-wrap btn-outline-light text-dark" href="#">

<section class="py-12 py-md-16 py-lg-24 bg-secondary overflow-hidden">
  <div class="container mb-10">
    <p class="text-center text-secondary-light mb-0">Backed by leading education companies</p>
  </div>
  <div class="d-flex mb-4 justify-content-start">
    <div class="flex-shrink-0 ms-n12 py-6 px-10 mx-2 bg-secondary-dark bg-opacity-25 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-light1.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-secondary-dark bg-opacity-25 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-light2.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-secondary-dark bg-opacity-25 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-light3.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-secondary-dark bg-opacity-25 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-light4.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-secondary-dark bg-opacity-25 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-light5.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-secondary-dark bg-opacity-25 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-light1.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-secondary-dark bg-opacity-25 rounded-2">

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-6xl mx-auto">
      <div class="text-center mb-12">
        <a class="d-inline-flex align-items-center text-light-dark fw-bold" href="#">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.4167 10H5M5 10L10 5M5 10L10 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="ms-2">Back to Blog</span>
        </a>
      </div>
      <img class="img-fluid d-block mb-12 w-100 rounded-3" src="solstice-assets/images/blog/post-picture.png" alt="">
      <div class="mw-4xl mx-auto text-center mb-12">
        <div>
          <span class="badge mb-4 me-3 text-light-dark fw-medium border">Product</span>
          <span class="badge mb-4 text-light-dark fw-medium border">Development</span>
        </div>
        <h3 class="font-heading">The Art and Science of Design Development: Crafting Digital Experiences</h3>
      </div>
      <div class="d-flex mb-n6 flex-wrap align-items-center justify-content-between">
        <div class="mb-6 pe-10">
          <div class="d-flex align-items-center">
            <img src="solstice-assets/images/blog/avatar1.png" alt="">
            <div class="ms-4">

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <div class="container position-relative">
    <div class="mw-lg mx-auto mw-lg-none mb-20 mb-md-32">
      <div class="row">
        <div class="col-12 col-lg-6 mb-12 mb-lg-0">
          <div class="mw-lg">
            <div class="d-flex mb-14 justify-content-between">
              <span class="badge d-inline-flex align-items-center bg-primary-light text-primary border border-info">
                <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="4" r="3" fill="#FF7100"></circle></svg>
                <span class="ms-1 lh-base">About Us</span>
              </span>
              <span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="5" stroke="#6F0B45" stroke-width="1.25"></circle><circle cx="8" cy="8" r="7.375" stroke="#FFC96D" stroke-width="1.25"></circle><circle cx="8" cy="8" r="3" fill="#FF7100"></circle></svg>
                <span class="ms-3 small fw-semibold text-secondary-light">Meet Solstice</span>
              </span>
            </div>
            <img class="img-fluid d-block rounded-3" src="solstice-assets/images/about/picture-large1.png" alt="">
          </div>
        </div>
        <div class="col-12 col-lg-6">
          <div class="mw-md">
            <h1 class="font-heading mb-10 text-white">On a mission to make learning fun</h1>
            <p class="text-secondary-light mb-0">We are driven to transform the landscape of learning into a captivating journey of excitement and discovery. Our aim is to infuse every educational experience with the essence of joy, making learning an immersive adventure that fuels curiosity and fosters growth.</p>
          </div>

<section class="py-12 py-md-16 py-lg-24 bg-secondary overflow-hidden">
  <div class="container mb-24">
    <div class="mw-sm mw-lg-md mx-auto mb-20 text-center">
      <h3 class="font-heading text-white mb-6">Testimonials from Our Users</h3>
      <p class="text-secondary-light mb-0">See what they have to say about us</p>
    </div>
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row mb-16">
        <div class="col-12 col-lg-4 mb-12 mb-lg-0">
          <div>
            <div class="p-12 mb-8 h-100 bg-white border border-primary rounded-top rounded-end">
              <svg width="30" height="22" viewBox="0 0 30 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.1971 4.75862C10.9375 4.89655 9.11058 5.47127 7.71635 6.48276C6.37019 7.49425 5.57692 8.87356 5.33654 10.6207C5.28846 11.2184 5.28846 11.8621 5.33654 12.5517C5.72115 12 6.20192 11.6092 6.77885 11.3793C7.35577 11.1494 8.05289 11.0345 8.87019 11.0345C10.1683 11.0345 11.2981 11.5172 12.2596 12.4828C13.2212 13.4483 13.7019 14.7126 13.7019 16.2759C13.7019 17.977 13.125 19.3563 11.9712 20.4138C10.8173 21.4713 9.30289 22 7.42788 22C5.07212 22 3.24519 21.1724 1.94712 19.5172C0.649038 17.8161 0 15.5862 0 12.8276C0 9.47126 1.05769 6.57471 3.17308 4.13793C5.33654 1.65517 8.67789 0.275861 13.1971 0V4.75862ZM29.4952 4.75862C27.1875 4.89655 25.3606 5.47127 24.0144 6.48276C22.6683 7.49425 21.875 8.87356 21.6346 10.6207C21.5865 11.0345 21.5625 11.6782 21.5625 12.5517C21.9952 12 22.5 11.6092 23.0769 11.3793C23.6538 11.1494 24.351 11.0345 25.1683 11.0345C26.4663 11.0345 27.5962 11.5172 28.5577 12.4828C29.5192 13.4483 30 14.7126 30 16.2759C30 17.977 29.4231 19.3563 28.2692 20.4138C27.1154 21.4713 25.601 22 23.726 22C21.3221 22 19.4712 21.1724 18.1731 19.5172C16.9231 17.8161 16.2981 15.5862 16.2981 12.8276C16.2981 9.47126 17.3558 6.57471 19.4712 4.13793C21.6346 1.65517 24.976 0.275861 29.4952 0V4.75862Z" fill="#FF7100"></path>
              </svg>
              <h5 class="mt-8 mb-4 display-5 fw-bold">I've been more productive with Solstice</h5>
              <p class="text-dark-light mb-0">“I've been more productive with Solstice and my academic performance is getting better every semester.”</p>
            </div>
            <div class="d-flex align-items-center">
              <img class="img-fluid pt-1 bg-primary-light rounded-pill" src="solstice-assets/images/testimonials/man-avatar1.png" alt="">
              <div class="ms-3">
                <span class="d-block text-white fw-bold">Steven Klein</span>
                <span class="d-block small text-secondary-dark">Student</span>
              </div>
            </div>

<section class="py-12 py-md-16 py-lg-24 bg-secondary overflow-hidden">
  <div class="mb-12 mb-md-24 pb-8 pb-md-16 border-bottom border-secondary-dark">
    <div class="container">
      <div class="mw-5xl mx-auto text-center">
        <span class="badge mb-4 bg-primary-light fw-medium text-primary border border-warning">CAREERS</span>
        <h3 class="font-heading text-white">Careers at Solstice</h3>
      </div>
    </div>
  </div>
  <div class="container mb-24">
    <div class="mw-5xl mx-auto">
      <h4 class="mb-4 text-white">What we’re building</h4>
      <div class="row">
        <div class="col-12 col-lg-6 mb-6 mb-lg-0">
          <div>
            <p class="text-secondary-light mb-0">People are shifting to a new form of collaboration in distributed teams and are wasting too much effort connecting the dots between different work streams to understand the bigger picture. Solstice is building a work hub that gives people a radically simpler way to coordinate work across teams and get context on what’s happening.</p>
          </div>
        </div>
        <div class="col-12 col-lg-6">
          <div>
            <p class="text-secondary-light mb-0">By bringing structure, access, and efficiency to teamwork, Solstice makes it easier for businesses to scale their operations. Backed by Atomico, Salesforce Ventures, and Mosaic, we’re on a mission to unlock the collective potential of teams and would love for you to join us!</p>
          </div>
        </div>
      </div>

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container">
    <div class="mw-6xl mx-auto">
      <h2 class="font-heading mb-6">Blog</h2>
      <p class="fs-5 text-light-dark mb-24">Latest articles and releases</p>
      <a class="d-block mb-20 p-4 bg-white mb-20 border rounded-3" href="#">
        <div class="rounded-3 overflow-hidden">
          <div class="row">
            <div class="position-relative col-12 col-md-6 p-0 rounded-3 overflow-hidden">
              <div class="position-absolute top-0 start-0">
                <svg width="155" height="154" viewBox="0 0 155 154" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M-34 79.9324V153.361C-34 153.714 -33.7141 154 -33.3615 154H17.62C17.9724 154 18.2585 153.714 18.2585 153.361V94.299C18.2585 55.5087 56.5087 17.2585 95.299 17.2585H154.361C154.714 17.2585 155 16.9724 155 16.62V-34.3615C155 -34.7139 154.714 -35 154.361 -35H80.9324C17.4572 -35 -34 16.4572 -34 79.9324Z" fill="#FF7100"></path>
                </svg>
              </div>
              <div class="position-absolute bottom-0 end-0">
                <svg width="154" height="158" viewBox="0 0 154 158" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M189 74.0676V0.638514C189 0.286054 188.714 0 188.361 0H137.38C137.028 0 136.742 0.286054 136.742 0.638514V59.701C136.742 98.4913 98.4914 136.742 59.701 136.742H0.638514C0.286054 136.742 0 137.028 0 137.38V188.361C0 188.714 0.286054 189 0.638514 189H74.0676C137.543 189 189 137.543 189 74.0676Z" fill="#FF7100"></path>
                </svg>
              </div>
              <img class="img-fluid d-block h-100 w-100" src="solstice-assets/images/blog/picture-large.png" alt="">
            </div>
            <div class="col-12 col-md-6">
              <div class="d-flex flex-col h-100 align-items-center">
                <div class="mw-md mx-auto py-8 px-8">

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="p-14 bg-secondary rounded-3">
      <div class="row">
        <div class="col-lg-4 mb-8 mb-lg-0">
          <div class="d-flex flex-column h-100">
            <h3 class="font-heading text-white mb-auto">FAQ</h3>
            <div class="mw-sm mt-12">
              <p class="display-5 fw-bold text-secondary-light mb-0">Still have more questions?</p>
              <p class="display-5 fw-bold text-secondary-light mb-6">Talk to our customer happiness team</p>
              <a class="btn btn-sm btn-primary border-primary-dark" href="#">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.3333 1.66669H6.66666C3.33332 1.66669 1.66666 3.33335 1.66666 6.66669V17.5C1.66666 17.9584 2.04166 18.3334 2.49999 18.3334H13.3333C16.6667 18.3334 18.3333 16.6667 18.3333 13.3334V6.66669C18.3333 3.33335 16.6667 1.66669 13.3333 1.66669ZM11.6667 12.7084H5.83332C5.49166 12.7084 5.20832 12.425 5.20832 12.0834C5.20832 11.7417 5.49166 11.4584 5.83332 11.4584H11.6667C12.0083 11.4584 12.2917 11.7417 12.2917 12.0834C12.2917 12.425 12.0083 12.7084 11.6667 12.7084ZM14.1667 8.54169H5.83332C5.49166 8.54169 5.20832 8.25835 5.20832 7.91669C5.20832 7.57502 5.49166 7.29169 5.83332 7.29169H14.1667C14.5083 7.29169 14.7917 7.57502 14.7917 7.91669C14.7917 8.25835 14.5083 8.54169 14.1667 8.54169Z" fill="currentColor"></path>
                </svg>
                <span class="ms-2">Talk to us</span>
              </a>
            </div>
          </div>
        </div>
        <div class="col-lg-8">
          <div class="mw-3xl mx-auto">
            <div class="mb-3 bg-white rounded-3">
              <button class="btn btn-outline-light p-6 d-flex w-100 justify-content-between align-items-center text-start text-black rounded-3">
                <span class="h5 mb-0 me-6">What is Solstice? What is it for?</span>

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <div class="container position-relative">
    <div class="mw-xl mx-auto mb-24 text-center">
      <h3 class="font-heading text-white mb-4">Join our events</h3>
      <p class="text-secondary-light mb-0">Engage in our events to chat about learning trends and experience our collaborative online learning platform first-hand.</p>
    </div>
    <div class="mw-sm mw-lg-5xl mx-auto">
      <div class="row mb-n8">
        <div class="col-12 col-lg-8 mb-8 mb-lg-16">
          <a class="d-block bg-white border rounded-3 overflow-hidden" href="#">
            <div class="row align-items-center">
              <div class="position-relative col-12 col-lg-6 p-0">
                <div class="position-absolute top-0 start-0">
                  <svg width="154" height="154" viewBox="0 0 154 154" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M-35 79.9324V153.361C-35 153.714 -34.7141 154 -34.3615 154H16.62C16.9724 154 17.2585 153.714 17.2585 153.361V94.299C17.2585 55.5087 55.5087 17.2585 94.299 17.2585H153.361C153.714 17.2585 154 16.9724 154 16.62V-34.3615C154 -34.7139 153.714 -35 153.361 -35H79.9324C16.4572 -35 -35 16.4572 -35 79.9324Z" fill="#FFF2D6"></path>
                  </svg>
                </div>
                <div class="position-absolute bottom-0 end-0">
                  <svg width="152" height="153" viewBox="0 0 152 153" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M189 74.0676V0.638514C189 0.286054 188.714 0 188.361 0H137.38C137.028 0 136.742 0.286054 136.742 0.638514V59.701C136.742 98.4913 98.4914 136.742 59.701 136.742H0.638514C0.286054 136.742 0 137.028 0 137.38V188.361C0 188.714 0.286054 189 0.638514 189H74.0676C137.543 189 189 137.543 189 74.0676Z" fill="#FFF2D6"></path>
                  </svg>
                </div>
                <img class="img-fluid d-block h-100 w-100" src="solstice-assets/images/events/picture1.png" alt="">
              </div>

<section class="py-12 pt-lg-24 bg-secondary">
  <div class="container">
    <div class="row mb-12 mb-md-20 mb-lg-40">
      <div class="col-lg-2 mb-12 mb-lg-0">
        <a class="d-inline-block" href="#">
          <img src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
        </a>
      </div>
      <div class="col-lg-7 mb-16 mb-lg-0">
        <div class="row">
          <div class="col-6 col-sm-4 mb-10 mb-sm-0">
            <h6 class="mb-6 fw-medium text-white">Platform</h6>
            <ul class="list-unstyled mb-0">
              <li class="mb-6"><a class="btn btn-link text-light p-0" href="#">Features</a></li>
              <li class="mb-6"><a class="btn btn-link text-light p-0" href="#">How it works</a></li>
              <li class="mb-6"><a class="btn btn-link text-light p-0" href="#">Pricing</a></li>
              <li class="mb-6"><a class="btn btn-link text-light p-0" href="#">Features</a></li>
              <li><a class="btn btn-link text-light p-0" href="#">Events</a></li>
            </ul>
          </div>
          <div class="col-6 col-sm-4 mb-10 mb-sm-0">
            <h6 class="mb-6 fw-medium text-white">Company</h6>
            <ul class="list-unstyled mb-0">
              <li class="mb-6"><a class="btn btn-link text-light p-0" href="#">About</a></li>

<section class="py-12 py-md-16 py-lg-24 bg-secondary overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <div class="mw-xl mx-auto mb-16 text-center">
        <h1 class="font-heading text-white mb-6">Pricing</h1>
        <p class="fs-5 text-secondary-light mb-10">Simple pricing that fits for everyone for the price of a cup of coffee. Start for free, no credit card required.</p>
        <div class="d-flex flex-column flex-md-row mb-n4 align-items-center justify-content-center">
          <div class="d-flex me-4 mb-4 align-items-center">
            <span class="fw-bold text-white">Monthly</span>
            <div class="d-inline-flex mx-4 bg-primary rounded-pill" style="padding: 1.5px;">
              <button class="btn bg-transparent border-0 p-0" style="width: 20px; height: 20px;"></button>
              <button class="btn bg-white border-0 p-0" style="width: 20px; height: 20px;"></button>
            </div>
            <span class="fw-bold text-white">Annually</span>
          </div>
          <div class="d-inline-block py-1 px-4 mb-4 bg-primary-light rounded-pill">
            <span class="text-primary-dark small">SAVE 15% with annual billing</span>
          </div>
        </div>
      </div>
      <div class="row mb-16 mb-md-24">
        <div class="col-12 col-md-6 mb-8 mb-md-0">
          <div class="mw-lg mx-auto p-10 h-100 bg-white border border-light rounded-3">
            <span class="d-block display-3 fw-bold mb-6">Free</span>

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <div class="container">
    <div class="mw-6xl mx-auto">
      <div class="mw-md mw-lg-xl mx-auto mb-20 text-center">
        <h3 class="font-heading text-white mb-4">How it works</h3>
        <p class="text-secondary-light mb-0">What steps do I need to take to join?</p>
      </div>
      <div class="row">
        <div class="col-4">
          <div class="position-relative pt-12 pb-40 px-10 h-100 bg-primary rounded-3 overflow-hidden">
            <span class="badge mb-6 pe-3 d-inline-flex align-items-centerd bg-secondary text-white lh-base">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.2 1.33331H9.46667C7.33333 1.33331 6 2.66665 6 4.79998V7.49998H8.96L7.58 6.11998C7.48 6.01998 7.43333 5.89331 7.43333 5.76665C7.43333 5.63998 7.48 5.51331 7.58 5.41331C7.77333 5.21998 8.09333 5.21998 8.28667 5.41331L10.52 7.64665C10.7133 7.83998 10.7133 8.15998 10.52 8.35331L8.28667 10.5866C8.09333 10.78 7.77333 10.78 7.58 10.5866C7.38667 10.3933 7.38667 10.0733 7.58 9.87998L8.96 8.49998H6V11.2C6 13.3333 7.33333 14.6666 9.46667 14.6666H11.1933C13.3267 14.6666 14.66 13.3333 14.66 11.2V4.79998C14.6667 2.66665 13.3333 1.33331 11.2 1.33331Z" fill="white"></path>
                <path d="M1.83337 7.5C1.56004 7.5 1.33337 7.72667 1.33337 8C1.33337 8.27333 1.56004 8.5 1.83337 8.5H6.00004V7.5H1.83337Z" fill="white"></path>
              </svg>
              <span class="ms-1">Step I</span>
            </span>
            <h4 class="display-3 fw-bold text-white mb-6">Create Account</h4>
            <p class="text-primary-light">Click "Sign Up," enter your name, email, a secure password, and hit "Create Account."</p>
            <div class="position-absolute bottom-0 end-0 mb-n5 me-4">
              <div class="d-flex justify-content-end gap-4 mb-4">
                <div class="rounded-2 bg-info bg-opacity-10" style="width: 64px; height: 64px;"></div>
                <div class="rounded-2 bg-info bg-opacity-50" style="width: 64px; height: 64px;"></div>
                <div class="rounded-2 bg-info bg-opacity-25" style="width: 64px; height: 64px;"></div>

<div class="position-fixed bottom-0 start-0 bg-secondary" style="z-index: 50;">
  <div class="d-flex flex-wrap align-items-start">
    <div class="container py-16 pt-lg-24">
      <div class="py-12 py-md-6 px-12 px-sm-20 px-md-12 px-lg-6 w-100 bg-white border border-2 border-primary rounded-3 rounded-pill">
        <div class="row align-items-center">
          <div class="col-12 col-md-7 col-lg-6 mb-10 mb-md-0">
            <div class="mw-md d-flex align-items-center">
              <span>
                <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.5 13.6667C15.1945 13.6667 15.785 13.4233 16.2717 12.9367C16.7583 12.45 17.0011 11.86 17 11.1667C17 10.4722 16.7567 9.88166 16.27 9.39499C15.7833 8.90833 15.1933 8.66555 14.5 8.66666C13.8056 8.66666 13.215 8.91 12.7283 9.39666C12.2417 9.88333 11.9989 10.4733 12 11.1667C12 11.8611 12.2433 12.4517 12.73 12.9383C13.2167 13.425 13.8067 13.6678 14.5 13.6667ZM11.1667 22C11.8611 22 12.4517 21.7567 12.9383 21.27C13.425 20.7833 13.6678 20.1933 13.6667 19.5C13.6667 18.8056 13.4233 18.215 12.9367 17.7283C12.45 17.2417 11.86 16.9989 11.1667 17C10.4722 17 9.88168 17.2433 9.39501 17.73C8.90834 18.2167 8.66557 18.8067 8.66668 19.5C8.66668 20.1944 8.91001 20.785 9.39668 21.2717C9.88334 21.7583 10.4733 22.0011 11.1667 22ZM22 23.6667C22.4722 23.6667 22.8683 23.5067 23.1883 23.1867C23.5083 22.8667 23.6678 22.4711 23.6667 22C23.6667 21.5278 23.5067 21.1317 23.1867 20.8117C22.8667 20.4917 22.4711 20.3322 22 20.3333C21.5278 20.3333 21.1317 20.4933 20.8117 20.8133C20.4917 21.1333 20.3322 21.5289 20.3333 22C20.3333 22.4722 20.4933 22.8683 20.8133 23.1883C21.1333 23.5083 21.5289 23.6678 22 23.6667ZM17 33.6667C14.6945 33.6667 12.5278 33.2289 10.5 32.3533C8.47223 31.4778 6.70834 30.2906 5.20834 28.7917C3.70834 27.2917 2.52112 25.5278 1.64668 23.5C0.772233 21.4722 0.334455 19.3056 0.333344 17C0.333344 14.6667 0.833344 12.3889 1.83334 10.1667C2.83334 7.94444 4.22945 6.02777 6.02168 4.41666C7.81168 2.80555 9.93557 1.62499 12.3933 0.874994C14.8511 0.124994 17.5389 0.0555499 20.4567 0.666661C20.2067 1.91666 20.29 3.09055 20.7067 4.18833C21.1233 5.28611 21.7483 6.20944 22.5817 6.95833C23.415 7.70833 24.4011 8.22222 25.54 8.5C26.6789 8.77777 27.8733 8.70833 29.1233 8.29166C28.2622 10.2083 28.415 11.8472 29.5817 13.2083C30.7483 14.5694 32.0822 15.2778 33.5833 15.3333C33.8333 17.8056 33.5695 20.1528 32.7917 22.375C32.0139 24.5972 30.8678 26.5417 29.3533 28.2083C27.84 29.875 26.0206 31.2017 23.895 32.1883C21.7695 33.175 19.4711 33.6678 17 33.6667Z" fill="#282828"></path>
                </svg>
              </span>
              <p class="ms-6 mb-0">By clicking “Accept All Cookies”, you agree to the storing of cookies on your device.</p>
            </div>
          </div>
          <div class="col-12 col-md-5 col-lg-6">
            <div class="row justify-content-end g-4">
              <div class="col-12 col-md-auto">
                <div class="d-inline-block bg-white rounded-pill"><a class="btn btn-sm py-4 btn-outline-light fs-6 text-dark w-100" href="#">Decline</a></div>
              </div>
              <div class="col-12 col-md-auto"><a class="btn btn-sm py-4 btn-primary fs-6 w-100" href="#">Allow</a></div>
            </div>
          </div>
        </div>

<section class="py-12 py-md-16 py-lg-24 position-relative bg-secondary">
  <div class="container">
    <div class="mw-xs mw-md-5xl mx-auto">
      <div class="row">
        <div class="col-12 col-md-6">
          <div class="py-12">
            <div class="d-flex mb-6 align-items-center">
              <svg width="52" height="26" viewBox="0 0 52 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 26C1.99983 22.8482 2.62048 19.7273 3.8265 16.8154C5.03252 13.9035 6.80029 11.2577 9.02887 9.02906C11.2575 6.80042 13.9032 5.0326 16.815 3.82654C19.7268 2.62049 22.8477 1.99983 25.9994 2C39.2544 2 50 12.7446 50 26" stroke="#FFF2D6" stroke-width="3" stroke-miterlimit="10"></path>
                <path d="M7.41928 26.0001C7.41928 21.0564 9.37688 16.3152 12.8614 12.8195C16.346 9.32374 21.072 7.35986 25.9999 7.35986C30.9278 7.35986 35.6539 9.32374 39.1384 12.8195C42.623 16.3152 44.5806 21.0564 44.5806 26.0001" stroke="#FF7100" stroke-width="3" stroke-miterlimit="10"></path>
                <path d="M12.6004 26.0001C12.6004 22.4463 14.0122 19.0381 16.5251 16.5252C19.038 14.0123 22.4462 12.6006 25.9999 12.6006C29.5537 12.6006 32.9619 14.0123 35.4748 16.5252C37.9877 19.0381 39.3994 22.4463 39.3994 26.0001" stroke="#FFC96D" stroke-width="3" stroke-miterlimit="10"></path>
              </svg>
              <span class="d-inline-block ms-4 fs-5 fw-medium text-white">What are you waiting for?</span>
            </div>
            <h3 class="font-heading text-white mb-10">Join now and learn together!</h3>
            <a class="btn btn-primary border-primary-dark" href="#">Sign Up Now</a>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="d-flex flex-column h-100 align-items-end justify-content-between">
            <div class="position-relative d-inline-block mb-10 mb-md-0 px-5 pt-2 bg-primary rounded-2">
              <span class="position-absolute bottom-0 start-0 m-3 badge lh-base bg-white fw-semibold">Sophie</span>
              <img class="img-fluid" src="solstice-assets/images/cta/woman-picture1.png" alt="">
            </div>