feat(home): adicionando breadcrumbs desktop e mobile

src/components/Breadcrumbs/Breadcrumbs.module.scss

@@ -0,0 +1,68 @@
+@import '../../variaveis';
+
+.breadcrumbs {
+    padding: 29px 100px;
+    width: calc(100% - 200px);
+    margin-bottom: 51px;
+
+    @media #{$mq-tablet}, #{$mq-mobile}{
+        padding: 29px 16px;
+        width: calc(100% - 32px);
+    }
+
+    &__list {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        list-style: none;
+        gap: 8px;
+
+        &__item {
+
+            &__home {
+                img {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 31.25px;
+                    height: 31.25px;
+
+                    @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile}{
+                        width: 16px;
+                        height: 16px;
+                    }
+                }
+            }
+        }
+
+        &__seta {
+            img {
+                width: 15.62px;
+                height: 15.62px;
+
+                @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
+                    width: 8px;
+                    height: 8px;
+                }
+            }
+        }
+
+        &__link {
+            a {
+                text-decoration: none;
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 24px;
+                line-height: 28px;
+                text-transform: uppercase;
+                color: $color-primary-400;
+
+                @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
+                    font-size: 12px;
+                    line-height: 14px;
+                }
+            }
+        }
+    }
+}

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,28 @@
+import styles from './Breadcrumbs.module.scss'
+
+import home  from '../../assets/imgs/icon-home.png'
+import seta from '../../assets/imgs/arrow-point-to-right.png'
+
+const BreadCrumbs = () => {
+    return (
+        <section className={styles['breadcrumbs']}>
+            <ul className={styles['breadcrumbs__list']}>
+                <li className={styles['breadcrumbs__list__item']}>
+                    <a className={styles['breadcrumbs__list__item__home']} href="/" rel='noreferrer' >
+                        <img src={home} alt="Logo Home" />
+                    </a>
+                </li>
+                <li className={styles['breadcrumbs__list__seta']}>
+                    <img src={seta} alt="Logo Home" />
+                </li>
+                <li className={styles['breadcrumbs__list__link']}>
+                    <a href="/" rel='noreferrer' >
+                        Institucional
+                    </a>
+                </li>
+            </ul>
+        </section>
+    )
+}
+
+export { BreadCrumbs }

src/pages/Home.tsx

@@ -2,12 +2,13 @@ import styles from './Home.module.scss'
 
 import { Footer } from '../components/Footer/Footer';
 import { Header } from '../components/Header/Header';
+import { BreadCrumbs } from '../components/Breadcrumbs/Breadcrumbs';
 
 function Home() {
     return (
         <div className={styles['home']}>
             <Header />
-            <div></div>
+            <BreadCrumbs />
             <Footer />
         </div>
     );