<% content_for :title, "GrowKit | List livestock, find nearby buyers" %>
<% content_for :description, "GrowKit is the Android app for farmers and rural sellers in India. List cows, buffalo, goats, and other livestock, and talk to buyers nearby. Free to use." %>

<section class="hero">
  <img class="hero-icon" src="/brand/growkit-icon.png" alt="" width="148" height="148">
  <div class="hero-copy">
    <p class="kicker">Android app · India</p>
    <h1>List your livestock.<br>Find buyers nearby.</h1>
    <p class="lead">A village marketplace for farmers and rural sellers—photos, location, interests, offers, and an honest “sold” mark when the deal is done.</p>
    <div class="hero-actions">
      <a class="btn btn-primary" href="/about-growkit">Learn about GrowKit</a>
      <a class="btn btn-ghost" href="/privacy-policy">Privacy Policy</a>
    </div>
  </div>
</section>

<div class="grid">
  <div class="card">
    <h2>Mall</h2>
      <p>List animals with photos and price. Browse nearby, boost, share, and mark sold.</p>
  </div>
  <div class="card">
    <h2>Farm Doctor</h2>
    <p>Find active veterinarians and request a visit from the app when doctors are available in your area.</p>
  </div>
  <div class="card">
    <h2>Mandi &amp; weather</h2>
    <p>Crop prices and alerts tied to your saved location—so you see what matters in your mandi.</p>
  </div>
</div>

<section class="panel">
  <p class="section-kicker">Listing lifecycle</p>
  <h2>One animal, from your phone to sold</h2>
  <p>Every listing follows the same path. Sign in, list your animal, and talk to buyers nearby. It is free to use.</p>
  <div class="orbit">
    <div class="orbit-ring" aria-hidden="true"></div>
    <div class="orbit-core">
      <img src="/brand/growkit-icon.png" alt="" width="52" height="52">
      <div class="orbit-readout">
        <p class="orbit-caption" style="--i: 0">OTP on your number. That is the account.</p>
        <p class="orbit-caption" style="--i: 1">Photo, village, and price. Live in Mall.</p>
        <p class="orbit-caption" style="--i: 2">Nearby buyers see it. Boost or share.</p>
        <p class="orbit-caption" style="--i: 3">A buyer marks interest before a call.</p>
        <p class="orbit-caption" style="--i: 4">You talk. The deal stays between you.</p>
        <p class="orbit-caption" style="--i: 5">Mark it sold. The feed stays honest.</p>
      </div>
    </div>
    <ol class="orbit-steps">
      <li style="--i: 0"><span>1</span><strong>Sign in</strong><em>You</em></li>
      <li style="--i: 1"><span>2</span><strong>List</strong><em>You</em></li>
      <li style="--i: 2"><span>3</span><strong>See it</strong><em>Buyers</em></li>
      <li style="--i: 3"><span>4</span><strong>Interest</strong><em>A buyer</em></li>
      <li style="--i: 4"><span>5</span><strong>Offer</strong><em>Both</em></li>
      <li style="--i: 5"><span>6</span><strong>Sold</strong><em>You</em></li>
    </ol>
  </div>
</section>

<section class="panel">
  <p class="section-kicker">In the app</p>
  <h2>What GrowKit is for</h2>
  <div class="info-grid">
    <article class="info-card">
      <span class="info-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M4 7h16v12H4z" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M8 7V5h8v2M8 12h8M8 15h5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
      </span>
      <h3>Mall</h3>
      <p>The village feed for livestock. Browse nearby, boost a post, share it, or mark it sold.</p>
    </article>
    <article class="info-card">
      <span class="info-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M12 4a4 4 0 0 1 4 4v1h2v11H6V9h2V8a4 4 0 0 1 4-4z" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M12 13v4M10 15h4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
      </span>
      <h3>Farm Doctor</h3>
      <p>Find a veterinarian in your area and request a visit when a doctor is available.</p>
    </article>
    <article class="info-card">
      <span class="info-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M12 4v3M8 8a4 4 0 1 0 8 0" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M5 20c1.5-3 4-4.5 7-4.5S17.5 17 19 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
      </span>
      <h3>Mandi &amp; weather</h3>
      <p>Crop prices and weather alerts for the village you saved, so you see your own mandi.</p>
    </article>
    <article class="info-card">
      <span class="info-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M8.5 12.5l2.2 2.2 4.8-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
      <h3>Free to use</h3>
      <p>Sign in, list, browse, show interest, offer, call, and mark sold. No charge on this path.</p>
    </article>
  </div>
</section>

<section class="panel">
  <p class="section-kicker">Trust</p>
  <h2>Real numbers, public listings</h2>
  <div class="info-grid trust-grid">
    <article class="info-card">
      <span class="info-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24"><rect x="8" y="3" width="8" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M11 18h2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
      </span>
      <h3>Your number</h3>
      <p>Every account starts from a mobile number the person controls.</p>
    </article>
    <article class="info-card">
      <span class="info-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M8 15l2.2-2.5 1.8 1.6L16 10" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
      <h3>What you post</h3>
      <p>Listings show the village, photos, and price the seller wrote.</p>
    </article>
    <article class="info-card">
      <span class="info-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M12 3l7 3v6c0 4.2-2.8 7.2-7 9-4.2-1.8-7-4.8-7-9V6z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
      </span>
      <h3>Report or block</h3>
      <p>If a post looks wrong, report it or block that person. The deal stays between buyer and seller.</p>
    </article>
  </div>
</section>
