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 >© 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.