<%- include('../layouts/top') %>

<%- include('../components/page-hero', {
  heroTitle: 'A Mumbai transport company you can depend on',
  heroLead: 'A young company in an old industry, providing technology-led, innovative solutions so that every movement is safe, right and on time.',
  heroEyebrow: 'About HK Logistics',
  heroImage: 'expressway-tunnel-maharashtra'
}) %>

<section class="section" aria-labelledby="who-title">
  <div class="container split">
    <div class="reveal">
      <p class="eyebrow">Who we are</p>
      <h2 id="who-title">Solutions for domestic freight movements</h2>
      <p class="lead">HK Logistics is a family-run enterprise led by Managing Director Hiral Mehta, offering customised and personalised transportation services across India.</p>
      <p>We describe ourselves as a young company in an old industry, and we mean it as a statement of intent. The freight business runs on relationships and vehicles; we add process, technology and a genuinely responsive service on top of both.</p>
      <p>We serve all industrial sectors, with particular depth in FMCG, chemicals and ODC projects, and we offer solutions for customers with multimodal logistics requirements. Our long-standing tie-ups with fleet owners in cities across India, and our continuing investment in IT, keep our solutions current and convenient for clients.</p>
      <p>Headquartered in Mumbai, HK Logistics operates across the country through branches and agents, with an operating hub at Vapi.</p>
    </div>
    <div class="reveal">
      <div class="media-frame">
        <%- img('goods-truck-mumbai-street', { alt: 'Goods truck on a city road in Mumbai', sizes: '(min-width: 960px) 50vw, 100vw' }) %>
      </div>
    </div>
  </div>
</section>

<section class="section section--tight section--alt" aria-label="Company at a glance">
  <div class="container">
    <div class="facts">
      <div class="fact"><span>Headquarters</span><strong>Mumbai, Maharashtra</strong><small>Corporate office</small></div>
      <div class="fact"><span>Speciality</span><strong>ODC &amp; project cargo</strong><small>Over-dimensional and plant movements</small></div>
      <div class="fact"><span>Operating hub</span><strong>Vapi, Gujarat</strong><small>Rail-cum-road on the Vapi – Guwahati route</small></div>
      <div class="fact"><span>Industries</span><strong>Chemicals, FMCG, projects</strong><small>And industrial sectors generally</small></div>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="mission-title">
  <div class="container grid grid--2">
    <div class="card reveal">
      <span class="icon-tile"><%- icon('target') %></span>
      <p class="eyebrow">Our mission</p>
      <h2 id="mission-title" class="h3"><%= content.mission.statement %></h2>
      <ul class="check-list mb-0">
        <% content.mission.points.forEach(function (p) { %><li><%- icon('check') %><%= p %></li><% }) %>
      </ul>
    </div>
    <div class="card reveal">
      <span class="icon-tile"><%- icon('route') %></span>
      <p class="eyebrow">Our vision</p>
      <h2 class="h3">Where we are heading</h2>
      <ul class="check-list mb-0">
        <% content.vision.forEach(function (p) { %><li><%- icon('check') %><%= p %></li><% }) %>
      </ul>
    </div>
  </div>
</section>

<section class="section section--alt" aria-labelledby="leadership-title">
  <div class="container">
    <div class="section-head">
      <p class="eyebrow">Leadership</p>
      <h2 id="leadership-title">The people behind the operation</h2>
    </div>
    <div class="grid grid--2">
      <% site.leadership.forEach(function (p) { %>
        <div class="card person reveal">
          <span class="person__avatar" aria-hidden="true"><%= p.initials %></span>
          <div>
            <h3><%= p.name %></h3>
            <p class="person__role"><%= p.role %></p>
            <p><%= p.bio %></p>
          </div>
        </div>
      <% }) %>
      <div class="card reveal">
        <h3>Functional departments</h3>
        <ul class="check-list check-list--2 mb-0">
          <% content.departments.forEach(function (d) { %><li><%- icon('check') %><%= d %></li><% }) %>
        </ul>
      </div>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="safety-title">
  <div class="container">
    <div class="section-head">
      <p class="eyebrow">Safety</p>
      <h2 id="safety-title">Safety is a procedure, not a promise</h2>
      <p>Driver training and loading discipline are written into our standard operating procedure and applied on every movement, particularly on chemical and ODC work.</p>
    </div>
    <div class="grid grid--2">
      <div class="card reveal">
        <span class="icon-tile"><%- icon('users') %></span>
        <h3>Training for drivers &amp; staff</h3>
        <ul class="check-list mb-0">
          <% content.safetyTraining.forEach(function (t) { %><li><%- icon('check') %><%= t %></li><% }) %>
        </ul>
      </div>
      <div class="card reveal">
        <span class="icon-tile"><%- icon('clipboard') %></span>
        <h3>Loading &amp; unloading checks</h3>
        <ul class="check-list mb-0">
          <% content.loadingChecks.forEach(function (t) { %><li><%- icon('check') %><%= t %></li><% }) %>
        </ul>
      </div>
    </div>
  </div>
</section>

<section class="section section--alt" aria-labelledby="proposal-title">
  <div class="container">
    <div class="section-head section-head--center">
      <p class="eyebrow">Our service proposal</p>
      <h2 id="proposal-title">How we work with customers</h2>
    </div>
    <div class="grid grid--3">
      <% content.whyChoose.forEach(function (w) { %>
        <div class="card reveal">
          <span class="icon-tile icon-tile--soft"><%- icon(w.icon) %></span>
          <h3><%= w.title %></h3>
          <p><%= w.text %></p>
        </div>
      <% }) %>
    </div>
  </div>
</section>

<%- include('../components/cta-band') %>

<%- include('../layouts/bottom') %>
