77 lines
5.3 KiB
Plaintext
77 lines
5.3 KiB
Plaintext
@{
|
|
Layout = "~/Views/Website/Shared/_Layout.cshtml";
|
|
ViewData["Title"] = "Tutorial & Manual Book Sistem Informasi Pesapakawan";
|
|
}
|
|
|
|
|
|
<div class="mx-auto">
|
|
<div class="bg-cyan-700 pt-30 pb-10 mb-8 shadow-md rounded-br-4xl rounded-bl-4xl relative overflow-hidden">
|
|
<div class="absolute inset-0" style="background-image: radial-gradient(circle at 85% 1%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 96%, transparent 96%, transparent 100%), radial-gradient(circle at 14% 15%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 1%, transparent 1%, transparent 100%), radial-gradient(circle at 60% 90%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 20%, transparent 20%, transparent 100%), radial-gradient(circle at 79% 7%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 78%, transparent 78%, transparent 100%), radial-gradient(circle at 55% 65%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 52%, transparent 52%, transparent 100%), linear-gradient(135deg, rgb(0, 163, 227), rgb(6, 182, 212));"></div>
|
|
|
|
<div class="max-w-6xl mx-auto px-6 hidden md:block relative z-10">
|
|
<nav class="flex items-center text-white text-sm space-x-2" aria-label="Breadcrumb">
|
|
<a href="@Url.Action("Index", "Home")" class="hover:underline">Beranda</a>
|
|
<i class="w-4 h-4 text-white transition-colors duration-300" data-lucide="chevron-right"></i>
|
|
<span class="font-semibold">Tutorial & Manual Book Sistem Informasi Pesapakawan</span>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="max-w-6xl mx-auto justify-between flex flex-col md:flex-row items-center px-6 gap-8 relative z-10">
|
|
<div class="flex-1 text-center max-w-xl md:text-left">
|
|
<h1 class="text-3xl md:text-4xl font-medium text-white mb-3">Tutorial & Manual Book Sistem Informasi Pesapakawan</h1>
|
|
<p class="text-lg text-white mb-4">Panduan lengkap dan petunjuk teknis untuk membantu Anda menggunakan Sistem Informasi Pesapakawan dengan mudah dan efektif.</p>
|
|
<div class="w-20 h-1 bg-white mt-4 mx-auto md:mx-0 rounded-full"></div>
|
|
</div>
|
|
<div class="flex-shrink-0 hidden md:block">
|
|
<img src="@Url.Content("~/website/images/bg-header.webp")" alt="Usaha Pesapakawan" class="w-75 h-auto">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-6xl mx-auto px-4">
|
|
<div class="bg-white rounded-xl border border-gray-200 p-8 mb-8 shadow-sm hover:shadow-md transition-shadow duration-300">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div class="space-y-6">
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6 border-b pb-2 border-cyan-100">Manual Book</h2>
|
|
|
|
<div class="flex items-start space-x-4 group">
|
|
<div class="flex-shrink-0 p-2 bg-cyan-50 rounded-lg group-hover:bg-cyan-100 transition-colors">
|
|
<i class="w-5 h-5 text-cyan-600" data-lucide="file-text"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-medium text-gray-700 mb-1">Panduan Pengguna</h3>
|
|
<p class="text-gray-600 leading-relaxed">
|
|
Dokumen ini berisi petunjuk lengkap penggunaan sistem informasi Pesapakawan
|
|
untuk semua fitur dan modul.
|
|
</p>
|
|
<a href="~/website/documents/manual_book_pesapakawan.pdf" target="_blank" rel="noopener noreferrer" class="inline-flex items-center mt-2 px-4 py-2 bg-gradient-to-r from-cyan-500 to-cyan-600 text-white font-medium rounded-lg shadow-sm hover:from-cyan-600 hover:to-cyan-700 transition-all duration-300 transform hover:-translate-y-0.5">
|
|
Download PDF <i class="w-4 h-4 ml-2" data-lucide="download"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6 border-b pb-2 border-cyan-100">Video Tutorial</h2>
|
|
<div class="w-full aspect-video rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300">
|
|
<iframe
|
|
width="100%"
|
|
height="100%"
|
|
src="https://www.youtube.com/embed/id_video_disini_ya"
|
|
title="Tutorial Sistem Informasi Pesapakawan"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen>
|
|
</iframe>
|
|
</div>
|
|
<div class="mt-4">
|
|
<p class="text-gray-600 mb-3">
|
|
Pelajari cara menggunakan sistem melalui video tutorial lengkap kami.
|
|
Video ini memberikan panduan langkah demi langkah untuk memahami dan memanfaatkan fitur-fitur utama Sistem Informasi Pesapakawan secara optimal.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |