feat(home): adicionando até a aula 7.5

custom/react/Main.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Main = () => {
+    return <div>Main</div>;
+};
+
+export default Main;

custom/store/interfaces.json

@@ -23,5 +23,8 @@
         "content": {
             "$ref": "app:agenciamagma.m3-custom#/definitions/DynamicMenu"
         }
+    },
+    "main-academy": {
+        "component": "Main"
     }
 }

storefront/store/blocks/pages/home/home.jsonc

@@ -4,6 +4,8 @@
             "list-context.image-list#demo",
             "flex-layout.row#deals",
             "__fold__",
+            "flex-layout.row#faixa-de-imagens",
+            "main-academy",
             "rich-text#m3-shelf-title",
             "flex-layout.row#m3-shelf",
             "info-card#m3-middle-card",
@@ -15,6 +17,71 @@
         //   "challenge": "challenge.trade-policy-condition"
         // }
     },
+
+    "flex-layout.row#faixa-de-imagens": {
+        "props": {
+            "blockClass": "faixa-de-imagens"
+        },
+        "children": [
+            "image#imagem-1",
+            "flex-layout.col#image-meio",
+            "image#imagem-2"
+        ]
+
+    },
+
+    "flex-layout.col#image-meio": {
+        "props":{
+            "blockClass": "faixa-de-imagens"
+        },
+        "children": [
+            "image#imagem-3",
+            "flex-layout.col#conteudo-meio"
+        ]
+    },
+    "flex-layout.col#conteudo-meio": {
+        "children": [
+            "rich-text#text-meio",
+            "link#link-meio"
+        ],
+        "props": {
+            "blockClass": "conteudo-meio",
+            "preventVerticalStretch": "auto"
+        }
+    },
+
+    "rich-text#text-meio": {
+        "props":{
+            "text": "### Qual produto \n # ideal para você? \n lorem ipsum dolor sit amet, consecteur",
+            "blockClass": "texto-meio"
+        }
+    },
+
+    "link#link-meio": {
+        "props": {
+            "href": "/",
+            "label": "RESPONDA NOSSO QUIZ E DESCUBRA",
+            "blockClass": "link-meio"
+
+        }
+    },
+
+    "image#imagem-1":{
+        "props": {
+            "src": "assets/imgs/products.png"
+        }
+    },
+    "image#imagem-2":{
+        "props": {
+            "src": "assets/imgs/products.png"
+        }
+    },
+    "image#imagem-3":{
+        "props": {
+            "src": "assets/imgs/products.png"
+        }
+    },
+
     "challenge.trade-policy-condition": {
         "props": {
             "redirectPath": "/registration",

storefront/styles/sass/pages/home/vtex.flex-layout.scss

@@ -0,0 +1,29 @@
+.flexRowContent--faixa-de-imagens {
+    margin-top: 5rem;
+
+    :global(.vtex-store-components-3-x-imageElement) {
+        height: 100%;
+        width: 100%;
+    }
+
+    .stretchChildrenWidth {
+        margin: 0 8px;
+    }
+}
+
+.flexColChild--faixa-de-imagens {
+    :global(.vtex-store-components-3-x-imageElement) {
+        filter: brightness(70%);
+    }
+}
+
+.flexCol--faixa-de-imagens {
+    position: relative;
+}
+
+.flexCol--conteudo-meio {
+    position: absolute;
+    inset: 0;
+
+    justify-content: center;
+}

storefront/styles/sass/pages/home/vtex.rich-text.scss

@@ -0,0 +1,32 @@
+.container--texto-meio {
+    justify-content: center;
+    color: #ffffff;
+    font-family: "Oxygen";
+}
+
+.wrapper--texto-meio {
+    width: 100%;
+    margin: 0 24px;
+}
+
+.headingLevel3--texto-meio,
+.headingLevel1--texto-meio,
+.paragraph--texto-meio  {
+    margin: 0;
+}
+
+.headingLevel3--texto-meio {
+    font-size: 32px;
+    font-weight: 600;
+    letter-spacing: -0.05em;
+}
+.headingLevel1--texto-meio {
+    font-size: 46px;
+    font-weight: 600;
+    letter-spacing: -0.05em;
+}
+.paragraph--texto-meio {
+    font-size: 18px;
+    font-weight: 300;
+    letter-spacing: 0.05em;
+}

storefront/styles/sass/pages/home/vtex.store-link.scss

@@ -0,0 +1,12 @@
+.link--link-meio {
+    color: #fff;
+    text-decoration: underline;
+    padding: 16px 22px;
+    background-color: #4e1d52;
+    border-radius: 30px;
+    margin: 2rem 24px;
+    display: block;
+    width: fit-content;
+    font-size: 14px;
+    letter-spacing: 0.05em;
+}