Improve UI for course generator

src/components/GenerateCourse/AICourse.tsx

@@ -43,18 +43,15 @@ export function AICourse(props: AICourseProps) {
 
   return (
     <section className="flex flex-grow flex-col bg-gray-100">
-      <div className="container mx-auto flex max-w-3xl flex-col py-12">
-        <h1 className="mb-2 text-3xl font-bold">AI Course Generator</h1>
-        <p className="mb-6 text-gray-600">
-          Create personalized learning paths with AI
+      <div className="container mx-auto flex max-w-3xl flex-col py-24">
+        <h1 className="mb-2 text-center text-3xl font-bold">
+          AI Course Generator
+        </h1>
+        <p className="mb-6 text-center text-gray-600">
+          Enter a topic below to generate a course on it.
         </p>
 
-        <div className="rounded-md border border-gray-200 bg-white p-6">
-          <p className="mb-6 text-gray-600">
-            Enter a keyword or topic, and our AI will create a personalized
-            learning course for you.
-          </p>
-
+        <div className="rounded-lg border border-gray-200 bg-white p-6">
           <form
             className="flex flex-col gap-4"
             onSubmit={(e) => {
@@ -100,7 +97,7 @@ export function AICourse(props: AICourseProps) {
                     type="button"
                     onClick={() => setDifficulty(level)}
                     className={cn(
-                      'rounded-md border px-4 py-2 capitalize',
+                      'rounded-md border px-4 py-1 text-sm capitalize',
                       difficulty === level
                         ? 'border-gray-800 bg-gray-800 text-white'
                         : 'border-gray-200 bg-gray-100 text-gray-700 hover:bg-gray-200',
@@ -116,7 +113,7 @@ export function AICourse(props: AICourseProps) {
               type="submit"
               disabled={!keyword.trim()}
               className={cn(
-                'mt-2 flex items-center justify-center rounded-md px-4 py-2 font-medium text-white transition-colors',
+                'mt-2 flex items-center justify-center rounded-lg px-4 py-2 font-medium text-white transition-colors',
                 !keyword.trim()
                   ? 'cursor-not-allowed bg-gray-400'
                   : 'bg-black hover:bg-gray-800',
@@ -128,12 +125,8 @@ export function AICourse(props: AICourseProps) {
           </form>
         </div>
 
-        <div className="mt-8 min-h-[200px] rounded-lg border border-gray-200 bg-white p-6">
-          <h2 className="mb-4 text-lg font-semibold">Your Courses</h2>
-
-          {isUserAiCoursesLoading && (
-            <div className="h-[92px] animate-pulse rounded-lg border border-gray-200 bg-gray-200"></div>
-          )}
+        <div className="mt-8 min-h-[200px]">
+          <h2 className="mb-2 text-lg font-semibold">Your Courses</h2>
 
           {!isUserAiCoursesLoading && userAiCourses?.length === 0 && (
             <p className="text-gray-600">

src/components/GenerateCourse/AICourseCard.tsx

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