/dec25: Nice transitions for Create and How sections

src/dec25homepage/CreateAVote.tsx

@@ -17,7 +17,11 @@ export const CreateAVote = () => {
         Create A Vote
       </button>
 
-      {isOpen && (
+      <div
+        className={`overflow-hidden transition-all duration-300 ease-in-out ${
+          isOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
+        }`}
+      >
         <div className="p-2 mb-8 w-full bg-amber-50 rounded rounded-t-none border border-t-0 border-amber-400">
           <h1 className="mb-1 text-base font-bold">Vote on what?</h1>
           <textarea
@@ -38,7 +42,7 @@ export const CreateAVote = () => {
             Next
           </button>
         </div>
-      )}
+      </div>
     </div>
   )
 }

src/dec25homepage/HowDoesItWork.tsx

@@ -21,7 +21,11 @@ export const HowDoesItWork = () => {
         How does it work?
       </button>
 
-      {isOpen && (
+      <div
+        className={`overflow-hidden transition-all duration-300 ease-in-out ${
+          isOpen ? 'opacity-100 max-h-[800px]' : 'max-h-0 opacity-0'
+        }`}
+      >
         <div className="px-2 py-2 w-full text-center border shadow-lg">
           {/* 1: Setup */}
           <AccordionSection isOpen={openSection === 1} onToggle={() => toggleSection(1)} title="Setup">
@@ -82,7 +86,7 @@ export const HowDoesItWork = () => {
             </ul>
           </AccordionSection>
         </div>
-      )}
+      </div>
     </div>
   )
 }