Refactor Hero and AppRouter components; added Services component and adjusted layout

src/components/Hero.jsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import '../scss/components/Hero.scss';
+import React from "react";
+import "../scss/components/Hero.scss";
+import Services from "./Services";
 
 function Hero() {
   return (
@@ -8,18 +9,25 @@ function Hero() {
         <p className="intro">Welcome to BattleSnake!!!</p>
         <h1>Play for Fun!</h1>
         <p className="desc">
-        A competitive game where your code is the controller. All you need is a web server that responds to the Battlesnake API.
+          A competitive game where your code is the controller. All you need is
+          a web server that responds to the Battlesnake API.
         </p>
         <button className="cta">Start Battle</button>
       </div>
       <div className="hero-image">
         <div className="hex-bg">
-          <img src="https://static.battlesnake.com/play/releases/2.1.4/ui/img/game.gif" alt="battle snake game" />
+          <img
+            src="https://static.battlesnake.com/play/releases/2.1.4/ui/img/game.gif"
+            alt="battle snake game"
+          />
         </div>
         {/* <div className="tag name-tag">Battle</div>
             <div className="icon top-left">📈</div>
             <div className="icon bottom-right">👁️</div>
             <div className="freelance-tag">Available for Freelance</div> */}
+        {/* <div>
+          <Services />
+        </div> */}
       </div>
     </section>
   );

src/routers/AppRouter.jsx

@@ -12,21 +12,27 @@ import LoginPage from "../pages/LoginPage";
 import PageCodeEditor from "../pages/CodeEditor";
 import PageNotFound from "../pages/PageNotFound";
 import Hero from "../components/Hero";
+import Navbar from "../components/Navbar";
+import Services from "../components/Services";
 
 const AppRouter = () => {
   return (
     <BrowserRouter>
       <div className="wrapper">
-        <Header />
+        {/* <Header /> */}
+        <Navbar />
         <Routes>
           <Route
             path="/"
             element={
-              <ProtectedRoute>
-                <Hero/>
-              </ProtectedRoute>
+              // <ProtectedRoute>
+
+              <Hero />
+
+              // </ProtectedRoute>
             }
           />
+          {/* <Services /> */}
           <Route path="login" element={<LoginPage />} />
           <Route
             path="editor"
@@ -38,6 +44,7 @@ const AppRouter = () => {
           />
           <Route path="*" element={<PageNotFound />} />
         </Routes>
+        <Services />
         <Footer />
       </div>
     </BrowserRouter>