revisi dawg
This commit is contained in:
Araya's Project
@@ -593,7 +593,7 @@ const translations = {
|
||||
ape_testimonial_title: 'Apa Kata Mereka?',
|
||||
ape_testimonial_desc: 'Cerita inspiratif dari para penerima beasiswa Program Studi Informatika UNTAN',
|
||||
ape_cta_title: 'Ingin Mengetahui Info Lebih Lanjut?',
|
||||
ape_cta_desc: 'Hubungi admin prodi atau ikuti Instagram kemahasiswaan UNTAN untuk informasi terbaru tentang beasiswa dan program akademik.',
|
||||
ape_cta_desc: 'Hubungi admin prodi untuk informasi terbaru tentang beasiswa dan program akademik.',
|
||||
ape_cta_btn1: 'DAFTAR BEASISWA',
|
||||
ape_cta_btn2: 'Hubungi Kami',
|
||||
},
|
||||
@@ -1186,7 +1186,7 @@ const translations = {
|
||||
ape_testimonial_title: 'What They Say?',
|
||||
ape_testimonial_desc: 'Inspiring stories from scholarship recipients at UNTAN Informatics Study Program',
|
||||
ape_cta_title: 'Want to Know More?',
|
||||
ape_cta_desc: 'Contact the program admin or follow UNTAN student affairs Instagram for the latest scholarship and academic program information.',
|
||||
ape_cta_desc: 'Contact the program admin for the latest scholarship and academic program information.',
|
||||
ape_cta_btn1: 'SCHOLARSHIP LIST',
|
||||
ape_cta_btn2: 'Contact Us',
|
||||
}
|
||||
|
||||
@@ -16,16 +16,19 @@
|
||||
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
--font-serif: 'Roboto Condensed', sans-serif;
|
||||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
|
||||
--shadow-card: 0 2px 12px rgba(0,0,0,0.08);
|
||||
--shadow-card-hover: 0 8px 30px rgba(43,69,144,0.15);
|
||||
--shadow-popup: 0 20px 60px rgba(0,0,0,0.3);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
--shadow-card-hover: 0 8px 30px rgba(43, 69, 144, 0.15);
|
||||
--shadow-popup: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
--radius: 12px;
|
||||
--navbar-height: 108px; /* 60px top bar putih + 48px main nav kuning */
|
||||
--navbar-height: 108px;
|
||||
/* 60px top bar putih + 48px main nav kuning */
|
||||
}
|
||||
|
||||
/* ===== BASE RESET ===== */
|
||||
*, *::before, *::after {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -45,8 +48,14 @@ body {
|
||||
}
|
||||
|
||||
/* ===== SCROLLBAR ===== */
|
||||
::-webkit-scrollbar { width: 5px; }
|
||||
::-webkit-scrollbar-track { background: #f1f5f9; }
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-primary);
|
||||
border-radius: 3px;
|
||||
@@ -80,35 +89,49 @@ body {
|
||||
|
||||
.navbar-logo-name {
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
font-size: 1.125rem; /* text-lg = 18px */
|
||||
font-size: 1.125rem;
|
||||
/* text-lg = 18px */
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.1em; /* tracking-widest */
|
||||
letter-spacing: 0.1em;
|
||||
/* tracking-widest */
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.navbar-logo-sub {
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
font-size: 10px; /* text-[10px] */
|
||||
font-size: 10px;
|
||||
/* text-[10px] */
|
||||
font-weight: 400;
|
||||
color: rgba(226, 232, 240, 0.9); /* text-slate-200 opacity-90 */
|
||||
letter-spacing: 0.15em; /* tracking-[0.15em] */
|
||||
color: rgba(226, 232, 240, 0.9);
|
||||
/* text-slate-200 opacity-90 */
|
||||
letter-spacing: 0.15em;
|
||||
/* tracking-[0.15em] */
|
||||
margin-top: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.navbar-logo-name { font-size: 1.5rem; } /* lg:text-2xl = 24px */
|
||||
.navbar-logo-sub { font-size: 0.875rem; letter-spacing: 0.3em; } /* lg:text-sm, lg:tracking-[0.3em] */
|
||||
.navbar-logo-name {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* lg:text-2xl = 24px */
|
||||
.navbar-logo-sub {
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 0.3em;
|
||||
}
|
||||
|
||||
/* lg:text-sm, lg:tracking-[0.3em] */
|
||||
}
|
||||
|
||||
/* "SATU UNTAN" text */
|
||||
.navbar-satu {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: rgba(255,255,255,0.85);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -118,18 +141,18 @@ body {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.12);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(255,255,255,0.8);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.navbar-icon-btn:hover {
|
||||
background: rgba(255,255,255,0.22);
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@@ -142,12 +165,14 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(255,255,255,0.75);
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.navbar-search-btn:hover { color: #ffffff; }
|
||||
.navbar-search-btn:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Language Toggle — dark top bar */
|
||||
#lang-toggle {
|
||||
@@ -160,7 +185,7 @@ body {
|
||||
padding: 0;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.6);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
@@ -178,7 +203,7 @@ body {
|
||||
}
|
||||
|
||||
.lang-divider {
|
||||
color: rgba(255,255,255,0.4);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 10px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
@@ -192,7 +217,9 @@ body {
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.navbar-main { display: flex; }
|
||||
.navbar-main {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/* Nav links — teks gelap di atas latar kuning */
|
||||
@@ -215,12 +242,12 @@ body {
|
||||
/* ===== INFO TICKER ===== */
|
||||
.ticker-wrapper {
|
||||
background: var(--color-primary);
|
||||
border-top: 1px solid rgba(255,255,255,0.05);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
/* Sticky behavior */
|
||||
position: fixed;
|
||||
top: 108px;
|
||||
@@ -240,12 +267,13 @@ body {
|
||||
/* Badge wrapper */
|
||||
.ticker-badge-block {
|
||||
flex-shrink: 0;
|
||||
background: rgba(0,0,0,0.15); /* Slightly darker than primary */
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
/* Slightly darker than primary */
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
border-right: 1px solid rgba(255,255,255,0.1);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -292,13 +320,18 @@ body {
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.85);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
@keyframes ticker-scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== HERO SECTION ===== */
|
||||
@@ -325,15 +358,15 @@ body {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 10% 80%, rgba(245,166,35,0.08) 0%, transparent 40%),
|
||||
radial-gradient(circle at 90% 20%, rgba(255,255,255,0.03) 0%, transparent 35%);
|
||||
radial-gradient(circle at 10% 80%, rgba(245, 166, 35, 0.08) 0%, transparent 40%),
|
||||
radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 35%);
|
||||
}
|
||||
|
||||
.hero-bg::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
|
||||
background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
|
||||
background-size: 28px 28px;
|
||||
}
|
||||
|
||||
@@ -370,14 +403,14 @@ body {
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 15px;
|
||||
color: rgba(255,255,255,0.75);
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
font-style: italic;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,0.65);
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
line-height: 1.7;
|
||||
max-width: 440px;
|
||||
margin-bottom: 32px;
|
||||
@@ -396,13 +429,13 @@ body {
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
box-shadow: 0 4px 16px rgba(245,166,35,0.35);
|
||||
box-shadow: 0 4px 16px rgba(245, 166, 35, 0.35);
|
||||
}
|
||||
|
||||
.hero-cta:hover {
|
||||
background: #e8960f;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(245,166,35,0.45);
|
||||
box-shadow: 0 8px 24px rgba(245, 166, 35, 0.45);
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
@@ -411,7 +444,9 @@ body {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.hero-cta:hover i { transform: translateX(4px); }
|
||||
.hero-cta:hover i {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Hero image — foto lebih besar dan rounded sesuai Figma */
|
||||
.hero-image-wrap {
|
||||
@@ -425,8 +460,8 @@ body {
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.45);
|
||||
border: 2px solid rgba(255,255,255,0.1);
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
|
||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -456,14 +491,14 @@ body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stat-item + .stat-item::before {
|
||||
.stat-item+.stat-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 15%;
|
||||
height: 70%;
|
||||
width: 1px;
|
||||
background: rgba(255,255,255,0.35);
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
@@ -601,7 +636,7 @@ body {
|
||||
|
||||
.search-input:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(43,69,144,0.08);
|
||||
box-shadow: 0 0 0 3px rgba(43, 69, 144, 0.08);
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
@@ -641,14 +676,14 @@ body {
|
||||
color: #003150;
|
||||
}
|
||||
|
||||
/* ===== SCHOLARSHIP CARDS ===== */
|
||||
/* ===== SCHOLARSHIP CARDS — Schoters Style ===== */
|
||||
.scholarship-card {
|
||||
background: white;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-card);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
|
||||
overflow: hidden;
|
||||
transition: var(--transition);
|
||||
border: 1px solid #f0f4f8;
|
||||
border: 1px solid #eef2f8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
@@ -656,134 +691,158 @@ body {
|
||||
}
|
||||
|
||||
.scholarship-card:hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
transform: translateY(-5px);
|
||||
border-color: rgba(43,69,144,0.1);
|
||||
box-shadow: 0 8px 32px rgba(0,49,80,0.12);
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(0,49,80,0.08);
|
||||
}
|
||||
|
||||
.card-img-wrap {
|
||||
width: 100%;
|
||||
height: 165px;
|
||||
overflow: hidden;
|
||||
background: #f0f4ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-img-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.scholarship-card:hover .card-img-wrap img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
/* ─── Card Body ─── */
|
||||
.card-body {
|
||||
padding: 16px;
|
||||
padding: 20px 20px 18px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.badge-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
align-self: flex-start;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.badge-buka {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.badge-buka::before {
|
||||
content: '●';
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.badge-ditutup {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.badge-ditutup::before {
|
||||
content: '○';
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
/* ─── Title ─── */
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 12px;
|
||||
color: var(--color-accent);
|
||||
line-height: 1.55;
|
||||
margin: 0 0 6px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ─── Subtitle (Funding Type) ─── */
|
||||
.card-subtitle {
|
||||
font-size: 12.5px;
|
||||
color: #64748b;
|
||||
margin: 0 0 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ─── Pills Row ─── */
|
||||
.card-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.card-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 600;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.card-pill-level {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
/* ─── Divider ─── */
|
||||
.card-divider {
|
||||
border: none;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
/* ─── Two-column Date Row ─── */
|
||||
.card-dates {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.card-date-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.card-date-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.card-date-value {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ─── Status Button ─── */
|
||||
.card-status-btn {
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
.status-btn-buka {
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.card-date i {
|
||||
color: var(--color-secondary);
|
||||
font-size: 10px;
|
||||
.status-btn-ditutup {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
.status-btn-segera {
|
||||
background: #fef9c3;
|
||||
color: #a16207;
|
||||
}
|
||||
|
||||
/* ─── Outline Selengkapnya Button ─── */
|
||||
.btn-selengkapnya {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--color-secondary);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
transition: var(--transition);
|
||||
font-family: var(--font-inter);
|
||||
font-family: var(--font-sans);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn-selengkapnya:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
gap: 10px;
|
||||
background: #f8faff;
|
||||
}
|
||||
|
||||
/* Entrance animation */
|
||||
@keyframes fadeInCard {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.scholarship-card.fade-in-up {
|
||||
animation: fadeInCard 0.4s ease both;
|
||||
}
|
||||
|
||||
/* ===== EMPTY STATE ===== */
|
||||
@@ -837,7 +896,7 @@ body {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(43,69,144,0.3);
|
||||
box-shadow: 0 4px 12px rgba(43, 69, 144, 0.3);
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
@@ -896,7 +955,7 @@ body {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.9);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(4px);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@@ -906,7 +965,7 @@ body {
|
||||
color: #374151;
|
||||
font-size: 14px;
|
||||
transition: var(--transition);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.popup-close:hover {
|
||||
@@ -1080,7 +1139,7 @@ body {
|
||||
.popup-cta:hover {
|
||||
background: #1e3272;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(43,69,144,0.3);
|
||||
box-shadow: 0 6px 20px rgba(43, 69, 144, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -1108,14 +1167,14 @@ body {
|
||||
border-radius: 16px;
|
||||
padding: 28px 22px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||
transition: var(--transition);
|
||||
border: 1px solid #f0f4f8;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.testimonial-card:hover {
|
||||
box-shadow: 0 10px 36px rgba(43,69,144,0.12);
|
||||
box-shadow: 0 10px 36px rgba(43, 69, 144, 0.12);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
@@ -1189,7 +1248,7 @@ body {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.04);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.cta-card::before {
|
||||
@@ -1218,7 +1277,7 @@ body {
|
||||
|
||||
.cta-desc {
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,0.68);
|
||||
color: rgba(255, 255, 255, 0.68);
|
||||
max-width: 420px;
|
||||
margin: 0 auto 32px;
|
||||
line-height: 1.65;
|
||||
@@ -1247,13 +1306,13 @@ body {
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
box-shadow: 0 4px 16px rgba(245,166,35,0.4);
|
||||
box-shadow: 0 4px 16px rgba(245, 166, 35, 0.4);
|
||||
}
|
||||
|
||||
.cta-btn-primary:hover {
|
||||
background: #e8960f;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(245,166,35,0.5);
|
||||
box-shadow: 0 8px 24px rgba(245, 166, 35, 0.5);
|
||||
color: #0a1530;
|
||||
}
|
||||
|
||||
@@ -1262,7 +1321,7 @@ body {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: transparent;
|
||||
border: 2px solid rgba(255,255,255,0.5);
|
||||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
@@ -1275,7 +1334,7 @@ body {
|
||||
|
||||
|
||||
.cta-btn-secondary:hover {
|
||||
background: rgba(255,255,255,0.12);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: white;
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
@@ -1360,14 +1419,14 @@ footer {
|
||||
|
||||
.footer-logo-text .sub {
|
||||
font-size: 10px;
|
||||
color: rgba(255,255,255,0.7);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-top: 2px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.footer-address {
|
||||
text-align: center;
|
||||
color: rgba(255,255,255,0.6);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 12px;
|
||||
line-height: 1.8;
|
||||
margin-top: 32px;
|
||||
@@ -1383,20 +1442,20 @@ footer {
|
||||
|
||||
.address-contact {
|
||||
font-size: 11px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.footer-divider {
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
margin: 28px 0 20px;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: rgba(255,255,255,0.28);
|
||||
color: rgba(255, 255, 255, 0.28);
|
||||
padding-bottom: 28px;
|
||||
}
|
||||
|
||||
@@ -1414,18 +1473,18 @@ footer {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: rgba(255,255,255,0.5);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
color: rgba(255,255,255,0.85);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.breadcrumb .sep {
|
||||
@@ -1433,13 +1492,20 @@ footer {
|
||||
}
|
||||
|
||||
.breadcrumb .current {
|
||||
color: rgba(255,255,255,0.85);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* ===== ANIMATIONS ===== */
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(18px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
@@ -1455,36 +1521,76 @@ footer {
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 767px) {
|
||||
:root { --navbar-height: 104px; }
|
||||
:root {
|
||||
--navbar-height: 104px;
|
||||
}
|
||||
|
||||
.hero-section { padding: 32px 0 48px; min-height: auto; }
|
||||
.hero-title { font-size: 32px; }
|
||||
.hero-image-wrap { display: none; }
|
||||
.hero-section {
|
||||
padding: 32px 0 48px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.stats-section { padding: 24px 0; }
|
||||
.stat-item + .stat-item::before { display: none; }
|
||||
.hero-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.cta-card { padding: 40px 20px; }
|
||||
.hero-image-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-tabs { gap: 6px; }
|
||||
.filter-tab { padding: 7px 12px; font-size: 10px; }
|
||||
.stats-section {
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.popup-modal { border-radius: 14px; }
|
||||
.popup-periode { grid-template-columns: 1fr; }
|
||||
.stat-item+.stat-item::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.testimonial-card { padding: 22px 16px; }
|
||||
.cta-card {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: 7px 12px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.popup-modal {
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.popup-periode {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.testimonial-card {
|
||||
padding: 22px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.hero-image-wrap img { height: 300px; }
|
||||
.hero-image-wrap img {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.hero-section { min-height: 540px; }
|
||||
}
|
||||
.hero-section {
|
||||
min-height: 540px;
|
||||
}
|
||||
}
|
||||
@@ -61,12 +61,19 @@
|
||||
|
||||
async function getBeasiswa() {
|
||||
try {
|
||||
const data = await fetchRemote();
|
||||
return { data, source: 'remote' };
|
||||
} catch (err) {
|
||||
console.warn('[BeasiswaAPI] API remote gagal, fallback ke data lokal:', err.message);
|
||||
// Prioritas: data lokal (lengkap: url_sumber, syarat_umum, kontak tersedia)
|
||||
// Remote API digunakan hanya sebagai fallback jika data lokal tidak ditemukan.
|
||||
const data = await fetchLocal();
|
||||
return { data, source: 'local' };
|
||||
} catch (err) {
|
||||
console.warn('[BeasiswaAPI] Data lokal gagal, fallback ke API remote:', err.message);
|
||||
try {
|
||||
const data = await fetchRemote();
|
||||
return { data, source: 'remote' };
|
||||
} catch (remoteErr) {
|
||||
console.error('[BeasiswaAPI] Semua sumber gagal:', remoteErr.message);
|
||||
throw remoteErr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
|
||||
const ITEMS_PER_PAGE = 6; // 2 baris × 3 kolom desktop
|
||||
|
||||
let allData = []; // Semua data beasiswa dari JSON
|
||||
let activeFilter = 'semua';
|
||||
let allData = []; // Semua data beasiswa dari JSON
|
||||
let activeFilter = 'semua';
|
||||
let searchKeyword = '';
|
||||
let currentPage = 1;
|
||||
let currentPage = 1;
|
||||
|
||||
// Format tanggal
|
||||
function formatDate(str) {
|
||||
@@ -32,7 +32,38 @@ function sanitize(str) {
|
||||
* Gunakan textContent/setAttribute — hindari langsung innerHTML dari user input
|
||||
*/
|
||||
function createCard(bsw) {
|
||||
const isBuka = bsw.status === 'Buka' || bsw.status === 'Dibuka';
|
||||
// Tentukan badge & warna tombol status
|
||||
let statusClass = 'status-btn-ditutup';
|
||||
let statusLabel = 'Ditutup';
|
||||
const statusLower = (bsw.status || '').toLowerCase();
|
||||
if (statusLower === 'buka' || statusLower === 'dibuka') {
|
||||
statusClass = 'status-btn-buka';
|
||||
statusLabel = 'Pendaftaran Dibuka';
|
||||
} else if (statusLower.includes('segera')) {
|
||||
statusClass = 'status-btn-segera';
|
||||
statusLabel = 'Segera Dibuka';
|
||||
}
|
||||
|
||||
// Ambil pills dari tags lokal: ["jenjang", "kategori/swasta/pemerintah", "negara", "tipe_pendanaan", ...]
|
||||
const tags = Array.isArray(bsw.tags) ? bsw.tags : [];
|
||||
const jenjang = tags[0] || '';
|
||||
|
||||
// Negara: cari tag yang bukan jenjang (S1/S2/S3), bukan kategori sumber (Swasta/Pemerintah),
|
||||
// dan bukan tipe pendanaan (Fully/Partially Funded)
|
||||
const skipPatterns = /^(S1|S2|S3|D3|D4|Swasta|Pemerintah|Fully Funded|Partially Funded|Beasiswa Penuh|Beasiswa Sebagian|Prestasi)$/i;
|
||||
const negara = tags.slice(1).find(t => !skipPatterns.test(t)) || '';
|
||||
|
||||
// Tipe pendanaan untuk subtitle — ambil dari kategori field atau dari deskripsi_singkat
|
||||
const tipe = bsw.kategori || '';
|
||||
|
||||
const pillsHtml = [jenjang, negara]
|
||||
.filter(Boolean)
|
||||
.map((t, i) => `<span class="card-pill ${i === 0 ? 'card-pill-level' : ''}">${t}</span>`)
|
||||
.join('');
|
||||
|
||||
// Subtitle: hindari duplikasi "Beasiswa Beasiswa ..."
|
||||
const rawTipe = tipe.replace(/^beasiswa\s+/i, '');
|
||||
const subtitle = rawTipe ? `Beasiswa ${rawTipe}` : '';
|
||||
|
||||
const article = document.createElement('article');
|
||||
article.className = 'scholarship-card fade-in-up';
|
||||
@@ -40,34 +71,27 @@ function createCard(bsw) {
|
||||
article.setAttribute('data-id', bsw.id);
|
||||
|
||||
article.innerHTML = `
|
||||
<div class="card-img-wrap">
|
||||
<img
|
||||
src="${bsw.thumbnail}"
|
||||
alt="${bsw.nama}"
|
||||
class="card-img"
|
||||
loading="lazy"
|
||||
onerror="this.style.display='none';this.parentElement.style.background='#eef2ff';this.parentElement.innerHTML+='<i class=\\'fas fa-graduation-cap\\' style=\\'font-size:40px;color:#c7d2fe;\\'></i>'"
|
||||
>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="badge-status ${isBuka ? 'badge-buka' : 'badge-ditutup'}">
|
||||
${bsw.status}
|
||||
</span>
|
||||
<h3 class="card-title">${bsw.nama}</h3>
|
||||
<p class="card-desc">${bsw.deskripsi_singkat}</p>
|
||||
<div class="card-date">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
<span>${formatDate(bsw.tanggal_tutup)}</span>
|
||||
${subtitle ? `<p class="card-subtitle">${subtitle}</p>` : ''}
|
||||
${pillsHtml ? `<div class="card-pills">${pillsHtml}</div>` : ''}
|
||||
<hr class="card-divider">
|
||||
<div class="card-dates">
|
||||
<div class="card-date-col">
|
||||
<span class="card-date-label">Mulai</span>
|
||||
<span class="card-date-value">${formatDate(bsw.tanggal_buka)}</span>
|
||||
</div>
|
||||
<div class="card-date-col">
|
||||
<span class="card-date-label">Deadline</span>
|
||||
<span class="card-date-value">${formatDate(bsw.tanggal_tutup)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="card-status-btn ${statusClass}" disabled>${statusLabel}</button>
|
||||
<button
|
||||
class="btn-selengkapnya"
|
||||
onclick="openPopup('${bsw.id}')"
|
||||
aria-label="Lihat detail beasiswa ${bsw.nama}"
|
||||
>
|
||||
Selengkapnya <i class="fas fa-arrow-right" style="font-size:10px;"></i>
|
||||
</button>
|
||||
>Selengkapnya</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -84,8 +108,8 @@ function getFiltered() {
|
||||
// Cocok dengan filter tab
|
||||
const matchFilter =
|
||||
activeFilter === 'semua' ||
|
||||
bsw.status === activeFilter ||
|
||||
bsw.kategori === activeFilter;
|
||||
bsw.status === activeFilter ||
|
||||
bsw.kategori === activeFilter;
|
||||
|
||||
// Cocok dengan pencarian (nama atau deskripsi atau tags)
|
||||
const matchSearch =
|
||||
@@ -100,9 +124,9 @@ function getFiltered() {
|
||||
|
||||
/** Render kartu + paginasi ke DOM */
|
||||
function renderCards() {
|
||||
const grid = document.getElementById('beasiswa-grid');
|
||||
const pagCont = document.getElementById('pagination');
|
||||
const filtered = getFiltered();
|
||||
const grid = document.getElementById('beasiswa-grid');
|
||||
const pagCont = document.getElementById('pagination');
|
||||
const filtered = getFiltered();
|
||||
|
||||
// Bersihkan grid
|
||||
grid.innerHTML = '';
|
||||
@@ -148,7 +172,7 @@ function renderPagination(total, container) {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = `page-btn${isActive ? ' active' : ''}`;
|
||||
btn.innerHTML = content;
|
||||
btn.disabled = disabled;
|
||||
btn.disabled = disabled;
|
||||
btn.setAttribute('aria-label', typeof page === 'number' ? `Halaman ${page}` : content);
|
||||
if (!disabled) {
|
||||
btn.addEventListener('click', () => {
|
||||
@@ -188,7 +212,7 @@ function initFilterTabs() {
|
||||
btn.classList.add('active');
|
||||
btn.setAttribute('aria-selected', 'true');
|
||||
activeFilter = btn.dataset.filter;
|
||||
currentPage = 1;
|
||||
currentPage = 1;
|
||||
renderCards();
|
||||
});
|
||||
});
|
||||
@@ -202,7 +226,7 @@ function initSearch() {
|
||||
input.addEventListener('input', () => {
|
||||
// Sanitasi input sebelum digunakan (cegah XSS)
|
||||
searchKeyword = sanitize(input.value).trim();
|
||||
currentPage = 1;
|
||||
currentPage = 1;
|
||||
renderCards();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -51,14 +51,6 @@ function openPopup(id) {
|
||||
|
||||
// Render konten popup
|
||||
popupBody.innerHTML = `
|
||||
<!-- Thumbnail / Hero gambar -->
|
||||
<img
|
||||
src="${bsw.thumbnail || ''}"
|
||||
alt="${bsw.nama}"
|
||||
class="popup-hero"
|
||||
onerror="this.style.display='none'"
|
||||
>
|
||||
|
||||
<div class="popup-body">
|
||||
<!-- Badge status + kategori -->
|
||||
<div class="popup-kategori-row">
|
||||
|
||||
@@ -1293,13 +1293,6 @@
|
||||
Temukan beragam beasiswa dari berbagai sumber resmi yang tersedia untuk mahasiswa aktif.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 mt-2" data-aos="fade-left">
|
||||
<!-- Button "Buku Panduan Beasiswa" -->
|
||||
<a href="#" class="btn-panduan" aria-label="Unduh Buku Panduan Beasiswa">
|
||||
<i class="far fa-file-alt"></i>
|
||||
<span data-i18n="ape_dir_guide">Buku Panduan Beasiswa</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter & Search Row (UC-02, UC-03) -->
|
||||
@@ -1366,74 +1359,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================================================
|
||||
POPUP MODAL HUBUNGI KAMI
|
||||
================================================ -->
|
||||
<div id="contact-overlay"
|
||||
class="fixed inset-0 z-[2000] hidden items-center justify-center p-4 transition-opacity duration-300 opacity-0"
|
||||
role="dialog" aria-modal="true" aria-labelledby="contact-title">
|
||||
<!-- Backdrop -->
|
||||
<div id="contact-backdrop" class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-pointer">
|
||||
</div>
|
||||
|
||||
<!-- Modal Card -->
|
||||
<div class="relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col transform transition-transform duration-300 scale-95"
|
||||
id="contact-modal">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="bg-[#003150] px-6 py-4 flex items-center justify-between">
|
||||
<h3 id="contact-title" class="text-white font-bold font-serif m-0 text-lg">Hubungi Kami</h3>
|
||||
<button id="contact-close"
|
||||
class="text-white/70 hover:text-white transition-colors bg-transparent border-none cursor-pointer p-0"
|
||||
style="background: transparent; border: none; outline: none;" aria-label="Tutup">
|
||||
<i class="fas fa-times text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="p-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
|
||||
<!-- Card Admin WhatsApp -->
|
||||
<div
|
||||
class="bg-white border border-gray-100 rounded-xl p-6 text-center shadow-[0_4px_20px_rgba(0,0,0,0.04)] hover:shadow-[0_10px_30px_rgba(34,197,94,0.12)] transition-shadow">
|
||||
<div
|
||||
class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4 text-green-500 text-2xl">
|
||||
<i class="fab fa-whatsapp"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-900 mb-1">Admin Beasiswa</h4>
|
||||
<p class="text-xs text-gray-500 mb-6">Senin - Jumat | 08.00 - 15.00 WIB</p>
|
||||
<a href="https://wa.me/628115719999" target="_blank" rel="noopener noreferrer"
|
||||
class="inline-flex items-center justify-center w-full py-2.5 px-4 bg-[#25D366] hover:bg-[#1ebd57] text-white text-sm font-semibold rounded-lg transition-colors gap-2">
|
||||
Chat Whatsapp <i class="fas fa-arrow-right text-xs"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Card Instagram -->
|
||||
<div
|
||||
class="bg-white border border-gray-100 rounded-xl p-6 text-center shadow-[0_4px_20px_rgba(0,0,0,0.04)] hover:shadow-[0_10px_30px_rgba(236,72,153,0.12)] transition-shadow">
|
||||
<div
|
||||
class="w-14 h-14 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4 text-pink-500 text-2xl">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-900 mb-1">@kemahasiswaan.untan</h4>
|
||||
<p class="text-xs text-gray-500 mb-6">Informasi Beasiswa Terkini</p>
|
||||
<a href="https://instagram.com/kemahasiswaan.untan" target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center justify-center w-full py-2.5 px-4 bg-gradient-to-r from-[#833AB4] via-[#FD1D1D] to-[#F56040] hover:opacity-90 text-white text-sm font-semibold rounded-lg transition-colors gap-2">
|
||||
Buka Instagram <i class="fas fa-arrow-right text-xs"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="text-center text-[10px] text-gray-400 m-0">*Pastikan WhatsApp Kamu aktif sebelum
|
||||
menghubungi admin.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================================================
|
||||
TESTIMONI (#testimonial) — UC-07
|
||||
================================================ -->
|
||||
@@ -1478,9 +1403,9 @@
|
||||
<span data-i18n="ape_cta_btn1">Daftar Beasiswa</span>
|
||||
</a>
|
||||
<!-- Kontak CTA -->
|
||||
<button id="btn-open-contact" class="cta-btn-secondary" aria-label="Hubungi admin">
|
||||
<a id="btn-open-contact" class="cta-btn-secondary" aria-label="Hubungi admin" href="https://wa.me/+6285171655161">
|
||||
<span data-i18n="ape_cta_btn2">Hubungi Kami</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user