diff --git a/src/assets/imgs/arrow-point-to-right.png b/src/assets/imgs/arrow-point-to-right.png new file mode 100644 index 0000000..c5625c0 Binary files /dev/null and b/src/assets/imgs/arrow-point-to-right.png differ diff --git a/src/assets/imgs/icon-home.png b/src/assets/imgs/icon-home.png new file mode 100644 index 0000000..05c6e06 Binary files /dev/null and b/src/assets/imgs/icon-home.png differ diff --git a/src/components/Breadcrumbs/Breadcrumbs.module.scss b/src/components/Breadcrumbs/Breadcrumbs.module.scss new file mode 100644 index 0000000..bd2a5d8 --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx new file mode 100644 index 0000000..f6ab28d --- /dev/null +++ b/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 ( +
+ +
+ ) +} + +export { BreadCrumbs } diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index f247586..d67805e 100644 --- a/src/pages/Home.tsx +++ b/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 (
-
+
);