public-web/layouts/partials/section-fundraising-intro.html

<div class="hero bg-gradient-to-b from-gray-500/10 to-transparent">
  {{ partial "header.html" . }}

  <section class="container mx-auto px-6 py-6 min-h-[min(90vh,30rem)] grid place-items-center">
    <div class="flex justify-center items-center mx-auto max-md:flex-wrap-reverse">
      <img src="/images/fundraising-star.webp" class="aspect-auto h-[20rem] invert-colors max-xl:h-[15rem] max-sm:mb-3"/>
      <div class="max-md:text-center max-md:mb-4 max-w-[50ch]">
        <p style="font-size: clamp(1.25rem, 4vw, 1.5rem); line-height: 1.1">Provozujeme nástroje pro komunikaci a sdílení</p>
        <br />
        <p style="font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.1"><strong>Bez reklam, bez dohledu, pro všechny</strong></p>
        <br />
        <p style="font-size: clamp(1.25rem, 4vw, 1.5rem); line-height: 1.1">Teď potřebujeme vaší podporu</p>
      </div>
    </div>
    <div class="flex justify-center max-md:flex-wrap gap-3">
      <a href="https://www.darujme.cz/darovat/1210545?amount=1500&paymentMethod=proxypay_charge" class="button button--primary button-fundraiser-shadow my-2 md:mr-3">Přispějte přes Darujme</a>
      <a href="/2025/sdilej" class="button button--secondary button-fundraiser-shadow my-2">Sdílejte naši kampaň dál</a>
    </div>
  </section>
</div>

<section class="container px-6 mx-auto grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 text-balance mb-5">

	<section class="card md:col-span-2 px-6 md:px-8 py-8 flex flex-col justify-center">
	    <header class="mb-8">
	      <h2 class="text-lg font-bold">Jak nás můžete podpořit?</h2>
	    </header>
	    <ul class="grid gap-x-6 gap-y-4" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))">


	        <li class="grid gap-x-4" style="grid-template-columns: auto 1fr; grid-template-rows: auto 1fr;">
	          <span class="col-start-1 w-8 h-8 bg-white text-gray-900 grid place-content-center font-bold rounded-full">
	            1
	          </span>
	          <h3 class="col-start-2 self-center font-bold">
	            Přispějte
	          </h3>
	          <div class="col-start-2 prose text-sm">
	            <p>Služby poskytujeme zdarma, náklady na technický provoz jsou však zhruba 15 000 Kč měsíčně. Aby mohly být nadále dostupné, <a href="https://www.darujme.cz/darovat/1210545?amount=1500&paymentMethod=proxypay_charge">potřebujeme na rok 2025 zajistit částku ve výši 180 000 Kč</a>.</p>

	          </div>
	        </li>

	        <li class="grid gap-x-4" style="grid-template-columns: auto 1fr; grid-template-rows: auto 1fr;">
	          <span class="col-start-1 w-8 h-8 bg-white text-gray-900 grid place-content-center font-bold rounded-full">
	            2
	          </span>
	          <h3 class="col-start-2 self-center font-bold">
	            Sdílejte naši kampaň
	          </h3>
	          <div class="col-start-2 prose text-sm">
	            <p>Na sociálních sítích nemáme velký dosah. Hodně nám proto pomůže když budete sdílet některou z <a href="/2025/sdilej" >našich povedených grafik</a> na svých sociálních sítích, s odkazem na tuto stránku.</p>

	          </div>
	        </li>


	    </ul>
	  </section>


	  <section class="card px-8 py-8">
    <div class="max-w-[60ch]">
      <header class="mb-6">
        <div class="max-w-8 mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2.24283 6.85435L11.4895 1.3086C11.8062 1.11865 12.2019 1.11872 12.5185 1.30878L21.7573 6.85433C21.9079 6.9447 22 7.10743 22 7.28303V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V7.28315C2 7.10748 2.09218 6.94471 2.24283 6.85435ZM4 8.13261V19H20V8.13214L12.0037 3.33237L4 8.13261ZM12.0597 13.6983L17.3556 9.23532L18.6444 10.7647L12.074 16.3017L5.36401 10.7717L6.63599 9.2283L12.0597 13.6983Z"></path></svg>
        </div>
        <h2 class="text-md font-bold leading-tight mb-1">Odebírejte náš newsletter</h2>
        <p class="text-sm">Obecné informace o novinkách v NoLogu. Neposíláme časteji než čtyřikrát ročně.</p>
      </header>
      <form method="post" action="https://newsletter.nolog.cz/subscription/form" class="listmonk-form">
        <input type="hidden" name="nonce">
        <input id="f9429" type="hidden" name="l" value="f942970d-1da9-4cc7-82c6-b2056edb57de">
        <label class="block text-xs mb-2">
          E-mail
        </label>
        <div class="flex input-group text-sm">
          <input type="email" name="email" required="" placeholder="E-mail" class="input w-full max-w-[30ch] text-sm min-w-0">
          <button class="button button--primary">Odebírat</button>
        </div>
      </form>
    </div>
  </section>

</section>