add: layout

src/components/App/App.jsx

@@ -1,34 +1,28 @@
-import Home from 'pages/Home';
-import { Container, Header, Logo, Link } from './App.styled';
 import { Routes, Route } from 'react-router-dom';
 import About from 'pages/About';
 import Products from 'pages/Products';
 import ProductDetails from 'pages/ProductDetails';
 import NotFound from 'pages/NotFound';
+import Mission from 'pages/Mission';
+import Team from 'pages/Team';
+import Reviews from 'pages/Reviews';
+import Home from 'pages/Home';
+import Sharedlayout from 'components/SharedLayout/SharedLayout';
 
 export const App = () => {
   return (
-    <Container>
-      <Header>
-        <Logo>
-          <span role="img" aria-label="computer icon">
-            💻
-          </span>{' '}
-          GoMerch Store
-        </Logo>
-        <nav>
-          <Link to="/">Home</Link>
-          <Link to="/about">About</Link>
-          <Link to="/products">Products</Link>
-        </nav>
-      </Header>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/about" element={<About />} />
-        <Route path="/products" element={<Products />} />
-        <Route path="/products/:id" element={<ProductDetails />} />
-        <Route path="*" element={<NotFound />} />
-      </Routes>
-    </Container>
+    <Routes>
+      <Route path="/" element={<Sharedlayout />}>
+        <Route index element={<Home />} />
+        <Route path="about" element={<About />}>
+          <Route path="mission" element={<Mission />} />
+          <Route path="team" element={<Team />} />
+          <Route path="reviews" element={<Reviews />} />
+        </Route>
+        <Route path="products" element={<Products />} />
+        <Route path="products/:id" element={<ProductDetails />} />
+        <Route path="*" element={<NotFound />} />;
+      </Route>
+    </Routes>
   );
 };

src/components/SharedLayout/SharedLayout.jsx

@@ -0,0 +1,25 @@
+import { Container, Header, Logo, Link } from 'components/App/App.styled';
+import { Outlet } from 'react-router-dom';
+
+const Sharedlayout = () => {
+  return (
+    <Container>
+      <Header>
+        <Logo>
+          <span role="img" aria-label="computer icon">
+            💻
+          </span>{' '}
+          GoMerch Store
+        </Logo>
+        <nav>
+          <Link to="/">Home</Link>
+          <Link to="/about">About</Link>
+          <Link to="/products">Products</Link>
+        </nav>
+      </Header>
+      <Outlet />
+    </Container>
+  );
+};
+
+export default Sharedlayout;

src/index.css

@@ -8,3 +8,8 @@ img {
   max-width: 100%;
   height: auto;
 }
+
+li {
+  list-style: none;
+  text-decoration: none;
+}

src/index.js

@@ -6,7 +6,7 @@ import { BrowserRouter } from 'react-router-dom';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <BrowserRouter>
+    <BrowserRouter basename="/react-tabs">
       <App />
     </BrowserRouter>
   </React.StrictMode>

src/pages/About.jsx

@@ -1,3 +1,5 @@
+import { Link, Outlet } from 'react-router-dom';
+
 const About = () => {
   return (
     <main>
@@ -15,6 +17,18 @@ const About = () => {
         dolorum illum voluptatum dolores! Quas perferendis quis alias excepturi
         eaque voluptatibus eveniet error, nulla rem iusto?
       </p>
+      <ul>
+        <li>
+          <Link to="mission">Read about our mission</Link>
+        </li>
+        <li>
+          <Link to="team">Get to know the team</Link>
+        </li>
+        <li>
+          <Link to="reviews">Go through the reviews</Link>
+        </li>
+      </ul>
+      <Outlet />
     </main>
   );
 };

src/pages/Mission.jsx

@@ -0,0 +1,22 @@
+const Mission = () => {
+  return (
+    <section>
+      <h2>Our mission</h2>
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut, nesciunt
+        veniam. Excepturi itaque, voluptates fugiat perspiciatis quo saepe! Iste
+        eaque porro eveniet error dicta, modi ipsum hic quis minima inventore.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quaerat
+        illum excepturi odit doloremque, vitae quasi corporis commodi nisi quae
+        perspiciatis amet consectetur reprehenderit inventore laborum facilis
+        quia mollitia exercitationem eaque rerum dignissimos maiores, quos iure
+        blanditiis. Dolorem, nam? Aliquid sequi molestias vel, tenetur maxime
+        pariatur? Molestiae libero cum quidem.
+      </p>
+    </section>
+  );
+};
+
+export default Mission;

src/pages/Reviews.jsx

@@ -0,0 +1,25 @@
+const Reviews = () => {
+  return (
+    <section>
+      <div>
+        <h2>First review - 4.6/5</h2>
+        <p>
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem harum
+          architecto sapiente corporis, voluptatem quas voluptatibus fugiat
+          nulla commodi quidem, dolorem distinctio inventore blanditiis illo
+          tenetur aut enim ex laborum!
+        </p>
+      </div>
+      <div>
+        <h2>Second review - 4.8/5</h2>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti
+          nihil ea, eaque fugit amet possimus officiis asperiores aperiam facere
+          et?
+        </p>
+      </div>
+    </section>
+  );
+};
+
+export default Reviews;

src/pages/Team.jsx

@@ -0,0 +1,25 @@
+const Team = () => {
+  return (
+    <section>
+      <ul>
+        <li>
+          <b>CEO</b> - Gabrijela Vohu Manah
+        </li>
+        <li>
+          <b>Sales</b> - Darius Marianne
+        </li>
+        <li>
+          <b>Product</b> - Ségdae Jean-Pierre
+        </li>
+        <li>
+          <b>Marketing</b> - Melina Theotimos
+        </li>
+        <li>
+          <b>Engineering</b> - Gregor Ramadhani
+        </li>
+      </ul>
+    </section>
+  );
+};
+
+export default Team;