Make the benefits clear

Starter example. Replace the sample content and links before publishing. Paste into an HTML page, or adapt the markup and styles to your framework.

          <section class="pp-section" aria-labelledby="section-title">
  <p class="pp-label">A fresh perspective</p>
  <h2 id="section-title">Less busywork. More possibility.</h2>
  <p>Make something that feels like you. Start with a strong foundation and make it your own.</p>
  <div class="pp-columns"><article><h3>Find your focus</h3><p>Make space for the work that matters.</p></article><article><h3>Keep it simple</h3><p>Build a process that works for you.</p></article><article><h3>Move forward</h3><p>Turn your next idea into something real.</p></article></div>
</section>
<style>
.pp-section{background:#EFF6FE;color:#0F1521;padding:clamp(2rem,8vw,6rem);font:1rem/1.6 system-ui,sans-serif;border-radius:1.5rem}.pp-section h2{font-size:clamp(2rem,5vw,4rem);line-height:1.05;letter-spacing:-.05em;max-width:16ch;margin:1rem 0}.pp-section p{max-width:52ch}.pp-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.pp-action{display:inline-block;background:#0F1521;color:#fff;border-radius:5rem;padding:1rem 1.5rem;margin-top:1.5rem;text-decoration:none}.pp-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem;margin-top:2rem}.pp-columns article{padding:1.5rem;background:#fff;color:#0F1521;border-radius:1rem}.pp-section details{padding:1rem 0;border-bottom:.0625rem solid currentColor}.pp-section summary{cursor:pointer}
</style>