diff --git a/public/assets/svg/background/general-yellow-dot.svg b/public/assets/svg/background/general-yellow-dot.svg new file mode 100644 index 0000000..c1b101a --- /dev/null +++ b/public/assets/svg/background/general-yellow-dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/json/treeDarkGreenAnimation.json b/src/json/treeDarkGreenAnimation.json new file mode 100644 index 0000000..e0c49dc --- /dev/null +++ b/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]}}]}]} \ No newline at end of file diff --git a/src/json/treeLightGreenAnimation.json b/src/json/treeLightGreenAnimation.json new file mode 100644 index 0000000..90b4205 --- /dev/null +++ b/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]}}]}]} \ No newline at end of file diff --git a/src/json/treeMiddleGreenAnimation.json b/src/json/treeMiddleGreenAnimation.json new file mode 100644 index 0000000..6ea1dfd --- /dev/null +++ b/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]}}]}]} \ No newline at end of file diff --git a/src/tsx/components/homepage/HomepageDevider.tsx b/src/tsx/components/homepage/HomepageDevider.tsx new file mode 100644 index 0000000..dff42f5 --- /dev/null +++ b/src/tsx/components/homepage/HomepageDevider.tsx @@ -0,0 +1,20 @@ +function HomepageDevider() { + return ( +
+ + +
+ +
+
+ ); +} + +export default HomepageDevider; diff --git a/src/tsx/components/homepage/HomepageHero.tsx b/src/tsx/components/homepage/HomepageHero.tsx new file mode 100644 index 0000000..30772b3 --- /dev/null +++ b/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 ( +
+
+
+

+ Wir machen smarte Bewässerung von Bäumen und Beeten möglich! +

+

+ Ut cillum minim eu duis cupidatat culpa proident voluptate sint aute mollit nulla velit voluptate. + Consequat occaecat adipisicing culpa. +

+
+
+ + + + + + + + +
+ ); +} + +export default HompageHero; diff --git a/src/tsx/components/sections/Introduction.tsx b/src/tsx/components/sections/Introduction.tsx index 27e7db0..b00a94a 100644 --- a/src/tsx/components/sections/Introduction.tsx +++ b/src/tsx/components/sections/Introduction.tsx @@ -37,7 +37,7 @@ function Introduction() { } return ( -
+

Was beinhaltet smartes Grünflächenmanagement alles? diff --git a/src/tsx/pages/HomePage.tsx b/src/tsx/pages/HomePage.tsx index 564614a..f7bfa8b 100644 --- a/src/tsx/pages/HomePage.tsx +++ b/src/tsx/pages/HomePage.tsx @@ -1,4 +1,6 @@ import Contact from "../components/sections/Contact"; +import HompageHero from "../components/homepage/HomepageHero"; +import HomepageDevider from "../components/homepage/HomepageDevider"; import Faq from "./../components/sections/Faq"; import Introduction from "./../components/sections/Introduction"; import Process from "./../components/sections/Process"; @@ -7,6 +9,8 @@ import Stakeholder from "./../components/sections/Stakeholder"; function HomePage() { return (
+ + diff --git a/tailwind.config.js b/tailwind.config.js index 82f53f7..23c1341 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -48,9 +48,12 @@ 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-yellow-dot': "url('/assets/svg/background/general-yellow-dot.svg')", }, screens: { + 'xs': '400px', '3xl': '1920px', + 'landscape': {'raw': '(orientation: landscape)'}, }, spacing: { '18': '4.5rem', @@ -59,6 +62,15 @@ export default { boxShadow: { 'mainNav': '-4px 0px 20px 8px rgba(0,0,0,0.1)', }, + keyframes: { + move: { + '0%, 100%': { transform: 'translate(0,0)' }, + '50%': { transform: 'translate(50%,0)' }, + } + }, + animation: { + 'move': 'move 35s linear infinite', + }, }, }, plugins: [],