fix: height issue and the first Promotion card issue of getting rendered twice

Author: druvkotwani

client/src/app/components/PromotionCard.tsx

@@ -27,14 +27,14 @@ const option = [
 ];
 
 const PromotionCard = () => {
-  // State to hold the random index
+  // Use a static index initially, then randomize after hydration
   const [randomIndex, setRandomIndex] = useState(0);
 
-  // Effect to set random index on initial render
+  // Effect to randomize after hydration is complete
   useEffect(() => {
     const random = Math.floor(Math.random() * option.length);
     setRandomIndex(random);
-  }, []); // Empty dependency array ensures this effect runs only once
+  }, []);
 
   return (
     <Link
@@ -43,7 +43,7 @@ const PromotionCard = () => {
       target="_blank"
       className="hover:scale-105 transition-all ease-in-out duration-300 font-sourcecodepro "
     >
-      <div className="flex justify-betwen max-w-[400px] flex-col  items-center rounded h-[280px] border-2 border-[#f7f7f7] ">
+      <div className="flex justify-between max-w-[400px] flex-col items-center rounded min-h-[280px] max-h-[280px] border-2 border-[#f7f7f7] overflow-hidden">
         {/* Heading and Logo */}
         <div className="flex gap-1 xl:gap-4 items-center justify-between   ">
           <div className="flex items-center text-white justify-center px-4 py-2 w-full gap-2   rounded-md">

client/src/app/components/Skeleton.tsx

@@ -4,23 +4,45 @@ const Skeleton = () => {
   return (
     <div
       role="status"
-      className="max-w-[400px] lg:w-[400px] rounded min-h-[280px] p-4 border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700"
+      className="max-w-[400px] w-full px-8 pb-3 bg-[#0e0e0e] flex justify-center flex-col items-center rounded h-[280px] border-2 border-[#cecece] shadow animate-pulse"
     >
-      <div className="flex items-center justify-center h-48 mb-4 bg-gray-300 rounded dark:bg-gray-700">
-        <svg
-          className="w-10 h-10 text-gray-200 dark:text-gray-600"
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor"
-          viewBox="0 0 16 20"
-        >
-          <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z" />
-          <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z" />
-        </svg>
+      {/* Profile section skeleton */}
+      <div className="flex gap-1 xl:gap-4 items-center justify-between w-full mb-4">
+        <div className="flex items-center gap-2">
+          <div className="w-12 h-12 bg-gray-600 rounded-full"></div>
+          <div className="flex flex-col gap-1">
+            <div className="h-4 bg-gray-600 rounded w-20"></div>
+            <div className="h-3 bg-gray-600 rounded w-16"></div>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <div className="w-6 h-6 bg-gray-600 rounded"></div>
+          <div className="w-6 h-6 bg-gray-600 rounded"></div>
+          <div className="w-6 h-6 bg-gray-600 rounded"></div>
+        </div>
       </div>
-      <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full min-w-[300px]  mb-4"></div>
 
-      <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+      {/* Divider */}
+      <div className="h-[0.5px] bg-gray-600 w-full mb-4"></div>
+
+      {/* Stats section skeleton */}
+      <div className="flex gap-5 items-center justify-center">
+        <div className="w-16 h-16 bg-gray-600 rounded-full"></div>
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-2">
+            <div className="h-3 bg-gray-600 rounded w-12"></div>
+            <div className="h-2 bg-gray-600 rounded w-20"></div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="h-3 bg-gray-600 rounded w-16"></div>
+            <div className="h-2 bg-gray-600 rounded w-20"></div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="h-3 bg-gray-600 rounded w-12"></div>
+            <div className="h-2 bg-gray-600 rounded w-20"></div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };