Add CSS games subcategory under Frontend category

components/TopBar/CategoryDescriptions.ts

@@ -12,6 +12,8 @@ const categoryDescriptions: CategoryDescriptions = {
     'Colors mean the aspects of the appearance of objects and light sources that may be described in terms of hue, lightness, and saturation',
   'design-inspiration':
     'The right kind of inspiration will always help you come up with creative and unique ideas for your projects but sometimes you need some help getting inspired. Luckily, there are a TON of great resources for design inspiration.',
+  'css-games':
+    'CSS games are a fun way to learn and practice CSS. They are a great way to learn new CSS properties and techniques, and they can help you improve your skills in a fun and interactive way.',
   fonts:
     'A font is a graphical representation of text that may include a different typeface, point size, weight, color, or design. Fonts are text characters of different types and sizes. They help designers convey interface content intuitively and guide web or mobile app users to interact with the interface smoothly. The term “font” actually refers to a set of graphics that correspond to some or all of the Unicode glyphs',
   icons:

database/data.ts

@@ -14,6 +14,7 @@ export const sidebarData: ISidebar[] = [
       { name: 'images', url: '/images', resources: DB.images },
       { name: 'fonts', url: '/fonts', resources: DB.fonts },
       { name: 'colors', url: '/colors', resources: DB.colors },
+      { name: 'css games', url: '/css-games', resources: DB.cssGames },
       { name: 'react', url: '/react', resources: DB.react },
       {
         name: 'illustrations',
@@ -325,7 +326,7 @@ export const sidebarData: ISidebar[] = [
     subcategory: [
       { name: 'Platforms', url: '/cp-platforms', resources: DB.cpPlatforms },
       { name: 'Tutorials', url: '/cp-tutorials', resources: DB.cpTutorials },
-      { name: 'Helpers', url: '/cp-helpers', resources: DB.cpHelpers }
+      { name: 'Helpers', url: '/cp-helpers', resources: DB.cpHelpers },
     ],
   },
   {

database/frontend/css-games.json

@@ -0,0 +1,30 @@
+[
+  {
+    "name": "Coding Fantasy",
+    "description": "An innovative platform that transforms the process of learning code into an engaging and enjoyable experience.",
+    "url": "https://codingfantasy.com/",
+    "category": "frontend",
+    "subcategory": "css-games"
+  },
+  {
+    "name": "Css Grid Garden",
+    "description": "An interactive game designed to help you learn CSS grid layout. In this delightful game, you’ll cultivate a virtual carrot garden using CSS code.",
+    "url": "https://cssgridgarden.com/",
+    "category": "frontend",
+    "subcategory": "css-games"
+  },
+  {
+    "name": "Flexbox Froggy",
+    "description": "An engaging game designed to help you master CSS flexbox. In this delightful challenge, your mission is to guide Froggy and friends to their lilypads by writing CSS code.",
+    "url": "https://flexboxfroggy.com/",
+    "category": "frontend",
+    "subcategory": "css-games"
+  },
+  {
+    "name": "Flukeout",
+    "description": "An interactive game intertwining CSS learning with culinary creativity. As you advance, face CSS selector challenges. Your mission? Articulate precise CSS code for delectable outcomes.",
+    "url": "https://flukeout.github.io/",
+    "category": "frontend",
+    "subcategory": "css-games"
+  }
+]

database/index.ts

@@ -3,6 +3,7 @@ export { default as accessibility } from './frontend/accessibility.json'
 export { default as angular } from './frontend/angular.json'
 export { default as animations } from './frontend/animations.json'
 export { default as colors } from './frontend/colors.json'
+export { default as cssGames } from './frontend/css-games.json'
 export { default as designInspirations } from './frontend/design-inspirations.json'
 export { default as fonts } from './frontend/fonts.json'
 export { default as icons } from './frontend/icons.json'

public/sitemap.xml

@@ -24,6 +24,11 @@
         <lastmod>2023-06-28T21:40:52+00:00</lastmod>
         <priority>0.8</priority>
     </url>
+    <url>
+        <loc>https://www.linkshub.dev/css-games</loc>
+        <lastmod>2023-06-28T21:40:52+00:00</lastmod>
+        <priority>0.8</priority>
+    </url>
     <url>
         <loc>https://www.linkshub.dev/design-inspiration</loc>
         <lastmod>2023-06-28T21:40:52+00:00</lastmod>