chore: cleanup

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/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%]">
+                <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%]">
+                <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%]">
+                <Lottie
+                    aria-hidden="true"
+                    className="h-[55vh] md:min-h-96"
+                    animationData={treeDarkGreenAnimation} />
+            </figure>
+        </section>
+    );
+}
+
+export default HompageHero;