PageSourceSearch

https://educourse.id/about_us/

html educourse.id collected 2026-09-24 12:51:48 UTC 105,866 bytes, 1,912 lines download raw bytes

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 &amp; 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 &amp; 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 &amp; 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&#x27;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.