refactor: update the hero section of category and subcategory

components/siddha-mala/categoryHero.jsx

@@ -25,43 +25,46 @@ const CategoryHero = ({ params }) => {
   const fallbackCategoryName = "Spiritual Essentials";
 
   return (
-    <section className="relative h-[50vh] md:h-[80vh] flex items-center justify-center overflow-hidden">
-      <div className="absolute inset-0 z-0">
-        <Image
-          src={`${
-            selectedCategory?.image
-              ? backendUrl + selectedCategory?.image
-              : "/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg"
-          }`}
-          alt="Category Background"
-          layout="fill"
-          objectFit="cover"
-          quality={100}
-          priority
-        />
-      </div>
+    <section className="relative min-h-[50vh] md:h-[80vh] py-8 md:py-0 flex items-center justify-center">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+          <div className="relative h-[250px] md:h-[500px] overflow-hidden rounded-lg shadow-xl">
+            <Image
+              src={`${
+                selectedCategory?.image
+                  ? backendUrl + selectedCategory?.image
+                  : "/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg"
+              }`}
+              alt="Category Background"
+              layout="fill"
+              objectFit="cover"
+              quality={100}
+              priority
+            />
+          </div>
+          <div className="text-start flex justify-start flex-col h-full">
+            <motion.h1
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+              className="text-2xl md:text-3xl font-bold text-black mb-4"
+            >
+              {selectedCategory?.category_name || fallbackCategoryName}
+            </motion.h1>
 
-      <div className="relative z-10 text-center px-6 md:px-12 max-w-3xl">
-        <motion.h1
-          initial={{ opacity: 0, y: -20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6 }}
-          className="text-4xl md:text-6xl font-bold text-white mb-4 drop-shadow-lg"
-        >
-          {selectedCategory?.category_name || fallbackCategoryName}
-        </motion.h1>
-
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.2 }}
-          className="text-lg md:text-xl text-gray-200 drop-shadow-md"
-          dangerouslySetInnerHTML={{
-            __html: cleanHTML(
-              selectedCategory?.descriptions || fallbackDescription
-            ),
-          }}
-        />
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+              className="text-black text-sm md:text-base"
+              dangerouslySetInnerHTML={{
+                __html: cleanHTML(
+                  selectedCategory?.descriptions || fallbackDescription
+                ),
+              }}
+            />
+          </div>
+        </div>
       </div>
     </section>
   );