templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Tawsill.com{% endblock %}
  5. {% block body %}
  6. {# cover image #}
  7. <div class="ftco-blocks-cover-1">
  8. <div class="ftco-cover-1 " style="background-image: url('https://i.postimg.cc/J7yj9KR4/tawsill.png'); ">
  9. <div class="container">
  10. <div class="row align-items-center">
  11. <div class="col-lg-6 section1">
  12. <h1 style="font-family: inherit;color: black">أفضل موقع لتوصيل البضائع</h1>
  15. <form action="{{ path('tracking') }}" method="post">
  16. <div class="form-group d-flex">
  17. <input type="text" name="reference" class="form-control form-control1" dir="rtl" placeholder="أدخل رقم التتبع">
  19. </div>
  20. <div>
  21. <input type="submit" class="btn btn-primary text-white px-4 btn1" value="تتبع الآن">
  22. </div>
  23. </form>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. <!-- END .ftco-cover-1 -->
  30. </div>
  31. {# end image cover #}
  32. <div class="site-section bg-light" id="services-section">
  33. <div class="container">
  34. <div class="row mb-5 justify-content-center">
  35. <div class="col-md-7 text-center">
  36. <div class="block-heading-1" >
  37. <h2>ماذا نقدم</h2>
  38. <p>
  39. نحن نقدم خدمات توصيل البضائع وحجوزات تذاكر للرحلات الجوية والبرية
  40. </p>
  41. </div>
  42. </div>
  43. </div>
  45. <div class="owl-carousel owl-all" {#data-bs-toggle="modal" data-bs-target="#exampleModal"#}>
  47. <div class="block__35630" onclick="(()=>window.location = 'https://www.adonis.com')()">
  48. {# <div class="icon mb-0">#}
  49. {# <span class="flaticon-airplane"></span>#}
  50. {# </div>#}
  51. <div class="card" style="width:19 rem; background-color:none">
  52. <img src="https://i.postimg.cc/7hMzmtyx/plane.png" class="card-img-top" alt="..." style="height: 16rem">
  53. <div class="card-body">
  54. <h3 class="mb-3">طيران</h3>
  55. <p> حجز تذكر الطائرات مع شريكنا adonis.com </p>
  56. </div>
  57. </div>
  59. </div>
  60. {# new#}
  61. {# <div class="card" style="width: 18rem;">#}
  62. {# <img src="https://gumlet.assettype.com/erembusiness%2F2023-03%2F6b8e5357-8a0d-44de-a92d-f8006bf3a6bb%2Fshutterstock_1573918030.jpg?auto=format%2Ccompress&fit=max&w=1500&dpr=1.3" class="card-img-top" alt="...">#}
  63. {# <div class="card-body">#}
  64. {# <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.0</p>#}
  65. {# </div>#}
  66. {# </div>#}
  69. <div class="block__35630" onclick="(()=>window.location ='{{path('app_shipment_new')}}')()">
  70. {# <div class="icon mb-0">#}
  71. {# <span class="flaticon-box"></span>#}
  72. {# </div>#}
  73. <div class="card" style="width:19 rem; background-color:none">
  74. <img src="https://i.postimg.cc/fTcCr5vS/cha7en.png" class="card-img-top" alt="..." style="height: 16rem">
  75. <div class="card-body">
  76. <h3 class="mb-3"> شحن </h3>
  77. <p>الشحن الدولي والمحلي </p>
  78. </div>
  79. </div>
  81. </div>
  83. <div class="block__35630" onclick="(()=>window.location ='{{path('app_bus_ticket_new')}}')()">
  84. {# <div class="icon mb-0">#}
  85. {# <span class="flaticon-add"></span>#}
  86. {# </div>#}
  88. <div class="card" style="width:19 rem; background-color:none">
  89. <img src="https://i.postimg.cc/wB0bbFgQ/bus.png" class="card-img-top" alt="..." style="height: 16rem">
  90. <div class="card-body">
  91. <h3 class="mb-3">باصات</h3>
  92. <p> حجز تذكر الباصات داخل المملكة</p>
  93. </div>
  94. </div>
  95. </div>
  97. </div>
  98. {# #}{# modal for create new ticket #}
  99. {# <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">#}
  100. {# <div class="modal-dialog modal-xl">#}
  101. {# <div class="modal-content">#}
  102. {# <div class="modal-header">#}
  103. {# <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>#}
  104. {# <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>#}
  105. {# </div>#}
  106. {# <div class="modal-body">#}
  107. {# <h1>إنشاء تذكرة حافلة جديدة</h1>#}
  109. {# <div class="accordion" id="accordionExample">#}
  110. {# <div class="steps">#}
  111. {# <progress id="progress" value=0 max=100 ></progress>#}
  112. {# <div class="step-item">#}
  113. {# <button class="step-button text-center" type="button" data-bs-toggle="collapse"#}
  114. {# data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">#}
  115. {# 1#}
  116. {# </button>#}
  117. {# </div>#}
  118. {# <div class="step-item">#}
  119. {# <button class="step-button text-center collapsed" type="button" data-bs-toggle="collapse"#}
  120. {# data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">#}
  121. {# 2#}
  122. {# </button>#}
  123. {# </div>#}
  124. {# <div class="step-item">#}
  125. {# <button class="step-button text-center collapsed" type="button" data-bs-toggle="collapse"#}
  126. {# data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">#}
  127. {# 3#}
  128. {# </button>#}
  129. {# </div>#}
  130. {# </div>#}
  132. {# <div class="card">#}
  133. {# <div id="headingOne">#}
  134. {# </div>#}
  136. {# <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"#}
  137. {# data-bs-parent="#accordionExample">#}
  138. {# <div class="card-body">#}
  139. {# {{ form_row(form.startStation, { 'attr': {'class': 'input_ticket' , 'placeholder': "محطة الانطلاق"} }) }}#}
  140. {# {{ form_row(form.finalStation, { 'attr': {'class': 'input_ticket' , 'placeholder': "المحطة النهائية"} }) }}#}
  141. {# <label style="right: 0"> تاريخ الوقت </label>#}
  142. {# {{ form_row(form.dateTime, {'attr': {'class': 'input_ticket_date' , 'placeholder' : "التاريخ و الوقت" ,'dir':'rtl'}} ) }}#}
  144. {# </div>#}
  145. {# </div>#}
  146. {# </div>#}
  148. {# <div class="card">#}
  149. {# <div id="headingTwo">#}
  151. {# </div>#}
  152. {# <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">#}
  153. {# <div class="card-body">#}
  154. {# {{ form_row(form.bagsNumebr, { 'attr': {'class': 'input_ticket' , 'placeholder': "عدد الحقائب"} }) }}#}
  155. {# {{ form_row(form.seatNumber, { 'attr': {'class': 'input_ticket' , 'placeholder': "عدد المقاعد"} }) }}#}
  156. {# {{ form_row(form.dateTicket, { 'attr': {'class': 'input_ticket_date' , 'placeholder': "تاريخ التذكرة"} }) }}#}
  158. {# </div>#}
  159. {# </div>#}
  160. {# </div>#}
  163. {# <div class="card">#}
  164. {# <div id="headingThree">#}
  166. {# </div>#}
  167. {# <div id="collapseThree" class="collapse" aria-labelledby="headingThree"#}
  168. {# data-bs-parent="#accordionExample">#}
  169. {# <div class="card-body">#}
  170. {# {{ form_row(form.company, { 'attr': {'class': 'input_ticket' , 'placeholder': "شركة"} }) }}#}
  171. {# {{ form_row(form.subCompany, { 'attr': {'class': 'input_ticket' , 'placeholder': "شركة فرعية"} }) }}#}
  172. {# {{ form_row(form.price, { 'attr': {'class': 'input_ticket' , 'placeholder': "السعر"} }) }}#}
  173. {# <button class="btn_ticket">{{ button_label|default('تسجيل') }}</button>#}
  175. {# </div>#}
  176. {# </div>#}
  177. {# </div>#}
  180. {# </div>#}
  182. {# </div>#}
  183. {# <div class="modal-footer">#}
  184. {# <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>#}
  185. {# <button type="button" class="btn btn-primary">Save changes</button>#}
  186. {# </div>#}
  187. {# </div>#}
  188. {# </div>#}
  189. {# </div>#}
  191. </div>
  192. </div>
  193. <div class="site-section" id="about-section">
  194. <div class="container">
  195. <div class="row mb-5 justify-content-center">
  196. <div class="col-md-10 text-center">
  197. <div class="block-heading-1" data-aos="fade-up" data-aos-delay="">
  198. <h2>معلومات عنا</h2>
  199. <p dir="rtl" style="line-height: 2.5;">
  200. توصيل متجر إلكتروني متخصص في حجوزات وبيع تذاكر النقل السياحي البري بين المدن السعودية داخليًا وأيضًا مع مختلف الدول المجاورة للمملكة.
  201. الرحلات البرية الدولية (مصر - الأردن - سوريا - العراق - الكويت - قطر - البحرين - الإمارات - عمان - اليمن).
  202. نسعى لخدمة المسافر عبر شركات النقل البري السياحي والحصول على مختلف العروض والأسعار.
  203. من خلال موقعنا الإلكتروني، يمكنكم تصفح مختلف الخيارات والعروض المتاحة، واختيار أفضل الرحلات والجداول المناسبة لكم. كما نقدم معلومات شاملة حول وسائل النقل المتاحة وتفاصيل الرحلة، مما يساعدكم على اتخاذ قرارات مستنيرة وتخطيط رحلتكم بكل يسر وسهولة.
  204. اختر توصيل لتلبية احتياجاتكم في حجوزات النقل السياحي البري والاستمتاع بأفضل العروض والأسعار. نحن هنا لخدمت.
  205. </p>
  206. </div>
  207. </div>
  208. </div>
  209. </div>
  211. </div>
  212. <div class="site-section bg-light" id="about-section">
  213. <div class="container">
  214. {# <div class="row justify-content-center mb-4 block-img-video-1-wrap">#}
  215. {# <div class="col-md-12 mb-5">#}
  216. {# <figure class="block-img-video-1" data-aos="fade">#}
  217. {# <a href="https://vimeo.com/45830194" data-fancybox data-ratio="2">#}
  218. {# <span class="icon"><span class="icon-play"></span></span>#}
  219. {# <img src="images/cargo_delivery_big.jpg" alt="Image" class="img-fluid">#}
  220. {# </a>#}
  221. {# </figure>#}
  222. {# </div>#}
  223. {# </div>#}
  224. <div class="row">
  225. <div class="col-12">
  226. <div class="row">
  227. <div class="col-6 col-md-6 mb-4 col-lg-0 col-lg-3" data-aos="fade-up" data-aos-delay="">
  228. <div class="block-counter-1">
  229. <span class="number"><span data-number="50">0</span>+</span>
  230. <span class="caption" dir="rtl">سنوات الخبرة</span>
  231. </div>
  232. </div>
  233. <div class="col-6 col-md-6 mb-4 col-lg-0 col-lg-3" data-aos="fade-up" data-aos-delay="100">
  234. <div class="block-counter-1">
  235. <span class="number"><span data-number="42">0</span>+</span>
  236. <span class="caption">شركات</span>
  237. </div>
  238. </div>
  239. <div class="col-6 col-md-6 mb-4 col-lg-0 col-lg-3" data-aos="fade-up" data-aos-delay="200">
  240. <div class="block-counter-1">
  241. <span class="number"><span data-number="12">0</span>+</span>
  242. <span class="caption">الدول المشمولة</span>
  243. </div>
  244. </div>
  245. <div class="col-6 col-md-6 mb-4 col-lg-0 col-lg-3" data-aos="fade-up" data-aos-delay="300">
  246. <div class="block-counter-1">
  247. <span class="number"><span data-number="60">0</span>+</span>
  248. <span class="caption">المحطات والمدن</span>
  249. </div>
  250. </div>
  251. </div>
  252. </div>
  253. </div>
  254. </div>
  255. </div>
  256. <div class="site-section bg-light" id="contact-section">
  257. <div class="container">
  258. <div class="row">
  259. <div class="col-12 text-center mb-5" data-aos="fade-up" data-aos-delay="">
  260. <div class="block-heading-1">
  261. <span>ابقى على تواصل</span>
  262. <h2>اتصل بنا</h2>
  263. </div>
  264. </div>
  265. </div>
  266. <div class="row">
  267. <div class="col-lg-6 mb-5" data-aos="fade-up" data-aos-delay="100">
  268. {% for message in app.flashes('emailError') %}
  269. <div class="alert alert-danger text-right" role="alert" dir="rtl">
  270. {{ message }}
  271. </div>
  272. {% endfor %}
  273. {% for message in app.flashes('contact') %}
  274. <div class="alert alert-success text-right" dir="rtl">
  275. {{ message }}
  276. </div>
  277. {% endfor %}
  278. <form action="{{ path('app_contact')}}" method="post" dir="rtl">
  279. <div class="form-group row">
  280. <div class="col-md-6 mb-4 mb-lg-0">
  281. <input type="text" name="firstName" class="form-control" placeholder="الاسم">
  282. </div>
  283. <div class="col-md-6">
  284. <input type="text" name="lastName" class="form-control" placeholder="اللقب">
  285. </div>
  286. </div>
  288. <div class="form-group row">
  289. <div class="col-md-12">
  290. <input type="email" name="email" class="form-control" placeholder="عنوان البريد الإلكتروني" required>
  291. </div>
  292. </div>
  293. <div class="form-group row">
  294. <div class="col-md-12">
  295. <textarea name="description" id="" minlength="5" maxlength="1000" class="form-control" placeholder=".اكتب رسالتك " cols="30" rows="10" required></textarea>
  296. </div>
  297. </div>
  298. <div class="form-group row">
  299. <div class="col-md-6 mr-auto">
  300. <input type="submit" class="btn btn-block btn-primary text-white py-3 px-5" value="أرسل رسالتك">
  301. </div>
  302. </div>
  303. </form>
  304. </div>
  305. <div class="col-lg-4 ml-auto text-right" data-aos="fade-up" data-aos-delay="200" dir="rtl">
  306. <div class="bg-white p-3 p-md-5">
  307. <h3 class="text-black mb-4 " >معلومات الاتصال</h3>
  308. <ul class="list-unstyled footer-link">
  309. <li class="d-block mb-3">
  310. <span class="d-block text-black"> عنوان</span>
  311. <span>34 اسم الشارع ، اسم المدينة هنا ، السعودية</span></li>
  312. <li class="d-block mb-3"><span class="d-block text-black">هاتف</span><span dir="ltr">+967 733 702 285</span></li>
  313. <li class="d-block mb-3"><span class="d-block text-black">البريد إلكتروني</span><span>test@yourdomain.com</span></li>
  314. </ul>
  315. </div>
  316. </div>
  317. </div>
  318. </div>
  319. </div>
  320. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
  321. integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
  322. <script src="{{ asset('js/contact.js') }}"></script>
  323. <script>
  324. const stepButtons = document.querySelectorAll('.step-button');
  325. const progress = document.querySelector('#progress');
  326. Array.from(stepButtons).forEach((button,index) => {
  327. button.addEventListener('click', () => {
  328. progress.setAttribute('value', index * 100 /(stepButtons.length - 1) );//there are 3 buttons. 2 spaces.
  329. stepButtons.forEach((item, secindex)=>{
  330. if(index > secindex){
  331. item.classList.add('done');
  332. }
  333. if(index < secindex){
  334. item.classList.remove('done');
  335. }
  336. })
  337. })
  338. })
  339. </script>
  340. {% endblock %}