SABDA Youth Learning Center

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.tailwindcss.com"></script> <style> body { font-family: 'Poppins', sans-serif; } .accordion-toggle { display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 10px; /* Adjust spacing between text and icon */ } .accordion-toggle h5 { flex: 1; /* Ensures the text takes up the remaining space */ text-align: left; /* Ensures text stays aligned to the left */ word-break: break-word; /* Allows long words to break onto the next line */ } </style> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" integrity="sha512-XcIsjKMcuVe0Ucj/xgIXQnytNwBttJbNjltBV18IOnru2lDPe9KRRyvCXw6Y5H415vbBLRm8+q6fmLUU7DfO6Q==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" /> <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script> <title>SABDA Youth Learning Center</title> </head> <body class="bg-[#f7fcfe] font-poppins">   <header id="navbar" class='bg-[#f7fcfe] flex py-3 px-4 sm:px-10 min-h-[65px] tracking-wide z-50 sticky top-0 transform transition-all duration-300 ease-in-out shadow-lg'> <div class='flex flex-wrap items-center gap-4 max-w-screen-xl mx-auto w-full'> <a href="https://youth.sabda.org/" class="max-sm:hidden"><img src="https://youth.sabda.org/images/logo_sabdaylc_transparan.png" class="w-24" alt="" srcset=""></a> <a href="https://youth.sabda.org/" class="hidden max-sm:block"><img src="https://youth.sabda.org/images/logo_sabdaylc_transparan.png" class="w-24" alt="" srcset=""></a>  <div class='flex gap-4 ml-auto'>  <button id="toggleOpen" class='lg:hidden'> <svg class="w-7 h-7" fill="#000" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path> </svg> </button> </div>  <div id="collapseMenu" class='max-lg:hidden lg:!block max-lg:w-full max-lg:fixed max-lg:before:fixed max-lg:before:bg-black max-lg:before:opacity-50 max-lg:before:inset-0 max-lg:before:z-50'> <button id="toggleClose" class='lg:hidden fixed top-2 right-4 z-[100] rounded-full bg-white w-9 h-9 flex items-center justify-center border'> <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 fill-black" viewBox="0 0 320.591 320.591"> <path d="M30.391 318.583a30.37 30.37 0 0 1-21.56-7.288c-11.774-11.844-11.774-30.973 0-42.817L266.643 10.665c12.246-11.459 31.462-10.822 42.921 1.424 10.362 11.074 10.966 28.095 1.414 39.875L51.647 311.295a30.366 30.366 0 0 1-21.256 7.288z" data-original="#000000"></path> <path d="M287.9 318.583a30.37 30.37 0 0 1-21.257-8.806L8.83 51.963C-2.078 39.225-.595 20.055 12.143 9.146c11.369-9.736 28.136-9.736 39.504 0l259.331 257.813c12.243 11.462 12.876 30.679 1.414 42.922-.456.487-.927.958-1.414 1.414a30.368 30.368 0 0 1-23.078 7.288z" data-original="#000000"></path> </svg> </button> <ul class='lg:flex lg:ml-14 lg:gap-x-5 max-lg:space-y-3 max-lg:fixed max-lg:bg-[#f7fcfe] bg-transparent max-lg:w-1/2 max-lg:min-w-[300px] max-lg:top-0 max-lg:left-0 max-lg:p-6 max-lg:max-h-[calc(100vh-65px)] max-lg:shadow-md max-lg:overflow-auto z-50'> <li class='mb-6 hidden max-lg:block'> <a href="https://youth.sabda.org/"><img src="https://youth.sabda.org/images/logo_sabdaylc_transparan.png" class="w-24" alt="Logo"></a> </li> <li class='max-lg:border-b max-lg:py-3 px-3'> <a href="https://youth.sabda.org/" class='lg:hover:text-[#8dccd7] text-[#8dccd7] font-bold text-[#012d52] block text-[15px]'> Home </a> </li>  <li class='max-lg:border-b max-lg:py-3 px-3'> <a href="https://youth.sabda.org/faq" class='lg:hover:text-[#8dccd7] text-[#012d52] block text-[15px]'> FAQ </a> </li> </ul> </div> </div> </header>   <div class="relative isolate px-6 lg:px-8"> <div class="absolute w-full lg:w-1/2 inset-y-0 lg:right-0 hidden lg:block"> <span class="absolute -left-6 md:left-4 top-24 lg:top-28 w-24 h-24 rotate-90 skew-x-12 rounded-3xl bg-[#eec2e3] blur-xl opacity-60 lg:opacity-95 lg:block hidden"></span> <span class="absolute right-4 bottom-12 w-24 h-24 rounded-3xl bg-[#8dccd7] blur-xl opacity-80"></span> </div> <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true"> <div class="relative left-[calc(50%-11rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div> </div> <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">  <div class="text-center"> <h1 class="text-5xl font-semibold tracking-tight text-balance sm:text-7xl text-[#012d52]">SABDA Youth Learning Center</h1> <p class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">Tempat untuk pembelajaran interaktif, komunitas, bahan-bahan seputar anak muda. Untuk membantu bertumbuh dalam iman dengan cara yang fresh dan relevan!</p> <div class="mt-10 flex items-center justify-center gap-x-6">   </div> </div> </div> <div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true"> <div class="relative left-[calc(50%+3rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div> </div> </div> </div>   <div class="sm:px-6 px-4 py-18"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> <div class="grid grid-cols-1 lg:grid-cols-2 sm:grid-cols-2 gap-y-8 lg:divide-x-2 lg:divide-gray-300"> <div class="px-8"> <h6 class="text-[#012d52] text-base font-extrabold mb-2">Visi</h6> <p class="text-base text-[#012d52] font-normal mt-2"> Transformasi generasi muda Kristen menjadi pribadi yang berkarakter Kristus dan siap menjalani tantangan zaman dengan iman yang teguh pada era digital/AI. </p> </div> <div class="px-8"> <h6 class="text-[#012d52] text-base font-extrabold mb-2">Misi</h6> <ol class="list-decimal pl-5 text-[#012d52]"> <li>Membina komunitas Kristen online yang aktif dan saling menguatkan.</li> <li>Memfasilitasi pertumbuhan iman anak muda.</li> <li>Menyediakan alat untuk mendalami Alkitab bagi kalangan anak muda.</li> </ol> </div> </div> </div> </div>  <div class="relative overflow-hidden">  <div class="bg-gray-50 sm:px-6 px-4 py-12"> <div class="max-w-7xl mx-auto"> <div class="text-center"> <h2 class="text-3xl font-bold text-[#012d52] inline-block relative after:absolute after:w-4/6 after:h-1 after:left-0 after:right-0 after:-bottom-4 after:mx-auto after:bg-[#8dccd7] after:rounded-full" > LATEST EVENTS </h2> </div> <div class="flex flex-wrap justify-center gap-12 mt-16 max-md:max-w-lg mx-auto">  <div class="rounded overflow-hidden group py-4 md:w-[calc(33.333%-32px)] lg:w-[calc(33.333%-32px)] text-center"> <div> <span class="text-sm block text-[#012d52] mb-2">24 - 27 Februari 2025</span> <h3 class="text-xl font-bold text-[#012d52] group-hover:text-[#8dccd7] transition-all">Shema | Hear & Listen</h3> <img src="https://static.sabda.org/live/brosur/Biblical_Habits/thumb/Biblical_Habits_20250224_YLC_Shema_Thumb.jpg" alt="Shema_YLC" class="w-full h-full object-cover"/> <div class="mt-4"> <p class="text-[#012d52] text-sm">Shema adalah sebuah konsep penting dalam iman Kristen yang mengajarkan kita untuk mendengar dan menaati firman Tuhan.</p> </div> </div> <hr class="my-5 border-[#012d52]" /> <div class="flex flex-wrap items-center gap-3">  <button target="_blank" type="button" class="px-5 py-2.5 rounded-lg text-sm tracking-wider w-full font-bold text-lg border border-[#012d52] outline-none bg-[#012d52] hover:bg-[#f7fcfe] text-[#f7fcfe] hover:text-[#012d52] transition-all duration-300" disabled> Sedang berlangsung.. </button> </div> </div>  </div> </div> </div>   <div class="my-4 mx-4"> <div class="max-w-6xl mx-auto"> <div class="text-center"> <h2 class="text-3xl font-bold text-[#012d52] inline-block relative after:absolute after:w-4/6 after:h-1 after:left-0 after:right-0 after:-bottom-4 after:mx-auto after:bg-[#8dccd7] after:rounded-full"> RELATED VIDEOS </h2> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-16 max-lg:max-w-3xl max-md:max-w-md mx-auto"> <a href="https://sabda.info/sabdayouth?id=381" target="_blank" rel="noopener noreferrer"> <div class="bg-white cursor-pointer rounded overflow-hidden shadow-[0_2px_10px_-3px_rgba(6,81,237,0.3)] relative top-0 hover:-top-2 transition-all duration-300 min-h-full"> <img src="https://static.sabda.org/live/brosur/Biblical_Habits/thumb/Biblical_Habits_20250121_IGLIVE_SABDA_Youth_Learning_Center_Thumb.jpg" alt="Blog Post 1" class="w-full h-96 object-cover"/> <div class="p-6"> <span class="text-sm block text-[#012d52] mb-2">11 Februari 2025 | Speaker: Rei, Milly, Yoes, Evie</span> <h3 class="text-xl font-bold text-[#012d52]"> SABDA Youth Learning Center </h3> <hr class="my-4" /> <p class="text-[#012d52] text-sm"> Bagi kamu yang ngaku generasi muda, yuk "speak up" dari POV-mu tentang gimana gereja dapat menjadi tempat untuk kamu belajar firman Tuhan dan bertumbuh pada era ini. Mau? Join aja dalam IG Live SABDA Youth tentang "SABDA Youth Learning Center" (SABDA YLC), pada Selasa, 21 Januari 2025, pkl. 19.00 WIB, di IG @sabdaresurces. </p> </div> </div> </a> <a href="https://sabda.info/kenalproduk?id=380" target="_blank" rel="noopener noreferrer"> <div class="bg-white cursor-pointer rounded overflow-hidden shadow-[0_2px_10px_-3px_rgba(6,81,237,0.3)] relative top-0 hover:-top-2 transition-all duration-300"> <img src="https://static.sabda.org/live/brosur/Biblical_Habits/thumb/Biblical_Habits_20250120_Kenal_Produk_SABDA_Youth_Learning_Center_Thumb.jpg" alt="Blog Post 2" class="w-full h-96 object-cover"/> <div class="p-6"> <span class="text-sm block text-[#012d52] mb-2"> 20 Januari 2025 | Speaker : Tim SABDA Academy</span> <h3 class="text-xl font-bold text-[#012d52]"> Kenal Produk YLSA: "SABDA Youth Learning Center" </h3> <hr class="my-4" /> <p class="text-[#012d52] text-sm"> Generasi muda adalah generasi penerus gereja. Dalam menjangkau generasi muda, pasti diperlukan strategi-strategi yang sesuai. Hal ini juga yang menjadi kerinduan YLSA untuk membuka program baru, yaitu SABDA Youth Learning Center. Apa itu SABDA Youth Learning Center? </p> </div> </div> </a> <a href="https://live.sabda.org/mlc.php?title=seminar_youth_new_strategy_for_youth" target="_blank" rel="noopener noreferrer"> <div class="bg-white cursor-pointer rounded overflow-hidden shadow-[0_2px_10px_-3px_rgba(6,81,237,0.3)] relative top-0 hover:-top-2 transition-all duration-300 min-h-full"> <img src="https://static.sabda.org/live/brosur/Biblical_Habits/thumb/Biblical_Habits_20250113_Seminar_Youth_New_Strategy_for_Youth_Thumb.jpg" alt="Blog Post 3" class="w-full h-96 object-cover"/> <div class="p-6"> <span class="text-sm block text-[#012d52] mb-2">13 Januari 2025 | Speaker: Davida Dana</span> <h3 class="text-xl font-bold text-[#012d52]"> Seminar Youth: New Strategy for Youth </h3> <hr class="my-4" /> <p class="text-[#012d52] text-sm"> Mari belajar bersama tentang kasih Tuhan bagi kaum muda melalui video, media, AI, dan diskusi, dengan bergabung dalam seminar "New Strategy for Youth". </p> </div> </div> </a> </div> </div> </div>   <section class="relative overflow-hidden"> <div class="bg-white/60 relative mx-auto flex h-full w-full flex-col items-center justify-center px-4 py-12 backdrop-blur-md sm:px-6 sm:py-16 lg:px-8 lg:py-20"> <div class="text-center"> <h2 class="text-3xl font-bold text-[#012d52] inline-block relative after:absolute after:w-4/6 after:h-1 after:left-0 after:right-0 after:-bottom-4 after:mx-auto after:bg-[#8dccd7] after:rounded-full uppercase"> Basic Material </h2> </div> <div> <ul class="mx-auto grid max-w-screen-xl grid-cols-1 gap-y-4 gap-x-8 text-center sm:mt-12 sm:text-left md:grid-cols-3"> <li> <a href="https://youtu.be/XEt5C6LCChw" class="glightbox4"> <div class="bg-white/10 relative mb-3 rounded-3xl border px-12 py-10 text-left shadow backdrop-blur-lg lg:px-12 text-center min-h-full flex flex-col"> <div class="flex-grow"> <span class="mt-6 text-center text-3xl font-bold text-blue-900 sm:mt-12 sm:text-5xl">AI Basic</span> <p class="relative mt-5 text-gray-600">Setelah tahu “Mengapa AI?” dan “Apa AI?” dari AITalks #1 dan #2, pasti Anda semakin penasaran ingin tahu bagaimana cara pakai AI. Namun, saat ini, ada ratusan alat AI yang bisa Anda pakai. Bagaimana cara memilih alat AI yang tepat dan bagaimana memakainya?</p> </div> <hr class="mt-8" /> <div> <button class="mx-auto mt-4 block h-12 rounded-full bg-blue-600 px-6 font-medium tracking-wide text-white shadow-md outline-none transition duration-200 sm:mt-10 focus:ring hover:bg-blue-500">Lihat Video</button> </div> </div> </a> </li> <li> <a href="https://youtu.be/YDObuB_MT3Q" class="glightbox4"> <div class="bg-white/10 relative mb-3 rounded-3xl border px-12 py-10 text-left shadow backdrop-blur-lg lg:px-12 text-center min-h-full flex flex-col"> <div class="flex-grow"> <span class="mt-6 text-center text-3xl font-bold text-blue-900 sm:mt-12 sm:text-5xl">F.O.K.U.S</span> <p class="relative mt-5 text-gray-600">Dalam membuat prompt, perencanaan dan struktur amatlah krusial, tidak boleh hanya mengajukan permintaan sembarangan. Prompt yang dibuat harus erat kaitannya dengan permintaan dan spesifik dalam konteksnya. Yuk belajar tentang pentingnya konsep FOKUS dalam membentuk prompt.</p> </div> <hr class="mt-8" /> <div> <button class="mx-auto mt-4 block h-12 rounded-full bg-blue-600 px-6 font-medium tracking-wide text-white shadow-md outline-none transition duration-200 sm:mt-10 focus:ring hover:bg-blue-500">Lihat Video</button> </div> </div> </a> </li> <li> <a href="https://youtu.be/zEl2goHa83Y" class="glightbox4"> <div class="bg-white/10 relative mb-3 rounded-3xl border px-12 py-10 text-left shadow backdrop-blur-lg lg:px-12 text-center min-h-full flex flex-col"> <div class="flex-grow"> <span class="mt-6 text-center text-3xl font-bold text-blue-900 sm:mt-12 sm:text-5xl">AI Squared</span> <p class="relative mt-5 text-gray-600">Tahun baru 2024 akan lanjut membawa perubahan, terkhusus dengan penetrasi teknologi AI yang semakin meluas di semua bidang kehidupan. Bagaimana dengan cara kita mempelajari Alkitab? SABDA mengajak Sahabat SABDA untuk belajar cara baru yang fun dan menarik dalam melakukan PA. Untuk itu, mari bergabung dalam acara seri go-AI! yang berjudul "PA dengan AI: Cara AI2 (AI Squared)".</p> </div> <hr class="mt-8" /> <div> <button class="mx-auto mt-4 block h-12 rounded-full bg-blue-600 px-6 font-medium tracking-wide text-white shadow-md outline-none transition duration-200 sm:mt-10 focus:ring hover:bg-blue-500">Lihat Video</button> </div> </div> </a> </li> </ul> </div> </div> </section>   <section class="py-24"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <div class="flex flex-col justify-center gap-x-16 gap-y-5 xl:gap-28 lg:flex-row lg:justify-between max-lg:max-w-2xl mx-auto max-w-full"> <div class="w-full lg:w-1/2"> <img src="https://t3.ftcdn.net/jpg/08/63/42/72/360_F_863427223_7Qe7cZo7nT6YBp2svIDemo37XpYbanrF.jpg" alt="FAQ tailwind section" class="w-full rounded-xl object-cover"/> </div> <div class="w-full lg:w-1/2"> <div class="lg:max-w-xl"> <div class="mb-6 lg:mb-16"> <h6 class="text-lg text-center font-medium text-[#012d52] mb-2 lg:text-left"> Masih bingung tentang Youth Learning Center? </h6> <h2 class="text-4xl text-center font-bold leading-[3.25rem] bg-gradient-to-r from-[#012d52] to-[#8dccd7] text-transparent bg-clip-text mb-5 lg:text-left"> Frequently Asked Questions </h2> </div> <div class="accordion-group" data-accordion="default-accordion"> <div class="accordion pb-8 border-b border-solid border-gray-200 active" id="basic-heading-one-with-arrow-always-open"> <button class="accordion-toggle group inline-flex items-center justify-between text-xl font-normal leading-8 text-gray-600 w-full transition duration-500 hover:text-[#eec2e3] accordion-active:text-[#eec2e3] accordion-active:font-medium always-open" aria-controls="basic-collapse-one-with-arrow-always-open"> <h6>Apa itu SABDA Youth Learning Center?</h6> <svg class="text-gray-900 transition duration-500 group-hover:text-[#eec2e3] accordion-active:text-[#eec2e3] accordion-active:rotate-180" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </button> <div id="basic-collapse-one-with-arrow-always-open" class="accordion-content w-full px-0 overflow-hidden pr-4 active" style="max-height: 100px;" aria-labelledby="basic-heading-one-with-arrow-always-open" > <p class="text-base font-normal text-[#012d52] "> SABDA YLC merupakan program yang dirancang khusus untuk memenuhi kebutuhan anak muda dengan pengajaran Kristen, pendalaman Alkitab, dengan topik-topik teologi yang relevan. </p> </div> </div> <div class="accordion py-8 border-b border-solid border-gray-200 " id="basic-heading-two-with-arrow-always-open" > <button class="accordion-toggle group inline-flex items-center justify-between font-normal text-xl leading-8 text-gray-600 w-full transition duration-500 hover:text-[#eec2e3] accordion-active:text-[#eec2e3] accordion-active:font-medium" aria-controls="basic-collapse-two-with-arrow-always-open" > <h6 class="text-wrap">Apa tujuan dari program ini?</h6> <svg class="text-gray-900 transition duration-500 group-hover:text-[#eec2e3] accordion-active:text-[#eec2e3] accordion-active:rotate-180" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" ></path> </svg> </button> <div id="basic-collapse-two-with-arrow-always-open" class="accordion-content w-full px-0 overflow-hidden pr-4" aria-labelledby="basic-heading-two-with-arrow-always-open" > <p class="text-base text-[#012d52] font-normal"> Tujuannya: </p> <ul class="list-decimal"> <li>Menciptakan komunitas yang sehat bagi anak muda untuk berinteraksi, sharing, dan menularkan hidup iman Kristen yang sehat.</li> <li>Memperkuat iman anak muda dan membantu bertumbuh secara rohani.</li> <li>Membimbing anak muda lebih lagi memahami Alkitab dan diimplementasikan dalam kehidupan sehari-hari.</li> </ul> </div> </div> <div class="accordion py-8 border-b border-solid border-gray-200" id="basic-heading-three-with-arrow-always-open" > <button class="accordion-toggle group inline-flex items-center justify-between text-xl font-normal leading-8 text-gray-600 w-full transition duration-500 hover:text-[#eec2e3] accordion-active:font-medium accordion-active:text-[#eec2e3]" aria-controls="basic-collapse-three-with-arrow-always-open" > <h6>Siapa dan apa syarat untuk mengikuti program ini?</h6> <svg class="text-gray-900 transition duration-500 group-hover:text-[#eec2e3] accordion-active:text-[#eec2e3] accordion-active:rotate-180" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </button> <div id="basic-collapse-three-with-arrow-always-open" class="accordion-content w-full px-0 overflow-hidden pr-4" aria-labelledby="basic-heading-three-with-arrow-always-open"> <ul class="list-decimal"> <li>Anak muda berusia 15--30 tahun yang rindu untuk mengenal Tuhan lebih dalam lagi.</li> <li>Mempunyai hati yang mau berbagi dan saling memperlengkapi.</li> </ul> </div> </div> <div class="accordion py-8 " id="basic-heading-four-with-arrow-always-open" > <button class="accordion-toggle group inline-flex items-center justify-between text-xl font-normal leading-8 text-gray-600 w-full transition duration-500 hover:text-[#eec2e3] accordion-active:font-medium accordion-active:text-[#eec2e3]" aria-controls="basic-collapse-four-with-arrow-always-open" > <h6>Siapa saja yang boleh mendaftar dalam SABDA Youth Learning Center?</h6> <svg class="text-gray-900 transition duration-500 group-hover:text-[#eec2e3] accordion-active:text-[#eec2e3] accordion-active:rotate-180" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" ></path> </svg> </button> <div id="basic-collapse-four-with-arrow-always-open" class="accordion-content w-full px-0 overflow-hidden pr-4" aria-labelledby="basic-heading-four-with-arrow-always-open" > <p class="text-base text-[#012d52] font-normal pt-4"> <ol class="list-decimal pl-5"> <li>Anak Muda usia 15-30 tahun.</li> <li>Percaya Tuhan Yesus Kristus.</li> <li>Memiliki kerinduan untuk lebih mengenal Tuhan dan Firman-Nya.</li> </ol> </p> </div> </div> </div> </div> </div> </div> </div> </section>  </div> <script> //GLightBox Index Basic Material var lightbox = GLightbox(); lightbox.on('open', (target) => { console.log('lightbox opened'); }); var lightboxVideo = GLightbox({ selector: '.glightbox4' }); </script>  <div class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8"> <div class="grid gap-10 row-gap-6 mb-8 sm:grid-cols-2 lg:grid-cols-4"> <div class="sm:col-span-2"> <a href="/" aria-label="Go home" title="Company" class="inline-flex items-center"> <img class="max-w-12" src="https://static.sabda.org/sites/images/footer/logo_YLSA.png" alt="YLSA"> <img class="max-w-16 ml-4" src="https://static.sabda.org/sites/images/footer/logo_SABDA.png" alt="SABDA" srcset=""> </a> <div class="mt-6 lg:max-w-sm"> <p class="text-sm text-gray-800"> Bank BCA Cabang Pasar Legi Solo - No. Rekening: 0790266579 - a.n. Yulia Oeniyati </p>  </div> </div> <div class="space-y-2 text-sm"> <p class="text-base font-bold tracking-wide text-gray-900">Contacts</p> <div class="flex"> <p class="mr-1 text-gray-800">WhatsApp:</p> <a href="tel:850-123-5021" aria-label="Our phone" title="Our phone" class="transition-colors duration-300 text-deep-purple-accent-400 hover:text-deep-purple-800">0881-2979-100 </a> </div> <div class="flex"> <p class="mr-1 text-gray-800">Email:</p> <a href="mailto:ylsa@sabda.org" aria-label="Our email" title="Our email" class="transition-colors duration-300 text-deep-purple-accent-400 hover:text-deep-purple-800">ylsa@sabda.org</a> </div> <div class="flex"> <p class="mr-1 text-gray-800">Situs:</p> <a href="https://ylsa.org" target="_blank" rel="noopener noreferrer" aria-label="Our address" title="Our address" class="transition-colors duration-300 text-deep-purple-accent-400 hover:text-deep-purple-800 "> ylsa.org </a> <span class="mr-1 ml-1"> - </span> <a href="https://sabda.org" target="_blank" rel="noopener noreferrer" aria-label="Our address" title="Our address" class="transition-colors duration-300 text-deep-purple-accent-400 hover:text-deep-purple-800"> sabda.org </a> </div> </div> <div> <span class="text-base font-bold tracking-wide text-gray-900">Social</span> <div class="flex items-center mt-1 space-x-3"> <a href="https://instagram.com/sabda_ylsa" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"> <i class="ri-instagram-fill"></i> </a> <a href="https://facebook.com/sabda.org" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"> <i class="ri-facebook-circle-fill"></i> </a> <a href="https://twitter.com/sabda_ylsa" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"> <i class="ri-twitter-fill"></i> </a> <a href="https://s.id/medsosYLSA" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"> <i class="ri-links-line"></i> </a> </div> <div class="flex items-center mt-1 space-x-3"> <a href="https://www.youtube.com/@sabdaalkitab" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400 max-w-5"> <i class="ri-youtube-fill"></i> </a> <a href="https://podcast.sabda.org/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400 max-w-5"> <i class="ri-spotify-fill"></i> </a> <a href="https://www.slideshare.net/sabda/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400 max-w-5"> <i class="ri-slideshow-line"></i> </a> </div>  </div> </div> <div class="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row"> <p class="text-sm text-gray-600"> Copyright © 2025 Yayasan Lembaga SABDA (YLSA). All Rights Reserved </p> <ul class="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row"> <li> <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Kontak</a> </li> <li> <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Partisipasi</a> </li> <li> <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Donasi</a> </li> </ul> </div> </div>  <script src="https://youth.sabda.org/scripts/ui_handle.js"></script> </body> </html>

CINXE.COM

SABDA Youth Learning Center