404 Page

{% layout none %}

{% assign product = collections.frontpage.products.first %}

<style>
  .product {
    @apply flex flex-col items-center py-8;
  }

  .product__image {
    @apply w-1/2 p-4;
  }

  .product__info {
    @apply w-1/2 p-4;
  }

  .product__title {
    @apply text-3xl font-bold mb-4;
  }

  .product__price {
    @apply text-2xl font-bold mb-4;
  }

  .product__description {
    @apply text-lg mb-4;
  }

  .product__buy {
    @apply bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded-full;
  }
</style>

<div class="product">
  <div class="product__image">
    <img src="{{ product.images.first | img_url: 'medium' }}" alt="{{ product.title }}">
  </div>
  <div class="product__info">
    <h1 class="product__title">{{ product.title }}</h1>
    <p class="product__price">{{ product.price | money }}</p>
    <p class="product__description">{{ product.description }}</p>
    <a href="{{ product.url }}" class="product__buy">Buy now</a>
  </div>
</div>