Add footer

package.json

@@ -1,7 +1,7 @@
 {
   "name": "beauty.store",
   "private": true,
-  "version": "0.237.0",
+  "version": "0.249.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {

src/components/sections/ProductDescription/product-description.scss

@@ -52,10 +52,18 @@
     letter-spacing: 0.256px;
     white-space: nowrap;
 
+    &:visited {
+      color: var(--color-neutral-4);
+    }
+
     &--active {
       color: var(--color-neutral-0);
       background-color: var(--color-secondary-4);
       border-radius: var(--border-radius-regular);
+
+      &:visited {
+        color: var(--color-neutral-0);
+      }
     }
   }
 }

src/components/sections/ProductDetails/product-details.scss

@@ -49,6 +49,11 @@
   background: #ffffff;
   border-radius: 30px;
 
+  [data-store-quantity-selector] {
+    width: 7.18rem;
+    height: var(--space-6);
+  }
+
   @include media(">=notebook") {
     max-width: 501px;
   }
@@ -64,6 +69,11 @@
   position: relative;
   max-width: 680px;
   margin: 0 auto;
+  overflow: hidden;
+
+  @include media("<=notebook") {
+    max-width: 244px;
+  }
 
   [data-gatsby-image-wrapper] {
     @include media(">=tablet") {
@@ -80,7 +90,10 @@
 
 .product-details__content {
   margin-top: var(--space-3);
-  .product-details__description .title-subsection { margin-bottom: var(--space-3); }
+
+  .product-details__description .title-subsection {
+    margin-bottom: var(--space-3);
+  }
 }
 
 .product-details__title {

src/components/sections/ScannerPresenter/ScannerPresenter.tsx

@@ -1,33 +1,57 @@
 import React from 'react'
 import CtaButton from 'src/components/ui/CtaButton'
+import { Banner, BannerImage } from '@faststore/ui'
 import { useStepper } from 'src/contexts/StepperContext'
+import SkeletonElement from 'src/components/skeletons/SkeletonElement'
+import { useWidescreen } from 'src/sdk/ui/useWidescreen'
 
 interface Props {
   title: string
   message: string
-  img: string
+  imgDesktop: string
+  imgMobile: string
   buttonText: string
 }
 
-function ScannerPresenter({ title, message, img, buttonText }: Props) {
+function ScannerPresenter({
+  title,
+  message,
+  imgDesktop,
+  imgMobile,
+  buttonText,
+}: Props) {
   const { goToNextStep } = useStepper()
+  const { isWidescreen } = useWidescreen('(max-width: 960px)')
 
   return (
     <section className="scanner">
-      <div className="scanner__img-wrapper">
-        <img
-          className="scanner__img"
-          width={1440}
-          height={1228}
-          src={img}
-          alt="Scanner"
-        />
-      </div>
-      <div className="scanner-cta">
-        <h1 className="scanner-cta__title">{title}</h1>
-        <p className="scanner-cta__msg">{message}</p>
-        <CtaButton text={buttonText} handleClick={goToNextStep} />
-      </div>
+      <SkeletonElement type="full" loading={isWidescreen === null} shimmer>
+        <div className="scanner__img-wrapper">
+          <Banner>
+            <BannerImage>
+              <img
+                loading="eager"
+                src={isWidescreen ? imgMobile : imgDesktop}
+                alt="Scanner"
+                width={isWidescreen ? 375 : 1440}
+                height={isWidescreen ? 745 : 840}
+              />
+            </BannerImage>
+          </Banner>
+          {/* <img
+            className="scanner__img"
+            width={1440}
+            height={1228}
+            src={img}
+            alt="Scanner"
+          /> */}
+        </div>
+        <div className="scanner-cta">
+          <h1 className="scanner-cta__title">{title}</h1>
+          <p className="scanner-cta__msg">{message}</p>
+          <CtaButton text={buttonText} handleClick={goToNextStep} />
+        </div>
+      </SkeletonElement>
     </section>
   )
 }

src/components/sections/ScannerPresenter/scanner-presenter.scss

@@ -4,13 +4,19 @@
   position: relative;
   width: 100%;
 
-  &__img {
-    width: 100%;
+  [data-store-banner] {
     height: 100%;
-    object-fit: cover;
+    padding: 0;
 
-    &-wrapper {
+    [data-banner-image] {
       height: 100%;
+
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
     }
   }
 
@@ -35,16 +41,43 @@
     > div {
       height: 100%;
     }
+  }
+
+  [data-store-skeleton-element] {
+    width: 100%;
+    height: 597px;
+
+    @media only screen and (min-width: 1400px) {
+      height: 840px;
+    }
+
+    @media only screen and (min-width: 1600px) {
+      height: 930px;
+    }
+
+    @media only screen and (min-width: 1800px) {
+      height: 1050px;
+    }
 
-    [data-store-skeleton-element] {
+    @media only screen and (min-width: 2000px) {
+      height: 1200px;
+    }
+
+    @media only screen and (min-width: 2400px) {
+      height: 1450px;
+    }
+
+    @media only screen and (max-width: 960px) {
+      height: 1300px;
+    }
+
+    @media only screen and (max-width: 380px) {
+      height: 745px;
+    }
+
+    [data-skeleton-element-content] {
       width: 100%;
       height: 100%;
-      padding: 8px;
-
-      [data-skeleton-element-content] {
-        width: 100%;
-        height: 100%;
-      }
     }
   }
 }

src/components/ui/ImageGallery/image-gallery.scss

@@ -1,15 +1,10 @@
-// @import "swiper/scss";
-// @import "swiper/scss/pagination";
-// @import "swiper/scss/navigation";
-// @import "swiper/scss/free-mode";
-// @import "swiper/scss/thumbs";
-
 .swiper-image-gallery {
   max-height: 680px;
 
   &.swiper-vertical {
     img {
-      max-width: 680px;
+      max-width: 100%;
+      object-fit: cover;
     }
   }
 

src/components/ui/QuantitySelector/quantity-selector.scss

@@ -64,9 +64,7 @@
 
   [data-quantity-selector-button] {
     width: 100%;
-    min-width: 48px;
     height: 100%;
-    min-height: 48px;
     padding: var(--space-0);
     background-color: transparent;
     border: 0;

src/components/ui/SkuSelector/SkuSelector.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { RadioGroup, RadioOption } from '@faststore/ui'
 import React, { useState } from 'react'
-import { Image } from 'src/components/ui/Image'
 import type { ChangeEventHandler } from 'react'
 import Text from 'src/components/common/Text'
 
@@ -125,8 +124,8 @@ function SkuSelector({
                     </span>
                   )}
                   {variant === 'image' && 'src' in option && (
-                    <Image
-                      src={option.src}
+                    <img
+                      src={option.src.replace('http:', 'https:')}
                       alt={option.alt}
                       width={49}
                       height={49}

src/components/ui/SkuSelector/sku-selector.scss

@@ -1,8 +1,9 @@
 @import "src/styles/scaffold";
 
 @mixin sku-selector-focus-ring {
-  @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
-    @supports (-webkit-appearance:none) {
+  @media not all and (min-resolution: 0.001dpcm) {
+    // Target only Safari browsers
+    @supports (-webkit-appearance: none) {
       // Use `focus` instead of `focus-visible` due to Safari's lack of support
       &:focus + span {
         border-color: var(--color-border-input-selected);
@@ -61,12 +62,15 @@
       border: 1px solid #e5e5e5;
       border-radius: 100%;
     }
+
+    input {
+      cursor: pointer;
+    }
   }
 
   [data-store-radio-option] {
     position: relative;
     display: block;
-    width: var(--space-7);
 
     span {
       margin-top: var(--space-0);
@@ -117,22 +121,32 @@
   }
 
   &[data-variant="label"] input {
-    &:hover:not(:disabled) + span { background-color: var(--bg-secondary-light); }
-    &:checked + span { background-color: var(--bg-secondary-light); }
+    &:hover:not(:disabled) + span {
+      background-color: var(--bg-secondary-light);
+    }
+
+    &:checked + span {
+      background-color: var(--bg-secondary-light);
+    }
   }
 
   &[data-variant="color"] {
     [data-sku-selector-color] {
       width: var(--space-6);
       height: var(--space-6);
       border-radius: var(--border-radius-small);
-      transition: transform .2s ease;
+      transition: transform 0.2s ease;
       transform-origin: center center;
     }
 
     input {
-      &:hover:not(:disabled):not(:checked) + span [data-sku-selector-color] { transform: scale(.95); }
-      &:checked + span [data-sku-selector-color] { transform: scale(.85); }
+      &:hover:not(:disabled):not(:checked) + span [data-sku-selector-color] {
+        transform: scale(0.95);
+      }
+
+      &:checked + span [data-sku-selector-color] {
+        transform: scale(0.85);
+      }
     }
   }
 }

src/pages/scanner.tsx

@@ -11,7 +11,6 @@ import ScannerResults from 'src/components/sections/ScannerResults'
 import { StepperProvider } from 'src/contexts/StepperContext'
 import { ScannerProvider } from 'src/contexts/ScannerContext'
 import Stepper from 'src/components/common/Stepper'
-import { useWidescreen } from 'src/sdk/ui/useWidescreen'
 import { Helmet } from 'react-helmet'
 
 export type Props = PageProps<ScannerPageQuery>
@@ -22,12 +21,6 @@ function Page(props: Props) {
   } = props
 
   const { locale } = useSession()
-  const { isWidescreen } = useWidescreen('(min-width: 724px)')
-  let imgSrc = '/scanner-presentation.png'
-
-  if (!isWidescreen) {
-    imgSrc = '/scanner-presentation-mobile.png'
-  }
 
   const title = site?.siteMetadata?.title ?? ''
   const siteUrl = `https://${host}${pathname}`
@@ -273,7 +266,8 @@ function Page(props: Props) {
             <ScannerPresenter
               title="Vamos descobrir seu perfil de beleza?"
               message="Agora, realizaremos algumas perguntas sobre a sua pele para entendermos as características individuais da sua pele."
-              img={imgSrc}
+              imgDesktop="/scanner-presentation.png"
+              imgMobile="/scanner-presentation-mobile.png"
               buttonText="Começar"
             />
 
@@ -325,7 +319,8 @@ function Page(props: Props) {
             <ScannerPresenter
               title="Seu perfil de pele está pronto"
               message="Através do nosso teste conseguimos definir a melhor rotina para o seu perfil de beleza. Aproveite os descontos e dicas."
-              img={imgSrc}
+              imgDesktop="/scanner-presentation.png"
+              imgMobile="/scanner-presentation-mobile.png"
               buttonText="Acessar"
             />
             <ScannerResults />

src/styles/global/components.scss

@@ -19,9 +19,6 @@
 // Search
 @import "src/components/search/Filter/filter.scss";
 @import "src/components/search/Filter/FilterButton/filter-button.scss";
-@import "src/components/search/History/search-history.scss";
-@import "src/components/search/SuggestionProductCard/suggestion-product-card.scss";
-@import "src/components/search/Suggestions/suggestions.scss";
 
 // Sections
 @import "src/components/sections/BannerImg/banner-img.scss";

src/styles/pages/category.scss

@@ -9,9 +9,7 @@
 @import "src/components/sections/SkinCareInfocard/skincare-infocard.scss";
 @import "src/components/ui/InfocardIcon/infocard-icon.scss";
 @import "src/components/sections/BannerImg/banner-img.scss";
-@import "src/components/search/History/search-history.scss";
 @import "src/components/search/SuggestionProductCard/suggestion-product-card.scss";
-@import "src/components/search/Suggestions/suggestions.scss";
 @import "src/components/ui/Checkbox/checkbox.scss";
 @import "src/components/ui/EmptyState/empty-state.scss";
 @import "src/components/ui/Select/select.scss";