643 lines
25 KiB
PHP
643 lines
25 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ASGARD - Rekomendasi Jurusan SMAN 4 Jember</title>
|
|
|
|
<!-- Library -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="{{ asset('css/landingpage.css') }}" rel="stylesheet">
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
scroll-padding-top: 95px;
|
|
}
|
|
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Background halaman */
|
|
.soft-bg {
|
|
background:
|
|
radial-gradient(circle at top left, rgba(16, 185, 129, 0.14), transparent 35%),
|
|
radial-gradient(circle at bottom right, rgba(234, 179, 8, 0.10), transparent 35%),
|
|
#ffffff;
|
|
}
|
|
|
|
/* Teks gradasi */
|
|
.text-gradient {
|
|
background: linear-gradient(to right, #10b981, #059669);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* Jarak section */
|
|
.section-space {
|
|
padding-top: 90px;
|
|
padding-bottom: 90px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.section-space {
|
|
padding-top: 70px;
|
|
padding-bottom: 70px;
|
|
}
|
|
}
|
|
|
|
/* Animasi gambar */
|
|
.student-animation {
|
|
animation: floatStudent 3.5s ease-in-out infinite;
|
|
filter: drop-shadow(0 18px 18px rgba(6, 44, 34, 0.14));
|
|
}
|
|
|
|
@keyframes floatStudent {
|
|
0% {
|
|
transform: translateY(0) rotate(0deg);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-16px) rotate(1.5deg);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
/* Hover seluruh card */
|
|
.full-hover-card {
|
|
cursor: pointer;
|
|
transition: all 0.35s ease;
|
|
}
|
|
|
|
.full-hover-card:hover {
|
|
transform: translateY(-10px) scale(1.015);
|
|
box-shadow: 0 25px 50px rgba(6, 44, 34, 0.16);
|
|
}
|
|
|
|
/* Hover card putih */
|
|
.card-white:hover {
|
|
background-color: #ecfdf5 !important;
|
|
border-color: #22c55e !important;
|
|
}
|
|
|
|
/* Hover card hijau */
|
|
.card-dark:hover {
|
|
background-color: #022c22 !important;
|
|
border-color: #34d399 !important;
|
|
}
|
|
|
|
/* Hover card kuning */
|
|
.card-yellow:hover {
|
|
background-color: #facc15 !important;
|
|
border-color: #eab308 !important;
|
|
}
|
|
|
|
/* Efek isi card */
|
|
.number-box,
|
|
.card-icon,
|
|
.card-title,
|
|
.card-text {
|
|
transition: all 0.35s ease;
|
|
}
|
|
|
|
.full-hover-card:hover .number-box {
|
|
background-color: #10b981;
|
|
color: white;
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
.full-hover-card:hover .card-icon {
|
|
transform: scale(1.15) rotate(-6deg);
|
|
}
|
|
|
|
.full-hover-card:hover .card-title {
|
|
color: #059669;
|
|
}
|
|
|
|
.full-hover-card:hover .card-text {
|
|
color: #334155;
|
|
}
|
|
|
|
.card-dark:hover .card-title {
|
|
color: #86efac;
|
|
}
|
|
|
|
.card-dark:hover .card-text {
|
|
color: #d1fae5;
|
|
}
|
|
|
|
.card-yellow:hover .card-title {
|
|
color: #064e3b;
|
|
}
|
|
|
|
.card-yellow:hover .card-text {
|
|
color: #064e3b;
|
|
}
|
|
|
|
/* Hover seluruh FAQ */
|
|
.faq-card {
|
|
cursor: pointer;
|
|
transition: all 0.35s ease;
|
|
}
|
|
|
|
.faq-card:hover {
|
|
background-color: #ecfdf5 !important;
|
|
border-color: #22c55e !important;
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 22px 40px rgba(6, 44, 34, 0.12);
|
|
}
|
|
|
|
.faq-card:hover button {
|
|
color: #059669;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body
|
|
x-data="{ atTop: true, openMenu: false }"
|
|
@scroll.window="atTop = (window.pageYOffset > 50 ? false : true)"
|
|
class="flex flex-col min-h-screen bg-white"
|
|
>
|
|
|
|
<!-- NAVBAR -->
|
|
<nav
|
|
class="fixed w-full z-50 transition-all duration-500 px-6 py-4"
|
|
:class="atTop ? 'bg-transparent' : 'bg-white/95 backdrop-blur-xl shadow-lg border-b border-green-100'"
|
|
>
|
|
<div class="max-w-7xl mx-auto flex items-center justify-between">
|
|
|
|
<!-- Logo -->
|
|
<a href="{{ route('landingpage') }}" class="flex items-center space-x-2">
|
|
<span class="font-black text-2xl tracking-tighter text-emerald-900 italic">
|
|
ASGARD<span class="text-green-500">.</span>
|
|
</span>
|
|
</a>
|
|
|
|
<!-- Menu desktop -->
|
|
<div class="hidden md:flex space-x-10 text-[11px] font-bold uppercase tracking-widest text-emerald-900">
|
|
<a href="{{ route('landingpage') }}#tentang" class="hover:text-green-600 transition">
|
|
Tentang
|
|
</a>
|
|
|
|
<a href="{{ route('landingpage') }}#cara-kerja" class="hover:text-green-600 transition">
|
|
Cara Kerja
|
|
</a>
|
|
|
|
<a href="{{ route('landingpage') }}#faq" class="hover:text-green-600 transition">
|
|
FAQ
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Login desktop -->
|
|
<div class="hidden md:block">
|
|
<a
|
|
href="{{ route('login') }}"
|
|
class="bg-emerald-900 text-white px-8 py-3 rounded-full font-bold hover:bg-black hover:scale-105 transition-all"
|
|
>
|
|
LOGIN
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Tombol mobile -->
|
|
<button
|
|
@click="openMenu = !openMenu"
|
|
class="md:hidden text-emerald-900 font-black text-2xl"
|
|
type="button"
|
|
>
|
|
☰
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu mobile -->
|
|
<div
|
|
x-show="openMenu"
|
|
x-transition
|
|
x-cloak
|
|
class="md:hidden mt-4 bg-white rounded-3xl shadow-xl border border-green-100 p-5 space-y-4 text-sm font-bold uppercase tracking-widest text-emerald-900"
|
|
>
|
|
<a href="{{ route('landingpage') }}#tentang" @click="openMenu = false" class="block hover:text-green-600">
|
|
Tentang
|
|
</a>
|
|
|
|
<a href="{{ route('landingpage') }}#cara-kerja" @click="openMenu = false" class="block hover:text-green-600">
|
|
Cara Kerja
|
|
</a>
|
|
|
|
<a href="{{ route('landingpage') }}#faq" @click="openMenu = false" class="block hover:text-green-600">
|
|
FAQ
|
|
</a>
|
|
|
|
<a href="{{ route('login') }}" class="block text-center bg-emerald-900 text-white px-6 py-3 rounded-full">
|
|
LOGIN
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="flex-grow">
|
|
|
|
<!-- HERO -->
|
|
<header class="soft-bg pt-32 pb-24 overflow-hidden">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
|
|
<div class="swiper heroSwiper" data-aos="fade-up">
|
|
<div class="swiper-wrapper">
|
|
|
|
<div class="swiper-slide text-center py-12">
|
|
<h1 class="text-5xl md:text-8xl font-black text-emerald-950 mb-6 leading-none tracking-tighter">
|
|
Wujudkan Impianmu <br>
|
|
Bersama <span class="text-gradient">ASGARD.</span>
|
|
</h1>
|
|
|
|
<p class="max-w-2xl mx-auto text-emerald-900/60 text-lg mb-10 font-medium">
|
|
Sistem rekomendasi jurusan kuliah untuk membantu siswa SMAN 4 Jember menentukan pilihan jurusan berdasarkan profil siswa.
|
|
</p>
|
|
|
|
<a
|
|
href="{{ route('login') }}"
|
|
class="inline-block bg-green-600 text-white px-12 py-5 rounded-2xl font-bold uppercase text-xs tracking-widest shadow-2xl hover:bg-emerald-900 hover:-translate-y-1 active:scale-95 transition-all"
|
|
>
|
|
Mulai Temukan Jurusan
|
|
</a>
|
|
</div>
|
|
|
|
<div class="swiper-slide text-center py-12">
|
|
<h2 class="text-5xl font-black text-emerald-950 mb-6">
|
|
Kenali Potensimu Lebih Awal
|
|
</h2>
|
|
|
|
<p class="max-w-xl mx-auto text-emerald-900/60 mb-8 text-lg italic leading-relaxed">
|
|
ASGARD membantu siswa melihat kecocokan jurusan berdasarkan data nilai, minat, bakat, ekonomi, dan data pendukung alumni.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<!-- TENTANG -->
|
|
<section id="tentang" class="section-space px-6 bg-white">
|
|
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
|
|
|
|
<div data-aos="fade-right">
|
|
<p class="text-green-600 font-black uppercase tracking-[0.3em] text-xs mb-4">
|
|
Tentang Sistem
|
|
</p>
|
|
|
|
<h2 class="text-4xl font-black text-emerald-950 mb-8 uppercase italic tracking-tighter">
|
|
Apa itu ASGARD?
|
|
</h2>
|
|
|
|
<p class="text-slate-600 leading-relaxed text-lg mb-6">
|
|
<strong>ASGARD</strong> adalah sistem rekomendasi jurusan kuliah yang dirancang untuk membantu siswa SMAN 4 Jember dalam menentukan pilihan jurusan yang sesuai dengan profil siswa.
|
|
</p>
|
|
|
|
<p class="text-slate-600 leading-relaxed text-lg font-medium border-l-4 border-green-500 pl-6">
|
|
Sistem ini memanfaatkan data siswa sebagai dasar analisis, sehingga rekomendasi yang diberikan tidak hanya berdasarkan perkiraan, tetapi berdasarkan pola data yang telah diproses oleh sistem.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Gambar animasi -->
|
|
<div class="flex justify-center" data-aos="zoom-in">
|
|
<img
|
|
src="https://illustrations.popsy.co/emerald/student-going-to-school.svg"
|
|
alt="Ilustrasi siswa"
|
|
class="student-animation w-full max-w-sm"
|
|
>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CARA KERJA -->
|
|
<section id="cara-kerja" class="section-space px-6 bg-green-50/50">
|
|
<div class="max-w-7xl mx-auto">
|
|
|
|
<!-- Judul cara kerja -->
|
|
<div class="text-center mb-14">
|
|
<p class="text-green-600 font-black uppercase tracking-[0.3em] text-xs mb-4">
|
|
Alur Sistem
|
|
</p>
|
|
|
|
<h2 class="text-4xl font-black text-emerald-950 italic uppercase">
|
|
Cara Kerja ASGARD
|
|
</h2>
|
|
|
|
<p class="max-w-2xl mx-auto text-emerald-900/60 font-medium mt-4">
|
|
Sistem bekerja dengan mengolah data profil siswa, kemudian menghasilkan rekomendasi jurusan kuliah yang paling sesuai.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Card alur sistem -->
|
|
<div class="grid md:grid-cols-3 gap-6 mb-16">
|
|
|
|
<div class="full-hover-card card-white bg-white rounded-3xl p-8 shadow-sm border border-emerald-100" data-aos="fade-up">
|
|
<div class="number-box w-12 h-12 rounded-2xl bg-green-100 text-green-700 flex items-center justify-center font-black mb-6">
|
|
1
|
|
</div>
|
|
|
|
<h3 class="card-title font-black text-emerald-950 text-xl mb-3">
|
|
Siswa Mengisi Data
|
|
</h3>
|
|
|
|
<p class="card-text text-slate-500 leading-relaxed text-sm">
|
|
Siswa mengisi data yang dibutuhkan, seperti nilai rapor, minat dan bakat, serta informasi pendukung lainnya.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="full-hover-card card-dark bg-emerald-900 rounded-3xl p-8 shadow-xl text-white border border-emerald-900" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="number-box w-12 h-12 rounded-2xl bg-green-500 text-white flex items-center justify-center font-black mb-6">
|
|
2
|
|
</div>
|
|
|
|
<h3 class="card-title font-black text-xl mb-3 text-white">
|
|
Sistem Memproses Data
|
|
</h3>
|
|
|
|
<p class="card-text text-emerald-100/70 leading-relaxed text-sm">
|
|
Data yang sudah dimasukkan akan diproses oleh sistem menggunakan model Random Forest untuk membaca pola kecocokan jurusan.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="full-hover-card card-white bg-white rounded-3xl p-8 shadow-sm border border-emerald-100" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="number-box w-12 h-12 rounded-2xl bg-green-100 text-green-700 flex items-center justify-center font-black mb-6">
|
|
3
|
|
</div>
|
|
|
|
<h3 class="card-title font-black text-emerald-950 text-xl mb-3">
|
|
Rekomendasi Ditampilkan
|
|
</h3>
|
|
|
|
<p class="card-text text-slate-500 leading-relaxed text-sm">
|
|
Sistem menampilkan hasil rekomendasi jurusan kuliah yang dapat digunakan siswa sebagai bahan pertimbangan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Judul data analisis -->
|
|
<div class="text-center mb-10">
|
|
<h3 class="text-2xl font-black text-emerald-950 italic uppercase">
|
|
Data yang Dianalisis
|
|
</h3>
|
|
|
|
<p class="text-emerald-900/50 font-bold tracking-widest text-[10px] mt-2 uppercase">
|
|
Dasar Pembentukan Rekomendasi
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Card data analisis -->
|
|
<div class="grid md:grid-cols-4 gap-6">
|
|
|
|
<div class="full-hover-card card-white bg-white rounded-3xl p-10 flex flex-col justify-between h-80 shadow-sm border border-emerald-100" data-aos="fade-up">
|
|
<span class="card-icon text-4xl">📝</span>
|
|
|
|
<div>
|
|
<h4 class="card-title font-black text-emerald-950 mb-2 uppercase">
|
|
Nilai Rapor
|
|
</h4>
|
|
|
|
<p class="card-text text-sm text-slate-500 leading-relaxed">
|
|
Digunakan untuk melihat kemampuan akademik siswa pada beberapa mata pelajaran.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="full-hover-card card-dark bg-emerald-900 rounded-3xl p-10 flex flex-col justify-between h-80 text-white shadow-xl border border-emerald-900" data-aos="fade-up" data-aos-delay="100">
|
|
<span class="card-icon text-4xl">🧠</span>
|
|
|
|
<div>
|
|
<h4 class="card-title font-black mb-2 uppercase text-green-400">
|
|
Minat & Bakat
|
|
</h4>
|
|
|
|
<p class="card-text text-sm text-emerald-100/60 leading-relaxed">
|
|
Digunakan untuk mengetahui kecenderungan minat siswa terhadap bidang tertentu.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="full-hover-card card-yellow bg-yellow-400 rounded-3xl p-10 flex flex-col justify-between h-80 shadow-sm border border-yellow-400" data-aos="fade-up" data-aos-delay="200">
|
|
<span class="card-icon text-4xl">💰</span>
|
|
|
|
<div>
|
|
<h4 class="card-title font-black text-emerald-900 mb-2 uppercase">
|
|
Ekonomi
|
|
</h4>
|
|
|
|
<p class="card-text text-sm text-emerald-900/70 leading-relaxed font-bold">
|
|
Digunakan sebagai data pendukung dalam menyesuaikan pilihan jurusan dengan kondisi keluarga.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="full-hover-card card-white bg-white rounded-3xl p-10 flex flex-col justify-between h-80 shadow-sm border border-emerald-100" data-aos="fade-up" data-aos-delay="300">
|
|
<span class="card-icon text-4xl">🎓</span>
|
|
|
|
<div>
|
|
<h4 class="card-title font-black text-emerald-950 mb-2 uppercase">
|
|
Data Alumni
|
|
</h4>
|
|
|
|
<p class="card-text text-sm text-slate-500 leading-relaxed">
|
|
Digunakan sebagai data pendukung untuk melihat pola jurusan dari alumni sebelumnya.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section id="faq" class="section-space px-6 bg-white">
|
|
<div class="max-w-3xl mx-auto" x-data="{ active: 1 }">
|
|
|
|
<!-- Judul FAQ -->
|
|
<div class="text-center mb-14">
|
|
<p class="text-green-600 font-black uppercase tracking-[0.3em] text-xs mb-4">
|
|
FAQ
|
|
</p>
|
|
|
|
<h2 class="text-4xl font-black text-emerald-950 italic">
|
|
Pertanyaan Umum
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Isi FAQ -->
|
|
<div class="space-y-4">
|
|
|
|
<div class="faq-card bg-white rounded-3xl border border-green-100 overflow-hidden shadow-sm">
|
|
<button
|
|
@click="active = (active === 1 ? null : 1)"
|
|
class="w-full px-8 py-6 text-left font-bold text-emerald-900 flex justify-between items-center transition"
|
|
type="button"
|
|
>
|
|
<span>Bagaimana cara kerja ASGARD?</span>
|
|
|
|
<svg class="w-5 h-5 transition-transform" :class="active === 1 ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<div
|
|
x-show="active === 1"
|
|
x-transition
|
|
class="px-8 pb-6 text-slate-500 leading-relaxed"
|
|
>
|
|
ASGARD memproses data profil siswa, seperti nilai rapor, minat dan bakat, ekonomi, serta data pendukung alumni. Data tersebut kemudian dianalisis oleh sistem untuk menghasilkan rekomendasi jurusan kuliah.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-card bg-white rounded-3xl border border-green-100 overflow-hidden shadow-sm">
|
|
<button
|
|
@click="active = (active === 2 ? null : 2)"
|
|
class="w-full px-8 py-6 text-left font-bold text-emerald-900 flex justify-between items-center transition"
|
|
type="button"
|
|
>
|
|
<span>Apakah hasil rekomendasi harus diikuti sepenuhnya?</span>
|
|
|
|
<svg class="w-5 h-5 transition-transform" :class="active === 2 ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<div
|
|
x-show="active === 2"
|
|
x-transition
|
|
class="px-8 pb-6 text-slate-500 leading-relaxed"
|
|
>
|
|
Tidak. Hasil rekomendasi digunakan sebagai bahan pertimbangan. Siswa tetap dapat berdiskusi dengan guru BK, orang tua, atau wali kelas sebelum menentukan pilihan jurusan.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-card bg-white rounded-3xl border border-green-100 overflow-hidden shadow-sm">
|
|
<button
|
|
@click="active = (active === 3 ? null : 3)"
|
|
class="w-full px-8 py-6 text-left font-bold text-emerald-900 flex justify-between items-center transition"
|
|
type="button"
|
|
>
|
|
<span>Siapa yang dapat menggunakan sistem ini?</span>
|
|
|
|
<svg class="w-5 h-5 transition-transform" :class="active === 3 ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<div
|
|
x-show="active === 3"
|
|
x-transition
|
|
class="px-8 pb-6 text-slate-500 leading-relaxed"
|
|
>
|
|
Sistem ini digunakan oleh siswa dan admin sekolah. Siswa dapat melihat rekomendasi jurusan, sedangkan admin dapat mengelola data yang dibutuhkan oleh sistem.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="bg-[#062C22] text-white py-16 px-6">
|
|
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12">
|
|
|
|
<div class="space-y-6">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-black text-2xl tracking-tighter uppercase italic">
|
|
ASGARD.
|
|
</span>
|
|
</div>
|
|
|
|
<p class="text-slate-300 text-sm leading-relaxed max-w-xs">
|
|
Sistem rekomendasi jurusan kuliah SMAN 4 Jember berbasis data.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h5 class="font-bold text-xs uppercase tracking-widest text-emerald-400 mb-6 italic">
|
|
Informasi
|
|
</h5>
|
|
|
|
<ul class="space-y-4 text-sm text-slate-300">
|
|
<li>
|
|
<a href="{{ route('panduan') }}" class="hover:text-white transition">
|
|
Panduan Sistem
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ route('landingpage') }}#faq" class="hover:text-white transition">
|
|
FAQ
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h5 class="font-bold text-xs uppercase tracking-widest text-emerald-400 mb-6 italic">
|
|
Sekolah
|
|
</h5>
|
|
|
|
<ul class="space-y-4 text-sm text-slate-300">
|
|
<li>SMAN 4 Jember</li>
|
|
<li>Jl. Wolter Monginsidi No.24</li>
|
|
<li>Jember, Jawa Timur</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto mt-16 pt-8 border-t border-white/10 text-center">
|
|
<p class="text-[10px] font-medium uppercase tracking-[0.5em] text-slate-400">
|
|
© 2026 GALANG SEFIAN ADJI - POLITEKNIK NEGERI JEMBER
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Script animasi -->
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
|
|
<!-- Script slider -->
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
|
|
<script>
|
|
// Animasi saat scroll
|
|
AOS.init({
|
|
duration: 1000,
|
|
once: true
|
|
});
|
|
|
|
// Slider pada hero
|
|
new Swiper(".heroSwiper", {
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true
|
|
},
|
|
autoplay: {
|
|
delay: 4000
|
|
},
|
|
loop: true,
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |