Merge pull request #24 from SmartCityFlensburg/feature/add-faq-section

feat: add faq section
green-ecolution · Jun 6, 2024 · 9e39bb9 · 9e39bb9
2 parents 9cae61e + 2ed273a
commit 9e39bb9
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
         <meta name="description" content="Die Projektwebsite zum Forschungsprojekt »Green Ecolution« für smartes Grünflächenmanagement der HS Flensburg.">
         <meta name="theme-color" content="#659858">
     </head>
-    <body class="bg-white antialiased font-nunito-sans text-base text-grey-900 w-screen overflow-x-hidden lg:text-lg selection:bg-green-light-900/20 selection:text-grey-900">
+    <body class="bg-white antialiased font-nunito-sans text-base text-grey-900 w-full overflow-x-hidden lg:text-lg selection:bg-green-light-900/20 selection:text-grey-900">
         <div id="root"></div>
         <script type="module" src="/src/main.tsx"></script>
     </body>

diff --git a/src/css/components/general.css b/src/css/components/general.css
@@ -0,0 +1,11 @@
+html {
+    scrollbar-gutter: stable;
+}
+
+details > summary {
+    @apply list-none;
+}
+
+details > summary::-webkit-details-marker {
+    @apply hidden;
+}
diff --git a/src/css/frontend.css b/src/css/frontend.css
@@ -1 +1,2 @@
 @import './components/fonts.css';
+@import './components/general.css';
diff --git a/src/main.tsx b/src/main.tsx
@@ -8,7 +8,9 @@ import './css/site.css'
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
         <Header />
-        <App />
+        <main>
+            <App />
+        </main>
         <Footer />
     </React.StrictMode>,
 )
diff --git a/src/tsx/App.tsx b/src/tsx/App.tsx
@@ -1,8 +1,10 @@
+import Faq from "./components/Faq";
 import FakeProgress from "./FakeProgress";
 
 function App() {
   return (
-    <div className="bg-gray-100 min-h-screen w-full flex flex-col justify-between">
+    <div>
+        <div className="bg-gray-100 min-h-screen w-full flex flex-col justify-between">
         <div className="flex flex-col justify-center items-center flex-grow">
             <div className="flex flex-col justify-center items-center gap-4 w-full px-4">
             <img
@@ -21,6 +23,8 @@ function App() {
         <div className="w-full flex justify-center mb-10">
             <FakeProgress />
         </div>
+        </div>
+        <Faq />
     </div>
   );
 }

diff --git a/src/tsx/components/Accordion.tsx b/src/tsx/components/Accordion.tsx
@@ -0,0 +1,53 @@
+import React, { ReactNode, useState, useRef, useEffect } from 'react';
+
+interface AccordionProps {
+    label: string;
+    children: ReactNode;
+}
+
+const Accordion: React.FC<AccordionProps> = ({ label, children }) => {
+    const [open, setOpen] = useState(false);
+    const [maxHeight, setMaxHeight] = useState('auto');
+    const accordionPanel = useRef<HTMLDivElement>(null);
+
+    const toggleAccordion = () => {
+        setOpen(!open);
+    };
+
+    useEffect(() => {
+        if (! accordionPanel.current) return;
+        setMaxHeight(`${accordionPanel.current.scrollHeight + 40}px`);
+
+        if (! open) {
+            setTimeout(() => setMaxHeight('0px'), 0);
+        }
+    }, [open]);
+
+    return (
+        <li 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}
+            >
+                <h3 className="w-[85%] lg:text-lg">{label}</h3>
+                <figure
+                    className={`w-7 h-7 rounded-full text-white flex items-center justify-center transition-all ease-in-out duration-300 ${open ? 'bg-green-light-900 rotate-180' : 'bg-green-dark-900'}`}
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                    </svg>
+                </figure>
+            </summary>
+            <div
+                ref={accordionPanel}
+                style={{maxHeight}}
+                className={`text-base leading-relaxed 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>
+        </li>
+    );
+};
+
+export default Accordion;
diff --git a/src/tsx/components/Faq.tsx b/src/tsx/components/Faq.tsx
@@ -0,0 +1,61 @@
+import Accordion from "./Accordion";
+
+function Faq() {
+  return (
+    <section className="px-4 max-w-208 mx-auto my-28 md:px-6 lg:my-36 xl:my-44">
+        <h2 className="font-lato font-bold text-center text-2xl mb-6 lg:mb-10 lg:text-3xl">
+            Oft gestellte Fragen zu Green Ecolution
+        </h2>
+        <ul className="flex flex-col gap-y-4 md:gap-y-6">
+            <Accordion label="Wer steckt hinter dem Projekt Green Ecolution?">
+                <p className="mb-4">
+                    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>
+                <p>
+                    Tempor amet consectetur in eiusmod quis adipisicing nulla incididunt incididunt tempor.
+                    Do est esse pariatur qui. Laboris non aute Lorem amet minim elit fugiat aliqua ipsum sint fugiat ipsum cillum ad ipsum.
+                    Qui eu irure reprehenderit anim sint deserunt consequat elit in excepteur aliquip excepteur tempor.
+                    Velit adipisicing Lorem nostrud consectetur proident ut. Tempor deserunt laboris tempor dolor dolore ad voluptate.
+                    In culpa commodo commodo aute cillum ex elit. Esse aliquip labore elit consequat.
+                </p>
+            </Accordion>
+            <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.
+                    Cupidatat consequat consequat aute sint. Cupidatat fugiat tempor cupidatat cillum in officia anim voluptate cillum mollit.
+                    Est minim fugiat amet non.
+                </p>
+                <p>
+                    Tempor amet consectetur in eiusmod quis adipisicing nulla incididunt incididunt tempor.
+                    Do est esse pariatur qui. Laboris non aute Lorem amet minim elit fugiat aliqua ipsum sint fugiat ipsum cillum ad ipsum.
+                    Qui eu irure reprehenderit anim sint deserunt consequat elit in excepteur aliquip excepteur tempor.
+                    Velit adipisicing Lorem nostrud consectetur proident ut. Tempor deserunt laboris tempor dolor dolore ad voluptate.
+                    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>
+        </ul>
+    </section>
+  );
+}
+
+export default Faq;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -37,9 +37,9 @@ export default {
       'xl': ['1.25rem', '1.55'], // 20px
       '2xl': ['1.5rem', '1.35'], // 24px
       '3xl': ['1.75rem', '1.43'], // 28px
-      '5xl': ['2rem', '1.33'], // 32px
-      '6xl': ['2.25rem', '1.33'], // 36px
-      '7xl': ['3rem', '1.25'], // 48px
+      '4xl': ['2rem', '1.33'], // 32px
+      '5xl': ['2.25rem', '1.33'], // 36px
+      '6xl': ['3rem', '1.25'], // 48px
     },
     extend: {
         backgroundImage: {
@@ -51,6 +51,7 @@ export default {
         },
         spacing: {
             '18': '4.5rem',
+            '208': '52rem',
         },
         boxShadow: {
             'mainNav': '-4px 0px 20px 8px rgba(0,0,0,0.1)',
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		@import './components/fonts.css';
		@import './components/general.css';