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

This commit is contained in:
Anton Kupriianov 2025-04-17 12:38:39 -07:00
parent 36a96cd2ff
commit 39564e963e
2 changed files with 25 additions and 10 deletions

View file

@ -1,5 +1,6 @@
import React from 'react'; import React from "react";
import '../scss/components/Hero.scss'; import "../scss/components/Hero.scss";
import Services from "./Services";
function Hero() { function Hero() {
return ( return (
@ -8,18 +9,25 @@ function Hero() {
<p className="intro">Welcome to BattleSnake!!!</p> <p className="intro">Welcome to BattleSnake!!!</p>
<h1>Play for Fun!</h1> <h1>Play for Fun!</h1>
<p className="desc"> <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> </p>
<button className="cta">Start Battle</button> <button className="cta">Start Battle</button>
</div> </div>
<div className="hero-image"> <div className="hero-image">
<div className="hex-bg"> <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>
{/* <div className="tag name-tag">Battle</div> {/* <div className="tag name-tag">Battle</div>
<div className="icon top-left">📈</div> <div className="icon top-left">📈</div>
<div className="icon bottom-right">👁</div> <div className="icon bottom-right">👁</div>
<div className="freelance-tag">Available for Freelance</div> */} <div className="freelance-tag">Available for Freelance</div> */}
{/* <div>
<Services />
</div> */}
</div> </div>
</section> </section>
); );

View file

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