diff --git a/assets/images/adults-courses/diploma-en.jpg b/assets/images/adults-courses/diploma-en.jpg new file mode 100644 index 0000000..24a4dc6 Binary files /dev/null and b/assets/images/adults-courses/diploma-en.jpg differ diff --git a/assets/images/adults-courses/diploma-ru.jpg b/assets/images/adults-courses/diploma-ru.jpg new file mode 100644 index 0000000..fcc1e03 Binary files /dev/null and b/assets/images/adults-courses/diploma-ru.jpg differ diff --git a/assets/images/adults-courses/diploma-uk.jpg b/assets/images/adults-courses/diploma-uk.jpg new file mode 100644 index 0000000..6261507 Binary files /dev/null and b/assets/images/adults-courses/diploma-uk.jpg differ diff --git a/assets/images/adults-courses/discord-ua.jpg b/assets/images/adults-courses/discord-ua.jpg new file mode 100644 index 0000000..06f123d Binary files /dev/null and b/assets/images/adults-courses/discord-ua.jpg differ diff --git a/assets/images/adults-courses/intro.jpg b/assets/images/adults-courses/intro.jpg new file mode 100644 index 0000000..5e51eb1 Binary files /dev/null and b/assets/images/adults-courses/intro.jpg differ diff --git a/assets/images/adults-courses/portal-ua.jpg b/assets/images/adults-courses/portal-ua.jpg new file mode 100644 index 0000000..c75ff47 Binary files /dev/null and b/assets/images/adults-courses/portal-ua.jpg differ diff --git a/assets/images/icons/002-down-arrow.svg b/assets/images/icons/002-down-arrow.svg new file mode 100644 index 0000000..e593395 --- /dev/null +++ b/assets/images/icons/002-down-arrow.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/icons/arrow.svg b/assets/images/icons/arrow.svg new file mode 100644 index 0000000..6498e7c --- /dev/null +++ b/assets/images/icons/arrow.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + diff --git a/assets/images/icons/info.svg b/assets/images/icons/info.svg new file mode 100644 index 0000000..83157b9 --- /dev/null +++ b/assets/images/icons/info.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/adults-courses-page/_diploma.scss b/src/pages/adults-courses-page/_diploma.scss new file mode 100644 index 0000000..a109c3b --- /dev/null +++ b/src/pages/adults-courses-page/_diploma.scss @@ -0,0 +1,11 @@ +.diploma { + p { + max-width: 550px; + font-size: 20px; + margin: 1em auto; + text-align: center; + } + img { + width: 100%; + } +} diff --git a/src/pages/adults-courses-page/_faq.scss b/src/pages/adults-courses-page/_faq.scss index 6b20798..1cd7204 100644 --- a/src/pages/adults-courses-page/_faq.scss +++ b/src/pages/adults-courses-page/_faq.scss @@ -23,7 +23,7 @@ } } - & > p { + & .container > p { max-width: 550px; margin: 36px auto; } diff --git a/src/pages/adults-courses-page/_feedbacks.scss b/src/pages/adults-courses-page/_feedbacks.scss new file mode 100644 index 0000000..0c601c0 --- /dev/null +++ b/src/pages/adults-courses-page/_feedbacks.scss @@ -0,0 +1,160 @@ +@import '../../styles/constants'; +@import '../../styles/mixins'; + +.feedbacks { + padding: 32px 0; + background-color: $color-light-gray-3; + + &-title { + text-align: center; + } + + &-container { + position: relative; + } + + &-slider-container { + width: 100%; + padding: 32px 0; + box-sizing: border-box; + margin: 0 auto; + position: relative; + } + + &-slider { + width: calc(100% - 128px); + overflow: hidden; + + @include media-sm { + width: 100%; + } + + &-next, + &-previous { + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + background-color: $color-gray-2; + color: white; + border-radius: 100%; + cursor: pointer; + opacity: 0.7; + transition: all 0.25s ease-in-out; + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 1; + + @include media-sm { + display: none; + } + + &:hover { + opacity: 1; + } + + &.swiper-button-disabled, + &.swiper-button-disabled:hover { + opacity: 0.3; + cursor: initial; + } + } + + &-previous { + left: 0; + } + + &-next { + right: 0; + } + } + + .swiper-pagination { + display: flex; + align-items: center; + justify-content: center; + margin-top: 16px; + + &-bullet { + border-radius: 50px; + display: inline-block; + font-size: 10px; + height: 13px; + margin-left: 2px; + margin-right: 2px; + width: 13px; + background-color: $color-gray; + cursor: pointer; + + &-active { + background-color: $color-gray-2; + } + } + } + + &-slide { + user-select: none; + cursor: pointer; + box-shadow: $box-shadow; + background-color: white; + padding: 16px; + box-sizing: border-box; + + &-header { + display: flex; + align-items: center; + } + + &-image { + display: block; + width: 60px; + height: 60px; + border-radius: 100%; + object-fit: cover; + } + + &-name-link, + &-link { + color: $color-font; + + &:hover { + color: $color-main-green; + } + } + + &-link { + text-align: center; + } + + &-name-link { + margin: 0 16px; + padding: 16px 0; + } + } + + &-buttons { + padding: 32px; + display: flex; + align-items: center; + justify-content: center; + gap: 32px; + + &-leave-your-feedback { + padding: 8px 16px; + } + + &-watch-all-responses { + text-align: center; + text-decoration: underline; + color: $color-font; + text-decoration-color: $color-main-green; + text-underline-position: under; + + &:hover { + color: $color-main-green; + } + } + } +} diff --git a/src/pages/adults-courses-page/_mentors.scss b/src/pages/adults-courses-page/_mentors.scss new file mode 100644 index 0000000..15ea42c --- /dev/null +++ b/src/pages/adults-courses-page/_mentors.scss @@ -0,0 +1,54 @@ +@import '../../styles/constants'; + +.mentors { + p { + font-size: 20px; + margin-left: auto; + margin-right: auto; + max-width: 550px; + text-align: center; + } + + &-list { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 40px; + padding: 20px; + } + + .mentor { + &-picture, + &-picture-fun { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: auto; + aspect-ratio: 2/3; + transition: opacity $hover-transition-speed; + width: 100%; + } + &-picture { + &-wrapper { + position: relative; + } + + left: 0; + position: absolute; + top: 0; + + &:hover { + opacity: 0; + transition: opacity $hover-transition-speed; + } + } + + &-text { + padding: 10px; + } + + &-occupation { + font-size: 14px; + margin-top: 8px; + } + } +} diff --git a/src/pages/adults-courses-page/_student-flow.scss b/src/pages/adults-courses-page/_student-flow.scss new file mode 100644 index 0000000..2fd1ab3 --- /dev/null +++ b/src/pages/adults-courses-page/_student-flow.scss @@ -0,0 +1,33 @@ +@import '../../styles/constants'; + +.student-flow { + background-color: $color-main-green; + color: $color-white; + + img { + transform: rotateZ(-90deg); + } + + &-items { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 36px; + + .arrow-right { + width: 64px; + } + + h3 { + font-size: 24px; + margin: 0; + } + + p { + font-size: 18px; + color: $color-light-gray; + white-space: pre-wrap; + margin: 0; + } + } +} diff --git a/src/pages/adults-courses-page/index.hbs b/src/pages/adults-courses-page/index.hbs index 0dc02d0..cacc23e 100644 --- a/src/pages/adults-courses-page/index.hbs +++ b/src/pages/adults-courses-page/index.hbs @@ -7,6 +7,147 @@ {{> ../../header/header pageRoute='courses/adults'}}
+ +
+
+

{{ htmlWebpackPlugin.options.content.translations.adults.student_flow.title }}

+
+
+

+ {{htmlWebpackPlugin.options.content.translations.adults.student_flow.items.[0].title}} +

+

+ {{htmlWebpackPlugin.options.content.translations.adults.student_flow.items.[0].description}} +

+
+
+ +
+
+

+ {{htmlWebpackPlugin.options.content.translations.adults.student_flow.items.[1].title}} +

+

+ {{htmlWebpackPlugin.options.content.translations.adults.student_flow.items.[1].description}} +

+
+
+ +
+
+

+ {{htmlWebpackPlugin.options.content.translations.adults.student_flow.items.[2].title}} +

+

+ {{htmlWebpackPlugin.options.content.translations.adults.student_flow.items.[2].description}} +

+
+
+
+
+ +
+ +
+

{{ htmlWebpackPlugin.options.content.translations.adults.mentors.title }}

+

+ {{ htmlWebpackPlugin.options.content.translations.adults.mentors.text }} +

+
+ {{#each htmlWebpackPlugin.options.content.mentors}} +
+
+
+
+
+
+
+ + {{getProperty this.name ../htmlWebpackPlugin.options.content.lang}} + {{getProperty this.surname ../htmlWebpackPlugin.options.content.lang}} + +
+
{{ this.occupation }}
+
+
+ {{/each}} +
+
+
+ +
+

+ {{ htmlWebpackPlugin.options.content.translations.adults.feedbacks.title }} +

+
+
+
+
+
+
+ + + \{{ getName(feedback) }} + +
+

+ \{{ feedback.message }} +

+

+ \{{ + shouldShowFullText(index) ? feedback.message : getShortText(feedback.message) + }} +
+ {{ htmlWebpackPlugin.options.content.translations.read_more }} +

+
+
+
+ + +
+
+
+ {{ htmlWebpackPlugin.options.content.translations.adults.feedbacks.see_all }} +
+
+
+ +
+
+

{{ htmlWebpackPlugin.options.content.translations.adults.diploma.title }}

+

{{ htmlWebpackPlugin.options.content.translations.adults.diploma.p }}

+
+ Школа програмування Ш++ диплом +
+
+

{{ htmlWebpackPlugin.options.content.translations.adults.faq.title }}

diff --git a/src/pages/adults-courses-page/index.js b/src/pages/adults-courses-page/index.js index 5787368..6f24e1c 100644 --- a/src/pages/adults-courses-page/index.js +++ b/src/pages/adults-courses-page/index.js @@ -1,8 +1,84 @@ -import './index.scss'; +('use strict'); +import { displayHiddenComponentMixin } from '../../mixins'; +import { createApp } from 'vue/dist/vue.esm-bundler.js'; import Accordion from '../../template-partials/accordion'; +import Swiper, { Pagination, Navigation } from 'swiper'; +import './index.scss'; +import 'swiper/css'; -function main() { +function init() { new Accordion('.faq ul'); + setupFeedbacks(); } -main(); +init(); + +function setupFeedbacks() { + createApp({ + mixins: [displayHiddenComponentMixin], + mounted() { + // todo: use config to get neede url + fetch('https://back.programming.org.ua/api/feedback', { + headers: { + accept: 'application/json, text/plain, */*', + 'content-type': 'application/x-www-form-urlencoded', + }, + body: `count=5&onlyStudents=true&feedbackType=random&lang=${ + document.documentElement.lang ?? 'en' + }`, + method: 'POST', + mode: 'cors', + credentials: 'omit', + }) + .then((res) => res.json()) + .then((data) => { + this.feedbacks = data.data.feedbacks; + setTimeout(() => { + this.slider = new Swiper(this.$refs.sliderRef, { + spaceBetween: 30, + autoHeight: true, + loop: true, + breakpoints: { + 768: { slidesPerView: 1 }, + 1200: { slidesPerView: 3 }, + }, + pagination: { + el: '.swiper-pagination', + clickable: true, + }, + navigation: { + nextEl: '.feedbacks-slider-next', + prevEl: '.feedbacks-slider-previous', + }, + modules: [Pagination, Navigation], + }); + }, 1000); + }); + }, + data() { + return { + feedbacks: [], + smallTextLength: 300, + isFullTextMap: {}, + }; + }, + methods: { + shouldShowFullText(index) { + return this.isFullTextMap[index]; + }, + getName: (feedback) => [feedback.name, feedback.surname].join(' '), + getImage: (feedback) => + `https://back.programming.org.ua/storage/img/feedbacks/${feedback.image}`, + getShortText(text) { + return `${text.slice(0, this.smallTextLength)}...`; + }, + more(index) { + this.isFullTextMap[index] = true; + setTimeout(() => this.slider?.updateAutoHeight(), 0); + }, + isLongText(text) { + return text && text.length > this.smallTextLength; + }, + }, + }).mount('.feedbacks'); +} diff --git a/src/pages/adults-courses-page/index.scss b/src/pages/adults-courses-page/index.scss index af711d1..bc14af6 100644 --- a/src/pages/adults-courses-page/index.scss +++ b/src/pages/adults-courses-page/index.scss @@ -1,7 +1,16 @@ +@import 'student-flow'; +@import 'mentors'; +@import 'feedbacks'; +@import 'diploma'; @import 'faq'; .adults { h2 { text-align: center; } + + section { + padding: 50px 0; + position: relative; + } } diff --git a/src/pages/index-page/index.js b/src/pages/index-page/index.js index 42a5e96..2fcb304 100644 --- a/src/pages/index-page/index.js +++ b/src/pages/index-page/index.js @@ -69,6 +69,7 @@ function setupFeedbacks() { this.slider = new Swiper(this.$refs.sliderRef, { spaceBetween: 30, autoHeight: true, + loop: true, breakpoints: { 768: { slidesPerView: 1 }, 1200: { slidesPerView: 3 }, diff --git a/webpack.config.js b/webpack.config.js index e069e11..20207ea 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -453,6 +453,7 @@ module.exports = async (_, { mode = 'development' }) => ({ filename: `${filenamePrefix}courses/adults/index.html`, content: { ...getCommonContent('/courses/adults/'), + mentors: teamMembersConfig.filter((m) => m.roles.includes('adults-mentor')), }, }), new HtmlWebpackPlugin({