123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355 |
- <!--HERO SECTION-->
- <div class="px-4 py-5" style="height: 120vh;">
-
- <div class="d-flex flex-column position-relative" style="height: 100%;overflow: hidden;">
- <!-- <nav class="navbar navbar-expand-lg p-0" style="background-color: rgba(0, 0, 0, 0);">
- <div class="container-fluid p-0">
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse d-flex" id="navbarNavDropdown">
- <ul class="navbar-nav me-auto me-md-0 ms-md-auto">
- <li class="nav-item">
- <div class="p-3" style="background-color: rgba(0, 0, 0, 0);">
- <div class="bg-light trapezium ps-5 pe-4 py-1"><a class="nav-link p-0" href="#">Pricing</a></div>
- </div>
- </li>
- <li class="nav-item">
- <div class="p-3" style="background-color: rgba(255, 255, 255, 0);">
- <div class="bg-white trapezium-end ps-5 pe-4 py-1"><a class="nav-link p-0" href="#">Pricing</a></div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </nav> -->
-
- <!--TEMP NAVBAR-->
- <nav class="navbar navbar-expand-lg w-100" style="position: absolute;z-index: 2;background-color: rgba(255, 255, 255, 0.2);">
- <div class="container-fluid">
- <a class="navbar-brand py-3 px-5" href="/">
- <img src="/assets/svg/logo.svg" width="100">
- </a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse d-flex" id="navbarNavDropdown">
- <ul class="navbar-nav me-auto me-md-0 ms-md-auto">
- <li class="nav-item mx-3">
- <a class="nav-link active fw-bolder font-18" aria-current="page" href="/" style="color: #fff;">Home</a>
- </li>
- <li class="nav-item mx-3">
- <a class="nav-link fw-bolder font-18" href="#" style="color: #fff;">Introduction</a>
- </li>
- <li class="nav-item mx-3">
- <a class="nav-link fw-bolder font-18" href="#" style="color: #fff;">What is Text4u?</a>
- </li>
- <li class="nav-item mx-3">
- <a class="nav-link fw-bolder font-18" href="#" style="color: #159B9B;">Submit</a>
- </li>
- </ul>
- </div>
- </div>
- </nav>
-
- <video autoplay muted loop style="width: 100%;">
- <source src="/assets/video/hero.mp4" type="video/mp4">
- </video>
-
- <div class="w-100 flex-grow-1 row p-0 m-0 position-absolute" style="overflow: hidden;z-index: 1; background: rgba(0, 0, 0, 0.5); height: 100%;">
- <div class="col-4 d-none d-lg-flex">
- <img src="/assets/img/group_21.png" class="img-fluid mt-auto mx-auto" style="height: 75%;" />
- </div>
- <div class="col-12 col-lg-8 px-5 d-flex">
- <div class="my-auto w-100">
- <div class="ms-auto mb-4" style="width: fit-content;">
- <h1 class="fw-bolder hero-main-text text-white">DATA ANDA BANYAK?</h1>
- </div>
-
- <div class="py-3 px-5 ms-auto mb-4 trapezium-hero" style="width: fit-content;background-color: #BB5C3F;">
- <p class="text-white m-0 mx-5 my-2" style="font-weight: 500;">Sentiasa sukar buat retarget marketing terus ke pelanggan?</p>
- </div>
- <div class="py-3 px-5 ms-auto mb-4 trapezium-hero" style="width: fit-content;background-color: #DE9C46;">
- <p class="text-white m-0 mx-5 my-2" style="font-weight: 500;">Susah nak reach Database anda dalam satu masa?</p>
- </div>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <div class="p-0 m-0">
- <div class="row m-0" style="background-color: #DED7C4;">
- <div class="col-5 d-flex py-5">
- <div class="my-auto mx-auto">
- <img src="/assets/svg/logo.svg" width="250">
- </div>
- <div class="my-auto mx-auto">
- <p class="font-50 fw-bolder text-black m-0" style="line-height: 61px;">
- Notify your </br> Database </br> easily.
- </p>
- </div>
- </div>
- <div class="bg-info trapezium col-7" style="background: url(/assets/img/path_34.jpg) center center no-repeat; background-size: cover;">
- <!-- THIS IS THE IMAGE STUFF -->
- </div>
- </div>
- </div>
-
- <div class="container-fluid p-0 m-0">
- <div class="d-flex flex-column m-0 p-5" style="min-height: 500px; background: url(/assets/img/group_29.jpg) center center no-repeat; background-size: cover;">
- <p class="font-37 text-white m-0 mb-5" style="font-weight: 500;">
- Rakam Notifikasai Perniagaan Anda
- </p>
- <div class="d-flex">
- <div class="flex-grow-1 p-4">
- <div class="position-relative" style="padding-top: 85%;background-color: #BB5C3F;border-radius: 25px;border: 8px dashed #DD9C47;">
- <div class="position-absolute text-white d-flex" style="top:0; left: 0; width: 100%; height: 100%;">
- <div class="my-auto px-5">
- <img class="mb-5" src="/assets/svg/bell.svg" width="40">
- <p class="text-white font-37 fw-bolder" style="line-height: 44px;">Notifikasi <br/> secara <br/> terus</p>
- </div>
- </div>
- </div>
- </div>
- <div class="flex-grow-1 p-4">
- <div class="position-relative" style="padding-top: 85%;background-color: #BB5C3F;border-radius: 25px;border: 8px dashed #DD9C47;">
- <div class="position-absolute text-white d-flex" style="top:0; left: 0; width: 100%; height: 100%;">
- <div class="my-auto px-5">
- <img class="mb-5" src="/assets/svg/table.svg" width="40">
- <p class="text-white font-37 fw-bolder" style="line-height: 44px;">Pengurusan <br/> database <br/> lebih teratur</p>
- </div>
- </div>
- </div>
- </div>
- <div class="flex-grow-1 p-4">
- <div class="position-relative" style="padding-top: 85%;background-color: #BB5C3F;border-radius: 25px;border: 8px dashed #DD9C47;">
- <div class="position-absolute text-white d-flex" style="top:0; left: 0; width: 100%; height: 100%;">
- <div class="my-auto px-5">
- <img class="mb-5" src="/assets/svg/hands-helping.svg" width="40">
- <p class="text-white font-37 fw-bolder" style="line-height: 44px;">24/7 bantuan <br/> secara online</p>
- </div>
- </div>
- </div>
- </div>
- <div class="flex-grow-1 p-4">
- <div class="position-relative" style="padding-top: 85%;">
- <div class="position-absolute text-white d-flex" style="top:0; left: 0; width: 100%; height: 100%;">
- <div class="my-auto mx-auto p-3">
- <img class="mb-5 w-100" src="/assets/img/group_22.png">
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- </div>
-
- <div class="container-fluid p-0 m-0">
- <div class="row m-0" style="background-color: #DED7C4;min-height: 400px;">
- <div class="col-md-6" style="background: url(/assets/img/rectangle_56.jpg) center center no-repeat; background-size: cover;">
- <!-- THIS IS THE IMAGE STUFF -->
- </div>
- <div class="col-md-6 px-5 py-4 d-flex flex-column form-container">
- <div class="py-5">
- <div class="mx-auto mb-5" style="width: 70%;">
- <h4 class="fw-bold">Hubungi kami untuk mengetahui lebih lanjut :</h4>
- </div>
- <form id="enquiry-form" class="mx-auto" style="width: 70%;">
- <div class="form-group">
- <label for="name">Nama Perniagaan :</label>
- <input type="text" id="name" name="name" required>
- </div>
- <div class="form-group">
- <label for="email">Email :</label>
- <input type="email" id="email" name="email" required>
- </div>
- <div class="form-group">
- <label for="phone">No. Telefon :</label>
- <input type="tel" id="phone" name="phone" required>
- </div>
- <button type="submit" class="submit-btn">Submit</button>
- </form>
- </div>
- </div>
- </div>
- </div>
-
- <!-- FOOTER -->
- <div class="container-fluid p-0 m-0">
- <div class="m-0 px-5 d-flex" style="background-color: #FFF">
- <div class="flex-grow-1 p-5">
-
- <img class="mb-4 ms-5" src="/assets/svg/logo.svg" width="120">
-
- <p class="font-16 mb-5" style="line-height: 16px;font-weight:600;"> Bold flavours, savoury snacks,<br/> Taste adventures.</p>
-
- <div class="d-flex flex-wrap mt-5" style="height: fit-content;">
- <img class="me-3" src="/assets/svg/linkedin.svg" width="20">
- <img class="me-3" src="/assets/svg/message.svg" width="20">
- <img class="me-3" src="/assets/svg/twitter.svg" width="20">
- <img class="me-3" src="/assets/svg/twoo.svg" width="20">
- </div>
-
- </div>
-
- <div class="flex-grow-1 py-5 px-3">
-
- <nav class="footer-nav">
- <ul>
- <li><a class="font-16" href="#">Home</a></li>
- <li><a class="font-16" href="#">Introduction</a></li>
- <li><a class="font-16" href="#">What is Text4u?</a></li>
- </ul>
- </nav>
-
- </div>
-
- <div class="flex-grow-1 py-5 px-3">
-
- <ul class="p-0 m-0">
- <li class="mb-3">
- <div class="row">
- <div class="col-2 p-0">
- <img class="ms-auto me-2" src="/assets/svg/mapmark.svg" width="20">
- </div>
- <div class="col">
- <p class="font-16">Text4U Sdn Bhd, No.89 Jalan KP 7 <br/> Kawasan Perindustrian, Kota Puteri, 48100 Batu Arang, Selangor</p>
- </div>
- </div>
- </li>
- <li class="mb-3">
- <div class="row">
- <div class="col-2 p-0">
- <img class="ms-auto me-2" src="/assets/svg/phone.svg" width="20">
- </div>
- <div class="col">
- <p class="font-16">+60 18-265 4321</p>
- </div>
- </div>
- </li>
- <li class="mb-3">
- <div class="row">
- <div class="col-2 p-0">
- <img class="ms-auto me-2" src="/assets/svg/envelope.svg" width="20">
- </div>
- <div class="col">
- <p class="font-16">hello@aducktive.com</p>
- </div>
- </div>
- </li>
- </ul>
-
- </div>
-
- <div class="flex-grow-1 py-5 px-3">
-
- <p class="fw-bold font-21">Enjoy Subscriber Perks</p>
-
- <p class="font-16 mb-4">Sign up for emails and receive early access to new arrivals, <br/> sales, event and more.</p>
-
- <div class="input-group border-0 mb-5" style="overflow: hidden;">
- <input type="text" class="form-control border-0 px-4 py-3" placeholder="Your email address" style="border-radius: 30px 0 0 30px;background-color: #F9F9F9;">
- <button class="btn btn-outline-secondary text-white border-0 px-4 py-3" type="button" id="button-addon2" style="border-radius: 0 30px 30px 0px;background-color: #BB5C3F;">Subscribe</button>
- </div>
-
-
- <p class="font-16">Copyright © 2024 TEXT4U SDN BHD 1384616-H. All rights reserved.</p>
-
- </div>
-
- </div>
- </div>
-
- <!-- COPYRIGHT -->
- <div class="container-fluid p-0 m-0">
- <div class="row m-0 p-0 d-flex bg-light" >
- <div class="d-flex p-0">
- <div class=" mx-auto d-flex px-5 py-3">
- <div class="my-auto mx-auto me-4">
- <img src="/assets/svg/logo.svg" width="50">
- </div>
- <div class="my-auto mx-auto">
- <p class="font-18 m-0" style="font-weight: 500;">
- Text4u. Notify your database easily.
- </p>
- </div>
- </div>
- <div class="flex-grow-1 py-2 px-5 d-flex justify-content-end trapezium" style="background-color: #396868">
- <p class="text-light font-18 fw-light m-0 mx-3 my-auto">
- Copyright © 2024 Text4u.
- </p>
- <p class="text-light font-18 fw-light m-0 mx-3 my-auto">
- All Rights Reserved.
- </p>
- </div>
- </div>
- <div class="">
-
- </div>
- </div>
- </div>
-
-
- <!-- Button trigger modal -->
- <button id="triggerModal" type="button" style="max-height: 1px; max-width: 1px;position: absolute; top: -100px; left: -100px;" data-bs-toggle="modal" data-bs-target="#enquiryModal"> </button>
-
- <!-- Modal -->
- <div class="modal fade" id="enquiryModal" tabindex="-1">
- <div class="modal-dialog modal-dialog-centered">
- <div class="modal-content">
- <div class="modal-body text-center">
- <p>Your Enquiry has been submitted, we will contact you soon</p>
- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
- </div>
- </div>
- </div>
- </div>
- <script>
- let enquiryForm = document.getElementById("enquiry-form")
-
- enquiryForm.addEventListener('submit', async function (e) {
- e.preventDefault(); // Prevent form from submitting the traditional way
-
- // Gather form data
- const formData = {
- name: document.getElementById('name').value,
- email: document.getElementById('email').value,
- phone: document.getElementById('phone').value
- };
-
- try {
- // Send POST request
- const response = await fetch('/api/enquiry/', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify(formData) // Convert form data to JSON
- });
-
- // Parse JSON response
- const result = await response.json();
-
- // Handle the response
- if (response.ok) {
-
- console.log('Enquiry submitted successfully:', result);
- document.getElementById('name').value = ""
- document.getElementById('email').value = ""
- document.getElementById('phone').value = ""
- document.getElementById("triggerModal").click()
-
- } else {
- console.error('Submission failed:', result);
- alert('Submission failed. Please try again.');
- }
- } catch (error) {
- console.error('Error occurred:', error);
- alert('An error occurred while submitting your enquiry.');
- }
- });
-
- </script>
|