PageSourceSearch

https://quranera.com/

html quranera.com collected 2026-09-24 10:43:36 UTC 43,347 bytes, 1,083 lines download raw bytes

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.