Fix mistakes and refacctor

src/components/AITutor/AIExploreCourseListing.tsx

@@ -56,7 +56,7 @@ export function AIExploreCourseListing(props: AIExploreCourseListingProps) {
         courses &&
         courses.length > 0 &&
         !error && (
-          <div className="flex flex-col gap-2">
+          <div className="grid grid-cols-2 gap-2">
             {courses.map((course) => (
               <AICourseCard
                 key={course._id}

src/components/AITutor/AITutorSidebar.tsx

@@ -24,9 +24,9 @@ const sidebarItems = [
     icon: BookOpen,
   },
   {
-    key: 'stuff-picks',
-    label: 'Stuff Picks',
-    href: '/ai/stuff-picks',
+    key: 'staff-picks',
+    label: 'Staff Picks',
+    href: '/ai/staff-picks',
     icon: CircleDotIcon,
   },
   {

src/components/GenerateCourse/AICourseCard.tsx

@@ -38,7 +38,7 @@ export function AICourseCard(props: AICourseCardProps) {
     <div className="relative">
       <a
         href={`/ai/${course.slug}`}
-        className="hover:border-gray-3 00 group relative flex w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-4 text-left transition-all hover:bg-gray-50"
+        className="hover:border-gray-3 00 group relative flex w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-4 text-left transition-all hover:bg-gray-50 min-h-full "
       >
         <div className="flex items-center justify-between">
           <span

src/pages/ai/explore.astro

@@ -13,7 +13,7 @@ const ogImage = 'https://roadmap.sh/og-images/ai-tutor.png';
 >
   <AITutorLayout activeTab='explore' client:load>
     <section class='flex grow flex-col bg-gray-100'>
-      <div class='container mx-auto flex max-w-3xl flex-col py-10 max-sm:py-4'>
+      <div class='mx-auto w-full flex max-w-4xl flex-col py-10 max-sm:py-4'>
         <AIExploreCourseListing client:load />
       </div>
     </section>