<!DOCTYPE html><html lang="id"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Waluya Buton — Universitas Mandala Waluya</title> <meta name="description" content="Portal Waluya Buton Universitas Mandala Waluya — Informasi, layanan, dan sumber daya terbaru untuk sivitas akademika."> <meta property="og:title" content="Waluya Buton — Universitas Mandala Waluya"> <meta property="og:description" content="Portal Waluya Buton Universitas Mandala Waluya — Informasi, layanan, dan sumber daya terbaru untuk sivitas akademika."> <meta property="og:url" content="http://waluya-buton.ac.id/"> <meta property="og:image" content="http://waluya-buton.ac.id/assets/ogimage.jpg"> <meta property="og:type" content="website"> <meta property="og:site_name" content="waluya-buton.ac.id"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Waluya Buton — Universitas Mandala Waluya"> <meta name="twitter:description" content="Portal Waluya Buton Universitas Mandala Waluya — Informasi, layanan, dan sumber daya terbaru untuk sivitas akademika."> <meta name="twitter:image" content="http://waluya-buton.ac.id/assets/ogimage.jpg"> <link rel="canonical" href="https://waluya-buton.ac.id/"> <link rel="icon" href="https://waluya-buton.ac.id/assets/universitas.png"> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com" type="b6f3266281ef4384330bd005-text/javascript"></script></head><body> <!-- Navigation --><nav id="navbar" class="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-100 transition-all duration-300"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-16"> <!-- Logo --> <div class="flex-shrink-0 flex items-center space-x-3"> <img src="assets/universitas.png" alt="Logo" class="h-10"> <h1 class="text-xl font-bold text-gray-900">Universitas Negeri </h1> </div> <!-- Desktop Navigation --> <div class="hidden md:flex space-x-8"> <a href="#beranda" class="text-gray-700 hover:text-blue-600 transition-colors">Beranda</a> <a href="#tentang" class="text-gray-700 hover:text-blue-600 transition-colors">Tentang</a> <a href="#fasilitas" class="text-gray-700 hover:text-blue-600 transition-colors">Fasilitas</a> <a href="#guru" class="text-gray-700 hover:text-blue-600 transition-colors">Dosen</a> <a href="#kontak" class="text-gray-700 hover:text-blue-600 transition-colors">Kontak</a> </div> <!-- Mobile menu button --> <div class="md:hidden"> <button id="mobile-menu-btn" class="text-gray-500 hover:text-gray-600"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> </div> <!-- Mobile Navigation --> <div id="mobile-menu" class="hidden md:hidden py-4 border-t border-gray-100"> <div class="flex flex-col space-y-4"> <a href="#beranda" class="text-gray-700 hover:text-blue-600 transition-colors">Beranda</a> <a href="#tentang" class="text-gray-700 hover:text-blue-600 transition-colors">Tentang</a> <a href="#fasilitas" class="text-gray-700 hover:text-blue-600 transition-colors">Fasilitas</a> <a href="#guru" class="text-gray-700 hover:text-blue-600 transition-colors">Dosen</a> <a href="#kontak" class="text-gray-700 hover:text-blue-600 transition-colors">Kontak</a> </div> </div> </div></nav> <!-- Hero Section with Parallax --><section id="beranda" class="relative h-[65vh] flex items-center justify-center text-white overflow-hidden"> <!-- Parallax Background Layers --> <div class="absolute inset-0 parallax-bg"> <!-- Base gradient --> <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700"></div> <!-- Parallax layer 1 - Slow moving shapes --> <div class="absolute inset-0 parallax-layer" data-speed="0.5"> <div class="absolute top-10 left-10 w-64 h-64 bg-white/5 rounded-full blur-xl"></div> <div class="absolute top-40 right-20 w-96 h-96 bg-white/3 rounded-full blur-2xl"></div> <div class="absolute bottom-20 left-1/4 w-80 h-80 bg-white/4 rounded-full blur-xl"></div> </div> <!-- Parallax layer 2 - Medium speed geometric shapes --> <div class="absolute inset-0 parallax-layer" data-speed="0.8"> <div class="absolute top-32 right-40 w-32 h-32 border border-white/20 rotate-45 rounded-lg"></div> <div class="absolute bottom-40 right-20 w-24 h-24 border border-white/15 rotate-12 rounded-lg"></div> <div class="absolute top-1/2 left-20 w-40 h-40 border border-white/10 -rotate-12 rounded-lg"></div> </div> <!-- Parallax layer 3 - Fast moving particles --> <div class="absolute inset-0 parallax-layer" data-speed="1.2"> <div class="absolute top-20 left-1/3 w-3 h-3 bg-white/30 rounded-full"></div> <div class="absolute top-60 right-1/3 w-2 h-2 bg-white/40 rounded-full"></div> <div class="absolute bottom-32 left-1/2 w-4 h-4 bg-white/25 rounded-full"></div> <div class="absolute top-1/3 right-1/4 w-2 h-2 bg-white/35 rounded-full"></div> <div class="absolute bottom-1/4 left-1/4 w-3 h-3 bg-white/30 rounded-full"></div> </div> <!-- Animated grid overlay --> <div class="absolute inset-0 opacity-10"> <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none"> <defs> <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"> <path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5"/> </pattern> </defs> <rect width="100%" height="100%" fill="url(#grid)" /> </svg> </div> </div> <!-- Content --> <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <div class="animate-fade-in-up"> <h1 class="text-4xl md:text-6xl font-bold mb-6 tracking-tight"> Waluya Buton — Universitas Mandala Waluya </h1> <p class="text-xl md:text-2xl mb-8 text-blue-100 max-w-3xl mx-auto leading-relaxed"> Portal Waluya Buton Universitas Mandala Waluya — Informasi, layanan, dan sumber daya terbaru untuk sivitas akademika. </p> <div class="flex flex-col sm:flex-row gap-6 justify-center mt-12"> <a href="#tentang" class="group relative bg-gradient-to-r from-white to-gray-50 text-blue-600 px-10 py-5 rounded-2xl font-bold text-lg hover:from-blue-50 hover:to-blue-100 transition-all duration-500 shadow-2xl hover:shadow-blue-200/50 transform hover:-translate-y-2 hover:scale-105 overflow-hidden"> <!-- Button shine effect --> <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div> <span class="relative z-10 flex items-center justify-center"> Pelajari Lebih Lanjut <svg class="ml-3 w-5 h-5 transition-transform duration-300 group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path> </svg> </span> </a> <a href="#kontak" class="group relative border-3 border-white text-white px-10 py-5 rounded-2xl font-bold text-lg hover:bg-white hover:text-blue-600 transition-all duration-500 shadow-2xl hover:shadow-white/30 transform hover:-translate-y-2 hover:scale-105 overflow-hidden backdrop-blur-sm bg-white/10"> <!-- Button pulse effect --> <div class="absolute inset-0 bg-white/20 rounded-2xl animate-pulse opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <span class="relative z-10 flex items-center justify-center"> Hubungi Kami <svg class="ml-3 w-5 h-5 transition-transform duration-300 group-hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> </span> </a> </div> </div> </div> </div> </div></section> <!-- About Section --><section id="tentang" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl font-bold text-gray-900 mb-4">Tentang Kampus</h2> <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> Menciptakan generasi yang cerdas, berkarakter, dan siap menghadapi tantangan masa depan </p> </div> <div class="grid lg:grid-cols-2 gap-16 items-center"> <!-- Content --> <div> <h3 class="text-3xl font-bold text-gray-900 mb-6">Visi & Misi Universitas</h3> <p class="text-lg text-gray-600 mb-8 leading-relaxed"> Waluya Buton — Universitas Mandala Waluya berkomitmen pada tridharma perguruan tinggi: pendidikan, penelitian, dan pengabdian kepada masyarakat. </p> <div class="space-y-4"> <div class="flex items-start space-x-4"> <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0"> <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> </div> <div> <h4 class="text-lg font-semibold text-gray-900 mb-1">Pendidikan Tinggi Berkualitas</h4> <p class="text-gray-600">Kurikulum modern dengan standar internasional yang disesuaikan dengan kebutuhan zaman</p> </div> </div> <div class="flex items-start space-x-4"> <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0"> <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path> </svg> </div> <div> <h4 class="text-lg font-semibold text-gray-900 mb-1">Pengembangan Karakter</h4> <p class="text-gray-600">Mengembangkan nilai-nilai moral, etika, dan kepribadian yang kuat</p> </div> </div> <div class="flex items-start space-x-4"> <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0"> <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> </svg> </div> <div> <h4 class="text-lg font-semibold text-gray-900 mb-1">Riset & Inovasi</h4> <p class="text-gray-600">Metode pembelajaran kreatif dan teknologi terdepan untuk hasil optimal</p> </div> </div> </div> </div> <!-- Statistics --> <div class="grid grid-cols-2 gap-6"> <div class="bg-blue-50 rounded-2xl p-8 text-center"> <div class="text-4xl font-bold text-blue-600 mb-2">10.000+</div> <div class="text-gray-700 font-medium">Mahasiswa Aktif</div> </div> <div class="bg-green-50 rounded-2xl p-8 text-center"> <div class="text-4xl font-bold text-green-600 mb-2">500+</div> <div class="text-gray-700 font-medium">Dosen & Peneliti</div> </div> <div class="bg-purple-50 rounded-2xl p-8 text-center"> <div class="text-4xl font-bold text-purple-600 mb-2">40+</div> <div class="text-gray-700 font-medium">Program Studi</div> </div> <div class="bg-yellow-50 rounded-2xl p-8 text-center"> <div class="text-4xl font-bold text-yellow-600 mb-2">100+</div> <div class="text-gray-700 font-medium">Kerja Sama Industri</div> </div> </div> </div> </div></section> <!-- Facilities Section --><section id="fasilitas" class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl font-bold text-gray-900 mb-4">Fasilitas Kampus</h2> <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> Fasilitas modern dan lengkap untuk mendukung proses pembelajaran yang optimal </p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition duration-300 text-center"> <!-- Icon --> <div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-6"> <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> </div> <h3 class="text-xl font-bold text-gray-900 mb-4"> Laboratorium Riset </h3> <p class="text-gray-600 leading-relaxed"> Fasilitas riset dengan peralatan modern untuk inovasi multidisiplin. </p> </div> <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition duration-300 text-center"> <!-- Icon --> <div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-6"> <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path> </svg> </div> <h3 class="text-xl font-bold text-gray-900 mb-4"> Perpustakaan Digital </h3> <p class="text-gray-600 leading-relaxed"> Akses jurnal, e-book, dan repositori ilmiah internasional 24/7. </p> </div> <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition duration-300 text-center"> <!-- Icon --> <div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-6"> <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> </svg> </div> <h3 class="text-xl font-bold text-gray-900 mb-4"> Pusat Karier & Inkubasi </h3> <p class="text-gray-600 leading-relaxed"> Dukungan karier, magang, kewirausahaan, dan inkubator startup kampus. </p> </div> </div> </div></section> <!-- Teachers Section --><section id="guru" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl font-bold text-gray-900 mb-4">Dosen & Peneliti</h2> <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> Para dosen dan peneliti berpengalaman yang siap membimbing mahasiswa meraih prestasi terbaik </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="bg-gray-50 rounded-2xl overflow-hidden hover:shadow-lg transition duration-300"> <div class="aspect-square overflow-hidden"> <img src="assets/guru1.jpg" alt="Dr. Nilam Anggarini" class="w-full h-full object-cover"> </div> <div class="p-6 text-center"> <h3 class="text-lg font-bold text-gray-900 mb-2"> Dr. Nilam Anggarini </h3> <p class="text-blue-600 font-semibold"> Kecerdasan Buatan </p> </div> </div> <div class="bg-gray-50 rounded-2xl overflow-hidden hover:shadow-lg transition duration-300"> <div class="aspect-square overflow-hidden"> <img src="assets/guru2.jpg" alt="Dr. Sari Maimunah" class="w-full h-full object-cover"> </div> <div class="p-6 text-center"> <h3 class="text-lg font-bold text-gray-900 mb-2"> Dr. Sari Maimunah </h3> <p class="text-blue-600 font-semibold"> Linguistik Terapan </p> </div> </div> <div class="bg-gray-50 rounded-2xl overflow-hidden hover:shadow-lg transition duration-300"> <div class="aspect-square overflow-hidden"> <img src="assets/guru3.jpg" alt="Prof. Joko Susilo" class="w-full h-full object-cover"> </div> <div class="p-6 text-center"> <h3 class="text-lg font-bold text-gray-900 mb-2"> Prof. Joko Susilo </h3> <p class="text-blue-600 font-semibold"> Fisika Material </p> </div> </div> <div class="bg-gray-50 rounded-2xl overflow-hidden hover:shadow-lg transition duration-300"> <div class="aspect-square overflow-hidden"> <img src="assets/guru4.jpg" alt="Dr. Rina Maisari" class="w-full h-full object-cover"> </div> <div class="p-6 text-center"> <h3 class="text-lg font-bold text-gray-900 mb-2"> Dr. Rina Maisari </h3> <p class="text-blue-600 font-semibold"> Ekonomi Pembangunan </p> </div> </div> </div> </div></section> <!-- Contact Section --><section id="kontak" class="py-20 bg-blue-600 text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl font-bold mb-4">Hubungi Kami</h2> <div class="w-20 h-1 bg-white mx-auto mb-6"></div> <p class="text-xl text-blue-100 max-w-3xl mx-auto"> Kami siap membantu menjawab pertanyaan dan memberikan informasi yang Anda butuhkan </p> </div> <div class="grid lg:grid-cols-2 gap-16"> <!-- Contact Info --> <div class="space-y-8"> <!-- Location Map --> <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6"> <h4 class="text-xl font-semibold mb-3">Lokasi Kami</h4> <div class="rounded-lg overflow-hidden shadow-md" style="position:relative;padding-bottom:56.25%;height:0;"> <iframe src="https://www.google.com/maps?q=Jl.+Pendidikan+No.+02&output=embed" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade" ></iframe> </div> <p class="text-sm text-blue-100 mt-3">Alamat: Jl. Pendidikan No. 02</p> </div> <!-- Operating Hours --> <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6"> <h4 class="text-xl font-semibold mb-4">Jam Operasional</h4> <ul class="space-y-2 text-blue-100"> <li class="flex justify-between"> <span>Senin – Jumat</span> <span class="font-semibold text-white">07.00 – 15.00</span> </li> <li class="flex justify-between"> <span>Sabtu</span> <span class="font-semibold text-white">07.00 – 12.00</span> </li> <li class="flex justify-between"> <span>Minggu</span> <span class="font-semibold text-white">Tutup</span> </li> </ul> </div> </div> <!-- Contact Form --> <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8"> <h3 class="text-2xl font-bold mb-6">Kirim Pesan</h3> <form class="space-y-6"> <div class="grid md:grid-cols-2 gap-6"> <input type="text" placeholder="Nama Lengkap" class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"> <input type="email" placeholder="Email" class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"> </div> <input type="text" placeholder="Subjek" class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"> <textarea rows="4" placeholder="Pesan Anda" class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50 resize-none"></textarea> <button type="submit" class="w-full bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-200"> Kirim Pesan </button> </form> </div> </div> </div></section> <style>/* Parallax and Animation Styles */@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); }} .animate-fade-in-up { animation: fadeInUp 1s ease-out;} .parallax-layer { transition: transform 0.1s ease-out;} /* Enhanced scroll indicator */@keyframes scrollIndicator { 0%, 20% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: 0.5; } 100% { transform: translateY(0); opacity: 1; }} .animate-bounce .w-1 { animation: scrollIndicator 2s infinite;} /* Button Enhancements */@keyframes shimmer { 0% { transform: translateX(-100%) skewX(-12deg); } 100% { transform: translateX(200%) skewX(-12deg); }} @keyframes buttonPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }} .group:hover .bg-gradient-to-r { animation: shimmer 1s ease-in-out;} /* Custom border width */.border-3 { border-width: 3px;} /* Enhanced button effects */.group:hover { animation: buttonPulse 2s infinite;} /* Mouse scroll animation */@keyframes mouseScroll { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(6px); opacity: 0.5; } 100% { transform: translateY(0); opacity: 1; }} .animate-bounce .w-1\.5 { animation: mouseScroll 2s infinite ease-in-out;}</style> <script type="b6f3266281ef4384330bd005-text/javascript">document.addEventListener('DOMContentLoaded', function() { // Mobile menu toggle const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); if (mobileMenuBtn && mobileMenu) { mobileMenuBtn.addEventListener('click', function() { mobileMenu.classList.toggle('hidden'); }); } // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); // Close mobile menu if open if (mobileMenu && !mobileMenu.classList.contains('hidden')) { mobileMenu.classList.add('hidden'); } } }); }); // Navbar scroll effect window.addEventListener('scroll', function() { const navbar = document.getElementById('navbar'); if (window.scrollY > 50) { navbar.classList.add('shadow-lg', 'bg-white/95', 'backdrop-blur-sm'); } else { navbar.classList.remove('shadow-lg', 'bg-white/95', 'backdrop-blur-sm'); } }); // Parallax Effect const parallaxLayers = document.querySelectorAll('.parallax-layer'); function updateParallax() { const scrollTop = window.pageYOffset; const heroSection = document.getElementById('beranda'); if (heroSection) { const heroBottom = heroSection.offsetTop + heroSection.offsetHeight; // Only apply parallax when hero section is visible if (scrollTop < heroBottom) { parallaxLayers.forEach(layer => { const speed = parseFloat(layer.getAttribute('data-speed')); const yPos = -(scrollTop * speed); layer.style.transform = `translate3d(0, ${yPos}px, 0)`; }); } } } // Throttle parallax updates for better performance let ticking = false; function requestParallaxUpdate() { if (!ticking) { requestAnimationFrame(() => { updateParallax(); ticking = false; }); ticking = true; } } // Add scroll event listener for parallax window.addEventListener('scroll', requestParallaxUpdate); // Initial parallax update updateParallax();});</script> <!-- Footer --><footer id="footer" class="bg-gray-900 text-white relative overflow-hidden"> <div class="relative z-10"> <!-- Main Footer Content --> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <!-- University Info --> <div class="md:col-span-2"> <div class="flex items-center space-x-3 mb-6"> <img src="assets/universitas.png" alt="Logo" class="h-10"> <h3 class="text-2xl font-bold text-blue-400"> Waluya Buton — Universitas Mandala Waluya </h3> </div> <p class="text-gray-300 mb-6 leading-relaxed"> Portal Waluya Buton Universitas Mandala Waluya — Informasi, layanan, dan sumber daya terbaru untuk sivitas akademika. </p> <div class="flex space-x-4"> <a href="#" class="bg-blue-600 hover:bg-blue-700 p-3 rounded-full transition duration-300 transform hover:scale-110"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" /> </svg> </a> <a href="#" class="bg-blue-600 hover:bg-blue-700 p-3 rounded-full transition duration-300 transform hover:scale-110"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z" /> </svg> </a> <a href="#" class="bg-blue-600 hover:bg-blue-700 p-3 rounded-full transition duration-300 transform hover:scale-110"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.748-1.378 0 0-.599 2.282-.744 2.840-.282 1.086-1.03 2.486-1.541 3.318C9.494 23.815 10.717 24.001 12.017 24.001c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z" /> </svg> </a> <a href="#" class="bg-blue-600 hover:bg-blue-700 p-3 rounded-full transition duration-300 transform hover:scale-110"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M12.036 6.24c-3.25 0-5.88 2.64-5.88 5.88s2.63 5.88 5.88 5.88c3.25 0 5.88-2.64 5.88-5.88s-2.63-5.88-5.88-5.88zm0 9.71c-2.12 0-3.83-1.71-3.83-3.83s1.71-3.83 3.83-3.83 3.83 1.71 3.83 3.83-1.71 3.83-3.83 3.83zm7.51-9.95c0 .76-.62 1.38-1.38 1.38s-1.38-.62-1.38-1.38.62-1.38 1.38-1.38 1.38.62 1.38 1.38zm3.91 1.4c-.09-1.85-.52-3.49-1.91-4.87-1.38-1.38-3.02-1.82-4.87-1.91-1.92-.11-7.68-.11-9.6 0-1.85.09-3.49.52-4.87 1.91-1.38 1.38-1.82 3.02-1.91 4.87-.11 1.92-.11 7.68 0 9.6.09 1.85.52 3.49 1.91 4.87 1.38 1.38 3.02 1.82 4.87 1.91 1.92.11 7.68.11 9.6 0 1.85-.09 3.49-.52 4.87-1.91 1.38-1.38 1.82-3.02 1.91-4.87.11-1.92.11-7.68 0-9.6zm-2.46 11.64c-.41 1.03-1.21 1.83-2.24 2.24-1.55.61-5.23.47-6.94.47s-5.39.14-6.94-.47c-1.03-.41-1.83-1.21-2.24-2.24-.61-1.55-.47-5.23-.47-6.94s-.14-5.39.47-6.94c.41-1.03 1.21-1.83 2.24-2.24 1.55-.61 5.23-.47 6.94-.47s5.39-.14 6.94.47c1.03.41 1.83 1.21 2.24 2.24.61 1.55.47 5.23.47 6.94s.14 5.39-.47 6.94z" /> </svg> </a> </div> </div> <!-- Quick Links --> <div> <h4 class="text-lg font-semibold mb-6 text-blue-400">Tautan Kampus</h4> <ul class="space-y-3"> <li><a href="#beranda" class="text-gray-300 hover:text-white transition duration-300 flex items-center group"> <svg class="w-4 h-4 mr-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> Beranda </a></li> <li><a href="#tentang" class="text-gray-300 hover:text-white transition duration-300 flex items-center group"> <svg class="w-4 h-4 mr-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> Tentang Kampus </a></li> <li><a href="#fasilitas" class="text-gray-300 hover:text-white transition duration-300 flex items-center group"> <svg class="w-4 h-4 mr-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> Fasilitas </a></li> <li><a href="#guru" class="text-gray-300 hover:text-white transition duration-300 flex items-center group"> <svg class="w-4 h-4 mr-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> Dosen & Peneliti </a></li> <li><a href="#kontak" class="text-gray-300 hover:text-white transition duration-300 flex items-center group"> <svg class="w-4 h-4 mr-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> Kontak </a></li> </ul> </div> <!-- Contact Info --> <div> <h4 class="text-lg font-semibold mb-6 text-blue-400">Informasi Kontak Kampus</h4> <div class="space-y-4"> <div class="flex items-start space-x-3"> <svg class="w-5 h-5 text-blue-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> </svg> <p class="text-gray-300 text-sm"> Jl. Kampus Mandala No. 02, Buton </p> </div> <div class="flex items-center space-x-3"> <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> <p class="text-gray-300 text-sm"> 021-2537-5591 </p> </div> <div class="flex items-center space-x-3"> <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> <p class="text-gray-300 text-sm"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83eaede5ecc3f4e2eff6fae2aee1f6f7ecedade2e0adeae7">[email protected]</a> </p> </div> </div> </div> </div> </div> <!-- Bottom Footer --> <div class="border-t border-gray-800"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> <div class="flex flex-col md:flex-row items-center justify-between"> <div class="text-gray-400 text-sm mb-4 md:mb-0"> © 2025 Waluya Buton — Universitas Mandala Waluya. Seluruh hak cipta dilindungi. </div> <div class="flex items-center space-x-6 text-sm text-gray-400"> <a href="#" class="hover:text-white transition duration-300">Kebijakan Privasi</a> <span>•</span> <a href="#" class="hover:text-white transition duration-300">Syarat & Ketentuan</a> <span>•</span> <a href="#" class="hover:text-white transition duration-300">Sitemap</a> </div> </div> </div> </div> </div> <!-- Back to Top Button --> <button id="backToTop" class="fixed bottom-8 right-8 bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg transform translate-y-16 transition-all duration-300 z-50"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path> </svg> </button></footer> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="b6f3266281ef4384330bd005-text/javascript"> // Back to top button functionality const backToTopButton = document.getElementById('backToTop'); window.addEventListener('scroll', function() { if (window.scrollY > 300) { backToTopButton.style.transform = 'translateY(0)'; } else { backToTopButton.style.transform = 'translateY(4rem)'; } }); backToTopButton.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Add loading animation window.addEventListener('load', function() { document.body.classList.add('loaded'); });</script> <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="b6f3266281ef4384330bd005-|49" defer></script><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"4c6c542bf28145bfb00a780472c52319","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script></body> </html>
