solutions.html

---
layout: layout
title: Solutions
---

<main class="container mx-auto px-8">

<div class="mt-8 md:mt-24 md:text-center">
  <h2 class="text-3xl md:text-5xl font-bold">See what we've been working on</h2>
  <p class="mt-6 text-xl leading-8 text-gray-600">Learn more about the crops we've worked on and how we can help you.</p>
</div>

<div class="mt-16">
  {% assign sorted = site.solutions | sort: 'date' | reverse  %}
  {% for solution in sorted %}
  {% if solution.title %}
    <div class="py-8 lg:border-t">
      <div class="lg:flex">
        <div class="lg:basis-56">
          <a href="{{ solution.url }}">
            <img class="w-full h-56 object-cover rounded-3xl" src="{{ solution.image }}" />
          </a>
        </div>
        <div class="flex-1 px-8 py-4">
          <a href="{{ solution.url }}">
            <h3 class="text-2xl font-bold text-gray-900">{{ solution.title }}</h3>
            <p class="mt-2 text-base leading-7 text-gray-600 line-clamp">{{ solution.excerpt | strip_html }}</p>
          </a>
          <a class="block mt-2 underline text-skysense" href="{{ solution.url }}">Learn More</a>
        </div>
      </div>
    </div>
  {% endif %}
  {% endfor %}
</div>

<div class="mt-16 rounded-3xl p-8 md:p-12 bg-skysense/20 text-center">
  <h3 class="text-2xl">Learn more about how Skysense can help you</h3>
  <div class="mt-6">
    <a class="rounded-full bg-skysense text-white px-6 py-3" href="javascript:window.Beacon('open')">Talk to sales</a>
  </div>
</div>

</main>