UI improvements

Author: sadanandpai

web/src/app/app.css

@@ -0,0 +1,16 @@
+.cards.cards {
+   gap: 2rem;
+}
+
+.card span {
+  display: flex;
+  justify-content: center;
+}
+
+.dark .card  {
+  border-color: rgb(150, 150, 150);
+}
+
+.dark .card:hover {
+  border-color: white;
+}

web/src/app/challenges/async/page.mdx

@@ -1,3 +1,7 @@
+export const metadata = {
+  title: "Async | Challenges",
+}
+
 ### 1. Print "Hello, world" with a delay of 3 seconds
 
 - setTimeout takes a function as the 1st argument and optional timeout delay & list of values as the function parameters

web/src/app/challenges/collections/page.mdx

@@ -1,3 +1,7 @@
+export const metadata = {
+  title: "Collections | Challenges",
+}
+
 ### 1. Write a function which can concatenate 2 arrays. If only one array is passed it will duplicate it
 
 - Function can take 2 arguments which concatenates arrays

web/src/app/challenges/dom/page.mdx

@@ -1,3 +1,7 @@
+export const metadata = {
+  title: "DOM | Challenges",
+}
+
 ### 1. Show the different ways of selecting an element from DOM
 
 - The element can be selected using its tagname, id, attribute, value etc

web/src/app/challenges/event/page.mdx

@@ -1,3 +1,7 @@
+export const metadata = {
+  title: "Event | Challenges",
+}
+
 ### 1. Handling a Click Event to Change Text Content
 
 - In JavaScript, you can add event listeners to elements to respond to various events like mouse clicks, keyboard input, etc.

web/src/app/challenges/functions/page.mdx

@@ -1,3 +1,7 @@
+export const metadata = {
+  title: "Functions | Challenges",
+}
+
 ### 1. Design a Calculator interface for 2 number inputs which can perform sum, difference, product and dividend whenever invoked on the same interface
 
 ```js copy

web/src/app/challenges/objects/page.mdx

@@ -1,3 +1,7 @@
+export const metadata = {
+  title: "Objects | Challenges",
+}
+
 ### 1. Display all the keys and values of a nested object
 
 - `typeof` operator on value gives the type of value

web/src/app/challenges/primitives/page.mdx

@@ -1,3 +1,7 @@
+export const metadata = {
+  title: "Primitives | Challenges",
+}
+
 ### 1. Swap two integers present in variables num1 and num2 without using temporary variable
 
 - The swapping of 2 variables is possible with simple Destructuring assignment using array

web/src/app/concepts/async/page.mdx

@@ -1,3 +1,7 @@
+export const metadata = {
+  title: "Async | Concepts",
+}
+
 ### 1. Show the execution of 3 asynchronous block of code, one after the other in sequence
 
 - The asynchronous block of code can be a function which executes asynchronously

web/src/app/concepts/collections/page.mdx

@@ -1,3 +1,7 @@
+export const metadata = {
+  title: "Collections | Concepts"
+}
+
 ### 1. Show the different ways of creating an array
 
 - Arrays are the collection of values in javascript. Array is a special type of object in JavaScript