<section class="hero">
<h1><?= trad('Mondialisa learn'); ?> 

</h1>

<p><?= trad('Learn, pass the Exam and Get certified.'); ?></p>

<div class="search-card">
<form action="index.php" method="get">
<input type="hidden" name="p" value="learn_find" />

<div class="search-row">
  <input type="text" name="q"
         placeholder="What do you want to learn ?" />

  <button type="submit">🔎 <?= trad('Search'); ?></button>
</div>

<div class="cats">
<?php
$cats = [
 'free'=>'Free',
 'paid'=>'paid'
];
foreach ($cats as $k=>$v):
?>
<label>
<input type="radio" name="cat" value="<?= $k ?>" hidden>
<div class="cat"><?= trad($v) ?></div>
</label>
<?php endforeach; ?>
</div>

</form>
</div>
</section>
<style>
  .hero {
  position: relative;
  background: url('img/default-learn.webp') center/cover no-repeat;
  color: #1115e0ff;
  text-align: center;
  padding: 60px 20px;
}

.search-row {
  position: relative;
  display: flex;
  gap: 8px;
}

.suggestions {
  position: absolute;
  top: 45px;
  left: 0;
  width: calc(100% - 120px);
  background: #fff;
  border: 1px solid #615d5dff;
  border-radius: 6px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 999;
  display: none;
}

.suggestion-item {
  padding: 10px;
   color: #36363aff;
  cursor: pointer;
  font-size: 0.95rem;
}

.suggestion-item:hover {
  background: #0077ff;
  color: white;
}

.cats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px;
}

.cat {
  background: #c8cae9ff;
  border-radius: 12px;
  padding: 10px 20px;
  transition: 0.3s;
}

.cat:hover,
.cats input[type="radio"]:checked + .cat {
  background: #0077ff;
  color: white;
}

  </style>
  
