Refactor Hero and AppRouter components; added Services component and adjusted layout
This commit is contained in:
parent
36a96cd2ff
commit
39564e963e
2 changed files with 25 additions and 10 deletions
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue