From 6671c0d251e8714837c0f327a914fb944c0fbe82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?=
 <dorien.groenwald@visuellverstehen.de>
Date: Sun, 23 Jun 2024 10:25:38 +0200
Subject: [PATCH 1/2] feat: add background to process section

---
 src/tsx/components/sections/Process.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tsx/components/sections/Process.tsx b/src/tsx/components/sections/Process.tsx
index 947ce07..0ce9925 100644
--- a/src/tsx/components/sections/Process.tsx
+++ b/src/tsx/components/sections/Process.tsx
@@ -18,7 +18,7 @@ function Process() {
     };
 
     return (
-        <section className="my-28 lg:my-36 xl:my-52">
+        <section className="relative overflow-hidden pt-28 my-28 lg:pt-36 lg:mb-36 xl:pt-52 xl:mb-52 before:bg-cover before:bg-background-dark-dot before:-scale-x-100 before:w-[90%] before:h-[80%] before:absolute before:-left-4 before:top-8 before:-z-10 before:bg-no-repeat sm:before:-left-[10%] xl:before:w-[80rem] 2xl:before:left-[10%] 2xl:before:bg-contain 3xl:before:left-[20%]">
             <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

From b550ea3c6146edec746f715f5498917ba3e268d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?=
 <dorien.groenwald@visuellverstehen.de>
Date: Sun, 23 Jun 2024 10:39:09 +0200
Subject: [PATCH 2/2] feat: add background to stakeholder and contact section

---
 src/tsx/components/Accordion.tsx             | 2 +-
 src/tsx/components/sections/Contact.tsx      | 9 +++++++--
 src/tsx/components/sections/Introduction.tsx | 2 +-
 src/tsx/components/sections/Stakeholder.tsx  | 2 +-
 src/tsx/pages/HomePage.tsx                   | 8 +++++---
 5 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/tsx/components/Accordion.tsx b/src/tsx/components/Accordion.tsx
index 7e4ca39..69550d1 100644
--- a/src/tsx/components/Accordion.tsx
+++ b/src/tsx/components/Accordion.tsx
@@ -24,7 +24,7 @@ const Accordion: React.FC<AccordionProps> = ({ label, children }) => {
     }, [open]);
 
     return (
-        <li className={`cursor-pointer border border-green-dark-900 rounded-2xl shadow-md ${open ? 'border-green-light-900' : 'border-green-dark-900'}`}>
+        <li className={`cursor-pointer border border-green-dark-900 bg-white rounded-2xl shadow-md ${open ? 'border-green-light-900' : 'border-green-dark-900'}`}>
             <summary
                 aria-expanded={open}
                 tabIndex={0}
diff --git a/src/tsx/components/sections/Contact.tsx b/src/tsx/components/sections/Contact.tsx
index 554d832..2a8f513 100644
--- a/src/tsx/components/sections/Contact.tsx
+++ b/src/tsx/components/sections/Contact.tsx
@@ -1,8 +1,13 @@
 import Button from "../Button";
 
-function Contact() {
+interface ContactProps {
+    spacingTop?: boolean;
+}
+
+const Contact: React.FC<ContactProps> = ({ spacingTop = true }) => {
   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-52">
+    <section className={`px-4 max-w-screen-lg mx-auto mb-28 md:grid md:grid-cols-2 md:gap-x-10 md:px-6 lg:mb-36 xl:max-w-screen-xl xl:mb-52
+        ${spacingTop ? 'mt-28 lg:mt-36 xl:mt-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>
diff --git a/src/tsx/components/sections/Introduction.tsx b/src/tsx/components/sections/Introduction.tsx
index b00a94a..d2bde5f 100644
--- a/src/tsx/components/sections/Introduction.tsx
+++ b/src/tsx/components/sections/Introduction.tsx
@@ -37,7 +37,7 @@ function Introduction() {
     }
 
     return (
-        <section className="max-w-208 mx-auto mt-48 mb-28 md:mt-52 lg:mb-36 lg:mt-16 lg:max-w-screen-lg lg:grid lg:grid-cols-[1fr,1.5fr] lg:gap-x-10 lg:items-center xl:mb-44 xl:grid-cols-2 xl:max-w-screen-xl">
+        <section className="max-w-208 mx-auto mt-48 md:mt-52 lg:mt-16 lg:max-w-screen-lg lg:grid lg:grid-cols-[1fr,1.5fr] lg:gap-x-10 lg:items-center 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?
diff --git a/src/tsx/components/sections/Stakeholder.tsx b/src/tsx/components/sections/Stakeholder.tsx
index b58833b..98f583f 100644
--- a/src/tsx/components/sections/Stakeholder.tsx
+++ b/src/tsx/components/sections/Stakeholder.tsx
@@ -36,7 +36,7 @@ const Stakeholder: React.FC<StakeholderProps> = ({ hasDesktopList = false }) =>
     }
 
     return (
-        <section className={`max-w-208 mx-auto my-28 lg:my-36 xl:my-52 ${hasDesktopList ? 'lg:max-w-screen-lg' : '' }`}>
+        <section className={`max-w-208 mx-auto pt-28 mb-28 lg:pt-36 lg:mb-36 xl:pt-52 xl:mb-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?
diff --git a/src/tsx/pages/HomePage.tsx b/src/tsx/pages/HomePage.tsx
index f7bfa8b..230cf22 100644
--- a/src/tsx/pages/HomePage.tsx
+++ b/src/tsx/pages/HomePage.tsx
@@ -13,9 +13,11 @@ function HomePage() {
         <HomepageDevider />
         <Introduction />
         <Process />
-        <Stakeholder />
-        <Faq />
-        <Contact />
+        <div className="relative overflow-x-hidden before:bg-cover before:bg-background-light-dot before:w-[90%] before:h-[120vh] before:absolute before:-right-4 before:top-8 before:-z-10 before:bg-no-repeat sm:before:-right-[5%] xl:before:w-[90rem] 2xl:before:right-[10%] 2xl:before:bg-contain 3xl:before:right-[20%]">
+            <Stakeholder />
+            <Faq />
+        </div>
+        <Contact spacingTop={false}/>
     </main>
   );
 }