fix: Course Page & Card

src/app/page.tsx

@@ -1,7 +1,14 @@
 import { MyCourses } from '@/components/MyCourses';
 import LandingPage from '@/components/landing/landing-page';
 import { authOptions } from '@/lib/auth';
+import { cn } from '@/lib/utils';
 import { getServerSession } from 'next-auth';
+import { Poppins } from 'next/font/google';
+
+const rs = Poppins({
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  subsets: ['latin'],
+});
 
 const getUserDetails = async () => {
   const session = await getServerSession(authOptions);
@@ -13,12 +20,28 @@ export default async function Home() {
 
   if (session?.user) {
     return (
-      <main className="max-w-screen-xl flex-col flex text-lg mx-auto">
-        <div className="text-2xl">Your courses</div>
+      <main className="max-w-screen-xl flex-col flex text-lg mx-auto pt-10 pb-6">
+        <div className="px-6 max-w-2xl antialiased">
+          <h1
+            className={cn(
+              'text-2xl font-semibold text-neutral-800 dark:text-neutral-200 md:text-3xl mb-2',
+              rs.className,
+            )}
+          >
+            Courses
+          </h1>
+          <p
+            className={cn(
+              'font-medium md:text-lg text-neutral-600 dark:text-neutral-300',
+              rs.className,
+            )}
+          >
+            List of purchased courses, click on any of them to navigate through
+            curriculum, access course material, watch lectures and much more.
+          </p>
+        </div>
 
         <MyCourses />
-
-        <br />
       </main>
     );
   }

src/components/CourseCard.tsx

@@ -1,5 +1,7 @@
 'use client';
 import { Course } from '@/store/atoms';
+import { Button } from './ui/button';
+import { ChevronRight } from 'lucide-react';
 
 export const CourseCard = ({
   course,
@@ -10,23 +12,37 @@ export const CourseCard = ({
 }) => {
   return (
     <div
-      className="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
+      className="max-w-full flex flex-col md:flex-row items-center bg-slate-100 md:border rounded-lg shadow-lg dark:bg-gradient-to-t md:dark:bg-gradient-to-l dark:from-slate-900 dark:to-slate-800"
       onClick={() => {
         onClick();
       }}
     >
-      <img src={course.imageUrl} alt={course.title} className="rounded-md" />
       <div className="p-2">
-        <div className="flex justify-between">
-          <div className="mt-4 mb-2">{course.title} Cohort</div>
-        </div>
-        <div>
-          <button
-            type="button"
-            className="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 w-full"
-          >
-            View Content
-          </button>
+        <img
+          src={course.imageUrl}
+          alt={course.title}
+          className="rounded-t-md md:rounded-l-md md:rounded-r-none md:max-w-md"
+        />
+      </div>
+
+      <div className="px-6 py-2 w-full h-full">
+        <div className="flex flex-col w-full h-full items-start justify-between md:py-4">
+          <div className="w-full items-start mb-3">
+            <h2 className="mb-0 md:mb-2 dark:text-neutral-100 text-neutral-800 text-xl sm:text-3xl font-semibold">
+              {course.title} Cohort
+            </h2>
+
+            <p className="dark:text-neutral-200 text-neutral-700 font-medium">
+              {course.description}
+            </p>
+          </div>
+
+          <div className="w-full flex justify-end pb-2 md:pb-0">
+            <Button className="group">
+              Explore Content{' '}
+              <ChevronRight className="h-4 w-4 ml-1 group-hover:translate-x-1 transition" />
+            </Button>
+          </div>
         </div>
       </div>
     </div>
@@ -36,12 +52,7 @@ export const CourseCard = ({
 export const CourseSkeleton = () => {
   return (
     <div className="animate-pulse">
-      <div className="rounded-md bg-gray-400 h-56"></div>
-      <div className="flex-1 space-y-4 py-2">
-        <div className="space-y-6">
-          <div className="h-4 bg-gray-400 rounded w-4/6"></div>
-        </div>
-      </div>
+      <div className="rounded-md bg-slate-50 dark:bg-slate-900 h-64"></div>
     </div>
   );
 };

src/components/Courses.tsx

@@ -7,7 +7,7 @@ import { useRouter } from 'next/navigation';
 export const Courses = ({ courses }: { courses: Course[] }) => {
   const router = useRouter();
   return (
-    <div className="max-w-screen-xl justify-between mx-auto p-4 cursor-pointer grid grid-cols-1 gap-5 md:grid-cols-3">
+    <div className="max-w-screen-xl w-full mx-auto py-6 px-6 cursor-pointer grid grid-rows-1 gap-5 md:grid-rows-3">
       {courses?.map((course) => (
         <CourseCard
           course={course}