XCORNER-7 reviews widget

.eslintcache

@@ -1 +1,41 @@
-[{"/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/collapsible.js":"1","/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/global/cart-preview.js":"2"},{"size":8491,"mtime":1703754551367,"results":"3","hashOfConfig":"4"},{"size":3618,"mtime":1706621011438,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","suppressedMessages":"8","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1gd3vyx",{"filePath":"9","messages":"10","suppressedMessages":"11","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/collapsible.js",[],[],"/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/global/cart-preview.js",["12"],[],{"ruleId":"13","severity":1,"message":"14","line":10,"column":16,"nodeType":"15","messageId":"16","endLine":10,"endColumn":25},"func-names","Unexpected unnamed function.","FunctionDeclaration","unnamed"]
+;[
+    {
+        '/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/collapsible.js': '1',
+        '/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/global/cart-preview.js': '2',
+    },
+    { size: 8491, mtime: 1703754551367, results: '3', hashOfConfig: '4' },
+    { size: 3618, mtime: 1706621011438, results: '5', hashOfConfig: '4' },
+    {
+        filePath: '6',
+        messages: '7',
+        suppressedMessages: '8',
+        errorCount: 0,
+        fatalErrorCount: 0,
+        warningCount: 0,
+        fixableErrorCount: 0,
+        fixableWarningCount: 0,
+    },
+    '1gd3vyx',
+    {
+        filePath: '9',
+        messages: '10',
+        suppressedMessages: '11',
+        errorCount: 0,
+        fatalErrorCount: 0,
+        warningCount: 1,
+        fixableErrorCount: 0,
+        fixableWarningCount: 0,
+        source: null,
+    },
+    '/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/collapsible.js',
+    [],
+    [],
+    '/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/global/cart-preview.js',
+    ['12'],
+    [],
+    { ruleId: '13', severity: 1, message: '14', line: 10, column: 16, nodeType: '15', messageId: '16', endLine: 10, endColumn: 25 },
+    'func-names',
+    'Unexpected unnamed function.',
+    'FunctionDeclaration',
+    'unnamed',
+]

assets/js/theme/common/carousel.js

@@ -1,16 +1,17 @@
-import Swiper, { Navigation } from 'swiper'
+import Swiper, { Navigation, Pagination } from 'swiper'
 import q$ from '../global/selector'
 
 /* eslint-disable import/no-unresolved, import/extensions */
 import 'swiper/scss'
 import 'swiper/scss/navigation'
+import 'swiper/css/pagination'
 /* eslint-enable import/no-unresolved, import/extensions */
 
 export default function startSwiper(context) {
     if (q$('.js-home-swiper') !== null) {
         const homeCarouselParams = {
             direction: 'horizontal',
-            modules: [Navigation],
+            modules: [Navigation, Pagination],
             allowSlideNext: true,
             allowSlidePrev: true,
             slidesPerView: 1,
@@ -23,6 +24,10 @@ export default function startSwiper(context) {
                 nextEl: '.js-swiper-btn-next',
                 prevEl: '.js-swiper-btn-prev',
             },
+            pagination: {
+                el: '.js-swiper-pagination',
+                clickable: true,
+            },
         }
 
         /* eslint-disable no-new */
@@ -46,6 +51,38 @@ export default function startSwiper(context) {
         },
     }
 
+    const carouselParamsOverflow = {
+        direction: 'horizontal',
+        modules: [Navigation, Pagination],
+        allowSlideNext: true,
+        allowSlidePrev: true,
+        slidesPerView: 1,
+        speed: 500,
+        loop: false,
+        spaceBetween: 48,
+        autoplay: {
+            delay: 3000,
+        },
+        breakpoints: {
+            480: {
+                slidesPerView: 2,
+                spaceBetween: 40,
+            },
+            768: {
+                slidesPerView: 4,
+                spaceBetween: 40,
+            },
+        },
+        navigation: {
+            nextEl: '.js-swiper-btn-next',
+            prevEl: '.js-swiper-btn-prev',
+        },
+        pagination: {
+            el: '.js-swiper-pagination',
+            clickable: true,
+        },
+    }
+
     if (q$('.js-featured-swiper') !== null) {
         new Swiper('.js-featured-swiper', carouselParams)
     }
@@ -57,4 +94,8 @@ export default function startSwiper(context) {
     if (q$('.js-new-swiper') !== null) {
         new Swiper('.js-new-swiper', carouselParams)
     }
+
+    if (q$('.js-review-swiper') !== null) {
+        new Swiper('.js-review-swiper', carouselParamsOverflow)
+    }
 }

assets/scss/theme.scss

@@ -10,6 +10,7 @@
 @import 'objects/objects';
 @import 'components/components';
 @import 'utilities/utilities';
+@import 'widgets/widgets';
 
 // temporary styles
 // todo: remove later

assets/scss/widgets/hero-slider.scss

@@ -0,0 +1,158 @@
+$swiper-arrow-right: './../icons/arrow-right.svg';
+$swiper-arrow-left: './../icons/arrow-left.svg';
+
+.c-hero-slider__image {
+    aspect-ratio: 342/424;
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+
+    @include bp(medium) {
+        aspect-ratio: 738/484;
+    }
+
+    @include bp(large) {
+        aspect-ratio: 1280/640;
+    }
+}
+
+.c-hero-slider__information {
+    position: relative;
+    background-color: $color-white;
+    display: flex;
+    flex-direction: column;
+    gap: rem-calc(12px);
+    padding: rem-calc(24px);
+    border-radius: rem-calc(4px);
+    align-items: center;
+    max-width: rem-calc(852px);
+    margin: rem-calc(-96px) rem-calc(24px) 0;
+
+    @include bp(medium) {
+        margin: rem-calc(-96px) rem-calc(127px) 0;
+        padding: rem-calc(48px);
+        gap: rem-calc(24px);
+    }
+
+    @include bp(large) {
+        margin: rem-calc(-96px) auto 0;
+    }
+}
+
+.c-hero-slider__title {
+    color: $color-black;
+    text-align: center;
+    font-family: $font-semi-bold;
+    font-size: rem-calc(32px);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.25;
+    margin: 0;
+
+    @include bp(medium) {
+        font-size: rem-calc(42px);
+        line-height: 1.33;
+    }
+}
+
+.c-hero-slider__subtext {
+    color: $color-neutrals-500;
+    text-align: center;
+    font-family: $font-regular;
+    font-size: rem-calc(18px);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.33;
+    margin: 0;
+}
+
+.c-hero-slider__price-container {
+    color: $color-neutrals-300;
+    text-align: center;
+    font-family: $font-regular;
+    font-size: rem-calc(24px);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.33;
+    margin: 0;
+}
+
+.c-hero-slider__price {
+    color: $color-black;
+    text-align: center;
+    font-family: $font-semi-bold;
+    font-size: rem-calc(32px);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.25;
+}
+
+.c-hero-slider__buttons {
+    display: flex;
+    flex-direction: column;
+    gap: rem-calc(12px);
+
+    @include bp(medium) {
+        flex-direction: row;
+    }
+}
+
+.c-hero-slider__navigation {
+    position: absolute;
+    bottom: 60%;
+    z-index: $z-index-mid-low;
+    left: 0;
+    margin-left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: rem-calc(24px);
+
+    @include bp(small) {
+        bottom: 50%;
+    }
+
+    @include bp(large) {
+        bottom: rem-calc(400px);
+    }
+
+    .c-swiper__btn-next,
+    .c-swiper__btn-prev {
+        width: rem-calc(24px);
+        height: rem-calc(24px);
+        border: 0 !important;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+    }
+
+    .c-swiper__btn-next {
+        background-image: url($swiper-arrow-right);
+    }
+
+    .c-swiper__btn-prev {
+        background-image: url($swiper-arrow-left);
+    }
+
+    .c-swiper__pagination {
+        border: 0 !important;
+        padding: 0 !important;
+        display: flex;
+        justify-content: space-between;
+        gap: rem-calc(24px);
+
+        .swiper-pagination-bullet {
+            background-color: transparent;
+            opacity: 1;
+            border: 2px solid $color-white;
+            width: rem-calc(12px);
+            height: rem-calc(12px);
+            margin: 0 !important;
+
+            &-active {
+                background-color: $color-white;
+            }
+        }
+    }
+}

assets/scss/widgets/reviews.scss

@@ -0,0 +1,91 @@
+$swiper-arrow-left-purple: './../icons/arrow-left-purple.svg';
+$swiper-arrow-right-purple: './../icons/arrow-right-purple.svg';
+
+.c-reviews-carousel {
+    overflow: visible;
+
+    .swiper-slide {
+        max-width: 80%;
+
+        @include bp(small) {
+            max-width: 100%;
+        }
+    }
+}
+
+.c-review-carousel__card {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: rem-calc(24px);
+    padding: rem-calc(24px);
+    box-shadow: 0 rem-calc(12px) rem-calc(48px) 0 rgba(39, 39, 39, 0.04);
+    background-color: $color-white;
+    border-radius: rem-calc(4px);
+}
+
+.c-review-carousel__summary {
+    color: $color-black;
+    font-family: $font-regular;
+    font-size: rem-calc(16px);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5;
+}
+
+.c-review-carousel__name {
+    color: $color-black;
+    font-family: $font-semi-bold;
+    font-size: rem-calc(16px);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.4;
+}
+
+.c-review-carousel__slide-navigation {
+    margin: rem-calc(48px) auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: rem-calc(24px);
+    max-width: fit-content;
+
+    .c-swiper__btn-next,
+    .c-swiper__btn-prev {
+        width: rem-calc(24px);
+        height: rem-calc(24px);
+        border: 0 !important;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+    }
+
+    .c-swiper__btn-next {
+        background-image: url($swiper-arrow-right-purple);
+    }
+
+    .c-swiper__btn-prev {
+        background-image: url($swiper-arrow-left-purple);
+    }
+
+    .c-swiper__pagination {
+        border: 0 !important;
+        padding: 0 !important;
+        display: flex;
+        justify-content: space-between;
+        gap: rem-calc(24px);
+
+        .swiper-pagination-bullet {
+            background-color: transparent;
+            opacity: 1;
+            border: 2px solid $color-primary-300;
+            width: rem-calc(12px);
+            height: rem-calc(12px);
+            margin: 0 !important;
+
+            &-active {
+                background-color: $color-primary-300;
+            }
+        }
+    }
+}