feat: implemented games page

src/components/GameCard.tsx

@@ -0,0 +1,21 @@
+import '../styles/cardGames.css'
+
+type GameCardProps = {
+  backgroundLink: string
+}
+
+export const GameCard = ({ backgroundLink }: GameCardProps) => {
+  return (
+    <a className='cardGameMainWrapperLink' href='search.html'>
+      <div
+        className='cardGameMain'
+        style={{
+          background: `url("${backgroundLink}") center / cover no-repeat`
+        }}
+      ></div>
+      <div className='cardGameMainTitle'>
+        <p>This is a game title, the best game title</p>
+      </div>
+    </a>
+  )
+}

src/layout/header.tsx

@@ -1,6 +1,8 @@
 import navStyles from '../styles/nav.module.scss'
 import mainStyles from '../styles//main.module.scss'
 import { Banner } from '../components/Banner'
+import { Link } from 'react-router-dom'
+import { appRoutes } from '../routes'
 
 export const Header = () => {
   return (
@@ -10,14 +12,17 @@ export const Header = () => {
         <div className={mainStyles.ContainerMain}>
           <div className={navStyles.NavMainTopInside}>
             <div className={navStyles.NMTI_Sec}>
-              <a className={navStyles.NMTI_Sec_HomeLink} href='index.html'>
+              <Link
+                to={appRoutes.index}
+                className={navStyles.NMTI_Sec_HomeLink}
+              >
                 <div className={navStyles.NMTI_Sec_HomeLink_Logo}>
                   <img
                     className={navStyles.NMTI_Sec_HomeLink_LogoImg}
                     src='assets/img/DEG%20Mods%20Logo%20With%20Text.svg'
                   />
                 </div>
-              </a>
+              </Link>
             </div>
             <div className={navStyles.NMTI_Sec}>
               <div className={navStyles.NMTI_SecInside}>
@@ -92,18 +97,30 @@ export const Header = () => {
       <div className={navStyles.NavMainBottom}>
         <div className={mainStyles.ContainerMain}>
           <div className={navStyles.NavMainBottomInside}>
-            <a className={navStyles.NavMainBottomInsideLink} href='games.html'>
+            <Link
+              to={appRoutes.games}
+              className={navStyles.NavMainBottomInsideLink}
+            >
               Games
-            </a>
+            </Link>
-            <a className={navStyles.NavMainBottomInsideLink} href='mods.html'>
+            <Link
+              to={appRoutes.mods}
+              className={navStyles.NavMainBottomInsideLink}
+            >
               Mods
-            </a>
+            </Link>
-            <a className={navStyles.NavMainBottomInsideLink} href='about.html'>
+            <Link
+              to={appRoutes.about}
+              className={navStyles.NavMainBottomInsideLink}
+            >
               About
-            </a>
+            </Link>
-            <a className={navStyles.NavMainBottomInsideLink} href='blog.html'>
+            <Link
+              to={appRoutes.blog}
+              className={navStyles.NavMainBottomInsideLink}
+            >
               Blog
-            </a>
+            </Link>
           </div>
         </div>
       </div>

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 (
+    <div className='InnerBodyMain'>
+      <div className='ContainerMain'>
+        <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
+          <div className='IBMSecMain'>
+            <div className='SearchMainWrapper'>
+              <div className='IBMSMTitleMain'>
+                <h2 className='IBMSMTitleMainHeading'>Games</h2>
+              </div>
+              <div className='SearchMain'>
+                <div className='SearchMainInside'>
+                  <div className='SearchMainInsideWrapper'>
+                    <input type='text' className='SMIWInput' />
+                    <button className='btn btnMain SMIWButton' type='button'>
+                      <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        viewBox='0 0 512 512'
+                        width='1em'
+                        height='1em'
+                        fill='currentColor'
+                      >
+                        <path d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'></path>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className='IBMSecMain IBMSMListWrapper'>
+            <div className='IBMSMList IBMSMListFeaturedAlt'>
+              <GameCard backgroundLink='https://m.media-amazon.com/images/M/MV5BZTRiNTgxMjQtNDE3OS00YTg4LTg3NTItY2EyNGUzYjAzZGZmXkEyXkFqcGdeQXVyMTI0MzI0MzE4._V1_FMjpg_UX1000_.jpg' />
+              <GameCard backgroundLink='https://upload.wikimedia.org/wikipedia/en/0/0c/Witcher_3_cover_art.jpg' />
+              <GameCard backgroundLink='https://cdn2.steamgriddb.com/file/sgdb-cdn/grid/9153bb77795515274c2be61ccc59c952.jpg' />
+              <GameCard backgroundLink='https://static.trueachievements.com/boxart/Game_12493.jpg' />
+              <GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
+              <GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
+              <GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
+              <GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
+              <GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
+              <GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
+            </div>
+          </div>
+          <div className='IBMSecMain'>
+            <div className='PaginationMain'>
+              <div className='PaginationMainInside'>
+                <a
+                  className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
+                  href='#'
+                >
+                  <i className='fas fa-chevron-left'></i>
+                </a>
+                <div className='PaginationMainInsideBoxGroup'>
+                  <a className='PaginationMainInsideBox PMIBActive' href='#'>
+                    <p>1</p>{' '}
+                  </a>
+                  <a className='PaginationMainInsideBox' href='#'>
+                    <p>2</p>{' '}
+                  </a>
+                  <a className='PaginationMainInsideBox' href='#'>
+                    <p>3</p>
+                  </a>
+                  <p className='PaginationMainInsideBox PMIBDots'>...</p>
+                  <a className='PaginationMainInsideBox' href='#'>
+                    <p>8</p>
+                  </a>
+                </div>
+                <a
+                  className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
+                  href='#'
+                >
+                  <i className='fas fa-chevron-right'></i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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 = () => {
               <h2 className='IBMSMTitleMainHeading'>Cool Games</h2>
             </div>
             <div className='IBMSMList IBMSMListFeaturedAlt'>
-              <GameCard backgroungLink='https://m.media-amazon.com/images/M/MV5BZTRiNTgxMjQtNDE3OS00YTg4LTg3NTItY2EyNGUzYjAzZGZmXkEyXkFqcGdeQXVyMTI0MzI0MzE4._V1_FMjpg_UX1000_.jpg' />
+              <GameCard backgroundLink='https://m.media-amazon.com/images/M/MV5BZTRiNTgxMjQtNDE3OS00YTg4LTg3NTItY2EyNGUzYjAzZGZmXkEyXkFqcGdeQXVyMTI0MzI0MzE4._V1_FMjpg_UX1000_.jpg' />
-              <GameCard backgroungLink='https://upload.wikimedia.org/wikipedia/en/0/0c/Witcher_3_cover_art.jpg' />
+              <GameCard backgroundLink='https://upload.wikimedia.org/wikipedia/en/0/0c/Witcher_3_cover_art.jpg' />
-              <GameCard backgroungLink='https://cdn2.steamgriddb.com/file/sgdb-cdn/grid/9153bb77795515274c2be61ccc59c952.jpg' />
+              <GameCard backgroundLink='https://cdn2.steamgriddb.com/file/sgdb-cdn/grid/9153bb77795515274c2be61ccc59c952.jpg' />
-              <GameCard backgroungLink='https://static.trueachievements.com/boxart/Game_12493.jpg' />
+              <GameCard backgroundLink='https://static.trueachievements.com/boxart/Game_12493.jpg' />
-              <GameCard backgroungLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
+              <GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
             </div>
             <div className='IBMSMAction'>
               <a
@@ -212,26 +212,6 @@ export const HomePage = () => {
   )
 }
 
-type GameCardProps = {
-  backgroungLink: string
-}
-
-const GameCard = ({ backgroungLink }: GameCardProps) => {
-  return (
-    <a className='cardGameMainWrapperLink' href='search.html'>
-      <div
-        className='cardGameMain'
-        style={{
-          background: `url("${backgroungLink}") center / cover no-repeat`
-        }}
-      ></div>
-      <div className='cardGameMainTitle'>
-        <p>This is a game title, the best game title</p>
-      </div>
-    </a>
-  )
-}
-
 type ModCardProps = {
   backgroundLink: string
 }

src/routes/index.tsx

@@ -1,8 +1,13 @@
+import { GamesPage } from '../pages/games'
 import { HomePage } from '../pages/home'
 
-export const appRoutes: Record<string, string> = {
+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: <HomePage />
+  },
+  {
+    path: appRoutes.games,
+    element: <GamesPage />
+  },
+  {
+    path: appRoutes.mods,
+    element: <HomePage />
+  },
+  {
+    path: appRoutes.about,
+    element: <HomePage />
+  },
+  {
+    path: appRoutes.blog,
+    element: <HomePage />
   }
 ]

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;
+  }
+}
+

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;
+  }
+}
+