Newsletter Section

<div class="py-12 px-6">
   <div class="max-w-md m-auto">
      <h2 class="ff-s fs-xxl fw-600 tc-slate-10 mb-2">Stay in the loop</h2>
      <p class="fs-sm tc-silver-10 mb-6 m-0">Get the latest updates and news delivered to your inbox.</p>
      <div class="d-f g-2">
         <input type="email" placeholder="you@example.com" class="f-1 b-1 bc-silver-4 tc-black px-3 py-2 rad-0 fs-md f:oc-silver-1 f:os-s f:ow-2" />
         <button class="ai-c d-f jc-c px-4 py-2 rad-0 fs-sm fw-500 bg-slate-8 tc-white h:bg-slate-10 f:oc-silver-1 f:os-s f:ow-2">Subscribe</button>
      </div>
   </div>
</div>

<div class="py-12 px-6 ta-c">
   <div class="max-w-md m-auto">
      <div class="d-f jc-c mb-4">
         <div class="d-f ai-c jc-c d-12 rad-9 bg-slate-8 tc-white">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
         </div>
      </div>
      <h2 class="ff-s fs-xxl fw-600 tc-slate-10 mb-2">Subscribe to our newsletter</h2>
      <p class="fs-sm tc-silver-10 mb-6 m-0">Join thousands of subscribers and get weekly insights.</p>
      <div class="d-f g-2">
         <input type="email" placeholder="you@example.com" class="f-1 b-1 bc-silver-4 tc-black px-3 py-2 rad-0 fs-md f:oc-silver-1 f:os-s f:ow-2" />
         <button class="ai-c d-f jc-c px-4 py-2 rad-0 fs-sm fw-500 bg-slate-8 tc-white h:bg-slate-10 f:oc-silver-4 f:os-s f:ow-2">Subscribe</button>
      </div>
      <p class="fs-xs tc-silver-8 mt-3 m-0">We respect your privacy. Unsubscribe at any time.</p>
   </div>
</div>