text4u
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

home.antlers.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. <!--HERO SECTION-->
  2. <div class="px-4 py-5" style="height: 120vh;">
  3. <div class="d-flex flex-column position-relative" style="height: 100%;overflow: hidden;">
  4. <!--TEMP NAVBAR-->
  5. <nav class="navbar navbar-expand-lg w-100 p-0"
  6. style="position: absolute;z-index: 2;background-color: rgba(255, 255, 255, 0);">
  7. <div class="container-fluid d-flex align-items-stretch p-0">
  8. <a class="navbar-brand py-3 px-5 m-0 bg-white" href="/">
  9. <img src="/assets/svg/logo.svg" width="100">
  10. </a>
  11. <div class="bg-white flex-grow-1">
  12. <!--WHITE SPACE-->
  13. </div>
  14. <div class="d-flex">
  15. <ul class="navbar-nav me-auto me-md-0 ms-md-auto">
  16. <li class="nav-item d-flex" >
  17. <a class="nav-link active fw-bolder font-16 my-auto" aria-current="page" href="/" style="color: #000;">Home</a>
  18. </li>
  19. <li class="nav-item px-4 d-flex">
  20. <a class="nav-link active fw-bolder font-16 my-auto" aria-current="page" href="/" style="color: #000;">Introduction</a>
  21. </li>
  22. <li class="nav-item px-4 d-flex">
  23. <a class="nav-link active fw-bolder font-16 my-auto" aria-current="page" href="/" style="color: #000;">What is Text4u?</a>
  24. </li>
  25. <li class="nav-item px-4 d-flex active">
  26. <a class="nav-link active fw-bolder font-16 my-auto" aria-current="page" href="/">Submit</a>
  27. </li>
  28. </ul>
  29. </div>
  30. </div>
  31. </nav>
  32. <video autoplay muted loop style="width: 100%;">
  33. <source src="/assets/video/hero.mp4" type="video/mp4">
  34. </video>
  35. <div class="w-100 flex-grow-1 row p-0 m-0 position-absolute"
  36. style="overflow: hidden;z-index: 1; background: rgba(0, 0, 0, 0.5); height: 100%;">
  37. <div class="col-4 d-none d-lg-flex">
  38. <img src="/assets/img/group_21.png" class="img-fluid mt-auto mx-auto" style="height: 75%;" />
  39. </div>
  40. <div class="col-12 col-lg-8 px-5 d-flex">
  41. <div class="my-auto w-100">
  42. <div class="ms-auto mb-4" style="width: fit-content;">
  43. <h1 class="fw-bolder hero-main-text text-white">DATA ANDA BANYAK?</h1>
  44. </div>
  45. <div class="py-3 px-5 ms-auto mb-4 trapezium-hero"
  46. style="width: fit-content;background-color: #BB5C3F;">
  47. <p class="text-white m-0 mx-5 my-2" style="font-weight: 500;">Sentiasa sukar buat retarget
  48. marketing terus ke pelanggan?</p>
  49. </div>
  50. <div class="py-3 px-5 ms-auto mb-4 trapezium-hero"
  51. style="width: fit-content;background-color: #DE9C46;">
  52. <p class="text-white m-0 mx-5 my-2" style="font-weight: 500;">Susah nak reach Database anda
  53. dalam satu masa?</p>
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="p-0 m-0">
  61. <div class="row m-0" style="background-color: #DED7C4;">
  62. <div class="col-5 d-flex py-5">
  63. <div class="my-auto mx-auto">
  64. <img src="/assets/svg/logo.svg" width="250">
  65. </div>
  66. <div class="my-auto mx-auto">
  67. <p class="font-50 fw-bolder text-black m-0" style="line-height: 61px;">
  68. Notify your </br> Database </br> easily.
  69. </p>
  70. </div>
  71. </div>
  72. <div class="bg-info trapezium col-7"
  73. style="background: url(/assets/img/path_34.jpg) center center no-repeat; background-size: cover;">
  74. <!-- THIS IS THE IMAGE STUFF -->
  75. </div>
  76. </div>
  77. </div>
  78. <div class="container-fluid p-0 m-0">
  79. <div class="d-flex flex-column m-0 p-5"
  80. style="min-height: 500px; background: url(/assets/img/group_29.jpg) center center no-repeat; background-size: cover;">
  81. <p class="font-37 text-white m-0 mb-5" style="font-weight: 500;">
  82. Rakam Notifikasai Perniagaan Anda
  83. </p>
  84. <div class="d-flex">
  85. <div class="flex-grow-1 p-4">
  86. <div class="position-relative"
  87. style="padding-top: 85%;background-color: #BB5C3F;border-radius: 25px;border: 8px dashed #DD9C47;">
  88. <div class="position-absolute text-white d-flex" style="top:0; left: 0; width: 100%; height: 100%;">
  89. <div class="my-auto px-5">
  90. <img class="mb-5" src="/assets/svg/bell.svg" width="40">
  91. <p class="text-white font-37 fw-bolder" style="line-height: 44px;">Notifikasi <br /> secara
  92. <br /> terus</p>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="flex-grow-1 p-4">
  98. <div class="position-relative"
  99. style="padding-top: 85%;background-color: #BB5C3F;border-radius: 25px;border: 8px dashed #DD9C47;">
  100. <div class="position-absolute text-white d-flex" style="top:0; left: 0; width: 100%; height: 100%;">
  101. <div class="my-auto px-5">
  102. <img class="mb-5" src="/assets/svg/table.svg" width="40">
  103. <p class="text-white font-37 fw-bolder" style="line-height: 44px;">Pengurusan <br />
  104. database <br /> lebih teratur</p>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. <div class="flex-grow-1 p-4">
  110. <div class="position-relative"
  111. style="padding-top: 85%;background-color: #BB5C3F;border-radius: 25px;border: 8px dashed #DD9C47;">
  112. <div class="position-absolute text-white d-flex" style="top:0; left: 0; width: 100%; height: 100%;">
  113. <div class="my-auto px-5">
  114. <img class="mb-5" src="/assets/svg/hands-helping.svg" width="40">
  115. <p class="text-white font-37 fw-bolder" style="line-height: 44px;">24/7 bantuan <br />
  116. secara online</p>
  117. </div>
  118. </div>
  119. </div>
  120. </div>
  121. <div class="flex-grow-1 p-4">
  122. <div class="position-relative" style="padding-top: 85%;">
  123. <div class="position-absolute text-white d-flex" style="top:0; left: 0; width: 100%; height: 100%;">
  124. <div class="my-auto mx-auto p-3">
  125. <img class="mb-5 w-100" src="/assets/img/group_22.png">
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. <div class="container-fluid p-0 m-0">
  134. <div class="row m-0" style="background-color: #DED7C4;min-height: 400px;">
  135. <div class="col-md-6"
  136. style="background: url(/assets/img/rectangle_56.jpg) center center no-repeat; background-size: cover;">
  137. <!-- THIS IS THE IMAGE STUFF -->
  138. </div>
  139. <div class="col-md-6 px-5 py-4 d-flex flex-column form-container">
  140. <div class="py-5">
  141. <div class="mx-auto mb-5" style="width: 70%;">
  142. <h4 class="fw-bold">Hubungi kami untuk mengetahui lebih lanjut :</h4>
  143. </div>
  144. <form id="enquiry-form" class="mx-auto" style="width: 70%;">
  145. <div class="form-group">
  146. <label for="name">Nama Perniagaan :</label>
  147. <input type="text" id="name" name="name" required>
  148. </div>
  149. <div class="form-group">
  150. <label for="email">Email :</label>
  151. <input type="email" id="email" name="email" required>
  152. </div>
  153. <div class="form-group">
  154. <label for="phone">No. Telefon :</label>
  155. <input type="tel" id="phone" name="phone" required>
  156. </div>
  157. <button type="submit" class="submit-btn">Submit</button>
  158. </form>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. <!-- FOOTER -->
  164. <div class="container-fluid p-0 m-0">
  165. <div class="m-0 px-5 d-flex" style="background-color: #FFF">
  166. <div class="flex-grow-1 p-5">
  167. <img class="mb-4 ms-5" src="/assets/svg/logo.svg" width="120">
  168. <p class="font-16 mb-5" style="line-height: 16px;font-weight:600;"> Bold flavours, savoury snacks,<br />
  169. Taste adventures.</p>
  170. <div class="d-flex flex-wrap mt-5" style="height: fit-content;">
  171. <img class="me-3" src="/assets/svg/linkedin.svg" width="20">
  172. <img class="me-3" src="/assets/svg/message.svg" width="20">
  173. <img class="me-3" src="/assets/svg/twitter.svg" width="20">
  174. <img class="me-3" src="/assets/svg/twoo.svg" width="20">
  175. </div>
  176. </div>
  177. <div class="flex-grow-1 py-5 px-3">
  178. <nav class="footer-nav">
  179. <ul>
  180. <li><a class="font-16" href="#">Home</a></li>
  181. <li><a class="font-16" href="#">Introduction</a></li>
  182. <li><a class="font-16" href="#">What is Text4u?</a></li>
  183. </ul>
  184. </nav>
  185. </div>
  186. <div class="flex-grow-1 py-5 px-3">
  187. <ul class="p-0 m-0">
  188. <li class="mb-3">
  189. <div class="row">
  190. <div class="col-2 p-0">
  191. <img class="ms-auto me-2" src="/assets/svg/mapmark.svg" width="20">
  192. </div>
  193. <div class="col">
  194. <p class="font-16">Text4U Sdn Bhd, No.89 Jalan KP 7 <br /> Kawasan Perindustrian, Kota
  195. Puteri, 48100 Batu Arang, Selangor</p>
  196. </div>
  197. </div>
  198. </li>
  199. <li class="mb-3">
  200. <div class="row">
  201. <div class="col-2 p-0">
  202. <img class="ms-auto me-2" src="/assets/svg/phone.svg" width="20">
  203. </div>
  204. <div class="col">
  205. <p class="font-16">+60 18-265 4321</p>
  206. </div>
  207. </div>
  208. </li>
  209. <li class="mb-3">
  210. <div class="row">
  211. <div class="col-2 p-0">
  212. <img class="ms-auto me-2" src="/assets/svg/envelope.svg" width="20">
  213. </div>
  214. <div class="col">
  215. <p class="font-16">hello@aducktive.com</p>
  216. </div>
  217. </div>
  218. </li>
  219. </ul>
  220. </div>
  221. <div class="flex-grow-1 py-5 px-3">
  222. <p class="fw-bold font-21">Enjoy Subscriber Perks</p>
  223. <p class="font-16 mb-4">Sign up for emails and receive early access to new arrivals, <br /> sales, event and
  224. more.</p>
  225. <div class="input-group border-0 mb-5" style="overflow: hidden;">
  226. <input type="text" class="form-control border-0 px-4 py-3" placeholder="Your email address"
  227. style="border-radius: 30px 0 0 30px;background-color: #F9F9F9;">
  228. <button class="btn btn-outline-secondary text-white border-0 px-4 py-3" type="button" id="button-addon2"
  229. style="border-radius: 0 30px 30px 0px;background-color: #BB5C3F;">Subscribe</button>
  230. </div>
  231. <p class="font-16">Copyright © 2024 TEXT4U SDN BHD 1384616-H. All rights reserved.</p>
  232. </div>
  233. </div>
  234. </div>
  235. <!-- COPYRIGHT -->
  236. <div class="container-fluid p-0 m-0">
  237. <div class="row m-0 p-0 d-flex bg-light">
  238. <div class="d-flex p-0">
  239. <div class=" mx-auto d-flex px-5 py-3">
  240. <div class="my-auto mx-auto me-4">
  241. <img src="/assets/svg/logo.svg" width="50">
  242. </div>
  243. <div class="my-auto mx-auto">
  244. <p class="font-18 m-0" style="font-weight: 500;">
  245. Text4u. Notify your database easily.
  246. </p>
  247. </div>
  248. </div>
  249. <div class="flex-grow-1 py-2 px-5 d-flex justify-content-end trapezium" style="background-color: #396868">
  250. <p class="text-light font-18 fw-light m-0 mx-3 my-auto">
  251. Copyright © 2024 Text4u.
  252. </p>
  253. <p class="text-light font-18 fw-light m-0 mx-3 my-auto">
  254. All Rights Reserved.
  255. </p>
  256. </div>
  257. </div>
  258. <div class="">
  259. </div>
  260. </div>
  261. </div>
  262. <!-- Button trigger modal -->
  263. <button id="triggerModal" type="button"
  264. style="max-height: 1px; max-width: 1px;position: absolute; top: -100px; left: -100px;" data-bs-toggle="modal"
  265. data-bs-target="#enquiryModal"> </button>
  266. <!-- Modal -->
  267. <div class="modal fade" id="enquiryModal" tabindex="-1">
  268. <div class="modal-dialog modal-dialog-centered">
  269. <div class="modal-content">
  270. <div class="modal-body text-center">
  271. <p>Your Enquiry has been submitted, we will contact you soon</p>
  272. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  273. </div>
  274. </div>
  275. </div>
  276. </div>
  277. <script>
  278. let enquiryForm = document.getElementById("enquiry-form")
  279. enquiryForm.addEventListener('submit', async function (e) {
  280. e.preventDefault(); // Prevent form from submitting the traditional way
  281. // Gather form data
  282. const formData = {
  283. name: document.getElementById('name').value,
  284. email: document.getElementById('email').value,
  285. phone: document.getElementById('phone').value
  286. };
  287. try {
  288. // Send POST request
  289. const response = await fetch('/api/enquiry/', {
  290. method: 'POST',
  291. headers: {
  292. 'Content-Type': 'application/json'
  293. },
  294. body: JSON.stringify(formData) // Convert form data to JSON
  295. });
  296. // Parse JSON response
  297. const result = await response.json();
  298. // Handle the response
  299. if (response.ok) {
  300. console.log('Enquiry submitted successfully:', result);
  301. document.getElementById('name').value = ""
  302. document.getElementById('email').value = ""
  303. document.getElementById('phone').value = ""
  304. document.getElementById("triggerModal").click()
  305. } else {
  306. console.error('Submission failed:', result);
  307. alert('Submission failed. Please try again.');
  308. }
  309. } catch (error) {
  310. console.error('Error occurred:', error);
  311. alert('An error occurred while submitting your enquiry.');
  312. }
  313. });
  314. </script>