feat: implemented blog page

src/components/BlogCard.tsx

@@ -0,0 +1,41 @@
+import '../styles/cardBlogs.css'
+
+type BlogCardProps = {
+  backgroundLink: string
+}
+
+export const BlogCard = ({ backgroundLink }: BlogCardProps) => {
+  return (
+    <a className='cardBlogMainWrapperLink' href='blog-inner.html'>
+      <div
+        className='cardBlogMain'
+        style={{
+          background: `url("${backgroundLink}") center / cover no-repeat`
+        }}
+      >
+        <div
+          className='cardBlogMainInside'
+          style={{
+            background:
+              'linear-gradient( rgba(255, 255, 255, 0) 0%, #232323 100%)'
+          }}
+        >
+          <h3
+            style={{
+              display: '-webkit-box',
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+              WebkitLineClamp: 2,
+              fontSize: '20px',
+              lineHeight: 1.5,
+              color: 'rgba(255, 255, 255, 0.75)',
+              textShadow: '0 0 8px rgba(0, 0, 0, 0.25)'
+            }}
+          >
+            This is a blog title, the best blog title in the world!
+          </h3>
+        </div>
+      </div>{' '}
+    </a>
+  )
+}

src/index.css

@@ -47,12 +47,6 @@ a:hover {
   color: #535bf2;
 }
 
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
 h1 {
   font-size: 3.2em;
   line-height: 1.1;

src/pages/blogs.tsx

@@ -0,0 +1,143 @@
+import { BlogCard } from '../components/BlogCard'
+import '../styles/filters.css'
+import '../styles/pagination.css'
+import '../styles/search.css'
+import '../styles/styles.css'
+
+export const BlogsPage = () => {
+  return (
+    <div className='InnerBodyMain'>
+      <div className='ContainerMain'>
+        <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
+          <div className='IBMSecMain'>
+            <div className='SearchMainWrapper'>
+              <div className='IBMSMTitleMain'>
+                <h2 className='IBMSMTitleMainHeading'>Blogs</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'>
+            <div className='FiltersMain'>
+              <div className='FiltersMainElement'>
+                <div className='dropdown dropdownMain'>
+                  <button
+                    className='btn dropdown-toggle btnMain btnMainDropdown'
+                    aria-expanded='false'
+                    data-bs-toggle='dropdown'
+                    type='button'
+                  >
+                    Latest
+                  </button>
+                  <div className='dropdown-menu dropdownMainMenu'>
+                    <a className='dropdown-item dropdownMainMenuItem' href='#'>
+                      Latest
+                    </a>
+                    <a className='dropdown-item dropdownMainMenuItem' href='#'>
+                      Oldest
+                    </a>
+                    <a className='dropdown-item dropdownMainMenuItem' href='#'>
+                      Best Rated
+                    </a>
+                    <a className='dropdown-item dropdownMainMenuItem' href='#'>
+                      Worst Rated
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <div className='FiltersMainElement'>
+                <div className='dropdown dropdownMain'>
+                  <button
+                    className='btn dropdown-toggle btnMain btnMainDropdown'
+                    aria-expanded='false'
+                    data-bs-toggle='dropdown'
+                    type='button'
+                  >
+                    Hide NSFW
+                  </button>
+                  <div className='dropdown-menu dropdownMainMenu'>
+                    <a className='dropdown-item dropdownMainMenuItem' href='#'>
+                      Hide NSFW
+                    </a>
+                    <a className='dropdown-item dropdownMainMenuItem' href='#'>
+                      Show NSFW
+                      <br />
+                    </a>
+                    <a className='dropdown-item dropdownMainMenuItem' href='#'>
+                      Only show NSFW
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className='IBMSecMain IBMSMListWrapper'>
+            <div className='IBMSMList'>
+              <BlogCard backgroundLink='https://image.nostr.build/d6af39fb1d47feaf09831ddf9d447ccc435ba10fcbb9b6d6e800390f6bbac851.png' />
+              <BlogCard backgroundLink='https://nichegamer.com/wp-content/uploads/2023/01/onimai-01-07-2023.jpg' />
+              <BlogCard backgroundLink='https://pbs.twimg.com/media/GDrRJOOXYAAeysT.jpg:large' />
+              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
+              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
+              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
+              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
+              <BlogCard 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,6 +1,6 @@
+import { BlogCard } from '../components/BlogCard'
 import { GameCard } from '../components/GameCard'
 import { ModCard } from '../components/ModCard'
-import '../styles/cardBlogs.css'
 import '../styles/cardLists.css'
 import '../styles/SimpleSlider.css'
 import '../styles/styles.css'
@@ -211,43 +211,3 @@ export const HomePage = () => {
     </div>
   )
 }
-
-type BlogCardProps = {
-  backgroundLink: string
-}
-
-const BlogCard = ({ backgroundLink }: BlogCardProps) => {
-  return (
-    <a className='cardBlogMainWrapperLink' href='blog-inner.html'>
-      <div
-        className='cardBlogMain'
-        style={{
-          background: `url("${backgroundLink}") center / cover no-repeat`
-        }}
-      >
-        <div
-          className='cardBlogMainInside'
-          style={{
-            background:
-              'linear-gradient( rgba(255, 255, 255, 0) 0%,          #232323 100%)'
-          }}
-        >
-          <h3
-            style={{
-              display: '-webkit-box',
-              WebkitBoxOrient: 'vertical',
-              overflow: 'hidden',
-              WebkitLineClamp: 2,
-              fontSize: '20px',
-              lineHeight: 1.5,
-              color: 'rgba(255, 255, 255, 0.75)',
-              textShadow: '0 0 8px rgba(0, 0, 0, 0.25)'
-            }}
-          >
-            This is a blog title, the best blog title in the world!
-          </h3>
-        </div>
-      </div>{' '}
-    </a>
-  )
-}

src/routes/index.tsx

@@ -1,3 +1,4 @@
+import { BlogsPage } from '../pages/blogs'
 import { GamesPage } from '../pages/games'
 import { HomePage } from '../pages/home'
 import { ModsPage } from '../pages/mods'
@@ -34,6 +35,6 @@ export const routes = [
   },
   {
     path: appRoutes.blog,
-    element: <HomePage />
+    element: <BlogsPage />
   }
 ]