<template>
  <div class="p-5 mb-4 bg-light rounded-3 shadow-sm">
    <div class="container-fluid py-5">
      <h1 class="display-5 fw-bold">Vítejte v aplikaci Produkty!</h1>
      <p class="col-md-8 fs-4">
        Toto je jednoduchá ukázková aplikace postavená na Vue.js 3, která demonstruje
        použití Vue Routeru pro navigaci mezi stránkami a Axiosu pro načítání
        dat z externího API (dummyjson.com).
      </p>
      <router-link class="btn btn-primary btn-lg" to="/products">
        Zobrazit produkty
      </router-link>
    </div>
  </div>

  <div class="row align-items-md-stretch">
      <div class="col-md-6 mb-3">
        <div class="h-100 p-5 text-white bg-dark rounded-3 shadow">
          <h2>Vue Router</h2>
          <p>Procházejte mezi stránkami "Domů", "Produkty" a detailem jednotlivých produktů pomocí navigační lišty výše. Vue Router se stará o plynulé přechody bez nutnosti znovunačítání celé stránky.</p>
        </div>
      </div>
      <div class="col-md-6 mb-3">
        <div class="h-100 p-5 bg-body-secondary border rounded-3 shadow">
          <h2>Axios & API</h2>
          <p>Na stránce "Produkty" uvidíte seznam produktů načtených asynchronně pomocí knihovny Axios z veřejného API. Kliknutím na produkt zobrazíte jeho detailní informace, které se také načítají dynamicky.</p>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'HomePage',
};
</script>

<style scoped>
/* Styly specifické pouze pro tuto komponentu */
.display-5 {
    color: #333;
}
</style>
