Merge branch 'develop' into feature/add-not-found-page

k8s/values/develop.yaml

@@ -5,7 +5,7 @@ deployment:
   image:
     repository: ghcr.io/smartcityflensburg/project-website-dev
     pullPolicy: Always
-    tag: "44305b4"
+    tag: "bbe9c35"
 ingress:
   enabled: true
   className: "traefik"

src/json/treeDarkGreenAnimation.json

@@ -0,0 +1 @@
+{"v":"5.5.2","meta":{"a":"SVGator","d":"SVGator, the ultimate SVG animation generator now supports Lottie: a thoughtfully designed, intuitive interface, right at your fingertips.","g":"Made in SVGator (https://www.svgator.com/)","tc":""},"metadata":{"filename":"Baum 03.json","customProps":{"k":["SVGator","svgator","lottie animation","svg animation","lottie","svg"],"version":1,"app":"https://app.svgator.com/","site":"https://www.svgator.com/","date":"2024-06-15T18:01:47.117Z"}},"nm":"Baum 03","ddd":0,"assets":[],"w":736,"h":801,"ip":0,"op":500,"fr":100,"fonts":{"list":[]},"layers":[{"ty":4,"st":0,"ip":0,"op":500,"ks":{"a":{"a":0,"k":[426.472549,516.123398]},"p":{"a":0,"k":[426.472549,516.123398]}},"shapes":[{"ty":"sh","ks":{"a":0,"k":{"v":[[391.502,338.253],[391.502,338.256],[391.502,338.256],[387.429,395.771],[384.804,392.426],[295.112,309.989],[293.236,310.634],[384.804,423.708],[385.413,423.939],[353.955,800.421],[445.194,800.421],[423.15,498.188],[451.806,476.454],[559.574,307.854],[559.657,304.315],[555.336,307.854],[419.812,451.472],[405.466,233.849],[399.438,233.849],[391.502,338.253]],"i":[[0,0],[0,0],[0,0],[1.461,-20.516],[0.852,0.856],[7.108,16.67],[0,-1.755],[-18.37,-7.259],[-0.199,-0.072],[10.888,-98.55],[0,0],[10.603,147.801],[-11.399,10.307],[-25.785,65.459],[-0.038,1.025],[4.525,-9.086],[54.499,5.328],[0,12.327],[2.01,-3.914],[4.352,-61.651]],"o":[[0,0],[0,0],[-1.247,17.671],[-0.884,-1.346],[-4.38,0.4],[-1.174,-2.752],[0.425,11.449],[0.207,0.082],[-8.84,122.973],[0,0],[0,0],[7.753,-4.403],[62.149,-56.198],[0,-1.309],[0.167,-4.537],[-33.519,67.308],[-7.787,-109.456],[0,-1.146],[-0.657,1.282],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.572549,0.388235,0.231373]},"r":2}]},{"ty":4,"st":0,"ip":0,"op":500,"ks":{"a":{"a":0,"k":[368.180573,279.96376]},"p":{"a":0,"k":[369.100495,279.96376]}},"shapes":[{"ty":"sh","ks":{"a":1,"k":[{"t":0,"s":[{"v":[[646.186,374.152],[408.83,559.276],[201.888,540.103],[16.7644,208.202],[260.07,227.375],[535.111,1.25964],[646.186,374.152]],"i":[[0,0],[101.598,3.526],[79.339,15.338],[-65.4546,131.57],[-51.129,-75.592],[-287.735,-13.75204],[97.851,-120.11]],"o":[[89.917,152.86],[-35.922,0],[-99.173,-19.174],[52.3636,-105.256],[-28.209,-81.102],[287.736,13.75206],[0,0]],"c":false}],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":240,"s":[{"v":[[646.186,374.152],[408.83,559.276],[198.66893,546.089901],[28.789557,212.178792],[260.07,227.375],[535.111,1.25964],[646.186,374.152]],"i":[[0,0],[100.45015,18.807452],[79.339,15.338],[-63.551862,169.471632],[-51.129,-75.592],[-282.898477,-7.00272],[97.851,-120.11]],"o":[[83.825995,171.937901],[-35.922,0],[-88.032278,-20.003427],[41.278696,-110.076523],[-28.209,-81.102],[235.116947,5.819961],[0,0]],"c":false}],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":500,"s":[{"v":[[646.186,374.152],[408.83,559.276],[201.888,540.103],[16.7644,208.202],[260.07,227.375],[535.111,1.25964],[646.186,374.152]],"i":[[0,0],[101.598,3.526],[79.339,15.338],[-65.4546,131.57],[-51.129,-75.592],[-287.735,-13.75204],[97.851,-120.11]],"o":[[89.917,152.86],[-35.922,0],[-99.173,-19.174],[52.3636,-105.256],[-28.209,-81.102],[287.736,13.75206],[0,0]],"c":false}],"i":{"x":1,"y":1},"o":{"x":0,"y":0}}]}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.396078,0.596078,0.345098]}}]}]}

src/json/treeLightGreenAnimation.json

@@ -0,0 +1 @@
+{"v":"5.5.2","meta":{"a":"SVGator","d":"SVGator, the ultimate SVG animation generator now supports Lottie: a thoughtfully designed, intuitive interface, right at your fingertips.","g":"Made in SVGator (https://www.svgator.com/)","tc":""},"metadata":{"filename":"Baum 01.json","customProps":{"k":["SVGator","svgator","lottie animation","svg animation","lottie","svg"],"version":1,"app":"https://app.svgator.com/","site":"https://www.svgator.com/","date":"2024-06-15T17:58:25.965Z"}},"nm":"Baum 01","ddd":0,"assets":[],"w":324,"h":801,"ip":0,"op":500,"fr":100,"fonts":{"list":[]},"layers":[{"ty":4,"st":0,"ip":0,"op":500,"ks":{"a":{"a":0,"k":[150.536247,527.350693]},"p":{"a":0,"k":[150.536247,527.350693]}},"shapes":[{"ty":"sh","ks":{"a":0,"k":{"v":[[149.048,313.324],[157.799,256.224],[162.616,256.224],[162.184,360.812],[210.49,296.729],[213.928,297.894],[208.37,311.675],[208.37,311.675],[166.81,371.741],[162.12,374.524],[161.887,424.306],[210.957,391.133],[212.626,392.949],[161.827,437.162],[160.06,800.421],[87.1445,800.421],[147.016,327.336],[143.254,325.667],[113.756,262.829],[116.039,261.895],[149.048,313.324]],"i":[[0,0],[-0.384,0.9],[0,-1.101],[0.258,-56.147],[-12.119,28.022],[0,-3.171],[1.909,-4.996],[0,0],[24.291,-14.894],[1.454,-0.83],[0.082,-17.366],[-16.049,16.105],[1.081,-2.299],[23.569,-1.975],[0,0],[0,0],[-16.695,115.649],[1.353,0.637],[0.517,16.569],[-1.428,-3.983],[-13.242,-0.787]],"o":[[5.048,-34.662],[1.606,-3.76],[0,7.618],[19.352,-2.475],[2.151,-4.973],[-1.862,4.111],[0,0],[-7.648,20.004],[-1.675,1.027],[-0.072,15.707],[12.672,1.492],[2.987,-2.997],[-7.248,14.249],[-0.751,158.6],[0,0],[11.8273,-128.666],[-1.156,-0.478],[-22.356,-10.506],[0,-2.541],[8.242,22.984],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.572549,0.388235,0.231373]},"r":2}]},{"ty":4,"st":0,"ip":0,"op":500,"ks":{"a":{"a":0,"k":[162.200076,251.334518]},"p":{"a":0,"k":[162.200076,251.334518]},"r":{"a":1,"k":[{"t":0,"s":[0],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":250,"s":[3],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":500,"s":[0],"i":{"x":1,"y":1},"o":{"x":0,"y":0}}]}},"shapes":[{"ty":"sh","ks":{"a":1,"k":[{"t":0,"s":[{"v":[[33.4181,481.664],[141.038,457.065],[303.268,416.887],[249.066,346.218],[322.454,180.329],[236.358,180.329],[128.738,1.98791],[61.0916,226.452],[2.66948,278.724],[64.1665,361.745],[33.4181,481.664]],"i":[[0,0],[-21.524,27.674],[-22.275,66.826],[44.073,-7.174],[9.839,34.439],[24.599,-14.349],[71.337,-17.21911],[-7.1747,-67.647],[12.29942,-44.278],[-25.6237,-9.224],[-34.43835,-46.737]],"o":[[34.4383,46.738],[51.247,5.125],[12.35,-37.049],[32.798,-36.898],[-9.84,-34.438],[-6.15,-66.622],[-71.3362,17.21919],[-14.3493,-1.025],[-12.2994,44.278],[-24.5988,20.499],[0,0]],"c":false}],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":250,"s":[{"v":[[33.4181,481.664],[141.038,457.065],[303.268,416.887],[249.066,346.218],[322.454,180.329],[236.358,180.329],[128.738,1.98791],[61.0916,226.452],[2.66948,278.724],[64.1665,361.745],[33.4181,481.664]],"i":[[0,0],[-22.538911,51.724636],[-31.763392,119.441453],[44.073,-7.174],[7.387389,59.157873],[24.599,-14.349],[71.458695,-16.706893],[-21.87742,-70.26659],[12.29942,-44.278],[-25.6237,-9.224],[-28.113497,-75.594167]],"o":[[31.86635,58.245724],[51.247,5.125],[10.036683,-37.741437],[48.719037,-33.952018],[-4.43811,-35.540182],[4.025159,-82.754877],[-81.572205,19.07141],[-14.3493,-1.025],[-12.2994,44.278],[-24.5988,20.499],[0,0]],"c":false}],"i":{"x":0.58,"y":1},"o":{"x":0.42,"y":0}},{"t":500,"s":[{"v":[[33.4181,481.664],[141.038,457.065],[303.268,416.887],[249.066,346.218],[322.454,180.329],[236.358,180.329],[128.738,1.98791],[61.0916,226.452],[2.66948,278.724],[64.1665,361.745],[33.4181,481.664]],"i":[[0,0],[-21.524,27.674],[-22.275,66.826],[44.073,-7.174],[9.839,34.439],[24.599,-14.349],[71.337,-17.21911],[-7.1747,-67.647],[12.29942,-44.278],[-25.6237,-9.224],[-34.43835,-46.737]],"o":[[34.4383,46.738],[51.247,5.125],[12.35,-37.049],[32.798,-36.898],[-9.84,-34.438],[-6.15,-66.622],[-71.3362,17.21919],[-14.3493,-1.025],[-12.2994,44.278],[-24.5988,20.499],[0,0]],"c":false}],"i":{"x":1,"y":1},"o":{"x":0,"y":0}}]}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.67451,0.713725,0.231373]}}]}]}

src/json/treeMiddleGreenAnimation.json

@@ -0,0 +1 @@
+{"v":"5.5.2","meta":{"a":"SVGator","d":"SVGator, the ultimate SVG animation generator now supports Lottie: a thoughtfully designed, intuitive interface, right at your fingertips.","g":"Made in SVGator (https://www.svgator.com/)","tc":""},"metadata":{"filename":"Baum 02.json","customProps":{"k":["SVGator","svgator","lottie animation","svg animation","lottie","svg"],"version":1,"app":"https://app.svgator.com/","site":"https://www.svgator.com/","date":"2024-06-15T17:55:34.043Z"}},"nm":"Baum 02","ddd":0,"assets":[],"w":312,"h":800,"ip":0,"op":500,"fr":100,"fonts":{"list":[]},"layers":[{"ty":4,"st":0,"ip":0,"op":500,"ks":{"a":{"a":0,"k":[166.468002,511.593781]},"p":{"a":0,"k":[166.468002,511.593781]}},"shapes":[{"ty":"sh","ks":{"a":0,"k":{"v":[[164.059,319.373],[152.639,225.23],[149.675,225.23],[153.652,382.374],[122.842,338.064],[120.039,339.027],[154.225,403.037],[165.598,800],[210.455,800],[180.65,467.449],[212.897,400.537],[209.879,399.493],[178.386,446.53],[165.3,330.063],[187.213,294.158],[185.488,293.623],[164.927,318.573],[164.059,319.373]],"i":[[0,0],[0.302,1.209],[0,-1.157],[-2.283,-82.544],[9.406,22.06],[0,-2.622],[-25.821,-11.82],[0,0],[0,0],[12.359,114.915],[-0.629,17.037],[1.888,-4.455],[8.408,-5.564],[3.918,33.84],[-0.388,9.433],[1.079,-2.285],[4.027,0.333],[0.293,-0.274]],"o":[[-6.521,-55.996],[-0.988,-3.951],[0,9.988],[-7.583,-3.566],[-1.754,-4.112],[0.619,16.677],[4.706,169.117],[0,0],[-4.671,-86.817],[24.165,-14.694],[0,-2.841],[-9.467,22.334],[-4.651,-42.719],[16.591,-6.192],[0,-1.457],[-6.536,13.837],[-0.285,0.259],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.572549,0.388235,0.231373]},"r":2}]},{"ty":4,"st":0,"ip":0,"op":500,"ks":{"a":{"a":0,"k":[156.283304,273.047793]},"p":{"a":0,"k":[156.283304,273.047793]}},"shapes":[{"ty":"sh","ks":{"a":1,"k":[{"t":0,"s":[{"v":[[257.804,386.319],[185.534,513.414],[68.4077,525.874],[75.8839,386.319],[75.8839,306.573],[1.12234,236.796],[68.4077,162.034],[48.4713,5.03508],[160.614,84.7808],[210.455,72.3205],[257.804,236.796],[310.137,306.573],[257.804,386.319]],"i":[[0,0],[53.164,21.598],[51.8343,41.866],[-24.0898,29.074],[-23.2591,21.598],[3.98728,61.803],[-24.0898,-0.83],[-69.7774,23.92372],[-8.307,-36.5501],[-9.969,-4.1534],[-12.461,-2.492],[-12.461,-69.777],[21.597,-3.323]],"o":[[69.777,153.51],[-17.444,21.597],[-51.8346,-41.867],[-55.8219,-11.962],[-23.2591,2.492],[-3.98727,-61.803],[-35.7194,-42.365],[69.7777,-23.92368],[15.949,-19.9364],[84.729,19.9365],[12.46,2.492],[9.968,55.822],[0,0]],"c":false}],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":140,"s":[{"v":[[257.804,386.319],[185.534,513.414],[56.63234,540.198735],[68.4077,399.493],[75.8839,306.573],[6.948509,230.352304],[68.4077,162.034],[68.4077,6.323397],[160.614,84.7808],[210.455,84.7808],[257.804,236.796],[302.341463,306.573],[257.804,386.319]],"i":[[0,0],[83.383796,0],[66.20966,82.204156],[-24.0898,29.074],[-23.2591,21.598],[-14.453478,49.683831],[-24.0898,-0.83],[-70.460705,7.226739],[-8.307,-36.5501],[-9.969,-4.1534],[-12.461,-2.492],[-11.74345,-39.183659],[21.597,-3.323]],"o":[[90.607924,46.381995],[-17.444,21.597],[-41.795542,-51.892235],[-71.073176,-56.256],[-23.2591,2.492],[14.453478,-49.683831],[-35.7194,-42.365],[73.380017,-7.526156],[15.949,-19.9364],[84.729,19.9365],[12.46,2.492],[16.279247,54.31798],[0,0]],"c":false}],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":323,"s":[{"v":[[257.804,386.319],[185.534,513.414],[62.618148,532.916995],[84.635953,411.020777],[84.635953,306.573],[3.986873,233.627849],[68.4077,162.034],[58.273363,5.668503],[160.614,84.7808],[210.455,78.446814],[236.397471,208.672087],[306.304194,306.573],[257.804,386.319]],"i":[[0,0],[68.022066,10.978983],[58.902185,61.698926],[-24.0898,29.074],[-23.2591,21.598],[-5.079426,55.844409],[-24.0898,-0.83],[-70.113358,15.714371],[-8.307,-36.5501],[-9.969,-4.1534],[-12.461,-2.492],[-12.108204,-54.735274],[21.597,-3.323]],"o":[[80.018871,100.838731],[-17.444,21.597],[-46.89873,-46.796074],[-63.320444,-33.739884],[-23.2591,2.492],[5.079431,-55.844408],[-35.7194,-42.365],[71.54884,-15.861565],[15.949,-19.9364],[84.729,19.9365],[12.46,2.492],[13.07103,55.082524],[0,0]],"c":false}],"i":{"x":0.58,"y":1},"o":{"x":0.42,"y":0}},{"t":500,"s":[{"v":[[257.804,386.319],[185.534,513.414],[68.4077,525.874],[75.8839,386.319],[75.8839,306.573],[1.12234,236.796],[68.4077,162.034],[48.4713,5.03508],[160.614,84.7808],[210.455,72.3205],[257.804,236.796],[310.137,306.573],[257.804,386.319]],"i":[[0,0],[53.164,21.598],[51.8343,41.866],[-24.0898,29.074],[-23.2591,21.598],[3.98728,61.803],[-24.0898,-0.83],[-69.7774,23.92372],[-8.307,-36.5501],[-9.969,-4.1534],[-12.461,-2.492],[-12.461,-69.777],[21.597,-3.323]],"o":[[69.777,153.51],[-17.444,21.597],[-51.8346,-41.867],[-55.8219,-11.962],[-23.2591,2.492],[-3.98727,-61.803],[-35.7194,-42.365],[69.7777,-23.92368],[15.949,-19.9364],[84.729,19.9365],[12.46,2.492],[9.968,55.822],[0,0]],"c":false}],"i":{"x":1,"y":1},"o":{"x":0,"y":0}}]}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.6,0.733333,0.419608]}}]}]}

src/tsx/components/hero/ProjectHeroContent.tsx

@@ -1,10 +1,10 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import ProcessCard from './../cards/ProcessCard';
 import { steps } from '../../../data/processSteps';
 import StepCircle from './../process/StepCircle';
 
 function ProjectHeroContent() {
-    const activeStep = steps.findIndex(step => step.isCurrent);
+    const activeStep = useMemo(() => steps.findIndex(step => step.isCurrent), []);
 
     const [visibleStep, setVisibleStep] = useState(activeStep);
 

src/tsx/components/homepage/HomepageDevider.tsx

@@ -0,0 +1,20 @@
+function HomepageDevider() {
+    return (
+        <section>
+            <figure aria-hidden="true" className="overflow-hidden absolute -left-[50%] -z-10 -bottom-96 sm:-left-[20%] md:-left-[10%] lg:-bottom-80 2xl:left-auto">
+                <svg aria-hidden="true" className="w-[140%] sm:block sm:w-[140%] md:w-[120%] 2xl:w-screen" width="1774" height="973" viewBox="0 0 1774 973" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M1031.42 463.293C706.291 573.793 283.625 419.293 283.625 419.293C283.625 419.293 38.6662 329.293 9.62605 450.293C-26.3741 600.293 45.4088 794.696 237.967 773.108C545.702 738.608 655.626 688.293 1024.62 843.793C1282.62 952.517 1403.81 970.255 1475.12 972.793C1615.62 977.793 1710.11 891.293 1702.62 802.793C1695.13 714.293 1605.12 620.793 1564.62 585.293C1524.12 549.793 1303.24 370.909 1031.42 463.293Z" fill="#4C7741"/>
+                </svg>
+            </figure>
+
+            <figure className="overflow-hidden absolute -left-[50%] -z-50 -bottom-96 sm:-left-[20%] md:-left-[10%] lg:-bottom-80 2xl:left-auto">
+                <svg aria-hidden="true" className="w-[140%] sm:block sm:w-[140%] md:w-[120%] 2xl:w-screen" width="1774" height="973" viewBox="0 0 1774 973" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M930.302 149.578C781.802 381.078 254.501 449.984 114.501 416.484L243.768 629.878C598.056 669.547 1324.28 759.146 1394.86 800.183C1483.09 851.479 1692.38 759.146 1762.15 586.789C1817.96 448.904 1646.17 237.863 1553.3 149.578C1416.3 -17.4224 1076.49 -78.3149 930.302 149.578Z" fill="#ACB63B" fillOpacity="0.25"/>
+                    <path d="M1308.3 225.623C1405.1 173.223 1466.35 267.578 1534.39 324.15C1613.42 389.856 1655.45 488.299 1620.57 633.982C1609.38 680.694 1458.47 796.079 1411.28 759.145C1373.52 729.598 915.896 596.819 691.802 534.123C791.135 447.623 1008.7 280.623 1084.3 304.623C1178.8 334.623 1187.3 291.123 1308.3 225.623Z" fill="#ACB63B" fillOpacity="0.3"/>
+                </svg>
+            </figure>
+        </section>
+    );
+}
+
+export default HomepageDevider;

src/tsx/components/homepage/HomepageHero.tsx

@@ -0,0 +1,51 @@
+import Lottie from "lottie-react";
+import treeLightGreenAnimation from "../../../json/treeLightGreenAnimation.json";
+import treeMiddleGreenAnimation from "../../../json/treeMiddleGreenAnimation.json"
+import treeDarkGreenAnimation from "../../../json/treeDarkGreenAnimation.json"
+
+function HompageHero() {
+    return (
+        <section className="overflow-hidden relative mx-auto w-screen h-screen max-w-screen-3xl before:bg-background-yellow-dot before:bg-cover before:w-4/5 before:h-[100vh] before:max-h-[45rem] before:absolute before:-right-4 before:bottom-0 before:-z-50 before:bg-no-repeat sm:before:-right-10 md:before:max-h-[70rem] 2xl:before:right-0 2xl:before:bg-contain">
+            <article className="max-w-208 mx-auto px-4 pt-28 mb-8 md:px-6 lg:mb-14 lg:pt-36 lg:max-w-screen-lg xl:max-w-screen-xl xl:pt-44">
+                <div className="max-w-[30rem] 2xl:max-w-[40rem]">
+                    <h1 className="font-lato font-bold text-2xl mb-6 lg:text-4xl xl:text-5xl">
+                        Wir machen smarte Bewässerung von Bäumen und Beeten möglich!
+                    </h1>
+                    <p>
+                        Ut cillum minim eu duis cupidatat culpa proident voluptate sint aute mollit nulla velit voluptate.
+                        Consequat occaecat adipisicing culpa.
+                    </p>
+                </div>
+            </article>
+
+            <figure aria-hidden="true" className="animate-move absolute bottom-96 md:bottom-1/2 right-2 -z-40 lg:right-1/3">
+                <svg className="w-[85%]" width="855" height="178" viewBox="0 0 855 178" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M0.000244141 177.46L811.67 169.552C811.67 169.552 875.2 171.712 848 61.3116C820.8 -49.0884 666.334 13.5888 609.5 72.2555C488.7 -70.5445 378.167 47.0888 338 123.755C242.5 98.96 202.167 144.46 195 163.46C195 163.46 174.5 157.46 163 157.46C138.132 155.845 129.5 162.46 125 166.46C125 166.46 112.465 169.553 96.0002 167.96C84.0002 166.799 70.1939 166.472 52.5002 167.96C25.0002 171.96 0.000244141 174.625 0.000244141 177.46Z" fill="#F5F5F5" fillOpacity="0.75"/>
+                </svg>
+            </figure>
+
+            <figure aria-hidden="true" className="absolute bottom-10 right-[5%] -z-20 xs:bottom-16 md:right-96 lg:right-[28rem] xl:bottom-32 2xl:right-[40rem] 3xl:right-[40%] md:landscape:bottom-0 lg:landscape:bottom-16">
+                <Lottie
+                    aria-hidden="true"
+                    className="h-[65vh] max-h-[30rem] md:max-h-none md:min-h-96 md:h-[60vh]"
+                    animationData={treeLightGreenAnimation} />
+            </figure>
+
+            <figure aria-hidden="true" className="hidden absolute right-64 -z-10 bottom-28 lg:block xl:bottom-48 2xl:right-[28rem] 2xl:bottom-28 3xl:right-[30%] landscape:hidden lg:landscape:block">
+                <Lottie
+                    aria-hidden="true"
+                    className="h-[40vh] md:min-h-96"
+                    animationData={treeMiddleGreenAnimation} />
+            </figure>
+
+            <figure aria-hidden="true" className="hidden absolute -right-20 -z-30 bottom-16 md:block lg:bottom-32 xl:bottom-48 2xl:right-28 2xl:bottom-28 3xl:right-[12%] landscape:bottom-4 lg:landscape:bottom-32">
+                <Lottie
+                    aria-hidden="true"
+                    className="h-[55vh] md:min-h-96"
+                    animationData={treeDarkGreenAnimation} />
+            </figure>
+        </section>
+    );
+}
+
+export default HompageHero;

src/tsx/components/sections/Introduction.tsx

@@ -37,7 +37,7 @@ function Introduction() {
     }
 
     return (
-        <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-52 xl:grid-cols-2 xl:max-w-screen-xl">
+        <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">
             <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?