src/App.tsx

@@ -1,11 +1,16 @@
-import './settings/styles/index.scss'
-
+import { Introduction } from './pages/Introduction'
 import { Header } from './template/Header'
 
+import './settings/styles/index.scss'
+
 export function App() {
 	return (
 		<>
 			<Header />
+
+			<main>
+				<Introduction />
+			</main>
 		</>
 	)
 }

src/assets/icons/arrow-right.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3751_560)">
+<path d="M11.9417 7.03685L5.22531 0.320703C4.79807 -0.106746 4.10537 -0.106746 3.67833 0.320703C3.25126 0.747771 3.25126 1.44043 3.67833 1.86747L9.62128 7.81023L3.67851 13.7528C3.25144 14.18 3.25144 14.8726 3.67851 15.2997C4.10558 15.7269 4.79824 15.7269 5.22548 15.2997L11.9418 8.58344C12.1554 8.3698 12.262 8.0901 12.262 7.81026C12.262 7.53029 12.1552 7.25038 11.9417 7.03685Z" fill="#C4C4C4"/>
+</g>
+<defs>
+<clipPath id="clip0_3751_560">
+<rect width="15.62" height="15.62" fill="white" transform="matrix(1 0 0 -1 0 15.6201)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/home.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3751_556)">
+<path d="M30.9231 14.8352L28.692 12.6041L16.4147 0.326808C15.9789 -0.108936 15.2723 -0.108936 14.8365 0.326808L2.55915 12.6041L0.326936 14.8364C-0.101287 15.2798 -0.089058 15.9863 0.354338 16.4146C0.786878 16.8323 1.47257 16.8323 1.90511 16.4146L2.23099 16.0864V30.1339C2.23099 30.7503 2.73069 31.25 3.34713 31.25H27.9018C28.5182 31.25 29.0179 30.7503 29.0179 30.1339V16.0864L29.3449 16.4134C29.7883 16.8417 30.4949 16.8294 30.9231 16.386C31.3408 15.9535 31.3408 15.2677 30.9231 14.8352ZM18.9728 29.0178H12.2761V20.0888H18.9728V29.0178ZM26.7856 29.0178H21.2051V18.9727C21.2051 18.3563 20.7054 17.8566 20.0889 17.8566H11.16C10.5436 17.8566 10.0438 18.3563 10.0438 18.9727V29.0178H4.46327V13.8542L15.6244 2.69296L26.7856 13.8542V29.0178Z" fill="#C4C4C4"/>
+</g>
+<defs>
+<clipPath id="clip0_3751_556">
+<rect width="31.25" height="31.25" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/Breadcrumb/index.module.scss

@@ -0,0 +1,45 @@
+@use '../../settings/styles/utils/helpers/mixin' as mix;
+
+.list {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+
+	.initial {
+		img {
+			@include mix.square(16px);
+
+			@media only screen and (min-width: 2500px) {
+				@include mix.square(31.25px);
+			}
+		}
+	}
+
+	.item {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+
+		a {
+			display: block;
+		}
+	}
+
+	.divider {
+		@include mix.square(8px);
+
+		@media only screen and (min-width: 2500px) {
+			@include mix.square(15.62px);
+		}
+	}
+
+	a {
+		color: var(--clr-gray-400);
+
+		transition: color 200ms linear;
+
+		&:hover {
+			color: var(--clr-primary-blue-500);
+		}
+	}
+}

src/components/Breadcrumb/index.tsx

@@ -0,0 +1,35 @@
+import arrowRightIcon from '../../assets/icons/arrow-right.svg'
+import initialHomeIcon from '../../assets/icons/home.svg'
+
+import css from './index.module.scss'
+
+import { HTMLAttributes } from 'react'
+
+interface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
+	list: Array<{ name: string; href: string }>
+}
+
+export function Breadcrumb({ list, ...props }: BreadcrumbProps) {
+	return (
+		<div {...props}>
+			<ul className={css.list}>
+				<li className={css.initial}>
+					<a href="/">
+						<img src={initialHomeIcon} alt="" />
+					</a>
+				</li>
+
+				{list.map(({ name, href }) => {
+					return (
+						<li key={name + '-breadcrumb-item'} className={css.item}>
+							<div className={css.divider}>
+								<img src={arrowRightIcon} alt="ícone de divisão" />
+							</div>
+							<a href={href}>{name}</a>
+						</li>
+					)
+				})}
+			</ul>
+		</div>
+	)
+}

src/pages/Introduction/index.module.scss

@@ -0,0 +1,33 @@
+@use '../../settings/styles/utils/helpers/functions' as function;
+
+.introduction {
+	margin-top: 29px;
+
+	@media screen and (min-width: 2500px) {
+		margin-top: 31px;
+	}
+}
+
+.container {
+	width: 100%;
+	padding: 0 16px;
+
+	@media screen and (min-width: 1025px) {
+		width: function.fluid(1080px, 1280px);
+		margin: 0 auto;
+		padding: 0;
+	}
+
+	@media screen and (min-width: 2500px) {
+		width: function.fluid(2299.68px, 2500px);
+	}
+}
+
+.breadcrumb {
+	a {
+		font-size: var(--txt-xs);
+		line-height: 14.06px;
+
+		text-transform: uppercase;
+	}
+}

src/pages/Introduction/index.tsx

@@ -0,0 +1,16 @@
+import { useMemo } from 'react'
+import { Breadcrumb } from '../../components/Breadcrumb'
+
+import css from './index.module.scss'
+
+export function Introduction() {
+	let listBreadcrumb = useMemo(() => [{ name: 'Introduction', href: '/' }], [])
+
+	return (
+		<section className={css.introduction}>
+			<div className={css.container}>
+				<Breadcrumb className={css.breadcrumb} list={listBreadcrumb} />
+			</div>
+		</section>
+	)
+}

src/settings/styles/utils/helpers/_mixin.scss

@@ -0,0 +1,4 @@
+@mixin square($size) {
+	width: #{$size};
+	height: #{$size};
+}