Merge pull request #53 from SmartCityFlensburg/feature/add-contact-page

feat: add contact page

src/tsx/App.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import HomePage from "./pages/HomePage";
 import ProjectPage from "./pages/ProjectPage";
+import ContactPage from "./pages/ContactPage";
 
 function App() {
   return (
@@ -9,6 +10,7 @@ function App() {
         <Route path="/">
           <Route index element={<HomePage />} />
           <Route path="projekt" element={<ProjectPage />} />
+          <Route path="kontakt" element={<ContactPage />} />
         </Route>
       </Routes>
     </BrowserRouter>

src/tsx/components/cards/StakeholderCard.tsx

@@ -6,14 +6,18 @@ interface StakeholderCardProps {
     url: string;
     image: string;
     children: ReactNode;
+    hasDesktopList?: boolean;
 }
 
-const StakeholderCard: React.FC<StakeholderCardProps> = ({ label, url, image, children }) => {
+const StakeholderCard: React.FC<StakeholderCardProps> = ({ label, url, image, children, hasDesktopList = false }) => {
     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">
+        <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
+            ${hasDesktopList ? 'lg:cursor-default' : ''}`}
+        >
             <img
                 src={image}
-                className="object-contain max-w-64 h-32 mx-auto md:max-w-52" alt={`Logo ${label}`}/>
+                className="object-contain max-w-64 h-32 mx-auto md:max-w-52"
+                alt={`Logo ${label}`} loading="lazy" />
 
             <figcaption className="mt-10 md:mt-0">
                 <h3 className="font-lato font-semibold text-lg">{label}</h3>

src/tsx/components/hero/ContactHeroContent.tsx

@@ -0,0 +1,22 @@
+import Button from "../Button";
+
+function ContactHeroContent() {
+    return (
+        <div className="flex flex-wrap gap-6 mt-8 lg:justify-center">
+            <Button href="mailto:[email protected]" ariaLabel="Kontaktiere uns gern per Mail" isDark>
+                <img
+                    src="/assets/svg/socials/mail.svg"
+                    className="w-6 h-6" alt="" loading="lazy"/>
+                <span>Kontakt</span>
+            </Button>
+            <Button href="https://github.com/SmartCityFlensburg" ariaLabel="Besuche uns auf GitHub" isExternalLink isDark>
+                <img
+                    src="/assets/svg/socials/github.svg"
+                    className="w-6 h-6" alt="" loading="lazy"/>
+                <span>GitHub</span>
+            </Button>
+        </div>
+    );
+}
+
+export default ContactHeroContent;

src/tsx/components/hero/ProjectHeroContent.tsx

@@ -0,0 +1,55 @@
+import { useState, useMemo } from 'react';
+import ProcessCard from './../cards/ProcessCard';
+import { steps } from '../../../data/processSteps';
+import StepCircle from './../process/StepCircle';
+
+function ProjectHeroContent() {
+    const activeStep = useMemo(() => steps.findIndex(step => step.isCurrent), []);
+
+    const [visibleStep, setVisibleStep] = useState(activeStep);
+
+    function toggleVisibleStep(index: number) {
+        setVisibleStep(index);
+    }
+
+    return (
+        <div className="flex flex-col">
+            <p className="font-bold text-center">Akueller Projektstand:</p>
+            <ul className="flex items-center justify-center gap-x-8 mb-10 mt-6 md:gap-x-12 lg:gap-x-16">
+                {steps.map((step, index) => (
+                    <li key={index} className={`relative
+                        ${index === 0 ? '' : 'before:h-0.5 before:w-8 before:absolute before:right-full before:top-1/2 before:-translate-y-1/2 md:before:w-12 lg:before:w-16'}
+                        ${index < activeStep + 1 ? 'before:bg-green-dark-900' : 'before:bg-grey-100'}`}>
+                        <button
+                            className="transition-all ease-in-out duration-300 hover:opacity-75"
+                            aria-label={`Anzeige von Prozess-Schritt ${index}: ${step.shortName}`}
+                            aria-current={index === visibleStep}
+                            onClick={() => toggleVisibleStep(index)}
+                        >
+                            <StepCircle
+                                index={index}
+                                activeStep={activeStep} />
+                        </button>
+                    </li>
+                ))}
+            </ul>
+
+            <ul className="flex items-center justify-center gap-x-6">
+                {steps.map((step, index) => (
+                    <li key={index} className={`${visibleStep === index ? 'block' : 'hidden'}`}>
+                        <ProcessCard
+                            label={step.label}
+                            shortName={step.shortName}
+                            description={step.description}
+                            index={index}
+                            maxIndex={steps.length}
+                            isCurrent={index === activeStep}
+                            isCompleted={index < activeStep} />
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+export default ProjectHeroContent;

src/tsx/components/sections/Advantages.tsx

@@ -20,7 +20,7 @@ function Advantages() {
     ];
 
     return (
-        <section className="px-4 max-w-208 mx-auto my-28 md:px-6 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-6 lg:gap-10 lg:my-36 lg:max-w-screen-lg xl:my-44 xl:max-w-screen-xl">
+        <section className="px-4 max-w-208 mx-auto my-28 md:px-6 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-6 lg:gap-10 lg:my-36 lg:max-w-screen-lg xl:my-52 xl:max-w-screen-xl">
             <article className="mb-8 lg:mb-14">
                 <h2 className="font-lato font-bold text-2xl mb-6 lg:text-3xl">
                     Alle weiteren Funktionen und Vorteile im Überblick.

src/tsx/components/sections/Contact.tsx

@@ -2,7 +2,7 @@ import Button from "../Button";
 
 function Contact() {
   return (
-    <section className="px-4 max-w-screen-lg mx-auto my-28 md:grid md:grid-cols-2 md:gap-x-10 md:px-6 lg:my-36 xl:max-w-screen-xl xl:my-44">
+    <section className="px-4 max-w-screen-lg mx-auto my-28 md:grid md:grid-cols-2 md:gap-x-10 md:px-6 lg:my-36 xl:max-w-screen-xl xl:my-52">
         <h2 className="font-lato font-bold text-2xl mb-6 lg:mb-10 lg:text-3xl">
             Hast du weitere Fragen, Feedback oder ein Anliegen?
         </h2>

src/tsx/components/sections/DashboardPreview.tsx

@@ -3,7 +3,7 @@ import dashboardAnimation from "../../../json/dashboardAnimation.json"
 
 function DashboardPreview() {
   return (
-    <section className="mb-28 px-4 max-w-208 mx-auto md:px-6 lg:mb-36 xl:max-w-screen-lg xl:mb-44">
+    <section className="my-28 px-4 max-w-208 mx-auto md:px-6 lg:my-36 xl:max-w-screen-lg xl:my-52">
         <article className="mb-8 g:mb-14 md:text-center">
             <h2 className="font-lato font-bold text-2xl mb-6 lg:text-3xl">
                 Fundierte Handlungsempfehlungen<br/>

src/tsx/components/sections/Faq.tsx

@@ -2,7 +2,7 @@ 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">
+    <section className="px-4 max-w-208 mx-auto my-28 md:px-6 lg:my-36 xl:my-52">
         <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>

src/tsx/components/sections/Hero.tsx

@@ -1,68 +1,18 @@
-import React from 'react';
-import ProcessCard from './../cards/ProcessCard';
-import { steps } from '../../../data/processSteps';
-import StepCircle from './../process/StepCircle';
+import React, { ReactNode } from 'react';
 
 interface HeroProps {
     headline: string;
     description: string;
-    type: string;
+    children: ReactNode;
 }
 
-const Hero: React.FC<HeroProps> = ({ headline, description, type }) => {
-    const activeStep = steps.findIndex(step => step.isCurrent);
-
-    const [visibleStep, setVisibleStep] = React.useState(activeStep);
-
-    function toggleVisibleStep(index: number) {
-        setVisibleStep(index);
-    }
-
+const Hero: React.FC<HeroProps> = ({ headline, description, children }) => {
     return (
-        <section className={`relative overflow-hidden before:bg-cover before:w-4/5 before:h-[100vh] before:max-h-[45rem] before:absolute before:-right-4 before:-top-16 before:-z-10 before:bg-no-repeat sm:before:-right-10 lg:before:max-h-[55rem] xl:before:w-[70rem] xl:before:-right-40 2xl:before:right-[10%] 2xl:before:bg-contain
-            ${type === 'project' ? 'before:bg-background-light-dot' : ''}`}
-        >
-            <div className="py-28 px-4 max-w-208 mx-auto md:px-6 lg:py-36 xl:py-44 xl:max-w-screen-lg">
-                <h1 className="font-lato font-bold text-4xl mb-4 lg:mb-6 lg:text-5xl lg:text-center xl:text-6xl">{headline}</h1>
-                <p className="lg:text-center">{description}</p>
-
-                <div className={`mt-16 ${type === 'project' ? 'flex flex-col' : 'hidden'}`}>
-                    <p className="font-bold text-center">Akueller Projektstand:</p>
-                    <ul className="flex items-center justify-center gap-x-8 mb-10 mt-6 md:gap-x-12 lg:gap-x-16">
-                        {steps.map((step, index) => (
-                            <li key={index} className={`relative
-                                ${index === 0 ? '' : 'before:h-0.5 before:w-8 before:absolute before:right-full before:top-1/2 before:-translate-y-1/2 md:before:w-12 lg:before:w-16'}
-                                ${index < activeStep + 1 ? 'before:bg-green-dark-900' : 'before:bg-grey-100'}`}>
-                                <button
-                                    className="transition-all ease-in-out duration-300 hover:opacity-75"
-                                    aria-label={`Anzeige von Prozess-Schritt ${index}: ${step.shortName}`}
-                                    aria-current={index === visibleStep}
-                                    onClick={() => toggleVisibleStep(index)}
-                                >
-                                    <StepCircle
-                                        index={index}
-                                        activeStep={activeStep} />
-                                </button>
-                            </li>
-                        ))}
-                    </ul>
+        <section className="my-28 px-4 max-w-208 mx-auto md:px-6 lg:my-36 xl:my-52 xl:max-w-screen-lg">
+            <h1 className="font-lato font-bold text-4xl mb-4 lg:mb-6 lg:text-5xl lg:text-center xl:text-6xl">{headline}</h1>
+            <p className="lg:text-center">{description}</p>
 
-                    <ul className="flex items-center justify-center gap-x-6">
-                        {steps.map((step, index) => (
-                            <li key={index} className={`${visibleStep === index ? 'block' : 'hidden'}`}>
-                                <ProcessCard
-                                    label={step.label}
-                                    shortName={step.shortName}
-                                    description={step.description}
-                                    index={index}
-                                    maxIndex={steps.length}
-                                    isCurrent={index === activeStep}
-                                    isCompleted={index < activeStep} />
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-            </div>
+            {children}
         </section>
     );
 };

src/tsx/components/sections/Process.tsx

@@ -18,7 +18,7 @@ function Process() {
     };
 
     return (
-        <section className="my-28 lg:my-36 xl:my-44">
+        <section className="my-28 lg:my-36 xl:my-52">
             <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

src/tsx/components/sections/Stakeholder.tsx

@@ -3,7 +3,11 @@ import { i18nTranslated } from '../../helper/sliderTranslations';
 import '@splidejs/react-splide/css';
 import StakeholderCard from '../cards/StakeholderCard';
 
-function Stakeholder() {
+interface StakeholderProps {
+    hasDesktopList?: boolean;
+}
+
+const Stakeholder: React.FC<StakeholderProps> = ({ hasDesktopList = false }) => {
     const stakeholder = [
         {
             label: "Hochschule Flensburg",
@@ -25,36 +29,42 @@ function Stakeholder() {
         }
     ];
 
-  return (
-    <section className="max-w-208 mx-auto my-28 lg:my-36 xl:my-44">
-        <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">
-                Wer sind die Beteiligten?
-            </h2>
-            <p>
-                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.
-            </p>
-        </article>
+    const breakpoints = {
+		1024: {
+			destroy: true,
+		},
+    }
 
-        <Splide
-            options={{ rewind: true, arrows: false, i18n: i18nTranslated, }}
-            aria-label="Beteiligten am Projekt"
-        >
-            {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>
-  );
-}
+    return (
+        <section className={`max-w-208 mx-auto my-28 lg:my-36 xl:my-52 ${hasDesktopList ? 'lg:max-w-screen-lg' : '' }`}>
+            <article className={`px-4 mb-8 md:px-6 lg:mb-14 ${hasDesktopList ? 'lg:text-center' : '' }`}>
+                <h2 className="font-lato font-bold text-2xl mb-6 lg:text-3xl">
+                    Wer sind die Beteiligten?
+                </h2>
+                <p>
+                    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.
+                </p>
+            </article>
+
+            <Splide
+                options={{ rewind: true, arrows: false, i18n: i18nTranslated, mediaQuery: 'min', ...(hasDesktopList && { breakpoints: breakpoints }) }}
+                aria-label="Beteiligten am Projekt"
+            >
+                {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} hasDesktopList>
+                            <p className="my-4 md:my-5">
+                                {company.description}
+                            </p>
+                        </StakeholderCard>
+                    </SplideSlide>
+                ))}
+            </Splide>
+        </section>
+    );
+};
 
 export default Stakeholder;

src/tsx/pages/ContactPage.tsx

@@ -0,0 +1,19 @@
+import ContactHeroContent from "../components/hero/ContactHeroContent";
+import Hero from "../components/sections/Hero";
+import Stakeholder from "../components/sections/Stakeholder";
+
+function ContactPage() {
+    const heroHeadline = "Noch neugierig?";
+    const heroDescription = "Eu elit quis eiusmod proident officia aute tempor tempor qui commodo aute qui. Excepteur id ea laboris fugiat dolor exercitation ut pariatur ut commodo non. Eu deserunt laboris dolore elit. Aliquip magna do nostrud velit esse anim do. Dolor culpa duis laboris nisi ea nulla nulla magna"
+
+    return (
+        <main className="relative overflow-hidden before:bg-cover before:bg-background-dark-dot before:w-4/5 before:h-[100vh] before:max-h-[45rem] before:absolute before:-right-4 before:-top-16 before:-z-10 before:bg-no-repeat sm:before:-right-10 lg:before:max-h-[55rem] xl:before:w-[70rem] xl:before:-right-40 2xl:before:right-[10%] 2xl:before:bg-contain">
+            <Hero headline={heroHeadline} description={heroDescription}>
+                <ContactHeroContent />
+            </Hero>
+            <Stakeholder hasDesktopList/>
+        </main>
+    );
+}
+
+export default ContactPage;

src/tsx/pages/ProjectPage.tsx

@@ -2,14 +2,17 @@ import Advantages from "../components/sections/Advantages";
 import DashboardPreview from "../components/sections/DashboardPreview";
 import Hero from "../components/sections/Hero";
 import Contact from "../components/sections/Contact";
+import ProjectHeroContent from "../components/hero/ProjectHeroContent";
 
 function ProjectPage() {
     const heroHeadline = "Alles wissenswerte über das Projekt";
     const heroDescription = "Eu elit quis eiusmod proident officia aute tempor tempor qui commodo aute qui. Excepteur id ea laboris fugiat dolor exercitation ut pariatur ut commodo non. Eu deserunt laboris dolore elit. Aliquip magna do nostrud velit esse anim do. Dolor culpa duis laboris nisi ea nulla nulla magna"
 
     return (
-        <main>
-            <Hero headline={heroHeadline} description={heroDescription} type="project" />
+        <main className="relative overflow-hidden before:bg-cover before:bg-background-light-dot before:w-4/5 before:h-[100vh] before:max-h-[45rem] before:absolute before:-right-4 before:-top-16 before:-z-10 before:bg-no-repeat sm:before:-right-10 lg:before:max-h-[55rem] xl:before:w-[70rem] xl:before:-right-40 2xl:before:right-[10%] 2xl:before:bg-contain">
+            <Hero headline={heroHeadline} description={heroDescription}>
+                <ProjectHeroContent />
+            </Hero>
             <DashboardPreview />
             <Advantages />
             <Contact />

tailwind.config.js

@@ -48,6 +48,7 @@ export default {
             'background-footer-mobile': "url('/assets/svg/background/footer-mobile.svg')",
             'background-footer-desktop': "url('/assets/svg/background/footer-desktop.svg')",
             'background-light-dot': "url('/assets/svg/background/general-light-dot.svg')",
+            'background-dark-dot': "url('/assets/svg/background/general-dark-dot.svg')",
             'background-yellow-dot': "url('/assets/svg/background/general-yellow-dot.svg')",
         },
         screens: {