templates/vitrine/en/homepage.html.twig line 1

Open in your IDE?
  1. {% extends 'vitrine/en/layout.html.twig' %}
  3. {% block title %}Cathedral Heritage Suite - 8-Guest Rental Strasbourg Center{% endblock title %}
  4. {% block description %}Rent our 83m² suite in the heart of Strasbourg. 3 bedrooms, sleeps 8, 100m from Cathedral. Kitchen fully furnished, 2 bathrooms. Book your stay today!{% endblock description %}
  5. {% block robots %}index,follow{% endblock robots %}
  7. {% block canonical %}
  8. <link rel="canonical" href="https://cathedraleheritage.com" />
  9. <link rel="alternate" hreflang="fr" href="https://cathedraleheritage.com/fr" />
  10. <link rel="alternate" hreflang="en" href="https://cathedraleheritage.com" />
  11. <link rel="alternate" hreflang="x-default" href="https://cathedraleheritage.com" />
  12. {% endblock canonical %}
  14. {% block body %}
  16. <section id="hero" class="text-light no-top no-bottom relative overflow-hidden z-1000">
  17. <div class="abs w-100 abs-centered z-2">
  18. <div class="container">
  19. <div class="spacer-double"></div>
  20. <div class="row g-4 align-items-center justify-content-center">
  21. <div class="col-md-8 text-center">
  22. <h1 class="mb-2" style="color:white;">Welcome to Cathedral Heritage Suite</h1>
  23. <p class="lead mb-3" style="color:white; font-size:22px;">Beautifully appointed apartment accommodating up to 8 guests in Strasbourg's prestigious historical city center</p>
  24. <a class="btn-main btn-line bg-blur fx-slide" href="#about" style="color:white;"><span>Find out more</span></a>
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. <div class="vertical-center">
  30. <div class="swiper">
  31. <div class="swiper-wrapper">
  32. <div class="swiper-slide">
  33. <div class="swiper-inner" data-bgimage="url(/images/salon2.jpeg)">
  34. <div class="sw-overlay op-5"></div>
  35. </div>
  36. </div>
  37. <div class="swiper-slide">
  38. <div class="swiper-inner" data-bgimage="url(/images/chambre2.jpeg)">
  39. <div class="sw-overlay op-5"></div>
  40. </div>
  41. </div>
  42. <div class="swiper-slide">
  43. <div class="swiper-inner" data-bgimage="url(/images/noel.jpeg)">
  44. <div class="sw-overlay op-5"></div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  51. <div class="abs w-100 bottom-0 z-2 pb-4 sm-hide">
  52. <div class="container">
  53. <div class="row">
  54. <div class="col-lg-12">
  55. <div class="d-flex justify-content-between">
  56. <div><h6 style="color:white;">Cathedral 100m away</h6></div>
  57. <div><h6 style="color:white;">Museums 200m away</h6></div>
  58. <div><h6 style="color:white;">Petite France 300m away</h6></div>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. <div class="gradient-edge-bottom op-8"></div>
  65. </section>
  67. <section id="about">
  68. <div class="container">
  69. <div class="row g-4 align-items-end justify-content-between">
  70. <div class="col-lg-5">
  71. <div class="subtitle">About the apartment</div>
  72. <h2>Modern suite in the heart of Strasbourg's Grande Île</h2>
  73. </div>
  75. <div class="col-lg-4">
  76. <p class="mb-4" style="color:#212121;">
  77. Spacious fully equipped appartement ideal for families and groups up to 8 people : 1 master bedroom with en-suite bathroom, one double bedroom, one bedroom with two double bunk beds (sleeps 4), maximum weight of 100kg for upper bunks.
  78. </p>
  79. <p class="mb-4" style="color:#212121;">
  80. Kitchen fully furnished and cozy living-dining room to share great moments together.
  81. </p>
  82. <p class="mb-4" style="color:#212121;">
  83. Amenities: hairdryer, dishwasher, washer-dryer, microwave, oven, ironing board with iron, Nespresso coffee machine, kettle, TV, Wi-Fi and USB outlets for charging your devices.
  84. </p>
  85. </div>
  86. </div>
  88. <div class="spacer-single"></div>
  90. <div class="row g-4">
  91. <div class="col-md-2">
  92. <div class="relative">
  93. <h5>Size</h5>
  94. <div class="d-flex justify-content-start align-items-center" style="padding-top:6px;">
  95. <img src="/images/home.png" width="37" class="me-3" alt="">
  96. <div class="fs-20 fw-600" style="color:#212121;">83 m²</div>
  97. </div>
  98. </div>
  99. </div>
  101. <div class="col-md-2">
  102. <div class="relative">
  103. <h5>Bedrooms</h5>
  104. <div class="d-flex justify-content-start align-items-center" style="padding-top:4px;">
  105. <img src="/images/bed.png" width="37" class="me-3" alt="">
  106. <div class="fs-20 fw-600" style="color:#212121;">3</div>
  107. </div>
  108. </div>
  109. </div>
  111. <div class="col-md-2">
  112. <div class="relative">
  113. <h5>Living Room</h5>
  114. <div class="d-flex justify-content-start align-items-center">
  115. <img src="/images/sofa.png" width="50" class="me-3" alt="">
  116. <div class="fs-20 fw-600" style="color:#212121;">Included</div>
  117. </div>
  118. </div>
  119. </div>
  121. <div class="col-md-2">
  122. <div class="relative">
  123. <h5>Kitchen</h5>
  124. <div class="d-flex justify-content-start align-items-center" style="padding-top:6px;">
  125. <img src="/images/cooking.png" width="37" class="me-3" alt="">
  126. <div class="fs-20 fw-600" style="color:#212121;">Included</div>
  127. </div>
  128. </div>
  129. </div>
  131. <div class="col-md-2">
  132. <div class="relative">
  133. <h5>Bathrooms</h5>
  134. <div class="d-flex justify-content-start align-items-center" style="padding-top:4px;">
  135. <img src="/images/bathroom.png" width="40" class="me-3" alt="">
  136. <div class="fs-20 fw-600" style="color:#212121;">2</div>
  137. </div>
  138. </div>
  139. </div>
  141. <div class="col-md-2">
  142. <div class="relative">
  143. <h5>Guests</h5>
  144. <div class="d-flex justify-content-start align-items-center" style="padding-top:5px;">
  145. <img src="/images/user.png" width="37" class="me-3" alt="">
  146. <div class="fs-20 fw-600" style="color:#212121;">8</div>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </section>
  154. <section id="rooms" class="p-0 overflow-hidden">
  156. <div class="container-fluid">
  157. <div class="row">
  158. <div class="col-lg-12">
  159. <div class="owl-custom-nav menu-float" data-target="#room-carousel">
  160. <a class="btn-next"></a>
  161. <a class="btn-prev"></a>
  163. <div id="room-carousel" class="owl-2-cols-center owl-carousel owl-theme">
  165. <div class="item">
  166. <div class="relative">
  167. <div class="overflow-hidden text-light">
  168. <div class="abs h-100 start-0 z-2 p-4">
  169. <h3 style="color:white;">Living Room</h3>
  170. </div>
  171. <img src="/images/salon2.jpeg" class="w-100" alt="Living Room">
  172. </div>
  173. </div>
  174. </div>
  176. <div class="item">
  177. <div class="relative">
  178. <div class="overflow-hidden text-light">
  179. <div class="abs h-100 start-1 z-2 p-4">
  180. <h3 style="color:white;">Bedroom 1</h3>
  181. </div>
  182. <img src="/images/chambre1.jpeg" class="w-100" alt="Bedroom 1">
  183. </div>
  184. </div>
  185. </div>
  187. <div class="item">
  188. <div class="relative">
  189. <div class="overflow-hidden text-light">
  190. <div class="abs h-100 start-2 z-2 p-4">
  191. <h3 style="color:white;">Bedroom 2</h3>
  192. </div>
  193. <img src="/images/chambre2.jpeg" class="w-100" alt="Bedroom 2">
  194. </div>
  195. </div>
  196. </div>
  198. <div class="item">
  199. <div class="relative">
  200. <div class="overflow-hidden text-light">
  201. <div class="abs h-100 start-3 z-2 p-4">
  202. <h3 style="color:white;">Bedroom 3</h3>
  203. </div>
  204. <img src="/images/chambre3.jpeg" class="w-100" alt="Bedroom 3">
  205. </div>
  206. </div>
  207. </div>
  209. <div class="item">
  210. <div class="relative">
  211. <div class="overflow-hidden text-light">
  212. <div class="abs h-100 start-4 z-2 p-4">
  213. <h3 style="color:white;">Kitchen</h3>
  214. </div>
  215. <img src="/images/cuisine.jpeg" class="w-100" alt="Kitchen">
  216. </div>
  217. </div>
  218. </div>
  220. <div class="item">
  221. <div class="relative">
  222. <div class="overflow-hidden text-light">
  223. <div class="abs h-100 start-5 z-2 p-4">
  224. <h3 style="color:white;">Bathroom</h3>
  225. </div>
  226. <img src="/images/salledebain.jpeg" class="w-100" alt="Bathroom 1">
  227. </div>
  228. </div>
  229. </div>
  231. <div class="item">
  232. <div class="relative">
  233. <div class="overflow-hidden text-light">
  234. <div class="abs h-100 start-6 z-2 p-4">
  235. <h3 style="color:white;">Bathroom 2</h3>
  236. </div>
  237. <img src="/images/salledebain2.jpeg" class="w-100" alt="Bathroom 2">
  238. </div>
  239. </div>
  240. </div>
  242. </div>
  243. </div>
  244. </div>
  245. </div>
  246. </div>
  248. </section>
  250. <section id="services" class="overlay-dark-1">
  251. <div class="container">
  252. <div class="row g-4 justify-content-between">
  253. <div class="col-lg-5 relative z-3">
  254. <div class="me-lg-3">
  255. <div class="subtitle wow fadeInUp" data-wow-delay=".0s">Your stay in Strasbourg</div>
  256. <h2 class="wow fadeInUp" data-wow-delay=".2s">Rates and services</h2>
  257. <p style="color:#212121; font-size:18px;">An exceptional suite in the heart of Strasbourg, with optionnal dedicated concierge service to assist you throughout your stay.</p>
  259. <p style="color:#212121; font-size:18px;">Minimum booking of two nights.</p>
  261. <a href="#reservation" class="btn-main" style="color:white;">Booking</a>
  264. </div>
  265. </div>
  267. <div class="col-lg-6" style="color:black;">
  268. <div class="spacer-single spacer-double"></div>
  269. <div class="row">
  270. <div class="col-md-6 wow fadeInUp" data-wow-delay=".2s">
  272. {#
  273. <h5 class=" mb-3">Peak Season</h5>
  274. <p class="fs-500"><small>June 1st to September 30th • November 25th to January 5th</small></p>
  275. <ul class="ul-check fs-500">
  276. <li>€960 per night</li>
  277. <li>10% discount for bookings of 7 nights and up</li>
  278. </ul>
  280. <h5 class="mb-3 mt-4">Off-peak Season</h5>
  281. #}
  283. <ul class="ul-check fs-500">
  284. <li>from €350 per night</li>
  285. <li>10% discount for bookings of 7 nights and up</li>
  286. </ul>
  287. </div>
  289. <div class="col-md-6 wow fadeInUp" data-wow-delay=".4s">
  290. <h5 class="mb-3">Optional services</h5>
  291. <ul class="ul-check fs-500">
  292. <li>One parking space: €24/day or €150/week</li>
  293. <li>Extra cleaning during your stay : 60 euros</li>
  294. <li>Other Extras : Children's workshop, baby amenities, dog policy on request (other pets are unfortunately not allowed in the appartement), Decoration for special occasions, breakfast, Alsatian delicacies, etc</li>
  295. </ul>
  297. <div class="mt-4">
  298. <p class="fs-500">
  299. <strong>On site assistance</strong> <br />
  300. <small>Tuesday to Saturday • 10am-6:45pm</small>
  301. </p>
  302. <p class="fs-500">
  303. <strong>Private concierge subject to availability</strong><br>
  304. <small>Quotation on request</small>
  305. </p>
  306. </div>
  307. </div>
  308. </div>
  309. </div>
  310. </div>
  313. </div>
  314. </section>
  316. <section id="section-gallery" class="relative">
  317. <div class="container relative z-2" id="photos">
  318. <div class="row g-4 gx-5 justify-content-center">
  319. <div class="col-lg-6 text-center">
  320. <h2 class="wow fadeInUp" data-wow-delay=".2s">Apartment Gallery</h2>
  321. <p class="wow fadeInUp" data-wow-delay=".3s" style="color:#212121;">Explore our curated images to discover the residence's various spaces — from the bedrooms and living area to the kitchen, bathroom, and outdoor surroundings.</p>
  322. </div>
  323. </div>
  325. <div class="row">
  326. <div class="col-md-12 text-center">
  327. <ul id="filters" class="wow fadeInUp" data-wow-delay="0s">
  328. <li><a href="#" data-filter="*" class="selected" style="color:#212121;">Show All</a></li>
  329. <li><a href="#" data-filter=".chambre" style="color:#212121;">Bedrooms</a></li>
  330. <li><a href="#" data-filter=".salon" style="color:#212121;">Living Room</a></li>
  331. <li><a href="#" data-filter=".cuisine" style="color:#212121;">Kitchen</a></li>
  332. <li><a href="#" data-filter=".salledebain" style="color:#212121;">Bathroom</a></li>
  333. <li><a href="#" data-filter=".exterieur" style="color:#212121;">Outdoor surroundings</a></li>
  334. </ul>
  335. </div>
  336. </div>
  338. <div id="gallery" class="row g-3 wow fadeInUp" data-wow-delay=".3s">
  339. <div class="col-md-3 col-sm-6 col-12 item chambre">
  340. <a href="images/chambre1.jpeg" class="image-popup d-block hover">
  341. <div class="relative overflow-hidden">
  342. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">View</div>
  343. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  344. <img src="images/chambre1.jpeg" class="w-100 hover-scale-1-2" alt="Bedroom">
  345. </div>
  346. </a>
  347. </div>
  348. <div class="col-md-3 col-sm-6 col-12 item chambre">
  349. <a href="images/chambre2.jpeg" class="image-popup d-block hover">
  350. <div class="relative overflow-hidden">
  351. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">View</div>
  352. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  353. <img src="images/chambre2.jpeg" class="w-100 hover-scale-1-2" alt="Bedroom 2">
  354. </div>
  355. </a>
  356. </div>
  357. <div class="col-md-3 col-sm-6 col-12 item chambre">
  358. <a href="images/chambre3.jpeg" class="image-popup d-block hover">
  359. <div class="relative overflow-hidden">
  360. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">View</div>
  361. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  362. <img src="images/chambre3.jpeg" class="w-100 hover-scale-1-2" alt="Bedroom 3">
  363. </div>
  364. </a>
  365. </div>
  366. <div class="col-md-3 col-sm-6 col-12 item salon">
  367. <a href="images/salon.jpeg" class="image-popup d-block hover">
  368. <div class="relative overflow-hidden">
  369. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">View</div>
  370. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  371. <img src="images/salon.jpeg" class="w-100 hover-scale-1-2" alt="Living Room">
  372. </div>
  373. </a>
  374. </div>
  375. <div class="col-md-3 col-sm-6 col-12 item salon">
  376. <a href="images/salon2.jpeg" class="image-popup d-block hover">
  377. <div class="relative overflow-hidden">
  378. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">View</div>
  379. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  380. <img src="images/salon2.jpeg" class="w-100 hover-scale-1-2" alt="Living Room 2">
  381. </div>
  382. </a>
  383. </div>
  384. <div class="col-md-3 col-sm-6 col-12 item salon">
  385. <a href="images/salon3.jpeg" class="image-popup d-block hover">
  386. <div class="relative overflow-hidden">
  387. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">View</div>
  388. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  389. <img src="images/salon3.jpeg" class="w-100 hover-scale-1-2" alt="Living Room 3">
  390. </div>
  391. </a>
  392. </div>
  393. <div class="col-md-3 col-sm-6 col-12 item salon">
  394. <a href="images/salon4.jpeg" class="image-popup d-block hover">
  395. <div class="relative overflow-hidden">
  396. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">View</div>
  397. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  398. <img src="images/salon4.jpeg" class="w-100 hover-scale-1-2" alt="Living Room 4">
  399. </div>
  400. </a>
  401. </div>
  402. <div class="col-md-3 col-sm-6 col-12 item salon">
  403. <a href="images/salon5.jpeg" class="image-popup d-block hover">
  404. <div class="relative overflow-hidden">
  405. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">View</div>
  406. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  407. <img src="images/salon5.jpeg" class="w-100 hover-scale-1-2" alt="Living Room 5">
  408. </div>
  409. </a>
  410. </div>
  411. <div class="col-md-3 col-sm-6 col-12 item cuisine">
  412. <a href="images/cuisine.jpeg" class="image-popup d-block hover">
  413. <div class="relative overflow-hidden">
  414. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">View</div>
  415. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  416. <img src="images/cuisine.jpeg" class="w-100 hover-scale-1-2" alt="Kitchen">
  417. </div>
  418. </a>
  419. </div>
  420. <div class="col-md-3 col-sm-6 col-12 item salledebain">
  421. <a href="images/salledebain.jpeg" class="image-popup d-block hover">
  422. <div class="relative overflow-hidden">
  423. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">View</div>
  424. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  425. <img src="images/salledebain.jpeg" class="w-100 hover-scale-1-2" alt="Bathroom">
  426. </div>
  427. </a>
  428. </div>
  429. <div class="col-md-3 col-sm-6 col-12 item salledebain">
  430. <a href="images/salledebain2.jpeg" class="image-popup d-block hover">
  431. <div class="relative overflow-hidden">
  432. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">View</div>
  433. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  434. <img src="images/salledebain2.jpeg" class="w-100 hover-scale-1-2" alt="Bathroom 2">
  435. </div>
  436. </a>
  437. </div>
  438. <div class="col-md-3 col-sm-6 col-12 item exterieur">
  439. <a href="images/exterieur.jpeg" class="image-popup d-block hover">
  440. <div class="relative overflow-hidden">
  441. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">View</div>
  442. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  443. <img src="images/exterieur.jpeg" class="w-100 hover-scale-1-2" alt="Exterior">
  444. </div>
  445. </a>
  446. </div>
  447. </div>
  449. </div>
  450. </section>
  452. {# =================================================== #}
  453. {# ============ BOOKING SECTION (refactored) ========= #}
  454. {# =================================================== #}
  455. <section id="reservation" class="text-light">
  456. <div class="container">
  457. <div class="row g-4 justify-content-center">
  458. <div class="col-lg-6 text-center">
  459. <h2 class="wow fadeInUp" data-wow-delay=".2s">Book your stay</h2>
  460. </div>
  461. </div>
  463. <div class="row g-4 justify-content-center">
  464. <div class="col-lg-8">
  465. <div class="booking-card">
  466. {{ form_start(form) }}
  468. {# ----- CALENDAR ----- #}
  469. <div class="calendar-container" style="height:300px;">
  470. <input type="text" id="date_range_picker">
  471. </div>
  473. {# ----- DATES RECAP (just below the calendar) ----- #}
  474. <div class="row g-3 mt-2 dates-recap">
  475. <div class="col-4 text-center">
  476. <div class="recap-label">Arrival</div>
  477. <div class="recap-value" id="info-start">-</div>
  478. </div>
  479. <div class="col-4 text-center">
  480. <div class="recap-label">Departure</div>
  481. <div class="recap-value" id="info-end">-</div>
  482. </div>
  483. <div class="col-4 text-center">
  484. <div class="recap-label">Nights</div>
  485. <div class="recap-value" id="info-nights">-</div>
  486. </div>
  487. </div>
  489. <hr class="booking-divider">
  491. {# ----- COUNTERS ----- #}
  492. <h4 class="booking-title">Select rooms and guests</h4>
  494. <div class="counter-row">
  495. <div class="counter-label">
  496. <div class="counter-title">Bedrooms</div>
  497. <div class="counter-sub">Set by guest count</div>
  498. </div>
  499. <div class="counter-controls">
  500. <button type="button" class="counter-btn" data-action="dec" data-target="rooms">−</button>
  501. <span class="counter-value" id="cnt-rooms">1</span>
  502. <button type="button" class="counter-btn" data-action="inc" data-target="rooms">+</button>
  503. </div>
  504. </div>
  506. <div class="counter-row">
  507. <div class="counter-label">
  508. <div class="counter-title">Adults</div>
  509. </div>
  510. <div class="counter-controls">
  511. <button type="button" class="counter-btn" data-action="dec" data-target="adults">−</button>
  512. <span class="counter-value" id="cnt-adults">2</span>
  513. <button type="button" class="counter-btn" data-action="inc" data-target="adults">+</button>
  514. </div>
  515. </div>
  517. <div class="counter-row">
  518. <div class="counter-label">
  519. <div class="counter-title">Children</div>
  520. <div class="counter-sub">1 - 17 years</div>
  521. </div>
  522. <div class="counter-controls">
  523. <button type="button" class="counter-btn" data-action="dec" data-target="children">−</button>
  524. <span class="counter-value" id="cnt-children">0</span>
  525. <button type="button" class="counter-btn" data-action="inc" data-target="children">+</button>
  526. </div>
  527. </div>
  529. <div id="capacity-warning" class="capacity-warning" style="display:none;"></div>
  531. {# ----- PRICE RESULT ----- #}
  532. <div id="results" class="mt-3"></div>
  534. <hr class="booking-divider">
  536. {# ----- PERSONAL INFO ----- #}
  537. <div class="row g-3">
  538. <div class="col-md-6">
  539. <label class="booking-label">Last name</label>
  540. {{ form_widget(form.lastname) }}
  541. </div>
  542. <div class="col-md-6">
  543. <label class="booking-label">First name</label>
  544. {{ form_widget(form.name) }}
  545. </div>
  546. <div class="col-md-12">
  547. <label class="booking-label">Email address</label>
  548. {{ form_widget(form.email) }}
  549. </div>
  550. <div class="col-md-12">
  551. <label class="booking-label">Message</label>
  552. {{ form_widget(form.message) }}
  553. </div>
  554. </div>
  556. {# ----- T&C + SUBMIT ----- #}
  557. <div class="text-center mt-4 cgv-block">
  558. <input type="checkbox" id="acceptCGV" /> I accept the <a href="/terms" target="_blank" style="color:#212121; text-decoration:underline;">terms and conditions of sale</a>
  559. </div>
  560. <div class="text-center mt-3">
  561. <button type="submit" name="submit" value="1" class="btn-main" style="color:white;">Send booking request</button>
  562. </div>
  564. {# Hidden fields #}
  565. {{ form_widget(form.start) }}
  566. {{ form_widget(form.end) }}
  567. {{ form_widget(form.rooms) }}
  568. {{ form_widget(form.adults) }}
  569. {{ form_widget(form.children) }}
  570. {{ form_widget(form.persons) }}
  572. {{ form_rest(form) }}
  573. {{ form_end(form) }}
  574. </div>
  575. </div>
  576. </div>
  577. </div>
  578. </section>
  580. <section id="faq" class="text-light">
  581. <div class="container">
  583. <div class="row g-4 justify-content-center">
  584. <div class="col-lg-6 text-center">
  585. <h2 class="wow fadeInUp" data-wow-delay=".2s">FAQ</h2>
  586. </div>
  587. </div>
  589. <div class="row g-4 justify-content-center">
  590. <div class="col-lg-6 text-left" style="color:black !important;">
  592. <h3 style="margin-top:7px;">How can I book the accommodation?</h3>
  593. <div>You can book directly on our website and soon via partner platforms. Secure payment immediately confirms your reservation.</div>
  595. <h3 style="margin-top:7px;">What are the check-in and check-out times?</h3>
  596. <div>
  597. <ul>
  598. <li>Check-in: from 3:00 PM</li>
  599. <li>Check-out: before 11:00 AM</li>
  600. </ul>
  601. </div>
  603. <h3 style="margin-top:7px;">Is the accommodation fully equipped?</h3>
  604. <div> Yes, the apartment is fully furnished and equipped: kitchen, bedding, towels, appliances, Wi-Fi, and more.</div>
  606. <h3 style="margin-top:7px;">Is parking available?</h3>
  607. <div>Yes, private parking is available as an option at €24 per 24 hours or €150 per week (7 nights).</div>
  609. <h3 style="margin-top:7px;">Is the accommodation suitable for children?</h3>
  610. <div>Yes, we offer some baby amenities (baby cot, high chair, child-friendly tableware) upon request.</div>
  612. <h3 style="margin-top:7px;"> Are pets allowed?</h3>
  613. <div> Please contact us before booking if you wish to bring a pet. Only dogs are accepted, and prior approval is required.</div>
  615. <h3 style="margin-top:7px;">Can I cancel or modify my reservation?</h3>
  616. <div>Yes, our cancellation policy is provided at the time of booking:
  617. <ul>
  618. <li>85% refund if canceled more than 1 month before arrival</li>
  619. <li>50% refund if canceled between 1 month and 15 days before arrival</li>
  620. <li>No refund if canceled less than 15 days before arrival</li>
  621. </ul>
  622. </div>
  624. <h3 style="margin-top:7px;">Is the accommodation accessible by public transport?</h3>
  625. <div>Yes, major transport options are nearby. The tram station "Langstross, Grand'rue" is less than 100 meters from the apartment, and Strasbourg train station is a 10-minute walk.</div>
  627. <h3 style="margin-top:7px;">Are there shops or restaurants nearby?</h3>
  628. <div>Yes, you'll find supermarkets, cafés, restaurants, and tourist activities right at the foot of the building.</div>
  630. <h3 style="margin-top:7px;"> What should I do if there's a problem during my stay?</h3>
  631. <div> We are available 24/7 by email for emergencies or questions about the apartment. You can also call us from 9:00 AM to 8:00 PM at +33 7 61 05 82 43, and we are available on-site on the ground floor of the building from Tuesday to Saturday, 10:00 AM to 6:45 PM.
  632. </div>
  634. </div>
  635. </div>
  637. </div>
  638. </section>
  640. {% endblock body %}
  642. {% block footerjs %}
  643. <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  645. {# Pricing matrix + simulation URL exposed to JS #}
  646. <script>
  647. window.PRICING_MATRIX = {{ pricingMatrix|json_encode|raw }};
  648. window.SIMULATION_URL = "{{ path('simulation_pricing') }}";
  649. console.log('📋 Off-peak pricing matrix loaded:', window.PRICING_MATRIX);
  650. console.log('🔗 Simulation URL:', window.SIMULATION_URL);
  651. </script>
  653. <script>
  654. // ===========================================================
  655. // Bedrooms / adults / children logic
  656. //
  657. // Physical layout:
  658. // - Bedroom A: double bed → 2 people
  659. // - Bedroom B: double bed → 2 people
  660. // - Bedroom C: bunk beds → 4 people (adults/children mix)
  661. //
  662. // The number of bedrooms is DETERMINED automatically (no choice):
  663. //
  664. // WITHOUT CHILDREN:
  665. // 1-2 ad → 1 br
  666. // 3-4 ad → 2 br
  667. // 5-8 ad → 3 br
  668. //
  669. // WITH CHILDREN:
  670. // 1-2 ad → 2 br (bedroom A + bunk room)
  671. // 3+ ad → 3 br (A + B + bunk room)
  672. //
  673. // Constraints: adults + children ≤ 8, children ≤ 4, adults ≥ 1
  674. // ===========================================================
  676. function roomsForCombo(adults, children) {
  677. if (children > 0) {
  678. return adults <= 2 ? 2 : 3;
  679. }
  680. if (adults <= 2) return 1;
  681. if (adults <= 4) return 2;
  682. return 3;
  683. }
  685. function canAddAdult(state) {
  686. if (state.adults >= 8) return false;
  687. return (state.adults + 1 + state.children) <= 8;
  688. }
  690. function canAddChild(state) {
  691. if (state.children >= 4) return false;
  692. return (state.adults + state.children + 1) <= 8;
  693. }
  695. const state = { rooms: 1, adults: 2, children: 0 };
  697. function updateDisplay() {
  698. // Bedrooms count is recalculated automatically on each update
  699. state.rooms = roomsForCombo(state.adults, state.children);
  701. $('#cnt-rooms').text(state.rooms);
  702. $('#cnt-adults').text(state.adults);
  703. $('#cnt-children').text(state.children);
  705. $('#reservation_form_rooms').val(state.rooms);
  706. $('#reservation_form_adults').val(state.adults);
  707. $('#reservation_form_children').val(state.children);
  708. $('#reservation_form_persons').val(state.adults + state.children);
  710. $('.counter-btn').each(function() {
  711. const target = $(this).data('target');
  712. const action = $(this).data('action');
  713. let disabled = false;
  715. if (target === 'rooms') {
  716. // Bedrooms = always locked (set by adults/children)
  717. disabled = true;
  718. }
  719. if (target === 'adults') {
  720. if (action === 'dec' && state.adults <= 1) disabled = true;
  721. if (action === 'inc' && !canAddAdult(state)) disabled = true;
  722. }
  723. if (target === 'children') {
  724. if (action === 'dec' && state.children <= 0) disabled = true;
  725. if (action === 'inc' && !canAddChild(state)) disabled = true;
  726. }
  728. $(this).prop('disabled', disabled).toggleClass('disabled', disabled);
  729. });
  731. $('#capacity-warning').hide();
  732. }
  734. $(document).on('click', '.counter-btn', function() {
  735. if ($(this).prop('disabled')) return;
  737. const target = $(this).data('target');
  738. const action = $(this).data('action');
  740. // No action on "rooms" (always disabled)
  742. if (target === 'adults') {
  743. if (action === 'inc' && canAddAdult(state)) state.adults++;
  744. if (action === 'dec' && state.adults > 1) state.adults--;
  745. }
  747. if (target === 'children') {
  748. if (action === 'inc' && canAddChild(state)) state.children++;
  749. if (action === 'dec' && state.children > 0) state.children--;
  750. }
  752. updateDisplay();
  753. updateSimulation();
  754. });
  756. function updateSimulation() {
  757. const start = $("#reservation_form_start").val();
  758. const end = $("#reservation_form_end").val();
  759. const persons = state.adults + state.children;
  761. console.log('🔄 updateSimulation', { start, end, rooms: state.rooms, adults: state.adults, children: state.children });
  763. if (!start || !end || persons < 1) {
  764. $("#results").html('');
  765. return;
  766. }
  768. $("#results").html('<div class="loading" style="color:#212121;">Calculating...</div>');
  770. $.post(
  771. window.SIMULATION_URL,
  772. { start: start, end: end, rooms: state.rooms, adults: state.adults, children: state.children }
  773. )
  774. .done(function(data) {
  775. console.log('✅ Simulation OK');
  776. $("#results").html(data);
  777. })
  778. .fail(function(xhr) {
  779. console.error('❌ Simulation KO', xhr.status, xhr.responseText);
  780. $("#results").html('<div class="error" style="color:#a00;">Error calculating price (' + xhr.status + ')</div>');
  781. });
  782. }
  784. $(document).ready(function() {
  785. updateDisplay();
  787. $('button[type="submit"]').prop('disabled', true);
  788. $('#acceptCGV').change(function() {
  789. $('button[type="submit"]').prop('disabled', !$(this).is(':checked'));
  790. });
  791. });
  792. </script>
  794. <script>
  795. // ===========================================================
  796. // Flatpickr calendar
  797. // ===========================================================
  798. $(document).ready(function() {
  799. let bookedRanges = [];
  801. $.ajax({
  802. url: '{{ env('WEBHOOK_CALENDAR_AVAILABILITY') }}',
  803. method: 'POST',
  804. contentType: 'application/json',
  805. data: ''
  806. })
  807. .done(function(data) {
  808. bookedRanges = data.bookings || [];
  809. initDatePicker();
  810. })
  811. .fail(function() { initDatePicker(); });
  813. function parseLocalDate(dateStr) {
  814. const [year, month, day] = dateStr.split('-').map(Number);
  815. return new Date(year, month - 1, day);
  816. }
  818. const isMobile = window.innerWidth <= 900;
  820. function initDatePicker() {
  821. flatpickr("#date_range_picker", {
  822. inline: true,
  823. mode: "range",
  824. minDate: new Date(new Date().setDate(new Date().getDate() + 1)),
  825. dateFormat: "Y-m-d",
  826. showMonths: isMobile ? 1 : 2,
  828. disable: [
  829. function(date) {
  830. const checkDate = new Date(date);
  831. checkDate.setHours(0, 0, 0, 0);
  832. return bookedRanges.some(range => {
  833. const start = parseLocalDate(range.start_date);
  834. const end = parseLocalDate(range.end_date);
  835. return checkDate >= start && checkDate <= end;
  836. });
  837. }
  838. ],
  840. onChange: function(selectedDates, dateStr, instance) {
  841. if (selectedDates.length === 2) {
  842. const start = selectedDates[0];
  843. const end = selectedDates[1];
  845. if (isRangeAvailable(start, end)) {
  846. $('#reservation_form_start').val(formatDate(start)).trigger('change');
  847. $('#reservation_form_end').val(formatDate(end)).trigger('change');
  848. updateSelectedInfo(start, end);
  849. updateSimulation();
  850. } else {
  851. alert('⚠️ This period contains already booked dates.');
  852. instance.clear();
  853. clearSymfonyFields();
  854. hideSelectedInfo();
  855. $("#results").html('');
  856. }
  857. } else {
  858. clearSymfonyFields();
  859. hideSelectedInfo();
  860. $("#results").html('');
  861. }
  862. },
  864. onDayCreate: function(dObj, dStr, fp, dayElem) {
  865. const date = new Date(dayElem.dateObj);
  866. date.setHours(0, 0, 0, 0);
  867. const isBooked = bookedRanges.some(range => {
  868. const start = parseLocalDate(range.start_date);
  869. const end = parseLocalDate(range.end_date);
  870. return date >= start && date <= end;
  871. });
  872. if (isBooked) {
  873. dayElem.classList.add('booked');
  874. dayElem.title = 'Unavailable date (booked)';
  875. } else if (date >= new Date()) {
  876. dayElem.classList.add('available');
  877. }
  878. }
  879. });
  880. }
  882. function isRangeAvailable(startDate, endDate) {
  883. let currentDate = new Date(startDate);
  884. currentDate.setHours(0, 0, 0, 0);
  885. const endCheck = new Date(endDate);
  886. endCheck.setHours(0, 0, 0, 0);
  887. while (currentDate <= endCheck) {
  888. const isBooked = bookedRanges.some(range => {
  889. const start = parseLocalDate(range.start_date);
  890. const end = parseLocalDate(range.end_date);
  891. return currentDate >= start && currentDate <= end;
  892. });
  893. if (isBooked) return false;
  894. currentDate.setDate(currentDate.getDate() + 1);
  895. }
  896. return true;
  897. }
  899. function updateSelectedInfo(start, end) {
  900. const nights = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
  901. $('#info-start').text(start.toLocaleDateString('en-GB'));
  902. $('#info-end').text(end.toLocaleDateString('en-GB'));
  903. $('#info-nights').text(nights + ' night' + (nights > 1 ? 's' : ''));
  904. }
  906. function hideSelectedInfo() {
  907. $('#info-start').text('-');
  908. $('#info-end').text('-');
  909. $('#info-nights').text('-');
  910. }
  912. function clearSymfonyFields() {
  913. $('#reservation_form_start').val('');
  914. $('#reservation_form_end').val('');
  915. }
  917. function formatDate(date) {
  918. return date.getFullYear() + '-' +
  919. String(date.getMonth() + 1).padStart(2, '0') + '-' +
  920. String(date.getDate()).padStart(2, '0');
  921. }
  922. });
  923. </script>
  924. {% endblock footerjs %}
  926. {% block css %}
  927. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  928. <style>
  929. /* ===========================================================
  930. Booking card (white border, transparent bg, black text)
  931. =========================================================== */
  932. .booking-card {
  933. background: transparent;
  934. border: 2px solid white;
  935. border-radius: 12px;
  936. padding: 32px;
  937. color: #212121;
  938. }
  939. .booking-title {
  940. color: #212121;
  941. font-weight: 700;
  942. margin-bottom: 24px;
  943. }
  944. .booking-divider {
  945. border-top: 1px solid rgba(0,0,0,0.15);
  946. margin: 28px 0;
  947. }
  948. .booking-label {
  949. color: #212121;
  950. font-weight: 500;
  951. margin-bottom: 6px;
  952. display: block;
  953. }
  954. .booking-card input.form-control,
  955. .booking-card textarea.form-control {
  956. background: rgba(255,255,255,0.85) !important;
  957. border: 1px solid rgba(0,0,0,0.2) !important;
  958. color: #212121 !important;
  959. }
  960. .booking-card input.form-control::placeholder,
  961. .booking-card textarea.form-control::placeholder {
  962. color: rgba(0,0,0,0.4) !important;
  963. }
  964. .booking-card input.form-control:focus,
  965. .booking-card textarea.form-control:focus {
  966. border-color: #212121 !important;
  967. box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.08) !important;
  968. }
  970. .cgv-block { color: #212121; }
  971. .cgv-block a { color: #212121; text-decoration: underline; }
  973. .dates-recap { color: #212121; }
  974. .recap-label {
  975. font-size: 13px;
  976. text-transform: uppercase;
  977. letter-spacing: 0.5px;
  978. opacity: 0.7;
  979. }
  980. .recap-value {
  981. font-size: 18px;
  982. font-weight: 600;
  983. margin-top: 4px;
  984. }
  986. .counter-row {
  987. display: flex;
  988. justify-content: space-between;
  989. align-items: center;
  990. padding: 14px 0;
  991. border-bottom: 1px solid rgba(0,0,0,0.1);
  992. }
  993. .counter-row:last-of-type { border-bottom: none; }
  994. .counter-title { font-size: 16px; font-weight: 500; color: #212121; }
  995. .counter-sub { font-size: 12px; color: rgba(0,0,0,0.6); margin-top: 2px; }
  996. .counter-controls { display: flex; align-items: center; gap: 12px; }
  997. .counter-btn {
  998. width: 40px;
  999. height: 40px;
  1000. border-radius: 8px;
  1001. border: 1.5px solid #212121;
  1002. background: transparent;
  1003. color: #212121;
  1004. font-size: 20px;
  1005. font-weight: 600;
  1006. line-height: 1;
  1007. cursor: pointer;
  1008. transition: all 0.15s;
  1009. }
  1010. .counter-btn:hover:not(.disabled) { background: rgba(0,0,0,0.06); }
  1011. .counter-btn.disabled,
  1012. .counter-btn:disabled {
  1013. border-color: rgba(0,0,0,0.2);
  1014. color: rgba(0,0,0,0.25);
  1015. cursor: not-allowed;
  1016. background: transparent;
  1017. }
  1018. .counter-value {
  1019. min-width: 28px;
  1020. text-align: center;
  1021. font-size: 16px;
  1022. font-weight: 500;
  1023. color: #212121;
  1024. }
  1025. .capacity-warning {
  1026. margin-top: 12px;
  1027. padding: 10px 14px;
  1028. background: rgba(255,180,0,0.18);
  1029. border: 1px solid rgba(180,120,0,0.5);
  1030. border-radius: 6px;
  1031. color: #8a4500;
  1032. font-size: 14px;
  1033. }
  1035. .calendar-container {
  1036. margin: 0 0 8px 0;
  1037. width: 100%;
  1038. display: flex;
  1039. justify-content: center;
  1040. }
  1041. #date_range_picker { display: none; }
  1042. .flatpickr-calendar.inline {
  1043. box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  1044. border-radius: 8px;
  1045. }
  1046. .flatpickr-day.booked {
  1047. background-color: #ff4444 !important;
  1048. color: white !important;
  1049. cursor: not-allowed !important;
  1050. position: relative;
  1051. }
  1052. .flatpickr-day.booked::after {
  1053. content: "✕";
  1054. position: absolute;
  1055. top: 50%; left: 50%;
  1056. transform: translate(-50%, -50%);
  1057. font-size: 20px;
  1058. font-weight: bold;
  1059. }
  1060. .flatpickr-day.booked:hover { background-color: #ff0000 !important; }
  1061. .flatpickr-day.available:hover { background-color: #28a745; color: white; }
  1063. @media (max-width: 768px) {
  1064. .booking-card { padding: 20px; }
  1065. .calendar-container { margin: 0 0 8px 0; padding: 0; }
  1066. .flatpickr-calendar.inline { width: 100% !important; max-width: 100% !important; }
  1067. .flatpickr-months { padding: 8px 10px; }
  1068. .flatpickr-days { width: 100% !important; }
  1069. .dayContainer {
  1070. width: 100% !important;
  1071. min-width: 100% !important;
  1072. max-width: 100% !important;
  1073. }
  1074. .flatpickr-day {
  1075. height: 40px !important;
  1076. line-height: 40px !important;
  1077. flex-basis: 14.2857% !important;
  1078. max-width: 14.2857% !important;
  1079. }
  1080. }
  1081. </style>
  1082. {% endblock css %}