1<!DOCTYPE html> 2<html lang="en" class="scroll-smooth"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 9 10 <title>SATRI</title> 11 <meta name="title" content="SATRI"> 12 <meta name="description" 13 content="SATRI, Samarth Technical Research and Innovations, SatriTech, IT Training Company, Research facilities, Internship Program, Web Development Course, UI-UX Design"> 14 <meta name="keywords" 15 content="SATRI, Samarth Technical Research and Innovations, SatriTech, IT Training Company, Research facilities, Internship Program, Web Development Course, UI-UX Design"> 16 <meta name="author" content="SATRI"> 17 18 19 <link rel="icon" type="image/png" 20 href="https://satritech.com/storage/favicons/TAVFnHnQbeDDHV7X5SqVgERL3jvyUXsLdBYYeApn.png"> 21 <link rel="apple-touch-icon" 22 href="https://satritech.com/storage/favicons/TAVFnHnQbeDDHV7X5SqVgERL3jvyUXsLdBYYeApn.png"> 23 24 25 <meta property="og:type" content="website"> 26 <meta property="og:url" content="https://satritech.com/home"> 27 <meta property="og:title" content="SATRI"> 28 <meta property="og:description" content="SATRI, Samarth Technical Research and Innovations, SatriTech, IT Training Company, Research facilities, Internship Program, Web Development Course, UI-UX Design"> 29 <meta property="og:image" 30 content="https://satritech.com/images/og-default.jpg"> 31 32 33 <meta property="twitter:card" content="summary_large_image"> 34 <meta property="twitter:url" content="https://satritech.com/home"> 35 <meta property="twitter:title" content="SATRI"> 36 <meta property="twitter:description" content="SATRI, Samarth Technical Research and Innovations, SatriTech, IT Training Company, Research facilities, Internship Program, Web Development Course, UI-UX Design"> 37 <meta property="twitter:image" 38 content="https://satritech.com/images/og-default.jpg"> 39 40 41 <link rel="canonical" href="https://satritech.com/home"> 42 43 44 <link rel="alternate" type="text/markdown" title="LLM-friendly version" href="https://satritech.com/llms.txt"> 45 <link rel="alternate" type="text/markdown" title="LLM-friendly full version" href="https://satritech.com/llms-full.txt"> 46 47 48 <link rel="preconnect" href="https://fonts.googleapis.com"> 49 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 50 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" 51 rel="stylesheet"> 52
52<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
52 53 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" 54 integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" 55 crossorigin="anonymous" referrerpolicy="no-referrer" /> 56 57 58 <link rel="preload" as="style" href="https://satritech.com/build/assets/app-BWZ8BhEz.css" /><link rel="stylesheet" href="https://satritech.com/build/assets/app-BWZ8BhEz.css" /> 59 60 <meta name="theme-color" content="#1363C6"> 61 62 63 <meta name="csrf-token" content="4buuchdlwWEnGZjWPXRwiY90BxxYkttoAhhsNAFU"> 64 65 <style> 66 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); 67 68 * { 69 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 70 } 71 72 /* Particle Canvas */ 73 #particles-canvas { 74 position: fixed; 75 top: 0; 76 left: 0; 77 width: 100%; 78 height: 100%; 79 pointer-events: none; 80 z-index: 0; 81 } 82 83 /* Gradient Mesh Background */ 84 .gradient-mesh-bg { 85 position: fixed; 86 top: 0; 87 left: 0; 88 width: 100%; 89 height: 100%; 90 z-index: 0; 91 background: 92 radial-gradient(at 27% 37%, rgba(19, 99, 198, 0.12) 0px, transparent 50%), 93 radial-gradient(at 97% 21%, rgba(76, 175, 249, 0.10) 0px, transparent 50%), 94 radial-gradient(at 52% 99%, rgba(19, 99, 198, 0.08) 0px, transparent 50%), 95 radial-gradient(at 10% 29%, rgba(76, 175, 249, 0.12) 0px, transparent 50%), 96 radial-gradient(at 90% 75%, rgba(19, 99, 198, 0.10) 0px, transparent 50%); 97 animation: mesh-movement 20s ease infinite; 98 } 99 100 .dark .gradient-mesh-bg { 101 background: 102 radial-gradient(at 27% 37%, rgba(19, 99, 198, 0.08) 0px, transparent 50%), 103 radial-gradient(at 97% 21%, rgba(76, 175, 249, 0.06) 0px, transparent 50%), 104 radial-gradient(at 52% 99%, rgba(19, 99, 198, 0.05) 0px, transparent 50%), 105 radial-gradient(at 10% 29%, rgba(76, 175, 249, 0.08) 0px, transparent 50%); 106 } 107 108 @keyframes mesh-movement { 109 110 0%, 111 100% { 112 filter: hue-rotate(0deg) brightness(1); 113 transform: scale(1); 114 } 115 116 50% { 117 filter: hue-rotate(10deg) brightness(1.08); 118 transform: scale(1.03); 119 } 120 } 121 122 /* Scroll Reveal - Instant reveal on scroll */ 123 .scroll-reveal { 124 opacity: 1; 125 transform: translateY(0); 126 } 127 128 .scroll-reveal.animate-on-scroll { 129 opacity: 0; 130 transform: translateY(20px); 131 transition: opacity 0.4s ease-out, transform 0.4s ease-out; 132 } 133 134 .scroll-reveal.animate-on-scroll.revealed { 135 opacity: 1; 136 transform: translateY(0); 137 } 138 </style> 139 </head> 140 141<body x-data="{ darkMode: false }" x-init="darkMode = JSON.parse(localStorage.getItem('darkMode') || 'false'); 142$watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))" :class="{ 'dark bg-gray-900': darkMode }" 143 class="antialiased transition-colors duration-500 overflow-x-hidden"> 144 145 <div x-data="preloader()" 146 x-show="loading" 147 x-transition:leave="transition ease-in-out duration-300" 148 x-transition:leave-start="opacity-100 backdrop-blur-md" 149 x-transition:leave-end="opacity-0 backdrop-blur-none" 150 class="fixed inset-0 z-[9999] flex items-center justify-center bg-white/60 dark:bg-gray-900/60 backdrop-blur-xl"> 151 152 <div class="relative flex flex-col items-center"> 153 <!-- Main Loader Container --> 154 <div class="relative w-28 h-28 flex items-center justify-center"> 155 <!-- Outer Spinning Gradient Ring --> 156 <div class="absolute inset-0 border-[3px] border-transparent border-t-[#1363C6] dark:border-t-blue-400 rounded-full animate-spin"></div> 157 158 <!-- Inner Pulsing Ring --> 159 <div class="absolute inset-2 border-[2px] border-transparent border-b-[#1363C6]/40 dark:border-b-blue-400/40 rounded-full animate-[spin_2s_linear_infinite_reverse]"></div> 160
161 <!-- Logo Container with Pulsing Effect --> 162 <div class="relative z-10 w-16 h-16 bg-white dark:bg-gray-800 rounded-2xl flex items-center justify-center shadow-2xl transition-transform duration-500 hover:scale-110 group animate-pulse-subtle"> 163 <img src="https://satritech.com/storage/logos/RUA0qZhRgA5mzJjW2u7mbQnaqDnybqA9KkISW9iK.png" 164 alt="Logo" 165 class="w-10 h-10 object-contain"> 166 </div> 167 </div> 168 169 <!-- Optional Loading Text --> 170 <div class="mt-6 text-sm font-medium tracking-widest text-gray-500 dark:text-gray-400 uppercase animate-pulse"> 171 Loading... 172 </div> 173 </div> 174</div> 175 176<style> 177 @keyframes pulse-subtle { 178 0%, 100% { transform: scale(1); opacity: 1; } 179 50% { transform: scale(1.05); opacity: 0.9; } 180 } 181 .animate-pulse-subtle { 182 animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; 183 } 184</style> 185
186<script> 187 // Global flag - preloader only runs once per full page load 188 window.__preloaderDone = window.__preloaderDone || false; 189 190 document.addEventListener('alpine:init', () => { 191 Alpine.data('preloader', () => ({ 192 loading: true, 193 init() { 194 if (window.__preloaderDone) { 195 this.loading = false; 196 return; 197 } 198 window.__preloaderDone = true; 199 200 const startTime = Date.now(); 201 202 const clearLoading = () => { 203 const elapsedTime = Date.now() - startTime; 204 const minDuration = 300; 205 const remainingTime = Math.max(0, minDuration - elapsedTime); 206 207 setTimeout(() => { 208 this.loading = false; 209 window.dispatchEvent(new CustomEvent('page-loaded')); 210 }, remainingTime); 211 }; 212 213 if (document.readyState === 'complete') { 214 clearLoading(); 215 } else { 216 window.addEventListener('load', clearLoading); 217 } 218 219 setTimeout(() => { 220 if (this.loading) this.loading = false; 221 }, 3000); 222 } 223 })); 224 }); 225</script>
225 226 227 228 <div class="gradient-mesh-bg opacity-50 dark:opacity-30"></div> 229 <canvas id="particles-canvas" class="opacity-50 dark:opacity-30"></canvas> 230 231 232 <div class="relative z-10 flex flex-col min-h-screen"> 233 234 235 <header class="sticky top-0 z-50 w-full"> 236 <style> 237 [x-cloak] { 238 display: none !important; 239 } 240 241 .nav-active-indicator { 242 position: absolute; 243 bottom: 0.25rem; 244 left: 40%; 245 transform: translateX(-50%); 246 width: 1.5rem; 247 height: 2px; 248 background: white; 249 border-radius: 9999px; 250 } 251</style> 252 253<nav x-data="{ isMobileMenuOpen: false, activeDropdown: null }" @click.away="activeDropdown = null" 254 class="sticky top-0 z-50 bg-[#1363C6] dark:bg-gray-800 backdrop-blur-md shadow-lg transition-all duration-300"> 255 256 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 257 <div class="flex items-center justify-between h-16"> 258 259 260 <a href="https://satritech.com" class="flex items-center gap-3 group flex-shrink-0" aria-label="Home"> 261 262 <div class=" items-center"> 263 <span class="text-white font-bold text-lg tracking-tight"> 264 SATRI 265 </span> 266 </div> 267 </a> 268 269 270 <div class="hidden lg:flex items-center space-x-1 flex-1 justify-center"> 271 272 <a href="https://satritech.com" 273 class="relative px-4 py-2 rounded-lg text-sm font-medium text-white transition-all duration-200 bg-white/15"> 274 Home 275 <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-white rounded-full"></span> 276 </a> 277 278 <div class="relative" @mouseenter="activeDropdown = 'about'" 279 @mouseleave="activeDropdown = null"> 280 <a class=" flex flex-col text-gray-100 text-sm font-medium px-4 py-2 hover:bg-white/10 rounded-lg transition-all duration-200"> 281 <div class="flex gap-1 items-center"> 282 <span>About</span> 283 <svg :class="{ 'rotate-180': activeDropdown === 'about' }" 284 class="w-4 h-4 transition-transform duration-200" fill="none" 285 stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"> 286 <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path> 287 </svg> 288 </div> 289 </a> 290 291 <div x-show="activeDropdown === 'about'" 292 x-transition:enter="transition ease-out duration-200" 293 x-transition:enter-start="opacity-0 scale-95 -translate-y-2" 294 x-transition:enter-end="opacity-100 scale-100 translate-y-0" 295 x-transition:leave="transition ease-in duration-150" 296 x-transition:leave-start="opacity-100 scale-100 translate-y-0" 297 x-transition:leave-end="opacity-0 scale-95 -translate-y-2" x-cloak 298 class="absolute left-0 mt-2 w-56 bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-100 dark:border-gray-700 overflow-hidden"> 299 <div class="py-2"> 300 <a href="https://satritech.com/about-us" 301 class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-[#1363C6]/10 hover:text-[#1363C6] dark:hover:text-[#1363C6] transition-all duration-200 ">
302 <span>About Company</span> 303 </a> 304 <a href="https://satritech.com/team" 305 class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-[#1363C6]/10 hover:text-[#1363C6] dark:hover:text-[#1363C6] transition-all duration-200 "> 306 <span>Our Team</span> 307 </a> 308 <a href="https://satritech.com/interns" 309 class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-[#1363C6]/10 hover:text-[#1363C6] dark:hover:text-[#1363C6] transition-all duration-200 "> 310 <span>Our Interns</span> 311 </a> 312 <a href="https://satritech.com/students" 313 class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-[#1363C6]/10 hover:text-[#1363C6] dark:hover:text-[#1363C6] transition-all duration-200 "> 314 <span>Our Students</span> 315 </a> 316 <a href="https://satritech.com/our-projects" 317 class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-[#1363C6]/10 hover:text-[#1363C6] dark:hover:text-[#1363C6] transition-all duration-200 "> 318 <span>Products</span> 319 </a> 320 </div> 321 </div> 322 </div> 323 324 <a href="https://satritech.com/courses" 325 class="relative px-4 py-2 rounded-lg text-sm font-medium text-white transition-all duration-200 hover:bg-white/10"> 326 Courses 327 </a> 328 329 <a href="https://satritech.com/services" 330 class="relative px-4 py-2 rounded-lg text-sm font-medium text-white transition-all duration-200 hover:bg-white/10"> 331 Services 332 </a> 333 334 <a href="https://satritech.com/gallery" 335 class="relative px-4 py-2 rounded-lg text-sm font-medium text-white transition-all duration-200 hover:bg-white/10"> 336 Gallery 337 </a> 338 339 <a href="https://satritech.com/contact-us" 340 class="relative px-4 py-2 rounded-lg text-sm font-medium text-white transition-all duration-200 hover:bg-white/10"> 341 Contact 342 </a> 343 </div> 344 345 346 <div class="flex items-center gap-2"> 347 348 <a href="https://satritech.com/apps" 349 class="group inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 text-white backdrop-blur-sm transition-all duration-300 hover:scale-105 active:scale-95 border border-white/20 hover:border-white/30" 350 aria-label="App Store"> 351 <svg class="w-4 h-4 transition-transform duration-300 group-hover:rotate-12" fill="currentColor"
352 viewBox="0 0 20 20"> 353 <path 354 d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /> 355 </svg> 356 <span class="hidden sm:inline text-sm font-semibold">Apps</span> 357 </a> 358 359 360 <a href="https://satritech.com/student/login" 361 class="group inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 text-white backdrop-blur-sm transition-all duration-300 hover:scale-105 active:scale-95 border border-white/20 hover:border-white/30" 362 aria-label="Student Portal"> 363 <svg class="w-4 h-4 transition-transform duration-300 group-hover:rotate-12" fill="none" 364 stroke="currentColor" viewBox="0 0 24 24"> 365 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 366 d="M12 14l9-5-9-5-9 5 9 5z" /> 367 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 368 d="M12 14v6m0 0l4-2m-4 2l-4-2" /> 369 </svg> 370 <span class="hidden sm:inline text-sm font-semibold">Login</span> 371 </a> 372 373 374 <button @click.prevent="darkMode = !darkMode" 375 class="relative flex h-10 w-10 items-center justify-center rounded-xl bg-white/10 text-white backdrop-blur-sm transition-all duration-200 hover:bg-white/20 hover:scale-105 active:scale-95 border border-white/20" 376 aria-label="Toggle dark mode"> 377 <svg class="hidden dark:block w-5 h-5 transition-transform duration-300" fill="none" 378 stroke="currentColor" viewBox="0 0 24 24"> 379 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 380 d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /> 381 </svg> 382 <svg class="dark:hidden w-5 h-5 transition-transform duration-300" fill="none" 383 stroke="currentColor" viewBox="0 0 24 24"> 384 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 385 d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /> 386 </svg> 387 </button> 388 389 390 <button @click="isMobileMenuOpen = !isMobileMenuOpen" 391 class="lg:hidden relative flex h-10 w-10 items-center justify-center rounded-xl bg-white/10 text-white backdrop-blur-sm transition-all duration-200 hover:bg-white/20 hover:scale-105 active:scale-95 border border-white/20" 392 aria-label="Toggle mobile menu" :aria-expanded="isMobileMenuOpen.toString()"> 393 <svg x-show="!isMobileMenuOpen" class="h-6 w-6 transition-all duration-200" fill="none" 394 stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> 395 <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" /> 396 </svg> 397 <svg x-show="isMobileMenuOpen" class="h-6 w-6 transition-all duration-200" fill="none" 398 stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> 399 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> 400 </svg> 401 </button> 402 </div> 403 </div> 404 </div> 405 406 407 <div x-show="isMobileMenuOpen" x-transition:enter="transition ease-out duration-300" 408 x-transition:enter-start="opacity-0 -translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" 409 x-transition:leave="transition ease-in duration-200" 410 x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-4" x-cloak 411 class="lg:hidden bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800 shadow-2xl"> 412 <div class="px-4 py-4 space-y-1 max-h-[calc(100vh-4rem)] overflow-y-auto"> 413 414 <a href="https://satritech.com/student/login" @click="isMobileMenuOpen = false" 415 class="flex items-center gap-3 px-4 py-3 text-sm font-bold rounded-xl text-white bg-[#1363C6] hover:bg-[#1363C6]/90 transition-all duration-200 shadow-md"> 416 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 417 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 418 d="M12 14l9-5-9-5-9 5 9 5z" /> 419 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 420 d="M12 14v6m0 0l4-2m-4 2l-4-2" /> 421 </svg>
422 <span>Satri LMS (Student Portal)</span> 423 </a> 424 425 426 <a href="https://satritech.com/apps" @click="isMobileMenuOpen = false" 427 class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl text-gray-800 dark:text-gray-200 hover:bg-[#1363C6]/10 hover:text-[#1363C6] transition-all duration-200 border border-gray-100 dark:border-gray-800"> 428 <svg class="w-5 h-5 opacity-60" fill="currentColor" viewBox="0 0 20 20"> 429 <path 430 d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /> 431 </svg> 432 <span>App Store</span> 433 </a> 434 435 436 <a href="https://satritech.com" @click="isMobileMenuOpen = false" 437 class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl text-gray-800 dark:text-gray-200 hover:bg-[#1363C6]/10 hover:text-[#1363C6] transition-all duration-200 group bg-[#1363C6]/10 text-[#1363C6]"> 438 <svg class="w-5 h-5 opacity-60 group-hover:opacity-100 transition-opacity" fill="none" 439 stroke="currentColor" viewBox="0 0 24 24"> 440 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 441 d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> 442 </svg> 443 <span>Home</span> 444 </a> 445 446 <div x-data="{ open: false }" class="space-y-1"> 447 <button @click="open = !open" 448 class="w-full flex justify-between items-center px-4 py-3 text-sm font-medium rounded-xl text-gray-800 dark:text-gray-200 hover:bg-[#1363C6]/10 hover:text-[#1363C6] transition-all duration-200 group "> 449 <div class="flex items-center gap-3"> 450 <svg class="w-5 h-5 opacity-60 group-hover:opacity-100 transition-opacity" 451 fill="none" stroke="currentColor" viewBox="0 0 24 24"> 452 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 453 d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> 454 </svg> 455 <span>About</span> 456 </div> 457 <svg :class="{ 'rotate-180': open }" class="w-5 h-5 transition-transform duration-200" 458 fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> 459 <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path> 460 </svg> 461 </button> 462 463 <div x-show="open" x-transition:enter="transition ease-out duration-200" 464 x-transition:enter-start="opacity-0 -translate-y-1" 465 x-transition:enter-end="opacity-100 translate-y-0" x-cloak class="pl-6 space-y-1"> 466 <a href="https://satritech.com/about-us" 467 @click="isMobileMenuOpen = false" 468 class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm text-gray-700 dark:text-gray-300 hover:bg-[#1363C6]/10 hover:text-[#1363C6] transition-all duration-200 "> 469 <div class="w-2 h-2 rounded-full bg-[#1363C6]/40"></div> 470 <span>About Company</span> 471 </a> 472 <a href="https://satritech.com/team" 473 @click="isMobileMenuOpen = false" 474 class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm text-gray-700 dark:text-gray-300 hover:bg-[#1363C6]/10 hover:text-[#1363C6] transition-all duration-200 "> 475 <div class="w-2 h-2 rounded-full bg-[#1363C6]/40"></div>
476 <span>Our Team</span> 477 </a> 478 <a href="https://satritech.com/interns" 479 @click="isMobileMenuOpen = false" 480 class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm text-gray-700 dark:text-gray-300 hover:bg-[#1363C6]/10 hover:text-[#1363C6] transition-all duration-200 "> 481 <div class="w-2 h-2 rounded-full bg-[#1363C6]/40"></div> 482 <span>Our Interns</span> 483 </a> 484 <a href="https://satritech.com/students" 485 @click="isMobileMenuOpen = false" 486 class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm text-gray-700 dark:text-gray-300 hover:bg-[#1363C6]/10 hover:text-[#1363C6] transition-all duration-200 "> 487 <div class="w-2 h-2 rounded-full bg-[#1363C6]/40"></div> 488 <span>Our Students</span> 489 </a> 490 <a href="https://satritech.com/our-projects" 491 @click="isMobileMenuOpen = false" 492 class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm text-gray-700 dark:text-gray-300 hover:bg-[#1363C6]/10 hover:text-[#1363C6] transition-all duration-200 "> 493 <div class="w-2 h-2 rounded-full bg-[#1363C6]/40"></div> 494 <span>Products</span> 495 </a> 496 </div> 497 </div> 498 499 <a href="https://satritech.com/courses" @click="isMobileMenuOpen = false" 500 class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl text-gray-800 dark:text-gray-200 hover:bg-[#1363C6]/10 hover:text-[#1363C6] transition-all duration-200 group "> 501 <svg class="w-5 h-5 opacity-60 group-hover:opacity-100 transition-opacity" fill="none" 502 stroke="currentColor" viewBox="0 0 24 24"> 503 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 504 d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /> 505 </svg> 506 <span>Courses</span> 507 </a> 508 509 <a href="https://satritech.com/services" @click="isMobileMenuOpen = false" 510 class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl text-gray-800 dark:text-gray-200 hover:bg-[#1363C6]/10 hover:text-[#1363C6] transition-all duration-200 group "> 511 <svg class="w-5 h-5 opacity-60 group-hover:opacity-100 transition-opacity" fill="none" 512 stroke="currentColor" viewBox="0 0 24 24"> 513 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 514 d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> 515 </svg> 516 <span>Services</span> 517 </a> 518 519 <a href="https://satritech.com/gallery" @click="isMobileMenuOpen = false" 520 class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl text-gray-800 dark:text-gray-200 hover:bg-[#1363C6]/10 hover:text-[#1363C6] transition-all duration-200 group "> 521 <svg class="w-5 h-5 opacity-60 group-hover:opacity-100 transition-opacity" fill="none" 522 stroke="currentColor" viewBox="0 0 24 24"> 523 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 524 d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /> 525 </svg>
526 <span>Gallery</span> 527 </a> 528 529 <a href="https://satritech.com/contact-us" @click="isMobileMenuOpen = false" 530 class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl text-gray-800 dark:text-gray-200 hover:bg-[#1363C6]/10 hover:text-[#1363C6] transition-all duration-200 group "> 531 <svg class="w-5 h-5 opacity-60 group-hover:opacity-100 transition-opacity" fill="none" 532 stroke="currentColor" viewBox="0 0 24 24"> 533 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 534 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" /> 535 </svg> 536 <span>Contact</span> 537 </a> 538 </div> 539 </div> 540</nav> 541 </header> 542 543 544 <main id="main-content" class="flex-1 w-full"> 545 546 547 548 549 <section 550 class="relative bg-[#1363C6] dark:bg-gray-900 overflow-hidden flex items-center justify-center min-h-[250px] md:min-h-[250px] lg:min-h-[350px] py-14 md:py-12 lg:py-20" 551 aria-label="Samarth Technical Research and Innovations"> 552 553 554 <div class="absolute inset-0 z-0 hero-parallax"> 555 <img src="https://satritech.com/storage/sections/image-removebg-preview_1766905741.png" alt="Samarth Technical Research and Innovations" loading="eager" 556 class="w-full h-full object-cover opacity-15" decoding="async"> 557 558 559 <div class="absolute inset-0 bg-gradient-to-b from-[#1363C6]/40 via-[#115CB8]/30 to-[#0D4A8F]/50"></div> 560 </div> 561 562 563 <div class="absolute inset-0 z-[1] pointer-events-none opacity-30"> 564 <div class="absolute inset-0 overflow-hidden pointer-events-none z-10"> 565 <div 566 class="absolute top-20 left-10 567 w-56 md:w-72 h-56 md:h-72 568 bg-gray-900/60 569 rounded-full blur-[80px] 570 animate-float"> 571 </div> 572 573 <div 574 class="absolute bottom-20 right-10 575 w-72 md:w-[26rem] h-72 md:h-[26rem] 576 bg-gray-900/60 577 rounded-full blur-[100px] 578 animate-float animation-delay-1000"> 579 </div> 580 581 <div 582 class="absolute top-1/2 left-1/2 583 w-64 md:w-80 h-64 md:h-80 584 bg-gray-900/40 585 rounded-full blur-[90px] 586 animate-float animation-delay-2000"> 587 </div> 588</div> 589 </div> 590 591 592 <div class="absolute inset-0 z-[2] opacity-[0.04]" 593 style="background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 60px 60px;"> 594 </div> 595 596 597 <div class="absolute top-20 left-10 w-96 h-96 bg-[#4CAFF9] rounded-full opacity-10 blur-3xl z-[1]"></div> 598 <div class="absolute bottom-20 right-10 w-80 h-80 bg-[#4CAFF9] rounded-full opacity-10 blur-3xl z-[1]"></div> 599 600 601 <div class="relative z-10 w-full max-w-7xl mx-auto px-6 sm:px-10 md:px-16 lg:px-20"> 602 603 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-10 items-center"> 604 605 <div class="text-left"> 606 607 <div class="scroll-reveal inline-block mb-3"> 608 <div 609 class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/15 backdrop-blur-md shadow-lg shadow-[#1363C6]/20"> 610 <span class="text-white font-semibold uppercase tracking-wider text-xs"> 611 SATRI 612 </span> 613 </div> 614 </div> 615 616 617 <h1 class="scroll-reveal font-bold text-white text-2xl md:text-3xl lg:text-4xl leading-tight mb-3">
618 <span class="block md:inline">Samarth Technical Research and Innovations</span> 619 </h1> 620 621 622 <div class="scroll-reveal mb-4"> 623 <div class="text-white/90 leading-relaxed text-sm md:text-base"> 624 Harness the Power of Research & Innovation, Augmented Reality, Advanced Technology, and Expert Teams to Drive Your Success. Explore, Innovate, and in the Digital Age. 625 </div> 626 </div> 627 628 629 <div class="scroll-reveal flex flex-col sm:flex-row items-center justify-start gap-3"> 630 631 <a href="contact-us" 632 class="group inline-flex items-center justify-center gap-2 bg-white text-[#1363C6] font-bold rounded-full transition-all duration-300 hover:shadow-xl hover:shadow-white/30 hover:scale-105 active:scale-95 w-full sm:w-auto px-5 py-2.5 text-sm"> 633 <span>Contact Us</span> 634 <svg class="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" 635 fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"> 636 <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /> 637 </svg> 638 </a> 639 </div> 640 </div> 641 642 643 <div class="scroll-reveal hidden lg:flex items-center justify-end"> 644 <div class="relative w-full"> 645 <img src="https://satritech.com/storage/sections/WhatsApp_Image_2025-11-26_at_1_01_28_PM-removebg-preview_1766934449.png" alt="Samarth Technical Research and Innovations" 646 class="w-full max-h-[300px] object-contain object-right drop-shadow-2xl rounded-lg" 647 loading="eager" decoding="async"> 648 </div> 649 </div> 650 </div> 651 </div> 652 653</section> 654
655<script> 656 (function() { 657 'use strict'; 658 659 // Smooth Parallax Effect 660 let ticking = false; 661 const parallaxBg = document.querySelector('.hero-parallax'); 662 663 function updateParallax() { 664 if (parallaxBg) { 665 const scrolled = window.pageYOffset; 666 const parallaxSpeed = 0.3; 667 parallaxBg.style.transform = `translateY(${scrolled * parallaxSpeed}px)`; 668 } 669 ticking = false; 670 } 671 672 function requestTick() { 673 if (!ticking) { 674 window.requestAnimationFrame(updateParallax); 675 ticking = true; 676 } 677 } 678 679 window.addEventListener('scroll', requestTick, { 680 passive: true 681 }); 682 683 // Scroll Reveal Animation 684 const observerOptions = { 685 threshold: 0.1, 686 rootMargin: '0px 0px -50px 0px' 687 }; 688 689 const revealObserver = new IntersectionObserver((entries) => { 690 entries.forEach((entry, index) => { 691 if (entry.isIntersecting) { 692 setTimeout(() => { 693 entry.target.classList.add('opacity-100', 'translate-y-0'); 694 entry.target.classList.remove('opacity-0', 'translate-y-6'); 695 }, index * 150); 696 revealObserver.unobserve(entry.target); 697 } 698 }); 699 }, observerOptions); 700 701 // Initialize reveal elements 702 const revealElements = document.querySelectorAll('.scroll-reveal'); 703 revealElements.forEach(el => { 704 el.classList.add('opacity-0', 'translate-y-6', 'transition-all', 'duration-700', 'ease-out'); 705 revealObserver.observe(el); 706 }); 707 708 // Cleanup 709 window.addEventListener('beforeunload', () => { 710 revealObserver.disconnect(); 711 }); 712 })(); 713</script>
713 714 715<style> 716 .scroll-reveal { 717 will-change: opacity, transform; 718 } 719 720 .hero-parallax { 721 will-change: transform; 722 } 723 724 @media (max-width: 768px) { 725 h1 { 726 font-size: 32px !important; 727 line-height: 40px !important; 728 } 729 } 730</style> 731 <section class="relative py-16 lg:py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-950 overflow-hidden" 732 id="about-section-6abf0c02838d9"> 733 734 735 <div class="absolute inset-0 overflow-hidden pointer-events-none"> 736 <div class="about-bg-blur-1 absolute top-20 -right-32 w-[500px] h-[500px] bg-[#1363C6]/5 rounded-full blur-3xl"> 737 </div> 738 <div 739 class="about-bg-blur-2 absolute bottom-20 -left-32 w-[500px] h-[500px] bg-[#1363C6]/5 rounded-full blur-3xl"> 740 </div> 741 </div> 742 743 <div class="max-w-7xl mx-auto px-4 relative z-10"> 744 <div 745 class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center "> 746 747 748 <div class="text-left"> 749 750 <p 751 class="about-subtitle opacity-0 text-[16px] sm:text-[16px] md:text-[20px] leading-[28px] mt-4 mb-4 font-bold tracking-wider uppercase text-[#1363C6] dark:text-[#4a8dd8]"> 752 We Lead Through Innovation 753 </p> 754 755 <h2 756 class="about-title text-[24px] sm:text-[24px] md:text-[40px] lg:text-[40px] leading-[48px] mt-6 mb-6 font-extrabold text-gray-900 dark:text-white"> 757 About Us 758 </h2> 759 760 <div 761 class="about-content opacity-0 text-[16px] leading-[28px] text-gray-600 dark:text-gray-400 text-justify"> 762 Welcome to Samarth Technical Research and Innovations (SATRI), your premier destination for all things tech! 763<br> 764At SATRI, we're passionate about exploring the limitless possibilities of technology and sharing our knowledge with fellow enthusiasts. we're on a mission to take you on an exciting journey through the ever-evolving world of technology. 765 </div> 766 767 <div 768 class="about-buttons opacity-0 flex flex-wrap gap-4 mt-8 justify-start"> 769 770 <a href="about-us" 771 class="about-btn-primary inline-flex items-center px-5 py-2.5 text-[14px] leading-[20px] font-semibold text-white bg-[#1363C6] rounded-full shadow-md shadow-[#1363C6]/25 hover:bg-[#0e54ad] transition-all duration-300"> 772 Read More 773 <svg class="btn-arrow w-4 h-4 ml-2 transition-transform duration-300" fill="none" 774 stroke="currentColor" viewBox="0 0 24 24"> 775 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 776 d="M9 5l7 7-7 7" /> 777 </svg> 778 </a> 779 </div> 780 </div> 781 782 783 <div class="about-image-wrapper opacity-0 relative lg:order-last order-first"> 784 785 786 <div 787 class="about-glow absolute -inset-8 bg-gradient-to-br from-[#1363C6]/12 via-[#1363C6]/5 to-transparent rounded-[3rem] blur-3xl opacity-50"> 788 </div> 789 790 791 <div 792 class="relative rounded-2xl overflow-hidden shadow-2xl shadow-gray-300/30 dark:shadow-black/40"> 793 794 795 <img src="https://satritech.com/storage/sections/satri-image_9__1__1766905899.png" alt="About Us" loading="lazy" 796 decoding="async" 797 class="about-image w-full h-auto object-contain transform transition-all duration-700"> 798 799 800 <div 801 class="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-white/30 to-transparent dark:from-gray-950/30 dark:to-transparent pointer-events-none"> 802 </div> 803 804 805 <div 806 class="about-overlay absolute inset-0 bg-gradient-to-br from-[#1363C6]/0 to-[#1363C6]/0 opacity-0 transition-all duration-500 pointer-events-none"> 807 </div> 808 </div> 809 810 811 <div class="absolute -bottom-6 -right-6 w-40 h-40 bg-[#1363C6]/8 rounded-full blur-2xl"></div> 812 <div class="absolute -top-6 -left-6 w-32 h-32 bg-[#1363C6]/5 rounded-full blur-xl"></div> 813 </div> 814 815 </div> 816 </div> 817</section> 818 819 820 <section 821 class="relative py-6 lg:py-12 px-6 sm:px-8 lg:px-12 bg-gradient-to-b from-gray-50 to-white dark:from-gray-950 dark:to-gray-900" 822 id="about-section-6abf0c028452f"> 823 824 825 <div class="absolute inset-0 overflow-hidden pointer-events-none"> 826 <div class="absolute top-20 right-10 w-72 h-72 bg-[#1363C6]/5 rounded-full blur-3xl"></div> 827 <div class="absolute bottom-20 left-10 w-96 h-96 bg-[#1363C6]/5 rounded-full blur-3xl"></div> 828 </div> 829 830 <div class="max-w-7xl mx-auto relative"> 831 832 833 <div class="text-center max-w-3xl mx-auto mb-4"> 834
835 <span 836 class="about-badge inline-flex items-center gap-2 px-5 py-2 rounded-full text-xs sm:text-xs md:text-sm lg:text-sm tracking-wide font-semibold 837 bg-[#1363C6]/10 text-[#1363C6] dark:bg-[#1363C6]/20 dark:text-[#4a8dd8] 838 border border-[#1363C6]/20 dark:border-[#1363C6]/30 839 shadow-sm shadow-[#1363C6]/10 opacity-0"> 840 SATRI: Where Tech Enthusiasts Elevate, Innovate, and Shape the Future 841 </span> 842 843 844 <h2 845 class="about-title text-[24px] sm:text-[24px] md:text-[40px] lg:text-[40px] font-extrabold text-gray-900 dark:text-white mt-6 mb-2 leading-tight opacity-0"> 846 Why Choose Us 847 </h2> 848 </div> 849 850 851 <div class="about-description max-w-7xl mx-auto pb-8 opacity-0"> 852 <div class="text-[16px] leading-[28px] text-gray-600 dark:text-gray-400 text-justify"> 853 Experience a transformative tech education at SATRI, spanning IoT, programming, robotics, mobile, web development, AI, and ML. Benefit from expert guidance and hands-on learning to create impactful solutions for the future. Join an active community where collaboration thrives and stay updated with our latest content. Choose SATRI for holistic education, support, and growth in the dynamic world of technology 854 </div> 855 </div> 856 857 <div class="grid lg:grid-cols-2 gap-12 items-center"> 858 859 860 <div class="space-y-4"> 861 <div class="feature-item group flex gap-4 p-5 rounded-xl 862 bg-white dark:bg-gray-900 863 border border-gray-100 dark:border-gray-800 864 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 865 hover:shadow-lg hover:shadow-[#1363C6]/5 866 transition-all duration-300 ease-out opacity-0" 867 data-index="0"> 868 869 870 <div 871 class="feature-badge w-11 h-11 rounded-lg flex items-center justify-center flex-shrink-0 872 bg-gradient-to-br from-[#1363C6] to-[#0d4a94] 873 text-white font-bold text-[18px] 874 shadow-md shadow-[#1363C6]/20 875 transition-all duration-300"> 876 1 877 </div> 878 879 880 <div class="flex-1"> 881 <h3 882 class="text-[16px] font-semibold text-gray-900 dark:text-white mb-1.5 883 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] 884 transition-colors duration-300"> 885 Comprehensive Tech Coverage: 886 </h3> 887 <div class="text-[14px] leading-[22px] text-gray-600 dark:text-gray-400"> 888 From IoT, programming, and robotics to mobile app and web development, AI, and ML 889 </div> 890 </div> 891 </div> 892 <div class="feature-item group flex gap-4 p-5 rounded-xl 893 bg-white dark:bg-gray-900 894 border border-gray-100 dark:border-gray-800 895 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 896 hover:shadow-lg hover:shadow-[#1363C6]/5 897 transition-all duration-300 ease-out opacity-0" 898 data-index="1"> 899 900 901 <div 902 class="feature-badge w-11 h-11 rounded-lg flex items-center justify-center flex-shrink-0 903 bg-gradient-to-br from-[#1363C6] to-[#0d4a94] 904 text-white font-bold text-[18px] 905 shadow-md shadow-[#1363C6]/20 906 transition-all duration-300"> 907 2 908 </div> 909 910 911 <div class="flex-1"> 912 <h3 913 class="text-[16px] font-semibold text-gray-900 dark:text-white mb-1.5 914 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] 915 transition-colors duration-300"> 916 Expert Guidance: 917 </h3> 918 <div class="text-[14px] leading-[22px] text-gray-600 dark:text-gray-400"> 919 Receive mentorship from industry professionals 920 </div> 921 </div> 922 </div> 923 <div class="feature-item group flex gap-4 p-5 rounded-xl 924 bg-white dark:bg-gray-900 925 border border-gray-100 dark:border-gray-800 926 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 927 hover:shadow-lg hover:shadow-[#1363C6]/5 928 transition-all duration-300 ease-out opacity-0" 929 data-index="2"> 930 931 932 <div 933 class="feature-badge w-11 h-11 rounded-lg flex items-center justify-center flex-shrink-0 934 bg-gradient-to-br from-[#1363C6] to-[#0d4a94] 935 text-white font-bold text-[18px] 936 shadow-md shadow-[#1363C6]/20 937 transition-all duration-300"> 938 3 939 </div> 940 941 942 <div class="flex-1"> 943 <h3 944 class="text-[16px] font-semibold text-gray-900 dark:text-white mb-1.5 945 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] 946 transition-colors duration-300"> 947 Hands-On Learning: 948 </h3> 949 <div class="text-[14px] leading-[22px] text-gray-600 dark:text-gray-400"> 950 Dive deep into practical projects to develop real-world skills 951 </div> 952 </div> 953 </div> 954 <div class="feature-item group flex gap-4 p-5 rounded-xl 955 bg-white dark:bg-gray-900 956 border border-gray-100 dark:border-gray-800 957 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 958 hover:shadow-lg hover:shadow-[#1363C6]/5 959 transition-all duration-300 ease-out opacity-0" 960 data-index="3"> 961 962 963 <div 964 class="feature-badge w-11 h-11 rounded-lg flex items-center justify-center flex-shrink-0 965 bg-gradient-to-br from-[#1363C6] to-[#0d4a94] 966 text-white font-bold text-[18px] 967 shadow-md shadow-[#1363C6]/20 968 transition-all duration-300"> 969 4 970 </div> 971 972 973 <div class="flex-1"> 974 <h3 975 class="text-[16px] font-semibold text-gray-900 dark:text-white mb-1.5 976 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] 977 transition-colors duration-300"> 978 Real-World Applications: 979 </h3> 980 <div class="text-[14px] leading-[22px] text-gray-600 dark:text-gray-400"> 981 Apply your knowledge to create impactful solutions. 982 </div> 983 </div> 984 </div> 985 <div class="feature-item group flex gap-4 p-5 rounded-xl 986 bg-white dark:bg-gray-900 987 border border-gray-100 dark:border-gray-800 988 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 989 hover:shadow-lg hover:shadow-[#1363C6]/5 990 transition-all duration-300 ease-out opacity-0" 991 data-index="4"> 992 993 994 <div 995 class="feature-badge w-11 h-11 rounded-lg flex items-center justify-center flex-shrink-0 996 bg-gradient-to-br from-[#1363C6] to-[#0d4a94] 997 text-white font-bold text-[18px] 998 shadow-md shadow-[#1363C6]/20 999 transition-all duration-300"> 1000 5 1001 </div> 1002 1003 1004 <div class="flex-1"> 1005 <h3 1006 class="text-[16px] font-semibold text-gray-900 dark:text-white mb-1.5 1007 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] 1008 transition-colors duration-300"> 1009 Active Community: 1010 </h3> 1011 <div class="text-[14px] leading-[22px] text-gray-600 dark:text-gray-400"> 1012 Join a vibrant network of tech enthusiasts for collaboration and support. 1013 </div> 1014 </div> 1015 </div> 1016 1017 1018 </div> 1019 1020 1021 <div class="relative lg:order-last order-first"> 1022 <div class="about-image relative group max-w-lg mx-auto lg:mx-0 o
1022pacity-0"> 1023 1024 <div 1025 class="absolute -inset-6 bg-gradient-to-br from-[#1363C6]/15 to-transparent rounded-[2rem] blur-2xl opacity-50 group-hover:opacity-70 transition-opacity duration-500"> 1026 </div> 1027 1028 1029 <div 1030 class="relative rounded-2xl overflow-hidden shadow-xl shadow-gray-900/10 dark:shadow-black/30"> 1031 1032 1033 <img src="https://satritech.com/storage/sections/tems-bg-img_1766928432.png" alt="Why Choose Us" 1034 class="w-full h-[450px] object-cover 1035 group-hover:scale-105 transition-transform duration-700 ease-out" 1036 loading="lazy" decoding="async"> 1037 1038 1039 <div 1040 class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-gray-50/60 to-transparent dark:from-gray-900/60 dark:to-transparent pointer-events-none"> 1041 </div> 1042 </div> 1043 1044 1045 <div class="absolute -bottom-4 -left-4 w-32 h-32 bg-[#1363C6]/10 rounded-full blur-xl"></div> 1046 </div> 1047 </div> 1048 1049 </div> 1050 </div> 1051</section> 1052 1053 1054 <section 1055 class="relative py-4 lg:py-12 px-6 sm:px-10 lg:px-14 bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-950 overflow-hidden" 1056 id="courses-section-6abf0c028bbb2"> 1057 1058 1059 <div class="absolute inset-0 overflow-hidden pointer-events-none"> 1060 <div class="absolute top-20 left-10 w-72 h-72 bg-[#1363C6]/5 rounded-full blur-3xl animate-course-bg-1"></div> 1061 <div class="absolute bottom-20 right-10 w-72 h-72 bg-[#1363C6]/5 rounded-full blur-3xl animate-course-bg-2"> 1062 </div> 1063 </div> 1064 1065 <div class="max-w-7xl mx-auto relative"> 1066 1067 1068 <div class="text-center max-w-3xl mx-auto pb-4"> 1069 <h2 1070 class="text-[24px] sm:text-[24px] md:text-[40px] lg:text-[40px] font-extrabold text-gray-900 dark:text-white mt-6 mb-4 leading-tight animate-course-title"> 1071 Our Courses 1072 </h2> 1073 1074 </div> 1075 1076 <div class="max-w-7xl mx-auto pb-8 animate-course-content"> 1077 <div class="text-[16px] leading-[26px] text-gray-600 dark:text-gray-400 text-justify"> 1078 Gain in-demand skills through practical training, live projects, and expert guidance. Build your portfolio and prepare for jobs, freelancing, internships, or business success. 1079 </div> 1080 </div> 1081 1082 <div class="text-center max-w-3xl mx-auto pb-8"> 1083 1084 <span 1085 class="inline-flex items-center gap-2 px-5 py-2 rounded-full text-xs sm:text-xs md:text-sm lg:text-sm tracking-wide font-semibold 1086 bg-[#1363C6]/10 text-[#1363C6] dark:bg-[#1363C6]/20 dark:text-[#4a8dd8] 1087 border border-[#1363C6]/20 dark:border-[#1363C6]/30 1088 shadow-sm shadow-[#1363C6]/10 animate-course-subtitle"> 1089 <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> 1090 <path 1091 d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z" /> 1092 </svg> 1093 Learn Smart. Build Real Projects. Grow Your Career. 1094 </span> 1095 </div> 1096 1097 1098 1099 <div x-data="{ activeTab: 'All' }"> 1100 1101 1102 <div class="w-full block mb-6 animate-course-tabs relative z-20" x-data="{ open: false }"> 1103 <div class="relative w-full max-w-xs ml-auto"> 1104 <button @click="open = !open" @click.away="open = false" 1105 class="w-full flex items-center justify-between px-4 py-2.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:border-[#1363C6]/30 transition-all duration-300"> 1106 <div class="flex items-center gap-2"> 1107 <div class="p-1.5 bg-[#1363C6]/10 rounded-lg"> 1108 <svg class="w-4 h-4 text-[#1363C6]" fill="none" stroke="currentColor"
1109 viewBox="0 0 24 24"> 1110 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1111 d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /> 1112 </svg> 1113 </div> 1114 <span class="font-semibold text-sm text-gray-800 dark:text-gray-200 capitalize" 1115 x-text="activeTab === 'All' ? 'All Courses' : activeTab"></span> 1116 </div> 1117 <svg class="w-4 h-4 text-gray-400 transition-transform duration-300" 1118 :class="open ? 'rotate-180' : ''" fill="none" stroke="currentColor" 1119 viewBox="0 0 24 24"> 1120 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1121 d="M19 9l-7 7-7-7" /> 1122 </svg> 1123 </button> 1124 1125 <div x-show="open" x-transition:enter="transition ease-out duration-200" 1126 x-transition:enter-start="opacity-0 translate-y-2 scale-95" 1127 x-transition:enter-end="opacity-100 translate-y-0 scale-100" 1128 x-transition:leave="transition ease-in duration-100" 1129 x-transition:leave-start="opacity-100 translate-y-0 scale-100" 1130 x-transition:leave-end="opacity-0 translate-y-2 scale-95" 1131 class="absolute z-50 w-full mt-2 bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-xl shadow-2xl overflow-hidden py-1" 1132 style="display: none;"> 1133 1134 1135 <button @click="activeTab = 'All'; open = false" 1136 class="w-full text-left px-4 py-2.5 hover:bg-[#1363C6]/5 transition-colors flex items-center justify-between group" 1137 :class="activeTab === 'All' ? 'bg-[#1363C6]/5 text-[#1363C6]' : 1138 'text-gray-600 dark:text-gray-400'"> 1139 <span class="font-semibold text-sm group-hover:text-[#1363C6] transition-colors">All 1140 Courses</span> 1141 <span class="px-2.5 py-1 rounded-lg text-xs font-bold" 1142 :class="activeTab === 'All' ? 'bg-[#1363C6] text-white' : 1143 'bg-gray-100 dark:bg-gray-700 text-gray-500'"> 1144 4 1145 </span> 1146 </button> 1147 1148 <div class="h-px bg-gray-100 dark:bg-gray-700/50 mx-4 my-1"></div> 1149 1150 1151 <button @click="activeTab = 'Data Science, AI & Emerging Technologies'; open = false" 1152 class="w-full text-left px-4 py-2.5 hover:bg-[#1363C6]/5 transition-colors flex items-center justify-between group" 1153 :class="activeTab === 'Data Science, AI & Emerging Technologies' ? 'bg-[#1363C6]/5 text-[#1363C6]' : 1154 'text-gray-600 dark:text-gray-400'"> 1155 <span 1156 class="font-semibold text-sm capitalize group-hover:text-[#1363C6] transition-colors">Data Science, AI & Emerging Technologies</span> 1157 <span class="px-2.5 py-1 rounded-lg text-xs font-bold" 1158 :class="activeTab === 'Data Science, AI & Emerging Technologies' ? 'bg-[#1363C6] text-white' : 1159 'bg-gray-100 dark:bg-gray-700 text-gray-500'"> 1160 1 1161 </span> 1162 </button> 1163 <button @click="activeTab = 'Professional Training, Internship & Career Courses'; open = false" 1164 class="w-full text-left px-4 py-2.5 hover:bg-[#1363C6]/5 transition-colors flex items-center justify-between group" 1165 :class="activeTab === 'Professional Training, Internship & Career Courses' ? 'bg-[#1363C6]/5 text-[#1363C6]' : 1166 'text-gray-600 dark:text-gray-400'">
1167 <span 1168 class="font-semibold text-sm capitalize group-hover:text-[#1363C6] transition-colors">Professional Training, Internship & Career Courses</span> 1169 <span class="px-2.5 py-1 rounded-lg text-xs font-bold" 1170 :class="activeTab === 'Professional Training, Internship & Career Courses' ? 'bg-[#1363C6] text-white' : 1171 'bg-gray-100 dark:bg-gray-700 text-gray-500'"> 1172 2 1173 </span> 1174 </button> 1175 <button @click="activeTab = 'Digital Marketing, Business & IT Management'; open = false" 1176 class="w-full text-left px-4 py-2.5 hover:bg-[#1363C6]/5 transition-colors flex items-center justify-between group" 1177 :class="activeTab === 'Digital Marketing, Business & IT Management' ? 'bg-[#1363C6]/5 text-[#1363C6]' : 1178 'text-gray-600 dark:text-gray-400'"> 1179 <span 1180 class="font-semibold text-sm capitalize group-hover:text-[#1363C6] transition-colors">Digital Marketing, Business & IT Management</span> 1181 <span class="px-2.5 py-1 rounded-lg text-xs font-bold" 1182 :class="activeTab === 'Digital Marketing, Business & IT Management' ? 'bg-[#1363C6] text-white' : 1183 'bg-gray-100 dark:bg-gray-700 text-gray-500'"> 1184 1 1185 </span> 1186 </button> 1187 </div> 1188 </div> 1189 </div> 1190 1191 <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-12 pt-8"> 1192 <div x-show="activeTab === 'All' || activeTab === 'Data Science, AI & Emerging Technologies'" 1193 x-transition:enter="transition ease-out duration-300" 1194 x-transition:enter-start="opacity-0 transform scale-95" 1195 x-transition:enter-end="opacity-100 transform scale-100" 1196 class="group course-card bg-white dark:bg-gray-900 rounded-xl overflow-hidden 1197 border border-gray-100 dark:border-gray-800 1198 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 1199 transition-all duration-300 1200 hover:shadow-lg hover:shadow-[#1363C6]/5 1201 hover:-translate-y-0.5 animate-course-card cursor-pointer" 1202 data-course-id="26" data-course-index="0"> 1203 1204 1205 <div 1206 class="relative h-40 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 overflow-hidden"> 1207 <img src="https://satritech.com/storage/courses/DG8hVv2JqndxnROPShTGbimh3CimUyOyROZVGMJm.png" 1208 alt="Gen AI" loading="lazy" decoding="async" 1209 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"> 1210 1211 1212 <div 1213 class="absolute inset-0 bg-gradient-to-t from-[#1363C6]/80 via-[#1363C6]/30 to-transparent 1214 opacity-0 group-hover:opacity-100 transition-opacity duration-300"> 1215 </div> 1216 1217 1218 <div 1219 class="absolute top-2.5 right-2.5 px-2.5 py-1 ml-2
1220 bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm 1221 rounded-full shadow-md border border-gray-200 dark:border-gray-700"> 1222 <span 1223 class="text-[15px] font-bold bg-gradient-to-r from-[#1363C6] to-[#0d4a94] bg-clip-text text-transparent"> 1224 NPR.16,000 1225 </span> 1226 </div> 1227 </div> 1228 1229 1230 <div class="p-4"> 1231 <h3 1232 class="text-[18px] font-semibold text-gray-900 dark:text-white mb-1.5 1233 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] 1234 transition-colors line-clamp-1"> 1235 Gen AI 1236 </h3> 1237 1238 <div 1239 class="text-[15px] leading-[24px] text-gray-600 dark:text-gray-400 mb-3 line-clamp-2"> 1240 1241 </div> 1242 1243 1244 <div 1245 class="flex items-center gap-3 mb-3 pb-3 border-b border-gray-100 dark:border-gray-800"> 1246 <div 1247 class="flex items-center gap-1 text-[15px] text-gray-600 dark:text-gray-400"> 1248 <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor"
1249 viewBox="0 0 24 24"> 1250 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1251 d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> 1252 </svg> 1253 <span>2.5 Months</span> 1254 </div> 1255 1256 </div> 1257 1258 1259 <a href="https://satritech.com/course/gen-ai" 1260 class="flex items-center justify-center gap-2 w-full px-4 py-2 1261 bg-gradient-to-r from-[#1363C6] to-[#0d4a94] 1262 text-white text-[15px] font-semibold rounded-lg 1263 hover:shadow-md hover:shadow-[#1363C6]/30 1264 transition-all duration-300 group/btn"> 1265 <span>View Course</span> 1266 <svg class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" 1267 fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1268 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1269 d="M17 8l4 4m0 0l-4 4m4-4H3"></path> 1270 </svg> 1271 </a> 1272 </div> 1273 </div> 1274 <div x-show="activeTab === 'All' || activeTab === 'Professional Training, Internship & Career Courses'" 1275 x-transition:enter="transition ease-out duration-300" 1276 x-transition:enter-start="opacity-0 transform scale-95" 1277 x-transition:enter-end="opacity-100 transform scale-100" 1278 class="group course-card bg-white dark:bg-gray-900 rounded-xl overflow-hidden 1279 border border-gray-100 dark:border-gray-800 1280 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 1281 transition-all duration-300 1282 hover:shadow-lg hover:shadow-[#1363C6]/5 1283 hover:-translate-y-0.5 animate-course-card cursor-pointer" 1284 data-course-id="24" data-course-index="1"> 1285 1286 1287 <div 1288 class="relative h-40 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 overflow-hidden"> 1289 <img src="https://satritech.com/storage/courses/lXwMjy0J8g8lT6l4DFcOJItggW6aJSkNPaMSJeCg.png" 1290 alt="Professional IT Internship Course" loading="lazy" decoding="async" 1291 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"> 1292 1293 1294 <div 1295 class="absolute inset-0 bg-gradient-to-t from-[#1363C6]/80 via-[#1363C6]/30 to-transparent 1296 opacity-0 group-hover:opacity-100 transition-opacity duration-300"> 1297 </div> 1298 1299 1300 <div 1301 class="absolute top-2.5 right-2.5 px-2.5 py-1 ml-2 1302 bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm 1303 rounded-full shadow-md border border-gray-200 dark:border-gray-700"> 1304 <span 1305 class="text-[15px] font-bold bg-gradient-to-r from-[#1363C6] to-[#0d4a94] bg-clip-text text-transparent"> 1306 NPR.12,000 1307 </span> 1308 </div> 1309 </div> 1310 1311 1312 <div class="p-4"> 1313 <h3 1314 class="text-[18px] font-semibold text-gray-900 dark:text-white mb-1.5 1315 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] 1316 transition-colors line-clamp-1"> 1317 Professional IT Internship Course 1318 </h3> 1319 1320 <div 1321 class="text-[15px] leading-[24px] text-gray-600 dark:text-gray-400 mb-3 line-clamp-2"> 1322 Professional IT Internship Course 1323 </div> 1324 1325 1326 <div 1327 class="flex items-center gap-3 mb-3 pb-3 border-b border-gray-100 dark:border-gray-800"> 1328 <div 1329 class="flex items-center gap-1 text-[15px] text-gray-600 dark:text-gray-400"> 1330 <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor"
1331 viewBox="0 0 24 24"> 1332 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1333 d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> 1334 </svg> 1335 <span>3 Months</span> 1336 </div> 1337 1338 </div> 1339 1340 1341 <a href="https://satritech.com/course/professional-it-internship-course" 1342 class="flex items-center justify-center gap-2 w-full px-4 py-2 1343 bg-gradient-to-r from-[#1363C6] to-[#0d4a94] 1344 text-white text-[15px] font-semibold rounded-lg 1345 hover:shadow-md hover:shadow-[#1363C6]/30 1346 transition-all duration-300 group/btn"> 1347 <span>View Course</span> 1348 <svg class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" 1349 fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1350 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1351 d="M17 8l4 4m0 0l-4 4m4-4H3"></path> 1352 </svg> 1353 </a> 1354 </div> 1355 </div> 1356 <div x-show="activeTab === 'All' || activeTab === 'Professional Training, Internship & Career Courses'" 1357 x-transition:enter="transition ease-out duration-300" 1358 x-transition:enter-start="opacity-0 transform scale-95" 1359 x-transition:enter-end="opacity-100 transform scale-100" 1360 class="group course-card bg-white dark:bg-gray-900 rounded-xl overflow-hidden 1361 border border-gray-100 dark:border-gray-800 1362 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 1363 transition-all duration-300 1364 hover:shadow-lg hover:shadow-[#1363C6]/5 1365 hover:-translate-y-0.5 animate-course-card cursor-pointer" 1366 data-course-id="23" data-course-index="2"> 1367 1368 1369 <div 1370 class="relative h-40 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 overflow-hidden"> 1371 <img src="https://satritech.com/storage/courses/WUVtzBPmk9J6qRHxTQYwOvmnSvi6K92p4YfwklkO.png" 1372 alt="Project-Based IT Training Course" loading="lazy" decoding="async" 1373 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"> 1374 1375 1376 <div 1377 class="absolute inset-0 bg-gradient-to-t from-[#1363C6]/80 via-[#1363C6]/30 to-transparent 1378 opacity-0 group-hover:opacity-100 transition-opacity duration-300"> 1379 </div> 1380 1381 1382 <div 1383 class="absolute top-2.5 right-2.5 px-2.5 py-1 ml-2 1384 bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm 1385 rounded-full shadow-md border border-gray-200 dark:border-gray-700"> 1386 <span 1387 class="text-[15px] font-bold bg-gradient-to-r from-[#1363C6] to-[#0d4a94] bg-clip-text text-transparent"> 1388 NPR.12,000 1389 </span> 1390 </div> 1391 </div> 1392 1393 1394 <div class="p-4"> 1395 <h3 1396 class="text-[18px] font-semibold text-gray-900 dark:text-white mb-1.5 1397 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] 1398 transition-colors line-clamp-1"> 1399 Project-Based IT Training Course 1400 </h3> 1401 1402 <div 1403 class="text-[15px] leading-[24px] text-gray-600 dark:text-gray-400 mb-3 line-clamp-2"> 1404 Project-Based IT Training Course 1405 </div> 1406 1407 1408 <div 1409 class="flex items-center gap-3 mb-3 pb-3 border-b border-gray-100 dark:border-gray-800"> 1410 <div 1411 class="flex items-center gap-1 text-[15px] text-gray-600 dark:text-gray-400"> 1412 <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor"
1413 viewBox="0 0 24 24"> 1414 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1415 d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> 1416 </svg> 1417 <span>2 Months</span> 1418 </div> 1419 1420 </div> 1421 1422 1423 <a href="https://satritech.com/course/project-based-it-training-course" 1424 class="flex items-center justify-center gap-2 w-full px-4 py-2 1425 bg-gradient-to-r from-[#1363C6] to-[#0d4a94] 1426 text-white text-[15px] font-semibold rounded-lg 1427 hover:shadow-md hover:shadow-[#1363C6]/30 1428 transition-all duration-300 group/btn"> 1429 <span>View Course</span> 1430 <svg class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" 1431 fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1432 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1433 d="M17 8l4 4m0 0l-4 4m4-4H3"></path> 1434 </svg> 1435 </a> 1436 </div> 1437 </div> 1438 <div x-show="activeTab === 'All' || activeTab === 'Digital Marketing, Business & IT Management'" 1439 x-transition:enter="transition ease-out duration-300" 1440 x-transition:enter-start="opacity-0 transform scale-95" 1441 x-transition:enter-end="opacity-100 transform scale-100" 1442 class="group course-card bg-white dark:bg-gray-900 rounded-xl overflow-hidden 1443 border border-gray-100 dark:border-gray-800 1444 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 1445 transition-all duration-300 1446 hover:shadow-lg hover:shadow-[#1363C6]/5 1447 hover:-translate-y-0.5 animate-course-card cursor-pointer" 1448 data-course-id="22" data-course-index="3"> 1449 1450 1451 <div 1452 class="relative h-40 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 overflow-hidden"> 1453 <img src="https://satritech.com/storage/courses/HVxrR4uuvj2SFMtLaJbHcTa6ZzCMP1sH9wMqUP6M.png" 1454 alt="Content Marketing & Branding Strategy" loading="lazy" decoding="async" 1455 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"> 1456 1457 1458 <div 1459 class="absolute inset-0 bg-gradient-to-t from-[#1363C6]/80 via-[#1363C6]/30 to-transparent 1460 opacity-0 group-hover:opacity-100 transition-opacity duration-300"> 1461 </div> 1462 1463 1464 <div 1465 class="absolute top-2.5 right-2.5 px-2.5 py-1 ml-2 1466 bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm 1467 rounded-full shadow-md border border-gray-200 dark:border-gray-700"> 1468 <span 1469 class="text-[15px] font-bold bg-gradient-to-r from-[#1363C6] to-[#0d4a94] bg-clip-text text-transparent"> 1470 NPR.12,000 1471 </span> 1472 </div> 1473 </div> 1474 1475 1476 <div class="p-4"> 1477 <h3 1478 class="text-[18px] font-semibold text-gray-900 dark:text-white mb-1.5 1479 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] 1480 transition-colors line-clamp-1"> 1481 Content Marketing & Branding Strategy 1482 </h3> 1483 1484 <div 1485 class="text-[15px] leading-[24px] text-gray-600 dark:text-gray-400 mb-3 line-clamp-2"> 1486 Content Marketing & Branding Strategy 1487 </div> 1488 1489 1490 <div 1491 class="flex items-center gap-3 mb-3 pb-3 border-b border-gray-100 dark:border-gray-800"> 1492 <div 1493 class="flex items-center gap-1 text-[15px] text-gray-600 dark:text-gray-400"> 1494 <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor"
1495 viewBox="0 0 24 24"> 1496 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1497 d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> 1498 </svg> 1499 <span>1.5 Months</span> 1500 </div> 1501 1502 </div> 1503 1504 1505 <a href="https://satritech.com/course/content-marketing-branding-strategy" 1506 class="flex items-center justify-center gap-2 w-full px-4 py-2 1507 bg-gradient-to-r from-[#1363C6] to-[#0d4a94] 1508 text-white text-[15px] font-semibold rounded-lg 1509 hover:shadow-md hover:shadow-[#1363C6]/30 1510 transition-all duration-300 group/btn"> 1511 <span>View Course</span> 1512 <svg class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" 1513 fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1514 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1515 d="M17 8l4 4m0 0l-4 4m4-4H3"></path> 1516 </svg> 1517 </a> 1518 </div> 1519 </div> 1520 </div> 1521 1522 </div> 1523 1524 1525 1526 1527 <div class="text-center mt-10"> 1528 <a href="https://satritech.com/courses" 1529 class="group inline-flex items-center gap-3 px-6 py-3 1530 bg-gradient-to-r from-[#1363C6] to-[#0d4a94] 1531 text-white font-semibold rounded-lg 1532 hover:shadow-lg hover:shadow-[#1363C6]/30 1533 transition-all duration-300 hover:scale-105 animate-course-view-all"> 1534 <span>View All Courses (25)</span> 1535 <svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" 1536 stroke="currentColor" viewBox="0 0 24 24"> 1537 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1538 d="M13 7l5 5m0 0l-5 5m5-5H6"></path> 1539 </svg> 1540 </a> 1541 </div> 1542 1543 </div> 1544</section> 1545 1546 1547<div id="courseModal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black/80 backdrop-blur-sm"> 1548 1549 1550 <div class="relative w-full max-w-4xl max-h-[90vh] modal-content"> 1551 1552 1553 <button id="closeCourseModal" 1554 class="absolute -top-4 -right-4 z-50 w-10 h-10 flex items-center justify-center 1555 bg-white dark:bg-gray-800 rounded-full shadow-lg 1556 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 1557 hover:scale-110 hover:rotate-90 transition-all duration-300 1558 border-2 border-gray-200 dark:border-gray-700"> 1559 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1560 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" /> 1561 </svg> 1562 </button> 1563 1564 1565 <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-2xl overflow-hidden"> 1566 <div class="flex flex-col md:flex-row max-h-[85vh]"> 1567 1568 1569 <div 1570 class="md:w-2/5 bg-gradient-to-br from-[#1363C6]/10 via-[#1363C6]/5 to-transparent 1571 dark:from-[#1363C6]/20 dark:via-[#1363C6]/10 dark:to-transparent 1572 p-8 flex flex-col items-center justify-center relative"> 1573 1574 1575 <div class="absolute top-4 right-4 w-24 h-24 bg-[#1363C6]/10 rounded-full blur-2xl"></div> 1576 <div class="absolute bottom-4 left-4 w-32 h-32 bg-[#0d4a94]/10 rounded-full blur-2xl"></div> 1577 1578 <div class="relative z-10 flex flex-col items-center w-full"> 1579 1580 <div class="relative mb-6"> 1581 <div 1582 class="absolute inset-0 bg-gradient-to-br from-[#1363C6] to-[#0d4a94] rounded-2xl opacity-20 blur-xl"> 1583 </div> 1584 <div id="modalCourseImage" 1585 class="relative w-48 h-48 rounded-2xl shadow-2xl border-4 border-white dark:border-gray-800 1586 overflow-hidden bg-gradient-to-br from-[#1363C6]/10 to-[#0d4a94]/10 1587 flex items-center justify-center"> 1588 </div> 1589 </div> 1590 1591 1592 <div class="md:hidden text-center mb-6 w-full"> 1593 <h2 id="modalCourseTitleMobile" class="text-2xl font-extrabold text-gray-900 dark:text-white mb-2"> 1594 </h2> 1595 </div> 1596 1597 1598 <div class="grid grid-cols-2 gap-3 w-full mt-4"> 1599 <div class="p-3 bg-white/50 dark:bg-gray-800/50 rounded-xl border border-white dark:border-gray-700 backdrop-blur-sm text-center"> 1600 <p class="text-[10px] text-gray-500 dark:text-gray-400 uppercase font-bold tracking-wider mb-1">Duration</p> 1601 <p id="modalCourseDuration" class="text-sm font-bold text-gray-900 dark:text-white"></p> 1602 </div> 1603 <div class="p-3 bg-white/50 dark:bg-gray-800/50 rounded-xl border border-white dark:border-gray-700 backdrop-blur-sm text-center"> 1604 <p class="text-[10px] text-gray-500 dark:text-gray-400 uppercase font-bold tracking-wider mb-1">Level</p> 1605 <p id="modalCourseLevel" class="text-sm font-bold text-gray-900 dark:text-white"></p> 1606 </div> 1607 </div> 1608 1609 1610 <div class="mt-6 w-full p-4 bg-gradient-to-r from-[#1363C6] to-[#0d4a94] rounded-2xl text-center shadow-lg"> 1611 <p class="text-[10px] text-blue-100 uppercase font-bold tracking-wider mb-1">Investment</p> 1612 <p id="modalCoursePrice" class="text-2xl font-black text-white"></p> 1613 </div> 1614 </div> 1615 </div> 1616 1617 1618 <div class="md:w-3/5 p-8 flex flex-col overflow-hidden"> 1619 1620 <div class="hidden md:block mb-6"> 1621 <div class="flex items-center gap-2 mb-2">
1622 <span id="modalCourseCategory" class="px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase tracking-widest bg-[#1363C6]/10 text-[#1363C6] dark:bg-[#1363C6]/20 dark:text-[#4a8dd8]"></span> 1623 </div> 1624 <h2 id="modalCourseTitle" class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight"></h2> 1625 <div class="w-16 h-0.5 bg-gradient-to-r from-[#1363C6] to-[#0d4a94] rounded-full mt-2"></div> 1626 </div> 1627 1628 1629 <div class="flex-1 overflow-y-auto pr-2 custom-scrollbar"> 1630 <div class="space-y-6"> 1631 1632 <div id="modalCourseShortDesc" class="text-lg text-gray-700 dark:text-gray-300 font-medium leading-relaxed italic border-l-4 border-[#1363C6]/30 pl-4"></div> 1633 1634 1635 <div class="space-y-4"> 1636 <div class="flex items-center gap-2"> 1637 <div class="w-8 h-8 rounded-lg bg-[#1363C6]/10 dark:bg-[#1363C6]/20 flex items-center justify-center"> 1638 <svg class="w-4 h-4 text-[#1363C6] dark:text-[#4a8dd8]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1639 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> 1640 </svg> 1641 </div> 1642 <h3 class="text-lg font-bold text-gray-900 dark:text-white">Course Overview</h3> 1643 </div> 1644 <div id="modalCourseDescription" class="text-[15px] leading-[26px] text-gray-600 dark:text-gray-400 prose dark:prose-invert max-w-none"></div> 1645 </div> 1646 1647 1648 <div id="modalCourseSyllabusSection" class="space-y-4 hidden"> 1649 <div class="flex items-center gap-2"> 1650 <div class="w-8 h-8 rounded-lg bg-[#1363C6]/10 dark:bg-[#1363C6]/20 flex items-center justify-center"> 1651 <svg class="w-4 h-4 text-[#1363C6] dark:text-[#4a8dd8]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1652 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /> 1653 </svg> 1654 </div> 1655 <h3 class="text-lg font-bold text-gray-900 dark:text-white">Curriculum</h3> 1656 </div> 1657 <div id="modalCourseSyllabus" class="grid gap-2"></div> 1658 </div> 1659 </div> 1660 </div> 1661 1662 1663 <div class="mt-8 pt-6 border-t border-gray-100 dark:border-gray-800 flex flex-col sm:flex-row gap-4"> 1664 <a id="modalCourseActionUrl" href="#" class="flex-1 flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-r from-[#1363C6] to-[#0d4a94] text-white font-bold rounded-2xl shadow-lg hover:shadow-[#1363C6]/30 transition-all duration-300 hover:-translate-y-1"> 1665 <span>Enroll in Course</span> 1666 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1667 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /> 1668 </svg> 1669 </a> 1670 </div> 1671 </div> 1672 1673 </div> 1674 </div> 1675 </div> 1676</div> 1677 1678<style> 1679 .custom-scrollbar::-webkit-scrollbar {
1680 width: 4px; 1681 } 1682 .custom-scrollbar::-webkit-scrollbar-track { 1683 background: transparent; 1684 } 1685 .custom-scrollbar::-webkit-scrollbar-thumb { 1686 background: #1363C620; 1687 border-radius: 10px; 1688 } 1689 .custom-scrollbar::-webkit-scrollbar-thumb:hover { 1690 background: #1363C640; 1691 } 1692</style> 1693 1694 1695 1696 <section class="py-8 lg:py-12 px-6 sm:px-8 lg:px-12 bg-white dark:bg-gray-950" id="feature-section-6abf0c028ced9"> 1697 <div class="max-w-7xl mx-auto"> 1698 1699 1700 <div class="text-center max-w-3xl mx-auto"> 1701 <p 1702 class="feature-subtitle text-xs sm:text-xs md:text-[20px] lg:text-[20px] leading-[28px] mt-4 mb-4 font-bold tracking-wider uppercase text-[#1363C6] dark:text-[#4a8dd8] opacity-0"> 1703 Our Excellent Innovative Solutions for Your Future 1704 </p> 1705 1706 <h2 1707 class="feature-heading text-[24px] sm:text-[24px] md:text-[40px] lg:text-[40px] leading-[48px] mt-6 mb-6 font-extrabold text-gray-900 dark:text-white opacity-0"> 1708 SATRI: Tech Discovery Hub 1709 </h2> 1710 </div> 1711 1712 1713 <div class="max-w-7xl mx-auto mb-8 feature-content opacity-0"> 1714 <div class="text-[16px] sm:text-[16px] leading-[28px] text-gray-600 dark:text-gray-400 text-justify"> 1715 SATRI is a dynamic platform led through innovation, offering comprehensive resources in programming, robotics, mechatronics, mobile app, and web development. Our project empowers students with practical skills, hands-on experiences, and expert guidance, fostering a vibrant community of tech enthusiasts. Join us to explore, innovate, and excel in the ever-evolving world of technology. 1716 </div> 1717 </div> 1718 1719 1720 <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6"> 1721 <div class="feature-card group relative p-6 rounded-xl bg-white dark:bg-gray-900 1722 border border-gray-200 dark:border-gray-800 1723 hover:border-[#1363C6]/30 dark:hover:border-[#1363C6]/40 1724 shadow-sm hover:shadow-lg hover:shadow-[#1363C6]/5 dark:hover:shadow-[#1363C6]/10 1725 transition-all duration-300 opacity-0" 1726 data-index="0"> 1727 1728 <div class="feature-header flex items-center gap-3 mb-3 opacity-0"> 1729 <div 1730 class="w-8 h-8 flex items-center justify-center rounded-lg 1731 bg-[#1363C6]/10 dark:bg-[#1363C6]/20 1732 text-[#1363C6] dark:text-[#4a8dd8] 1733 flex-shrink-0 group-hover:bg-[#1363C6]/20 dark:group-hover:bg-[#1363C6]/30 transition-all duration-300"> 1734 <i class="fa-solid fa-robot text-[16px]"></i> 1735 </div> 1736 1737 <h3 class="text-[16px] font-semibold text-gray-900 dark:text-white"> 1738 Robotic Automation 1739 </h3> 1740 </div> 1741 1742 1743 </div> 1744 <div class="feature-card group relative p-6 rounded-xl bg-white dark:bg-gray-900 1745 border border-gray-200 dark:border-gray-800 1746 hover:border-[#1363C6]/30 dark:hover:border-[#1363C6]/40 1747 shadow-sm hover:shadow-lg hover:shadow-[#1363C6]/5 dark:hover:shadow-[#1363C6]/10 1748 transition-all duration-300 opacity-0" 1749 data-index="1"> 1750 1751 <div class="feature-header flex items-center gap-3 mb-3 opacity-0"> 1752 <div 1753 class="w-8 h-8 flex items-center justify-center rounded-lg 1754 bg-[#1363C6]/10 dark:bg-[#1363C6]/20 1755 text-[#1363C6] dark:text-[#4a8dd8] 1756 flex-shrink-0 group-hover:bg-[#1363C6]/20 dark:group-hover:bg-[#1363C6]/30 transition-all duration-300"> 1757 <i class="fa-solid fa-graduation-cap text-[16px]"></i> 1758 </div> 1759 1760 <h3 class="text-[16px] font-semibold text-gray-900 dark:text-white"> 1761 Education & Science 1762 </h3> 1763 </div> 1764 1765 1766 </div> 1767 <div class="feature-card group relative p-6 rounded-xl bg-white dark:bg-gray-900 1768 border border-gray-200 dark:border-gray-800 1769 hover:border-[#1363C6]/30 dark:hover:border-[#1363C6]/40 1770 shadow-sm hover:shadow-lg hover:shadow-[#1363C6]/5 dark:hover:shadow-[#1363C6]/10 1771 transition-all duration-300 opacity-0" 1772 data-index="2"> 1773 1774 <div class="feature-header flex items-center gap-3 mb-3 opacity-0"> 1775 <div 1776 class="w-8 h-8 flex items-center justify-center rounded-lg 1777 bg-[#1363C6]/10 dark:bg-[#1363C6]/20 1778 text-[#1363C6] dark:text-[#4a8dd8] 1779 flex-shrink-0 group-hover:bg-[#1363C6]/20 dark:group-hover:bg-[#1363C6]/30 transition-all duration-300"> 1780 <i class="fa-solid fa-brain text-[16px]"></i> 1781 </div> 1782 1783 <h3 class="text-[16px] font-semibold text-gray-900 dark:text-white"> 1784 Predictive Analysis 1785 </h3> 1786 </div> 1787 1788 1789 </div> 1790 <div class="feature-card group relative p-6 rounded-xl bg-white dark:bg-gray-900 1791 border border-gray-200 dark:border-gray-800 1792 hover:border-[#1363C6]/30 dark:hover:border-[#1363C6]/40 1793 shadow-sm hover:shadow-lg hover:shadow-[#1363C6]/5 dark:hover:shadow-[#1363C6]/10 1794 transition-all duration-300 opacity-0" 1795 data-index="3"> 1796 1797 <div class="feature-header flex items-center gap-3 mb-3 opacity-0"> 1798 <div 1799 class="w-8 h-8 flex items-center justify-center rounded-lg 1800 bg-[#1363C6]/10 dark:bg-[#1363C6]/20 1801 text-[#1363C6] dark:text-[#4a8dd8] 1802 flex-shrink-0 group-hover:bg-[#1363C6]/20 dark:group-hover:bg-[#1363C6]/30 transition-all duration-300"> 1803 <i class="fa-solid fa-power-off text-[16px]"></i> 1804 </div> 1805 1806 <h3 class="text-[16px] font-semibold text-gray-900 dark:text-white"> 1807 Machine learning 1808 </h3> 1809 </div> 1810 1811 1812 </div> 1813 </div> 1814 1815 </div> 1816</section> 1817 1818 1819 <section 1820 class="relative py-8 lg:py-12 px-6 sm:px-8 lg:px-14 bg-gradient-to-b from-gray-50 to-white dark:from-gray-950 dark:to-gray-900" 1821 id="services-section-6abf0c028eeb2"> 1822 1823 1824 <div class="absolute inset-0 overflow-hidden pointer-events-none"> 1825 <div class="services-bg-blur-1 absolute top-20 right-10 w-96 h-96 bg-[#1363C6]/5 rounded-full blur-3xl"></div> 1826 <div class="services-bg-blur-2 absolute bottom-20 left-10 w-96 h-96 bg-[#1363C6]/5 rounded-full blur-3xl"></div> 1827 </div> 1828 1829 <div class="max-w-7xl mx-auto relative"> 1830 1831 1832 <div class="text-center max-w-3xl mx-auto mb-4"> 1833
1834 <span 1835 class="services-badge opacity-0 inline-flex items-center gap-2 px-5 py-2 rounded-full text-xs sm:text-xs md:text-sm lg:text-sm tracking-wide font-semibold 1836 bg-[#1363C6]/10 text-[#1363C6] dark:bg-[#1363C6]/20 dark:text-[#4a8dd8] 1837 border border-[#1363C6]/20 dark:border-[#1363C6]/30 1838 shadow-sm shadow-[#1363C6]/10"> 1839 <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> 1840 <path 1841 d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> 1842 </svg> 1843 What We Offer 1844 </span> 1845 </div> 1846 1847 <div class="services-content max-w-7xl mx-auto mb-4 opacity-0"> 1848 <div 1849 class="text-[16px] sm:text-[16px] leading-[28px] text-gray-600 dark:text-gray-400 text-justify"> 1850 We deliver reliable, scalable, and secure digital solutions designed to help businesses grow, automate processes, and succeed in the digital world. 1851 </div> 1852 </div> 1853 1854 <div class="text-center max-w-3xl mx-auto mb-4"> 1855 <h2 1856 class="services-title opacity-0 text-[24px] sm:text-[24px] md:text-[40px] lg:text-[40px] font-extrabold text-gray-900 dark:text-white mt-6 mb-4 leading-tight"> 1857 Services 1858 </h2> 1859 </div> 1860 1861 1862 1863 1864 <div class="services-slider-wrapper opacity-0 relative w-full pt-2"> 1865 1866 <div 1867 class="services-slider-container overflow-hidden relative cursor-grab active:cursor-grabbing py-4"> 1868 <div class="services-slider flex gap-6 will-change-transform"> 1869 <div class="service-slide flex-shrink-0 group relative bg-white dark:bg-gray-900 rounded-2xl 1870 border border-gray-200 dark:border-gray-800 1871 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 1872 transition-all duration-300 1873 hover:shadow-2xl hover:shadow-[#1363C6]/20 p-6 cursor-pointer 1874 hover:-translate-y-2" 1875 data-service-id="5"> 1876 1877 1878 <div class="mb-5"> 1879 <div class="service-image w-full h-40 rounded-xl overflow-hidden"> 1880 <img src="https://satritech.com/storage/services/9ky3baKDM8fXaacEO6wA05H2SpJ3vWXCueSd2xIU.png" 1881 alt="Social Media Boosting" 1882 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" 1883 loading="lazy" decoding="async"> 1884 </div> 1885 </div> 1886 1887 1888 <h3 1889 class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] transition-colors"> 1890 Social Media Boosting 1891 </h3> 1892 1893 1894 <div class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed line-clamp-3 mb-3"> 1895 Social Media Boosting is a paid promotional strategy designed to increase the visibility, reach, and engagement of your posts across platforms such as Facebook and Instagram. 1896 </div> 1897 1898 1899 <div 1900 class="flex items-center gap-2 text-[#1363C6] dark:text-[#4a8dd8] font-semibold text-sm group-hover:gap-3 transition-all">
1901 <span>Learn More</span> 1902 <svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 1903 fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1904 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1905 d="M9 5l7 7-7 7" /> 1906 </svg> 1907 </div> 1908 1909 1910 <div class="absolute top-4 right-4"> 1911 <span 1912 class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs font-bold rounded-full"> 1913 <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"> 1914 <path 1915 d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> 1916 </svg> 1917 Featured 1918 </span> 1919 </div> 1920 </div> 1921 <div class="service-slide flex-shrink-0 group relative bg-white dark:bg-gray-900 rounded-2xl 1922 border border-gray-200 dark:border-gray-800 1923 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 1924 transition-all duration-300 1925 hover:shadow-2xl hover:shadow-[#1363C6]/20 p-6 cursor-pointer 1926 hover:-translate-y-2" 1927 data-service-id="4"> 1928 1929 1930 <div class="mb-5"> 1931 <div class="service-image w-full h-40 rounded-xl overflow-hidden"> 1932 <img src="https://satritech.com/storage/services/Jt7w621qmyhsaonpcSwXq23nbaVkhDIIPKJsE9Pc.png" 1933 alt="Technology Education & Training Services" 1934 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" 1935 loading="lazy" decoding="async"> 1936 </div> 1937 </div> 1938 1939 1940 <h3 1941 class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] transition-colors"> 1942 Technology Education & Training Services 1943 </h3> 1944 1945 1946 <div class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed line-clamp-3 mb-3"> 1947 Technology Education & Training Services 1948 </div> 1949 1950 1951 <div 1952 class="flex items-center gap-2 text-[#1363C6] dark:text-[#4a8dd8] font-semibold text-sm group-hover:gap-3 transition-all">
1953 <span>Learn More</span> 1954 <svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 1955 fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1956 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1957 d="M9 5l7 7-7 7" /> 1958 </svg> 1959 </div> 1960 1961 1962 <div class="absolute top-4 right-4"> 1963 <span 1964 class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs font-bold rounded-full"> 1965 <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"> 1966 <path 1967 d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> 1968 </svg> 1969 Featured 1970 </span> 1971 </div> 1972 </div> 1973 <div class="service-slide flex-shrink-0 group relative bg-white dark:bg-gray-900 rounded-2xl 1974 border border-gray-200 dark:border-gray-800 1975 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 1976 transition-all duration-300 1977 hover:shadow-2xl hover:shadow-[#1363C6]/20 p-6 cursor-pointer 1978 hover:-translate-y-2" 1979 data-service-id="3"> 1980 1981 1982 <div class="mb-5"> 1983 <div class="service-image w-full h-40 rounded-xl overflow-hidden"> 1984 <img src="https://satritech.com/storage/services/q94sR4isx002SYKnRymo5g85oaUfvP6KHghHroeX.png" 1985 alt="Digital Marketing & Online Growth Services" 1986 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" 1987 loading="lazy" decoding="async"> 1988 </div> 1989 </div> 1990 1991 1992 <h3 1993 class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] transition-colors"> 1994 Digital Marketing & Online Growth Services 1995 </h3> 1996 1997 1998 <div class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed line-clamp-3 mb-3"> 1999 ✔ Social media marketing & management 2000✔ Graphic content creation 2001✔ Facebook & Google Ads promotion 2002✔ Branding & online presence setup 2003These help businesses grow their digital footprint. 2004 </div> 2005 2006 2007 <div 2008 class="flex items-center gap-2 text-[#1363C6] dark:text-[#4a8dd8] font-semibold text-sm group-hover:gap-3 transition-all">
2009 <span>Learn More</span> 2010 <svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 2011 fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2012 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 2013 d="M9 5l7 7-7 7" /> 2014 </svg> 2015 </div> 2016 2017 2018 <div class="absolute top-4 right-4"> 2019 <span 2020 class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs font-bold rounded-full"> 2021 <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"> 2022 <path 2023 d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> 2024 </svg> 2025 Featured 2026 </span> 2027 </div> 2028 </div> 2029 <div class="service-slide flex-shrink-0 group relative bg-white dark:bg-gray-900 rounded-2xl 2030 border border-gray-200 dark:border-gray-800 2031 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 2032 transition-all duration-300 2033 hover:shadow-2xl hover:shadow-[#1363C6]/20 p-6 cursor-pointer 2034 hover:-translate-y-2" 2035 data-service-id="2"> 2036 2037 2038 <div class="mb-5"> 2039 <div class="service-image w-full h-40 rounded-xl overflow-hidden"> 2040 <img src="https://satritech.com/storage/services/DI1zaN3mRcygEri7nxU8GpNkL6ws0KgOydqvLjC2.png" 2041 alt="Mobile & Web Application Development" 2042 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" 2043 loading="lazy" decoding="async"> 2044 </div> 2045 </div> 2046 2047 2048 <h3 2049 class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] transition-colors"> 2050 Mobile & Web Application Development 2051 </h3> 2052 2053 2054 <div class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed line-clamp-3 mb-3"> 2055 Mobile & Web Application Development 2056 </div> 2057 2058 2059 <div 2060 class="flex items-center gap-2 text-[#1363C6] dark:text-[#4a8dd8] font-semibold text-sm group-hover:gap-3 transition-all">
2061 <span>Learn More</span> 2062 <svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 2063 fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2064 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 2065 d="M9 5l7 7-7 7" /> 2066 </svg> 2067 </div> 2068 2069 2070 <div class="absolute top-4 right-4"> 2071 <span 2072 class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs font-bold rounded-full"> 2073 <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"> 2074 <path 2075 d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> 2076 </svg> 2077 Featured 2078 </span> 2079 </div> 2080 </div> 2081 <div class="service-slide flex-shrink-0 group relative bg-white dark:bg-gray-900 rounded-2xl 2082 border border-gray-200 dark:border-gray-800 2083 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 2084 transition-all duration-300 2085 hover:shadow-2xl hover:shadow-[#1363C6]/20 p-6 cursor-pointer 2086 hover:-translate-y-2" 2087 data-service-id="1"> 2088 2089 2090 <div class="mb-5"> 2091 <div class="service-image w-full h-40 rounded-xl overflow-hidden"> 2092 <img src="https://satritech.com/storage/services/zTre6YWvRGyIzD94iO2Fi8mJB8BzmoAghVInY8nv.png" 2093 alt="IT & Software Development Services" 2094 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" 2095 loading="lazy" decoding="async"> 2096 </div> 2097 </div> 2098 2099 2100 <h3 2101 class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] transition-colors"> 2102 IT & Software Development Services 2103 </h3> 2104 2105 2106 <div class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed line-clamp-3 mb-3"> 2107 Professional software and digital solutions for businesses, individuals, and research projects, including scalable and secure application development. 2108 </div> 2109 2110 2111 <div 2112 class="flex items-center gap-2 text-[#1363C6] dark:text-[#4a8dd8] font-semibold text-sm group-hover:gap-3 transition-all">
2113 <span>Learn More</span> 2114 <svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 2115 fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2116 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 2117 d="M9 5l7 7-7 7" /> 2118 </svg> 2119 </div> 2120 2121 2122 <div class="absolute top-4 right-4"> 2123 <span 2124 class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs font-bold rounded-full"> 2125 <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"> 2126 <path 2127 d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> 2128 </svg> 2129 Featured 2130 </span> 2131 </div> 2132 </div> 2133 </div> 2134 </div> 2135 2136 2137 2138 2139 2140 <div class="services-indicators flex justify-center gap-2 mt-6"> 2141 <button 2142 class="services-indicator h-1.5 rounded-full bg-gray-300 dark:bg-gray-700 hover:bg-[#1363C6]/50 dark:hover:bg-[#4a8dd8]/50 transition-all duration-300 opacity-0 cursor-pointer" 2143 data-index="0" aria-label="Go to slide 1" 2144 style="width: 32px;"> 2145 </button> 2146 <button 2147 class="services-indicator h-1.5 rounded-full bg-gray-300 dark:bg-gray-700 hover:bg-[#1363C6]/50 dark:hover:bg-[#4a8dd8]/50 transition-all duration-300 opacity-0 cursor-pointer" 2148 data-index="1" aria-label="Go to slide 2" 2149 style="width: 32px;"> 2150 </button> 2151 </div> 2152 </div> 2153 2154 2155 2156 2157 2158 </div> 2159</section> 2160 2161 2162<div id="serviceModal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black/80 backdrop-blur-sm"> 2163 2164 2165 <div class="relative w-full max-w-4xl max-h-[90vh] modal-content"> 2166 2167 2168 <button id="closeServiceModal" 2169 class="absolute -top-4 -right-4 z-50 w-10 h-10 flex items-center justify-center 2170 bg-white dark:bg-gray-800 rounded-full shadow-lg 2171 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 2172 hover:scale-110 hover:rotate-90 transition-all duration-300 2173 border-2 border-gray-200 dark:border-gray-700"> 2174 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2175 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" /> 2176 </svg> 2177 </button> 2178 2179 2180 <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-2xl overflow-hidden"> 2181 <div class="flex flex-col md:flex-row max-h-[85vh]"> 2182 2183 2184 <div 2185 class="md:w-2/5 bg-gradient-to-br from-[#1363C6]/10 via-[#1363C6]/5 to-transparent 2186 dark:from-[#1363C6]/20 dark:via-[#1363C6]/10 dark:to-transparent 2187 p-8 flex flex-col items-center justify-center relative"> 2188 2189 2190 <div class="absolute top-4 right-4 w-24 h-24 bg-[#1363C6]/10 rounded-full blur-2xl"></div> 2191 <div class="absolute bottom-4 left-4 w-32 h-32 bg-[#0d4a94]/10 rounded-full blur-2xl"></div> 2192 2193 2194 <div class="absolute top-8 left-8 opacity-5"> 2195 <svg class="w-32 h-32 text-[#1363C6]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2196 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 2197 d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> 2198 </svg> 2199 </div> 2200 2201 <div class="relative z-10 flex flex-col items-center w-full"> 2202 2203 <div class="relative mb-6"> 2204 <div 2205 class="absolute inset-0 bg-gradient-to-br from-[#1363C6] to-[#0d4a94] rounded-2xl opacity-20 blur-xl"> 2206 </div> 2207 <div id="modalServiceImage" 2208 class="relative w-48 h-48 rounded-2xl shadow-2xl border-4 border-white dark:border-gray-800 2209 overflow-hidden bg-gradient-to-br from-[#1363C6]/10 to-[#0d4a94]/10 2210 flex items-center justify-center"> 2211 </div> 2212 </div> 2213 2214 2215 <div class="md:hidden text-center mb-6 w-full"> 2216 <h2 id="modalServiceTitleMobile" class="text-2xl font-extrabold text-gray-900 dark:text-white mb-2"> 2217 </h2> 2218 </div> 2219 2220 2221 <div id="modalServiceFeatured" class="mt-4 hidden">
2222 <span class="inline-flex items-center gap-1.5 px-4 py-2 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-sm font-bold rounded-full"> 2223 <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> 2224 <path 2225 d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> 2226 </svg> 2227 Featured 2228 </span> 2229 </div> 2230 </div> 2231 </div> 2232 2233 2234 <div class="md:w-3/5 p-8 flex flex-col overflow-hidden"> 2235 2236 <div class="hidden md:block mb-6"> 2237 <h2 id="modalServiceTitle" class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2"></h2> 2238 <div class="w-16 h-0.5 bg-gradient-to-r from-[#1363C6] to-[#0d4a94] rounded-full mt-2"></div> 2239 </div> 2240 2241 2242 <div class="flex-1 overflow-y-auto pr-2"> 2243 <div class="space-y-4"> 2244 2245 <div id="modalServiceShortDesc" class="text-lg text-gray-700 dark:text-gray-300 font-medium"></div> 2246 2247 2248 <div class="flex items-center gap-2 mb-3 pt-4 border-t border-gray-200 dark:border-gray-700"> 2249 <div 2250 class="w-8 h-8 rounded-lg bg-[#1363C6]/10 dark:bg-[#1363C6]/20 flex items-center justify-center flex-shrink-0"> 2251 <svg class="w-4 h-4 text-[#1363C6] dark:text-[#4a8dd8]" fill="none" 2252 stroke="currentColor" viewBox="0 0 24 24"> 2253 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 2254 d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> 2255 </svg> 2256 </div> 2257 <h3 class="text-lg font-bold text-gray-900 dark:text-white">Details</h3> 2258 </div> 2259 <div id="modalServiceDescription" 2260 class="text-[15px] leading-[26px] text-gray-600 dark:text-gray-400 space-y-3"> 2261 </div> 2262 </div> 2263 </div> 2264 </div> 2265 2266 </div> 2267 </div> 2268 </div> 2269</div> 2270 2271 2272 2273 <section 2274 class="relative py-8 lg:py-12 px-6 sm:px-8 lg:px-14 bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-950 overflow-hidden" 2275 id="projects-section-6abf0c0292ade"> 2276 2277 2278 <div class="absolute inset-0 overflow-hidden pointer-events-none"> 2279 <div class="projects-bg-blur-1 absolute top-20 left-10 w-72 h-72 bg-[#1363C6]/5 rounded-full blur-3xl"></div> 2280 <div class="projects-bg-blur-2 absolute bottom-20 right-10 w-72 h-72 bg-[#1363C6]/5 rounded-full blur-3xl"></div> 2281 </div> 2282 2283 <div class="max-w-7xl mx-auto relative"> 2284 2285 2286 <div class="text-center max-w-3xl mx-auto mb-4"> 2287 2288 <span 2289 class="projects-badge opacity-0 inline-flex items-center gap-2 px-5 py-2 rounded-full text-xs sm:text-xs md:text-sm lg:text-sm tracking-wide font-semibold 2290 bg-[#1363C6]/10 text-[#1363C6] dark:bg-[#1363C6]/20 dark:text-[#4a8dd8] 2291 border border-[#1363C6]/20 dark:border-[#1363C6]/30 2292 shadow-sm shadow-[#1363C6]/10"> 2293 <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> 2294 <path 2295 d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" /> 2296 </svg> 2297 Innovative Solutions by SATRI 2298 </span> 2299 </div> 2300 2301 <div class="projects-content max-w-7xl mx-auto mb-4 opacity-0"> 2302 <div
2303 class="text-[16px] sm:text-[16px] leading-[28px] text-gray-600 dark:text-gray-400 text-justify"> 2304 Discover SATRI's innovative solutions designed to revolutionize your development process. With Samrachana, create backends in seconds; MOSE empowers mobile computing by transforming your device into a powerful server; Fluttero simplifies Flutter development with intuitive tools; and UMA streamlines Dart backend development with comprehensive features. Explore how SATRI is driving excellence and innovation in technology. 2305 </div> 2306 </div> 2307 2308 <div class="text-center max-w-3xl mx-auto mb-4"> 2309 <h2 2310 class="projects-title opacity-0 text-[24px] sm:text-[24px] md:text-[40px] lg:text-[40px] font-extrabold text-gray-900 dark:text-white mt-6 mb-4 leading-tight"> 2311 Our Products 2312 </h2> 2313 </div> 2314 2315 2316 <div class="projects-grid grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mb-12"> 2317 <div class="project-card opacity-0 group bg-white dark:bg-gray-900 rounded-2xl overflow-hidden 2318 border border-gray-200 dark:border-gray-800 2319 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 2320 transition-all duration-500 2321 hover:shadow-2xl hover:shadow-[#1363C6]/20 cursor-pointer" 2322 data-project-id="4" 2323 data-index="0"> 2324 2325 2326 <div 2327 class="relative h-56 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 overflow-hidden"> 2328 <img src="https://satritech.com/storage/projects/wD5fiSzcThXwxcGctoNDzRAwzoqVUtgQbQ8yR7Gf.jpg" alt="FocusFlow" 2329 class="project-image w-full h-full object-cover transition-transform duration-700" 2330 loading="lazy" decoding="async"> 2331 2332 2333 <div 2334 class="project-overlay absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 transition-opacity duration-300"> 2335 <div 2336 class="absolute bottom-4 left-4 right-4 transform translate-y-4 transition-transform duration-300"> 2337 <a href="https://play.google.com/store/apps/details?id=com.satri.focusflow" target="_blank" 2338 rel="noopener noreferrer" 2339 class="project-btn inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-700 text-white text-sm font-semibold rounded-lg shadow-lg hover:from-blue-600 hover:to-blue-800 transition-all duration-300"> 2340 <span>View Project</span> 2341 <svg class="w-4 h-4" fill="none" stroke="currentColor"
2342 viewBox="0 0 24 24"> 2343 <path stroke-linecap="round" stroke-linejoin="round" 2344 stroke-width="2" 2345 d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> 2346 </svg> 2347 </a> 2348 </div> 2349 </div> 2350 2351 2352 <div 2353 class="absolute top-4 right-4 px-3 py-1.5 bg-green-500 text-white text-xs font-bold rounded-full shadow-lg flex items-center gap-1.5"> 2354 <span class="w-2 h-2 bg-white rounded-full animate-pulse"></span> 2355 Live 2356 </div> 2357 </div> 2358 2359 2360 <div class="p-5"> 2361 <h3 2362 class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] transition-colors line-clamp-2"> 2363 FocusFlow 2364 </h3> 2365 2366 2367 2368 </div> 2369 </div> 2370 <div class="project-card opacity-0 group bg-white dark:bg-gray-900 rounded-2xl overflow-hidden 2371 border border-gray-200 dark:border-gray-800 2372 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 2373 transition-all duration-500 2374 hover:shadow-2xl hover:shadow-[#1363C6]/20 cursor-pointer" 2375 data-project-id="3" 2376 data-index="1"> 2377 2378 2379 <div 2380 class="relative h-56 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 overflow-hidden"> 2381 <img src="https://satritech.com/storage/projects/GWeLSRlJIoM107IcN28eihJLsa5OQRYN5X133oZR.jpg" alt="Pocket Ledger" 2382 class="project-image w-full h-full object-cover transition-transform duration-700" 2383 loading="lazy" decoding="async"> 2384 2385 2386 <div 2387 class="project-overlay absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 transition-opacity duration-300"> 2388 <div 2389 class="absolute bottom-4 left-4 right-4 transform translate-y-4 transition-transform duration-300"> 2390 <a href="https://play.google.com/store/apps/details?id=com.pocketledger.expense.tracker.ledger" target="_blank" 2391 rel="noopener noreferrer" 2392 class="project-btn inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-700 text-white text-sm font-semibold rounded-lg shadow-lg hover:from-blue-600 hover:to-blue-800 transition-all duration-300"> 2393 <span>View Project</span> 2394 <svg class="w-4 h-4" fill="none" stroke="currentColor"
2395 viewBox="0 0 24 24"> 2396 <path stroke-linecap="round" stroke-linejoin="round" 2397 stroke-width="2" 2398 d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> 2399 </svg> 2400 </a> 2401 </div> 2402 </div> 2403 2404 2405 <div 2406 class="absolute top-4 right-4 px-3 py-1.5 bg-green-500 text-white text-xs font-bold rounded-full shadow-lg flex items-center gap-1.5"> 2407 <span class="w-2 h-2 bg-white rounded-full animate-pulse"></span> 2408 Live 2409 </div> 2410 </div> 2411 2412 2413 <div class="p-5"> 2414 <h3 2415 class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] transition-colors line-clamp-2"> 2416 Pocket Ledger 2417 </h3> 2418 2419 2420 2421 </div> 2422 </div> 2423 <div class="project-card opacity-0 group bg-white dark:bg-gray-900 rounded-2xl overflow-hidden 2424 border border-gray-200 dark:border-gray-800 2425 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 2426 transition-all duration-500 2427 hover:shadow-2xl hover:shadow-[#1363C6]/20 cursor-pointer" 2428 data-project-id="2" 2429 data-index="2"> 2430 2431 2432 <div 2433 class="relative h-56 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 overflow-hidden"> 2434 <img src="https://satritech.com/storage/projects/KSrH2W0CsIxwYdxraq22b8hJnb3fD4JgivGHTee1.jpg" alt="ASTRUM" 2435 class="project-image w-full h-full object-cover transition-transform duration-700" 2436 loading="lazy" decoding="async"> 2437 2438 2439 <div 2440 class="project-overlay absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 transition-opacity duration-300"> 2441 <div 2442 class="absolute bottom-4 left-4 right-4 transform translate-y-4 transition-transform duration-300"> 2443 <a href="https://play.google.com/store/apps/details?id=com.satri.astrology.psychic.astrum" target="_blank" 2444 rel="noopener noreferrer" 2445 class="project-btn inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-700 text-white text-sm font-semibold rounded-lg shadow-lg hover:from-blue-600 hover:to-blue-800 transition-all duration-300"> 2446 <span>View Project</span> 2447 <svg class="w-4 h-4" fill="none" stroke="currentColor"
2448 viewBox="0 0 24 24"> 2449 <path stroke-linecap="round" stroke-linejoin="round" 2450 stroke-width="2" 2451 d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> 2452 </svg> 2453 </a> 2454 </div> 2455 </div> 2456 2457 2458 <div 2459 class="absolute top-4 right-4 px-3 py-1.5 bg-green-500 text-white text-xs font-bold rounded-full shadow-lg flex items-center gap-1.5"> 2460 <span class="w-2 h-2 bg-white rounded-full animate-pulse"></span> 2461 Live 2462 </div> 2463 </div> 2464 2465 2466 <div class="p-5"> 2467 <h3 2468 class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] transition-colors line-clamp-2"> 2469 ASTRUM 2470 </h3> 2471 2472 2473 2474 </div> 2475 </div> 2476 <div class="project-card opacity-0 group bg-white dark:bg-gray-900 rounded-2xl overflow-hidden 2477 border border-gray-200 dark:border-gray-800 2478 hover:border-[#1363C6]/40 dark:hover:border-[#1363C6]/50 2479 transition-all duration-500 2480 hover:shadow-2xl hover:shadow-[#1363C6]/20 cursor-pointer" 2481 data-project-id="1" 2482 data-index="3"> 2483 2484 2485 <div 2486 class="relative h-56 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 overflow-hidden"> 2487 <img src="https://satritech.com/storage/projects/FAv40dTwph4MZrnAXNGToSyDo85rAp72K9fwsy1h.jpg" alt="API Scout - API Testing Client" 2488 class="project-image w-full h-full object-cover transition-transform duration-700" 2489 loading="lazy" decoding="async"> 2490 2491 2492 <div 2493 class="project-overlay absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 transition-opacity duration-300"> 2494 <div 2495 class="absolute bottom-4 left-4 right-4 transform translate-y-4 transition-transform duration-300"> 2496 <a href="https://play.google.com/store/apps/details?id=com.satri.apiscout" target="_blank" 2497 rel="noopener noreferrer" 2498 class="project-btn inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-700 text-white text-sm font-semibold rounded-lg shadow-lg hover:from-blue-600 hover:to-blue-800 transition-all duration-300"> 2499 <span>View Project</span> 2500 <svg class="w-4 h-4" fill="none" stroke="currentColor"
2501 viewBox="0 0 24 24"> 2502 <path stroke-linecap="round" stroke-linejoin="round" 2503 stroke-width="2" 2504 d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> 2505 </svg> 2506 </a> 2507 </div> 2508 </div> 2509 2510 2511 <div 2512 class="absolute top-4 right-4 px-3 py-1.5 bg-green-500 text-white text-xs font-bold rounded-full shadow-lg flex items-center gap-1.5"> 2513 <span class="w-2 h-2 bg-white rounded-full animate-pulse"></span> 2514 Live 2515 </div> 2516 </div> 2517 2518 2519 <div class="p-5"> 2520 <h3 2521 class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-[#1363C6] dark:group-hover:text-[#4a8dd8] transition-colors line-clamp-2"> 2522 API Scout - API Testing Client 2523 </h3> 2524 2525 2526 2527 </div> 2528 </div> 2529 </div> 2530 2531 2532 <div class="projects-view-btn opacity-0 text-center mt-10"> 2533 <a href="https://satritech.com/our-projects" 2534 class="group inline-flex items-center gap-3 px-8 py-3.5 2535 bg-gradient-to-r from-[#1363C6] to-[#0d4a94] 2536 text-white font-semibold rounded-xl 2537 hover:shadow-xl hover:shadow-[#1363C6]/30 2538 transition-all duration-300"> 2539 <span>View All Projects</span> 2540 <svg class="view-arrow w-5 h-5 transition-transform" fill="none" stroke="currentColor"
2541 viewBox="0 0 24 24"> 2542 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 2543 d="M13 7l5 5m0 0l-5 5m5-5H6" /> 2544 </svg> 2545 </a> 2546 </div> 2547 2548 2549 2550 </div> 2551</section> 2552 2553 2554<div id="projectModal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black/80 backdrop-blur-sm"> 2555 2556 2557 <div class="relative w-full max-w-4xl max-h-[90vh] modal-content"> 2558 2559 2560 <button id="closeProjectModal" 2561 class="absolute -top-4 -right-4 z-50 w-10 h-10 flex items-center justify-center 2562 bg-white dark:bg-gray-800 rounded-full shadow-lg 2563 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 2564 hover:scale-110 hover:rotate-90 transition-all duration-300 2565 border-2 border-gray-200 dark:border-gray-700"> 2566 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2567 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" /> 2568 </svg> 2569 </button> 2570 2571 2572 <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-2xl overflow-hidden"> 2573 <div class="flex flex-col md:flex-row max-h-[85vh]"> 2574 2575 2576 <div 2577 class="md:w-2/5 bg-gradient-to-br from-[#1363C6]/10 via-[#1363C6]/5 to-transparent 2578 dark:from-[#1363C6]/20 dark:via-[#1363C6]/10 dark:to-transparent 2579 p-8 flex flex-col items-center justify-center relative"> 2580 2581 2582 <div class="absolute top-4 right-4 w-24 h-24 bg-[#1363C6]/10 rounded-full blur-2xl"></div> 2583 <div class="absolute bottom-4 left-4 w-32 h-32 bg-[#0d4a94]/10 rounded-full blur-2xl"></div> 2584 2585 <div class="relative z-10 flex flex-col items-center w-full"> 2586 2587 <div class="relative mb-6"> 2588 <div 2589 class="absolute inset-0 bg-gradient-to-br from-[#1363C6] to-[#0d4a94] rounded-2xl opacity-20 blur-xl"> 2590 </div> 2591 <div id="modalProjectImage" 2592 class="relative w-48 h-48 rounded-2xl shadow-2xl border-4 border-white dark:border-gray-800 2593 overflow-hidden bg-white dark:bg-gray-900 2594 flex items-center justify-center"> 2595 </div> 2596 </div> 2597 2598 2599 <div id="modalProjectLiveBadge" class="mb-6 hidden"> 2600 <span class="inline-flex items-center gap-1.5 px-4 py-2 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-sm font-bold rounded-full"> 2601 <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span> 2602 Live Project 2603 </span> 2604 </div> 2605 2606 2607 <div class="w-full"> 2608 <p class="text-[10px] text-gray-500 dark:text-gray-400 uppercase font-bold tracking-wider mb-3 text-center">Built With</p> 2609 <div id="modalProjectTech" class="flex flex-wrap items-center justify-center gap-2"></div> 2610 </div> 2611 </div> 2612 </div> 2613 2614 2615 <div class="md:w-3/5 p-8 flex flex-col overflow-hidden"> 2616 2617 <div class="hidden md:block mb-6"> 2618 <h2 id="modalProjectTitle" class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight"></h2> 2619 <div class="w-16 h-0.5 bg-gradient-to-r from-[#1363C6] to-[#0d4a94] rounded-full mt-2"></div> 2620 </div> 2621 2622 2623 <div class="flex-1 overflow-y-auto pr-2 custom-scrollbar"> 2624 <div class="space-y-6"> 2625 2626 <div id="modalProjectShortDesc" class="text-lg text-gray-700 dark:text-gray-300 font-medium leading-relaxed border-l-4 border-[#1363C6]/30 pl-4"></div> 2627 2628 2629 <div class="space-y-4"> 2630 <div class="flex items-center gap-2"> 2631 <div class="w-8 h-8 rounded-lg bg-[#1363C6]/10 dark:bg-[#1363C6]/20 flex items-center justify-center"> 2632 <svg class="w-4 h-4 text-[#1363C6] dark:text-[#4a8dd8]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2633 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> 2634 </svg> 2635 </div> 2636 <h3 class="text-lg font-bold text-gray-900 dark:text-white">Project Case Study</h3> 2637 </div> 2638 <div id="modalProjectDescription" class="text-[15px] leading-[26px] text-gray-600 dark:text-gray-400 prose dark:prose-invert max-w-none"></div> 2639 </div> 2640 </div> 2641 </div> 2642 2643 2644 <div class="mt-8 pt-6 border-t border-gray-100 dark:border-gray-800"> 2645 <a id="modalProjectActionUrl" href="#" target="_blank" rel="noopener" class="flex items-center justify-center gap-3 px-8 py-4 bg-gradient-to-r from-[#1363C6] to-[#0d4a94] text-white font-bold rounded-2xl shadow-lg hover:shadow-[#1363C6]/30 transition-all duration-300 hover:-translate-y-1">
2646 <span>Visit Live Project</span> 2647 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2648 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> 2649 </svg> 2650 </a> 2651 </div> 2652 </div> 2653 2654 </div> 2655 </div> 2656 </div> 2657</div> 2658 2659<style> 2660 .custom-scrollbar::-webkit-scrollbar { width: 4px; } 2661 .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } 2662 .custom-scrollbar::-webkit-scrollbar-thumb { background: #1363C620; border-radius: 10px; } 2663 .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #1363C640; } 2664</style> 2665 2666 2667 2668 <section class="py-16 bg-gray-50 dark:bg-gray-900" id="newsletter-section-6abf0c02942e7"> 2669 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 2670 <div class="text-center mb-8"> 2671 <h2 class="newsletter-heading text-3xl font-bold text-gray-900 dark:text-white mb-2 opacity-0"> 2672 Subscribe to our newsletter</h2> 2673 <p class="newsletter-subtitle text-lg text-gray-600 dark:text-gray-300 opacity-0">Stay Updated 2674 </p> 2675 </div> 2676 2677 <div class="max-w-3xl mx-auto newsletter-form opacity-0"> 2678 <form action="https://satritech.com/subscribe" method="POST" class="space-y-4" 2679 id="subscription-form-inline"> 2680 <input type="hidden" name="_token" value="4buuchdlwWEnGZjWPXRwiY90BxxYkttoAhhsNAFU" autocomplete="off"> 2681 <div class="flex flex-col sm:flex-row gap-3"> 2682 <input type="email" name="email" placeholder="Enter your email address" required 2683 class="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"> 2684 2685 <button type="submit" 2686 class="px-8 py-3 bg-blue-600 dark:bg-blue-700 text-white font-semibold rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-200 whitespace-nowrap"> 2687 Subscribe Now 2688 </button> 2689 </div> 2690 2691 <div class="flex flex-wrap gap-3 justify-center"> 2692 <label class="inline-flex items-center cursor-pointer"> 2693 <input type="checkbox" name="topics[]" value="1" 2694 checked 2695 class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded"> 2696 <span 2697 class="ml-2 text-sm text-gray-700 dark:text-gray-300">Job Postings</span> 2698 </label> 2699 <label class="inline-flex items-center cursor-pointer"> 2700 <input type="checkbox" name="topics[]" value="2" 2701 2702 class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded"> 2703 <span 2704 class="ml-2 text-sm text-gray-700 dark:text-gray-300">Course Launches</span> 2705 </label> 2706 <label class="inline-flex items-center cursor-pointer"> 2707 <input type="checkbox" name="topics[]" value="3" 2708 2709 class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
2710 <span 2711 class="ml-2 text-sm text-gray-700 dark:text-gray-300">Company Announcements</span> 2712 </label> 2713 <label class="inline-flex items-center cursor-pointer"> 2714 <input type="checkbox" name="topics[]" value="4" 2715 2716 class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded"> 2717 <span 2718 class="ml-2 text-sm text-gray-700 dark:text-gray-300">Newsletter</span> 2719 </label> 2720 </div> 2721 2722 <p class="text-xs text-gray-500 dark:text-gray-400 text-center"> 2723 By subscribing, you agree to receive email updates. You can unsubscribe at any time. 2724 </p> 2725 </form> 2726 2727 </div> 2728 </div> 2729 </section> 2730 2731 <section 2732 class="relative py-8 lg:py-12 px-6 sm:px-10 lg:px-14 bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-950 overflow-hidden"> 2733 2734 2735 <div class="absolute inset-0 overflow-hidden pointer-events-none"> 2736 <div class="absolute top-20 left-10 w-72 h-72 bg-[#1363C6]/5 rounded-full blur-3xl animate-career-bg-1"></div> 2737 <div class="absolute bottom-20 right-10 w-72 h-72 bg-[#1363C6]/5 rounded-full blur-3xl animate-career-bg-2"> 2738 </div> 2739 </div> 2740 2741 <div class="max-w-7xl mx-auto relative"> 2742 2743 2744 <div class="text-center max-w-3xl mx-auto mb-4"> 2745 <span 2746 class="inline-flex items-center gap-2 px-5 py-2 rounded-full text-xs sm:text-xs md:text-sm lg:text-sm tracking-wide font-semibold 2747 bg-[#1363C6]/10 text-[#1363C6] dark:bg-[#1363C6]/20 dark:text-[#4a8dd8] 2748 border border-[#1363C6]/20 dark:border-[#1363C6]/30 2749 shadow-sm shadow-[#1363C6]/10 animate-career-subtitle"> 2750 <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> 2751 <path fill-rule="evenodd" 2752 d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" 2753 clip-rule="evenodd" /> 2754 <path 2755 d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z" /> 2756 </svg> 2757 JOIN OUR TEAM 2758 </span> 2759 </div> 2760 2761 <div class="max-w-7xl mx-auto mb-8 animate-career-content"> 2762 <div class="text-[16px] leading-[26px] text-gray-600 dark:text-gray-400 text-justify"> 2763 <p>We are a growing company always looking for passionate and talented individuals to join our mission. Explore our open roles below.</p> 2764 </div> 2765 </div> 2766 2767 <div class="text-center max-w-3xl mx-auto"> 2768 <h2 2769 class="text-[24px] sm:text-[24px] md:text-[40px] lg:text-[40px] font-extrabold text-gray-900 dark:text-white mt-6 mb-4 leading-tight animate-career-heading"> 2770 Open Career Opportunities 2771 </h2> 2772 </div> 2773 2774 2775 2776 <div x-data="{ activeTab: 'All' }"> 2777 2778 2779 2780 2781 <div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-
27815"> 2782 <div 2783 class="col-span-full text-center py-20 bg-white dark:bg-gray-900 rounded-xl 2784 border border-gray-100 dark:border-gray-800 animate-career-empty"> 2785 <div 2786 class="inline-flex items-center justify-center w-16 h-16 rounded-full 2787 bg-gradient-to-br from-[#1363C6] to-[#0d4a94] mb-6 shadow-lg"> 2788 <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2789 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 2790 d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> 2791 </svg> 2792 </div> 2793 <h3 class="text-[20px] font-bold text-gray-900 dark:text-white mb-2">No Open Positions</h3> 2794 <p class="text-[16px] text-gray-600 dark:text-gray-400 max-w-sm mx-auto"> 2795 We don't have any open positions at the moment. Check back soon! 2796 </p> 2797 </div> 2798 </div> 2799 </div> 2800 </div> 2801</section> 2802 2803 2804<div id="jobModal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black/80 backdrop-blur-sm"> 2805 2806 2807 <div class="relative w-full max-w-4xl max-h-[90vh] modal-content"> 2808 2809 2810 <button id="closeJobModal" 2811 class="absolute -top-4 -right-4 z-50 w-10 h-10 flex items-center justify-center 2812 bg-white dark:bg-gray-800 rounded-full shadow-lg 2813 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 2814 hover:scale-110 hover:rotate-90 transition-all duration-300 2815 border-2 border-gray-200 dark:border-gray-700"> 2816 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2817 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" /> 2818 </svg> 2819 </button> 2820 2821 2822 <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-2xl overflow-hidden"> 2823 <div class="flex flex-col md:flex-row max-h-[85vh]"> 2824 2825 2826 <div 2827 class="md:w-2/5 bg-gradient-to-br from-[#1363C6]/10 via-[#1363C6]/5 to-transparent 2828 dark:from-[#1363C6]/20 dark:via-[#1363C6]/10 dark:to-transparent 2829 p-8 flex flex-col items-center justify-center relative"> 2830 2831 2832 <div class="absolute top-4 right-4 w-24 h-24 bg-[#1363C6]/10 rounded-full blur-2xl"></div> 2833 <div class="absolute bottom-4 left-4 w-32 h-32 bg-[#0d4a94]/10 rounded-full blur-2xl"></div> 2834 2835 <div class="relative z-10 flex flex-col items-center w-full"> 2836 2837 <div class="relative mb-6"> 2838 <div 2839 class="absolute inset-0 bg-gradient-to-br from-[#1363C6] to-[#0d4a94] rounded-2xl opacity-20 blur-xl"> 2840 </div> 2841 <div class="relative w-32 h-32 rounded-2xl shadow-2xl bg-gradient-to-br from-[#1363C6] to-[#0d4a94] flex items-center justify-center"> 2842 <svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2843 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> 2844 </svg> 2845 </div> 2846 </div> 2847 2848 2849 <div id="modalJobCategoryBadge" class="mb-6"></div> 2850 2851 2852 <div class="w-full space-y-4"> 2853 2854 <div class="flex items-center gap-3 p-4 bg-white/50 dark:bg-gray-800/50 rounded-xl border border-white dark:border-gray-700 backdrop-blur-sm"> 2855 <div class="w-8 h-8 rounded-lg bg-[#1363C6]/10 flex items-center justify-center"> 2856 <svg class="w-4 h-4 text-[#1363C6]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2856<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg> 2857 </div> 2858 <div> 2859 <p class="text-[10px] text-gray-500 uppercase font-black tracking-widest">Location</p> 2860 <p id="modalJobLocation" class="text-sm font-bold text-gray-900 dark:text-white"></p> 2861 </div> 2862 </div> 2863 2864 2865 <div id="modalJobDeadlineArea" class="flex items-center gap-3 p-4 bg-white/50 dark:bg-gray-800/50 rounded-xl border border-white dark:border-gray-700 backdrop-blur-sm"> 2866 <div class="w-8 h-8 rounded-lg bg-red-100 flex items-center justify-center"> 2867 <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg> 2868 </div> 2869 <div> 2870 <p class="text-[10px] text-gray-500 uppercase font-black tracking-widest">Apply Before</p> 2871 <p id="modalJobDeadline" class="text-sm font-bold text-gray-900 dark:text-white"></p> 2872 </div> 2873 </div> 2874 </div> 2875 </div> 2876 </div> 2877 2878 2879 <div class="md:w-3/5 p-8 flex flex-col overflow-hidden"> 2880 2881 <div class="hidden md:block mb-6"> 2882 <h2 id="modalJobTitle" class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight"></h2> 2883 <div class="w-16 h-0.5 bg-gradient-to-r from-[#1363C6] to-[#0d4a94] rounded-full mt-2"></div> 2884 </div> 2885 2886 2887 <div class="flex-1 overflow-y-auto pr-2 custom-scrollbar"> 2888 <div class="space-y-6"> 2889 2890 <div class="space-y-4"> 2891 <div class="flex items-center gap-2"> 2892 <div class="w-8 h-8 rounded-lg bg-[#1363C6]/10 dark:bg-[#1363C6]/20 flex items-center justify-center"> 2893 <svg class="w-4 h-4 text-[#1363C6] dark:text-[#4a8dd8]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2894 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> 2895 </svg> 2896 </div> 2897 <h3 class="text-lg font-bold text-gray-900 dark:text-white">Job Description</h3> 2898 </div> 2899 <div id="modalJobDescription" class="text-[15px] leading-[26px] text-gray-600 dark:text-gray-400 prose dark:prose-invert max-w-none"></div> 2900 </div> 2901 </div> 2902 </div> 2903 2904 2905 <div class="mt-8 pt-6 border-t border-gray-100 dark:border-gray-800"> 2906 <a id="modalJobActionUrl" href="#" class="flex items-center justify-center gap-3 px-8 py-4 bg-gradient-to-r from-[#1363C6] to-[#0d4a94] text-white font-bold rounded-2xl shadow-lg hover:shadow-[#1363C6]/30 transition-all duration-300 hover:-translate-y-1"> 2907 <span>Interested? View Full Details & Apply</span> 2908 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2909 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /> 2910 </svg> 2911 </a> 2912 </div> 2913 </div> 2914 2915 </div> 2916 </div> 2917 </div> 2918</div> 2919 2920<style> 2921 .custom-scrollbar::-webkit-scrollbar { width: 4px; } 2922 .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } 2923 .custom-scrollbar::-webkit-scrollbar-thumb { background: #1363C620; border-radius: 10px; } 2924 .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #1363C640; } 2925</style> 2926 2927 2928 <section 2929 class="py-8 lg:py-12 px-6 sm:px-8 lg:px-12 bg-gradient-to-b from-gray-50 to-white dark:from-gray-950 dark:to-gray-900" 2930 id="map-section-6abf0c0296b86"> 2931 <div class="max-w-7xl mx-auto"> 2932 <div class="text-center max-w-3xl mx-auto mb-8"> 2933 <p 2934 class="text-xs sm:text-xs md:text-[20px] lg:text-[20px] leading-[28px] mt-4 mb-4 font-bold tracking-wider up
2934percase text-[#1363C6] dark:text-[#4a8dd8]"> 2935 Visit Our Location 2936 </p> 2937 <h2 2938 class="text-[24px] sm:text-[24px] md:text-[40px] lg:text-[40px] leading-[48px] mt-6 mb-6 font-extrabold text-gray-900 dark:text-white"> 2939 Find Us</h2> 2940 </div> 2941 <div class="grid lg:grid-cols-3 gap-6"> 2942 <div class="lg:col-span-1"> 2943 <div 2944 class="bg-white dark:bg-gray-900 rounded-2xl p-6 shadow-lg border border-gray-200 dark:border-gray-800 space-y-6 sticky top-8"> 2945 <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Contact Information</h3> 2946 <div class="flex items-start gap-3"> 2947 <div 2948 class="flex-shrink-0 w-10 h-10 rounded-lg bg-[#1363C6]/10 dark:bg-[#1363C6]/20 flex items-center justify-center"> 2949 <svg class="w-5 h-5 text-[#1363C6] dark:text-[#4a8dd8]" fill="currentColor"
2950 viewBox="0 0 20 20"> 2951 <path fill-rule="evenodd" 2952 d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" 2953 clip-rule="evenodd" /> 2954 </svg> 2955 </div> 2956 <div> 2957 <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">Address 2958 </h4> 2959 <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed"> 2960 Pokhara-8, Srijana Chowk, Kaski, Nepal</p> 2961 </div> 2962 </div> 2963 <div class="flex items-start gap-3"> 2964 <div 2965 class="flex-shrink-0 w-10 h-10 rounded-lg bg-[#1363C6]/10 dark:bg-[#1363C6]/20 flex items-center justify-center"> 2966 <svg class="w-5 h-5 text-[#1363C6] dark:text-[#4a8dd8]" fill="currentColor"
2967 viewBox="0 0 20 20"> 2968 <path 2969 d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" /> 2970 </svg> 2971 </div> 2972 <div> 2973 <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">Phone</h4> 2974 <a href="tel:+977 9764526660 /970-7722844" 2975 class="text-sm text-[#1363C6] dark:text-[#4a8dd8] hover:underline">+977 9764526660 /970-7722844</a> 2976 </div> 2977 </div> 2978 <div class="flex items-start gap-3"> 2979 <div 2980 class="flex-shrink-0 w-10 h-10 rounded-lg bg-[#1363C6]/10 dark:bg-[#1363C6]/20 flex items-center justify-center"> 2981 <svg class="w-5 h-5 text-[#1363C6] dark:text-[#4a8dd8]" fill="currentColor"
2982 viewBox="0 0 20 20"> 2983 <path 2984 d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" /> 2985 <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" /> 2986 </svg> 2987 </div> 2988 <div> 2989 <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">Email</h4> 2990 <a href="mailto:[email protected]" 2991 class="text-sm text-[#1363C6] dark:text-[#4a8dd8] hover:underline">[email protected]</a> 2992 </div> 2993 </div> 2994 <div class="flex items-start gap-3"> 2995 <div 2996 class="flex-shrink-0 w-10 h-10 rounded-lg bg-[#1363C6]/10 dark:bg-[#1363C6]/20 flex items-center justify-center"> 2997 <svg class="w-5 h-5 text-[#1363C6] dark:text-[#4a8dd8]" fill="currentColor"
2998 viewBox="0 0 20 20"> 2999 <path fill-rule="evenodd" 3000 d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" 3001 clip-rule="evenodd" /> 3002 </svg> 3003 </div> 3004 <div> 3005 <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">Working 3006 Hours</h4> 3007 <p 3008 class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed whitespace-pre-line"> 3009 Sun-Fri : 10 AM - 5 PM</p> 3010 </div> 3011 </div> 3012 </div> 3013 </div> 3014 <div 3015 class="lg:col-span-2"> 3016 <div class="relative rounded-2xl overflow-hidden shadow-xl border border-gray-200 dark:border-gray-800" 3017 style="height: 350px;"> 3018 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3515.8687525292394!2d83.97956807407536!3d28.21129990308709!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39959500615045af%3A0x75e71820fba719d5!2sSamarth%20Technical%20Research%20and%20Innovations%20Pvt.%20Ltd.%20(SATRI)!5e0!3m2!1sne!2snp!4v1771831366905!5m2!1sne!2snp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> 3019 </div> 3020 </div> 3021 </div> 3022 </div> 3023 </section> 3024 3025<style> 3026 #map-section-6abf0c0296b86 iframe { 3027 width: 100%; 3028 height: 100%; 3029 border: 0; 3030 display: block; 3031 } 3032</style> 3033 </main> 3034 3035 3036 <footer class="w-full mt-auto"> 3037 <footer class="relative bg-gradient-to-br from-gray-950 via-[#0A1628] to-gray-900 text-gray-300 overflow-hidden"> 3038 3039 3040 <div class="absolute inset-0 overflow-hidden pointer-events-none opacity-30"> 3041 <div class="absolute top-0 left-1/4 w-96 h-96 bg-[#1A66C5]/20 rounded-full filter blur-3xl animate-pulse"></div> 3042 <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-[#2E7FDB]/20 rounded-full filter blur-3xl animate-pulse" 3043 style="animation-delay: 2s;"></div> 3044 3045 3046 <div 3047 class="absolute inset-0 bg-[linear-gradient(rgba(26,102,197,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(26,102,197,0.03)_1px,transparent_1px)] bg-[size:64px_64px]"> 3048 </div> 3049 </div> 3050 3051 3052 <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-[#1A66C5] to-transparent"></div> 3053 3054 3055 <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-8"> 3056 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12 mb-12"> 3057 3058 3059 <div class="lg:col-span-1 space-y-6"> 3060 <div class="space-y-4"> 3061 3062 <div class="items-center"> 3063 <span class="text-white font-bold text-xl"> 3064 SATRI 3065 </span> 3066 </div> 3067 3068 <p class="text-gray-400 text-sm leading-relaxed max-w-xs"> 3069 From Vision To Global Domination 3070 </p> 3071 </div> 3072 3073 3074 <div> 3075 <p class="text-white font-medium text-sm mb-3">Follow Us</p> 3076 <div class="flex flex-wrap gap-2"> 3077 <a href="https://www.facebook.com/satritech" target="_blank" rel="noopener noreferrer" 3078 class="group relative w-10 h-10 bg-white/5 hover:bg-gradient-to-br hover:from-[#1A66C5] hover:to-[#2E7FDB] rounded-lg flex items-center justify-center transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-[#1A66C5]/30" 3079 aria-label="Facebook"> 3080 <svg class="w-4 h-4 text-gray-400 group-hover:text-white transition-colors" 3081 fill="currentColor" viewBox="0 0 24 24"> 3082 <path 3083 d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /> 3084 </svg> 3085 </a> 3086 3087 <a href="https://x.com/satritech" target="_blank" rel="noopener noreferrer" 3088 class="group relative w-10 h-10 bg-white/5 hover:bg-gradient-to-br hover:from-[#1A66C5] hover:to-[#2E7FDB] rounded-lg flex items-center justify-center transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-[#1A66C5]/30" 3089 aria-label="Twitter"> 3090 <svg class="w-4 h-4 text-gray-400 group-hover:text-white transition-colors" 3091 fill="currentColor" viewBox="0 0 24 24"> 3092 <path 3093 d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" /> 3094 </svg> 3095 </a> 3096 3097 <a href="https://www.instagram.com/satritech" target="_blank" rel="noopener noreferrer" 3098 class="group relative w-10 h-10 bg-white/5 hover:bg-gradient-to-br hover:from-[#1A66C5] hover:to-[#2E7FDB] rounded-lg flex items-center justify-center transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-[#1A66C5]/30" 3099 aria-label="LinkedIn"> 3100 <svg class="w-4 h-4 text-gray-400 group-hover:text-white transition-colors" 3101 fill="currentColor" viewBox="0 0 24 24"> 3102 <path 3103 d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /> 3104 </svg> 3105 </a> 3106 3107 <a href="https://www.instagram.com/satritech" target="_blank" rel="noopener noreferrer" 3108 class="group relative w-10 h-10 bg-white/5 hover:bg-gradient-to-br hover:from-[#1A66C5] hover:to-[#2E7FDB] rounded-lg flex items-center justify-center transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-[#1A66C5]/30" 3109 aria-label="Instagram"> 3110 <svg class="w-4 h-4 text-gray-400 group-hover:text-white transition-colors" 3111 fill="currentColor" viewBox="0 0 24 24"> 3112 <path 3113 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
31130-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" /> 3114 </svg> 3115 </a> 3116 3117 <a href="https://www.youtube.com/@satritech" target="_blank" rel="noopener noreferrer" 3118 class="group relative w-10 h-10 bg-white/5 hover:bg-gradient-to-br hover:from-[#1A66C5] hover:to-[#2E7FDB] rounded-lg flex items-center justify-center transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-[#1A66C5]/30" 3119 aria-label="YouTube"> 3120 <svg class="w-4 h-4 text-gray-400 group-hover:text-white transition-colors" 3121 fill="currentColor" viewBox="0 0 24 24"> 3122 <path 3123 d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" /> 3124 </svg> 3125 </a> 3126 </div> 3127 </div> 3128 </div> 3129 3130 3131 <div> 3132 <h3 class="text-white font-semibold text-base mb-5 flex items-center"> 3133 <span class="relative"> 3134 Quick Links 3135 <span 3136 class="absolute -bottom-1.5 left-0 w-8 h-0.5 bg-gradient-to-r from-[#1A66C5] to-[#2E7FDB] rounded-full"></span> 3137 </span> 3138 </h3> 3139 <ul class="space-y-2.5"> 3140 <li> 3141 <a href="https://satritech.com" 3142 class="group inline-flex items-center text-gray-400 hover:text-white transition-all duration-300 text-sm"> 3143 <svg class="w-1.5 h-1.5 mr-2.5 opacity-50 group-hover:opacity-100 transition-opacity" 3144 fill="currentColor" viewBox="0 0 8 8"> 3145 <circle cx="4" cy="4" r="3" /> 3146 </svg> 3147 <span class="group-hover:translate-x-1 transition-transform duration-300">Home</span> 3148 </a> 3149 </li> 3150 <li> 3151 <a href="https://satritech.com/admin/courses" 3152 class="group inline-flex items-center text-gray-400 hover:text-white transition-all duration-300 text-sm"> 3153 <svg class="w-1.5 h-1.5 mr-2.5 opacity-50 group-hover:opacity-100 transition-opacity" 3154 fill="currentColor" viewBox="0 0 8 8"> 3155 <circle cx="4" cy="4" r="3" /> 3156 </svg> 3157 <span class="group-hover:translate-x-1 transition-transform duration-300">Courses</span> 3158 </a> 3159 </li> 3160 <li> 3161 <a href="https://satritech.com/certificate-verification" 3162 class="group inline-flex items-center text-gray-400 hover:text-white transition-all duration-300 text-sm"> 3163 <svg class="w-1.5 h-1.5 mr-2.5 opacity-50 group-hover:opacity-100 transition-opacity" 3164 fill="currentColor" viewBox="0 0 8 8"> 3165 <circle cx="4" cy="4" r="3" /> 3166 </svg>
3167 <span class="group-hover:translate-x-1 transition-transform duration-300">Certificate Verification</span> 3168 </a> 3169 </li> 3170 <li> 3171 <a href="https://satritech.com/faqs" 3172 class="group inline-flex items-center text-gray-400 hover:text-white transition-all duration-300 text-sm"> 3173 <svg class="w-1.5 h-1.5 mr-2.5 opacity-50 group-hover:opacity-100 transition-opacity" 3174 fill="currentColor" viewBox="0 0 8 8"> 3175 <circle cx="4" cy="4" r="3" /> 3176 </svg> 3177 <span class="group-hover:translate-x-1 transition-transform duration-300">FAQs</span> 3178 </a> 3179 </li> 3180 <li> 3181 <a href="https://satritech.com/gallery" 3182 class="group inline-flex items-center text-gray-400 hover:text-white transition-all duration-300 text-sm"> 3183 <svg class="w-1.5 h-1.5 mr-2.5 opacity-50 group-hover:opacity-100 transition-opacity" 3184 fill="currentColor" viewBox="0 0 8 8"> 3185 <circle cx="4" cy="4" r="3" /> 3186 </svg> 3187 <span class="group-hover:translate-x-1 transition-transform duration-300">Gallery</span> 3188 </a> 3189 </li> 3190 <li> 3191 <a href="https://satritech.com/contact-us" 3192 class="group inline-flex items-center text-gray-400 hover:text-white transition-all duration-300 text-sm"> 3193 <svg class="w-1.5 h-1.5 mr-2.5 opacity-50 group-hover:opacity-100 transition-opacity" 3194 fill="currentColor" viewBox="0 0 8 8"> 3195 <circle cx="4" cy="4" r="3" /> 3196 </svg> 3197 <span class="group-hover:translate-x-1 transition-transform duration-300">Contact Us</span> 3198 </a> 3199 </li> 3200 <li> 3201 <a href="https://satritech.com/about-us" 3202 class="group inline-flex items-center text-gray-400 hover:text-white transition-all duration-300 text-sm"> 3203 <svg class="w-1.5 h-1.5 mr-2.5 opacity-50 group-hover:opacity-100 transition-opacity" 3204 fill="currentColor" viewBox="0 0 8 8"> 3205 <circle cx="4" cy="4" r="3" /> 3206 </svg> 3207 <span class="group-hover:translate-x-1 transition-transform duration-300">About Us</span> 3208 </a> 3209 </li> 3210 </ul> 3211 </div> 3212 3213 3214 <div x-data="{ open: false }"> 3215 <h3 class="text-white font-semibold text-base mb-5 flex items-center"> 3216 <span class="relative"> 3217 Resources 3218 <span 3219 class="absolute -bottom-1.5 left-0 w-8 h-0.5 bg-gradient-to-r from-[#1A66C5] to-[#2E7FDB] rounded-full"></span> 3220 </span> 3221 </h3> 3222 <button @click="open = !open" 3223 class="group inline-flex items-center text-gray-400 hover:text-white transition-all duration-300 text-sm cursor-pointer"> 3224 <svg class="w-1.5 h-1.5 mr-2.5 opacity-50 group-hover:opacity-100 transition-opacity" 3225 fill="currentColor" viewBox="0 0 8 8"> 3226 <circle cx="4" cy="4" r="3" /> 3227 </svg> 3228 <span class="group-hover:translate-x-1 transition-transform duration-300">LLM Files</span> 3229 <svg :class="{ 'rotate-180': open }" class="w-4 h-4 ml-1.5 transition-transform duration-300" fill="none" 3230 stroke="currentColor" viewBox="0 0 24 24"> 3231 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> 3232 </svg> 3233 </button> 3234 <div x-show="open" x-collapse x-cloak 3235 class="mt-2.5 pl-4 border-l border-white/10 space-y-2.5"> 3236 <a href="https://satritech.com/llms.txt" target="_blank" rel="noopener noreferrer" 3237 class="group flex items-center text-gray-400 hover:text-white transition-all duration-300 text-sm"> 3238 <svg class="w-1.5 h-1.5 mr-2.5 opacity-50 group-hover:opacity-100 transition-opacity" 3239 fill="currentColor" viewBox="0 0 8 8"> 3240 <circle cx="4" cy="4" r="3" /> 3241 </svg>
3242 <span class="group-hover:translate-x-1 transition-transform duration-300">llms.txt (Concise)</span> 3243 </a> 3244 <a href="https://satritech.com/llms-full.txt" target="_blank" rel="noopener noreferrer" 3245 class="group flex items-center text-gray-400 hover:text-white transition-all duration-300 text-sm"> 3246 <svg class="w-1.5 h-1.5 mr-2.5 opacity-50 group-hover:opacity-100 transition-opacity" 3247 fill="currentColor" viewBox="0 0 8 8"> 3248 <circle cx="4" cy="4" r="3" /> 3249 </svg> 3250 <span class="group-hover:translate-x-1 transition-transform duration-300">llms-full.txt (Full)</span> 3251 </a> 3252 </div> 3253 </div> 3254 3255 3256 <div> 3257 <h3 class="text-white font-semibold text-base mb-5 flex items-center"> 3258 <span class="relative"> 3259 Get In Touch 3260 <span 3261 class="absolute -bottom-1.5 left-0 w-8 h-0.5 bg-gradient-to-r from-[#1A66C5] to-[#2E7FDB] rounded-full"></span> 3262 </span> 3263 </h3> 3264 <ul class="space-y-3.5"> 3265 <li class="group flex items-start"> 3266 <div 3267 class="flex-shrink-0 w-9 h-9 bg-white/5 rounded-lg flex items-center justify-center mr-3 group-hover:bg-gradient-to-br group-hover:from-[#1A66C5] group-hover:to-[#2E7FDB] transition-all duration-300"> 3268 <svg class="w-4 h-4 text-[#2E7FDB] group-hover:text-white transition-colors" 3269 fill="none" stroke="currentColor" viewBox="0 0 24 24"> 3270 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 3271 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" /> 3272 </svg> 3273 </div> 3274 <a href="mailto:[email protected]" 3275 class="text-gray-400 hover:text-white transition-colors duration-300 text-sm break-all mt-1.5"> 3276 [email protected] 3277 </a> 3278 </li> 3279 3280 <li class="group flex items-start"> 3281 <div 3282 class="flex-shrink-0 w-9 h-9 bg-white/5 rounded-lg flex items-center justify-center mr-3 group-hover:bg-gradient-to-br group-hover:from-[#1A66C5] group-hover:to-[#2E7FDB] transition-all duration-300"> 3283 <svg class="w-4 h-4 text-[#2E7FDB] group-hover:text-white transition-colors" 3284 fill="none" stroke="currentColor" viewBox="0 0 24 24"> 3285 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 3286 d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /> 3287 </svg> 3288 </div> 3289 <a href="tel:+977 9764526660 /970-7722844" 3290 class="text-gray-400 hover:text-white transition-colors duration-300 text-sm mt-1.5"> 3291 +977 9764526660 /970-7722844 3292 </a> 3293 </li> 3294 3295 <li class="group flex items-start"> 3296 <div 3297 class="flex-shrink-0 w-9 h-9 bg-white/5 rounded-lg flex items-center justify-center mr-3 group-hover:bg-gradient-to-br group-hover:from-[#1A66C5] group-hover:to-[#2E7FDB] transition-all duration-300"> 3298 <svg class="w-4 h-4 text-[#2E7FDB] group-hover:text-white transition-colors" 3299 fill="none" stroke="currentColor" viewBox="0 0 24 24"> 3300 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 3301 d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> 3302 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 3303 d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /> 3304 </svg> 3305 </div>
3306 <span class="text-gray-400 text-sm leading-relaxed mt-1.5"> 3307 Pokhara-8, Srijana Chowk, Kaski, Nepal 3308 </span> 3309 </li> 3310 </ul> 3311 </div> 3312 </div> 3313 3314 3315 <div class="relative my-4"> 3316 <div class="absolute inset-0 flex items-center"> 3317 <div class="w-full border-t border-white/10"></div> 3318 </div> 3319 </div> 3320 3321 3322 <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 pt-6"> 3323 <div class="text-center md:text-left"> 3324 <p class="text-gray-400 text-sm"> 3325 © 2026 3326 <span 3327 class="text-white font-medium bg-gradient-to-r from-[#1A66C5] to-[#2E7FDB] bg-clip-text text-transparent"> 3328 SATRI 3329 </span> 3330 . All rights reserved. 3331 </p> 3332 </div> 3333 3334 <div class="flex flex-wrap justify-center md:justify-end gap-x-5 gap-y-2"> 3335 <a href="https://satritech.com/privacy-policy" 3336 class="text-gray-400 hover:text-white transition-colors duration-300 text-sm relative group"> 3337 <span>Privacy Policy</span> 3338 <span 3339 class="absolute bottom-0 left-0 w-0 h-px bg-gradient-to-r from-[#1A66C5] to-[#2E7FDB] group-hover:w-full transition-all duration-300"></span> 3340 </a> 3341 <a href="https://satritech.com/terms-of-service" 3342 class="text-gray-400 hover:text-white transition-colors duration-300 text-sm relative group"> 3343 <span>Terms of Service</span> 3344 <span 3345 class="absolute bottom-0 left-0 w-0 h-px bg-gradient-to-r from-[#1A66C5] to-[#2E7FDB] group-hover:w-full transition-all duration-300"></span> 3346 </a> 3347 <a href="https://satritech.com/cookie-policy" 3348 class="text-gray-400 hover:text-white transition-colors duration-300 text-sm relative group"> 3349 <span>Cookie Policy</span> 3350 <span 3351 class="absolute bottom-0 left-0 w-0 h-px bg-gradient-to-r from-[#1A66C5] to-[#2E7FDB] group-hover:w-full transition-all duration-300"></span> 3352 </a> 3353 </div> 3354 </div> 3355 </div> 3356</footer> 3357 </footer> 3358 </div> 3359 3360 3361 <button id="back-to-top" 3362 class="fixed bottom-8 right-8 z-40 p-2 bg-gradient-to-r from-blue-600 to-blue-400 text-white rounded-2xl shadow-lg shadow-blue-600/30 opacity-0 invisible transition-all duration-300 hover:scale-110 hover:shadow-xl hover:shadow-blue-600/40 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 group" 3363 aria-label="Back to top"> 3364 <svg class="w-4 h-4 transform group-hover:-translate-y-1 transition-transform" fill="none" 3365 stroke="currentColor" viewBox="0 0 24 24"> 3366 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 10l7-7m0 0l7 7m-7-7v18" /> 3367 </svg> 3368 </button> 3369 3370 3371 <link rel="preload" as="style" href="https://satritech.com/build/assets/app-CpXwwO1r.css" /><link rel="modulepreload" as="script" href="https://satritech.com/build/assets/app-BYvGwQu1.js" /><link rel="stylesheet" href="https://satritech.com/build/assets/app-CpXwwO1r.css" />
3371<script type="module" src="https://satritech.com/build/assets/app-BYvGwQu1.js"></script>
3371
3371<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
3371 3372
3372<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
3372 3373
3373<script> 3374 document.addEventListener('DOMContentLoaded', function() { 3375 gsap.registerPlugin(ScrollTrigger); 3376 3377 const sectionId = '#about-section-6abf0c02838d9'; 3378 3379 // Floating background blur animations 3380 gsap.to(`${sectionId} .about-bg-blur-1`, { 3381 y: 40, 3382 x: -30, 3383 duration: 7, 3384 repeat: -1, 3385 yoyo: true, 3386 ease: 'sine.inOut' 3387 }); 3388 3389 gsap.to(`${sectionId} .about-bg-blur-2`, { 3390 y: -40, 3391 x: 30, 3392 duration: 9, 3393 repeat: -1, 3394 yoyo: true, 3395 ease: 'sine.inOut' 3396 }); 3397 3398 // Subtitle slide from left 3399 gsap.fromTo(`${sectionId} .about-subtitle`, { 3400 opacity: 0, 3401 x: -60 3402 }, { 3403 opacity: 1, 3404 x: 0, 3405 duration: 1, 3406 ease: 'power3.out', 3407 scrollTrigger: { 3408 trigger: `${sectionId} .about-subtitle`, 3409 start: 'top 85%', 3410 toggleActions: 'play none none none' 3411 } 3412 }); 3413 3414 // Title animation - Clean fade and slide up 3415 gsap.fromTo(`${sectionId} .about-title`, { 3416 opacity: 0, 3417 y: 50 3418 }, { 3419 opacity: 1, 3420 y: 0, 3421 duration: 1, 3422 ease: 'power3.out', 3423 scrollTrigger: { 3424 trigger: `${sectionId} .about-title`, 3425 start: 'top 85%', 3426 toggleActions: 'play none none none' 3427 } 3428 }); 3429 3430 // Content fade up 3431 gsap.fromTo(`${sectionId} .about-content`, { 3432 opacity: 0, 3433 y: 50 3434 }, { 3435 opacity: 1, 3436 y: 0, 3437 duration: 1.2, 3438 ease: 'power3.out', 3439 scrollTrigger: { 3440 trigger: `${sectionId} .about-content`, 3441 start: 'top 85%', 3442 toggleActions: 'play none none none' 3443 } 3444 }); 3445 3446 // Buttons container 3447 gsap.fromTo(`${sectionId} .about-buttons`, { 3448 opacity: 0, 3449 y: 40 3450 }, { 3451 opacity: 1, 3452 y: 0, 3453 duration: 1, 3454 ease: 'power3.out', 3455 scrollTrigger: { 3456 trigger: `${sectionId} .about-buttons`, 3457 start: 'top 85%', 3458 toggleActions: 'play none none none' 3459 } 3460 }); 3461 3462 // Individual button scale animations 3463 gsap.fromTo(`${sectionId} .about-btn-primary, ${sectionId} .about-btn-secondary`, { 3464 scale: 0.7, 3465 opacity: 0 3466 }, { 3467 scale: 1, 3468 opacity: 1, 3469 duration: 0.7, 3470 stagger: 0.15, 3471 ease: 'back.out(1.7)', 3472 scrollTrigger: { 3473 trigger: `${sectionId} .about-buttons`, 3474 start: 'top 85%', 3475 toggleActions: 'play none none none' 3476 } 3477 }); 3478 3479 // Image wrapper entrance 3480 gsap.fromTo(`${sectionId} .about-image-wrapper`, { 3481 opacity: 0, 3482 x: 100, 3483 scale: 0.9 3484 }, { 3485 opacity: 1, 3486 x: 0, 3487 scale: 1, 3488 duration: 1.4, 3489 ease: 'power3.out', 3490 scrollTrigger: { 3491 trigger: `${sectionId} .about-image-wrapper`, 3492 start: 'top 85%', 3493 toggleActions: 'play none none none' 3494 } 3495 }); 3496 3497 // Glow pulse effect 3498 gsap.to(`${sectionId} .about-glow`, { 3499 opacity: 0.7, 3500 scale: 1.05, 3501 duration: 3, 3502 repeat: -1, 3503 yoyo: true, 3504 ease: 'sine.inOut' 3505 }); 3506 3507 // Button hover effects 3508 document.querySelectorAll(`${sectionId} .about-btn-primary`).forEach(btn => { 3509 const arrow = btn.querySelector('.btn-arrow'); 3510 3511 btn.addEventListener('mouseenter', () => { 3512 gsap.to(btn, { 3513 y: -4, 3514 scale: 1.05, 3515 duration: 0.3, 3516 ease: 'power2.out' 3517 }); 3518 gsap.to(arrow, { 3519 x: 6, 3520 duration: 0.3, 3521 ease: 'power2.out' 3522 }); 3523 }); 3524 3525 btn.addEventListener('mouseleave', () => { 3526 gsap.to(btn, { 3527 y: 0, 3528 scale: 1, 3529 duration: 0.3, 3530 ease: 'power2.out' 3531 }); 3532 gsap.to(arrow, { 3533 x: 0, 3534 duration: 0.3, 3535 ease: 'power2.out' 3536 }); 3537 }); 3538 }); 3539 3540 document.querySelectorAll(`${sectionId} .about-btn-secondary`).forEach(btn => { 3541 btn.addEventListener('mouseenter', () => { 3542 gsap.to(btn, { 3543 y: -4, 3544 scale: 1.05, 3545 duration: 0.3, 3546 ease: 'power2.out' 3547 }); 3548 }); 3549 3550 btn.addEventListener('mouseleave', () => { 3551 gsap.to(btn, { 3552 y: 0, 3553 scale: 1, 3554 duration: 0.3, 3555 ease: 'power2.out' 3556 }); 3557 }); 3558 }); 3559 3560 // Image hover effect - gentle scale only 3561 const imageWrapper = document.querySelector(`${sectionId} .about-image-wrapper`); 3562 if (imageWrapper) { 3563 const image = imageWrapper.querySelector('.about-image');
3564 const overlay = imageWrapper.querySelector('.about-overlay'); 3565 3566 imageWrapper.addEventListener('mouseenter', () => { 3567 gsap.to(image, { 3568 scale: 1.05, 3569 duration: 0.7, 3570 ease: 'power2.out' 3571 }); 3572 gsap.to(overlay, { 3573 opacity: 1, 3574 background: 'linear-gradient(to bottom right, rgba(19, 99, 198, 0.03), rgba(19, 99, 198, 0.08))', 3575 duration: 0.5, 3576 ease: 'power2.out' 3577 }); 3578 }); 3579 3580 imageWrapper.addEventListener('mouseleave', () => { 3581 gsap.to(image, { 3582 scale: 1, 3583 duration: 0.7, 3584 ease: 'power2.out' 3585 }); 3586 gsap.to(overlay, { 3587 opacity: 0, 3588 duration: 0.5, 3589 ease: 'power2.out' 3590 }); 3591 }); 3592 } 3593 }); 3594 </script>
3594 3595
3595<script> 3596 document.addEventListener('DOMContentLoaded', function() { 3597 gsap.registerPlugin(ScrollTrigger); 3598 3599 const sectionId = '#about-section-6abf0c028452f'; 3600 3601 // Animate badge 3602 gsap.fromTo(`${sectionId} .about-badge`, { 3603 opacity: 0, 3604 y: -30 3605 }, { 3606 opacity: 1, 3607 y: 0, 3608 duration: 0.8, 3609 ease: 'power3.out', 3610 scrollTrigger: { 3611 trigger: `${sectionId} .about-badge`, 3612 start: 'top 85%', 3613 toggleActions: 'play none none none' 3614 } 3615 }); 3616 3617 // Animate title 3618 gsap.fromTo(`${sectionId} .about-title`, { 3619 opacity: 0, 3620 y: -30 3621 }, { 3622 opacity: 1, 3623 y: 0, 3624 duration: 0.8, 3625 delay: 0.2, 3626 ease: 'power3.out', 3627 scrollTrigger: { 3628 trigger: `${sectionId} .about-title`, 3629 start: 'top 85%', 3630 toggleActions: 'play none none none' 3631 } 3632 }); 3633 3634 // Animate description 3635 gsap.fromTo(`${sectionId} .about-description`, { 3636 opacity: 0, 3637 y: 30 3638 }, { 3639 opacity: 1, 3640 y: 0, 3641 duration: 0.8, 3642 ease: 'power3.out', 3643 scrollTrigger: { 3644 trigger: `${sectionId} .about-description`, 3645 start: 'top 85%', 3646 toggleActions: 'play none none none' 3647 } 3648 }); 3649 3650 // Animate feature items from bottom (staggered) 3651 gsap.fromTo(`${sectionId} .feature-item`, { 3652 opacity: 0, 3653 y: 60 3654 }, { 3655 opacity: 1, 3656 y: 0, 3657 duration: 0.8, 3658 stagger: 0.15, 3659 ease: 'power3.out', 3660 scrollTrigger: { 3661 trigger: `${sectionId} .feature-item`, 3662 start: 'top 90%', 3663 toggleActions: 'play none none none' 3664 } 3665 }); 3666 3667 // Animate badge inside each feature item (from bottom - NO SPIN) 3668 document.querySelectorAll(`${sectionId} .feature-item`).forEach((item, index) => { 3669 const badge = item.querySelector('.feature-badge'); 3670 3671 gsap.fromTo(badge, { 3672 opacity: 0, 3673 y: 30, 3674 scale: 0.8 3675 }, { 3676 opacity: 1, 3677 y: 0, 3678 scale: 1, 3679 duration: 0.6, 3680 delay: 0.3 + (index * 0.1), 3681 ease: 'back.out(1.7)', 3682 scrollTrigger: { 3683 trigger: item, 3684 start: 'top 85%', 3685 toggleActions: 'play none none none' 3686 } 3687 }); 3688 }); 3689 3690 // Animate stats container 3691 gsap.fromTo(`${sectionId} .stats-container`, { 3692 opacity: 0, 3693 y: 40 3694 }, { 3695 opacity: 1, 3696 y: 0, 3697 duration: 0.8, 3698 ease: 'power3.out', 3699 scrollTrigger: { 3700 trigger: `${sectionId} .stats-container`, 3701 start: 'top 90%', 3702 toggleActions: 'play none none none' 3703 } 3704 }); 3705 3706 // Animate numbers counting up 3707 document.querySelectorAll(`${sectionId} .stat-number`).forEach(element => { 3708 const target = parseInt(element.getAttribute('data-target')) || 0; 3709 const suffix = element.getAttribute('data-suffix') || ''; 3710 3711 ScrollTrigger.create({ 3712 trigger: element, 3713 start: 'top 85%', 3714 once: true, 3715 onEnter: () => { 3716 gsap.to(element, { 3717 textContent: target, 3718 duration: 2, 3719 ease: 'power1.out', 3720 snap: { 3721 textContent: 1 3722 }, 3723 onUpdate: function() {
3724 const currentValue = Math.ceil(gsap.getProperty(element, 'textContent')); 3725 element.textContent = currentValue + suffix; 3726 } 3727 }); 3728 } 3729 }); 3730 }); 3731 3732 // Animate image from right with fade 3733 gsap.fromTo(`${sectionId} .about-image`, { 3734 opacity: 0, 3735 x: 60, 3736 scale: 0.9 3737 }, { 3738 opacity: 1, 3739 x: 0, 3740 scale: 1, 3741 duration: 1, 3742 ease: 'power3.out', 3743 scrollTrigger: { 3744 trigger: `${sectionId} .about-image`, 3745 start: 'top 85%', 3746 toggleActions: 'play none none none' 3747 } 3748 }); 3749 3750 // Hover effects for feature items 3751 document.querySelectorAll(`${sectionId} .feature-item`).forEach(item => { 3752 item.addEventListener('mouseenter', () => { 3753 gsap.to(item, { 3754 y: -8, 3755 duration: 0.3, 3756 ease: 'power2.out' 3757 }); 3758 }); 3759 3760 item.addEventListener('mouseleave', () => { 3761 gsap.to(item, { 3762 y: 0, 3763 duration: 0.3, 3764 ease: 'power2.out' 3765 }); 3766 }); 3767 }); 3768 3769 // Hover effects for stat cards 3770 document.querySelectorAll(`${sectionId} .stat-card`).forEach(card => { 3771 card.addEventListener('mouseenter', () => { 3772 gsap.to(card, { 3773 y: -8, 3774 duration: 0.3, 3775 ease: 'power2.out' 3776 }); 3777 }); 3778 3779 card.addEventListener('mouseleave', () => { 3780 gsap.to(card, { 3781 y: 0, 3782 duration: 0.3, 3783 ease: 'power2.out' 3784 }); 3785 }); 3786 }); 3787 }); 3788 </script>
3788 3789
3789<script> 3790 document.addEventListener('DOMContentLoaded', function() { 3791 gsap.registerPlugin(ScrollTrigger); 3792 3793 // Set initial states 3794 gsap.set( 3795 '.animate-course-title, .animate-course-content, .animate-course-subtitle, .animate-course-tabs, .animate-course-tab, .animate-course-card, .animate-course-action-btn, .animate-course-view-all, .animate-course-pagination, .animate-course-empty', { 3796 opacity: 0, 3797 y: 40 3798 }); 3799 3800 // Background animations (subtle floating) 3801 gsap.to('.animate-course-bg-1', { 3802 y: 20, 3803 x: 10, 3804 duration: 7, 3805 repeat: -1, 3806 yoyo: true, 3807 ease: 'power1.inOut' 3808 }); 3809 3810 gsap.to('.animate-course-bg-2', { 3811 y: -20, 3812 x: -10, 3813 duration: 6, 3814 repeat: -1, 3815 yoyo: true, 3816 ease: 'power1.inOut' 3817 }); 3818 3819 // Section Title 3820 gsap.to('.animate-course-title', { 3821 opacity: 1, 3822 y: 0, 3823 duration: 0.8, 3824 ease: 'power3.out', 3825 scrollTrigger: { 3826 trigger: '.animate-course-title', 3827 start: 'top 80%', 3828 toggleActions: 'play none none none' 3829 } 3830 }); 3831 3832 // Section Content 3833 gsap.to('.animate-course-content', { 3834 opacity: 1, 3835 y: 0, 3836 duration: 0.8, 3837 delay: 0.1, 3838 ease: 'power3.out', 3839 scrollTrigger: { 3840 trigger: '.animate-course-content', 3841 start: 'top 80%', 3842 toggleActions: 'play none none none' 3843 } 3844 }); 3845 3846 // Section Subtitle Badge 3847 gsap.to('.animate-course-subtitle', { 3848 opacity: 1, 3849 y: 0, 3850 duration: 0.7, 3851 delay: 0.2, 3852 ease: 'power3.out', 3853 scrollTrigger: { 3854 trigger: '.animate-course-subtitle', 3855 start: 'top 80%', 3856 toggleActions: 'play none none none' 3857 } 3858 }); 3859 3860 // Category Tabs Container 3861 gsap.to('.animate-course-tabs', { 3862 opacity: 1, 3863 y: 0, 3864 duration: 0.7, 3865 ease: 'power3.out', 3866 scrollTrigger: { 3867 trigger: '.animate-course-tabs', 3868 start: 'top 85%', 3869 toggleActions: 'play none none none' 3870 } 3871 }); 3872 3873 // Individual Tab Buttons (stagger) 3874 document.querySelectorAll('.animate-course-tab').forEach((tab, index) => { 3875 gsap.to(tab, { 3876 opacity: 1, 3877 y: 0, 3878 duration: 0.5, 3879 delay: 0.3 + (index * 0.05), 3880 ease: 'power3.out', 3881 scrollTrigger: { 3882 trigger: '.animate-course-tabs', 3883 start: 'top 85%', 3884 toggleActions: 'play none none none' 3885 } 3886 }); 3887 }); 3888 3889 // Course Cards (stagger animation) 3890 document.querySelectorAll('.animate-course-card').forEach((card, index) => { 3891 gsap.to(card, { 3892 opacity: 1, 3893 y: 0, 3894 duration: 0.7, 3895 delay: index * 0.1, 3896 ease: 'power3.out', 3897 scrollTrigger: { 3898 trigger: card, 3899 start: 'top 85%', 3900 toggleActions: 'play none none none' 3901 } 3902 }); 3903 }); 3904 3905 // Action Button (View Full Projects) 3906 gsap.to('.animate-course-action-btn', { 3907 opacity: 1, 3908 y: 0, 3909 duration: 0.7, 3910 ease: 'power3.out', 3911 scrollTrigger: { 3912 trigger: '.animate-course-action-btn', 3913 start: 'top 85%', 3914 toggleActions: 'play none none none' 3915 } 3916 }); 3917 3918 // View All Button 3919 gsap.to('.animate-course-view-all', { 3920 opacity: 1, 3921 y: 0, 3922 duration: 0.7, 3923 ease: 'power3.out', 3924 scrollTrigger: { 3925 trigger: '.animate-course-view-all', 3926 start: 'top 85%', 3927 toggleActions: 'play none none none' 3928 } 3929 }); 3930 3931 // Pagination 3932 gsap.to('.animate-course-pagination', { 3933 opacity: 1, 3934 y: 0, 3935 duration: 0.7, 3936 ease: 'power3.out', 3937 scrollTrigger: { 3938 trigger: '.animate-course-pagination', 3939 start: 'top 85%', 3940 toggleActions: 'play none none none' 3941 } 3942 }); 3943 3944 // Empty State 3945 gsap.to('.animate-course-empty', { 3946 opacity: 1, 3947 y: 0, 3948 duration: 0.8, 3949 ease: 'power3.out', 3950 scrollTrigger: { 3951 trigger: '.animate-course-empty', 3952 start: 'top 80%', 3953 toggleActions: 'play none none none' 3954 } 3955 }); 3956 }); 3957 </script>
3957 3958
3958<script> 3959 document.addEventListener('DOMContentLoaded', function() { 3960 gsap.registerPlugin(ScrollTrigger); 3961 3962 const sectionId = '#feature-section-6abf0c028ced9'; 3963 3964 // Animate subtitle - fade and slide from top 3965 gsap.fromTo(`${sectionId} .feature-subtitle`, { 3966 opacity: 0, 3967 y: -30 3968 }, { 3969 opacity: 1, 3970 y: 0, 3971 duration: 0.8, 3972 ease: 'power3.out', 3973 scrollTrigger: { 3974 trigger: `${sectionId} .feature-subtitle`, 3975 start: 'top 85%', 3976 toggleActions: 'play none none none' 3977 } 3978 }); 3979 3980 // Animate heading - fade and slide from top 3981 gsap.fromTo(`${sectionId} .feature-heading`, { 3982 opacity: 0, 3983 y: -30 3984 }, { 3985 opacity: 1, 3986 y: 0, 3987 duration: 0.8, 3988 delay: 0.2, 3989 ease: 'power3.out', 3990 scrollTrigger: { 3991 trigger: `${sectionId} .feature-heading`, 3992 start: 'top 85%', 3993 toggleActions: 'play none none none' 3994 } 3995 }); 3996 3997 // Animate content - fade and slide up 3998 gsap.fromTo(`${sectionId} .feature-content`, { 3999 opacity: 0, 4000 y: 30 4001 }, { 4002 opacity: 1, 4003 y: 0, 4004 duration: 0.8, 4005 ease: 'power3.out', 4006 scrollTrigger: { 4007 trigger: `${sectionId} .feature-content`, 4008 start: 'top 85%', 4009 toggleActions: 'play none none none' 4010 } 4011 }); 4012 4013 // Animate feature cards - stagger from bottom 4014 gsap.fromTo(`${sectionId} .feature-card`, { 4015 opacity: 0, 4016 y: 60 4017 }, { 4018 opacity: 1, 4019 y: 0, 4020 duration: 0.8, 4021 stagger: 0.15, 4022 ease: 'power3.out', 4023 scrollTrigger: { 4024 trigger: `${sectionId} .feature-card`, 4025 start: 'top 90%', 4026 toggleActions: 'play none none none' 4027 } 4028 }); 4029 4030 // Animate icon + title together from bottom (inside each card) 4031 document.querySelectorAll(`${sectionId} .feature-card`).forEach((card, index) => { 4032 const header = card.querySelector('.feature-header'); 4033 const description = card.querySelector('.feature-description'); 4034 4035 // Animate header (icon + title together) 4036 gsap.fromTo(header, { 4037 opacity: 0, 4038 y: 30 4039 }, { 4040 opacity: 1, 4041 y: 0, 4042 duration: 0.6, 4043 delay: 0.3 + (index * 0.1), 4044 ease: 'power2.out', 4045 scrollTrigger: { 4046 trigger: card, 4047 start: 'top 85%', 4048 toggleActions: 'play none none none' 4049 } 4050 }); 4051 4052 // Animate description after header 4053 if (description) { 4054 gsap.fromTo(description, { 4055 opacity: 0, 4056 y: 20 4057 }, { 4058 opacity: 1, 4059 y: 0, 4060 duration: 0.6, 4061 delay: 0.5 + (index * 0.1), 4062 ease: 'power2.out', 4063 scrollTrigger: { 4064 trigger: card, 4065 start: 'top 85%', 4066 toggleActions: 'play none none none' 4067 } 4068 }); 4069 } 4070 }); 4071 4072 // Simple hover effect - lift card up 4073 document.querySelectorAll(`${sectionId} .feature-card`).forEach(card => { 4074 card.addEventListener('mouseenter', () => { 4075 gsap.to(card, { 4076 y: -8, 4077 duration: 0.3, 4078 ease: 'power2.out' 4079 }); 4080 }); 4081 4082 card.addEventListener('mouseleave', () => { 4083 gsap.to(card, { 4084 y: 0, 4085 duration: 0.3, 4086 ease: 'power2.out' 4087 }); 4088 }); 4089 }); 4090 }); 4091 </script>
4091 4092
4092<script> 4093 (function() { 4094 const services = [{"id":1,"title":"IT & Software Development Services","slug":"it-software-development-services","short_description":"Professional software and digital solutions for businesses, individuals, and research projects, including scalable and secure application development.","description":"fa-solid fa-setting","icon":"fa-solid fa-setting","image":"services\/zTre6YWvRGyIzD94iO2Fi8mJB8BzmoAghVInY8nv.png","meta_title":null,"meta_description":null,"meta_keywords":null,"og_title":null,"og_description":null,"og_image":null,"twitter_title":null,"twitter_description":null,"twitter_image":null,"is_featured":1,"status":"published","created_at":"2026-02-07T12:26:25.000000Z","updated_at":"2026-02-07T12:27:27.000000Z"},{"id":2,"title":"Mobile & Web Application Development","slug":"mobile-web-application-development","short_description":"Mobile & Web Application Development","description":"Designing and developing modern mobile and web apps using technologies such as Flutter, React, Next.js, and backend frameworks.","icon":"fa-solid fa-mobile","image":"services\/DI1zaN3mRcygEri7nxU8GpNkL6ws0KgOydqvLjC2.png","meta_title":null,"meta_description":null,"meta_keywords":null,"og_title":null,"og_description":null,"og_image":null,"twitter_title":null,"twitter_description":null,"twitter_image":null,"is_featured":1,"status":"published","created_at":"2026-02-07T12:30:29.000000Z","updated_at":"2026-02-10T03:57:38.000000Z"},{"id":3,"title":"Digital Marketing & Online Growth Services","slug":"digital-marketing-online-growth-services","short_description":"\u2714 Social media marketing & management\r\n\u2714 Graphic content creation\r\n\u2714 Facebook & Google Ads promotion\r\n\u2714 Branding & online presence setup\r\nThese help businesses grow their digital footprint.","description":null,"icon":"fa-solid fa-setting","image":"services\/q94sR4isx002SYKnRymo5g85oaUfvP6KHghHroeX.png","meta_title":null,"meta_description":null,"meta_keywords":null,"og_title":null,"og_description":null,"og_image":null,"twitter_title":null,"twitter_description":null,"twitter_image":null,"is_featured":1,"status":"published","created_at":"2026-02-07T12:33:21.000000Z","updated_at":"2026-02-10T03:54:29.000000Z"},{"id":4,"title":"Technology Education & Training Services","slug":"technology-education-training-services","short_description":"Technology Education & Training Services","description":"Hands-on tech training covering courses such as IoT, programming, robotics, mobile app development, web development, AI, Machine Learning, and more for learners of all levels.","icon":"fa-solid fa-setting","image":"services\/Jt7w621qmyhsaonpcSwXq23nbaVkhDIIPKJsE9Pc.png","meta_title":null,"meta_description":null,"meta_keywords":null,"og_title":null,"og_description":null,"og_image":null,"twitter_title":null,"twitter_description":null,"twitter_image":null,"is_featured":1,"status":"published","created_at":"2026-02-07T12:34:28.000000Z","updated_at":"2026-02-10T03:51:21.000000Z"},{"id":5,"title":"Social Media Boosting","slug":"social-media-boosting","short_description":"Social Media Boosting is a paid promotional strategy designed to increase the visibility, reach, and engagement of your posts across platforms such as Facebook and Instagram.","description":"Social Media Boosting\r\n\r\nSocial Media Boosting is a paid promotional strategy designed to increase the visibility, reach, and engagement of your posts across platforms such as Facebook and Instagram.\r\n\r\nThrough targeted audience selection, we ensure your content reaches the right people based on location, interests, behavior, and demographics.\r\n\r\n\ud83d\udd39 What We Provide:\r\n\r\n\u2714 Targeted Audience Setup\r\n\u2714 Budget Planning & Optimization\r\n\u2714 Post & Campaign Boosting\r\n\u2714 Engagement & Reach Growth\r\n\u2714 Performance Monitoring & Reporting","icon":null,"image":"services\/9ky3baKDM8fXaacEO6wA05H2SpJ3vWXCueSd2xIU.png","meta_title":null,"meta_description":null,"meta_keywords":null,"og_title":null,"og_description":null,"og_image":null,"twitter_title":null,"twitter_description":null,"twitter_image":null,"is_featured":1,"status":"published","created_at":"2026-02-20T03:49:09.000000Z","updated_at":"2026-02-20T03:49:54.000000Z"}]; 4095 const isServicesFullPage = false;
4096 4097 document.addEventListener('DOMContentLoaded', function() { 4098 gsap.registerPlugin(ScrollTrigger); 4099 4100 const sectionId = '#services-section-6abf0c028eeb2'; 4101 4102 // Floating background blurs 4103 gsap.to(`${sectionId} .services-bg-blur-1`, { 4104 y: -30, 4105 x: 20, 4106 duration: 7, 4107 repeat: -1, 4108 yoyo: true, 4109 ease: 'sine.inOut' 4110 }); 4111 4112 gsap.to(`${sectionId} .services-bg-blur-2`, { 4113 y: 30, 4114 x: -20, 4115 duration: 9, 4116 repeat: -1, 4117 yoyo: true, 4118 ease: 'sine.inOut' 4119 }); 4120 4121 // Badge animation 4122 gsap.fromTo(`${sectionId} .services-badge`, { 4123 opacity: 0, 4124 y: -30, 4125 scale: 0.8 4126 }, { 4127 opacity: 1, 4128 y: 0, 4129 scale: 1, 4130 duration: 0.8, 4131 ease: 'back.out(1.5)', 4132 scrollTrigger: { 4133 trigger: `${sectionId} .services-badge`, 4134 start: 'top 85%', 4135 toggleActions: 'play none none none' 4136 } 4137 }); 4138 4139 // Title animation 4140 gsap.fromTo(`${sectionId} .services-title`, { 4141 opacity: 0, 4142 y: 50 4143 }, { 4144 opacity: 1, 4145 y: 0, 4146 duration: 1, 4147 ease: 'power3.out', 4148 scrollTrigger: { 4149 trigger: `${sectionId} .services-title`, 4150 start: 'top 85%', 4151 toggleActions: 'play none none none' 4152 } 4153 }); 4154 4155 // Content animation 4156 gsap.fromTo(`${sectionId} .services-content`, { 4157 opacity: 0, 4158 y: 40 4159 }, { 4160 opacity: 1, 4161 y: 0, 4162 duration: 1, 4163 ease: 'power3.out', 4164 scrollTrigger: { 4165 trigger: `${sectionId} .services-content`, 4166 start: 'top 85%', 4167 toggleActions: 'play none none none' 4168 } 4169 }); 4170 4171 if (isServicesFullPage) { 4172 // Grid animation for full page - staggered fade-in from bottom 4173 gsap.fromTo(`${sectionId} .service-card`, { 4174 opacity: 0, 4175 y: 80, 4176 scale: 0.9 4177 }, { 4178 opacity: 1, 4179 y: 0, 4180 scale: 1, 4181 duration: 0.7, 4182 stagger: { 4183 amount: 0.6, 4184 from: "start", 4185 ease: "power2.out" 4186 }, 4187 ease: 'power3.out', 4188 scrollTrigger: { 4189 trigger: `${sectionId} .services-grid`, 4190 start: 'top 80%', 4191 toggleActions: 'play none none none' 4192 } 4193 }); 4194 } else { 4195 // Paged slider for homepage 4196 const sliderWrapper = document.querySelector(`${sectionId} .services-slider-wrapper`); 4197 const sliderContainer = document.querySelector(`${sectionId} .services-slider-container`); 4198 const slider = document.querySelector(`${sectionId} .services-slider`); 4199 const slides = document.querySelectorAll(`${sectionId} .service-slide`); 4200 const indicators = document.querySelectorAll(`${sectionId} .services-indicator`); 4201 4202 if (slider && sliderWrapper && slides.length > 0) { 4203 let currentPage = 0; 4204 let autoplayInterval = null; 4205 let isDragging = false;
4206 let startX = 0; 4207 let currentTranslate = 0; 4208 let dragStartTime = 0; 4209 4210 // Responsive slides per view 4211 function getSlidesPerView() { 4212 if (window.innerWidth < 768) return 1; 4213 if (window.innerWidth < 1024) return 2; 4214 return 3; 4215 } 4216 4217 // Calculate and set card widths based on container 4218 function updateCardWidths() { 4219 const containerWidth = sliderContainer.offsetWidth; 4220 const gap = 24; // gap-6 = 24px 4221 const perView = getSlidesPerView(); 4222 const cardWidth = (containerWidth - (gap * (perView - 1))) / perView; 4223 slides.forEach(slide => { 4224 slide.style.width = cardWidth + 'px'; 4225 }); 4226 } 4227 4228 function getTotalPages() { 4229 return Math.ceil(slides.length / getSlidesPerView()); 4230 } 4231 4232 // Show slider wrapper 4233 gsap.fromTo(sliderWrapper, { 4234 opacity: 0, 4235 y: 50 4236 }, { 4237 opacity: 1, 4238 y: 0, 4239 duration: 1, 4240 ease: 'power3.out', 4241 scrollTrigger: { 4242 trigger: sliderWrapper, 4243 start: 'top 85%', 4244 toggleActions: 'play none none none' 4245 } 4246 }); 4247 4248 4249 4250 // Animate indicators 4251 gsap.to(indicators, { 4252 opacity: 1, 4253 duration: 0.5, 4254 stagger: 0.05, 4255 delay: 0.7, 4256 ease: 'power2.out' 4257 }); 4258 4259 // Update active indicator 4260 function updateIndicators() { 4261 indicators.forEach((indicator, index) => { 4262 if (index === currentPage) { 4263 indicator.style.width = '48px'; 4264 indicator.style.backgroundColor = '#1363C6'; 4265 } else { 4266 indicator.style.width = '32px'; 4267 indicator.style.backgroundColor = ''; 4268 } 4269 }); 4270 } 4271 4272 // Go to specific page 4273 function goToPage(pageIndex) { 4274 const totalPages = getTotalPages(); 4275 currentPage = Math.max(0, Math.min(pageIndex, totalPages - 1)); 4276 4277 const containerWidth = sliderContainer.offsetWidth; 4278 const gap = 24; 4279 const perView = getSlidesPerView(); 4280 const cardWidth = (containerWidth - (gap * (perView - 1))) / perView; 4281 const offset = -(currentPage * perView * (cardWidth + gap)); 4282 4283 gsap.to(slider, { 4284 x: offset, 4285 duration: 0.6, 4286 ease: 'power2.out' 4287 }); 4288 4289 currentTranslate = offset; 4290 updateIndicators(); 4291 } 4292 4293 // Next / Previous 4294 function nextPage() { 4295 const totalPages = getTotalPages(); 4296 currentPage = currentPage < totalPages - 1 ? currentPage + 1 : 0; 4297 goToPage(currentPage); 4298 } 4299 4300 function prevPage() { 4301 const totalPages = getTotalPages(); 4302 currentPage = currentPage > 0 ? currentPage - 1 : totalPages - 1; 4303 goToPage(currentPage); 4304 } 4305 4306 // Autoplay 4307 function startAutoplay() { 4308 stopAutoplay(); 4309 autoplayInterval = setInterval(nextPage, 4000); 4310 } 4311 4312 function stopAutoplay() { 4313 if (autoplayInterval) { 4314 clearInterval(autoplayInterval); 4315 autoplayInterval = null; 4316 } 4317 } 4318 4319 // Drag handlers 4320 function handleDragStart(e) { 4321 isDragging = true; 4322 dragStartTime = Date.now(); 4323 startX = e.type.includes('mouse') ? e.pageX : e.touches[0].clientX; 4324 currentTranslate = gsap.getProperty(slider, 'x') || 0; 4325 stopAutoplay(); 4326 sliderContainer.style.cursor = 'grabbing'; 4327 } 4328 4329 function handleDragMove(e) { 4330 if (!isDragging) return; 4331 const x = e.type.includes('mouse') ? e.pageX : e.touches[0].clientX; 4332 const diff = x - startX; 4333 gsap.set(slider, { x: currentTranslate + diff }); 4334 } 4335 4336 function handleDragEnd(e) { 4337 if (!isDragging) return; 4338 isDragging = false;
4339 sliderContainer.style.cursor = 'grab'; 4340 4341 const x = e.type.includes('mouse') ? e.pageX : (e.changedTouches ? e.changedTouches[0].clientX : startX); 4342 const diff = x - startX; 4343 4344 if (Math.abs(diff) > 10) { 4345 slides.forEach(s => s.style.pointerEvents = 'none'); 4346 setTimeout(() => slides.forEach(s => s.style.pointerEvents = 'auto'), 100); 4347 } 4348 4349 if (Math.abs(diff) > 50) { 4350 diff > 0 ? prevPage() : nextPage(); 4351 } else { 4352 goToPage(currentPage); 4353 } 4354 4355 setTimeout(startAutoplay, 5000); 4356 } 4357 4358 // Mouse events 4359 sliderContainer.addEventListener('mousedown', handleDragStart); 4360 sliderContainer.addEventListener('mousemove', handleDragMove); 4361 sliderContainer.addEventListener('mouseup', handleDragEnd); 4362 sliderContainer.addEventListener('mouseleave', (e) => { if (isDragging) handleDragEnd(e); }); 4363 4364 // Touch events 4365 sliderContainer.addEventListener('touchstart', handleDragStart, { passive: true }); 4366 sliderContainer.addEventListener('touchmove', handleDragMove, { passive: true }); 4367 sliderContainer.addEventListener('touchend', handleDragEnd); 4368 4369 4370 4371 // Indicator clicks 4372 indicators.forEach((indicator, index) => { 4373 indicator.addEventListener('click', () => { 4374 goToPage(index); 4375 stopAutoplay(); 4376 setTimeout(startAutoplay, 5000); 4377 }); 4378 }); 4379 4380 // Pause on hover 4381 sliderWrapper.addEventListener('mouseenter', stopAutoplay); 4382 sliderWrapper.addEventListener('mouseleave', startAutoplay); 4383 4384 // Handle resize 4385 let resizeTimer; 4386 window.addEventListener('resize', () => { 4387 clearTimeout(resizeTimer); 4388 resizeTimer = setTimeout(() => { 4389 updateCardWidths(); 4390 goToPage(currentPage); 4391 }, 150); 4392 }); 4393 4394 // Initialize 4395 updateCardWidths(); 4396 updateIndicators(); 4397 goToPage(0); 4398 setTimeout(startAutoplay, 1000); 4399 } 4400 } 4401 4402 gsap.fromTo(`${sectionId} .services-view-btn`, { 4403 opacity: 0, 4404 y: 40, 4405 scale: 0.9 4406 }, { 4407 opacity: 1, 4408 y: 0, 4409 scale: 1, 4410 duration: 0.8, 4411 ease: 'back.out(1.5)', 4412 scrollTrigger: { 4413 trigger: `${sectionId} .services-view-btn`, 4414 start: 'top 90%', 4415 toggleActions: 'play none none none' 4416 } 4417 }); 4418 4419 // Empty state animation 4420 gsap.fromTo(`${sectionId} .empty-state`, { 4421 opacity: 0, 4422 y: 50 4423 }, { 4424 opacity: 1, 4425 y: 0, 4426 duration: 1, 4427 ease: 'power3.out', 4428 scrollTrigger: { 4429 trigger: `${sectionId} .empty-state`, 4430 start: 'top 85%', 4431 toggleActions: 'play none none none' 4432 } 4433 }); 4434 4435 // Card hover effects - image/icon animation 4436 document.querySelectorAll(`${sectionId} .service-card, ${sectionId} .service-slide`) 4437 .forEach(card => { 4438 const image = card.querySelector('.service-image img'); 4439 const icon = card.querySelector('i, svg'); 4440 4441 card.addEventListener('mouseenter', () => { 4442 if (image) { 4443 gsap.to(image, { 4444 scale: 1.15, 4445 rotation: 3, 4446 duration: 0.4, 4447 ease: 'back.out(1.7)' 4448 }); 4449 } else if (icon) { 4450 gsap.to(icon, { 4451 scale: 1.2, 4452 rotation: 8, 4453 duration: 0.4, 4454 ease: 'back.out(1.7)' 4455 }); 4456 } 4457 }); 4458 4459 card.addEventListener('mouseleave', () => { 4460 if (image) { 4461 gsap.to(image, { 4462 scale: 1, 4463 rotation: 0, 4464 duration: 0.4, 4465 ease: 'power2.out' 4466 }); 4467 } else if (icon) { 4468 gsap.to(icon, { 4469 scale: 1, 4470 rotation: 0, 4471 duration: 0.4, 4472 ease: 'power2.out' 4473 }); 4474 } 4475 }); 4476 }); 4477 4478 // View All button hover effect
4479 const viewBtn = document.querySelector(`${sectionId} .services-view-btn a`); 4480 if (viewBtn) { 4481 const arrow = viewBtn.querySelector('.view-arrow'); 4482 4483 viewBtn.addEventListener('mouseenter', () => { 4484 gsap.to(viewBtn, { 4485 scale: 1.05, 4486 duration: 0.3, 4487 ease: 'power2.out' 4488 }); 4489 gsap.to(arrow, { 4490 x: 5, 4491 duration: 0.3, 4492 ease: 'power2.out' 4493 }); 4494 }); 4495 4496 viewBtn.addEventListener('mouseleave', () => { 4497 gsap.to(viewBtn, { 4498 scale: 1, 4499 duration: 0.3, 4500 ease: 'power2.out' 4501 }); 4502 gsap.to(arrow, { 4503 x: 0, 4504 duration: 0.3, 4505 ease: 'power2.out' 4506 }); 4507 }); 4508 } 4509 }); 4510 })(); 4511 </script>
4511 4512
4512<script> 4513 document.addEventListener('DOMContentLoaded', function() { 4514 gsap.registerPlugin(ScrollTrigger); 4515 4516 const sectionId = '#projects-section-6abf0c0292ade'; 4517 4518 // Floating background blurs 4519 gsap.to(`${sectionId} .projects-bg-blur-1`, { 4520 y: 30, 4521 x: -20, 4522 duration: 6, 4523 repeat: -1, 4524 yoyo: true, 4525 ease: 'sine.inOut' 4526 }); 4527 4528 gsap.to(`${sectionId} .projects-bg-blur-2`, { 4529 y: -30, 4530 x: 20, 4531 duration: 8, 4532 repeat: -1, 4533 yoyo: true, 4534 ease: 'sine.inOut' 4535 }); 4536 4537 // Badge animation 4538 gsap.fromTo(`${sectionId} .projects-badge`, { 4539 opacity: 0, 4540 y: -30, 4541 scale: 0.8 4542 }, { 4543 opacity: 1, 4544 y: 0, 4545 scale: 1, 4546 duration: 0.8, 4547 ease: 'back.out(1.5)', 4548 scrollTrigger: { 4549 trigger: `${sectionId} .projects-badge`, 4550 start: 'top 85%', 4551 toggleActions: 'play none none none' 4552 } 4553 }); 4554 4555 // Title animation 4556 gsap.fromTo(`${sectionId} .projects-title`, { 4557 opacity: 0, 4558 y: 50 4559 }, { 4560 opacity: 1, 4561 y: 0, 4562 duration: 1, 4563 ease: 'power3.out', 4564 scrollTrigger: { 4565 trigger: `${sectionId} .projects-title`, 4566 start: 'top 85%', 4567 toggleActions: 'play none none none' 4568 } 4569 }); 4570 4571 // Content animation 4572 gsap.fromTo(`${sectionId} .projects-content`, { 4573 opacity: 0, 4574 y: 40 4575 }, { 4576 opacity: 1, 4577 y: 0, 4578 duration: 1, 4579 ease: 'power3.out', 4580 scrollTrigger: { 4581 trigger: `${sectionId} .projects-content`, 4582 start: 'top 85%', 4583 toggleActions: 'play none none none' 4584 } 4585 }); 4586 4587 // Project cards stagger animation 4588 gsap.fromTo(`${sectionId} .project-card`, { 4589 opacity: 0, 4590 y: 80, 4591 scale: 0.9 4592 }, { 4593 opacity: 1, 4594 y: 0, 4595 scale: 1, 4596 duration: 0.8, 4597 stagger: 0.1, 4598 ease: 'power3.out', 4599 scrollTrigger: { 4600 trigger: `${sectionId} .projects-grid`, 4601 start: 'top 85%', 4602 toggleActions: 'play none none none' 4603 } 4604 }); 4605 4606 // View All Projects button animation 4607 gsap.fromTo(`${sectionId} .projects-view-btn`, { 4608 opacity: 0, 4609 y: 40, 4610 scale: 0.9 4611 }, { 4612 opacity: 1, 4613 y: 0, 4614 scale: 1, 4615 duration: 0.8, 4616 ease: 'back.out(1.5)', 4617 scrollTrigger: { 4618 trigger: `${sectionId} .projects-view-btn`, 4619 start: 'top 90%', 4620 toggleActions: 'play none none none' 4621 } 4622 }); 4623 4624 // Empty state animation 4625 gsap.fromTo(`${sectionId} .empty-state`, { 4626 opacity: 0, 4627 y: 50 4628 }, { 4629 opacity: 1, 4630 y: 0, 4631 duration: 1, 4632 ease: 'power3.out', 4633 scrollTrigger: { 4634 trigger: `${sectionId} .empty-state`, 4635 start: 'top 85%', 4636 toggleActions: 'play none none none' 4637 } 4638 }); 4639 4640 // Card hover effects 4641 document.querySelectorAll(`${sectionId} .project-card`).forEach(card => { 4642 const image = card.querySelector('.project-image');
4643 const overlay = card.querySelector('.project-overlay'); 4644 4645 card.addEventListener('mouseenter', () => { 4646 gsap.to(card, { 4647 y: -10, 4648 duration: 0.4, 4649 ease: 'power2.out' 4650 }); 4651 4652 if (image) { 4653 gsap.to(image, { 4654 scale: 1.1, 4655 duration: 0.7, 4656 ease: 'power2.out' 4657 }); 4658 } 4659 4660 if (overlay) { 4661 gsap.to(overlay, { 4662 opacity: 1, 4663 duration: 0.3 4664 }); 4665 gsap.to(overlay.querySelector('div'), { 4666 y: 0, 4667 duration: 0.3, 4668 delay: 0.1 4669 }); 4670 } 4671 }); 4672 4673 card.addEventListener('mouseleave', () => { 4674 gsap.to(card, { 4675 y: 0, 4676 duration: 0.4, 4677 ease: 'power2.out' 4678 }); 4679 4680 if (image) { 4681 gsap.to(image, { 4682 scale: 1, 4683 duration: 0.7, 4684 ease: 'power2.out' 4685 }); 4686 } 4687 4688 if (overlay) { 4689 gsap.to(overlay, { 4690 opacity: 0, 4691 duration: 0.3 4692 }); 4693 gsap.to(overlay.querySelector('div'), { 4694 y: 16, 4695 duration: 0.3 4696 }); 4697 } 4698 }); 4699 }); 4700 4701 // View All button hover effect 4702 const viewBtn = document.querySelector(`${sectionId} .projects-view-btn a`); 4703 if (viewBtn) { 4704 const arrow = viewBtn.querySelector('.view-arrow'); 4705 4706 viewBtn.addEventListener('mouseenter', () => { 4707 gsap.to(viewBtn, { 4708 scale: 1.05, 4709 duration: 0.3, 4710 ease: 'power2.out' 4711 }); 4712 gsap.to(arrow, { 4713 x: 5, 4714 duration: 0.3, 4715 ease: 'power2.out' 4716 }); 4717 }); 4718 4719 viewBtn.addEventListener('mouseleave', () => { 4720 gsap.to(viewBtn, { 4721 scale: 1, 4722 duration: 0.3, 4723 ease: 'power2.out' 4724 }); 4725 gsap.to(arrow, { 4726 x: 0, 4727 duration: 0.3, 4728 ease: 'power2.out' 4729 }); 4730 }); 4731 } 4732 }); 4733 </script>
4733 4734
4734<script> 4735 document.addEventListener('DOMContentLoaded', function() { 4736 gsap.registerPlugin(ScrollTrigger); 4737 4738 const sectionId = '#newsletter-section-6abf0c02942e7'; 4739 4740 // Animate heading 4741 gsap.fromTo(`${sectionId} .newsletter-heading`, { 4742 opacity: 0, 4743 y: -30 4744 }, { 4745 opacity: 1, 4746 y: 0, 4747 duration: 0.8, 4748 ease: 'power3.out', 4749 scrollTrigger: { 4750 trigger: `${sectionId} .newsletter-heading`, 4751 start: 'top 85%', 4752 toggleActions: 'play none none none' 4753 } 4754 }); 4755 4756 // Animate subtitle 4757 gsap.fromTo(`${sectionId} .newsletter-subtitle`, { 4758 opacity: 0, 4759 y: -20 4760 }, { 4761 opacity: 1, 4762 y: 0, 4763 duration: 0.8, 4764 delay: 0.2, 4765 ease: 'power3.out', 4766 scrollTrigger: { 4767 trigger: `${sectionId} .newsletter-subtitle`, 4768 start: 'top 85%', 4769 toggleActions: 'play none none none' 4770 } 4771 }); 4772 4773 // Animate description 4774 gsap.fromTo(`${sectionId} .newsletter-description`, { 4775 opacity: 0, 4776 y: 20 4777 }, { 4778 opacity: 1, 4779 y: 0, 4780 duration: 0.8, 4781 delay: 0.3, 4782 ease: 'power3.out', 4783 scrollTrigger: { 4784 trigger: `${sectionId} .newsletter-description`, 4785 start: 'top 85%', 4786 toggleActions: 'play none none none' 4787 } 4788 }); 4789 4790 // Animate form 4791 gsap.fromTo(`${sectionId} .newsletter-form`, { 4792 opacity: 0, 4793 y: 30 4794 }, { 4795 opacity: 1, 4796 y: 0, 4797 duration: 0.8, 4798 delay: 0.4, 4799 ease: 'power3.out', 4800 scrollTrigger: { 4801 trigger: `${sectionId} .newsletter-form`, 4802 start: 'top 85%', 4803 toggleActions: 'play none none none' 4804 } 4805 }); 4806 4807 // Animate card 4808 gsap.fromTo(`${sectionId} .newsletter-card`, { 4809 opacity: 0, 4810 scale: 0.95 4811 }, { 4812 opacity: 1, 4813 scale: 1, 4814 duration: 0.8, 4815 delay: 0.4, 4816 ease: 'power3.out', 4817 scrollTrigger: { 4818 trigger: `${sectionId} .newsletter-card`, 4819 start: 'top 85%', 4820 toggleActions: 'play none none none' 4821 } 4822 }); 4823 4824 // Handle form submission with better UX 4825 document.querySelectorAll('[id^="subscription-form"]').forEach(form => { 4826 form.addEventListener('submit', function(e) { 4827 const button = this.querySelector('button[type="submit"]'); 4828 const originalText = button.textContent; 4829 button.disabled = true; 4830 button.textContent = 'Subscribing...'; 4831 4832 // Re-enable after 3 seconds in case of error 4833 setTimeout(() => { 4834 button.disabled = false; 4835 button.textContent = originalText; 4836 }, 3000); 4837 }); 4838 }); 4839 }); 4840 </script>
4840 4841
4841<script> 4842 document.addEventListener('DOMContentLoaded', function() { 4843 gsap.registerPlugin(ScrollTrigger); 4844 4845 // Set initial states 4846 gsap.set( 4847 '.animate-career-subtitle, .animate-career-content, .animate-career-heading, .animate-career-tabs, .animate-career-tab, .animate-career-card, .animate-career-empty', { 4848 opacity: 0, 4849 y: 40 4850 }); 4851 4852 const sectionId = '#careers-section-6abf0c0295826'; 4853 4854 // Background animations (subtle floating) 4855 gsap.to('.animate-career-bg-1', { 4856 y: -20, 4857 x: -15, 4858 duration: 8, 4859 repeat: -1, 4860 yoyo: true, 4861 ease: 'power1.inOut' 4862 }); 4863 4864 gsap.to('.animate-career-bg-2', { 4865 y: 20, 4866 x: 15, 4867 duration: 7, 4868 repeat: -1, 4869 yoyo: true, 4870 ease: 'power1.inOut' 4871 }); 4872 4873 // Section Subtitle Badge 4874 gsap.to('.animate-career-subtitle', { 4875 opacity: 1, 4876 y: 0, 4877 duration: 0.7, 4878 ease: 'power3.out', 4879 scrollTrigger: { 4880 trigger: '.animate-career-subtitle', 4881 start: 'top 80%', 4882 toggleActions: 'play none none none' 4883 } 4884 }); 4885 4886 // Section Content 4887 gsap.to('.animate-career-content', { 4888 opacity: 1, 4889 y: 0, 4890 duration: 0.8, 4891 delay: 0.1, 4892 ease: 'power3.out', 4893 scrollTrigger: { 4894 trigger: '.animate-career-content', 4895 start: 'top 80%', 4896 toggleActions: 'play none none none' 4897 } 4898 }); 4899 4900 // Section Heading 4901 gsap.to('.animate-career-heading', { 4902 opacity: 1, 4903 y: 0, 4904 duration: 0.8, 4905 delay: 0.2, 4906 ease: 'power3.out', 4907 scrollTrigger: { 4908 trigger: '.animate-career-heading', 4909 start: 'top 80%', 4910 toggleActions: 'play none none none' 4911 } 4912 }); 4913 4914 // Category Tabs Container 4915 gsap.to('.animate-career-tabs', { 4916 opacity: 1, 4917 y: 0, 4918 duration: 0.7, 4919 ease: 'power3.out', 4920 scrollTrigger: { 4921 trigger: '.animate-career-tabs', 4922 start: 'top 85%', 4923 toggleActions: 'play none none none' 4924 } 4925 }); 4926 4927 // Individual Tab Buttons (stagger) 4928 document.querySelectorAll('.animate-career-tab').forEach((tab, index) => { 4929 gsap.to(tab, { 4930 opacity: 1, 4931 y: 0, 4932 duration: 0.5, 4933 delay: 0.3 + (index * 0.05), 4934 ease: 'power3.out', 4935 scrollTrigger: { 4936 trigger: '.animate-career-tabs', 4937 start: 'top 85%', 4938 toggleActions: 'play none none none' 4939 } 4940 }); 4941 }); 4942 4943 // Job Cards (stagger animation) 4944 document.querySelectorAll('.animate-career-card').forEach((card, index) => { 4945 gsap.to(card, { 4946 opacity: 1, 4947 y: 0, 4948 duration: 0.7, 4949 delay: index * 0.08, 4950 ease: 'power3.out', 4951 scrollTrigger: { 4952 trigger: card, 4953 start: 'top 85%', 4954 toggleActions: 'play none none none' 4955 } 4956 }); 4957 }); 4958 4959 // Empty State 4960 gsap.to('.animate-career-empty', { 4961 opacity: 1, 4962 y: 0, 4963 duration: 0.8, 4964 ease: 'power3.out', 4965 scrollTrigger: { 4966 trigger: '.animate-career-empty', 4967 start: 'top 80%', 4968 toggleActions: 'play none none none' 4969 } 4970 }); 4971 }); 4972 </script>
4972 4973
4973<script> 4974 document.addEventListener('DOMContentLoaded', function() { 4975 const courses = [{"id":1,"category_id":8,"code":null,"title":"\u2022\tFull-Stack Web Development Course","slug":"-full-stack-web-development-course","short_description":null,"image_path":"courses\/1maQoQrieXxUL7knzz0O4rlkqNRsC6qJMm8CcwEq.png","description":null,"price":"16000.00","certificate_fee":"0.00","duration":"3 Months","is_featured":0,"status":1,"meta_title":"\u2022\tFull-Stack Web Development Course","meta_description":"\u2022\tFull-Stack Web Development Course","meta_keywords":"\u2022\tFull-Stack Web Development Course","created_at":"2026-02-07T10:07:05.000000Z","updated_at":"2026-02-07T10:42:07.000000Z","syllabus":[],"category":{"id":8,"name":"Web & Software Engineering","slug":"web-software-engineering","description":null,"meta_title":"Web & Software Engineering","meta_description":"Web & Software Engineering","meta_keywords":"Web & Software Engineering","created_at":"2026-02-07T09:59:32.000000Z","updated_at":"2026-02-07T09:59:32.000000Z"}},{"id":2,"category_id":8,"code":"SATRI-WD-MERN","title":"MERN Stack Development Course","slug":"mern-stack-development-course","short_description":"MERN Stack Development Course","image_path":"courses\/tgzDqCtU6VKcUHQNlSIQSWOZeWSl0ljWIOiNK7Kw.png","description":null,"price":"18000.00","certificate_fee":"0.00","duration":"3 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T11:17:45.000000Z","updated_at":"2026-06-17T07:17:33.000000Z","syllabus":[],"category":{"id":8,"name":"Web & Software Engineering","slug":"web-software-engineering","description":null,"meta_title":"Web & Software Engineering","meta_description":"Web & Software Engineering","meta_keywords":"Web & Software Engineering","created_at":"2026-02-07T09:59:32.000000Z","updated_at":"2026-02-07T09:59:32.000000Z"}},{"id":3,"category_id":8,"code":"SATRI-WD-REACT","title":"React.js Application Development","slug":"reactjs-application-development","short_description":"React.js Application Development","image_path":"courses\/Qb1NoBraTctIumhXMyNFJHePSyUnkvsZXWKybJ8u.png","description":null,"price":"15000.00","certificate_fee":"0.00","duration":"1.5 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T11:19:17.000000Z","updated_at":"2026-06-17T06:51:35.000000Z","syllabus":[],"category":{"id":8,"name":"Web & Software Engineering","slug":"web-software-engineering","description":null,"meta_title":"Web & Software Engineering","meta_description":"Web & Software Engineering","meta_keywords":"Web & Software Engineering","created_at":"2026-02-07T09:59:32.000000Z","updated_at":"2026-02-07T09:59:32.000000Z"}},{"id":4,"category_id":8,"code":"SATRI-WD-NEXT","title":"Next.js Web Application Development","slug":"nextjs-web-application-development","short_description":"Next.js Web Application Development","image_path":"courses\/RUMPOQhJQwVXMPd1O1tkMMoFin74g10nTi8JQ6Ai.png","description":null,"price":"15000.00","certificate_fee":"0.00","duration":"2.5 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T11:20:10.000000Z","updated_at":"2026-07-26T12:09:33.000000Z","syllabus":[],"category":{"id":8,"name":"Web & Software Engineering","slug":"web-software-engineering","description":null,"meta_title":"Web & Software Engineering","meta_description":"Web & Software Engineering","meta_keywords":"Web & Software Engineering","created_at":"2026-02-07T09:59:32.000000Z","updated_at":"2026-02-07T09:59:32.000000Z"}},{"id":5,"category_id":8,"code":"SATRI-WD-LAR","title":"Laravel Framework Development","slug":"laravel-framework-development","short_description":"Laravel Framework Development","image_path":"courses\/4yUgab6UWBzZfROuxUZUTC5403wTQGaWae4yVJvH.png","description":null,"price":"17000.00","certificate_fee":"0.00","duration":"3 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T11:20:52.000000Z","updated_at":"2026-06-17T06:03:58.000000Z","syllabus":[],"category":{"id":8,"name":"Web & Softw
4975are Engineering","slug":"web-software-engineering","description":null,"meta_title":"Web & Software Engineering","meta_description":"Web & Software Engineering","meta_keywords":"Web & Software Engineering","created_at":"2026-02-07T09:59:32.000000Z","updated_at":"2026-02-07T09:59:32.000000Z"}},{"id":6,"category_id":8,"code":"SATRI-WD-DJG","title":"Django Framework Development","slug":"django-framework-development","short_description":"Django Framework Development","image_path":"courses\/dSwlKTBLTvcEEYFyFhyAqCm3UjIpByVnJpv60aS1.png","description":null,"price":"17000.00","certificate_fee":"0.00","duration":"3 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T11:21:55.000000Z","updated_at":"2026-06-17T06:11:20.000000Z","syllabus":[],"category":{"id":8,"name":"Web & Software Engineering","slug":"web-software-engineering","description":null,"meta_title":"Web & Software Engineering","meta_description":"Web & Software Engineering","meta_keywords":"Web & Software Engineering","created_at":"2026-02-07T09:59:32.000000Z","updated_at":"2026-02-07T09:59:32.000000Z"}},{"id":7,"category_id":8,"code":"SATRI-WD-WP001","title":"WordPress Web Development Course","slug":"wordpress-web-development-course","short_description":"WordPress Web Development Course","image_path":"courses\/xdvaf66a5mpJ4fo32RyvUNZjJNLTCjkCT77HWEN3.png","description":null,"price":"14000.00","certificate_fee":"0.00","duration":"1.5 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T11:25:22.000000Z","updated_at":"2026-06-24T07:48:36.000000Z","syllabus":[],"category":{"id":8,"name":"Web & Software Engineering","slug":"web-software-engineering","description":null,"meta_title":"Web & Software Engineering","meta_description":"Web & Software Engineering","meta_keywords":"Web & Software Engineering","created_at":"2026-02-07T09:59:32.000000Z","updated_at":"2026-02-07T09:59:32.000000Z"}},{"id":8,"category_id":9,"code":"SATRI-DS-MAD","title":"Mobile Application Development with Flutter","slug":"mobile-application-development-with-flutter-","short_description":"Mobile Application Development with Flutter","image_path":"courses\/7am2BXR9OMXZpL6X6p7sCEDYtJSGFVzZRNlwJ51U.png","description":null,"price":"16000.00","certificate_fee":"0.00","duration":"2 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T11:27:53.000000Z","updated_at":"2026-06-15T08:00:31.000000Z","syllabus":[],"category":{"id":9,"name":"Mobile Application Development","slug":"mobile-application-development","description":"Mobile Application Development","meta_title":"Mobile Application Development","meta_description":"Mobile Application Development","meta_keywords":"Mobile Application Development","created_at":"2026-02-07T10:00:15.000000Z","updated_at":"2026-02-07T10:00:15.000000Z"}},{"id":9,"category_id":9,"code":null,"title":"Cross-Platform Application Development Course","slug":"cross-platform-application-development-course-","short_description":"Cross-Platform Application Development Course","image_path":"courses\/2N9P0Xg4Z5ryHl172WXgIGksjZslEyIV774lds1M.png","description":null,"price":"19000.00","certificate_fee":"0.00","duration":"3 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T11:31:54.000000Z","updated_at":"2026-02-12T02:40:26.000000Z","syllabus":[],"category":{"id":9,"name":"Mobile Application Development","slug":"mobile-application-development","description":"Mobile Application Development","meta_title":"Mobile Application Development","meta_description":"Mobile Application Development","meta_keywords":"Mobile Application Development","created_at":"2026-02-07T10:00:15.000000Z","updated_at":"2026-02-07T10:00:15.000000Z"}},{"id":10,"category_id":10,"code":"SATRI-DS-UXD","title":"UI\/UX Design Course","slug":"uiux-design-course","short_description":"UI\/UX Design Course","image_path":"courses\/Xb6RItPcMb4IWYgsANSBt6cC4PNSvk68XeARebt7.png","description":null,"price":"15000.00","certificate_fee":"0.00","duration":"2 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T11:33:20.000000Z","updated_at":"2026-06-14T09:49:20.000000Z","syllabus":[],"category":{"id":10,"name":"Design & Creative Technologies","slug":"design-creative-technologies","description":"Design & Creative Technologies","meta_title":"Design & Creative Technologies","meta_description":"Design & Creative Technologies","meta_keywords":"Design & Creative Technologies","created_at":"2026-02-07T10:02:06.000000Z","updated_at":"2026-02-07T10:02:06.000000Z"}},{"id":11,"category_id":10,"code":null,"title":"Professional Graphics Design Course","slug":"professional-graphics-design-course","short_description":"Professional Graphics Design Course","image_path":"courses\/E9L4E4NqgIDZD9OYsiYcplfmbwWwBo5rf8xUCCGK.png","description":null,"price":"15000.00","certificate_fee":"0.00","duration":"2 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T11:34:03.000000Z","updated_at":"2026-02-07T11:34:03.000000Z","syllabus":[],"category":{"id":10,"name":"Design & Creative Technologies","slug":"design-creative-technologies","description":"Design & Creative Technologies","meta_title":"Design & Creative Technologies","meta_description":"Design & Creative Technologies","meta_keywords":"Design & Creative Technologies","created_at":"2026-02-07T10:02:06.000000Z","updated_at":"2026-02-07T10:02:06.000000Z"}},{"id":12,"category_id":10,"code":null,"title":"Digital Product Design","slug":"digital-product-design","short_description":"Digital Product Design","image_path":"courses\/0k5Gp2rAIk5WUiXj6lkzNYqXgbEppafqDBAmEfGP.png","description":null,"price":"11999.99","certificate_fee":"0.00","duration":"1.5 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T11:40:38.000000Z","updated_at":"2026-02-07T11:50:01.000000Z","syllabus":[],"category":{"id":10,"name":"Design & Creative Technologies","slug":"design-creative-technologies","description":"Design & Creative Technologies","meta_title":"Design & Creative Technologies","meta_description":"Design & Creative Technologies","meta_keywords":"Design & Creative Technologies","created_at":"2026-02-07T10:02:06.000000Z","updated_at":"2026-02-07T10:02:06.000000Z"}},{"id":13,"category_id":11,"code":"SATRI-DS-PYP","title":"Python Programming for Professionals","slug":"python-programming-for-professionals-","short_description":"Python Programming for Professionals","image_path":"courses\/EOZOn0MYQkttiUv1YVO7wI0qZsKISjA6YqJV8NOb.png","description":null,"price":"12000.00","certificate_fee":"0.00","duration":"1.5 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T11:44:14.000000Z","updated_at":"2026-06-15T07:37:32.000000Z","syllabus":[],"category":{"id":11,"name":"Data Science, AI & Emerging Technologies","slug":"data-science-ai-emerging-technologies","description":"Data Science, AI & Emerging Technologies","meta_title":"Data Science, AI & Emerging Technologies","meta_description":"Data Science, AI & Emerging Technologies","meta_keywords":"Data Science, AI & Emerging Technologies","created_at":"2026-02-07T10:02:28.000000Z","updated_at":"2026-02-07T10:02:28.000000Z"}},{"id":14,"category_id":11,"code":"SATRI-DA-VIZ","title":"Data Analytics & Visualization","slug":"data-analytics-visualization","short_description":"Data Analytics & Visualization","image_path":"courses\/kirHlyQG7xn47QFRwZ1RKSkRpoMWhY06MbqjgOdq.png","description":null,"price":"15000.00","certificate_fee":"0.00","duration":"2 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T11:45:15.000000Z","updated_at":"2026-06-17T05:53:01.000000Z","syllabus":[],"category":{"id":11,"name":"Data Science, AI & Emerging Technologies","slug":"data-science-ai-emerging-technologies","description":"Data Science, AI & Emerging Technologies","meta_title":"Data Science, AI & Emerging Technologies","meta_description":"Data Science, AI & Emerging Technologies","meta_keywords":"Data Science, AI & Emerging Technologies","created_at":"2026-02-07T10:02:28.000000Z","updated_at":"2026-02-07T10:02:28.000000Z"}},{"id":15,"category_id":12,"code":null,"title":"Internet of Things (IoT) Fundamentals","slug":"internet-of-things-iot-fundamentals","short_description":"Internet of Things (IoT) Fundamentals","image_path":"courses\/7lSRqs3tZ5x2DbbI2mzy47OqGfrWMB2eC7zvnaPl.png","description":null,"price":"15000.00","certificate_fee":"0.00","duration":"2 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T12:00:49.000000Z","updated_at":"2026-02-07T12:00:49.000000Z","syllabus":[],"category":{"id":12,"name":"Internet of Things (IoT) & Smart Systems","slug":"-internet-of-things-iot-smart-systems","de
4975scription":"Internet of Things (IoT) & Smart Systems","meta_title":"Internet of Things (IoT) & Smart Systems","meta_description":"Internet of Things (IoT) & Smart Systems","meta_keywords":"Internet of Things (IoT) & Smart Systems","created_at":"2026-02-07T10:03:54.000000Z","updated_at":"2026-02-07T10:03:54.000000Z"}},{"id":16,"category_id":12,"code":null,"title":"Smart Home & Industrial IoT Systems","slug":"smart-home-industrial-iot-systems","short_description":"Smart Home & Industrial IoT Systems","image_path":"courses\/uDNq9SWZRufIas176yB89GPfBSWuR1iq8Jq36sDD.png","description":null,"price":"15000.00","certificate_fee":"0.00","duration":"2 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T12:01:38.000000Z","updated_at":"2026-02-07T12:01:38.000000Z","syllabus":[],"category":{"id":12,"name":"Internet of Things (IoT) & Smart Systems","slug":"-internet-of-things-iot-smart-systems","description":"Internet of Things (IoT) & Smart Systems","meta_title":"Internet of Things (IoT) & Smart Systems","meta_description":"Internet of Things (IoT) & Smart Systems","meta_keywords":"Internet of Things (IoT) & Smart Systems","created_at":"2026-02-07T10:03:54.000000Z","updated_at":"2026-02-07T10:03:54.000000Z"}},{"id":17,"category_id":13,"code":null,"title":"Cybersecurity Fundamentals","slug":"cybersecurity-fundamentals","short_description":"Cybersecurity Fundamentals","image_path":"courses\/BMm4PeWTpMOjMt6AF66iUNSDSQMA679fXRMtnW7M.png","description":null,"price":"12000.00","certificate_fee":"0.00","duration":"1.5 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T12:02:28.000000Z","updated_at":"2026-02-07T12:02:28.000000Z","syllabus":[],"category":{"id":13,"name":"Cybersecurity & Networking","slug":"cybersecurity-networking","description":"Cybersecurity & Networking","meta_title":"Cybersecurity & Networking","meta_description":"Cybersecurity & Networking","meta_keywords":"Cybersecurity & Networking","created_at":"2026-02-07T10:04:15.000000Z","updated_at":"2026-02-07T10:04:15.000000Z"}},{"id":18,"category_id":14,"code":"SATRI-QA-001","title":"Software Quality Assurance (QA)","slug":"softw
4975are-quality-assurance-qa-","short_description":"Software Quality Assurance (QA)","image_path":"courses\/FiFLOjpYJdvEuqVtipG060zsTk5CG5NQ5SbDKC1D.png","description":null,"price":"16000.00","certificate_fee":"0.00","duration":"2 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T12:05:08.000000Z","updated_at":"2026-06-24T07:29:54.000000Z","syllabus":[],"category":{"id":14,"name":"Software Testing & Quality Assurance (QA)","slug":"software-testing-quality-assurance-qa","description":"Software Testing & Quality Assurance (QA)","meta_title":"Software Testing & Quality Assurance (QA)","meta_description":"Software Testing & Quality Assurance (QA)","meta_keywords":"Software Testing & Quality Assurance (QA)","created_at":"2026-02-07T10:04:35.000000Z","updated_at":"2026-02-07T10:04:35.000000Z"}},{"id":19,"category_id":15,"code":null,"title":"DevOps","slug":"devops","short_description":"DevOps","image_path":"courses\/US3oxQlrTWQ5qLZJqij3JydAtNrcFgrrc8r537hc.png","description":null,"price":"15000.00","certificate_fee":"0.00","duration":"2 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T12:09:44.000000Z","updated_at":"2026-02-07T12:09:44.000000Z","syllabus":[],"category":{"id":15,"name":"Cloud Computing & DevOps","slug":"cloud-computing-devops","description":"Cloud Computing & DevOps","meta_title":"Cloud Computing & DevOps","meta_description":"Cloud Computing & DevOps","meta_keywords":"Cloud Computing & DevOps","created_at":"2026-02-07T10:05:02.000000Z","updated_at":"2026-02-07T10:05:02.000000Z"}},{"id":20,"category_id":16,"code":"SATRI-DS-DGM","title":"Digital Marketing","slug":"digital-marketing","short_description":"Digital Marketing","image_path":"courses\/xjdoPRwOmYRc6JBMvymw6hhHolHOSN1MqoCjj32l.png","description":null,"price":"12000.00","certificate_fee":"0.00","duration":"1.5 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T12:10:27.000000Z","updated_at":"2026-06-15T07:13:16.000000Z","syllabus":[],"category":{"id":16,"name":"Digital Marketing, Business & IT Management","slug":"digital-marketing-business-it-management","description":"Digital Marketing, Business & IT Management","meta_title":"Digital Marketing, Business & IT Management","meta_description":"Digital Marketing, Business & IT Management","meta_keywords":"Digital Marketing, Business & IT Management","created_at":"2026-02-07T10:05:21.000000Z","updated_at":"2026-02-07T10:05:21.000000Z"}},{"id":21,"category_id":16,"code":"SATRI-MK-SMM","title":"Social Media Management Course","slug":"social-media-management-course","short_description":"Social Media Management Course","image_path":"courses\/1c1J4F4NT7vADCZmqyKFrtjhCg29HwSYu00ChKLw.png","description":null,"price":"12000.00","certificate_fee":"0.00","duration":"1.5 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T12:11:06.000000Z","updated_at":"2026-06-17T05:32:09.000000Z","syllabus":[],"category":{"id":16,"name":"Digital Marketing, Business & IT Management","slug":"digital-marketing-business-it-management","description":"Digital Marketing, Business & IT Management","meta_title":"Digital Marketing, Business & IT Management","meta_description":"Digital Marketing, Business & IT Management","meta_keywords":"Digital Marketing, Business & IT Management","created_at":"2026-02-07T10:05:21.000000Z","updated_at":"2026-02-07T10:05:21.000000Z"}},{"id":22,"category_id":16,"code":null,"title":"Content Marketing & Branding Strategy","slug":"content-marketing-branding-strategy","short_description":"Content Marketing & Branding Strategy","image_path":"courses\/HVxrR4uuvj2SFMtLaJbHcTa6ZzCMP1sH9wMqUP6M.png","description":null,"price":"12000.00","certificate_fee":"0.00","duration":"1.5 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T12:11:51.000000Z","updated_at":"2026-02-07T12:11:51.000000Z","syllabus":[],"category":{"id":16,"name":"Digital Marketing, Business & IT Management","slug":"digital-marketing-business-it-management","description":"Digital Marketing, Business & IT Management","meta_title":"Digital Marketing, Business & IT Management","meta_description":"Digital Marketing, Business & IT Management","meta_keywords":"Digital Marketing, Business & IT Management","created_at":"2026-02-07T10:05:21.000000Z","updated_at":"2026-02-07T10:05:21.000000Z"}},{"id":23,"category_id":17,"code":null,"title":"Project-Based IT Training Course","slug":"project-based-it-training-course","short_description":"Project-Based IT Training Course","image_path":"courses\/WUVtzBPmk9J6qRHxTQYwOvmnSvi6K92p4YfwklkO.png","description":null,"price":"12000.00","certificate_fee":"0.00","duration":"2 Months","is_featured":0,"status":1,"meta_title":null,"meta_description":null,"meta_keywords":null,"created_at":"2026-02-07T12:12:55.000000Z","updated_at":"2026-02-07T12:12:55.000000Z","syllabus":[],"category":{"id":17,"name":"Professional Training, Internship & Career Courses","slug":"professional-training-internship-career-courses","description":"Professional Training, Internship & Career Courses","meta_title":"Professional Training, Internship & Career Courses","meta_description":"Professional Training, Internship & Career Courses","meta_keywords":"Professional Training, Internship & Career Courses","created_at":"2026-02-07T10:05:40.000000Z","updated_at":"2026-02-07T10:05:40.000000Z"}},{"id":24,"category_id":17,"code":null,"title":"Professional IT Internship Course","slug":"professional-it-internship-course","short_description":"Professional IT Internship Course","image_path":"courses\/lXwMjy0J8g8lT6l4DFcOJItggW6aJSkNPaMSJeCg.png","description":null,"price":"12000.00","certificate_fee":"0.00","duration":"3 Months","is_featured":0,"status":1,"meta_title":"Professional IT Internship Course","meta_description":"Professional IT Internship Course","meta_keywords":"Professional IT Internship Course","created_at":"2026-02-07T12:17:42.000000Z","updated_at":"2026-02-07T12:17:42.000000Z","syllabus":[],"category":{"id":17,"name":"Professional Training, Internship & Career Courses","slug":"professional-training-internship-career-courses","description":"Professional Training, Internship & Career Courses","meta_title":"Professional Training, Internship & Career Courses","meta_description":"Professional Training, Internship & Career Courses","meta_keywords":"Professional Training, Internship & Career Courses","created_at":"2026-02-07T10:05:40.000000Z","updated_at":"2026-02-07T10:05:40.000000Z"}},{"id":26,"category_id":11,"code":"Gen-AI-0034","title":"Gen AI","slug":"gen-ai","short_description":null,"image_path":"courses\/DG8hVv2JqndxnROPShTGbimh3CimUyOyROZVGMJm.png","description":null,"price":"16000.00","certificate_fee":"0.00","duration":"2.5 Months","is_featured":0,"status":1,"meta_title":"Gen-AI at SATRI","meta_description":"Gen-AI at SATRI","meta_keywords":"Gen-AI at SATRI","created_at":"2026-08-02T15:14:37.000000Z","updated_at":"2026-08-19T11:00:14.000000Z","syllabus":[],"category":{"id":11,"name":"Data Science, AI & Emerging Technologies","slug":"data-science-ai-emerging-technologies","description":"Data Science, AI & Emerging Technologies","meta_title":"Data Science, AI & Emerging Technologies","meta_description":"Data Science, AI & Emerging Technologies","meta_keywords":"Data Science, AI & Emerging Technologies","created_at":"2026-02-07T10:02:28.000000Z","updated_at":"2026-02-07T10:02:28.000000Z"}}]; 4976 const storageUrl = "https://satritech.com/storage/"; 4977 const modal = document.getElementById('courseModal'); 4978 const closeBtn = document.getElementById('closeCourseModal'); 4979 4980 // Open modal when clicking on course cards 4981 document.querySelectorAll('#courses-section-6abf0c028bbb2 .course-card').forEach(card => { 4982 card.addEventListener('click', (e) => { 4983 // Prevent trigger if clicking the direct "View Course" link/button inside the card 4984 if (e.target.closest('a')) return; 4985 4986 const courseId = card.dataset.courseId; 4987 const course = courses.find(c => c.id == courseId); 4988 4989 if (course) { 4990 // Set title & basic info 4991 document.getElementById('modalCourseTitle').textContent = course.title || ''; 4992 document.getElementById('modalCourseTitleMobile').textContent = course.title || ''; 4993 document.getElementById('modalCourseDuration').textContent = course.duration || 'N/A'; 4994 document.getElementById('modalCourseLevel').textContent = course.level || 'General'; 4995 document.getElementById('modalCoursePrice').textContent = 'NPR ' + new Intl.NumberFormat().format(course.price || 0); 4996 document.getElementById('modalCourseCategory').textContent = course.category?.name || 'Academic'; 4997 document.getElementById('modalCourseShortDe
4997sc').textContent = course.short_description || ''; 4998 document.getElementById('modalCourseDescription').innerHTML = course.description || 'No detailed description available.'; 4999 document.getElementById('modalCourseActionUrl').href = "https://satritech.com/course/:slug".replace(':slug', course.slug); 5000 5001 // Set image 5002 const imageDiv = document.getElementById('modalCourseImage'); 5003 if (course.image_path) { 5004 imageDiv.innerHTML = `<img src="${storageUrl}${course.image_path}" alt="${course.title}" class="w-full h-full object-cover">`; 5005 } else { 5006 imageDiv.innerHTML = `<svg class="w-20 h-20 text-[#1363C6]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>`; 5007 } 5008 5009 // Set Syllabus if available 5010 const syllabusSection = document.getElementById('modalCourseSyllabusSection'); 5011 const syllabusDiv = document.getElementById('modalCourseSyllabus'); 5012 if (course.syllabus && Array.isArray(course.syllabus) && course.syllabus.length > 0) { 5013 syllabusDiv.innerHTML = ''; 5014 course.syllabus.forEach((item, index) => { 5015 syllabusDiv.innerHTML += ` 5016 <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-gray-100 dark:border-gray-700"> 5017 <span class="flex-shrink-0 w-6 h-6 rounded-full bg-[#1363C6] text-white text-[10px] font-bold flex items-center justify-center">${index + 1}</span> 5018 <span class="text-xs font-semibold text-gray-700 dark:text-gray-300">${item}</span> 5019 </div> 5020 `; 5021 }); 5022 syllabusSection.classList.remove('hidden'); 5023 } else { 5024 syllabusSection.classList.add('hidden'); 5025 } 5026 5027 // Show modal 5028 modal.classList.remove('hidden'); 5029 modal.classList.add('flex'); 5030 document.body.style.overflow = 'hidden'; 5031
5032 gsap.fromTo('.modal-content', { 5033 opacity: 0, 5034 scale: 0.9, 5035 y: 30 5036 }, { 5037 opacity: 1, 5038 scale: 1, 5039 y: 0, 5040 duration: 0.4, 5041 ease: 'power3.out' 5042 }); 5043 } 5044 }); 5045 }); 5046 5047 // Close modal 5048 function closeModal() { 5049 gsap.to('.modal-content', { 5050 opacity: 0, 5051 scale: 0.9, 5052 y: 30, 5053 duration: 0.3, 5054 ease: 'power2.in', 5055 onComplete: () => { 5056 modal.classList.add('hidden'); 5057 modal.classList.remove('flex'); 5058 document.body.style.overflow = 'auto'; 5059 } 5060 }); 5061 } 5062 5063 closeBtn.addEventListener('click', closeModal); 5064 modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); }); 5065 document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal(); }); 5066 }); 5067 </script>
5067 5068
5068<script> 5069 document.addEventListener('DOMContentLoaded', function() { 5070 const services = [{"id":1,"title":"IT & Software Development Services","slug":"it-software-development-services","short_description":"Professional software and digital solutions for businesses, individuals, and research projects, including scalable and secure application development.","description":"fa-solid fa-setting","icon":"fa-solid fa-setting","image":"services\/zTre6YWvRGyIzD94iO2Fi8mJB8BzmoAghVInY8nv.png","meta_title":null,"meta_description":null,"meta_keywords":null,"og_title":null,"og_description":null,"og_image":null,"twitter_title":null,"twitter_description":null,"twitter_image":null,"is_featured":1,"status":"published","created_at":"2026-02-07T12:26:25.000000Z","updated_at":"2026-02-07T12:27:27.000000Z"},{"id":2,"title":"Mobile & Web Application Development","slug":"mobile-web-application-development","short_description":"Mobile & Web Application Development","description":"Designing and developing modern mobile and web apps using technologies such as Flutter, React, Next.js, and backend frameworks.","icon":"fa-solid fa-mobile","image":"services\/DI1zaN3mRcygEri7nxU8GpNkL6ws0KgOydqvLjC2.png","meta_title":null,"meta_description":null,"meta_keywords":null,"og_title":null,"og_description":null,"og_image":null,"twitter_title":null,"twitter_description":null,"twitter_image":null,"is_featured":1,"status":"published","created_at":"2026-02-07T12:30:29.000000Z","updated_at":"2026-02-10T03:57:38.000000Z"},{"id":3,"title":"Digital Marketing & Online Growth Services","slug":"digital-marketing-online-growth-services","short_description":"\u2714 Social media marketing & management\r\n\u2714 Graphic content creation\r\n\u2714 Facebook & Google Ads promotion\r\n\u2714 Branding & online presence setup\r\nThese help businesses grow their digital footprint.","description":null,"icon":"fa-solid fa-setting","image":"services\/q94sR4isx002SYKnRymo5g85oaUfvP6KHghHroeX.png","meta_title":null,"meta_description":null,"meta_keywords":null,"og_title":null,"og_description":null,"og_image":null,"twitter_title":null,"twitter_description":null,"twitter_image":null,"is_featured":1,"status":"published","created_at":"2026-02-07T12:33:21.000000Z","updated_at":"2026-02-10T03:54:29.000000Z"},{"id":4,"title":"Technology Education & Training Services","slug":"technology-education-training-services","short_description":"Technology Education & Training Services","description":"Hands-on tech training covering courses such as IoT, programming, robotics, mobile app development, web development, AI, Machine Learning, and more for learners of all levels.","icon":"fa-solid fa-setting","image":"services\/Jt7w621qmyhsaonpcSwXq23nbaVkhDIIPKJsE9Pc.png","meta_title":null,"meta_description":null,"meta_keywords":null,"og_title":null,"og_description":null,"og_image":null,"twitter_title":null,"twitter_description":null,"twitter_image":null,"is_featured":1,"status":"published","created_at":"2026-02-07T12:34:28.000000Z","updated_at":"2026-02-10T03:51:21.000000Z"},{"id":5,"title":"Social Media Boosting","slug":"social-media-boosting","short_description":"Social Media Boosting is a paid promotional strategy designed to increase the visibility, reach, and engagement of your posts across platforms such as Facebook and Instagram.","description":"Social Media Boosting\r\n\r\nSocial Media Boosting is a paid promotional strategy designed to increase the visibility, reach, and engagement of your posts across platforms such as Facebook and Instagram.\r\n\r\nThrough targeted audience selection, we ensure your content reaches the right people based on location, interests, behavior, and demographics.\r\n\r\n\ud83d\udd39 What We Provide:\r\n\r\n\u2714 Targeted Audience Setup\r\n\u2714 Budget Planning & Optimization\r\n\u2714 Post & Campaign Boosting\r\n\u2714 Engagement & Reach Growth\r\n\u2714 Performance Monitoring & Reporting","icon":null,"image":"services\/9ky3baKDM8fXaacEO6wA05H2SpJ3vWXCueSd2xIU.png","meta_title":null,"meta_description":null,"meta_keywords":null,"og_title":null,"og_description":null,"og_image":null,"twitter_title":null,"twitter_description":null,"twitter_image":null,"is_featured":1,"status":"published","created_at":"2026-02-20T03:49:09.000000Z","updated_at":"2026-02-20T03:49:54.000000Z"}]; 5071 const storageUrl = "https://satritech.com/storage/"; 5072 const modal = document.getElementById('serviceModal'); 5073 const closeBtn = document.getElementById('closeServiceModal'); 5074 5075 // Open modal when clicking on service cards 5076 document.querySelectorAll('#services-section-6abf0c028eeb2 .service-card, #
5076services-section-6abf0c028eeb2 .service-slide').forEach(card => { 5077 card.addEventListener('click', () => { 5078 const serviceId = card.dataset.serviceId; 5079 const service = services.find(s => s.id == serviceId); 5080 5081 if (service) { 5082 // Set title 5083 document.getElementById('modalServiceTitle').textContent = service.title || ''; 5084 document.getElementById('modalServiceTitleMobile').textContent = service.title || ''; 5085 5086 // Set short description 5087 document.getElementById('modalServiceShortDesc').innerHTML = service.short_description || ''; 5088 5089 // Set full description 5090 document.getElementById('modalServiceDescription').innerHTML = service.description || 'No detailed description available.'; 5091 5092 // Set image/icon 5093 const imageDiv = document.getElementById('modalServiceImage'); 5094 if (service.image) { 5095 imageDiv.innerHTML = 5096 `<img src="${storageUrl}${service.image}" alt="${service.title}" class="w-full h-full object-cover" loading="lazy" decoding="async">`; 5097 } else if (service.icon) { 5098 imageDiv.innerHTML = 5099 `<i class="${service.icon} text-6xl text-[#1363C6]"></i>`; 5100 } else { 5101 imageDiv.innerHTML = 5102 `<svg class="w-24 h-24 text-[#1363C6]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 5103 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 5104 d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> 5105 </svg>`; 5106 } 5107 5108 // Show/hide featured badge 5109 const featuredBadge = document.getElementById('modalServiceFeatured'); 5110 if (service.is_featured) { 5111 featuredBadge.classList.remove('hidden'); 5112 } else { 5113 featuredBadge.classList.add('hidden'); 5114 } 5115 5116 // Show modal with animation 5117 modal.classList.remove('hidden'); 5118 modal.classList.add('flex'); 5119 document.body.style.overflow = 'hidden'; 5120
5121 gsap.fromTo('.modal-content', { 5122 opacity: 0, 5123 scale: 0.9, 5124 y: 30 5125 }, { 5126 opacity: 1, 5127 scale: 1, 5128 y: 0, 5129 duration: 0.4, 5130 ease: 'power3.out' 5131 }); 5132 } 5133 }); 5134 }); 5135 5136 // Close modal 5137 function closeModal() { 5138 gsap.to('.modal-content', { 5139 opacity: 0, 5140 scale: 0.9, 5141 y: 30, 5142 duration: 0.3, 5143 ease: 'power2.in', 5144 onComplete: () => { 5145 modal.classList.add('hidden'); 5146 modal.classList.remove('flex'); 5147 document.body.style.overflow = 'auto'; 5148 } 5149 }); 5150 } 5151 5152 closeBtn.addEventListener('click', closeModal); 5153 5154 modal.addEventListener('click', (e) => { 5155 if (e.target === modal) { 5156 closeModal(); 5157 } 5158 }); 5159 5160 // ESC key to close 5161 document.addEventListener('keydown', (e) => { 5162 if (e.key === 'Escape' && !modal.classList.contains('hidden')) { 5163 closeModal(); 5164 } 5165 }); 5166 }); 5167 </script>
5167 5168
5168<script> 5169 document.addEventListener('DOMContentLoaded', function() { 5170 const projects = [{"id":1,"title":"API Scout - API Testing Client","slug":"api-scout-api-testing-client","client":null,"description":null,"category":null,"image":"projects\/FAv40dTwph4MZrnAXNGToSyDo85rAp72K9fwsy1h.jpg","project_url":"https:\/\/play.google.com\/store\/apps\/details?id=com.satri.apiscout","tech_stack":null,"meta_title":null,"meta_description":null,"meta_keywords":null,"og_title":null,"og_description":null,"og_image":null,"twitter_title":null,"twitter_description":null,"twitter_image":null,"is_featured":false,"status":true,"created_at":"2026-04-26T03:00:36.000000Z","updated_at":"2026-04-26T03:00:36.000000Z"},{"id":2,"title":"ASTRUM","slug":"astrum","client":null,"description":null,"category":null,"image":"projects\/KSrH2W0CsIxwYdxraq22b8hJnb3fD4JgivGHTee1.jpg","project_url":"https:\/\/play.google.com\/store\/apps\/details?id=com.satri.astrology.psychic.astrum","tech_stack":null,"meta_title":null,"meta_description":null,"meta_keywords":null,"og_title":null,"og_description":null,"og_image":null,"twitter_title":null,"twitter_description":null,"twitter_image":null,"is_featured":false,"status":true,"created_at":"2026-04-26T03:05:38.000000Z","updated_at":"2026-04-26T03:05:38.000000Z"},{"id":3,"title":"Pocket Ledger","slug":"pocket-ledger","client":null,"description":null,"category":null,"image":"projects\/GWeLSRlJIoM107IcN28eihJLsa5OQRYN5X133oZR.jpg","project_url":"https:\/\/play.google.com\/store\/apps\/details?id=com.pocketledger.expense.tracker.ledger","tech_stack":null,"meta_title":null,"meta_description":null,"meta_keywords":null,"og_title":null,"og_description":null,"og_image":null,"twitter_title":null,"twitter_description":null,"twitter_image":null,"is_featured":false,"status":true,"created_at":"2026-04-26T03:06:26.000000Z","updated_at":"2026-04-26T03:06:26.000000Z"},{"id":4,"title":"FocusFlow","slug":"focusflow","client":null,"description":null,"category":null,"image":"projects\/wD5fiSzcThXwxcGctoNDzRAwzoqVUtgQbQ8yR7Gf.jpg","project_url":"https:\/\/play.google.com\/store\/apps\/details?id=com.satri.focusflow","tech_stack":null,"meta_title":null,"meta_description":null,"meta_keywords":null,"og_title":null,"og_description":null,"og_image":null,"twitter_title":null,"twitter_description":null,"twitter_image":null,"is_featured":false,"status":true,"created_at":"2026-04-26T03:07:02.000000Z","updated_at":"2026-04-26T03:07:02.000000Z"}]; 5171 const storageUrl = "https://satritech.com/storage/"; 5172 const modal = document.getElementById('projectModal'); 5173 const closeBtn = document.getElementById('closeProjectModal'); 5174 5175 // Open modal when clicking on project cards 5176 document.querySelectorAll('#projects-section-6abf0c0292ade .project-card').forEach(card => { 5177 card.addEventListener('click', (e) => { 5178 // Prevent trigger if clicking a direct link inside the card 5179 if (e.target.closest('a')) return; 5180 5181 const projectId = card.dataset.projectId; 5182 const project = projects.find(p => p.id == projectId); 5183 5184 if (project) { 5185 // Set text content 5186 document.getElementById('modalProjectTitle').textContent = project.title || ''; 5187 document.getElementById('modalProjectShortDesc').innerHTML = project.short_description || ''; 5188 document.getElementById('modalProjectDescription').innerHTML = project.description || 'Detailed project information coming soon.'; 5189 5190 // Set Action URL 5191 const actionBtn = document.getElementById('modalProjectActionUrl'); 5192 if (project.project_url) { 5193 actionBtn.href = project.project_url; 5194 actionBtn.classList.remove('hidden'); 5195 document.getElementById('modalProjectLiveBadge').classList.remove('hidden'); 5196 } else { 5197 actionBtn.classList.add('hidden'); 5198 document.getElementById('modalProjectLiveBadge').classList.add('hidden'); 5199 } 5200 5201 // Set Image 5202 const imageDiv = document.getElementById('modalProjectImage'); 5203 if (project.image) { 5204 imageDiv.innerHTML = `<img src="${storageUrl}${project.image}" alt="${project.title}" class="w-full h-full object-cover">`; 5205 } else { 5206 imageDiv.innerHTML = `<svg class="w-16 h-16 text-[#1363C6]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5206<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>`; 5207 } 5208 5209 // Set Technology Badges 5210 const techDiv = document.getElementById('modalProjectTech'); 5211 techDiv.innerHTML = ''; 5212 if (project.technologies) { 5213 const techs = project.technologies.split(',').map(t => t.trim()); 5214 techs.forEach(tech => { 5215 techDiv.innerHTML += `<span class="px-3 py-1 bg-white/50 dark:bg-gray-800/50 text-[#1363C6] dark:text-[#4a8dd8] text-[10px] font-black uppercase tracking-wider rounded-lg border border-[#1363C6]/10 dark:border-white/10 shadow-sm">${tech}</span>`; 5216 }); 5217 } 5218 5219 // Show modal 5220 modal.classList.remove('hidden'); 5221 modal.classList.add('flex'); 5222 document.body.style.overflow = 'hidden'; 5223
5224 gsap.fromTo('.modal-content', { opacity: 0, scale: 0.9, y: 30 }, { opacity: 1, scale: 1, y: 0, duration: 0.4, ease: 'power3.out' }); 5225 } 5226 }); 5227 }); 5228 5229 // Close modal 5230 function closeModal() { 5231 gsap.to('.modal-content', { opacity: 0, scale: 0.9, y: 30, duration: 0.3, ease: 'power2.in', onComplete: () => { 5232 modal.classList.add('hidden'); modal.classList.remove('flex'); document.body.style.overflow = 'auto'; 5233 }}); 5234 } 5235 closeBtn.addEventListener('click', closeModal); 5236 modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); }); 5237 document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal(); }); 5238 }); 5239 </script>
5239 5240
5240<script> 5241 document.addEventListener('DOMContentLoaded', function() { 5242 const jobs = []; 5243 const modal = document.getElementById('jobModal'); 5244 const closeBtn = document.getElementById('closeJobModal'); 5245 5246 // Open modal when clicking on job cards 5247 document.querySelectorAll('#careers-section-6abf0c0295826 .job-card').forEach(card => { 5248 card.addEventListener('click', (e) => { 5249 if (e.target.closest('a')) return; 5250 5251 const jobId = card.dataset.jobId; 5252 const job = jobs.find(j => j.id == jobId); 5253 5254 if (job) { 5255 // Set text content 5256 document.getElementById('modalJobTitle').textContent = job.title || ''; 5257 document.getElementById('modalJobLocation').textContent = job.location || 'Not Specified'; 5258 document.getElementById('modalJobDescription').innerHTML = job.description || 'No detailed description provided.'; 5259 document.getElementById('modalJobActionUrl').href = "https://satritech.com/career/:slug".replace(':slug', job.slug); 5260 5261 // Set Category Badge 5262 const catBadge = document.getElementById('modalJobCategoryBadge'); 5263 if (job.job_category?.name) { 5264 catBadge.innerHTML = `<span class="px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest bg-[#1363C6]/10 text-[#1363C6] dark:bg-[#1363C6]/20 dark:text-[#4a8dd8] border border-[#1363C6]/20">${job.job_category.name}</span>`; 5265 } else { 5266 catBadge.innerHTML = ''; 5267 } 5268 5269 // Set Deadline 5270 const deadlineDiv = document.getElementById('modalJobDeadlineArea'); 5271 if (job.deadline) { 5272 const date = new Date(job.deadline); 5273 document.getElementById('modalJobDeadline').textContent = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); 5274 deadlineDiv.classList.remove('hidden'); 5275 } else { 5276 deadlineDiv.classList.add('hidden'); 5277 } 5278 5279 // Show modal 5280 modal.classList.remove('hidden'); 5281 modal.classList.add('flex'); 5282 document.body.style.overflow = 'hidden'; 5283
5284 gsap.fromTo('.modal-content', { opacity: 0, scale: 0.9, y: 30 }, { opacity: 1, scale: 1, y: 0, duration: 0.4, ease: 'power3.out' }); 5285 } 5286 }); 5287 }); 5288 5289 // Close modal 5290 function closeModal() { 5291 gsap.to('.modal-content', { opacity: 0, scale: 0.9, y: 30, duration: 0.3, ease: 'power2.in', onComplete: () => { 5292 modal.classList.add('hidden'); modal.classList.remove('flex'); document.body.style.overflow = 'auto'; 5293 }}); 5294 } 5295 closeBtn.addEventListener('click', closeModal); 5296 modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); }); 5297 document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal(); }); 5298 }); 5299 </script>
5299 5300 5301
5301<script> 5302 // Optimized Particle System with RequestAnimationFrame 5303 (function() { 5304 const canvas = document.getElementById('particles-canvas'); 5305 if (!canvas) return; 5306 5307 const ctx = canvas.getContext('2d', { 5308 alpha: true 5309 }); 5310 let particles = []; 5311 let animationFrameId; 5312 const mouse = { 5313 x: null, 5314 y: null, 5315 radius: 150 5316 }; 5317 5318 function resizeCanvas() { 5319 canvas.width = window.innerWidth; 5320 canvas.height = window.innerHeight; 5321 initParticles(); 5322 } 5323 5324 window.addEventListener('resize', resizeCanvas); 5325 window.addEventListener('mousemove', (e) => { 5326 mouse.x = e.x; 5327 mouse.y = e.y; 5328 }); 5329 window.addEventListener('mouseout', () => { 5330 mouse.x = null; 5331 mouse.y = null; 5332 }); 5333 5334 class Particle { 5335 constructor(x, y) { 5336 this.x = x; 5337 this.y = y; 5338 this.size = Math.random() * 2.5 + 0.8; 5339 this.baseX = x; 5340 this.baseY = y; 5341 this.density = Math.random() * 30 + 1; 5342 const opacity = Math.random() * 0.4 + 0.2; 5343 this.color = Math.random() < 0.6 ? 5344 `rgba(19, 99, 198, ${opacity})` : 5345 `rgba(76, 175, 249, ${opacity})`; 5346 } 5347 5348 draw() { 5349 ctx.fillStyle = this.color; 5350 ctx.beginPath(); 5351 ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); 5352 ctx.fill(); 5353 } 5354 5355 update() { 5356 if (mouse.x !== null) { 5357 const dx = mouse.x - this.x; 5358 const dy = mouse.y - this.y; 5359 const distance = Math.sqrt(dx * dx + dy * dy); 5360 5361 if (distance < mouse.radius) { 5362 const force = (mouse.radius - distance) / mouse.radius; 5363 const directionX = (dx / distance) * force * this.density; 5364 const directionY = (dy / distance) * force * this.density; 5365 this.x -= directionX; 5366 this.y -= directionY; 5367 return; 5368 } 5369 } 5370 5371 if (this.x !== this.baseX) this.x -= (this.x - this.baseX) / 10; 5372 if (this.y !== this.baseY) this.y -= (this.y - this.baseY) / 10; 5373 } 5374 } 5375 5376 function initParticles() { 5377 particles = []; 5378 const numberOfParticles = Math.floor((canvas.width * canvas.height) / 15000); 5379 for (let i = 0; i < numberOfParticles; i++) { 5380 particles.push(new Particle( 5381 Math.random() * canvas.width, 5382 Math.random() * canvas.height 5383 )); 5384 } 5385 } 5386 5387 function connectParticles() { 5388 const maxDistance = (canvas.width / 7) * (canvas.height / 7); 5389 for (let a = 0; a < particles.length; a++) { 5390 for (let b = a + 1; b < particles.length; b++) { 5391 const dx = particles[a].x - particles[b].x; 5392 const dy = particles[a].y - particles[b].y; 5393 const distance = dx * dx + dy * dy; 5394 5395 if (distance < maxDistance) { 5396 const opacity = 1 - (distance / 20000); 5397 ctx.strokeStyle = `rgba(19, 99, 198, ${opacity * 0.35})`; 5398 ctx.lineWidth = 1; 5399 ctx.beginPath();
5400 ctx.moveTo(particles[a].x, particles[a].y); 5401 ctx.lineTo(particles[b].x, particles[b].y); 5402 ctx.stroke(); 5403 } 5404 } 5405 } 5406 } 5407 5408 function animate() { 5409 ctx.clearRect(0, 0, canvas.width, canvas.height); 5410 particles.forEach(particle => { 5411 particle.draw(); 5412 particle.update(); 5413 }); 5414 connectParticles(); 5415 animationFrameId = requestAnimationFrame(animate); 5416 } 5417 5418 resizeCanvas(); 5419 animate(); 5420 })(); 5421 5422 // Optimized Back to Top Button 5423 (function() { 5424 const backToTopBtn = document.getElementById('back-to-top'); 5425 if (!backToTopBtn) return; 5426 5427 let ticking = false; 5428 5429 function updateButtonVisibility() { 5430 if (window.pageYOffset > 400) { 5431 backToTopBtn.classList.remove('opacity-0', 'invisible'); 5432 backToTopBtn.classList.add('opacity-100', 'visible'); 5433 } else { 5434 backToTopBtn.classList.add('opacity-0', 'invisible'); 5435 backToTopBtn.classList.remove('opacity-100', 'visible'); 5436 } 5437 ticking = false; 5438 } 5439 5440 window.addEventListener('scroll', () => { 5441 if (!ticking) { 5442 window.requestAnimationFrame(updateButtonVisibility); 5443 ticking = true; 5444 } 5445 }, { 5446 passive: true 5447 }); 5448 5449 backToTopBtn.addEventListener('click', () => { 5450 window.scrollTo({ 5451 top: 0, 5452 behavior: 'smooth' 5453 }); 5454 }); 5455 })(); 5456 5457 // Auto-dismiss Flash Messages 5458 setTimeout(() => { 5459 document.querySelectorAll('[role="alert"]').forEach(alert => { 5460 alert.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out'; 5461 alert.style.opacity = '0'; 5462 alert.style.transform = 'translateX(100%)'; 5463 setTimeout(() => alert.parentElement?.remove(), 500); 5464 }); 5465 }, 5000); 5466 5467 // Optimized Scroll Reveal with Immediate Rendering 5468 (function() { 5469 const observer = new IntersectionObserver((entries) => { 5470 entries.forEach(entry => { 5471 if (entry.isIntersecting) { 5472 entry.target.classList.add('revealed'); 5473 observer.unobserve(entry.target); 5474 } 5475 }); 5476 }, { 5477 threshold: 0.01, 5478 rootMargin: '100px 0px' 5479 }); 5480 5481 // Observe elements immediately when DOM is ready 5482 if (document.readyState === 'loading') { 5483 document.addEventListener('DOMContentLoaded', () => { 5484 document.querySelectorAll('.scroll-reveal').forEach(el => { 5485 el.classList.add('animate-on-scroll'); 5486 observer.observe(el); 5487 }); 5488 }); 5489 } else { 5490 document.querySelectorAll('.scroll-reveal').forEach(el => { 5491 el.classList.add('animate-on-scroll'); 5492 observer.observe(el); 5493 }); 5494 } 5495 })(); 5496 </script>
5496 5497</body> 5498 5499</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.