chore: setup project for production

components/header/hover-content/HoverRudrakshaContent.jsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+
+const rudrakshaData = {
+  title: "Rudraksha",
+  subtitle: "Explore the World's largest collection of Authentic A+ Grade Gupta Rudraksha.",
+  buttonText: "View All Collection",
+  columns: [
+    [
+      { name: "Nirakar (0) Mukhi" },
+      { name: "1 Mukhi" },
+      { name: "2 Mukhi" },
+      { name: "3 Mukhi" },
+      { name: "4 Mukhi" },
+      { name: "5 Mukhi" },
+      { name: "6 Mukhi" }
+    ],
+    [
+      { name: "7 Mukhi" },
+      { name: "8 Mukhi" },
+      { name: "9 Mukhi" },
+      { name: "10 Mukhi" },
+      { name: "11 Mukhi" },
+      { name: "12 Mukhi" },
+      { name: "13 Mukhi" }
+    ],
+    [
+      { name: "14 Mukhi" },
+      { name: "15 Mukhi" },
+      { name: "16 Mukhi" },
+      { name: "17 Mukhi" },
+      { name: "18 Mukhi" },
+      { name: "19 Mukhi" },
+      { name: "20 Mukhi" }
+    ],
+    [
+      { name: "21 Mukhi" },
+      { name: "22 Mukhi" },
+      { name: "23 Mukhi" },
+      { name: "24 Mukhi" },
+      { name: "25 Mukhi" },
+      { name: "26 Mukhi" }
+    ],
+    [
+      { name: "Trijuti Rudraksha" },
+      { name: "Gauri Shankar Rudraksha" },
+      { name: "Ganesh Rudraksha" },
+      { name: "Garbha Gauri Rurdaksha" }
+    ]
+  ]
+};
+
+const HoverRudrakshaContent = () => {
+  const [selectedMukhi, setSelectedMukhi] = useState(null);
+
+  return (
+    <div className="bg-gradient-to-r from-orange-100 to-red-100 max-h-[50vh] min-w-[100vw] overflow-y-auto p-8">
+      <div className=" mx-auto bg-white rounded-xl shadow-2xl overflow-hidden">
+        <div className="md:flex">
+          <div className=" bg-orange-600 text-white p-8">
+            <h2 className="text-4xl font-bold mb-4">{rudrakshaData.title}</h2>
+            <p className="mb-8 text-lg">{rudrakshaData.subtitle}</p>
+            <button className="bg-white text-orange-600 px-6 py-3 rounded-full font-semibold hover:bg-orange-100 transition duration-300">
+              {rudrakshaData.buttonText}
+            </button>
+          </div>
+          <div className=" p-8">
+            <div className="grid md:grid-cols-5 gap-6">
+              {rudrakshaData.columns.map((column, columnIndex) => (
+                <div key={columnIndex}>
+                  {column.map((item, itemIndex) => (
+                    <div
+                      key={itemIndex}
+                      className="mb-2 cursor-pointer group"
+                      onClick={() => setSelectedMukhi(item.name)}
+                    >
+                      <div className="flex items-center space-x-2 p-2 rounded-lg hover:bg-orange-100 transition duration-300">
+                        <ChevronRight className="text-orange-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300" size={16} />
+                        <span className="text-sm font-medium text-gray-700 group-hover:text-orange-600">{item.name}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        {selectedMukhi && (
+          <div className="p-4 bg-orange-100 text-center">
+            <p className="text-lg font-semibold text-orange-800">Selected: {selectedMukhi}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default HoverRudrakshaContent;