2 커밋

작성자 SHA1 메시지 날짜
  azri 180a52f39c add footer 1 개월 전
  azri bee8750b37 clear form 1 개월 전

+ 3
- 0
public/assets/svg/envelope.svg 파일 보기

@@ -0,0 +1,3 @@
1
+<svg xmlns="http://www.w3.org/2000/svg" width="21.825" height="16.369" viewBox="0 0 21.825 16.369">
2
+  <path id="FontAwsome_envelope_" data-name="FontAwsome (envelope)" d="M21.412,69.405a.257.257,0,0,1,.413.2v8.717a2.047,2.047,0,0,1-2.046,2.046H2.046A2.047,2.047,0,0,1,0,78.323V69.61a.255.255,0,0,1,.413-.2c.955.742,2.221,1.684,6.569,4.842.9.656,2.417,2.038,3.93,2.029,1.522.013,3.069-1.4,3.935-2.029C19.2,71.093,20.457,70.147,21.412,69.405Zm-10.5,5.507c.989.017,2.413-1.245,3.129-1.765,5.657-4.105,6.087-4.463,7.392-5.486a1.02,1.02,0,0,0,.392-.806v-.81A2.047,2.047,0,0,0,19.779,64H2.046A2.047,2.047,0,0,0,0,66.046v.81a1.026,1.026,0,0,0,.392.806c1.3,1.019,1.735,1.381,7.392,5.486C8.5,73.668,9.924,74.93,10.913,74.913Z" transform="translate(0 -64)" fill="#396868"/>
3
+</svg>

+ 5
- 0
public/assets/svg/linkedin.svg 파일 보기

@@ -0,0 +1,5 @@
1
+<svg id="_052-linkedin" data-name="052-linkedin" xmlns="http://www.w3.org/2000/svg" width="26.686" height="26.687" viewBox="0 0 26.686 26.687">
2
+  <path id="Vector" d="M17.24,18.265h.007V8.476C17.247,3.688,16.216,0,10.619,0A5.811,5.811,0,0,0,5.385,2.877H5.307V.447H0V18.263H5.526V9.441c0-2.323.44-4.569,3.317-4.569,2.834,0,2.877,2.651,2.877,4.718v8.674Z" transform="translate(9.439 8.422)" fill="#176381"/>
3
+  <path id="Vector-2" data-name="Vector" d="M0,0H5.533V17.816H0Z" transform="translate(0.441 8.87)" fill="#176381"/>
4
+  <path id="Vector-3" data-name="Vector" d="M3.2,0a3.22,3.22,0,1,0,3.2,3.2A3.206,3.206,0,0,0,3.2,0Z" fill="#176381"/>
5
+</svg>

+ 3
- 0
public/assets/svg/mapmark.svg 파일 보기

@@ -0,0 +1,3 @@
1
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24">
2
+  <path id="FontAwsome_map-marker-alt_" data-name="FontAwsome (map-marker-alt)" d="M8.075,23.516C1.264,13.642,0,12.629,0,9A9,9,0,1,1,18,9c0,3.629-1.264,4.642-8.075,14.516a1.125,1.125,0,0,1-1.85,0ZM9,12.75A3.75,3.75,0,1,0,5.25,9,3.75,3.75,0,0,0,9,12.75Z" fill="#396868"/>
3
+</svg>

+ 5
- 0
public/assets/svg/message.svg 파일 보기

@@ -0,0 +1,5 @@
1
+<svg xmlns="http://www.w3.org/2000/svg" width="26.685" height="26.686" viewBox="0 0 26.685 26.686">
2
+  <g id="_025-messenger" data-name="025-messenger" transform="translate(0 0)">
3
+    <path id="Vector" d="M0,12.355a12.012,12.012,0,0,0,4.971,9.62v4.711l4.543-2.493a14.365,14.365,0,0,0,3.827.517c7.369,0,13.343-5.531,13.343-12.355S20.712,0,13.343,0,0,5.531,0,12.355Zm11.935-3.46,3.48,3.624,6.546-3.624-7.294,7.741-3.4-3.623L4.64,16.637Z" transform="translate(0 0)" fill="#176381"/>
4
+  </g>
5
+</svg>

+ 3
- 0
public/assets/svg/phone.svg 파일 보기

@@ -0,0 +1,3 @@
1
+<svg xmlns="http://www.w3.org/2000/svg" width="20.389" height="27.185" viewBox="0 0 20.389 27.185">
2
+  <path id="FontAwsome_phone-volume_" data-name="FontAwsome (phone-volume)" d="M5.168,26.918a17.642,17.642,0,0,1,0-24.951A.913.913,0,0,1,6.3,1.838L9.738,3.989A.913.913,0,0,1,10.1,5.1L8.381,9.4a.913.913,0,0,1-.938.569l-2.963-.3a14.1,14.1,0,0,0,0,9.531l2.963-.3a.913.913,0,0,1,.938.569l1.721,4.3A.913.913,0,0,1,9.738,24.9L6.3,27.046a.913.913,0,0,1-1.129-.129ZM13.121,5.069a3.4,3.4,0,0,1,0,3.454.64.64,0,0,1-.994.137l-.317-.3a.642.642,0,0,1-.12-.765,1.7,1.7,0,0,0,0-1.59.642.642,0,0,1,.12-.765l.317-.3A.64.64,0,0,1,13.121,5.069ZM17.995.228a10.209,10.209,0,0,1,0,13.137.64.64,0,0,1-.932.05l-.308-.3a.638.638,0,0,1-.049-.87,8.508,8.508,0,0,0,0-10.907.638.638,0,0,1,.049-.87l.308-.3a.64.64,0,0,1,.932.05ZM15.554,2.614a6.806,6.806,0,0,1,0,8.365.64.64,0,0,1-.948.069l-.309-.3a.637.637,0,0,1-.068-.846,5.1,5.1,0,0,0,0-6.219.637.637,0,0,1,.068-.846l.309-.3a.64.64,0,0,1,.948.069Z" transform="translate(0 0)" fill="#396868"/>
3
+</svg>

+ 3
- 0
public/assets/svg/twitter.svg 파일 보기

@@ -0,0 +1,3 @@
1
+<svg id="_096-twitter" data-name="096-twitter" xmlns="http://www.w3.org/2000/svg" width="26.686" height="21.683" viewBox="0 0 26.686 21.683">
2
+  <path id="Vector" d="M23.944,5.407a10.921,10.921,0,0,0,2.742-2.84h0a11.426,11.426,0,0,1-3.152.864A5.442,5.442,0,0,0,25.941.407a10.947,10.947,0,0,1-3.469,1.324,5.471,5.471,0,0,0-9.464,3.741,5.633,5.633,0,0,0,.127,1.248A15.489,15.489,0,0,1,1.858,1,5.471,5.471,0,0,0,3.539,8.308a5.408,5.408,0,0,1-2.472-.674v.06a5.5,5.5,0,0,0,4.383,5.376,5.44,5.44,0,0,1-1.434.18,4.829,4.829,0,0,1-1.035-.093,5.525,5.525,0,0,0,5.112,3.812A11,11,0,0,1,1.309,19.3,10.347,10.347,0,0,1,0,19.228a15.407,15.407,0,0,0,8.393,2.455A15.465,15.465,0,0,0,23.944,5.407Z" transform="translate(0 0)" fill="#176381"/>
3
+</svg>

+ 3
- 0
public/assets/svg/twoo.svg 파일 보기

@@ -0,0 +1,3 @@
1
+<svg id="_097-twoo" data-name="097-twoo" xmlns="http://www.w3.org/2000/svg" width="26.726" height="14.473" viewBox="0 0 26.726 14.473">
2
+  <path id="Vector" d="M11.269,12.706c.071-.06.143-.122.21-.188A6.677,6.677,0,0,1,.286,9.321V9.313C-1.618,2.319,6.413-2.994,11.477,1.9L18.133,9h.02a2.347,2.347,0,0,0,3.453.018,2.722,2.722,0,0,0,.052-3.684A2.436,2.436,0,0,0,17.5,7.451L15.817,5.736,13.864,3.869a7.222,7.222,0,0,1,1.592-2.1c-.071.061-.143.125-.21.188a6.679,6.679,0,0,1,11.193,3.2v.007c1.909,6.993-6.131,12.306-11.19,7.413L8.6,5.433l0-.017A.017.017,0,0,1,8.575,5.4a2.316,2.316,0,0,0-3.453-.034,2.7,2.7,0,0,0-.05,3.668c1.432,1.685,4.437.436,4.154-2.172L12.866,10.6a7.547,7.547,0,0,1-1.6,2.107Z" transform="translate(0 0)" fill="#176381"/>
3
+</svg>

+ 104
- 15
resources/views/home.antlers.html 파일 보기

@@ -177,26 +177,97 @@
177 177
     </div>
178 178
 </div>
179 179
 
180
-<!-- Button trigger modal -->
181
-<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>
180
+<!-- FOOTER -->
181
+<div class="container-fluid p-0 m-0">
182
+    <div class="m-0 px-5 d-flex" style="background-color: #FFF">
183
+        <div class="flex-grow-1 p-5">
184
+
185
+            <img class="mb-4 ms-5" src="/assets/svg/logo.svg" width="120">
186
+
187
+            <p class="font-16 mb-5" style="line-height: 16px;font-weight:600;"> Bold flavours, savoury snacks,<br/> Taste adventures.</p>
188
+
189
+            <div class="d-flex flex-wrap mt-5" style="height: fit-content;">
190
+                <img class="me-3" src="/assets/svg/linkedin.svg" width="20">
191
+                <img class="me-3" src="/assets/svg/message.svg" width="20">
192
+                <img class="me-3" src="/assets/svg/twitter.svg" width="20">
193
+                <img class="me-3" src="/assets/svg/twoo.svg" width="20">
194
+            </div>
182 195
 
183
-  <!-- Modal -->
184
-  <div class="modal fade" id="enquiryModal" tabindex="-1">
185
-    <div class="modal-dialog modal-dialog-centered">
186
-      <div class="modal-content">
187
-        <div class="modal-body text-center">
188
-            <p>Your Enquiry has been submitted, we will contact you soon</p>
189
-            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
190 196
         </div>
191
-      </div>
197
+
198
+        <div class="flex-grow-1 py-5 px-3">
199
+
200
+            <nav class="footer-nav">
201
+                <ul>
202
+                    <li><a class="font-16" href="#">Home</a></li>
203
+                    <li><a class="font-16" href="#">Introduction</a></li>
204
+                    <li><a class="font-16" href="#">What is Text4u?</a></li>
205
+                </ul>
206
+            </nav>
207
+
208
+        </div>
209
+
210
+        <div class="flex-grow-1 py-5 px-3">
211
+
212
+            <ul class="p-0 m-0">
213
+                <li class="mb-3">
214
+                    <div class="row">
215
+                        <div class="col-2 p-0">
216
+                            <img class="ms-auto me-2" src="/assets/svg/mapmark.svg" width="20">
217
+                        </div>
218
+                        <div class="col">
219
+                            <p class="font-16">Text4U Sdn Bhd, No.89 Jalan KP 7 <br/> Kawasan Perindustrian, Kota Puteri, 48100 Batu Arang, Selangor</p>
220
+                        </div>
221
+                    </div>
222
+                </li>
223
+                <li class="mb-3">
224
+                    <div class="row">
225
+                        <div class="col-2 p-0">
226
+                            <img class="ms-auto me-2" src="/assets/svg/phone.svg" width="20">
227
+                        </div>
228
+                        <div class="col">
229
+                            <p class="font-16">+60 18-265 4321</p>
230
+                        </div>
231
+                    </div>
232
+                </li>
233
+                <li class="mb-3">
234
+                    <div class="row">
235
+                        <div class="col-2 p-0">
236
+                            <img class="ms-auto me-2" src="/assets/svg/envelope.svg" width="20">
237
+                        </div>
238
+                        <div class="col">
239
+                            <p class="font-16">hello@aducktive.com</p>
240
+                        </div>
241
+                    </div>
242
+                </li>
243
+            </ul>
244
+
245
+        </div>
246
+
247
+        <div class="flex-grow-1 py-5 px-3">
248
+
249
+            <p class="fw-bold font-21">Enjoy Subscriber Perks</p>
250
+
251
+            <p class="font-16 mb-4">Sign up for emails and receive early access to new arrivals, <br/> sales, event and more.</p>
252
+
253
+            <div class="input-group border-0 mb-5" style="overflow: hidden;">
254
+                <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;">
255
+                <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>
256
+            </div>
257
+
258
+
259
+            <p class="font-16">Copyright © 2024 TEXT4U SDN BHD 1384616-H. All rights reserved.</p>
260
+
261
+        </div>
262
+
192 263
     </div>
193
-  </div>
264
+</div>
194 265
 
195
-<!-- FOOTER -->
266
+<!-- COPYRIGHT -->
196 267
 <div class="container-fluid p-0 m-0">
197
-    <div class="row m-0 p-0 d-flex" style="background-color: #396868">
268
+    <div class="row m-0 p-0 d-flex bg-light" >
198 269
         <div class="d-flex p-0">
199
-            <div class="bg-light mx-auto d-flex px-5 py-3">
270
+            <div class=" mx-auto d-flex px-5 py-3">
200 271
                 <div class="my-auto mx-auto me-4">
201 272
                     <img src="/assets/svg/logo.svg" width="50">
202 273
                 </div>
@@ -206,7 +277,7 @@
206 277
                     </p>
207 278
                 </div>
208 279
             </div>
209
-            <div class="flex-grow-1 py-2 px-5 d-flex justify-content-end">
280
+            <div class="flex-grow-1 py-2 px-5 d-flex justify-content-end trapezium" style="background-color: #396868">
210 281
                 <p class="text-light font-18 fw-light m-0 mx-3 my-auto">
211 282
                     Copyright © 2024 Text4u.
212 283
                 </p>
@@ -221,6 +292,21 @@
221 292
     </div>
222 293
 </div>
223 294
 
295
+
296
+<!-- Button trigger modal -->
297
+<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>
298
+
299
+<!-- Modal -->
300
+<div class="modal fade" id="enquiryModal" tabindex="-1">
301
+  <div class="modal-dialog modal-dialog-centered">
302
+    <div class="modal-content">
303
+      <div class="modal-body text-center">
304
+          <p>Your Enquiry has been submitted, we will contact you soon</p>
305
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
306
+      </div>
307
+    </div>
308
+  </div>
309
+</div>
224 310
 <script>
225 311
     let enquiryForm = document.getElementById("enquiry-form")
226 312
 
@@ -251,6 +337,9 @@
251 337
         if (response.ok) {
252 338
 
253 339
           console.log('Enquiry submitted successfully:', result);
340
+          document.getElementById('name').value = ""
341
+          document.getElementById('email').value = ""
342
+          document.getElementById('phone').value = ""
254 343
           document.getElementById("triggerModal").click()
255 344
 
256 345
         } else {

+ 29
- 0
resources/views/layout.antlers.html 파일 보기

@@ -43,10 +43,18 @@
43 43
                 font-size: 37px;
44 44
             }
45 45
 
46
+            .font-21{
47
+                font-size: 21px;
48
+            }
49
+
46 50
             .font-18{
47 51
                 font-size: 18px;
48 52
             }
49 53
 
54
+            .font-16{
55
+                font-size: 16px;
56
+            }
57
+
50 58
             .form-container {
51 59
               padding: 20px;
52 60
               border-radius: 8px;
@@ -90,6 +98,27 @@
90 98
               background-color: #555;
91 99
             }
92 100
 
101
+            .footer-nav ul {
102
+                list-style-type: none; /* Remove bullets */
103
+                padding: 0;
104
+                margin: 0;
105
+            }
106
+
107
+            .footer-nav ul li {
108
+                margin-bottom: 18px /* Add some spacing between items */
109
+            }
110
+
111
+            .footer-nav ul li a {
112
+                text-decoration: none; /* Remove underline */
113
+                color: #000; /* Default link color */
114
+            }
115
+
116
+            .footer-nav ul li a:hover {
117
+                color: #396868; /* Change color on hover */
118
+            }
119
+
120
+
121
+
93 122
 
94 123
         </style>
95 124
     </head>

Loading…
취소
저장