110 lines
4.2 KiB
Plaintext
110 lines
4.2 KiB
Plaintext
@model List<QRRapidoApp.Models.ArticleMetadata>
|
|
@{
|
|
ViewData["Title"] = ViewBag.Culture == "pt-BR" ? "Tutoriais QR Code" : "Tutoriales Código QR";
|
|
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>
|
|
@(ViewBag.Culture == "pt-BR" ? "Tutoriais QR Code" : "Tutoriales Código QR")
|
|
</h1>
|
|
<p class="lead text-muted">
|
|
@(ViewBag.Culture == "pt-BR"
|
|
? "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")
|
|
</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">
|
|
@(ViewBag.Culture == "pt-BR" ? "Ler Tutorial" : "Leer 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>
|
|
@(ViewBag.Culture == "pt-BR"
|
|
? "Nenhum tutorial disponível no momento. Volte em breve!"
|
|
: "No hay tutoriales disponibles en este momento. ¡Vuelve pronto!")
|
|
</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">
|
|
@(ViewBag.Culture == "pt-BR"
|
|
? "Pronto para criar seu QR Code?"
|
|
: "¿Listo para crear tu código QR?")
|
|
</h3>
|
|
<p class="lead mb-4">
|
|
@(ViewBag.Culture == "pt-BR"
|
|
? "Gere QR codes profissionais em segundos com nossa ferramenta ultrarrápida!"
|
|
: "¡Genera códigos QR profesionales en segundos con nuestra herramienta ultrarrápida!")
|
|
</p>
|
|
<a href="/@ViewBag.Culture" class="btn btn-light btn-lg">
|
|
<i class="fas fa-qrcode"></i>
|
|
@(ViewBag.Culture == "pt-BR" ? "Criar QR Code Agora" : "Crear Código QR Ahora")
|
|
</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>
|