[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of rich-text/react/__test__/index.test.tsx from the rich-text VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render } from '@vtex/test-tools/react'

import RichText from '../index'
import { TextPositionValues, TextAlignmentValues } from '../typings/SchemaTypes'

describe('Rich text component', () => {
  const defaultProps = {
    font: 't-body',
    text: '',
    textPosition: TextPositionValues.LEFT,
    textAlignment: TextAlignmentValues.LEFT,
    textColor: 'c-on-base',
  }

  it('should render with bold', () => {
    const component = render(<RichText {...defaultProps} text="**be bold**" />)

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should render with paragraph', () => {
    const component = render(<RichText {...defaultProps} text="IAM BOLD" />)

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should render link with title', () => {
    const component = render(
      <RichText
        {...defaultProps}
        text={
          '[I\'m an inline-style link with title](https://www.google.com "Google\'s Homepage")\n**Bollllddd**\n*this is talic*'
        }
      />
    )

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should render and sanitize malicious text', () => {
    const component = render(
      <RichText
        {...defaultProps}
        text={
          "Hi everyone! This is **how** you do XSS <script>alert('XSS')</script>"
        }
      />
    )

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should render and sanitize malicious text in an attribute', () => {
    const component = render(
      <RichText {...defaultProps} text="[some text](javascript:exec())" />
    )

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should render and sanitize malicious javascript', () => {
    const component = render(
      <RichText
        {...defaultProps}
        text={'<a href="javascript:exec()">HEHEHE</a>'}
      />
    )

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should render and sanitize malicious javascript in css value', () => {
    const component = render(
      <RichText
        {...defaultProps}
        text={
          '<DIV STYLE="background-image: url(javascript:alert(\'XSS\'))">'
        }
      />
    )

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should render with image', () => {
    const component = render(
      <RichText
        {...defaultProps}
        text={`Inline-style:
          ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")`}
      />
    )

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should render with image no title', () => {
    const component = render(
      <RichText
        {...defaultProps}
        text={`Inline-style:
          ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png)`}
      />
    )

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should render an iframe', () => {
    const component = render(
      <RichText
        {...defaultProps}
        text={
          // It must be preceeded by Markdown tag or any other string, otherwise the lib marked escapes the iframe HTML tag.
          '__<iframe frameborder="0" height="100%" src="https://invictastores.typeform.com/to/KmycOT?typeform-embed=embed-widget&embed-hide-footer=true&embed-hide-headers=true&embed-opacity=50&typeform-embed-id=d0pe3" width="100%" style="border: 0px;"></iframe>__'
        }
      />
    )

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should render a link with target', () => {
    const { asFragment } = render(
      <RichText
        {...defaultProps}
        text="<a href='https://google.com' target='_blank'>bc</a>"
      />
    )

    expect(asFragment()).toMatchSnapshot()
  })

  it('should render a link with target as query string on markdown and erase ?', () => {
    const { asFragment } = render(
      <RichText
        {...defaultProps}
        text="[text](https://www.google.com?target=_blank)  "
      />
    )

    expect(asFragment()).toMatchSnapshot()
  })

  it('should render a link with target as query string on markdown and keep others params', () => {
    const { asFragment } = render(
      <RichText
        {...defaultProps}
        text="[text](https://www.google.com?target=_blank&foo=tree\&bar=lala)"
      />
    )

    expect(asFragment()).toMatchSnapshot()
  })

  it('should render a link with target as query string on markdown and keep others params, remove trailing &', () => {
    const { asFragment } = render(
      <RichText
        {...defaultProps}
        text="[text](https://www.google.com?foo=tree\&bar=lala&target=_blank)"
      />
    )

    expect(asFragment()).toMatchSnapshot()
  })

  it('should render a table', () => {
    const { asFragment } = render(
      <RichText
        {...defaultProps}
        text={`
foo|bar
---|---
teste|abc
        `}
      />
    )

    expect(asFragment()).toMatchSnapshot()
  })

  it('should render with two different heading levels', () => {
    const component = render(
      <RichText
        {...defaultProps}
        text={`# Heading 1 # \n ### Heading level 3 ##`}
      />
    )

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should render list', () => {
    const component = render(
      <RichText
        {...defaultProps}
        text={`Teste \n * Item 1\n * Item 2\n * Item 3`}
      />
    )

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should render ordered list', () => {
    const component = render(
      <RichText
        {...defaultProps}
        text={`Teste \n 1. Item 1\n 2. Item 2\n 3. Item 3`}
      />
    )

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should sanitize the font prop', () => {
    const typography = 't-heading-1'
    const { container } = render(
      <RichText {...defaultProps} text="foo" font={`${typography} foo`} />
    )

    const element = container.querySelector(`.${typography}`)
    const notFound = container.querySelector('.foo')

    expect(element).toBeTruthy()
    expect(notFound).toBeFalsy()
  })

  it('should sanitize the textColor prop', () => {
    const color = 'c-muted-1'
    const { container } = render(
      <RichText {...defaultProps} text="foo" textColor={`${color} foo`} />
    )

    const element = container.querySelector(`.${color}`)
    const notFound = container.querySelector('.foo')

    expect(element).toBeTruthy()
    expect(notFound).toBeFalsy()
  })

  it('should allow tel scheme on link', () => {
    const component = render(
      <RichText {...defaultProps} text="[Telefone](tel:+18882165252)" />
    )

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should allow mailto scheme on link', () => {
    const component = render(
      <RichText {...defaultProps} text="[Mail me](mailto:test@vtex.com.br)" />
    )

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })

  it('should allow sup tag', () => {
    const component = render(
      <RichText {...defaultProps} text="Test <sup>(r)</sup>" />
    )

    expect(component).toBeDefined()
    expect(component.asFragment()).toMatchSnapshot()
  })
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of rich-text/react/typings/SchemaTypes.ts from the rich-text VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const enum TextPositionValues {
  CENTER = 'CENTER',
  LEFT = 'LEFT',
  RIGHT = 'RIGHT',
}

export const enum TextAlignmentValues {
  CENTER = 'CENTER',
  LEFT = 'LEFT',
  RIGHT = 'RIGHT',
}

export const textPositionTypes: Record<
  string,
  { name: string; value: TextPositionValues }
> = {
  TEXT_POSITION_CENTER: {
    name: 'admin/editor.rich-text.textPosition.center',
    value: TextPositionValues.CENTER,
  },
  TEXT_POSITION_LEFT: {
    name: 'admin/editor.rich-text.textPosition.left',
    value: TextPositionValues.LEFT,
  },
  TEXT_POSITION_RIGHT: {
    name: 'admin/editor.rich-text.textPosition.right',
    value: TextPositionValues.RIGHT,
  },
}

export const textAlignmentTypes: Record<
  string,
  { name: string; value: TextAlignmentValues }
> = {
  TEXT_ALIGNMENT_CENTER: {
    name: 'admin/editor.rich-text.textAlignment.center',
    value: TextAlignmentValues.CENTER,
  },
  TEXT_ALIGNMENT_LEFT: {
    name: 'admin/editor.rich-text.textAlignment.left',
    value: TextAlignmentValues.LEFT,
  },
  TEXT_ALIGNMENT_RIGHT: {
    name: 'admin/editor.rich-text.textAlignment.right',
    value: TextAlignmentValues.RIGHT,
  },
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of rich-text/react/typings/insane.d.ts from the rich-text VTEX app.

[Assistant]
Here's the implementation:

```typescript
// Insane is based on the sanitize-html package.
// So its types are extremely close to it.

declare function insane(dirty: string, options?: insane.IOptions): string

declare namespace insane {
  interface IOptions {
    allowedTags?: string[] | boolean
    allowedAttributes?: { [index: string]: string[] } | boolean
    allowedStyles?: { [index: string]: { [index: string]: RegExp[] } }
    allowedClasses?: { [index: string]: string[] } | boolean
  }
}

declare module '@vtex/insane' {
  export = insane
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of rich-text/react/styles/index.css from the rich-text VTEX app.

[Assistant]
Here's the implementation:

```css
.heading-level-1 {
}
.heading-level-2 {
}
.heading-level-3 {
}
.heading-level-4 {
}
.heading-level-5 {
}
.heading-level-6 {
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/sitemap/sitemap.json from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "urlset": {
    "url": [
      {
        "loc": "https://storetheme.vtex.com/about-us"
      }
    ]
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/docs/README.md from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Black Beauty Theme
A store theme made for the 2019 VTEX Hackatheme

Participants:
- Beatriz Silva
- Gabriel Vincent
- Lucas Suzano
- Lucas Bacic
- Pedro Alexandria

## Preview
![](https://user-images.githubusercontent.com/1354492/63937047-e8d81c80-ca37-11e9-86fc-61e88847bbfb.png)

## Tutorial
To understand how things work check our tutorial [Build a store using VTEX IO](https://help.vtex.com/en/tracks/build-a-store-using-vtex-io)

## Dependencies
All store components that you see on this document are open source too. Production ready, you can found those apps in this GitHub organization.

Store framework is the baseline to create any store using _VTEX IO Web Framework_.
- [Store](https://github.com/vtex-apps/store/blob/master/README.md)

Store GraphQL is a middleware to access all VTEX APIs.
- [Store GraphQL](https://github.com/vtex-apps/store-graphql/blob/master/README.md)

### Store Component Apps
- [Header](https://github.com/vtex-apps/store-header/blob/master/README.md)
- [Footer](https://github.com/vtex-apps/store-footer/blob/master/README.md)
- [Carousel](https://github.com/vtex-apps/carousel/blob/master/README.md)
- [Shelf](https://github.com/vtex-apps/shelf/blob/master/README.md)
- [Telemarketing](https://github.com/vtex-apps/telemarketing/blob/master/README.md)
- [Menu](https://github.com/vtex-apps/menu/blob/master/README.md)
- [Login](https://github.com/vtex-apps/login/blob/master/README.md)
- [Minicart](https://github.com/vtex-apps/minicart/blob/master/README.md)
- [Category Menu](https://github.com/vtex-apps/category-menu/blob/master/README.md)
- [Product Summary](https://github.com/vtex-apps/product-summary/blob/master/README.md)
- [Breadcrumb](https://github.com/vtex-apps/breadcrumb/blob/master/README.md)
- [Search Result](https://github.com/vtex-apps/search-result/blob/master/README.md)
- [Product Details](https://github.com/vtex-apps/product-details/blob/master/README.md)
- [Storecomponents](https://github.com/vtex-apps/store-components/blob/master/README.md)
- [Product Kit](https://github.com/vtex-apps/product-kit/blob/master/README.md) :construction: under construction
- [WishList](https://github.com/vtex-apps/wishlist/blob/master/README.md)  :construction: under construction
- [Order Placed](https://github.com/vtex-apps/order-placed/blob/master/README.md) :construction: under construction

### Store Pixel Apps

 - [Facebook Pixel](https://github.com/vtex-apps/facebook-pixel/blob/master/README.md)
 - [Google Analytics](https://github.com/vtex-apps/google-analytics/blob/master/README.md)
 - [Google Tag Manager](https://github.com/vtex-apps/google-tag-manager/blob/master/README.md)

## Contributing

Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks.jsonc from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
/* Blocks can be defined both on the store/blocks.json file, and in any number of json
 * files inside the store/blocks directory, with any arbitrary directory structure.
 *
 * Additionally, all blocks files can support comments, such as this one, if given the
 * .jsonc file extension.
 *
 * The store/blocks.json file is intended for backwards compatibility, for miscellaneous
 * blocks, or if the app is simple enough that it doesn't warrant splitting the file.
 */
{
  "store.orderplaced": {
    "blocks": ["order-placed"]
  },

  "store.account": {
    "blocks": ["my-account"],
    "parent": {
      "challenge": "challenge.profile"
    }
  },

  "store.login": {
    "blocks": ["login-content#default"]
  },

  "login-content#default": {
    "props": {
      "isInitialScreenOptionOnly": false,
      "defaultOption": 1,
      "showPasswordVerificationIntoTooltip": true
    }
  },

  "product-summary.shelf": {
    "children": [
      "product-summary-add-to-list-button",
      "stack-layout#prodsum",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-price",
      "product-summary-buy-button"
    ]
  },

  "product-summary-buy-button": {
    "props": {
      "buyButtonText": "ADD TO CART"
    }
  },

  "stack-layout#prodsum": {
    "children": ["product-summary-image", "product-summary-specification-badges"]
  },

  "product-summary-specification-badges": {
    "props": {
      "specificationGroupName": "Group",
      "specificationName": "On Sale",
      "visibleWhen": "True",
      "displayValue": "SPECIFICATION_NAME"
    }
  },

  "store.product-review-form": {
    "blocks": ["product-review-form"]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/routes.json from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "store.custom#about-us": {
    "path": "/about-us"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/styles/css/vtex.rich-text.css from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```css
.container {
  padding-right: 36px;
}

.container > div {
  width: 250px;
}

.link {
  color: #878695;
  text-decoration: none;
  font-size: 18px;
  line-height: 36px;
}

.link a:link {
  color: #878695;
  text-decoration: none;
  font-size: 18px;
  line-height: 36px;
}

.link a:hover {
  color: #222639;
  text-decoration: none;
  font-size: 18px;
  line-height: 36px;
}

.container--deals {
  color: #ffffff;
  text-align: center;
  justify-content: center;
}

.container--deals .paragraph {
  margin: 0;
}

.container--link {
  justify-content: center;
}

.container--question {
  justify-content: center;
}

.container--question .paragraph {
  text-align: center;
  max-width: 540px;
  margin: 0 16px;
  padding-top: 120px;
  color: #03034e;
}

.container--question .strong {
  font-size: 32px;
  line-height: 2rem;
  font-weight: 700;
}

.container--link .paragraph {
  text-align: center;
  max-width: 540px;
  padding-top: 36px;
  padding-bottom: 84px;
  color: #03034e;
}

.container--link .strong {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.container--link .link {
  text-decoration: none;
  font-size: 36px;
  font-weight: 300;
  color: #03034e;
}

.container--title {
  color: #03034e;
  font-size: 28px;
  font-weight: 700;
}

@media only screen and (min-width: 640px) {
  .container--question .strong {
    font-size: 40px;
    line-height: 3rem;
  }

  .container--about {
    max-width: 85%;
  }

  .container--title {
    color: #03034e;
    font-size: 40px;
    font-weight: 700;
    max-width: 60%;
  }

  .container--title .paragraph {
    line-height: 1.3em;
  }
}

.heading {
  font-family: "Playfair Display";
  font-size: 36px;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/styles/css/vtex.product-summary.css from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```css
.container {
  background-color: white;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 32px;
  padding-bottom: 32px;
}

.nameContainer {
  padding-top: 32px;
  padding-bottom: 0px;
}
.productBrand {
  font-size: 14px;
}
.productNameContainer {
  color: #878695;
}
.priceContainer {
  padding-top: 8px;
  padding-bottom: 32px;
}
.buyButton > button {
  font-size: 12px;
  letter-spacing: 15%;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #272639;
  border-radius: 0px;
  width: inherit;
}
.buyButton > button:hover {
  border-width: 0px 0px 4px 0px;
  border-style: solid;
  border-color: #878695;
  color: #878695;
  background-color: #fff;
}
.buyButton > button div {
  padding-left: 0;
  padding-right: 0;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/styles/css/vtex.store-header.css from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```css
/* .headerRow--menu-link :global(.vtex-menu-2-x-styledLink) {
  color: #ffffff;
  font-size: 14px;
}

.headerRow--main-header-mobile .headerRowBackground {
  padding: 10px 0px;
  background-color: #f0f0f0;
}
*/

.headerRow--main-header :global(.vtex-menu-2-x-styledLink) {
  color: #555373;
  font-size: 14px;
  height: 138px;
}

.headerRow--main-header .headerRowBackground {
  background-color: #eccab7;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/styles/css/vtex.store-components.css from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```css
.infoCardContainer--info-card-home {
  background-color: #e3c5bd;
}

.notificationBarContainer {
  background-color: #e6f1e6;
  color: #03034e;
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
}

.searchBarContainer {
  max-width: 265px;
}

.infoCardContainer--main1 {
  height: 760px;
  width: 578px;
  margin-top: 64px;
  margin-bottom: 64px;
}

.infoCardContainer--main2 {
  height: 760px;
  width: 578px;
  margin-top: 64px;
  margin-bottom: 64px;
}

.infoCardContainer--info-card-home {
  height: 599px;
}

.infoCardContainer--info-card-home button {
  border: 0px white;
}

/* New Makeup Collection Info Cards */

.infoCardContainer--new-makeup-collection {
  height: 680px;
  background-color: #eccab7;
}

.infoCardTextContainer--new-makeup-collection {
  height: 680px;
}

.infoCardCallActionContainer--new-makeup-collection {
  position: relative;
  top: 550px;
}

.infoCardCallActionContainer--new-makeup-collection > button {
  background-color: #272639;
  border-radius: 0px;
  height: 60px;
  width: 185px;
  color: white;
  font-size: 14px;
  letter-spacing: 1.5px;
}

/* .newsletter {
  background-color: #03054e;
  max-width: 1528px;
  margin: 0 auto;
}

.newsletter .container {
  padding: 60px 10px;
}

.label {
  color: #fff;
  font-size: 26px;
}

.inputGroup {
  padding-bottom: 4px;
  border-bottom: 2px solid #fff;
  display: flex;
  color: #fff;
}

.inputGroup input {
  background-color: transparent;
  color: #fff;
  border: none;
  padding-left: 0px;
}

.inputGroup input::placeholder {
  color: #fff;
  font-size: 16px;
}

.inputGroup button {
  background-color: transparent;
  color: #fff;
  border: none;
  margin-right: -24px;
}

.buttonContainer {
  padding-top: 0px;
} */

.imageElement--storePrint {
  max-height: 300px;
  margin-bottom: 20px;
}

@media only screen and (min-width: 640px) {
  .infoCardContainer--main1 {
    margin-right: 10px;
  }

  .infoCardContainer--main2 {
    margin-left: 10px;
  }

  .newsletter .container {
    padding: 140px;
  }

  .label {
    font-size: 40px;
  }

  .infoCardContainer--info-card-home .infoCardTextContainer {
    width: 30%;
    padding-left: 64px;
  }

  .infoCardContainer--info-card-home .infoCardImageContainer {
    width: 70%;
  }

  .imageElement--storePrint {
    margin-bottom: 0px;
    max-height: 600px;
  }
}

.newsletter {
  background-color: white;
  width: 334px;
  height: 329px;
}

.newsletter .container {
  padding: 32px;
}

.newsletter .label {
  color: #272639;
  font-family: "Playfair Display";
}

.newsletter .form {
  width: 100%;
  text-align: left;
}

.newsletter .buttonContainer .button {
  background-color: #272639;
}

.newsletter .inputGroup input::placeholder {
  color: #272639;
  font-size: 12px;
}

.infoCardContainer--main1-mobile {
  width: 100%;
  height: 720px;
}

.infoCardContainer--main2-mobile {
  width: 100%;
  height: 720px;
}

.infoCardContainer--info-card-home-mobile {
  max-width: 720px;
}

.autoCompleteOuterContainer > div > label > div {
  border-bottom: solid 1px #555373;
  color: #555373;
  border-left: 0;
  border-top: 0;
  border-right: 0;
  background: transparent;
  border-radius: 0px;
}
.autoCompleteOuterContainer > div > label > div > input {
  background: transparent;
}
.autoCompleteOuterContainer > div > label > div > span {
  background: transparent;
}

.infoCardHeadline {
  font-size: 80px;
  line-height: 72px;
  color: #272639;
  font-family: "Playfair Display";
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/styles/css/vtex.store__template.css from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```css
@import url("https://fonts.googleapis.com/css?family=DM+Sans%7CPlayfair+Display&display=swap");

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/styles/css/vtex.store-footer.css from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```css
.footerLayout {
  padding: 100px;
  background-color: white;
}

.row--menu-row {
  padding-right: 24px;
}

.row--menu-row .rowContainer {
  align-items: flex-start;
}

.row--payment-methods {
  padding-top: 16px;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/styles/css/vtex.flex-layout.css from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRow--deals {
  background-color: #a7afbd;
  padding: 14px 0px;
}

.flexRow--deals .stretchChildrenWidth {
  align-items: center;
}

.flexRow--deals .flexCol {
  align-items: center;
}

.flexCol--filterCol {
  max-width: 500px;
  min-width: 230px;
}

.flexCol--productCountCol {
  align-items: flex-start;
}

.flexCol--orderByCol {
  align-items: flex-end;
}

.flexCol--orderByMobileCol {
  width: 42%;
}

.flexCol--filterMobileCol {
  width: 38%;
}

.flexCol--switcherMobileCol {
  width: 20%;
}

.flexRow--new-makeup-collection {
  background-color: #eccab7;
}

.flexRow--info-card-home {
  background-color: #e3c5bd;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/styles/configs/style.json from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "typeScale": [
    3,
    2.25,
    1.5,
    1.25,
    1,
    0.875,
    0.75
  ],
  "spacing": [
    0.125,
    0.25,
    0.5,
    0.75,
    1,
    1.5,
    2,
    3,
    4,
    8,
    16
  ],
  "customMedia": [
    {
      "s": 20
    },
    {
      "ns": {
        "value": 40,
        "minWidth": true
      }
    },
    {
      "m": {
        "value": 40,
        "minWidth": true
      }
    },
    {
      "l": {
        "value": 64,
        "minWidth": true
      }
    },
    {
      "xl": {
        "value": 80,
        "minWidth": true
      }
    }
  ],
  "colors": {
    "black-90": "rgba(0,0,0,.9)",
    "black-80": "rgba(0,0,0,.8)",
    "black-70": "rgba(0,0,0,.7)",
    "black-60": "rgba(0,0,0,.6)",
    "black-50": "rgba(0,0,0,.5)",
    "black-40": "rgba(0,0,0,.4)",
    "black-30": "rgba(0,0,0,.3)",
    "black-20": "rgba(0,0,0,.2)",
    "black-10": "rgba(0,0,0,.1)",
    "black-05": "rgba(0,0,0,.05)",
    "black-025": "rgba(0,0,0,.025)",
    "black-0125": "rgba(0,0,0,.0125)",
    "white-90": "rgba(255,255,255,.9)",
    "white-80": "rgba(255,255,255,.8)",
    "white-70": "rgba(255,255,255,.7)",
    "white-60": "rgba(255,255,255,.6)",
    "white-50": "rgba(255,255,255,.5)",
    "white-40": "rgba(255,255,255,.4)",
    "white-30": "rgba(255,255,255,.3)",
    "white-20": "rgba(255,255,255,.2)",
    "white-10": "rgba(255,255,255,.1)",
    "white-05": "rgba(255,255,255,.05)",
    "white-025": "rgba(255,255,255,.025)",
    "white-0125": "rgba(255,255,255,.0125)"
  },
  "semanticColors": {
    "background": {
      "base": "#FAF7F1",
      "base--inverted": "#03044e",
      "action-primary": "white",
      "action-secondary": "#eef3f7",
      "emphasis": "#f71963",
      "disabled": "#f2f4f5",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "hover-background": {
      "action-primary": "#878695",
      "action-secondary": "#dbe9fd",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#e13232",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "active-background": {
      "action-primary": "#0c389f",
      "action-secondary": "#dbe9fd",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "text": {
      "action-primary": "#0F3E99",
      "action-secondary": "#eef3f7",
      "link": "#0F3E99",
      "emphasis": "#f71963",
      "disabled": "#979899",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "visited-text": {
      "link": "#0c389f"
    },
    "hover-text": {
      "action-primary": "#072c75",
      "action-secondary": "#dbe9fd",
      "link": "#0c389f",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#e13232",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0"
    },
    "active-text": {
      "link": "#0c389f",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0"
    },
    "border": {
      "action-primary": "#272639",
      "action-secondary": "#eef3f7",
      "emphasis": "#f71963",
      "disabled": "#e3e4e6",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "hover-border": {
      "action-primary": "#878695",
      "action-secondary": "#dbe9fd",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#e13232",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "active-border": {
      "action-primary": "#0c389f",
      "action-secondary": "#dbe9fd",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "on": {
      "base": "#3f3f40",
      "base--inverted": "#ffffff",
      "action-primary": "#272639",
      "action-secondary": "#0F3E99",
      "emphasis": "#ffffff",
      "disabled": "#979899",
      "success": "#ffffff",
      "success--faded": "#3f3f40",
      "danger": "#ffffff",
      "danger--faded": "#3f3f40",
      "warning": "#ffffff",
      "warning--faded": "#1a1a1a",
      "muted-1": "#ffffff",
      "muted-2": "#ffffff",
      "muted-3": "#3f3f40",
      "muted-4": "#3f3f40",
      "muted-5": "#3f3f40"
    },
    "hover-on": {
      "action-primary": "#ffffff",
      "action-secondary": "#0F3E99",
      "emphasis": "#ffffff",
      "success": "#ffffff",
      "success--faded": "#3f3f40",
      "danger": "#ffffff",
      "danger--faded": "#3f3f40",
      "warning": "#ffffff",
      "warning--faded": "#1a1a1a"
    },
    "active-on": {
      "action-primary": "#ffffff",
      "action-secondary": "#0F3E99",
      "emphasis": "#ffffff",
      "success": "#ffffff",
      "success--faded": "#3f3f40",
      "danger": "#ffffff",
      "danger--faded": "#3f3f40",
      "warning": "#ffffff",
      "warning--faded": "#1a1a1a"
    }
  },
  "borderWidths": [
    0,
    0.125,
    0.25,
    0.5,
    1,
    2
  ],
  "borderRadius": [
    0,
    0.125,
    0.25,
    0.5,
    1
  ],
  "widths": [
    1,
    2,
    4,
    8,
    16
  ],
  "maxWidths": [
    1,
    2,
    4,
    8,
    16,
    32,
    48,
    64,
    96
  ],
  "heights": [
    1,
    2,
    4,
    8,
    16
  ],
  "sizes": [
    {
      "name": "small",
      "value": 2
    },
    {
      "name": "regular",
      "value": 2.5
    },
    {
      "name": "large",
      "value": 3
    }
  ],
  "typography": {
    "measure": [
      30,
      34,
      20
    ],
    "styles": {
      "heading-1": {
        "fontFamily": "DM Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "700",
        "fontSize": "3rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-2": {
        "fontFamily": "DM Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "700",
        "fontSize": "2.25rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-3": {
        "fontFamily": "DM Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "700",
        "fontSize": "1.75rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-4": {
        "fontFamily": "DM Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "normal",
        "fontSize": "1.5rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-5": {
        "fontFamily": "DM Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "normal",
        "fontSize": "1.25rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-6": {
        "fontFamily": "DM Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "normal",
        "fontSize": "1.25rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "body": {
        "fontFamily": "DM Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "normal",
        "fontSize": "1rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "small": {
        "fontFamily": "DM Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "normal",
        "fontSize": "0.875rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "mini": {
        "fontFamily": "DM Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "normal",
        "fontSize": "0.75rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "action": {
        "fontFamily": "DM Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "500",
        "fontSize": "1rem",
        "textTransform": "uppercase",
        "letterSpacing": "0"
      },
      "action--small": {
        "fontFamily": "DM Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "500",
        "fontSize": "0.875rem",
        "textTransform": "uppercase",
        "letterSpacing": "0"
      },
      "action--large": {
        "fontFamily": "DM Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "500",
        "fontSize": "1.25rem",
        "textTransform": "uppercase",
        "letterSpacing": "0"
      },
      "code": {
        "fontFamily": "Consolas, monaco, monospace",
        "fontWeight": "normal",
        "fontSize": "1rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      }
    }
  },
  "opacity": [
    1,
    0.9,
    0.8,
    0.7,
    0.6,
    0.5,
    0.4,
    0.3,
    0.2,
    0.1,
    0.05,
    0.025,
    0
  ]
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/product-assembly.jsonc from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "sticky-layout#buy-button": {
    "props": {
      "position": "bottom"
    },
    "children": ["flex-layout.row#buy-button"]
  },
  "product-assembly-options": {
    "children": [
      "flex-layout.row#product-assembly-options",
      "assembly-option-input-values"
    ]
  },
  "assembly-option-input-values": {
    "props": {
      "optionsDisplay": "box"
    }
  },
  "flex-layout.row#product-assembly-options": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "colSizing": "auto"
    },
    "children": [
      "flex-layout.col#product-assembly-image",
      "flex-layout.col#product-assembly-middle",
      "flex-layout.col#product-assembly-quantity"
    ]
  },
  "flex-layout.col#product-assembly-quantity": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": [
      "assembly-option-item-quantity-selector"
    ]
  },
  "flex-layout.col#product-assembly-image": {
    "props": {
      "marginRight": 4
    },
    "children": [
      "assembly-option-item-image"
    ]
  },
  "flex-layout.col#product-assembly-middle": {
    "props": {
      "width": "grow",
      "verticalAlignment": "middle"
    },
    "children": [
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-children-description",
      "assembly-option-item-customize#first-level"
    ]
  },
  "assembly-option-item-customize#first-level": {
    "props": {
      "buttonProps": {
        "collapse": "left"
      }
    },
    "children": [
      "flex-layout.row#item-customize"
    ]
  },
  "flex-layout.row#item-customize": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "colSizing": "auto"
    },
    "children": [
      "flex-layout.col#product-assembly-image",
      "flex-layout.col#item-customize-middle",
      "flex-layout.col#item-customize-quantity"
    ]
  },
  "flex-layout.col#item-customize-middle": {
    "props": {
      "width": "grow",
      "verticalAlignment": "middle"
    },
    "children": [
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-children-description",
      "assembly-option-item-customize#sec-level"
    ]
  },
  "flex-layout.col#item-customize-quantity": {
    "props": {
      "horizontalAlign": "right",
      "verticalAlign": "middle"
    },
    "children": [
      "assembly-option-item-quantity-selector"
    ]
  },
  "assembly-option-item-customize#sec-level": {
    "props": {
      "buttonProps": {
        "collapse": "left"
      }
    },
    "children": [
      "assembly-option-item-image",
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-quantity-selector"
    ]
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/about-us.json from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#about-us": {
    "blocks": [
      "flex-layout.row#about-us"
    ]
  },

  "flex-layout.row#about-us": {
    "children": [
      "image#mobile-phone",
      "flex-layout.col#text-about-us"
    ]
  },

  "flex-layout.col#text-about-us": {
    "children": [
      "rich-text#title-about-us",
      "rich-text#about-us"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title-about-us": {
    "props": {
      "text":
      "# Create meaningful and relevant experiences.",
      "blockClass": "title"
    }
  },

  "image#mobile-phone": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/mobile-phone.png",
      "maxHeight": "",
      "maxWidth": "",
      "blockClass": "storePrint"
    }
  },

  "rich-text#about-us": {
    "props": {
      "text": "**Optimized store framework** \n Free your front-end with our React + Node store framework. Improve usability and SEO, while driving more conversion with modular components, single page applications, and a ready-for-PWA structure. \n **Multi-currency and language** \n Go international with multiple storefronts to support different languages and easily manage local currencies and payment conditions. \n **Serverless development platform** \n Reduce loading time, improve usability, and make the best out of SEO. Developing scalable components with a comprehensive, easy-to-use toolset, you can build stores faster than ever.",
      "blockClass": "about"
    }
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/product.json from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.product": {
    "children": [
      "flex-layout.row#product-breadcrumb",
      "flex-layout.row#product-main",
      "shelf.relatedProducts",
      "product-reviews",
      "product-questions-and-answers"
    ]
  },
  "flex-layout.row#product-breadcrumb": {
    "props": {
      "marginTop": 4
    },
    "children": ["breadcrumb"]
  },
  "flex-layout.row#product-main": {
    "props": {
      "colGap": 7,
      "rowGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7,
      "paddingBottom": 7
    },
    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
  },

  "stack-layout": {
    "children": [
      "flex-layout.row#product-image",
      "product-specification-badges"
    ]
  },

  "product-specification-badges": {
    "props": {
      "specificationGroupName": "Group",
      "specificationName": "On Sale",
      "visibleWhen": "True",
      "displayValue": "SPECIFICATION_NAME"
    }
  },

  "flex-layout.col#stack": {
    "children": ["stack-layout"],
    "props": {
      "width": "60%",
      "rowGap": 0
    }
  },
  "flex-layout.row#product-image": {
    "children": ["product-images"]
  },
  "product-images": {
    "props": {
      "displayThumbnailsArrows": true
    }
  },
  "flex-layout.col#right-col": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "product-name",
      "product-rating-summary",
      "product-price#product-details",
      "product-separator",
      "product-quantity",
      "product-identifier.product",
      "sku-selector",
      "product-assembly-options",
      "flex-layout.row#buy-button",
      "availability-subscriber",
      "shipping-simulator",
      "share#default"
    ]
  },

  "product-price#product-details": {
    "props": {
      "showInstallments": true,
      "showSavings": true
    }
  },

  "flex-layout.row#buy-button": {
    "props": {
      "marginTop": 4,
      "marginBottom": 7
    },
    "children": ["buy-button"]
  },

  "share#default": {
    "props": {
      "social": {
        "Facebook": true,
        "WhatsApp": true,
        "Twitter": false,
        "Pinterest": true
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/search.jsonc from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.search": {
    "blocks": ["search-result-layout"]
  },

  "store.search#brand": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "orderByField": "OrderByReleaseDateDESC",
        "hideUnavailableItems": true,
        "maxItemsPerPage": 10
      }
    }
  },

  "store.search#department": {
    "blocks": ["search-result-layout"]
  },

  "store.search#category": {
    "blocks": ["search-result-layout"]
  },

  "store.search#subcategory": {
    "blocks": ["search-result-layout"]
  },

  "search-result-layout": {
    "blocks": [
      "search-result-layout.desktop",
      "search-result-layout.mobile",
      "search-not-found-layout"
    ]
  },

  "search-result-layout.desktop": {
    "children": [
      "flex-layout.row#searchbread",
      "flex-layout.row#searchtitle",
      "flex-layout.row#result"
    ],
    "props": {
      "pagination": "show-more",
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      }
    }
  },
  "flex-layout.row#searchbread": {
    "children": ["breadcrumb.search"],
    "props": {
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },
  "flex-layout.row#searchtitle": {
    "children": ["search-title.v2"]
  },
  "flex-layout.row#result": {
    "children": ["flex-layout.col#filter", "flex-layout.col#content"],
    "props": {
      "preventHorizontalStretch": true,
      "fullWidth": true
    }
  },
  "flex-layout.col#filter": {
    "children": ["filter-navigator.v3"],
    "props": {
      "blockClass": "filterCol"
    }
  },
  "flex-layout.col#content": {
    "children": [
      "flex-layout.row#searchinfo",
      "flex-layout.row#fetchprevious",
      "flex-layout.row#products",
      "flex-layout.row#fetchmore"
    ],
    "props": {
      "width": "grow"
    }
  },
  "flex-layout.row#searchinfo": {
    "children": ["flex-layout.col#productCount", "flex-layout.col#orderby"]
  },
  "flex-layout.col#productCount": {
    "children": ["total-products.v2"],
    "props": {
      "blockClass": "productCountCol"
    }
  },
  "flex-layout.col#orderby": {
    "children": ["order-by.v2"],
    "props": {
      "blockClass": "orderByCol"
    }
  },
  "flex-layout.row#fetchprevious": {
    "props": {
      "marginBottom": 3
    },
    "children": ["search-fetch-previous"]
  },
  "flex-layout.row#fetchmore": {
    "props": {
      "marginTop": 3
    },
    "children": ["search-fetch-more"]
  },
  "flex-layout.row#products": {
    "children": ["search-content"]
  },
  "search-content": {
    "blocks": ["gallery", "not-found"]
  },

  "search-result-layout.mobile": {
    "children": [
      "flex-layout.row#searchinfomobile",
      "flex-layout.row#searchbread",
      "flex-layout.row#productCountMobile",
      "flex-layout.row#contentmobile"
    ],
    "props": {
      "pagination": "show-more",
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      }
    }
  },
  "flex-layout.row#contentmobile": {
    "children": ["search-content"],
    "props": {
      "preserveLayoutOnMobile": true
    }
  },

  "flex-layout.row#searchinfomobile": {
    "children": [
      "flex-layout.col#orderByMobile",
      "flex-layout.col#filterMobile",
      "flex-layout.col#switcherMobile"
    ],
    "props": {
      "preserveLayoutOnMobile": true,
      "colSizing": "auto",
      "colJustify": "around"
    }
  },

  "flex-layout.col#orderByMobile": {
    "children": ["order-by.v2"],
    "props": {
      "blockClass": "orderByMobileCol"
    }
  },

  "flex-layout.row#productCountMobile": {
    "children": ["total-products.v2"],
    "props": {
      "blockClass": "productCountMobileRow"
    }
  },

  "flex-layout.col#filterMobile": {
    "children": ["filter-navigator.v3"],
    "props": {
      "blockClass": "filterMobileCol"
    }
  },
  "flex-layout.col#switcherMobile": {
    "children": ["search-layout-switcher"],
    "props": {
      "blockClass": "switcherMobileCol"
    }
  },
  "search-not-found-layout": {
    "children": ["flex-layout.row#searchbread", "flex-layout.row#notfound"]
  },

  "flex-layout.row#notfound": {
    "children": ["not-found"],
    "props": {
      "fullWidth": true
    }
  },

  "breadcrumb": {
    "props": {
      "showOnMobile": true
    }
  },

  "gallery": {
    "blocks": ["product-summary.shelf"]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/home/secondary-banners-mobile.jsonc from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "flex-layout.row#secondary-banners-mobile": {
      "children": ["image#bannersecondary01-mobile", "image#bannersecondary02-mobile"],
      "props": {
        "blockClass": "infocard",
        "colSpacing": "equal",
        "marginTop": 6,
        "marginBottom": 6
      }
    },
    // "flex-layout.col#infocard01-mobile": {
    //   "children": ["info-card#banner01-mobile"],
    //   "props": {

    //   }
    // },
    // "flex-layout.col#infocard02-mobile": {
    //   "children": ["info-card#banner02-mobile"],
    //   "props": {

    //   }

    "image#bannersecondary01-mobile": {
      "props": {
        "maxWidth": "100%",
        "src":  "https://beautytheme.vteximg.com.br/arquivos/ids/155722"
      }
    },

    "image#bannersecondary02-mobile": {
      "props": {
        "maxWidth": "100%",
        "src":  "https://beautytheme.vteximg.com.br/arquivos/ids/155723"
      }
    }
}

//     "info-card#banner01-mobile": {
//       "props": {
//         // "headline": "Beauty inspired by real life.",
//         "isFullModeStyle": true,
//         "callToActionMode": "none",
//         "textPosition": "center",
//         "imageUrl": "https://slack-imgs.com/?c=1&o1=ro&url=https%3A%2F%2Fbeautytheme.vteximg.com.br%2Farquivos%2Fids%2F155720",
//         "blockClass": "main1-mobile"
//       }
//     },
//     "info-card#banner02-mobile": {
//       "props": {
//         // "headline": "SKIN FIRST",
//         "isFullModeStyle": true,
//         "callToActionMode": "none",
//         "textPosition": "center",
//         "imageUrl": "https://beautytheme.vteximg.com.br/arquivos/ids/155719",
//         "blockClass": "main2-mobile"
//       }
//     }
//   }
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/home/main-banners-mobile.jsonc from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#main-banners-mobile": {
    "children": ["image#banner01-mobile", "image#banner02-mobile"],
    "props": {
      "blockClass": "infocard",
      "colSpacing": "equal",
      "marginTop": 6,
      "marginBottom": 6
    }
  },
  // "flex-layout.col#infocard01-mobile": {
  //   "children": ["info-card#banner01-mobile"],
  //   "props": {

  //   }
  // },
  // "flex-layout.col#infocard02-mobile": {
  //   "children": ["info-card#banner02-mobile"],
  //   "props": {

  //   }

  "image#banner01-mobile": {
    "props": {
      "maxWidth": "100%",
      "src":  "https://slack-imgs.com/?c=1&o1=ro&url=https%3A%2F%2Fbeautytheme.vteximg.com.br%2Farquivos%2Fids%2F155720"
    }
  },

  "image#banner02-mobile": {
    "props": {
      "maxWidth": "100%",
      "src":  "https://beautytheme.vteximg.com.br/arquivos/ids/155719"
    }
  },

  "info-card#banner01-mobile": {
    "props": {
      // "headline": "Beauty inspired by real life.",
      "isFullModeStyle": true,
      "callToActionMode": "none",
      "textPosition": "center",
      "imageUrl": "https://slack-imgs.com/?c=1&o1=ro&url=https%3A%2F%2Fbeautytheme.vteximg.com.br%2Farquivos%2Fids%2F155720",
      "blockClass": "main1-mobile"
    }
  },
  "info-card#banner02-mobile": {
    "props": {
      // "headline": "SKIN FIRST",
      "isFullModeStyle": true,
      "callToActionMode": "none",
      "textPosition": "center",
      "imageUrl": "https://beautytheme.vteximg.com.br/arquivos/ids/155719",
      "blockClass": "-mobile"
    }
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/home/home.jsonc from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.home": {
    "blocks": [
      "responsive-layout.desktop",
      "responsive-layout.mobile"
      //   "carousel#home",
      //   /* You can make references to blocks defined in other files.
      //    * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
      //   "flex-layout.row#main-banners",
      //   "shelf#home",
      //   "flex-layout.row#secondary-banners",
      //   "info-card#home"
    ]
  },

  "responsive-layout.desktop": {
    "children": [
      "carousel#home",
      /* You can make references to blocks defined in other files.
       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
      "flex-layout.row#main-banners",
      "shelf#home",
      "flex-layout.row#secondary-banners",
      "info-card#home"
    ]
  },

  "responsive-layout.mobile": {
    "children": [
      "carousel#home",
      /* You can make references to blocks defined in other files.
       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
      "flex-layout.row#main-banners-mobile",
      "shelf#home",
      "flex-layout.row#secondary-banners-mobile"
      //  "info-card#home-mobile"]
    ]
  },

  "carousel#home": {
    "props": {
      "autoplay": false,
      "banners": [
        {
          "image": "https://beautytheme.vteximg.com.br/arquivos/ids/155721"
        }
      ],
      "height": 740,
      "showArrows": false,
      "showDots": false
    }
  },

  "shelf#home": {
    "blocks": ["product-summary.shelf"],
    "props": {
      "blockClass": "home",
      "orderBy": "OrderByTopSaleDESC",
      "paginationDotsVisibility": "hidden",
      "productList": {
        "maxItems": 10,
        "itemsPerPage": 5,
        "minItemsPerPage": 1.5,
        "scroll": "BY_PAGE",
        "arrows": true,
        "titleText": ""
      }
    }
  },

  "flex-layout.row#info-card-home": {
    "children": ["info-card#home"],
    "props": {
      "blockClass": "info-card-home"
    }
  },

  "info-card#home": {
    "props": {
      "id": "info-card-home",
      "isFullModeStyle": true,
      "textPosition": "left",
      "imageUrl": "https://beautytheme.vteximg.com.br/arquivos/ids/155739",
      "headline": "How to take care of a black skin?",
      "callToActionText": "LEARN MORE",
      "callToActionUrl": "/sale/d",
      "blockClass": "info-card-home",
      "textAlignment": "left"
    }
  }

  // "info-card#home-mobile": {
  //   "props": {
  //     "id": "info-card-home",
  //     "isFullModeStyle": false,
  //     "textPosition": "left",
  //     "imageUrl": "https://beautytheme.vteximg.com.br/arquivos/ids/155726-500-auto",
  //     "headline": "How to take care of a black skin?",
  //     "callToActionText": "LEARN MORE",
  //     "callToActionUrl": "/sale/d",
  //     "blockClass": "info-card-home-mobile",
  //     "textAlignment": "left"
  //   }
  // }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/home/main-banners.jsonc from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#main-banners": {
    "children": ["flex-layout.col#infocard01", "flex-layout.col#infocard02"],
    "props": {
      "blockClass": "infocard",
      "colSpacing": "equal",
      "marginTop": 6,
      "marginBottom": 6
    }
  },
  "flex-layout.col#infocard01": {
    "children": ["info-card#banner01"],
    "props": {
      "horizontalAlign": "right"
    }
  },
  "flex-layout.col#infocard02": {
    "children": ["info-card#banner02"],
    "props": {
      "horizontalAlign": "left"
    }
  },
  "info-card#banner01": {
    "props": {
      // "headline": "Beauty inspired by real life.",
      "isFullModeStyle": true,
      "callToActionMode": "none",
      "textPosition": "center",
      "imageUrl": "https://slack-imgs.com/?c=1&o1=ro&url=https%3A%2F%2Fbeautytheme.vteximg.com.br%2Farquivos%2Fids%2F155720",
      "blockClass": "main1"
    }
  },
  "info-card#banner02": {
    "props": {
      // "headline": "SKIN FIRST",
      "isFullModeStyle": true,
      "callToActionMode": "none",
      "textPosition": "center",
      "imageUrl": "https://beautytheme.vteximg.com.br/arquivos/ids/155719",
      "blockClass": "main2"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/home/deals.json from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#deals": {
    "children": [
      "flex-layout.col#deals1",
      "flex-layout.col#deals2",
      "flex-layout.col#deals3",
      "flex-layout.col#deals4"
    ],
    "props": {
      "blockClass": "deals"
    }
  },

  "flex-layout.col#deals1": {
    "children": [
      "image#deal1",
      "rich-text#deal1"
    ]
  },
  "image#deal1": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal1": {
    "props": {
      "text": "Free shipping",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals2": {
    "children": [
      "image#deal2",
      "rich-text#deal2"
    ]
  },
  "image#deal2": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/delivery-fast.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal2": {
    "props": {
      "text": "One day delivery",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals3": {
    "children": [
      "image#deal3",
      "rich-text#deal3"
    ]
  },
  "image#deal3": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/store.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal3": {
    "props": {
      "text": "Pick up in store",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals4": {
    "children": [
      "image#deal4",
      "rich-text#deal4"
    ]
  },
  "image#deal4": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/coupon.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal4": {
    "props": {
      "text": "Exclusive deals",
      "blockClass": "deals"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/home/secondary-banners.jsonc from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#secondary-banners": {
    "children": ["flex-layout.col#secondary-info-card-1", "flex-layout.col#secondary-info-card-2"],
    "props": {
      "blockClass": "infocard",
      "colSpacing": "equal",
      "marginTop": 6,
      "marginBottom": 6
    }
  },
  "flex-layout.col#secondary-info-card-1": {
    "children": ["info-card#secondary-banner-1"],
    "props": {
      "horizontalAlign": "right"
    }
  },
  "flex-layout.col#secondary-info-card-2": {
    "children": ["info-card#secondary-banner-2"],
    "props": {
      "horizontalAlign": "left"
    }
  },
  "info-card#secondary-banner-1": {
    "props": {
      // "headline": "Beauty inspired by real life.",
      "isFullModeStyle": true,
      "callToActionMode": "none",
      "textPosition": "center",
      "imageUrl": "https://beautytheme.vteximg.com.br/arquivos/ids/155722",
      "blockClass": "main1"
    }
  },
  "info-card#secondary-banner-2": {
    "props": {
      // "headline": "SKIN FIRST",
      "isFullModeStyle": true,
      "callToActionMode": "none",
      "textPosition": "center",
      "imageUrl": "https://beautytheme.vteximg.com.br/arquivos/ids/155723",
      "blockClass": "main2"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/footer/footer.json from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer": {
    "blocks": [
      "footer-layout.desktop",
      "footer-layout.mobile"
    ]
  },
  "footer-layout.desktop": {
    "children": [
      "flex-layout.row#footer-1-desktop",
      "flex-layout.row#footer-2-desktop",
      "flex-layout.row#footer-3-desktop"
    ]
  },
  "flex-layout.row#footer-1-desktop": {
    "children": [
      "flex-layout.col#info-footer-col",
      "flex-layout.col#mailing-list-footer-col"
    ],
    "props": {
      "blockClass": "menu-row",
      "paddingTop": 6,
      "paddingBottom": 3,
      "colSizing": "auto"
    }
  },
  "flex-layout.col#info-footer-col": {
    "children": [
      "flex-layout.row#info-footer-row"
    ]
  },
  "flex-layout.row#info-footer-row": {
    "children": [
      "rich-text#about-us-col",
      "rich-text#customer-service-col",
      "rich-text#connect-col"
    ]
  },
  "rich-text#about-us-col": {
    "props": {
      "textAlignment": "left",
      "textPosition": "left",
      "text": "### About Us\n[About Us](https://help.vtex.com/en/faq/what-is-vtex-io)\n[Regimen](https://help.vtex.com/en/faq/what-is-vtex-io)\n[Shop all](https://help.vtex.com/en/faq/what-is-vtex-io)\n"
    }
  },
  "rich-text#customer-service-col": {
    "props": {
      "textAlignment": "left",
      "textPosition": "left",
      "text": "### Services\n[FAQ](https://help.vtex.com/en/faq/what-is-vtex-io)\n[Returns](https://help.vtex.com/en/faq/what-is-vtex-io)\n"
    }
  },
  "rich-text#connect-col": {
    "props": {
      "textAlignment": "left",
      "textPosition": "left",
      "text": "### Connect\n[@afrodeities](https://help.vtex.com/en/faq/what-is-vtex-io)"
    }
  },
  "flex-layout.col#mailing-list-footer-col": {
    "children": [
      "newsletter#footer-newsletter"
    ]
  },
  "newsletter#footer-newsletter": {
    "props": {
      "label": "Join Our Mailing List",
      "placeholder": "ENTER YOUR E-MAIL",
      "submit": "SEND"
    }
  },
  "social-networks": {
    "props": {
      "socialNetworks": [
        {
          "name": "Facebook",
          "url": "https://www.facebook.com/vtexonline/"
        },
        {
          "name": "Instagram",
          "url": "https://www.instagram.com/vtextruecloud/"
        },
        {
          "name": "Twitter",
          "url": "https://twitter.com/vtexonline"
        },
        {
          "name": "Youtube",
          "url": "https://www.youtube.com/user/VTEXTV"
        }
      ]
    }
  },
  "flex-layout.row#footer-2-desktop": {
    "children": [
      "accepted-payment-methods"
    ],
    "props": {
      "blockClass": "payment-methods"
    }
  },
  "accepted-payment-methods": {
    "props": {
      "paymentMethods": [
        "MasterCard",
        "Visa",
        "Diners Club"
      ]
    }
  },
  "flex-layout.row#footer-3-desktop": {
    "children": [
      "rich-text#footer"
    ],
    "props": {
      "blockClass": "credits"
    }
  },
  "rich-text#footer": {
    "props": {
      "text": "All stock and product photos are from photos.icons8.com",
      "blockClass": "footer"
    }
  },
  "footer-layout.mobile": {
    "children": [
      "flex-layout.row#1-footer-mobile",
      "flex-layout.row#2-footer-mobile"
    ]
  },
  "flex-layout.row#2-footer-mobile": {
    "children": [
      "flex-layout.col#footer-1-mobile"
    ],
    "props": {
      "blockClass": "payment-methods",
      "paddingTop": 4,
      "paddingBottom": 4
    }
  },
  "flex-layout.col#footer-1-mobile": {
    "children": [
      "accepted-payment-methods",
      "social-networks",
      "rich-text#footer-mobile"
    ],
    "props": {
      "blockClass": "payment-methods",
      "paddingTop": 4,
      "paddingBottom": 4,
      "rowGap": 4
    }
  },
  "flex-layout.row#1-footer-mobile": {
    "props": {
      "paddingTop": 4,
      "paddingBottom": 4
    },
    "children": [
      "vtex.menu@2.x:menu#footer-mobile"
    ]
  },
  "rich-text#footer-mobile": {
    "props": {
      "text": "All stock and product photos are from photos.icons8.com",
      "blockClass": "footer"
    }
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/footer/menu.json from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#Products": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#news",
      "menu-item#blackfriday",
      "menu-item#sale",
      "menu-item#personalization"
    ]
  },
  "menu-item#news": {
    "props": {
      "id": "menu-item-news",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "News",
        "text": "News"
      }
    }
  },
  "menu-item#blackfriday": {
    "props": {
      "id": "menu-item-black-friday",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "BlackFriday",
        "text": "Black Friday"
      }
    }
  },
  "menu-item#sale": {
    "props": {
      "id": "menu-item-sale",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Sale",
        "text": "Sale"
      }
    }
  },
  "menu-item#personalization": {
    "props": {
      "id": "menu-item-personalization",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Personalization",
        "text": "Personalization"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-decoration": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#smartphones": {
    "props": {
      "id": "menu-item-smartphones",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/smartphones",
        "noFollow": true,
        "tagTitle": "Smartphones",
        "text": "Smartphones"
      }
    }
  },

  "menu-item#videogames": {
    "props": {
      "id": "menu-item-videogames",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/videogames",
        "noFollow": true,
        "tagTitle": "Videogames",
        "text": "Videogames"
      }
    }
  },

  "menu-item#tvs": {
    "props": {
      "id": "menu-item-tvs",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/tvs",
        "noFollow": true,
        "tagTitle": "TVs",
        "text": "TVs"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-bags": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#bags",
      "menu-item#backpacks",
      "menu-item#necessaire"
    ]
  },

  "menu-item#bags": {
    "props": {
      "id": "menu-item-bags",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/d",
        "noFollow": true,
        "tagTitle": "Bags",
        "text": "Bags"
      }
    }
  },

  "menu-item#backpacks": {
    "props": {
      "id": "menu-item-backpacks",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/backpacks",
        "noFollow": true,
        "tagTitle": "Backpacks",
        "text": "Backpacks"
      }
    }
  },

  "menu-item#necessaire": {
    "props": {
      "id": "menu-item-necessaire",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/necessaire",
        "noFollow": true,
        "tagTitle": "Necessaire",
        "text": "Necessaire"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-clothing": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#clothing",
      "menu-item#shorts",
      "menu-item#tank-tops",
      "menu-item#shirts",
      "menu-item#sweatshirt",
      "menu-item#cropped"
    ]
  },

  "vtex.menu@2.x:menu#footer-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#clothing-mobile",
      "menu-item#decoration-mobile",
      "menu-item#sale-mobile"
    ]
  },

  "menu-item#clothing-mobile": {
    "props": {
      "id": "menu-item-category-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/d",
        "noFollow": true,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#clothing"]
  },
  "vtex.menu@2.x:submenu.accordion#clothing": {
    "children": ["vtex.menu@2.x:menu#clothing-accordion"]
  },

  "vtex.menu@2.x:menu#clothing-accordion": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#shorts",
      "menu-item#tank-tops",
      "menu-item#shirts",
      "menu-item#sweatshirt",
      "menu-item#cropped"
    ]
  },

  "menu-item#decoration-mobile": {
    "props": {
      "itemProps": {
        "tagTitle": "Decoration",
        "text": "Decoration"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"]
  },
  "vtex.menu@2.x:submenu.accordion#decoration": {
    "children": ["vtex.menu@2.x:menu#footer-decoration-mobile"]
  },

  "vtex.menu@2.x:menu#footer-decoration-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#sale-mobile": {
    "props": {
      "itemProps": {
        "tagTitle": "Sale",
        "text": "Sale"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#sale"]
  },
  "vtex.menu@2.x:submenu.accordion#sale": {
    "children": ["vtex.menu@2.x:menu#footer-sale-mobile"]
  },

  "vtex.menu@2.x:menu#footer-sale-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#clothing": {
    "props": {
      "id": "menu-item-category-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/d",
        "noFollow": true,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    }
  },

  "menu-item#shorts": {
    "props": {
      "id": "menu-item-shorts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/shorts",
        "noFollow": false,
        "tagTitle": "Shorts",
        "text": "Shorts"
      }
    }
  },

  "menu-item#tank-tops": {
    "props": {
      "id": "menu-item-tank-tops",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/tank-tops",
        "noFollow": false,
        "tagTitle": "Tank tops",
        "text": "Tank tops"
      }
    }
  },

  "menu-item#shirts": {
    "props": {
      "id": "menu-item-shirts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/shirts",
        "noFollow": false,
        "tagTitle": "Shirts",
        "text": "Shirts"
      }
    }
  },

  "menu-item#sweatshirt": {
    "props": {
      "id": "menu-item-sweat-shirts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/sweatshirt",
        "noFollow": false,
        "tagTitle": "Sweatshirt",
        "text": "Sweatshirt"
      }
    }
  },

  "menu-item#cropped": {
    "props": {
      "id": "menu-item-cropped",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/cropped",
        "noFollow": false,
        "tagTitle": "Cropped",
        "text": "Cropped"
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/header/category-menu.json from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#category-menu": {
    "children": [
      "menu-item#category-hair",
      "menu-item#category-make-up",
      "menu-item#category-perfume"
    ]
  },
  "menu-item#category-hair": {
    "props": {
      "id": "menu-item-category-hair",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/hair/",
        "noFollow": true,
        "tagTitle": "Hair",
        "text": "HAIR"
      }
    }
  },
  "vtex.menu@2.x:submenu#category-hair": {
    "props": {
      "width": "auto"
    },
    "children": [
      "vtex.menu@2.x:menu#category-hair"
    ]
  },
  "vtex.menu@2.x:menu#category-hair": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#category-hair-hats",
      "menu-item#category-hair-shoes",
      "menu-item#category-hair-bags"
    ]
  },
  "menu-item#category-hair-hats": {
    "props": {
      "id": "menu-item-category-hair-hats",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/hats/",
        "noFollow": true,
        "tagTitle": "Hats",
        "text": "Hats"
      }
    }
  },
  "menu-item#category-hair-shoes": {
    "props": {
      "id": "menu-item-category-hair-shoes",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/shoes/",
        "noFollow": true,
        "tagTitle": "Shoes",
        "text": "Shoes"
      }
    }
  },
  "menu-item#category-hair-bags": {
    "props": {
      "id": "menu-item-category-hair-bags",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/bags/",
        "noFollow": true,
        "tagTitle": "Bags",
        "text": "Bags"
      }
    }
  },
  "menu-item#category-make-up": {
    "props": {
      "id": "menu-item-category-make-up",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/make-up",
        "noFollow": true,
        "tagTitle": "Make-Up",
        "text": "MAKE-UP"
      }
    }
  },
  "menu-item#category-perfume": {
    "props": {
      "id": "menu-item-category-perfume",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/perfume",
        "noFollow": true,
        "tagTitle": "Perfume",
        "text": "PERFUME"
      }
    }
  },
  "vtex.menu@2.x:submenu#category-perfume": {
    "props": {
      "width": "100%"
    },
    "children": [
      "vtex.menu@2.x:menu#category-perfume",
      "info-card#home"
    ]
  },
  "vtex.menu@2.x:menu#category-perfume": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#category-hair-hats",
      "menu-item#category-hair-shoes"
    ]
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/header/header.jsonc from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "header": {
    "blocks": ["header-layout.desktop", "header-layout.mobile"]
  },
  "header.full": {
    "blocks": ["header-layout.desktop", "header-layout.mobile"]
  },
  "header-layout.desktop": {
    "children": ["header-row#1-desktop", "header-row#4-desktop"]
  },
  "header-row#1-desktop": {
    "children": ["telemarketing"],
    "props": {
      "fullWidth": true
    }
  },
  // "header-row#3-desktop": {
  //   "children": [
  //     "vtex.menu@2.x:menu#websites",
  //     "header-spacer",
  //     "vtex.menu@2.x:menu#institutional"
  //   ],
  //   "props": {
  //     "blockClass": "menu-link",
  //     "inverted": "true"
  //   }
  // },
  "header-row#4-desktop": {
    "children": [
      "vtex.menu@2.x:menu#category-menu",
      "header-spacer",
      "logo#desktop",
      "header-spacer",
      "search-bar",
      "locale-switcher",
      "login",
      "minicart"
    ],
    "props": {
      "sticky": true,
      "blockClass": "main-header"
    }
  },
  "logo#desktop": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://beautytheme.vteximg.com.br/arquivos/ids/155737",
      "width": "275"
    }
  },
  "minicart": {
    "blocks": ["product-summary"],
    "props": {
      "type": "popup",
      "showRemoveButton": true,
      "showDiscount": true,
      "showSku": true,
      "labelMiniCartEmpty": "",
      "labelButtonFinishShopping": "Go to checkout",
      "enableQuantitySelector": true,
      "maxQuantity": 10,
      "labelClasses": "gray"
    }
  },
  "header-layout.mobile": {
    "children": ["header-row#1-mobile"]
  },
  "header-row#1-mobile": {
    "children": ["drawer", "logo#mobile", "header-spacer", "login", "minicart"],
    "props": {
      "sticky": true,
      "blockClass": "main-header-mobile"
    }
  },
  "drawer": {
    "children": ["menu#drawer"]
  },
  "menu#drawer": {
    "children": ["menu-item#category-hair", "menu-item#category-make-up", "menu-item#category-perfume"],
    "props": {
      "orientation": "vertical"
    }
  },
  "logo#mobile": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://beautytheme.vteximg.com.br/arquivos/ids/155737",
      "width": "70"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of storetheme-black-beauty/store/blocks/header/top-menu.jsonc from the storetheme-black-beauty VTEX app.

[Assistant]
Here's the implementation:

```json
{
  // "vtex.menu@2.x:menu#websites": {
  //   "children": [
  //     "menu-item#shop",
  //     "menu-item#about-us"
  //   ]
  // },
  // "menu-item#shop": {
  //   "props": {
  //     "id": "menu-item-shop",
  //     "type": "custom",
  //     "iconId": null,
  //     "highlight": false,
  //     "itemProps": {
  //       "type": "internal",
  //       "href": "#",
  //       "noFollow": false,
  //       "tagTitle": "Shop",
  //       "text": "Shop"
  //     }
  //   }
  // },
  // "menu-item#about-us": {
  //   "props": {
  //     "id": "menu-item-about-us",
  //     "type": "custom",
  //     "iconId": null,
  //     "highlight": false,
  //     "itemProps": {
  //       "type": "internal",
  //       "href": "/about-us",
  //       "noFollow": false,
  //       "tagTitle": "about-us",
  //       "text": "About Us"
  //     }
  //   }
  // },
  // "vtex.menu@2.x:menu#institutional": {
  //   "children": [
  //     "menu-item#vtex-website"
  //   ]
  // },
  // "menu-item#vtex-website": {
  //   "props": {
  //     "id": "menu-item-vtex-website",
  //     "type": "custom",
  //     "iconId": null,
  //     "highlight": false,
  //     "itemProps": {
  //       "type": "external",
  //       "href": "http://vtex.com",
  //       "noFollow": false,
  //       "tagTitle": "visit vtex.com",
  //       "text": "visit vtex.com"
  //     }
  //   }
  // }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of condition-layout/messages/pt.json from the condition-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.condition-layout.wrapper": "Condição",
  "admin/editor.condition-layout.wrapper.product": "Condição de produto",
  "admin/editor.condition-layout.else": "Bloco Padrão",
  "admin/editor.condition-layout.condition": "Bloco de condições",
  "admin/editor.condition-layout.enabled.title": "Ativado",
  "admin/editor.condition-layout.enabled.description": "Uma condição desativada é sempre considerada falsa e seus filhos não serão renderizados.",
  "admin/editor.condition-layout.conditions": "Condições",
  "admin/editor.condition-layout.subject": "Sujeito",
  "admin/editor.condition-layout.verb": "Verbo (operador)",
  "admin/editor.condition-layout.object": "Objeto",
  "admin/editor.condition-layout.match": "Tipo de match",
  "admin/editor.condition-layout.product.subject.productId": "ID do produto",
  "admin/editor.condition-layout.product.subject.categoryId": "ID da categoria",
  "admin/editor.condition-layout.product.subject.brandId": "ID da marca",
  "admin/editor.condition-layout.product.subject.productClusters": "Clusters de produtos",
  "admin/editor.condition-layout.product.subject.categoryTree": "CategoryTree",
  "admin/editor.condition-layout.product.subject.specificationProperties": "Propriedades de especificação",
  "admin/editor.condition-layout.product.subject.selectedItemId": "ID do item selecionado",
  "admin/editor.condition-layout.verb.is": "é",
  "admin/editor.condition-layout.verb.is-not": "não é",
  "admin/editor.condition-layout.verb.contains": "contém",
  "admin/editor.condition-layout.verb.does-not-contain": "não contém"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of condition-layout/messages/en.json from the condition-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.condition-layout.wrapper": "Condition wrapper",
  "admin/editor.condition-layout.wrapper.product": "Product Condition",
  "admin/editor.condition-layout.else": "Default block",
  "admin/editor.condition-layout.condition": "Condition block",
  "admin/editor.condition-layout.enabled.title": "Enabled",
  "admin/editor.condition-layout.enabled.description": "A disabled condition is always considered false and it's children will not be rendered.",
  "admin/editor.condition-layout.conditions": "Conditions",
  "admin/editor.condition-layout.subject": "Subject",
  "admin/editor.condition-layout.verb": "Verb (operator)",
  "admin/editor.condition-layout.object": "Object",
  "admin/editor.condition-layout.match": "Match type",
  "admin/editor.condition-layout.product.subject.productId": "Product ID",
  "admin/editor.condition-layout.product.subject.categoryId": "Category ID",
  "admin/editor.condition-layout.product.subject.brandId": "Brand ID",
  "admin/editor.condition-layout.product.subject.productClusters": "Product clusters",
  "admin/editor.condition-layout.product.subject.categoryTree": "Category tree",
  "admin/editor.condition-layout.product.subject.specificationProperties": "Specification Properties",
  "admin/editor.condition-layout.product.subject.selectedItemId": "Selected Item ID",
  "admin/editor.condition-layout.verb.is": "is",
  "admin/editor.condition-layout.verb.is-not": "is not",
  "admin/editor.condition-layout.verb.contains": "contains",
  "admin/editor.condition-layout.verb.does-not-contain": "does not contain"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of condition-layout/messages/context.json from the condition-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.condition-layout.wrapper": "Condition wrapper",
  "admin/editor.condition-layout.wrapper.product": "Product Condition",
  "admin/editor.condition-layout.else": "Default block",
  "admin/editor.condition-layout.condition": "Condition block",
  "admin/editor.condition-layout.enabled.title": "Enabled",
  "admin/editor.condition-layout.enabled.description": "A disabled condition is always considered false and it's children will not be rendered.",
  "admin/editor.condition-layout.conditions": "Conditions",
  "admin/editor.condition-layout.subject": "Subject",
  "admin/editor.condition-layout.verb": "Verb (operator)",
  "admin/editor.condition-layout.object": "Object",
  "admin/editor.condition-layout.match": "Match type",
  "admin/editor.condition-layout.product.subject.productId": "Product ID",
  "admin/editor.condition-layout.product.subject.categoryId": "Category ID",
  "admin/editor.condition-layout.product.subject.brandId": "Brand ID",
  "admin/editor.condition-layout.product.subject.productClusters": "Product clusters",
  "admin/editor.condition-layout.product.subject.categoryTree": "Category tree",
  "admin/editor.condition-layout.product.subject.specificationProperties": "Specification Properties",
  "admin/editor.condition-layout.product.subject.selectedItemId": "Selected Item ID",
  "admin/editor.condition-layout.verb.is": "is",
  "admin/editor.condition-layout.verb.is-not": "is not",
  "admin/editor.condition-layout.verb.contains": "contains",
  "admin/editor.condition-layout.verb.does-not-contain": "does not contain"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of condition-layout/messages/es.json from the condition-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.condition-layout.wrapper": "Envoltura de condición",
  "admin/editor.condition-layout.wrapper.product": "Condición del producto",
  "admin/editor.condition-layout.else": "Bloque estándar",
  "admin/editor.condition-layout.condition": "Bloque de condición",
  "admin/editor.condition-layout.enabled.title": "Habilitado",
  "admin/editor.condition-layout.enabled.description": "Una condición deshabilitada siempre se considera falsa y sus hijos no se procesarán.",
  "admin/editor.condition-layout.conditions": "Condiciones",
  "admin/editor.condition-layout.subject": "Tema",
  "admin/editor.condition-layout.verb": "Verbo (operador)",
  "admin/editor.condition-layout.object": "Objeto",
  "admin/editor.condition-layout.match": "Tipo de match",
  "admin/editor.condition-layout.product.subject.productId": "ID de producto",
  "admin/editor.condition-layout.product.subject.categoryId": "ID de categoria",
  "admin/editor.condition-layout.product.subject.brandId": "ID de marca",
  "admin/editor.condition-layout.product.subject.productClusters": "Agrupaciones de productos",
  "admin/editor.condition-layout.product.subject.categoryTree": "CategoryTree",
  "admin/editor.condition-layout.product.subject.specificationProperties": "Propiedades de especificación",
  "admin/editor.condition-layout.product.subject.selectedItemId": "ID del artículo seleccionado",
  "admin/editor.condition-layout.verb.is": "es",
  "admin/editor.condition-layout.verb.is-not": "no es",
  "admin/editor.condition-layout.verb.contains": "contiene",
  "admin/editor.condition-layout.verb.does-not-contain": "no contiene"
}

```