homepage fixed and merge

src/components/Hero.jsx

@@ -6,10 +6,10 @@ function Hero() {
   return (
     <section className="hero">
       <div className="hero-text">
-        <p className="intro">Welcome to BattleSnake!!!</p>
+        <p className="intro">Welcome to Bytecamp!!!</p>
         <h1>Play for Fun!</h1>
         <p className="desc">
-          A competitive game where your code is the controller. All you need is
+          A competitive game where your code is the controller.<br /> All you need is
           a web server that responds to the Battlesnake API.
         </p>
         <button className="cta">Start Battle</button>

src/routers/AppRouter.jsx

@@ -22,17 +22,16 @@ const AppRouter = () => {
         {/* <Header /> */}
         <Navbar />
         <Routes>
+          
           <Route
             path="/"
             element={
-              // <ProtectedRoute>
-
+              <>
               <Hero />
-
-              // </ProtectedRoute>
+              <Services />
+              </>
             }
           />
-          {/* <Services /> */}
           <Route path="login" element={<LoginPage />} />
           <Route
             path="editor"
@@ -44,7 +43,7 @@ const AppRouter = () => {
           />
           <Route path="*" element={<PageNotFound />} />
         </Routes>
-        <Services />
+        
         <Footer />
       </div>
     </BrowserRouter>

src/scss/components/Hero.scss

@@ -4,9 +4,12 @@
     align-items: center;
     padding: 4rem 3rem;
     background-color: #f9f5f2;
+    padding-top: 40rem;
+    
   
     .hero-text {
       max-width: 50%;
+      margin-left: 3rem;
     //   font-family: "Limelight", sans-serif;
   
       .intro {

src/scss/components/_navbar.scss

@@ -6,6 +6,11 @@
     padding: 1rem 2rem;
     color: white;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    width: 100%;
   
     &__logo {
       font-size: 1.5rem;