sms-gateway/resources/views/home.antlers.html

<!--HERO SECTION-->
<div class="px-4 py-5" style="height: 120vh;">

    <div class="d-flex flex-column position-relative" style="height: 100%;overflow: hidden;">

        <!--TEMP NAVBAR-->
        <nav class="navbar navbar-expand-lg w-100 p-0"
            style="position: absolute;z-index: 2;background-color: rgba(255, 255, 255, 0);">
            <div class="container-fluid d-flex align-items-stretch p-0">
                <a class="navbar-brand py-3 px-5 m-0 bg-white" href="/">
                    <img src="/assets/svg/logo.svg" width="100">
                </a>

                <div class="bg-white flex-grow-1">
                    <!--WHITE SPACE-->
                </div>

                <div class="d-flex">
                    <ul class="navbar-nav me-auto me-md-0 ms-md-auto">
                        <li class="nav-item d-flex" >
                            <a class="nav-link active fw-bolder font-16 my-auto" aria-current="page" href="/" style="color: #000;">Home</a>
                        </li>
                        <li class="nav-item px-4 d-flex">
                            <a class="nav-link active fw-bolder font-16 my-auto" aria-current="page" href="/" style="color: #000;">Introduction</a>
                        </li>
                        <li class="nav-item px-4 d-flex">
                            <a class="nav-link active fw-bolder font-16 my-auto" aria-current="page" href="/" style="color: #000;">What is Text4u?</a>
                        </li>
                        <li class="nav-item px-4 d-flex active">
                            <a class="nav-link active fw-bolder font-16 my-auto" aria-current="page" href="/">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>