From b45cb000c791ecc88bbb0732226eca037b8f7154 Mon Sep 17 00:00:00 2001 From: Julia Amadio <71294182+JKAmadio@users.noreply.github.com> Date: Tue, 12 Apr 2022 14:44:31 -0300 Subject: [PATCH 1/2] feature: home mobile version --- .../sections/BannerText/banner-text.scss | 6 +- .../FavoriteProducts/FavoriteProducts.tsx | 2 +- .../FavoriteProducts/favorite-products.scss | 20 +++- .../sections/NewProducts/new-products.scss | 9 ++ .../sections/Newsletter/newsletter.scss | 30 ++++-- src/components/sections/Skills/Skills.tsx | 2 +- src/components/sections/Skills/skills.scss | 16 ++- src/components/ui/Hero/hero.scss | 97 ++++++++++++------- 8 files changed, 132 insertions(+), 50 deletions(-) diff --git a/src/components/sections/BannerText/banner-text.scss b/src/components/sections/BannerText/banner-text.scss index 1e7a86b..0f45ad3 100644 --- a/src/components/sections/BannerText/banner-text.scss +++ b/src/components/sections/BannerText/banner-text.scss @@ -10,12 +10,12 @@ display: flex; flex-direction: column; align-items: center; - max-width: 700px; + width: 100%; + + @include media(">=notebook") { max-width: 700px; } } h2, p { - display: inline; - // font-family: 'Montserrat'; font-style: normal; font-weight: 500; diff --git a/src/components/sections/FavoriteProducts/FavoriteProducts.tsx b/src/components/sections/FavoriteProducts/FavoriteProducts.tsx index 9931fda..72d72de 100644 --- a/src/components/sections/FavoriteProducts/FavoriteProducts.tsx +++ b/src/components/sections/FavoriteProducts/FavoriteProducts.tsx @@ -9,7 +9,7 @@ interface Props { function FavoriteProducts({ className = '' }: Props) { return (
-
+

Os favoritos do momento

diff --git a/src/components/sections/FavoriteProducts/favorite-products.scss b/src/components/sections/FavoriteProducts/favorite-products.scss index fa5b2e2..7484cb9 100644 --- a/src/components/sections/FavoriteProducts/favorite-products.scss +++ b/src/components/sections/FavoriteProducts/favorite-products.scss @@ -4,22 +4,38 @@ &__grid-content { display: flex; + flex-direction: column; align-content: center; align-items: center; justify-content: space-between; padding-top: var(--page-padding-notebook); padding-bottom: var(--page-padding-notebook); + + @include media(">=notebook") { + flex-direction: row; + padding-right: 0; + margin-left: calc((100vw - var(--breakpoint-notebook)) / 2); + } + + @include media("=notebook") { + max-width: 250px; + margin-right: 57px; + } + &-infos { margin-bottom: 45px; } diff --git a/src/components/sections/NewProducts/new-products.scss b/src/components/sections/NewProducts/new-products.scss index 8572b37..5d32a7f 100644 --- a/src/components/sections/NewProducts/new-products.scss +++ b/src/components/sections/NewProducts/new-products.scss @@ -9,6 +9,11 @@ justify-content: space-between; padding-top: var(--page-padding-notebook); padding-bottom: var(--page-padding-notebook); + + @include media("=notebook") { + padding-top: 100px; + padding-bottom: 100px; + } +} + [data-newsletter-form] { display: flex; flex-direction: column; align-items: center; justify-content: center; - height: 320px; - padding: 64px 260px; + max-height: 320px; + padding: 26px; background: linear-gradient(95.28deg, rgb(0 174 255 / 80%) 0%, #de68d1 59.98%, #f3d752 115.17%); border-radius: 30px; } [data-newsletter-header] { - font-size: 32px; + max-width: 890px; + margin-top: 30px; + font-size: 27px; // font-family: 'Montserrat'; font-style: normal; font-weight: 500; - line-height: 48px; + line-height: 34px; color: #ffffff; text-align: center; + + @include media(">=notebook") { + font-size: 32px; + line-height: 48px; + } } [data-newsletter-controls] { box-sizing: border-box; display: flex; align-items: center; - width: 75%; + width: 100%; max-width: 590px; height: 50px; - margin-top: 36px; + margin: 36px 0; border: 1px solid rgb(255 255 255 / 50%); border-radius: var(--border-radius-default); @@ -52,6 +69,7 @@ ::placeholder { font-size: 13px; + // font-family: 'Montserrat'; font-style: normal; font-weight: 500; diff --git a/src/components/sections/Skills/Skills.tsx b/src/components/sections/Skills/Skills.tsx index eaf2f3a..8a3d73a 100644 --- a/src/components/sections/Skills/Skills.tsx +++ b/src/components/sections/Skills/Skills.tsx @@ -15,7 +15,7 @@ function Skills({ return (
-
+
{skills?.map((skill, index) => ( =notebook") { width: 30%; } + + &__mobile-none { + @include media("=notebook") { max-width: 420px; } + h3 { flex: none; flex-grow: 0; diff --git a/src/components/ui/Hero/hero.scss b/src/components/ui/Hero/hero.scss index a7d6f38..873b9f0 100644 --- a/src/components/ui/Hero/hero.scss +++ b/src/components/ui/Hero/hero.scss @@ -23,10 +23,6 @@ } .hero-content-wrapper { - display: flex; - gap: var(--space-3); - justify-content: space-between; - @include media(">=tablet", "=tablet") { gap: var(--space-1); } - @include media(">=notebook") { justify-content: flex-start; } + @include media(">=notebook") { + display: flex; + gap: var(--space-3); + justify-content: space-between; + } } .hero-content-info { + // font-family: 'Montserrat'; + font-style: normal; + font-weight: 500; + text-transform: capitalize; + + @include media("=notebook") { width: 43%; } h1 { - font-size: 48px; - - // font-family: 'Montserrat'; - font-style: normal; + font-size: 30px; font-weight: 500; - line-height: 59px; - text-transform: capitalize; + line-height: 36px; + + @include media(">=notebook") { + font-size: 48px; + line-height: 59px; + } } - .text-body-big { + p { + margin-top: var(--space-2); font-size: 16px; - - // font-family: 'Montserrat'; - font-style: normal; - font-weight: 500; line-height: 20px; - text-transform: capitalize; } } - p { - margin-top: var(--space-2); - - @include media(">=tablet") { margin-top: var(--space-4); } - } - .hero-content-info__buttons { display: flex; - justify-content: space-between; - width: 80%; + flex-direction: column; + width: 100%; + + @include media(">=notebook") { + flex-direction: row; + justify-content: space-between; + width: 80%; + } } [data-hero-link] { @@ -92,6 +96,8 @@ a.link-button { margin-top: 0; + + @include media("=notebook") { width: 90%; } } [data-hero-link] a { @@ -135,6 +142,9 @@ .hero-content-mosaic { display: flex; + flex-direction: column; + + @include media(">=notebook") { flex-direction: row; } .hero-card { min-width: 14rem; @@ -171,23 +181,37 @@ &[data-card-size="large"] { [data-card-content] { - font-size: 24px; - line-height: 29px; + font-size: 15px; + line-height: 18px; + + @include media(">=notebook") { + font-size: 24px; + line-height: 29px; + } } .hero-card__content { - padding: 35px; + padding: 22px 40px; + + @include media(">=notebook") { padding: 35px; } } } &[data-card-size="medium"] { [data-card-content] { - font-size: 24px; - line-height: 29px; + font-size: 15px; + line-height: 18px; + + @include media(">=notebook") { + font-size: 24px; + line-height: 29px; + } } .hero-card__content { - padding: 35px; + padding: 20px 40px; + + @include media(">=notebook") { padding: 35px; } } } @@ -198,7 +222,7 @@ } .hero-card__content { - padding: 16px 35px; + padding: 20px 40px; } } @@ -247,19 +271,22 @@ } &__main-card { - margin-right: 32px; + @include media(">=notebook") { margin-right: 32px; } } &__card { display: flex; flex-direction: column; - width: 320px; background: rgb(255 255 255 / 70%); /* Note: backdrop-filter has minimal browser support */ border-radius: 30px; box-shadow: 8px 16px 17px rgb(0 0 0 / 30%); backdrop-filter: blur(14px); + + @include media("=notebook") { width: 320px; } } &__secondary-cards { From c796c09f541323d71f97c15c83faa28892603d89 Mon Sep 17 00:00:00 2001 From: Yapondjian Date: Tue, 12 Apr 2022 18:31:09 -0300 Subject: [PATCH 2/2] fix: remove cms render --- src/pages/index.tsx | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9edc386..ae84715 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,7 +2,6 @@ import { useSession } from '@faststore/sdk' import { graphql } from 'gatsby' import { GatsbySeo, JsonLd } from 'gatsby-plugin-next-seo' import React from 'react' -import RenderCMS from 'src/components/RenderCMS' import { mark } from 'src/sdk/tests/mark' import type { PageProps } from 'gatsby' import type { HomePageQueryQuery } from '@generated/graphql' @@ -22,21 +21,6 @@ export type Props = PageProps * Sometimes people delete content from the CMS on our test account, breaking our CI. * Since publishing new content depends on the CI, we get enter a deadlock. This prevents this deadlock */ -const fallbackContent = [ - { - data: { - title: 'New Products Available', - subtitle: - 'At FastStore you can shop the best tech of 2022. Enjoy and get 10% off on your first purchase.', - linkText: 'See all', - link: '/', - imageSrc: - 'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg', - imageAlt: 'Quest 2 Controller on a table', - }, - name: 'Hero', - }, -] const virtualConsultantJson = [ { @@ -122,7 +106,7 @@ const skillsArray = [ function Page(props: Props) { const { - data: { site, cmsHome }, + data: { site }, location: { pathname, host }, } = props @@ -200,8 +184,6 @@ function Page(props: Props) { title="Receive our news and promotions in advance. Enjoy and get 10% off your first purchase." onSubmit={() => {}} /> - {/* CMS Sections */} - ) }