fix: Landing page Image & Course card UI

src/components/3dcard.tsx

@@ -50,10 +50,7 @@ export const CardContainer = ({
   return (
     <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
       <div
-        className={cn(
-          'py-20 flex items-center justify-center',
-          containerClassName,
-        )}
+        className={cn('flex items-center justify-center', containerClassName)}
         style={{
           perspective: '1000px',
         }}

src/components/CourseCard.tsx

@@ -18,25 +18,17 @@ export const CourseCard = ({
         onClick();
       }}
     >
-      <div className="relative">
-        {course.totalVideos !== undefined &&
-          course.totalVideosWatched !== undefined && (
-          <PercentageComplete
-            percent={Math.ceil(
-              (course.totalVideosWatched / course.totalVideos) * 100,
-            )}
-          />
-        )}
-        <div className="p-2">
-          <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="p-2">
+        <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="px-4 md: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">
@@ -48,11 +40,22 @@ export const CourseCard = ({
             </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 className="w-full flex items-center justify-between pb-2 md:pb-0">
+            {course.totalVideos !== undefined &&
+              course.totalVideosWatched !== undefined && (
+              <PercentageComplete
+                percent={Math.ceil(
+                  (course.totalVideosWatched / course.totalVideos) * 100,
+                )}
+              />
+            )}
+
+            <div className="w-full flex justify-end">
+              <Button className="group">
+                Explore Content
+                <ChevronRight className="h-4 w-4 ml-1 group-hover:translate-x-1 transition" />
+              </Button>
+            </div>
           </div>
         </div>
       </div>

src/components/PercentageComplete.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-
 const PercentageComplete = ({ percent }: { percent: number }) => {
   return (
     <div
-      className={`m-1 ${percent === 100 ? 'bg-green-300' : 'bg-white'} text-xs absolute top-2 right-2 text-[#1D4ED8] border-[#1D4ED8] border py-1 px-2 rounded-full font-bold`}
+      className={`${percent === 100 ? 'text-green-500' : 'text-red-500'} w-full text-sm flex items-center justify-center py-1 px-2 rounded-full font-semibold`}
     >
-      <div>{`${percent}% completed`}</div>
+      <div className="w-full">{`${percent}% completed`}</div>
     </div>
   );
 };

src/components/landing/snaps-section/platform/platform-section.tsx

@@ -12,7 +12,7 @@ const PlatformSection = () => {
         {/* // <CardBody className="relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-full sm:w-[30rem] h-auto rounded-xl p-6 border  "> */}
         <div className="w-full flex items-center justify-center my-20">
           <div className="mx-2 p-3 md:p-6 bg-gradient-to-t from-slate-300 dark:from-slate-700 to-slate-400 dark:to-slate-600 rounded-xl md:rounded-2xl border shadow-xl">
-            <CardItem translateZ="100" className="w-full mt-4">
+            <CardItem translateZ="100" className="w-full">
               <Image
                 src={platform}
                 alt={'platform'}