From 0ef37132fbdb0cfb565f3a1eff0b61e84955cf97 Mon Sep 17 00:00:00 2001
From: Power BI Dev <PtmPowerBIDev@pertamina.com>
Date: Mon, 11 May 2026 00:46:02 +0700
Subject: [PATCH] Refresh SPOTA landing page

---
 asetlanding/css/main.css | 418 +++++++++++++++++++++++++++++++++++++++
 index.php                | 225 +++++++++++++--------
 2 files changed, 562 insertions(+), 81 deletions(-)

diff --git a/asetlanding/css/main.css b/asetlanding/css/main.css
index 37a0fe1..4df37a4 100644
--- a/asetlanding/css/main.css
+++ b/asetlanding/css/main.css
@@ -1917,3 +1917,421 @@ textarea {
 .copyright p a:hover {
   color: #3d60f4;
 }
+
+/* SPOTA refreshed landing */
+.spota-landing {
+  color: #334155;
+  background: #f7fbff;
+}
+
+.spota-navbar {
+  padding: 12px 0;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(14px);
+  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
+}
+
+.spota-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  color: #0f172a;
+  font-family: 'Titillium Web', sans-serif;
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.spota-brand img {
+  max-height: 42px;
+}
+
+.spota-brand:hover,
+.spota-brand:focus {
+  color: #0f766e;
+}
+
+.spota-navbar .navbar-nav .nav-link {
+  color: #334155 !important;
+  letter-spacing: 0.02em;
+}
+
+.spota-navbar .navbar-nav .nav-link:hover,
+.spota-navbar .navbar-nav .active > .nav-link {
+  color: #0f766e !important;
+}
+
+#hero-area.spota-hero {
+  min-height: 100vh;
+  color: #0f172a;
+  background:
+    radial-gradient(circle at 12% 12%, rgba(45, 212, 191, 0.24), transparent 28%),
+    radial-gradient(circle at 88% 18%, rgba(59, 130, 246, 0.2), transparent 30%),
+    linear-gradient(135deg, #eefdfb 0%, #f8fbff 46%, #eef4ff 100%);
+}
+
+#hero-area.spota-hero:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(15, 118, 110, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(15, 118, 110, 0.08) 1px, transparent 1px);
+  background-size: 54px 54px;
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 86%);
+}
+
+.spota-hero .container {
+  position: relative;
+  z-index: 1;
+}
+
+#hero-area .spota-hero-content {
+  padding: 190px 0 90px;
+}
+
+.spota-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: 18px;
+  padding: 8px 14px;
+  color: #0f766e;
+  background: rgba(20, 184, 166, 0.12);
+  border: 1px solid rgba(20, 184, 166, 0.2);
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.spota-hero h1 {
+  max-width: 780px;
+  color: #0f172a;
+  font-size: 58px;
+  line-height: 1.05;
+  letter-spacing: -0.04em;
+  margin-bottom: 24px;
+}
+
+.spota-hero p {
+  max-width: 680px;
+  color: #475569;
+  font-size: 18px;
+  line-height: 1.8;
+  margin-bottom: 34px;
+}
+
+.spota-hero .btn {
+  margin-right: 12px;
+  margin-bottom: 12px;
+  box-shadow: 0 16px 36px rgba(15, 118, 110, 0.16);
+}
+
+.spota-hero .btn-common,
+.spota-section .btn-common {
+  background: linear-gradient(135deg, #0f766e, #2563eb);
+}
+
+.spota-hero .btn-common:hover,
+.spota-section .btn-common:hover {
+  background: #0f172a;
+}
+
+.spota-hero .btn-border {
+  color: #0f766e;
+  border-color: rgba(15, 118, 110, 0.35);
+  background: rgba(255, 255, 255, 0.74);
+}
+
+.spota-hero .btn-border:hover {
+  color: #fff;
+  background: #0f766e;
+}
+
+.spota-dashboard-card {
+  margin-top: 115px;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  border-radius: 34px;
+  background: rgba(255, 255, 255, 0.78);
+  box-shadow: 0 34px 90px rgba(15, 23, 42, 0.14);
+  backdrop-filter: blur(18px);
+}
+
+.spota-card-header {
+  display: flex;
+  gap: 8px;
+  padding: 20px 24px;
+  background: #0f172a;
+}
+
+.spota-card-header span {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: #2dd4bf;
+}
+
+.spota-card-header span:nth-child(2) {
+  background: #60a5fa;
+}
+
+.spota-card-header span:nth-child(3) {
+  background: #fbbf24;
+}
+
+.spota-card-body {
+  padding: 30px;
+}
+
+.spota-status-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.spota-status-row small,
+.spota-mini-grid small {
+  display: block;
+  color: #64748b;
+  font-size: 12px;
+}
+
+.spota-status-row strong {
+  display: block;
+  color: #0f172a;
+  font-size: 24px;
+  line-height: 1.2;
+}
+
+.spota-status-row i {
+  color: #0f766e;
+  font-size: 38px;
+}
+
+.spota-progress {
+  height: 12px;
+  overflow: hidden;
+  margin-bottom: 26px;
+  border-radius: 999px;
+  background: #dbeafe;
+}
+
+.spota-progress span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #14b8a6, #2563eb);
+}
+
+.spota-mini-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.spota-mini-grid div,
+.spota-feature-card,
+.spota-access-list a {
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  background: #fff;
+  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06);
+}
+
+.spota-mini-grid div {
+  padding: 18px;
+  border-radius: 22px;
+}
+
+.spota-mini-grid i,
+.spota-feature-card i,
+.spota-access-list i {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  margin-bottom: 16px;
+  color: #0f766e;
+  background: #ecfeff;
+  border-radius: 15px;
+  font-size: 22px;
+}
+
+.spota-mini-grid strong {
+  display: block;
+  color: #0f172a;
+  font-size: 15px;
+}
+
+.spota-section {
+  padding: 90px 0 70px;
+  background: #fff;
+}
+
+.spota-section .section-title,
+.spota-access-section h2 {
+  color: #0f172a;
+  text-transform: none;
+  letter-spacing: -0.03em;
+}
+
+.spota-section .section-header p,
+.spota-access-section p {
+  color: #64748b;
+  font-size: 16px;
+}
+
+.spota-feature-card {
+  min-height: 280px;
+  margin-bottom: 30px;
+  padding: 34px;
+  border-radius: 28px;
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.spota-feature-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.11);
+}
+
+.spota-feature-card h3 {
+  color: #0f172a;
+  font-size: 24px;
+  margin-bottom: 14px;
+}
+
+.spota-feature-card p {
+  color: #64748b;
+  font-size: 15px;
+  line-height: 1.8;
+}
+
+.spota-access-section {
+  padding: 80px 0;
+  background: linear-gradient(135deg, #0f172a, #0f766e);
+}
+
+.spota-access-section .spota-eyebrow {
+  color: #a7f3d0;
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.18);
+}
+
+.spota-access-section h2,
+.spota-access-section p {
+  color: #fff;
+}
+
+.spota-access-list {
+  display: grid;
+  gap: 16px;
+}
+
+.spota-access-list a {
+  display: grid;
+  grid-template-columns: 58px 1fr;
+  grid-template-areas:
+    "icon title"
+    "icon desc";
+  align-items: center;
+  padding: 20px 24px;
+  border-radius: 24px;
+  color: #0f172a;
+}
+
+.spota-access-list a:hover {
+  transform: translateX(6px);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
+}
+
+.spota-access-list i {
+  grid-area: icon;
+  margin: 0;
+}
+
+.spota-access-list span {
+  grid-area: title;
+  color: #0f172a;
+  font-family: 'Titillium Web', sans-serif;
+  font-size: 21px;
+  font-weight: 700;
+}
+
+.spota-access-list small {
+  grid-area: desc;
+  color: #64748b;
+}
+
+.spota-footer {
+  padding: 28px 0;
+  color: #64748b;
+  background: #fff;
+}
+
+.spota-footer p {
+  color: #64748b;
+}
+
+.spota-footer-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  color: #0f172a;
+  font-family: 'Titillium Web', sans-serif;
+  font-weight: 700;
+}
+
+.spota-footer-brand img {
+  max-height: 36px;
+}
+
+@media (max-width: 991px) {
+  .spota-hero h1 {
+    font-size: 44px;
+  }
+
+  .spota-dashboard-card {
+    margin-top: 0;
+    margin-bottom: 70px;
+  }
+
+  #hero-area .spota-hero-content {
+    padding: 150px 0 40px;
+  }
+
+  .spota-access-section h2 {
+    margin-bottom: 16px;
+  }
+}
+
+@media (max-width: 575px) {
+  .spota-brand span {
+    display: none;
+  }
+
+  .spota-hero h1 {
+    font-size: 36px;
+  }
+
+  .spota-hero p {
+    font-size: 16px;
+  }
+
+  .spota-mini-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .spota-access-list a {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "icon"
+      "title"
+      "desc";
+  }
+
+  .spota-access-list i {
+    margin-bottom: 14px;
+  }
+}
diff --git a/index.php b/index.php
index 09a7141..439d4ec 100644
--- a/index.php
+++ b/index.php
@@ -1,144 +1,209 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="id">
   <head>
-    <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-    <title>Stack - Bootstrap 4 Business Template</title>
+    <title>SPOTA Informatika UNTAN</title>
 
-    <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="./asetlanding/css/bootstrap.min.css" >
-    <!-- Icon -->
     <link rel="stylesheet" href="./asetlanding/fonts/line-icons.css">
-    <!-- Slicknav -->
     <link rel="stylesheet" href="./asetlanding/css/slicknav.css">
-    <!-- Owl carousel -->
     <link rel="stylesheet" href="./asetlanding/css/owl.carousel.min.css">
     <link rel="stylesheet" href="./asetlanding/css/owl.theme.css">
-    
     <link rel="stylesheet" href="./asetlanding/css/magnific-popup.css">
     <link rel="stylesheet" href="./asetlanding/css/nivo-lightbox.css">
-    <!-- Animate -->
     <link rel="stylesheet" href="./asetlanding/css/animate.css">
-    <!-- Main Style -->
     <link rel="stylesheet" href="./asetlanding/css/main.css">
-    <!-- Responsive Style -->
     <link rel="stylesheet" href="./asetlanding/css/responsive.css">
-
   </head>
-  <body>
+  <body class="spota-landing">
 
-    <!-- Header Area wrapper Starts -->
     <header id="header-wrap">
-      <!-- Navbar Start -->
-      <nav class="navbar navbar-expand-md bg-inverse fixed-top scrolling-navbar">
+      <nav class="navbar navbar-expand-md fixed-top scrolling-navbar spota-navbar">
         <div class="container">
-          <!-- Brand and toggle get grouped for better mobile display -->
-          <a href="index.html" class="navbar-brand"><img src="./asetlanding/img/logo.png" alt=""></a>       
+          <a href="https://spota.informatika.untan.ac.id" class="navbar-brand spota-brand">
+            <img src="./asetlanding/img/logo.png" alt="SPOTA">
+            <span>SPOTA</span>
+          </a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
             <i class="lni-menu"></i>
           </button>
           <div class="collapse navbar-collapse" id="navbarCollapse">
             <ul class="navbar-nav mr-auto w-100 justify-content-end clearfix">
               <li class="nav-item active">
-                <a class="nav-link" href="#hero-area">
-                  Home
-                </a>
+                <a class="nav-link" href="#hero-area">Beranda</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="https://spota.untan.ac.id/mahasiswa">
-                  Mahasiswa
-                </a>
+                <a class="nav-link" href="#fitur">Fitur</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="https://spota.untan.ac.id/dosen">
-                  Dosen
-                </a>
+                <a class="nav-link" href="https://spota.informatika.untan.ac.id/mahasiswa">Mahasiswa</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="#team">
-                  Admin
-                </a>
+                <a class="nav-link" href="https://spota.informatika.untan.ac.id/dosen">Dosen</a>
               </li>
-
               <li class="nav-item">
-                <a class="nav-link" href="#contact">
-                  Contact
-                </a>
+                <a class="nav-link" href="https://spota.informatika.untan.ac.id/admin">Admin</a>
               </li>
             </ul>
           </div>
         </div>
       </nav>
-      <!-- Navbar End -->
 
-      <!-- Hero Area Start -->
-      <div id="hero-area" class="hero-area-bg">
+      <div id="hero-area" class="hero-area-bg spota-hero">
         <div class="container">
-          <div class="row">
-            <div class="col-md-12 col-sm-12">
-              <div class="contents text-center">
-                <h2 class="head-title wow fadeInUp">We Discover, Design & Build Digital <br></h2><h1>SPOTA v2</h1>
-                <div class="header-button wow fadeInUp" data-wow-delay="0.3s">
-                  <a href="https://spota.untan.ac.id/mahasiswa" class="btn btn-common">Mahasiswa</a>
-
-                  <a href="https://spota.untan.ac.id/dosen" class="btn btn-common">Dosen</a>
+          <div class="row align-items-center">
+            <div class="col-lg-7 col-md-12">
+              <div class="contents spota-hero-content wow fadeInUp">
+                <span class="spota-eyebrow">Sistem Pendukung Tugas Akhir</span>
+                <h1>Kelola proses tugas akhir Informatika UNTAN dalam satu platform.</h1>
+                <p>
+                  SPOTA membantu mahasiswa, dosen, dan admin memantau alur tugas akhir mulai dari pengajuan,
+                  bimbingan, seminar, hingga progres penyelesaian secara lebih rapi dan terpusat.
+                </p>
+                <div class="header-button" data-wow-delay="0.3s">
+                  <a href="https://spota.informatika.untan.ac.id/mahasiswa" class="btn btn-common btn-lg">Masuk Mahasiswa</a>
+                  <a href="https://spota.informatika.untan.ac.id/dosen" class="btn btn-border btn-lg">Portal Dosen</a>
                 </div>
               </div>
-              <div class="img-thumb text-center wow fadeInUp" data-wow-delay="0.6s">
-                <img class="img-fluid" src="./asetlanding/img/hero-1.png" alt="">
+            </div>
+            <div class="col-lg-5 col-md-12">
+              <div class="spota-dashboard-card wow fadeInUp" data-wow-delay="0.4s">
+                <div class="spota-card-header">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </div>
+                <div class="spota-card-body">
+                  <div class="spota-status-row">
+                    <div>
+                      <small>Status Tugas Akhir</small>
+                      <strong>Monitoring Aktif</strong>
+                    </div>
+                    <i class="lni-check-mark-circle"></i>
+                  </div>
+                  <div class="spota-progress">
+                    <span style="width: 72%;"></span>
+                  </div>
+                  <div class="spota-mini-grid">
+                    <div>
+                      <i class="lni-pencil"></i>
+                      <strong>Pengajuan</strong>
+                      <small>Topik & judul</small>
+                    </div>
+                    <div>
+                      <i class="lni-comments"></i>
+                      <strong>Bimbingan</strong>
+                      <small>Catatan dosen</small>
+                    </div>
+                    <div>
+                      <i class="lni-calendar"></i>
+                      <strong>Seminar</strong>
+                      <small>Jadwal & berkas</small>
+                    </div>
+                    <div>
+                      <i class="lni-stats-up"></i>
+                      <strong>Progres</strong>
+                      <small>Terpantau</small>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <!-- Hero Area End -->
-
     </header>
-    <!-- Header Area wrapper End -->
 
-
- 
-
-    
-    <!-- Copyright Section Start -->
-    <div class="copyright">
+    <section id="fitur" class="spota-section">
       <div class="container">
+        <div class="section-header text-center">
+          <span class="spota-eyebrow">Fokus SPOTA</span>
+          <h2 class="section-title">Satu alur untuk tugas akhir</h2>
+          <p>Dirancang untuk memperjelas komunikasi, status administrasi, dan monitoring akademik.</p>
+        </div>
         <div class="row">
-          <div class="col-lg-4 col-md-3 col-xs-12">
-            <div class="footer-logo">
-              <img src="./asetlanding/img/logo.png" alt="">
+          <div class="col-lg-4 col-md-6">
+            <div class="spota-feature-card">
+              <i class="lni-files"></i>
+              <h3>Administrasi Terpusat</h3>
+              <p>Data pengajuan, dosen pembimbing, jadwal, dan dokumen tugas akhir lebih mudah ditelusuri.</p>
             </div>
           </div>
-          <div class="col-lg-4 col-md-4 col-xs-12">     
-            <div class="social-icon text-center">
-              <a class="facebook" href="#"><i class="lni-facebook-filled"></i></a>
-              <a class="twitter" href="#"><i class="lni-twitter-filled"></i></a>
-              <a class="instagram" href="#"><i class="lni-instagram-filled"></i></a>
-              <a class="linkedin" href="#"><i class="lni-linkedin-filled"></i></a>
+          <div class="col-lg-4 col-md-6">
+            <div class="spota-feature-card">
+              <i class="lni-users"></i>
+              <h3>Kolaborasi Akademik</h3>
+              <p>Mahasiswa dan dosen dapat mengikuti proses bimbingan dengan catatan yang terdokumentasi.</p>
+            </div>
+          </div>
+          <div class="col-lg-4 col-md-6">
+            <div class="spota-feature-card">
+              <i class="lni-dashboard"></i>
+              <h3>Monitoring Progres</h3>
+              <p>Admin dan program studi memperoleh gambaran perkembangan tugas akhir secara lebih cepat.</p>
             </div>
           </div>
-          <div class="col-lg-4 col-md-5 col-xs-12">
-            <p class="float-right">Designed and Developed by <a href="http://uideck.com" rel="nofollow">UIdeck</a></p>
-          </div> 
         </div>
       </div>
-    </div>
-    <!-- Copyright Section End -->
+    </section>
+
+    <section class="spota-access-section">
+      <div class="container">
+        <div class="row align-items-center">
+          <div class="col-lg-5">
+            <span class="spota-eyebrow">Akses Cepat</span>
+            <h2>Masuk sesuai peran pengguna.</h2>
+            <p>Pilih portal sesuai kebutuhan untuk melanjutkan aktivitas tugas akhir di SPOTA.</p>
+          </div>
+          <div class="col-lg-7">
+            <div class="spota-access-list">
+              <a href="https://spota.informatika.untan.ac.id/mahasiswa">
+                <i class="lni-graduation"></i>
+                <span>Portal Mahasiswa</span>
+                <small>Pengajuan, bimbingan, dan status TA</small>
+              </a>
+              <a href="https://spota.informatika.untan.ac.id/dosen">
+                <i class="lni-blackboard"></i>
+                <span>Portal Dosen</span>
+                <small>Validasi, bimbingan, dan monitoring</small>
+              </a>
+              <a href="https://spota.informatika.untan.ac.id/admin">
+                <i class="lni-cog"></i>
+                <span>Portal Admin</span>
+                <small>Pengelolaan data dan alur akademik</small>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <footer class="spota-footer">
+      <div class="container">
+        <div class="row align-items-center">
+          <div class="col-md-6">
+            <div class="spota-footer-brand">
+              <img src="./asetlanding/img/logo.png" alt="SPOTA">
+              <span>SPOTA Informatika UNTAN</span>
+            </div>
+          </div>
+          <div class="col-md-6">
+            <p class="text-md-right">Sistem Pendukung Tugas Akhir Program Studi Informatika Universitas Tanjungpura.</p>
+          </div>
+        </div>
+      </div>
+    </footer>
 
-    <!-- Go to Top Link -->
     <a href="#" class="back-to-top">
-    	<i class="lni-arrow-up"></i>
+      <i class="lni-arrow-up"></i>
     </a>
-    
-    <!-- Preloader -->
+
     <div id="preloader">
       <div class="loader" id="loader-1"></div>
     </div>
-    <!-- End Preloader -->
-    
-    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+
     <script src="./asetlanding/js/jquery-min.js"></script>
     <script src="./asetlanding/js/popper.min.js"></script>
     <script src="./asetlanding/js/bootstrap.min.js"></script>
@@ -147,11 +212,9 @@
     <script src="./asetlanding/js/jquery.nav.js"></script>
     <script src="./asetlanding/js/scrolling-nav.js"></script>
     <script src="./asetlanding/js/jquery.easing.min.js"></script>
-    <script src="./asetlanding/js/jquery.counterup.min.js"></script>  
-    <script src="./asetlanding/js/waypoints.min.js"></script>   
+    <script src="./asetlanding/js/jquery.counterup.min.js"></script>
+    <script src="./asetlanding/js/waypoints.min.js"></script>
     <script src="./asetlanding/js/jquery.slicknav.js"></script>
     <script src="./asetlanding/js/main.js"></script>
-
-      
   </body>
 </html>