Merge pull request #130 from Aman-Manwani/fixed_cards

fixed cards alignment
girlscript · Jun 21, 2023 · 1cfaffe · 1cfaffe
2 parents a644d11 + 0179f19
commit 1cfaffe
Showing 1 changed file with 21 additions and 18 deletions.
diff --git a/components/homepage/Card.js b/components/homepage/Card.js
@@ -1,29 +1,32 @@
 function Cards(props) {
   return (
-    <div className="dark:bg-black bg-white shadow-lg rounded-lg  h-fit my-1 px-1 w-560px md:w-1/2 lg:my-4 lg:px-4 lg:w-2/5">
-      <article className="overflow-hidden rounded-lg">
-        <header className="flex items-center p-2 md:p-4">
-          <h1 className="dark:text-white font-semibold text-3xl 1.875 rem 2.25 rem">
-            {props.title}
-          </h1>
-        </header>
-        <p className="dark:text-white text-grey-darker font-normal text-xl 1.25rem 1.75rem p-2 md:p-4">
-          {props.content}
-        </p>
+    <div className="dark:bg-black flex bg-white shadow-lg rounded-lg  h-500px my-1 px-1 lg:my-4 lg:px-4 w-full md:w-[48%]">
+      <article className="overflow-hidden rounded-lg flex justify-between flex-col">
+        <div>
+          <header className="flex items-center p-2 md:p-4">
+            <h1 className="dark:text-white font-semibold text-3xl 1.875 rem 2.25 rem">
+              {props.title}
+            </h1>
+          </header>
+          <p className="dark:text-white text-grey-darker font-normal text-xl 1.25rem 1.75rem p-2 md:p-4">
+            {props.content}
+          </p>
+        </div>
         <footer className="flex items-center justify-between leading-none p-2 md:p-4">
           <a
             className="w-full"
-            href={props.disabled?"#":props.link}
-            target={props.disabled?"":"_blank"}
+            href={props.disabled ? "#" : props.link}
+            target={props.disabled ? "" : "_blank"}
             rel="noreferrer"
           >
-            {!props.disabled?(<button className="dark:text-black bg-gradient-to-b from-primary_orange-0 to-orange-600 hover:bg-gradient-to-t hover:from-primary_orange-0 hover:to-orange-600 text-white w-full font-bold py-3 px-5 rounded mb-3">
-              {props.btntext}
-            </button>
-            ):(
+            {!props.disabled ? (
+              <button className="dark:text-black bg-gradient-to-b from-primary_orange-0 to-orange-600 hover:bg-gradient-to-t hover:from-primary_orange-0 hover:to-orange-600 text-white w-full font-bold py-3 px-5 rounded mb-3">
+                {props.btntext}
+              </button>
+            ) : (
               <button className="dark:text-black bg-gradient-to-b from-slate-600 to-orange-400 text-white w-full font-bold py-3 px-5 rounded mb-3">
-              {props.btntext}
-            </button>
+                {props.btntext}
+              </button>
             )}
           </a>
         </footer>