1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Quranera</title> 7 8 <!-- fonts start --> 9 <!-- 1. Preconnect to Google's servers early (This is the "Preload" step for Google Fonts) --> 10 <link rel="preconnect" href="https://fonts.googleapis.com" /> 11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 12 <!-- 2. Fetch the stylesheet asynchronously/in parallel --> 13 <link 14 href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Outfit:[email protected]&display=swap" 15 rel="stylesheet" 16 /> 17 <!-- fonts end --> 18 19 <link rel="icon" type="image/x-icon" href="image/favicon.ico" /> 20 <link href="./output.css" rel="stylesheet" /> 21 <link href="./style.css" rel="stylesheet" /> 22 <link href="./cssIndex.css" href="" /> 23 24 <!-- Dynamic Base Tag to handle `relative` paths for local and `root-relative` paths for live environments --> 25
25<script> 26 (function () { 27 const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'; 28 29 const base = document.createElement('base'); 30 31 // If local, use an empty string or relative current path 32 // If live on Firebase, use the root / 33 base.href = isLocal ? '' : '/'; 34 35 document.head.appendChild(base); 36 })(); 37 </script>
37 38 <!-- "endorsement-videos" section styles --> 39 <link rel="stylesheet" href="./css/endorsement-videos.css" /> 40 <!-- "why-quranera-videos" section styles --> 41 <link rel="stylesheet" href="./css/why-quranera-video.css" /> 42 <!-- navbar --> 43
43<script defer src="./navbar.js"></script>
43 44 </head> 45 46 <body> 47 <!-- menu navbar --> 48 <master-navbar class="block sticky top-0 z-[1000] w-full min-h-[80px] bg-white"></master-navbar> 49 50 <!-- "Learning Quran was never so fun!" section --> 51 <section 52 class="colorsfon px-5 text-center relative min-h-screen overflow-hidden flex items-center pb-12 pt-10 md:pt-19" 53 > 54 <div class="absolute md:-top-[5%] left-0 h-full hero-svg-bg"> 55 <img src="image/svg/vektor.svg" alt="Desktop Vektor" class="hidden md:block" /> 56 <img 57 src="image/svg/index-mobile-vektor.svg" 58 alt="Mobile Vektor" 59 class="block md:hidden w-full h-auto object-cover" 60 /> 61 </div> 62 <div 63 class="w-full md:pb-[10%] max-w-[1440px] pt-[0px] md:pt-[64px] mx-auto px-0 md:px-[32px] flex flex-col md:flex-row relative z-10" 64 > 65 <div class="w-full md:w-1/2 text-left md:text-left mb-10 md:mb-0 order-1 md:order-2"> 66 <h1 class="text-[43px] md:text-[72px] font-fredoka font-medium leading-[1.2] mb-6 text-white"> 67 The New Era of <br /> 68 Quran Learning! 69 </h1> 70 <p class="text-[18px] md:text-[24px] font-outfit text-white mb-8 mx-auto md:mx-0 leading-relaxed"> 71 72 A gamified program that turns learning Quran into <br class="hidden md:block" /> 73 an adventure. 74 </p> 75 <div 76 class="flex flex-col sm:flex-row font-outfit justify-center md:justify-start space-y-4 sm:space-y-0 sm:space-x-4" 77 > 78 <a href="https://app.quranera.com/registration" rel="noopener noreferrer" 79 ><button class="btn btn-primary btn-lg w-full sm:w-auto">7-Day Free Trial</button></a 80 > 81 <a href="games.html" 82 ><button class="btn btn-secondary btn-lg w-full sm:w-auto"> 83 <svg 84 width="24" 85 height="24" 86 viewBox="0 0 24 24" 87 fill="none" 88 xmlns="http://www.w3.org/2000/svg" 89 > 90 <path 91 d="M17 4C20.3137 4 23 6.68629 23 10V14C23 17.3137 20.3137 20 17 20H7C3.68629 20 1 17.3137 1 14V10C1 6.68629 3.68629 4 7 4H17ZM10 9H8V11H6V13H7.999L8 15H10L9.999 13H12V11H10V9ZM18 13H16V15H18V13ZM16 9H14V11H16V9Z" 92 fill="#3D464C" 93 /> 94 </svg> 95 96 Try Games Now 97 </button></a 98 > 99 </div> 100 </div> 101 102 <div class="w-full md:w-1/2 relative min-h-[300px] md:min-h-[500px] flex items-center justify-center order-1 md:order-2 mt-[25%] lg:mt-0 md:mb-0"> 103 <div style="margin-top: -38%; margin-right: -13%" class="text-center p-6 rounded-lg"> 104 <div id="videoContainer"> 105 <img id="animatedGif" 106 src="image/snail_intro.webp" 107 alt="Animatsiya" 108 class="gif-display mx-auto w-full sm:w-auto" /> 109 </div> 110 111 <div id="imageContainer" style="display: none;"> 112 <img id="snailWebP" src="image/snail_intro.webp" class="mx-auto w-full sm:w-auto" alt="Snail Animation"> 113 </div> 114 </div> 115 </div> 116 </div> 117 </section> 118 119 <div class="w-full max-w-[1440px] md:px-[32px] mx-auto px-5 text-center mt-[28px] md:mt-[76px] mb-0 md:mb-[48px]"> 120 <div class="crem-card"> 121 <div class="card-left pb-6 md:pb-0"> 122 <img src="image/svg/south-american-continent.svg" alt="Icon" class="card-icon" /> 123 <div class="card-text flex flex-col gap-2 text-left"> 124 <h3 class="font-outfit card-title text-[20px] md:text-[32px] font-bold leading-tight text-white"> 125 Quran Era Named a GESS Education Awards 2026 Finalist 126 </h3> 127 <p class="font-outfit text-tertiary-colour text-[16px] md:text-[24px] leading-snug"> 128 Best Game-Based Learning Platform 129 </p> 130 <p class="font-outfit text-tertiary-colour text-[16px] md:text-[24px] leading-snug"> 131 Weâre proud to be shortlisted for this award. 132 </p> 133 </div> 134 </div> 135 136 <img src="image/logo/GESS_Awards_2026_FINALIST_03.png" alt="Quran Era Logo" class="h-auto mr-[1%] w-auto max-w-[200px] object-contain" /> 137 138 <!-- <a href="https://app.quranera.com/registration" rel="noopener noreferrer" class="buy-link"> 139 <button class="btn btn-primary btn-lg font-outfit w-full sm:w-auto text-[18px]">Buy now</button> 140 </a> --> 141 </div> 142 </div> 143 144 <!-- "why quran era" section --> 145 <section class="colorsfon py-5 md:py-12"> 146 <div class="container mx-auto px-5 md:px-7 text-center"> 147 <h2 148 149 class="md:text-[64px] mt-[20%] mb-[6%] md:mt-[7%] md:mb-[6%] text-[44px] font-fredoka title-colors leading-[1.25] md:leading-[1]" 150 > 151 Why Quran Era? 152 </h2> 153
154 <!-- 1. The Interactive Component Container --> 155 <div 156 id="why-quranera-main-container" 157 class="why-quranera-video-wrapper bg-transparent rounded-3xl overflow-hidden relative" 158 > 159 <div id="why-quranera-loading" class="flex flex-col items-center justify-center text-center p-20"> 160 <div class="why-quranera-loader mb-4"></div> 161 <p class="text-sky-600 font-medium">Loading Quran Era Adventure...</p> 162 </div> 163 164 <div 165 id="why-quranera-error" 166 class="hidden flex flex-col items-center justify-center text-center p-10" 167 > 168 <p class="mb-4">Oops! We couldn't load the video.</p> 169 <button onclick="location.reload()" class="retry-button bg-sky-500 px-6 py-2 rounded-full"> 170 Retry 171 </button> 172 </div> 173 174 <div id="why-quranera-content" class="hidden relative cursor-pointer"> 175 <img 176 id="why-quranera-poster" 177 src="" 178 alt="Why Quran Era" 179 class="w-full h-auto cursor-pointer border-[16px] border-[#CDEFC6] rounded-[32px] block" 180 /> 181 <div 182 id="why-quranera-play-overlay" 183 class="absolute inset-0 flex items-center justify-center transition-all" 184 > 185 <div class="why-quranera-play-btn"> 186 <svg width="32" height="32" viewBox="0 0 24 24" fill="white"> 187 <path 188 d="M8 5v14l11-7z" 189 fill="#fff" 190 stroke="#fff" 191 stroke-width="4" 192 stroke-linejoin="round" 193 /> 194 </svg> 195 </div> 196 </div> 197 <div id="why-quranera-video-holder"></div> 198 </div> 199 </div> 200 </div> 201 </section> 202 203 <section class="colorsfon pt-12 pb-0 md:py-12"> 204 <div class="container mx-auto px-5"> 205 <h2 206 style="margin-top: 5%" 207 class="md:text-[64px] text-[44px] text-center font-fredoka title-colors mb-10 md:mb-12" 208 > 209 Features 210 </h2> 211 </div> 212 213 <div 214 class="colorsfon w-full max-w-[1440px] md:px-[32px] mx-auto px-5 flex flex-col md:flex-row items-center md:items-start justify-center md:justify-between space-y-8 md:space-y-0 md:space-x-12 mb-0 md:mb-12" 215 > 216 <div class="w-full md:w-3/3 flex justify-center"> 217 <div class="relative rounded-3xl md:p-6 lg:p-8 mx-auto border-light-g"> 218 <img src="image/arabic-letters-come-to-life.webp" alt="Arabic Letters Come to Life" /> 219 </div> 220 </div> 221 222 <div 223 class="font-['Outfit'] mt-0 md:mt-[10%] md:w-2/3 font-normal text-[20px] leading-[180%] tracking-[0%] align-middle" 224 > 225 <h3 226 class="font-fredoka text-[#3D464C] font-normal md:text-[48px] text-[26px] leading-[135%] tracking-[0%] align-middle" 227 > 228 Characters Built for Memory 229 </h3> 230 <p 231 style="color: #65727d" 232 class="md:text-[20px] text-[16px] font-outfit font-normal mt-5 leading-relaxed mx-auto md:mx-0" 233 > 234 Watch Arabic letters come to life! In Quran Era, every letter is a unique character with its own 235 name and personality. By giving each shape a distinct identity, we use proven mnemonics to help 236 children build a lasting connection with the alphabet. This makes even the trickiest letters 237 easy to distinguish and impossible to forget. 238 </p> 239 </div> 240 </div> 241 <div 242 class="colorsfon w-full max-w-[1440px] md:px-[32px] mx-auto px-5 flex flex-col md:flex-row items-center md:items-start justify-center md:justify-between mb-16 md:mb-12" 243 > 244 <div class="w-full md:w-2/3 flex justify-center order-1 md:order-2 mb-6 md:mb-0"> 245 <div class="relative rounded-3xl md:p-6 lg:p-8 mx-auto border-light-g"> 246 <img 247 src="image/story.webp" 248 width="100%" 249 alt="Mobile Story Approach" 250 class="block md:hidden mt-[20%]" 251 /> 252 253 <img 254 src="image/story-based-approach.webp" 255 alt="Story-Based Approach" 256 class="hidden md:block" 257 /> 258 </div> 259 </div> 260 261 <div class="w-full mt-0 md:w-1/3 md:text-left order-2 md:order-1 md:mt-[16%]"> 262 <h3 263 class="font-['Fredoka_One'] text-[#3D464C] font-normal md:text-[48px] text-[26px] leading-[135%] tracking-[0%] align-middle" 264 > 265 Where Every Rule Tells a Story 266 </h3> 267 <p 268 style="color: #65727d" 269 class="md:text-[20px] text-[16px] font-normal font-outfit mt-5 leading-relaxed max-w-lg mx-auto md:mx-0" 270 > 271 We introduce complex Quranic rules through the power of imaginative storytelling. These vibrant 272 animations simplify the learning process by connecting new information to fun and memorable 273 plots. It is the most natural way for children to master Tajweed without feeling overwhelmed. 274 </p> 275 </div> 276 </div> 277 <div 278 class="colorsfon w-full max-w-[1440px] md:px-[32px] mx-auto px-5 flex flex-col md:flex-row items-center md:items-start justify-center md:justify-between pb-6 md:pb-12" 279 > 280 <!-- <div class="w-full md:w-3/3 flex justify-center mb-8 md:mb-0"> 281 <img src="image/svg/learning-adventure.svg" alt="Learning Adventure" /> --> 282 <div class="w-full md:w-3/3 flex justify-center mb-8 md:mb-0"> 283 <img src="image/learning-adventure.webp" width="795" alt="Learning Adventure" /> 284 </div> 285 <div style="margin-left: 4%" class="w-full mt-0 md:mt-[15%] md:w-2/3 md:text-left"> 286 <h3 287 class="font-['Fredoka_One'] text-[#3D464C] font-normal md:text-[48px] text-[26px] leading-[135%] tracking-[0%] align-middle" 288 > 289 A Worldwide Learning Adventure 290 </h3> 291 <p 292 style="color: #65727d" 293 class="md:text-[20px] text-[16px] font-normal font-outfit mt-5 leading-relaxed max-w-lg mx-auto md:mx-0" 294 > 295 Join Qari Snail and his friends on a spectacular mission across 64 different c
295ountries. Students 296 uncover interesting facts at every stop along the way as they master Quran reading. By blending 297 Quranic education with world geography, we create an immersive experience that children look 298 forward to every day. 299 </p> 300 </div> 301 </div> 302 <div 303 class="colorsfon w-full max-w-[1440px] md:px-[32px] mx-auto px-5 flex flex-col md:flex-row items-center md:items-start justify-center md:justify-between mb-16 md:mb-0" 304 > 305 <div class="w-full md:w-2/3 flex justify-center order-1 md:order-2 mt-8 md:mt-0"> 306 <img src="image/100+games-&-activities.webp" width="847" alt="100+ Games and Activities" /> 307 </div> 308 <div class="w-full md:w-2/3 md:text-left order-2 md:order-1 mt-0 md:mt-[11%]"> 309 <h3 310 class="font-['Fredoka_One'] lg:mr-[25%] text-[#3D464C] font-normal md:text-[48px] text-[26px] leading-[135%] tracking-[0%] align-middle" 311 > 312 Gamified Learning That Works 313 </h3> 314 <p 315 style="color: #65727d" 316 class="font-outfit lg:mr-[25%] mt-[4%] font-normal md:text-[20px] text-[16px] leading-[180%] tracking-normal" 317 > 318 Discover over 100 captivating games & activities designed to sharpen Quran reading skills. Our 319 gamified approach transforms traditional study into a rewarding journey filled with excitement 320 and play. Every activity is a new opportunity for your child to learn, grow, and succeed in an 321 experience they truly love. 322 </p> 323 </div> 324 </div> 325 <div 326 class="colorsfon w-full max-w-[1440px] md:px-[32px] mx-auto px-5 flex flex-col md:flex-row items-center md:items-start justify-center md:justify-between mb-0 md:mb-8" 327 > 328 <div class="w-full md:w-2/3 flex justify-center mb-8 md:mb-0"> 329 <img 330 src="image/results-mobi.webp" 331 alt="No Complicated Terms Mobile" 332 class="block md:hidden w-full h-auto" 333 /> 334 335 <img 336 src="image/no-tomplicated-terms.webp" 337 alt="No Complicated Terms" 338 class="hidden md:block w-full h-auto" 339 /> 340 </div> 341 <div class="w-full md:w-1/2 mt-0 md:text-left md:mt-[15%] pb-[15%] md:pl-[5%]"> 342 <h3 343 class="font-['Fredoka_One'] text-[#3D464C] font-normal md:text-[48px] text-[26px] leading-[135%] tracking-[0%] align-middle" 344 > 345 Simple Language & Big <br />Results 346 </h3> 347 348 <p 349 style="color: #65727d" 350 class="text-p-color font-outfit mb-6 md:text-[20px] text-[16px] font-normal mt-5 leading-relaxed max-w-lg mx-auto md:mx-0" 351 > 352 Say goodbye to complicated terms and confusing explanations! We bridge the gap between abstract 353 rules and daily life by using relatable examples that make sense to young minds. By keeping the 354 language light and familiar, we ensure every student feels capable and inspired to move forward. 355 </p> 356 </div> 357 </div> 358 </section> 359 360 <section 361 id="combined-experts-section" 362 class="relative w-full min-h-[600px] overflow-hidden bg-no-repeat bg-top lg:bg-transparent pb-[0px] md:pb-[40px]" 363 > 364 <div class="w-full max-w-[1440px] md:px-[32px] mx-auto relative z-10"> 365 <h2 366 class="md:text-[64px] text-[44px] px-5 md:px-7 font-normal font-fredoka title-colors text-center mb-10 md:mb-16 leading-[1.25] md:leading-[1]" 367 > 368 What Experts Say 369 </h2> 370 371 <img 372 src="image/any1.webp" 373 alt="Arabic letter any" 374 class="absolute hidden lg:block bottom-[2%] w-18 h-auto z-10 transform translate-y-1/2" 375 style="z-index: 2; left: -6%; width: 107px; transform: rotate(1.93deg); height: 136px; bottom: -6%" 376 /> 377 378 <div 379 class="font-outfit flex flex-col lg:flex-row justify-center items-stretch gap-6 mb-10 md:mb-16 relative" 380 > 381 <div 382 class="bg-white rounded-lg box-say shadow-lg p-7 md:p-4 lg:p-8 flex flex-col items-start text-left flex-1 max-w-[90%] sm:max-w-none mx-auto lg:h-[452px] lg:justify-between" 383 > 384 <img src="image/quote-left-or.webp" alt="Quote" class="w-10 h-10 lg:w-8 lg:h-8 mb-4" /> 385 <p 386 style="line-height: 180%" 387 class="text-p-color md:text-[20px] text-[18px] text-base lg:text-xl mb-6" 388 > 389 Quran Era offers a creative and engaging way for children to learn the Quran and Arabic. The 390 program is beautifully designed and makes learning enjoyable and meaningful for young 391 learners. 392 </p> 393 <div class="flex flex-row items-center mt-auto w-full"> 394 <img 395 style="margin-right: 3%" 396 src="image/sheikh-mufti-menk.webp" 397 class="w-[96px] h-[96px] md:w-[112px] md:h-[112px] object-cover" 398 /> 399 <div class="flex-grow text-left"> 400 <p 401 class="font-semibold title-colors box-say-two md:text-[22px] text-[18px]" 402 > 403 Sheikh Mufti Menk 404 </p> 405 <p class="box-say-two-p md:text-[18px] text-[18px]">Grand Mufti of Zimbabwe</p> 406 </div> 407 </div> 408 </div> 409 410 <div 411 class="bg-white rounded-lg mt-[3%] lg:mt-0 shadow-lg box-say p-7 md:p-4 lg:p-8 flex flex-col items-start text-left flex-1 max-w-[90%] sm:max-w-none mx-auto lg:w-[459px] lg:h-[524px] lg:justify-between" 412 > 413 <img src="image/quote-cen-gr.webp" alt="Quote" class="w-10 h-10 lg:w-8 lg:h-8 mb-4" /> 414 <p 415 style="line-height: 180%" 416 class="text-p-color md:text-[20px] text-[18px] text-base lg:text-xl mb-6" 417 > 418 Quran Era is a real game-changer for children. The platform keeps kids engaged and 419 motivated. I have seen the results with my own children, and by the end, they are able to 420 read from the Quran, mashaAllah. 421 </p> 422 <div class="flex flex-row items-center mt-auto w-full"> 423 <img 424 style="margin-right: 3%" 425 src="image/sheikh-belal-assad.webp" 426 class="w-[96px] h-[96px] md:w-[112px] md:h-[112px] object-cover" 427 /> 428 <div class="flex-grow text-left"> 429 <p 430 class="font-semibold title-colors box-say-two md:text-[22px] text-[18px]" 431 > 432 Sheikh Belal Assad 433 </p> 434 <p class="box-say-two-p md:text-[18px] text-[18px]">Community Leader and Educator</p> 435 </div> 436 </div> 437 </div> 438 439 <div 440 class="bg-white rounded-lg mt-[3%] lg:mt-0 shadow-lg box-say p-7 md:p-4 lg:p-8 flex flex-col items-start text-left flex-1 max-w-[90%] sm:max-w-none mx-auto lg:w-[459px] lg:h-[524px] lg:justify-between relative" 441 > 442 <img 443 style="left: 21%; top: -50%; width: 64%; height: auto; z-index: 0" 444 src="image/qush.webp" 445 alt="Bird" 446 class="absolute hidden lg:block" 447 /> 448 <img src="image/quote-rg-blue.webp" alt="Quote" class="w-10 h-10 lg:w-8 lg:h-8 mb-4" /> 449 <p 450 style="line-height: 180%" 451 class="text-p-color md:text-[20px] text-[18px] text-base lg:text-xl mb-6" 452 > 453 It is impressive and well designed for children. It keeps them engaged, excited, and happy 454 to learn. A wonderful platform that makes learning something children enjoy. 455 </p> 456 <div class="flex flex-row items-center mt-auto w-full"> 457 <img 458 style="margin-right: 3%" 459 src="image/svg/abdulazeez-abdulraheem.svg" 460 class="w-[90px] h-[90px] lg:w-auto lg:h-auto" 461 /> 462 <div class="flex-grow text-left"> 463 <p 464 class="font-semibold title-colors box-say-two md:text-[22px] text-[18px]" 465 > 466 Abdulazeez Abdulraheem 467 </p> 468 <p class="box-say-two-p md:text-[18px] text-[18px]"> 469 Founder, Understand Quran Academy 470 </p> 471 </div> 472 </div> 473 </div> 474 </div> 475 </div> 476 </section> 477 <div class="w-full min-h-[120px] lg:h-[300px] pb-8" style="background-color: #e8f7e4"></div> 478 479 <section class="relative w-full overflow-hidden -mt-[15%]"> 480 <!-- BACKGROUND (SVG) --> 481 <div 482 class="relative w-full overflow-hidden min-h-[1155px] md:min-
482h-[505px] flex items-center justify-center" 483 > 484 <div class="absolute inset-0 z-0"> 485 <svg 486 class="hidden md:block w-full h-full" 487 viewBox="0 0 1920 505" 488 fill="none" 489 xmlns="http://www.w3.org/2000/svg" 490 preserveAspectRatio="none" 491 > 492 <path 493 d="M834.093 466.243C430 535.5 245.5 495.5 10 466.243L1216.47 34.8823C1408.54 -34.039 1734.19 24.6405 1873 62.5954L834.093 466.243Z" 494 fill="#75D069" 495 /> 496 <path 497 d="M0 475.544V0C168.323 77.8273 733.94 20.4374 988.841 8.45949C1336.03 -7.85524 1625.55 135.352 1920 41.089V424.183C1670.59 453.791 1268.46 521.285 919.622 475.544C407.183 408.352 93.0243 447.547 0 475.544Z" 498 fill="#8AD97E" 499 /> 500 </svg> 501 502 <svg 503 class="block md:hidden w-full h-full" 504 viewBox="0 0 390 981" 505 fill="none" 506 xmlns="http://www.w3.org/2000/svg" 507 preserveAspectRatio="none" 508 > 509 <path 510 d="M0.000166893 971.836L0 14.8367C50 32.1003 90 38.3365 163.5 27.8362C237 17.3359 314 -20.6638 430 14.8363V965.336C390.5 983.836 307.5 985.836 251.5 971.836C150.931 946.694 98 942.336 0.000166893 971.836Z" 511 fill="#8AD97E" 512 /> 513 </svg> 514 </div> 515 516 <div class="relative z-10 container mx-auto px-4"> 517 <div class="py-20 md:py-24"> 518 <div 519 class="max-w-[1200px] mx-auto flex flex-col md:flex-row justify-between items-center md:gap-y-0 md:gap-x-10" 520 > 521 <!-- Card 1 --> 522 <div class="flex flex-col items-center text-center mb-[40%] md:mb-0"> 523 <div class="h-[100px] flex items-center justify-center"> 524 <img src="image/svg/creative.svg" alt="Creative" class="w-auto h-auto" /> 525 </div> 526 <p 527 class="mt-10 text-white font-['Outfit'] font-semibold text-[28px] md:text-[36px] leading-[135%]" 528 > 529 Creative 530 </p> 531 </div> 532 533 <!-- Card 2 --> 534 <div class="flex flex-col items-center text-center"> 535 <div class="h-[100px] flex items-center justify-center"> 536 <img src="image/svg/engaging.svg" alt="Engaging" class="w-auto h-auto" /> 537 </div> 538 <p 539 class="mt-10 text-white font-['Outfit'] font-semibold text-[28px] md:text-[36px] leading-[135%]" 540 > 541 Engaging 542 </p> 543 </div> 544 545 <!-- Card 3 --> 546 <div class="flex flex-col items-center text-center mt-[40%] md:mt-0"> 547 <div class="h-[100px] flex items-center justify-center"> 548 <img src="image/svg/authentic.svg" alt="Authentic" class="w-auto h-auto" /> 549 </div> 550 <p 551 class="mt-10 text-white font-['Outfit'] font-semibold text-[28px] md:text-[36px] leading-[135%]" 552 > 553 Authentic 554 </p> 555 </div> 556 </div> 557 </div> 558 </div> 559 </div> 560 </section> 561 562 <!-- "community leaders endorsement' section --> 563 <section class="w-full font-fredoka endorsement-carousel-container pb-12"> 564 <h2 565 class="text-center leading-[1.25] p-[2%] md:p-0 md:text-[64px] text-[44px] font-normal title-colors mb-0 md:mb-12 mt-[15%] md:mt-[8%]" 566 > 567 Community Leaders Endorse 568 <br class="hidden md:block" /> 569 Quran Era 570 </h2> 571 572 <!-- Loading State --> 573 <div id="endorsement-loading-state"> 574 <div class="endorsement-loading-spinner mb-4"></div> 575 <p class="text-gray-500 font-medium animate-pulse">Loading videos...</p> 576 </div> 577 578 <!-- Error State --> 579 <div id="error-state" class="hidden text-center py-10"> 580 <p class="text-red-500 font-semibold mb-2">Could not load videos.</p> 581 <p class="text-gray-500 text-sm mb-4" id="error-msg"></p> 582 <button 583 onclick="location.reload()" 584 class="bg-gray-200 px-4 py-2 rounded-md hover:bg-gray-300 transition" 585 > 586 Retry 587 </button> 588 </div> 589 590 <!-- Carousel Content --> 591 <div id="carousel-content" style="display: none"> 592 <!-- carousel poster images and videos --> 593 <div class="carousel-wrapper"> 594 <div class="endorsement-carousel-track" id="endorsementCarouselTrack"></div> 595 </div> 596 <!-- carousel navigation buttons --> 597 <div class="md:py-8"> 598 <div class="flex justify-center items-center gap-8 w-full max-w-full mx-auto overflow-hidden"> 599 <button id="endorsementPrevBtn" class="endorsement-svg-container"> 600 <svg 601 width="64" 602 height="64"
603 viewBox="0 0 64 64" 604 fill="none" 605 xmlns="http://www.w3.org/2000/svg" 606 > 607 <rect class="endorsement-svg-background" width="64" height="64" rx="12" /> 608 <path 609 class="endorsement-svg-arrow" 610 d="M30.4431 32.0009L37.0428 38.6005L35.1572 40.4861L26.6719 32.0009L35.1572 23.5156L37.0428 25.4012L30.4431 32.0009Z" 611 /> 612 </svg> 613 </button> 614 <button id="endorsementNextBtn" class="endorsement-svg-container"> 615 <svg 616 width="64" 617 height="64" 618 viewBox="0 0 64 64" 619 fill="none" 620 xmlns="http://www.w3.org/2000/svg" 621 > 622 <rect class="endorsement-svg-background" width="64" height="64" rx="12" /> 623 <path 624 class="endorsement-svg-arrow" 625 d="M33.5606 32.0009L26.9609 25.4012L28.8466 23.5156L37.3318 32.0009L28.8466 40.4861L26.9609 38.6005L33.5606 32.0009Z" 626 /> 627 </svg> 628 </button> 629 </div> 630 </div> 631 </div> 632 </section> 633 634 <section class="colorsfon py-16 px-5 font-fredoka text-center"> 635 <div style="max-width: 89rem" class="w-full max-w-[1440px] md:px-[32px] mx-auto"> 636 <h2 637 class="text-center leading-tight md:text-[64px] text-[44px] font-normal title-colors mb-[8%] md:mb-15" 638 > 639 Testimonials - Proven 640 <br class="hidden md:block" /> 641 to Work! 642 </h2> 643 644 <section class="font-outfit"> 645 <!-- WRAPPER --> 646 <div class="relative"> 647 <!-- MOBILE: horizontal swipe | DESKTOP: grid --> 648 <div 649 id="testimonialsTrack" 650 class="flex scrollbar-hide md:grid md:grid-cols-2 gap-6 md:gap-x-6 overflow-x-auto md:overflow-visible snap-x snap-mandatory scroll-smooth [-webkit-overflow-scrolling:touch] pb-[12%] md:pb-[3%] px-4 -mx-4 md:mx-0 md:px-0" 651 > 652 <!-- CARD 1 --> 653 <div 654 class="bg-white testimonials-card shadow-[0px_8px_52px_0px_#2745BE1F] p-8 rounded-3xl text-left shrink-0 md:shrink w-full sm:w-[70%] md:w-full snap-center mt-[10%] md:mt-0" 655 > 656 <div class="flex items-center justify-between w-full mb-[10%] md:mb-[5%]"> 657 <img 658 src="image/svg/quote-icon.svg" 659 alt="Quote" 660 class="w-[40px] h-[40px] object-contain" 661 /> 662 <div class="flex items-center gap-x-1"> 663 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 664 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 665 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 666 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 667 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 668 </div> 669 </div> 670 671 <p class="text-colors mb-10 md:mb-6 line-heated text-[16px] md:text-[20px]"> 672 My 7-year-old now reads fluently from the mushaf, and my 5-year-old is already 673 reading words and they ask to learn because itâs fun. 674 </p> 675 676 <p 677 class="font-['Outfit'] font-medium text-[18px] md:text-[20px] leading-[135%] text-[#02071D]" 678 > 679 <a 680 href="https://www.facebook.com/share/p/1A9wPnyv82/" 681 target="_blank" 682 rel="noopener noreferrer" 683 class="text-[#3d464c] bg-transparent no-underline hover:text-[#faa106] transition-colors duration-300" 684 > 685 Maryam Maza, Parent 686 </a> 687 </p> 688 </div> 689 690 <!-- CARD 2 --> 691 <div 692 class="bg-white mt-[10%] testimonials-card shadow-[0px_8px_52px_0px_#2745BE1F] p-8 rounded-3xl text-left shrink-0 md:shrink w-[88%] sm:w-[70%] md:w-full snap-center" 693 > 694 <div class="flex items-center justify-between w-full mb-[10%] md:mb-[5%]"> 695 <img 696 src="image/svg/quote-icon.svg" 697 alt="Quote" 698 class="w-[40px] h-[40px] object-contain" 699 /> 700 <div class="flex items-center gap-x-1"> 701 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 702 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 703 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 704 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 705 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 706 </div> 707 </div> 708 709 <p class="text-colors mb-10 md:mb-6 line-heated text-[16px] md:text-[20px]"> 710 My kids are obsessed with Quran Era. The stories, visuals, and levels keep them 711 engaged and help them retain what they learn. 712 </p> 713 714 <p 715 class="font-['Outfit'] font-medium text-[18px] md:text-[20px] leading-[135%] text-[#02071D]" 716 > 717 <a 718 href="https://www.facebook.com/share/p/1G3LLGRi8Y/" 719 target="_blank" 720 rel="noopener noreferrer" 721 class="text-[#3d464c] bg-transparent no-underline hover:text-[#faa106] transition-colors duration-300" 722 > 723 Sam Hersi, Parent 724 </a> 725 </p> 726 </div> 727 <!-- CARD 3 --> 728 <div 729 class="testimonials-card bg-white md:mt-[-10%] shadow-[0px_8px_52px_0px_#2745BE1F] p-8 rounded-3xl text-left shrink-0 md:shrink w-[88%] sm:w-[70%] md:w-full snap-center mt-[10%] md:h-[339px]" 730 > 731 <div class="flex items-center justify-between w-full mb-[10%] md:mb-[5%]"> 732 <div class="flex items-center"> 733 <img 734 src="image/svg/quote-icon.svg" 735 alt="Quote"
736 class="w-[40px] h-[40px] object-contain" 737 /> 738 </div> 739 740 <div class="flex items-center gap-x-1"> 741 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 742 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 743 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 744 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 745 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 746 </div> 747 </div> 748 749 <p class="text-colors mb-10 md:mb-6 line-heated text-[16px] md:text-[20px]"> 750 Despite short attention spans, my kids actually ask to do Quran Era and happily 751 repeat the lessons again and again. 752 </p> 753 754 <p 755 class="font-['Outfit'] font-medium text-[18px] md:text-[20px] leading-[135%] tracking-[0%] align-middle text-[#02071D]" 756 > 757 <a 758 href="https://www.facebook.com/share/p/1AoTEa4nwU/" 759 target="_blank" 760 rel="noopener noreferrer" 761 class="text-[#3d464c] bg-transparent no-underline hover:text-[#faa106] transition-colors duration-300" 762 > 763 Lola Hassan, Parent 764 </a> 765 </p> 766 </div> 767 768 <!-- CARD 4 --> 769 <div 770 class="testimonials-card bg-white shadow-[0px_8px_52px_0px_#2745BE1F] p-8 rounded-3xl text-left shrink-0 md:shrink w-[88%] sm:w-[70%] md:w-full snap-center mt-[10%] md:mt-0 md:h-[339px]" 771 > 772 <div class="flex items-center justify-between w-full mb-[5%] md:mb-[5%]]"> 773 <div class="flex items-center"> 774 <img 775 src="image/svg/quote-icon.svg" 776 alt="Quote" 777 class="w-[40px] h-[40px] object-contain" 778 /> 779 </div> 780 781 <div class="flex items-center gap-x-1"> 782 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 783 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 784 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 785 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 786 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 787 </div> 788 </div> 789 790 <p class="text-colors mb-10 md:mb-6 line-heated text-[16px] md:text-[20px]"> 791 My 5-year-old, who doesnât speak Arabic at all, can now read the Qurâan thanks to 792 Quran Era. 793 </p> 794 795 <p 796 class="font-['Outfit'] font-medium text-[18px] md:text-[20px] leading-[135%] tracking-[0%] align-middle text-[#02071D]" 797 > 798 <a 799 href="https://www.facebook.com/share/p/1F2nm6TmQr/" 800 target="_blank" 801 rel="noopener noreferrer" 802 class="text-[#3d464c] bg-transparent no-underline hover:text-[#faa106] transition-colors duration-300" 803 > 804 Islam Amer, Parent 805 </a> 806 </p> 807 </div> 808 809 <!-- CARD 5 --> 810 <div 811 class="testimonials-card bg-white shadow-[0px_8px_52px_0px_#2745BE1F] p-8 rounded-3xl text-left shrink-0 md:shrink w-[88%] sm:w-[70%] md:w-full snap-center mt-[10%] md:mt-[-10%] md:h-[339px]" 812 > 813 <div class="flex items-center justify-between w-full mb-[10%] md:mb-[5%]"> 814 <div class="flex items-center"> 815 <img 816 src="image/svg/quote-icon.svg" 817 alt="Quote" 818 class="w-[40px] h-[40px] object-contain" 819 /> 820 </div> 821 822 <div class="flex items-center gap-x-1"> 823 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 824 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 825 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 826 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 827 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 828 </div> 829 </div> 830 831 <p class="text-colors mb-10 md:mb-6line-heated text-[16px] md:text-[20px]"> 832 As a Quran teacher and mother, I can confidently say this is one of the best Quran 833 platforms available for kids. 834 </p> 835 836 <p 837 class="font-['Outfit'] font-medium text-[18px] md:text-[20px] leading-[135%] tracking-[0%] align-middle text-[#02071D]" 838 > 839 <a 840 href="https://www.facebook.com/share/p/1GQxiGHf5n/" 841 target="_blank" 842 rel="noopener noreferrer" 843 class="text-[#3d464c] bg-transparent no-underline hover:text-[#faa106] transition-colors duration-300" 844 > 845 Mrs. Haqani, Quran Teacher & Parent 846 </a> 847 </p> 848 </div> 849 850 <!-- CARD 6 --> 851 <div 852 class="testimonials-card bg-white shadow-[0px_8px_52px_0px_#2745BE1F] p-8 rounded-3xl text-left shrink-0 md:shrink w-[88%] sm:w-[70%] md:w-full mt-[10%] md:mt-0 snap-center md:h-[339px]" 853 > 854 <div class="flex items-center justify-between w-full mb-[10%] md:mb-[5%]"> 855 <div class="flex items-center"> 856 <img 857 src="image/svg/quote-icon.svg" 858 alt="Quote"
859 class="w-[40px] h-[40px] object-contain" 860 /> 861 </div> 862 863 <div class="flex items-center gap-x-1"> 864 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 865 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 866 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 867 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 868 <img src="image/svg/star.svg" alt="Star" class="w-[24px] h-[24px]" /> 869 </div> 870 </div> 871 872 <p class="text-colors mb-10 md:mb-6 line-heated text-[16px] md:text-[20px]"> 873 My children learned to read in a very short time and never get bored. Quran Era 874 saved me so much teaching time. 875 </p> 876 877 <p 878 class="font-['Outfit'] font-medium text-[18px] md:text-[20px] leading-[135%] tracking-[0%] align-middle text-[#02071D]" 879 > 880 <a 881 href="https://www.facebook.com/share/p/1CASavC5Mn/" 882 target="_blank" 883 rel="noopener noreferrer" 884 class="text-[#3d464c] bg-transparent no-underline hover:text-[#faa106] transition-colors duration-300" 885 > 886 Abu Khalid, Parent 887 </a> 888 </p> 889 </div> 890 </div> 891 892 <!-- DOTS (faqat mobile) --> 893 <div id="testimonialsDots" class="md:hidden flex items-center justify-center gap-2 mt-4"> 894 <!-- JS avtomatik yaratadi --> 895 </div> 896 </div> 897 </section> 898 <a href="Testimonial.html"> 899 <button class="btn btn-primary btn-lg font-outfit py-3 px-8 w-[101%] md:w-auto md:mb-[7%] mt-8 md:mt-12"> 900 Show All Testimonials 901 </button></a 902 > 903 </div> 904 </section> 905 906 <section 907 class="bg-[url('image/svg/aniytime-mobile.svg')] md:bg-[url('image/svg/anytime-anywhere-bg.svg')] bg-no-repeat" 908 > 909 <div class="our-community-section w-full relative overflow-hidden"> 910 <div class="anytime-anywhere-section"> 911 <div class="container pb-[13%] md:pb-0 mx-auto px-4 text-center"> 912 <h2 913 class="font-['Fredoka_One'] font-normal md:text-[64px] text-[44px] leading-[1.25] mt-0 md:mt-[5%] tracking-[0%] text-center align-middle title-colors" 914 > 915 Anytime, Anywhere 916 </h2> 917 918 <div class="flex md:justify-center md:ml-[7%] mb-8"> 919 <img 920 class="w-full md:w-[65%]" 921 width="910" 922 src="image/anytime-anywhere.webp" 923 alt="Anytime Anywhere" 924 /> 925 926 <img src="image/svg/ra.svg" class="hidden md:block relative md:-top-68 md:left-42" /> 927 </div> 928 <div class="flex justify-center space-x-4"> 929 <a 930 href="https://apps.apple.com/uz/app/quran-era/id1582134218" 931 target="_blank" 932 rel="noopener noreferrer" 933 > 934 <img 935 src="image/svg/appstore.svg" 936 alt="App Store" 937 class="w-[170px] h-[77px] md:w-auto md:h-auto" 938 /> 939 </a> 940 <a 941 href="https://play.google.com/store/apps/details?id=com.quranera&hl=en" 942 target="_blank" 943 rel="noopener noreferrer" 944 > 945 <img 946 src="image/svg/google-paly-market.svg" 947 alt="Play Market" 948 class="w-[170px] h-[77px] md:w-auto md:h-auto" 949 /> 950 </a> 951 </div> 952 </div> 953 954 <div class="relative w-full text-center"> 955 <h2 956 class="hidden md:block mt-32 md:mt-48 font-['Fredoka_One'] text-[48px] md:text-[64px] leading-[100%]" 957 > 958 Our Community 959 </h2> 960 961 <img 962 src="image/svg/duck.svg" 963 alt="duck" 964 class="hidden md:block absolute top-[-192%] left-[10%] w-[225px] h-[302px] object-contain" 965 /> 966 </div> 967 </div> 968 <section 969 class="relative w-full overflow-hidden h-[1155px] md:h-auto md:min-h-[480px] bg-[url('image/svg/our-community-mobile.svg')] md:bg-[url('image/svg/our-community-web.svg')] bg-no-repeat md:bg-cover bg-center md:bg-top md:aspect-auto" 970 > 971 <!-- Duck (faqat webda) --> 972 973 <!-- CONTENT --> 974 <div class="relative z-10 container mx-auto px-4 md:px-0 text-center"> 975 <!-- Title --> 976 <h2 977 class="pt-25 md:pt-16 font-['Fredoka_One'] text-[48px] md:text-[64px] leading-[100%] !text-white md:hidden" 978 > 979 Our Community 980 </h2> 981 982 <!-- Cards --> 983 <div 984 class="max-w-[1200px] font-outfit mx-auto flex flex-col md:flex-row justify-between items-center md:gap-y-0 md:gap-x-10 md:mt-[7%]" 985 > 986 <div class="flex flex-col items-center gap-6"> 987 <img src="image/svg/school23000.svg" alt="" /> 988 <h3 class="text-[48px] md:text-[56px] font-fredoka text-white">37,000</h3> 989 <p class="text-white text-[20px] md:text-[24px]">Students have learnt with us.</p> 990 </div> 991 992 <div class="flex flex-col items-center mt-[10%] lg:mt-0 gap-6"> 993 <img src="image/svg/school120.svg" alt="" /> 994 <h3 class="text-[48px] md:text-[56px] font-fredoka text-white">120</h3> 995 <p class="text-white text-[20px] md:text-[24px]">Countries have welcomed us.</p> 996 </div> 997 998 <div class="flex flex-col items-center mt-[10%] lg:mt-0 gap-6"> 999 <img src="image/svg/school25.svg" alt="" /> 1000 <h3 class="text-[48px] md:text-[56px] font-fredoka text-white">70+</h3> 1001 <p class="text-white text-[20px] md:text-[24px]">Schools trust Quran Era.</p> 1002 </div> 1003 </div> 1004 </div> 1005 </section> 1006 </div> 1007 </section> 1008
1009 <!-- "trusted by schools worldwide" section --> 1010 <section class="w-full py-12 md:py-24"> 1011 <div class="w-full max-w-[1440px] mx-auto px-[16px] md:px-[32px]"> 1012 <!-- 1. SECTION TITLE --> 1013 <h2 1014 class="font-fredoka text-[44px] mt-0 md:mt-[5%] md:text-[64px] leading-[125%] text-center text-primary-colour mb-15 md:mb-24" 1015 > 1016 Trusted by <br class="md:hidden" /> 1017 Schools <br class="md:hidden" /> 1018 Worldwide 1019 </h2> 1020 1021 <!-- 1022 2. LOGOS CONTAINER 1023 - Mobile: 'grid grid-cols-2' creates the 2x3 layout. 1024 - Desktop: 'md:flex md:justify-between' creates the single row. 1025 - 'gap-y-12': Vertical spacing on mobile. 1026 - 'gap-x-8': Horizontal spacing. 1027 --> 1028 <div 1029 id="for-schools-trusted-schools-logo-container" 1030 class="grid grid-cols-2 gap-x-8 gap-y-12 items-center justify-items-center md:flex md:flex-row md:justify-between md:gap-8" 1031 > 1032 <!-- JavaScript will inject the logos here --> 1033 </div> 1034 </div> 1035 </section> 1036 1037 <!-- "skills acquired" section --> 1038 <section class="w-full py-12 md:mb-16"> 1039 <div class="w-full max-w-[1440px] mx-auto px-[16px] md:px-[32px]"> 1040 <!-- Header Section --> 1041 <div class="text-center"> 1042 <h2 1043 class="font-fredoka text-[44px] md:text-[64px] leading-[1.25] text-center text-primary-colour mb-6 md:mb-8" 1044 > 1045 Skills Acquired 1046 </h2> 1047 <p 1048 class="font-outfit text-[16px] leading-[150%] md:text-[20px] md:leading-[135%] text-center text-tertiary-colour mb-12 md:mb-20" 1049 > 1050 Quran Era focuses on developing essential skills beyond just teaching Quran reading. 1051 </p> 1052 </div> 1053 1054 <!-- Dynamic Grid Container --> 1055 <!-- Layout: 2 Columns on Mobile, 3 Columns on Medium screens and up --> 1056 <div 1057 id="for-schools-skills-container" 1058 class="w-full grid grid-cols-2 md:grid-cols-[auto_auto_auto] gap-y-12 md:gap-y-16 gap-x-8 md:justify-between" 1059 > 1060 <!-- Content will be injected here by JS --> 1061 </div> 1062 </div> 1063 </section> 1064 <br /><br /> 1065 1066 <div id="footer-placeholder"></div> 1067 1068 <!-- "endorsement-videos" section scripts --> 1069
1069<script type="module" src="./js/endorsement-videos.js"></script>
1069 1070 1071 <!-- "why-quranera-video" section scripts --> 1072
1072<script type="module" src="./js/why-quranera-video.js"></script>
1072 1073 1074 <!-- "indexjs --> 1075
1075<script type="module" src="./index.js?v=1"></script>
1075 1076 1077 <!-- "trusted by schools worldwide" section scripts --> 1078
1078<script src="./js/for-school-trusted-by-schools.js"></script>
1078 1079 1080 <!-- "skills acquired" section scripts --> 1081
1081<script src="./js/for-school-skills-acquired.js"></script>
1081 1082 </body> 1083</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.