From 03888a014209eeb2ee5a20ec02a562cd826f1214 Mon Sep 17 00:00:00 2001
From: Wagner Vieira <wagnervieira1209@gmail.com>
Date: Thu, 5 Aug 2021 07:13:52 -0300
Subject: [PATCH 1/6] Create routes directory

---
 src/App.js                             |  14 +-
 src/components/pages/About.js          | 232 ++++++++++++-------------
 src/components/pages/ProductDetails.js | 161 ++++++++---------
 src/routes/about.js                    |  12 ++
 src/routes/home.js                     |   7 +
 src/routes/index.js                    |  17 ++
 src/routes/servicos/index.js           |  12 ++
 7 files changed, 238 insertions(+), 217 deletions(-)
 create mode 100644 src/routes/about.js
 create mode 100644 src/routes/home.js
 create mode 100644 src/routes/index.js
 create mode 100644 src/routes/servicos/index.js

diff --git a/src/App.js b/src/App.js
index 2af3aac..34631a6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,18 @@
 import React from "react";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 
 import ThemeProvider from "styles/ThemeProvider";
 import GlobalStyle from "styles/GlobalStyle";
 
-import Home from "components/pages/Home";
-import About from "components/pages/About";
-import PoductDetails from "components/pages/ProductDetails";
-import ProductDetails from "components/pages/ProductDetails";
+// Pode chamar routes porque é um export default
+import Routes from "routes";
 
 function App() {
     return (
         <ThemeProvider>
             <GlobalStyle />
             <Router>
-                <Routes>
-                    <Route path="/" element={<Home />} />
-                    <Route path="/sobre" element={<About />} />
-                    <Route path="/servicos" element={<ProductDetails />} />
-                </Routes>
+                <Routes />
             </Router>
         </ThemeProvider>
     );
diff --git a/src/components/pages/About.js b/src/components/pages/About.js
index 55f2c9c..0dbeac2 100644
--- a/src/components/pages/About.js
+++ b/src/components/pages/About.js
@@ -3,8 +3,6 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import BreadCrump from "components/atoms/BreadCrump";
 
-import { useScrollToTop } from "hooks/scroll";
-
 import Hero from "components/molecules/Hero";
 import BgCarImage from "assets/street.jpg";
 import Section from "components/molecules/Section";
@@ -35,127 +33,115 @@ const ImageContainer = styled.div`
     }
 `;
 
-const About = () => {
-    useScrollToTop();
-
-    return (
-        <>
-            <Hero image={BgCarImage}>
-                <Heading>
-                    <h1>Auto escola Nardini</h1>
-                </Heading>
-                <BreadCrump
-                    items={[{ label: "Início", link: "/" }, { label: "Sobre" }]}
-                />
-            </Hero>
-            <Section md={2}>
-                <Grid md={2}>
-                    <div>
-                        <p>
+const About = () => (
+    <>
+        <Hero image={BgCarImage}>
+            <Heading>
+                <h1>Auto escola Nardini</h1>
+            </Heading>
+            <BreadCrump
+                items={[{ label: "Início", link: "/" }, { label: "Sobre" }]}
+            />
+        </Hero>
+        <Section md={2}>
+            <Grid md={2}>
+                <div>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        Corporis tempora distinctio ipsam fuga, eveniet quasi
+                        nam enim aspernatur harum suscipit temporibus sint
+                        cupiditate iste aliquam non. Ipsa explicabo natus nam.
+                    </p>
+                    <p>
+                        Officiis eum perspiciatis alias dolorem officia
+                        explicabo molestias dolorum dolores eveniet delectus,
+                        repudiandae itaque corporis sequi? Quidem voluptatum
+                        iste id labore, magnam deserunt, similique unde
+                        accusamus possimus impedit ad? Similique.
+                    </p>
+                    <p>
+                        Sequi itaque quas odit ratione. Officiis consectetur
+                        iste eligendi optio odio odit iure nam illum vitae,
+                        consequatur, blanditiis veritatis! Placeat non velit
+                        suscipit incidunt praesentium iure obcaecati sapiente
+                        nobis temporibus!
+                    </p>
+                    <ul>
+                        <li>
                             Lorem ipsum dolor sit amet consectetur adipisicing
-                            elit. Corporis tempora distinctio ipsam fuga,
-                            eveniet quasi nam enim aspernatur harum suscipit
-                            temporibus sint cupiditate iste aliquam non. Ipsa
-                            explicabo natus nam.
-                        </p>
-                        <p>
-                            Officiis eum perspiciatis alias dolorem officia
-                            explicabo molestias dolorum dolores eveniet
-                            delectus, repudiandae itaque corporis sequi? Quidem
-                            voluptatum iste id labore, magnam deserunt,
-                            similique unde accusamus possimus impedit ad?
-                            Similique.
-                        </p>
-                        <p>
-                            Sequi itaque quas odit ratione. Officiis consectetur
-                            iste eligendi optio odio odit iure nam illum vitae,
-                            consequatur, blanditiis veritatis! Placeat non velit
-                            suscipit incidunt praesentium iure obcaecati
-                            sapiente nobis temporibus!
-                        </p>
-                        <ul>
-                            <li>
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </li>
-                            <li>
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </li>
-                            <li>
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </li>
-                            <li>
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </li>
-                            <li>
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </li>
-                        </ul>
-                    </div>
-                    <div>
-                        <p>
-                            Lorem ipsum dolor sit amet consectetur, adipisicing
-                            elit. Aliquid similique repudiandae tenetur qui
-                            placeat commodi minus dolor rem impedit sed sit
-                            obcaecati culpa maxime, tempore quia natus itaque
-                            dolores. Neque.
-                        </p>
-                        <ImageContainer>
-                            <AboutImage />
-                        </ImageContainer>
-                    </div>
-                </Grid>
-            </Section>
-            <Section inverse>
-                <Grid md={2}>
-                    <div>
-                        <h4>Missão</h4>
-                        <p>
-                            Lorem ipsum, dolor sit amet consectetur adipisicing
-                            elit. Nisi deleniti maiores debitis suscipit neque
-                            sit error doloribus, sed provident animi quas
-                            ratione reiciendis odit doloremque ab ut laborum
-                            odio rem?
-                        </p>
-                    </div>
-                    <div>
-                        <h4>Visão</h4>
-                        <p>
-                            Adipisci quasi sit non sunt dolor esse in animi cum
-                            reprehenderit! Veniam autem eaque quia? Nesciunt,
-                            nobis. Hic ut, eligendi, quasi placeat harum a
-                            beatae reiciendis, tenetur est ex in.
-                        </p>
-                    </div>
-                </Grid>
-            </Section>
-            <Section>
-                <Heading>
-                    <h2>Conheça nossos professores</h2>
-                </Heading>
-                <Grid sm={2} md={3} lg={4}>
-                    {instructors.map((instructor) => (
-                        <Card key={instructor.id}>
-                            <CardMedia image={instructor.avatar}>
-                                <CardMediaDescription>
-                                    <h5>{instructor.name}</h5>
-                                </CardMediaDescription>
-                            </CardMedia>
-                        </Card>
-                    ))}
-                </Grid>
-            </Section>
-            <Footer />
-        </>
-    );
-};
-
-About.defaultProps = {};
-
-About.propTypes = {};
+                            elit.
+                        </li>
+                        <li>
+                            Lorem ipsum dolor sit amet consectetur adipisicing
+                            elit.
+                        </li>
+                        <li>
+                            Lorem ipsum dolor sit amet consectetur adipisicing
+                            elit.
+                        </li>
+                        <li>
+                            Lorem ipsum dolor sit amet consectetur adipisicing
+                            elit.
+                        </li>
+                        <li>
+                            Lorem ipsum dolor sit amet consectetur adipisicing
+                            elit.
+                        </li>
+                    </ul>
+                </div>
+                <div>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur, adipisicing
+                        elit. Aliquid similique repudiandae tenetur qui placeat
+                        commodi minus dolor rem impedit sed sit obcaecati culpa
+                        maxime, tempore quia natus itaque dolores. Neque.
+                    </p>
+                    <ImageContainer>
+                        <AboutImage />
+                    </ImageContainer>
+                </div>
+            </Grid>
+        </Section>
+        <Section inverse>
+            <Grid md={2}>
+                <div>
+                    <h4>Missão</h4>
+                    <p>
+                        Lorem ipsum, dolor sit amet consectetur adipisicing
+                        elit. Nisi deleniti maiores debitis suscipit neque sit
+                        error doloribus, sed provident animi quas ratione
+                        reiciendis odit doloremque ab ut laborum odio rem?
+                    </p>
+                </div>
+                <div>
+                    <h4>Visão</h4>
+                    <p>
+                        Adipisci quasi sit non sunt dolor esse in animi cum
+                        reprehenderit! Veniam autem eaque quia? Nesciunt, nobis.
+                        Hic ut, eligendi, quasi placeat harum a beatae
+                        reiciendis, tenetur est ex in.
+                    </p>
+                </div>
+            </Grid>
+        </Section>
+        <Section>
+            <Heading>
+                <h2>Conheça nossos professores</h2>
+            </Heading>
+            <Grid sm={2} md={3} lg={4}>
+                {instructors.map((instructor) => (
+                    <Card key={instructor.id}>
+                        <CardMedia image={instructor.avatar}>
+                            <CardMediaDescription>
+                                <h5>{instructor.name}</h5>
+                            </CardMediaDescription>
+                        </CardMedia>
+                    </Card>
+                ))}
+            </Grid>
+        </Section>
+        <Footer />
+    </>
+);
 
 export default About;
diff --git a/src/components/pages/ProductDetails.js b/src/components/pages/ProductDetails.js
index 3878cb0..fee8d2e 100644
--- a/src/components/pages/ProductDetails.js
+++ b/src/components/pages/ProductDetails.js
@@ -4,8 +4,6 @@ import styled from "styled-components";
 import { FaIdCard, FaHome, FaScroll } from "react-icons/fa";
 import BreadCrump from "components/atoms/BreadCrump";
 
-import { useScrollToTop } from "hooks/scroll";
-
 import Hero from "components/molecules/Hero";
 import BgCarImage from "assets/street.jpg";
 import Section from "components/molecules/Section";
@@ -38,88 +36,83 @@ const PinnedItem = styled.li`
     }
 `;
 
-const ProductDetails = () => {
-    useScrollToTop();
-
-    return (
-        <>
-            <Hero image={BgCarImage}>
-                <Heading>
-                    <h1>Nomes Do Serviço</h1>
-                </Heading>
-                <BreadCrump
-                    items={[
-                        { label: "Início", link: "/" },
-                        { label: "Serviços" },
-                        { label: "Nome do Serviço" },
-                    ]}
-                />
-            </Hero>
-            <Section>
-                <p>
-                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
-                    Voluptatem dolores nostrum mollitia voluptatibus incidunt
-                    magnam ullam, quos asperiores perferendis! Asperiores ea
-                    tempore, ullam quos natus ipsa minima mollitia adipisci
-                    totam.
-                </p>
-                <p>
-                    Commodi eaque vitae consequatur quaerat ex, praesentium
-                    voluptates. Ad rerum animi voluptatem. Vel quidem doloremque
-                    accusantium consequuntur impedit animi similique doloribus
-                    repudiandae, deserunt aspernatur voluptatum dolorem quos
-                    quisquam placeat quibusdam.
-                </p>
-                <p>
-                    Debitis quia animi placeat voluptas et at, est vel.
-                    Laudantium corporis quia architecto. Asperiores eum eos
-                    reprehenderit vitae deserunt ut, totam est sint quaerat
-                    saepe quis, voluptas autem minima aperiam.
-                </p>
-                <h5>Documentos necessários:</h5>
-                <PinnedList>
-                    <PinnedItem>
-                        <FaIdCard />
-                        RG
-                    </PinnedItem>
-                    <PinnedItem>
-                        <FaIdCard />
-                        CPF
-                    </PinnedItem>
-                    <PinnedItem>
-                        <FaScroll />
-                        Certidão de nascimento ou casamento
-                    </PinnedItem>
-                    <PinnedItem>
-                        <FaHome />
-                        Comprovante de residência
-                    </PinnedItem>
-                </PinnedList>
-            </Section>
-            <Section inverse>
-                <Callout>
-                    <CalloutBody>
-                        <h6>Faça sua matrícula agora mesmo</h6>
-                        <p>
-                            Lorem ipsum dolor sit amet consectetur adipisicing
-                            elit. Porro maxime consectetur quam minima nisi,
-                            dolores illo, eos laudantium omnis placeat excepturi
-                            perspiciatis cupiditate ab praesentium vel corrupti
-                            accusantium atque. Consequuntur.
-                        </p>
-                        <CalloutActions>
-                            <Button color="primary">matricular</Button>
-                        </CalloutActions>
-                    </CalloutBody>
-                    <CalloutMedia>
-                        <SpeedImage />
-                    </CalloutMedia>
-                </Callout>
-            </Section>
-            <Footer />
-        </>
-    );
-};
+const ProductDetails = () => (
+    <>
+        <Hero image={BgCarImage}>
+            <Heading>
+                <h1>Nomes Do Serviço</h1>
+            </Heading>
+            <BreadCrump
+                items={[
+                    { label: "Início", link: "/" },
+                    { label: "Serviços" },
+                    { label: "Nome do Serviço" },
+                ]}
+            />
+        </Hero>
+        <Section>
+            <p>
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                Voluptatem dolores nostrum mollitia voluptatibus incidunt magnam
+                ullam, quos asperiores perferendis! Asperiores ea tempore, ullam
+                quos natus ipsa minima mollitia adipisci totam.
+            </p>
+            <p>
+                Commodi eaque vitae consequatur quaerat ex, praesentium
+                voluptates. Ad rerum animi voluptatem. Vel quidem doloremque
+                accusantium consequuntur impedit animi similique doloribus
+                repudiandae, deserunt aspernatur voluptatum dolorem quos
+                quisquam placeat quibusdam.
+            </p>
+            <p>
+                Debitis quia animi placeat voluptas et at, est vel. Laudantium
+                corporis quia architecto. Asperiores eum eos reprehenderit vitae
+                deserunt ut, totam est sint quaerat saepe quis, voluptas autem
+                minima aperiam.
+            </p>
+            <h5>Documentos necessários:</h5>
+            <PinnedList>
+                <PinnedItem>
+                    <FaIdCard />
+                    RG
+                </PinnedItem>
+                <PinnedItem>
+                    <FaIdCard />
+                    CPF
+                </PinnedItem>
+                <PinnedItem>
+                    <FaScroll />
+                    Certidão de nascimento ou casamento
+                </PinnedItem>
+                <PinnedItem>
+                    <FaHome />
+                    Comprovante de residência
+                </PinnedItem>
+            </PinnedList>
+        </Section>
+        <Section inverse>
+            <Callout>
+                <CalloutBody>
+                    <h6>Faça sua matrícula agora mesmo</h6>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        Porro maxime consectetur quam minima nisi, dolores illo,
+                        eos laudantium omnis placeat excepturi perspiciatis
+                        cupiditate ab praesentium vel corrupti accusantium
+                        atque. Consequuntur.
+                    </p>
+                    <CalloutActions>
+                        <Button color="primary">matricular</Button>
+                    </CalloutActions>
+                </CalloutBody>
+                <CalloutMedia>
+                    <SpeedImage />
+                </CalloutMedia>
+            </Callout>
+        </Section>
+        <Footer />
+    </>
+);
 
 ProductDetails.defaultProps = {};
 
diff --git a/src/routes/about.js b/src/routes/about.js
new file mode 100644
index 0000000..a19b168
--- /dev/null
+++ b/src/routes/about.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+import AboutPage from "components/pages/About";
+import { useScrollToTop } from "hooks/scroll";
+
+const About = () => {
+    useScrollToTop();
+
+    return <AboutPage />;
+};
+
+export default About;
diff --git a/src/routes/home.js b/src/routes/home.js
new file mode 100644
index 0000000..9f7b339
--- /dev/null
+++ b/src/routes/home.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+import HomePage from "components/pages/Home";
+
+const Home = () => <HomePage />;
+
+export default Home;
diff --git a/src/routes/index.js b/src/routes/index.js
new file mode 100644
index 0000000..381265d
--- /dev/null
+++ b/src/routes/index.js
@@ -0,0 +1,17 @@
+import React from "react";
+
+import { Route, Routes } from "react-router-dom";
+
+import Home from "routes/home";
+import About from "routes/about";
+import ProductDetails from "routes/servicos";
+
+const AppRoutes = () => (
+    <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/sobre" element={<About />} />
+        <Route path="/servicos" element={<ProductDetails />} />
+    </Routes>
+);
+
+export default AppRoutes;
diff --git a/src/routes/servicos/index.js b/src/routes/servicos/index.js
new file mode 100644
index 0000000..83a64c6
--- /dev/null
+++ b/src/routes/servicos/index.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+import ProductDetailsPage from "components/pages/ProductDetails";
+import { useScrollToTop } from "hooks/scroll";
+
+const ProductDetails = () => {
+    useScrollToTop();
+
+    return <ProductDetailsPage />;
+};
+
+export default ProductDetails;

From 74f38b0275c7b8fc732a56db6002b51148a8e248 Mon Sep 17 00:00:00 2001
From: Wagner Vieira <wagnervieira1209@gmail.com>
Date: Thu, 5 Aug 2021 08:07:27 -0300
Subject: [PATCH 2/6] Create Product Route

---
 src/components/organisms/ProductGrid.js | 12 ++-----
 src/components/pages/Home.js            | 48 +++++--------------------
 src/components/pages/ProductDetails.js  | 15 +++++---
 src/hooks/products.js                   | 47 ++++++++++++++++++++++++
 src/routes/home.js                      |  8 ++++-
 src/routes/index.js                     |  2 +-
 src/routes/servicos/index.js            |  9 +++--
 src/types/ProductType.js                | 11 ++++++
 8 files changed, 95 insertions(+), 57 deletions(-)
 create mode 100644 src/hooks/products.js
 create mode 100644 src/types/ProductType.js

diff --git a/src/components/organisms/ProductGrid.js b/src/components/organisms/ProductGrid.js
index f484057..bb27196 100644
--- a/src/components/organisms/ProductGrid.js
+++ b/src/components/organisms/ProductGrid.js
@@ -7,6 +7,7 @@ import Heading from "components/atoms/Heading";
 import Button from "components/atoms/Button";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
+import ProductType from "types/ProductType";
 
 const ToolBar = styled.div`
     margin-top: 40px;
@@ -34,7 +35,7 @@ const ProductList = ({ products }) => {
                                         color="primary"
                                         variant="link"
                                         as={Link}
-                                        to="/servicos"
+                                        to={`/servicos/${product.slang}`}
                                     >
                                         Saiba mais
                                     </Button>
@@ -65,14 +66,7 @@ ProductList.defaultProps = {
 };
 
 ProductList.propTypes = {
-    products: PropTypes.arrayOf(
-        PropTypes.shape({
-            id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-            image: PropTypes.string,
-            title: PropTypes.string,
-            summary: PropTypes.string,
-        })
-    ),
+    products: PropTypes.arrayOf(ProductType),
 };
 
 export default ProductList;
diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js
index 26b66eb..3200f9b 100644
--- a/src/components/pages/Home.js
+++ b/src/components/pages/Home.js
@@ -1,5 +1,5 @@
 import React from "react";
-//import PropTypes from "prop-types";
+import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 
 import { FaCar, FaKey, FaMapMarkedAlt, FaAccessibleIcon } from "react-icons/fa";
@@ -11,49 +11,15 @@ import Button from "components/atoms/Button";
 import BgCarImage from "assets/street.jpg";
 import AboutVideo from "assets/AboutVideo.mp4";
 
-import PlaceHolderImage from "stories/assets/car.jpg";
-
 import Grid from "components/atoms/Grid";
 import Feature from "components/atoms/Feature";
 import Accordion, { AccordionGroup } from "components/atoms/Accordion";
 import Section from "components/molecules/Section";
 import ProductGrid from "components/organisms/ProductGrid";
 import Footer from "components/organisms/Footer";
+import ProductType from "types/ProductType";
 
-const products = [
-    {
-        id: 1,
-        title: "1a Habilitação",
-        image: PlaceHolderImage,
-        summary: "Lorem ipsum dolor sit amet",
-    },
-    {
-        id: 2,
-        title: "Moto e carro",
-        image: PlaceHolderImage,
-        summary: "Lorem ipsum dolor sit amet",
-    },
-    {
-        id: 3,
-        title: "Testes práticos",
-        image: PlaceHolderImage,
-        summary: "Lorem ipsum dolor sit amet",
-    },
-    {
-        id: 4,
-        title: "Aulas virtuais",
-        image: PlaceHolderImage,
-        summary: "Lorem ipsum dolor sit amet",
-    },
-    {
-        id: 5,
-        title: "Aulas presenciais",
-        image: PlaceHolderImage,
-        summary: "Lorem ipsum dolor sit amet",
-    },
-];
-
-const Home = () => (
+const Home = ({ products }) => (
     <>
         <Hero image={BgCarImage}>
             <Heading>
@@ -166,8 +132,12 @@ const Home = () => (
     </>
 );
 
-//Home.defaultProps = {};
+Home.defaultProps = {
+    products: [],
+};
 
-//Home.propTypes = {};
+Home.propTypes = {
+    products: PropTypes.arrayOf(ProductType),
+};
 
 export default Home;
diff --git a/src/components/pages/ProductDetails.js b/src/components/pages/ProductDetails.js
index fee8d2e..3092e83 100644
--- a/src/components/pages/ProductDetails.js
+++ b/src/components/pages/ProductDetails.js
@@ -17,6 +17,7 @@ import Callout, {
 } from "components/atoms/Callout";
 
 import SpeedImage from "draws/Speed";
+import ProductType from "types/ProductType";
 
 const PinnedList = styled.ul`
     list-style: none;
@@ -36,17 +37,17 @@ const PinnedItem = styled.li`
     }
 `;
 
-const ProductDetails = () => (
+const ProductDetails = ({ product }) => (
     <>
         <Hero image={BgCarImage}>
             <Heading>
-                <h1>Nomes Do Serviço</h1>
+                <h1>{product.title}</h1>
             </Heading>
             <BreadCrump
                 items={[
                     { label: "Início", link: "/" },
                     { label: "Serviços" },
-                    { label: "Nome do Serviço" },
+                    { label: product.title },
                 ]}
             />
         </Hero>
@@ -114,8 +115,12 @@ const ProductDetails = () => (
     </>
 );
 
-ProductDetails.defaultProps = {};
+ProductDetails.defaultProps = {
+    product: {},
+};
 
-ProductDetails.propTypes = {};
+ProductDetails.propTypes = {
+    product: ProductType,
+};
 
 export default ProductDetails;
diff --git a/src/hooks/products.js b/src/hooks/products.js
new file mode 100644
index 0000000..0d689ed
--- /dev/null
+++ b/src/hooks/products.js
@@ -0,0 +1,47 @@
+import PlaceHolderImage from "stories/assets/car.jpg";
+
+const products = [
+    {
+        id: 1,
+        title: "1a Habilitação",
+        slang: "primeira-habilitacao",
+        image: PlaceHolderImage,
+        summary: "Lorem ipsum dolor sit amet",
+    },
+    {
+        id: 2,
+        title: "Moto e carro",
+        slang: "moto-e-carro",
+        image: PlaceHolderImage,
+        summary: "Lorem ipsum dolor sit amet",
+    },
+    {
+        id: 3,
+        title: "Testes práticos",
+        slang: "testes-praticos",
+        image: PlaceHolderImage,
+        summary: "Lorem ipsum dolor sit amet",
+    },
+    {
+        id: 4,
+        title: "Aulas virtuais",
+        slang: "aulas-virtuais",
+        image: PlaceHolderImage,
+        summary: "Lorem ipsum dolor sit amet",
+    },
+    {
+        id: 5,
+        title: "Aulas presenciais",
+        slang: "aulas-presenciais",
+        image: PlaceHolderImage,
+        summary: "Lorem ipsum dolor sit amet",
+    },
+];
+
+export const useProducts = () => {
+    return products;
+};
+
+export const useProduct = ({ slang }) => {
+    return products.find((p) => p.slang === slang);
+};
diff --git a/src/routes/home.js b/src/routes/home.js
index 9f7b339..d280682 100644
--- a/src/routes/home.js
+++ b/src/routes/home.js
@@ -2,6 +2,12 @@ import React from "react";
 
 import HomePage from "components/pages/Home";
 
-const Home = () => <HomePage />;
+import { useProducts } from "hooks/products";
+
+const Home = () => {
+    const products = useProducts();
+
+    return <HomePage products={products} />;
+};
 
 export default Home;
diff --git a/src/routes/index.js b/src/routes/index.js
index 381265d..008c8bd 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -10,7 +10,7 @@ const AppRoutes = () => (
     <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/sobre" element={<About />} />
-        <Route path="/servicos" element={<ProductDetails />} />
+        <Route path="/servicos/:slang" element={<ProductDetails />} />
     </Routes>
 );
 
diff --git a/src/routes/servicos/index.js b/src/routes/servicos/index.js
index 83a64c6..2c259f3 100644
--- a/src/routes/servicos/index.js
+++ b/src/routes/servicos/index.js
@@ -1,12 +1,17 @@
 import React from "react";
-
+import { useParams } from "react-router-dom";
 import ProductDetailsPage from "components/pages/ProductDetails";
 import { useScrollToTop } from "hooks/scroll";
+import { useProduct } from "hooks/products";
 
 const ProductDetails = () => {
     useScrollToTop();
 
-    return <ProductDetailsPage />;
+    // Retorna todos os parâmetros da rota
+    const { slang } = useParams();
+
+    const product = useProduct({ slang });
+    return <ProductDetailsPage product={product} />;
 };
 
 export default ProductDetails;
diff --git a/src/types/ProductType.js b/src/types/ProductType.js
new file mode 100644
index 0000000..96d8cbd
--- /dev/null
+++ b/src/types/ProductType.js
@@ -0,0 +1,11 @@
+import PropTypes from "prop-types";
+
+const ProductType = PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    image: PropTypes.string,
+    title: PropTypes.string,
+    summary: PropTypes.string,
+    slang: PropTypes.string,
+});
+
+export default ProductType;

From 9d7f26feadba8512f36d20c1cc038af3220266d9 Mon Sep 17 00:00:00 2001
From: Wagner Vieira <wagnervieira1209@gmail.com>
Date: Sun, 8 Aug 2021 17:27:11 -0300
Subject: [PATCH 3/6] Add fake product list to documentation

---
 package.json                                  |   1 +
 scripts/generators/products.js                |  22 +
 src/components/organisms/ProductGrid.js       |   2 +-
 .../organisms/ProductGrid.stories.js          |  25 +-
 src/components/pages/Home.js                  |   2 +-
 src/components/pages/Home.stories.js          |   6 +-
 src/components/pages/ProductDetails.js        |   2 +-
 .../pages/ProductDetails.stories.js           |   3 +-
 src/models/builders/fixtures/products.json    | 702 ++++++++++++++++++
 src/models/builders/products.js               |  19 +
 src/{ => models}/types/ProductType.js         |   0
 yarn.lock                                     |   5 +
 12 files changed, 764 insertions(+), 25 deletions(-)
 create mode 100644 scripts/generators/products.js
 create mode 100644 src/models/builders/fixtures/products.json
 create mode 100644 src/models/builders/products.js
 rename src/{ => models}/types/ProductType.js (100%)

diff --git a/package.json b/package.json
index 9f76709..81824c1 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^13.1.9",
     "chromatic": "^5.10.0-canary.0",
+    "faker": "^5.5.3",
     "history": "^5.0.0",
     "jest-styled-components": "^7.0.4",
     "prettier": "^2.3.0",
diff --git a/scripts/generators/products.js b/scripts/generators/products.js
new file mode 100644
index 0000000..26ac41d
--- /dev/null
+++ b/scripts/generators/products.js
@@ -0,0 +1,22 @@
+const faker = require("faker");
+
+// Imagem não adicionamos porque é adicionada dinamicamente
+//import PlaceHolderImage from "stories/assets/car.jpg";
+
+const buildProductList = (size) => {
+    const result = [];
+
+    for (let i = 0; i < size; i++) {
+        result.push({
+            id: i + 1,
+            image: "",
+            title: faker.commerce.productName(),
+            summary: faker.commerce.productDescription(),
+            slang: faker.lorem.slug(),
+        });
+    }
+
+    return result;
+};
+
+console.log(JSON.stringify(buildProductList(100), null, "  "));
diff --git a/src/components/organisms/ProductGrid.js b/src/components/organisms/ProductGrid.js
index bb27196..fca619b 100644
--- a/src/components/organisms/ProductGrid.js
+++ b/src/components/organisms/ProductGrid.js
@@ -7,7 +7,7 @@ import Heading from "components/atoms/Heading";
 import Button from "components/atoms/Button";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
-import ProductType from "types/ProductType";
+import ProductType from "models/types/ProductType";
 
 const ToolBar = styled.div`
     margin-top: 40px;
diff --git a/src/components/organisms/ProductGrid.stories.js b/src/components/organisms/ProductGrid.stories.js
index 29fe22c..5a45629 100644
--- a/src/components/organisms/ProductGrid.stories.js
+++ b/src/components/organisms/ProductGrid.stories.js
@@ -1,24 +1,11 @@
-import React from 'react';
+import React from "react";
 
-import ProductGrid from './ProductGrid';
-import PlaceHolderImage from "stories/assets/car.jpg";
+import ProductGrid from "./ProductGrid";
+import { buildProductList } from "models/builders/products";
 
 export default {
     title: "Components/Organisms/ProductGrid",
-    component: ProductGrid
-}
-
-export const usage = () => (
-    <ProductGrid
-    products={[
-        { Id: 3, image: PlaceHolderImage, title: "Título 1", summary: "Lorem ipsum dolor sit amet", },
-        { Id: 2, image: PlaceHolderImage, title: "Título 2", summary: "Lorem ipsum dolor sit amet", },
-        { Id: 3, image: PlaceHolderImage, title: "Título 3", summary: "Lorem ipsum dolor sit amet", },
-        { Id: 4, image: PlaceHolderImage, title: "Título 4", summary: "Lorem ipsum dolor sit amet", },
-        { Id: 5, image: PlaceHolderImage, title: "Título 5", summary: "Lorem ipsum dolor sit amet", },
-        { Id: 6, image: PlaceHolderImage, title: "Título 6", summary: "Lorem ipsum dolor sit amet", }
-    ]}>
-
-    </ProductGrid>
-)
+    component: ProductGrid,
+};
 
+export const usage = () => <ProductGrid products={buildProductList(6)} />;
diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js
index 3200f9b..54dd0dc 100644
--- a/src/components/pages/Home.js
+++ b/src/components/pages/Home.js
@@ -17,7 +17,7 @@ import Accordion, { AccordionGroup } from "components/atoms/Accordion";
 import Section from "components/molecules/Section";
 import ProductGrid from "components/organisms/ProductGrid";
 import Footer from "components/organisms/Footer";
-import ProductType from "types/ProductType";
+import ProductType from "models/types/ProductType";
 
 const Home = ({ products }) => (
     <>
diff --git a/src/components/pages/Home.stories.js b/src/components/pages/Home.stories.js
index e24dc36..2455838 100644
--- a/src/components/pages/Home.stories.js
+++ b/src/components/pages/Home.stories.js
@@ -1,5 +1,5 @@
 import React from "react";
-
+import { buildProductList } from "models/builders/products";
 import Home from "./Home";
 
 export default {
@@ -7,4 +7,6 @@ export default {
     component: Home,
 };
 
-export const usage = () => <Home />;
+const products = buildProductList(8);
+
+export const usage = () => <Home products={products} />;
diff --git a/src/components/pages/ProductDetails.js b/src/components/pages/ProductDetails.js
index 3092e83..80a8c10 100644
--- a/src/components/pages/ProductDetails.js
+++ b/src/components/pages/ProductDetails.js
@@ -17,7 +17,7 @@ import Callout, {
 } from "components/atoms/Callout";
 
 import SpeedImage from "draws/Speed";
-import ProductType from "types/ProductType";
+import ProductType from "models/types/ProductType";
 
 const PinnedList = styled.ul`
     list-style: none;
diff --git a/src/components/pages/ProductDetails.stories.js b/src/components/pages/ProductDetails.stories.js
index 8dd67f7..c40c7b9 100644
--- a/src/components/pages/ProductDetails.stories.js
+++ b/src/components/pages/ProductDetails.stories.js
@@ -1,10 +1,11 @@
 import React from "react";
 
 import ProductDetails from "./ProductDetails";
+import { buildProduct } from "models/builders/products";
 
 export default {
     title: "Components/Pages/ProductDetails",
     component: ProductDetails,
 };
 
-export const usage = () => <ProductDetails />;
+export const usage = () => <ProductDetails product={buildProduct()} />;
diff --git a/src/models/builders/fixtures/products.json b/src/models/builders/fixtures/products.json
new file mode 100644
index 0000000..1dc6766
--- /dev/null
+++ b/src/models/builders/fixtures/products.json
@@ -0,0 +1,702 @@
+[
+  {
+    "id": 1,
+    "image": "",
+    "title": "Rustic Cotton Car",
+    "summary": "New range of formal shirts are designed keeping you in mind. With fits and styling that will make you stand apart",
+    "slang": "voluptatum-eos-voluptatem"
+  },
+  {
+    "id": 2,
+    "image": "",
+    "title": "Ergonomic Soft Chips",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "earum-perferendis-reiciendis"
+  },
+  {
+    "id": 3,
+    "image": "",
+    "title": "Fantastic Steel Soap",
+    "summary": "The Football Is Good For Training And Recreational Purposes",
+    "slang": "velit-quasi-asperiores"
+  },
+  {
+    "id": 4,
+    "image": "",
+    "title": "Licensed Concrete Car",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "explicabo-nostrum-temporibus"
+  },
+  {
+    "id": 5,
+    "image": "",
+    "title": "Intelligent Fresh Tuna",
+    "summary": "New range of formal shirts are designed keeping you in mind. With fits and styling that will make you stand apart",
+    "slang": "vero-consequuntur-et"
+  },
+  {
+    "id": 6,
+    "image": "",
+    "title": "Generic Concrete Hat",
+    "summary": "New range of formal shirts are designed keeping you in mind. With fits and styling that will make you stand apart",
+    "slang": "cumque-eligendi-est"
+  },
+  {
+    "id": 7,
+    "image": "",
+    "title": "Handmade Cotton Car",
+    "summary": "New range of formal shirts are designed keeping you in mind. With fits and styling that will make you stand apart",
+    "slang": "perferendis-vitae-corporis"
+  },
+  {
+    "id": 8,
+    "image": "",
+    "title": "Handcrafted Rubber Pants",
+    "summary": "Carbonite web goalkeeper gloves are ergonomically designed to give easy fit",
+    "slang": "similique-dolorem-id"
+  },
+  {
+    "id": 9,
+    "image": "",
+    "title": "Fantastic Fresh Pants",
+    "summary": "The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive",
+    "slang": "dolores-voluptatem-at"
+  },
+  {
+    "id": 10,
+    "image": "",
+    "title": "Tasty Plastic Gloves",
+    "summary": "The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive",
+    "slang": "rerum-saepe-quia"
+  },
+  {
+    "id": 11,
+    "image": "",
+    "title": "Practical Rubber Chips",
+    "summary": "The Football Is Good For Training And Recreational Purposes",
+    "slang": "vel-nihil-dignissimos"
+  },
+  {
+    "id": 12,
+    "image": "",
+    "title": "Sleek Metal Soap",
+    "summary": "Boston's most advanced compression wear technology increases muscle oxygenation, stabilizes active muscles",
+    "slang": "necessitatibus-inventore-officiis"
+  },
+  {
+    "id": 13,
+    "image": "",
+    "title": "Tasty Concrete Hat",
+    "summary": "The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J",
+    "slang": "voluptatem-corporis-explicabo"
+  },
+  {
+    "id": 14,
+    "image": "",
+    "title": "Practical Fresh Keyboard",
+    "summary": "Andy shoes are designed to keeping in mind durability as well as trends, the most stylish range of shoes & sandals",
+    "slang": "minus-labore-rerum"
+  },
+  {
+    "id": 15,
+    "image": "",
+    "title": "Unbranded Frozen Towels",
+    "summary": "The beautiful range of Apple Natural├® that has an exciting mix of natural ingredients. With the Goodness of 100% Natural Ingredients",
+    "slang": "vel-quidem-harum"
+  },
+  {
+    "id": 16,
+    "image": "",
+    "title": "Tasty Soft Mouse",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "dolorem-voluptatem-tempora"
+  },
+  {
+    "id": 17,
+    "image": "",
+    "title": "Intelligent Frozen Table",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "facere-quia-repellendus"
+  },
+  {
+    "id": 18,
+    "image": "",
+    "title": "Handmade Plastic Gloves",
+    "summary": "New range of formal shirts are designed keeping you in mind. With fits and styling that will make you stand apart",
+    "slang": "sint-dolores-omnis"
+  },
+  {
+    "id": 19,
+    "image": "",
+    "title": "Small Frozen Gloves",
+    "summary": "The beautiful range of Apple Natural├® that has an exciting mix of natural ingredients. With the Goodness of 100% Natural Ingredients",
+    "slang": "eum-nemo-ad"
+  },
+  {
+    "id": 20,
+    "image": "",
+    "title": "Fantastic Fresh Hat",
+    "summary": "The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J",
+    "slang": "totam-dolorum-nostrum"
+  },
+  {
+    "id": 21,
+    "image": "",
+    "title": "Awesome Steel Mouse",
+    "summary": "The slim & simple Maple Gaming Keyboard from Dev Byte comes with a sleek body and 7- Color RGB LED Back-lighting for smart functionality",
+    "slang": "at-quisquam-est"
+  },
+  {
+    "id": 22,
+    "image": "",
+    "title": "Gorgeous Steel Bacon",
+    "summary": "The beautiful range of Apple Natural├® that has an exciting mix of natural ingredients. With the Goodness of 100% Natural Ingredients",
+    "slang": "reprehenderit-enim-labore"
+  },
+  {
+    "id": 23,
+    "image": "",
+    "title": "Small Soft Shoes",
+    "summary": "New ABC 13 9370, 13.3, 5th Gen CoreA5-8250U, 8GB RAM, 256GB SSD, power UHD Graphics, OS 10 Home, OS Office A & J 2016",
+    "slang": "ad-dicta-deserunt"
+  },
+  {
+    "id": 24,
+    "image": "",
+    "title": "Sleek Rubber Tuna",
+    "summary": "The beautiful range of Apple Natural├® that has an exciting mix of natural ingredients. With the Goodness of 100% Natural Ingredients",
+    "slang": "nisi-reprehenderit-beatae"
+  },
+  {
+    "id": 25,
+    "image": "",
+    "title": "Licensed Frozen Cheese",
+    "summary": "Andy shoes are designed to keeping in mind durability as well as trends, the most stylish range of shoes & sandals",
+    "slang": "earum-commodi-dolorem"
+  },
+  {
+    "id": 26,
+    "image": "",
+    "title": "Sleek Rubber Gloves",
+    "summary": "New ABC 13 9370, 13.3, 5th Gen CoreA5-8250U, 8GB RAM, 256GB SSD, power UHD Graphics, OS 10 Home, OS Office A & J 2016",
+    "slang": "est-fugiat-praesentium"
+  },
+  {
+    "id": 27,
+    "image": "",
+    "title": "Unbranded Frozen Chicken",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "similique-quae-laborum"
+  },
+  {
+    "id": 28,
+    "image": "",
+    "title": "Sleek Steel Pants",
+    "summary": "Andy shoes are designed to keeping in mind durability as well as trends, the most stylish range of shoes & sandals",
+    "slang": "voluptatem-voluptatibus-aspernatur"
+  },
+  {
+    "id": 29,
+    "image": "",
+    "title": "Small Fresh Hat",
+    "summary": "Andy shoes are designed to keeping in mind durability as well as trends, the most stylish range of shoes & sandals",
+    "slang": "possimus-omnis-omnis"
+  },
+  {
+    "id": 30,
+    "image": "",
+    "title": "Handmade Frozen Computer",
+    "summary": "The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J",
+    "slang": "laborum-amet-sed"
+  },
+  {
+    "id": 31,
+    "image": "",
+    "title": "Small Steel Chair",
+    "summary": "The Football Is Good For Training And Recreational Purposes",
+    "slang": "necessitatibus-odio-eligendi"
+  },
+  {
+    "id": 32,
+    "image": "",
+    "title": "Awesome Granite Shoes",
+    "summary": "The slim & simple Maple Gaming Keyboard from Dev Byte comes with a sleek body and 7- Color RGB LED Back-lighting for smart functionality",
+    "slang": "est-nihil-perferendis"
+  },
+  {
+    "id": 33,
+    "image": "",
+    "title": "Rustic Plastic Computer",
+    "summary": "The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design",
+    "slang": "et-delectus-et"
+  },
+  {
+    "id": 34,
+    "image": "",
+    "title": "Licensed Rubber Bike",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "sit-et-harum"
+  },
+  {
+    "id": 35,
+    "image": "",
+    "title": "Unbranded Metal Tuna",
+    "summary": "New range of formal shirts are designed keeping you in mind. With fits and styling that will make you stand apart",
+    "slang": "voluptatibus-omnis-et"
+  },
+  {
+    "id": 36,
+    "image": "",
+    "title": "Refined Granite Computer",
+    "summary": "The Football Is Good For Training And Recreational Purposes",
+    "slang": "architecto-labore-incidunt"
+  },
+  {
+    "id": 37,
+    "image": "",
+    "title": "Licensed Cotton Cheese",
+    "summary": "Andy shoes are designed to keeping in mind durability as well as trends, the most stylish range of shoes & sandals",
+    "slang": "distinctio-amet-tenetur"
+  },
+  {
+    "id": 38,
+    "image": "",
+    "title": "Refined Rubber Bacon",
+    "summary": "Carbonite web goalkeeper gloves are ergonomically designed to give easy fit",
+    "slang": "nam-ducimus-rerum"
+  },
+  {
+    "id": 39,
+    "image": "",
+    "title": "Practical Granite Mouse",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "ut-eum-et"
+  },
+  {
+    "id": 40,
+    "image": "",
+    "title": "Incredible Plastic Cheese",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "iste-architecto-nostrum"
+  },
+  {
+    "id": 41,
+    "image": "",
+    "title": "Fantastic Soft Gloves",
+    "summary": "The slim & simple Maple Gaming Keyboard from Dev Byte comes with a sleek body and 7- Color RGB LED Back-lighting for smart functionality",
+    "slang": "quia-labore-eum"
+  },
+  {
+    "id": 42,
+    "image": "",
+    "title": "Handcrafted Rubber Chair",
+    "summary": "The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design",
+    "slang": "laudantium-asperiores-praesentium"
+  },
+  {
+    "id": 43,
+    "image": "",
+    "title": "Generic Wooden Ball",
+    "summary": "Carbonite web goalkeeper gloves are ergonomically designed to give easy fit",
+    "slang": "aut-ex-iusto"
+  },
+  {
+    "id": 44,
+    "image": "",
+    "title": "Sleek Rubber Cheese",
+    "summary": "Boston's most advanced compression wear technology increases muscle oxygenation, stabilizes active muscles",
+    "slang": "qui-unde-officiis"
+  },
+  {
+    "id": 45,
+    "image": "",
+    "title": "Rustic Steel Bike",
+    "summary": "The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive",
+    "slang": "et-voluptas-labore"
+  },
+  {
+    "id": 46,
+    "image": "",
+    "title": "Licensed Metal Pants",
+    "summary": "The Football Is Good For Training And Recreational Purposes",
+    "slang": "molestiae-rerum-quia"
+  },
+  {
+    "id": 47,
+    "image": "",
+    "title": "Practical Steel Sausages",
+    "summary": "The Football Is Good For Training And Recreational Purposes",
+    "slang": "velit-id-molestias"
+  },
+  {
+    "id": 48,
+    "image": "",
+    "title": "Handcrafted Frozen Towels",
+    "summary": "The Football Is Good For Training And Recreational Purposes",
+    "slang": "provident-autem-non"
+  },
+  {
+    "id": 49,
+    "image": "",
+    "title": "Ergonomic Cotton Sausages",
+    "summary": "Carbonite web goalkeeper gloves are ergonomically designed to give easy fit",
+    "slang": "dignissimos-eius-impedit"
+  },
+  {
+    "id": 50,
+    "image": "",
+    "title": "Handcrafted Granite Shirt",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "quo-nobis-non"
+  },
+  {
+    "id": 51,
+    "image": "",
+    "title": "Rustic Steel Bike",
+    "summary": "The slim & simple Maple Gaming Keyboard from Dev Byte comes with a sleek body and 7- Color RGB LED Back-lighting for smart functionality",
+    "slang": "debitis-cumque-sapiente"
+  },
+  {
+    "id": 52,
+    "image": "",
+    "title": "Fantastic Soft Table",
+    "summary": "New ABC 13 9370, 13.3, 5th Gen CoreA5-8250U, 8GB RAM, 256GB SSD, power UHD Graphics, OS 10 Home, OS Office A & J 2016",
+    "slang": "voluptate-ratione-cum"
+  },
+  {
+    "id": 53,
+    "image": "",
+    "title": "Awesome Wooden Pants",
+    "summary": "The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive",
+    "slang": "perspiciatis-et-et"
+  },
+  {
+    "id": 54,
+    "image": "",
+    "title": "Handmade Frozen Tuna",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "consequatur-iusto-tempore"
+  },
+  {
+    "id": 55,
+    "image": "",
+    "title": "Ergonomic Wooden Pants",
+    "summary": "New ABC 13 9370, 13.3, 5th Gen CoreA5-8250U, 8GB RAM, 256GB SSD, power UHD Graphics, OS 10 Home, OS Office A & J 2016",
+    "slang": "quis-sed-quisquam"
+  },
+  {
+    "id": 56,
+    "image": "",
+    "title": "Tasty Metal Salad",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "dolorem-quam-est"
+  },
+  {
+    "id": 57,
+    "image": "",
+    "title": "Rustic Steel Chair",
+    "summary": "The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design",
+    "slang": "possimus-nesciunt-consequuntur"
+  },
+  {
+    "id": 58,
+    "image": "",
+    "title": "Handcrafted Frozen Chicken",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "ut-voluptates-sint"
+  },
+  {
+    "id": 59,
+    "image": "",
+    "title": "Awesome Concrete Computer",
+    "summary": "The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J",
+    "slang": "earum-perferendis-tempore"
+  },
+  {
+    "id": 60,
+    "image": "",
+    "title": "Incredible Concrete Sausages",
+    "summary": "The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J",
+    "slang": "quibusdam-fugiat-numquam"
+  },
+  {
+    "id": 61,
+    "image": "",
+    "title": "Licensed Metal Ball",
+    "summary": "New range of formal shirts are designed keeping you in mind. With fits and styling that will make you stand apart",
+    "slang": "nulla-voluptas-impedit"
+  },
+  {
+    "id": 62,
+    "image": "",
+    "title": "Generic Plastic Keyboard",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "et-quia-quis"
+  },
+  {
+    "id": 63,
+    "image": "",
+    "title": "Fantastic Cotton Towels",
+    "summary": "Carbonite web goalkeeper gloves are ergonomically designed to give easy fit",
+    "slang": "vitae-debitis-asperiores"
+  },
+  {
+    "id": 64,
+    "image": "",
+    "title": "Sleek Metal Chips",
+    "summary": "The Football Is Good For Training And Recreational Purposes",
+    "slang": "non-et-nesciunt"
+  },
+  {
+    "id": 65,
+    "image": "",
+    "title": "Intelligent Rubber Car",
+    "summary": "The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive",
+    "slang": "facilis-eos-aut"
+  },
+  {
+    "id": 66,
+    "image": "",
+    "title": "Intelligent Rubber Gloves",
+    "summary": "Boston's most advanced compression wear technology increases muscle oxygenation, stabilizes active muscles",
+    "slang": "cumque-veritatis-aut"
+  },
+  {
+    "id": 67,
+    "image": "",
+    "title": "Fantastic Fresh Pants",
+    "summary": "Andy shoes are designed to keeping in mind durability as well as trends, the most stylish range of shoes & sandals",
+    "slang": "a-voluptas-aut"
+  },
+  {
+    "id": 68,
+    "image": "",
+    "title": "Handmade Granite Sausages",
+    "summary": "The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive",
+    "slang": "aspernatur-pariatur-quidem"
+  },
+  {
+    "id": 69,
+    "image": "",
+    "title": "Licensed Steel Car",
+    "summary": "The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design",
+    "slang": "quo-odio-aut"
+  },
+  {
+    "id": 70,
+    "image": "",
+    "title": "Ergonomic Steel Computer",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "voluptatem-est-sit"
+  },
+  {
+    "id": 71,
+    "image": "",
+    "title": "Ergonomic Concrete Tuna",
+    "summary": "The slim & simple Maple Gaming Keyboard from Dev Byte comes with a sleek body and 7- Color RGB LED Back-lighting for smart functionality",
+    "slang": "eveniet-nostrum-voluptates"
+  },
+  {
+    "id": 72,
+    "image": "",
+    "title": "Handcrafted Steel Soap",
+    "summary": "The Football Is Good For Training And Recreational Purposes",
+    "slang": "ipsum-sequi-nam"
+  },
+  {
+    "id": 73,
+    "image": "",
+    "title": "Awesome Cotton Shoes",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "qui-harum-quae"
+  },
+  {
+    "id": 74,
+    "image": "",
+    "title": "Awesome Fresh Towels",
+    "summary": "Carbonite web goalkeeper gloves are ergonomically designed to give easy fit",
+    "slang": "quis-sit-magni"
+  },
+  {
+    "id": 75,
+    "image": "",
+    "title": "Handcrafted Wooden Mouse",
+    "summary": "The beautiful range of Apple Natural├® that has an exciting mix of natural ingredients. With the Goodness of 100% Natural Ingredients",
+    "slang": "corrupti-voluptate-delectus"
+  },
+  {
+    "id": 76,
+    "image": "",
+    "title": "Sleek Rubber Cheese",
+    "summary": "The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J",
+    "slang": "et-suscipit-aut"
+  },
+  {
+    "id": 77,
+    "image": "",
+    "title": "Handmade Concrete Towels",
+    "summary": "Carbonite web goalkeeper gloves are ergonomically designed to give easy fit",
+    "slang": "rerum-et-quia"
+  },
+  {
+    "id": 78,
+    "image": "",
+    "title": "Gorgeous Granite Chicken",
+    "summary": "New range of formal shirts are designed keeping you in mind. With fits and styling that will make you stand apart",
+    "slang": "recusandae-alias-debitis"
+  },
+  {
+    "id": 79,
+    "image": "",
+    "title": "Gorgeous Soft Salad",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "inventore-quos-nobis"
+  },
+  {
+    "id": 80,
+    "image": "",
+    "title": "Incredible Soft Fish",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "non-sed-unde"
+  },
+  {
+    "id": 81,
+    "image": "",
+    "title": "Tasty Frozen Hat",
+    "summary": "The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive",
+    "slang": "molestiae-rerum-dolorum"
+  },
+  {
+    "id": 82,
+    "image": "",
+    "title": "Rustic Steel Pizza",
+    "summary": "New ABC 13 9370, 13.3, 5th Gen CoreA5-8250U, 8GB RAM, 256GB SSD, power UHD Graphics, OS 10 Home, OS Office A & J 2016",
+    "slang": "consequatur-nisi-corporis"
+  },
+  {
+    "id": 83,
+    "image": "",
+    "title": "Fantastic Fresh Salad",
+    "summary": "Carbonite web goalkeeper gloves are ergonomically designed to give easy fit",
+    "slang": "aperiam-omnis-tenetur"
+  },
+  {
+    "id": 84,
+    "image": "",
+    "title": "Gorgeous Steel Salad",
+    "summary": "The Football Is Good For Training And Recreational Purposes",
+    "slang": "praesentium-autem-rerum"
+  },
+  {
+    "id": 85,
+    "image": "",
+    "title": "Ergonomic Concrete Salad",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "asperiores-eius-sit"
+  },
+  {
+    "id": 86,
+    "image": "",
+    "title": "Licensed Frozen Bike",
+    "summary": "The beautiful range of Apple Natural├® that has an exciting mix of natural ingredients. With the Goodness of 100% Natural Ingredients",
+    "slang": "qui-dolores-odit"
+  },
+  {
+    "id": 87,
+    "image": "",
+    "title": "Refined Fresh Soap",
+    "summary": "Andy shoes are designed to keeping in mind durability as well as trends, the most stylish range of shoes & sandals",
+    "slang": "sit-veniam-magnam"
+  },
+  {
+    "id": 88,
+    "image": "",
+    "title": "Unbranded Concrete Chair",
+    "summary": "Boston's most advanced compression wear technology increases muscle oxygenation, stabilizes active muscles",
+    "slang": "expedita-architecto-eum"
+  },
+  {
+    "id": 89,
+    "image": "",
+    "title": "Tasty Metal Cheese",
+    "summary": "The slim & simple Maple Gaming Keyboard from Dev Byte comes with a sleek body and 7- Color RGB LED Back-lighting for smart functionality",
+    "slang": "voluptatem-optio-aut"
+  },
+  {
+    "id": 90,
+    "image": "",
+    "title": "Gorgeous Rubber Table",
+    "summary": "New ABC 13 9370, 13.3, 5th Gen CoreA5-8250U, 8GB RAM, 256GB SSD, power UHD Graphics, OS 10 Home, OS Office A & J 2016",
+    "slang": "rem-voluptate-ipsum"
+  },
+  {
+    "id": 91,
+    "image": "",
+    "title": "Sleek Plastic Table",
+    "summary": "The Football Is Good For Training And Recreational Purposes",
+    "slang": "architecto-adipisci-et"
+  },
+  {
+    "id": 92,
+    "image": "",
+    "title": "Generic Fresh Bacon",
+    "summary": "The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive",
+    "slang": "aliquid-sint-ab"
+  },
+  {
+    "id": 93,
+    "image": "",
+    "title": "Awesome Steel Chair",
+    "summary": "The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive",
+    "slang": "voluptatibus-repudiandae-saepe"
+  },
+  {
+    "id": 94,
+    "image": "",
+    "title": "Refined Granite Salad",
+    "summary": "The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J",
+    "slang": "optio-odio-sit"
+  },
+  {
+    "id": 95,
+    "image": "",
+    "title": "Small Metal Car",
+    "summary": "Boston's most advanced compression wear technology increases muscle oxygenation, stabilizes active muscles",
+    "slang": "nihil-similique-et"
+  },
+  {
+    "id": 96,
+    "image": "",
+    "title": "Rustic Concrete Tuna",
+    "summary": "New range of formal shirts are designed keeping you in mind. With fits and styling that will make you stand apart",
+    "slang": "neque-nesciunt-nesciunt"
+  },
+  {
+    "id": 97,
+    "image": "",
+    "title": "Small Granite Mouse",
+    "summary": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+    "slang": "consequatur-commodi-asperiores"
+  },
+  {
+    "id": 98,
+    "image": "",
+    "title": "Rustic Frozen Pizza",
+    "summary": "The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive",
+    "slang": "sequi-repellendus-dolorem"
+  },
+  {
+    "id": 99,
+    "image": "",
+    "title": "Ergonomic Cotton Fish",
+    "summary": "The Football Is Good For Training And Recreational Purposes",
+    "slang": "sit-ut-fugiat"
+  },
+  {
+    "id": 100,
+    "image": "",
+    "title": "Handcrafted Concrete Fish",
+    "summary": "The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design",
+    "slang": "amet-maxime-fugit"
+  }
+]
diff --git a/src/models/builders/products.js b/src/models/builders/products.js
new file mode 100644
index 0000000..8e6e54c
--- /dev/null
+++ b/src/models/builders/products.js
@@ -0,0 +1,19 @@
+//import faker from "faker";
+
+import PlaceHolderImage from "stories/assets/car.jpg";
+import products from "./fixtures/products.json";
+
+export const buildProductList = (size) => {
+    const result = [];
+
+    for (let i = 0; i < size; i++) {
+        result.push({
+            ...products[i],
+            image: PlaceHolderImage,
+        });
+    }
+
+    return result;
+};
+
+export const buildProduct = () => buildProductList(1)[0];
diff --git a/src/types/ProductType.js b/src/models/types/ProductType.js
similarity index 100%
rename from src/types/ProductType.js
rename to src/models/types/ProductType.js
diff --git a/yarn.lock b/yarn.lock
index 25ca0bc..697f78e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6940,6 +6940,11 @@ fake-tag@^2.0.0:
   resolved "https://registry.yarnpkg.com/fake-tag/-/fake-tag-2.0.0.tgz#08ea5df950ef8635833186247f569e8406ffb4da"
   integrity sha512-QDz+8qiNQ9AfBZ31EXlID5JIbUkU3e1nXDWk4tidFzd2gy8XJaEUW1HCuDY6DUy6t2Y0nvhD6PsUc+2WYy5w0w==
 
+faker@^5.5.3:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-5.5.3.tgz#c57974ee484431b25205c2c8dc09fda861e51e0e"
+  integrity sha512-wLTv2a28wjUyWkbnX7u/ABZBkUkIF2fCd73V6P2oFqEGEktDfzWx4UxrSqtPRw0xPRAcjeAOIiJWqZm3pP4u3g==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"

From 97afb6dbded6ca4ef749eafa511835c9a5452f8f Mon Sep 17 00:00:00 2001
From: Wagner Vieira <wagnervieira1209@gmail.com>
Date: Mon, 9 Aug 2021 20:42:09 -0300
Subject: [PATCH 4/6] Add Not Found Page

---
 src/components/pages/About.js          |   3 +-
 src/components/pages/Error.js          |  65 +++++++
 src/components/pages/Error.stories.js  |  17 ++
 src/components/pages/ProductDetails.js |   1 -
 src/draws/PageNotFound.js              | 248 +++++++++++++++++++++++++
 src/routes/error404.js                 |  13 ++
 src/routes/index.js                    |   3 +-
 src/routes/servicos/index.js           |  14 +-
 svg/page_not_found.svg                 |   1 +
 9 files changed, 360 insertions(+), 5 deletions(-)
 create mode 100644 src/components/pages/Error.js
 create mode 100644 src/components/pages/Error.stories.js
 create mode 100644 src/draws/PageNotFound.js
 create mode 100644 src/routes/error404.js
 create mode 100644 svg/page_not_found.svg

diff --git a/src/components/pages/About.js b/src/components/pages/About.js
index 0dbeac2..c23eb89 100644
--- a/src/components/pages/About.js
+++ b/src/components/pages/About.js
@@ -1,5 +1,4 @@
-import React, { useEffect } from "react";
-import PropTypes from "prop-types";
+import React from "react";
 import styled from "styled-components";
 import BreadCrump from "components/atoms/BreadCrump";
 
diff --git a/src/components/pages/Error.js b/src/components/pages/Error.js
new file mode 100644
index 0000000..71f7b67
--- /dev/null
+++ b/src/components/pages/Error.js
@@ -0,0 +1,65 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import Grid from "components/atoms/Grid";
+import Heading from "components/atoms/Heading";
+import styled from "styled-components";
+import Section from "components/molecules/Section";
+import ButtonWrapper from "components/atoms/Button";
+
+const ImageContainer = styled.div`
+    text-align: right;
+
+    svg {
+        width: 100%;
+        height: auto;
+        max-width: 380px;
+        color: ${(props) => props.theme.colors.primary.main};
+    }
+`;
+
+const ErrorContainer = styled.div`
+    h1 {
+        margin-top: 0;
+    }
+`;
+
+const ErrorMessage = styled.p`
+    margin: 24px 0;
+    font-size: 1.2rem;
+`;
+
+const Error = ({ title, description, image }) => (
+    <Section>
+        <Grid sm={2}>
+            <ErrorContainer>
+                <Heading>
+                    <h1>{title}</h1>
+                </Heading>
+                <ErrorMessage>{description}</ErrorMessage>
+                <div>
+                    <ButtonWrapper as={Link} to="/" color="primary">
+                        Voltar página
+                    </ButtonWrapper>
+                </div>
+            </ErrorContainer>
+            <div>
+                <ImageContainer>{image}</ImageContainer>
+            </div>
+        </Grid>
+    </Section>
+);
+
+Error.defaultProps = {
+    title: "",
+    description: "",
+    image: undefined,
+};
+
+Error.propTypes = {
+    title: PropTypes.string,
+    description: PropTypes.string,
+    image: PropTypes.node,
+};
+
+export default Error;
diff --git a/src/components/pages/Error.stories.js b/src/components/pages/Error.stories.js
new file mode 100644
index 0000000..2eacd69
--- /dev/null
+++ b/src/components/pages/Error.stories.js
@@ -0,0 +1,17 @@
+import React from "react";
+
+import Error from "./Error";
+import ImagePageNotFound from "draws/PageNotFound";
+
+export default {
+    title: "Components/Pages/Error",
+    component: Error,
+};
+
+export const usage = () => (
+    <Error
+        image={<ImagePageNotFound />}
+        title="Página não encontrada!"
+        description="Ops! Página acessada não foi encontrada"
+    />
+);
diff --git a/src/components/pages/ProductDetails.js b/src/components/pages/ProductDetails.js
index 80a8c10..f8a89ed 100644
--- a/src/components/pages/ProductDetails.js
+++ b/src/components/pages/ProductDetails.js
@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import styled from "styled-components";
 import { FaIdCard, FaHome, FaScroll } from "react-icons/fa";
 import BreadCrump from "components/atoms/BreadCrump";
diff --git a/src/draws/PageNotFound.js b/src/draws/PageNotFound.js
new file mode 100644
index 0000000..ebc6957
--- /dev/null
+++ b/src/draws/PageNotFound.js
@@ -0,0 +1,248 @@
+import * as React from "react";
+
+function SvgPageNotFound(props) {
+    return (
+        <svg
+            data-name="Layer 1"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            viewBox="0 0 1074.392 584.231"
+            aria-labelledby="takenImgTitle"
+            role="img"
+            {...props}
+        >
+            <title id="takenImgTitle">Page not found</title>
+            <ellipse
+                cx={540.643}
+                cy={549.309}
+                rx={527.5}
+                ry={34.922}
+                fill="#f2f2f2"
+            />
+            <path
+                d="M520.426 167.01c-85.944 0-147.651 55.14-147.651 183.798 0 145.813 61.707 184.41 147.65 184.41s151.328-42.273 151.328-184.41c0-151.94-65.383-183.798-151.327-183.798zm.565 319.808c-59.527 0-90.626-34.923-90.626-135.916 0-89.112 32.372-136.105 91.899-136.105s91.899 30.868 91.899 136.105c0 98.447-33.646 135.916-93.172 135.916z"
+                fill="#2f2e41"
+            />
+            <path
+                d="M321.311 433.517h-35.534v-104.64a20.956 20.956 0 00-20.956-20.956h-8.326a20.956 20.956 0 00-20.956 20.956v104.64h-100.23a11.963 11.963 0 01-10.578-17.552l106.083-200.78a20.956 20.956 0 00-9.58-28.74l-6.263-2.957a20.956 20.956 0 00-27.43 9.07L58.162 434.591a28.416 28.416 0 00-3.357 13.396 28.416 28.416 0 0028.416 28.416H235.54v66.167a25.119 25.119 0 0025.119 25.12 25.119 25.119 0 0025.119-25.12v-66.167h35.534a21.443 21.443 0 0021.443-21.443 21.443 21.443 0 00-21.443-21.443zM979.308 433.517h-35.534v-104.64a20.956 20.956 0 00-20.956-20.956h-8.327a20.956 20.956 0 00-20.956 20.956v104.64h-100.23a11.963 11.963 0 01-10.577-17.552l106.082-200.78a20.956 20.956 0 00-9.58-28.74l-6.263-2.957a20.956 20.956 0 00-27.429 9.07L716.157 434.591a28.416 28.416 0 00-3.356 13.396 28.416 28.416 0 0028.416 28.416h152.318v66.167a25.119 25.119 0 0025.12 25.12 25.119 25.119 0 0025.118-25.12v-66.167h35.535a21.443 21.443 0 0021.443-21.443 21.443 21.443 0 00-21.443-21.443z"
+                fill="currentColor"
+            />
+            <path
+                d="M331.114 421.264H295.58v-104.64a20.956 20.956 0 00-20.956-20.956h-8.327a20.956 20.956 0 00-20.956 20.956v104.64h-100.23a11.963 11.963 0 01-10.577-17.552l106.082-200.78a20.956 20.956 0 00-9.58-28.74l-6.263-2.957a20.956 20.956 0 00-27.429 9.07L67.963 422.338a28.416 28.416 0 00-3.356 13.396h0a28.416 28.416 0 0028.416 28.416H245.34v66.167a25.119 25.119 0 0025.12 25.119h0a25.119 25.119 0 0025.119-25.12V464.15h35.534a21.443 21.443 0 0021.443-21.443h0a21.443 21.443 0 00-21.443-21.443zM997.688 421.264h-35.535v-104.64a20.956 20.956 0 00-20.956-20.956h-8.326a20.956 20.956 0 00-20.956 20.956v104.64h-100.23a11.963 11.963 0 01-10.577-17.552l106.082-200.78a20.956 20.956 0 00-9.58-28.74l-6.263-2.957a20.956 20.956 0 00-27.43 9.07l-129.38 242.033a28.416 28.416 0 00-3.356 13.396h0a28.416 28.416 0 0028.415 28.416h152.32v66.167a25.119 25.119 0 0025.118 25.119h0a25.119 25.119 0 0025.12-25.12V464.15h35.534a21.443 21.443 0 0021.443-21.443h0a21.443 21.443 0 00-21.443-21.443zM540.03 155.982c-85.943 0-147.65 55.14-147.65 183.798 0 145.813 61.707 184.41 147.65 184.41s151.328-42.273 151.328-184.41c0-151.94-65.383-183.798-151.327-183.798zm.566 319.808c-59.527 0-90.626-34.923-90.626-135.916 0-89.112 32.372-136.105 91.899-136.105s91.899 30.868 91.899 136.105c0 98.447-33.645 135.916-93.172 135.916z"
+                fill="none"
+                stroke="#3f3d56"
+                strokeMiterlimit={10}
+            />
+            <circle cx={471.141} cy={18.25} r={12.901} fill="#2f2e41" />
+            <ellipse
+                cx={502.607}
+                cy={46.885}
+                rx={36.186}
+                ry={46.885}
+                fill="#2f2e41"
+            />
+            <path
+                d="M502.607 79.61c-18.127 0-33.14-17.27-35.775-39.805a60.976 60.976 0 00-.41 7.08c0 25.893 16.2 46.885 36.185 46.885s36.187-20.991 36.187-46.885a60.976 60.976 0 00-.41-7.08c-2.635 22.534-17.649 39.805-35.777 39.805z"
+                opacity={0.1}
+            />
+            <path
+                d="M576.242 184.189c-.777 3.193-4.128 5.75-7.839 7.538-7.801 3.756-17.425 4.878-26.76 5.254a45.176 45.176 0 01-7.144-.132 20.537 20.537 0 01-12.25-5.632 1.68 1.68 0 01.043-2.843c4.97-5.46 13.263-8.806 21.617-11.217 6.334-1.827 17.38-6.56 24.29-5.922 6.691.62 9.024 8.922 8.043 12.954z"
+                fill="#3f3d56"
+            />
+            <path
+                d="M576.242 184.189c-.777 3.193-4.128 5.75-7.839 7.538-7.801 3.756-17.425 4.878-26.76 5.254a45.176 45.176 0 01-7.144-.132 20.537 20.537 0 01-12.25-5.632 1.68 1.68 0 01.043-2.843c4.97-5.46 13.263-8.806 21.617-11.217 6.334-1.827 17.38-6.56 24.29-5.922 6.691.62 9.024 8.922 8.043 12.954z"
+                opacity={0.1}
+            />
+            <path
+                d="M477.044 160.321a19.77 19.77 0 00-1.199 15.075 26.34 26.34 0 008.83 12.497c10.094 8.092 23.987 9.205 36.924 9.093a284.65 284.65 0 0033.905-2.324 40.538 40.538 0 0011.002-2.554c4.222-1.827 7.933-5.178 9.436-9.526s.436-9.673-3.134-12.574c-3.137-2.55-7.463-2.9-11.498-3.143l-23.087-1.388c2.28-2.308 5.318-3.614 8.095-5.292 3.686-2.226 6.134-5.965 8.814-9.335a129.001 129.001 0 0113.438-13.817c.752 4.31 3.478 7.85 6.688 10.824s6.908 5.369 10.243 8.2c8.079 6.859 13.896 16.167 22.393 22.5a43.829 43.829 0 0016.048-8.011l-3.302-5.982a3.94 3.94 0 00-1.244-1.553c-.935-.575-2.14-.278-3.225-.441-2.901-.435-4.168-3.784-5.306-6.487-3.125-7.422-9.108-13.18-14.218-19.404a98.009 98.009 0 01-9.996-14.723c-1.717-3.102-3.288-6.331-5.618-9.003s-5.593-4.773-9.138-4.78c-3.132-.007-6.021 1.583-8.714 3.182a230.477 230.477 0 00-23.63 16.1c-3.944 3.061-7.864 6.296-12.49 8.173-1.947.79-4 1.33-5.869 2.292-3.273 1.685-5.757 4.535-8.431 7.065-9.538 9.023-22.596 14.869-35.717 15.336z"
+                fill="#3f3d56"
+            />
+            <path
+                d="M525.32 96.098a23.774 23.774 0 01-1.734 8.033 10.045 10.045 0 01-5.768 5.573 12.375 12.375 0 01-5.623.183 10.882 10.882 0 01-4.581-1.561c-2.165-1.489-3.245-4.144-3.638-6.743-.393-2.596-.217-5.249-.469-7.864a42.944 42.944 0 00-1.202-6.255c-.17-.683-.343-1.363-.513-2.042-.166-.68-.33-1.36-.481-2.04a44.287 44.287 0 01-.378-1.925 28.716 28.716 0 01-.233-1.643 18.423 18.423 0 00-.808-4.811 14.607 14.607 0 00-1.687-2.854c-.286-.409-.563-.818-.818-1.243a5.89 5.89 0 01-.972-3.748 3.286 3.286 0 01.148-.6c.025-.076.053-.152.085-.224a1.802 1.802 0 001.23-1.149 3.433 3.433 0 00-.148-1.777 11.318 11.318 0 00-.96-2.288c-.264-.478-1.16-1.34-1.167-1.888-.013-1.101 2.14-1.989 3.011-2.423a16.796 16.796 0 018.597-1.743c1.904.129 3.968.714 5.019 2.31.944 1.438.818 3.3 1.22 4.971a1.47 1.47 0 00.3.664 1.341 1.341 0 00.74.34 4.55 4.55 0 001.415.057h.003a2.931 2.931 0 00.371-.054 4.957 4.957 0 002.033-.878q.586-.156 1.18-.255a.251.251 0 00.047-.01c1.577 4.976 1.781 10.31 3.072 15.375.638 2.52 1.554 5.01 1.683 7.603.01.113.013.23.016.346.019.834-.047 1.674-.013 2.504a6.981 6.981 0 00.126 1.114 15.611 15.611 0 00.525 1.744l.01.028c.06.182.116.368.164.554.034.135.066.267.09.402l.004.01a14.938 14.938 0 01.104 4.207z"
+                fill="#fbbebe"
+            />
+            <circle cx={503.237} cy={44.997} r={18.565} fill="#fbbebe" />
+            <path
+                d="M621.103 146.148a30.445 30.445 0 00-5.236-14.103q.722 4.295 1.448 8.587a3.214 3.214 0 01-3.367-1.035 10.337 10.337 0 01-1.766-3.276 67.466 67.466 0 00-8.21-14.735c-11.818-.985-23.501-5.884-33.895-11.596-10.396-5.708-20.125-12.552-30.383-18.502a43.573 43.573 0 00-5.545-2.832c-3.21-1.287-6.812-1.954-9.855-3.467-.205-.101-.41-.208-.61-.318a12.578 12.578 0 01-1.945-1.306 10.344 10.344 0 01-.931-.856 20.351 20.351 0 01-3.56-5.953c-1.632-3.613-2.215-7.97-3.845-11.583a11.203 11.203 0 012.502-1.765h.003c.132-.07.265-.136.4-.199a11.94 11.94 0 012.004-.733q.586-.156 1.18-.255a.251.251 0 00.047-.01 11.566 11.566 0 015.491.435c2.587.875 4.767 2.621 6.942 4.273a114.02 114.02 0 0110.148 8.05c1.793 1.717 3.43 3.605 5.358 5.166a42.144 42.144 0 005.057 3.351q15.656 9.327 31.315 18.65c3.534 2.105 7.07 4.21 10.526 6.438 5.248 3.386 10.308 7.055 15.365 10.72q4.47 3.239 8.936 6.48a9.728 9.728 0 012.533 2.34 8.472 8.472 0 011.123 3.434 31.387 31.387 0 01-1.23 14.6z"
+                fill="#fbbebe"
+            />
+            <path
+                d="M529.923 110.06c-1.252 5.616-6.929 9.012-9.896 13.945-3.688 6.124-2.184 13.241-.8 20.255q-3.794 3.271-7.592 6.542c-1.397 1.199-2.794 2.404-4.298 3.465a57.35 57.35 0 01-6.86 3.94q-3.36 1.727-6.721 3.457a32.128 32.128 0 01-6.58 2.788c-4.414 1.133-9.103.34-13.47-.972a6.088 6.088 0 01-1.473-.601 2.394 2.394 0 01-.699-.633 3.91 3.91 0 01-.443-2.539c.443-7.35 2.24-14.547 4.03-21.69a85.26 85.26 0 013.849-12.577 85.077 85.077 0 015.415-10.15 68.368 68.368 0 017.93-11.514 18.479 18.479 0 003.675-4.739c1.117-2.549.686-5.472.913-8.247a17.148 17.148 0 011.633-6.007v-.003a17.093 17.093 0 011.743-2.883l.916 2.13q.302.7.597 1.395.387.896.768 1.787l2.197 5.113a21.59 21.59 0 003.335 5.944 6.5 6.5 0 0011.123-.853 21.261 21.261 0 002.272-6.013 19.215 19.215 0 00.252-7.835c-.758-5.01-2.889-10.126-4.437-14.78a14.945 14.945 0 01-1.08-4.87 3.351 3.351 0 01.057-.56l.029-.146a11.94 11.94 0 012.004-.733q.585-.155 1.18-.255 2.044 11.064 4.094 22.128c.031.173.066.346.097.522.196 1.057.394 2.114.614 3.169.198.956.412 1.91.651 2.857l.01.028c.082.321.167.639.255.957l.003.009c.242.868.513 1.73.818 2.58 1.85 5.12 5.076 10.274 3.89 15.589z"
+                fill="currentColor"
+            />
+            <path
+                d="M605.267 188.993a6.583 6.583 0 00.61 3.143c1.162 2.123 3.95 2.606 6.363 2.805a188.377 188.377 0 0042.265-1.288 4.886 4.886 0 002.152-.668c1.99-1.395.763-4.795-1.41-5.883s-4.751-.826-7.135-1.298a22.48 22.48 0 01-6.678-2.896q-7.252-4.167-14.293-8.688c-2.794-1.795-6.093-3.71-9.24-2.646-8.525 2.884-12.69 8.222-12.634 17.419z"
+                fill="#3f3d56"
+            />
+            <path
+                d="M501.383 82.99v.002a7.75 7.75 0 01-.072.39c-.035.215-.076.432-.116.646a77.708 77.708 0 01-1.42 5.962c-1.51 5.46-3.533 10.831-5.54 16.124L478.07 148.69c-1.36 3.574-2.716 7.152-4.26 10.654-.517 1.168-1.048 2.344-1.577 3.534-1.894 4.257-3.713 8.653-4.317 13.184a27.45 27.45 0 00-.192 9.04c.604 2.97 2.407 5.872 5.23 6.97 1.378.538 3.35 1.259 2.973 2.69-.204.787-1.098 1.171-1.9 1.303a7.312 7.312 0 01-5.966-1.718c-1.508-1.337-2.666-3.417-4.67-3.64-1.388-.151-2.665.68-3.936 1.261-5.186 2.37-11.228.712-16.674-.972.427-2.206 2.643-3.66 4.842-4.1 2.2-.444 4.475-.129 6.718-.189a3.51 3.51 0 002.042-.525 3.705 3.705 0 001.102-1.882 78.964 78.964 0 003.212-13.146c.724-4.667 1.026-9.406 2.058-14.016.803-3.596 2.042-7.08 3.106-10.61a224.682 224.682 0 005.06-22.077 78.02 78.02 0 001.425-9.367c.18-2.612.095-5.236.346-7.839a60.888 60.888 0 012.112-9.996l2.885-10.69c1.426-5.27 2.955-10.745 6.567-14.842a13.962 13.962 0 0110.029-4.79 9.882 9.882 0 012.13.23c.116.029.233.057.349.089a8.634 8.634 0 012.174.9c1.114-.709 1.68-.46 2.42.632a6.973 6.973 0 01.881 3.795 52.424 52.424 0 01-.856 10.415z"
+                fill="#fbbebe"
+            />
+            <path
+                d="M502.607 87.162l-.047.047-.255.255-2.53 2.526-1.24-5.207-4.25-17.854a9.882 9.882 0 012.13.23 3.286 3.286 0 01.148-.602l.201.69 1.441 4.902 2.728 9.308.45 1.532v.003z"
+                fill="currentColor"
+            />
+            <path
+                d="M518.661 30.203a12.582 12.582 0 01-3.7 8.896 12.314 12.314 0 01-1.36 1.176 12.528 12.528 0 01-7.536 2.524h-15.096a12.59 12.59 0 010-25.18h15.096a12.63 12.63 0 0112.596 12.584z"
+                fill="#2f2e41"
+            />
+            <circle cx={532.815} cy={18.25} r={12.901} fill="#2f2e41" />
+            <path
+                d="M532.5 5.35c-.158 0-.315.006-.472.011a12.898 12.898 0 010 25.779c.157.005.314.012.472.012a12.901 12.901 0 100-25.803zM471.141 5.35c.158 0 .315.006.472.011a12.898 12.898 0 000 25.779c-.157.005-.314.012-.472.012a12.901 12.901 0 010-25.803zM513.6 40.275a12.528 12.528 0 01-7.535 2.524h-15.096a12.528 12.528 0 01-7.536-2.524z"
+                opacity={0.1}
+            />
+            <path
+                d="M611.086 133.756s3.252 9.372 6.229 6.876l-2.373-12.25z"
+                fill="#fbbebe"
+            />
+            <path
+                d="M1006.864 419.55a20.813 20.813 0 102.771-39.916l.521 10.713-5.068-9.18a20.734 20.734 0 00-10.683 11.722 20.408 20.408 0 00-1.198 5.63 20.809 20.809 0 0013.657 21.03z"
+                fill="#57b894"
+            />
+            <path
+                d="M1031.941 543.793c-1.789-9.11 5.963-17.187 13.621-22.436s16.605-10.408 19.218-19.317c3.755-12.804-7.43-24.53-16.136-34.642a125.3 125.3 0 01-16.523-24.557c-1.812-3.533-3.476-7.226-3.953-11.167-.686-5.675 1.137-11.323 2.974-16.736q9.18-27.052 19.629-53.65"
+                fill="none"
+                stroke="#3f3d56"
+                strokeMiterlimit={10}
+            />
+            <path
+                d="M1007.72 416.792a20.813 20.813 0 102.773-39.916l.52 10.713-5.068-9.18a20.734 20.734 0 00-10.683 11.722 20.408 20.408 0 00-1.197 5.63 20.809 20.809 0 0013.656 21.03z"
+                fill="none"
+                stroke="#3f3d56"
+                strokeMiterlimit={10}
+            />
+            <path
+                d="M1029.397 357.588a20.788 20.788 0 0114.98-13.197l1.714 10.183 3.177-10.695a20.81 20.81 0 11-19.87 13.71z"
+                fill="#57b894"
+            />
+            <path
+                d="M1030.54 353.91a20.788 20.788 0 0114.98-13.197l1.714 10.184 3.177-10.696a20.81 20.81 0 11-19.87 13.71z"
+                fill="none"
+                stroke="#3f3d56"
+                strokeMiterlimit={10}
+            />
+            <path
+                d="M1044.99 467.604a20.81 20.81 0 0018.42-37.022l-2.441 8.219-1.732-10.304a.362.362 0 00-.053-.02 20.811 20.811 0 10-14.193 39.127z"
+                fill="#57b894"
+            />
+            <path
+                d="M1045.981 463.88a20.81 20.81 0 0018.419-37.023l-2.441 8.22-1.731-10.305a.362.362 0 00-.053-.02 20.811 20.811 0 10-14.194 39.128z"
+                fill="none"
+                stroke="#3f3d56"
+                strokeMiterlimit={10}
+            />
+            <path
+                d="M1023.324 502.167a20.801 20.801 0 104.01-16.297l9.273 13.956-12.67-7.408a20.616 20.616 0 00-.613 9.749z"
+                fill="#57b894"
+            />
+            <path
+                d="M1024.18 499.409a20.801 20.801 0 104.012-16.297l9.272 13.956-12.67-7.407a20.616 20.616 0 00-.613 9.748z"
+                fill="none"
+                stroke="#3f3d56"
+                strokeMiterlimit={10}
+            />
+            <path
+                d="M9.007 470.249a13.674 13.674 0 101.821-26.225l.343 7.038-3.33-6.032a13.623 13.623 0 00-7.02 7.702 13.409 13.409 0 00-.786 3.7 13.672 13.672 0 008.972 13.817z"
+                fill="#57b894"
+            />
+            <path
+                d="M25.484 551.879c-1.176-5.986 3.918-11.292 8.949-14.741s10.91-6.838 12.626-12.692c2.467-8.412-4.881-16.116-10.601-22.76a82.324 82.324 0 01-10.856-16.135 22.21 22.21 0 01-2.597-7.336c-.451-3.729.747-7.44 1.954-10.996q6.03-17.774 12.896-35.25"
+                fill="none"
+                stroke="#3f3d56"
+                strokeMiterlimit={10}
+            />
+            <path
+                d="M9.57 468.437a13.674 13.674 0 101.822-26.225l.342 7.038-3.33-6.032a13.623 13.623 0 00-7.02 7.702 13.41 13.41 0 00-.786 3.699 13.672 13.672 0 008.973 13.818z"
+                fill="none"
+                stroke="#3f3d56"
+                strokeMiterlimit={10}
+            />
+            <path
+                d="M23.812 429.539a13.658 13.658 0 019.842-8.671l1.126 6.69 2.088-7.026a13.673 13.673 0 11-13.056 9.007z"
+                fill="#57b894"
+            />
+            <path
+                d="M24.563 427.123a13.658 13.658 0 019.842-8.671l1.126 6.69 2.088-7.027a13.673 13.673 0 11-13.056 9.008z"
+                fill="none"
+                stroke="#3f3d56"
+                strokeMiterlimit={10}
+            />
+            <path
+                d="M34.058 501.822a13.673 13.673 0 0012.101-24.325l-1.604 5.4-1.137-6.77a.238.238 0 00-.035-.013 13.673 13.673 0 10-9.325 25.708z"
+                fill="#57b894"
+            />
+            <path
+                d="M34.708 499.374A13.673 13.673 0 0046.81 475.05l-1.604 5.4-1.137-6.77a.238.238 0 00-.035-.013 13.673 13.673 0 10-9.326 25.707z"
+                fill="none"
+                stroke="#3f3d56"
+                strokeMiterlimit={10}
+            />
+            <path
+                d="M19.822 524.53a13.667 13.667 0 102.635-10.708l6.092 9.17-8.324-4.867a13.545 13.545 0 00-.403 6.405z"
+                fill="#57b894"
+            />
+            <path
+                d="M20.385 522.718a13.667 13.667 0 102.635-10.708l6.092 9.17-8.324-4.867a13.545 13.545 0 00-.403 6.405z"
+                fill="none"
+                stroke="#3f3d56"
+                strokeMiterlimit={10}
+            />
+            <ellipse cx={480.946} cy={319.115} rx={17} ry={22} fill="#2f2e41" />
+            <ellipse cx={573.446} cy={319.615} rx={17} ry={22} fill="#2f2e41" />
+            <path
+                d="M560.446 384.615c0 9.94-13.88 18-31 18s-31-8.06-31-18c0-8.61 10.41-15.81 24.32-17.57a50.104 50.104 0 016.68-.43 50.699 50.699 0 0111.13 1.2c11.62 2.59 19.87 9.14 19.87 16.8z"
+                fill="#2f2e41"
+            />
+            <ellipse
+                cx={484.946}
+                cy={314.115}
+                rx={17}
+                ry={22}
+                fill="none"
+                stroke="#3f3d56"
+                strokeMiterlimit={10}
+            />
+            <ellipse
+                cx={577.446}
+                cy={314.615}
+                rx={17}
+                ry={22}
+                fill="none"
+                stroke="#3f3d56"
+                strokeMiterlimit={10}
+            />
+            <ellipse
+                cx={533.446}
+                cy={379.615}
+                rx={31}
+                ry={18}
+                fill="none"
+                stroke="#3f3d56"
+                strokeMiterlimit={10}
+            />
+            <path
+                d="M540.946 369.316a4.937 4.937 0 01-1.32 3.392 4.339 4.339 0 01-3.18 1.407h-10a4.664 4.664 0 01-4.5-4.8 4.905 4.905 0 01.82-2.74 47.02 47.02 0 016.68-.46 47.665 47.665 0 0111.13 1.28 5.067 5.067 0 01.37 1.92z"
+                fill="#fff"
+            />
+            <circle cx={484.946} cy={308.115} r={5} fill="#fff" />
+            <circle cx={577.946} cy={308.115} r={5} fill="#fff" />
+            <circle
+                cx={582.946}
+                cy={355.115}
+                r={5}
+                fill="currentColor"
+                opacity={0.3}
+            />
+            <circle
+                cx={460.946}
+                cy={355.115}
+                r={5}
+                fill="currentColor"
+                opacity={0.3}
+            />
+        </svg>
+    );
+}
+
+export default SvgPageNotFound;
diff --git a/src/routes/error404.js b/src/routes/error404.js
new file mode 100644
index 0000000..799b746
--- /dev/null
+++ b/src/routes/error404.js
@@ -0,0 +1,13 @@
+import React from "react";
+import Error from "components/pages/Error";
+import ImagePageNotFound from "draws/PageNotFound";
+
+const error404 = () => (
+    <Error
+        image={<ImagePageNotFound />}
+        title="Página não encontrada!"
+        description="Ops! Página acessada não foi encontrada"
+    />
+);
+
+export default error404;
diff --git a/src/routes/index.js b/src/routes/index.js
index 008c8bd..38956f3 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -5,12 +5,13 @@ import { Route, Routes } from "react-router-dom";
 import Home from "routes/home";
 import About from "routes/about";
 import ProductDetails from "routes/servicos";
-
+import Error404 from "routes/error404";
 const AppRoutes = () => (
     <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/sobre" element={<About />} />
         <Route path="/servicos/:slang" element={<ProductDetails />} />
+        <Route path="*" element={<Error404 />} />
     </Routes>
 );
 
diff --git a/src/routes/servicos/index.js b/src/routes/servicos/index.js
index 2c259f3..dfc2383 100644
--- a/src/routes/servicos/index.js
+++ b/src/routes/servicos/index.js
@@ -3,14 +3,26 @@ import { useParams } from "react-router-dom";
 import ProductDetailsPage from "components/pages/ProductDetails";
 import { useScrollToTop } from "hooks/scroll";
 import { useProduct } from "hooks/products";
+import Error from "components/pages/Error";
+import ImagePageNotFound from "draws/PageNotFound";
 
 const ProductDetails = () => {
     useScrollToTop();
 
     // Retorna todos os parâmetros da rota
     const { slang } = useParams();
-
     const product = useProduct({ slang });
+
+    if (!product) {
+        return (
+            <Error
+                image={<ImagePageNotFound />}
+                title="Página não encontrada!"
+                description="Ops! Página acessada não foi encontrada"
+            />
+        );
+    }
+
     return <ProductDetailsPage product={product} />;
 };
 
diff --git a/svg/page_not_found.svg b/svg/page_not_found.svg
new file mode 100644
index 0000000..b4c6702
--- /dev/null
+++ b/svg/page_not_found.svg
@@ -0,0 +1 @@
+<svg id="fd59ce54-f850-4dfc-bc34-dd7d379d600e" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1074.392" height="584.231" viewBox="0 0 1074.392 584.231"><title>page not found</title><ellipse cx="540.64346" cy="549.3094" rx="527.5" ry="34.9216" fill="#f2f2f2"/><path d="M583.47969,324.89424c-85.94407,0-147.651,55.13938-147.651,183.79791,0,145.813,61.70691,184.41057,147.651,184.41057s151.327-42.27352,151.327-184.41057C734.80664,356.75255,669.42376,324.89424,583.47969,324.89424Zm.56495,319.80837c-59.52686,0-90.62592-34.92288-90.62592-135.9163,0-89.11185,32.37209-136.10461,91.899-136.10461s91.899,30.86774,91.899,136.10461C677.21663,607.23367,643.5715,644.70261,584.04464,644.70261Z" transform="translate(-63.054 -157.8845)" fill="#2f2e41"/><path d="M384.36531,591.40121H348.831V486.76183A20.95585,20.95585,0,0,0,327.87517,465.806h-8.32638a20.95585,20.95585,0,0,0-20.95586,20.95585V591.40121H198.36285a11.96327,11.96327,0,0,1-10.57763-17.552l106.0824-200.78034A20.95585,20.95585,0,0,0,284.28724,344.33l-6.26231-2.9572a20.95585,20.95585,0,0,0-27.4293,9.07005L121.21416,592.4754a28.41578,28.41578,0,0,0-3.35584,13.39612v0a28.41583,28.41583,0,0,0,28.41584,28.41583H298.59293v66.16727a25.119,25.119,0,0,0,25.119,25.119h.00005a25.119,25.119,0,0,0,25.119-25.119V634.28739h35.53428a21.44307,21.44307,0,0,0,21.44307-21.44307v0A21.44307,21.44307,0,0,0,384.36531,591.40121Z" transform="translate(-63.054 -157.8845)" fill="#ffc107"/><path d="M1042.36183,591.40121h-35.53428V486.76183A20.95585,20.95585,0,0,0,985.87169,465.806h-8.32638a20.95585,20.95585,0,0,0-20.95586,20.95585V591.40121H856.35937a11.96326,11.96326,0,0,1-10.57763-17.552L951.86413,373.06891A20.95586,20.95586,0,0,0,942.28376,344.33l-6.26231-2.9572a20.95586,20.95586,0,0,0-27.42931,9.07005L779.21068,592.4754a28.41578,28.41578,0,0,0-3.35584,13.39612v0a28.41583,28.41583,0,0,0,28.41583,28.41583H956.58945v66.16727a25.119,25.119,0,0,0,25.119,25.119h0a25.119,25.119,0,0,0,25.119-25.119V634.28739h35.53428a21.44307,21.44307,0,0,0,21.44307-21.44307v0A21.44307,21.44307,0,0,0,1042.36183,591.40121Z" transform="translate(-63.054 -157.8845)" fill="#ffc107"/><path d="M394.16787,579.148H358.63358V474.50864a20.95585,20.95585,0,0,0-20.95585-20.95586h-8.32638a20.95586,20.95586,0,0,0-20.95586,20.95586V579.148H208.16541a11.96327,11.96327,0,0,1-10.57763-17.552L303.67017,360.81572a20.95586,20.95586,0,0,0-9.58037-28.73893l-6.26231-2.9572a20.95586,20.95586,0,0,0-27.42931,9.07L131.01672,580.2222a28.41582,28.41582,0,0,0-3.35584,13.39613v0a28.41583,28.41583,0,0,0,28.41583,28.41583H308.39549v66.16727a25.119,25.119,0,0,0,25.119,25.119h.00005a25.119,25.119,0,0,0,25.119-25.119V622.0342h35.53429a21.44307,21.44307,0,0,0,21.44307-21.44307v0A21.44307,21.44307,0,0,0,394.16787,579.148Z" transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><path d="M1060.74162,579.148h-35.53428V474.50864a20.95586,20.95586,0,0,0-20.95586-20.95586H995.9251a20.95586,20.95586,0,0,0-20.95586,20.95586V579.148H874.73916a11.96327,11.96327,0,0,1-10.57763-17.552L970.24392,360.81572a20.95586,20.95586,0,0,0-9.58037-28.73893l-6.26231-2.9572a20.95586,20.95586,0,0,0-27.42931,9.07L797.59047,580.2222a28.41582,28.41582,0,0,0-3.35584,13.39613v0a28.41583,28.41583,0,0,0,28.41583,28.41583H974.96924v66.16727a25.119,25.119,0,0,0,25.119,25.119h0a25.119,25.119,0,0,0,25.119-25.119V622.0342h35.53428a21.44307,21.44307,0,0,0,21.44307-21.44307v0A21.44307,21.44307,0,0,0,1060.74162,579.148Z" transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><path d="M603.0848,313.86637c-85.94407,0-147.651,55.13937-147.651,183.79791,0,145.813,61.70691,184.41057,147.651,184.41057s151.327-42.27352,151.327-184.41057C754.41175,345.72467,689.02887,313.86637,603.0848,313.86637Zm.565,319.80836c-59.52686,0-90.62592-34.92287-90.62592-135.91629,0-89.11185,32.37209-136.10461,91.899-136.10461s91.899,30.86774,91.899,136.10461C696.82174,596.20579,663.17661,633.67473,603.64975,633.67473Z" transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><circle cx="471.14108" cy="18.25044" r="12.90118" fill="#2f2e41"/><ellipse cx="502.60736" cy="46.88476" rx="36.18622" ry="46.88476" fill="#2f2e41"/><path d="M565.66136,237.49419c-18.1276,0-33.1413-17.27052-35.77576-39.80484a60.9759,60.9759,0,0,0-.41046,7.07991c0,25.89373,16.20114,46.88476,36.18622,46.88476s36.18623-20.991,36.18623-46.88476a60.9759,60.9759,0,0,0-.41046-7.07991C598.80267,220.22367,583.789,237.49419,565.66136,237.49419Z" transform="translate(-63.054 -157.8845)" opacity="0.1"/><path d="M639.29619,342.07326c-.77711,3.19345-4.12792,5.751-7.83881,7.53791-7.80188,3.75682-17.4253,4.87788-26.7597,5.25418a45.17622,45.17622,0,0,1-7.1445-.132,20.5371,20.5371,0,0,1-12.25052-5.63141,1.68086,1.68086,0,0,1,.04371-2.84388c4.9694-5.45888,13.2622-8.80605,21.61613-11.21609,6.3344-1.82743,17.3813-6.56089,24.29013-5.9221C637.94444,329.73864,640.2774,338.04112,639.29619,342.07326Z" transform="translate(-63.054 -157.8845)" fill="#3f3d56"/><path d="M639.29619,342.07326c-.77711,3.19345-4.12792,5.751-7.83881,7.53791-7.80188,3.75682-17.4253,4.87788-26.7597,5.25418a45.17622,45.17622,0,0,1-7.1445-.132,20.5371,20.5371,0,0,1-12.25052-5.63141,1.68086,1.68086,0,0,1,.04371-2.84388c4.9694-5.45888,13.2622-8.80605,21.61613-11.21609,6.3344-1.82743,17.3813-6.56089,24.29013-5.9221C637.94444,329.73864,640.2774,338.04112,639.29619,342.07326Z" transform="translate(-63.054 -157.8845)" opacity="0.1"/><path d="M540.09786,318.2059a19.76967,19.76967,0,0,0-1.1987,15.07476,26.33914,26.33914,0,0,0,8.82921,12.49683c10.09467,8.09163,23.98784,9.20512,36.92477,9.09278a284.6495,284.6495,0,0,0,33.90525-2.32384,40.53788,40.53788,0,0,0,11.00143-2.55442c4.22242-1.82679,7.93282-5.17756,9.436-9.5257s.43625-9.67246-3.13383-12.57428c-3.13686-2.54969-7.46265-2.9004-11.49775-3.14289l-23.08764-1.38745c2.281-2.30839,5.31816-3.614,8.09586-5.29216,3.68523-2.22642,6.13358-5.96455,8.81312-9.33471a129.00143,129.00143,0,0,1,13.4386-13.817c.75138,4.31038,3.4782,7.8499,6.68733,10.824s6.90841,5.36845,10.2439,8.20013c8.0786,6.85838,13.89583,16.1669,22.39215,22.50043a43.82885,43.82885,0,0,0,16.04862-8.0122l-3.30209-5.98141a3.94,3.94,0,0,0-1.24459-1.55282c-.93465-.575-2.13975-.27872-3.225-.44144-2.90082-.435-4.16771-3.784-5.306-6.48737-3.12491-7.42173-9.108-13.17993-14.21783-19.40381a98.00854,98.00854,0,0,1-9.99577-14.72284c-1.71652-3.10162-3.288-6.33107-5.61746-9.00321s-5.59358-4.773-9.1385-4.78051c-3.13222-.00662-6.02122,1.58355-8.71422,3.18308a230.47679,230.47679,0,0,0-23.63018,16.09894c-3.94376,3.0617-7.86306,6.29645-12.48933,8.17393-1.94748.79035-4.00044,1.33052-5.86924,2.29223-3.27313,1.6844-5.75721,4.53435-8.43128,7.06415C566.27712,311.89225,553.219,317.73841,540.09786,318.2059Z" transform="translate(-63.054 -157.8845)" fill="#3f3d56"/><path d="M588.3737,253.98251a23.77444,23.77444,0,0,1-1.73379,8.03335,10.04492,10.04492,0,0,1-5.76772,5.57269,12.37513,12.37513,0,0,1-5.62306.18249,10.88232,10.88232,0,0,1-4.58151-1.56071c-2.16484-1.48837-3.24415-4.14413-3.63748-6.74325-.39333-2.596-.21714-5.24857-.46885-7.86342a42.94439,42.94439,0,0,0-1.202-6.25549c-.16993-.68282-.343-1.36248-.51294-2.04216-.16674-.67967-.33037-1.35935-.48141-2.039-.13847-.63878-.26745-1.28068-.37761-1.92574-.09123-.54436-.173-1.09189-.23285-1.64255a18.42329,18.42329,0,0,0-.80867-4.81118,14.60727,14.60727,0,0,0-1.68659-2.854c-.28635-.40906-.56326-.81811-.81815-1.24292a5.88984,5.88984,0,0,1-.97226-3.74763,3.286,3.286,0,0,1,.14788-.601c.02516-.07552.05347-.151.085-.2234A1.80187,1.80187,0,0,0,560.932,223.07a3.43341,3.43341,0,0,0-.14788-1.77783,11.31808,11.31808,0,0,0-.95974-2.28761c-.2643-.47829-1.16108-1.34046-1.16738-1.888-.0126-1.10132,2.13972-1.98867,3.01134-2.42291a16.79623,16.79623,0,0,1,8.59657-1.74323c1.90369.129,3.9679.71428,5.0189,2.30962.944,1.438.81807,3.30081,1.22085,4.97169a1.47068,1.47068,0,0,0,.29892.66393,1.34135,1.34135,0,0,0,.73948.33982,4.54948,4.54948,0,0,0,1.416.05666h.00315a2.93138,2.93138,0,0,0,.37128-.05351,4.957,4.957,0,0,0,2.03271-.8779q.58531-.15576,1.18-.25488a.25112.25112,0,0,0,.04725-.00945c1.57646,4.97482,1.781,10.30836,3.07111,15.37444.63874,2.52044,1.55442,5.00943,1.6834,7.60225.00945.11327.0126.2297.01575.34612.0189.83386-.04717,1.674-.0126,2.50472a6.981,6.981,0,0,0,.12591,1.1139,15.61121,15.61121,0,0,0,.52546,1.74325l.00945.02831c.05977.18251.11643.36817.16363.55381.03457.1353.06607.26747.09127.40277l.00311.00943A14.93754,14.93754,0,0,1,588.3737,253.98251Z" transform="translate(-63.054 -157.8845)" fill="#fbbebe"/><circle cx="503.23669" cy="44.99678" r="18.56511" fill="#fbbebe"/><path d="M684.15711,304.03278a30.445,30.445,0,0,0-5.236-14.10317q.72216,4.29513,1.44748,8.58714a3.214,3.214,0,0,1-3.36688-1.03523,10.33663,10.33663,0,0,1-1.76529-3.27565,67.46571,67.46571,0,0,0-8.2095-14.73567c-11.81876-.98489-23.50223-5.88418-33.89555-11.59532-10.39643-5.708-20.12582-12.5519-30.38382-18.50217a43.57346,43.57346,0,0,0-5.54436-2.832c-3.20954-1.287-6.81242-1.95406-9.85526-3.46759-.2045-.1007-.409-.20767-.61043-.31781a12.57834,12.57834,0,0,1-1.94459-1.30584,10.34363,10.34363,0,0,1-.93139-.8559,20.35115,20.35115,0,0,1-3.55886-5.95341c-1.63308-3.61232-2.21524-7.97041-3.84517-11.58274a11.20292,11.20292,0,0,1,2.50156-1.76525h.00315c.13213-.06924.2643-.13532.39962-.19824a11.9404,11.9404,0,0,1,2.00437-.73317q.58531-.15576,1.18-.25488a.25112.25112,0,0,0,.04725-.00945,11.56564,11.56564,0,0,1,5.49085.43424c2.58652.87477,4.76711,2.62115,6.94148,4.27313a114.02006,114.02006,0,0,1,10.14787,8.04908c1.79357,1.718,3.4298,3.606,5.35868,5.16676a42.14393,42.14393,0,0,0,5.05662,3.35116q15.65613,9.32658,31.31525,18.65005c3.53365,2.1051,7.07046,4.21019,10.52553,6.438,5.24855,3.38578,10.30828,7.05474,15.36493,10.72057q4.46978,3.23787,8.93647,6.47889a9.72771,9.72771,0,0,1,2.533,2.3411,8.4724,8.4724,0,0,1,1.12337,3.433A31.3874,31.3874,0,0,1,684.15711,304.03278Z" transform="translate(-63.054 -157.8845)" fill="#fbbebe"/><path d="M592.97726,267.9441c-1.25235,5.61674-6.92888,9.012-9.89617,13.94586-3.68784,6.12335-2.18378,13.241-.79922,20.25484q-3.79485,3.27095-7.59285,6.54186c-1.39708,1.19886-2.79417,2.404-4.29827,3.46444a57.35064,57.35064,0,0,1-6.85966,3.93956q-3.3606,1.72752-6.72119,3.45814a32.1282,32.1282,0,0,1-6.57961,2.78793c-4.41473,1.13278-9.10318.33982-13.4707-.97232a6.08761,6.08761,0,0,1-1.47264-.601,2.39351,2.39351,0,0,1-.69854-.63248,3.91067,3.91067,0,0,1-.44365-2.53933c.44365-7.35052,2.24036-14.54686,4.03081-21.68971a85.2598,85.2598,0,0,1,3.84832-12.57708,85.0766,85.0766,0,0,1,5.41538-10.151,68.36751,68.36751,0,0,1,7.92948-11.51353,18.47881,18.47881,0,0,0,3.67525-4.73882c1.11706-2.54876.686-5.472.91252-8.24732a17.14844,17.14844,0,0,1,1.63312-6.0069v-.00315a17.09326,17.09326,0,0,1,1.74321-2.88232q.45788,1.06671.91568,2.13027.30209.69855.59783,1.394.38706.89679.7678,1.78728,1.09973,2.55823,2.19637,5.11327a21.58968,21.58968,0,0,0,3.33538,5.944,6.49923,6.49923,0,0,0,11.12337-.85275,21.26125,21.26125,0,0,0,2.27185-6.0132,19.21547,19.21547,0,0,0,.25175-7.83509c-.75835-5.00945-2.88862-10.12585-4.43678-14.77972a14.94511,14.94511,0,0,1-1.07927-4.871,3.35144,3.35144,0,0,1,.05662-.56011c.00945-.04719.0189-.09754.02834-.14473a11.9404,11.9404,0,0,1,2.00437-.73317q.58531-.15576,1.18-.25488,2.04378,11.06355,4.09377,22.12709c.0315.17307.0661.34613.09756.52234.19509,1.05726.39333,2.11454.61358,3.16865.19828.95657.41223,1.91.65137,2.85715l.00945.02831c.08182.321.16678.63877.2549.95658l.00311.00943c.2423.86848.5129,1.73065.81811,2.58024C590.93825,257.47528,594.16355,262.62946,592.97726,267.9441Z" transform="translate(-63.054 -157.8845)" fill="#ffc107"/><path d="M668.32144,346.87707a6.58269,6.58269,0,0,0,.61,3.14328c1.16192,2.12353,3.94981,2.60625,6.36228,2.80484a188.37688,188.37688,0,0,0,42.2657-1.28774,4.88565,4.88565,0,0,0,2.15136-.66766c1.98985-1.39509.76329-4.7951-1.40951-5.88355s-4.75126-.82614-7.1353-1.29748a22.47912,22.47912,0,0,1-6.67794-2.89617q-7.25234-4.16669-14.293-8.68808c-2.79453-1.79464-6.09272-3.70993-9.23987-2.64587C672.43,332.34264,668.26533,337.68065,668.32144,346.87707Z" transform="translate(-63.054 -157.8845)" fill="#3f3d56"/><path d="M564.43732,240.87367v.00315c-.022.13215-.04406.26116-.07237.39018-.0346.214-.07551.43108-.11642.645-.39018,1.99812-.86847,3.98678-1.41913,5.96287-1.5104,5.45939-3.53366,10.83069-5.54121,16.12332q-8.08055,21.28692-16.16423,42.577c-1.35936,3.57457-2.71554,7.15228-4.26054,10.65448-.516,1.16741-1.04782,2.34424-1.57647,3.53368-1.89427,4.25737-3.713,8.65322-4.31716,13.18436a27.44976,27.44976,0,0,0-.19194,9.04027c.60416,2.97042,2.40718,5.8716,5.22969,6.96977,1.37823.53808,3.35113,1.25865,2.97355,2.69037-.2045.78665-1.09817,1.17055-1.90057,1.3027a7.31234,7.31234,0,0,1-5.966-1.718c-1.50725-1.33732-2.66518-3.41725-4.66959-3.64065-1.38767-.151-2.66518.67966-3.93643,1.26178-5.18564,2.36942-11.22719.71114-16.674-.9723.42794-2.20579,2.64318-3.65953,4.84267-4.10006,2.19949-.44367,4.47449-.129,6.718-.18879a3.50958,3.50958,0,0,0,2.04216-.52549,3.70545,3.70545,0,0,0,1.10132-1.88169,78.96356,78.96356,0,0,0,3.21273-13.14661c.7237-4.66645,1.02581-9.40527,2.05787-14.01507.80241-3.59661,2.0422-7.07991,3.10572-10.61044a224.68238,224.68238,0,0,0,5.0598-22.07674,78.02019,78.02019,0,0,0,1.42543-9.36751c.17935-2.6117.09438-5.236.34609-7.83826a60.8877,60.8877,0,0,1,2.11141-9.99683q1.44427-5.34769,2.88547-10.68911c1.42544-5.2706,2.95465-10.74572,6.567-14.84264a13.96159,13.96159,0,0,1,10.02834-4.78915,9.8819,9.8819,0,0,1,2.13027.22969c.11639.02831.23285.05664.34923.0881a8.63447,8.63447,0,0,1,2.17437.89995c1.11388-.708,1.68025-.45942,2.41974.63246a6.97319,6.97319,0,0,1,.88107,3.79485A52.42378,52.42378,0,0,1,564.43732,240.87367Z" transform="translate(-63.054 -157.8845)" fill="#fbbebe"/><path d="M565.66136,245.0461l-.0472.04719-.25486.25488-2.5299,2.52675-1.23976-5.20767-4.25109-17.854a9.8819,9.8819,0,0,1,2.13027.22969,3.286,3.286,0,0,1,.14788-.601l.20135.68911,1.44118,4.90245,2.72811,9.30773.45,1.53241v.00315Z" transform="translate(-63.054 -157.8845)" fill="#ffc107"/><path d="M581.71523,188.0873a12.58165,12.58165,0,0,1-3.70049,8.89583,12.31392,12.31392,0,0,1-1.36008,1.17634,12.52812,12.52812,0,0,1-7.53567,2.52415H554.023a12.5902,12.5902,0,0,1,0-25.18037h15.096A12.62919,12.62919,0,0,1,581.71523,188.0873Z" transform="translate(-63.054 -157.8845)" fill="#2f2e41"/><circle cx="532.81499" cy="18.25044" r="12.90118" fill="#2f2e41"/><path d="M595.55433,163.23377c-.15825,0-.31505.00628-.472.01193a12.89776,12.89776,0,0,1,0,25.77849c.15694.00565.31374.01193.472.01193a12.90117,12.90117,0,1,0,0-25.80235Z" transform="translate(-63.054 -157.8845)" opacity="0.1"/><path d="M534.19508,163.23377c.15825,0,.31505.00628.472.01193a12.89776,12.89776,0,0,0,0,25.77849c-.157.00565-.31375.01193-.472.01193a12.90118,12.90118,0,0,1,0-25.80235Z" transform="translate(-63.054 -157.8845)" opacity="0.1"/><path d="M576.65466,198.15947a12.52812,12.52812,0,0,1-7.53567,2.52415H554.023a12.52833,12.52833,0,0,1-7.53574-2.52415Z" transform="translate(-63.054 -157.8845)" opacity="0.1"/><path d="M674.13958,291.64042s3.25228,9.37161,6.229,6.87633L677.996,286.26693Z" transform="translate(-63.054 -157.8845)" fill="#fbbebe"/><path d="M1069.91781,577.43414a20.81252,20.81252,0,1,0,2.7716-39.91524l.52093,10.7122-5.06814-9.18045a20.734,20.734,0,0,0-10.68367,11.72261,20.40847,20.40847,0,0,0-1.19713,5.62986A20.80856,20.80856,0,0,0,1069.91781,577.43414Z" transform="translate(-63.054 -157.8845)" fill="#57b894"/><path d="M1094.99516,701.67756c-1.78906-9.11027,5.9633-17.1868,13.62086-22.43651s16.605-10.40779,19.21775-19.31684c3.755-12.80387-7.43-24.52981-16.13564-34.64176a125.30044,125.30044,0,0,1-16.52359-24.55738c-1.81107-3.5325-3.47558-7.22528-3.95221-11.16626-.68641-5.67546,1.13693-11.32309,2.9739-16.73673q9.17925-27.05169,19.62843-53.65005" transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><path d="M1070.77493,574.6762a20.81252,20.81252,0,1,0,2.7716-39.91524l.52093,10.7122-5.06815-9.18045a20.734,20.734,0,0,0-10.68366,11.72261,20.40847,20.40847,0,0,0-1.19713,5.62986A20.80855,20.80855,0,0,0,1070.77493,574.6762Z" transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><path d="M1092.45136,515.47266a20.78819,20.78819,0,0,1,14.97993-13.19764l1.71361,10.18378,3.177-10.69566a20.81,20.81,0,1,1-19.87057,13.70952Z" transform="translate(-63.054 -157.8845)" fill="#57b894"/><path d="M1093.59418,511.7954a20.7882,20.7882,0,0,1,14.97993-13.19763l1.71361,10.18378,3.177-10.69567a20.81,20.81,0,1,1-19.87057,13.70952Z" transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><path d="M1108.04474,625.48885a20.81,20.81,0,0,0,18.419-37.02267l-2.44121,8.21926-1.73105-10.30382a.36183.36183,0,0,0-.053-.0201,20.81113,20.81113,0,1,0-14.1938,39.12733Z" transform="translate(-63.054 -157.8845)" fill="#57b894"/><path d="M1109.035,621.76417a20.81,20.81,0,0,0,18.419-37.02267l-2.44121,8.21926-1.73105-10.30382a.3621.3621,0,0,0-.053-.0201,20.81113,20.81113,0,1,0-14.1938,39.12733Z" transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><path d="M1086.37782,660.05148a20.80131,20.80131,0,1,0,4.01058-16.29737l9.27267,13.95654-12.66994-7.40768A20.61638,20.61638,0,0,0,1086.37782,660.05148Z" transform="translate(-63.054 -157.8845)" fill="#57b894"/><path d="M1087.23494,657.29354a20.80131,20.80131,0,1,0,4.01058-16.29737l9.27267,13.95655-12.66994-7.40769A20.61626,20.61626,0,0,0,1087.23494,657.29354Z" transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><path d="M72.06146,628.13325a13.67421,13.67421,0,1,0,1.821-26.225l.34227,7.03811-3.32987-6.03172a13.62263,13.62263,0,0,0-7.01936,7.702,13.40883,13.40883,0,0,0-.78654,3.69893A13.6716,13.6716,0,0,0,72.06146,628.13325Z" transform="translate(-63.054 -157.8845)" fill="#57b894"/><path d="M88.53774,709.76344c-1.17545-5.98561,3.918-11.292,8.94915-14.7412s10.90978-6.8381,12.62642-12.69151c2.46711-8.41238-4.88167-16.11653-10.60142-22.76027A82.32442,82.32442,0,0,1,88.6556,643.43581a22.20962,22.20962,0,0,1-2.59668-7.33643c-.451-3.72888.747-7.43947,1.95391-10.99634q6.03093-17.77346,12.89623-35.24906" transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><path d="M72.62461,626.32123a13.6742,13.6742,0,1,0,1.821-26.225l.34227,7.03812L71.458,601.10258a13.62262,13.62262,0,0,0-7.01936,7.702,13.40912,13.40912,0,0,0-.78654,3.69892A13.67158,13.67158,0,0,0,72.62461,626.32123Z" transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><path d="M86.86641,587.42343a13.65822,13.65822,0,0,1,9.84209-8.67109l1.12587,6.69093,2.08737-7.02725a13.67252,13.67252,0,1,1-13.05533,9.00741Z" transform="translate(-63.054 -157.8845)" fill="#57b894"/><path d="M87.61727,585.0074a13.65822,13.65822,0,0,1,9.84209-8.67108l1.12587,6.69093L100.6726,576a13.67252,13.67252,0,1,1-13.05533,9.0074Z" transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><path d="M97.11155,659.70607a13.67255,13.67255,0,0,0,12.10164-24.32457l-1.60392,5.4002-1.13733-6.76979a.238.238,0,0,0-.0348-.0132,13.67329,13.67329,0,1,0-9.32559,25.70736Z" transform="translate(-63.054 -157.8845)" fill="#57b894"/><path d="M97.76214,657.25889a13.67255,13.67255,0,0,0,12.10164-24.32457l-1.60392,5.4002-1.13733-6.7698a.238.238,0,0,0-.0348-.0132,13.67329,13.67329,0,1,0-9.32559,25.70737Z" transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><path d="M82.876,682.41435a13.66684,13.66684,0,1,0,2.635-10.70767l6.09231,9.16971-8.32438-4.867A13.54535,13.54535,0,0,0,82.876,682.41435Z" transform="translate(-63.054 -157.8845)" fill="#57b894"/><path d="M83.43913,680.60233a13.66684,13.66684,0,1,0,2.635-10.70767l6.09231,9.16971-8.32439-4.867A13.54535,13.54535,0,0,0,83.43913,680.60233Z" transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><ellipse cx="480.946" cy="319.1155" rx="17" ry="22" fill="#2f2e41"/><ellipse cx="573.446" cy="319.6155" rx="17" ry="22" fill="#2f2e41"/><path d="M623.5,542.5c0,9.94-13.88,18-31,18s-31-8.06-31-18c0-8.61,10.41-15.81,24.32-17.57a50.10353,50.10353,0,0,1,6.68-.43,50.69869,50.69869,0,0,1,11.13,1.2C615.25,528.29,623.5,534.84,623.5,542.5Z" transform="translate(-63.054 -157.8845)" fill="#2f2e41"/><ellipse cx="484.946" cy="314.1155" rx="17" ry="22" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><ellipse cx="577.446" cy="314.6155" rx="17" ry="22" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><ellipse cx="533.446" cy="379.6155" rx="31" ry="18" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><path d="M604,527.2a4.93658,4.93658,0,0,1-1.32,3.392A4.33873,4.33873,0,0,1,599.5,532h-10a4.66433,4.66433,0,0,1-4.5-4.8,4.90458,4.90458,0,0,1,.82-2.74134A47.02,47.02,0,0,1,592.5,524a47.66454,47.66454,0,0,1,11.13,1.28A5.06656,5.06656,0,0,1,604,527.2Z" transform="translate(-63.054 -157.8845)" fill="#fff"/><circle cx="484.946" cy="308.1155" r="5" fill="#fff"/><circle cx="577.946" cy="308.1155" r="5" fill="#fff"/><circle cx="582.946" cy="355.1155" r="5" fill="#ffc107" opacity="0.3"/><circle cx="460.946" cy="355.1155" r="5" fill="#ffc107" opacity="0.3"/></svg>
\ No newline at end of file

From 176fab89ec438e17cf01840a2466422d09b8e76c Mon Sep 17 00:00:00 2001
From: Wagner Vieira <wagnervieira1209@gmail.com>
Date: Mon, 9 Aug 2021 21:41:23 -0300
Subject: [PATCH 5/6] Add all the tests

---
 src/components/pages/About.test.js          |  5 ----
 src/components/pages/ProductDetails.test.js |  9 ++++---
 src/hooks/products.test.js                  | 27 ++++++++++++++++++++
 src/routes/about.test.js                    |  8 ++++++
 src/routes/error404.test.js                 | 11 ++++++++
 src/routes/servicos/index.test.js           | 28 +++++++++++++++++++++
 6 files changed, 79 insertions(+), 9 deletions(-)
 create mode 100644 src/hooks/products.test.js
 create mode 100644 src/routes/about.test.js
 create mode 100644 src/routes/error404.test.js
 create mode 100644 src/routes/servicos/index.test.js

diff --git a/src/components/pages/About.test.js b/src/components/pages/About.test.js
index 93e243a..76e17f3 100644
--- a/src/components/pages/About.test.js
+++ b/src/components/pages/About.test.js
@@ -12,8 +12,3 @@ test("renders about page", () => {
     render(<About />);
     expect(screen.getByText("Auto escola Nardini")).toBeInTheDocument();
 });
-
-test("scroll top in the first render", () => {
-    render(<About />);
-    expect(window.scrollTo).toBeCalledTimes(1);
-});
diff --git a/src/components/pages/ProductDetails.test.js b/src/components/pages/ProductDetails.test.js
index 888648b..b3aac2c 100644
--- a/src/components/pages/ProductDetails.test.js
+++ b/src/components/pages/ProductDetails.test.js
@@ -1,10 +1,11 @@
 import React from "react";
-
 import { render, screen } from "test-utils";
-
 import ProductDetails from "./ProductDetails";
+import { buildProduct } from "models/builders/products";
 
 test("render product details page", () => {
-    render(<ProductDetails />);
-    expect(screen.getByText("Nomes Do Serviço")).toBeInTheDocument();
+    render(<ProductDetails product={buildProduct()} />);
+    expect(
+        screen.getByText("Rustic Cotton Car", { selector: "h1" })
+    ).toBeInTheDocument();
 });
diff --git a/src/hooks/products.test.js b/src/hooks/products.test.js
new file mode 100644
index 0000000..db0456e
--- /dev/null
+++ b/src/hooks/products.test.js
@@ -0,0 +1,27 @@
+import { useProduct, useProducts } from "./products";
+
+describe("useProduct()", () => {
+    test("returns a product", () => {
+        const slang = "primeira-habilitacao";
+
+        const product = useProduct({ slang });
+
+        expect(product.title).toEqual("1a Habilitação");
+    });
+
+    test("returns undefined if a product was not found", () => {
+        const slang = "invalid-slang";
+
+        const product = useProduct({ slang });
+
+        expect(product).toBeUndefined();
+    });
+});
+
+describe("useProducts()", () => {
+    test("returns a product list", () => {
+        const products = useProducts();
+
+        expect(products.length).toBeGreaterThan(1);
+    });
+});
diff --git a/src/routes/about.test.js b/src/routes/about.test.js
new file mode 100644
index 0000000..8570f0d
--- /dev/null
+++ b/src/routes/about.test.js
@@ -0,0 +1,8 @@
+import React from "react";
+import About from "./about";
+import { render } from "test-utils";
+
+test("scroll top in the first render", () => {
+    render(<About />);
+    expect(window.scrollTo).toBeCalledTimes(1);
+});
diff --git a/src/routes/error404.test.js b/src/routes/error404.test.js
new file mode 100644
index 0000000..9bb6ee1
--- /dev/null
+++ b/src/routes/error404.test.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+import { render, screen } from "test-utils";
+
+import Error404 from "./error404";
+
+test("renders with sucess", () => {
+    render(<Error404 />);
+
+    expect(screen.getByText("Página não encontrada!")).toBeInTheDocument();
+});
diff --git a/src/routes/servicos/index.test.js b/src/routes/servicos/index.test.js
new file mode 100644
index 0000000..0d407fb
--- /dev/null
+++ b/src/routes/servicos/index.test.js
@@ -0,0 +1,28 @@
+import React from "react";
+
+import { render, screen } from "test-utils";
+import { useProduct } from "hooks/products";
+import ProductDetailRoute from "./index";
+import { buildProduct } from "models/builders/products";
+
+jest.mock("hooks/products");
+
+test("renders with a Product", () => {
+    useProduct.mockReturnValue(buildProduct());
+
+    render(<ProductDetailRoute />);
+
+    expect(
+        screen.getByText("Rustic Cotton Car", { selector: "h1" })
+    ).toBeInTheDocument();
+});
+
+test("not found Product", () => {
+    useProduct.mockReturnValue(null);
+
+    render(<ProductDetailRoute />);
+
+    expect(
+        screen.getByText("Página não encontrada!", { selector: "h1" })
+    ).toBeInTheDocument();
+});

From 0b609a04d1de4673426dba4ba56c8d8ce99c3683 Mon Sep 17 00:00:00 2001
From: Wagner Vieira <wagnervieira1209@gmail.com>
Date: Mon, 9 Aug 2021 21:42:38 -0300
Subject: [PATCH 6/6] Bump to version 0.3.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 81824c1..2b541b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "autoescola-nardini",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "dependencies": {
     "@storybook/addon-actions": "^6.2.9",