1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <!-- Google Tag Manager --> 5
5<script>
vendor: 455 bytes, lines 5-15
5 6 (function (w, d, s, l, i) { 7 w[l] = w[l] || []; 8 w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" }); 9 var f = d.getElementsByTagName(s)[0], 10 j = d.createElement(s), 11 dl = l != "dataLayer" ? "&l=" + l : ""; 12 j.async = true; 13 j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl; 14 f.parentNode.insertBefore(j, f); 15 })(window, document, "script", "dataLayer", "
15GTM-KJP6FSQ4
vendor: 8 bytes, lines 15-16
15"); 16
16</script>
16 17 <!-- End Google Tag Manager --> 18 <!-- PostHog (Used for heatmap analytics) --> 19
19<script> 20 !(function (t, e) { 21 var o, n, p, r; 22 e.__SV || 23 (window.posthog && window.posthog.__loaded) || 24 ((window.posthog = e), 25 (e._i = []), 26 (e.init = function (i, s, a) { 27 function g(t, e) { 28 var o = e.split("."); 29 2 == o.length && ((t = t[o[0]]), (e = o[1])), 30 (t[e] = function () { 31 t.push([e].concat(Array.prototype.slice.call(arguments, 0))); 32 }); 33 } 34 ((p = t.createElement("script")).type = "text/javascript"), 35 (p.crossOrigin = "anonymous"), 36 (p.async = !0), 37 (p.src = 38 s.api_host.replace(".i.posthog.com", "-assets.i.posthog.com") + 39 "/static/array.js"), 40 (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore( 41 p, 42 r 43 ); 44 var u = e; 45 for ( 46 void 0 !== a ? (u = e[a] = []) : (a = "posthog"), 47 u.people = u.people || [], 48 u.toString = function (t) { 49 var e = "posthog"; 50 return ( 51 "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e 52 ); 53 }, 54 u.people.toString = function () { 55 return u.toString(1) + ".people (stub)"; 56 }, 57 o = 58 "init Rr Mr fi Or Ar ci Tr Cr capture Mi calculateEventProperties Lr register register_once register_for_session unregister unregister_for_session Hr getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Ur jr createPersonProfile zr kr Br opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing Dr debug M Nr getPageViewId captureTraceFeedback captureTraceMetric $r".split( 59 " " 60 ), 61 n = 0; 62 n < o.length; 63 n++ 64 ) 65 g(u, o[n]);
66 e._i.push([i, s, a]); 67 }), 68 (e.__SV = 1)); 69 })(document, window.posthog || []); 70 posthog.init("phc_ImCO4XP5fC0FvEWGIQPYjA0WjFbLOvtvGk8YlsBRDga", { 71 api_host: "https://us.i.posthog.com", 72 defaults: "2025-05-24", 73 person_profiles: "always", 74 }); 75 </script>
75 76 <!-- End PostHog --> 77 <meta charset="UTF-8" /> 78 <meta name="viewport" content="width=device-width, initial-scale=1" /> 79
79<script src="https://cdn.tailwindcss.com"></script>
79 80 <title>Home - FunFluen</title> 81 <link rel="canonical" href="https://funfluen.com/" /> 82 <link rel="icon" href="/favicon.ico" sizes="any" /> 83 <link rel="icon" href="/favicon.svg" type="image/svg+xml" /> 84 <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> 85 <link 86 rel="preload" 87 href="/static/images/Sky1.webp" 88 as="image" 89 type="image/webp" 90 fetchpriority="high" 91 /> 92 <link rel="stylesheet" href="styles/css/styles.css" /> 93 <link rel="stylesheet" href="./styles/css/main.css?v=20260808-cwv" /> 94 <link 95 rel="stylesheet" 96 href="https://unpkg.com/swiper/swiper-bundle.min.css" 97 /> 98 <link 99 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 100 rel="stylesheet" 101 integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 102 crossorigin="anonymous" 103 /> 104 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" /> 105
105<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
105 106 <link rel="preconnect" href="https://fonts.googleapis.com" /> 107 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 108 <!-- <link 109 href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" 110 rel="stylesheet" 111 /> --> 112 <link 113 rel="stylesheet" 114 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" 115 /> 116 </head> 117 <body> 118 <!-- Google Tag Manager (noscript) -->
vendor: 87 bytes, lines 118-121
118 119 <noscript 120 ><iframe 121 src="https://www.googletagmanager.com/ns.html?id=
121GTM-KJP6FSQ4
vendor: 126 bytes, lines 121-127
121" 122 height="0" 123 width="0" 124 style="display: none; visibility: hidden" 125 ></iframe 126 ></noscript> 127
127<!-- End Google Tag Manager (noscript) --> 128 <div style="position: relative"> 129 <div class="bg-[#0C141E] text-[#EAEAEA] font-red-hat-display"> 130 <!-- Navbar --> 131 <div 132 id="navbar" 133 class="fixed top-0 w-full z-50 p-4 flex items-center justify-between transition-all duration-300 hidden md:flex navbar-transparent" 134 > 135 <!-- Logo --> 136 <h1 137 class="lobster-font text-4xl md:text-5xl font-normal cursor-pointer select-none" 138 > 139 Funfluen 140 </h1> 141 142 <!-- Links --> 143 <div class="flex gap-8 ml-8"> 144 <a 145 href="#" 146 class="text-[24px] font-medium hover:text-purple-300 transition duration-100" 147 > 148 Home 149 </a> 150 <a 151 href="/extension/tutorials/" 152 class="text-[24px] font-medium hover:text-purple-300 transition duration-100" 153 > 154 Tutorials 155 </a> 156 <a 157 href="/learn/" 158 class="text-[24px] font-medium hover:text-purple-300 transition duration-100" 159 > 160 Learn 161 </a> 162 <a 163 href="/practice/english-shadowing/" 164 data-shadowing-navigation="header" 165 class="text-[24px] font-medium hover:text-purple-300 transition duration-100" 166 > 167 Shadowing 168 </a> 169 <a 170 href="./terms/index.html" 171 class="text-[24px] font-medium hover:text-purple-300 transition duration-100" 172 > 173 Terms 174 </a> 175 <a 176 href="./privacy/index.html" 177 class="text-[24px] font-medium hover:text-purple-300 transition duration-100" 178 > 179 Privacy 180 </a> 181 <a 182 href="contact_us.html" 183 class="text-[24px] font-medium hover:text-purple-300 transition duration-100" 184 > 185 Contact us 186 </a> 187 </div> 188 189 <!-- Buttons --> 190 <div class="ml-auto flex items-center gap-4"> 191 <button 192 id="account-tab-btn" 193 class="font-['Lato'] text-[24px] font-semibold border-2 border-gray-300 text-gray-300 rounded-full px-6 py-1.5 button-hover transition duration-150" 194 > 195 Log in 196 </button> 197 <button 198 onclick="handleGetStarted()" 199 class="font-['Lato'] text-[24px] font-semibold border-2 border-gray-300 text-gray-300 rounded-full px-6 py-1.5 button-hover transition duration-150" 200 > 201 Get Started 202 </button> 203 </div> 204 </div> 205 </div> 206 <!-- <div id="mobileNavbar" class="block md:hidden bg-white p-4"> 207 Mobile Navbar placeholder 208 </div> 209 <div id="mobileDrawer" class="block md:hidden bg-white p-4"> 210 Mobile Drawer placeholder 211 </div> --> 212 <div style="color: white" class="login-methods-modal"> 213 <div class="modal-body"> 214 <p class="fs-4 mt-4 mb-4 mx-auto">Choose an Option</p> 215 <div 216 class="login-option d-flex align-items-center justify-content-between" 217 > 218 <span>Billing Management:</span> 219 <button class="btn btn-info ms-auto" id="manage-account-button"> 220 Manage Billing 221 </button> 222 </div> 223 <hr class="my-3" /> 224 <div 225 class="login-option d-flex align-items-center justify-content-between" 226 > 227 <button class="btn btn-danger ms-auto" id="delete-account-button"> 228 Delete Account 229 </button> 230 </div> 231 <div class="close-btn"> 232 <svg 233 xmlns="http://www.w3.org/2000/svg"
234 viewBox="0 0 50 50" 235 width="50px" 236 height="50px" 237 > 238 <path 239 d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z" 240 /> 241 </svg> 242 </div> 243 </div> 244 </div> 245 <div 246 style="color: white" 247 class="delete-account-modal" 248 data-bs-theme="dark" 249 > 250 <div class="modal-body"> 251 <p class="fs-4 mt-4 mb-4 mx-auto">Delete Account</p> 252 <p class="alert alert-primary deletion-alert-text"> 253 <strong>IMPORTANT NOTICE:</strong> Account Deletion Before you 254 proceed with deleting your account, please be aware of the following 255 critical information: <br /><br /> 256 <strong>- Permanent Account Removal:</strong> Deleting your account 257 will result in the permanent removal of your account and all 258 associated data from our database. This action is irreversible. 259 <br /><br /> 260 <strong>- Loss of Active Subscriptions:</strong> If you have any 261 active subscriptions, you will lose access immediately upon account
262 deletion. No refunds will be issued for any remaining subscription 263 period. <br /><br /> 264 Please consider these consequences carefully. If you have any 265 questions or require assistance, contact our support team before 266 proceeding. <br /><br /> 267 By clicking "Confirm," you acknowledge that you have read and 268 understood the consequences of deleting your account. 269 </p> 270 <p class="fs-5">Are you sure you want to delete your account?</p> 271 <div class="d-flex ms-auto mt-2 gap-2"> 272 <a 273 href="https://docs.google.com/forms/d/e/1FAIpQLSf-Aytfm3XtxkbhieDEHwMcHrTIdr1FIuBYmcR6rm5zsbuM1Q/viewform" 274 class="btn btn-danger" 275 >Yes</a 276 > 277 <button class="btn btn-secondary" id="del-acc-no-btn">No</button> 278 </div> 279 <div class="close-btn"> 280 <svg 281 xmlns="http://www.w3.org/2000/svg" 282 viewBox="0 0 50 50" 283 width="50px" 284 height="50px" 285 > 286 <path 287 d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z" 288 /> 289 </svg> 290 </div> 291 </div> 292 </div> 293 294 <div 295 style="color: white" 296 class="manage-account-modal" 297 data-bs-theme="dark" 298 > 299 <div class="modal-body"> 300 <p class="fs-4 mt-4 mb-4 mx-auto">Billing Management</p> 301 <div class="alert alert-primary deletion-alert-text"> 302 <strong>Refund and Cancellation Policies:</strong> 303 <ul> 304 <li> 305 When you start your free trial, despite entering your bank 306 information, you will not be charged until the end of the free 307 trial. If you cancel within that period, you will not pay 308 anything.<br />If you do not cancel your subscription, you will 309 be charged according to the plan that you had chosen. In this 310 case, you pay for your subscription in advance of the covered 311 period.<strong 312 >Your subscription payments are non-refundable.</strong 313 > 314 </li> 315 <br /> 316 <li> 317 If you cancel your subscription mid-month or mid-year, you can 318 continue using our service until the end of your billing cycle. 319 Prorated billing is not available for subscriptions that are 320 canceled mid-month. 321 </li> 322 <br /> 323 <li> 324 To avoid being charged for the next period, cancel your 325 subscription before the start of your next billing cycle, then 326 you will not pay anymore. 327 </li> 328 </ul> 329 </div> 330 <p class="fs-5">Do you want to proceed to the customer-portal?</p> 331 <div class="d-flex ms-auto mt-2 gap-2"> 332 <a href="https://funfluen.com/payment-gateway/account/stripe"> 333 <img 334 id="continue-with-google-btn" 335 class="d-flex" 336 src="./static/images/google-dark-btn.svg" 337 alt="Sign in with Google" 338 /> 339 </a> 340 341 <button class="btn btn-secondary" id="mng-acc-no-btn">No</button> 342 </div> 343 <div class="close-btn"> 344 <svg 345 xmlns="http://www.w3.org/2000/svg"
346 viewBox="0 0 50 50" 347 width="50px" 348 height="50px" 349 > 350 <path 351 d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z" 352 /> 353 </svg> 354 </div> 355 </div> 356 </div> 357 358 <!-- Header Section --> 359 <div id="Header-wrapper" class="relative w-full"> 360 <div class="absolute left-[10%] top-[28rem] md:top-[27rem] text-white"> 361 <h1 362 class="font-['Red Hat Display'] font-bold text-[28px] md:text-[56px]" 363 > 364 Learn Different. 365 </h1> 366 <p 367 class="font-['Red Hat Display'] font-medium text-[14px] md:text-[24px] text-gray-200" 368 > 369 Master a New Language 4X Faster 370 </p> 371 <!-- Desktop Button --> 372 <button 373 onclick="handleGetStarted()" 374 class="font-['Red Hat Display'] gap-2 text-[24px] font-semibold text-black bg-yellow-300 rounded-full px-28 py-3 mt-4 hidden md:inline-flex whitespace-nowrap items-center" 375 > 376 Get Started 377 <i 378 style="width: 24px; height: 24px" 379 class="fa-solid fa-chevron-right" 380 ></i> 381 </button> 382 </div> 383 384 <!-- Curly Arrow Image --> 385 <div class="absolute top-[35rem] md:top-[42rem] left-0"> 386 <img src="./static/images/CurlyArrow.png" alt="Curly Arrow" /> 387 </div> 388 389 <!-- Mobile Button --> 390 <button 391 onclick="handleGetStarted()" 392 class="font-['Red Hat Display'] gap-2 text-[24px] font-semibold text-black bg-yellow-300 rounded-full px-6 py-2 mt-4 inline-flex items-center md:hidden whitespace-nowrap absolute bottom-[20px] left-1/2 transform -translate-x-1/2" 393 > 394 Get Started <i class="fas fa-arrow-right ml-2 text-black"></i> 395 </button> 396 </div> 397 <!-- Movie Section --> 398 <div class="bg-gray-50"> 399 <!-- Video Section --> 400 <div 401 class="flex flex-col items-center gap-4 py-16 px-4 md:px-24 xl:px-60" 402 > 403 <!-- Section Title --> 404 <h1 405 class="text-4xl md:text-5xl font-semibold font-poppins text-center" 406 > 407 Learn Through Your Favorites 408 </h1> 409 410 <!-- Description Text --> 411 <p class="text-[24px] font-normal font-poppins text-center"> 412 Turn your favorite Netflix, Disney+, and YouTube videos into 413 immersive language lessons on both mobile and desktop. 414 </p> 415 416 <!-- Video Player --> 417 <div class="w-full max-w-4xl mt-8 overflow-hidden rounded-[20px]"> 418 <div class="aspect-w-16 aspect-h-9 h-[460px]"> 419 <iframe 420 src="https://www.youtube.com/embed/yiB1FRQOcuM" 421 frameborder="0" 422 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 423 allowfullscreen 424 class="w-full h-full" 425 ></iframe> 426 </div> 427 </div> 428 429 <!-- Features & Benefits Title --> 430 <h2 431 class="text-4xl md:text-5xl font-semibold font-poppins text-center mt-16" 432 > 433 Key features & Benefits 434 </h2> 435 </div> 436 </div> 437 <!-- Active Learning --> 438 <div 439 class="bg-[#F4F8FB] py-16 px-[4%] md:px-[10%] xl:px-[13%] text-[#3D3C4A]" 440 > 441 <div class="flex flex-col md:flex-row items-center"> 442 <!-- Left Section --> 443 <div class="w-full md:w-[unset]"> 444 <!-- Heading --> 445 <div class="flex items-center ml-4 mb-8 gap-4"> 446 <h5 447 class="text-[32px] font-extrabold font-red-hat-display ml-[100px]" 448 > 449 Active Learning Revolutionized 450 </h5> 451 </div> 452 453 <!-- Features Stack --> 454 <div class="space-y-8"> 455 <!-- Reading Feature --> 456 <div class="flex items-center gap-6"> 457 <div class="hidden md:block"> 458 <div 459 class="flex items-center justify-center p-4 rounded-full bg-white relative w-[100px] h-[100px]" 460 > 461 <img 462 class="absolute top-[50%] right-[50%] translate-x-1/2 -translate-y-1/2" 463 src="./static/images/book-open-variant-outline.png" 464 alt="Reading icon" 465 /> 466 </div> 467 </div> 468 <div> 469 <p class="text-[22px] text-['400'] font-red-hat-display"> 470 <strong style="font-weight: 600; font-size: 22px" 471 >Stage 1</strong 472 > 473 - Reading: Watch videos with interactive subtitles. Hover 474 over words to hear pronunciation and save them for later 475 review 476 </p> 477 </div> 478 </div> 479 480 <!-- Listening Feature --> 481 <div class="flex items-center gap-6"> 482 <div class="hidden md:block"> 483 <div 484 class="flex items-center justify-center p-4 rounded-full bg-white relative w-[100px] h-[100px]" 485 > 486 <img 487 class="absolute top-[50%] right-[50%] translate-x-1/2 -translate-y-1/2" 488 src="./static/images/ear-hearing.png" 489 alt="Listening icon" 490 /> 491 </div> 492 </div> 493 <div> 494 <p class="text-[22px] text-['400'] font-['Red Hat Display']"> 495 <strong style="font-weight: 600; font-size: 22px" 496 >Stage 2</strong 497 > 498 - Listening: Test your listening skills as the video pauses 499 after key moments, allowing you to recall what was said 500 before revealing the subtitles. 501 </p> 502 </div> 503 </div> 504 505 <!-- Speaking Feature --> 506 <div class="flex items-center gap-6"> 507 <div class="hidden md:block"> 508 <div 509 class="flex items-center justify-center p-4 rounded-full bg-white relative w-[100px] h-[100px]" 510 > 511 <img 512 class="absolute top-[50%] right-[50%] translate-x-1/2 -translate-y-1/2" 513 src="./static/images/account-voice.png" 514 alt="Speaking icon" 515 /> 516 </div> 517 </div> 518 <div> 519 <p class="text-[22px] text-['400'] font-font-red-hat-display"> 520 <strong style="font-weight: 600; font-size: 22px" 521 >Stage 3</strong 522 > 523 - Speaking: Improve your speaking skills by attempting to 524 guess muted subtitles before the correct lines are shown 525 </p> 526 </div> 527 </div> 528 </div> 529 530 <!-- Benefits Section --> 531 <p class="mt-12 text-[22px] font-normal font-red-hat-display"> 532 <strong style="font-weight: 600">Benefits :</strong> Guess, Speak, 533 Master â Turn Movies into Language Partners. 534 </p> 535 </div> 536 537 <!-- Right Image Section --> 538 <div class="w-full md:w-[unset] mt-8 md:mt-0 md:ml-auto"> 539 <img 540 class="w-full" 541 src="./static/images/7069793_3297247 1.png" 542 alt="Active Learning" 543 /> 544 </div> 545 </div> 546 </div> 547 548 <!-- AI Section --> 549 <div 550 class="bg-white py-12 px-[4%] md:px-[10%] xl:px-[13%] text-[#3D3C4A]" 551 > 552 <div class="flex flex-col items-center mb-16 relative"> 553 <!-- Section Title with Icon --> 554 <div class="flex items-center justify-center gap-4 relative"> 555 <div class="relative flex items-center"> 556 <h5 557 class="text-[32px] font-extrabold font-red-hat-display relative" 558 > 559 Tailored AI Detected Content 560 </h5> 561 </div> 562 </div> 563 </div> 564 565 <div 566 class="flex flex-col md:flex-row-reverse items-center justify-end gap-[60
566px]" 567 > 568 <!-- Features Stack --> 569 <div class="space-y-8 w-full md:w-[unset]"> 570 <!-- Feature Items --> 571 <div class="flex items-center gap-6"> 572 <div class="hidden md:flex p-4 rounded-full bg-[#F4F8FB]"> 573 <img 574 src="./static/images/mingcute_ai-line.png" 575 alt="AI Icon" 576 width="64" 577 height="64" 578 /> 579 </div> 580 <p class="text-[24px] font-normal font-red-hat-display"> 581 <strong style="font-weight: 600; font-size: 22px" 582 >Aspect 1 -</strong 583 > 584 Our AI identifies and highlights important phrases, idioms, and 585 expressions that traditional dictionaries miss 586 </p> 587 </div> 588 589 <div class="flex items-center gap-6"> 590 <div class="hidden md:flex p-4 rounded-full bg-[#F4F8FB]"> 591 <img 592 src="./static/images/DownloadIcon.png" 593 alt="Download Icon" 594 width="64" 595 height="64" 596 /> 597 </div> 598 <p class="text-[24px] font-normal font-red-hat-display"> 599 <strong style="font-weight: 600; font-size: 22px" 600 >Aspect 2 -</strong 601 > 602 Download these essential phrases and vocabulary as a 603 personalized PDF 604 </p> 605 </div> 606 607 <div class="flex items-center gap-6"> 608 <div class="hidden md:flex p-4 rounded-full bg-[#F4F8FB]"> 609 <img 610 src="./static/images/mapIcon.png" 611 alt="Map Icon" 612 width="64" 613 height="64" 614 /> 615 </div> 616 <p class="text-[24px] font-normal font-red-hat-display"> 617 <strong style="font-weight: 600; font-size: 22px" 618 >Aspect 3 -</strong 619 > 620 Mind maps are generated for better retention and understanding. 621 </p> 622 </div> 623 624 <!-- Benefits Text --> 625 <p class="text-[22px] font-normal font-red-hat-display mt-12"> 626 <strong style="font-weight: 600">Benefits :</strong> Discover More 627 Than Just the Storyline 628 </p> 629 </div> 630 631 <!-- Robot Image Section --> 632 <div class="mt-8 md:mt-0 w-3/5 md:w-[unset]"> 633 <img 634 src="./static/images/Frame.png" 635 alt="AI Robot" 636 class="w-full" 637 /> 638 </div> 639 </div> 640 </div> 641 <!-- Tutorial Section --> 642 <div 643 class="bg-white py-16 px-[4%] md:px-[10%] xl:px-[13%] flex flex-col items-center gap-16" 644 > 645 <!-- Title --> 646 <h1 class="text-4xl md:text-5xl font-bold font-poppins"> 647 How it Works 648 </h1> 649 650 <!-- Tutorial Steps --> 651 <div class="flex flex-nowrap justify-around w-full gap-8"> 652 <!-- Step 1: Install the Extension or App --> 653 <div class="flex flex-col items-center max-w-xs gap-4"> 654 <div 655 class="p-4 bg-[#F7F3FF] rounded-full w-[125px] h-[125px] flex items-center justify-center border border-[#7742FF]" 656 > 657 <img src="./static/images/install.png" alt="Install Icon" /> 658 </div> 659 <p 660 class="text-[22px] font-bold font-red-hat-display text-center text-[#7742FF]" 661 > 662 Install the Extension or App 663 </p> 664 </div> 665 666 <!-- Step 2: Choose Your Content --> 667 <div class="flex flex-col items-center max-w-xs gap-4"> 668 <div 669 class="p-4 bg-[#F7F3FF] rounded-full w-[125px] h-[125px] flex items-center justify-center" 670 > 671 <img 672 src="./static/images/ChooseContent.png" 673 alt="Choose Content Icon" 674 /> 675 </div> 676 <p 677 class="text-[22px] font-semibold font-red-hat-display text-center text-[#767680]" 678 > 679 Choose your content 680 </p> 681 </div> 682 683 <!-- Step 3: Customize Your Level --> 684 <div class="flex flex-col items-center max-w-xs gap-4"> 685 <div 686 class="p-4 bg-[#F7F3FF] rounded-full w-[125px] h-[125px] flex items-center justify-center" 687 > 688 <img src="./static/images/Chart.png" alt="Customize Level Icon" /> 689 </div> 690 <p 691 class="text-[22px] font-semibold font-red-hat-display text-center text-[#767680]" 692 > 693 Customize Your Level 694 </p> 695 </div> 696 697 <!-- Step 4: Engage with Active Learning --> 698 <div class="flex flex-col items-center max-w-xs gap-4"> 699 <div 700 class="p-4 bg-[#F7F3FF] rounded-full w-[125px] h-[125px] flex items-center justify-center" 701 > 702 <img src="./static/images/Power.png" alt="Power Icon" /> 703 </div> 704 <p 705 class="text-[22px] font-semibold font-red-hat-display text-center text-[#767680]" 706 > 707 Engage with active learning 708 </p> 709 </div> 710 711 <!-- Step 5: Review and Progress --> 712 <div class="flex flex-col items-center max-w-xs gap-4"> 713 <div 714 class="p-4 bg-[#F7F3FF] rounded-full w-[125px] h-[125px] flex items-center justify-center" 715 > 716 <img src="./static/images/Road.png" alt="Road Icon" /> 717 </div> 718 <p 719 class="text-[22px] font-semibold font-red-hat-display text-center text-[#767680]" 720 > 721 Review and progress 722 </p> 723 </div> 724 </div> 725 726 <!-- Additional Info Section --> 727 <div class="flex flex-col items-center gap-4"> 728 <h2 class="text-[28px] font-bold font-red-hat-display text-[#7742FF]"> 729 Install the Extension/App 730 </h2> 731 <p class="text-[20px] text-center font-red-hat-display"> 732 Available on both desktop and mobile for Netflix, Disney+, and 733 YouTube. 734 </p> 735 </div> 736 </div> 737 <!-- Compare Table --> 738 <div class="bg-[#F4F8FB] flex items-center justify-center py-12 px-4"> 739 <div class="px-[4%] md:px-[10%] xl:px-[13%] w-full"> 740 <!-- Title --> 741 <h1 class="text-center font-poppins text-[38px] font-semibold mb-8"> 742 Why Choose Us Over Other Language Learning Tools? 743 </h1> 744 745 <!-- Table Container --> 746 <div class="overflow-x-auto border-[#C5CAFA] border-2 rounded-[45px]"> 747 <table 748 class="w-full h-full table-auto border-collapse bg-white rounded-lg shadow-md" 749 > 750 <!-- Table Head --> 751 <thead> 752 <tr class="bg-gray-100"> 753 <th 754 class="border border-gray-300 px-4 py-4 font-red-hat-display text-[28px] font-bold text-center" 755 > 756 Benefit to User 757 </th> 758 <th class="border border-gray-300 px-4 py-4"> 759 <div class="d-flex flex-col items-center"> 760 <img 761 width="64" 762 height="64" 763 src="./static/images/ff052c61a0d9a311fd3f89c547ee9282.png" 764 alt="" 765 /> 766 <p 767 class="text-center font-red-hat-display text-[20px] font-bold" 768 > 769 Our Tool 770 </p> 771 </div> 772 </th> 773 <th 774 class="border border-gray-300 px-4 py-4 text-center font-red-hat-display text-[20px] font-bold" 775 > 776 Duolingo 777 </th> 778 <th 779 class="border border-gray-300 px-4 py-4 text-center font-red-hat-display text-[20px] font-bold" 780 > 781 Other Dual subs Tools 782 </th> 783 </tr> 784 </thead> 785 <!-- Table Body --> 786 <tbody> 787 <!-- First Row --> 788 <tr> 789 <td 790 class="border border-gray-300 px-4 py-4 text-left font-red-hat-display text-md md:text-lg font-medium" 791 > 792 <div class="d-flex items-center gap-[16px]"> 793 <img 794 src="./static/images/mdi_head-check.png" 795 alt="" 796 width="64" 797 height="64" 798 /> 799 <p class="font-red-hat-display text-[22px] font-semibold"> 800 Learn Through Comprehensible Input 801 </p> 802 </div> 803 </td> 804 <td class="border border-gray-300 px-4 py-4 text-center"> 805 <div class="d-flex flex-column"> 806 <i class="fas fa-check text-success text-xl"></i> 807 <p 808 class="text-center font-red-hat-display text-[18px] font-medium" 809 > 810 <strong>Yes â</strong> Full support on 811 <strong>Netflix</strong>, <strong>Disney</strong>, and 812 <strong>YouTube</strong>. 813 </p> 814 </div> 815 </td> 816 <td class="border border-gray-300 px-4 py-4"> 817 <div class="d-flex items-center flex-col"> 818 <i class="fas fa-times text-red-600 text-xl"></i> 819 <p class="font-red-hat-display text-[18px] font-medium"> 820 No 821 </p> 822 </div> 823 </td> 824 <td class="border border-gray-300 px-4 py-4"> 825 <div class="d-flex items-center flex-col"> 826 <i class="fas fa-check text-green-600 text-xl"></i> 827 <p 828 class="text-center font-red-hat-display text-[18px] font-medium" 829 >
830 Partial - Only Netflix or YouTube (No Disney) 831 </p> 832 </div> 833 </td> 834 </tr> 835 <!-- Second Row --> 836 <tr> 837 <td 838 class="border border-gray-300 px-4 py-4 text-left font-red-hat-display text-md md:text-lg font-medium" 839 > 840 <div class="d-flex items-center gap-[16px]"> 841 <img 842 src="./static/images/fluent_bot-sparkle-20-filled.png" 843 alt="" 844 width="64" 845 height="64" 846 /> 847 <div class="d-flex flex-col"> 848 <p 849 class="font-red-hat-display text-[22px] font-semibold" 850 > 851 Unique AI-Powered Insights 852 </p> 853 <p class="font-red-hat-display text-[16px] font-medium"> 854 (highlighting important phrases, idioms, and 855 expressions tailored to your level) 856 </p> 857 </div> 858 </div> 859 </td> 860 <td class="border border-gray-300 px-4 py-4 text-center"> 861 <div class="d-flex flex-col"> 862 <i class="fas fa-check text-green-600 text-xl"></i> 863 <p 864 class="text-center font-red-hat-display text-[18px] font-medium" 865 > 866 <strong>Yes â AI identifies and explains</strong> key 867 phrases 868 </p> 869 </div> 870 </td> 871 <td class="border border-gray-300 px-4 py-4"> 872 <div class="d-flex items-center flex-col"> 873 <i class="fas fa-times text-red-600 text-xl"></i> 874 <p class="font-red-hat-display text-[18px] font-medium"> 875 No 876 </p> 877 </div> 878 </td> 879 <td class="border border-gray-300 px-4 py-4"> 880 <div class="d-flex items-center flex-col"> 881 <i class="fas fa-times text-red-600 text-xl"></i> 882 <p class="font-red-hat-display text-[18px] font-medium"> 883 No 884 </p> 885 </div> 886 </td> 887 </tr> 888 <!-- Third Row --> 889 <tr> 890 <td 891 class="border border-gray-300 px-4 py-4 text-left font-red-hat-display text-md md:text-lg font-medium" 892 > 893 <div class="d-flex items-center gap-[16px]"> 894 <img 895 src="./static/images/solar_dumbbells-bold.png" 896 alt="" 897 width="64" 898 height="64" 899 /> 900 <div class="d-flex flex-col"> 901 <p 902 class="font-red-hat-display text-[22px] font-semibold" 903 > 904 Fluency Gym 905 </p> 906 <p class="font-red-hat-display text-[16px] font-medium"> 907 (Active learning mode improving comprehension, 908 listening, and speaking) 909 </p> 910 </div> 911 </div> 912 </td> 913 <td class="border border-gray-300 px-4 py-4 text-center"> 914 <div class="d-flex flex-col"> 915 <i class="fas fa-check text-green-600 text-xl"></i> 916 <p 917 class="text-center font-red-hat-display text-[18px] font-medium" 918 > 919 <strong>Yes â Unique three-stage</strong> learning mode 920 </p> 921 </div> 922 </td> 923 <td class="border border-gray-300 px-4 py-4"> 924 <div class="d-flex items-center flex-col"> 925 <i class="fas fa-times text-red-600 text-xl"></i> 926 <p class="font-red-hat-display text-[18px] font-medium"> 927 No 928 </p> 929 </div> 930 </td> 931 <td class="border border-gray-300 px-4 py-4"> 932 <div class="d-flex items-center flex-col"> 933 <i class="fas fa-times text-red-600 text-xl"></i> 934 <p class="font-red-hat-display text-[18px] font-medium"> 935 No 936 </p> 937 </div> 938 </td> 939 </tr> 940 <!-- Fourth Row --> 941 <tr> 942 <td 943 class="border border-gray-300 px-4 py-4 text-left font-red-hat-display text-md md:text-lg font-medium" 944 > 945 <div class="d-flex items-center gap-[16px]"> 946 <img 947 src="./static/images/sitemap-outline.png" 948 alt="" 949 width="64" 950 height="64" 951 /> 952 <div class="d-flex flex-col"> 953 <p 954 class="font-red-hat-display text-[22px] font-semibold" 955 > 956 Mind Map 957 </p> 958 <p class="font-red-hat-display text-[16px] font-medium"> 959 (for better understanding and memory) 960 </p> 961 </div> 962 </div> 963 </td> 964 <td class="border border-gray-300 px-4 py-4 text-center"> 965 <div class="d-flex flex-col"> 966 <i class="fas fa-check text-green-600 text-xl"></i> 967 <p 968 class="text-center font-red-hat-display text-[18px] font-medium" 969 > 970 <strong>Yes â</strong> Visual 971 <strong>mind maps</strong> enhance learning 972 </p> 973 </div> 974 </td> 975 <td class="border border-gray-300 px-4 py-4"> 976 <div class="d-flex items-center flex-col"> 977 <i class="fas fa-times text-red-600 text-xl"></i> 978 <p class="font-red-hat-display text-[18px] font-medium"> 979 No 980 </p> 981 </div> 982 </td> 983 <td class="border border-gray-300 px-4 py-4"> 984 <div class="d-flex items-center flex-col"> 985 <i class="fas fa-times text-red-600 text-xl"></i> 986 <p class="font-red-hat-display text-[18px] font-medium"> 987 No 988 </p> 989 </div> 990 </td> 991 </tr> 992 <!-- Fifth Row --> 993 <tr> 994 <td 995 class="border border-gray-300 px-4 py-4 text-left font-red-hat-display text-md md:text-lg font-medium" 996 > 997 <div class="d-flex items-center gap-[16px]"> 998 <img 999 src="./static/images/ic_round-mobile-friendly.png" 1000 alt="" 1001 width="64" 1002 height="64" 1003 /> 1004 <div class="d-flex flex-col"> 1005 <p 1006 class="font-red-hat-display text-[22px] font-semibold" 1007 > 1008 Ability to Learn on the Go 1009 </p> 1010 <p class="font-red-hat-display text-[16px] font-medium">
1011 (with a seamless mobile app Disney+ and YouTube) 1012 </p> 1013 </div> 1014 </div> 1015 </td> 1016 <td class="border border-gray-300 px-4 py-4 text-center"> 1017 <div class="d-flex flex-col"> 1018 <i class="fas fa-check text-green-600 text-xl"></i> 1019 <p 1020 class="text-center font-red-hat-display text-[18px] font-medium" 1021 > 1022 <strong>Yes â</strong> Learn anywhere with our app 1023 </p> 1024 </div> 1025 </td> 1026 <td class="border border-gray-300 px-4 py-4"> 1027 <div class="d-flex items-center flex-col"> 1028 <i class="fas fa-check text-green-600 text-xl"></i> 1029 <p 1030 class="text-center font-red-hat-display text-[18px] font-medium" 1031 > 1032 Yes â Mobile learning app 1033 </p> 1034 </div> 1035 </td> 1036 <td class="border border-gray-300 px-4 py-4"> 1037 <div class="d-flex items-center flex-col"> 1038 <i class="fas fa-times text-red-600 text-xl"></i> 1039 <p class="font-red-hat-display text-[18px] font-medium"> 1040 No 1041 </p> 1042 </div> 1043 </td> 1044 </tr> 1045 <!-- Sixth Row --> 1046 <tr> 1047 <td 1048 class="border border-gray-300 px-4 py-4 text-left font-red-hat-display text-md md:text-lg font-medium" 1049 > 1050 <div class="d-flex items-center gap-[16px]"> 1051 <img 1052 src="./static/images/mdi_user-heart.png" 1053 alt="" 1054 width="64" 1055 height="64" 1056 /> 1057 <div class="d-flex flex-col"> 1058 <p 1059 class="font-red-hat-display text-[22px] font-semibold" 1060 > 1061 Preserve Native UI/UX for App 1062 </p> 1063 <!-- <p class="font-red-hat-display text-[16px] font-medium"> 1064 (highlighting important phrases, idioms, and 1065 expressions tailored to your level) 1066 </p> --> 1067 </div> 1068 </div> 1069 </td> 1070 <td class="border border-gray-300 px-4 py-4 text-center"> 1071 <div class="d-flex flex-col"> 1072 <i class="fas fa-check text-green-600 text-xl"></i> 1073 <p class="text-center font-bold">Yes</p> 1074 </div> 1075 </td> 1076 <td class="border border-gray-300 px-4 py-4"> 1077 <div class="d-flex items-center flex-col"> 1078 <p class="font-red-hat-display text-[18px] font-medium"> 1079 Not relevant 1080 </p> 1081 </div> 1082 </td> 1083 <td class="border border-gray-300 px-4 py-4"> 1084 <div class="d-flex items-center flex-col"> 1085 <i class="fas fa-times text-red-600 text-xl"></i> 1086 <p class="font-red-hat-display text-[18px] font-medium"> 1087 No 1088 </p> 1089 </div> 1090 </td> 1091 </tr> 1092 </tbody> 1093 </table> 1094 </div> 1095 </div> 1096 </div> 1097 <!-- Get Started Section --> 1098 <div 1099 class="bg-gradient-to-r from-[#9C68DA] to-[#7868E6] flex items-center justify-center py-8" 1100 > 1101 <div 1102 class="py-16 px-4 md:px-24 xl:px-60 flex flex-col items-center gap-6" 1103 > 1104 <!-- Headline Text --> 1105 <p 1106 class="text-[28px] font-medium font-['Lato'] text-white text-center" 1107 > 1108 Ready to leap from intermediate to advanced level in no time? 1109 </p> 1110 1111 <!-- Subheadline Text --> 1112 <p 1113 class="text-[24px] font-medium font-['Lato'] text-white text-center" 1114 > 1115 Dive into a world where entertainment meets education. Start your 1116 free trial now! 1117 </p> 1118 1119 <!-- Get Started Button --> 1120 <button 1121 style=" 1122 background: linear-gradient(90deg, #ee9e02 0%, #e1590d 42.09%); 1123 " 1124 onclick="handleGetStarted()" 1125 class="group font-['Lato'] text-[24px] font-semibold text-[#EAEAEA] rounded-full px-6 py-3 flex items-center gap-2" 1126 > 1127 Get Started Itâs Free 1128 <i class="fas fa-arrow-right text-[#EAEAEA] md:text-2xl"></i> 1129 </button> 1130 </div> 1131 </div> 1132 1133 <!-- Customers Comment --> 1134 <div class="bg-white py-16 px-6"> 1135 <!-- Section Title --> 1136 <h2 1137 class="text-center font-readex-pro font-semibold text-[40px] md:text-4xl" 1138 > 1139 Customers reviews 1140 </h2> 1141 1142 <!-- Swiper Container --> 1143 <div class="mt-16"> 1144 <div class="swiper mySwiper"> 1145 <div class="swiper-wrapper"> 1146 <!-- Customer 1 --> 1147 <div class="swiper-slide pb-6"> 1148 <div 1149 class="border border-gray-300 rounded-2xl p-6 transition-all duration-500" 1150 > 1151 <div class="flex items-center gap-4"> 1152 <div class="rounded-full w-20 h-20 overflow-hidden"> 1153 <img 1154 src="./static/images/customers/photo_2024-09-27_16-28-04.jpg" 1155 alt="gislaine daieni" 1156 class="w-full h-full object-cover" 1157 /> 1158 </div> 1159 <div> 1160 <h3 1161 class="font-['Lato'] font-semibold text-lg md:text-2xl text-gray-800 whitespace-nowrap" 1162 > 1163 gislaine daieni 1164 </h3> 1165 <div class="flex text-[#7868E6]"> 1166 <i class="fas fa-star"></i> 1167 <i class="fas fa-star"></i> 1168 <i class="fas fa-star"></i> 1169 <i class="fas fa-star"></i> 1170 <i class="fas fa-star"></i> 1171 </div> 1172 </div> 1173 </div> 1174 <p 1175 class="font-red-hat-display text-base md:text-lg text-gray-600 mt-4" 1176 id="comment-1" 1177 > 1178 This Fluency gym takes learning to a new level! From 1179 understanding the subtitles to practicing speaking by 1180 guessing the dialogues, itâs incredibly interactive. Iâve 1181 noticed huge improvements in my pronunciation and listening 1182 skills. Itâs both fun and effective! 1183 </p> 1184 <button 1185 onclick="toggleComment('comment-1', this)" 1186 class="mt-4 text-[#7868E6] hover:text-purple-600 transition font-red-hat-display" 1187 > 1188 Show Less 1189 </button> 1190 </div> 1191 </div> 1192 1193 <!-- Customer 2 --> 1194 <div class="swiper-slide pb-6"> 1195 <div 1196 class="border border-gray-300 rounded-2xl p-6 transition-all duration-500" 1197 > 1198 <div class="flex items-center gap-4"> 1199 <div class="rounded-full w-20 h-20 overflow-hidden"> 1200 <img 1201 src="./static/images/customers/photo_2024-09-27_16-28-28.jpg" 1202 alt="Ethan Rubenstein" 1203 class="w-full h-full object-cover" 1204 /> 1205 </div> 1206 <div> 1207 <h3 1208 class="font-['Lato'] font-semibold text-lg md:text-2xl text-gray-800 whitespace-nowrap" 1209 > 1210 Ethan Rubenstein 1211 </h3> 1212 <div class="flex text-[#7868E6]"> 1213 <i class="fas fa-star"></i> 1214 <i class="fas fa-star"></i> 1215 <i class="fas fa-star"></i> 1216 <i class="fas fa-star"></i> 1217 <i class="fas fa-star"></i> 1218 </div> 1219 </div> 1220 </div> 1221 <p 1222 class="font-red-hat-display text-base md:text-lg text-gray-600 mt-4" 1223 id="comment-2" 1224 > 1225 The Fluency Gym feature has been a game changer for my 1226 language practice! It breaks down the process into simple 1227 steps â comprehension, reading, listening, and speaking â 1228 making learning more immersive and fun. Guessing the muted 1229 dialogues really helped me build confidence in speaking. 1230 Highly recommend! 1231 </p> 1232 <button 1233 onclick="toggleComment('comment-2', this)" 1234 class="mt-4 text-[#7868E6] hover:text-purple-600 transition font-red-hat-display" 1235 > 1236 Show Less 1237 </button> 1238 </div> 1239 </div> 1240 1241 <!-- Customer 3 --> 1242 <div class="swiper-slide pb-6"> 1243 <div 1244 class="border border-gray-300 rounded-2xl p-6 transition-all duration-500" 1245 > 1246 <div class="flex items-center gap-4"> 1247 <div class="rounded-full w-20 h-20 overflow-hidden"> 1248 <img 1249 src="./static/images/customers/photo_2024-09-27_16-28-32.jpg" 1250 alt="Jihane Jennat" 1251 class="w-full h-full object-cover" 1252 /> 1253 </div> 1254 <div> 1255 <h3 1256 class="font-['Lato'] font-semibold text-lg md:text-2xl text-gray-800 whitespace-nowrap" 1257 > 1258 Jihane Jennat 1259 </h3> 1260 <div class="flex text-[#7868E6]"> 1261 <i class="fas fa-star"></i> 1262 <i class="fas fa-star"></i> 1263 <i class="fas fa-star"></i> 1264 <i class="fas fa-star"></i> 1265 <i class="fas fa-star"></i> 1266 </div> 1267 </div> 1268 </div> 1269 <p 1270 class="font-red-hat-display text-base md:text-lg text-gray-600 mt-4" 1271 id="comment-3" 1272 > 1273 I love the Roadmap! Itâs like having a personalized course 1274 with my favorite TV shows. The AI selects phrases at my 1275 level, and I can save them to review later. Learning has 1276 never been this engaging and structured! 1277 </p> 1278 <button 1279 onclick="toggleComment('comment-3', this)" 1280 class="mt-4 text-[#7868E6] hover:text-purple-600 transition font-red-hat-display" 1281 > 1282 Show Less 1283 </button> 1284 </div> 1285 </div> 1286 1287 <!-- Customer 4 --> 1288 <div class="swiper-slide pb-6"> 1289 <div 1290 class="border border-gray-300 rounded-2xl p-6 transition-all duration-500" 1291 > 1292 <div class="flex items-center gap-4"> 1293 <div class="rounded-full w-20 h-20 overflow-hidden"> 1294 <img 1295 src="./static/images/customers/photo_2024-09-27_16-28-34.jpg" 1296 alt="Daniel Kiska" 1297 class="w-full h-full object-cover" 1298 /> 1299 </div> 1300 <div> 1301 <h3 1302 class="font-['Lato'] font-semibold text-lg md:text-2xl text-gray-800 whitespace-nowrap" 1303 > 1304 Daniel Kiska 1305 </h3> 1306 <div class="flex text-[#7868E6]"> 1307 <i class="fas fa-star"></i> 1308 <i class="fas fa-star"></i> 1309 <i class="fas fa-star"></i> 1310 <i class="fas fa-star"></i> 1311 <i class="fas fa-star"></i> 1312 </div> 1313 </div> 1314 </div> 1315 <p 1316 class="font-red-hat-display text-base md:text-lg text-gray-600 mt-4" 1317 id="comment-4" 1318 > 1319 Active learning is exactly what I needed to push my speaking 1320 skills forward. The three-step approach helps me absorb 1321 vocabulary and grammar naturally, and guessing the dialogues 1322 really challenges me to think like a native speaker. 1323 </p> 1324 <button 1325 onclick="toggleComment('comment-4', this)" 1326 class="mt-4 text-[#7868E6] hover:text-purple-600 transition font-red-hat-display" 1327 > 1328 Show Less 1329 </button> 1330 </div> 1331 </div> 1332 1333 <!-- Customer 5 --> 1334 <div class="swiper-slide pb-6"> 1335 <div 1336 class="border border-gray-300 rounded-2xl p-6 transition-all duration-500" 1337 > 1338 <div class="flex items-center gap-4"> 1339 <div class="rounded-full w-20 h-20 overflow-hidden"> 1340 <img 1341 src="./static/images/customers/photo_2024-09-27_16-28-36.jpg" 1342 alt="Nora Kensington" 1343 class="w-full h-full object-cover" 1344 /> 1345 </div> 1346 <div> 1347 <h3 1348 class="font-['Lato'] font-semibold text-lg md:text-2xl text-gray-800 whitespace-nowrap" 1349 > 1350 Nora Kensington 1351 </h3> 1352 <div class="flex text-[#7868E6]"> 1353 <i class="fas fa-star"></i> 1354 <i class="fas fa-star"></i> 1355 <i class="fas fa-star"></i> 1356 <i class="fas fa-star"></i> 1357 <i class="fas fa-star"></i> 1358 </div> 1359 </div> 1360 </div> 1361 <p 1362 class="font-red-hat-display text-base md:text-lg text-gray-600 mt-4" 1363 id="comment-5" 1364 > 1365 Have just started using the language extensions for YouTube 1366 and Netflix to help me learn German. The features such as 1367 Dual Subtitles, instant Dictionary, Word Pronunciation, 1368 Sidebar subtitles are some of the wonderful features I have 1369 benefitted from. 1370 </p> 1371 <button 1372 onclick="toggleComment('comment-5', this)" 1373 class="mt-4 text-[#7868E6] hover:text-purple-600 transition font-red-hat-display" 1374 > 1375 Show Less 1376 </button> 1377 </div> 1378 </div> 1379 1380 <!-- Customer 6 --> 1381 <div class="swiper-slide pb-6"> 1382 <div 1383 class="border border-gray-300 rounded-2xl p-6 transition-all duration-500" 1384 > 1385 <div class="flex items-center gap-4"> 1386 <div class="rounded-full w-20 h-20 overflow-hidden"> 1387 <im
1387g 1388 src="./static/images/customers/photo_2024-09-27_16-28-38.jpg" 1389 alt="Aiden Frost" 1390 class="w-full h-full object-cover" 1391 /> 1392 </div> 1393 <div> 1394 <h3 1395 class="font-['Lato'] font-semibold text-lg md:text-2xl text-gray-800 whitespace-nowrap" 1396 > 1397 Aiden Frost 1398 </h3> 1399 <div class="flex text-[#7868E6]"> 1400 <i class="fas fa-star"></i> 1401 <i class="fas fa-star"></i> 1402 <i class="fas fa-star"></i> 1403 <i class="fas fa-star"></i> 1404 <i class="fas fa-star"></i> 1405 </div> 1406 </div> 1407 </div> 1408 <p 1409 class="font-red-hat-display text-base md:text-lg text-gray-600 mt-4" 1410 id="comment-6" 1411 > 1412 I found it really good for YouTube videos, I only tested it 1413 there. It really, really helps those who want to learn 1414 another language. Congratulations, guys! 1415 </p> 1416 <button 1417 onclick="toggleComment('comment-6', this)" 1418 class="mt-4 text-[#7868E6] hover:text-purple-600 transition font-red-hat-display" 1419 > 1420 Show Less 1421 </button> 1422 </div> 1423 </div> 1424 1425 <!-- Customer 7 --> 1426 <div class="swiper-slide pb-6"> 1427 <div 1428 class="border border-gray-300 rounded-2xl p-6 transition-all duration-500" 1429 > 1430 <div class="flex items-center gap-4"> 1431 <div class="rounded-full w-20 h-20 overflow-hidden"> 1432 <img 1433 src="./static/images/customers/photo_2024-09-27_16-28-40.jpg" 1434 alt="Lila Montague" 1435 class="w-full h-full object-cover" 1436 /> 1437 </div> 1438 <div> 1439 <h3 1440 class="font-['Lato'] font-semibold text-lg md:text-2xl text-gray-800 whitespace-nowrap" 1441 > 1442 Lila Montague 1443 </h3> 1444 <div class="flex text-[#7868E6]"> 1445 <i class="fas fa-star"></i> 1446 <i class="fas fa-star"></i> 1447 <i class="fas fa-star"></i> 1448 <i class="fas fa-star"></i> 1449 <i class="fas fa-star"></i> 1450 </div> 1451 </div> 1452 </div> 1453 <p 1454 class="font-red-hat-display text-base md:text-lg text-gray-600 mt-4" 1455 id="comment-7" 1456 > 1457 It's great! I am learning German right now and I can watch 1458 German videos on YouTube with the German subtitles and the 1459 English subtitles. I can also watch English videos on 1460 YouTube and just reverse the subtitles. It is really helpful 1461 and I find it entertaining while also learning. 1462 </p> 1463 <button 1464 onclick="toggleComment('comment-7', this)" 1465 class="mt-4 text-[#7868E6] hover:text-purple-600 transition font-red-hat-display" 1466 > 1467 Show Less 1468 </button> 1469 </div> 1470 </div> 1471 </div> 1472 </div> 1473 </div> 1474 </div> 1475 <!-- Footer --> 1476 <div class="bg-[#1F1F26] flex items-center justify-center py-12"> 1477 <!-- Footer Container --> 1478 <div 1479 class="max-w-xl w-full flex flex-col items-center gap-6 px-4 md:px-0" 1480 > 1481 <!-- Links Section --> 1482 <div class="flex gap-8"> 1483 <a 1484 href="/extension/tutorials/" 1485 class="text-white text-[15px] hover:text-purple-400 transition font-dm-sans" 1486 >Tutorials</a 1487 > 1488 <a 1489 href="/learn/" 1490 class="text-white text-[15px] hover:text-purple-400 transition font-dm-sans" 1491 >Learn</a 1492 > 1493 <a 1494 href="/practice/english-shadowing/" 1495 data-shadowing-navigation="footer" 1496 class="text-white text-[15px] hover:text-purple-400 transition font-dm-sans" 1497 >Shadowing</a 1498 > 1499 <a 1500 href="./privacy/index.html" 1501 class="text-white text-[15px] hover:text-purple-400 transition font-dm-sans" 1502 >Privacy Policy</a 1503 > 1504 <a 1505 href="./terms/index.html" 1506 class="text-white text-[15px] hover:text-purple-400 transition font-dm-sans" 1507 >Terms</a 1508 > 1509 <a 1510 href="./contact_us.html" 1511 class="text-white text-[15px] hover:text-purple-400 transition font-dm-sans" 1512 >Contact</a 1513 > 1514 </div> 1515 1516 <!-- Email Image --> 1517 <img src="./static/images/email-bg-black.png" alt="email" /> 1518 <div class="flex gap-4"> 1519 <!-- YouTube Icon Button --> 1520 <button class="icon-button"> 1521 <i class="fab fa-youtube text-white text-3xl"></i> 1522 </button> 1523 1524 <!-- Instagram Icon Button --> 1525 <!-- <button class="icon-button"> 1526 <i class="fab fa-instagram text-white text-3xl"></i> 1527 </button> --> 1528 </div> 1529 1530 <!-- Social Icons Section (Commented out as in original co
1530de) --> 1531 <!-- 1532 <div class="flex gap-4"> 1533 <a href="#" class="text-white hover:text-purple-400 transition"> 1534 <i class="fab fa-youtube text-xl"></i> 1535 </a> 1536 <a href="#" class="text-white hover:text-purple-400 transition"> 1537 <i class="fab fa-instagram text-xl"></i> 1538 </a> 1539 </div> 1540 --> 1541 1542 <!-- Logo and Brand Name --> 1543 <div class="flex flex-col items-center w-[72px]"> 1544 <img 1545 src="./static/images/ff052c61a0d9a311fd3f89c547ee9282.png" 1546 alt="FunFluen Logo" 1547 class="w-18 h-18" 1548 /> 1549 <h2 class="text-white lobster-font text-3xl font-normal"> 1550 FunFluen 1551 </h2> 1552 </div> 1553 1554 <!-- Mission Statement --> 1555 <p 1556 class="text-white font-dm-sans text-[17px] font-normal text-center opacity-50 max-w-md" 1557 > 1558 Our mission is to help you learn a new language in a fun and 1559 effortless way. 1560 </p> 1561 </div> 1562 </div> 1563 </div> 1564
1564<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
1564 1565
1565<script> 1566 function handleGetStarted() { 1567 try { 1568 window.location.href = 1569 "https://chromewebstore.google.com/detail/language-reactor-transfor/hjdmhfbgpdkkdfgjfiknaacjfjljpblc"; 1570 } catch (error) { 1571 console.error("Error redirecting:", error); 1572 } 1573 } 1574 1575 // function toggleDrawer() { 1576 // const drawer = document.getElementById("drawer"); 1577 // if (drawer.classList.contains("closed")) { 1578 // drawer.classList.remove("closed"); 1579 // drawer.classList.add("open"); 1580 // } else { 1581 // drawer.classList.remove("open"); 1582 // drawer.classList.add("closed"); 1583 // } 1584 // } 1585 1586 // // Close drawer on clicking outside of it 1587 // document.addEventListener("click", function (event) { 1588 // const drawer = document.getElementById("drawer"); 1589 // const button = event.target.closest("button"); 1590 // if (!drawer.contains(event.target) && !button) { 1591 // drawer.classList.remove("open"); 1592 // drawer.classList.add("closed"); 1593 // } 1594 // }); 1595 function handleLogin() { 1596 window.location.href = 1597 "https://funfluen.com/payment-gateway/account/stripe"; 1598 } 1599 1600 // Function to change navbar background on scroll 1601 window.addEventListener("scroll", () => { 1602 const navbar = document.getElementById("navbar"); 1603 if (window.scrollY > 50) { 1604 navbar.classList.remove("navbar-transparent"); 1605 navbar.classList.add("navbar-scrolled"); 1606 } else { 1607 navbar.classList.remove("navbar-scrolled"); 1608 navbar.classList.add("navbar-transparent"); 1609 } 1610 }); 1611 // Initialize Swiper 1612 var swiper = new Swiper(".mySwiper", { 1613 slidesPerView: 4, 1614 spaceBetween: 20, 1615 breakpoints: { 1616 300: { 1617 slidesPerView: 1, 1618 spaceBetween: 10, 1619 }, 1620 768: { 1621 slidesPerView: 2, 1622 spaceBetween: 20, 1623 }, 1624 1300: { 1625 slidesPerView: 3, 1626 spaceBetween: 30, 1627 }, 1628 1700: { 1629 slidesPerView: 4, 1630 spaceBetween: 50, 1631 }, 1632 }, 1633 }); 1634 1635 // Function to toggle comment length 1636 function toggleComment(commentId, button) { 1637 var commentElement = document.getElementById(commentId); 1638 var fullText = commentElement.getAttribute("data-full-text"); 1639 var isExpanded = 1640 commentElement.getAttribute("data-expanded") === "true"; 1641 1642 if (!fullText) { 1643 fullText = commentElement.textContent; 1644 commentElement.setAttribute("data-full-text", fullText); 1645 } 1646 1647 if (isExpanded) { 1648 commentElement.textContent = fullText.slice(0, 150) + "..."; 1649 commentElement.setAttribute("data-expanded", "false"); 1650 button.textContent = "More"; 1651 } else { 1652 commentElement.textContent = fullText; 1653 commentElement.setAttribute("data-expanded", "true"); 1654 button.textContent = "Show Less"; 1655 } 1656 } 1657 1658 // Initialize comments to show only first 150 characters 1659 document.addEventListener("DOMContentLoaded", function () { 1660 var comments = document.querySelectorAll('[id^="comment-"]'); 1661 comments.forEach(function (commentElement) { 1662 var fullText = commentElement.textContent; 1663 if (fullText.length > 150) { 1664 commentElement.setAttribute("data-full-text", fullText); 1665 commentElement.textContent = fullText.slice(0, 150) + "..."; 1666 commentElement.setAttribute("data-expanded", "false"); 1667 var button = commentElement.nextElementSibling; 1668 if (button && button.tagName.toLowerCase() === "button") { 1669 button.textContent = "More"; 1670 } 1671 } 1672 }); 1673 }); 1674 document 1675 .querySelector(".icon-button:nth-child(1)") 1676 .addEventListener("click", function () { 1677 window.open("http://www.youtube.com/@FunFluen", "_blank"); 1678 }); 1679 1680 // Example: Handle Instagram button click event 1681 document 1682 .querySelector(".icon-button:nth-child(2)") 1683 .addEventListener("click", function () { 1684 window.open("https://instagram.com", "_blank"); 1685 }); 1686 </script>
1686 1687
1687<script 1688 src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.0/alpine.min.js" 1689 defer 1690 ></script>
1690 1691
1691<script src="./js/index.js"></script>
1691 1692 </body> 1693</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.