179 lines
11 KiB
PHP
179 lines
11 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ASGARD - Rekomendasi Jurusan SMAN 4 Jember</title>
|
|
|
|
<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;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Plus Jakarta Sans', sans-serif; }
|
|
.text-gradient {
|
|
background: linear-gradient(to right, #10b981, #059669);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body x-data="{ atTop: true }" @scroll.window="atTop = (window.pageYOffset > 50 ? false : true)" class="flex flex-col min-h-screen">
|
|
|
|
<nav class="fixed w-full z-50 transition-all duration-500 px-6 py-4" :class="atTop ? 'bg-transparent' : 'bg-white/90 backdrop-blur-xl shadow-lg border-b border-green-100'">
|
|
<div class="max-w-7xl mx-auto flex items-center justify-between">
|
|
<div 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>
|
|
</div>
|
|
<div class="hidden md:flex space-x-10 text-[11px] font-bold uppercase tracking-widest text-emerald-900">
|
|
<a href="#tentang" class="hover:text-green-600 transition">Tentang</a>
|
|
<a href="#fitur" class="hover:text-green-600 transition">Variabel</a>
|
|
<a href="#faq" class="hover:text-green-600 transition">FAQ</a>
|
|
</div>
|
|
<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>
|
|
</nav>
|
|
|
|
<main class="flex-grow">
|
|
<header class="pt-32 pb-20 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-6xl 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 cerdas penentu masa depan siswa SMAN 4 Jember.
|
|
</p>
|
|
<a href="{{ route('login') }}" class="bg-green-600 text-white px-12 py-5 rounded-2xl font-bold uppercase text-xs tracking-widest shadow-2xl 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">Kenapa ASGARD?</h2>
|
|
<p class="max-w-xl mx-auto text-emerald-900/60 mb-8 text-lg italic leading-relaxed">
|
|
"Membantu 87% mahasiswa yang sering merasa salah jurusan dengan bimbingan berbasis data objektif."
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section id="tentang" class="py-24 px-6">
|
|
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
|
|
<div data-aos="fade-right">
|
|
<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 singkatan dari <em>AI System for Graduation & Academic Recommendation</em>. Ini adalah platform rekomendasi jurusan kuliah yang dirancang khusus untuk memandu siswa SMAN 4 Jember menemukan jalur karir terbaik.
|
|
</p>
|
|
<p class="text-slate-600 leading-relaxed text-lg font-medium border-l-4 border-green-500 pl-6">
|
|
Sistem ini tidak hanya menebak, tapi menghitung potensi diri berdasarkan variabel nyata yang ada pada profilmu.
|
|
</p>
|
|
</div>
|
|
<div class="flex justify-center" data-aos="zoom-in">
|
|
<img src="https://illustrations.popsy.co/emerald/student-going-to-school.svg" alt="Student" class="w-full max-w-sm animate-float">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="fitur" class="py-24 px-6 bg-green-50/50">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl font-black text-emerald-950 italic uppercase">Variabel Analisis Kami</h2>
|
|
<p class="text-emerald-900/50 font-bold tracking-widest text-[10px] mt-2 uppercase">Dasar Prediksi Rekomendasi</p>
|
|
</div>
|
|
<div class="grid md:grid-cols-4 gap-6">
|
|
<div class="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="text-4xl">📝</span>
|
|
<div>
|
|
<h4 class="font-black text-emerald-950 mb-2 uppercase">Nilai Rapor</h4>
|
|
<p class="text-sm text-slate-500 leading-relaxed">Analisis performa akademikmu selama 5 semester terakhir.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-emerald-900 rounded-3xl p-10 flex flex-col justify-between h-80 text-white shadow-xl" data-aos="fade-up" data-aos-delay="100">
|
|
<span class="text-4xl">🧠</span>
|
|
<div>
|
|
<h4 class="font-black mb-2 uppercase text-green-400">Minat & Bakat</h4>
|
|
<p class="text-sm text-emerald-100/60 leading-relaxed">Memetakan kecenderungan bakatmu melalui kuesioner psikologi.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-yellow-400 rounded-3xl p-10 flex flex-col justify-between h-80 shadow-sm" data-aos="fade-up" data-aos-delay="200">
|
|
<span class="text-4xl">💰</span>
|
|
<div>
|
|
<h4 class="font-black text-emerald-900 mb-2 uppercase">Kondisi Ekonomi</h4>
|
|
<p class="text-sm text-emerald-900/60 leading-relaxed font-bold">Menyesuaikan pilihan jurusan dengan kesiapan finansial keluarga.</p>
|
|
</div>
|
|
</div>
|
|
<div class="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="text-4xl">🎓</span>
|
|
<div>
|
|
<h4 class="font-black text-emerald-950 mb-2 uppercase">Data Alumni</h4>
|
|
<p class="text-sm text-slate-500 leading-relaxed">Dicocokkan dengan tingkat keberhasilan alumni SMAPA di berbagai PTN.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="faq" class="py-24 px-6">
|
|
<div class="max-w-3xl mx-auto" x-data="{ active: 1 }">
|
|
<h2 class="text-center text-4xl font-black text-emerald-950 mb-16 italic">Pertanyaan Umum</h2>
|
|
<div class="space-y-4">
|
|
<div class="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">
|
|
<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" class="px-8 pb-6 text-slate-500 leading-relaxed">ASGARD memproses semua variabel profilmu menggunakan algoritma AI untuk menghasilkan persentase kecocokan jurusan yang paling optimal.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<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 pakar rekomendasi jurusan kuliah SMAN 4 Jember berbasis data-driven.
|
|
</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="#" class="hover:text-white transition">Kebijakan Privasi</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 src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
<script>
|
|
AOS.init({ duration: 1000, once: true });
|
|
new Swiper(".heroSwiper", {
|
|
pagination: { el: ".swiper-pagination", clickable: true },
|
|
autoplay: { delay: 4000 },
|
|
loop: true,
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |