mirror of
https://github.com/kevin-DL/complete-node-bootcamp.git
synced 2026-01-17 13:34:56 +00:00
91 lines
3.3 KiB
Plaintext
91 lines
3.3 KiB
Plaintext
extends base
|
|
include _reviewCard
|
|
|
|
block append head
|
|
script(src='https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js')
|
|
link(href='https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet')
|
|
|
|
mixin overviewBox(label, text, icon)
|
|
.overview-box__detail
|
|
svg.overview-box__icon
|
|
use(xlink:href=`/img/icons.svg#icon-${icon}`)
|
|
span.overview-box__label= label
|
|
span.overview-box__text= text
|
|
|
|
block content
|
|
section.section-header
|
|
.header__hero
|
|
.header__hero-overlay
|
|
img.header__hero-img(src=`/img/tours/${tour.imageCover}`, alt=`${tour.name}`)
|
|
|
|
.heading-box
|
|
h1.heading-primary
|
|
span= `${tour.name} tour`
|
|
.heading-box__group
|
|
.heading-box__detail
|
|
svg.heading-box__icon
|
|
use(xlink:href='/img/icons.svg#icon-clock')
|
|
span.heading-box__text= `${tour.duration} days`
|
|
.heading-box__detail
|
|
svg.heading-box__icon
|
|
use(xlink:href='/img/icons.svg#icon-map-pin')
|
|
span.heading-box__text= tour.startLocation.description
|
|
|
|
section.section-description
|
|
.overview-box
|
|
div
|
|
.overview-box__group
|
|
h2.heading-secondary.ma-bt-lg Quick facts
|
|
|
|
- const date = tour.startDates[0].toLocaleString('en-us', {month: 'long', year: 'numeric'})
|
|
+overviewBox('Next date', date, 'calendar')
|
|
+overviewBox('Difficulty', tour.difficulty, 'trending-up')
|
|
+overviewBox('Participants', `${tour.maxGroupSize} people`, 'user')
|
|
+overviewBox('Rating', `${tour.ratingsAverage} / 5`, 'star')
|
|
|
|
.overview-box__group
|
|
h2.heading-secondary.ma-bt-lg Your tour guides
|
|
|
|
each guide in tour.guides
|
|
.overview-box__detail
|
|
img.overview-box__img(src=`/img/users/${guide.photo}`, alt=`${guide.name}`)
|
|
|
|
- if (guide.role === 'lead-guide')
|
|
span.overview-box__label Lead guide
|
|
- if (guide.role === 'guide')
|
|
span.overview-box__label Tour guide
|
|
span.overview-box__text= guide.name
|
|
|
|
.description-box
|
|
h2.heading-secondary.ma-bt-lg= `About ${tour.name} tour`
|
|
- const parapraphs = tour.description.split('\n');
|
|
each p in parapraphs
|
|
p.description__text= p
|
|
|
|
section.section-pictures
|
|
each img, i in tour.images
|
|
.picture-box
|
|
img.picture-box__img(src=`/img/tours/${img}`, alt=`The Park Camper Tour ${i + 1}`, class=`picture-box__img--${i + 1}`)
|
|
|
|
section.section-map
|
|
#map(data-locations=`${JSON.stringify(tour.locations)}`)
|
|
|
|
section.section-reviews
|
|
.reviews
|
|
each review in tour.reviews
|
|
+reviewCard(review)
|
|
|
|
section.section-cta
|
|
.cta
|
|
.cta__img.cta__img--logo
|
|
img(src='/img/logo-white.png', alt='Natours logo')
|
|
img.cta__img.cta__img--1(src=`/img/tours/${tour.images[1]}`, alt='Tour picture')
|
|
img.cta__img.cta__img--2(src=`/img/tours/${tour.images[2]}`, alt='Tour picture')
|
|
.cta__content
|
|
h2.heading-secondary What are you waiting for?
|
|
p.cta__text= `${tour.duration} days. 1 adventure. Infinite memories. Make it yours today!`
|
|
|
|
if user
|
|
button.btn.btn--green.span-all-rows#book-tour(data-tour-id=`${tour.id}`) Book tour now!
|
|
else
|
|
a.btn.btn--green.span-all-rows(href='/login') Log in to book tour |