PageSourceSearch

https://securedcalls.com/

html securedcalls.com collected 2026-10-08 17:37:04 UTC 34,785 bytes, 930 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" class="scroll-smooth">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Secured calls</title>
7    <link rel="stylesheet" href="css/main.css" />
8    <link rel="icon" type="image/png" href="images/logo.png" />
9
10    <style>
11      .animate-spin-border {
12        background: linear-gradient(45deg, #3497db, #8e44ad, #f39c12, #e74c3c);
13        background-size: 400% 400%;
14        -webkit-mask: linear-gradient(#fff 0 0) padding-box,
15          linear-gradient(#fff 0 0);
16        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
17        mask-composite: exclude;
18        -webkit-mask-composite: destination-out;
19        animation: spin-gradient 5s linear infinite;
20      }
21
22      @keyframes spin-gradient {
23        0% {
24          background-position: 0% 50%;
25        }
26        50% {
27          background-position: 100% 50%;
28        }
29        100% {
30          background-position: 0% 50%;
31        }
32      }
33      /* Default navbar style when it's transparent */
34      #navbar {
35        background-color: transparent;
36        transition: background-color 0.3s, box-shadow 0.3s;
37      }
38
39      /* Style when the navbar is scrolled */
40      .navbar-scrolled {
41        background: linear-gradient(to right, #3597da, #013d65);
42        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Tray shadow effect */
43      }
44
45      /* Marquee Animation */
46      @keyframes marquee {
47        0% {
48          transform: translateX(0);
49        }
50        100% {
51          transform: translateX(-100%);
52        }
53      }
54
55      /* Applying the marquee animation */
56      .animate-marquee {
57        display: inline-flex;
58        animation: marquee 15s linear infinite;
59      }
60    </style>
61
62    
62<script
63      type="text/javascript"
64      src="https://cdn.emailjs.com/sdk/2.3.2/email.min.js"
65    ></script>
65
66    
66<script>
67      window.addEventListener("scroll", function () {
68        const navbar = document.getElementById("navbar");
69        if (window.scrollY > 50) {
70          // Add class when scrolled more than 50px
71          navbar.classList.add("navbar-scrolled");
72        } else {
73          // Remove class when scrolled back to top
74          navbar.classList.remove("navbar-scrolled");
75        }
76      });
77    </script>
77
78    
78<script type="text/javascript">
79      toastr.options = {
80        closeButton: true,
81        progressBar: true,
82        positionClass: "toast-top-right",
83        timeOut: "3000",
84      };
85    </script>
85
86  </head>
87
88  <body
89    class="font-Poppins"
90    style="background: linear-gradient(to right, #3597da, #013d65)"
91  >
92    <header class="sticky w-full top-0 left-0 z-50">
93      <nav
94        id="navbar"
95        class="transition-all duration-300 ease-in-out p-6 md:px-24 w-full mx-auto flex justify-between md:flex-row md:justify-between items-center"
96      >
97        <!-- Fixed size for the logo to maintain the same size on all screen widths -->
98        <a href="#">
99          <img
100            class="drop-shadow-2xl h-14 w-16"
101            src="./images/logo.png"
102            alt="Logo"
103          />
104        </a>
105
106        <!-- Hamburger Icon (visible on small screens) -->
107        <div class="md:hidden">
108          <button id="menu-btn" class="focus:outline-none">
109            <svg
110              class="w-8 h-8 text-white"
111              xmlns="http://www.w3.org/2000/svg"
112              fill="none"
113              viewBox="0 0 24 24"
114              stroke="currentColor"
115            >
116              <path
117                stroke-linecap="round"
118                stroke-linejoin="round"
119                stroke-width="2"
120                d="M4 6h16M4 12h16m-7 6h7"
121              />
122            </svg>
123          </button>
124        </div>
125
126        <!-- Navigation links -->
127        <ul
128          id="menu"
129          class="hidden md:flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-8 text-white text-lg absolute md:static top-24 left-0 right-0 bg-gray-900 md:bg-transparent w-full p-6 md:p-0"
130        >
131          <li>
132            <a class="hover:text-sky-800" href="#">Home</a>
133          </li>
134          <li>
135            <a class="hover:text-sky-600" href="#features">Features</a>
136          </li>
137          <li>
138            <a class="hover:text-sky-600" href="#faq">FAQs</a>
139          </li>
140          <li class="md:hidden">
141            <a class="hover:text-sky-600" href="#contact">Demo</a>
142          </li>
143          <li class="md:hidden">
144            <a
145              class="hover:text-sky-600"
146              href="https://console.securedcalls.com"
147              target="_blank"
148              >Console</a
149            >
150          </li>
151        </ul>
152
153        <!-- Buttons (hidden on small screens) -->
154        <div class="hidden md:flex gap-2">
155          <button
156            class="bg-[#3597da] text-white px-6 py-3 rounded-3xl hover:bg-[#013d65] transition duration-300 ease-in-out"
157          >
158            <div class="flex items-center justify-center">
159              <a href="#contact">Demo</a>
160            </div>
161          </button>
162
163          <button
164            class="bg-[#3597da] text-white px-6 py-3 rounded-3xl hover:bg-[#013d65] transition duration-300 ease-in-out"
165          >
166            <div class="flex items-center justify-center">
167              <a href="https://console.securedcalls.com" target="_blank"
168                >Console</a
169              >
170            </div>
171          </button>
172        </div>
173      </nav>
174
175      
175<script>
176        const menuBtn = document.getElementById("menu-btn");
177        const menu = document.getElementById("menu");
178        const menuItems = menu.querySelectorAll("li"); // Select all <li> elements
179
180        // Toggle the visibility of the menu on small screens
181        menuBtn.addEventListener("click", () => {
182          menu.classList.toggle("hidden");
183        });
184
185        // Close the menu if a click occurs outside of it
186        document.addEventListener("click", (event) => {
187          const isClickInside =
188            menu.contains(event.target) || menuBtn.contains(event.target);
189
190          if (!isClickInside && !menu.classList.contains("hidden")) {
191            menu.classList.add("hidden");
192          }
193        });
194
195        // Close the menu if any of the <li> elements is clicked
196        menuItems.forEach((item) => {
197          item.addEventListener("click", () => {
198            if (!menu.classList.contains("hidden")) {
199              menu.classList.add("hidden");
200            }
201          });
202        });
203      </script>
203
204    </header>
205
206    <!-- Hero Section -->
207    <section
208      class="flex flex-col md:flex-row items-center justify-center text-center md:text-left text-white pt-12 pb-12"
209    >
210      <!-- Text Section -->
211      <div class="md:pl-24 drop-shadow-2xl">
212        <h1
213          class="text-6xl lg:text-8xl font-medium mb-4 text-white drop-shadow-xl"
214        >
215          <span class="leading-snug">We help</span><br /><span
216            class="bg-gradient-to-r from-[#1EC4FF] to-[#fff] text-6xl font-bold lg:text-9xl bg-clip-text text-transparent uppercase"
217            >businesses</span
218          >
219          <br /><span class="leading-1">showcase their<br />brand</span>
220        </h1>
221        <p class="text-2xl my-6 text-white font-normal">
222          with Secured, Trusted & Verified calls
223        </p>
224      </div>
225      <!-- Image Section -->
226      <div class="px-4 md:block md:min-w-4xl md:max-w-4xl drop-shadow-2xl">
227        <img
228          src="./images/call-ringing.gif"
229          alt="App Screenshot"
230          class="w-[400px] drop-shadow-2xl"
231        />
232
233        <!-- <iframe
234          class="w-auto h-[750px]"
235          src="https://www.youtube.com/embed/j0pk5GJ5aLk?rel=0&modestbranding=1&iv_load_policy=3&autoplay=1&controls=0"
236          frameborder="0"
237          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
238          allowfullscreen
239        >
240        </iframe> -->
241      </div>
242    </section>
243
244    <!-- Features Section -->
245    <section id="features" class="bg-white py-16 text-slate-700">
246      <div
247        class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center drop-shadow-2xl"
248      >
249        <div class="mb-12">
250          <h2
251            class="hidden md:block text-6xl font-semibold px-12 pb-6 drop-shadow-xl"
252          >
253            Key Features of Secured Calls
254          </h2>
255          <h2 class="md:hidden sm:block text-6xl font-bold px-12 pb-6">
256            Key Features
257          </h2>
258          <p class="text-lg text-gray-800">
259            Discover how Secured Calls enhances communication with branded
260            calling and more
261          </p>
262        </div>
263
264        <!-- Features Grid -->
265        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
266          <!-- Feature 1 -->
267          <div
268            class="relative bg-white p-6 rounded-lg drop-shadow-lg hover:scale-105 transform transition duration-300"
269          >
270            <div
271              class="absolute inset-0 border-4 border-transparent rounded-lg animate-spin-border"
272            ></div>
273            <h3 class="font-semibold text-xl mb-2">Branded Calling</h3>
274            <p class="text-gray-600">
275              Showcase your brand by displaying your business name and logo
276              during calls, eliminating unknown caller issues.
277            </p>
278          </div>
279
280          <!-- Feature 2 -->
281          <div
282            class="relative bg-white p-6 rounded-lg drop-shadow-lg hover:scale-105 transform transition duration-300"
283          >
284            <div
285              class="absolute inset-0 border-4 border-transparent rounded-lg animate-spin-border"
286            ></div>
287            <h3 class="font-semibold text-xl mb-2">In-App and PSTN Calling</h3>
288            <p class="text-gray-600">
289              Choose between traditional PSTN calling and VoIP in-app calling
290              using the Vonage Voice API.
291            </p>
292          </div>
293
294          <!-- Feature 9 -->
295          <div
296            class="relative bg-white p-6 rounded-lg drop-shadow-lg hover:scale-105 transform transition duration-300"
297          >
298            <div
299              class="absolute inset-0 border-4 border-transparent rounded-lg animate-spin-border"
300            ></div>
301
302            <h3 class="font-semibold text-xl mb-2">
303              Consistent Experience Across Platforms
304            </h3>
305            <p class="text-gray-600">
306              Whether you're using an iOS or Android device, our solution
307              ensures a seamless and consistent experience. Your brand is always
308              showcased beautifully, no matter the platform.
309            </p>
310          </div>
311
312          <!-- Feature 3 -->
313          <div
314            class="relative bg-white p-6 rounded-lg drop-shadow-lg hover:scale-105 transform transition duration-300"
315          >
316            <div
317              class="absolute inset-0 border-4 border-transparent roun
317ded-lg animate-spin-border"
318            ></div>
319            <h3 class="font-semibold text-xl mb-2">Custom Call Intent</h3>
320
321            <p class="text-gray-600">
322              Set custom intents for each call, allowing recipients to
323              understand the purpose of the call before answering.
324            </p>
325          </div>
326
327          <!-- Feature 4 -->
328          <div
329            class="relative bg-white p-6 rounded-lg drop-shadow-lg hover:scale-105 transform transition duration-300"
330          >
331            <div
332              class="absolute inset-0 border-4 border-transparent rounded-lg animate-spin-border"
333            ></div>
334
335            <h3 class="font-semibold text-xl mb-2">Read-Only Call Note</h3>
336            <p class="text-gray-600">
337              Send a read-only note alongside the call that provides context to
338              the recipient, improving communication clarity.
339            </p>
340          </div>
341
342          <!-- Feature 5 -->
343          <div
344            class="relative bg-white p-6 rounded-lg drop-shadow-lg hover:scale-105 transform transition duration-300"
345          >
346            <div
347              class="absolute inset-0 border-4 border-transparent rounded-lg animate-spin-border"
348            ></div>
349
350            <h3 class="font-semibold text-xl mb-2">Seamless SDK Integration</h3>
351            <p class="text-gray-600">
352              Easily integrate our SDKs into your existing iOS and Android apps
353              for branded calling and secure communications.
354            </p>
355          </div>
356
357          <!-- Feature 9 -->
358          <div
359            class="relative bg-white p-6 rounded-lg drop-shadow-lg hover:scale-105 transform transition duration-300"
360          >
361            <div
362              class="absolute inset-0 border-4 border-transparent rounded-lg animate-spin-border"
363            ></div>
364
365            <h3 class="font-semibold text-xl mb-2">
366              No Third-Party App Dependency
367            </h3>
368            <p class="text-gray-600">
369              Secured Calls is embedded within your own app, so there’s no need
370              for users to download a third-party app to see the branding.
371            </p>
372          </div>
373
374          <!-- Feature 6 -->
375          <div
376            class="relative bg-white p-6 rounded-lg drop-shadow-lg hover:scale-105 transform transition duration-300"
377          >
378            <div
379              class="absolute inset-0 border-4 border-transparent rounded-lg animate-spin-border"
380            ></div>
381
382            <h3 class="font-semibold text-xl mb-2">Secure and Private</h3>
383            <p class="text-gray-600">
384              Secured Calls does not store or sell user data. The solution
385              operates entirely within your app, ensuring full control.
386            </p>
387          </div>
388
389          <!-- Feature 7 -->
390          <div
391            class="relative bg-white p-6 rounded-lg drop-shadow-lg hover:scale-105 transform transition duration-300"
392          >
393            <div
394              class="absolute inset-0 border-4 border-transparent rounded-lg animate-spin-border"
395            ></div>
396
397            <h3 class="font-semibold text-xl mb-2">
398              Push Notification-Based Branding
399            </h3>
400            <p class="text-gray-600">
401              Our system sends branding information via push notifications to
402              the user's phone, ensuring proper identification before the call.
403            </p>
404          </div>
405
406          <!-- Feature 8 -->
407          <div
408            class="relative bg-white p-6 rounded-lg drop-shadow-lg hover:scale-105 transform transition duration-300"
409          >
410            <div
411              class="absolute inset-0 border-4 border-transparent rounded-lg animate-spin-border"
412            ></div>
413
414            <h3 class="font-semibold text-xl mb-2">Business Portal</h3>
415            <p class="text-gray-600">
416              Manage your branding and outgoing numbers through a dedicated
417              business portal with easy access to SDK downloads and
418              documentation.
419            </p>
420          </div>
421        </div>
422      </div>
423    </section>
424
425    <!-- It can't get easier -->
426    <section class="py-16">
427      <div class="text-center mb-12">
428        <h2 class="text-6xl text-white font-semibold px-12 drop-shadow-lg">
429          It can't get easier...
430        </h2>
431      </div>
432      <div
433        class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 px-4 sm:px-6 lg:px-8"
434      >
435        <!-- Feature Box 1 -->
436        <div
437          class="bg-gradient-to-r from-[#621EB4] to-[#3a106e] text-white flex flex-col items-center justify-start p-6 rounded-xl drop-shadow-lg hover:drop-shadow-[0_0_20px_rgba(255,255,255,0.7)] hover:scale-105 transform transition duration-300"
438          style="user-select: none"
439        >
440          <div
441            class="bg-gradient-to-r from-[#3a106e] to-[#621EB4] p-4 mb-4 w-20 h-20 rounded-full text-center flex justify-center items-center drop-shadow-lg"
442          >
443            <span class="text-4xl font-bold">1</span>
444          </div>
445          <h3 class="font-semibold text-xl mb-2 uppercase">
446            <span class="tracking-widest">Register</span>
447          </h3>
448          <p class="text-center">
449            Create your secured calls account and register your business
450          </p>
451        </div>
452
453        <!-- Feature Box 2 -->
454        <div
455          class="bg-gradient-to-r from-[#a12aa3] to-[#530c54] text-white flex flex-col items-center justify-start p-6 rounded-xl drop-shadow-lg hover:drop-shadow-[0_0_20px_rgba(255,255,255,0.7)] hover:scale-105 transform transition duration-300"
456          style="user-select: none"
457        >
458          <div
459            class="bg-gradient-to-r from-[#530c54] to-[#a12aa3] p-4 mb-4 w-20 h-20 rounded-full text-center flex justify-center items-center drop-shadow-lg"
460          >
461            <span class="text-4xl font-bold">2</span>
462          </div>
463          <h3 class="font-semibold text-xl mb-2 uppercase">
464            <span class="tracking-widest">Integrate</span>
465          </h3>
466          <p class="text-center">
467            Integrate your mobile apps and contact centre
468          </p>
469        </div>
470
471        <!-- Feature Box 3 -->
472        <div
473          class="bg-gradient-to-r from-[#24682E] to-[#0d4b16] text-white flex flex-col items-center justify-start p-6 rounded-xl drop-shadow-lg hover:drop-shadow-[0_0_20px_rgba(255,255,255,0.7)] hover:scale-105 transform transition duration-300"
474          style="user-select: none"
475        >
476          <div
477            class="bg-gradient-to-r to-[#24682E] from-[#0d4b16] p-4 mb-4 w-20 h-20 rounded-full text-center flex justify-center items-center drop-shadow-lg"
478          >
479            <span class="text-4xl font-bold">3</span>
480          </div>
481          <h3 class="font-semibold text-xl mb-2 uppercase">
482            <span class="tracking-widest">Brand</span>
483          </h3>
484          <p class="text-center">Apply branding to your numbers</p>
485        </div>
486
487        <!-- Feature Box 4 -->
488
489        <div
490          class="bg-gradient-to-r from-[#4498E2] to-[#103658] text-white flex flex-col items-center justify-start p-6 rounded-xl drop-shadow-lg hover:drop-shadow-[0_0_20px_rgba(255,255,255,0.7)] hover:scale-105 transform transition duration-300"
491          style="user-select: none"
492        >
493          <div
494            class="bg-gradient-to-r from-[#103658] to-[#4498E2] bg-sky-500 p-4 mb-4 w-20 h-20 rounded-full text-center flex justify-center items-center drop-shadow-lg"
495          >
496            <span class="text-4xl font-bold">4</span>
497          </div>
498          <h3 class="font-semibold text-xl mb-2 uppercase">
499            <span class="tracking-widest">Showcase</span>
500          </h3>
501          <p class="text-center">Start calling and showcase your brand</p>
502        </div>
503      </div>
504    </section>
505
506    <!-- Control Section -->
507    <section class="py-16 bg-white text-slate-700">
508      <div class="text-center mb-12">
509        <!-- Visible on medium and larger screens (md and up) -->
510        <h2
511          class="hidden md:block text-6xl font-semibold px-12 mb-6 drop-shadow-2xl"
512        >
513          One account to manage all your brands
514        </h2>
515
516        <!-- Visible on small screens (smaller than md) -->
517        <h2 class="block md:hidden text-6xl font-bold px-12">
518          Business Portal
519        </h2>
520      </div>
521      <div class="flex flex-col sm:flex-col items-center justify-evenly">
522        <span class="text-lg text-center sm:mb-4 md:mb-6 px-12">
523          The
524          <span class="font-semibold">Secured Calls Business Portal</span> is
525          your gateway to branded calling. With an intuitive user interface, it
526          allows you to easily register and manage your branding data, ensuring
527          seamless control over your business identity.
528        </span>
529        <img
530          src="./images/sign-up-console.png"
531          alt="Control Everything"
532          class="w-3/4 sm:w-full md:w-1/4 hover:scale-110 transform transition duration-200"
533        />
534      </div>
535      <!-- <div class="p-6 mt-6 w-full text-center"></div> -->
536    </section>
537
538    <!-- Partners -->
539    <section id="partners" class="py-16 text-white">
540      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
541        <div class="mb-12">
542          <h2 class="text-6xl font-semibold px-12 mb-6 drop-shadow-2xl">
543            Trusted by leading brands
544          </h2>
545          <p class="text-lg">
546            We're proud to collaborate with industry leaders
547          </p>
548        </div>
549
550        <div class="overflow-hidden relative">
551          <div class="w-full flex items-center justify-center">
552            <div
553              class="rounded-lg w-28 h-28 p-6 flex flex-col justify-center items-center gap-2"
554            >
555              <img
556                src="./images/orange.png"
557                alt="Partner 5"
558                class="rounded-md h-auto"
559              />
560              <span class="font-semibold text-sm text-slate-100">Orange</span>
561            </div>
562
563            <div
564              class="rounded-lg w-28 h-28 p-6 flex flex-col justify-center items-center gap-2"
565            >
566              <img
567                src="./images/vonage.png"
568                alt="Partner 5"
569                class="rounded-md h-auto"
570              />
571              <span class="font-semibold text-sm text-slate-100">Vonage</span>
572            </div>
573          </div>
574        </div>
575      </div>
576    </section>
577
578    <!-- Video -->
579    <section id="video" class="bg-white text-slate-50">
580      <div
581        class="video-container bg-white flex items-center justify-center text-center mb-12 p-12"
582      >
583        <div class="video-wrapper">
584          <iframe
585            id="youtubeVideo"
586            src="https://www.youtube.com/embed/j0pk5GJ5aLk?enablejsapi=1&controls=0&rel=0&modestbranding=1"
587            frameborder="0"
588            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
589            allowfullscreen
590          ></iframe>
591        </div>
592      </div>
593
594      
594<script>
595        // Create an intersection observer
596        const iframe = document.getElementById("youtubeVideo");
597        let timeoutId;
598
599        const observer = new IntersectionObserver((entries) => {
600          entries.forEach((entry) => {
601            if (entry.isIntersecting) {
602              // Clear any previous timeouts to prevent multiple timers
603              clearTimeout(timeoutId);
604
605              // Delay the video play by 2 seconds when it becomes visible
606              timeoutId = setTimeout(() => {
607                iframe.contentWindow.postMessage(
608                  '{"event":"command","func":"playVideo","args":""}',
609                  "*"
610                );
611              }, 2000); // 2000ms = 2 seconds
612            } else {
613              clearTimeout(timeoutId); // Cancel the play delay if the video goes out of view
614              iframe.contentWindow.postMessage(
615                '{"event":"command","func":"pauseVideo","args":""}',
616                "*"
617              );
618            }
619          });
620        });
621
622        // Observe the iframe element
623        observer.observe(iframe);
624      </script>
624
625
626      <style>
627        .video-wrapper {
628          position: relative;
629          width: 100%;
630          padding-top: 56.25%; /* 16:9 aspect ratio */
631        }
632
633        .video-wrapper iframe {
634          position: absolute;
635          top: 0;
636          left: 0;
637          width: 100%;
638          height: 100%;
639        }
640      </style>
641    </section>
642
643    <!-- FAQ -->
644    <section id="faq" class="py-16 text-white">
645      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
646        <div class="text-center mb-12">
647          <!-- Visible on medium and larger screens (md and up) -->
648          <h2
649            class="hidden md:block text-6xl font-semibold px-12 mb-6 drop-shadow-2xl"
650          >
651            Frequently asked questions
652          </h2>
653
654          <!-- Visible on small screens (smaller than md) -->
655          <h2 class="block md:hidden text-6xl font-bold px-12 mb-6">FAQs</h2>
656
657          <p class="text-lg">
658            Here are some of the common questions we get asked
659          </p>
660        </div>
661        <div class="space-y-4 text-gray-900">
662          <!-- Question 1 -->
663          <div
664            class="bg-white p-6 rounded-lg shadow-md hover:shadow-[0_0_15px_rgba(125,211,252,0.7)] hover:scale-105 transform transition duration-300"
665          >
666            <h3 class="font-semibold text-xl mb-2">What is Secured Calls?</h3>
667            <p>
668              Secured Calls is a solution that allows businesses to brand their
669              calls, showcasing their business name and identity to users during
670              phone calls via traditional telephony or In-App.
671            </p>
672          </div>
673
674          <!-- Question 2 -->
675          <div
676            class="bg-white p-6 rounded-lg shadow-md hover:shadow-[0_0_15px_rgba(125,211,252,0.7)] hover:scale-105 transform transition duration-300"
677          >
678            <h3 class="font-semibold text-xl mb-2">
679              How can I integrate Secured Calls in my App?
680            </h3>
681            <p class="text-gray-600">
682              You can integrate Secured Calls into your business by using our
683              SDK, which is available for both iOS and Android platforms, and by
684              following our documentation.
685            </p>
686          </div>
687
688          <!-- Question 3 -->
689          <div
690            class="bg-white p-6 rounded-lg shadow-md hover:shadow-[0_0_15px_rgba(125,211,252,0.7)] hover:scale-105 transform transition duration-300"
691          >
692            <h3 class="font-semibold text-xl mb-2">Is Secured Calls secure?</h3>
693            <p class="text-gray-600">
694              Yes, Secured Calls is fully secure. We do not store or sell user
695              data, and our SDKs are hosted within your business app for full
696              control over data flow.
697            </p>
698          </div>
699
700          <!-- Add more questions as needed -->
701        </div>
702      </div>
703    </section>
704
705    <!-- Contact Us Section -->
706    <section id="contact" class="py-16 bg-white text-slate-700">
707      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
708        <div class="text-center mb-12">
709          <h2 class="text-6xl font-semibold px-12 mb-6 drop-shadow-2xl">
710            Get in touch
711          </h2>
712          <p class="text-lg">We'd love to hear from you!</p>
713        </div>
714        <div class="grid grid-cols-1 md:grid-cols-1 gap-8 drop-shadow-2xl">
715          <!-- Contact Form -->
716          <form
717            id="contact-form"
718            method="post"
719            class="bg-slate-100 shadow-md rounded-lg p-6 space-y-4"
720          >
721            <div>
722              <label
723                class="block text-gray-700 text-sm font-semibold mb-2"
724                for="name"
725              >
726                Name <span class="text-red-600">*</span>
727              </label>
728              <input
729                class="w-full py-2 px-3 bg-slate-200 text-lg text-gray-700 border-b-2 border-gray-700 leading-tight focus:outline-none focus:border-sky-500 focus:ring-0"
730                id="name"
731                name="from_name"
732                type="text"
733                placeholder="Your Name"
734                required
735              />
736            </div>
737            <div>
738              <label
739                class="block text-gray-700 text-sm font-semibold mb-2"
740                for="email"
741              >
742                Email <span class="text-red-600">*</span>
743              </label>
744              <input
745                class="w-full py-2 px-3 bg-slate-200 text-lg text-gray-700 border-b-2 border-gray-700 leading-tight focus:outline-none focus:border-sky-500 focus:ring-0"
746                id="email"
747                name="email"
748                type="email"
749                placeholder="Your Email"
750                required
751              />
752            </div>
753            <div>
754              <label
755                class="block text-gray-700 text-sm font-semibold mb-2"
756                for="mobile"
757              >
758                Mobile
759              </label>
760              <input
761                class="w-full py-2 px-3 bg-slate-200 text-lg text-gray-700 border-b-2 border-gray-700 leading-tight focus:outline-none focus:border-sky-500 focus:ring-0"
762                id="mobile"
763                name="mobile"
764                type="tel"
765                placeholder="Mobile number in E.164 format"
766              />
767              <span id="mobile-error" class="text-red-600 hidden"
768                >Please enter a valid mobile number in E.164 format.</span
769              >
770            </div>
771            <div>
772              <label
773                class="block text-gray-700 text-sm font-semibold mb-2"
774                for="message"
775              >
776                Message <span class="text-red-600">*</span>
777              </label>
778              <textarea
779                class="w-full py-2 px-3 bg-slate-200 text-lg text-gray-700 border-b-2 border-gray-700 leading-tight focus:outline-none focus:border-sky-500 focus:ring-0"
780                id="message"
781                name="message"
782                rows="4"
783                placeholder="Your Message"
784                required
785              ></textarea>
786            </div>
787            <div class="text-center">
788              <button
789                class="bg-gradient-to-r from-[#3597da] to-[#013d65] text-white px-6 py-3 rounded-3xl hover:bg-sky-900 transition duration-300 ease-in-out"
790                type="submit"
791              >
792                <div class="flex items-center justify-center">
793                  <span class="px-2">Send Message</span>
794                  <img
795                    src="./images/right-arrow-icon.png"
796                    alt="send"
797                    class="w-6"
798                  />
799                </div>
800              </button>
801
802              <div
803                id="toast-success"
804                class="hidden mt-6 right-5 bg-green-500 text-white p-4 rounded-lg shadow-lg"
805              >
806                Message sent successfully!
807              </div>
808              <div
809                id="toast-error"
810                class="hidden mt-6 right-5 bg-red-500 text-white p-4 rounded-lg shadow-lg"
811              >
812                Failed to send message.
813              </div>
814            </div>
815          </form>
816
817          
817<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
817
818          
818<script type="text/javascript">
819            (function () {
820              emailjs.init("dXQ6LQ0ZmOpQplsci"); // Replace with your EmailJS user ID
821            })();
822
823            document
824              .getElementById("contact-form")
825              .addEventListener("submit", function (event) {
826                event.preventDefault(); // Prevent default form submission
827
828                // Mobile number validation
829                const mobileInput = document.getElementById("mobile");
830                const mobileValue = mobileInput.value.trim();
831                const mobileError = document.getElementById("mobile-error");
832
833                // E.164 format validation regex
834                const e164Regex = /^\+[1-9]\d{1,14}$/;
835
836                console.log(`mobile number is : ${mobileValue}`);
837
838                // Check if the mobile number is in E.164 format
839                if (mobileValue && !e164Regex.test(mobileValue)) {
840                  mobileError.classList.remove("hidden");
841                  return; // Stop form submission if mobile number is invalid
842                } else {
843                  mobileError.classList.add("hidden");
844                }
845
846                console.log(`mobile number is : ${mobileValue}`);
847
848                // Send form data via EmailJS
849                emailjs
850                  .sendForm("service_nnuqjt7", "template_swju9jk", this)
851                  .then(
852                    function () {
853                      // Show success toast and clear form
854                      const successToast =
855                        document.getElementById("toast-success");
856                      successToast.classList.remove("hidden");
857
858                      setTimeout(() => {
859                        successToast.classList.add("hidden");
860                      }, 3000); // Hide after 3 seconds
861
862                      // Clear form fields
863                      document.getElementById("contact-form").reset();
864                    },
865                    function (error) {
866                      // Show error toast
867                      const errorToast = document.getElementById("toast-error");
868                      errorToast.classList.remove("hidden");
869
870                      setTimeout(() => {
871                        errorToast.classList.add("hidden");
872                      }, 3000); // Hide after 3 seconds
873                    }
874                  );
875              });
876          </script>
876
877
878          <div
879            class="bg-gradient-to-r from-sky-600 to-sky-800 py-2 px-4 text-white flex flex-col md:flex-row items-center justify-between gap-1 rounded-lg"
880          >
881            <div class="flex items-center justify-between gap-2">
882              <img src="./images/email.png" alt="" class="w-4" />
883              <span>[email protected]</span>
884            </div>
885            <div class="flex items-center justify-between gap-2">
886              <img src="./images/phone-icon.png" alt="" class="w-4" />
887              <span>+61 477 830 826</span>
888            </div>
889            <div class="flex items-center justify-between gap-2">
890              <img src="./images/location-icon.png" alt="" class="w-4" />
891              <span>Melbourne, Australia</span>
892            </div>
893          </div>
894        </div>
895      </div>
896    </section>
897
898    <!-- Footer -->
899    <footer class="bg-gray-900 text-white">
900      <div class="max-w-7xl m-auto py-12 px-6 sm:px-6 lg:px-8 h-full">
901        <div
902          class="w-full flex flex-col sm:flex-row justify-between items-center"
903        >
904          <span class="text-lg mb-4 sm:mb-0 text-center"
905            >&copy; 2024 Secured Calls Pty Ltd. All rights reserved.</span
906          >
907          <nav
908            class="flex flex-col items-center sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4"
909          >
910            <a
911              target="_blank"
912              href="https://securedcalls.com/privacy-policy.html"
913              class="hover:text-gray-400 text-lg"
914              >Privacy Policy</a
915            >
916            <a
917              target="_blank"
918              href="https://securedcalls.com/terms"
919              class="hover:text-gray-400 text-lg"
920              >Terms of Service</a
921            >
922            <a href="#contact" class="hover:text-gray-400 text-lg"
923              >Contact Us</a
924            >
925          </nav>
926        </div>
927      </div>
928    </footer>
929  </body>
930</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.