feat: update content

green-ecolution · Jun 6, 2024 · fa17432 · fa17432
1 parent 7abafd9
commit fa17432
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/tsx/components/Accordion.tsx b/src/tsx/components/Accordion.tsx
@@ -17,19 +17,17 @@ const Accordion: React.FC<AccordionProps> = ({ label, children }) => {
     useEffect(() => {
         if (contentRef.current) {
             if (open) {
-                // Set to the natural height
                 setMaxHeight(`${contentRef.current.scrollHeight + 40}px`);
             } else {
-                // Set to a high value, then transition to 0px
                 setMaxHeight(`${contentRef.current.scrollHeight + 40}px`);
                 setTimeout(() => setMaxHeight('0px'), 0);
             }
         }
     }, [open]);
 
     return (
-        <div className={`cursor-pointer border border-green-dark-900 rounded-2xl shadow-md ${open ? 'border-green-light-900' : 'border-green-dark-900'}`}>
-            <div
+        <details className={`cursor-pointer border border-green-dark-900 rounded-2xl shadow-md ${open ? 'border-green-light-900' : 'border-green-dark-900'}`}>
+            <summary
                 aria-expanded={open}
                 className={`px-4 py-3 rounded-t-2xl cursor-pointer flex items-center justify-between gap-x-4 font-semibold font-lato transition-color ease-in-out duration-300 md:px-6 md:py-4 hover:bg-green-dark-900/10 ${open ? 'bg-green-light-900/10' : ''}`}
                 onClick={toggleAccordion}
@@ -42,15 +40,15 @@ const Accordion: React.FC<AccordionProps> = ({ label, children }) => {
                         <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                     </svg>
                 </figure>
-            </div>
+            </summary>
             <div
                 ref={contentRef}
-                style={{ maxHeight }}
+                style={{maxHeight}}
                 className={`overflow-hidden px-4 transition-all ease-in-out duration-300 border-t md:px-6 ${open ? 'border-t-green-light-900 pt-3 py-4 md:pb-6' : 'border-t-transparent'}`}
             >
                 {children}
             </div>
-        </div>
+        </details>
     );
 };
 

diff --git a/src/tsx/components/Faq.tsx b/src/tsx/components/Faq.tsx
@@ -22,7 +22,15 @@ function Faq() {
                     In culpa commodo commodo aute cillum ex elit. Esse aliquip labore elit consequat.
                 </p>
             </Accordion>
-            <Accordion label="Wer steckt hinter dem Projekt Green Ecolution?">
+            <Accordion label="Welchen Mehrwert bietet das Projekt?">
+                <p>
+                    Do do ex aliquip est voluptate Lorem est fugiat amet consectetur veniam irure enim id.
+                    Officia deserunt dolor sint aliquip.
+                    Cupidatat consequat consequat aute sint. Cupidatat fugiat tempor cupidatat cillum in officia anim voluptate cillum mollit.
+                    Est minim fugiat amet non.
+                </p>
+            </Accordion>
+            <Accordion label="Was bedeutet das, dass das Projekt öffentlich zugänglich ist?">
                 <p className="mb-4">
                     Do do ex aliquip est voluptate Lorem est fugiat amet consectetur veniam irure enim id.
                     Officia deserunt dolor sint aliquip.
@@ -37,6 +45,14 @@ function Faq() {
                     In culpa commodo commodo aute cillum ex elit. Esse aliquip labore elit consequat.
                 </p>
             </Accordion>
+            <Accordion label="Welche Sensoren werden verwendet?">
+                <p>
+                    Do do ex aliquip est voluptate Lorem est fugiat amet consectetur veniam irure enim id.
+                    Officia deserunt dolor sint aliquip.
+                    Cupidatat consequat consequat aute sint. Cupidatat fugiat tempor cupidatat cillum in officia anim voluptate cillum mollit.
+                    Est minim fugiat amet non.
+                </p>
+            </Accordion>
         </div>
     </section>
   );