Merge pull request 'feat: Cria BreadCrumb' (#6) from feature/criaMain into main

Reviewed-on: #6

react-academy/src/Components/BreadCrumb/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import home from "./BreadImages/home.png";
+import arrow from "./BreadImages/arrow.png";
+
+import "./style.css";
+
+const BreadCrumb = () => {
+  return (
+    <div className="container-bread">
+      <div className="BreadCrumb">
+        <a href="/sobre">
+          <img
+            className="BreadCrump-image1"
+            src={home}
+            alt="Ícone Home BreadCrumb"
+          />
+        </a>
+
+        <img
+          className="BreadCrump-image2"
+          src={arrow}
+          alt="Ícone Arrow BreadCrumb"
+        />
+        <a className="BreadCrumb-text" href="/">
+          INSTITUCIONAL
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default BreadCrumb;

react-academy/src/Components/BreadCrumb/style.css

@@ -0,0 +1,33 @@
+.BreadCrumb {
+  display: flex;
+  align-items: center;
+  margin: 29px 0px 80px 100px;
+  gap: 8px;
+}
+
+.BreadCrump-image1 {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.BreadCrump-image2 {
+  display: block;
+  width: 8px;
+  height: 8px;
+}
+
+.BreadCrumb-text {
+  font-family: "Roboto", sans-serif;
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+  text-decoration: none;
+  color: var(--color-gray-200);
+}
+
+@media screen and (max-width: 1024px) {
+  .BreadCrumb {
+    margin-left: 16px;
+  }
+}