feat(ui): add blurred gradient backgrounds to course and track pages

Introduce fixed blurred gradient overlays to the course overview and 
track pages to enhance visual appeal and maintain design consistency. 
Remove the previously commented out gradient from the catalog page as it
is no longer used.
Also update the track page’s dark mode background and border colors to
darker shades for improved contrast and visual coherence with the new
gradients.

Author: rohitpaulk

app/templates/catalog.hbs

@@ -19,15 +19,6 @@
         <div class="absolute top-24 left-24 rounded-full h-60 w-full bg-purple-600"></div>
       </div>
     </div>
-
-    {{! Center blurred gradient }}
-    {{!-- <div class="w-1/2 h-60 absolute top-0 left-1/4 right-1/4 opacity-50 animate-spin-slow filter blur-[100px]">
-      <div class="relative">
-        <div class="rounded-full h-60 w-full bg-blue-600"></div>
-        <div class="absolute bottom-24 -left-24 rounded-full h-60 w-full bg-purple-700"></div>
-        <div class="absolute top-24 left-24 rounded-full h-60 w-full bg-purple-600"></div>
-      </div>
-    </div> --}}
   </div>
 </div>
 

app/templates/course-overview.hbs

@@ -1,5 +1,27 @@
 {{page-title this.model.course.name}}
 
+<div class="fixed inset-0 flex items-stretch justify-stretch pointer-events-none">
+  <div class="w-full relative overflow-hidden rounded-sm">
+    {{! Left blurred gradient }}
+    <div class="w-1/2 h-60 absolute -bottom-32 -left-1/4 opacity-50 animate-spin-slow filter blur-[100px]">
+      <div class="relative">
+        <div class="rounded-full h-60 w-full bg-purple-800"></div>
+        <div class="absolute bottom-24 -left-24 rounded-full h-60 w-full bg-red-800"></div>
+        <div class="absolute top-24 left-24 rounded-full h-60 w-full bg-purple-600"></div>
+      </div>
+    </div>
+
+    {{! Right blurred gradient }}
+    <div class="w-1/2 h-60 absolute -bottom-40 -right-1/4 opacity-50 animate-spin-slow filter blur-[100px]">
+      <div class="relative">
+        <div class="rounded-full h-60 w-full bg-blue-600"></div>
+        <div class="absolute bottom-24 -left-24 rounded-full h-60 w-full bg-blue-700"></div>
+        <div class="absolute top-24 left-24 rounded-full h-60 w-full bg-purple-600"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="container mx-auto lg:max-w-(--breakpoint-lg) pt-6 md:pt-10 pb-10 px-3 md:px-6">
   <CourseOverviewPage::Header @course={{this.model.course}} @language={{this.model.language}} class="mb-6 md:mb-10" />
 

app/templates/track.hbs

@@ -1,12 +1,34 @@
 {{page-title @model.language.name}}
 
+<div class="fixed inset-0 flex items-stretch justify-stretch pointer-events-none">
+  <div class="w-full relative overflow-hidden rounded-sm">
+    {{! Left blurred gradient }}
+    <div class="w-1/2 h-60 absolute -bottom-32 -left-1/4 opacity-50 animate-spin-slow filter blur-[100px]">
+      <div class="relative">
+        <div class="rounded-full h-60 w-full bg-purple-800"></div>
+        <div class="absolute bottom-24 -left-24 rounded-full h-60 w-full bg-red-800"></div>
+        <div class="absolute top-24 left-24 rounded-full h-60 w-full bg-purple-600"></div>
+      </div>
+    </div>
+
+    {{! Right blurred gradient }}
+    <div class="w-1/2 h-60 absolute -bottom-40 -right-1/4 opacity-50 animate-spin-slow filter blur-[100px]">
+      <div class="relative">
+        <div class="rounded-full h-60 w-full bg-blue-600"></div>
+        <div class="absolute bottom-24 -left-24 rounded-full h-60 w-full bg-blue-700"></div>
+        <div class="absolute top-24 left-24 rounded-full h-60 w-full bg-purple-600"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="container mx-auto lg:max-w-(--breakpoint-lg) px-3 md:px-6 py-6 md:py-10">
   <TrackPage::Header @language={{@model.language}} @courses={{this.sortedCourses}} />
 </div>
 
 <div class="h-px bg-gray-200 dark:bg-white/5 w-full"></div>
 
-<div class="bg-white dark:bg-gray-925">
+<div class="bg-white dark:bg-gray-950">
   <div class="container mx-auto lg:max-w-(--breakpoint-lg) px-3 md:px-6 py-6 md:py-10">
     <div class="flex items-start">
       <div class="grow">
@@ -18,7 +40,7 @@
           />
         {{/if}}
 
-        <div class="border-b border-gray-200 dark:border-gray-700 pb-1 mb-4 flex">
+        <div class="border-b border-gray-200 dark:border-gray-900 pb-1 mb-4 flex">
           <div class="text-2xl font-semibold text-gray-900 dark:text-gray-200">
             {{@model.language.name}}
             Challenges