[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 lomadee/react/typings/events.d.ts from the lomadee VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface PixelMessage extends MessageEvent {
  data:
    | ProductViewData
    | ProductClickData
    | OrderPlacedData
    | PageViewData
    | ProductImpressionData
    | AddToCartData
    | RemoveToCartData
    | CategoryViewData
    | DepartmentViewData
    | PageInfoData
    | internalSiteSearchView;
}

export interface EventData {
  event: string;
  eventName: string;
  currency: string;
}

export interface PageViewData extends EventData {
  event: "pageView";
  eventName: "vtex:pageView";
  pageTitle: string;
  pageUrl: string;
  referrer: string;
}

export interface PageInfoData extends EventData {
  event: "pageInfo";
  eventName: "vtex:pageInfo";
  eventType: string;
  accountName: string;
  pageCategory: string;
  pageDepartment: string;
  pageFacets: string[];
  pageTitle: string;
  pageUrl: string;
}

export interface CategoryViewData extends EventData {
  event: "categoryView";
  eventName: "vtex:categoryView";
  products: Product[];
}

export interface DepartmentViewData extends EventData {
  event: "departmentView";
  eventName: "vtex:departmentView";
  products: Product[];
}

export interface AddToCartData extends EventData {
  event: "addToCart";
  eventName: "vtex:addToCart";
  items: AddToCartProduct[];
}

export interface RemoveToCartData extends EventData {
  event: "removeFromCart";
  eventName: "vtex:removeFromCart";
  items: any[];
}

export interface OrderPlacedData extends Order, EventData {
  event: "orderPlaced";
  eventName: "vtex:orderPlaced";
}

export interface ProductViewData extends EventData {
  event: "productView";
  eventName: "vtex:productView";
  product: Product;
}

export interface InternalSiteSearchView extends EventData {
  event: "internalSiteSearchView";
  eventName: "vtex:internalSiteSearchView";
  products: Product[];
}

export interface ProductClickData extends EventData {
  event: "productClick";
  eventName: "vtex:productClick";
  product: Product;
}

export interface ProductImpressionData extends EventData {
  event: "productImpression";
  eventName: "vtex:productImpression";
  product: Product;
  position: number;
  list: string;
}

export interface Order {
  currency: string;
  accountName: string;
  orderGroup: string;
  salesChannel: string;
  coupon: string;
  visitorType: string;
  visitorContactInfo: string[];
  transactionId: string;
  transactionDate: string;
  transactionAffiliation: string;
  transactionTotal: number;
  transactionShipping: number;
  transactionTax: number;
  transactionCurrency: string;
  transactionPaymentType: PaymentType[];
  transactionShippingMethod: ShippingMethod[];
  transactionProducts: ProductOrder[];
  transactionPayment: {
    id: string;
  };
}

interface PaymentType {
  group: string;
  paymentSystemName: string;
  installments: number;
  value: number;
}

interface ShippingMethod {
  itemId: string;
  selectedSla: string;
}

interface ProductOrder {
  id: string;
  name: string;
  sku: string;
  skuRefId: string;
  skuName: string;
  brand: string;
  brandId: string;
  seller: string;
  sellerId: string;
  category: string;
  categoryId: string;
  categoryTree: string[];
  categoryIdTree: string[];
  originalPrice: number;
  price: number;
  sellingPrice: number;
  tax: number;
  quantity: number;
  components: any[];
  measurementUnit: string;
  unitMultiplier: number;
}

export interface Product {
  brand: string;
  categoryId?: string; // inconsistency
  categories: string[];
  productId: string;
  productName: string;
  selectedSku?: string; // inconsistency
  items: Item[];
  sku: Item;
  [key: string]: any;
}

interface Item {
  itemId: string;
  name: string;
  seller?: Seller;
  [key: string]: any;
}

interface Seller {
  commertialOffer: CommertialOffer;
  AvailableQuantity: number;
  [key: string]: any;
}

interface CommertialOffer {
  Price: number;
  [key: string]: any;
}

interface AddToCartProduct {
  brand: string;
  name: string;
  price: number;
  quantity: number;
  skuId: string;
  variant: string;
}

```


[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 lomadee/react/typings/vtex.render-runtime.d.ts from the lomadee VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module "vtex.render-runtime" {
  export const canUseDOM: boolean;
}

```


[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 lomadee/react/typings/global.d.ts from the lomadee VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Window extends Window {
  advertiserId: string;
  lomadeeEventId: string;
}

```


[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 lomadee/react/helpers/index.ts from the lomadee VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Product } from "../typings/events";

export function getProductPrice(product: Product) {
  let price;
  try {
    price = product.items[0].sellers[0].commertialOffer.Price;
  } catch {
    price = undefined;
  }
  return price;
}

export function getProductAvable(product: Product) {
  let quantity;
  try {
    quantity = product.items[0].sellers[0].commertialOffer.AvailableQuantity;
  } catch {
    quantity = undefined;
  }
  return quantity;
}

```


[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 black-friday-timer/messages/pt.json from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.base-store-component.title": "IO Base App",
  "editor.base-store-component.description": "Um componente de demonstração para apps do VTEX IO",
  "editor.base-store-component.title.title": "Título",
  "editor.base-store-component.title.description": "Especifique um título personalizado",
  "base.title": "Olá, Mundo!!",
  "base.change-value": "Troque seu valor: {value}",
  "example": "Isto é um exemplo"
}
```


[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 black-friday-timer/messages/en.json from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.base-store-component.title": "IO Base App",
  "editor.base-store-component.description": "A demo component for IO apps",
  "editor.base-store-component.title.title": "Title",
  "editor.base-store-component.title.description": "Specify a custom title",
  "base.title": "Hello, World!!",
  "base.change-value": "Change your value: {value}",
  "example": "This is an example"
}
```


[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 black-friday-timer/messages/context.json from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.base-store-component.title": "Title of IO Base App component",
  "editor.base-store-component.description": "Description of IO Base App component",
  "editor.base-store-component.title.title": "Title of title property",
  "editor.base-store-component.title.description": "Description of title property",
  "base.title": "Base title message to be shown when title is not provided via CMS",
  "base.change-value": "Text to be shown beside input component typed value"
}
```


[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 black-friday-timer/messages/es.json from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.base-store-component.title": "IO Base App",
  "editor.base-store-component.description": "Un componente de demostración para aplicaciones IO.",
  "editor.base-store-component.title.title": "Título",
  "editor.base-store-component.title.description": "Especifique un título personalizado",
  "base.title": "¡Hola Mundo!",
  "base.change-value": "Cambia tu valor: {value}",
  "example": "Esto es un ejemplo"
}
```


[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 black-friday-timer/pages/pages.json from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "pages": {
    "black-friday-timer": {
      "path": "/black-friday-timer",
      "extensible": true
    }
  },
  "extensions": {
    "black-friday-timer": {
      "component": "index"
    }
  }
}

```


[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 black-friday-timer/react/index.tsx from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'
import Timer from 'react-compound-timer'
import styles from './styles.css'
import Circles from './components/Circles'
import Logos from './components/Logos'

const BlackFridayTimer: StorefrontFunctionComponent = () => {
  if (typeof document === 'undefined' || typeof document === 'undefined') {
    return null
  }

  const blackFridayDate = new Date('11/29/2019')

  const today = new Date()

  const timeLeft = blackFridayDate.getTime() - today.getTime()

  const formatValue = (value: any) => {
    if (value < 10) {
      return `0${value}`
    }
    return `${value}`
  }

  return (
    <Fragment>
      <div className={`${styles.container2} flex flex-column pv6 ph4`}>
        <Circles />
      </div>
      <div className={`${styles.container} flex flex-column pv6 ph4`}>
        <Timer
          initialTime={timeLeft}
          direction="backward"
        >
          {() => (
            <React.Fragment>
              <p className={styles.days}>Faltam <Timer.Days /> dias para a Black Friday.</p>
            </React.Fragment>
          )}
        </Timer>
        <Timer
          initialTime={timeLeft}
          direction="backward"
          lastUnit="h"
        >
          {() => (
            <React.Fragment>
              <div className={styles.timer}>
                <Timer.Hours />:<Timer.Minutes formatValue={formatValue} />:<Timer.Seconds formatValue={formatValue} />
              </div>
            </React.Fragment>
          )}
        </Timer>
        <Logos />
      </div>
    </Fragment>

  )
}

export default BlackFridayTimer

```


[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 black-friday-timer/react/styles.css from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```css
.container,
.container2 {
  display: flex;
  position: fixed;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  color: white;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.container2 {
  background: #142032;
  top: -30vh;
  height: 160vh;
}

.days {
  z-index: 1;
  font-size: 1.5em;
}

.timer {
  z-index: 1;
  font-size: 5em;
  font-feature-settings: 'tnum';
}

.logos {
  margin-top: 6em;
}

@media (min-width: 992px) {
  .days {
    font-size: 2em;
  }

  .timer {
    font-size: 10em;
  }
}

@media (min-width: 1500px) {
  .days {
    font-size: 3em;
  }

  .timer {
    font-size: 16em;
  }
}

```


[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 black-friday-timer/react/package.json from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test",
    "lint": "tsc --noEmit && eslint --ext ts,tsx ."
  },
  "dependencies": {
    "@vtex/css-handles": "^1.0.0",
    "classnames": "^2.2.6",
    "ramda": "^0.26.1",
    "react": "^16.8.3",
    "react-compound-timer": "^1.1.15",
    "react-dom": "^16.8.3",
    "react-intl": "^2.7.2"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.7",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.5",
    "@types/prop-types": "^15.7.0",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.9.2",
    "@vtex/test-tools": "^1.1.0",
    "apollo-client": "^2.5.1",
    "eslint": "^5.16.0",
    "eslint-config-vtex-react": "^4.1.0",
    "prettier": "^1.18.2",
    "tslint-eslint-rules": "^5.4.0",
    "typescript": "3.5.2"
  }
}

```


[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 black-friday-timer/react/typings/storefront.d.ts from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent } from 'react'

declare global {
  interface StorefrontFunctionComponent<P = {}> extends FunctionComponent<P> {
    getSchema?(props: P): object
    schema?: object
  }

  interface StorefrontComponent<P = {}, S = {}> extends Component<P, S> {
    getSchema?(props: P): object
    schema: object
  }
}

```


[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 black-friday-timer/react/typings/vtex.render-runtime.d.ts from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* Typings for `render-runtime` */
declare module 'vtex.render-runtime' {
  import { Component, ComponentType, ReactElement, ReactType } from 'react'

  export interface NavigationOptions {
    page: string
    params?: any
  }

  export interface RenderContextProps {
    runtime: {
      navigate: (options: NavigationOptions) => void
    }
  }

  interface ExtensionPointProps {
    id: string
    [key: string]: any
  }

  export const ExtensionPoint: ComponentType<ExtensionPointProps>

  interface ChildBlockProps {
    id: string
  }

  export const ChildBlock: ComponentType<ChildBlockProps>
  export const useChildBlock = function({ id: string }): object {}

  export const Helmet: ReactElement
  export const Link: ReactType
  export const NoSSR: ReactElement
  export const RenderContextConsumer: ReactElement
  export const canUseDOM: boolean
  export const withRuntimeContext: <TOriginalProps extends {}>(
    Component: ComponentType<TOriginalProps & RenderContextProps>
  ) => ComponentType<TOriginalProps>
}

```


[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 black-friday-timer/react/typings/css.d.ts from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  const css: any
  export default css
}

```


[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 black-friday-timer/react/typings/graphql.d.ts from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.graphql' {
  import { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[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 black-friday-timer/react/typings/vtex.styleguide.d.ts from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  import { ComponentType } from 'react'

  export const Input: ComponentType<InputProps>

  interface InputProps {
    [key: string]: any
  }
}

```


[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 black-friday-timer/react/components/Circles.tsx from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import styles from '../styles.css'

const Circles: StorefrontFunctionComponent = () => {
  return (
    <svg className={styles.circles} version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 1800 1778.6" >
      <path fill="#f42165" d="M899.6 1487.1c-39.5 0-79-4-117.9-11.9-71.5-14.5-139.1-41.9-201-81.3l2.7-4.2c61.4 39.2 128.5 66.3 199.4 80.7 68.4 13.9 138.2 15.5 207.6 4.8 82.3-12.7 159.4-41.8 229.2-86.6 72.2-46.3 132.4-106.8 178.8-179.8 42.8-67.4 71.1-141 84.2-218.9 12.7-75.3 10.6-151.4-6-226.3l4.9-1.1c16.8 75.5 18.9 152.2 6.1 228.2-13.2 78.5-41.8 152.8-84.9 220.7-46.8 73.6-107.5 134.6-180.4 181.3-70.4 45.2-148.2 74.6-231.2 87.4-30.5 4.7-61.1 7-91.5 7zM331.5 1068.9c-52.2-167.8-28-348.8 66.3-496.5 38.2-60.1 86.2-112.3 142.5-155 54.4-41.2 115.1-72.6 180.6-93.3 168-53 349.8-29.1 498.8 65.5l-2.7 4.2c-147.7-93.8-328-117.4-494.6-64.9-64.9 20.5-125.1 51.7-179.1 92.5-55.9 42.3-103.4 94-141.3 153.7-93.5 146.5-117.5 326-65.8 492.4l-4.7 1.4z" /><path fill="#f42165" d="M899.6 1635.7c-41.1 0-82.2-3.4-123.1-10.3-98.1-16.5-190.8-52.2-275.7-106-91.9-58.5-168.1-134.3-226.5-225.3-28-43.6-51.5-90.4-69.8-139.1-18.2-48.3-31.4-98.6-39.3-149.6-13.5-87.3-11.5-175.3 6-261.4 18.1-89.3 52.3-173.8 101.6-251.1l4.2 2.7c-49 76.8-82.9 160.7-100.9 249.4-17.4 85.6-19.4 173-6 259.7 7.8 50.7 20.9 100.7 39 148.6 18.2 48.3 41.5 94.8 69.3 138.1 58 90.4 133.6 165.6 224.9 223.7 84.3 53.5 176.4 88.9 273.8 105.3 94.2 15.8 189.5 13.3 283.1-7.6l1.1 4.9c-53.4 12-107.6 18-161.7 18zM1527.3 1291l-4.2-2.7c117.3-184.8 146.9-410.3 81.2-618.8-25.7-81.2-64.6-156.6-115.8-224-53-69.9-117.6-129.4-192.2-176.8-183.3-117-407.8-147-616-82.3l-1.5-4.8c209.5-65.2 435.6-35 620.2 82.8 75.1 47.8 140.2 107.6 193.5 178 51.5 67.9 90.7 143.8 116.5 225.5 66.2 210 36.4 437.1-81.7 623.1z" /><path fill="#f42165" d="M29.4 1085.4c-25.2-113-28.3-228-9.1-341.8C40 626 82.8 514.7 147.4 413c35.2-55.3 76.4-106.7 122.4-152.7 44.8-44.7 94.5-84.7 147.8-118.9 52.3-33.6 108.4-61.7 166.8-83.7C642.2 35.8 702.6 20 763.8 10.5 868.5-5.6 974-3.2 1077.4 17.8c107.1 21.7 208.4 62.7 301.1 121.8l-2.7 4.2c-92.2-58.8-193-99.6-299.5-121.2C973.6 1.8 868.7-.6 764.6 15.5c-60.8 9.4-120.9 25.2-178.5 46.9-58 21.9-113.8 49.9-165.8 83.3-53 34-102.4 73.8-146.9 118.2-45.7 45.7-86.7 96.8-121.7 151.8C87.4 516.9 44.9 627.5 25.2 744.5c-19 113.1-16 227.5 9.1 339.9l-4.9 1zM899.8 1783.6c-167.5 0-333.5-47.3-478.6-139.5l2.7-4.2c144.3 91.6 309.4 138.7 475.9 138.7 89.5 0 179.5-13.6 267-41.2 97.5-30.9 188-77.6 269-139 83.9-63.6 155.3-141.2 212.3-230.8 35.8-56.2 65.3-116.1 87.6-178.3 21.6-60.4 36.7-123.4 44.6-187.2 7.8-62.6 8.9-126.3 3.2-189.3-5.6-62.6-18-124.7-36.6-184.7l4.8-1.5c18.8 60.3 31.2 122.8 36.8 185.8 5.7 63.4 4.6 127.5-3.2 190.4-8 64.1-23.1 127.5-44.9 188.3-22.4 62.5-52 122.8-88.1 179.3-57.3 90.1-129.1 168.2-213.5 232.1-81.4 61.7-172.4 108.7-270.5 139.8-87.9 27.6-178.4 41.3-268.5 41.3z" />
    </svg>
  )
}

export default Circles

```


[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 black-friday-timer/react/components/Logos.tsx from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import styles from '../styles.css'

const Logos: StorefrontFunctionComponent = () => {
  return (
    <div className={styles.logos}>
      <svg width="370" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><g clipPath="url(#clip0)" fill="#F8F7FC"><path d="M32.929.3H6.286C4.341.3 2.994 2.394 3.892 4.19l2.694 4.94h-4.79C.748 9.13 0 9.878 0 10.776c0 .3 0 .598.15.748L8.68 27.241c.45.898 1.497 1.198 2.395.748.3-.15.599-.448.748-.748l2.395-4.19 2.844 5.388a2.695 2.695 0 004.79 0L35.173 4.19C36.223 2.395 34.876.299 32.93.299zM20.955 10.626l-5.688 10.477c-.3.6-1.048.749-1.646.45-.15-.15-.45-.3-.45-.45L7.484 10.777c-.3-.599-.15-1.198.449-1.497.15-.15.3-.15.599-.15h11.525c.598 0 1.197.45 1.197 1.048-.15.15-.15.3-.3.449zM61.218 11.525h-2.844v9.58c0 .149-.15.299-.3.299H55.83c-.15 0-.3-.15-.3-.3v-9.579h-2.993c-.15 0-.299-.15-.299-.3V9.58c0-.15.15-.3.3-.3h8.83c.15 0 .3.15.3.3v1.647c-.15.15-.3.3-.45.3zM70.498 21.553c-.6.15-1.647.15-3.443.15-2.245 0-4.19-.599-4.19-3.592v-5.538c0-2.994 1.945-3.592 4.19-3.592 1.796 0 2.844.15 3.443.15.299 0 .299.149.299.299v1.496c0 .15-.15.3-.3.3h-3.592c-.748 0-1.047.3-1.047 1.197v1.497h4.49c.15 0 .3.15.3.3v1.646c0 .15-.15.3-.3.3h-4.49v1.795c0 .898.299 1.198 1.047 1.198h3.593c.15 0 .299.15.299.299v1.497c.15.449 0 .449-.3.598zM83.52 21.553h-2.695c-.15 0-.3 0-.449-.299l-2.395-3.592-2.095 3.592c-.15.15-.3.3-.45.3h-2.544c-.15 0-.299-.15-.299-.15v-.15l3.742-5.987-3.742-5.688v-.15c0-.15.15-.15.3-.15h2.694c.15 0 .299.15.449.3l2.245 3.293 2.095-3.293c.15-.15.3-.3.45-.3h2.544c.15 0 .3.15.3.15v.15l-3.743 5.688 3.892 5.987v.15c-.15.15-.15.15-.3.15zM48.046 9.28c-.15 0-.3.15-.3.15l-2.544 8.83c0 .15-.15.3-.3.3-.149 0-.149 0-.298-.3l-2.545-8.98c0-.15-.15-.15-.3-.15h-2.394c-.15 0-.3.15-.3.3 0 0 2.994 10.178 3.144 10.327.449 1.198 1.347 1.796 2.694 1.796 1.197 0 2.245-.598 2.694-1.796 0-.15 2.994-10.327 2.994-10.327 0-.15 0-.3-.15-.3l-2.395.15z" /><path d="M32.929.3H6.286C4.341.3 2.994 2.394 3.892 4.19l2.694 4.94h-4.79C.748 9.13 0 9.878 0 10.776c0 .3 0 .598.15.748L8.68 27.241c.45.898 1.497 1.198 2.395.748.3-.15.599-.448.748-.748l2.395-4.19 2.844 5.388a2.695 2.695 0 004.79 0L35.173 4.19C36.223 2.395 34.876.299 32.93.299zM20.955 10.626l-5.688 10.477c-.3.6-1.048.749-1.646.45-.15-.15-.45-.3-.45-.45L7.484 10.777c-.3-.599-.15-1.198.449-1.497.15-.15.3-.15.599-.15h11.525c.598 0 1.197.45 1.197 1.048-.15.15-.15.3-.3.449zM114.652.748h6.137c4.191 0 6.436 2.395 6.436 6.436v.6c0 3.89-1.646 5.388-3.293 5.986 2.096.599 4.191 2.545 4.191 6.586v.599c0 4.939-2.544 7.933-7.484 7.933h-5.987V.747zm5.538 11.974c3.443 0 4.64-1.496 4.64-4.939v-.449c0-2.844-1.347-4.64-4.49-4.64h-3.443v10.178h3.293v-.15zm-3.293 14.37h3.443c3.592 0 5.239-2.096 5.239-5.988v-.748c0-3.742-1.946-5.538-5.539-5.538h-3.143v12.273zM131.715.748h2.395v26.194h9.43l-.449 2.095h-11.376V.748zM149.976 19.159l-2.096 9.729h-2.395l6.287-28.29h3.143l6.586 28.29h-2.545l-2.095-9.73h-6.885zm6.585-2.096c-1.646-7.334-2.694-12.124-2.993-14.369h-.15c-.299 2.245-1.496 8.083-2.844 14.37h5.987zM177.816 21.254v.3c-.15 2.544-.899 7.783-6.886 7.783-6.585 0-7.034-6.586-7.034-12.124v-5.389C163.896 5.09 165.991.3 171.23.3c5.987 0 6.436 5.239 6.436 7.484v.3h-2.395v-.3c0-1.497-.299-5.388-4.041-5.388-4.191 0-4.79 5.089-4.79 9.43v5.388c0 5.238.749 10.028 4.79 10.028 3.592 0 4.191-3.592 4.34-5.688v-.299h2.246zM181.707.748h2.395v14.37c1.946-2.845 6.436-10.029 9.28-14.37h2.694l-7.633 11.526 8.082 16.763h-2.694l-6.885-14.668-2.694 4.041v10.627h-2.395V.748h-.15zM212.091 20.506c-1.347 5.837-2.843 8.83-9.13 8.83-1.646 0-3.293-.15-4.34-.448l1.047-4.94c.749.15 1.347.15 2.096.15 2.095 0 2.544-.748 3.143-3.293l4.49-20.356h7.035l-4.341 20.057zM241.278 13.47c-1.047 8.682-4.939 16.016-14.069 16.016-7.634 0-10.627-4.79-9.58-13.47C218.528 7.782 222.569 0 231.549 0c7.334 0 10.777 4.49 9.729 13.47zm-16.614 2.994c-.748 5.24.15 7.784 2.994 7.784 4.041 0 5.687-5.688 6.436-11.376.748-5.089.15-7.633-2.994-7.633-4.041 0-5.837 5.687-6.436 11.225zM255.498.449l-4.191 19.009c-.599 2.395-.3 4.79 2.843 4.79 2.994 0 3.892-2.246 4.341-4.79L262.682.449h7.035l-4.191 18.86c-1.347 5.986-3.742 10.177-12.124 10.177-8.082 0-10.477-4.19-9.13-10.477l4.191-18.56h7.035zM277.799 17.362l-2.544 11.526h-6.885L274.656.448h10.178c6.436 0 9.13 3.443 8.681 7.933-.449 3.742-2.694 5.837-5.388 6.735 2.096 1.048 2.844 3.293 1.946 7.334-.749 3.293-.898 5.24-1.048 6.586h-6.735c0-1.047.299-3.293 1.047-6.885.749-3.143.3-4.79-2.694-4.79h-2.844zm1.048-4.939h2.844c2.844 0 4.341-1.048 4.64-3.592.299-2.395-1.048-3.443-3.143-3.443h-2.844l-1.497 7.035zM293.366 29.037L299.652.6h8.083c.748 5.687 3.143 18.11 3.293 18.859h.149c.449-3.443 1.497-8.083 2.395-12.573L314.919.6h6.286l-6.286 28.438h-7.933c-.598-5.837-3.143-19.308-3.293-20.056h.15c-.599 3.592-1.497 8.531-2.694 13.47l-1.497 6.586h-6.286zM340.214 16.913h-10.627l-1.496 6.736h12.423l-1.946 5.238h-18.261L326.594.45h17.811l-1.197 5.388h-10.926l-1.198 5.688h10.627l-1.497 5.388zM348.447 29.037l2.245-10.328c0-.299.149-.748 0-1.197L346.501.45h7.184c.599 3.742 1.647 9.58 1.946 12.124 1.946-3.443 4.939-8.382 7.185-12.124h7.483l-12.123 17.512c-.15.3-.3.599-.449 1.048l-2.246 9.878h-7.034v.15z" /></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h370v29.786H0z" /></clipPath></defs></svg>
    </div>
  )
}

export default Logos

```


[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 black-friday-timer/react/__tests__/index.test.tsx from the black-friday-timer VTEX app.

[Assistant]
Here's the implementation:

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

describe('HelloWorld Component', () => {
  const { getByText } = render(<Component />)

  it('should render the example in TypeScript', () => {
    expect(getByText(/This is an example/)).toBeDefined()
  })
})

```


[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 tetrix/docs/README.md from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Tetrix

Tetrix is an unprecedented business and e-commerce challenge created by VTEX for Brazilian university undergrads and new-grads.

This is the repository for the challenge's landing page.

```


[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 tetrix/react/package.json from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.tetrix",
  "version": "0.0.0",
  "scripts": {
    "lint": "tsc --noEmit && eslint --ext ts,tsx .",
    "lint:locales": "intl-equalizer"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.17",
    "@fortawesome/free-brands-svg-icons": "^5.8.1",
    "@fortawesome/free-solid-svg-icons": "^5.8.1",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@typeform/embed": "^0.9.2",
    "nuka-carousel": "^4.5.4",
    "ramda": "^0.26.1",
    "react-anchor-link-smooth-scroll": "^1.0.12",
    "react-ga": "^2.5.7"
  },
  "devDependencies": {
    "@types/graphql": "^0.13.3",
    "@types/node": "^9.4.7",
    "@types/prop-types": "^15.5.2",
    "@types/react": "^16.3.16",
    "@types/react-dom": "^16.0.5",
    "@types/react-helmet": "^5.0.5",
    "@types/react-intl": "^2.3.5",
    "@vtex/intl-equalizer": "^2.3.0",
    "eslint": "^5.15.1",
    "eslint-config-vtex": "^10.1.0",
    "eslint-config-vtex-react": "^4.1.0",
    "graphql": "^0.13.0",
    "prettier": "^1.16.1",
    "prop-types": "^15.6.1",
    "react": "^16.2.0",
    "react-apollo": "^2.0.4",
    "react-dom": "^16.2.0",
    "react-intl": "^2.4.0",
    "tslint-config-vtex": "^2.0.0",
    "typescript": "3.5.2"
  }
}

```


[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 tetrix/react/ExampleQuestions.tsx from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'
import { Helmet } from 'vtex.render-runtime'

import Footer from './components/Footer'
import Logo from './images/tetrix_logo_dark.svg'
import favicon from './images/faviconTetrix.png'

const ExampleQuestions = () => (
  <Fragment>
      <Helmet>
        <title>Tetrix - O Desafio Universitário</title>
        <meta name="title" content="Tetrix" />
        <meta name="description" content="O desafio universitário da VTEX" />
        <meta name="theme-color" content="#F71963" />
        <link rel="icon" href={favicon} />
        <meta
          name="google-site-verification"
          content="WwFB6guJNrYrVApfMf_WmoCLNmptYJ_Vgk_i1DpgYLY"
        />
        {/* <!-- Open Graph / Facebook --> */}
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://tetrix.vtex.com/" />
        <meta property="og:title" content="Tetrix" />
        <meta
          property="og:description"
          content="O desafio universitário da VTEX"
        />
        {/* <!-- Twitter --> */}
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:url" content="https://tetrix.vtex.com/" />
        <meta property="twitter:title" content="Tetrix" />
        <meta
          property="twitter:description"
          content="O desafio universitário da VTEX"
        />
      </Helmet>
      <main className="w-100 bg-white">
        <div className="w-80-l w-90 center">
          <a href="/tetrix">
            <img src={Logo} className="w-33 pb6 pt8" />
          </a>
          <section className="pv4 lh-copy bb b--muted-3">
            <h1 className="t-heading-1 mt0 c-emphasis">Questão 1</h1>
            <p>O Dia dos Solteiros é um festival de entretenimento comemorado na China para celebrar a data de ser solteiro, sendo sempre realizado no dia 11 de novembro (11/11, em alusão ao fato de o número 1 representar uma pessoa sozinha)</p>
            <p>Em 2009, o Dia de Solteiros foi adotado pela gigante do e-commerce chinesa Alibaba como equivalente da "Black Friday" Atualmente, nesta data, milhões de chineses aproveitam os descontos, independentemente de estarem ou não solteiros, compram presentes para amigos, familiares ou para uso próprio.</p>
            <p>Qual a porcentagem de consumidores comprou produtos de marcas não-chinesas em 2018 no Tmall.com, o principal site de vendas B2C chinês:</p>
            <ul className="list">
              <li><p>a{')'} 20%</p></li>
              <li><p>b{')'} 30%</p></li>
              <li><p><strong>c{')'} 40%</strong></p></li>
              <li><p>d{')'} 50%</p></li>
            </ul>
          </section>
          <section className="pv4 lh-copy bb b--muted-3">
            <h1 className="t-heading-1 c-emphasis">Questão 2</h1>
            <p>Você dispõe de 32 motos com tanque completo. Cada moto consegue percorrer, utilizando todo o tanque, uma distância de 50 km. Qual a máxima distância que você pode percorrer utilizando todas as motos?</p>
            <ul className="list">
              <li><p>a{')'} 1600 km</p></li>
              <li><p>b{')'} 800 km</p></li>
              <li><p><strong>c{')'} 175 km</strong></p></li>
              <li><p>d{')'} 50 km</p></li>
            </ul>
          </section>
          <section className="pv4 lh-copy bb b--muted-3">
            <h1 className="t-heading-1 c-emphasis">Questão 3</h1>
            <p>Um brasileiro, um chileno e um francês se encontram em um elevador. Com qual das palavras abaixo eles concordariam em gênero e número?</p>
            <ul className="list">
              <li><p>a{')'} Dente</p></li>
              <li><p><strong>b{')'} Maçã</strong></p></li>
              <li><p>c{')'} Viagem</p></li>
              <li><p>d{')'} Conta</p></li>
            </ul>
          </section>
          <section className="pv4 lh-copy bb b--muted-3">
            <h1 className="t-heading-1 c-emphasis">Questão 4</h1>
            <p>Assinale a alternativa que contém uma informação incorreta:</p>
            <ul className="list">
              <li><p><strong>a{')'} Em seu segundo encontro com o ditador da Coreia do Norte, Kim Jong Un, Donald Trump tornou-se o primeiro presidente em exercício dos Estados Unidos a pisar em solo norte coreano.</strong></p></li>
              <li><p>b{')'} O governo da Nigéria, país mais populoso do continente e uma das maiores economias africanas, anunciou o interesse em criar um acordo de livre comércio com outros estados africanos, como estratégia para intensificar o comércio entre esses países.</p></li>
              <li><p>c{')'} A União Européia e o Mercosul anunciaram um histórico acordo de livre comércio. O acordo, cujas negociações começaram em 1999, visa a eliminar tarifas em mais de 90% das mercadorias comercializadas entre os blocos.</p></li>
              <li><p>d{')'} Na reunião da cúpula do G20, realizada no Japão, o presidente americano Donald Trump concordou em não aprovar novas tarifas para cerca de $300 bilhões em mercadorias chinesas. Em troca, o presidente chinês Xi Jinping concordou em aprovar a compra de novos produtos agrícolas americanos.</p></li>
            </ul>
          </section>
          <section className="pv4 lh-copy">
            <h1 className="t-heading-1 c-emphasis">Questão 5</h1>
            <p>IPO (Initial Public Offering) é uma sigla para Oferta Pública Inicial (ou OPI). Como o próprio nome diz, é quando uma empresa vende ações para o público pela primeira vez.</p>
            <p>Qual das empresas de tecnologia abaixo ainda não realizou seu IPO:</p>
            <ul className="list">
              <li><p>a{')'} Slack</p></li>
              <li><p>b{')'} Uber</p></li>
              <li><p>c{')'} Lyft</p></li>
              <li><p><strong>d{')'} Airbnb</strong></p></li>
            </ul>
          </section>
        </div>
      </main>
      <Footer />
    </Fragment>
)

export default ExampleQuestions

```


[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 tetrix/react/Tetrix.tsx from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent, Fragment, useEffect } from 'react'
import { Helmet } from 'vtex.render-runtime'
import ReactGA from 'react-ga'

import Header from './components/Header'
import About from './components/About'
import Video from './components/Video'
import Prizes from './components/Prizes'
import Jury from './components/Jury'
import FAQ from './components/FAQ'
import Footer from './components/Footer'
import HowItWorks from './components/HowItWorks'
import News from './components/News'
import favicon from './images/faviconTetrix.png'

function initializeReactGA() {
  ReactGA.initialize('UA-139462697-3')
  ReactGA.pageview('/')
}

const Tetrix: FunctionComponent = () => {
  useEffect(initializeReactGA)

  return (
    <Fragment>
      <Helmet>
        <title>Tetrix - O Desafio Universitário</title>
        <meta name="title" content="Tetrix" />
        <meta name="description" content="O desafio universitário da VTEX" />
        <meta name="theme-color" content="#F71963" />
        <link rel="icon" href={favicon} />
        <meta
          name="google-site-verification"
          content="WwFB6guJNrYrVApfMf_WmoCLNmptYJ_Vgk_i1DpgYLY"
        />
        {/* <!-- Open Graph / Facebook --> */}
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://tetrix.vtex.com/" />
        <meta property="og:title" content="Tetrix" />
        <meta
          property="og:description"
          content="O desafio universitário da VTEX"
        />
        {/* <!-- Twitter --> */}
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:url" content="https://tetrix.vtex.com/" />
        <meta property="twitter:title" content="Tetrix" />
        <meta
          property="twitter:description"
          content="O desafio universitário da VTEX"
        />
      </Helmet>
      <main className="w-100 bg-white">
        <div className="w-90-l center">
          <Header />
          <About />
          <Video />
          <HowItWorks />
          <Prizes />
          <Jury />
          <News/>
          <FAQ />
        </div>
      </main>
      <Footer />
    </Fragment>
  )
}

export default Tetrix

```


[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 tetrix/store/interfaces.json from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "tetrix": {
    "blocks": [
      "tetrix.landing"
    ]
  },
  "tetrix.landing": {
    "component": "Tetrix"
  },
  "tetrix.examples": {
    "component": "ExampleQuestions"
  }
}

```


[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 tetrix/store/routes.json from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "tetrix.landing": {
    "path": "/tetrix",
    "cname": "tetrix.vtex.com"
  },
  "tetrix.examples": {
    "path": "/tetrix/examples"
  }
}

```


[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 tetrix/react/typings/jpg.d.ts from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.jpg' {
  const path: string
  export default path
}

```


[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 tetrix/react/typings/png.d.ts from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.png' {
  const path: string
  export default path
}

```


[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 tetrix/react/typings/vtex.render-runtime.d.ts from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* Typings for `render-runtime` */
declare module 'vtex.render-runtime' {
  import { Component, ReactElement } from 'react'

  export interface RenderContextProps {
    runtime: {
      account: string
    }
  }

  export const Link: any
  export const NoSSR: any
  export const RenderContextConsumer: ReactElement
  export const canUseDOM: boolean
  export const withRuntimeContext: ReactElement
  export const Helmet: any
  export const useRuntime: () => {
    culture: {
      locale: string
    }
    emitter: {
      emit: (eventName: string, eventId: string) => void
    }
    query: {
      app: string
      filePath?: string
    }
  }
}

```


[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 tetrix/react/typings/svg.d.ts from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.svg' {
  const path: string
  export default path
}

```


[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 tetrix/react/typings/graphql.d.ts from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.graphql' {
  import { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[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 tetrix/react/typings/vtex.styleguide.d.ts from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  export const Alert
  export const Button
  export const ButtonWithIcon
  export const PageBlock
  export const IconCaretDown
  export const IconCaretUp
  export const IconCaretRight
  export const IconBars
  export const IconCheck
  export const IconDeny
  export const Spinner
  export const EmptyState
}

```


[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 tetrix/react/components/Nav.tsx from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent, useState } from 'react'
import { IconBars } from 'vtex.styleguide'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebook, faInstagram } from '@fortawesome/free-brands-svg-icons'

import Logo from '../images/tetrix_logo.svg'

const Nav: FunctionComponent = () => {
  const [openNav, setOpenNav] = useState(false)

  return (
    <nav className="flex">
      <div className="c-on-emphasis w-100 flex flex-column flex-row-l justify-between">
        <div className="flex flex-column items-center">
          <img src={Logo} className="h3-l" alt="TETRIX - O DESAFIO" />
          <button
            className="dn-l c-on-base w-33 mv7 bg-0 bn bg-transparent"
            onClick={() => setOpenNav(!openNav)}
          >
            <IconBars />
          </button>
        </div>
        <div className="flex-l" hidden={!openNav}>
          <div className="flex flex-column flex-row-l justify-center list mt0 items-center mb0">
            <p className="mh5-l mv5 mv0-l">
              <a className="link c-on-emphasis" href="https://tetrix.vtex.com">
                <strong>HOME</strong>
              </a>
            </p>
            <p className="mh5-l mv5 mv0-l bold">
              <a className="link c-on-emphasis" href="#about">
                <strong>O QUE É?</strong>
              </a>
            </p>
            <p className="mh5-l mv5 mv0-l bold">
              <a
                className="link c-on-emphasis"
                href="https://drive.google.com/file/d/1F3z9SdkM_ze1tnrwTf-FTR1xJ-WJ5BHc/view?usp=sharing"
              >
                <strong>REGRAS</strong>
              </a>
            </p>
            <p className="mh5-l mv5 mv0-l bold">
              <a className="link c-on-emphasis" href="#prize">
                <strong>PRÊMIO</strong>
              </a>
            </p>
            <p className="mh5-l mv5 mv0-l bold">
              <a className="link c-on-emphasis" href="#faq">
                <strong>FAQ</strong>
              </a>
            </p>
            <a
              className="link c-on-emphasis mh5-l mv5"
              href="https://www.facebook.com/desafiotetrix/"
            >
              <FontAwesomeIcon icon={faFacebook} />
            </a>
            <a
              className="link c-on-emphasis mh5-l mv5"
              href="https://www.instagram.com/desafiotetrix/"
            >
              <FontAwesomeIcon icon={faInstagram} />
            </a>
          </div>
        </div>
      </div>
    </nav>
  )
}

export default Nav

```


[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 tetrix/react/components/QuestionCard.tsx from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState, FunctionComponent } from 'react'
import { IconCaretDown, IconCaretRight } from 'vtex.styleguide'

interface Props {
  question: string
  ans: any
}

const QuestionCard: FunctionComponent<Props> = ({ question, ans }) => {
  const [open, setOpen] = useState(false)
  return (
    <article className="flex flex-column pr9-l w-100">
      <p
        className="flex justify-between bb b--muted-3 pv3"
        onClick={() => setOpen(!open)}
      >
        <strong>{question}</strong>
        {open ? <IconCaretDown /> : <IconCaretRight />}
      </p>
      <p hidden={!open} className="ph5 lh-copy">
        {ans}
      </p>
    </article>
  )
}

export default QuestionCard

```


[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 tetrix/react/components/News.tsx from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState } from 'react'

const News = () => {
  const [open, setOpen] = useState(false)

  return (
    <section className="pa8">
      <h1 className="t-heading-1 c-emphasis">ÚLTIMAS NOTÍCIAS</h1>
      <div>
        <div className="flex flex-column pv5">
          <article>
            <h4 className="t-heading-4 ttu link no-underline">
              <a href="/tetrix/examples" className="link no-underline">
                CONFIRA EXEMPLOS DE QUESTÕES DO TETRIX!
              </a>
            </h4>
            <small className="t-small">24 de julho de 2019</small>
          </article>
          <article>
            <h4
              className="t-heading-4 ttu pointer"
              onClick={() => setOpen(!open)}
            >
              TESTE DE COMUNICAÇÃO
            </h4>
            <p hidden={!open} className="w-80-l lh-copy">
              Todos os inscritos no Desafio Tetrix receberam um e-mail teste
              hoje (24/07). Caso não tenha recebido ainda, verifique sua caixa
              de spam. Caso não encontre, ocorreu um erro técnico. Para garantir
              que recebera o teste no sábado, nos envie um e-mail para{' '}
              <a href={'mailto:ola@tetrixodesafio.com'}>
                ola@tetrixodesafio.com
              </a>{' '}
              comunicando a falha técnica.
            </p>
            <small className="t-small">24 de julho de 2019</small>
          </article>
          <article>
            <h4 className="t-heading-4 ttu link no-underline">
              <a
                href="https://drive.google.com/file/d/13-H1gOh1NT1uBloyHnnTYSI6EytIlrgR/view?usp=sharing"
                className="link no-underline ttu"
              >
                Instruções finais - Primeira fase Desafio Tetrix
              </a>
            </h4>
            <small className="t-small">25 de julho de 2019</small>
          </article>
          <article>
            <h4 className="t-heading-4 ttu link no-underline">
              <a
                href="https://drive.google.com/file/d/1fZgM-SbBe4PuAu1bxtF3XvH1ThFqnF25/view?usp=sharing"
                className="link no-underline ttu"
              >
                Gabarito Oficial - Primeira fase Desafio Tetrix
              </a>
            </h4>
            <small className="t-small">29 de julho de 2019</small>
          </article>
          <article>
            <h4 className="t-heading-4 ttu pointer">Resultado primeira fase</h4>
            <p className="w-80-l lh-copy">
              Todos os participantes da primeira fase, serão informados
              individualmente, via e-mail, se foram aprovados para a segunda
              fase, no dia 02 de agosto de 2019 às 18h30. Caso não receba uma
              resposta, pedimos que entre em contato via e-mail{' '}
              <a href={'mailto:ola@tetrixodesafio.com'}>
                ola@tetrixodesafio.com
              </a>{' '}
              ou via chat do Instagram (@desafiotetrix).
            </p>
            <small className="t-small">02 de agosto de 2019</small>
          </article>
        </div>
      </div>
    </section>
  )
}

export default News

```


[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 tetrix/react/components/HowItWorks.tsx from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'

const HowItWorks: FunctionComponent = () => (
  <section className="pa7 mv8 flex flex-column flex-row-l justify-between items-center">
    <div className="w-40-l">
      <p className="t-heading-1 c-emphasis">COMO FUNCIONA?</p>
      <p className="lh-copy">
        O desafio possui 100 perguntas, divididas em 3 fases. As duas primeiras
        fases são realizadas online (remotamente), enquanto a terceira e a
        última fase acontece no Rio de Janeiro (presencialmente). Todos os
        inscritos terão acesso a primeira fase, e avançarão conforme o
        desempenho da fase anterior. O tempo que você levar para responder cada
        pergunta, impacta diretamente no resultado final.
      </p>
    </div>
    <div className="flex flex-column flex-row-l justify-between c-emphasis w-50-l w-90">
      <div className="w-30-l mv5 mv0-l">
        <div className="b--emphasis ba pa5 tc">
          <p>FASE 1 (27 e 28/07)</p>
          <p className="t-heading-1 mv2">90</p>
          <p>PERGUNTAS</p>
        </div>
        <div className="b--emphasis bb bl br tc pt5">
          <p className="mt0">ONLINE</p>
        </div>
      </div>
      <div className="w-30-l mv5 mv0-l">
        <div className="b--emphasis ba pa5 tc">
          <p>FASE 2 (02/08)</p>
          <p className="t-heading-1 mv2">08</p>
          <p>PERGUNTAS</p>
        </div>
        <div className="b--emphasis bb bl br tc pt5">
          <p className="mt0">ONLINE</p>
        </div>
      </div>
      <div className="w-30-l mv5 mv0-l">
        <div className="b--emphasis ba pa5 tc">
          <p>FASE 3 (19 e 20/10)</p>
          <p className="t-heading-1 mv2">02</p>
          <p>PERGUNTAS</p>
        </div>
        <div className="b--emphasis bb bl br tc pt5">
          <p className="mt0">PRESENCIAL - RJ</p>
        </div>
      </div>
    </div>
  </section>
)

export default HowItWorks

```


[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 tetrix/react/components/Video.tsx from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'

const Video: FunctionComponent = () => (
  <section className="mv7 flex justify-center items-center">
    <iframe
      className="w-70-l w-90 vh-75"
      src="https://www.youtube.com/embed/vO7Kdg4qs34"
      frameBorder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope;"
      allowFullScreen
    />
  </section>
)

export default Video

```


[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 tetrix/react/components/Footer.tsx from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebook, faInstagram } from '@fortawesome/free-brands-svg-icons'

import Logo from '../images/tetrix_logo_dark.svg'

const Footer: FunctionComponent = () => (
  <footer className="pa10-l pa7 bg-white">
    <div className="flex flex-row-l flex-column justify-between items-center-l w-90 center">
      <div className="w-90 w-33-l center">
        <img src={Logo} alt="TETRIX" />
        <div className="flex items-center justify-center mv4">
          <a
            className="link c-muted-1 mh5"
            href="https://www.facebook.com/desafiotetrix/"
          >
            <FontAwesomeIcon icon={faFacebook} />
          </a>
          <a
            className="link c-muted-1 mh5"
            href="https://www.instagram.com/desafiotetrix/"
          >
            <FontAwesomeIcon icon={faInstagram} />
          </a>
        </div>
      </div>
      <div className="flex flex-row-l flex-column justify-between mt5 mt0-l">
        <p className="ph5-l">
          <a className="link c-muted-1" href="https://vtex.com">
            VTEX.COM
          </a>
        </p>
        <p className="ph5-l">
          <a
            className="link c-muted-1"
            href="https://drive.google.com/file/d/1F3z9SdkM_ze1tnrwTf-FTR1xJ-WJ5BHc/view?usp=sharing"
          >
            TERMOS E CONDIÇÕES
          </a>
        </p>
        <p className="ph5-l">
          <a className="link c-muted-1" href="https://careers.vtex.com">
            CAREERS
          </a>
        </p>
        <p className="ph5-l">
          <a className="link c-muted-1" href={'mailto:tetrix@vtex.com'}>
            CONTACT US
          </a>
        </p>
      </div>
    </div>
  </footer>
)

export default 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 tetrix/react/components/Prizes.tsx from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent, useState } from 'react'
import Carousel from 'nuka-carousel'

import Berlim from '../images/berlim.png'
import HongKong from '../images/hongkong.png'
import London from '../images/londres.png'
import NewYork from '../images/nyc.png'
import Rio from '../images/rio.png'
import Santiago from '../images/santiago.png'
import SaoPaulo from '../images/saopaulo.png'

const Prizes: FunctionComponent = () => {
  const [activeSlide, setActiveSlide] = useState(0)

  return (
    <section
      id="prize"
      className="pv7 flex flex-row-l flex-column justify-between w-90 center mv8"
    >
      <div className="w-90 center w-50-l">
        <p className="t-heading-1 c-emphasis">O PRÊMIO</p>
        <p className="w-90-l">
          Quem vencer o desafio será levado para uma jornada de desenvolvimento
          nas principais cidades que desenvolvem iniciativas inovadoras de
          e-commerce. É uma chance única de conhecer tudo que existe sobre
          comércio global, guiado por uma das maiores empresas desse setor no
          mundo.
        </p>
        <div>
          <p
            className={`${activeSlide === 0 &&
              't-heading-1-l'} pointer t-heading-2 c-emphasis`}
            onMouseOver={() => setActiveSlide(0)}
            onClick={() => setActiveSlide(0)}
          >
            SANTIAGO
          </p>
          <p className="dn-l">
            Conheça os desafios do e-commerce na América Latina hispanohablante,
            conhecendo as características do mercado e dos clientes latinos de
            língua espanhola.
          </p>
        </div>
        <div>
          <p
            className={`${activeSlide === 1 &&
              't-heading-1-l'} pointer t-heading-2 c-emphasis`}
            onMouseOver={() => setActiveSlide(1)}
            onClick={() => setActiveSlide(1)}
          >
            NOVA YORK
          </p>
          <p className="dn-l">
            Na megalópole norte-americana, desenvolva suas habilidades de
            networking, conhecendo negócios da área de tecnologia e descobrindo
            oportunidades de expansão inovadoras.
          </p>
        </div>

        <div>
          <p
            className={`${activeSlide === 2 &&
              't-heading-1-l'} pointer t-heading-2 c-emphasis`}
            onMouseOver={() => setActiveSlide(2)}
            onClick={() => setActiveSlide(2)}
          >
            LONDRES
          </p>
          <p className="dn-l">
            Na terra da Rainha, aprenda como as fintechs estão revolucionando o
            mercado financeiro global, compreendendo os desafios de
            desenvolvimento, os limites das legislações locais.
          </p>
        </div>

        <div>
          <p
            className={`${activeSlide === 3 &&
              't-heading-1-l'} pointer t-heading-2 c-emphasis`}
            onMouseOver={() => setActiveSlide(3)}
            onClick={() => setActiveSlide(3)}
          >
            BERLIM
          </p>
          <p className="dn-l">
            Desenvolva um olhar mais focado para os resultados de pesquisas para
            aprender a se antecipar nas decisões de negócios, visitando centros
            tecnológicos e universidades.
          </p>
        </div>

        <div>
          <p
            className={`${activeSlide === 4 &&
              't-heading-1-l'} pointer t-heading-2 c-emphasis`}
            onMouseOver={() => setActiveSlide(4)}
            onClick={() => setActiveSlide(4)}
          >
            HONG KONG
          </p>
          <p className="dn-l">
            Desenvolva um olhar mais focado para os resultados de pesquisas para
            aprender a se antecipar nas decisões de negócios, visitando centros
            tecnológicos e universidades.
          </p>
        </div>

        <div>
          <p
            className={`${activeSlide === 5 &&
              't-heading-1-l'} pointer t-heading-2 c-emphasis`}
            onMouseOver={() => setActiveSlide(5)}
            onClick={() => setActiveSlide(5)}
          >
            SÃO PAULO
          </p>
          <p className="dn-l">
            Entenda os diferenciais da capital paulista no cenário de comércio
            eletrônico brasileiro, reconhecendo as razões da sua importância
            para o e-commerce da América Latina. <br />
            Centro de negócios do Brasil e da América Latina: conhecer a os
            diferenciais da capital paulista no cenário do comércio eletrônico
            brasileiro e reconhecer sua posição de importância no cenário do
            e-commerce da América Latina.
          </p>
        </div>

        <div>
          <p
            className={`${activeSlide === 6 &&
              't-heading-1-l'} pointer t-heading-2 c-emphasis`}
            onMouseOver={() => setActiveSlide(6)}
            onClick={() => setActiveSlide(6)}
          >
            RIO DE JANEIRO
          </p>
          <p className="dn-l">
            Visualize na prática os desafios no desenvolvimento e na programação
            da infraestrutura necessária para a viabilização de negócios
            digitais.
          </p>
        </div>
      </div>
      <div className="w-50-l w-75 dn flex-l center">
        <Carousel heightMode="first" slideIndex={activeSlide} withoutControls>
          <img src={Santiago} alt="" />
          <img src={NewYork} alt="" />
          <img src={London} alt="" />
          <img src={Berlim} alt="" />
          <img src={HongKong} alt="" />
          <img src={SaoPaulo} alt="" />
          <img src={Rio} alt="" />
        </Carousel>
      </div>
    </section>
  )
}

export default Prizes

```


[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 tetrix/react/components/FAQData.tsx from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'

export const questions = [
  {
    question: 'Até quando as inscrições estão abertas?',
    ans: 'As inscrições estarão abertas de 30 de maio a 07 de julho de 2019.',
  },
  {
    question: 'Quando começa o Desafio?',
    ans:
      'O link de acesso para a primeira fase será disponibilizado no dia 27 de julho, para todos os inscritos.',
  },
  {
    question: 'Quem pode participar do TETRIX?',
    ans:
      'Pessoas antenadas com veia empreendedora, dispostas a aprender e que querem desenvolver sua carreira no ramo dos negócios e de e-commerce, desde que preencham os seguintes requisitos: Residentes no Brasil, maiores de 18 anos, universitários ou graduados. Se você já possui graduação, deverá ter colado grau a partir do 2º semestre de 2017. ',
  },
  {
    question: 'O TETRIX possui algum custo?',
    ans:
      'Não! Você não precisa pagar nada para participar, incluindo a fase presencial, em que vamos arcar com os custos de viagem e hospedagem dos participantes que residirem fora da cidade do Rio de Janeiro.',
  },
  {
    question:
      'O que preciso saber sobre o prêmio? (Venci, quais documentações devo possuir?)',
    ans:
      'O vencedor deverá ter toda documentação necessária na data do embarque para a viagem prêmio. Isso inclui: vistos, passaporte e certificado internacional de vacinação. Se você não tiver os documentos necessários, não se preocupe! Avise-nos durante a fase final, para providenciarmos.',
  },
  {
    question: 'Ainda possui alguma dúvida?',
    ans: (
      <Fragment>
        Se você ainda possui alguma dúvida que não respondemos aqui nesse FAQ,
        mande um e-mail para{' '}
        <a href={'mailto:ola@tetrixodesafio.com'}>ola@tetrixodesafio.com</a> que
        estamos disponíveis para te ajudar.
      </Fragment>
    ),
  },
]

```


[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 tetrix/react/components/Jury.tsx from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Geraldo from '../images/Geraldo.png'
import Mariano from '../images/Mariano.png'
import Raissa from '../images/Raissa.png'
import Alfredo from '../images/Alfredo.png'
import RafaForte from '../images/RafaForte.png'

const Jury = () => (
  <section className="pa8">
    <h1 className="t-heading-1 c-emphasis">CONHEÇA O JÚRI</h1>
    <div>
      <div className="flex flex-column flex-row-l justify-between pv5 items-center">
        <div className="flex">
          <img src={Geraldo} className="w4 h4 mr10-l mr4" />
          <img src={Mariano} className="w4 h4" />
        </div>
        <div className="w-60-l w-90 pl7-l">
          <h2 className="t-heading-2 w-55-l">
            GERALDO THOMAZ<br />
            E MARIANO GOMIDE
          </h2>
          <p className='t-body lh-copy'>
            Fundadores e atuais CEO's da VTEX, a organizadora do Desafio Tetrix.
            Formados em Engenharia pela UFRJ, são apaixonados pelo Rio e pelo Brasil.
            Acreditam fortemente que a educação é o caminho para que o Brasil posssa competir de igual para igual em tecnologia e negócios com outros países.
          </p>
        </div>
      </div>
      <div className="flex flex-column flex-row-l justify-between pv5 items-center">
        <div className="flex mr10-l w-33-l flex-row-reverse">
          <img src={Raissa} className="w4 h4" />
        </div>
        <div className="w-60-l w-90">
          <h2 className="t-heading-2">
            RAISSA ROTOLO
          </h2>
          <p className='t-body lh-copy'>
            Formada em Engenharia de Produção e com MBA em Gestão de Marketing pela UFRJ,
            é encantada pela perspectiva de impacto que a tecnologia pode trazer à
            sociedade. Hoje é diretora de vendas de uma das mais novas soluções da VTEX, o Omnichannel
            - que possibilita a experiência de compra centrada no consumidor e unificada entre o mundo físico e digital.
          </p>
        </div>
      </div>
      <div className="flex flex-column flex-row-l justify-between pv5 items-center">
        <div className="flex mr10-l w-33-l flex-row-reverse">
          <img src={Alfredo} className="w4 h4" />
        </div>
        <div className="w-60-l w-90">
          <h2 className="t-heading-2">
            ALFREDO SOARES
          </h2>
          <p className="t-body lh-copy">
            Fundador da Xtech commerce e sócio da VTEX Commerce.
            Também é escritor do livro Bora Vender. Acredita que saber vender é uma das habilidades
            mais importantes para a vida profissional.
          </p>
        </div>
      </div>
      <div className="flex flex-column flex-row-l justify-between pv5 items-center">
        <div className="flex mr10-l w-33-l flex-row-reverse">
          <img src={RafaForte} className="w4 h4" />
        </div>
        <div className="w-60-l w-90">
          <h2 className="t-heading-2">
            RAFAEL FORTE
          </h2>
          <p className='t-body lh-copy'>
            Formado em Direito e com MBA pela FGV, é country manager da VTEX no Brasil,
            liderando mais de 300 pessoas. Anteriormente à carreira da VTEX, fundou a
            empresa de tecnologia WX7 e lecionou na IBMEC.
          </p>
        </div>
      </div>
    </div>
  </section>
)

export default Jury

```


[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 tetrix/react/components/Header.tsx from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import Carousel from 'nuka-carousel'

import Nav from './Nav'
import Slider1 from '../images/slider1.png'
import Slider2 from '../images/slider2.png'
import Slider3 from '../images/slider3.png'

const Header: FunctionComponent = () => (
  <header className="bg-emphasis pa9">
    <Nav />
    <div className="flex flex-column flex-row-l justify-around items-center mt5">
      <div className="flex flex-column justify-around w-40-l w-90 order-1 order-0-l">
        <p className="t-heading-2 fw7 c-on-emphasis">
          QUAL A ÚLTIMA VEZ QUE VOCÊ SE SURPREENDEU
          <br />
          <span className="underline c-muted-1"> COM VOCÊ MESMO?</span>
        </p>
        <p className="c-on-emphasis lh-copy">
          No Tetrix, o Desafio, você será capaz de descobrir se o seu
          conhecimento tem fim e, somente ao superá-lo, encontrará respostas às
          perguntas que podem definir seu futuro. Vença e seja levado a uma
          jornada de desenvolvimento pelo mundo.
        </p>
        <p className="c-muted-1 b">Inscreva-se até o dia 19 de julho.</p>
        <a
          className="c-emphasis no-underline br-pill mt6 mb3 bg-base ph7 b--none pointer w-50-l"
          href="https://tetrix.typeform.com/to/Jy9KBv"
        >
          <p className="t-heading-4 fw5 mv4 tc">Participar</p>
        </a>
      </div>
      <div className="w-40-l w-90 order-0 order-1-l">
        <Carousel autoplay wrapAround withoutControls>
          <img src={Slider1} alt="" />
          <img src={Slider2} alt="" />
          <img src={Slider3} alt="" />
        </Carousel>
      </div>
    </div>
  </header>
)

export default Header

```


[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 tetrix/react/components/FAQ.tsx from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'

import { questions } from './FAQData'
import QuestionCard from './QuestionCard'

const FAQ: FunctionComponent = () => (
  <section id="faq" className="pa8 bg-base--inverted c-on-base--inverted mt8">
    <p className="t-heading-1">F.A.Q.</p>
    <p>
      Para saber mais sobre o TETRIX, o Desafio, confira as{' '}
      <a
        href="https://drive.google.com/file/d/1F3z9SdkM_ze1tnrwTf-FTR1xJ-WJ5BHc/view?usp=sharing"
        className="c-on-base--inverted"
      >
        Regras do Desafio
      </a>{' '}
      e as dúvidas frequentes antes de iniciar sua inscrição.
    </p>
    <div className="flex flex-column items-center">
      {questions.map(q => (
        <QuestionCard question={q.question} ans={q.ans} key={q.question} />
      ))}
    </div>
  </section>
)

export default FAQ

```


[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 tetrix/react/components/About.tsx from the tetrix VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'

import Icon1 from '../images/icone1.png'
import Icon2 from '../images/icone2.png'
import Icon3 from '../images/icone3.png'
import Icon4 from '../images/icone4.png'
import Icon5 from '../images/icone5.png'
import Icon6 from '../images/icone6.png'
import Icon7 from '../images/icone7.png'
import Icon8 from '../images/icone8.png'

const About: FunctionComponent = () => {
  const iconClasses =
    'w-25-l w-90 pa5 flex flex-column items-center justify-center'

  return (
    <section
      id="about"
      className="pa7 flex flex-row-l flex-column justify-between items-center mv8"
    >
      <div className="w-33-l">
        <p className="t-heading-2 c-emphasis">O QUE É O TETRIX?</p>
        <p className="t-body lh-copy">
          O Tetrix é um desafio universitário que foi desenvolvido pela VTEX
          para testar e validar os diferentes tipos de habilidades dos
          participantes. Através de perguntas que conectam múltiplos
          conhecimentos, o Tetrix propõe um um nível de complexidade
          progressiva, que ajuda a identificar diferentes perspectivas e buscar
          solucionadores.
        </p>
      </div>
      <div className="flex justify-around items-center flex-wrap w-60-l">
        <div className={iconClasses}>
          <img src={Icon1} style={{ width: '100px', height: '100px' }} />
          <p className="c-emphasis tc">EVOLUÇÃO</p>
        </div>
        <div className={iconClasses}>
          <img src={Icon2} style={{ width: '100px', height: '100px' }} />
          <p className="tc">CONHECIMENTO TÉCNICO E DE MERCADO</p>
        </div>
        <div className={iconClasses}>
          <img src={Icon3} style={{ width: '100px', height: '100px' }} />
          <p className="c-emphasis tc">AUDÁCIA</p>
        </div>
        <div className={iconClasses}>
          <img src={Icon4} style={{ width: '100px', height: '100px' }} />
          <p className="tc">PENSAMENTO LÓGICO</p>
        </div>
        <div className={iconClasses}>
          <img src={Icon5} style={{ width: '100px', height: '100px' }} />
          <p className="tc">ADMIRAÇÃO COLETIVA</p>
        </div>
        <div className={iconClasses}>
          <img src={Icon6} style={{ width: '100px', height: '100px' }} />
          <p className="c-emphasis tc">CONEXÃO</p>
        </div>
        <div className={iconClasses}>
          <img src={Icon7} style={{ width: '100px', height: '100px' }} />
          <p className="tc">COMUNICAÇÃO</p>
        </div>
        <div className={iconClasses}>
          <img src={Icon8} style={{ width: '100px', height: '100px' }} />
          <p className="c-emphasis tc">VOZ DE REFERÊNCIA</p>
        </div>
      </div>
    </section>
  )
}

export default 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 admin-messages/messages/ja/vtex.admin-cms@0.x.json from the admin-messages VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "Author": "作成者",
  "Draft": "下書き",
  "Live": "ライブ",
  "Name": "名前",
  "Type": "タイプ",
  "High": "高い",
  "Low": "低い",
  "Medium": "中程度",
  "of": "/",
  "Search": "検索",
  "Content": "コンテンツ",
  "Hide all": "すべて非表示にする",
  "Show all": "すべて表示する",
  "Line density": "線密度",
  "Show rows": "表示行数",
  "Last update": "前回のアップデート",
  "Toggle visible fields": "表示するフィールドの切り替え"
}

```


[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 admin-messages/messages/ja/vtex.store-components@3.x.json from the admin-messages VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.blockClass.description": "クラス名を別途追加し、スタイリングを簡単にしてください",
  "admin/editor.blockClass.title": "CSS ブロッククラス",
  "admin/editor.categoriesHighlighted.cardShape": "ボックスの形状",
  "admin/editor.categoriesHighlighted.cardShape.rectangular": "長方形",
  "admin/editor.categoriesHighlighted.cardShape.squared": "正方形",
  "admin/editor.categoriesHighlighted.categoriesHighlighted": "ハイライトされたカテゴリ",
  "admin/editor.categoriesHighlighted.category": "カテゴリ",
  "admin/editor.categoriesHighlighted.description": "部門によりハイライトされたカテゴリ",
  "admin/editor.categoriesHighlighted.item.categoryImage": "カテゴリ画像",
  "admin/editor.categoriesHighlighted.item.categoryName": "カテゴリ名",
  "admin/editor.categoriesHighlighted.quantityOfItems": "項目の数",
  "admin/editor.categoriesHighlighted.showCategoriesHighlighted": "ハイライトされたカテゴリの表示",
  "admin/editor.categoriesHighlighted.title": "ハイライトされたカテゴリ",
  "admin/editor.image.alt.title": "代替テキスト",
  "admin/editor.image.description": "画像を表示する",
  "admin/editor.image.src.title": "画像",
  "admin/editor.image.title": "画像",
  "admin/editor.image.title.title": "画像のタイトル",
  "admin/editor.image.title.description": "重ねて生じされるタイトル",
  "admin/editor.info-card.callAction.button": "ボタン",
  "admin/editor.info-card.callAction.link": "リンク",
  "admin/editor.info-card.callAction.none": "なし",
  "admin/editor.info-card.callToActionMode.description": "行動喚起の表示方法をコントロールします",
  "admin/editor.info-card.callToActionMode.title": "行動喚起モード",
  "admin/editor.info-card.callToActionText.description": "行動喚起コンポーネントのテキストが内部に表示されます",
  "admin/editor.info-card.callToActionText.title": "行動喚起テキスト",
  "admin/editor.info-card.callToActionUrl.description": "CTA をクリックした時にリダイレクトする URL",
  "admin/editor.info-card.callToActionUrl.title": "行動喚起 URL",
  "admin/editor.info-card.description": "表示方法を選ぶことのできる画像とテキストのコンポーネント",
  "admin/editor.info-card.headline.description": "コンポーネント内の見出しに表示されるテキスト",
  "admin/editor.info-card.headline.title": "見出し",
  "admin/editor.info-card.imageActionUrl.description": "URL を渡して画像をリンクに変え、ユーザーをリダイレクトできるようにする",
  "admin/editor.info-card.imageActionUrl.title": "画像アクション URL",
  "admin/editor.info-card.imageUrl.description": "デスクトップで使用する画像",
  "admin/editor.info-card.imageUrl.title": "画像",
  "admin/editor.info-card.isFullModeStyle.description": "True の場合、提供された画像は背景画像として使用され、テキストはその上に表示されます",
  "admin/editor.info-card.isFullModeStyle.title": "背景の画像",
  "admin/editor.info-card.mobileImageUrl.description": "モバイルで使用する画像",
  "admin/editor.info-card.mobileImageUrl.title": "モバイル画像",
  "admin/editor.info-card.subhead.description": "コンポーネント内の見出しの下に表示されるテキスト",
  "admin/editor.info-card.subhead.title": "副見出し",
  "admin/editor.info-card.textAlignment.center": "中央",
  "admin/editor.info-card.textAlignment.description": "コンポーネント内の文字揃えをコントロールします",
  "admin/editor.info-card.textAlignment.left": "左",
  "admin/editor.info-card.textAlignment.right": "右",
  "admin/editor.info-card.textAlignment.title": "文字揃え",
  "admin/editor.info-card.textPosition.center": "中央",
  "admin/editor.info-card.textPosition.description": "コンポーネントテキストが表示される位置を左、中央、右から選びます。",
  "admin/editor.info-card.textPosition.left": "左",
  "admin/editor.info-card.textPosition.right": "右",
  "admin/editor.info-card.textPosition.title": "テキストの位置",
  "admin/editor.info-card.title": "情報カード",
  "admin/editor.logo.description": "ストアロゴを表示するコンポーネント",
  "admin/editor.logo.height.description": "ロゴのために使う高さ",
  "admin/editor.logo.height.title": "高",
  "admin/editor.logo.href.description": "ロゴがクリックされた時にリダイレクトされるリンクです。空欄にした場合、クリックできません。",
  "admin/editor.logo.href.title": "リダイレクトするリンク",
  "admin/editor.logo.mobileHeight.description": "モバイルで使う高さです。空欄の場合、所定の高さを使用します。",
  "admin/editor.logo.mobileHeight.title": "モバイルの高さ",
  "admin/editor.logo.mobileWidth.description": "モバイルで使う幅です。空欄の場合、所定の幅を使用します。",
  "admin/editor.logo.mobileWidth.title": "モバイルの幅",
  "admin/editor.logo.title": "ロゴ",
  "admin/editor.logo.title.description": "ロゴ画像の代替テキスト",
  "admin/editor.logo.title.title": "代替テキスト",
  "admin/editor.logo.url.description": "使用する画像",
  "admin/editor.logo.url.title": "画像",
  "admin/editor.logo.width.description": "ロゴのために使う幅",
  "admin/editor.logo.width.title": "幅",
  "admin/editor.newsletter.description": "ニュースレターフォーム",
  "admin/editor.newsletter.hideLabel": "ラベルを非表示にする",
  "admin/editor.newsletter.label": "コンポーネントに使用されるフォームのラベル",
  "admin/editor.newsletter.placeholder": "Eメール入力のプレースホルダー",
  "admin/editor.newsletter.submit": "提出ボタンのラベル",
  "admin/editor.newsletter.title": "ニュースレター",
  "admin/editor.notification-bar.content.description": "バーのテキスト",
  "admin/editor.notification-bar.content.title": "コンテンツ",
  "admin/editor.notification-bar.description": "バースタイルでテキストを表示するコンポーネント",
  "admin/editor.notification-bar.title": "通知バー",
  "admin/editor.product-description.title": "製品説明",
  "admin/editor.product-description.title-prop.title": "タイトル",
  "admin/editor.product-images.bgopacity.title": "背景の透明度",
  "admin/editor.product-images.description": "製品画像コンポーネントにより、製品画像をカスタマイズできます",
  "admin/editor.product-images.displayThumbnailsArrows.title": "サムネイルに矢印を表示します",
  "admin/editor.product-images.gallery": "ギャラリー内",
  "admin/editor.product-images.horizontal": "水平",
  "admin/editor.product-images.in-page": "ページ内",
  "admin/editor.product-images.left": "左",
  "admin/editor.product-images.no-zoom": "ズームなし",
  "admin/editor.product-images.position.description": "垂直方向の時だけ使用できます",
  "admin/editor.product-images.position.title": "サムネイルの位置",
  "admin/editor.product-images.right": "右",
  "admin/editor.product-images.thumbnailsOrientation.title": "サムネイルの方向",
  "admin/editor.product-images.title": "製品画像",
  "admin/editor.product-images.vertical": "垂直",
  "admin/editor.product-images.zoomOptions.title": "拡大オプション",
  "admin/editor.product-images.zoomType.title": "拡大タイプ",
  "admin/editor.product-specifications.hidden-specifications.description": "非表示にしたい仕様の名前を入力する",
  "admin/editor.product-specifications.hidden-specifications.title": "非表示の仕様",
  "admin/editor.product-specifications.items.title": "仕様",
  "admin/editor.product-specifications.title": "製品仕様",
  "admin/editor.product-specifications.visible-specifications.description": "表示したい仕様の名前を入力します。非表示の仕様または見えている仕様の1つだけを入力してください",
  "admin/editor.product-specifications.visible-specifications.title": "見えている仕様",
  "admin/editor.productName.description": "製品名コンポーネント",
  "admin/editor.productName.showBrandName.title": "ブランド名を表示する",
  "admin/editor.productName.showProductReference.title": "製品の参照を表示する",
  "admin/editor.productName.showSku.title": "SKU を表示する",
  "admin/editor.productName.title": "製品名",
  "admin/editor.productPrice.description": "製品価格コンポーネント",
  "admin/editor.productPrice.labelListPrice": "リスト価格ラベル",
  "admin/editor.productPrice.labelSellingPrice": "販売価格ラベル",
  "admin/editor.productPrice.showInstallments": "製品の分割払い回数を表示する",
  "admin/editor.productPrice.showLabels": "製品の価格ラベルを表示する",
  "admin/editor.productPrice.showListPrice": "製品のリスト価格を表示する",
  "admin/editor.productPrice.showListPriceRange": "製品のリスト価格範囲を表示する",
  "admin/editor.productPrice.showSavings": "製品のリスト価格と販売価格の差を表示する",
  "admin/editor.productPrice.showSellingPriceRange": "製品の販売価格範囲を表示する",
  "admin/editor.productPrice.title": "製品価格",
  "admin/editor.search-bar.placeholder.title": "プレースホルダー",
  "admin/editor.search-bar.title": "検索バー",
  "admin/editor.share.description": "共有ボタンのリスト",
  "admin/editor.share.social.title": "ソーシャルネットワーク",
  "admin/editor.share.title": "共有する",
  "admin/editor.skuSelector.description": "ユーザーが選べるよう、項目のさまざまなバリエーションを表示するコンポーネント",
  "admin/editor.skuSelector.seeMoreLabel.description": "詳細を見るボタンのラベルです。文字列は、利用できる適切な残りの項目を表示できるよう {quantity} のプレースホルダーがなければなりません。例: 「さらに {quantity} 個を見る」",
  "admin/editor.skuSelector.seeMoreLabel.title": "詳細を見るラベル",
  "admin/editor.skuSelector.title": "SKU セレクタ"
}
```


[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 admin-messages/messages/it/vtex.store-components@3.x.json from the admin-messages VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.blockClass.description": "Aggiunge un nome della classe extra per facilitare lo styling",
  "admin/editor.blockClass.title": "CSS Classe di Blocco",
  "admin/editor.categoriesHighlighted.cardShape": "Forma del box",
  "admin/editor.categoriesHighlighted.cardShape.rectangular": "Rettangolare",
  "admin/editor.categoriesHighlighted.cardShape.squared": "Quadrato",
  "admin/editor.categoriesHighlighted.categoriesHighlighted": "Categorie in evidenza",
  "admin/editor.categoriesHighlighted.category": "Categoria",
  "admin/editor.categoriesHighlighted.description": "Categorie del Reparto in evidenza",
  "admin/editor.categoriesHighlighted.item.categoryImage": "Immagine categoria",
  "admin/editor.categoriesHighlighted.item.categoryName": "Nome categoria",
  "admin/editor.categoriesHighlighted.quantityOfItems": "Quantità di articoli",
  "admin/editor.categoriesHighlighted.showCategoriesHighlighted": "Mostra categorie in evidenza",
  "admin/editor.categoriesHighlighted.title": "Categorie in evidenza",
  "admin/editor.image.alt.title": "Testo alternativo",
  "admin/editor.image.description": "Mostra un'immagine",
  "admin/editor.image.src.title": "Immagine",
  "admin/editor.image.title": "Immagine",
  "admin/editor.image.title.title": "Titolo immagine",
  "admin/editor.image.title.description": "Titolo da mostrare al passaggio del mouse",
  "admin/editor.info-card.callAction.button": "Pulsante",
  "admin/editor.info-card.callAction.link": "Link",
  "admin/editor.info-card.callAction.none": "Nessuno",
  "admin/editor.info-card.callToActionMode.description": "Controlla come viene visualizzata la tua Call to Action (CTA)",
  "admin/editor.info-card.callToActionMode.title": "Modalità Call to Action",
  "admin/editor.info-card.callToActionText.description": "Testo da mostrare all'interno del componente Call to Action",
  "admin/editor.info-card.callToActionText.title": "Testo Call to Action",
  "admin/editor.info-card.callToActionUrl.description": "Url di reindirizzamento quando si clicca sulla Call to Action (CTA)",
  "admin/editor.info-card.callToActionUrl.title": "URL Call to Action",
  "admin/editor.info-card.description": "Un componente con immagini e testo che ti permette di sceglierne la visualizzazione",
  "admin/editor.info-card.headline.description": "Testo da visualizzare come titolo all'interno del componente",
  "admin/editor.info-card.headline.title": "Titolo",
  "admin/editor.info-card.imageActionUrl.description": "Cambia l'URL per rendere l'immagine un link e per reindirizzare l'utente",
  "admin/editor.info-card.imageActionUrl.title": "URL per l'azione dell'immagine",
  "admin/editor.info-card.imageUrl.description": "Immagine da utilizzare su desktop",
  "admin/editor.info-card.imageUrl.title": "Immagine",
  "admin/editor.info-card.isFullModeStyle.description": "Se è adeguata, l'immagine fornita verrà utilizzata come immagine di sfondo e il testo verrà visualizzato su di essa",
  "admin/editor.info-card.isFullModeStyle.title": "Immagine come sfondo",
  "admin/editor.info-card.mobileImageUrl.description": "Immagine da utilizzare su mobile",
  "admin/editor.info-card.mobileImageUrl.title": "Immagine su mobile",
  "admin/editor.info-card.subhead.description": "Testo da visualizzare sotto il titolo all'interno del componente",
  "admin/editor.info-card.subhead.title": "Sottotitolo",
  "admin/editor.info-card.textAlignment.center": "Centro",
  "admin/editor.info-card.textAlignment.description": "Controlla l'allineamento del testo all'interno del componente",
  "admin/editor.info-card.textAlignment.left": "Sinistra",
  "admin/editor.info-card.textAlignment.right": "Destra",
  "admin/editor.info-card.textAlignment.title": "Allineamento del testo",
  "admin/editor.info-card.textPosition.center": "Centro",
  "admin/editor.info-card.textPosition.description": "Scegli in quale posizione verrà visualizzato il testo del componente: sinistra, centro o destra",
  "admin/editor.info-card.textPosition.left": "Sinistra",
  "admin/editor.info-card.textPosition.right": "Destra",
  "admin/editor.info-card.textPosition.title": "Posizione del testo",
  "admin/editor.info-card.title": "InfoCard",
  "admin/editor.logo.description": "Componente per mostrare il logo del tuo negozio",
  "admin/editor.logo.height.description": "Altezza da utilizzare per il logo.",
  "admin/editor.logo.height.title": "Altezza",
  "admin/editor.logo.href.description": "Link di reindirizzamento quando si fa clic sul logo. Lascialo vuoto per rendere il logo non cliccabile.",
  "admin/editor.logo.href.title": "Link di reindirizzamento",
  "admin/editor.logo.mobileHeight.description": "Altezza da utilizzare su mobile. Se il campo viene lasciato vuoto, verrà utilizzato il valore di altezza fornito.",
  "admin/editor.logo.mobileHeight.title": "Altezza su mobile",
  "admin/editor.logo.mobileWidth.description": "Larghezza da utilizzare su mobile. Se il campo viene lasciato vuoto, verrà utilizzato il valore di larghezza fornito.",
  "admin/editor.logo.mobileWidth.title": "Larghezza su mobile",
  "admin/editor.logo.title": "Logo",
  "admin/editor.logo.title.description": "Testo alternativo da fornire insieme all'immagine del logo",
  "admin/editor.logo.title.title": "Testo alternativo",
  "admin/editor.logo.url.description": "Immagine da utilizzare",
  "admin/editor.logo.url.title": "Immagine",
  "admin/editor.logo.width.description": "Larghezza da utilizzare per il logo.",
  "admin/editor.logo.width.title": "Larghezza",
  "admin/editor.newsletter.description": "Modulo per la Newsletter",
  "admin/editor.newsletter.hideLabel": "Nascondi etichetta",
  "admin/editor.newsletter.label": "Etichetta per il modulo utilizzata dal componente",
  "admin/editor.newsletter.placeholder": "Placeholder per l'inserimento dell'email",
  "admin/editor.newsletter.submit": "Etichetta per il pulsante di invio",
  "admin/editor.newsletter.title": "Newsletter",
  "admin/editor.notification-bar.content.description": "Testo della barra",
  "admin/editor.notification-bar.content.title": "Contenuto",
  "admin/editor.notification-bar.description": "Un componente che mostra i testi sotto forma di barra",
  "admin/editor.notification-bar.title": "Barra delle notifiche",
  "admin/editor.product-description.title": "Descrizione prodotto",
  "admin/editor.product-description.title-prop.title": "Titolo",
  "admin/editor.product-images.bgopacity.title": "Opacità dello sfondo",
  "admin/editor.product-images.description": "Il componente per le immagini di prodotto ti consente di personalizzare le immagini dei prodotti",
  "admin/editor.product-images.displayThumbnailsArrows.title": "Visualizza le frecce nelle anteprime",
  "admin/editor.product-images.gallery": "Nella Galleria",
  "admin/editor.product-images.horizontal": "Orizzontale",
  "admin/editor.product-images.in-page": "Nella pagina",
  "admin/editor.product-images.left": "Sinistra",
  "admin/editor.product-images.no-zoom": "No zoom",
  "admin/editor.product-images.position.description": "Utilizzato solo quando l'orientamento è verticale",
  "admin/editor.product-images.position.title": "Posizione anteprima",
  "admin/editor.product-images.right": "Destra",
  "admin/editor.product-images.thumbnailsOrientation.title": "Orientamento anteprima",
  "admin/editor.product-images.title": "Immagini di prodotto",
  "admin/editor.product-images.vertical": "Verticale",
  "admin/editor.product-images.zoomOptions.title": "Opzioni di zoom",
  "admin/editor.product-images.zoomType.title": "Tipo di zoom",
  "admin/editor.product-specifications.hidden-specifications.description": "Digita i nomi delle specifiche che desideri nascondere",
  "admin/editor.product-specifications.hidden-specifications.title": "Specifiche nascoste",
  "admin/editor.product-specifications.items.title": "Specifica",
  "admin/editor.product-specifications.title": "Specifiche di prodotto",
  "admin/editor.product-specifications.visible-specifications.description": "Digita i nomi delle specifiche che desideri vengano visualizzate. Fornisci solamente una tra le specifiche nascoste o tra quelle visibili",
  "admin/editor.product-specifications.visible-specifications.title": "Specifiche visibili",
  "admin/editor.productName.description": "Componente per il nome dei prodotti",
  "admin/editor.productName.showBrandName.title": "Mostra il nome del brand",
  "admin/editor.productName.showProductReference.title": "Mostra il riferimento dei prodotti",
  "admin/editor.productName.showSku.title": "Mostra gli sku",
  "admin/editor.productName.title": "Nome del prodotto",
  "admin/editor.productPrice.description": "Componente per il prezzo del prodotto",
  "admin/editor.productPrice.labelListPrice": "Etichetta del prezzo di listino",
  "admin/editor.productPrice.labelSellingPrice": "Etichetta del prezzo di vendita",
  "admin/editor.productPrice.showInstallments": "Mostra le rate di pagamento dei prodotti",
  "admin/editor.productPrice.showLabels": "Mostra le etichette di prezzo dei prodotti",
  "admin/editor.productPrice.showListPrice": "Mostra il prezzo di listino dei prodotti",
  "admin/editor.productPrice.showListPriceRange": "Mostra la gamma dei prezzi di listino dei prodotti",
  "admin/editor.productPrice.showSavings": "Mostra la differenza tra il prezzo di listino e il prezzo di vendita dei prodotti",
  "admin/editor.productPrice.showSellingPriceRange": "Mostra la gamma dei prezzi di vendita dei prodotti",
  "admin/editor.productPrice.title": "Prezzo del prodotto",
  "admin/editor.search-bar.placeholder.title": "Placeholder",
  "admin/editor.search-bar.title": "Barra di ricerca",
  "admin/editor.share.description": "Elenco dei pulsanti di condivisione",
  "admin/editor.share.social.title": "Social Network",
  "admin/editor.share.title": "Condividi",
  "admin/editor.skuSelector.description": "Componente che permette di visualizzare diverse varianti di un articolo tra cui l'utente può scegliere",
  "admin/editor.skuSelector.seeMoreLabel.description": "Etichetta del pulsante Mostra altro. La stringa deve avere un placeholder {quantity} per mostrare gli articoli rimanenti appropriati che sono disponibili. Esempio: \"Mostra altri {quantity}\"",
  "admin/editor.skuSelector.seeMoreLabel.title": "Etichetta Mostra altro",
  "admin/editor.skuSelector.title": "Selettore di SKU"
}
```