@@ -92,18 +97,30 @@ export const Header = () => {
diff --git a/src/pages/games.tsx b/src/pages/games.tsx
new file mode 100644
index 0000000..b08c791
--- /dev/null
+++ b/src/pages/games.tsx
@@ -0,0 +1,87 @@
+import '../styles/pagination.css'
+import '../styles/styles.css'
+import '../styles/search.css'
+import { GameCard } from '../components/GameCard'
+
+export const GamesPage = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index e4d677f..7d510cf 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -1,5 +1,5 @@
+import { GameCard } from '../components/GameCard'
import '../styles/cardBlogs.css'
-import '../styles/cardGames.css'
import '../styles/cardLists.css'
import '../styles/cardMod.css'
import '../styles/SimpleSlider.css'
@@ -129,11 +129,11 @@ export const HomePage = () => {
Cool Games
{
)
}
-type GameCardProps = {
- backgroungLink: string
-}
-
-const GameCard = ({ backgroungLink }: GameCardProps) => {
- return (
-
-
-
-
This is a game title, the best game title
-
-
- )
-}
-
type ModCardProps = {
backgroundLink: string
}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 7ec7d09..143cd0a 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,8 +1,13 @@
+import { GamesPage } from '../pages/games'
import { HomePage } from '../pages/home'
-export const appRoutes: Record
= {
+export const appRoutes = {
index: '/',
- home: '/home'
+ home: '/home',
+ games: '/games',
+ mods: '/mods',
+ about: '/about',
+ blog: '/blog'
}
export const routes = [
@@ -13,5 +18,21 @@ export const routes = [
{
path: appRoutes.home,
element:
+ },
+ {
+ path: appRoutes.games,
+ element:
+ },
+ {
+ path: appRoutes.mods,
+ element:
+ },
+ {
+ path: appRoutes.about,
+ element:
+ },
+ {
+ path: appRoutes.blog,
+ element:
}
]
diff --git a/src/styles/pagination.css b/src/styles/pagination.css
new file mode 100644
index 0000000..2e739b1
--- /dev/null
+++ b/src/styles/pagination.css
@@ -0,0 +1,103 @@
+.PaginationMain {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.PaginationMainInside {
+ width: 100%;
+ max-width: 600px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ grid-gap: 10px;
+ height: 50px;
+}
+
+@media (max-width: 768px) {
+ .PaginationMainInside {
+ flex-direction: row;
+ height: unset;
+ max-width: unset;
+ }
+}
+
+.PaginationMainInsideBox {
+ transition: ease 0.4s;
+ text-decoration: unset;
+ color: unset;
+ padding: 10px 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background: rgba(35,35,35,0);
+ border-radius: 10px;
+ height: 100%;
+ box-shadow: 0 0 8px 0 rgba(0,0,0,0);
+ transform: scale(1);
+ border: solid 1px rgba(255,255,255,0);
+ color: rgba(255,255,255,0.1);
+ font-weight: bold;
+}
+
+.PaginationMainInsideBox.PaginationMainInsideBoxArrows {
+}
+
+@media (max-width: 768px) {
+ .PaginationMainInsideBox.PaginationMainInsideBoxArrows {
+ order: 2;
+ flex-grow: 1;
+ }
+}
+
+.PaginationMainInsideBox:hover {
+ transition: ease 0.4s;
+ text-decoration: unset;
+ color: unset;
+ background: linear-gradient(to top right, #232323, #262626, #232323);
+ box-shadow: 0 0 16px 0 rgba(0,0,0,0.1);
+ transform: scale(1.01);
+ border: solid 1px rgba(255,255,255,0.1);
+ color: rgba(255,255,255,0.85);
+}
+
+.PaginationMainInsideBox:active {
+ transition: ease 0.1s;
+ transform: scale(0.98);
+}
+
+.PaginationMainInsideBox.PMIBActive {
+ transition: ease 0.4s;
+ text-decoration: unset;
+ color: unset;
+ transform: scale(1.01);
+ border: solid 1px rgba(255,255,255,0.1);
+ color: rgba(255,255,255,0.75);
+}
+
+.PMIBDots {
+ border: unset;
+ background: unset;
+ box-shadow: unset;
+}
+
+.PaginationMainInsideBoxGroup {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ grid-gap: 10px;
+}
+
+@media (max-width: 768px) {
+ .PaginationMainInsideBoxGroup {
+ width: 100%;
+ order: 1;
+ justify-content: space-around;
+ }
+}
+
diff --git a/src/styles/search.css b/src/styles/search.css
new file mode 100644
index 0000000..9c33a2e
--- /dev/null
+++ b/src/styles/search.css
@@ -0,0 +1,108 @@
+.SearchMain {
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ max-width: 300px;
+}
+
+@media (max-width: 768px) {
+ .SearchMain {
+ max-width: unset;
+ }
+}
+
+.SearchMainInside {
+ width: 100%;
+ padding: 10px;
+ display: flex;
+ flex-direction: row;
+ justify-content: end;
+ align-items: center;
+ background: linear-gradient(to top right, #262626, #292929, #262626);
+ border-radius: 15px;
+ box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
+}
+
+.SearchMainInsideWrapper {
+ display: grid;
+ grid-template-columns: 1.65fr 0.35fr;
+ justify-content: end;
+ align-items: center;
+ height: 100%;
+ position: relative;
+ overflow: hidden;
+ border-radius: 10px;
+ background: rgba(0,0,0,0.1);
+ width: 100%;
+ grid-gap: 0;
+}
+
+.SMIWInput {
+ outline: unset;
+ border: unset;
+ height: 100%;
+ width: 100%;
+ padding: 10px;
+ background: rgba(0,0,0,0);
+ overflow: hidden;
+ border-radius: 10px 0 0 10px;
+ color: rgba(255,255,255,0.75);
+ box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1);
+}
+
+.SMIWInput:focus {
+ background: rgba(0,0,0,0.05);
+}
+
+.btnMain.SMIWButton {
+ transition: ease 0.4s;
+ color: rgba(255,255,255,0.15);
+ border: unset;
+ outline: unset;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background: rgba(255,255,255,0);
+ border-radius: 0;
+ border-left: solid 1px rgba(255,255,255,0.05);
+ height: 100%;
+ padding: 10px;
+}
+
+.btnMain.SMIWButton:focus {
+ transition: ease 0.4s;
+ color: rgba(255,255,255,0.5);
+ border: unset;
+ outline: unset;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background: linear-gradient(to top right, #2f2f2f, #303030, #2f2f2f);
+ border-radius: 0;
+ border-left: solid 1px rgba(255,255,255,0);
+ box-shadow: 0 0 8px 0 rgba(0,0,0,0.25);
+}
+
+.SMIWInput:focus + .SMIWButton {
+ background: rgba(0,0,0,0.05);
+ background: linear-gradient(to top right, #2f2f2f, #303030, #2f2f2f);
+}
+
+.SearchMainWrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: end;
+}
+
+@media (max-width: 768px) {
+ .SearchMainWrapper {
+ flex-direction: column;
+ grid-gap: 15px;
+ }
+}
+