feat: improve visuals

Author: prokopsimek

src/app/components/Navigation.tsx

@@ -30,15 +30,12 @@ export default function Navigation({ showBack = true }: NavigationProps) {
               Topics
             </Link>
 
-            {showBack && (
-              <button
-                type="button"
-                onClick={() => router.back()}
-                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter"
-              >
-                Back
-              </button>
-            )}
+            <Link
+              href="/about"
+              className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter"
+            >
+              About
+            </Link>
 
           </div>
           <Link href="https://dxheroes.io" target="_blank">

src/app/topics/[id]/questions/[difficulty]/QuestionsPage.tsx

@@ -5,9 +5,9 @@ import { topics } from '../../../../constants/topics';
 import type { TopicId, Difficulty } from '../../../../constants/topics';
 
 const difficultyClasses = {
-  beginner: 'text-electric-violet bg-electric-violet',
-  intermediate: 'text-purple bg-purple',
-  advanced: 'text-turquoise bg-turquoise',
+  beginner: 'text-electric-violet border-electric-violet',
+  intermediate: 'text-purple border-purple',
+  advanced: 'text-turquoise border-turquoise',
 } as const;
 
 const difficultyNumbers = {
@@ -19,7 +19,7 @@ const difficultyNumbers = {
 export default function QuestionsPage(props: { id: string, difficulty: Difficulty, questions: string[] }) {
   const { id, difficulty, questions } = props;
   const topic = topics[id as TopicId];
-  const [textColorClass, bgColorClass] = difficultyClasses[difficulty].split(' ');
+  const [textColorClass] = difficultyClasses[difficulty].split(' ');
 
   if (!topic) {
     return null;
@@ -28,17 +28,17 @@ export default function QuestionsPage(props: { id: string, difficulty: Difficult
   return (
     <div className="min-h-screen bg-gray-50">
       <div className="mx-auto max-w-2xl px-4 py-12">
-        <div className="bg-white text-black p-6 sm:p-12 rounded-lg shadow-lg relative">
+        <div className="bg-white text-black p-6 sm:p-12 rounded-lg shadow-lg relative border-2 border-opacity-50">
           <span className={`absolute top-4 sm:top-8 right-4 sm:right-8 text-3xl sm:text-4xl font-staatliches opacity-90 sm:opacity-100 ${textColorClass}`}>
             {difficultyNumbers[difficulty]}
           </span>
           <h1 className={`text-2xl sm:text-4xl font-staatliches mb-8 sm:mb-12 max-w-[80%] leading-tight whitespace-pre-line ${textColorClass}`}>
             {topic.title}
           </h1>
           <ul className="space-y-6 sm:space-y-8 font-inter">
-            {questions.map((question, i) => (
-              <li key={`${id}-${difficulty}-q-${i}`} className="flex items-start gap-3 sm:gap-4">
-                <span className={`w-2.5 sm:w-3 h-2.5 sm:h-3 rounded-full flex-shrink-0 mt-2 ${bgColorClass}`} />
+            {questions.map((question) => (
+              <li key={`${id}-${difficulty}-q-${question.slice(0, 20)}`} className="flex items-start gap-3 sm:gap-4">
+                <span className={`w-2.5 sm:w-3 h-2.5 sm:h-3 rounded-full flex-shrink-0 mt-2 ${difficultyClasses[difficulty].replace('text-', 'bg-')}`} />
                 <span className="text-lg sm:text-xl leading-relaxed">{question}</span>
               </li>
             ))}