home.njk

{% extends "index.njk" %}

{% block head %}
  {% include "el/opengraph.njk" %}
{% endblock %}

{% block content %}
<main class="container mx-auto mb-4">
  <div class="px-2 grid grid-gap-2 grid-template-row-auto grid-template-col-full md:grid-2 xl:grid-4">
  {% for post in latest %}
  {% if post.type === 'quote' %}
    <article>
      <figure class="relative mb-2">
        <img loading="lazy"
          class="rounded-md object-cover w-full"
          src="{{ post.thumbnailUrl }}"
          alt="{{ post.author }}"
        />
        <blockquote class="absolute right-0 bottom-0 text-orange-800 bg-orange-200 p-2">
          {{ post.quote }} – {{ post.author }}
        </blockquote>
      </figure>
    </article>
  {% else %}
    <article>
      <figure class="mb-2">
        <img loading="lazy"
          class="rounded-md object-cover h-32 w-full"
          src="{{ post.thumbnailUrl }}"
          alt=""
        />
      </figure>
      <a href="{{ post.fullUrl }}">
        <h2 class="text-xl my-2 text-pink-600 font-700">
          {{ post.title }}
        </h2>
      </a>
      <div class="mb-2 text-gray-700 text-sm">
        {{ post.excerpt}}
      </div>
      <p class="text-gray-600 text-xs mb-2"><a href="#">@{{ post.author }}</a> | {{ post.date }}</p>
    </article>
  {% endif %}

  {% if loop.index === 3 %}
    <article class="xl:row-span-2">
      <div class="bg-gray-400 h-full px-4 mb-2 rounded-md text-gray-700">
        <div class="flex mb-4 items-end">
          <span class="ml-auto text-sm bg-pink-700 text-white px-2 py-half">
            Ebook miễn phí
          </span>
        </div>
        <h2 class="text-2xl mb-2">React từ A tới Y</h2>
        <figure class="p-1 bg-white mb-4">
          <img loading="lazy" src="https://res.cloudinary.com/duqeezi8j/image/upload/v1515693014/react_ywwrxy.png" alt="" />
        </figure>
        <div class="mb-4">
          <p class="mb-2 text-sm flex">
            <img loading="lazy"
              class="w-4 mr-2"
              src="/assets/emoji/1f1fb-1f1f3.svg"
              alt="VN"
            />
            <span>100% tiếng Việt</span>
          </p>
          <p class="mb-2 text-sm flex">
            <img loading="lazy"
              class="w-4 mr-2"
              src="/assets/emoji/2728.svg"
              alt=""
            />
            <span>React 16 mới keng xà beng</span>
          </p>
          <p class="mb-2 text-sm flex">
            <img loading="lazy"
              class="w-4 mr-2"
              src="/assets/emoji/1f916.svg"
              alt=""
            />
            <span>Đầy đủ khái niệm cơ bản/nâng cao</span>
          </p>
          <p class="mb-2 text-sm flex">
            <img loading="lazy"
              class="w-4 mr-2"
              src="/assets/emoji/1f917.svg"
              alt=""
            />
            <span>Hướng dẫn chi tiết, siêu dễ hiểu </span>
          </p>
          <p class="mb-2 text-sm flex">
            <img loading="lazy"
              class="w-4 mr-2"
              src="/assets/emoji/2692.svg"
              alt=""
            />
            <span>Xây dựng ứng dụng thực tế</span>
          </p>
        </div>
        <p class="mb-4 text-sm">
          Hãy để lại email và Ehkoo sẽ thông báo cho bạn khi quyển sách này hoàn thành.
        </p>

        {% include "forms/react-a-y.njk" %}
      </div>
    </article>
  {% endif %}

  {% if loop.index === 6 %}
    <article class="xl:col-span-2 bg-gray-400 flex flex-col justify-center rounded-md">
      <div class="p-4">
        <h2 class="text-2xl mb-4">Đăng ký bản tin</h2>
        <p class="mb-2">
          Quá lười để vào Ehkoo mỗi ngày? Không sao hết, Ehkoo sẽ gửi bài cho bạn mỗi tuần.
        </p>
        {% include "forms/newsletter.njk" %}
        <p>Đảm bảo chất lượng, hứa không bao giờ spam.</p>
      </div>
    </article>
    <article>
      <a href="https://chat.webuild.community/" target="_blank" rel="noopener noreferrer" class="flex flex-col items-center justify-center bg-yellow-400 rounded-md p-4 h-full">
        <div class="mb-3 p-2 block" style="width: 176px">
          <img loading="lazy"
            src="/assets/img/brainstorm.svg"
            alt="Discussion"
            class="w-full">
        </div>
        <p class="text-center">
          Chat chit linh tinh về lập trình tại Slack WeBuild
        </p>
      </a>
    </article>
    <article>
      <a rel="noopener noreferrer" target="_blank" href="{{ social.facebook }}" class="flex flex-col items-center justify-center p-4 h-full bg-blue-700 rounded-md text-white">
        <p class="mb-4 w-32 h-32 bg-white rounded-full flex items-center justify-center">
          <img loading="lazy"
            src="/assets/img/like.svg"
            alt="Like us on Facebook"
            class="box-social__fig">
        </p>
        <p class="text-center">Tặng một like thể hiện tình cảm nha!</p>
      </a>
    </article>
  {% endif %}
  {% endfor %}
  </div>
</main>
{% endblock %}