diff --git a/storefront/app/pages/catalog/[categorySlug].vue b/storefront/app/pages/catalog/[categorySlug].vue index 8addffc6..b2005590 100644 --- a/storefront/app/pages/catalog/[categorySlug].vue +++ b/storefront/app/pages/catalog/[categorySlug].vue @@ -2,7 +2,7 @@

{{ category?.name }}

-

{{ category?.description }}

+
diff --git a/storefront/app/pages/product/[slug].vue b/storefront/app/pages/product/[slug].vue index ac6d0cfa..cb626001 100644 --- a/storefront/app/pages/product/[slug].vue +++ b/storefront/app/pages/product/[slug].vue @@ -38,7 +38,7 @@ />

{{ product?.price }} $

{{ t('cards.product.stock') }} {{ product?.quantity }}

-

{{ product?.description }}

+
- - - - - - - - - - - - - - - - - - - - - - - - + +
+
{{ t('product.characteristics') }}
+
+
+
{{ group.name }}
+

+ {{ item.name }} + {{ item.valuesStr }} +

+
+
+
+
{{ t('product.similar') }}
@@ -569,27 +567,26 @@ watch( } .characteristics { - padding-top: 100px; - - &__wrapper { - background-color: $main; - border-radius: $less_border_radius; - box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2); - padding: 20px; - } + margin-top: 100px; + display: flex; + flex-direction: column; + gap: 25px; + padding: 45px 25px; + border-radius: $default_border_radius; + border: 1px solid $border; &__title { - padding-bottom: 10px; - border-bottom: 2px solid $primary_dark; + font-family: "Playfair Display", sans-serif; color: $primary_dark; - font-size: 24px; - font-weight: 700; + font-size: 30px; + font-weight: 600; + letter-spacing: -0.5px; } &__list { margin-top: 20px; display: grid; - grid-template-columns: repeat(auto-fit,minmax(100px, 30%)); + grid-template-columns: repeat(auto-fit,minmax(30%, 30%)); gap: 40px; } @@ -622,6 +619,11 @@ watch( z-index: 1; background-color: $main; padding-bottom: 1px; + + color: $text; + font-size: 16px; + font-weight: 400; + letter-spacing: -0.5px; } &::after { @@ -635,6 +637,11 @@ watch( } &-value { + color: $primary_dark; + font-size: 16px; + font-weight: 500; + letter-spacing: -0.5px; + & span { &:first-child { & span { @@ -687,14 +694,10 @@ watch( padding-inline: 10px; aspect-ratio: 1; border-radius: 50%; - background-color: $main; + background-color: transparent; @include hover { - background-color: $main_hover; - - & span { - color: $main; - } + background-color: $link_secondary; } & span {