PageSourceSearch

https://funfluen.com/

html funfluen.com collected 2026-10-02 00:49:24 UTC 69,590 bytes, 1,693 lines download raw bytes

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.