feat: roadmaps

src/components/Accordion.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+
+const Accordion = ({ items }) => {
+    const [openIndex, setOpenIndex] = useState(null);
+
+    const toggleItem = (index) => {
+        setOpenIndex(openIndex === index ? null : index);
+    };
+
+    return (
+        <div className="w-full bg-white p-8 rounded-lg shadow-lg mb-16">
+            <h3 className="text-2xl font-semibold text-center mb-4 text-gray-900">Conquering Challenges: Practical Tips for Diverse Talent</h3>
+            {items.map((item, index) => (
+                <div key={index} className="mb-4">
+                    <button
+                        onClick={() => toggleItem(index)}
+                        className="w-full text-left text-lg font-semibold text-gray-800 bg-gray-100 p-4 rounded-lg shadow-md hover:bg-gray-300 transition duration-300"
+                    >
+                        {item.title}
+                    </button>
+                    {openIndex === index && (
+                        <div className="mt-2 p-4 bg-gray-200 rounded-lg shadow-inner">
+                            <p className="text-gray-700">{item.content}</p>
+                            <p className="mt-2 text-gray-700 font-semibold">Solution:</p>
+                            <p className="text-gray-700">{item.solution}</p>
+                        </div>
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default Accordion;