feat: add background to sections

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}

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>

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?

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

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?

src/tsx/pages/HomePage.tsx

@@ -18,9 +18,11 @@ function HomePage() {
             <HomepageDevider />
             <Introduction />
             <Process />
-            <Stakeholder />
-            <Faq />
-            <Contact />
+            <div className="relative overflow-hidden before:bg-cover before:bg-background-light-dot before:w-[90%] before:h-[120vh] before:max-w-[60rem] before:absolute before:-right-4 before:top-8 before:-z-10 before:bg-no-repeat sm:before:-right-[5%] 2xl:before:w-[90rem] 2xl:before:max-w-[90rem] 2xl:before:right-[10%] 2xl:before:bg-contain 3xl:before:right-[20%]">
+                <Stakeholder />
+                <Faq />
+                <Contact />
+            </div>
         </main>
     );
 }