Merge pull request #36 from SmartCityFlensburg/feature/add-current-pr…

…ocess-section

feat: add current process section

.github/workflows/deploy_pull_request.yaml

@@ -74,7 +74,7 @@ jobs:
           --create-namespace \
           --wait \
           --values ./k8s/values.yaml \
-          --values ./k8s/values/develop.yaml \
+          --values ./k8s/values/develop.yaml
 
       - name: Post comment to Pull Request
         uses: thollander/actions-comment-pull-request@v2

src/css/components/splide.css

@@ -4,7 +4,7 @@
 }
 
 .splide.splide--grid > .splide__track > .splide__list {
-    @apply xl:grid xl:grid-cols-2 xl:gap-x-6 xl:gap-y-8 !important;
+    @apply lg:grid lg:grid-cols-2 lg:gap-x-6 lg:gap-y-8 !important;
 }
 
 .splide__pagination {

src/tsx/App.tsx

@@ -1,11 +1,13 @@
 import Faq from "./components/sections/Faq";
 import Introduction from "./components/sections/Introduction";
+import Process from "./components/sections/Process";
 import Stakeholder from "./components/sections/Stakeholder";
 
 function App() {
   return (
     <div>
         <Introduction />
+        <Process />
         <Stakeholder />
         <Faq />
     </div>

src/tsx/components/cards/ProcessCard.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+interface ProcessCardProps {
+    label: string;
+    shortName: string;
+    index: number;
+    activeStep: number;
+    maxIndex: number;
+    description: string;
+    isCurrent?: boolean;
+    isCompleted?: boolean;
+}
+
+const ProcessCard: React.FC<ProcessCardProps> = ({ label, shortName, index, activeStep, maxIndex, description, isCurrent = false, isCompleted = false }) => {
+    return (
+        <div className="relative">
+            <article className={`h-full p-6 mb-6 cursor-pointer shadow-md rounded-2xl mx-4 border md:mx-6 lg:max-w-[32rem] lg:h-auto lg:cursor-default
+                ${isCurrent && !isCompleted ? 'bg-green-light-900/10 border-green-light-900' : ''}
+                ${isCompleted && !isCurrent ? 'border-green-dark-900 bg-white' : ''}
+                ${!isCompleted && !isCurrent ? 'border-grey-100  bg-white' : ''}
+                ${index % 2 !== 0 ? 'xl:ml-auto' : ''}
+                ${index + 1 === maxIndex ? 'lg:mb-2' : 'lg:mb-0'}`}
+            >
+                <span className="text-sm">
+                    Schritt {index + 1} von {maxIndex}: {shortName}
+                </span>
+                <h3 className="my-4 font-lato font-semibold text-lg lg:my-5">{label}</h3>
+                <p>{description}</p>
+            </article>
+
+            <div className={`relative lg:static lg:before:w-0.5 lg:before:h-1/2 lg:after:w-0.5 lg:after:h-1/2
+                ${index !== 0 ? 'before:w-1/2 before:h-0.5 before:absolute before:left-0 before:top-1/2 before:-z-10' : ''}
+                ${index + 1 < maxIndex ? 'after:w-1/2 after:h-0.5 after:absolute after:right-0 after:top-1/2 after:-z-10 ' : ''}
+                ${index === activeStep ? 'before:bg-green-dark-900 after:bg-grey-100' : ''}
+                ${index < activeStep ? 'before:bg-green-dark-900 after:bg-green-dark-900' : ''}
+                ${index > activeStep ? 'before:bg-grey-100 after:bg-grey-100' : ''}
+                ${index % 2 === 0 ? 'lg:before:-right-10 lg:before:left-auto lg:before:top-0 lg:after:-right-10' : 'lg:before:-left-[2.6rem] lg:before:right-auto lg:before:top-0 lg:after:-left-[2.6rem]'}`}
+            >
+                <figure className={`mx-auto flex items-center justify-between rounded-full w-8 h-8 lg:absolute lg:top-1/2 lg:-translate-y-1/2
+                    ${index === activeStep ? 'text-white bg-green-dark-900' : 'text-white bg-green-light-900'}
+                    ${index < activeStep ? 'border-2 border-green-dark-900 bg-white' : ''}
+                    ${index % 2 === 0 ? 'lg:-right-14' : 'lg:-left-14'}`}
+                >
+                    <span className="block font-semibold font-lato mx-auto">
+                        {index < activeStep ? (
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="3" stroke="#4C7741" className="w-4">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                        ) : (
+                            index + 1
+                        )}
+                    </span>
+                </figure>
+            </div>
+        </div>
+    );
+};
+
+export default ProcessCard;

src/tsx/components/sections/Introduction.tsx

@@ -31,13 +31,13 @@ function Introduction() {
         640: {
             perPage: 2,
         },
-		1280: {
+		1024: {
 			destroy: true,
 		},
     }
 
     return (
-        <section className="max-w-208 mx-auto my-28 lg:my-36 xl:max-w-screen-lg xl:grid xl:grid-cols-[1fr,1.5fr] xl:gap-x-10 xl:items-center xl:my-44 2xl:grid-cols-2 2xl:max-w-screen-xl">
+        <section className="max-w-208 mx-auto my-28 lg:my-36 lg:max-w-screen-lg lg:grid lg:grid-cols-[1fr,1.5fr] lg:gap-x-10 lg:items-center xl:my-44 xl:grid-cols-2 xl:max-w-screen-xl">
             <article className="px-4 mb-8 md:px-6 lg:mb-14">
                 <h2 className="font-lato font-bold text-2xl mb-6 lg:text-3xl">
                     Was beinhaltet smartes Grünflächenmanagement alles?
@@ -56,7 +56,7 @@ function Introduction() {
                 className="splide--grid md:px-2"
             >
                 {facts.map((fact, index) => (
-                    <SplideSlide key={index} className="pb-10 px-4 lg:px-2 lg:pb-2 xl:first:mb-16 xl:[&:nth-child(2)]:mt-16 xl:[&:nth-child(3)]:-mt-16 xl:[&:nth-child(3)]:mb-16">
+                    <SplideSlide key={index} className="pb-10 px-4 lg:px-2 lg:pb-2 lg:first:mb-16 lg:[&:nth-child(2)]:mt-16 lg:[&:nth-child(3)]:-mt-16 lg:[&:nth-child(3)]:mb-16">
                         <IntroductionCard
                             label={fact.label}
                             icon={fact.icon}

src/tsx/components/sections/Process.tsx

@@ -0,0 +1,83 @@
+import { Splide, SplideSlide } from '@splidejs/react-splide';
+import { i18nTranslated } from '../../helper/sliderTranslations';
+import '@splidejs/react-splide/css';
+import ProcessCard from "../cards/ProcessCard";
+
+function Process() {
+    const activeStep = 1;
+
+    const steps = [
+        {
+            label: "Konzepterstellung",
+            shortName: "Konzept",
+            description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna."
+        },
+        {
+            label: "MVP (Most Valid Product)",
+            shortName: "MVP",
+            description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna."
+        },
+        {
+            label: "Produktvorstellung 01",
+            shortName: "Vorstellung 01",
+            description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna."
+        },
+        {
+            label: "Produktvorstellung 02",
+            shortName: "Vorstellung 02",
+            description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna."
+        },
+        {
+            label: "Finale Vorstellung",
+            shortName: "Finalisierung",
+            description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna."
+        },
+    ];
+
+    const breakpoints = {
+        640: {
+            padding: '20%'
+        },
+        1024: {
+            destroy: true,
+        },
+    };
+
+    return (
+        <section className="my-28 lg:my-36 xl:my-44">
+            <article className="px-4 mb-8 max-w-208 mx-auto md:px-6 lg:mb-14 lg:text-center xl:max-w-screen-lg">
+                <h2 className="font-lato font-bold text-2xl mb-6 lg:text-3xl">
+                    Der aktuelle Projektfortschritt
+                </h2>
+                <p>
+                    Sit sint sit incididunt magna esse incididunt incididunt consectetur ex sit.
+                    Ipsum labore dolor minim culpa Lorem incididunt nisi nulla culpa dolor.
+                    Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse.
+                    Proident ut consequat consequat consectetur magna.
+                </p>
+            </article>
+
+            <Splide
+                options={{ rewind: true, arrows: false, pagination: false, i18n: i18nTranslated, mediaQuery: 'min', breakpoints: breakpoints, start: activeStep }}
+                aria-label="Der aktuelle Projektfortschritt"
+                className="md:px-2 lg:mx-auto lg:max-w-screen-lg xl:max-w-screen-xl"
+            >
+                {steps.map((step, index) => (
+                    <SplideSlide key={index} className="pb-10 lg:w-1/2 lg:even:ml-auto lg:even:mr-0 lg:even:pl-10 lg:pb-0 lg:odd:pr-10">
+                        <ProcessCard
+                            label={step.label}
+                            shortName={step.shortName}
+                            index={index}
+                            activeStep={activeStep}
+                            maxIndex={steps.length}
+                            isCurrent={index === activeStep}
+                            isCompleted={index < activeStep}
+                            description={step.description} />
+                    </SplideSlide>
+                ))}
+            </Splide>
+        </section>
+    );
+}
+
+export default Process;

src/tsx/layout/Footer.tsx

@@ -2,8 +2,8 @@ import Button from "../components/Button";
 
 function Footer() {
   return (
-    <footer className="py-10 bg-background-footer-mobile bg-no-repeat bg-cover text-white md:pt-16 lg:bg-background-footer-desktop lg:bg-[35%] 3xl:bg-contain 3xl:bg-center">
-        <div className="px-4 max-w-screen-lg mx-auto md:px-6 md:flex md:items-end md:justify-between md:gap-x-6 2xl:max-w-screen-xl">
+    <footer className="py-10 bg-background-footer-mobile bg-no-repeat bg-cover text-white md:pt-16 lg:bg-background-footer-desktop lg:bg-[35%] xl:bg-[55%] 3xl:bg-contain 3xl:bg-center">
+        <div className="px-4 max-w-screen-lg mx-auto md:px-6 md:flex md:items-end md:justify-between md:gap-x-6 xl:max-w-screen-xl">
             <div className="pb-10 border-b border-b-white md:border-none md:pb-0">
                 <img
                     src="/assets/svg/logo/logo-icon-white.svg"

src/tsx/layout/Header.tsx

@@ -30,7 +30,7 @@ function Header() {
 
     return (
         <header className={`fixed w-screen inset-x-0 top-0 z-50 bg-white/75 before:w-screen before:transition-all before:ease-in-out before:duration-300 before:h-screen before:absolute before:bg-grey-900 before:-z-10 lg:before:transition-none ${open ? 'before:visible before:opacity-60' : 'before:opacity-0 before:invisible'}`}>
-            <div className="relative px-4 py-5 max-w-screen-lg mx-auto flex justify-between items-center md:px-6 2xl:max-w-screen-xl">
+            <div className="relative px-4 py-5 max-w-screen-lg mx-auto flex justify-between items-center md:px-6 xl:max-w-screen-xl">
                 <a href="/" aria-label="Zur Startseite navigieren" className={`flex items-center gap-x-4 xl:gap-x-5 ${open ? 'opacity-0' : ''}`}>
                     <img
                         src="/assets/svg/logo/logo-large-color.svg"

src/types/splidejs__react-splide.d.ts

@@ -14,6 +14,7 @@ declare module '@splidejs/react-splide' {
         interval?: number;
         pauseOnHover?: boolean;
         pauseOnFocus?: boolean;
+        padding?: string;
         resetProgress?: boolean;
         keyboard?: boolean | 'global';
         drag?: boolean;