114 lines
4.4 KiB
Plaintext
114 lines
4.4 KiB
Plaintext
@model List<QRRapidoApp.Models.ArticleMetadata>
|
|
@{
|
|
var isEn = (ViewBag.Culture as string) == "en";
|
|
var isEs = (ViewBag.Culture as string) == "es-PY" || (ViewBag.Culture as string) == "es";
|
|
string T(string pt, string es, string en) => isEn ? en : isEs ? es : pt;
|
|
|
|
ViewData["Title"] = T("Tutoriais QR Code", "Tutoriales Código QR", "QR Code Tutorials");
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
|
|
<div class="container mt-4 mb-5">
|
|
<!-- Page Header -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h1 class="display-4">
|
|
<i class="fas fa-book"></i>
|
|
@T("Tutoriais QR Code", "Tutoriales Código QR", "QR Code Tutorials")
|
|
</h1>
|
|
<p class="lead text-muted">
|
|
@T("Aprenda tudo sobre QR Codes com nossos tutoriais completos e passo a passo",
|
|
"Aprende todo sobre códigos QR con nuestros tutoriales completos paso a paso",
|
|
"Learn everything about QR Codes with our complete step-by-step tutorials")
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tutorials Grid -->
|
|
@if (Model.Any())
|
|
{
|
|
<div class="row">
|
|
@foreach (var article in Model)
|
|
{
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card h-100 shadow-sm hover-shadow">
|
|
@if (!string.IsNullOrEmpty(article.Image))
|
|
{
|
|
<img src="@article.Image" class="card-img-top" alt="@article.Title" style="height: 200px; object-fit: cover;">
|
|
}
|
|
<div class="card-body d-flex flex-column">
|
|
<h5 class="card-title">@article.Title</h5>
|
|
<p class="card-text text-muted flex-grow-1">@article.Description</p>
|
|
|
|
<div class="mb-3">
|
|
<small class="text-muted">
|
|
<i class="fas fa-calendar"></i> @article.Date.ToString("dd MMM yyyy") |
|
|
<i class="fas fa-clock"></i> @article.ReadingTimeMinutes min
|
|
</small>
|
|
</div>
|
|
|
|
<a href="/@ViewBag.Culture/tutoriais/@article.Slug"
|
|
class="btn btn-primary btn-block">
|
|
@T("Ler Tutorial", "Leer Tutorial", "Read Tutorial")
|
|
<i class="fas fa-arrow-right ml-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="alert alert-info" role="alert">
|
|
<i class="fas fa-info-circle"></i>
|
|
@T("Nenhum tutorial disponível no momento. Volte em breve!",
|
|
"No hay tutoriales disponibles en este momento. ¡Vuelve pronto!",
|
|
"No tutorials available at the moment. Check back soon!")
|
|
</div>
|
|
}
|
|
|
|
<!-- CTA Section -->
|
|
<div class="row mt-5">
|
|
<div class="col-12">
|
|
<div class="card bg-primary text-white">
|
|
<div class="card-body text-center py-5">
|
|
<h3 class="mb-3">
|
|
@T("Pronto para criar seu QR Code?",
|
|
"¿Listo para crear tu código QR?",
|
|
"Ready to create your QR Code?")
|
|
</h3>
|
|
<p class="lead mb-4">
|
|
@T("Gere QR codes profissionais em segundos com nossa ferramenta ultrarrápida!",
|
|
"¡Genera códigos QR profesionales en segundos con nuestra herramienta ultrarrápida!",
|
|
"Generate professional QR codes in seconds with our ultra-fast tool!")
|
|
</p>
|
|
<a href="/@ViewBag.Culture" class="btn btn-light btn-lg">
|
|
<i class="fas fa-qrcode"></i>
|
|
@T("Criar QR Code Agora", "Crear Código QR Ahora", "Create QR Code Now")
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.hover-shadow {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hover-shadow:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
|
|
}
|
|
|
|
.card-img-top {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.card:hover .card-img-top {
|
|
transform: scale(1.05);
|
|
}
|
|
</style>
|