feat: add stakeholder section as slider

package.json

@@ -16,6 +16,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@splidejs/react-splide": "^0.7.12",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

src/css/components/general.css

@@ -2,10 +2,13 @@ html {
     scrollbar-gutter: stable;
 }
 
-details > summary {
-    @apply list-none;
-}
-
-details > summary::-webkit-details-marker {
-    @apply hidden;
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+input[type="text"]:focus-visible,
+input[type="checkbox"]:focus-visible,
+input[type="date"]:focus-visible,
+textarea:focus-visible,
+summary:focus-visible {
+    @apply outline outline-2 outline-offset-4 outline-green-light-900;
 }

src/css/components/splide.css

@@ -0,0 +1,16 @@
+/* Override default styles from splide slider package */
+.splide__pagination {
+    @apply bottom-0 lg:-bottom-4 !important;
+}
+
+.splide__pagination .splide__pagination__page {
+    @apply w-2.5 h-2.5 !important;
+}
+
+.splide__pagination .splide__pagination__page.is-active {
+    @apply bg-green-dark-900 scale-100 !important;
+}
+
+.splide__pagination__page:focus-visible {
+    @apply outline outline-2 outline-offset-2 outline-green-light-900 !important;
+}

src/css/frontend.css

@@ -1,2 +1,3 @@
 @import './components/fonts.css';
 @import './components/general.css';
+@import './components/splide.css';

src/tsx/App.tsx

@@ -1,29 +1,10 @@
-import Faq from "./components/Faq";
-import FakeProgress from "./FakeProgress";
+import Faq from "./components/sections/Faq";
+import Stakeholder from "./components/sections/Stakeholder";
 
 function App() {
   return (
     <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
-                src="/assets/images/tree.png"
-                alt="Green Ecolution Logo"
-                className="w-24 h-24 sm:w-32 sm:h-32"
-            />
-            <h1 className="text-5xl sm:text-7xl font-bold text-center">
-                Green Ecolution
-            </h1>
-            <p className="text-lg sm:text-2xl font-semibold text-center">
-                🚧 Page under construction, please wait...
-            </p>
-            </div>
-        </div>
-        <div className="w-full flex justify-center mb-10">
-            <FakeProgress />
-        </div>
-        </div>
+        <Stakeholder />
         <Faq />
     </div>
   );

src/tsx/components/Accordion.tsx

@@ -27,8 +27,10 @@ const Accordion: React.FC<AccordionProps> = ({ label, children }) => {
         <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' : ''}`}
+                tabIndex={0}
+                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' : 'rounded-b-2xl'}`}
                 onClick={toggleAccordion}
+                onKeyDown={(e) => { if (e.key === "Enter") toggleAccordion() }}
             >
                 <h3 className="w-[85%] lg:text-lg">{label}</h3>
                 <figure
@@ -42,7 +44,7 @@ const Accordion: React.FC<AccordionProps> = ({ label, children }) => {
             <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'}`}
+                className={`max-h-0 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>

src/tsx/components/StakeholderCard.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+import Arrow from '../icons/Arrow';
+
+interface StakeholderCardProps {
+    label: string;
+    url: string;
+    image: string;
+    children: ReactNode;
+}
+
+const StakeholderCard: React.FC<StakeholderCardProps> = ({ label, url, image, children }) => {
+    return (
+        <figure className="h-full cursor-pointer bg-white shadow-md rounded-2xl p-6 border border-grey-100 md:p-8 md:grid md:grid-cols-[15rem,auto] md:gap-x-12 md:items-center">
+            <img
+                src={image}
+                className="object-contain max-w-64 h-32 mx-auto md:max-w-52" alt={`Logo ${label}`}/>
+
+            <figcaption className="mt-10 md:mt-0">
+                <h3 className="font-lato font-semibold text-lg">{label}</h3>
+
+                {children}
+
+                <a
+                    href={url}
+                    target="_blank"
+                    className="text-green-dark-900 font-bold flex itemx-center gap-x-4 group"
+                >
+                    <p className="transition-all ease-in-out duration-300 group-hover:text-green-light-900">
+                        Zur Website
+                    </p>
+                    <Arrow classes="w-6 transition-all ease-in-out duration-300 group-hover:translate-x-2 group-hover:text-green-light-900"/>
+                </a>
+            </figcaption>
+        </figure>
+    );
+};
+
+export default StakeholderCard;

src/tsx/components/Faq.tsx → src/tsx/components/sections/Faq.tsx

@@ -1,4 +1,4 @@
-import Accordion from "./Accordion";
+import Accordion from "../Accordion";
 
 function Faq() {
   return (

src/tsx/components/sections/Stakeholder.tsx

@@ -0,0 +1,57 @@
+import { Splide, SplideSlide } from '@splidejs/react-splide';
+import { i18nTranslated } from '../../helper/sliderTranslations';
+import '@splidejs/react-splide/css';
+import StakeholderCard from '../StakeholderCard';
+
+function Stakeholder() {
+    const stakeholder = [
+        {
+            label: "Hochschule Flensburg",
+            url: "https://hs-flensburg.de/",
+            image: "/assets/images/logo/hochschule-flensburg.png",
+            description: "Occaecat sit anim nulla enim mollit elit in aliquip. Eu incididunt laboris voluptate adipisicing eiusmod veniam officia eiusmod tempor ess."
+        },
+        {
+            label: "Smarte Grenzregion",
+            url: "https://smarte-grenzregion.de/",
+            image: "/assets/images/logo/smarte-grenzregion.png",
+            description: "Occaecat sit anim nulla enim mollit elit in aliquip. Eu incididunt laboris voluptate adipisicing."
+        },
+        {
+            label: "TBZ Flensburg",
+            url: "https://www.tbz-flensburg.de/",
+            image: "/assets/images/logo/tbz.png",
+            description: "Occaecat sit anim nulla enim mollit elit in aliquip. Eu incididunt laboris voluptate adipisicing eiusmod veniam officia eiusmod tempor ess."
+        }
+    ];
+
+  return (
+    <section className="max-w-208 mx-auto my-28 lg:my-36 xl:my-44">
+        <div className="px-4 mb-8 md:px-6 lg:mb-14">
+            <h2 className="font-lato font-bold text-2xl mb-6 lg:text-3xl">
+                Wer sind die Beteiligten?
+            </h2>
+            <article>
+                Id commodo eiusmod est culpa voluptate duis ipsum sint reprehenderit cupidatat elit qui enim.
+                Culpa exercitation sunt nisi magna tempor est ut duis consectetur consectetur pariatur irure ea aliqua.
+                Incididunt voluptate ad adipisicing excepteur laborum voluptate ut deserunt deserunt cillum mollit.
+                Ea sit nulla occaecat proident cupidatat laborum. Ipsum esse elit cillum tempor in consequat duis ullamco.
+            </article>
+        </div>
+
+        <Splide options={{ rewind: true, arrows: false, i18n: i18nTranslated, }} aria-label="React Splide Example">
+            {stakeholder.map((company, index) => (
+                <SplideSlide key={index} className="pb-10 px-4 md:px-6">
+                    <StakeholderCard label={company.label} url={company.url} image={company.image}>
+                        <p className="my-4 md:my-5">
+                            {company.description}
+                        </p>
+                    </StakeholderCard>
+                </SplideSlide>
+            ))}
+        </Splide>
+    </section>
+  );
+}
+
+export default Stakeholder;

src/tsx/helper/sliderTranslations.ts

@@ -0,0 +1,13 @@
+// German translations for reusable splide slider
+export const i18nTranslated = {
+    prev: 'Vorheriges Element anzeigen',
+    next: 'Nächstes Element anzeigen',
+    first: 'Erstes Element anzeigen',
+    last: 'Letztes Element anzeigen',
+    slideX: 'Zu Seite %s springen',
+    pageX: 'Zu Seite %s springen',
+    carousel: 'Slider',
+    select: 'Paginierung der Elemente',
+    slide: 'Slider Element',
+    slideLabel: '%s von %s',
+};

src/tsx/icons/Arrow.tsx

@@ -8,7 +8,7 @@ const Arrow: React.FC<ArrowProps> = ({ classes }) => {
             xmlns="http://www.w3.org/2000/svg"
             fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor"
             className={classes}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+            <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
         </svg>
     );
 }

src/types/splidejs__react-splide.d.ts

@@ -0,0 +1,81 @@
+declare module '@splidejs/react-splide' {
+    import { ComponentType, ReactNode } from 'react';
+
+    interface SplideOptions {
+        type?: 'slide' | 'loop' | 'fade';
+        rewind?: boolean;
+        speed?: number;
+        perPage?: number;
+        perMove?: number;
+        gap?: string;
+        arrows?: boolean;
+        pagination?: boolean;
+        autoplay?: boolean;
+        interval?: number;
+        pauseOnHover?: boolean;
+        pauseOnFocus?: boolean;
+        resetProgress?: boolean;
+        keyboard?: boolean | 'global';
+        drag?: boolean;
+        direction?: 'ltr' | 'rtl' | 'ttb';
+        width?: string;
+        height?: string;
+        fixedWidth?: string;
+        fixedHeight?: string;
+        autoWidth?: boolean;
+        autoHeight?: boolean;
+        start?: number;
+        focus?: number | 'center';
+        cloneStatus?: boolean;
+        clones?: number;
+        breakpoints?: {
+            [key: string]: SplideOptions;
+        };
+        classes?: {
+            root?: string;
+            slider?: string;
+            track?: string;
+            list?: string;
+            slide?: string;
+            container?: string;
+            arrows?: string;
+            arrow?: string;
+            prev?: string;
+            next?: string;
+            pagination?: string;
+            page?: string;
+            clone?: string;
+        };
+        i18n?: {
+            prev?: string;
+            next?: string;
+            first?: string;
+            last?: string;
+            slideX?: string;
+            pageX?: string;
+            carousel?: string;
+            select?: string;
+            slide?: string;
+            slideLabel?: string;
+        };
+    }
+
+    interface SplideProps {
+        options?: SplideOptions;
+        hasTrack?: boolean;
+        tag?: string;
+        id?: string;
+        className?: string;
+        style?: React.CSSProperties;
+        children?: ReactNode;
+    }
+
+    interface SplideSlideProps {
+        className?: string;
+        style?: React.CSSProperties;
+        children?: ReactNode;
+    }
+
+    export const Splide: ComponentType<SplideProps>;
+    export const SplideSlide: ComponentType<SplideSlideProps>;
+}

tailwind.config.js

@@ -21,6 +21,7 @@ export default {
         },
       },
       'grey': {
+        '100': '#E5E5E5',
         '900': '#171717',
       },
     },