Fix/home qa

src/components/sections/BannerText/banner-text.scss

@@ -46,6 +46,10 @@
     }
   }
 
+  [data-store-button] {
+    border-radius: 60px;
+  }
+
   @include media(">=notebook") {
     padding-top: var(--space-9);
     padding-bottom: var(--space-9);

src/components/sections/FavoriteProducts/favorite-products.scss

@@ -75,4 +75,8 @@
     background: rgb(255 255 255 / 20%);
     backdrop-filter: blur(14px);
   }
+
+  [data-store-button] {
+    border-radius: 60px;
+  }
 }

src/components/sections/Hero/Hero.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import UIHero, { HeroCard, HeroContent, HeroLink } from 'src/components/ui/Hero'
-import { LinkButton } from 'src/components/ui/Button'
+import Button, { LinkButton } from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 
 import Section from '../Section'
@@ -13,7 +13,6 @@ interface HeroProps {
   variant?: Variant
   mainLinkText?: string
   mainLink?: string
-  secondaryLink?: string
   secondaryLinkText?: string
   icon?: JSX.Element
   imageSrc: string
@@ -26,7 +25,6 @@ const Hero = ({
   variant = 'default',
   mainLinkText,
   mainLink,
-  secondaryLink,
   secondaryLinkText,
   icon,
   imageAlt,
@@ -57,13 +55,18 @@ const Hero = ({
                     </LinkButton>
                   </HeroLink>
                 )}
-                {!!secondaryLink && (
-                  <HeroLink>
-                    <LinkButton to={secondaryLink} variant="primary">
-                      {secondaryLinkText}
-                    </LinkButton>
-                  </HeroLink>
-                )}
+                <Button
+                  variant="primary"
+                  onClick={() => {
+                    const sectionRef = document.querySelector('.frn-consultant')
+
+                    if (sectionRef) {
+                      sectionRef.scrollIntoView()
+                    }
+                  }}
+                >
+                  {secondaryLinkText}
+                </Button>
               </div>
             </div>
             <div className="hero-content-mosaic">
@@ -73,7 +76,7 @@ const Hero = ({
                   imageAlt={imageAlt}
                   size="large"
                   title="Brinquedos de até R$100"
-                  link="/"
+                  link="/produtos/brinquedos"
                   linkText="ver todos"
                   icon
                 />
@@ -83,7 +86,7 @@ const Hero = ({
                   <HeroCard
                     size="medium"
                     title="Para jogar com a galera"
-                    link="/"
+                    link="/produtos/brinquedos"
                     linkText="ver todos"
                     icon
                   />
@@ -92,7 +95,7 @@ const Hero = ({
                   <HeroCard
                     size="small"
                     title="Jogos individuais"
-                    link="/"
+                    link="/produtos/brinquedos"
                     linkText="ver todos"
                     icon
                   />
@@ -101,7 +104,7 @@ const Hero = ({
                   <HeroCard
                     size="small"
                     title="Promoções incríveis"
-                    link="/"
+                    link="/produtos/brinquedos"
                     linkText="ver todos"
                     icon
                   />

src/components/sections/Newsletter/newsletter.scss

@@ -54,7 +54,7 @@
   height: 50px;
   margin: 36px 0 0;
   border: 1px solid rgb(255 255 255 / 50%);
-  border-radius: var(--border-radius-default);
+  border-radius: var(--border-radius-pill);
 
   @include media("<notebook") {
     margin: 34px 0 0;

src/components/sections/Skills/skills.scss

@@ -88,4 +88,8 @@
       color: #ffffff;
     }
   }
+
+  [data-store-button] {
+    border-radius: 60px;
+  }
 }

src/components/sections/VirtualConsultant/virtualConsultant.scss

@@ -168,6 +168,8 @@
 
     a {
       box-sizing: border-box;
+      display: flex;
+      align-items: center;
       padding: 13px 27px;
       font-size: 14px;
 

src/components/ui/Button/buttons.scss

@@ -23,7 +23,8 @@
 
   &[data-button-variant="primary"] {
     min-height: var(--tap-min-size);
-    padding: 13px 27px;
+    max-height: var(--tap-min-size);
+    padding: 0 20px;
     color: var(--color-text-inverse);
     background-color: var(--bg-secondary-default);
 

src/components/ui/Hero/hero.scss

@@ -73,6 +73,7 @@
 
       @include media(">=notebook") {
         flex-direction: row;
+        align-items: baseline;
         justify-content: space-between;
         width: 80%;
       }
@@ -81,7 +82,7 @@
     [data-hero-link] {
       margin-top: 23px;
 
-      a {
+      a, button {
         box-sizing: border-box;
         padding: 13px 27px;
         font-size: 14px;

src/pages/index.tsx

@@ -149,9 +149,8 @@ function Page(props: Props) {
       <Hero
         title="Lorem Ipsum Dolor Sit Amet, Consectetur"
         subtitle="Suspendisse molestie, lectus et finibus lobortis, ante felis facilisis ex, quis dictum arcu arcu nec orci. Praesent rutrum mattis nisi."
-        mainLink="/"
+        mainLink="/produtos/brinquedos"
         mainLinkText="ver todos"
-        secondaryLink="/"
         secondaryLinkText="encontre o presente ideal"
         imageAlt="oi"
         imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
@@ -182,7 +181,7 @@ function Page(props: Props) {
       <BannerText
         title="Get to know our next realease"
         caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elit nisi, vehicula in turpis sit amet, posuere aliquam nisi."
-        actionPath="/"
+        actionPath="/produtos/brinquedos"
         actionLabel="call to action"
       />
       <Skills skills={skillsArray}>