1 2 3<!DOCTYPE html> 4<html lang="en"> 5<head> 6 <meta charset="utf-8"/> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 8 9 10 11<meta name="description" content="Blended learning global education platform"> 12<meta name="keywords" content="EDUCOURSE"> 13<meta property="og:image" content="https://educourse.id/static/logo/logo_512x512_white.png"> 14 15 16 <title>educourse</title> 17 18<link rel="icon" type="image/png" href="/static/favicon/educourse.png"/> 19 20 <!-- Facebook Verification --> 21 <meta name="facebook-domain-verification" content="dcgzjbttrkhumtsjiw8i7738ut635v" /> 22 23 <!-- Meta Pixel Code --> 24
24<script>
vendor: 471 bytes, lines 24-33
24 25 !function(f,b,e,v,n,t,s) 26 {if(f.fbq)return;n=f.fbq=function(){n.callMethod? 27 n.callMethod.apply(n,arguments):n.queue.push(arguments)}; 28 if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; 29 n.queue=[];t=b.createElement(e);t.async=!0; 30 t.src=v;s=b.getElementsByTagName(e)[0]; 31 s.parentNode.insertBefore(t,s)}(window, document,'script', 32 'https://connect.facebook.net/en_US/fbevents.js'); 33 fbq('init', '
332473052689495355
vendor: 42 bytes, lines 33-35
33'); 34 fbq('track', 'PageView'); 35
35</script>
35 36 <noscript> 37 <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=2473052689495355&ev=PageView&noscript=1"/> 38 </noscript> 39 <!-- End Meta Pixel Code --> 40 41 <!-- Google Analytics -->
vendor: 68 bytes, lines 41-42
41 42 <script async src="https://www.googletagmanager.com/gtag/js?id=
42G-RPN4XRWBZH
vendor: 16 bytes, lines 42-43
42"></script> 43
43<script> 44
vendor: 151 bytes, lines 44-47
44window.dataLayer = window.dataLayer || []; 45 function gtag(){dataLayer.push(arguments);} 46 gtag('js', new Date()); 47 gtag('config', '
47G-RPN4XRWBZH
vendor: 8 bytes, lines 47-48
47'); 48
48</script>
48 49 50 <!-- Google Tag Manager --> 51
51<script>
vendor: 368 bytes, lines 51-56
51 52 (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 53 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 54 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 55 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 56 })(window,document,'script','dataLayer','
56GTM-NXPVFLR
vendor: 8 bytes, lines 56-57
56'); 57
57</script>
57 58 59 <!-- Tailwind CSS - Use a compiled version instead of CDN for production --> 60
60<script src="https://cdn.tailwindcss.com"></script>
60 61
61<script> 62 tailwind.config = { 63 theme: { 64 extend: { 65 colors: { 66 primary: '#00ADB5', 67 'primary-dark': '#008F96', 68 secondary: '#FFCB00', 69 dark: '#073335', 70 'footer-dark': '#121826' 71 } 72 } 73 } 74 } 75 </script>
75 76 77 <!-- Fonts --> 78 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> 79 80 <!-- Font Awesome --> 81 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> 82 83 <style> 84 body { 85 font-family: 'Poppins', sans-serif; 86 } 87 88 /* WhatsApp Button */ 89 .float { 90 position: fixed; 91 width: 60px; 92 height: 60px; 93 bottom: 40px; 94 right: 40px; 95 background-color: #25d366; 96 color: #FFF; 97 border-radius: 50px; 98 text-align: center; 99 font-size: 30px; 100 box-shadow: 2px 2px 3px #999; 101 z-index: 100; 102 display: flex; 103 align-items: center; 104 justify-content: center; 105 } 106 107 /* Preloader */ 108 #preloader { 109 position: fixed; 110 top: 0; 111 left: 0; 112 width: 100%; 113 height: 100%; 114 background-color: #fff; 115 z-index: 9999; 116 display: flex; 117 align-items: center; 118 justify-content: center; 119 } 120 121 .preloader { 122 display: inline-block; 123 position: relative; 124 width: 80px; 125 height: 80px; 126 } 127 128 .preloader span { 129 position: absolute; 130 top: 33px; 131 width: 13px; 132 height: 13px; 133 border-radius: 50%; 134 background: #00ADB5; 135 animation-timing-function: cubic-bezier(0, 1, 1, 0); 136 } 137 138 .preloader span:nth-child(1) { 139 left: 8px; 140 animation: preloader1 0.6s infinite; 141 } 142 143 .preloader span:nth-child(2) { 144 left: 8px; 145 animation: preloader2 0.6s infinite; 146 } 147 148 .preloader span:nth-child(3) { 149 left: 32px; 150 animation: preloader2 0.6s infinite; 151 } 152 153 .preloader span:nth-child(4) { 154 left: 56px; 155 animation: preloader3 0.6s infinite; 156 } 157 158 @keyframes preloader1 { 159 0% { transform: scale(0); } 160 100% { transform: scale(1); } 161 } 162 163 @keyframes preloader3 { 164 0% { transform: scale(1); } 165 100% { transform: scale(0); } 166 } 167 168 @keyframes preloader2 { 169 0% { transform: translate(0, 0); } 170 100% { transform: translate(24px, 0); } 171 } 172 173 /* Enhanced Footer Styles */ 174 .footer-bg { 175 background-color: #121826; 176 background-image: 177 radial-gradient(circle at 10% 20%, rgba(0, 173, 181, 0.05) 0%, transparent 20%), 178 radial-gradient(circle at 90% 60%, rgba(255, 203, 0, 0.03) 0%, transparent 30%), 179 linear-gradient(135deg, rgba(0, 173, 181, 0.08) 0%, rgba(7, 51, 53, 0.08) 100%); 180 position: relative; 181 overflow: hidden; 182 } 183 184 .footer-bg::before { 185 content: ''; 186 position: absolute; 187 top: 0; 188 left: 0; 189 width: 100%; 190 height: 5px; 191 background: linear-gradient(90deg, #00ADB5, #FFCB00); 192 } 193 194 .footer-bg .dot-pattern { 195 position: absolute; 196 top: 0; 197 left: 0; 198 width: 100%; 199 height: 100%; 200 background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px); 201 background-size: 20px 20px; 202 opacity: 0.3; 203 pointer-events: none; 204 } 205 206 .footer-logo { 207 filter: brightness(0) invert(1); 208 position: relative; 209 } 210 211 .footer-logo::after { 212 content: ''; 213 position: absolute; 214 bottom: -10px; 215 left: 0; 216 width: 40px; 217 height: 3px; 218 background: linear-gradient(90deg, #00ADB5, #FFCB00); 219 border-radius: 3px; 220 } 221 222 .footer-heading { 223 position: relative; 224 display: inline-block; 225 padding-bottom: 12px; 226 } 227 228 .footer-heading::after { 229 content: ''; 230 position: absolute; 231 bottom: 0; 232 left: 0; 233 width: 30px; 234 height: 3px; 235 background: #00ADB5; 236 border-radius: 3px; 237 } 238 239 .social-icon { 240 transition: all 0.3s ease; 241 background: rgba(255, 255, 255, 0.05); 242 } 243 244 .social-icon:hover { 245 transform: translateY(-3px); 246 } 247 248 .youtube-icon:hover { 249 background: #FF0000; 250 } 251 252 .instagram-icon:hover { 253 background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 254 } 255 256 .facebook-icon:hover { 257 background: #4267B2; 258 } 259 260 .linkedin-icon:hover { 261 background: #0077B5; 262 } 263 264 .footer-link { 265 position: relative; 266 transition: all 0.3s ease; 267 } 268 269 .footer-link::before { 270 content: ''; 271 position: absolute; 272 bottom: -2px; 273 left: 0; 274 width: 0; 275 height: 1px; 276 background: #00ADB5; 277 transition: width 0.3s ease; 278 } 279 280 .footer-link:hover::before { 281 width: 100%; 282 } 283 284 .copyright-section { 285 background: rgba(0, 0, 0, 0.2); 286 position: relative; 287 } 288 289 .copyright-section::before { 290 content: ''; 291 position: absolute; 292 top: 0; 293 left: 0; 294 width: 100%; 295 height: 1px; 296 background: linear-gradient(90deg, 297 transparent 0%, 298 rgba(255, 255, 255, 0.1) 15%, 299 rgba(255, 255, 255, 0.1) 85%, 300 transparent 100%); 301 } 302 303 /* Fix for footer text color */ 304 footer .company-description { 305 color: #9CA3AF !important; /* Ensure text-gray-400 color is applied */ 306 } 307 </style> 308 309 310<style> 311 /* Custom animations */
312 @keyframes fadeInUp { 313 from { 314 opacity: 0; 315 transform: translateY(20px); 316 } 317 to { 318 opacity: 1; 319 transform: translateY(0); 320 } 321 } 322 323 .animate-fadeInUp { 324 animation: fadeInUp 0.6s ease-out forwards; 325 } 326 327 .animate-delay-100 { animation-delay: 0.1s; } 328 .animate-delay-200 { animation-delay: 0.2s; } 329 .animate-delay-300 { animation-delay: 0.3s; } 330 .animate-delay-400 { animation-delay: 0.4s; } 331 332 /* Team card hover effects */ 333 .team-card { 334 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 335 } 336 337 .team-card:hover { 338 transform: translateY(-15px); 339 box-shadow: 0 15px 30px rgba(0, 173, 181, 0.1); 340 } 341 342 .team-card .social-icons { 343 transition: all 0.3s ease; 344 opacity: 0; 345 transform: translateY(10px); 346 } 347 348 .team-card:hover .social-icons { 349 opacity: 1; 350 transform: translateY(0); 351 } 352 353 .team-card .team-image { 354 transition: all 0.5s ease; 355 } 356 357 .team-card:hover .team-image { 358 transform: scale(1.05); 359 } 360 361 /* Improved slider styles with snap scrolling */ 362 .slider-container { 363 -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ 364 scroll-behavior: smooth; 365 scrollbar-width: none; /* Hide scrollbar for Firefox */ 366 -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */ 367 cursor: grab; 368 scroll-snap-type: x mandatory; /* Enable snap scrolling */ 369 } 370 371 .slider-container::-webkit-scrollbar {
372 display: none; /* Hide scrollbar for Chrome, Safari, and Opera */ 373 } 374 375 .slider-container.dragging { 376 cursor: grabbing; 377 scroll-behavior: auto; 378 } 379 380 /* Snap center for each slide */ 381 .snap-center { 382 scroll-snap-align: center; 383 } 384 385 /* Visual indicator for swipeable content */ 386 .achievements-slider::after { 387 content: ''; 388 position: absolute; 389 bottom: -10px; 390 left: 50%; 391 transform: translateX(-50%); 392 width: 50px; 393 height: 4px; 394 background: linear-gradient(90deg, transparent, rgba(0, 173, 181, 0.5) 20%, rgba(0, 173, 181, 0.5) 80%, transparent); 395 border-radius: 4px; 396 opacity: 0.7; 397 } 398 399 /* Achievement card styles */ 400 .achievement-card { 401 transition: all 0.3s ease; 402 position: relative; 403 cursor: pointer; 404 } 405 406 .achievement-card:hover { 407 transform: scale(1.05); 408 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 409 } 410 411 .achievement-card::after { 412 content: ''; 413 position: absolute; 414 bottom: 0; 415 left: 0; 416 width: 0; 417 height: 3px; 418 background-color: #00ADB5; 419 transition: width 0.3s ease; 420 } 421 422 .achievement-card:hover::after { 423 width: 100%; 424 } 425 426 /* Pagination dots animation */ 427 .pagination-dots button { 428 transition: all 0.3s ease; 429 } 430 431 /* Gradient backgrounds */ 432 .bg-gradient-primary { 433 background: linear-gradient(135deg, #00ADB5 0%, #008F96 100%); 434 } 435 436 /* Decorative elements */ 437 .dot-pattern { 438 background-image: radial-gradient(#00ADB5 1px, transparent 1px); 439 background-size: 20px 20px; 440 } 441 442 /* Improved mobile styles */ 443 @media (max-width: 640px) { 444 .team-card { 445 width: 85vw; 446 max-width: 300px; 447 } 448 449 .achievement-card { 450 width: 80vw; 451 max-width: 280px; 452 } 453 454 .slider-nav-button { 455 width: 40px; 456 height: 40px; 457 } 458 459 .feature-card { 460 padding: 1rem; 461 } 462 } 463</style> 464 465</head> 466 467<body class="bg-white"> 468 <!-- Google Tag Manager (noscript) -->
vendor: 81 bytes, lines 468-470
468 469 <noscript> 470 <iframe src="https://www.googletagmanager.com/ns.html?id=
470GTM-NXPVFLR
vendor: 93 bytes, lines 470-473
470" height="0" width="0" style="display:none;visibility:hidden"></iframe> 471 </noscript> 472 473
473<!-- Preloader --> 474 <div id="preloader"> 475 <div class="preloader"> 476 <span></span> 477 <span></span> 478 <span></span> 479 <span></span> 480 </div> 481 </div> 482 483 <!-- Main Wrapper --> 484 <div class="min-h-screen flex flex-col"> 485 <!-- Header/Navigation --> 486 <header class="bg-white shadow-sm sticky top-0 z-50"> 487 <div class="container mx-auto px-4"> 488 <div class="flex justify-between items-center h-16"> 489 <!-- Logo --> 490 <a href="/" class="flex-shrink-0"> 491 <img src="https://s3.ap-southeast-1.amazonaws.com/educourse.id/educoursetraction_icon/High_Res_Trans_Logo_Educourse.id.png" 492 alt="Educourse By I-gen" 493 class="h-10"> 494 </a> 495 496 <!-- Desktop Navigation --> 497 <nav class="hidden md:flex items-center space-x-6"> 498 <a href="/" 499 class="text-gray-700 hover:text-[#00ADB5] font-medium "> 500 Home 501 </a> 502 503 <a href="/about_us/" 504 class="text-gray-700 hover:text-[#00ADB5] font-medium text-[#00ADB5]"> 505 About Us 506 </a> 507 508 <!-- Courses Dropdown --> 509 <div class="relative group"> 510 <button class="flex items-center text-gray-700 hover:text-[#00ADB5] font-medium "> 511 Courses 512 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 513 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> 514 </svg> 515 </button> 516 517 <div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block"> 518 <a href="/courses/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> 519 All Courses 520 </a> 521 522 523 <div class="relative group/sub"> 524 <a href="/courses/Tech%20Code%20Lab/" 525 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> 526 Tech Code Lab 527 </a> 528 529 530 <div class="absolute left-full top-0 mt-0 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover/sub:block"> 531 532 <a href="/courses/Tech%20Code%20Lab/Code%20for%20kids/" 533 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> 534 Code for kids 535 </a> 536 537 <a href="/courses/Tech%20Code%20Lab/Code%20for%20Teens/" 538 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> 539 Code for Teens 540 </a> 541 542 </div> 543 544 </div> 545 546 <div class="relative group/sub"> 547 <a href="/courses/Robo%20Guardian%20Lab/" 548 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> 549 Robo Guardian Lab 550 </a> 551 552 553 <div class="absolute left-full top-0 mt-0 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover/sub:block"> 554 555 <a href="/courses/Robo%20Guardian%20Lab/Robo%20for%20Kids/" 556 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> 557 Robo for Kids 558 </a> 559 560 <a href="/courses/Robo%20Guardian%20Lab/Robo%20for%20Teens/" 561 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> 562 Robo for Teens 563 </a> 564 565 </div> 566 567 </div> 568 569 <div class="relative group/sub"> 570 <a href="/courses/Global%20Rune%20Center/" 571 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> 572 Global Rune Center 573 </a> 574 575 576 <div class="absolute left-full top-0 mt-0 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover/sub:block"> 577 578 <a href="/courses/Global%20Rune%20Center/Japanese%20Center/" 579 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> 580 Japanese Center 581 </a> 582 583 <a href="/courses/Global%20Rune%20Center/English%20Center/" 584 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> 585 English Center 586 </a> 587 588 <a href="/courses/Global%20Rune%20Center/Korean%20Center/" 589 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> 590 Korean Center 591 </a> 592 593 </div> 594 595 </div> 596 597 </div> 598 </div> 599 600 <a href="/faq/" 601 class="text-gray-700 hover:text-[#00ADB5] font-medium "> 602 FAQs 603 </a> 604 605 <a href="/career/" 606 class="text-gray-700 hover:text-[#00ADB5] font-medium "> 607 Career 608 </a> 609 610 <a href="https://school.educourse.id" 611 target="_blank" 612 class="text-gray-700 hover:text-[#00ADB5] font-medium"> 613 Educourse for School 614 </a> 615 </nav> 616 617 <!-- Auth Buttons --> 618 <div class="hidden md:flex items-center space-x-4"> 619 620 <a href="/signin/" 621 class="px-4 py-2 bg-[#00ADB5] text-white rounded-md hover:bg-[#008F96] transition-colors"> 622 Sign in 623 </a> 624 625 <a href="/signup/" 626 class="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors"> 627 Sign Up 628 </a> 629 630 </div> 631 632 <!-- Mobile Menu Button --> 633 <button type="button" 634 class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-[#00ADB5] hover:bg-gray-100 focus:outline-none" 635 id="mobile-menu-button"> 636 <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 637 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> 638 </svg> 639 </button> 640 </div> 641 642 <!-- Mobile Menu (Hidden by default) --> 643 <div class="md:hidden hidden" id="mobile-menu"> 644 <div class="px-2 pt-2 pb-3 space-y-1"> 645 <a href="/" 646 class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-[#00ADB5] hover:bg-gray-50"> 647 Home 648 </a> 649 650 <a href="/about_us/" 651 class="block px-3 py-2 rounded-md text-base font-medium text-[#00ADB5] bg-gray-50"> 652 About Us 653 </a> 654 655 <!-- Mobile Courses Menu --> 656 <div class="relative"> 657 <button class="flex items-center justify-between w-full px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-[#00ADB5] hover:bg-gray-50" 658 id="mobile-courses-button"> 659 Courses 660 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 661 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> 662 </svg> 663 </button> 664 665 <div class="hidden px-4 py-2 space-y-1" id="mobile-courses-menu"> 666 <a href="/courses/" 667 class="block px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-[#00ADB5] hover:bg-gray-50"> 668 All Courses 669 </a> 670 671 672 <div> 673 <a href="/courses/Tech%20Code%20Lab/" 674 class="block px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-[#00ADB5] hover:bg-gray-50"> 675 Tech Code Lab 676 </a> 677 678 679 <div class="pl-4 space-y-1"> 680 681 <a href="/courses/Tech%20Code%20Lab/Code%20for%20kids/" 682 class="block px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-[#00ADB5] hover:bg-gray-50"> 683 Code for kids 684 </a> 685 686 <a href="/courses/Tech%20Code%20Lab/Code%20for%20Teens/" 687 class="block px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-[#00ADB5] hover:bg-gray-50"> 688 Code for Teens 689 </a> 690 691 </div> 692 693 </div> 694 695 <div> 696 <a href="/courses/Robo%20Guardian%20Lab/" 697 class="block px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-[#00ADB5] hover:bg-gray-50"> 698 Robo Guardian Lab 699 </a> 700 701 702 <div class="pl-4 space-y-1"> 703 704 <a href="/courses/Robo%20Guardian%20Lab/Robo%20for%20Kids/" 705 class="block px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-[#00ADB5] hover:bg-gray-50"> 706 Robo for Kids 707 </a> 708 709 <a href="/courses/Robo%20Guardian%20Lab/Robo%20for%20Teens/" 710 class="block px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-[#00ADB5] hover:bg-gray-50"> 711 Robo for Teens 712 </a> 713 714 </div> 715 716 </div> 717 718 <div> 719 <a href="/courses/Global%20Rune%20Center/" 720 class="block px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-[#00ADB5] hover:bg-gray-50"> 721 Global Rune Center 722 </a> 723 724 725 <div class="pl-4 space-y-1"> 726 727 <a href="/courses/Global%20Rune%20Center/Japanese%20Center/" 728 class="block px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-[#00ADB5] hover:bg-gray-50"> 729 Japanese Center 730 </a> 731 732 <a href="/courses/Global%20Rune%20Center/English%20Center/" 733 class="block px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-[#00ADB5] hover:bg-gray-50"> 734 English Center 735 </a> 736 737 <a href="/courses/Global%20Rune%20Center/Korean%20Center/" 738 class="block px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-[#00ADB5] hover:bg-gray-50"> 739 Korean Center 740 </a> 741 742 </div> 743 744 </div> 745 746 </div> 747 </div> 748 749 <a href="/faq/" 750 cla
750ss="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-[#00ADB5] hover:bg-gray-50"> 751 FAQs 752 </a> 753 754 <a href="/career/" 755 class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-[#00ADB5] hover:bg-gray-50"> 756 Career 757 </a> 758 759 <a href="https://school.educourse.id" 760 target="_blank" 761 class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-[#00ADB5] hover:bg-gray-50"> 762 Educourse for School 763 </a> 764 765 <!-- Mobile Auth Buttons --> 766 <div class="pt-4 pb-3 border-t border-gray-200"> 767 768 <a href="/signin/" 769 class="block w-full px-4 py-2 bg-[#00ADB5] text-white text-center rounded-md hover:bg-[#008F96] transition-colors"> 770 Sign in 771 </a> 772 773 <a href="/signup/" 774 class="mt-2 block w-full px-4 py-2 border border-gray-300 text-gray-700 text-center rounded-md hover:bg-gray-50 transition-colors"> 775 Sign Up 776 </a> 777 778 </div> 779 </div> 780 </div> 781 </div> 782 </header> 783 784 <!-- Main Content --> 785 <main class="flex-grow"> 786 787<!-- Hero Section with Animated Background --> 788<section class="relative py-16 md:py-20 bg-gray-50 overflow-hidden"> 789 <div class="absolute top-0 right-0 w-1/3 h-full dot-pattern opacity-10"></div> 790 <div class="absolute bottom-0 left-0 w-1/4 h-1/2 dot-pattern opacity-10"></div> 791 792 <div class="container mx-auto px-4 relative z-10"> 793 <div class="max-w-4xl mx-auto"> 794 <div class="text-center md:text-left"> 795 <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-900 mb-4 animate-fadeInUp"> 796 Discover <span class="text-[#00ADB5]">Educourse</span> 797 </h1> 798 <p class="text-lg sm:text-xl text-gray-600 mb-6 animate-fadeInUp animate-delay-100"> 799 Empowering the next generation through innovative STEAM education 800 </p> 801 <nav class="flex justify-center md:justify-start animate-fadeInUp animate-delay-200"> 802 <ol class="flex items-center space-x-2"> 803 <li><a href="/" class="text-[#00ADB5] hover:text-[#008F96] font-medium">Home</a></li> 804 <li class="flex items-center"> 805 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400 mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 806 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> 807 </svg> 808 <span class="text-gray-600 font-medium">About Us</span> 809 </li> 810 </ol> 811 </nav> 812 </div> 813 </div> 814 </div> 815</section> 816 817<!-- About Educourse Section with Enhanced Design --> 818<section class="py-16 md:py-20 bg-white"> 819 <div class="container mx-auto px-4"> 820 <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16 items-center"> 821 <!-- Left Column - Text Content --> 822 <div class="order-2 lg:order-1"> 823 <div class="mb-8 animate-fadeInUp"> 824 <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 mb-6"> 825 Transforming Education with <span class="text-[#00ADB5]">STEAM</span> 826 </h2> 827 <p class="text-base md:text-lg text-gray-700 mb-8 leading-relaxed"> 828 Educourse is a cutting-edge STEAM Education platform providing thousands of courses using a blended learning approach enhanced by AI and AR technologies for an immersive and effective learning experience. 829 </p> 830 831 <!-- Feature Cards with Enhanced Design --> 832 <div class="space-y-4 md:space-y-6"> 833 <!-- Feature 1 --> 834 <div class="flex items-start p-4 md:p-5 rounded-xl bg-gray-50 border-l-4 border-[#00ADB5] transition-all duration-300 hover:shadow-md animate-fadeInUp animate-delay-100 feature-card"> 835 <div class="bg-[#00ADB5] bg-opacity-10 p-2 md:p-3 rounded-full mr-3 md:mr-4 flex-shrink-0"> 836 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6 text-[#00ADB5]" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 837 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 01-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /> 838 </svg> 839 </div> 840 <div> 841 <h4 class="text-lg md:text-xl font-semibold text-gray-900 mb-1 md:mb-2">Innovative Learning Methods</h4> 842 <p class="text-sm md:text-base text-gray-600">Implementing the world's best curriculum with STEAM-based methodologies that foster creativity and critical thinking</p> 843 </div> 844 </div> 845 846 <!-- Feature 2 --> 847 <div class="flex items-start p-4 md:p-5 rounded-xl bg-gray-50 border-l-4 border-[#00ADB5] transition-all duration-300 hover:shadow-md animate-fadeInUp animate-delay-200 feature-card"> 848 <div class="bg-[#00ADB5] bg-opacity-10 p-2 md:p-3 rounded-full mr-3 md:mr-4 flex-shrink-0"> 849 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6 text-[#00ADB5]" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 850 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> 851 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> 852 </svg> 853 </div> 854 <div> 855 <h4 class="text-lg md:text-xl font-semibold text-gray-900 mb-1 md:mb-2">Cutting-Edge Technology</h4> 856 <p class="text-sm md:text-base text-gray-600">Leveraging blended learning approaches supported by Augmented Reality and Artificial Intelligence for an immersive experience</p> 857 </div> 858 </div> 859 860 <!-- Feature 3 --> 861 <div class="flex items-start p-4 md:p-5 rounded-xl bg-gray-50 border-l-4 border-[#00ADB5] transition-all duration-300 hover:shadow-md animate-fadeInUp animate-delay-300 feature-card"> 862 <div class="bg-[#00ADB5] bg-opacity-10 p-2 md:p-3 rounded-full mr-3 md:mr-4 flex-shrink-0"> 863 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6 text-[#00ADB5]" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 864 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> 865 </svg> 866 </div> 867 <div> 868 <h4 class="text-lg md:text-xl font-semibold text-gray-900 mb-1 md:mb-2">Accessible Education</h4> 869 <p class="text-sm md:text-base text-gray-600">Offering transparent pricing based on individual needs, making quality education accessible to all learners</p> 870 </div> 871 </div> 872 </div> 873 </div> 874 </div> 875 876 <!-- Right Column - Video with Enhanced Design --> 877 <div class="order-1 lg:order-2 animate-fadeInUp"> 878 <div class="relative rounded-2xl overflow-hidden shadow-2xl group"> 879 <div class="absolute inset-0 bg-gradient-primary opacity-20 group-hover:opacity-10 transition-opacity duration-300"></div> 880 <iframe class="w-full aspect-video" src="https://www.youtube.com/embed/xMF4H3dIlFo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 881 <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4 md:p-6"> 882 <h3 class="text-white text-lg md:text-xl font-bold">Discover Our Learning Approach</h3> 883 <p class="text-white/80 text-xs md:text-sm">See how we're revolutionizing education with STEAM</p> 884 </div> 885 </div> 886 </div> 887 </div> 888 </div> 889</section> 890 891<!-- Our Teams Section with Enhanced Slider --> 892<section class="py-16 md:py-20 bg-gray-50 relative overflow-hidden"> 893 <div class="absolute top-0 left-0 w-full h-64 bg-gradient-to-b from-white to-transparent"></div> 894 <div class="absolute bottom-0 left-0 w-full h-64 bg-gradient-to-t from-white to-transparent"></div> 895 896 <div class="container mx-auto px-4 relative z-10"> 897 <div class="text-center mb-10 md:mb-16 animate-fadeInUp">
898 <span class="inline-block px-4 py-1 bg-[#00ADB5]/10 text-[#00ADB5] font-medium rounded-full text-sm mb-4">OUR EXPERTS</span> 899 <h2 class="text-2xl sm:text-3xl md:text-5xl font-bold text-gray-900 mb-4"> 900 Meet the <span class="text-[#00ADB5]">Brilliant Minds</span> Behind Educourse 901 </h2> 902 <p class="text-base md:text-lg text-gray-600 max-w-3xl mx-auto"> 903 Our diverse team of educators, technologists, and visionaries are dedicated to transforming education through innovation and excellence 904 </p> 905 </div> 906 907 <!-- Team Members Slider with Enhanced Design --> 908 <div class="relative animate-fadeInUp animate-delay-200"> 909 <div class="team-slider overflow-hidden"> 910 <div class="flex flex-nowrap team-slider-container slider-container py-4 px-2 overflow-x-auto"> 911 912 <div class="team-card flex-none w-[280px] sm:w-[300px] md:w-[320px] bg-white rounded-xl shadow-md overflow-hidden mx-2 md:mx-3 snap-center"> 913 <div class="relative overflow-hidden h-60 md:h-72"> 914 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/educourseteam_photo/11.png" 915 alt="Permata Nur M,R, PhD, ACA, ACP" 916 class="w-full h-full object-cover team-image"> 917 <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 918 </div> 919 <div class="p-4 md:p-6 text-center relative"> 920 <div class="absolute -top-10 left-0 right-0 flex justify-center"> 921 <div class="bg-[#00ADB5] text-white px-4 md:px-6 py-1 md:py-2 rounded-full shadow-lg text-sm md:text-base"> 922 <span class="font-medium">President & Founder</span> 923 </div> 924 </div> 925 <h4 class="text-xl md:text-2xl font-bold text-gray-900 mt-4 mb-4">Permata Nur M,R, PhD, ACA, ACP</h4> 926 <div class="social-icons flex justify-center space-x-3 md:space-x-4 mt-4"> 927 928 929 930 931 932 <a href="mailto:[email protected]" class="text-red-600 hover:text-red-800 bg-red-50 p-2 rounded-full hover:bg-red-100 transition-colors"> 933 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 934 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.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" /> 935 </svg> 936 </a> 937 938 939 940 941 942 </div> 943 </div> 944 </div> 945 946 <div class="team-card flex-none w-[280px] sm:w-[300px] md:w-[320px] bg-white rounded-xl shadow-md overflow-hidden mx-2 md:mx-3 snap-center"> 947 <div class="relative overflow-hidden h-60 md:h-72"> 948 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/educourseteam_photo/Mutiara_Hikma_Mahendradatta_BBA_MBA.png" 949 alt="Mutiara Hikma M, BBA, MBA" 950 class="w-full h-full object-cover team-image"> 951 <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 952 </div> 953 <div class="p-4 md:p-6 text-center relative"> 954 <div class="absolute -top-10 left-0 right-0 flex justify-center"> 955 <div class="bg-[#00ADB5] text-white px-4 md:px-6 py-1 md:py-2 rounded-full shadow-lg text-sm md:text-base">
956 <span class="font-medium">CEO & Founder</span> 957 </div> 958 </div> 959 <h4 class="text-xl md:text-2xl font-bold text-gray-900 mt-4 mb-4">Mutiara Hikma M, BBA, MBA</h4> 960 <div class="social-icons flex justify-center space-x-3 md:space-x-4 mt-4"> 961 962 963 964 <a href="https://www.linkedin.com/in/mutiara-hikma-mahendradatta-16a712a1/" class="text-blue-700 hover:text-blue-900 bg-blue-50 p-2 rounded-full hover:bg-blue-100 transition-colors"> 965 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="currentColor" viewBox="0 0 24 24"> 966 <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/> 967 </svg> 968 </a> 969 970 971 972 <a href="mailto:[email protected]" class="text-red-600 hover:text-red-800 bg-red-50 p-2 rounded-full hover:bg-red-100 transition-colors"> 973 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 974 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.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" /> 975 </svg> 976 </a> 977 978 979 980 <a href="https://www.instagram.com/mutiara_hikma/" class="text-pink-600 hover:text-pink-800 bg-pink-50 p-2 rounded-full hover:bg-pink-100 transition-colors"> 981 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="currentColor" viewBox="0 0 24 24"> 982 <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/> 983 </svg> 984 </a> 985 986 987 988 </div> 989 </div> 990 </div> 991 992 <div class="team-card flex-none w-[280px] sm:w-[300px] md:w-[320px] bg-white rounded-xl shadow-md overflow-hidden mx-2 md:mx-3 snap-center"> 993 <div class="relative overflow-hidden h-60 md:h-72"> 994 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/educourseteam_photo/TEAM_Foto_Profile_4.png" 995 alt="Subkhan Prawira, B.eng, M.Sc." 996 class="w-full h-full object-cover team-image"> 997 <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 998 </div> 999 <div class="p-4 md:p-6 text-center relative"> 1000 <div class="absolute -top-10 left-0 right-0 flex justify-center"> 1001 <div class="bg-[#00ADB5] text-white px-4 md:px-6 py-1 md:py-2 rounded-full shadow-lg text-sm md:text-base">
1002 <span class="font-medium">Co-Founder</span> 1003 </div> 1004 </div> 1005 <h4 class="text-xl md:text-2xl font-bold text-gray-900 mt-4 mb-4">Subkhan Prawira, B.eng, M.Sc.</h4> 1006 <div class="social-icons flex justify-center space-x-3 md:space-x-4 mt-4"> 1007 1008 1009 1010 <a href="https://sg.linkedin.com/in/subkhan-prawira-aa773369" class="text-blue-700 hover:text-blue-900 bg-blue-50 p-2 rounded-full hover:bg-blue-100 transition-colors"> 1011 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="currentColor" viewBox="0 0 24 24"> 1012 <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/> 1013 </svg> 1014 </a> 1015 1016 1017 1018 1019 1020 1021 1022 </div> 1023 </div> 1024 </div> 1025 1026 <div class="team-card flex-none w-[280px] sm:w-[300px] md:w-[320px] bg-white rounded-xl shadow-md overflow-hidden mx-2 md:mx-3 snap-center"> 1027 <div class="relative overflow-hidden h-60 md:h-72"> 1028 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/educourseteam_photo/Ari_Pramuja_S.Kom_c.png" 1029 alt="Ari Pramuja, S.Kom (c)" 1030 class="w-full h-full object-cover team-image"> 1031 <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 1032 </div> 1033 <div class="p-4 md:p-6 text-center relative"> 1034 <div class="absolute -top-10 left-0 right-0 flex justify-center"> 1035 <div class="bg-[#00ADB5] text-white px-4 md:px-6 py-1 md:py-2 rounded-full shadow-lg text-sm md:text-base"> 1036 <span class="font-medium">Associate Manager</span> 1037 </div> 1038 </div> 1039 <h4 class="text-xl md:text-2xl font-bold text-gray-900 mt-4 mb-4">Ari Pramuja, S.Kom (c)</h4> 1040 <div class="social-icons flex justify-center space-x-3 md:space-x-4 mt-4"> 1041 1042 1043 1044 <a href="https://www.linkedin.com/in/ari-pramuja/" class="text-blue-700 hover:text-blue-900 bg-blue-50 p-2 rounded-full hover:bg-blue-100 transition-colors"> 1045 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="currentColor" viewBox="0 0 24 24"> 1046 <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/> 1047 </svg> 1048 </a> 1049 1050 1051 1052 1053 1054 1055 1056 </div> 1057 </div> 1058 </div> 1059 1060 <div class="team-card flex-none w-[280px] sm:w-[300px] md:w-[320px] bg-white rounded-xl shadow-md overflow-hidden mx-2 md:mx-3 snap-center"> 1061 <div class="relative overflow-hidden h-60 md:h-72"> 1062 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/educourseteam_photo/4.png" 1063 alt="Primastuti D, BSc, MSc" 1064 class="w-full h-full object-cover team-image"> 1065 <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 1066 </div> 1067 <div class="p-4 md:p-6 text-center relative"> 1068 <div class="absolute -top-10 left-0 right-0 flex justify-center"> 1069 <div class="bg-[#00ADB5] text-white px-4 md:px-6 py-1 md:py-2 rounded-full shadow-lg text-sm md:text-base">
1070 <span class="font-medium">Program Development Manager</span> 1071 </div> 1072 </div> 1073 <h4 class="text-xl md:text-2xl font-bold text-gray-900 mt-4 mb-4">Primastuti D, BSc, MSc</h4> 1074 <div class="social-icons flex justify-center space-x-3 md:space-x-4 mt-4"> 1075 1076 1077 1078 <a href="https://www.linkedin.com/in/primastuti-dewi-1abb925b/" class="text-blue-700 hover:text-blue-900 bg-blue-50 p-2 rounded-full hover:bg-blue-100 transition-colors"> 1079 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="currentColor" viewBox="0 0 24 24"> 1080 <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/> 1081 </svg> 1082 </a> 1083 1084 1085 1086 1087 1088 <a href="https://www.instagram.com/primastutidewi/" class="text-pink-600 hover:text-pink-800 bg-pink-50 p-2 rounded-full hover:bg-pink-100 transition-colors"> 1089 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="currentColor" viewBox="0 0 24 24"> 1090 <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/> 1091 </svg> 1092 </a> 1093 1094 1095 1096 </div> 1097 </div> 1098 </div> 1099 1100 <div class="team-card flex-none w-[280px] sm:w-[300px] md:w-[320px] bg-white rounded-xl shadow-md overflow-hidden mx-2 md:mx-3 snap-center"> 1101 <div class="relative overflow-hidden h-60 md:h-72"> 1102 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/educourseteam_photo/Muhammad_Khoirul_Anwar_S.Kom.png" 1103 alt="Muhammad Khoirul Anwar, S.Kom" 1104 class="w-full h-full object-cover team-image"> 1105 <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 1106 </div> 1107 <div class="p-4 md:p-6 text-center relative"> 1108 <div class="absolute -top-10 left-0 right-0 flex justify-center"> 1109 <div class="bg-[#00ADB5] text-white px-4 md:px-6 py-1 md:py-2 rounded-full shadow-lg text-sm md:text-base">
1110 <span class="font-medium">IT Manager</span> 1111 </div> 1112 </div> 1113 <h4 class="text-xl md:text-2xl font-bold text-gray-900 mt-4 mb-4">Muhammad Khoirul Anwar, S.Kom</h4> 1114 <div class="social-icons flex justify-center space-x-3 md:space-x-4 mt-4"> 1115 1116 1117 1118 <a href="https://www.linkedin.com/in/khoirul-anwar/" class="text-blue-700 hover:text-blue-900 bg-blue-50 p-2 rounded-full hover:bg-blue-100 transition-colors"> 1119 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="currentColor" viewBox="0 0 24 24"> 1120 <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/> 1121 </svg> 1122 </a> 1123 1124 1125 1126 <a href="mailto:[email protected]" class="text-red-600 hover:text-red-800 bg-red-50 p-2 rounded-full hover:bg-red-100 transition-colors"> 1127 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 1128 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.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" /> 1129 </svg> 1130 </a> 1131 1132 1133 1134 <a href="https://www.instagram.com/khoirulan_/" class="text-pink-600 hover:text-pink-800 bg-pink-50 p-2 rounded-full hover:bg-pink-100 transition-colors"> 1135 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="currentColor" viewBox="0 0 24 24"> 1136 <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/> 1137 </svg> 1138 </a> 1139 1140 1141 1142 </div> 1143 </div> 1144 </div> 1145 1146 <div class="team-card flex-none w-[280px] sm:w-[300px] md:w-[320px] bg-white rounded-xl shadow-md overflow-hidden mx-2 md:mx-3 snap-center"> 1147 <div class="relative overflow-hidden h-60 md:h-72"> 1148 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/educourseteam_photo/Azizia_Syurie_Mutiara_S.Kom.png" 1149 alt="Azizia Syurie Mutiara, S.Kom" 1150 class="w-full h-full object-cover team-image"> 1151 <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 1152 </div> 1153 <div class="p-4 md:p-6 text-center relative"> 1154 <div class="absolute -top-10 left-0 right-0 flex justify-center"> 1155 <div class="bg-[#00ADB5] text-white px-4 md:px-6 py-1 md:py-2 rounded-full shadow-lg text-sm md:text-base">
1156 <span class="font-medium">Operational Manager</span> 1157 </div> 1158 </div> 1159 <h4 class="text-xl md:text-2xl font-bold text-gray-900 mt-4 mb-4">Azizia Syurie Mutiara, S.Kom</h4> 1160 <div class="social-icons flex justify-center space-x-3 md:space-x-4 mt-4"> 1161 1162 1163 1164 <a href="https://www.linkedin.com/in/azizia-syurie-68951b141" class="text-blue-700 hover:text-blue-900 bg-blue-50 p-2 rounded-full hover:bg-blue-100 transition-colors"> 1165 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="currentColor" viewBox="0 0 24 24"> 1166 <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/> 1167 </svg> 1168 </a> 1169 1170 1171 1172 <a href="mailto:[email protected]" class="text-red-600 hover:text-red-800 bg-red-50 p-2 rounded-full hover:bg-red-100 transition-colors"> 1173 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 1174 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.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" /> 1175 </svg> 1176 </a> 1177 1178 1179 1180 <a href="https://www.instagram.com/aziziasyurie/" class="text-pink-600 hover:text-pink-800 bg-pink-50 p-2 rounded-full hover:bg-pink-100 transition-colors"> 1181 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="currentColor" viewBox="0 0 24 24"> 1182 <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/> 1183 </svg> 1184 </a> 1185 1186 1187 1188 </div> 1189 </div> 1190 </div> 1191 1192 <div class="team-card flex-none w-[280px] sm:w-[300px] md:w-[320px] bg-white rounded-xl shadow-md overflow-hidden mx-2 md:mx-3 snap-center"> 1193 <div class="relative overflow-hidden h-60 md:h-72"> 1194 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/educourseteam_photo/Najwa_Fairuz_S.I.Kom_c.png" 1195 alt="Najwa Fairuz, S.I.Kom (c)" 1196 class="w-full h-full object-cover team-image"> 1197 <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 1198 </div> 1199 <div class="p-4 md:p-6 text-center relative"> 1200 <div class="absolute -top-10 left-0 right-0 flex justify-center"> 1201 <div class="bg-[#00ADB5] text-white px-4 md:px-6 py-1 md:py-2 rounded-full shadow-lg text-sm md:text-base">
1202 <span class="font-medium">Sales & Marketing Manager</span> 1203 </div> 1204 </div> 1205 <h4 class="text-xl md:text-2xl font-bold text-gray-900 mt-4 mb-4">Najwa Fairuz, S.I.Kom (c)</h4> 1206 <div class="social-icons flex justify-center space-x-3 md:space-x-4 mt-4"> 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 </div> 1217 </div> 1218 </div> 1219 1220 </div> 1221 </div> 1222 1223 <!-- Slider Controls with Enhanced Design --> 1224 <button class="absolute top-1/2 left-2 md:left-4 transform -translate-y-1/2 bg-white rounded-full p-2 md:p-3 shadow-lg focus:outline-none z-10 prev-button hover:bg-[#00ADB5] hover:text-white transition-colors slider-nav-button" aria-label="Previous team member"> 1225 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 1226 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> 1227 </svg> 1228 </button> 1229 <button class="absolute top-1/2 right-2 md:right-4 transform -translate-y-1/2 bg-white rounded-full p-2 md:p-3 shadow-lg focus:outline-none z-10 next-button hover:bg-[#00ADB5] hover:text-white transition-colors slider-nav-button" aria-label="Next team member"> 1230 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 1231 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> 1232 </svg> 1233 </button> 1234 1235 <!-- Team Pagination Indicators --> 1236 <div class="flex justify-center mt-6 space-x-2 team-pagination-dots"> 1237 <!-- Dots will be generated by JavaScript --> 1238 </div> 1239 </div> 1240 1241 <div class="text-center mt-10 md:mt-12 animate-fadeInUp animate-delay-300"> 1242 <a href="/teachers/all/" class="inline-flex items-center px-6 py-3 md:px-8 md:py-4 bg-[#00ADB5] text-white font-medium rounded-full hover:bg-[#008F96] transition-colors shadow-lg hover:shadow-xl transform hover:-translate-y-1"> 1243 Meet Our Expert Teachers 1244 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5 ml-2" viewBox="0 0 20 20" fill="currentColor"> 1245 <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> 1246 </svg> 1247 </a> 1248 </div> 1249 </div> 1250</section> 1251 1252<!-- Achievements Section with Enhanced Design and Improved Slider --> 1253<section class="py-16 md:py-20 bg-white relative overflow-hidden"> 1254 <div class="absolute top-0 right-0 w-1/3 h-full dot-pattern opacity-10"></div> 1255 1256 <div class="container mx-auto px-4 relative z-10"> 1257 <div class="text-center mb-10 md:mb-16 animate-fadeInUp"> 1258 <span class="inline-block px-4 py-1 bg-[#00ADB5]/10 text-[#00ADB5] font-medium rounded-full text-sm mb-4">RECOGNITION</span> 1259 <h2 class="text-2xl sm:text-3xl md:text-5xl font-bold text-gray-900 mb-4"> 1260 Our <span class="text-[#00ADB5]">Achievements</span> & Partnerships 1261 </h2> 1262 <p class="text-base md:text-lg text-gray-600 max-w-3xl mx-auto"> 1263 Celebrating our milestones and collaborations with leading organizations in education and technology 1264 </p> 1265 </div> 1266 1267 <!-- Achievements Slider with Enhanced Design and Snap Scrolling --> 1268 <div class="relative animate-fadeInUp animate-delay-200"> 1269 <div class="achievements-slider overflow-hidden"> 1270 <div id="achievements-container" class="flex flex-nowrap achievements-slider-container slider-container py-6 px-2 overflow-x-auto snap-x snap-mandatory"> 1271 1272 <div class="achievement-card flex-none w-[220px] sm:w-[240px] md:w-[260px] text-center bg-gray-50 p-4 md:p-6 rounded-xl shadow-sm hover:shadow-md mx-2 md:mx-4 snap-center"> 1273 1274 <div class="h-32 md:h-40 flex items-center justify-center mb-4 md:mb-6"> 1275 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/achievement_educourse/4_qU3QqsK.png" alt="Achievement" class="h-24 md:h-32 w-auto mx-auto"> 1276 </div> 1277 1278 1279 1280 <h6 class="text-gray-800 font-semibold text-sm md:text-base">STEAM Certified</h6> 1281 1282 </div> 1283 1284 <div class="achievement-card flex-none w-[220px] sm:w-[240px] md:w-[260px] text-center bg-gray-50 p-4 md:p-6 rounded-xl shadow-sm hover:shadow-md mx-2 md:mx-4 snap-center"> 1285 1286 <div class="h-32 md:h-40 flex items-center justify-center mb-4 md:mb-6"> 1287 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/achievement_educourse/3_U3fhs9v.png" alt="Achievement" class="h-24 md:h-32 w-auto mx-auto"> 1288 </div> 1289 1290 1291 1292 <h6 class="text-gray-800 font-semibold text-sm md:text-base">Winner of MRTJ Accel 2021</h6> 1293 1294 </div> 1295 1296 <div class="achievement-card flex-none w-[220px] sm:w-[240px] md:w-[260px] text-center bg-gray-50 p-4 md:p-6 rounded-xl shadow-sm hover:shadow-md mx-2 md:mx-4 snap-center"> 1297 1298 <div class="h-32 md:h-40 flex items-center justify-center mb-4 md:mb-6"> 1299 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/achievement_educourse/5_B1d1pZ0.png" alt="Achievement" class="h-24 md:h-32 w-auto mx-auto"> 1300 </div> 1301 1302 1303 1304 <h6 class="text-gray-800 font-semibold text-sm md:text-base">Winner of Hub.id 2021</h6> 1305 1306 </div> 1307 1308 <div class="achievement-card flex-none w-[220px] sm:w-[240px] md:w-[260px] text-center bg-gray-50 p-4 md:p-6 rounded-xl shadow-sm hover:shadow-md mx-2 md:mx-4 snap-center"> 1309 1310 <div class="h-32 md:h-40 flex items-center justify-center mb-4 md:mb-6"> 1311 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/achievement_educourse/1.png" alt="Achievement" class="h-24 md:h-32 w-auto mx-auto"> 1312 </div> 1313 1314 1315 1316 <h6 class="text-gray-800 font-semibold text-sm md:text-base">AWS Startup program 2021</h6> 1317 1318 </div> 1319 1320 <div class="achievement-card flex-none w-[220px] sm:w-[240px] md:w-[260px] text-center bg-gray-50 p-4 md:p-6 rounded-xl shadow-sm hover:shadow-md mx-2 md:mx-4 snap-center"> 1321 1322 <div class="h-32 md:h-40 flex items-center justify-center mb-4 md:mb-6"> 1323 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/achievement_educourse/2_ES4Pu6t.png" alt="Achievement" class="h-24 md:h-32 w-auto mx-auto"> 1324 </div> 1325 1326 1327 1328 <h6 class="text-gray-800 font-semibold text-sm md:text-base">Winner of Indigo Telkom 2021</h6> 1329 1330 </div> 1331 1332 <div class="achievement-card flex-none w-[220px] sm:w-[240px] md:w-[260px] text-center bg-gray-50 p-4 md:p-6 rounded-xl shadow-sm hover:shadow-md mx-2 md:mx-4 snap-center"> 1333 1334 <div class="h-32 md:h-40 flex items-center justify-center mb-4 md:mb-6"> 1335 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/achievement_educourse/6_iwXf1GV.png" alt="Achievement" class="h-24 md:h-32 w-auto mx-auto"> 1336 </div> 1337 1338 1339 1340 <h6 class="text-gray-800 font-semibold text-sm md:text-base">Top 10 LokalCorn 2021</h6> 1341 1342 </div> 1343 1344 <div class="achievement-card flex-none w-[220px] sm:w-[240px] md:w-[260px] text-center bg-gray-50 p-4 md:p-6 rounded-xl shadow-sm hover:shadow-md mx-2 md:mx-4 snap-center"> 1345 1346 <div class="h-32 md:h-40 flex items-center justify-center mb-4 md:mb-6"> 1347 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/achievement_educourse/10.png" alt="Achievement" class="h-24 md:h-32 w-auto mx-auto"> 1348 </div> 1349 1350 1351 1352 <h6 class="text-gray-800 font-semibold text-sm md:text-base">Finalist ASC 2021</h6> 1353 1354 </div> 1355 1356 <div class="achievement-card flex-none w-[220px] sm:w-[240px] md:w-[260px] text-center bg-gray-50 p-4 md:p-6 rounded-xl shadow-sm hover:shadow-md mx-2 md:mx-4 snap-center"> 1357 1358 <div class="h-32 md:h-40 flex items-center justify-center mb-4 md:mb-6"> 1359 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/achievement_educourse/2.png" alt="Achievement" class="h-24 md:h-32 w-auto mx-auto"> 1360 </div> 1361 1362 1363 1364 <h6 class="text-gray-800 font-semibold text-sm md:text-base">Indonesia Delegation for Hannover Messe, Germany 2021</h6> 1365 1366 </div> 1367 1368 <div class="achievement-card flex-none w-[220px] sm:w-[240px] md:w-[260px] text-center bg-gray-50 p-4 md:p-6 rounded-xl shadow-sm hover:shadow-md mx-2 md:mx-4 snap-center"> 1369 1370 <div class="h-32 md:h-40 flex items-center justify-center mb-4 md:mb-6"> 1371 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/achievement_educourse/Logo_Achievement.png" alt="Achievement" class="h-24 md:h-32 w-auto mx-auto"> 1372 </div> 1373 1374 1375 1376 <h6 class="text-gray-800 font-semibold text-sm md:text-base">Indonesia Delegation For Next Rise, South Korea 2021</h6> 1377 1378 </div> 1379 1380 <div class="achievement-card flex-none w-[220px] sm:w-[240px] md:w-[260px] text-center bg-gray-50 p-4 md:p-6 rounded-xl shadow-sm hover:shadow-md mx-2 md:mx-4 snap-center"> 1381 1382 <div class="h-32 md:h-40 flex items-center justify-center mb-4 md:mb-6"> 1383 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/achievement_educourse/6.png" alt="Achievement" class="h-24 md:h-32 w-auto mx-auto"> 1384 </div> 1385 1386 1387 1388 <h6 class="text-gray-800 font-semibold text-sm md:text-base">Finalist STARTUP4INDUSTRY 2021</h6> 1389 1390 </div> 1391 1392 <div class="achievement-card flex-none w-[220px] sm:w-[240px] md:w-[260px] text-center bg-gray-50 p-4 md:p-6 rounded-xl shadow-sm hover:shadow-md mx-2 md:mx-4 snap-center"> 1393 1394 <div class="h-32 md:h-40 flex items-center justify-center mb-4 md:mb-6"> 1395 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/achievement_educourse/3.png" alt="Achievement" class="h-24 md:h-32 w-auto mx-auto"> 1396 </div> 1397 1398 1399 1400 <h6 class="text-gray-800 font-semibold text-sm md:text-base">Winner of Elevate Women 2021</h6> 1401 1402 </div> 1403 1404 <div class="achievement-card flex-none w-[220px] sm:w-[240px] md:w-[260px] text-center bg-gray-50 p-4 md:p-6 rounded-xl shadow-sm hover:shadow-md mx-2 md:mx-4 snap-center"> 1405 1406 <div class="h-32 md:h-40 flex items-center justify-center mb-4 md:mb-6"> 1407 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/achievement_educourse/4.png" alt="Achievement" class="h-24 md:h-32 w-auto mx-auto"> 1408 </div> 1409 1410 1411 1412 <h6 class="text-gray-800 font-semibold text-sm md:text-base">Semi Finalist 2021</h6> 1413 1414 </div> 1415 1416 <div class="achievement-card flex-none w-[220px] sm:w-[240px] md:w-[260px] text-center bg-gray-50 p-4 md:p-6 rounded-xl shadow-sm hover:shadow-md mx-2 md:mx-4 snap-center"> 1417 1418 <div class="h-32 md:h-40 flex items-center justify-center mb-4 md:mb-6"> 1419 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/achievement_educourse/3_ZP2HoxZ.png" alt="Achievement" class="h-24 md:h-32 w-auto mx-auto"> 1420 </div> 1421 1422 1423 1424 <h6 class="text-gray-800 font-semibold text-sm md:text-base">Winner of Founders Live Jakarta</h6> 1425 1426 </div> 1427 1428 <div class="achievement-card flex-none w-[220px] sm:w-[240px] md:w-[260px] text-center bg-gray-50 p-4 md:p-6 rounded-xl shadow-sm hover:shadow-md mx-2 md:mx-4 snap-center"> 1429 1430 <div class="h-32 md:h-40 flex items-center justify-center mb-4 md:mb-6"> 1431 <img src="https://sgp1.digitaloceanspaces.com/educourse.id/achievement_educourse/5.png" alt="Achievement" class="h-24 md:h-32 w-auto mx-auto"> 1432 </div> 1433 1434 1435 1436 <h6 class="text-gray-800 font-semibold text-sm md:text-base">Editor's Choice Startup Istanbul March 2021</h6> 1437 1438 </div> 1439 1440 </div> 1441 </div> 1442 1443 <!-- Slider Controls with Enhanced Design --> 1444 <button class="absolute top-1/2 left-2 md:left-4 transform -translate-y-1/2 bg-white rounded-full p-2 md:p-3 shadow-lg focus:outline-none z-10 prev-ac
1444hievement hover:bg-[#00ADB5] hover:text-white transition-colors slider-nav-button" aria-label="Previous achievement"> 1445 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 1446 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> 1447 </svg> 1448 </button> 1449 <button class="absolute top-1/2 right-2 md:right-4 transform -translate-y-1/2 bg-white rounded-full p-2 md:p-3 shadow-lg focus:outline-none z-10 next-achievement hover:bg-[#00ADB5] hover:text-white transition-colors slider-nav-button" aria-label="Next achievement"> 1450 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 1451 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> 1452 </svg> 1453 </button> 1454 1455 <!-- Pagination Indicators --> 1456 <div class="flex justify-center mt-6 space-x-2 pagination-dots"> 1457 <!-- Dots will be generated by JavaScript --> 1458 </div> 1459 </div> 1460 </div> 1461</section> 1462 1463 </main> 1464 1465 <!-- Footer with Enhanced Design --> 1466 <footer class="footer-bg text-white relative"> 1467 <!-- Decorative Dot Pattern --> 1468 <div class="dot-pattern"></div> 1469 1470 <!-- Main Footer Content --> 1471 <div class="container mx-auto px-4 py-16 relative z-10"> 1472 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12"> 1473 <!-- Company Info --> 1474 <div> 1475 <img src="https://s3.ap-southeast-1.amazonaws.com/educourse.id/educoursetraction_icon/High_Res_Trans_Logo_Educourse.id.png" 1476 alt="Educourse Logo" 1477 class="h-10 mb-6 "> 1478 1479 <p class="text-gray-400 mb-6 company-description"> 1480 Educourse is an intelligent future education platform for STEAM 1481 learning with AI (Artificial Intelligence) and AR (Augmented Reality). 1482 </p> 1483 1484 <div> 1485 <p class="text-gray-300 font-medium mb-3">PT Maleo Edukasi Teknologi</p> 1486 <p class="text-gray-400 mb-3"> 1487 Intermark Indonesia Ruko. 8, Jl. Lkr. Tim. Rw. Mekar jaya, BSD, 1488 BSD City, Kec. Serpong, Kota Tangerang Selatan, Banten 15310 1489 </p> 1490 <p class="text-gray-400 mb-2">Mobile: (+62) 82143910521</p> 1491 <p class="text-gray-400">[email protected]</p> 1492 </div> 1493 </div> 1494 1495 <!-- Quick Links --> 1496 <div> 1497 <h4 class="text-lg font-bold mb-6 footer-heading">Quick Links</h4> 1498 <ul class="space-y-3"> 1499 <li> 1500 <a href="/about_us/" 1501 class="text-gray-400 hover:text-white transition-colors footer-link"> 1502 About Us 1503 </a> 1504 </li> 1505 1506 1507 <li> 1508 <a href="/courses/Tech%20Code%20Lab/" 1509 class="text-gray-400 hover:text-white transition-colors footer-link"> 1510 Tech Code Lab 1511 </a> 1512 </li> 1513 1514 <li> 1515 <a href="/courses/Robo%20Guardian%20Lab/" 1516 class="text-gray-400 hover:text-white transition-colors footer-link"> 1517 Robo Guardian Lab 1518 </a> 1519 </li> 1520 1521 <li> 1522 <a href="/courses/Global%20Rune%20Center/" 1523 class="text-gray-400 hover:text-white transition-colors footer-link"> 1524 Global Rune Center 1525 </a> 1526 </li> 1527 1528 1529 <li> 1530 <a href="/hub_center/" 1531 class="text-gray-400 hover:text-white transition-colors footer-link"> 1532 Hub Center 1533 </a> 1534 </li> 1535 </ul> 1536 </div> 1537 1538 <!-- Certifications --> 1539 <div> 1540 <h4 class="text-lg font-bold mb-6 footer-heading">Sertifikasi</h4> 1541 <div class="space-y-6"> 1542 <img src="https://s3.ap-southeast-1.amazonaws.com/educourse.id/educoursetraction_icon/2_Iq1k0tt.png" 1543 alt="Certification" 1544 class="h-20 w-auto"> 1545 1546 <img src="https://s3.ap-southeast-1.amazonaws.com/educourse.id/educoursetraction_icon/1_XXkaY
1546jA.png" 1547 alt="Certification" 1548 class="h-20 w-auto"> 1549 </div> 1550 </div> 1551 1552 <!-- Social Media --> 1553 <div> 1554 <h4 class="text-lg font-bold mb-6 footer-heading">Connect With Us</h4> 1555 <div class="space-y-5"> 1556 <!-- YouTube --> 1557 <a href="https://www.youtube.com/channel/UCYv4GADYTdzUZZli8o9Li3w/featured" 1558 class="flex items-center group"> 1559 <div class="w-10 h-10 rounded-full social-icon youtube-icon flex items-center justify-center mr-3"> 1560 <i class="fab fa-youtube text-white"></i> 1561 </div> 1562 <div> 1563 <p class="text-white font-medium">Youtube</p> 1564 <p class="text-gray-400 text-sm">Watch It Now</p> 1565 </div> 1566 </a> 1567 1568 <!-- Instagram --> 1569 <a href="https://www.instagram.com/educourse.id/" 1570 class="flex items-center group"> 1571 <div class="w-10 h-10 rounded-full social-icon instagram-icon flex items-center justify-center mr-3"> 1572 <i class="fab fa-instagram text-white"></i> 1573 </div> 1574 <div> 1575 <p class="text-white font-medium">Instagram</p> 1576 <p class="text-gray-400 text-sm">See all feeds</p> 1577 </div> 1578 </a> 1579 1580 <!-- Facebook --> 1581 <a href="https://www.facebook.com/educourse.id" 1582 class="flex items-center group"> 1583 <div class="w-10 h-10 rounded-full social-icon facebook-icon flex items-center justify-center mr-3"> 1584 <i class="fab fa-facebook-f text-white"></i> 1585 </div> 1586 <div> 1587 <p class="text-white font-medium">Facebook</p> 1588 <p class="text-gray-400 text-sm">Get it now</p> 1589 </div> 1590 </a> 1591 1592 <!-- LinkedIn --> 1593 <a href="https://www.linkedin.com/company/indonesia-global-education-network/" 1594 class="flex items-center group"> 1595 <div class="w-10 h-10 rounded-full social-icon linkedin-icon flex items-center justify-center mr-3"> 1596 <i class="fab fa-linkedin-in text-white"></i> 1597 </div> 1598 <div> 1599 <p class="text-white font-medium">Linkedin</p> 1600 <p class="text-gray-400 text-sm">Get it now</p> 1601 </div> 1602 </a> 1603 </div> 1604 </div> 1605 </div> 1606 </div> 1607 1608 <!-- Copyright --> 1609 <div class="copyright-section relative"> 1610 <div class="container mx-auto px-4 py-6"> 1611 <p class="text-gray-400 text-center"> 1612 © <span id="year"></span> <a href="https://educourse.id/" class="hover:text-[#00ADB5] transition-colors">Educourse.id</a> 1613 </p> 1614 </div> 1615 </div> 1616 </footer> 1617 1618 <!-- WhatsApp Button --> 1619 <a href="https://api.whatsapp.com/send?phone=628119661017&text=Name%3A%0D%0AAge%3A%0D%0AQuestion" 1620 class="float" 1621 target="_blank"> 1622 <i class="fab fa-whatsapp"></i> 1623 </a> 1624 </div> 1625 1626 1627 1628 1629 <!-- JavaScript --> 1630
1630<script> 1631 // Set current year 1632 document.getElementById('year').textContent = new Date().getFullYear(); 1633 1634 // Preloader 1635 window.addEventListener('load', function() { 1636 const preloader = document.getElementById('preloader'); 1637 setTimeout(function() { 1638 preloader.style.opacity = '0'; 1639 setTimeout(function() { 1640 preloader.style.display = 'none'; 1641 }, 500); 1642 }, 500); 1643 }); 1644 1645 // Mobile Menu Toggle 1646 document.getElementById('mobile-menu-button').addEventListener('click', function() { 1647 const mobileMenu = document.getElementById('mobile-menu'); 1648 mobileMenu.classList.toggle('hidden'); 1649 }); 1650 1651 // Mobile Courses Menu Toggle 1652 document.getElementById('mobile-courses-button').addEventListener('click', function() { 1653 const mobileCourses = document.getElementById('mobile-courses-menu'); 1654 mobileCourses.classList.toggle('hidden'); 1655 }); 1656 </script>
1656 1657 1658
1659<script> 1660 // Enhanced Team and Achievements Slider Functionality 1661 document.addEventListener('DOMContentLoaded', function() { 1662 // Team slider functionality 1663 setupSlider('.team-slider-container', '.prev-button', '.next-button', '.team-pagination-dots'); 1664 1665 // Achievements slider with enhanced functionality 1666 setupSlider('.achievements-slider-container', '.prev-achievement', '.next-achievement', '.pagination-dots'); 1667 1668 // Function to set up sliders with pagination 1669 function setupSlider(sliderSelector, prevButtonSelector, nextButtonSelector, paginationSelector) { 1670 const slider = document.querySelector(sliderSelector); 1671 const prevButton = document.querySelector(prevButtonSelector); 1672 const nextButton = document.querySelector(nextButtonSelector); 1673 const paginationContainer = document.querySelector(paginationSelector); 1674 1675 if (!slider || !prevButton || !nextButton) return; 1676 1677 // Get all slides 1678 const slides = slider.children; 1679 const slideCount = slides.length; 1680 let currentIndex = 0; 1681 1682 // Calculate visible slides based on container width 1683 const getVisibleSlides = () => { 1684 const containerWidth = slider.clientWidth; 1685 const slideWidth = slides[0].offsetWidth + parseInt(getComputedStyle(slides[0]).marginLeft) + 1686 parseInt(getComputedStyle(slides[0]).marginRight); 1687 return Math.floor(containerWidth / slideWidth); 1688 }; 1689 1690 // Calculate scroll amount based on slide width 1691 const getScrollAmount = () => { 1692 if (slides.length === 0) return 0; 1693 const slide = slides[0]; 1694 return slide.offsetWidth + parseInt(getComputedStyle(slide).marginLeft) + 1695 parseInt(getComputedStyle(slide).marginRight); 1696 }; 1697 1698 // Set up pagination 1699 const setupPagination = () => { 1700 if (!paginationContainer) return; 1701 1702 paginationContainer.innerHTML = ''; 1703 1704 // Create dots based on visible slides 1705 const visibleSlides = getVisibleSlides(); 1706 const totalDots = Math.ceil(slideCount / visibleSlides); 1707 1708 for (let i = 0; i < totalDots; i++) { 1709 const dot = document.createElement('button'); 1710 dot.classList.add('w-3', 'h-3', 'rounded-full', 'bg-gray-300', 'hover:bg-[#00ADB5]', 'transition-colors'); 1711 dot.setAttribute('aria-label', `Go to slide ${i + 1}`); 1712 1713 dot.addEventListener('click', () => { 1714 const targetIndex = i * visibleSlides; 1715 scrollToSlide(targetIndex); 1716 }); 1717 1718 paginationContainer.appendChild(dot); 1719 } 1720 1721 // Update active dot 1722 updateActiveDot(); 1723 }; 1724 1725 // Update active pagination dot 1726 const updateActiveDot = () => { 1727 const dots = paginationContainer ? paginationContainer.querySelectorAll('button') : []; 1728 if (!dots.length) return; 1729 1730 const visibleSlides = getVisibleSlides(); 1731 const activeDotIndex = Math.floor(currentIndex / visibleSlides); 1732 1733 dots.forEach((dot, i) => { 1734 if (i === activeDotIndex) { 1735 dot.classList.remove('bg-gray-300'); 1736 dot.classList.add('bg-[#00ADB5]'); 1737 dot.style.width = '12px'; 1738 } else { 1739 dot.classList.add('bg-gray-300'); 1740 dot.classList.remove('bg-[#00ADB5]'); 1741 dot.style.width = '8px'; 1742 } 1743 }); 1744 }; 1745 1746 // Scroll to specific slide 1747 const scrollToSlide = (index) => { 1748 if (index < 0) index = 0; 1749 if (index >= slideCount) index = slideCount - 1; 1750 1751 currentIndex = index; 1752 const scrollAmount = getScrollAmount(); 1753 slider.scrollTo({ 1754 left: index * scrollAmount, 1755 behavior: 'smooth' 1756 }); 1757 1758 updateActiveDot(); 1759 }; 1760 1761 // Button click handlers 1762 prevButton.addEventListener('click', () => { 1763 scrollToSlide(currentIndex - 1); 1764 }); 1765 1766 nextButton.addEventListener('click', () => { 1767 scrollToSlide(currentIndex + 1); 1768 }); 1769 1770 // Make slides clickable
1771 Array.from(slides).forEach((slide, index) => { 1772 slide.addEventListener('click', () => { 1773 scrollToSlide(index); 1774 }); 1775 }); 1776 1777 // Touch and mouse drag functionality 1778 enableDragToScroll(slider, () => { 1779 // After drag, snap to nearest slide 1780 const scrollAmount = getScrollAmount(); 1781 const scrollPosition = slider.scrollLeft; 1782 const newIndex = Math.round(scrollPosition / scrollAmount); 1783 1784 // Update current index and pagination 1785 currentIndex = newIndex; 1786 updateActiveDot(); 1787 }); 1788 1789 // Listen for scroll events to update pagination 1790 slider.addEventListener('scroll', () => { 1791 const scrollAmount = getScrollAmount(); 1792 const scrollPosition = slider.scrollLeft; 1793 const newIndex = Math.round(scrollPosition / scrollAmount); 1794 1795 if (newIndex !== currentIndex) { 1796 currentIndex = newIndex; 1797 updateActiveDot(); 1798 } 1799 }); 1800 1801 // Update pagination on window resize 1802 window.addEventListener('resize', () => { 1803 setupPagination(); 1804 }); 1805 1806 // Initial pagination setup 1807 setupPagination(); 1808 } 1809 1810 // Function to enable drag-to-scroll functionality 1811 function enableDragToScroll(slider, onDragEnd) { 1812 let isDown = false; 1813 let startX; 1814 let scrollLeft; 1815 let isDragging = false; 1816 1817 // Mouse events 1818 slider.addEventListener('mousedown', (e) => { 1819 isDown = true; 1820 slider.classList.add('dragging'); 1821 startX = e.pageX - slider.offsetLeft; 1822 scrollLeft = slider.scrollLeft; 1823 e.preventDefault(); // Prevent text selection during drag 1824 }); 1825 1826 slider.addEventListener('mouseleave', () => { 1827 if (isDown) { 1828 isDown = false; 1829 slider.classList.remove('dragging'); 1830 if (isDragging && onDragEnd) onDragEnd(); 1831 isDragging = false; 1832 } 1833 }); 1834 1835 slider.addEventListener('mouseup', () => { 1836 if (isDown) { 1837 isDown = false; 1838 slider.classList.remove('dragging'); 1839 if (isDragging && onDragEnd) onDragEnd(); 1840 isDragging = false; 1841 } 1842 }); 1843 1844 slider.addEventListener('mousemove', (e) => { 1845 if (!isDown) return; 1846 e.preventDefault(); 1847 isDragging = true; 1848 const x = e.pageX - slider.offsetLeft; 1849 const walk = (x - startX) * 1.5; // Scroll speed multiplier 1850 slider.scrollLeft = scrollLeft - walk; 1851 }); 1852 1853 // Touch events 1854 slider.addEventListener('touchstart', (e) => { 1855 isDown = true; 1856 slider.classList.add('dragging'); 1857 startX = e.touches[0].pageX - slider.offsetLeft; 1858 scrollLeft = slider.scrollLeft; 1859 }, { passive: true }); 1860 1861 slider.addEventListener('touchend', () => { 1862 if (isDown) { 1863 isDown = false; 1864 slider.classList.remove('dragging'); 1865 if (isDragging && onDragEnd) onDragEnd(); 1866 isDragging = false; 1867 } 1868 }, { passive: true }); 1869 1870 slider.addEventListener('touchcancel', () => { 1871 if (isDown) { 1872 isDown = false; 1873 slider.classList.remove('dragging'); 1874 if (isDragging && onDragEnd) onDragEnd(); 1875 isDragging = false;
1876 } 1877 }, { passive: true }); 1878 1879 slider.addEventListener('touchmove', (e) => { 1880 if (!isDown) return; 1881 isDragging = true; 1882 const x = e.touches[0].pageX - slider.offsetLeft; 1883 const walk = (x - startX) * 1.5; 1884 slider.scrollLeft = scrollLeft - walk; 1885 }, { passive: true }); 1886 } 1887 1888 // Animate elements when they come into view 1889 const animateOnScroll = () => { 1890 const elements = document.querySelectorAll('.animate-fadeInUp'); 1891 1892 elements.forEach(element => { 1893 const elementTop = element.getBoundingClientRect().top; 1894 const elementVisible = 150; 1895 1896 if (elementTop < window.innerHeight - elementVisible) { 1897 element.style.opacity = '1'; 1898 } 1899 }); 1900 }; 1901 1902 // Initial check and add scroll listener 1903 animateOnScroll(); 1904 window.addEventListener('scroll', animateOnScroll); 1905 }); 1906</script>
1906 1907 1908 1909 <!-- Midtrans Script --> 1910
1910<script type="text/javascript" src="https://app.midtrans.com/snap/snap.js" data-client-key="Mid-client-FfjRE99vMEzdMzUt"></script>
1910 1911</body> 1912</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.