From 1980709f05169cccda660decfb3ae41863d5574e Mon Sep 17 00:00:00 2001
From: Mitch Chanza <mitch.chanza@gmail.com>
Date: Thu, 19 Sep 2024 06:26:47 +0200
Subject: [PATCH] update CardsHolder.tsx and QuizCards.tsx

---
 .../src/components/QuizCards/CardsHolder.tsx  |  2 +-
 .../src/components/QuizCards/QuizCards.tsx    | 87 ++++++++++++-------
 2 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/components/src/components/QuizCards/CardsHolder.tsx b/components/src/components/QuizCards/CardsHolder.tsx
index 3411f8a..4ca93b6 100644
--- a/components/src/components/QuizCards/CardsHolder.tsx
+++ b/components/src/components/QuizCards/CardsHolder.tsx
@@ -15,7 +15,7 @@ export const CardsHolder = ({ children }: { children: React.ReactNode }) => {
                     justifyContent: 'center'
                 }}
             >
-                <div className="p-4 m-6 rounded-lg shadow-md w-full bg-white">
+                <div className=" p-4 m-6  rounded-lg shadow-md w-full bg-white">
                     {children}
                 </div>
             </div>
diff --git a/components/src/components/QuizCards/QuizCards.tsx b/components/src/components/QuizCards/QuizCards.tsx
index 4ad88fd..6bc67a3 100644
--- a/components/src/components/QuizCards/QuizCards.tsx
+++ b/components/src/components/QuizCards/QuizCards.tsx
@@ -19,40 +19,63 @@ interface TestingCOProps {
 
 export const QuizCards: React.FC<TestingCOProps> = ({ files,url }) => {
   return (
-    <div className="p-16">
-      <div className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
+    <div className="sm:p-16 mx-auto max-w-7xl  2xl:max-w-screen-2xl ">
+      <div className="grid grid-cols-1 sm:gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
         {files.map((file) => (
-          <div
-            key={file.id}
-            className="relative group transition-transform transform hover:scale-105"
-          >
-            <Link href={`/${url}/${file.id}`}>
-              <div
-                className="aspect-h-7 aspect-w-10 block w-full overflow-hidden rounded-t-lg bg-gray-100 relative"
-                style={{ height: "200px" }}
-              >
-                <Image
-                  alt=""
-                  src={file.source}
-                  layout="fill"
-                  objectFit="cover"
-                  className="pointer-events-none transition-opacity duration-300 group-hover:greyscale"
-                />
-              </div>
-              <div
-                className="h-[16rem] rounded-lg flex items-center -mt-6 z-50 justify-center transition-transform duration-300 group-hover:translate-y-2"
-                style={{ backgroundColor: file.bgColor }} 
-              >
-                <div className="text-center">
-                  {file.title.split(" ").map((word, index) => (
-                    <p key={index} className="text-xl font-extrabold text-white">
-                      {word}
-                    </p>
-                  ))}
-                </div>
-              </div>
-            </Link>
+  <div
+    key={file.id}
+    className="relative group transition-transform transform hover:scale-105"
+  >
+    <Link href={`/${url}/${file.id}`}>
+      {/* Mobile View */}
+      <div
+        className="block sm:hidden w-full h-48 bg-cover bg-center relative rounded-t-lg"
+        style={{ backgroundImage: `url(${file.source})` }}
+      >
+        <div className="absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center">
+          <div className="text-center text-white px-4">
+            {file.title.split(" ").map((word, index) => (
+              <p key={index} className="text-lg font-bold">
+                {word}
+              </p>
+            ))}
           </div>
+        </div>
+      </div>
+      {/* Desktop View */}
+      <div
+        className="hidden sm:block sm:aspect-h-7 sm:aspect-w-10 w-full overflow-hidden rounded-t-lg bg-gray-100 relative"
+        style={{ height: "200px" }}
+      >
+        <Image
+          alt=""
+          src={file.source}
+          layout="fill"
+          objectFit="cover"
+          className="pointer-events-none transition-opacity duration-300 group-hover:greyscale"
+        />
+      </div>
+      <div
+        className="h-[16rem] hidden rounded-lg sm:flex items-center -mt-6 z-50 justify-center transition-transform duration-300 group-hover:translate-y-2 sm:bg-transparent"
+        style={{ backgroundColor: file.bgColor }} 
+      >
+        <div className="text-center sm:hidden">
+          {file.title.split(" ").map((word, index) => (
+            <p key={index} className="text-xl font-extrabold text-white">
+              {word}
+            </p>
+          ))}
+        </div>
+        <div className="hidden sm:block text-center">
+          {file.title.split(" ").map((word, index) => (
+            <p key={index} className="text-xl font-extrabold text-white">
+              {word}
+            </p>
+          ))}
+        </div>
+      </div>
+    </Link>
+  </div>
         ))}
       </div>
     </div>